/*
  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);}
  .btn-ghost{border-color:var(--line); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--black);}

  /* ===== generic image placeholder — every real photo slot on this page
     uses this so it's obvious at a glance where footage still needs to be
     dropped in; onerror just hides the broken <img> and reveals the hint ===== */
  .img-slot{position:relative; overflow:hidden; background:linear-gradient(155deg,#1c1c1e 0%,#0a0a0b 100%); display:block;}
  .img-slot img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .7s cubic-bezier(.16,1,.3,1);
  }
  .img-slot:hover img{transform:scale(1.05);}
  @media (prefers-reduced-motion: reduce){
    .img-slot img{transition:none;}
    .img-slot:hover img{transform:none;}
  }
  .img-slot.img-fallback img{display:none;}
  .slot-fallback{
    position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; text-align:center; padding:14px; color:rgba(255,255,255,.55);
  }
  .img-slot.img-fallback .slot-fallback{display:flex;}
  .slot-cam-icon{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.5; opacity:.7;}
  .slot-fallback b{font-family:var(--ff-mono); font-weight:500; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.8); line-height:1.4; max-width:220px;}
  .slot-fallback span{font-family:var(--ff-mono); font-size:9px; color:rgba(255,255,255,.35);}

  /* ===== 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 — white-forward palette. Black is used sparingly and
     deliberately: the hero, a floating "island" panel, image tiles,
     and one closing CTA — never as full alternating page-width bands.
     ============================================================ */

  /* ===== HERO — vehicle-spec configurator layout ===== */
  .ts-hero{min-height:100svh; background:var(--black); overflow:hidden; display:flex; flex-direction:column;}
  .ts-hero-media{position:absolute; inset:0; z-index:0;}
  .ts-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%);
  }
  /* ghost watermark — huge, barely-there wordmark, the same trick as the
     Ducati-style reference. Sits low enough that only the top edge of the
     product shot grazes it, instead of floating clear above the bike */
  .ts-hero-ghost{
    position:absolute; left:0; right:0; top:16%; z-index:0;
    display:flex; align-items:center; justify-content:center; gap:.5em;
    padding:100px 0; pointer-events:none;
  }
  .ts-hero-ghost span{
    font-family:var(--ff-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
    font-size:clamp(76px,14.5vw,220px); 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);
  }
  /* "SHIP" picks up the brand orange for a bit of designed contrast next to the plain "THUNDER" */
  .ts-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){ .ts-hero-ghost{top:8%; gap:.3em; padding:60px 0;} }
  /* product shot — centered, contained (not cropped) and lifted off the
     background with a soft orange spotlight + drop shadow, instead of a
     full-bleed cover photo */
  .ts-hero-shot-wrap{position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-20%); width:78%; max-width:640px;}
  .ts-hero-shot-glow{position:absolute; inset:-12%; z-index:0; background:radial-gradient(ellipse 60% 55% at 55% 58%, rgba(232,119,34,.22), transparent 70%); filter:blur(14px);}
  .ts-hero-shot{position:relative; z-index:1; opacity:0; animation:tsHeroImgIn 1.3s cubic-bezier(.16,1,.3,1) both;}
  @keyframes tsHeroImgIn{
    from{opacity:0; transform:scale(1.08); filter:blur(10px);}
    to{opacity:1; transform:scale(1); filter:blur(0);}
  }
  .ts-hero-shot img{width:100%; height:auto; object-fit:contain; display:block; filter:drop-shadow(0 34px 44px rgba(0,0,0,.55));}
  .ts-hero-slot.img-fallback .ts-hero-shot img{display:none;}
  .ts-hero-fallback{position:relative; z-index:1; display:none; align-items:center; justify-content:center; padding:12% 0; pointer-events:none;}
  .ts-hero-slot.img-fallback .ts-hero-fallback{display:flex;}
  .ts-hero-fallback svg{width:60%; height:auto; opacity:.4;}
  @media (max-width:900px){ .ts-hero-shot-wrap{position:relative; left:auto; top:auto; transform:none; width:78%; margin:120px auto 0;} }
  .ts-hero-scrim{position:absolute; inset:0; z-index:2; background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, transparent 42%); pointer-events:none;}
  /* left decorative rail — vertical label + line, echoing the reference's social-icon column */
  .ts-hero-rail{position:absolute; left:32px; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:16px;}
  .ts-hero-rail-line{width:1px; height:64px; background:rgba(255,255,255,.22);}
  .ts-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){ .ts-hero-rail{display:none;} }
  .ts-hero-bottom{position:relative; z-index:3; margin-top:auto; padding:0 32px 110px;}
  .ts-hero-heading{max-width:var(--container); margin:0 auto; width:100%; padding-bottom:26px; text-align:center;}
  .ts-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);
  }
  .ts-hero-title .accent{color:var(--orange); text-shadow:0 2px 10px rgba(0,0,0,.75), 0 0 40px rgba(232,119,34,.35);}
  /* smoke reveal — each line coalesces out of a blurred haze, holds, then
     dissolves back into it the same way, looping indefinitely; staggered so
     line 2 starts just after line 1 begins forming */
  .ts-hero-smoke{display:inline-block; opacity:0; animation:tsSmokeCycle 6s ease-in-out infinite both;}
  .ts-hero-smoke--1{animation-delay:.9s;}
  .ts-hero-smoke--2{animation-delay:1.6s;}
  @keyframes tsSmokeCycle{
    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){
    .ts-hero-shot{opacity:1; animation:none;}
    .ts-hero-smoke{opacity:1; animation:none; filter:none; transform:none;}
  }
  @keyframes tsGalleryIn{
    from{opacity:0; transform:translate(-50%,18px) scale(.92);}
    to{opacity:1; transform:translate(-50%,0) scale(1);}
  }
  /* bottom-center "explore" indicator — the chevron bounces gently to invite
     a scroll/click toward the gallery */
  .ts-hero-gallery-cta{
    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:tsGalleryIn .9s cubic-bezier(.16,1,.3,1) 1s both;
  }
  .ts-hero-gallery-cta-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:tsGalleryBounce 2.2s ease-in-out infinite;
  }
  .ts-hero-gallery-cta-icon svg{width:16px; height:16px;}
  .ts-hero-gallery-cta-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;
  }
  .ts-hero-gallery-cta:hover .ts-hero-gallery-cta-icon{border-color:#fff; background:var(--orange);}
  .ts-hero-gallery-cta:hover .ts-hero-gallery-cta-label{color:#fff;}
  @keyframes tsGalleryBounce{
    0%, 100%{transform:translateY(0);}
    50%{transform:translateY(6px);}
  }
  @media (prefers-reduced-motion: reduce){
    .ts-hero-gallery-cta{opacity:1; animation:none;}
    .ts-hero-gallery-cta-icon{animation:none;}
  }
  @media (max-width:700px){ .ts-hero-bottom{padding:0 20px 90px;} .ts-hero-gallery-cta{bottom:20px;} }

  /* seam accent — a thin skewed line of brand orange between two light
     sections, so the page has a couple of small geometric flourishes
     instead of relying on solid dark bands to create rhythm */
  .ts-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 ===== */
  .ts-section{padding:100px 0; background:var(--white);}
  .ts-section--paper{background:var(--paper);}
  .ts-section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:50px;}
  .ts-section-head p{max-width:380px;}
  @media (max-width:900px){ .ts-section{padding:64px 0;} .ts-section-head{flex-direction:column; align-items:flex-start;} }

  /* ===== LA UNIDAD — collage + short spec chips ===== */
  .ts-unit-layout{display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center;}
  .ts-unit-collage{position:relative;}
  .ts-unit-main{aspect-ratio:3/4; width:100%;}
  .ts-unit-copy p{max-width:460px; margin:18px 0 26px;}
  .ts-spec-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;}
  .ts-spec-chip svg{width:13px; height:13px; color:var(--orange); flex-shrink:0;}
  .ts-link-more{display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:4px; margin-top:22px;}
  .ts-link-more:hover{color:var(--orange); border-color:var(--orange);}
  @media (max-width:900px){
    .ts-unit-layout{grid-template-columns:1fr; gap:50px;}
  }

  /* ===== GALLERY — horizontal card carousel, infinite loop right-to-left ===== */
  /* full-bleed: breaks out of .wrap's max-width so the cards run edge-to-edge
     of the actual viewport on every screen size, no side fade — the loop
     itself (not a mask) is what hides where the card set repeats */
  .eb-carousel{position:relative; overflow:hidden; width:100vw; left:50%; margin-left:-50vw; padding:24px 0 90px; margin-bottom:-90px; cursor:ew-resize; touch-action:pan-y;}
  .eb-carousel.is-dragging{cursor:ew-resize;}
  .eb-carousel-track{display:flex; align-items:flex-start; gap:22px; width:max-content; will-change:transform; user-select:none;}
  .eb-carousel-track img{pointer-events:none;}
  .gal-card{position:relative; flex:0 0 auto; width:300px; height:400px; border-radius:22px;
    box-shadow:0 20px 44px rgba(0,0,0,.16); transition:box-shadow .5s cubic-bezier(.16,1,.3,1);
    cursor:pointer; perspective:1400px;}
  /* fixed offset class instead of nth-child(even) — the set has an odd count
     (7 cards), so once the JS clones it for the loop, nth-child parity flips
     every repeat and the stagger visibly jumps up/down at the seam. A class
     baked into each card (and copied along by cloneNode) survives that. */
  .gal-card--offset{margin-top:48px;}
  .gal-card:hover{box-shadow:0 30px 64px rgba(0,0,0,.3);}
  /* click-to-flip: inner wrapper carries the 3D rotation, front/back faces
     are absolutely stacked and hidden from the back via backface-visibility */
  .gal-card-inner{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.16,1,.3,1); will-change:transform;}
  .gal-card.is-flipped .gal-card-inner{transform:rotateY(180deg);}
  .gal-card-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:22px; overflow:hidden;}
  .gal-card-front{background:linear-gradient(155deg,#1c1c1e 0%,#0a0a0b 100%);}
  .gal-card .img-slot{position:absolute; inset:0;}
  /* elegant per-card zoom — slower and slightly stronger than the generic
     .img-slot hover-zoom used elsewhere, plus a soft shadow lift, so whichever
     card sits under the cursor as the carousel scrolls past reads as "in focus" */
  .gal-card .img-slot img{transition:transform .9s cubic-bezier(.16,1,.3,1);}
  .gal-card:hover .img-slot img{transform:scale(1.1);}
  .gal-card .gal-caption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 22px; background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 65%); display:flex; align-items:center; gap:10px;}
  .gal-num{font-family:var(--ff-mono); font-size:10px; color:var(--orange); flex-shrink:0;}
  .gal-caption h4{font-family:var(--ff-display); font-size:14.5px; text-transform:uppercase; color:#fff; font-weight:600; letter-spacing:.01em;}
  /* flip indicator — signals the card is interactive before the user even
     hovers; spins into an orange fill on hover as a preview of the tap action */
  .gal-flip-hint{
    position:absolute; top:16px; right:16px; z-index:3; width:30px; height:30px; border-radius:50%;
    background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.35); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:transform .5s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease;
  }
  .gal-flip-hint svg{width:14px; height:14px;}
  .gal-card:hover .gal-flip-hint{background:var(--orange); border-color:transparent; transform:rotate(180deg);}
  .gal-card-back{
    transform:rotateY(180deg);
    background:linear-gradient(155deg,#232326 0%,#0a0a0b 100%);
    border:1px solid rgba(255,255,255,.08);
    display:flex; flex-direction:column; justify-content:center; padding:34px 28px;
  }
  .gal-card-back .gal-num{display:block; margin-bottom:16px; font-size:11px;}
  .gal-card-back h4{font-family:var(--ff-display); font-size:18px; text-transform:uppercase; color:#fff; font-weight:700; letter-spacing:.01em; margin-bottom:14px;}
  .gal-card-back p{font-size:13.5px; line-height:1.65; color:var(--silver-1);}
  @media (prefers-reduced-motion: reduce){
    .eb-carousel-track{transform:none !important;}
    .gal-card, .gal-card:hover{box-shadow:0 20px 44px rgba(0,0,0,.16); transition:none;}
    .gal-card .img-slot img, .gal-card:hover .img-slot img{transform:none; transition:none;}
    .gal-card-inner{transition:none;}
    .gal-flip-hint, .gal-card:hover .gal-flip-hint{transform:none; transition:none;}
  }
  @media (max-width:700px){
    .gal-card{width:230px; height:310px; border-radius:16px;}
    .gal-card--offset{margin-top:32px;}
    .gal-card-back{padding:26px 22px;}
    .gal-card-back h4{font-size:16px;}
    .gal-card-back p{font-size:12.5px;}
  }

  /* ===== RIESGOS — dual-pane framed card (light panel + dark panel, tag pills) ===== */
  /* one big rounded "frame" holding both panels together, like a single
     card split in two — instead of two separate stacked/staged boxes */

  /* faint concentric-circle motif in the background, echoing a radar/scan
     pattern — purely decorative, sits behind the pills */

  /* benefits stretch to fill the card's full width, two per row, instead of
     shrink-wrapping — the bigger box should read as full of value, not
     half-empty */

  /* ===== FLUJO DE PROCESO — vertical custody map (dark) ===== */
  .ts-section--dark{background:var(--black); color:var(--silver-1);}
  .ts-section--dark .eyebrow{color:var(--orange);}
  .ts-section--dark h2{color:#fff;}
  .ts-section--dark .ts-section-head p{color:var(--silver-2);}

  /* zigzag custody map — roadmap-style blocks alternating on a central spine */
  .ts-flow-map{position:relative; padding:4px 0 0;}
  .ts-flow-line{position:absolute; left:50%; top:4px; bottom:4px; width:2px; background:rgba(255,255,255,.1); border-radius:2px; transform:translateX(-50%);}
  .ts-flow-line-fill{
    display:block; width:100%; height:100%; border-radius:2px;
    background:linear-gradient(180deg, #ffdcb0, var(--orange) 35%, #ff9142);
    box-shadow:0 0 6px rgba(255,190,130,.85), 0 0 14px rgba(232,119,34,.5), 0 0 26px rgba(232,119,34,.25);
    transform-origin:top; transform:scaleY(0); will-change:transform;
    transition:transform .15s linear;
    animation:tsNeonFlicker 5s ease-in-out infinite;
  }
  @keyframes tsNeonFlicker{
    0%, 6%, 10%, 30%, 34%, 60%, 100%{
      box-shadow:0 0 6px rgba(255,190,130,.85), 0 0 14px rgba(232,119,34,.5), 0 0 26px rgba(232,119,34,.25);
    }
    7%, 32%{
      box-shadow:0 0 3px rgba(255,190,130,.5), 0 0 8px rgba(232,119,34,.28), 0 0 14px rgba(232,119,34,.12);
    }
    61%{
      box-shadow:0 0 4px rgba(255,190,130,.65), 0 0 10px rgba(232,119,34,.38), 0 0 18px rgba(232,119,34,.18);
    }
  }

  .ts-flow-row{position:relative; display:flex; margin-bottom:28px;}
  .ts-flow-row--left{justify-content:flex-end;}
  .ts-flow-row--right{justify-content:flex-start;}

  .ts-flow-card{
    width:calc(50% - 30px); background:#161613;
    border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:26px 28px;
    transition:transform .25s ease, background .25s ease;
  }
  .ts-flow-row--left .ts-flow-card{margin-right:30px;}
  .ts-flow-row--right .ts-flow-card{margin-left:30px;}
  .ts-flow-row:hover .ts-flow-card{background:#1c1c18; transform:translateY(-2px);}

  /* reveal: focus-pull — box sharpens into view first, then its contents cascade in */
  .ts-flow-card[data-reveal]{
    opacity:0; transform:scale(.92); filter:blur(9px); will-change:opacity, transform, filter;
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), filter .6s ease;
  }
  .ts-flow-card[data-reveal].in{opacity:1; transform:scale(1); filter:blur(0);}

  .ts-flow-card .ts-flow-num,
  .ts-flow-card b,
  .ts-flow-card .ts-flow-desc{
    opacity:0; transform:translateY(10px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .ts-flow-card[data-reveal].in .ts-flow-num{opacity:1; transform:translateY(0); transition-delay:.3s;}
  .ts-flow-card[data-reveal].in b{opacity:1; transform:translateY(0); transition-delay:.48s;}
  .ts-flow-card[data-reveal].in .ts-flow-desc{opacity:1; transform:translateY(0); transition-delay:.66s;}

  .ts-flow-num{
    display:block; font-family:var(--ff-display); font-size:38px; font-weight:800;
    color:var(--orange); line-height:1; letter-spacing:-.01em; margin-bottom:16px;
  }
  .ts-flow-card b{display:block; font-family:var(--ff-body); font-size:19px; font-weight:800; color:#fff; letter-spacing:-.005em; margin-bottom:10px;}
  .ts-flow-desc{display:block; font-size:14px; font-weight:500; line-height:1.65; color:var(--silver-1); max-width:360px;}

  @media (max-width:980px){
    .ts-flow-line{left:16px; transform:none;}
    .ts-flow-row--left, .ts-flow-row--right{justify-content:flex-start;}
    .ts-flow-card{width:100%; padding:22px 22px;}
    .ts-flow-row--left .ts-flow-card, .ts-flow-row--right .ts-flow-card{margin:0 0 0 38px;}
  }
  @media (max-width:560px){
    .ts-flow-row{margin-bottom:20px;}
    .ts-flow-line{left:10px;}
    .ts-flow-card{padding:18px 16px 20px;}
    .ts-flow-row--left .ts-flow-card, .ts-flow-row--right .ts-flow-card{margin:0 0 0 26px;}
    .ts-flow-num{font-size:28px; margin-bottom:10px;}
    .ts-flow-card b{font-size:16.5px; margin-bottom:8px;}
    .ts-flow-desc{font-size:13px; line-height:1.55; max-width:none;}
  }

  /* ===== SECTORES — grayscale photo tiles, big number, color + zoom on hover ===== */
  .ts-sector-grid{display:grid; grid-template-columns:repeat(4,1fr); row-gap:72px; column-gap:32px; padding-top:44px;}
  .ts-sector-tile{position:relative; display:block; text-decoration:none;}
  .ts-sector-num{
    position:absolute; left:2px; top:-44px; z-index:2;
    font-family:var(--ff-display); font-size:56px; font-weight:800; line-height:1;
    color:var(--ink); letter-spacing:-.01em; transition:color .35s ease;
  }
  .ts-sector-tile:hover .ts-sector-num{color:var(--orange);}
  .ts-sector-photo{
    position:relative; overflow:hidden; border-radius:6px; height:360px;
    background:#141414;
  }
  .ts-sector-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(1) contrast(1.05); transform:scale(1.001);
    transition:filter .6s ease, transform .8s cubic-bezier(.16,1,.3,1);
  }
  .ts-sector-tile:hover .ts-sector-photo img{filter:grayscale(0) saturate(1.15); transform:scale(1.1);}
  .ts-sector-bar{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:16px 18px; background:linear-gradient(0deg, rgba(8,8,8,.92) 0%, rgba(8,8,8,.78) 60%, rgba(8,8,8,0) 100%);
  }
  .ts-sector-bar span{font-family:var(--ff-body); font-weight:600; font-size:14px; color:#fff; letter-spacing:0;}
  .ts-sector-arrow{width:16px; height:16px; color:#fff; flex-shrink:0; transition:transform .35s cubic-bezier(.16,1,.3,1), color .35s ease;}
  .ts-sector-tile:hover .ts-sector-arrow{transform:translate(3px,-3px); color:var(--orange);}
  @media (max-width:900px){
    .ts-sector-grid{grid-template-columns:repeat(2,1fr); row-gap:56px;}
  }
  @media (max-width:560px){
    .ts-sector-grid{grid-template-columns:1fr; row-gap:48px;}
    .ts-sector-photo{height:300px;}
    .ts-sector-num{font-size:46px; top:-36px;}
  }

  /* ===== FINAL CTA — dark photo background, white card floats on top ===== */
  .ts-cta{position:relative; overflow:hidden; padding:120px 0; color:#fff;}
  .ts-cta-bg{position:absolute; inset:0; z-index:0;}
  .ts-cta-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(115deg, rgba(5,5,6,.94) 0%, rgba(5,5,6,.65) 55%, rgba(5,5,6,.3) 100%);}
  .ts-cta .wrap{position:relative; z-index:2; display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; align-items:start;}
  .ts-cta h2{color:#fff;}
  .ts-cta-copy p{color:var(--silver-1); max-width:420px; margin:20px 0 30px;}
  .ts-cta-direct{display:flex; flex-direction:column; gap:14px;}
  .ts-cta-direct a{display:flex; align-items:center; gap:14px; font-family:var(--ff-mono); font-size:13.5px; color:var(--silver-1); transition:color .2s ease;}
  .ts-cta-direct a:hover{color:var(--orange);}
  .ts-cta-direct a svg{width:18px; height:18px; color:var(--orange); flex-shrink:0;}
  .ts-form{background:#fff; border:1px solid var(--line); padding:32px; border-radius:4px; box-shadow:0 30px 70px rgba(0,0,0,.4); color:var(--ink);}
  .ts-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;}
  .ts-field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
  .ts-field--full{margin-bottom:0;}
  .ts-field label{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--silver-3);}
  .ts-field input, .ts-field select, .ts-field textarea{
    font-family:var(--ff-body); font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line);
    border-radius:3px; padding:11px 13px; outline:none; transition:border-color .2s ease, background .2s ease;
  }
  .ts-field textarea{resize:vertical; min-height:84px;}
  .ts-field input:focus, .ts-field select:focus, .ts-field textarea:focus{border-color:var(--orange); background:#fff;}
  .ts-submit{margin-top:18px; width:100%; justify-content:center;}
  .ts-status{margin:14px 0 0; font-family:var(--ff-mono); font-size:12px; text-align:center; color:var(--silver-3); min-height:1em;}
  .ts-status.is-success{color:var(--orange);}
  @media (max-width:900px){ .ts-cta .wrap{grid-template-columns:1fr;} }
  @media (max-width:600px){ .ts-form{padding:22px;} .ts-form-grid{grid-template-columns:1fr;} .wrap{padding:0 20px;} }

  /* ===== 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;}
  }

  /* ===== 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;}
  }