@layer reset, tokens, base, fx, layout, components, utils;

@layer reset{
  *,*::before,*::after{box-sizing:border-box} *{margin:0}
  html{-webkit-text-size-adjust:100%}
  body{-webkit-font-smoothing:antialiased}
  img,svg{display:block;max-width:100%}
  input,button,textarea,select{font:inherit;color:inherit}
  button{background:none;border:0;cursor:pointer}
  a{color:inherit;text-decoration:none}
  ul,ol{list-style:none;padding:0}
  h1,h2,h3,h4{font-weight:inherit;font-size:inherit}
  dialog{border:0;padding:0;max-width:none;max-height:none}
}

@layer tokens{
  @property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
  :root{
    /* Marca: tomados del logotipo — cian #35A8ED sobre gris #808080 */
    --cyan:#35a8ed; --cyan-deep:#1b7fbf; --cyan-glow:#7fcbf5; --cyan-wash:#e8f5fd;
    --grey:#808080; --graphite:#16202a; --graphite-2:#0f1720; --graphite-3:#0a1017;
    --paper:#fff; --mist:#f2f6fa; --ink:#16202a; --ink-2:#5a6673; --line:#dfe6ed;
    --line-dk:rgb(255 255 255 / .10);

    --f-display:'Sora',system-ui,sans-serif;
    --f-body:'Inter',system-ui,sans-serif;
    --f-mono:'JetBrains Mono',ui-monospace,monospace;

    --s--2:clamp(.6875rem,.67rem + .08vw,.75rem);
    --s--1:clamp(.8125rem,.79rem + .12vw,.875rem);
    --s-0:clamp(1rem,.97rem + .16vw,1.0625rem);
    --s-1:clamp(1.0625rem,1.02rem + .24vw,1.1875rem);
    --s-2:clamp(1.25rem,1.14rem + .52vw,1.5rem);
    --s-3:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
    --s-4:clamp(2.125rem,1.5rem + 2.8vw,3.875rem);

    --sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:2.75rem;--sp-8:4rem;
    --sp-sec:clamp(4rem,2.8rem + 5vw,7rem);
    --shell:1200px; --gutter:clamp(1.25rem,4vw,3rem); --r:12px;
    --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  }
}

@layer base{
  html{scroll-behavior:smooth;scroll-padding-block-start:5.5rem}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{font-family:var(--f-body);font-size:var(--s-0);line-height:1.65;color:var(--ink);background:var(--paper);overflow-x:clip}
  :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}
  ::selection{background:var(--cyan);color:#fff}
  .skip{position:absolute;inset-inline-start:var(--gutter);inset-block-start:-200%;z-index:200;
    padding:var(--sp-3) var(--sp-5);background:var(--cyan);color:#04121c;border-radius:8px;
    font-family:var(--f-mono);font-size:var(--s--1);font-weight:500}
  .skip:focus-visible{inset-block-start:var(--sp-4)}
}

