/* ============================================================================
   QUICKLII · styles.css  (auto-contenido)
   Orden: @font-face → tokens → base → componentes → secciones → responsive
   Marca: #0d4b70 #092634 #166e92 #00a58f #f2f2f2 · Tipografía: Myriad Pro
   ============================================================================ */

/* ----------------------------- 1. FUENTES --------------------------------- */
@font-face{font-family:"Myriad Pro";src:url("assets/fonts/MyriadPro-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("assets/fonts/MyriadPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("assets/fonts/MyriadPro-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("assets/fonts/MyriadPro-SemiboldIt.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("assets/fonts/MyriadPro-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("assets/fonts/MyriadPro-BoldIt.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

/* ----------------------------- 2. TOKENS ---------------------------------- */
:root{
  /* marca */
  --ocean:#0d4b70; --midnight:#092634; --cerulean:#166e92; --teal:#00a58f; --cloud:#f2f2f2;
  --ocean-700:#0b4060; --midnight-900:#05151d; --teal-500:#14ac98; --teal-700:#008e7b;
  --ocean-rgb:13 75 112; --midnight-rgb:9 38 52; --teal-rgb:0 165 143; --cloud-rgb:242 242 242;
  /* texto */
  --ink:#0e2f40; --ink-soft:#3a515d; --on-dark:#f2f2f2; --on-dark-soft:rgb(242 242 242 / .82);
  /* tipografía */
  --font:"Myriad Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fw-light:300; --fw:400; --fw-semibold:600; --fw-bold:700;
  --fs-caption:clamp(.75rem,.72rem + .15vw,.8125rem);
  --fs-small:clamp(.875rem,.85rem + .15vw,.9375rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.0625rem);
  --fs-lead:clamp(1.125rem,1.05rem + .45vw,1.375rem);
  --fs-h4:clamp(1.4rem,1.2rem + .9vw,2rem);
  --fs-h3:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  --fs-h2:clamp(2.1rem,1.6rem + 2.4vw,3.5rem);
  --fs-h1:clamp(2.6rem,1.9rem + 3.4vw,4.75rem);
  --lh-tight:1.08; --lh-snug:1.2; --lh-normal:1.6;
  /* layout */
  --container:1200px; --gutter:clamp(1.25rem,.6rem + 3vw,3rem); --header-h:84px; --measure:60ch;
  /* radios */
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:40px; --r-pill:999px;
  /* sombras */
  --sh-sm:0 2px 10px rgb(var(--midnight-rgb)/.10);
  --sh-md:0 14px 40px rgb(var(--midnight-rgb)/.14);
  --sh-lg:0 28px 70px rgb(var(--midnight-rgb)/.22);
  --sh-teal:0 16px 40px rgb(var(--teal-rgb)/.30);
  /* motion */
  --dur:.45s; --dur-slow:.8s; --ease:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.4,.64,1);
}

/* ----------------------------- 3. BASE ------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--cloud);color:var(--ink);
  font-family:var(--font);font-weight:var(--fw);font-size:var(--fs-body);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:-.01em}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
.accent{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
::selection{background:var(--teal);color:#fff}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:var(--fs-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:var(--fw-semibold)}
.lead{font-size:var(--fs-lead);line-height:1.45}
.measure{max-width:var(--measure)}

/* ----------------------------- 3b. UTILIDADES DE CAPAS -------------------- */
.relative{position:relative}
.absolute{position:absolute}
.inset-0{top:0;right:0;bottom:0;left:0}
.z-0{z-index:0}
.z-10{z-index:10}
.z-20{z-index:20}
.object-cover{object-fit:cover}
.overflow-hidden{overflow:hidden}
.w-full{width:100%}
.h-full{height:100%}
.block{display:block}
.min-h-\[420px\]{min-height:420px}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.text-4xl{font-size:2.25rem}
.font-extrabold{font-weight:700}
.text-white{color:#fff}
.tracking-tight{letter-spacing:-.025em}
.mb-4{margin-bottom:1rem}
.text-lg{font-size:1.125rem}
.text-white\/80{color:rgb(255 255 255/.8)}
.max-w-2xl{max-width:42rem}
.mx-auto{margin-left:auto;margin-right:auto}
.font-medium{font-weight:500}
.leading-relaxed{line-height:1.625}
.text-center{text-align:center}
.px-4{padding-left:1rem;padding-right:1rem}
.object-contain{object-fit:contain}
.w-16{width:4rem}
.h-16{height:4rem}
.-top-6{top:-1.5rem}
.-right-6{right:-1.5rem}
.drop-shadow-md{filter:drop-shadow(0 4px 6px rgb(0 0 0/.15)) drop-shadow(0 2px 3px rgb(0 0 0/.1))}
.mb-0{margin-bottom:0}
.text-3xl{font-size:1.875rem}
.font-bold{font-weight:700}
.leading-tight{line-height:1.2}
.font-\[\'Myriad_Pro\'\2c _sans-serif\]{font-family:"Myriad Pro",sans-serif}
.top-0{top:0}
.left-0{left:0}
.right-0{right:0}
.z-11{z-index:11}
.h-\[450px\]{height:450px}
.bg-white{background:#fff}
.p-8{padding:2rem}
.mt-6{margin-top:1.5rem}
.top-2{top:.5rem}
.right-4{right:1rem}
.w-12{width:3rem}
.h-12{height:3rem}
.min-h-\[550px\]{min-height:550px}
.rounded-l-\[3rem\]{border-top-left-radius:3rem;border-bottom-left-radius:3rem}
@media (min-width:768px){
  .md\:text-6xl{font-size:3.75rem}
  .md\:text-xl{font-size:1.25rem}
  .md\:w-20{width:5rem}
  .md\:h-20{height:5rem}
  .md\:text-5xl{font-size:3rem}
  .md\:min-h-\[650px\]{min-height:650px}
  .md\:w-\[50\%\]{width:50%}
  .md\:right-8{right:2rem}
  .md\:p-12{padding:3rem}
  .md\:rounded-l-\[5rem\]{border-top-left-radius:5rem;border-bottom-left-radius:5rem}
}
@media (min-width:1024px){
  .lg\:text-6xl{font-size:3.75rem}
  .lg\:w-\[45\%\]{width:45%}
  .lg\:p-16{padding:4rem}
}

/* ----------------------------- 4. NAV ------------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:200;display:flex;align-items:center;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),height var(--dur) var(--ease)}
.nav__inner{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__logo img{height:30px;width:auto;transition:filter var(--dur) var(--ease)}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.5rem)}
.nav__links a{color:var(--on-dark);font-size:1.0625rem;position:relative;padding:.4rem 0;transition:color .25s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--teal);transition:right .3s var(--ease)}
.nav__links a:hover::after{right:0}
.nav__links a.is-active{color:var(--teal);font-weight:var(--fw-semibold)}
.nav__links a.is-active::after{right:0}
/* nav con fondo al hacer scroll */
.nav.scrolled{background:rgb(var(--midnight-rgb)/.92);backdrop-filter:blur(12px);box-shadow:var(--sh-sm);height:68px}
/* nav sobre secciones claras (páginas sin héroe oscuro arriba) */
.nav--solid{background:rgb(var(--midnight-rgb)/.96)}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;color:var(--on-dark)}

/* ----------------------------- 5. BOTONES --------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:var(--fw-semibold);font-size:var(--fs-small);
  border:0;cursor:pointer;border-radius:var(--r-pill);padding:.85rem 1.7rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.btn--teal{background:var(--teal);color:#fff;box-shadow:var(--sh-teal)}
.btn--teal:hover{background:var(--teal-700);transform:translateY(-3px);box-shadow:0 22px 50px rgb(var(--teal-rgb)/.42)}
.btn--ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.btn--ghost:hover{background:var(--teal);color:#fff;transform:translateY(-3px)}
.btn--lg{padding:1.05rem 2.4rem;font-size:var(--fs-body)}
.btn .chev{font-size:.7em}

/* ----------------------------- 6. SECCIONES / FONDOS ---------------------- */
.section{position:relative;padding-block:clamp(3.5rem,2rem + 7vw,8rem)}
.section--dark{background:var(--midnight);color:var(--on-dark)}
.section--ocean{background:var(--ocean);color:var(--on-dark)}
.section--cerulean{background:var(--cerulean);color:var(--on-dark)}
.section--light{background:#fff;color:var(--ink)}
.section--cloud{background:var(--cloud);color:var(--ink)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--ocean h2,.section--cerulean h2{color:#fff}

/* HÉROE base con foto + duotono azul/teal */
.hero{position:relative;min-height:clamp(560px,82vh,860px);display:grid;place-items:center;text-align:center;
  padding-top:var(--header-h);overflow:hidden;color:#fff;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,rgb(var(--midnight-rgb)/.92) 0%,rgb(13 75 112/.78) 45%,rgb(var(--teal-rgb)/.55) 100%);
  mix-blend-mode:normal}
/* variante con <video> de fondo: el video pinta por encima (z-0/z-10/z-20), así que el ::after heredado (z:-1) se desactiva y el duotono lo da .hero__video-overlay */
.hero--video::after{content:none}
/* héroe a pantalla completa (Clientes): fuerza 100vh exacto, sin depender del min-height clamp base */
.hero--full{height:100vh;min-height:100vh;width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0}
.hero__video-overlay{background:linear-gradient(150deg,rgb(var(--midnight-rgb)/.85) 0%,rgb(13 75 112/.65) 45%,rgb(var(--teal-rgb)/.45) 100%)}
/* máscara de transición: funde la base del video hacia el fondo oscuro inferior (--midnight), sin corte horizontal */
.hero__fade{position:absolute;left:0;right:0;bottom:0;z-index:12;pointer-events:none;height:300px;
  background:linear-gradient(to bottom,rgb(var(--midnight-rgb)/0) 0%,var(--midnight) 48%)}
/* variante con fondo animado <canvas> (plexus): el canvas pinta por encima (z-0), el ::after heredado (z:-1) se desactiva
   y el duotono lo da este degradado propio, en ciclo ultra-lento */
.hero--plexus::after{content:none}
.hero--plexus{height:100vh;min-height:100vh;width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0;
  background-color:var(--midnight);background-repeat:no-repeat;
  background-image:
    radial-gradient(ellipse 140% 90% at 50% 100%, rgb(var(--teal-rgb)/.32) 0%, rgb(var(--teal-rgb)/0) 58%),
    radial-gradient(ellipse 90% 70% at 50% 40%, rgb(255 255 255/.05) 0%, rgb(255 255 255/0) 62%),
    linear-gradient(135deg, var(--midnight) 0%, var(--ocean) 30%, var(--cerulean) 60%, var(--teal) 100%);
  background-size:160% 140%,120% 100%,320% 320%;
  background-position:40% 100%,40% 30%,10% 25%;
  animation:heroPlexusGradientShift 26s ease-in-out infinite alternate}
@keyframes heroPlexusGradientShift{
  0%{background-position:30% 100%,30% 20%,0% 15%}
  50%{background-position:70% 85%,70% 60%,100% 80%}
  100%{background-position:30% 100%,30% 20%,0% 15%}
}
.hero__inner{max-width:920px;padding-inline:var(--gutter)}
/* jerarquía de 2 líneas del título del hero de Inicio (clases propias, NO tocan .title-2/.l1/.l2
   compartidas con las otras 4 páginas que usan ese mismo patrón de héroe) */
.hero-title{gap:.05em}
.hero-title__line1{font-size:clamp(2.6rem, 2rem + 3vw, 4rem)}
.hero-title__line2{font-size:clamp(2.2rem, 1.8rem + 2.4vw, 3.2rem);margin-top:0}
.hero__icon{width:54px;margin:0 auto 1.1rem;filter:drop-shadow(0 4px 14px rgb(0 0 0/.3))}
.hero h1{margin-bottom:.6rem;text-shadow:0 3px 22px rgb(var(--midnight-rgb)/.5)}
.hero__sub{font-size:var(--fs-lead);max-width:680px;margin:0 auto;color:rgb(255 255 255/.92)}
.hero__sub strong{font-weight:var(--fw-bold)}

/* títulos de dos líneas (patrón de marca) */
.title-2{display:flex;flex-direction:column;gap:.1em}
.title-2 .l1{font-weight:var(--fw-light)}
.title-2 .l2{font-weight:var(--fw-bold)}
/* variante compacta (hero de Servicios): junta las 2 líneas sin solaparlas, sin tocar .title-2 base */
.title-2--tight{gap:.02em}
.hero__sub--top-gap{margin-top:1.1rem}
/* ensancha el héroe de Servicios para que "Tu dosis diaria de contenido," quepa en una sola línea */
.hero__inner--wide{max-width:1100px}

/* ----------------------------- 7. TARJETAS -------------------------------- */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-md);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)}

/* tarjeta de servicio (ícono + título + texto, centrada) */
.svc-card{padding:clamp(2rem, 1.4rem + 1.8vw, 2.6rem);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:2rem;box-shadow:var(--sh-lg)}
.svc-card__icon{width:72px;height:72px;margin:0 auto 1.5rem;object-fit:contain}
.svc-card h3{font-size:1.4rem;margin-bottom:.7rem;color:var(--ink)}
.svc-card p{font-size:var(--fs-small);color:var(--ink-soft);margin:0;line-height:1.55}

/* tarjeta solución con badge de ícono en esquina */
.sol-card{position:relative;padding:2.4rem 1.7rem 2rem;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-md);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sol-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.sol-card__badge{position:absolute;top:-22px;right:-14px;width:64px;height:64px;border-radius:18px;background:var(--teal);
  display:grid;place-items:center;box-shadow:var(--sh-teal)}
.sol-card__badge img{width:34px;height:34px;object-fit:contain}
.sol-card h3{font-size:1.2rem;margin-bottom:.6rem;color:var(--ink)}
.sol-card p{font-size:var(--fs-small);color:var(--ink-soft);margin:0}

/* ----------------------------- 8. REVEAL (motion scroll) ------------------ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal--left{transform:translateX(-40px)} .reveal--right{transform:translateX(40px)}
.reveal--scale{transform:scale(.94)}
.reveal.is-visible.reveal--left,.reveal.is-visible.reveal--right,.reveal.is-visible.reveal--scale{transform:none}
[data-stagger]>*{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-stagger].is-visible>*{opacity:1;transform:none}

/* parallax por cursor */
[data-cursor]{transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform}

/* ----------------------------- 9. SECCIÓN: divisores curvos --------------- */
.curve-top{position:relative;border-top-left-radius:90px;margin-top:-60px;z-index:2}
/* el hero de Inicio es 100vh puro (sin "sobra" bajo el fold) — el solapamiento negativo de
   .curve-top (pensado para los héroes de altura acotada de las otras páginas) se anula aquí
   para que no asome nada de esta sección dentro del alto del hero */
.intro-overlap-section.curve-top{margin-top:0}
.notch-down::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translate(-50%,99%);
  border-left:34px solid transparent;border-right:34px solid transparent;border-top:30px solid var(--midnight)}


/* ----------------------------- 10. INICIO --------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split__media img{border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%}
/* el badge flotante (icono verificado) no debe heredar tamaño/radio/sombra de la foto principal */
.split__media img.w-16{width:4rem;border-radius:0;box-shadow:none}
.split__media img.h-16{height:4rem}
@media (min-width:768px){
  .split__media img.md\:w-20{width:5rem}
  .split__media img.md\:h-20{height:5rem}
}
.split h2{margin-bottom:1.2rem}
.split p{color:var(--ink-soft)}
.split--dark p{color:var(--on-dark-soft)}

/* Bloque "Nos dedicamos a darle vida": grid real de 2 columnas simétricas (1fr/1fr),
   escala de hero, con onda de curvatura grande solo en la esquina superior derecha de la
   tarjeta (clases propias, NO se reutilizan .split/.split__media, también usadas en servicios.html).
   Al ser columnas REALES (no una imagen de fondo absoluta + tarjeta encima), object-position
   sí tiene margen real de recorte que mover — no hace falta ningún transform:scale artificial. */
.intro-overlap-section{padding-block:0}
.intro-overlap{display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:950px}
.intro-overlap__card{position:relative;z-index:2;background:#fff;padding:80px 70px;
  border-radius:0;border-top-right-radius:120px;
  display:flex;flex-direction:column;justify-content:center}
.intro-overlap__text{max-width:460px;text-align:left;margin-left:auto;margin-right:auto}
.intro-overlap__card h2{font-size:clamp(3.2rem, 2.8rem + 1vw, 3.5rem);line-height:1.15;margin-bottom:1.1rem}
.intro-overlap__card p{color:var(--ink-soft);font-size:1.2rem;line-height:1.6}
.intro-overlap__card p+p{margin-top:1rem}
/* margen negativo pequeño para que la curva de la tarjeta revele la foto detrás (efecto "ola"),
   sin afectar el ancho real de la columna a efectos de object-fit/object-position */
.intro-overlap__media{position:relative;z-index:1;overflow:hidden;width:calc(100% + 120px);margin-left:-120px}
.intro-overlap__media img{width:100%;height:100%;object-fit:cover;object-position:30% center;display:block}
@media (max-width:768px){
  .intro-overlap{grid-template-columns:1fr;min-height:auto}
  .intro-overlap__card{padding:2.4rem 1.6rem;
    border-top-right-radius:48px;border-top-left-radius:48px;margin-top:-40px;order:2}
  .intro-overlap__media{height:260px;order:1;margin-left:0;width:100%}
  .intro-overlap__media img{object-position:center}
}

.purpose{text-align:center;max-width:900px;margin-inline:auto}
.purpose .card-band{background:var(--ocean);color:#fff;border-radius:var(--r-xl);padding:clamp(2rem,5vw,3.5rem)}
.purpose__title{font-family:"Myriad Pro",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem, .9rem + 3.2vw, 3.75rem);line-height:.94;margin-bottom:1.1rem}
@media (min-width:768px){.purpose__title{white-space:nowrap}}
/* recorta el mockup de teléfonos: solo asoma la parte superior, solapando el borde inferior del card-band */
.phones{margin-top:-60px;display:flex;justify-content:center;align-items:flex-start;
  overflow:hidden;max-height:clamp(230px,34vw,430px)}
.phones img{filter:drop-shadow(0 30px 60px rgb(var(--midnight-rgb)/.5))}
/* fundido superior de la sección con video: suaviza la costura contra el hero anterior */
.purpose__fade-top{background:linear-gradient(to bottom, #001420 0%, rgb(0 20 32/.7) 55%, rgb(0 20 32/0) 100%);pointer-events:none}

/* Bloque "Hacia dónde vamos": panel blanco full-bleed sobre video, pegado al borde derecho */
/* altura por aspect-ratio (no fija) para que se lea panorámica/cinemática en vez de cuadrada
   en anchos intermedios (~960-1280px); min/max evitan que quede muy baja o excesivamente alta */
.hacia-donde{min-height:480px}
@media (min-width:768px){
  .hacia-donde{aspect-ratio:2/1;min-height:520px;max-height:760px}
}
.hacia-donde__title{font-size:clamp(2.2rem, 1.6rem + 3vw, 3.75rem);font-weight:800;color:var(--ink);line-height:1.05;letter-spacing:-.02em}
.hacia-donde__text{color:var(--ink-soft);font-size:1.05rem;line-height:1.6}

/* ----------------------------- 11. SERVICIOS ------------------------------ */
.cards-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2.5rem, 2rem + 1.5vw, 3rem);
  max-width:1150px;margin-inline:auto}
.steps{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.4rem;align-items:start}
.step{display:flex;gap:clamp(1.2rem, .8rem + 1vw, 1.8rem);align-items:flex-start;margin-bottom:clamp(2.5rem, 2rem + 1.5vw, 3rem)}
.step:last-child{margin-bottom:0}
.step__n{flex:none;width:clamp(64px, 4vw, 80px);height:clamp(64px, 4vw, 80px);border-radius:0;background:var(--teal);color:#fff;
  font-size:clamp(1.875rem, 1.5rem + 1vw, 2.25rem);font-weight:var(--fw-bold);display:grid;place-items:center}
.step h4{color:#fff;margin-bottom:.5rem;font-size:clamp(1.5rem, 1.2rem + 1vw, 1.875rem)}
.step p{color:var(--on-dark-soft);font-size:clamp(1rem, .95rem + .3vw, 1.125rem);line-height:1.65;margin:0;max-width:42rem}
.magic-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2.5rem, 5vw, 5rem);align-items:start;max-width:1150px;margin-inline:auto}
.magic-grid>h2{font-size:clamp(2.8rem, 2rem + 4vw, 4.75rem);line-height:1.1;letter-spacing:-.03em;text-align:left}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.6rem;margin-top:3.2rem}
.sol-grid--bottom{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}

/* ----------------------------- 12. CLIENTES ------------------------------- */
.cat{ text-align:center;margin-bottom:3.5rem}
.cat__title{font-size:var(--fs-h3);color:var(--ink);margin-bottom:1rem}
.cat__cta{margin-bottom:1.8rem}
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;max-width:1040px;margin-inline:auto}
.logo-grid--3{grid-template-columns:repeat(3,1fr);max-width:560px}
.logo-grid--4{grid-template-columns:repeat(4,1fr);max-width:760px}
.logo-grid--2{grid-template-columns:repeat(2,1fr);max-width:400px}
.logo-cell{aspect-ratio:1;background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-sm);
  display:grid;place-items:center;padding:1.1rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.logo-cell img{max-height:80%;max-width:84%;object-fit:contain;filter:grayscale(.15);transition:filter .35s var(--ease),transform .35s var(--ease)}
.logo-cell:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.logo-cell:hover img{filter:none;transform:scale(1.06)}

/* ----------------------------- 13. NOSOTROS ------------------------------- */
.intro-center{text-align:center;max-width:820px;margin-inline:auto}
/* título de 2 líneas sobre las tarjetas de equipo: línea 1 más grande, línea 2 pegada y más pequeña */
.team-lead-title{margin-top:1.5rem;line-height:1.05}
.team-lead-title__l1{font-size:clamp(1.7rem, 1rem + 2.6vw, 2.8rem);line-height:1.05}
.team-lead-title__l2{font-size:clamp(1.3rem, .82rem + 1.8vw, 1.95rem);line-height:1.15;margin-top:.35rem}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.team__photo{aspect-ratio:3/3.4;border-radius:var(--r-md);overflow:hidden;background:transparent;box-shadow:var(--sh-md);margin-bottom:1rem}
/* los assets del equipo traen un marco blanco nativo (~3% del borde) horneado en el PNG:
   el zoom base recorta ese marco por dentro del overflow:hidden del contenedor */
.team__photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1);
  transform:scale(1.15);transition:filter .4s var(--ease),transform .5s var(--ease)}
