/*
  KÖNNEN Supply Chain Solutions — sitio web
  Concepto, diseño y desarrollo: Rodolfo Zavala · 2026
  Créditos completos: /humans.txt
*/
  :root{
    --white:#ffffff;
    --off-white:#f5f5f6;
    --paper:#fafafa;
    --black:#0b0b0c;
    --ink:#1c1c1e;
    --silver-1:#e4e5e7;
    --silver-2:#a7aaae;
    --silver-3:#6e7075;
    --line:#dfe0e2;
    --orange:#e87722;
    --orange-dim: rgba(232,119,34,.14);
    --ff-display:'Big Shoulders Display', sans-serif;
    --ff-body:'Inter', sans-serif;
    --ff-mono:'JetBrains Mono', monospace;
    --container: 1240px;
    /* shared fine-grain texture for the dark sections — keeps flat blacks from
       reading as a dead, uniform slab (psabdp.com / Stoop-style layered black) */
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* scroll-behavior left at default: Lenis (below) drives all smooth scrolling now —
     leaving CSS smooth-scroll on too fights it and produces choppy, stepped motion */
  /* overflow-x:hidden here (not just on body) is a classic, well-documented
     cause of position:sticky breaking on descendants — it did exactly that
     to .proceso-sticky ("Cómo operamos"). body's own overflow-x:hidden
     below is enough to contain horizontal overflow without touching the
     root element. */
  html{scroll-behavior:auto;}
  body{
    font-family:var(--ff-body);
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--container); margin:0 auto; padding:0 32px;}
  section{position:relative;}
  .eyebrow{
    font-family:var(--ff-mono);
    font-size:12.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--orange);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{content:''; width:26px; height:1px; background:var(--orange);}
  h1,h2,h3,h4{
    font-family:var(--ff-display);
    text-transform:uppercase;
    font-weight:700;
    line-height:.96;
    letter-spacing:-.01em;
  }
  h2{font-size:clamp(34px,4.6vw,58px);}
  h3{font-size:clamp(20px,2vw,26px); font-weight:600;}
  p{color:var(--silver-3); line-height:1.65; font-size:16px;}
  .accent{color:var(--orange);}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--ff-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
    padding:16px 26px; border-radius:2px; transition:all .25s ease; cursor:pointer; border:1px solid transparent;
    white-space:nowrap;
  }
  .btn-primary{background:var(--black); color:var(--white);}
  .btn-primary:hover{background:var(--orange);}
  .btn-primary svg{transition:transform .25s ease;}
  .btn-primary:hover svg{transform:translateX(3px);}
  .btn-ghost{border-color:var(--line); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--black);}
  .btn-ghost-dark{border-color:rgba(255,255,255,.28); color:var(--white);}
  .btn-ghost-dark:hover{border-color:var(--orange); color:var(--orange);}

  /* ===== HEADER — floating pill nav + standalone CTA (Stoop-style) ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:none; border:none;
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:22px 32px; max-width:var(--container); margin:0 auto;}
  /* language switch — a sibling BEFORE <header> in the DOM (not inside it).
     Fixed (not absolute) so it stays pinned to the viewport exactly like
     the rest of the nav instead of scrolling away with the page.
     z-index above header's own 100 — otherwise the fixed header's box
     (transparent background, but still hit-testable) sits on top in the
     stacking order and swallows every click meant for the switch beneath it.
     top/right here are just the pre-JS fallback — initLangSwitchPosition()
     in script.js measures the real gap between the logo pill and the
     track/login pill (its width depends on nav-links text, which varies by
     language and viewport) and repositions it precisely on load/resize —
     using plain viewport-relative coordinates now, no scrollX/scrollY,
     since a fixed element's own top/left are already viewport-relative. */
  .header-utility{position:fixed; top:30px; right:300px; z-index:101;}
  .nav-pill{
    display:flex; align-items:center; gap:34px;
    background:rgba(16,16,18,.94);
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    padding:10px 12px 10px 22px;
    transition:background .3s ease, gap .45s cubic-bezier(.4,0,.2,1);
  }
  /* logo box shrinks to the mark's width on scroll (below) — tighten the
     gap to match, so the mark doesn't leave a hole where the full
     logotype used to be */
  header.is-scrolled .nav-pill{gap:10px;}
  /* width sized to the full logotype's rendered aspect ratio at 28px tall;
     this — not just the image opacity — is what the nav-links slide is keyed to */
  .nav-logo{position:relative; flex-shrink:0; height:28px; width:117px; transition:width .45s cubic-bezier(.4,0,.2,1);}
  .nav-logo img{
    position:absolute; left:0; top:50%; height:28px; width:auto; max-width:none;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(255,255,255,.15));
    transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1);
  }
  .nav-logo-full{transform:translateY(-50%);}
  .nav-logo:hover .nav-logo-full{transform:translateY(-50%) translateY(-1px);}
  /* full logotype shown at rest; on scroll it dissolves into the compact imagotipo mark
     while the logo box itself shrinks to the mark's width — pulling nav-links left with it */
  .nav-logo-mark{transform:translateY(-50%) scale(.8); opacity:0; pointer-events:none;}
  header.is-scrolled .nav-logo{width:28px;}
  header.is-scrolled .nav-logo-full{opacity:0; transform:translateY(-50%) scale(.8);}
  header.is-scrolled .nav-logo-mark{
    opacity:1; transform:translateY(-50%) scale(1); pointer-events:auto;
  }
  header.is-scrolled .nav-logo:hover .nav-logo-mark{transform:translateY(-50%) translateY(-1px);}
  @media (prefers-reduced-motion: reduce){
    .nav-logo{transition:none;}
    .nav-logo img{transition:opacity .2s linear;}
  }
  .nav-links{display:flex; align-items:center; gap:28px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--silver-1);}
  .nav-links > a{position:relative; padding:4px 0; color:var(--silver-1);}
  .nav-links > a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--orange); transition:width .25s ease;}
  .nav-links > a:hover{color:var(--white);}
  .nav-links > a:hover::after{width:100%;}
  .nav-links > a.is-current{color:var(--white);}
  .nav-links > a.is-current::after{width:100%;}
  /* ---- Right-side action group: one pill, three sections ---- */
  .nav-actions{
    display:flex; align-items:stretch; flex-shrink:0;
    background:rgba(16,16,18,.94);
    border:1px solid rgba(255,255,255,.10); border-radius:999px;
    overflow:hidden;
  }
  .nav-action{
    display:flex; align-items:center; justify-content:center; text-align:center;
    width:118px; flex:0 0 118px;
    padding:10px 12px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
    line-height:1.35; color:var(--silver-1); white-space:normal; border-right:1px solid rgba(255,255,255,.10);
    transition:background .2s ease, color .2s ease;
  }
  .nav-action:last-child{border-right:none;}
  .nav-action:hover{background:rgba(255,255,255,.07); color:var(--white);}
  /* Rastrear envío gets a soft highlight — customers use this to check orders,
     so it deserves a little more weight, without going full accent-button loud */
  .nav-action--track{background:rgba(232,119,34,.12); color:var(--white);}
  .nav-action--track:hover{background:rgba(232,119,34,.22);}
  .nav-action--login{width:auto; flex:0 0 auto; padding:0 22px;}
  .nav-action--login svg{width:18px; height:18px;}

  /* ---- Nav dropdowns (Soluciones / Servicios / Industrias) ---- */
  .nav-drop{position:relative;}
  .nav-drop-trigger{
    position:relative; display:inline-flex; align-items:center; gap:6px;
    padding:4px 0; color:var(--silver-1); cursor:pointer;
  }
  .nav-drop-trigger::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--orange); transition:width .25s ease;}
  .nav-drop:hover .nav-drop-trigger, .nav-drop:focus-within .nav-drop-trigger{color:var(--white);}
  .nav-drop:hover .nav-drop-trigger::after, .nav-drop:focus-within .nav-drop-trigger::after{width:100%;}
  .nav-drop-caret{width:8px; height:8px; flex-shrink:0; transition:transform .25s ease;}
  .nav-drop:hover .nav-drop-caret, .nav-drop:focus-within .nav-drop-caret{transform:rotate(180deg);}
  .nav-drop-panel{
    position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px);
    min-width:230px; background:rgba(16,16,18,.97);
    backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
    border:1px solid rgba(255,255,255,.10); border-radius:14px;
    padding:8px; display:flex; flex-direction:column; gap:2px;
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 24px 48px rgba(0,0,0,.45);
  }
  /* invisible bridge over the gap so the pointer never "leaves" the dropdown
     while moving from the trigger down into the panel */
  .nav-drop-panel::before{content:''; position:absolute; left:0; right:0; top:-18px; height:18px;}
  .nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel{
    opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .nav-drop-panel a{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 12px; border-radius:8px; white-space:nowrap;
    font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.03em; text-transform:none;
    color:var(--silver-1); transition:background .2s ease, color .2s ease;
  }
  .nav-drop-panel a::after{display:none;}
  .nav-drop-panel a:hover{background:rgba(232,119,34,.14); color:var(--white);}
  .nav-drop-panel a.is-current{background:rgba(232,119,34,.16); color:var(--white);}

  /* ---- Nested flyout (Próximas Innovaciones > Eagle/Palett/Cooldown Ship) ----
     Same visual language as .nav-drop-panel, opening to the right of the
     parent panel instead of below the trigger. */
  .nav-subdrop{position:relative;}
  .nav-subdrop-caret{width:7px; height:7px; flex-shrink:0; transform:rotate(-90deg);}
  .nav-subdrop-panel{
    position:absolute; left:100%; top:-8px; margin-left:8px;
    min-width:200px; background:rgba(16,16,18,.97);
    backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
    border:1px solid rgba(255,255,255,.10); border-radius:14px;
    padding:8px; display:flex; flex-direction:column; gap:2px;
    opacity:0; pointer-events:none; transform:translateX(-6px);
    transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 24px 48px rgba(0,0,0,.45);
  }
  /* invisible bridge over the gap so the pointer never "leaves" while
     moving sideways from the trigger into the flyout */
  .nav-subdrop-panel::before{content:''; position:absolute; top:0; bottom:0; left:-8px; width:8px;}
  .nav-subdrop:hover .nav-subdrop-panel, .nav-subdrop:focus-within .nav-subdrop-panel{
    opacity:1; pointer-events:auto; transform:translateX(0);
  }
  .nav-subdrop-panel em{
    font-style:normal; font-size:9.5px; letter-spacing:.03em; color:var(--orange); flex-shrink:0;
  }
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
  .burger span{width:22px; height:2px; background:var(--ink);}

  /* ===== MOBILE MENU (full-screen overlay) ===== */
  .mobile-menu{
    position:fixed; inset:0; z-index:200;
    background:var(--off-white);
    transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.6,0,.2,1);
    overflow-y:auto;
  }
  .mobile-menu.open{transform:translateY(0);}
  .mobile-menu-inner{padding:110px 28px 50px;}
  .mm-close{
    position:absolute; top:16px; right:20px; z-index:5;
    background:var(--black); color:#fff; border:none; cursor:pointer;
    width:52px; height:44px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease;
  }
  .mm-close:hover{background:var(--orange);}
  .mm-label{
    display:block; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--silver-3); margin-bottom:16px;
  }
  .mm-links{display:flex; flex-direction:column; margin-bottom:36px;}
  /* both the flat top-level links (Inicio/Blog/Contacto) and each
     accordion's own trigger row share this exact look — same face/size/
     divider — so the list reads as one continuous menu regardless of which
     rows happen to expand */
  .mm-links > a, .mm-accordion-trigger{
    all:unset; box-sizing:border-box; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
    font-family:var(--ff-display); font-size:32px; text-transform:uppercase; line-height:1.35;
    color:var(--ink); border-bottom:1px solid var(--line); padding:10px 0 10px;
    transition:border-color .25s ease, color .25s ease;
  }
  .mm-links > a:first-child, .mm-accordion:first-child .mm-accordion-trigger{padding-top:0;}
  /* accordion — one section (Soluciones/Servicios/Industrias/Nosotros) open
     at a time, its sublinks collapsing to nothing rather than always
     sitting expanded down the page */
  .mm-accordion.is-open .mm-accordion-trigger{border-color:var(--orange); color:var(--orange);}
  .mm-accordion-icon{position:relative; flex-shrink:0; width:20px; height:20px;}
  .mm-accordion-icon::before, .mm-accordion-icon::after{
    content:''; position:absolute; top:50%; left:50%; background:currentColor;
    transform:translate(-50%,-50%); transition:transform .25s ease, opacity .25s ease;
  }
  .mm-accordion-icon::before{width:14px; height:2px;}
  .mm-accordion-icon::after{width:2px; height:14px;}
  .mm-accordion.is-open .mm-accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
  .mm-accordion-panel{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1);}
  .mm-accordion.is-open .mm-accordion-panel{max-height:540px;}
  .mm-sublinks, .mm-accordion-panel-inner{display:flex; flex-direction:column; gap:14px; margin-bottom:34px;}
  .mm-accordion-panel-inner{margin-bottom:0; padding:18px 4px 20px 14px;}
  .mm-sublinks a, .mm-accordion-panel-inner a{font-family:var(--ff-body); font-size:16px; color:var(--silver-3); transition:color .2s ease;}
  .mm-accordion-panel-inner a:hover{color:var(--orange);}
  .mm-accordion-panel-inner a.mm-sublink{
    padding-left:16px; font-size:14px; display:flex; align-items:center; gap:8px;
  }
  .mm-accordion-panel-inner a.mm-sublink::before{content:'—'; color:var(--silver-3); opacity:.6;}
  .mm-accordion-panel-inner a.mm-sublink em{font-style:normal; font-size:12px; color:var(--orange); margin-left:auto;}
  .mm-hr{height:1px; background:var(--line); margin-bottom:30px;}
  /* Rastrear envío / Iniciar sesión — real full-width buttons instead of
     small muted text links, so these two land with the same weight they
     get in the desktop nav-actions pill instead of reading as an
     afterthought under the main menu */
  .mm-actions{display:flex; flex-direction:column; gap:12px; margin-bottom:30px;}
  .mm-actions .btn{justify-content:center; width:100%;}
  .mm-contact{display:flex; flex-direction:column; gap:10px;}
  .mm-contact a{font-family:var(--ff-mono); font-size:14px; color:var(--ink);}
  /* full wordmark closing the menu, right under the contact lines — dark on
     the light mobile-menu background (no invert filter, unlike the
     footer's white version), with a soft layered shadow so it lifts off
     the page instead of sitting flat like a plain inline image */
  .mm-logo{
    display:flex; justify-content:center; align-items:center;
    margin-top:18px; padding:34px 24px;
    background:var(--black);
  }
  /* naturally dark artwork — invert to white so it reads against the
     solid black fill instead of disappearing into it */
  .mm-logo img{height:36px; width:auto; filter:brightness(0) invert(1);}
  body.menu-open{overflow:hidden;}

  /* ===== HEADER pills (mobile/tablet — nav now carries more items than fit a mid-width desktop row) ===== */
  @media (max-width:1480px){
    .nav{padding:14px 20px;}
    /* the "above the pills" spot is too tight once nav padding shrinks —
       sit beside the burger instead, vertically centered in the row */
    .header-utility{top:22px; right:96px;}
    .nav-pill{padding:8px 10px 8px 16px;}
    .nav-links, .nav-actions{display:none;}
    .nav-logo img{height:24px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.2));}
    .burger{
      display:flex; z-index:201; position:relative;
      background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,.15);
      width:48px; height:42px; border-radius:6px;
      align-items:center; justify-content:center; gap:5px;
    }
    .burger span{width:20px; height:2px; background:#fff; transition:all .3s ease;}
    .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .burger.is-open span:nth-child(2){opacity:0;}
    .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  }

  /* ===== HERO (video, Stoop-style) ===== */
  .hero-video{
    position:relative; width:100%; max-width:100vw; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden; background:var(--black); padding:150px 0 20px;
  }
  .hero-media{position:absolute; inset:0; z-index:0; max-width:100%; overflow:hidden;}
  .hero-poster, .hero-video-el{position:absolute; inset:0; width:100%; height:100%; max-width:100%; object-fit:cover; transition:opacity .6s ease;}
  .hero-poster{animation:heroDrift 22s ease-in-out infinite alternate;}
  @keyframes heroDrift{
    from{transform:scale(1.08) translate(0,0);}
    to{transform:scale(1.15) translate(-2%, -1%);}
  }
  @media (prefers-reduced-motion: reduce){
    .hero-poster{animation:none;}
  }
  .hero-video-el{opacity:0; transition:opacity .6s ease;}
  .hero-video-el.is-ready{opacity:1;}
  /* light touch only, mostly to keep the title legible at the bottom —
     the video keeps its own original color instead of being pushed to black */
  .hero-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%);
  }
  .hero-video-content{position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:0 32px; width:100%; text-align:left;}
  /* rule with a looping comet sweep — a wispy, multi-strand, all-orange
     saber-style trail. The wrap clips exactly to the bar's own span, so the
     tail is never a fixed shape popping in from outside: it's born as just
     the tip at the bar's start and gradually reveals itself as it slides in
     (clipped by the wrap), and just as gradually gets swallowed again at the
     bar's end — the trail body is never visible outside the bar. Top comet
     runs left→right, bottom right→left, both linear (no easing) so the loop
     restart is imperceptible — constant speed, no start/end "snap" to spot. */
  .hero-rule-wrap{
    position:relative; width:100%; height:40px; margin:-19px 0 3px;
    overflow-x:hidden; overflow-y:visible; pointer-events:none;
    /* soften the hard clip at each end into a fade, so the comet dissolves in
       and out at the bar's edges instead of being sliced off abruptly */
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .hero-rule-wrap--bottom{margin:3px 0 -19px;}
  .hero-rule{
    position:absolute; top:50%; left:0; width:100%; height:1px;
    background:rgba(255,255,255,.28); transform:translateY(-50%);
  }
  .comet{
    position:absolute; top:50%; width:26%; height:30px; transform:translateY(-50%);
  }
  /* ping-pong: each comet travels its own line, then reverses back — one
     continuous linear keyframe covering the full round trip (out then back)
     so the speed never changes. comet-inner flips (mirrors) exactly at the
     midpoint, right when the direction reverses, so the bright head still
     leads the trail on the way back instead of trailing behind it. */
  .comet--lr{left:-26%; animation:cometPingPongLR 7.6s linear infinite;}
  .comet--rl{right:-26%; animation:cometPingPongRL 7.6s linear infinite;}
  @keyframes cometPingPongLR{0%{left:-26%;} 50%{left:100%;} 100%{left:-26%;}}
  @keyframes cometPingPongRL{0%{right:-26%;} 50%{right:100%;} 100%{right:-26%;}}
  .comet-inner{position:absolute; inset:0; animation:cometOrient 7.6s linear infinite;}
  @keyframes cometOrient{
    0%, 49.9%{transform:scaleX(1);}
    50%, 100%{transform:scaleX(-1);}
  }

  /* several thin, offset, independently-blurred strands layered together
     read as loose wispy threads rather than one flat gradient bar — all in
     shades of the brand orange, no white/blue */
  .comet-tail{position:absolute; inset:0;}
  .comet--rl .comet-tail{transform:scaleX(-1);}
  .comet-strand{
    position:absolute; left:0; width:100%; border-radius:2px; mix-blend-mode:screen;
    background:linear-gradient(90deg, transparent 0%, rgba(180,85,20,.4) 25%, rgba(232,119,34,.7) 60%, rgba(255,170,90,.9) 100%);
  }
  .comet-strand.st1{top:13px; height:1px; opacity:.35; filter:blur(1px); transform:rotate(-3deg) scaleX(.9);}
  .comet-strand.st2{top:16px; height:1px; opacity:.5; filter:blur(.7px); transform:rotate(2deg) scaleX(.97);}
  .comet-strand.st3{top:14px; height:1.2px; opacity:.75; filter:blur(.4px); transform:rotate(-1.5deg);}
  .comet-strand.st4{top:15px; height:1.6px; opacity:1; filter:blur(.15px);
    background:linear-gradient(90deg, transparent 0%, rgba(200,95,25,.6) 30%, rgba(232,119,34,.95) 65%, rgba(255,180,100,1) 100%);
  }

  /* a soft tapered glint rather than a literal ball: an elongated ellipse,
     brightest at the very tip (a lighter, hotter orange — never white),
     fading into blur toward the tail */
  .comet-head{
    position:absolute; top:50%; right:-1px; width:20px; height:4px; margin-top:-2px;
    border-radius:50%; filter:blur(1.3px);
    background:linear-gradient(90deg, transparent 0%, rgba(232,119,34,.55) 45%, rgba(255,190,120,.9) 100%);
    box-shadow:0 0 8px 2px rgba(232,119,34,.55), 0 0 16px 5px rgba(232,119,34,.28);
  }
  .comet--rl .comet-head{right:auto; left:-1px;
    background:linear-gradient(270deg, transparent 0%, rgba(232,119,34,.55) 45%, rgba(255,190,120,.9) 100%);
  }

  .comet-spark{
    position:absolute; right:8px; width:1.6px; height:1.6px; border-radius:50%;
    background:rgba(255,175,100,1); box-shadow:0 0 4px 1px rgba(232,119,34,.85);
    opacity:0; animation:cometTwinkle 1.6s ease-in-out infinite;
  }
  .comet--rl .comet-spark{right:auto; left:8px;}
  .comet-spark.s1{top:7px; right:18px; animation-delay:0s;}
  .comet-spark.s2{top:19px; right:12px; animation-delay:.3s;}
  .comet-spark.s3{top:11px; right:30px; animation-delay:.6s;}
  .comet-spark.s4{top:16px; right:45px; animation-delay:.9s;}
  .comet-spark.s5{top:9px; right:60px; animation-delay:1.2s;}
  .comet--rl .comet-spark.s1{left:18px;} .comet--rl .comet-spark.s2{left:12px;}
  .comet--rl .comet-spark.s3{left:30px;} .comet--rl .comet-spark.s4{left:45px;}
  .comet--rl .comet-spark.s5{left:60px;}
  @keyframes cometTwinkle{
    0%, 100%{opacity:0; transform:translateY(0) scale(.5);}
    45%{opacity:1; transform:translateY(-3px) scale(1.3);}
    80%{opacity:0; transform:translateY(-7px) scale(.7);}
  }
  @media (prefers-reduced-motion: reduce){
    .comet, .comet-inner{animation:none; display:none;}
  }
  .hero-video-content .eyebrow{margin-bottom:10px;}
  .hero-video-title{
    display:flex; justify-content:center; align-items:baseline; width:100%; gap:clamp(20px,3vw,46px);
    /* impact from scale and air, not weight: a light face with generous
       tracking reads as more elegant/deliberate than a heavy bold one */
    font-size:clamp(26px,4vw,58px); color:#fff; font-weight:400; line-height:1.08; letter-spacing:.09em;
    /* punch through the video: a hard near shadow for edge definition plus a
       soft far one for depth, so the words hold their own against bright footage */
    text-shadow:0 2px 4px rgba(0,0,0,.65), 0 10px 30px rgba(0,0,0,.55);
  }
  .hero-video-title em{color:var(--white); font-style:italic; font-weight:500;}
  .title-line{position:relative; display:block; overflow:hidden;}
  .title-line-inner{display:block; perspective:420px;}
  /* each word lands as its own unit — a soft rise out of blur, letters
     barely offset from one another — then a brief pause before the next
     word begins (timed in JS below), instead of one continuous letter-reel
     running across all three words at once */
  .title-letter{
    display:inline-block; transform:translateY(38%); opacity:0; filter:blur(6px);
    animation:heroWordRise .7s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes heroWordRise{
    0%{transform:translateY(38%); opacity:0; filter:blur(6px);}
    100%{transform:translateY(0); opacity:1; filter:blur(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .title-letter{animation:none; transform:none; opacity:1; filter:none;}
  }
  .hero-cta-center{display:flex; justify-content:center; margin-top:36px;}

  /* hero link — straight to the Business Strategy board (#portafolio).
     Deliberately quiet: same small mono, muted style the old "[ Bajar ]"
     cue had, pinned to the bottom-left corner and out of flow so it never
     shifts or competes with the centered title. Only lights up on hover. */
  .hero-strategy-link{
    position:absolute; left:32px; bottom:34px; z-index:2;
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--silver-1); text-decoration:none; opacity:.85;
    transition:color .25s ease, opacity .25s ease;
  }
  .hero-strategy-link svg{width:14px; height:14px; transition:transform .25s ease;}
  .hero-strategy-link:hover{color:var(--orange); opacity:1;}
  .hero-strategy-link:hover svg{transform:translateX(4px);}
  .hero-strategy-link:focus-visible{outline:1px solid var(--orange); outline-offset:6px;}
  /* phones: in the corner it would sit on top of the centered scroll
     chevrons, so center it at the bottom and let it stand in for them.
     The chevrons only go invisible (not display:none) so they keep their
     space and the title stays exactly where it was. */
  @media (max-width:700px){
    .hero-strategy-link{left:50%; bottom:30px; transform:translateX(-50%); white-space:nowrap;}
    .hero-cta-center .hero-scroll-arrows{visibility:hidden;}
  }

  /* futuristic looping scroll cue: three chevrons cascade downward in a wave,
     each one lighting up with an orange glow as it "falls" past — replaces
     the old CTA button, points the eye at the next section instead */
  .hero-scroll-arrows{
    all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center;
    gap:4px; padding:10px 18px;
  }
  .hsa-chevron{
    width:42px; height:21px; color:var(--silver-1);
    opacity:.12; filter:drop-shadow(0 0 0 rgba(232,119,34,0));
    animation:hsaWave 2s cubic-bezier(.4,0,.2,1) infinite;
  }
  .hsa-chevron:nth-child(1){animation-delay:0s;}
  .hsa-chevron:nth-child(2){animation-delay:.22s;}
  .hsa-chevron:nth-child(3){animation-delay:.44s;}
  @keyframes hsaWave{
    0%{opacity:.12; color:var(--silver-1); transform:translateY(0); filter:drop-shadow(0 0 0 rgba(232,119,34,0));}
    22%{opacity:1; color:var(--orange); transform:translateY(3px); filter:drop-shadow(0 0 6px rgba(232,119,34,.6));}
    55%{opacity:.12; color:var(--silver-1); transform:translateY(9px); filter:drop-shadow(0 0 0 rgba(232,119,34,0));}
    100%{opacity:.12; transform:translateY(0);}
  }
  .hero-scroll-arrows:hover .hsa-chevron{animation-play-state:paused; opacity:1; color:var(--orange);}
  @media (prefers-reduced-motion: reduce){
    .hsa-chevron{animation:none; opacity:.6;}
  }
  .hero-video-toggle{
    position:absolute; right:32px; bottom:28px; z-index:1;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.22); color:var(--silver-1);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    opacity:0; pointer-events:none; transition:background .2s ease, border-color .2s ease, color .2s ease, opacity .4s ease;
  }
  .hero-video-toggle.is-visible{opacity:1; pointer-events:auto;}
  .hero-video-toggle:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff;}
  .hero-video-toggle svg{width:14px; height:14px;}
  .hero-video-toggle .icon-play{display:none;}
  .hero-video-toggle.is-paused .icon-pause{display:none;}
  .hero-video-toggle.is-paused .icon-play{display:block;}
  @media (max-width:700px){
    .hero-video{padding:120px 0 20px;}
    .hero-video-toggle{right:20px;}
    .hero-video-content{padding:0 20px;}
    /* on narrow portrait phones, cover crops far too much off the sides of
       this wide-composed footage (the intro's "AÑOS" typography in
       particular gets clipped) — contain shows the whole frame instead,
       letterboxed against the section's own black background */
    .hero-poster, .hero-video-el{object-fit:contain; background:var(--black); animation:none; transform:none;}
    .hero-video-title{
      flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:baseline;
      gap:6px clamp(12px,4vw,28px);
      font-size:clamp(19px,7.2vw,34px); letter-spacing:.05em; text-align:center;
    }
  }
  @media (max-width:360px){
    .hero-video-title{font-size:clamp(16px,7vw,19px); gap:5px 10px;}
  }

  /* ===== PARTNERS MARQUEE (logos fading at the edges) ===== */
  .partners-section{
    background:var(--paper); border-top:1px solid var(--line);
    padding:110px 0; overflow:hidden;
    display:flex; flex-direction:column; justify-content:center;
  }
  .partners-title{
    text-align:center; font-family:'Montserrat', var(--ff-body); font-size:clamp(22px,2.6vw,30px);
    font-weight:400; font-style:normal; letter-spacing:-.01em; color:var(--ink); margin-bottom:48px;
  }
  .partners-marquee{
    position:relative; overflow:hidden; width:100%;
    /* a tight, defined reveal band instead of a long soft dissolve — logos
       stay fully invisible right up to the edge, then "emerge"/"disappear"
       through a short mask transition, reading as entering/exiting rather
       than just dimming in place */
    mask-image:linear-gradient(90deg, transparent 0%, transparent 20%, #000 28%, #000 72%, transparent 80%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 20%, #000 28%, #000 72%, transparent 80%, transparent 100%);
  }
  .partners-track{
    display:flex; width:max-content; gap:80px; align-items:center; justify-content:center;
    will-change:transform;
    /* transform is driven frame-by-frame by script.js (partnersMarqueeLoop) —
       it clones this set of logos as many times as the screen needs and
       wraps the scroll position by exactly one set-width, so the loop is
       always seamless regardless of viewport size */
  }
  .partner-item{display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  /* brand names as text, in the same face as the section title and one
     muted gray — deliberately NOT each brand's logo, font or color */
  .partner-name{
    display:block; white-space:nowrap;
    font-family:'Montserrat', var(--ff-body); font-weight:400; font-size:clamp(19px,1.7vw,24px);
    text-transform:uppercase; letter-spacing:.14em; line-height:1;
    color:#8e9196;
    transition:color .3s ease;
  }
  .partner-item:hover .partner-name{color:var(--ink);}
  @media (max-width:600px){
    .partners-section{padding:70px 0;}
    .partners-title{font-size:19px; padding:0 20px;}
    .partner-name{font-size:17px;}
    .partners-track{gap:48px;}
  }

  /* ===== "DARK BLOCK" (about) — inverted to a white section; the
     KÖNNEN-en-números stat grid keeps its own dark cells as the one
     deliberate contrast element sitting on top of the white background ===== */
  .dark-block{
    background:var(--white);
    color:var(--ink); padding:100px 0;
  }
  .dark-block .wrap{display:flex; flex-direction:column; gap:34px;}
  .dark-block-img{
    position:relative; width:100%; aspect-ratio:1600/975; overflow:hidden;
    border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.16);
  }
  .dark-block-img img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    transform:scale(1); transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  }
  .dark-block-img:hover img{transform:scale(1.08);}
  @media (prefers-reduced-motion: reduce){
    .dark-block-img img{transition:none;}
    .dark-block-img:hover img{transform:none;}
  }
  .dark-block-body{display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:start;}
  .dark-block h2{color:var(--ink);}
  .dark-block p{color:var(--silver-3); max-width:620px; margin:14px 0 20px;}
  .dark-block p.lead{color:var(--ink); font-size:18px; font-family:var(--ff-body);}
  .dark-block-text p:last-child{margin-bottom:0;}
  .tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px;}
  .tag-row--col{
    flex-direction:column; align-items:stretch; flex-wrap:nowrap;
    margin-bottom:0; padding-top:4px;
  }
  .tag{
    font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
    padding:9px 14px; border:1px solid var(--line); color:var(--ink);
    display:inline-flex; align-items:center; gap:8px;
  }
  .tag-row--col .tag{width:100%;}
  .tag svg{width:14px; height:14px; color:var(--orange); flex-shrink:0;}
  .tag b{color:var(--orange); font-weight:600;}
  .stat-label{
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--silver-3); display:block; margin-top:0; margin-bottom:10px;
  }
  .stat-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
  }
  .stat-cell{
    background:#2b2b2f; padding:26px 22px;
    display:flex; flex-direction:column; gap:12px;
    transition:background .3s ease, transform .3s ease;
    cursor:default;
  }
  .stat-cell:hover{background:#38383d; transform:translateY(-4px);}
  .stat-cell--accent:hover{background:rgba(232,119,34,.08);}
  .stat-cell-icon{width:24px; height:24px; color:var(--orange);}
  .stat-cell-icon svg{width:100%; height:100%;}
  .stat-num{
    font-family:var(--ff-display); font-size:44px; color:var(--silver-1);
    line-height:1; display:block; letter-spacing:-.01em;
  }
  .stat-cell--accent .stat-num{color:var(--orange);}
  .stat-cell span{
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--silver-2);
  }
  @media (max-width:900px){
    .stat-grid{grid-template-columns:repeat(2, 1fr);}
  }

  /* ===== SECTION HEAD ===== */
  .section{padding:130px 0;}
  .section-off{background:var(--off-white);}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px;}
  .section-head p{max-width:380px;}

  /* ===== STRATEGY BOARD ===== */
  /* ESTRATEGIA DE NEGOCIO — estilos del Business Strategy Board
     Concepto, diseño y desarrollo: Rodolfo Zavala
     Registro de autoría: by Rodolfo Zavala · 2026
     Al reutilizar o modificar estos estilos, conserve este aviso. */
  .strategy{
    background:
      var(--grain),
      radial-gradient(ellipse 1000px 520px at 15% 100%, rgba(255,255,255,.045), transparent 60%),
      linear-gradient(170deg, #0d0d0f 0%, #08080a 45%, #101012 100%);
    color:var(--white);
    /* bottom padding has to clear .axis-x, which sits at bottom:-55px
       relative to .strategy-frame plus its own line height — trimming this
       too far clips "IMPORTANCIA DEL SERVICIO" against the section's
       own edge (this section is overflow:hidden) */
    padding:22px 0 100px; position:relative; overflow:hidden;
  }
  .strategy::before{
    content:''; position:absolute; inset:0;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.5px);
    background-size:22px 22px;
    opacity:.35; pointer-events:none;
  }
  .strategy .wrap{position:relative; z-index:1;}
  /* grid, not flex — a plain single-column grid sizes its one track to
     the widest child's own natural (max-content) width, which the h2
     below deliberately opts OUT of (width:0) so only the label
     contributes. That makes the label the one thing setting the column's
     width, with the h2 stretched to fill (and wrap within) exactly that
     width via min-width:100% — no guessed pixel value to keep in sync
     if the label's text or size ever changes. */
  .strategy-head{
    display:grid; justify-items:end;
    gap:4px; margin-top:62px; margin-bottom:44px;
    padding-right:34px; /* lines the right edge up with .strategy-frame's own 34px padding below */
    text-align:right;
  }
  /* right-aligned stack over Advantage's own column — that card's height
     was pulled down (see .strat-col--adv below) specifically to clear
     this, where before it reached almost to the top of the frame.
     width:0 + min-width:100% is what makes it wrap at the label's own
     width above instead of its own (much longer) natural line length. */
  .strategy-head h2{
    color:var(--white); font-size:clamp(15px,1.6vw,21px); font-weight:600; line-height:1.2;
    width:0; min-width:100%;
  }
  /* the old small orange eyebrow ("Nuestra visión del mercado") became
     its own bigger title instead of a pre-label — first line of the
     same right-aligned stack, above the h2. White with a soft drop shadow
     now (was flat orange) so it reads as the lead line by contrast/depth
     rather than color alone. */
  .strategy-head-label{
    font-family:var(--ff-display); text-transform:uppercase; font-weight:700;
    letter-spacing:.01em; color:#fff;
    font-size:clamp(24px,2.6vw,34px);
    /* same "never a hard flicker, always breathing" language as the axis
       titles below (axisGlowPulse) — the base drop shadow for depth never
       goes away, an orange glow just rises and falls on top of it */
    animation:stratLabelGlow 2.6s ease-in-out infinite;
  }
  @keyframes stratLabelGlow{
    0%, 100%{ text-shadow:0 2px 10px rgba(0,0,0,.5), 0 0 0 rgba(232,119,34,0); }
    50%{ text-shadow:0 2px 10px rgba(0,0,0,.5), 0 0 16px rgba(255,255,255,.9), 0 0 36px rgba(232,119,34,.95), 0 0 68px rgba(232,119,34,.6), 0 0 100px rgba(232,119,34,.3); }
  }
  @media (prefers-reduced-motion: reduce){
    .strategy-head-label{animation:none;}
  }

  .strategy-frame{
    position:relative; padding:0 34px;
    /* the arrows' orange tint, stepped up per revealed card by JS
       (initStrategyStepper) — faint on Standard, fuller on VAS, full
       strength on Advantage — this default is the Standard/rest value */
    --arrow-tint:rgba(232,119,34,.4);
  }
  /* line grid behind the quadrant delimited by the axis arrows — fades toward
     black at the top/bottom edges so it reads as depth, not a hard-edged
     pattern. top used to reach -240px, well past what the taller title
     block above (.strategy-head, now a right-aligned 2-line stack with
     its own margins) leaves as headroom before .strategy's own
     overflow:hidden — the mask's fade-to-transparent never got to finish
     before being clipped, so it read as an abrupt cutoff instead of a
     smooth fade. Pulled in to -130px, comfortably inside that headroom
     and still well past the vertical arrow's own max reach (76px above
     the frame — see GRID_TOP_MAX in script.js), so the pattern still
     visibly extends past wherever the arrow can grow to. */
  .strategy-frame::before{
    content:''; position:absolute; z-index:0; pointer-events:none;
    left:19px; right:0; top:-130px; bottom:-25px;
    background-image:
      linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size:38px 38px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 14%, rgba(0,0,0,.9) 76%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 14%, rgba(0,0,0,.9) 76%, transparent 100%);
  }
  /* the axis titles are the labels for what the whole board measures, so
     they read as headings, not fine print: bright white, bolder weight and
     a bigger size than the old dim mono caption */
  .axis{
    position:absolute; font-family:var(--ff-display); font-size:clamp(15px,1.6vw,20px); font-weight:700;
    letter-spacing:-.01em; text-transform:uppercase; color:var(--orange);
    text-shadow:0 0 14px rgba(232,119,34,.35);
    white-space:nowrap;
    /* smooth breathing glow — intensity rises and falls, no flicker/opacity
       dips, always fully lit */
    animation:axisGlowPulse 3.4s ease-in-out infinite;
  }
  @keyframes axisGlowPulse{
    0%, 100%{ text-shadow:0 0 8px rgba(232,119,34,.3), 0 0 16px rgba(232,119,34,.15); }
    50%{ text-shadow:0 0 24px rgba(232,119,34,.9), 0 0 48px rgba(232,119,34,.55); }
  }
  @media (prefers-reduced-motion: reduce){
    .axis{animation:none;}
  }
  .axis-y{
    left:13px; top:50%;
    writing-mode:vertical-rl; transform:rotate(180deg) translateY(calc(100% + 14px));
    transform-origin:left top;
    /* offset from axis-x's flicker cycle so the two don't dip in perfect
       unison, like two separate neon tubes */
    animation-delay:-2.6s;
    /* top is re-anchored per step by JS (initStrategyStepper) to the
       vertical arrow's current tip. Reading order in vertical-rl + rotate
       180deg puts the LAST character (the "N" of ESPECIALIZACIÓN) at the
       top of the rendered box — the translateY shifts the whole box down
       by its own height (plus a small gap) so that top edge, not the
       box's vertical center, is what lands on `top`: the label's far end
       caps out right at the arrow's tip and the rest trails downward
       alongside the shaft, never reading above it. */
    transition:top 1.1s cubic-bezier(.16,1,.3,1);
  }
  .axis-x{
    right:0; bottom:-55px; z-index:1;
    /* right is re-anchored per step by JS to the horizontal arrow's tip */
    transition:right 1.1s cubic-bezier(.16,1,.3,1);
  }

  /* Cartesian-style corner: a vertical line rising next to the axis-y label,
     turning into a horizontal line that runs toward axis-x — like chart axes.
     The two lines no longer just draw in once on scroll: JS (initStrategyStepper)
     sets .axis-corner-v's `top` and .axis-corner-h's `right` per revealed
     step, so the lines visibly grow out to reach whichever card (Standard →
     VAS → Advantage) is currently the furthest one shown, and the transition
     below is what makes that growth animate instead of jumping. */
  .axis-corner-v{
    position:absolute; left:19px; bottom:-25px; width:3.5px;
    top:calc(100% + 25px); /* matches `bottom:-25px` exactly = 0 height until JS sets a real target */
    background:linear-gradient(to bottom, transparent, var(--arrow-tint) 6%);
    transition:top 1.1s cubic-bezier(.16,1,.3,1), background 1.1s ease;
    /* above .strat-col--vas/--adv (z-index 1/2) so a collapsing card's own
       border never paints over the line as it animates past it */
    z-index:3;
  }
  /* both arrowheads share one triangle definition (border-bottom, pointing up)
     and are only ever rotated into place, so they're pixel-identical — tall
     and narrow (rather than a stubby triangle), tinted (and glowing) by the
     same --arrow-tint step as the line itself, so the tip reads as a crisp
     point instead of a faded blob. Positioned relative to their own line,
     so they ride along automatically as that line's top/right (and
     therefore length) changes per step. */
  .axis-corner-v::before, .axis-corner-h::after{
    content:''; position:absolute; width:0; height:0;
    border-left:7px solid transparent; border-right:7px solid transparent;
    border-bottom:17px solid var(--arrow-tint);
    filter:drop-shadow(0 0 6px var(--arrow-tint));
    transition:border-color 1.1s ease, filter 1.1s ease;
  }
  .axis-corner-v::before{top:-6px; left:50%; transform:translateX(-50%);}
  .axis-corner-h{
    position:absolute; left:19px; bottom:-25px; height:3.5px;
    right:calc(100% - 19px); /* collapsed to ~nothing until JS sets a real target */
    background:var(--arrow-tint);
    transition:right 1.1s cubic-bezier(.16,1,.3,1), background 1.1s ease;
    z-index:3;
  }
  .axis-corner-h::after{right:-3px; top:50%; transform:translateY(-50%) rotate(90deg);}

  /* pinned outside the frame's own right edge (past its 34px padding, not
     flush with it) so it sits clear of the Advantage card's column instead
     of overlapping it, vertically centered on the whole diagram */
  .strategy-controls{
    position:absolute; top:50%; right:-70px; z-index:5;
    transform:translateY(-50%);
    display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  }
  @media (max-width:1300px){
    .strategy-controls{right:0;}
  }
  @media (max-width:900px){
    .strategy-controls{
      position:static; transform:none; align-items:flex-start; flex-direction:row;
      margin:0 0 28px;
    }
  }
  /* "Reiniciar" — the only button left in .strategy-controls. Hidden until
     Advantage (the last step) is reached, since before that the trigger
     card itself is the only interaction on offer. */
  .strategy-reset{
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:42px; height:42px; border-radius:50%;
    color:var(--silver-2); background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.2); cursor:pointer;
    opacity:0; pointer-events:none; transform:translateY(-6px);
    transition:border-color .3s ease, color .3s ease, opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
  }
  .strategy-reset.is-visible{
    opacity:1; pointer-events:auto; transform:translateY(0);
    /* delayed start so the .7s fade-in/slide-up transition above finishes
       landing first — starting the loop immediately would have the
       animation (which wins over a transition on the same element) cut
       that entrance short */
    animation:stratResetInvite 2.2s .7s ease-in-out infinite;
  }
  /* same breathing border/glow language as .strat-invite's pulse below —
     draws the eye to "Reiniciar" once someone's clicked all the way
     through to Advantage, since that's the one action left on offer */
  @keyframes stratResetInvite{
    0%, 100%{
      border-color:rgba(255,255,255,.2);
      box-shadow:0 0 0 0 rgba(232,119,34,0);
    }
    50%{
      border-color:rgba(232,119,34,.8);
      box-shadow:0 0 0 6px rgba(232,119,34,.1), 0 0 20px rgba(232,119,34,.3);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .strategy-reset.is-visible{animation:none;}
  }
  /* fill grows from the center out to the button's edge on hover, like a
     droplet spreading — same idea as the risk corridor cards' hover fill */
  .strategy-reset::before{
    content:''; position:absolute; inset:0; z-index:0;
    background:var(--orange); border-radius:50%;
    transform:scale(0); transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .strategy-reset:hover::before{transform:scale(1);}
  .strategy-reset svg{position:relative; z-index:1; width:16px; height:16px; transition:transform .5s cubic-bezier(.4,0,.2,1);}
  /* pauses the attention loop above so the hover state (border/glow) reads
     cleanly instead of fighting the animation for the same properties */
  .strategy-reset:hover{color:#fff; border-color:var(--orange); animation-play-state:paused;}
  .strategy-reset:hover svg{transform:rotate(180deg);}
  .strategy-reset:active svg{transform:rotate(225deg);}

  /* invite zone — lives out in the NEXT tier's own grid column (not layered
     over the current card) until that tier is actually revealed. A dashed,
     mostly-empty area that breathes gently, not a solid button — it's a
     placeholder standing in for the card that's about to take its place. */
  .strat-invite{
    all:unset; box-sizing:border-box; cursor:pointer;
    display:none; grid-row:1; align-self:stretch;
    flex-direction:column; align-items:center; justify-content:center; gap:10px;
    border:1.5px dashed rgba(232,119,34,.35); border-radius:4px;
    background:rgba(255,255,255,.02);
    padding:24px; text-align:center;
    font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
    color:rgba(232,119,34,.85);
    /* the dashed border sits over the busy grain/grid background, so the
       label needs its own contrast independent of that — a shadow keeps it
       readable instead of relying on the pulse's opacity swing */
    text-shadow:0 1px 3px rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.35);
    animation:stratInvitePulse 3.2s ease-in-out infinite;
    transition:border-color .25s ease, background .25s ease, color .25s ease;
  }
  .strat-invite.is-active{display:flex;}
  .strat-invite svg{width:16px; height:16px; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
  .strat-invite:hover{border-color:rgba(232,119,34,.8); background:rgba(255,255,255,.08); color:var(--orange);}
  /* only the border (and its glow) breathes — text stays at full, constant
     opacity so the label itself never dims/gets lost mid-pulse */
  @keyframes stratInvitePulse{
    0%, 100%{
      border-color:rgba(232,119,34,.28);
      box-shadow:0 0 0 0 rgba(232,119,34,0);
    }
    50%{
      border-color:rgba(232,119,34,.75);
      box-shadow:0 0 26px 2px rgba(232,119,34,.14);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .strat-invite{animation:none;}
  }

  .strategy-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;
    align-items:end; position:relative;
  }
  /* narrative caption — one line per step, crossfading with a "dissolving
     into smoke" blur instead of a hard cut, driven by initStrategyStepper
     toggling .is-active. Sits in normal flow *above* the grid (not layered
     behind/through the cards) so it never ends up hidden under whichever
     card is currently tall — VAS in particular is wide and reaches high
     enough that an absolutely-centered version of this used to sit right
     behind it. The three items still stack via CSS grid (grid-area:1/1 on
     all three) so swapping the active one never changes this block's own
     height — it's sized to whichever line is longest (Advantage's, three
     lines) even while a shorter one is showing. */
  .strategy-legend{
    /* top-aligned (not centered) within the shared grid cell — the cell's
       own height is set by the tallest state (Advantage, 3 lines), so
       vertical-centering here made the shorter 2-line states (Standard,
       VAS) look like they were sitting lower than necessary */
    display:grid; justify-items:center; align-items:start; text-align:center;
    /* VAS and Advantage both reach above the grid's own top edge (see
       .strat-col--vas/--adv) — enough clearance so the legend text doesn't
       end up crammed against them, without ballooning the section's height */
    padding:0 20px 78px; pointer-events:none;
  }
  /* no card/box behind these anymore — bare type, same as the copy on each
     service block, so the caption reads as part of the board itself
     instead of a separate panel floating over it */
  .strategy-legend-item{
    grid-area:1/1; max-width:380px; text-align:center;
    opacity:0; filter:blur(18px); transform:scale(1.06);
    transition:opacity 1s ease, filter 1s ease, transform 1s ease, max-width .4s ease;
  }
  .strategy-legend-item.is-active{opacity:1; filter:blur(0); transform:scale(1);}
  /* Standard — sits over its own card's side (column 1) instead of dead
     center, since that's where the card it's introducing actually is */
  .strategy-legend-item[data-legend="standard"]{justify-self:start; max-width:270px; text-align:left;}
  /* Advantage — by the time this is showing, Standard and VAS have both
     folded down into tabs, freeing up the whole left two-thirds of the
     board, so this one claims that space instead of staying narrow */
  .strategy-legend-item[data-legend="adv"]{justify-self:start; max-width:520px; text-align:left;}
  .strategy-legend-title{
    /* same face/case/tracking as .strat-title on the cards themselves */
    font-family:var(--ff-display); font-size:clamp(18px,2vw,25px); text-transform:uppercase;
    color:#fff; line-height:1.15; text-shadow:0 4px 20px rgba(0,0,0,.6);
  }
  .strategy-legend-sub{
    /* was the mono caption font — switched to the body face so it reads
       like the cards' own item/description copy (.strat-item/.strat-desc),
       not a separate UI label style */
    font-family:var(--ff-body); font-size:clamp(14px,1.3vw,16px); line-height:1.6;
    color:var(--silver-2); margin-top:12px; text-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  .strategy-legend-close{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
    font-family:var(--ff-display); font-size:clamp(17px,1.9vw,22px); text-transform:uppercase;
    color:#fff; margin-top:12px;
  }
  .strategy-legend-item[data-legend="adv"] .strategy-legend-close{justify-content:flex-start;}
  .strategy-legend-logo{width:auto; height:1.7em; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
  @media (prefers-reduced-motion: reduce){
    .strategy-legend-item{transition:opacity .3s ease;}
  }
  @media (max-width:600px){
    .strategy-legend{padding:0 10px 34px;}
  }
  /* revealed one at a time by initStrategyStepper (Standard on scroll-into-view,
     VAS and Advantage on each "Siguiente" click) instead of all rising together
     on scroll — visibility (not display) so a not-yet-revealed card's buttons
     stay out of tab order instead of sitting there invisible-but-focusable */
  .strat-col{
    position:relative;
    /* lighter than the section's near-black background (and a real border +
       lift shadow) — Standard/VAS were nearly the same tone as the backdrop
       and disappeared into it */
    border:1px solid rgba(255,255,255,.18);
    background:#1a1a1d;
    box-shadow:0 18px 36px rgba(0,0,0,.4);
    display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transform:translateY(40px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), top .7s cubic-bezier(.16,1,.3,1), visibility 0s .6s, border-color .3s ease;
  }
  .strat-col.is-shown{opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;}
  /* each "Siguiente" click just adds the next card — nothing already shown
     folds away or shrinks, so every revealed card stays fully expanded */
  .strat-list, .strat-sub-row{overflow:hidden;}
  @media (prefers-reduced-motion: reduce){
    .strat-col{transition:none;}
    .axis-corner-v, .axis-corner-h{transition:none;}
  }
  /* VAS and Advantage are pulled out of flow so each can rise above Standard —
     Advantage the highest, VAS partway between the two — without affecting
     Standard's height or position, and each hugs its own content (no dead space). */
  .strat-col--standard{margin-top:14px;}
  /* Standard's own rows get extra breathing room so the card itself reads
     bigger/more prominent — it's the baseline every other tier is measured
     against, so this also raises where VAS/Advantage's shared bottom edge
     sits and the room the legend text above needs to clear */
  .strat-col--standard .strat-head{padding-top:14px; padding-bottom:12px;}
  .strat-col--standard .strat-sub-row{padding-top:7px; padding-bottom:9px;}
  .strat-col--standard .strat-item{padding-top:7px; padding-bottom:7px;}
  .strat-col--vas{
    border-color:rgba(255,255,255,.35);
    grid-column:2/3; grid-row:1;
    /* raised partway up the board (not flush with Standard) so it visibly
       sits between the other two tiers instead of barely clearing Standard —
       scales with viewport height (capped, tuned on a standard 1920×1080
       screen) instead of a flat px value that either overshoots on shorter
       screens or looks timid on taller ones. Cap trimmed down from the
       original 221px along with Advantage's below, so the whole board
       reads shorter/wider now that the section title sits beside it
       instead of only above it. */
    position:absolute; bottom:clamp(60px, 11vh, 125px); left:0; right:0;
    z-index:1;
  }
  .strat-col--vas .strat-title{color:var(--silver-1);}
  .strat-col--vas .strat-share b{color:var(--silver-1);}
  .strat-col--adv{
    border:2px solid rgba(255,255,255,.6);
    background:#111113;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    grid-column:3/4; grid-row:1;
    /* pushed close to the top of the frame — the hero tier claims the top
       corner instead of just sitting a bit above the other two — same
       viewport-scaled approach as VAS above. Cap trimmed from the original
       357px so this card doesn't reach high enough to collide with
       .strategy-head h2, pinned to the right edge right above this same
       column — raised back up somewhat from the first, more conservative
       trim now that the title above wraps to fewer lines again. */
    position:absolute; bottom:clamp(120px, 21vh, 230px); left:0; right:0;
    z-index:2;
  }
  /* KÖNNEN seal — white button; the light sweep lives only on the imagotipo
     itself (masked to its own shape) so the white button stays flat/clean */
  .adv-badge{
    position:absolute; top:-17px; left:18px; z-index:4;
    width:36px; height:36px; border-radius:50%; box-sizing:border-box; padding:6px;
    background:#ffffff;
    box-shadow:0 8px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.06);
    overflow:hidden;
  }
  .adv-badge img{
    position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.22)) drop-shadow(0 3px 6px rgba(0,0,0,.18));
  }
  .adv-badge-shine{
    position:absolute; inset:7px; z-index:2; pointer-events:none;
    -webkit-mask-image:url('assets/img/imagotipo-konnen.webp');
    mask-image:url('assets/img/imagotipo-konnen.webp');
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    background-image:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);
    background-size:280% 100%; background-position:-90% 0;
    mix-blend-mode:overlay;
    animation:advBadgeShine 4.5s ease-in-out infinite;
  }
  @keyframes advBadgeShine{
    0%, 100%{ background-position:-90% 0; }
    50%{ background-position:190% 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .adv-badge-shine{ animation:none; }
  }

  .strat-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:11px 16px 9px; border-bottom:1px solid rgba(255,255,255,.1);
  }
  /* Advantage gets a bigger, more generous header */
  .strat-col--adv .strat-head{padding:16px 18px 13px;}
  /* Headers with no subtitle line (VAS, Advantage): center the title against
     the share block instead of top-aligning it, so there's no dead air below it */
  .strat-head--center{align-items:center;}
  .strat-head--center .strat-title{font-size:21px; margin-bottom:0;}

  .strat-title{
    font-family:var(--ff-display); font-size:18px; text-transform:uppercase;
    color:var(--silver-2); line-height:1; margin-bottom:4px;
    transition:color .25s ease;
  }
  /* ADVANTAGE title is white and larger — visual hierarchy */
  .strat-col--adv .strat-title{color:var(--white); font-size:23px;}

  .strat-sub-row{
    font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--silver-3);
    padding:6px 16px 7px;
  }
  .strat-share{text-align:right; flex-shrink:0;}
  .strat-share b{
    font-family:var(--ff-display); font-size:27px; color:var(--silver-3);
    display:block; line-height:1;
  }
  /* STANDARD 80% is white to match the other columns' figures */
  .strat-col--standard .strat-share b{color:var(--white);}
  /* ADVANTAGE 5% is white — the whole column is the hero */
  .strat-col--adv .strat-share b{color:var(--white); font-size:30px;}
  .strat-share span{
    font-family:var(--ff-mono); font-size:9px; letter-spacing:.14em;
    color:var(--silver-3); display:block; margin-top:8px;
  }

  .strat-list{display:flex; flex-direction:column;}
  .strat-item{
    all:unset; box-sizing:border-box; cursor:pointer;
    display:block; width:100%;
    padding:5px 16px; border-top:1px solid rgba(255,255,255,.08);
    color:var(--silver-2); font-size:12.5px;
    position:relative; transition:background .25s ease, color .25s ease, padding-left .25s ease;
  }
  /* ADVANTAGE items are brighter and taller */
  .strat-col--adv .strat-item{color:var(--white); padding:9px 18px;}
  .strat-item > span{
    display:inline-flex; align-items:center;
    max-width:calc(100% - 30px);
  }
  .strat-item .plus{
    position:absolute; right:16px; top:6px;
    font-family:var(--ff-mono); font-style:normal; font-size:14px;
    color:var(--silver-3); transition:transform .25s ease, color .25s ease;
  }
  .strat-col--adv .strat-item .plus{right:18px; top:9px; color:var(--silver-2);}
  .strat-item::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--orange); transform:scaleY(0); transform-origin:top;
    transition:transform .25s ease;
  }
  .strat-item:hover{
    background:rgba(232,119,34,.09); color:var(--white); padding-left:28px;
  }
  .strat-item:hover .plus{color:var(--orange);}
  .strat-item:hover::before{transform:scaleY(1);}
  .strat-item:focus-visible{outline:1px solid var(--orange); outline-offset:-1px;}

  .strat-desc{
    max-height:0; overflow:hidden; opacity:0;
    font-family:var(--ff-body); font-size:11.5px; color:var(--silver-2);
    line-height:1.5; margin-top:0;
    transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease;
  }
  .strat-item.is-open{
    background:rgba(232,119,34,.12); color:var(--white); padding-left:28px;
  }
  .strat-item.is-open::before{transform:scaleY(1);}
  .strat-item.is-open .plus{transform:rotate(45deg); color:var(--orange);}
  .strat-item.is-open .strat-desc{max-height:120px; opacity:1; margin-top:6px;}

  /* ADVANTAGE — brushed metal / "plateado", set apart from the other two columns */
  .strat-col--adv{
    border-color:rgba(0,0,0,.22);
    background:
      linear-gradient(100deg, rgba(255,255,255,.5) 0%, transparent 10%, transparent 88%, rgba(255,255,255,.35) 100%),
      linear-gradient(150deg, #f4f4f6 0%, #d2d3d6 18%, #9a9ba0 40%, #e9eaec 58%, #b7b8bc 78%, #f0f1f3 100%);
    box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.8);
  }
  .strat-col--adv::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background-image:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 46%, transparent 62%);
    background-size:260% 100%; background-position:-60% 0;
    mix-blend-mode:overlay;
    animation:advCardShine 6.5s ease-in-out infinite;
  }
  @keyframes advCardShine{
    0%, 100%{ background-position:-60% 0; }
    50%{ background-position:140% 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .strat-col--adv::after{ animation:none; }
  }
  .strat-col--adv .strat-head{border-bottom-color:rgba(0,0,0,.14);}
  .strat-col--adv .strat-title{color:var(--ink); font-weight:800;}
  .strat-col--adv .strat-share b{color:var(--ink); font-weight:800;}
  .strat-col--adv .strat-share span{color:var(--ink); font-weight:700;}
  .strat-col--adv .strat-item{color:var(--ink); border-top-color:rgba(0,0,0,.1); font-weight:600;}
  .strat-col--adv .strat-item .plus{color:var(--silver-3);}
  /* Advantage plays a different contrast card: dark charcoal instead of orange
     on hover/selection, since the silver background already reads as the accent */
  .strat-col--adv .strat-item::before{background:#26262a;}
  .strat-col--adv .strat-item:hover, .strat-col--adv .strat-item.is-open{
    background:rgba(0,0,0,.08); color:#000;
  }
  .strat-col--adv .strat-item:hover .plus, .strat-col--adv .strat-item.is-open .plus{
    color:#26262a;
  }
  .strat-col--adv .strat-desc{color:#3a3a3e;}

  @media (max-width:900px){
    .strategy{padding:40px 0 48px;}
    /* the full axes-and-cards board (not a simplified stacked version) is
       kept intact here — script.js (fitStrategyFrameZoom) locks
       .strategy-frame to its natural design width and shrinks the whole
       thing down with `zoom` so it still fits the viewport as one
       proportional, undistorted diagram instead of reflowing/cramming a
       3-column grid into a narrow screen */
    .strategy-head{justify-items:start; text-align:left; padding-right:0; margin-top:0; margin-bottom:24px; gap:6px;}
    /* the width:0/min-width:100% trick (desktop) ties the h2's wrap width
       to the label's — too cramped on a narrow phone column, so this
       reverts to a normal, full-width paragraph here instead */
    .strategy-head h2{width:auto; min-width:0; white-space:normal;}
    .strategy-head-label{white-space:normal;}

    .strategy-legend{padding:0 4px 24px;}
    .strategy-frame{margin-left:auto; margin-right:auto;}
  }

  /* ===== TRES NIVELES ===== */
  .niveles{
    background:
      var(--grain),
      radial-gradient(ellipse 1100px 560px at 85% 0%, rgba(255,255,255,.05), transparent 62%),
      linear-gradient(160deg, #101012 0%, #08080a 55%, #0d0d10 100%);
    color:var(--white); padding:72px 0; position:relative; overflow:hidden;
  }
  .niveles::before{
    content:''; position:absolute; inset:0;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.5px);
    background-size:22px 22px; opacity:.35; pointer-events:none;
  }
  .niveles .wrap{position:relative; z-index:1;}
  .niveles-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:60px;}
  .niveles-title h2{color:var(--white); text-transform:uppercase; font-family:'Big Shoulders Display', serif; line-height:1;}
  .tn-line1, .tn-line2{display:block; font-size:clamp(38px, 5.4vw, 66px); letter-spacing:-.01em; font-weight:700;}
  .tn-line2{color:var(--orange); font-weight:500;}
  .niveles-sub{
    font-family:var(--ff-body); font-size:20px; font-weight:500; line-height:1.5;
    color:var(--silver-1); max-width:380px; text-align:right;
  }

  /* align-items:start (not the grid default stretch) so each card's height
     follows its own service count instead of all three being forced to
     match whichever column has the most items (VAS, with six) — Standard
     currently lists just one service and shouldn't render as a mostly-empty
     card the same height as the others */
  .niveles-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:start;
  }
  .nivel-item{display:flex; flex-direction:column;}
  .nivel-card{
    position:relative; padding:32px 40px 40px; flex:1;
    display:flex; flex-direction:column;
    border:1px solid rgba(255,255,255,.22);
    transition:transform .45s cubic-bezier(.2,.6,.2,1), background .3s ease, box-shadow .45s ease;
    overflow:hidden; will-change:transform;
    isolation:isolate;
  }
  .nivel-light{border-color:var(--line);}
  .nivel-card:hover{transform:scale(1.035);}
  .nivel-dark{background:#0d0d0f;}
  .nivel-dark:hover{background:#111114; box-shadow:0 24px 60px rgba(0,0,0,.5);}
  .nivel-light{background:var(--white); color:var(--ink);}
  .nivel-light:hover{background:#fafafa; box-shadow:0 24px 60px rgba(232,119,34,.18);}

  .nivel-icon{
    width:54px; height:54px; margin-bottom:34px;
    color:var(--silver-1);
  }
  .nivel-light .nivel-icon{color:var(--ink);}
  .nivel-icon svg{width:100%; height:100%;}

  .nivel-title{
    font-family:var(--ff-display); font-size:34px; text-transform:uppercase;
    letter-spacing:.01em; line-height:1; margin-bottom:28px;
    color:var(--white);
  }
  .nivel-light .nivel-title{color:var(--ink);}

  /* Service mini-chips with icon + label */
  .nivel-services{list-style:none; padding:0; margin:0;
    display:grid; grid-template-columns:1fr; gap:8px;
  }
  .ns{
    display:flex; align-items:center; gap:12px;
    padding:11px 13px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.02);
    transition:border-color .25s ease, background .25s ease;
  }
  .ns:hover{border-color:rgba(232,119,34,.5); background:rgba(232,119,34,.06);}
  .ns--soon, .ns--link{padding:0;}
  .ns-link{
    display:flex; align-items:center; gap:12px; width:100%;
    padding:11px 13px; color:inherit; cursor:pointer;
  }
  .ns-link:focus-visible{outline:1px solid var(--orange); outline-offset:-1px;}
  .ns-soon-tag{
    margin-left:auto; flex-shrink:0;
    font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--silver-3); border:1px solid rgba(255,255,255,.18); padding:3px 8px; border-radius:20px;
    transition:color .25s ease, border-color .25s ease;
  }
  .nivel-light .ns-soon-tag{border-color:rgba(0,0,0,.16); color:var(--silver-3);}
  .ns--soon:hover .ns-soon-tag{color:var(--orange); border-color:var(--orange);}
  /* in-development services: shown, not clickable, and in a different
     tone from the live ones — grey fill, dashed border, grey icon instead
     of orange — so they never read as buttons */
  .ns--soon .ns-link{cursor:default;}
  .ns.ns--soon{border-style:dashed; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05);}
  .ns.ns--soon:hover{border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07);}
  .ns--soon .ns-icon{color:var(--silver-3);}
  .ns--soon .ns-name{color:var(--silver-3);}
  .nivel-light .ns.ns--soon{border-color:rgba(0,0,0,.16); background:var(--off-white);}
  .nivel-light .ns.ns--soon:hover{border-color:rgba(0,0,0,.26); background:var(--off-white);}
  .nivel-light .ns--soon .ns-name{color:var(--silver-3);}
  .ns--soon .ns-soon-tag{background:rgba(0,0,0,.05);}
  .ns-icon{
    width:22px; height:22px; flex-shrink:0;
    color:var(--orange);
    display:flex; align-items:center; justify-content:center;
  }
  .ns-icon svg{width:100%; height:100%;}
  .ns-name{
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--silver-1); line-height:1.3;
  }
  .nivel-light .ns{border-color:rgba(0,0,0,.10); background:transparent;}
  .nivel-light .ns:hover{border-color:var(--orange); background:rgba(232,119,34,.04);}
  .nivel-light .ns-name{color:var(--ink);}

  @media (max-width:900px){
    .niveles{padding:90px 0;}
    .niveles-head{flex-direction:column; align-items:flex-start; margin-bottom:40px;}
    .niveles-sub{text-align:left; max-width:none; margin-top:16px;}
    .niveles-grid{grid-template-columns:1fr; gap:36px;}
    .nivel-card{padding:28px 28px 32px;}
    .nivel-icon{margin-bottom:24px; width:44px; height:44px;}
    .nivel-title{font-size:28px; margin-bottom:20px;}
  }

  /* ===== INDUSTRIES ===== */
  .ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .ind-card{
    position:relative; background:var(--white); min-height:240px; overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between;
    border:1px solid var(--line);
    box-shadow:0 1px 4px rgba(0,0,0,.08);
    transition:transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease, border-color .3s ease, z-index 0s .4s;
    z-index:1;
  }
  .ind-card:hover{
    transform:scale(1.04);
    border-color:rgba(232,119,34,.4);
    box-shadow:0 22px 50px rgba(0,0,0,.45), 0 4px 12px rgba(232,119,34,.15);
    z-index:5; transition:transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease, border-color .3s ease, z-index 0s;
  }
  .ind-bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:.55; transition:opacity .35s ease, transform .5s ease;
  }
  .ind-card:hover .ind-bg{opacity:1; transform:scale(1.03);}
  .ind-card::before{
    content:""; position:absolute; inset:20px; z-index:2; pointer-events:none;
    background-image:
      linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)),
      linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)),
      linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange)),
      linear-gradient(var(--orange), var(--orange)), linear-gradient(var(--orange), var(--orange));
    background-repeat:no-repeat;
    background-size:2px 30px, 30px 2px, 2px 30px, 30px 2px, 2px 30px, 30px 2px, 2px 30px, 30px 2px;
    background-position:top left, top left, top right, top right, bottom right, bottom right, bottom left, bottom left;
    opacity:0;
    filter:drop-shadow(0 0 8px rgba(232,119,34,.75));
    transition:opacity .3s ease, inset .35s cubic-bezier(.2,.6,.2,1);
  }
  .ind-card:hover::before{opacity:1; inset:12px;}
  .ind-content{
    position:relative; z-index:1; padding:26px 22px;
    display:flex; flex-direction:column; justify-content:space-between; flex:1; gap:60px;
    background:linear-gradient(180deg, rgba(11,11,12,.15) 0%, rgba(11,11,12,.85) 100%);
  }
  .ind-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .ind-num{font-family:var(--ff-mono); font-size:12px; color:var(--silver-1);}
  .ind-icon{width:22px; height:22px; color:var(--orange); transition:color .25s ease;}
  .ind-name{font-family:var(--ff-display); font-size:22px; text-transform:uppercase; margin:0 0 8px; color:var(--white);}
  .ind-desc{font-size:13.5px; color:var(--silver-1); line-height:1.5;}
  .ind-card.is-dark{background:var(--black);}
  .ind-card.is-dark .ind-name{color:var(--white);}
  .ind-card.is-dark .ind-desc{color:var(--silver-2);}
  .ind-card.is-cta .ind-num{color:var(--orange);}

  /* ===== REELS — "Así se mueve KÖNNEN" ===== */
  .reels-block{
    position:relative; background:var(--black); color:#fff; padding:120px 0 110px; overflow:hidden;
  }
  .reels-block::before{
    content:''; position:absolute; inset:0; z-index:0;
    background:
      var(--grain),
      radial-gradient(ellipse 800px 500px at 85% 0%, rgba(232,119,34,.14), transparent 60%),
      linear-gradient(150deg, #141416 0%, #08080a 60%, #101012 100%);
  }
  .reels-block .wrap{position:relative; z-index:1;}
  .reels-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:48px;}
  .reels-head .eyebrow{color:var(--orange);}
  .reels-head h2{color:#fff; margin-top:8px;}
  .reels-head p{color:var(--silver-2); max-width:340px; font-size:15px; line-height:1.6;}

  .reels-wrap{position:relative; z-index:1;}
  .reels-track{
    display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
    padding:0 32px 8px; margin:0 -32px; scroll-padding-left:32px;
    /* "safe center" instead of plain center — centers the row while it's
       short (today's 4 cards), but falls back to start-aligned once more
       reels are added and the row is wide enough to need the scrollbar,
       so nothing gets clipped/unreachable on the left edge */
    justify-content:safe center;
  }
  .reels-track::-webkit-scrollbar{display:none;}
  .reel-card{
    position:relative; flex:0 0 auto; width:250px; aspect-ratio:9/16; border-radius:16px; overflow:hidden;
    background:#151517; scroll-snap-align:start; box-shadow:0 30px 60px rgba(0,0,0,.4);
  }
  .reel-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  /* mirrors the sitewide .img-fallback / .slot-fallback placeholder convention —
     visible by default (video sits underneath, transparent until it has a real
     source), hidden the moment JS confirms the video actually has playable data */
  .reel-fallback{
    position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:10px; text-align:center; padding:20px;
    background:linear-gradient(155deg,#1c1c1e 0%,#0a0a0b 100%); color:var(--silver-2);
  }
  .reel-card.has-video .reel-fallback{display:none;}
  .reel-fallback-icon{width:30px; height:30px; color:var(--orange); opacity:.8;}
  .reel-fallback b{font-family:var(--ff-body); font-size:13px; font-weight:600; color:var(--silver-1); max-width:180px;}
  .reel-fallback span{font-family:var(--ff-mono); font-size:10px; color:var(--silver-3); word-break:break-all;}
  .reel-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 45%, transparent 75%, rgba(0,0,0,.35) 100%);
  }
  .reel-mute{
    position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.12); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.22);
    color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .reel-mute:hover{background:rgba(255,255,255,.22);}
  .reel-mute svg{width:15px; height:15px;}
  .reel-mute .icon-unmuted{display:none;}
  .reel-mute:not(.is-muted) .icon-muted{display:none;}
  .reel-mute:not(.is-muted) .icon-unmuted{display:block;}
  .reel-caption{
    position:absolute; left:16px; right:16px; bottom:16px; z-index:2;
    font-family:var(--ff-body); font-size:13.5px; font-weight:600; color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.6);
  }
  /* embedded reel card — a real thumbnail "facade" that only turns into a
     live YouTube iframe once tapped, so the reel plays right there in the
     card instead of redirecting to another tab. The facade keeps our own
     look (no player chrome, no upfront iframe weight) until the moment
     someone actually presses play. */
  .reel-card--embed{cursor:pointer;}
  .reel-embed-trigger{
    all:unset; position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; cursor:pointer;
  }
  .reel-card--embed.is-playing .reel-embed-trigger{display:none;}
  .reel-embed-frame{position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0;}
  .reel-thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .reel-platform{
    position:absolute; top:14px; left:14px; z-index:2;
    font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:#fff;
    background:rgba(0,0,0,.5); backdrop-filter:blur(4px); padding:5px 10px; border-radius:999px;
  }
  .reel-play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
    width:54px; height:54px; border-radius:50%;
    background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.35);
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:background .2s ease, transform .2s ease;
  }
  .reel-play svg{display:block; flex-shrink:0; width:20px; height:20px; margin:0;}
  .reel-embed-trigger:hover .reel-play{background:var(--orange); transform:translate(-50%,-50%) scale(1.08); border-color:var(--orange);}
  .reels-arrow{
    position:absolute; top:50%; z-index:3; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .reels-arrow:hover{background:var(--orange); border-color:var(--orange);}
  .reels-arrow svg{width:18px; height:18px;}
  .reels-arrow--prev{left:-4px;}
  .reels-arrow--next{right:-4px;}
  @media (max-width:900px){
    .reels-head{flex-direction:column; align-items:flex-start; gap:16px;}
  }
  @media (max-width:600px){
    .reels-block{padding:80px 0 70px;}
    .reel-card{width:200px;}
    /* keep the prev/next arrows as an explicit "scroll for more" affordance
       on mobile (touch swipe on .reels-track already works, but nothing
       hinted there was more to see off-screen) — shrunk a touch so they
       don't crowd the now-narrower 200px cards */
    .reels-arrow{width:36px; height:36px;}
    .reels-arrow svg{width:15px; height:15px;}
  }

  /* ===== PROCESS (pinned scroll sequence) ===== */
  #proceso{padding:50px 0;} /* overrides .section's 130px — the pin itself supplies the "screen" of content, so this outer padding is just breathing room, not the show */
  .proceso-scroll{position:relative; height:260vh;} /* was 340vh — shorter scroll-jack, less empty scroll before/after the pin */
  /* section-head now lives inside the pinned panel (see index.html) so the
     title, the step sequence and the image are all on screen together
     instead of the title scrolling past before the pin takes over —
     flex-column stacks them, and every size below is trimmed to keep the
     total under one viewport's height */
  .proceso-sticky{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
  #proceso .section-head{margin-bottom:18px;}
  .process-layout{display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:center; width:100%;}
  .process-steps{position:relative; display:flex; flex-direction:column;}
  .process-track{position:absolute; left:15px; top:24px; bottom:24px; width:4px; background:var(--line); border-radius:2px; z-index:0;}
  .process-track-fill{
    position:absolute; left:0; top:0; width:100%; height:100%; border-radius:2px;
    background:var(--orange); box-shadow:0 0 10px rgba(232,119,34,.6);
    transform-origin:top; transform:scaleY(0); will-change:transform;
  }
  .process-step{display:flex; gap:16px; padding:11px 0;}
  .step-line{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;}
  .step-num{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:38px; height:38px; border-radius:3px; background:var(--paper); border:1px solid var(--line);
    font-family:var(--ff-mono); font-size:15px; font-weight:600; color:var(--silver-3);
    transition:background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
  }
  .step-num.is-lit{
    background:var(--orange); border-color:var(--orange); color:#fff;
    box-shadow:0 6px 22px rgba(232,119,34,.4);
  }
  /* fixed floor so every step reserves the same vertical space regardless
     of how much its own title/description happen to wrap — without this,
     a step with a shorter description was a shorter box, and the numbers
     above/below it ended up closer together than every other pair */
  .step-copy{opacity:.4; transition:opacity .5s ease; min-height:72px;}
  .process-step.is-active .step-copy{opacity:1;}
  .step-copy h4{font-size:17px; margin:4px 0 6px; text-transform:none; font-family:var(--ff-body); font-weight:700; letter-spacing:0;}
  .step-copy p{font-size:13px;}
  .process-image{position:relative; overflow:hidden; aspect-ratio:4/4.4; max-height:50vh; border-radius:4px; background:#0b0b0c;}
  /* each photo rises up into place instead of just fading — starts
     slightly below its resting spot and slightly zoomed, settles in as
     it becomes the active step's image; reversing that same motion on
     the way out (sinking back down as it fades) reads as one continuous
     elegant swap rather than two independent effects */
  .process-image img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transform:translateY(46px) scale(1.04);
    transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  }
  .process-image::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(11,11,12,.4)); pointer-events:none;}
  /* one photo per step — swapped by crossfade instead of just re-cropping a single image */
  .process-image[data-active-step="0"] img[data-step="0"],
  .process-image[data-active-step="1"] img[data-step="1"],
  .process-image[data-active-step="2"] img[data-step="2"],
  .process-image[data-active-step="3"] img[data-step="3"]{opacity:1; transform:translateY(0) scale(1);}
  @media (max-width:900px){
    .proceso-scroll{height:auto;}
    .proceso-sticky{position:static; height:auto; padding:60px 0;}
    .process-layout{grid-template-columns:1fr; gap:40px;}
    .process-step{opacity:1;}
  }
  @media (prefers-reduced-motion: reduce){
    .process-image img{transition:opacity .3s ease; transform:none !important;}
  }

  /* ===== ROAD RISK BLOCK ===== */
  .risk-block{background:var(--white); padding:130px 0; position:relative; overflow:hidden;}
  /* Mexico outline as a quiet, oversized watermark behind the data — grounds
     the stats geographically without competing with them for attention */
  .risk-map{
    position:absolute; top:50%; right:-6%; transform:translateY(-50%);
    width:64%; max-width:820px; aspect-ratio:975.5368/654.81897;
    background:url('assets/img/mapa-mexico.svg') center/contain no-repeat;
    opacity:.05; pointer-events:none; z-index:0;
  }
  .risk-block .wrap{position:relative; z-index:1;}
  /* the concentration headline: bigger and bolder than the individual rings
     so the "75%" lands first, before the reader breaks it down by corridor —
     copy stays pinned to the right edge; only the number itself travels
     (see initRiskTotalSlide in script.js), stopping just short of it */
  .risk-total{
    display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
    padding:32px 0; margin-bottom:2px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .risk-total-num{
    font-family:var(--ff-display); font-size:clamp(64px,8vw,104px); font-weight:800;
    line-height:.9; letter-spacing:-.01em; flex-shrink:0;
  }
  /* hollow outline at rest — script.js fills it in as the number counts
     up and slides toward 75%, so it reads as "empty" near 0% and solid
     by the time it arrives */
  .risk-total-count{
    color:transparent; -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1.5px var(--orange);
  }
  .risk-total p{font-size:17px; color:var(--ink); max-width:300px; margin:0 0 8px;}
  .risk-rings{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-top:none;
  }
  .risk-ring-card{
    position:relative; overflow:hidden;
    background:var(--white); padding:48px 32px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  /* a droplet of deep red grows outward from wherever the cursor enters
     until it fully covers the card — --drop-size is set per-hover in JS to
     the exact distance to the farthest corner, so it always fills completely
     regardless of card size or entry point */
  .risk-ring-card::before{
    content:''; position:absolute; z-index:0; pointer-events:none;
    left:var(--mx,50%); top:var(--my,50%); width:0; height:0; border-radius:50%;
    background:rgba(165,42,31,.72); transform:translate(-50%,-50%);
    transition:width .95s cubic-bezier(.16,1,.3,1), height .95s cubic-bezier(.16,1,.3,1);
  }
  .risk-ring-card:hover::before{width:var(--drop-size,600px); height:var(--drop-size,600px);}
  .risk-ring-card > *{position:relative; z-index:1;}
  /* the percentage is what this hover exists to intensify — everything
     else on the card just needs to stay legible against the red */
  .risk-ring-card .risk-ring-num,
  .risk-ring-card .risk-ring-route,
  .risk-ring-card p{transition:color .5s ease;}
  .risk-ring-card:hover .risk-ring-num{color:#fff;}
  .risk-ring-card:hover .risk-ring-route{color:#fff;}
  .risk-ring-card:hover p{color:rgba(255,255,255,.85);}
  .risk-ring-card .risk-ring-track,
  .risk-ring-card .risk-ring-fill{transition:stroke .5s ease;}
  .risk-ring-card:hover .risk-ring-track{stroke:rgba(255,255,255,.3);}
  .risk-ring-card:hover .risk-ring-fill{stroke:#fff;}
  @media (prefers-reduced-motion: reduce){
    .risk-ring-card::before{transition:none;}
  }
  .risk-ring{position:relative; width:148px; height:148px; margin-bottom:28px; flex-shrink:0;}
  /* a radar-style ping loops outward from each ring once it's on screen —
     bolder and more saturated than a decorative flourish, so the section
     reads as a live alert rather than a static stat */
  .risk-ring::before{
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:1.5px solid var(--orange); opacity:0; pointer-events:none;
    animation:riskPing 2.6s cubic-bezier(.16,1,.3,1) infinite;
    animation-delay:var(--ring-delay,0s); animation-play-state:paused;
  }
  .risk-rings.in .risk-ring::before{animation-play-state:running;}
  @keyframes riskPing{
    0%{transform:scale(.9); opacity:0;}
    18%{opacity:.65;}
    100%{transform:scale(1.28); opacity:0;}
  }
  .risk-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
  .risk-ring-track{fill:none; stroke:var(--silver-1); stroke-width:8;}
  .risk-ring-fill{
    fill:none; stroke:var(--orange); stroke-width:9; stroke-linecap:round;
    stroke-dasharray:326.7; stroke-dashoffset:326.7;
    transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--ring-delay,0s);
  }
  .risk-rings.in .risk-ring-fill{stroke-dashoffset:calc(326.7 - (326.7 * var(--pct)) / 100);}
  .risk-ring-num{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--ff-display); font-size:27px; font-weight:800; letter-spacing:-.01em; color:var(--ink);
  }
  .risk-ring-route{
    font-family:var(--ff-display); font-size:clamp(24px,2.6vw,32px); letter-spacing:-.01em;
    text-transform:none; color:var(--ink); font-weight:800; line-height:1.05; margin-bottom:22px;
  }
  .risk-ring-card p{font-size:13.5px; max-width:220px; margin:0;}
  @media (prefers-reduced-motion: reduce){
    .risk-ring-fill{transition:none;}
    .risk-ring::before{animation:none;}
  }
  /* the "how often" callout reads like a related data row under the
     rings — a single highlighted stat rather than a literal <table> */
  .risk-freq{
    display:flex; align-items:center; gap:40px; flex-wrap:wrap;
    border:1px solid var(--line); border-top:none; background:var(--paper);
    padding:40px 44px;
  }
  .risk-freq-num{
    font-family:var(--ff-display); font-size:clamp(56px,7vw,88px); font-weight:800;
    color:var(--orange); line-height:1; flex-shrink:0;
  }
  /* was a CSS ::after with hardcoded content:'/día' — generated content
     never enters the DOM's innerHTML, so i18n.js's data-en swap couldn't
     reach it and it stayed Spanish even in English mode. A real element
     fixes that. */
  .risk-freq-suffix{
    font-size:.28em; font-family:var(--ff-mono); color:var(--silver-3);
    margin-left:8px; text-transform:none; letter-spacing:0; vertical-align:middle;
  }
  .risk-freq-label{
    font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--silver-3); display:block; margin-bottom:8px;
  }
  .risk-freq-copy p{font-size:16px; color:var(--ink); max-width:520px; margin:0;}
  .risk-freq-copy p b{color:var(--orange); font-weight:700;}
  .risk-map-credit{
    font-family:var(--ff-mono); font-size:10.5px; color:var(--silver-2);
    margin-top:16px; opacity:.7;
  }
  @media (max-width:900px){
    .risk-map{width:120%; right:-30%; opacity:.045;}
    .risk-total{flex-direction:column; align-items:flex-start; gap:10px;}
    .risk-rings{grid-template-columns:1fr;}
    .risk-ring-card{padding:36px 24px;}
    .risk-freq{flex-direction:column; align-items:flex-start; gap:14px; padding:32px 28px;}
  }

  /* ===== TRUST GRID ===== */
  .trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .trust-card{background:var(--white); padding:38px 32px;}
  .trust-icon{width:38px; height:38px; margin-bottom:20px;}
  .trust-icon svg{width:100%; height:100%; stroke:var(--orange); fill:none; stroke-width:1.4;}
  .trust-card h4{font-family:var(--ff-body); text-transform:none; letter-spacing:0; font-size:17px; font-weight:700; margin-bottom:8px;}
  .trust-card p{font-size:14px;}

  /* ===== FAQ ===== */
  .faq-layout{display:grid; grid-template-columns:.7fr 1.3fr; gap:70px;}
  .faq-item{border-top:1px solid var(--line); padding:24px 0; cursor:pointer;}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-q{display:flex; justify-content:space-between; align-items:center; gap:20px;}
  .faq-q h4{font-family:var(--ff-body); text-transform:none; letter-spacing:0; font-size:17px; font-weight:600;}
  .faq-q .plus{font-family:var(--ff-mono); font-size:20px; color:var(--orange); flex-shrink:0; transition:transform .25s ease;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .faq-item.open .faq-a{max-height:200px;}
  .faq-a p{padding-top:14px; max-width:520px;}

  /* ===== FINAL CTA ===== */
  .final-cta{
    background: var(--grain), linear-gradient(180deg, var(--black) 0%, #1a1a1c 100%);
    color:var(--white); padding:150px 0; text-align:center; position:relative; overflow:hidden;
  }
  .final-cta::before{
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 0%, rgba(232,119,34,.12), transparent 55%);
  }
  .final-cta h2{color:var(--white); font-size:clamp(38px,6vw,74px); position:relative;}
  .final-cta p{color:var(--silver-2); font-size:19px; line-height:1.6; max-width:640px; margin:22px auto 40px; position:relative;}
  .quote-form{
    position:relative; max-width:640px; margin:56px auto 0; text-align:left;
    padding:36px; border:1px solid rgba(255,255,255,.14); border-radius:6px;
    background:rgba(255,255,255,.03); backdrop-filter:blur(6px);
  }
  .quote-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;}
  .qf-field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
  .qf-field--full{margin-bottom:0;}
  .qf-field label{
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--silver-2);
  }
  .qf-field input, .qf-field select, .qf-field textarea{
    font-family:var(--ff-body); font-size:15px; color:var(--white);
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); border-radius:3px;
    padding:12px 14px; outline:none; transition:border-color .2s ease, background .2s ease;
    /* inputs/selects/textareas default to their own intrinsic size (a
       browser-guessed character count) rather than filling .qf-field —
       flex stretch alone doesn't reliably override that on every mobile
       browser, which is what let them run wider than the card on some
       phones. width:100% + border-box pins them to the container, always. */
    width:100%; max-width:100%; box-sizing:border-box; display:block;
  }
  .qf-field textarea{resize:vertical; min-height:100px; font-family:var(--ff-body);}
  /* without appearance:none, mobile browsers (Android Chrome especially)
     draw their own native control here — ignoring the dark background and
     custom font entirely — which is why this field alone looked like a
     light, oversized system picker instead of matching the other inputs.
     Forcing it off means we also have to draw our own chevron, since that
     native arrow disappears along with the rest of the native chrome. */
  .qf-field select{
    cursor:pointer;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
    padding-right:40px;
  }
  .qf-field select option{background:#1a1a1c; color:var(--white);}
  .qf-field input::placeholder, .qf-field textarea::placeholder{color:var(--silver-3);}
  .qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus{
    border-color:var(--orange); background:rgba(255,255,255,.08);
  }
  .qf-submit{margin-top:24px; width:100%; justify-content:center;}
  .qf-call{margin-top:12px; width:100%; justify-content:center;}
  .final-cta .qf-status{
    margin:16px 0 0; font-family:var(--ff-mono); font-size:13px; line-height:1.4; text-align:center;
    color:var(--silver-1); max-width:none; min-height:1em;
  }
  .qf-status.is-success{color:var(--orange);}
  @media (max-width:640px){
    .quote-form{padding:26px;}
    .quote-form-grid{grid-template-columns:1fr;}
  }

  /* ===== FOOTER ===== */
  footer{
    background:
      var(--grain),
      radial-gradient(ellipse 800px 400px at 50% 0%, rgba(255,255,255,.035), transparent 60%),
      linear-gradient(180deg, #0d0d0f 0%, #060607 100%);
    color:var(--silver-2); padding:80px 0 30px;
  }
  .foot-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:50px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.12);}
  .foot-logo img{height:26px; margin-bottom:18px; filter:brightness(0) invert(1);}
  .foot-grid p{color:var(--silver-2); font-size:14px; max-width:280px;}
  .foot-col h5{font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--white); margin-bottom:18px;}
  .foot-col a{display:block; font-size:14px; color:var(--silver-2); margin-bottom:12px; transition:color .2s ease;}
  .foot-col a:hover{color:var(--orange);}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; font-family:var(--ff-mono); color:var(--silver-3); flex-wrap:wrap; gap:14px;}

  /* ===== RIGHTS BAR — small closing strip below the main footer, solid
     black, logo mark + copyright centered (shared across every page) ===== */
  .rights-bar{
    background:#000; padding:40px 24px;
    display:flex; flex-direction:column; align-items:center; gap:16px;
    text-align:center;
  }
  .rights-bar-logo{height:30px; width:auto; filter:brightness(0) invert(1);}
  .rights-bar p{
    font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.04em; line-height:1.7;
    color:var(--silver-2); margin:0;
  }

  /* ===== BACK TO TOP — only shown once the visitor is nearly at the
     bottom of the page (see initBackToTop in the JS); hidden the rest of
     the time, including mid-page ===== */
  .back-to-top{
    position:fixed; right:24px; bottom:24px; z-index:150;
    width:48px; height:48px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--orange); color:#fff; border:none; cursor:pointer;
    box-shadow:0 10px 24px rgba(232,119,34,.4);
    opacity:0; transform:translateY(14px); pointer-events:none;
    transition:opacity .3s ease, transform .3s ease, background .2s ease;
  }
  .back-to-top svg{width:20px; height:20px;}
  .back-to-top.is-visible{opacity:1; transform:translateY(0); pointer-events:auto;}
  .back-to-top:hover{background:var(--black); transform:translateY(-3px);}
  @media (max-width:600px){
    .back-to-top{right:16px; bottom:16px; width:44px; height:44px;}
  }
  @media (prefers-reduced-motion: reduce){
    .back-to-top{transition:opacity .2s linear;}
    .back-to-top:hover{transform:none;}
  }

  /* ===== FORM PRIVACY NOTICE =====
     One-time interrupt the first time someone focuses ANY field in ANY
     form on the page — script (initPrivacyNotice) blurs the field right
     back out and shows this instead, refocusing it only once "Aceptar"
     is clicked. Remembered in localStorage so it's a true one-time
     notice, not a repeat-every-field annoyance. */
  .privacy-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;}
  .privacy-modal[hidden]{display:none;}
  body.privacy-modal-open{overflow:hidden;}
  .privacy-modal-backdrop{
    position:absolute; inset:0;
    background:rgba(8,8,9,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    opacity:0; transition:opacity .3s ease;
  }
  .privacy-modal.is-open .privacy-modal-backdrop{opacity:1;}
  .privacy-modal-card{
    position:relative; z-index:1; width:100%; max-width:440px;
    background:var(--white); border-radius:20px; padding:40px 36px;
    text-align:center; box-shadow:0 40px 90px rgba(0,0,0,.4);
    opacity:0; transform:translateY(16px) scale(.96);
    transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
  }
  .privacy-modal.is-open .privacy-modal-card{opacity:1; transform:translateY(0) scale(1);}
  .privacy-modal-icon{
    width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--orange-dim); color:var(--orange);
  }
  .privacy-modal-icon svg{width:26px; height:26px;}
  .privacy-modal-card h3{font-size:22px; margin-bottom:12px; color:var(--ink);}
  .privacy-modal-card p{font-size:14.5px; line-height:1.6; margin-bottom:26px; color:var(--silver-3);}
  .privacy-modal-card p a{color:var(--orange); text-decoration:underline; text-underline-offset:2px;}
  .privacy-modal-card .btn{margin:0 auto;}
  @media (prefers-reduced-motion: reduce){
    .privacy-modal-backdrop, .privacy-modal-card{transition:none;}
  }
  @media (max-width:480px){
    .privacy-modal-card{padding:32px 24px;}
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width:980px){
    .faq-layout{grid-template-columns:1fr;}
    .dark-block-body{grid-template-columns:1fr; gap:34px;}
    .ind-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
    .trust-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
    .section-head{flex-direction:column; align-items:flex-start;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .ind-grid, .foot-grid{grid-template-columns:1fr;}

    .risk-freq-num{margin-bottom:4px;}
  }

  [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; will-change:opacity, transform;}
  [data-reveal].in{opacity:1; transform:translateY(0); will-change:auto;}