/* ---------- tipografia ----------
Plus Jakarta Sans (SIL Open Font License), la mas cercana entre las libres
a Samsung Sharp Sans, que es propietaria y no se puede usar sin licencia.
Auto-alojada: sin peticion a fonts.googleapis.com. Variable 200-800, solo
latin y latin-ext = 97 KB contra los 676 KB de los TTF que habia antes.
Las declaraciones viven AQUI y no en cada pagina: cambiar de tipografia
es tocar un archivo, no ocho. */
@font-face{
font-family:'Plus Jakarta Sans';
font-style:italic;
font-weight:200 800; /* variable: un archivo cubre todos los pesos */
font-display:swap;
src:url('/fonts/plusjakartasans-italic-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:italic;
font-weight:200 800; /* variable: un archivo cubre todos los pesos */
font-display:swap;
src:url('/fonts/plusjakartasans-italic-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:200 800; /* variable: un archivo cubre todos los pesos */
font-display:swap;
src:url('/fonts/plusjakartasans-normal-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Plus Jakarta Sans';
font-style:normal;
font-weight:200 800; /* variable: un archivo cubre todos los pesos */
font-display:swap;
src:url('/fonts/plusjakartasans-normal-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
--sam-blue:#1428A0;
--sam-blue-700:#0F1F7A;
--sam-cyan:#00C2FF;
--sam-ink:#0B0D14;
--sam-grey:#6B6F76;
--sam-line:#E4E6EA;
--sam-bg:#F4F6F9;
}
html{scroll-behavior:smooth;}
body{
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
color:var(--sam-ink);
background:#fff;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{letter-spacing:-.025em;}
/* ---------- brand bits ---------- */
.sam-wordmark{
font-weight:800;
letter-spacing:-.06em;
font-size:1.35rem;
color:var(--sam-blue);
line-height:1;
}
.sam-eyebrow{
font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sam-blue);
}
.sam-gradient-text{
background:linear-gradient(100deg,#1428A0 0%,#3C6BE8 45%,#00C2FF 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sam-btn{
display:inline-flex;align-items:center;gap:.55rem;
border-radius:999px;padding:.9rem 1.7rem;
font-weight:600;font-size:.95rem;line-height:1;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.sam-btn-primary{background:var(--sam-blue);color:#fff;box-shadow:0 10px 30px -12px rgba(20,40,160,.75);}
.sam-btn-primary:hover{background:#0F1F7A;transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(20,40,160,.85);}
.sam-btn-ghost{border:1px solid rgba(255,255,255,.55);color:#fff;}
.sam-btn-ghost:hover{background:#fff;color:var(--sam-blue);transform:translateY(-2px);}
.sam-btn-outline{border:1px solid var(--sam-line);color:var(--sam-ink);background:#fff;}
.sam-btn-outline:hover{border-color:var(--sam-blue);color:var(--sam-blue);transform:translateY(-2px);}
/* ---------- nav dropdown ---------- */
.sam-dd{position:relative;}
.sam-dd-panel{
position:absolute;top:100%;left:-1rem;min-width:250px;padding-top:.65rem;
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.sam-dd:hover .sam-dd-panel,.sam-dd:focus-within .sam-dd-panel{opacity:1;visibility:visible;transform:none;}
.sam-dd-card{
background:#fff;border:1px solid var(--sam-line);border-radius:18px;padding:.5rem;
box-shadow:0 30px 70px -40px rgba(11,13,20,.55);
}
.sam-dd-item{display:block;border-radius:12px;padding:.6rem .8rem;font-size:.88rem;font-weight:500;color:#3A3E46;transition:background .2s ease,color .2s ease;}
.sam-dd-item span{display:block;font-size:.72rem;font-weight:500;color:#9AA0A8;margin-top:.1rem;}
.sam-dd-item:hover{background:#F4F6F9;color:var(--sam-blue);}
/* ---------- nav ---------- */
.sam-nav{
position:sticky;top:0;z-index:60;
background:rgba(255,255,255,.82);
backdrop-filter:saturate(160%) blur(14px);
border-bottom:1px solid var(--sam-line);
}
.sam-navlink{position:relative;font-size:.92rem;font-weight:500;color:#3A3E46;padding:.35rem 0;}
.sam-navlink::after{
content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
background:var(--sam-blue);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.sam-navlink:hover{color:var(--sam-blue);}
.sam-navlink:hover::after,.sam-navlink[aria-current="page"]::after{transform:scaleX(1);}
.sam-navlink[aria-current="page"]{color:var(--sam-blue);font-weight:700;}
/* ---------- cards / surfaces ---------- */
.sam-card{
background:#fff;border:1px solid var(--sam-line);border-radius:20px;
transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.sam-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px -30px rgba(11,13,20,.35);border-color:#cfd6f5;}
.sam-tile-media{overflow:hidden;border-radius:16px;}
.sam-tile-media img{transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.sam-card:hover .sam-tile-media img,.sam-zoom:hover img{transform:scale(1.06);}
/* Opacidad del hero afinada 2 veces (2026-08-10/11): el original (.92/.72/.35)
tapaba las fotos y la primera rebaja (.78/.52/.15) quedó muy clara; esto es
el punto medio. El degradado sigue más fuerte donde vive el texto. */
.sam-hero-overlay{
background:
linear-gradient(90deg,rgba(4,7,22,.85) 0%,rgba(4,7,22,.70) 45%,rgba(4,7,22,.40) 100%),
linear-gradient(180deg,rgba(4,7,22,.29) 0%,rgba(4,7,22,.12) 40%,rgba(4,7,22,.37) 100%);
}
.sam-mesh{
background:
radial-gradient(60% 60% at 15% 20%,rgba(20,40,160,.18) 0%,transparent 60%),
radial-gradient(50% 50% at 85% 15%,rgba(0,194,255,.20) 0%,transparent 60%),
radial-gradient(55% 55% at 70% 90%,rgba(60,107,232,.16) 0%,transparent 60%),
#f4f6f9;
}
.sam-rule{height:1px;background:linear-gradient(90deg,var(--sam-blue),rgba(0,194,255,.15));}
/* ---------- windfree airflow animation ---------- */
.wf-dots{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.wf-dot{
position:absolute;top:-8px;width:6px;height:6px;border-radius:999px;
background:rgba(255,255,255,.75);
animation:wfFall linear infinite;
}
/* Cada copo cae SU distancia (--wf-caida, la pone site.js cuando el
contenedor trae data-caida="min-max") y se va desvaneciendo en el
trayecto — así no mueren todos en el mismo punto (pedido 2026-08-11). */
@keyframes wfFall{
0%{transform:translateY(-10px) scale(.6);opacity:0;}
10%{opacity:.9;}
55%{opacity:.4;}
100%{transform:translateY(var(--wf-caida,340px)) scale(1.15);opacity:0;}
}
.sam-pulse::before{
content:"";position:absolute;inset:0;border-radius:inherit;
border:1px solid rgba(20,40,160,.35);animation:samPulse 2.8s ease-out infinite;
}
@keyframes samPulse{
0%{transform:scale(.85);opacity:.9;}
100%{transform:scale(1.35);opacity:0;}
}
/* ---------- reveal on scroll (content stays visible if JS never runs) ---------- */
.reveal{opacity:1;}
.reveal.is-in{animation:samReveal .8s cubic-bezier(.2,.7,.3,1) both;}
@keyframes samReveal{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
.reveal-d1.is-in{animation-delay:.09s;}
.reveal-d2.is-in{animation-delay:.18s;}
.reveal-d3.is-in{animation-delay:.27s;}
.reveal-d4.is-in{animation-delay:.36s;}
@media (prefers-reduced-motion:reduce){
.reveal.is-in{animation:none;}
.wf-dot,.sam-pulse::before{animation:none;}
}
/* ---------- marquee ---------- */
.sam-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.sam-marquee-track{display:flex;gap:3rem;width:max-content;animation:samScroll 28s linear infinite;}
@keyframes samScroll{to{transform:translateX(-50%);}}
/* ---------- misc ---------- */
.sam-stat{font-variant-numeric:tabular-nums;letter-spacing:-.04em;}
.sam-chip{
display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;
border:1px solid var(--sam-line);background:#fff;padding:.4rem .85rem;
font-size:.78rem;font-weight:600;color:#3A3E46;
}
.sam-chip.is-active{background:var(--sam-blue);border-color:var(--sam-blue);color:#fff;}
/* ---------- hero: carrusel de obra ----------
Fundido cruzado entre fotos. Todas apiladas en la misma caja: la visible
lleva .is-on. Se anima solo la opacidad (compositable en GPU) para no
pelear con los copos `wf-dot` que van encima. */
.sam-hero-slides{position:absolute;inset:0;overflow:hidden;background:#060A1E;}
.sam-hero-slide{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity 1.4s ease-in-out;will-change:opacity;
}
.sam-hero-slide.is-on{opacity:.95;}
/* Puntos de control: pequeños y discretos, sobre el degradado del hero. */
.sam-hero-dots{
position:absolute;left:0;right:0;bottom:1.25rem;z-index:2;
display:flex;justify-content:center;gap:.5rem;
}
.sam-hero-dot{
width:28px;height:3px;border-radius:999px;border:0;padding:0;cursor:pointer;
background:rgba(255,255,255,.32);transition:background .3s ease;
}
.sam-hero-dot:hover{background:rgba(255,255,255,.6);}
.sam-hero-dot[aria-current="true"]{background:#7FD9FF;}
.sam-hero-dot:focus-visible{outline:2px solid #7FD9FF;outline-offset:3px;}
/* Sin animación: se muestra la primera foto y se ocultan los controles. */
@media (prefers-reduced-motion:reduce){
.sam-hero-slide{transition:none;}
.sam-hero-dots{display:none;}
}
/* ---------- video testimonial ---------- */
.sam-video{
width:100%;aspect-ratio:16/9;border-radius:1.25rem;background:#000;
display:block;box-shadow:0 40px 90px -60px rgba(0,0,0,.9);
}
/* ---------- directorio comercial ---------- */
.sam-dir-card{
border:1px solid var(--sam-line);border-radius:1rem;background:#fff;
padding:1.1rem 1.25rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.sam-dir-card:hover{
border-color:rgba(20,40,160,.35);
box-shadow:0 18px 40px -32px rgba(11,13,20,.55);
}
/* El contacto es la acción: se ve como enlace y se toca cómodo en móvil. */
.sam-dir-link{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.85rem;color:var(--sam-blue);font-weight:600;
padding:.15rem 0;white-space:nowrap;max-width:100%;
}
.sam-dir-link:hover{text-decoration:underline;}
/* Correos largos (@partner.samsung.com): en pantallas angostas se achica la
letra en vez de partir el correo y dejar el ".com" colgando en otra línea. */
@media (max-width:420px){ .sam-dir-link{font-size:.76rem;} }
/* ---------- logotipo oficial ----------
El wordmark de Samsung es lettering a medida (la "A" no lleva travesaño):
no se puede reproducir con una tipografía, tiene que ser el SVG. Se sirve
como ![]()
—dos archivos, azul y blanco— en vez de inline para que el
navegador lo cachee una sola vez entre páginas. */
.sam-logo{display:block;height:1.15rem;width:auto;}
@media (min-width:640px){ .sam-logo{height:1.3rem;} }
.sam-logo-footer{height:1.4rem;}
/* Aire mínimo alrededor del logo, según práctica de marca: nunca pegado a
otro elemento. Se reserva con padding para no depender del layout. */
.sam-logo-lockup{display:flex;align-items:center;gap:.6rem;padding-block:.25rem;}
/* Icono de grupo del directorio: alineado a la línea base del título y en el
azul de marca, para que lea como parte del encabezado y no como adorno. */
.sam-dir-ico{flex:0 0 auto;color:var(--sam-blue);}
/* Grupos del directorio: un tinte de fondo por departamento —muy suave— para
que el ojo separe las áreas al escanear, con el icono y el hover de las
tarjetas en el acento del grupo. Los colores viven en el HTML
(--dir-tinte / --dir-acento) porque son contenido editorial: un área nueva
no toca este CSS. */
.sam-dir-grupo{border-radius:1.5rem;background:var(--dir-tinte,#F6F8FA);padding:1.5rem 1.25rem;}
@media (min-width:768px){ .sam-dir-grupo{padding:2rem;} }
.sam-dir-grupo .sam-dir-ico{color:var(--dir-acento,var(--sam-blue));}
.sam-dir-grupo .sam-dir-card:hover{border-color:var(--dir-acento,var(--sam-blue));}
/* Crédito de fotografía como tooltip: icono discreto en la esquina de la
imagen; el texto (attr data-credito) aparece al pasar el cursor o enfocar
con teclado. Así la atribución CC exigida no ensucia el pie de página. */
.sam-credito{position:absolute;right:.6rem;bottom:.6rem;z-index:2;display:grid;place-items:center;
width:1.6rem;height:1.6rem;border-radius:9999px;background:rgba(11,13,20,.55);color:#fff;
backdrop-filter:blur(2px);cursor:default;}
.sam-credito::after{content:attr(data-credito);position:absolute;right:0;bottom:calc(100% + .5rem);
width:max-content;max-width:250px;background:#0B0D14;color:#fff;font-size:.68rem;line-height:1.45;
font-weight:600;text-align:left;padding:.5rem .7rem;border-radius:.6rem;opacity:0;pointer-events:none;
transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;
box-shadow:0 12px 30px -12px rgba(0,0,0,.5);}
.sam-credito:hover::after,.sam-credito:focus-visible::after{opacity:1;transform:none;}
/* Toggle Colombia/Global de la página de casos: pastilla segmentada que vive
encima de los chips de categoría. La región activa va en azul de marca. */
.sam-region-btn{border-radius:9999px;padding:.5rem 1.4rem;font-size:.85rem;font-weight:700;
color:#4A4E56;transition:background .25s ease,color .25s ease;}
.sam-region-btn:hover{color:#0B0D14;}
.sam-region-btn.is-active{background:var(--sam-blue);color:#fff;}
/* Flecha de "seguir leyendo": desplazada un pelo hacia abajo para sentarse
sobre la línea base del texto que acompaña. */
.sam-flecha{display:inline-block;vertical-align:-.12em;}
/* ---------- tracking de titulares ----------
Plus Jakarta Sans deja mucho aire alrededor de la puntuación en pesos altos:
el punto mide 26,1 px a 64/800 contra los 20,5 de Manrope, y "escucha." se
leía como "escucha .". El tracking negativo —práctica estándar en tamaños
de display— lo corrige y de paso aprieta el titular, que es como se compone
la tipografía de marca. */
h1,h2{letter-spacing:-.025em;}
h3{letter-spacing:-.01em;}
/* ---------- modal de contacto ----------
El formulario del home dentro de un