.team__card:hover .team__photo img{filter:none;transform:scale(1.22)}
.team__photo--empty{background:linear-gradient(160deg,#fff,#e9eef0)}
.team h4{color:#fff;font-size:1.15rem;margin-bottom:.1rem}
.team__role{color:var(--teal);font-style:italic;font-weight:var(--fw-semibold);font-size:var(--fs-small);margin-bottom:.6rem;display:block}
.team p{color:var(--on-dark-soft);font-size:.84rem;line-height:1.5;margin:0}
.team-band{background:linear-gradient(to bottom,#fff 0,#fff 38%,var(--midnight) 38%,var(--midnight) 100%)}
.backing{position:relative;background:var(--cerulean);color:#fff;border-radius:var(--r-xl);padding:clamp(3.2rem,6vw,4.2rem) clamp(2.2rem,5vw,3.6rem) clamp(2.2rem,5vw,3.6rem);text-align:center;max-width:980px;margin:0 auto}
.backing__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:85px;height:85px;object-fit:contain;border-radius:22px;box-shadow:var(--sh-md)}
.backing h2{margin-top:.9rem;margin-bottom:1rem}
.backing p{color:rgb(255 255 255/.9);max-width:780px;margin-inline:auto}

/* ----------------------------- 14. CONTACTO ------------------------------- */
.contact-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,5vw,4.5rem)}
.contact-info h3{color:var(--ink);font-size:1.15rem;margin:0 0 .3rem}
.contact-info p{color:var(--ink-soft);margin:0 0 1.4rem}
.contact-info__logo{width:170px;margin-top:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem}
.field>label{font-weight:var(--fw-bold);color:var(--ink);font-size:var(--fs-small)}
.input{width:100%;padding:.95rem 1.1rem;border:1.5px solid #d4dde1;border-radius:12px;font-family:inherit;
  font-size:var(--fs-body);color:var(--ink);background:#fff;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.input::placeholder{color:#9aa9b0}
.input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgb(var(--teal-rgb)/.14)}
textarea.input{min-height:130px;resize:vertical}
.form-msg{margin-top:1rem;font-weight:var(--fw-semibold);font-size:var(--fs-small);min-height:1.2em}
.form-msg.ok{color:var(--teal-700)} .form-msg.err{color:#c0392b}

/* ----------------------------- 15. BLOG ----------------------------------- */
.blog-hero{min-height:clamp(440px,60vh,620px);display:grid;place-items:center;text-align:center;color:#fff;padding-top:var(--header-h);position:relative;
  background-color:var(--midnight);background-repeat:no-repeat;
  background-image:
    radial-gradient(ellipse 140% 90% at 50% 100%, rgb(var(--teal-rgb)/.32) 0%, rgb(var(--teal-rgb)/0) 58%),
    radial-gradient(ellipse 90% 70% at 50% 40%, rgb(255 255 255/.05) 0%, rgb(255 255 255/0) 62%),
    linear-gradient(135deg, var(--midnight) 0%, var(--ocean) 30%, var(--cerulean) 60%, var(--teal) 100%);
  background-size:160% 140%,120% 100%,320% 320%;
  background-position:40% 100%,40% 30%,10% 25%;
  animation:blogHeroGradientShift 32s ease-in-out infinite alternate}
@keyframes blogHeroGradientShift{
  0%{background-position:30% 100%,30% 20%,0% 15%}
  50%{background-position:70% 85%,70% 60%,100% 80%}
  100%{background-position:30% 100%,30% 20%,0% 15%}
}
.blog-hero__date{color:rgb(255 255 255/.7);margin-top:.5rem}
.filters{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:2.5rem}
.chip{padding:.55rem 1.3rem;border-radius:var(--r-pill);border:1.5px solid #cdd6da;background:transparent;
  color:var(--ink-soft);font-family:inherit;font-size:var(--fs-small);font-weight:var(--fw-semibold);cursor:pointer;transition:all .25s var(--ease)}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.is-active{background:var(--teal);color:#fff;border-color:transparent}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.post{display:flex;flex-direction:column}
.post__img{position:relative;aspect-ratio:4/3.1;border-radius:var(--r-lg);overflow:hidden;background:#eef1f2;box-shadow:var(--sh-sm)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .post__img img{transform:scale(1.05)}
.post__date{position:absolute;top:14px;left:14px;background:var(--ocean);color:#fff;font-size:.75rem;font-weight:var(--fw-bold);padding:.35rem .9rem;border-radius:var(--r-pill)}
.post__tag{color:var(--ink-soft);font-size:var(--fs-small);margin:1rem 0 .2rem}
.post h3{color:var(--ink);font-size:1.3rem;margin-bottom:.2rem}
.post__desc{color:var(--ink-soft);font-size:var(--fs-small);margin-bottom:1rem}
.post .btn{align-self:flex-start;margin-top:auto}

/* ----------------------------- 16. FOOTER --------------------------------- */
.footer{background:var(--midnight-900);color:var(--on-dark-soft);padding:3.2rem 0 2rem}
.footer__inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.footer__logo{width:150px;margin-bottom:1rem}
.footer__col h4{color:#fff;font-size:1rem;margin-bottom:.8rem}
.footer__col a{display:block;color:var(--on-dark-soft);padding:.2rem 0;transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--teal)}
.socials{display:flex;gap:.8rem;margin-top:.4rem}
.socials a{width:42px;height:42px;border-radius:50%;border:1.5px solid rgb(255 255 255/.2);display:grid;place-items:center;color:#fff;transition:all .25s var(--ease)}
.socials a:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-3px)}
.socials svg{width:20px;height:20px}
.footer__bottom{border-top:1px solid rgb(255 255 255/.1);margin-top:2.4rem;padding-top:1.4rem;text-align:center;font-size:var(--fs-small)}

/* ----------------------------- 17. RESPONSIVE ----------------------------- */
@media (max-width:1024px){
  .cards-row{grid-template-columns:repeat(2,1fr)}
  .sol-grid{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .team-band{background:var(--midnight)}
}
@media (max-width:768px){
  :root{--header-h:68px}
  .nav__links{position:fixed;inset:0 0 0 auto;width:min(300px,80vw);flex-direction:column;justify-content:center;
    background:rgb(var(--midnight-rgb)/.98);backdrop-filter:blur(14px);transform:translateX(100%);transition:transform .4s var(--ease);padding:2rem;gap:1.6rem}
  .nav__links.open{transform:none}
  .nav__toggle{display:grid;place-items:center}
  .split,.magic-grid,.contact-grid,.blog-grid,.cards-row,.sol-grid,.sol-grid--bottom{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .logo-grid,.logo-grid--3,.logo-grid--4,.logo-grid--2{grid-template-columns:repeat(2,1fr);max-width:420px}
  .team{grid-template-columns:repeat(2,1fr)}
  .curve-top{border-top-left-radius:48px;margin-top:-30px}
  .phones{margin-top:-20px}
}
@media (max-width:480px){
  .team{grid-template-columns:1fr;max-width:280px;margin-inline:auto}
}

/* ----------------------------- 18. REDUCED MOTION ------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-cursor],.hero__bg{transform:none!important}
}