@layer fx{
  /* Barra de progreso de lectura */
  .prog{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:120;transform-origin:0 50%;scale:0 1;
    background:linear-gradient(90deg,var(--cyan-deep),var(--cyan),var(--cyan-glow))}
  @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
    .prog{animation:pg linear both;animation-timeline:scroll(root block)} @keyframes pg{to{scale:1 1}}}}

  /* Enlace: el conector con punto terminal del logotipo, como regla recurrente */
  .link-rule{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-mono);
    font-size:var(--s--2);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-deep)}
  .link-rule::before{content:'';inline-size:2.25rem;block-size:1px;background:currentColor}
  .link-rule::after{content:'';inline-size:.45rem;block-size:.45rem;border-radius:50%;background:currentColor}
  .section--dark .link-rule{color:var(--cyan)}

  /* Revelado palabra a palabra */
  .w{display:inline-block;overflow:hidden;vertical-align:top}
  .w>span{display:inline-block;will-change:transform,opacity}
  @media (prefers-reduced-motion:no-preference){
    .w>span{translate:0 110%;opacity:0;filter:blur(5px);animation:wUp .8s var(--ease-out) forwards;
      animation-delay:calc(var(--i) * 50ms + var(--d,0ms))}
    @keyframes wUp{to{translate:0 0;opacity:1;filter:blur(0)}}
    @supports (animation-timeline:view()){
      .in-view .w>span{animation-timeline:view();animation-range:entry 5% cover 24%;
        animation-delay:0s;animation-duration:auto;animation-fill-mode:both}}
  }

  /* Foco que sigue al puntero */
  .spot{position:relative;isolation:isolate}
  .spot::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
    transition:opacity .35s var(--ease);
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
      color-mix(in oklab,var(--cyan) 20%,transparent),transparent 62%)}
  .spot:hover::before,.spot:focus-within::before{opacity:1}

  /* Haz de luz en el borde */
  .beam{position:relative}
  .beam::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
    transition:opacity .4s var(--ease);
    background:conic-gradient(from var(--sweep),transparent 0 64%,var(--cyan-glow) 80%,var(--cyan) 86%,transparent 94%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
  @media (prefers-reduced-motion:no-preference){
    .beam:hover::after{opacity:1;animation:bs 2.6s linear infinite} @keyframes bs{to{--sweep:360deg}}}

  /* Odómetro */
  .od,.od-ch{display:inline-block;block-size:1em;line-height:1;vertical-align:bottom}
  .od{overflow:hidden}
  .od__col{display:block;transition:translate 1.9s var(--ease-out);translate:0 calc(var(--n,0) * -1em)}
  .od__col span{display:block;block-size:1em;line-height:1}
}

