/* ============================================================
     SIGNO EMPRESARIAL — sistema de marca
     Identidad única y deliberada (no se adapta al tema del SO):
     una agencia no cambia su paleta según el modo claro/oscuro
     del visitante. Todos los colores se declaran explícitamente.
     ============================================================ */

  :root{
    color-scheme: dark;

    /* — paleta de marca (valores exactos del Manual de identificación
       visual — los dos colores principales, que deben predominar) — */
    --navy-corp:  #003869;   /* azul — color principal 1 */
    --teal:       #38b5ab;   /* turquesa — color principal 2 */
    --navy-deep:  color-mix(in srgb, var(--navy-corp) 58%, black); /* variante oscura calculada a partir del azul — no es un color de marca aparte */

    /* — paleta secundaria del manual (uso combinado ≤20% de la pieza) — */
    --lime:   #adc926;
    --cyan:   #0bbbef;
    --pink:   #e04278;
    --orange: #e9662b;
    --amber:  #f59c00;
    --gray-brand: #717b84;

    --white:      #FFFFFF;
    --bg-light:   #F5F7F8;   /* gris de fondo neutro (no regulado por el manual) */
    --text-muted: var(--gray-brand);   /* = gris de marca, reutilizado como texto secundario */

    /* — tipografías oficiales del manual — */
    --font-display: "Reddit Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* titulares y destacados */
    --font-body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;      /* cuerpo de texto — recomendada para web */

    /* — derivados para legibilidad sobre fondos oscuros — */
    --text-on-dark:       #FFFFFF;
    --text-on-dark-muted: #9FB6C8;
    --line-on-dark:       rgba(255,255,255,.14);
    --line-on-light:      rgba(3,28,50,.10);
    --navy-ink:           #003869; /* títulos sobre fondo claro = azul de marca */

    --wrap: 1280px;
    --pad: clamp(1.25rem, 4vw, 3.5rem);
    --radius: 2px;

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }

  body{
    margin:0;
    background: var(--bg-light);
    color: var(--navy-ink);
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  h1,h2,h3{ margin:0; text-wrap:balance; font-family:var(--font-display); font-weight:800; }
  p{ margin:0; }
  button{ font-family:inherit; }

  /* etiquetas tipo índice/eyebrow: antes usaban una mono aparte;
     el manual solo define Reddit Sans + Figtree, así que logramos el
     mismo efecto técnico (tracking + alineación tabular) con Reddit Sans. */
  .mono{
    font-family:var(--font-display);
    font-weight:500;
    font-variant-numeric: tabular-nums;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .wrap{
    width:100%;
    max-width:var(--wrap);
    margin-inline:auto;
    padding-inline:var(--pad);
  }

  .eyebrow{
    display:flex; align-items:center; gap:.75rem;
    font-size:.72rem; font-weight:600;
    color:var(--teal);
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:var(--teal);
    flex:none;
  }
  .eyebrow--dark{ color:var(--lime); }
  .eyebrow--dark::before{ background:var(--lime); }

  /* Botón de marca: píldora con un token circular que se expande
     desde el ícono para llenar todo el botón — microinteracción de
     "revelado", no un simple cambio de color. El JS añade un ligero
     arrastre magnético hacia el cursor cuando está cerca. */
  .btn{
    --r:1.55rem;
    position:relative; isolation:isolate; overflow:hidden;
    display:inline-flex; align-items:center; gap:1rem;
    padding:.4rem 1.9rem .4rem .4rem;
    border-radius:999px;
    border:0; cursor:pointer;
    font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    transition:transform .18s linear, color .35s var(--ease), box-shadow .4s var(--ease);
    will-change:transform;
  }
  .btn::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    clip-path:circle(var(--r) at var(--r) 50%);
    transition:clip-path .6s var(--ease);
  }
  .btn:hover::before{ clip-path:circle(150% at var(--r) 50%); }
  .btn__icon{
    position:relative; flex:none;
    width:calc(var(--r)*2); height:calc(var(--r)*2);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:transform .6s var(--ease);
  }
  .btn:hover .btn__icon{ transform:rotate(180deg); }
  .btn__icon .diamond{ transition:background-color .35s var(--ease); }

  .btn-solid{
    background:rgba(255,255,255,.07);
    color:var(--white);
    box-shadow:0 14px 32px -16px rgba(56,181,171,.7);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .btn-solid .btn__icon{ background:linear-gradient(120deg,var(--teal),var(--lime) 130%); }
  .btn-solid .btn__icon .diamond{ background:var(--navy-deep); }
  .btn-solid::before{ background:linear-gradient(120deg,var(--teal),var(--lime) 130%); }
  .btn-solid:hover{ color:var(--navy-deep); box-shadow:0 18px 40px -14px rgba(173,201,38,.6); }
  .btn-solid:hover .btn__icon{ background:var(--navy-deep); }
  .btn-solid:hover .btn__icon .diamond{ background:var(--teal); }

  .btn-ghost{
    background:rgba(255,255,255,.06);
    color:var(--white);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:inset 0 0 0 1px var(--line-on-dark);
  }
  .btn-ghost .btn__icon{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--teal); }
  .btn-ghost .btn__icon .diamond{ background:var(--teal); }
  .btn-ghost::before{ background:var(--white); }
  .btn-ghost:hover{ color:var(--navy-deep); box-shadow:inset 0 0 0 1px transparent; }
  .btn-ghost:hover .btn__icon{ background:var(--navy-deep); box-shadow:none; }
  .btn-ghost:hover .btn__icon .diamond{ background:var(--teal); }

  /* diamante — unidad geométrica de la marca */
  .diamond{ width:.42em; height:.42em; background:currentColor; transform:rotate(45deg); flex:none; display:inline-block; }

  /* ============ PRELOADER ============ */
  #preloader{
    position:fixed; inset:0; z-index:999;
    background:var(--navy-deep);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
    transition:opacity .7s var(--ease), visibility .7s var(--ease);
  }
  html.is-loaded #preloader{ opacity:0; visibility:hidden; pointer-events:none; }
  html:not(.is-loaded){ overflow:hidden; }
  .preloader__mark{ width:72px; height:72px; overflow:visible; }
  .pl-rect{ fill:none; stroke:var(--teal); stroke-width:2.5; stroke-dasharray:400; stroke-dashoffset:400; }
  .pl-rect--1{ animation:pl-draw 1s var(--ease) forwards .1s; }
  .pl-rect--2{ stroke:var(--lime); animation:pl-draw .7s var(--ease) forwards .5s; }
  @keyframes pl-draw{ to{ stroke-dashoffset:0; } }
  .preloader__word{
    font-size:.68rem; color:var(--text-on-dark-muted);
    opacity:0; animation:signo-fade .6s var(--ease) forwards 1s;
  }
  @media (prefers-reduced-motion:reduce){
    #preloader{ transition:opacity .3s; }
    .pl-rect{ animation:none; stroke-dashoffset:0; }
    .preloader__word{ animation:none; opacity:1; }
  }

  /* ============ NAV ============ */
  .nav{
    position:fixed; inset:0 0 auto 0; z-index:100;
    padding-block:1.4rem;
    transition:background-color .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  .nav.is-scrolled{
    background:rgba(3,28,50,.86);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    padding-block:.85rem;
    border-color:var(--line-on-dark);
  }
  .nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
  .nav__logo img{ height:32px; width:auto; }
  .nav__links{ display:flex; align-items:center; gap:2.1rem; }
  .nav__links a{
    font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-on-dark-muted);
    position:relative; padding-block:.3rem;
    transition:color .25s;
  }
  .nav__links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
    background:var(--teal); transition:right .3s var(--ease);
  }
  .nav__links a:hover, .nav__links a.is-active{ color:var(--white); }
  .nav__links a:hover::after, .nav__links a.is-active::after{ right:0; }
  .nav__right{ display:flex; align-items:center; gap:1.4rem; }
  .nav__toggle{ display:none; background:none; border:0; color:var(--white); width:24px; height:18px; position:relative; cursor:pointer; }
  .nav__toggle span, .nav__toggle::before, .nav__toggle::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .3s, opacity .3s;
  }
  .nav__toggle::before{ top:0; } .nav__toggle span{ top:8px; } .nav__toggle::after{ top:16px; }

  @media (max-width:860px){
    .nav__links{
      position:fixed; inset:0; z-index:99;
      background:var(--navy-deep);
      flex-direction:column; justify-content:center; gap:2.2rem;
      transform:translateX(100%); transition:transform .45s var(--ease);
    }
    .nav__links.is-open{ transform:translateX(0); }
    .nav__links a{ font-size:1.1rem; }
    .nav__toggle{ display:block; z-index:101; }
    .nav.menu-open .nav__toggle::before{ transform:translateY(8px) rotate(45deg); }
    .nav.menu-open .nav__toggle span{ opacity:0; }
    .nav.menu-open .nav__toggle::after{ transform:translateY(-8px) rotate(-45deg); }
  }

  /* ============ HERO ============ */
  #hero{
    position:relative;
    min-height:100svh;
    background:linear-gradient(160deg, var(--navy-deep) 0%, #00284d 55%, var(--navy-corp) 130%);
    color:var(--white);
    display:flex; flex-direction:column; justify-content:space-between;
    overflow:hidden;
    isolation:isolate;
  }
  @keyframes signo-spin{ to{ transform:rotate(405deg); } }
  @keyframes signo-fade{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes signo-line{ to{ transform:translateY(0); } }

  /* — fondo "aurora": masas de luz difuminadas en movimiento lento,
     el tipo de recurso que usan los sitios de mayor nivel en vez de
     un fondo plano o un patrón de partículas suelto — */
  .hero__aurora{ position:absolute; inset:-15%; z-index:0; filter:blur(70px); pointer-events:none; }
  .aurora{ position:absolute; border-radius:50%; mix-blend-mode:screen; }
  .aurora.a1{ width:48vw; height:48vw; left:-8%; top:-14%; background:radial-gradient(circle, rgba(56,181,171,.6), transparent 70%); animation:auroraA 24s ease-in-out infinite; }
  .aurora.a2{ width:42vw; height:42vw; right:-10%; top:4%; background:radial-gradient(circle, rgba(173,201,38,.42), transparent 70%); animation:auroraB 29s ease-in-out infinite; }
  .aurora.a3{ width:40vw; height:40vw; left:26%; bottom:-22%; background:radial-gradient(circle, rgba(6,59,99,.85), transparent 70%); animation:auroraC 33s ease-in-out infinite; }
  @keyframes auroraA{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(7%,9%) scale(1.16);} }
  @keyframes auroraB{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-9%,7%) scale(1.12);} }
  @keyframes auroraC{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6%,-7%) scale(1.2);} }
  @media (prefers-reduced-motion:reduce){ .aurora{ animation:none; } }

  #heroCanvas{ position:absolute; inset:0; z-index:0; opacity:.7; mix-blend-mode:screen; }

  /* — spotlight que seguirá al cursor (JS escribe el gradiente) — */
  .hero__spotlight{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    opacity:0; transition:opacity .5s var(--ease);
    mix-blend-mode:soft-light;
  }
  #hero:hover .hero__spotlight{ opacity:1; }

  .hero__grain{ position:absolute; inset:0; z-index:3; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:3px 3px; mix-blend-mode:overlay; }

  /* — el diamante como halo centrado detrás del titular, con
     verdadera profundidad 3D: el JS inclina .hero__mark__inner según
     la posición del cursor dentro de un contexto con perspective — */
  .hero__mark{
    position:absolute; z-index:1; left:50%; top:38%;
    width:min(42vw,560px); aspect-ratio:1;
    transform:translate(-50%,-50%);
    perspective:1400px;
    pointer-events:none;
    -webkit-mask-image:radial-gradient(circle, #000 45%, transparent 78%);
    mask-image:radial-gradient(circle, #000 45%, transparent 78%);
  }
  .hero__mark__inner{
    width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform .4s cubic-bezier(.22,.61,.36,1);
  }
  .hero__mark svg{
    width:100%; height:100%;
    opacity:.8;
    filter:drop-shadow(0 0 60px rgba(56,181,171,.28));
    animation:signo-spin 100s linear infinite;
  }
  @media (prefers-reduced-motion:reduce){ .hero__mark svg{ animation:none; } }
  @media (max-width:860px){ .hero__mark{ width:min(80vw,380px); top:32%; } }

  .hero__inner{
    position:relative; z-index:4; flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:8rem var(--pad) 2rem;
  }

  .reveal{ opacity:0; animation:signo-fade .9s var(--ease) forwards; animation-play-state:paused; }
  html.is-loaded .reveal{ animation-play-state:running; }
  @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; animation:none; } }

  .hero__title{
    margin-top:1.5rem;
    font-weight:800;
    font-size:clamp(3.2rem, 9vw, 8.2rem);
    line-height:.94;
    letter-spacing:-.03em;
  }
  .hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
  .hero__title .line__inner{ display:block; transform:translateY(108%); animation:signo-line 1s var(--ease) forwards; animation-play-state:paused; }
  html.is-loaded .hero__title .line__inner{ animation-play-state:running; }
  .hero__title .line:nth-child(1) .line__inner{ animation-delay:.12s; }
  .hero__title .line:nth-child(2) .line__inner{ animation-delay:.28s; }
  @media (prefers-reduced-motion:reduce){ .hero__title .line__inner{ animation:none; transform:none; } }
  .hero__title em{
    font-style:normal;
    background:linear-gradient(100deg, var(--teal), var(--lime) 90%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero__sub{
    margin:1.7rem auto 0;
    max-width:34ch;
    font-size:1.1rem;
    color:var(--text-on-dark-muted);
    animation-delay:.55s;
  }
  .hero__cta-row{ margin-top:2.6rem; display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap; animation-delay:.72s; }

  .hero__side{
    position:absolute; z-index:4; right:1.6rem; top:50%;
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    font-size:.68rem; font-weight:600; color:var(--text-on-dark-muted);
    display:flex; align-items:center; gap:.9rem;
    animation-delay:.4s;
  }
  @media (max-width:760px){ .hero__side{ display:none; } }
  .hero__side .diamond{ color:var(--teal); }
  .hero__side .diamond, .eyebrow .diamond{ animation:pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; transform:rotate(45deg) scale(1);} 50%{ opacity:.45; transform:rotate(45deg) scale(.72);} }
  @media (prefers-reduced-motion:reduce){ .hero__side .diamond, .eyebrow .diamond{ animation:none; } }

  .hero__bottom{
    position:relative; z-index:4;
    display:flex; justify-content:space-between; align-items:flex-end;
    padding-bottom:2.2rem;
  }
  .hero__index{ display:flex; align-items:center; gap:1rem; font-size:.72rem; color:var(--text-on-dark-muted); }
  .hero__index b{ color:var(--white); font-weight:700; }
  .hero__index .bar{ width:52px; height:1px; background:var(--line-on-dark); position:relative; overflow:hidden; }
  .hero__index .bar::after{ content:""; position:absolute; inset:0; width:var(--p,16%); background:var(--teal); transition:width .4s var(--ease); }
  .hero__current{ font-size:.72rem; color:var(--text-on-dark-muted); text-align:right; }
  .hero__current b{ display:block; color:var(--white); font-weight:700; }

  /* ============ SECTION SCAFFOLD ============ */
  section{ position:relative; }
  .sec{ padding-block:clamp(4.5rem, 9vw, 8rem); }
  /* Enfoque y Proceso reparten su espacio entre subsecciones (cada una con su propio
     fondo claro/oscuro), así que la sección contenedora no debe sumar su propio padding. */
  #enfoque.sec, #diferencial.sec, #portafolio.sec{ padding-block:0; }
  .sec-head{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:end; }
  .sec-head h2{ margin-top:1rem; font-weight:800; font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.05; letter-spacing:-.01em; }
  .sec-head p{ color:var(--text-muted); max-width:44ch; font-size:1rem; }
  @media (max-width:760px){ .sec-head{ grid-template-columns:1fr; gap:1.2rem; } }

  /* ============ ENFOQUE + PORTAFOLIO ============ */
  #enfoque, #portafolio{ background:var(--bg-light); }

  .subsection{ padding-block:3.2rem; }
  .subsection:not(.subsection--dark) + .subsection:not(.subsection--dark){ border-top:1px solid var(--line-on-light); }
  .subsection--dark{
    background:linear-gradient(155deg, var(--navy-corp), var(--navy-deep) 130%);
    color:var(--white);
  }
  .subsection--dark .sec-head p{ color:var(--text-on-dark-muted); }
  .subsection--dark .eyebrow{ color:var(--lime); }
  .subsection--dark .eyebrow::before{ background:var(--lime); }

  /* revelado al hacer scroll — reutiliza el patrón de .reveal del hero */
  .reveal-io{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal-io.is-visible{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion:reduce){ .reveal-io{ opacity:1; transform:none; transition:none; } }

  /* tarjetas de "insight" (outcomes en claro, diferencial en oscuro) */
  .outcomes, .diff-grid{
    margin-top:2.8rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
  }
  .outcome, .diff-item{
    display:flex; flex-direction:column; gap:.9rem;
    background:var(--white); border:1px solid var(--line-on-light); border-radius:12px;
    padding:1.6rem 1.4rem;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  }
  .outcome:hover, .diff-item:hover{ transform:translateY(-5px); box-shadow:0 20px 36px -20px rgba(0,56,105,.3); border-color:var(--teal); }
  .outcome .icon-circle, .diff-item .icon-circle{
    width:2.5rem; height:2.5rem; border-radius:50%; flex:none;
    background:color-mix(in srgb, var(--teal) 14%, white);
    display:flex; align-items:center; justify-content:center;
  }
  .outcome .icon-circle .diamond, .diff-item .icon-circle .diamond{ color:var(--teal); }
  .outcome h3, .diff-item h3{ font-size:1.02rem; font-weight:700; }
  .outcome p, .diff-item p{ font-size:.88rem; color:var(--text-muted); }
  .subsection--dark .diff-item{
    background:rgba(255,255,255,.05); border-color:var(--line-on-dark);
  }
  .subsection--dark .diff-item:hover{ box-shadow:0 20px 36px -20px rgba(0,0,0,.5); }
  .subsection--dark .diff-item .icon-circle{ background:rgba(255,255,255,.1); }
  .subsection--dark .diff-item .icon-circle .diamond{ color:var(--lime); }
  .subsection--dark .diff-item h3{ color:var(--white); }
  .subsection--dark .diff-item p{ color:var(--text-on-dark-muted); }
  @media (max-width:920px){ .outcomes, .diff-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .outcomes, .diff-grid{ grid-template-columns:1fr; } }

  /* tarjetas de "frenos" (numeradas, sobre fondo oscuro) */
  .frenos{ margin-top:2.8rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
  .freno{
    display:flex; flex-direction:column; gap:.7rem;
    background:rgba(255,255,255,.05); border:1px solid var(--line-on-dark); border-radius:12px;
    padding:1.6rem 1.4rem;
    transition:transform .35s var(--ease), border-color .35s;
  }
  .freno:hover{ transform:translateY(-5px); border-color:var(--lime); }
  .freno .cap-num{ color:var(--lime); }
  .freno h3{ font-size:1.02rem; font-weight:700; color:var(--white); }
  .freno p{ font-size:.88rem; color:var(--text-on-dark-muted); }
  @media (max-width:920px){ .frenos{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .frenos{ grid-template-columns:1fr; } }

  /* cadena de pasos reutilizable (enfoque estratégico de 5 y dinámica operativa de 4) */
  .step-chain{
    margin-top:3.2rem; position:relative;
    display:grid; grid-template-columns:repeat(var(--n,5),1fr); gap:1.4rem;
  }
  .step-chain::before{
    content:""; position:absolute; left:0; right:0; top:1.55rem; height:1px;
    background:var(--line-on-light);
  }
  @media (max-width:920px){ .step-chain{ grid-template-columns:1fr 1fr; } .step-chain::before{ display:none; } }
  @media (max-width:560px){ .step-chain{ grid-template-columns:1fr; } }

  .capacidades{ margin-top:3.5rem; display:flex; flex-direction:column; gap:1.1rem; min-width:0; }
  .cap-row{
    position:relative; overflow:hidden; min-width:0;
    background:var(--white); border:1px solid var(--line-on-light); border-radius:14px;
    transition:border-color .3s, box-shadow .35s var(--ease);
  }
  .cap-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--teal); }
  .cap-row:hover, .cap-row[open]{ border-color:var(--teal); box-shadow:0 20px 40px -24px rgba(0,56,105,.28); }
  .cap-row:nth-child(2)::before{ background:var(--lime); }
  .cap-row:nth-child(3)::before{ background:var(--cyan); }
  .cap-row:nth-child(2):hover, .cap-row:nth-child(2)[open]{ border-color:var(--lime); }
  .cap-row:nth-child(3):hover, .cap-row:nth-child(3)[open]{ border-color:var(--cyan); }
  .cap-row:nth-child(2) .cap-num{ color:var(--lime); }
  .cap-row:nth-child(3) .cap-num{ color:var(--cyan); }
  .cap-row summary{
    list-style:none; cursor:pointer;
    display:grid; grid-template-columns:3.2rem minmax(0,2fr) minmax(0,1.6fr) 1.6rem;
    align-items:center; gap:1.5rem;
    padding:1.6rem 1.7rem 1.6rem 2rem;
    outline:none;
  }
  .cap-row summary::-webkit-details-marker{ display:none; }
  .cap-row summary:focus-visible{ box-shadow:inset 0 0 0 2px var(--teal); }
  .cap-num{ font-family:var(--font-display); font-variant-numeric:tabular-nums; font-size:1.1rem; color:var(--teal); font-weight:800; }
  .cap-title{ font-weight:800; font-size:clamp(1.1rem,2vw,1.5rem); }
  .cap-tag{ color:var(--text-muted); font-size:.92rem; }
  .cap-tag b{ color:var(--navy-ink); font-weight:700; }
  .cap-arrow{ justify-self:end; width:1.1rem; height:1.1rem; position:relative; }
  .cap-arrow::before,.cap-arrow::after{ content:""; position:absolute; background:var(--navy-ink); transition:transform .3s var(--ease); }
  .cap-arrow::before{ inset:0 0 auto 0; top:50%; height:2px; transform:translateY(-1px); }
  .cap-arrow::after{ inset:0 auto 0 50%; left:50%; width:2px; transform:translateX(-1px); }
  details[open] .cap-arrow::after{ transform:translateX(-1px) rotate(90deg) scaleX(0); }
  .cap-body{ padding:.2rem 1.7rem 2rem 2rem; border-top:1px solid var(--line-on-light); margin-top:.2rem; padding-top:1.6rem; display:flex; gap:2.5rem; flex-wrap:wrap; }
  .cap-body p{ max-width:46ch; color:var(--text-muted); }
  .cap-services{ display:flex; flex-wrap:wrap; gap:.5rem; max-width:26rem; }
  .cap-services span{
    font-size:.72rem; font-weight:600; color:var(--navy-corp);
    background:#fff; border:1px solid var(--line-on-light); border-radius:999px; padding:.4rem .85rem;
  }
  @media (max-width:700px){
    .cap-row summary{ grid-template-columns:2.4rem 1fr 1.4rem; padding:1.3rem 1.2rem 1.3rem 1.5rem; }
    .cap-tag{ grid-column:2; grid-row:2; font-size:.84rem; margin-top:-.9rem; }
    .cap-arrow{ grid-column:3; grid-row:1 / span 2; align-self:center; }
    .cap-num{ align-self:start; padding-top:.15rem; }
    .cap-body{ padding:.2rem 1.2rem 1.6rem 1.5rem; gap:1.5rem; }
  }

  /* ============ AJUSTES RESPONSIVE ============ */
  @media (max-width:560px){
    .marquee--esencia .marquee__track{ gap:2rem; }
    .marquee--esencia .marquee__track span{ font-size:1.1rem; }
    #esencia-strip{ padding-block:3rem 2.2rem; }
    .case-card{ padding:1.3rem 1.3rem 1.6rem; }
    .testi-card{ padding:2.2rem 1.4rem 1.5rem; }
    .foot-bottom{ margin-top:3rem; }
    .contacto__list a:not(.btn){ word-break:break-word; }
  }
  @media (max-width:1180px){
    .nav__links{ gap:1.25rem; }
    .nav__links a{ letter-spacing:.06em; white-space:nowrap; }
    .nav__right .btn{ padding-right:1.3rem; }
  }
  @media (max-width:400px){
    .cap-body .solution-grid{ grid-template-columns:minmax(0,1fr); }
  }
  @media (max-width:430px){
    .nav__right .btn{ display:none; }
    .hero__cta-row{ flex-direction:column; align-items:center; }
  }

  /* cuerpo de las 3 soluciones (Growth / Always-On / Experiences) */
  .cap-body--solution{ flex-direction:column; gap:1.5rem; min-width:0; }
  .cap-body--solution > p{ max-width:60ch; }
  .solution-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; max-width:56rem; min-width:0; width:100%; }
  .solution-item{
    background:var(--white); border:1px solid var(--line-on-light); border-radius:10px;
    padding:1.1rem 1.1rem 1.2rem;
    transition:transform .3s var(--ease), border-color .3s;
  }
  .solution-item:hover{ transform:translateY(-3px); border-color:var(--teal); }
  .solution-item b{ display:block; font-family:var(--font-display); font-weight:700; color:var(--navy-ink); font-size:.95rem; }
  .solution-item span{ display:block; font-size:.7rem; font-weight:600; color:var(--teal); text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }
  .solution-item p{ margin-top:.5rem; font-size:.84rem; color:var(--text-muted); max-width:none; }
  .solution-extra{ display:flex; flex-direction:column; gap:.7rem; padding-top:.6rem; border-top:1px solid var(--line-on-light); }
  .solution-extra__label{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
  @media (max-width:700px){ .solution-grid{ grid-template-columns:1fr 1fr; } }

  /* arquitectura de servicio: diagrama de red núcleo + capacidades + alianzas */
  .arch{
    margin-top:3rem; padding-top:2.6rem; border-top:1px solid var(--line-on-light);
    display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:center;
  }
  .arch__diagram{ position:relative; width:100%; max-width:320px; aspect-ratio:1; margin-inline:auto; }
  .arch__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .arch__lines line{ stroke:var(--line-on-light); stroke-width:1.5; }
  .arch__node{
    position:absolute; transform:translate(-50%,-50%);
    width:5.4rem; height:5.4rem; border-radius:50%;
    background:var(--white); border:1.5px solid var(--line-on-light);
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:.4rem; font-size:.72rem; font-weight:700; color:var(--navy-ink);
    font-family:inherit; cursor:pointer;
    box-shadow:0 10px 22px -14px rgba(0,56,105,.28);
    transition:transform .25s var(--ease), border-color .25s, box-shadow .25s, color .25s;
  }
  .arch__node:hover{ transform:translate(-50%,-50%) scale(1.06); }
  .arch__node.is-active{
    border-color:var(--teal); color:var(--teal);
    box-shadow:0 0 0 4px rgba(56,181,171,.16), 0 14px 26px -14px rgba(0,56,105,.32);
  }
  .arch__core-node{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
    width:7.2rem; height:7.2rem; border-radius:50%; border:0; cursor:pointer;
    background:linear-gradient(135deg, var(--navy-corp), var(--teal));
    color:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:800; font-size:.8rem; line-height:1.25; text-align:center;
    box-shadow:0 16px 34px -14px rgba(0,56,105,.45);
    transition:box-shadow .25s, transform .25s var(--ease);
  }
  .arch__core-node:hover{ transform:translate(-50%,-50%) scale(1.05); }
  .arch__core-node.is-active{ box-shadow:0 0 0 5px rgba(56,181,171,.22), 0 18px 36px -14px rgba(0,56,105,.5); }
  .arch__core-node .diamond{ background:var(--white); margin-bottom:.35rem; width:.85rem; height:.85rem; }
  .arch__hint{ position:absolute; bottom:-1.8rem; left:50%; transform:translateX(-50%); font-size:.66rem; color:var(--text-muted); white-space:nowrap; }
  .arch__note{
    font-size:.95rem; color:var(--text-muted); max-width:52ch;
    border:1.5px dashed var(--line-on-light); border-radius:12px; padding:1.5rem 1.6rem;
  }
  .arch__note b{ color:var(--navy-ink); }
  .arch__detail{ min-height:5.6rem; padding-bottom:1.2rem; margin-bottom:1.1rem; border-bottom:1px solid var(--line-on-light); }
  .arch__detail b{ display:block; font-family:var(--font-display); font-weight:800; color:var(--teal); font-size:1rem; margin-bottom:.4rem; }
  .arch__detail p{ margin:0; }
  .arch__alliance{ font-size:.95rem; }
  .arch__closing{ margin-top:1rem; font-weight:600; color:var(--navy-ink); }
  @media (max-width:760px){ .arch__hint{ display:none; } }
  @media (max-width:760px){ .arch{ grid-template-columns:1fr; } }

  /* ============ CONFIANZA (clientes) ============ */
  #confianza{ background:var(--white); border-block:1px solid var(--line-on-light); padding-block:3.2rem; }
  .confianza__label{ color:var(--text-muted); font-size:.72rem; font-weight:600; margin-bottom:1.6rem; }
  .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .marquee__track{ display:flex; width:max-content; gap:3.2rem; animation:scroll-x 38s linear infinite; }
  .marquee:hover .marquee__track{ animation-play-state:paused; }
  .marquee__track span{ font-weight:700; font-size:1.05rem; color:var(--navy-corp); opacity:.55; white-space:nowrap; }
  @keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  @media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; flex-wrap:wrap; width:auto; } }

  .marquee--esencia{ padding-block:2.4rem 0; }
  .marquee--esencia .marquee__track{ gap:3rem; animation-duration:30s; }
  .marquee--esencia .marquee__track span{
    display:inline-flex; align-items:center; gap:.7rem;
    font-family:var(--font-display); font-size:1.4rem; font-weight:800;
    color:var(--navy-corp); opacity:1; letter-spacing:-.01em;
  }
  .marquee--esencia .marquee__track span .diamond{ width:9px; height:9px; background:var(--teal); flex:none; }

  #esencia-strip{ background:var(--white); padding-block:4rem 3rem; border-block:1px solid var(--line-on-light); }
  #esencia-strip .wrap{ margin-bottom:2.6rem; }
  #esencia-strip .marquee--esencia{ padding-block:0; }

  /* ============ CASOS ============ */
  #casos{
    background:linear-gradient(175deg, var(--navy-corp), var(--navy-deep) 75%);
    color:var(--white);
    clip-path:polygon(0 3.5rem, 100% 0, 100% 100%, 0 100%);
    margin-top:-3.5rem;
  }
  #casos .sec-head p{ color:var(--text-on-dark-muted); }
  .casos__grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem; }
  @media (max-width:1180px){ .casos__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:560px){ .casos__grid{ grid-template-columns:minmax(0,1fr); } }
  .case-card{
    background:rgba(255,255,255,.04);
    border:1px solid var(--line-on-dark);
    border-radius:var(--radius);
    padding:1.6rem 1.6rem 2rem;
    display:flex; flex-direction:column; gap:1.2rem;
    transition:border-color .3s, transform .4s var(--ease);
  }
  .case-card:hover{ border-color:var(--teal); transform:translateY(-6px); }
  .case-card{ min-width:0; }
  .case-card img{
    display:block; width:100%; max-width:100%; height:auto; min-width:0; aspect-ratio:16/10; object-fit:cover;
    clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
    background:rgba(255,255,255,.03);
    transition:filter .4s var(--ease);
  }
  .case-card:hover img{ filter:brightness(1.12) saturate(1.1); }
  .case-card canvas{
    width:100%; aspect-ratio:16/10;
    clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
    background:rgba(255,255,255,.03);
  }
  .case-card .cap-num{ color:var(--lime); }
  .case-card h3{ font-size:1.15rem; font-weight:700; }
  .case-card p{ color:var(--text-on-dark-muted); font-size:.9rem; }
  .case-card .result{ margin-top:auto; font-size:.72rem; font-weight:600; color:var(--teal); display:flex; align-items:center; gap:.6rem; }

  /* ============ TESTIMONIOS ============ */
  #testimonios{ background:var(--white); }
  .testi-grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
  @media (max-width:920px){ .testi-grid{ grid-template-columns:1fr; } }
  .testi-card{
    position:relative;
    background:var(--bg-light);
    border:1px solid var(--line-on-light);
    border-radius:var(--radius);
    padding:2.4rem 1.8rem 1.8rem;
    display:flex; flex-direction:column; gap:1.4rem; min-height:100%;
  }
  .testi-quote-mark{
    font-family:Georgia,serif; font-size:3.6rem; line-height:1; color:var(--teal); opacity:.3;
    position:absolute; top:.4rem; left:1.5rem; user-select:none;
  }
  .testi-text{ position:relative; font-size:1rem; color:var(--navy-corp); line-height:1.6; }
  .testi-author{ display:flex; flex-direction:column; gap:.1rem; margin-top:auto; }
  .testi-author b{ font-size:.86rem; }
  .testi-author span{ font-size:.78rem; color:var(--text-muted); }

  /* ============ PROCESO ============ */
  #diferencial{ background:var(--bg-light); }
  .p-step{
    display:flex; flex-direction:column; gap:.8rem; position:relative;
    background:var(--white); border:1px solid var(--line-on-light); border-radius:12px;
    padding:1.5rem 1.3rem 1.6rem;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  }
  .p-step:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -18px rgba(0,56,105,.25); border-color:var(--teal); }
  .p-step .node{ width:1rem; height:1rem; background:var(--white); border:2px solid var(--teal); transform:rotate(45deg); z-index:1; }
  .p-step .cap-num{ font-size:.78rem; }
  .p-step h3{ font-size:1.05rem; font-weight:700; }
  .p-step p{ font-size:.86rem; color:var(--text-muted); }
  .step-chain::before{ top:2rem; }

  /* ============ CONTACTO / FOOTER ============ */
  #contacto{ background:var(--navy-deep); color:var(--white); overflow:hidden; }
  .contacto__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:end; }
  .contacto__grid h2{ font-weight:800; font-size:clamp(2.1rem,5vw,4rem); line-height:1.03; }
  .contacto__grid h2 em{ font-style:normal; color:var(--teal); }
  .contacto__lede{ margin-top:1.2rem; max-width:42ch; color:var(--text-on-dark-muted); font-size:1.02rem; }
  .contacto__list{ display:flex; flex-direction:column; gap:1.1rem; }
  .contacto__list a:not(.btn){ display:flex; align-items:center; gap:.8rem; font-size:1.05rem; font-weight:600; transition:color .25s; }
  .contacto__list a:not(.btn):hover{ color:var(--teal); }
  .contacto__list .who{ color:var(--text-on-dark-muted); font-size:.82rem; font-weight:500; }
  @media (max-width:760px){ .contacto__grid{ grid-template-columns:1fr; } }

  .foot-bottom{
    margin-top:5rem; padding-top:2rem; border-top:1px solid var(--line-on-dark);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  }
  .foot-bottom img{ height:26px; }
  .foot-bottom .legal{ font-size:.68rem; color:var(--text-on-dark-muted); }


  /* ============ FORMULARIO DE CONTACTO ============ */
  .contacto__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
  .contacto__intro .contacto__list{ margin-top:2.4rem; }
  .btn{ font-family:inherit; }
  .cform{
    position:relative;
    background:rgba(255,255,255,.05); border:1px solid var(--line-on-dark); border-radius:14px;
    padding:1.8rem; display:flex; flex-direction:column; gap:1.05rem; min-width:0;
  }
  .cform__title{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); }
  .cform__row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; }
  .cform label{
    display:flex; flex-direction:column; gap:.4rem;
    font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-on-dark-muted);
  }
  .cform input, .cform textarea{
    font:inherit; font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--white);
    background:rgba(255,255,255,.07); border:1px solid var(--line-on-dark); border-radius:8px;
    padding:.8rem .9rem; width:100%; min-width:0; transition:border-color .25s, background .25s;
  }
  .cform input::placeholder, .cform textarea::placeholder{ color:rgba(255,255,255,.35); }
  .cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--teal); background:rgba(255,255,255,.1); }
  .cform textarea{ min-height:7.5rem; resize:vertical; }
  .cform .btn{ align-self:flex-start; margin-top:.4rem; }
  .cform__notice{ padding:.8rem 1rem; border-radius:8px; font-size:.9rem; line-height:1.45; border:1px solid transparent; }
  .cform__notice--ok{ background:rgba(173,201,38,.14); border-color:rgba(173,201,38,.5); color:var(--white); }
  .cform__notice--error{ background:rgba(224,66,120,.16); border-color:rgba(224,66,120,.5); color:var(--white); }
  .cform__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  @media (max-width:760px){ .contacto__grid{ grid-template-columns:minmax(0,1fr); } }
  @media (max-width:560px){ .cform{ padding:1.3rem; } .cform__row{ grid-template-columns:minmax(0,1fr); } }