/*
  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;
    --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;}
  html{scroll-behavior:auto;}
  body{font-family:var(--ff-body); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  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(30px,3.8vw,46px);}
  h3{font-size:clamp(19px,1.8vw,24px); font-weight:600;}
  p{color:var(--silver-3); line-height:1.65; font-size:15px;}
  .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(--orange); color:#100b06;}
  .btn-primary:hover{background:var(--black); color:#fff;}
  .btn-primary svg{transition:transform .25s ease;}
  .btn-primary:hover svg{transform:translateX(3px);}
  .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);}
  }

  [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;}

  /* ===== SOLUTION VIDEO — the unit in real footage, landscape 16:9 ===== */
  .solution-video{padding:100px 0; background:var(--off-white);}
  .sv-head{text-align:center; margin-bottom:44px;}
  .sv-head .eyebrow{justify-content:center;}
  .sv-frame{
    position:relative; width:100%; aspect-ratio:16/9; max-width:960px; margin:0 auto;
    border-radius:6px; overflow:hidden; background:#0b0b0c;
    box-shadow:0 30px 70px rgba(0,0,0,.22);
  }
  .sv-trigger{all:unset; box-sizing:border-box; position:absolute; inset:0; display:block; width:100%; height:100%; cursor:pointer;}
  .sv-thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .sv-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.5) 100%); pointer-events:none;}
  .sv-play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
    width:84px; height:84px; border-radius:50%;
    background:rgba(255,255,255,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.4);
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:background .25s ease, transform .25s ease, border-color .25s ease;
  }
  .sv-play svg{display:block; flex-shrink:0; width:30px; height:30px; margin:0;}
  .sv-trigger:hover .sv-play{background:var(--orange); border-color:var(--orange); transform:translate(-50%,-50%) scale(1.08);}
  .sv-frame.is-playing .sv-trigger{display:none;}
  .sv-embed-frame{position:absolute; inset:0; width:100%; height:100%; border:0;}
  @media (max-width:700px){
    .solution-video{padding:64px 0;}
    .sv-play{width:60px; height:60px;}
    .sv-play svg{width:22px; height:22px;}
  }

  /* ============================================================
     Page body — same white-forward palette + dark accents as the
     rest of the Advantage line (Thunder/Express/Iron Ship), so a
     page still "in development" already reads as part of the family
     ============================================================ */

  /* ===== HERO — drone shot + smoke-reveal title, same format used across
     Thunder Ship / Express Blindado / Iron Ship ===== */
  .eg-hero{min-height:100svh; background:var(--black); overflow:hidden; display:flex; flex-direction:column;}
  .eg-hero-media{position:absolute; inset:0; z-index:0;}
  .eg-hero-media::after{
    content:''; position:absolute; inset:0; z-index:-1;
    background:
      var(--grain),
      radial-gradient(ellipse 1000px 700px at 75% 20%, rgba(232,119,34,.16), transparent 62%),
      linear-gradient(150deg, #141416 0%, #08080a 55%, #101012 100%);
  }
  .eg-hero-ghost{
    position:absolute; left:0; right:0; top:14%; z-index:0;
    display:flex; align-items:center; justify-content:center; gap:.5em;
    padding:100px 0; pointer-events:none;
  }
  .eg-hero-ghost span{
    font-family:var(--ff-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
    font-size:clamp(70px,13.5vw,200px); line-height:.9; white-space:nowrap;
    color:rgba(255,255,255,.13);
    -webkit-text-stroke:1.5px rgba(255,255,255,.24);
    text-shadow:0 40px 90px rgba(0,0,0,.7), 0 4px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.1);
  }
  .eg-hero-ghost span:nth-child(2){
    color:rgba(232,119,34,.16);
    -webkit-text-stroke:1.5px rgba(232,119,34,.3);
    text-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 120px rgba(232,119,34,.22);
  }
  @media (max-width:700px){ .eg-hero-ghost{top:8%; gap:.3em; padding:60px 0;} }
  .eg-hero-shot-wrap{position:absolute; z-index:1; left:50%; top:52%; transform:translate(-50%,-42%); width:82%; max-width:760px;}
  .eg-hero-shot-glow{position:absolute; inset:-12%; z-index:0; background:radial-gradient(ellipse 60% 55% at 50% 55%, rgba(232,119,34,.22), transparent 70%); filter:blur(14px);}
  .eg-hero-shot{position:relative; z-index:1; opacity:0; animation:egHeroImgIn 1.3s cubic-bezier(.16,1,.3,1) both;}
  @keyframes egHeroImgIn{
    from{opacity:0; transform:scale(1.08); filter:blur(10px);}
    to{opacity:1; transform:scale(1); filter:blur(0);}
  }
  .eg-hero-shot img{width:100%; height:auto; object-fit:contain; display:block; filter:drop-shadow(0 34px 44px rgba(0,0,0,.55));}
  .eg-hero-scrim{position:absolute; inset:0; z-index:2; background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 46%); pointer-events:none;}
  .eg-hero-badge{
    position:relative; z-index:3; display:inline-flex; align-items:center; gap:8px;
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--silver-1); border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
    padding:8px 16px; border-radius:999px; margin:150px auto 0; width:fit-content;
  }
  .eg-hero-badge b{color:var(--orange); font-weight:600;}
  @media (max-width:700px){ .eg-hero-badge{margin-top:120px;} }
  .eg-hero-rail{position:absolute; left:32px; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:16px;}
  .eg-hero-rail-line{width:1px; height:64px; background:rgba(255,255,255,.22);}
  .eg-hero-rail span{writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--silver-2);}
  @media (max-width:900px){ .eg-hero-rail{display:none;} }
  .eg-hero-bottom{position:relative; z-index:3; margin-top:auto; padding:0 32px 110px;}
  .eg-hero-heading{max-width:var(--container); margin:0 auto; width:100%; padding-bottom:26px; text-align:center;}
  .eg-hero-title{
    color:#fff; font-size:clamp(36px,5.6vw,66px); line-height:1; margin:0;
    text-shadow:0 2px 10px rgba(0,0,0,.75), 0 24px 60px rgba(0,0,0,.6);
  }
  .eg-hero-title .accent{color:var(--orange); text-shadow:0 2px 10px rgba(0,0,0,.75), 0 0 40px rgba(232,119,34,.35);}
  .eg-hero-smoke{display:inline-block; opacity:0; animation:egSmokeCycle 6s ease-in-out infinite both;}
  .eg-hero-smoke--1{animation-delay:.9s;}
  .eg-hero-smoke--2{animation-delay:1.6s;}
  @keyframes egSmokeCycle{
    0%{opacity:0; filter:blur(22px); transform:translateY(20px) scale(1.04);}
    20%{opacity:1; filter:blur(0); transform:translateY(0) scale(1);}
    70%{opacity:1; filter:blur(0); transform:translateY(0) scale(1);}
    100%{opacity:0; filter:blur(22px); transform:translateY(-20px) scale(1.04);}
  }
  @media (prefers-reduced-motion: reduce){
    .eg-hero-shot{opacity:1; animation:none;}
    .eg-hero-smoke{opacity:1; animation:none; filter:none; transform:none;}
  }
  @keyframes egNextIn{
    from{opacity:0; transform:translate(-50%,18px) scale(.92);}
    to{opacity:1; transform:translate(-50%,0) scale(1);}
  }
  .eg-hero-next{
    position:absolute; left:50%; bottom:28px; z-index:4;
    display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none;
    opacity:0; animation:egNextIn .9s cubic-bezier(.16,1,.3,1) 1s both;
  }
  .eg-hero-next-icon{
    width:44px; height:44px; border-radius:50%;
    border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:border-color .3s ease, background .3s ease;
    animation:egNextBounce 2.2s ease-in-out infinite;
  }
  .eg-hero-next-icon svg{width:16px; height:16px;}
  .eg-hero-next-label{
    font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65);
    transition:color .3s ease;
  }
  .eg-hero-next:hover .eg-hero-next-icon{border-color:#fff; background:var(--orange);}
  .eg-hero-next:hover .eg-hero-next-label{color:#fff;}
  @keyframes egNextBounce{
    0%, 100%{transform:translateY(0);}
    50%{transform:translateY(6px);}
  }
  @media (prefers-reduced-motion: reduce){
    .eg-hero-next{opacity:1; animation:none;}
    .eg-hero-next-icon{animation:none;}
  }
  @media (max-width:700px){ .eg-hero-bottom{padding:0 20px 90px;} .eg-hero-next{bottom:20px;} }

  .eg-seam{height:3px; margin:0; position:relative; z-index:2; background:linear-gradient(90deg, transparent, var(--orange) 35%, var(--orange) 65%, transparent); transform:skewY(-.6deg);}

  /* ===== SECTION SHELL ===== */
  .eg-section{padding:100px 0; background:var(--white);}
  .eg-section--dark{background:var(--black); color:var(--silver-1);}
  .eg-section--dark .eyebrow{color:var(--orange);}
  .eg-section--dark h2{color:#fff;}
  .eg-section--dark p{color:var(--silver-2);}
  .eg-section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:50px;}
  .eg-section-head p{max-width:400px;}
  @media (max-width:900px){ .eg-section{padding:64px 0;} .eg-section-head{flex-direction:column; align-items:flex-start;} }

  /* ===== QUÉ ES — lead statement + spec chips ===== */
  .eg-intro{max-width:820px;}
  .eg-intro-lead{font-family:var(--ff-body); font-size:clamp(19px,2.1vw,25px); font-weight:500; color:var(--ink); line-height:1.5; margin-bottom:34px;}
  .eg-chip-row{display:flex; flex-wrap:wrap;}
  .eg-chip{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    padding:9px 15px; border:1px solid var(--line); color:var(--ink); margin:0 8px 8px 0;
  }
  .eg-chip svg{width:13px; height:13px; color:var(--orange); flex-shrink:0;}

  /* ===== EL PROBLEMA — dark, oversized statement ===== */
  .eg-problem-statement{
    font-family:var(--ff-display); text-transform:uppercase; font-weight:700; letter-spacing:-.01em;
    font-size:clamp(28px,4.2vw,52px); line-height:1.08; color:#fff; max-width:900px; margin-bottom:28px;
  }
  .eg-problem-statement .accent{color:var(--orange);}
  .eg-problem p{max-width:560px; font-size:15.5px;}

  /* ===== PROTOCOLO — 4 numbered steps ===== */
  .eg-protocol-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .eg-protocol-step{background:var(--white); padding:34px 28px; display:flex; flex-direction:column; gap:14px;}
  .eg-protocol-num{font-family:var(--ff-mono); font-size:12px; color:var(--orange); letter-spacing:.05em;}
  .eg-protocol-step h4{font-size:18px; text-transform:uppercase; color:var(--ink); line-height:1.15;}
  .eg-protocol-step p{font-size:13px; line-height:1.6;}
  @media (max-width:900px){ .eg-protocol-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .eg-protocol-grid{grid-template-columns:1fr;} }

  /* ===== FINAL CTA — dark photo bg, same "drone" shot for visual bookending ===== */
  .eg-cta{position:relative; overflow:hidden; padding:130px 0; color:#fff; background:var(--black);}
  .eg-cta-bg{position:absolute; inset:0; z-index:0; opacity:.5;}
  .eg-cta-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 30%;}
  .eg-cta-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(5,5,6,.75) 0%, rgba(5,5,6,.94) 75%, #050506 100%);}
  .eg-cta .wrap{position:relative; z-index:2; text-align:center;}
  .eg-cta .eyebrow{justify-content:center;}
  .eg-cta h2{color:#fff; font-size:clamp(30px,4.6vw,52px);}
  .eg-cta p{color:var(--silver-1); max-width:480px; margin:20px auto 34px; font-size:15.5px;}
  .eg-cta-ctas{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:36px;}
  .eg-cta-direct{display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap;}
  .eg-cta-direct a{display:flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:13px; color:var(--silver-2); transition:color .2s ease;}
  .eg-cta-direct a:hover{color:var(--orange);}
  .eg-cta-direct a svg{width:16px; height:16px; color:var(--orange); flex-shrink:0;}

  /* ===== FOOTER — light, condensed single row ===== */
  .ts-foot{background:var(--paper); border-top:1px solid var(--line); padding:32px 0;}
  .ts-foot .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .ts-foot-left{display:flex; align-items:center; gap:14px; font-family:var(--ff-mono); font-size:11.5px; color:var(--silver-3);}
  .ts-foot-mark{font-family:var(--ff-display); font-size:15px; text-transform:uppercase; color:var(--ink); letter-spacing:.01em;}
  .ts-foot-links{display:flex; gap:20px; font-family:var(--ff-mono); font-size:11.5px; color:var(--silver-3);}
  .ts-foot-links a:hover{color:var(--orange);}

  /* ===== RIGHTS BAR — small closing strip below the main footer, solid
     black, logo mark + copyright centered ===== */
  .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{
    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;}
  }