@layer layout{
  .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
  .section{padding-block:var(--sp-sec);position:relative}
  .section--mist{background:var(--mist)}
  .section--dark{background:var(--graphite);color:#fff;--ink:#fff;--ink-2:rgb(255 255 255 / .62);--line:var(--line-dk);--paper:rgb(255 255 255 / .05)}
  .section--defer{content-visibility:auto;contain-intrinsic-size:auto 800px}
  .grid{display:grid;gap:var(--sp-5)}
  .g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
}

@layer components{
  .h1{font-family:var(--f-display);font-weight:700;font-size:var(--s-4);line-height:1.06;letter-spacing:-.03em}
  .h2{font-family:var(--f-display);font-weight:700;font-size:var(--s-3);line-height:1.12;letter-spacing:-.025em;margin-block:var(--sp-4)}
  .h3{font-family:var(--f-display);font-weight:600;font-size:var(--s-2);line-height:1.24;letter-spacing:-.015em}
  .lede{font-size:var(--s-1);color:var(--ink-2);max-width:62ch;line-height:1.7}
  .muted{color:var(--ink-2);font-size:var(--s--1);line-height:1.75}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
    padding:.85rem 1.6rem;border-radius:8px;font-family:var(--f-mono);font-size:var(--s--1);
    white-space:nowrap;position:relative;overflow:clip;
    transition:background-color .25s var(--ease),color .25s,border-color .25s,box-shadow .3s,translate .25s var(--ease-out)}
  .btn svg{inline-size:1em;block-size:1em;flex:none;transition:translate .25s var(--ease)}
  .btn:hover svg{translate:3px 0}
  .btn--solid{background:var(--cyan);color:#04121c;font-weight:500}
  .btn--solid:hover{background:var(--cyan-glow);box-shadow:0 10px 32px -8px color-mix(in oklab,var(--cyan) 70%,transparent)}
  .btn--ghost{border:1px solid color-mix(in oklab,currentColor 30%,transparent)}
  .btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}

  /* ── Navegación ── */
  .nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;padding-block:var(--sp-4);
    border-block-end:1px solid transparent;transition:background-color .35s var(--ease),border-color .35s,padding .35s}
  .nav[data-stuck]{background:color-mix(in oklab,var(--graphite) 90%,transparent);backdrop-filter:blur(16px) saturate(1.4);
    border-block-end-color:var(--line-dk);padding-block:var(--sp-3)}
  .nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5)}
  .nav__logo img{block-size:clamp(26px,3vw,34px);inline-size:auto}
  .nav__links{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.9rem)}
  .nav__links>li{position:relative}
  .nav__links a:not(.btn){font-size:var(--s--1);color:rgb(255 255 255 / .82);letter-spacing:.04em;
    display:inline-flex;align-items:center;gap:.35rem;padding-block:4px;position:relative}
  .nav__links a:not(.btn)::after{content:'';position:absolute;inset-block-end:0;inset-inline-start:0;
    inline-size:100%;block-size:1px;background:var(--cyan);scale:0 1;transform-origin:right;transition:scale .3s var(--ease)}
  .nav__links a:not(.btn):hover::after{scale:1 1;transform-origin:left}
  .sub{position:absolute;inset-block-start:100%;inset-inline-start:-1rem;min-inline-size:15rem;
    background:var(--graphite);border:1px solid var(--line-dk);border-radius:10px;padding:.5rem;
    display:grid;gap:2px;opacity:0;visibility:hidden;translate:0 8px;transition:all .25s var(--ease);
    box-shadow:0 18px 44px -18px rgb(0 0 0 / .6)}
  .nav__links li:hover .sub,.nav__links li:focus-within .sub{opacity:1;visibility:visible;translate:0 0}
  .sub a{padding:.5rem .75rem;border-radius:6px;font-size:var(--s--1)}
  .sub a:hover{background:rgb(255 255 255 / .07);color:var(--cyan)}
  .sub a::after{display:none}
  .burger{display:none;padding:var(--sp-2);color:#fff}
  @media (width < 66rem){.nav__links{display:none}.burger{display:block}}

  .menu{inline-size:100%;max-inline-size:100%;block-size:100dvh;background:var(--graphite);color:#fff}
  .menu::backdrop{background:rgb(10 16 23 / .75)}
  .menu__in{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--gutter);block-size:100%}
  .menu__top{display:flex;justify-content:space-between;align-items:center}
  .menu__list{display:flex;flex-direction:column;gap:var(--sp-4);margin-block:auto}
  .menu__list a{font-family:var(--f-display);font-weight:600;font-size:var(--s-2);letter-spacing:-.02em}
  .menu__list a:hover{color:var(--cyan)}
  .menu__list .sublist{margin-block-start:var(--sp-3);display:grid;gap:var(--sp-3);padding-inline-start:var(--sp-4);
    border-inline-start:1px solid var(--line-dk)}
  .menu__list .sublist a{font-family:var(--f-body);font-weight:400;font-size:var(--s-0);color:rgb(255 255 255 / .7)}

  /* ── Héroe ── */
  .hero{position:relative;min-block-size:100svh;display:flex;align-items:center;overflow:clip;color:#fff;
    padding-block:clamp(7rem,6rem + 6vw,10rem) var(--sp-sec);
    background:radial-gradient(120% 110% at 78% 8%,#1d3a52 0%,transparent 60%),
               linear-gradient(160deg,#1a2836 0%,var(--graphite) 45%,var(--graphite-3) 100%)}
  .hero__glow{position:absolute;inset-block-start:-18%;inset-inline-end:-10%;inline-size:60vw;block-size:60vw;
    border-radius:50%;background:var(--cyan);opacity:.16;filter:blur(90px);pointer-events:none;
    animation:glowDrift 20s var(--ease) infinite alternate}
  @keyframes glowDrift{to{transform:translate3d(-10vw,12vh,0) scale(1.18);opacity:.1}}
  .hero__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr))}

  .slides{position:relative;min-block-size:clamp(11rem,20vw,15rem)}
  .slide{position:absolute;inset:0;opacity:0;visibility:hidden;translate:0 1rem;
    transition:opacity .7s var(--ease),translate .7s var(--ease),visibility .7s}
  .slide[data-on]{opacity:1;visibility:visible;translate:0 0;position:relative}
  .slide .h1{max-inline-size:16ch}
  .slide .btn{margin-block-start:var(--sp-6)}
  .dots{display:flex;gap:.6rem;margin-block-start:var(--sp-6)}
  .dot{inline-size:2.25rem;block-size:3px;border-radius:2px;background:rgb(255 255 255 / .2);position:relative;overflow:clip}
  .dot[aria-current="true"]{background:rgb(255 255 255 / .28)}
  .dot i{position:absolute;inset:0;background:var(--cyan);transform-origin:left;scale:0 1}
  .dot[aria-current="true"] i{animation:dotFill 7s linear forwards}
  @keyframes dotFill{to{scale:1 1}}

  /* Red de nodos: el conector del logotipo, animado */
  .net{inline-size:100%;block-size:auto}
  .net__link{stroke:var(--cyan);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:4 6;animation:flow 1.8s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-20}}
  .net__pulse{fill:var(--cyan-glow);animation:pulseRun 3.6s var(--ease) infinite}
  @keyframes pulseRun{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
  .net__node{fill:var(--graphite-2);stroke:var(--cyan);stroke-width:1.5}
  .net__hub{fill:var(--cyan);stroke:none}
  .net__halo{fill:var(--cyan);opacity:.16;transform-box:fill-box;transform-origin:center;animation:halo 3s var(--ease) infinite}
  @keyframes halo{0%,100%{scale:1;opacity:.16}50%{scale:1.6;opacity:.04}}
  .net__lbl{font-family:var(--f-mono);font-size:11px;fill:rgb(255 255 255 / .55);text-anchor:middle}

  .hero__strip{display:grid;gap:1px;background:var(--line-dk);border:1px solid var(--line-dk);border-radius:var(--r);
    overflow:clip;margin-block-start:clamp(2.5rem,5vw,4rem);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
  .hero__strip>div{background:var(--graphite-2);padding:var(--sp-5) var(--sp-6);display:grid;gap:.3rem}
  .hero__strip b{font-family:var(--f-display);font-weight:600;font-size:var(--s-1);letter-spacing:-.01em}
  .hero__strip a{color:var(--cyan);font-size:var(--s--1);word-break:break-all}

  /* ── Muro de clientes ── */
  .wall{padding-block:var(--sp-6);background:var(--paper);border-block:1px solid var(--line);overflow:clip}
  .wall__row{display:flex;gap:clamp(2rem,4vw,3.5rem);align-items:center;
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .wall__track{display:flex;gap:clamp(2rem,4vw,3.5rem);align-items:center;flex:none;padding-inline-end:clamp(2rem,4vw,3.5rem);
    animation:march 46s linear infinite;will-change:transform}
  .wall--rev .wall__track{animation-direction:reverse;animation-duration:58s}
  .wall:hover .wall__track{animation-play-state:paused}
  @keyframes march{to{transform:translateX(-100%)}}
  .wall img{block-size:clamp(36px,4.2vw,56px);inline-size:auto;max-inline-size:170px;object-fit:contain;
    filter:grayscale(1);opacity:.72;transition:filter .35s var(--ease),opacity .35s,scale .35s}
  .wall img:hover{filter:none;opacity:1;scale:1.06}
  @media (prefers-reduced-motion:reduce){
    .wall__track{animation:none}
    .wall__row{flex-wrap:wrap;justify-content:center;mask-image:none}
    .wall--rev{display:none}
  }

  /* ── Tarjetas ── */
  .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-6);
    display:flex;flex-direction:column;gap:var(--sp-3);
    transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
  .card:hover{transform:translateY(-6px);border-color:color-mix(in oklab,var(--cyan) 45%,var(--line));
    box-shadow:0 24px 48px -26px rgb(22 32 42 / .28)}
  .card__ico{inline-size:2.9rem;block-size:2.9rem;border-radius:10px;display:grid;place-items:center;
    background:var(--cyan-wash);transition:transform .45s var(--ease),background-color .3s}
  .card:hover .card__ico{transform:rotate(-8deg) scale(1.08);background:color-mix(in oklab,var(--cyan) 22%,transparent)}
  .card__ico svg{inline-size:1.35rem;block-size:1.35rem;stroke:var(--cyan-deep);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .card__more{margin-block-start:auto;padding-block-start:var(--sp-4);font-family:var(--f-mono);font-size:var(--s--1);
    color:var(--cyan-deep);display:inline-flex;align-items:center;gap:.4rem}
  .card:hover .card__more{gap:.7rem}

  /* ── Resultados 01/02/03 ── */
  .res{display:flex;gap:var(--sp-5);align-items:baseline;padding-block:var(--sp-5);border-block-start:1px solid var(--line)}
  .res__n{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1;
    letter-spacing:-.04em;color:var(--cyan);flex:none;min-inline-size:3.2rem}
  .res__t{font-family:var(--f-display);font-weight:600;font-size:var(--s-2);line-height:1.25;letter-spacing:-.015em}

  /* ── Contadores ── */
  .stat{text-align:center}
  .stat__n{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1;
    letter-spacing:-.04em;color:var(--cyan);font-variant-numeric:tabular-nums;white-space:nowrap}
  .stat__l{font-family:var(--f-mono);font-size:var(--s--2);letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-2);margin-block-start:var(--sp-3)}
  .todo{outline:1px dashed #c2612f;outline-offset:6px;border-radius:4px}

  /* ── Aliados ── */
  .ally{display:grid;place-items:center;gap:var(--sp-4);padding:var(--sp-6) var(--sp-5);
    border:1px solid var(--line);border-radius:var(--r);background:var(--paper);text-align:center;
    transition:transform .35s var(--ease),border-color .3s}
  .ally:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--cyan) 45%,var(--line))}
  .ally__name{font-family:var(--f-display);font-weight:600;font-size:var(--s-1)}
  .ally__ph{inline-size:100%;block-size:2.6rem;border-radius:6px;background:var(--mist);display:grid;place-items:center;
    font-family:var(--f-mono);font-size:var(--s--2);color:var(--ink-2)}

  /* ── Llamada final ── */
  .cta{background:linear-gradient(135deg,var(--cyan-deep) 0%,#155e8f 45%,var(--graphite) 100%);
    color:#fff;border-radius:var(--r);padding:clamp(2rem,5vw,3.5rem);position:relative;overflow:clip;
    display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center;justify-content:space-between}
  .cta::after{content:'';position:absolute;inset-block-start:-40%;inset-inline-end:-10%;inline-size:32rem;block-size:32rem;
    border-radius:50%;background:var(--cyan);opacity:.18;filter:blur(70px)}
  .cta>*{position:relative;z-index:1}

  /* ── Pie ── */
  .foot{background:var(--graphite-3);color:#fff;padding-block:var(--sp-8) var(--sp-5);
    --ink-2:rgb(255 255 255 / .5);--line:var(--line-dk);position:relative;overflow:clip}
  .foot::before{content:'';position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;
    background:linear-gradient(90deg,var(--cyan-deep),var(--cyan),var(--cyan-glow),var(--cyan),var(--cyan-deep));
    background-size:200% 100%;animation:fs 9s linear infinite}
  @keyframes fs{to{background-position:200% 0}}
  .foot__grid{display:grid;gap:var(--sp-6);padding-block-end:var(--sp-7);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
  .foot h2{font-family:var(--f-mono);font-size:var(--s--2);letter-spacing:.14em;text-transform:uppercase;margin-block-end:var(--sp-4)}
  .foot li{margin-block-end:var(--sp-2)}
  .foot a,.foot p{font-size:var(--s--1);color:rgb(255 255 255 / .55)}
  .foot a{transition:color .2s}
  .foot a:hover{color:var(--cyan)}
  .foot__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);padding-block-start:var(--sp-5);
    border-block-start:1px solid var(--line-dk);font-family:var(--f-mono);font-size:var(--s--2);color:rgb(255 255 255 / .38)}
  .social{display:flex;gap:var(--sp-3);margin-block-start:var(--sp-4)}
  .social a{inline-size:2.1rem;block-size:2.1rem;border:1px solid var(--line-dk);border-radius:50%;
    display:grid;place-items:center;transition:all .25s var(--ease)}
  .social a:hover{border-color:var(--cyan);background:color-mix(in oklab,var(--cyan) 15%,transparent)}
  .social svg{inline-size:.95rem;block-size:.95rem;fill:currentColor}
}

@layer utils{
  .vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .mt7{margin-block-start:var(--sp-7)}
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){.rv{animation:rvIn linear both;animation-timeline:view();animation-range:entry 6% cover 24%}}
    @supports not (animation-timeline:view()){
      .rv{opacity:0;translate:0 1.5rem;transition:opacity .7s var(--ease-out),translate .7s var(--ease-out)}
      .rv.on{opacity:1;translate:0 0}}
    @keyframes rvIn{from{opacity:0;translate:0 2rem}to{opacity:1;translate:0 0}}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
    .hero__glow{display:none}
  }
}


/* ═══════════ Páginas internas ═══════════ */
@layer components{
  .phero{position:relative;padding-block:clamp(8rem,7rem + 6vw,11rem) var(--sp-sec);color:#fff;overflow:clip;
    background:var(--bg) center/cover no-repeat,#16202a}
  .phero__ov{position:absolute;inset:0;background:linear-gradient(120deg,rgb(15 23 32 / .94) 0%,rgb(15 23 32 / .8) 55%,rgb(27 127 191 / .55) 100%)}
  .phero__in{position:relative;z-index:2}
  .phero .h1{max-inline-size:20ch;margin-block:var(--sp-4)}
  .bcrumb{font-family:var(--f-mono);font-size:var(--s--2);color:rgb(255 255 255 / .6);margin-block-end:var(--sp-4);display:flex;gap:.5rem;flex-wrap:wrap}
  .bcrumb a{color:var(--cyan-glow)} .bcrumb span{opacity:.5}
  .split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
  .fig{border-radius:var(--r);overflow:clip;box-shadow:0 24px 60px -30px rgb(22 32 42 / .4)}
  .fig img{inline-size:100%;block-size:100%;object-fit:cover;aspect-ratio:4/3;display:block;transition:scale .6s var(--ease)}
  .fig:hover img{scale:1.05}
  .chk{display:grid;gap:var(--sp-3);margin-block-start:var(--sp-5)}
  .chk li{display:flex;gap:var(--sp-3);align-items:flex-start;line-height:1.6}
  .chk svg{inline-size:1.35rem;block-size:1.35rem;flex:none;stroke:var(--cyan-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-block-start:.2rem}
  .section--dark .chk svg{stroke:var(--cyan)}
  .num{position:relative;padding-inline-start:3.4rem}
  .num::before{content:attr(data-n);position:absolute;inset-inline-start:0;inset-block-start:-.15rem;
    font-family:var(--f-display);font-weight:700;font-size:var(--s-2);color:var(--cyan);letter-spacing:-.03em}
  .prose{max-width:70ch} .prose p{margin-block-start:var(--sp-4)}
  .paises{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-block-start:var(--sp-6)}
  .pais{font-family:var(--f-mono);font-size:var(--s--1);padding:.55rem 1.2rem;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;gap:.55rem}
  .pais::before{content:'';inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--cyan)}
  .cl-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));margin-block-start:var(--sp-7)}
  .cl-cell{aspect-ratio:3/2;display:grid;place-items:center;padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r);background:var(--paper);transition:border-color .3s,transform .3s}
  .cl-cell:hover{border-color:color-mix(in oklab,var(--cyan) 45%,var(--line));transform:translateY(-4px)}
  .cl-cell img{max-block-size:52px;max-inline-size:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
  .cl-cell:hover img{filter:none;opacity:1}
  .ally-grid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-block-start:var(--sp-7)}
  .form{display:grid;gap:var(--sp-4);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:0 24px 60px -34px rgb(22 32 42 / .3)}
  .form .row{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
  .field{display:grid;gap:var(--sp-2)}
  .field>span{font-family:var(--f-mono);font-size:var(--s--2);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .field :is(input,select,textarea){inline-size:100%;padding:.75rem .9rem;background:var(--mist);border:1px solid var(--line);border-radius:8px;font-size:var(--s--1);transition:border-color .2s,background-color .2s}
  .field :is(input,select,textarea):focus{background:var(--paper);border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--cyan) 22%,transparent)}
  .field textarea{resize:vertical;min-block-size:6.5rem;field-sizing:content}
  .field :is(input,textarea):user-invalid{border-color:#c2411f}
  .field :is(input,textarea):user-invalid ~ .err{display:block}
  .err{display:none;font-family:var(--f-mono);font-size:var(--s--2);color:#c2411f}
  .status{font-family:var(--f-mono);font-size:var(--s--1);line-height:1.6}
  .status[data-s="ok"]{color:var(--cyan-deep)} .status[data-s="err"]{color:#c2411f}
  .hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .detail{display:flex;gap:var(--sp-4);align-items:flex-start;padding-block:var(--sp-4);border-block-end:1px solid var(--line)}
  .detail__ico{inline-size:2.6rem;block-size:2.6rem;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--cyan-wash)}
  .detail__ico svg{inline-size:1.15rem;block-size:1.15rem;stroke:var(--cyan-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .detail__k{font-family:var(--f-mono);font-size:var(--s--2);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
}