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

  /* ============================================================
     HERO — light/white, deliberately calmer than the Advantage
     pages (no dark full-bleed photo): Valores Agregados reads as
     integrated operational intelligence, not the tactical premium tier
     ============================================================ */
  .std-hero{
    background:var(--paper); padding:160px 0 0; overflow:hidden; position:relative;
  }
  .std-hero-media{position:absolute; inset:0; z-index:0;}
  .std-hero-media img{width:100%; height:100%; object-fit:cover; object-position:center right;}
  /* fades the photo out toward the left/center, under the heading and specs,
     so the text keeps the same light, readable look the hero had before —
     the image reads as a texture on the right, not a full photo backdrop */
  .std-hero-media::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, var(--paper) 0%, var(--paper) 22%, rgba(250,250,250,.88) 45%, rgba(250,250,250,.4) 75%, rgba(250,250,250,.15) 100%);
  }
  .std-hero::before{
    content:''; position:absolute; inset:0; z-index:1;
    /* a tiny rasterized dot tiled by the browser — cheap to composite,
       unlike a live radial-gradient function recomputed at every 22px tile
       across the whole hero (thousands of circles), which is a real GPU
       cost on lower-end hardware and was the main driver of scroll jank */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle cx='11' cy='11' r='1' fill='rgba(0,0,0,0.05)'/></svg>");
    background-size:22px 22px; opacity:.5; pointer-events:none;
  }
  .std-hero .wrap{position:relative; z-index:2;}
  .std-hero-badge{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink); border:1px solid var(--line); padding:8px 16px; border-radius:999px; margin-bottom:26px; background:var(--white);
  }
  .std-hero-badge b{color:var(--orange); font-weight:600;}
  .std-hero h1{font-size:clamp(38px,5.6vw,66px); line-height:1; color:var(--ink); max-width:820px;}
  .std-hero p.lead{font-size:16.5px; color:var(--silver-3); max-width:520px; margin-top:22px;}
  .std-hero-strip{
    margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--silver-2); border-bottom:1px solid var(--silver-2);
  }
  .std-spec-box{padding:26px 30px; border-right:1px solid var(--silver-2);}
  .std-spec-box:last-child{border-right:none;}
  .std-spec-label{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver-3); display:block; margin-bottom:8px;}
  .std-spec-value{font-family:var(--ff-display); font-size:clamp(18px,1.6vw,24px); color:var(--ink); line-height:1.05;}
  @media (max-width:900px){
    .std-hero{padding:130px 0 0;}
    .std-hero-strip{grid-template-columns:1fr 1fr;}
    .std-spec-box:nth-child(2){border-right:none;}
  }
  @media (max-width:600px){ .wrap{padding:0 20px;} .std-hero-strip{grid-template-columns:1fr;} .std-spec-box{border-right:none; border-bottom:1px solid var(--silver-2);} .std-spec-box:last-child{border-bottom:none;} }

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

  /* ===== SECTION SHELL ===== */
  .std-section{padding:100px 0; background:var(--white);}

  .std-section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:50px;}
  .std-section-head p{max-width:380px;}
  @media (max-width:900px){ .std-section{padding:64px 0;} .std-section-head{flex-direction:column; align-items:flex-start;} }

  /* ===== SERVICE CARDS — 4 horizontal photo cards, side by side ===== */
  .std-cards-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .std-card{
    position:relative; min-height:460px; border-radius:14px; overflow:hidden;
    display:flex; cursor:pointer;
    transition:transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s ease;
  }
  .std-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px rgba(0,0,0,.22);}
  .std-card-media{position:absolute; inset:0; z-index:0;}
  /* stronger + more even scrim than a simple top-fade — keeps the whole
     text block (kicker through button) legible regardless of how bright
     the photo underneath is, instead of only working on the darkest ones */
  .std-card-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(5,5,6,.88) 0%, rgba(5,5,6,.66) 55%, rgba(5,5,6,.72) 100%);
  }
  /* column layout with the button pushed to margin-top:auto — so "Ver más"
     always sits at the same height at the bottom of the card, regardless of
     how many lines each card's paragraph wraps to */
  .std-card-content{position:relative; z-index:2; padding:30px 26px; width:100%; display:flex; flex-direction:column;}
  .std-card-kicker{
    display:block; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--silver-1); margin-bottom:10px; text-shadow:0 1px 4px rgba(0,0,0,.5);
  }
  .std-card-content h3{font-size:22px; color:#fff; margin-bottom:14px; line-height:1.05; text-shadow:0 2px 8px rgba(0,0,0,.5);}
  .std-card-content p{font-size:13px; color:var(--silver-1); line-height:1.6; margin-bottom:0; text-shadow:0 1px 4px rgba(0,0,0,.5);}
  .std-card-btn{
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:auto;
    font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    color:#fff; background:transparent; border:1px solid rgba(255,255,255,.4); padding:10px 20px; border-radius:999px;
    cursor:pointer; -webkit-appearance:none; appearance:none;
    transition:border-color .25s ease, background .25s ease;
  }
  .std-card:hover .std-card-btn{border-color:var(--orange); background:rgba(232,119,34,.16);}
  .std-card-btn svg{width:13px; height:13px; flex-shrink:0; transition:transform .35s cubic-bezier(.16,1,.3,1);}
  .std-card-btn.is-active{border-color:var(--orange); background:rgba(232,119,34,.2);}
  .std-card-btn.is-active svg{transform:rotate(180deg);}
  @media (max-width:900px){
    .std-cards-grid{grid-template-columns:1fr 1fr; gap:16px;}
    .std-card{min-height:340px;}
  }
  @media (max-width:600px){
    .std-cards-grid{grid-template-columns:1fr;}
  }

  /* ===== EXPANDABLE SERVICE PANEL — opens below the cards grid, one shared
     panel whose content swaps per service; animated via the CSS grid-rows
     0fr → 1fr trick so it doesn't need JS height measuring ===== */
  .std-expand{
    display:grid; grid-template-rows:0fr; margin:0; grid-column:1/-1;
    transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1), margin .55s cubic-bezier(.16,1,.3,1);
    /* scopes the reflow this animation forces to just this subtree instead
       of the whole page recalculating layout on every frame it runs */
    contain:layout;
  }
  .std-expand.is-open{grid-template-rows:1fr; margin:36px 0;}
  .std-expand-inner{overflow:hidden; min-height:0;}
  .std-expand-panel-wrap{
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    padding:44px; display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:44px; align-items:start;
  }
  .std-expand-panel{display:none;}
  /* the active panel itself becomes the "what is it" + "benefits" pair of
     columns — the form is a separate, always-present third column outside it */
  .std-expand-panel.is-active{display:contents;}
  .std-expand-eyebrow{
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
    display:block; margin-bottom:10px;
  }
  .std-expand-what h3, .std-expand-info h3{font-size:clamp(20px,2.2vw,26px); color:var(--ink); margin-bottom:18px;}
  .std-expand-pitch{font-family:var(--ff-body); font-size:15px; color:var(--ink); line-height:1.6; font-weight:500;}
  .std-expand-benefits{display:flex; flex-direction:column; gap:18px;}
  .std-expand-benefit{display:flex; align-items:flex-start; gap:14px;}
  .std-expand-benefit-icon{
    width:36px; height:36px; border-radius:50%; background:var(--white); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--orange); flex-shrink:0;
  }
  .std-expand-benefit-icon svg{width:17px; height:17px;}
  .std-expand-benefit span:not(.std-expand-benefit-icon){
    font-family:var(--ff-body); font-size:14px; color:var(--ink); line-height:1.5; padding-top:7px; display:block;
  }
  .std-expand-form{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;}
  .std-expand-form-label{
    display:block; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver-3);
    margin-bottom:18px;
  }
  .std-expand-form-label b{
    display:block; margin-top:5px; font-family:var(--ff-body); font-size:15px; font-weight:700; color:var(--ink);
    text-transform:none; letter-spacing:0;
  }
  .std-expand-field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
  .std-expand-field label{font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--silver-3);}
  .std-expand-field input, .std-expand-field textarea{
    font-family:var(--ff-body); font-size:13.5px; color:var(--ink); background:var(--paper); border:1px solid var(--line);
    border-radius:3px; padding:10px 12px; outline:none; transition:border-color .2s ease, background .2s ease;
  }
  .std-expand-field textarea{resize:vertical; min-height:64px;}
  .std-expand-field input:focus, .std-expand-field textarea:focus{border-color:var(--orange); background:#fff;}
  .std-expand-submit{width:100%; justify-content:center; margin-top:6px;}
  .std-expand-status{margin:12px 0 0; font-family:var(--ff-mono); font-size:11.5px; text-align:center; color:var(--silver-3); min-height:1em;}
  .std-expand-status.is-success{color:var(--orange);}
  @media (prefers-reduced-motion: reduce){ .std-expand{transition:none;} }
  @media (max-width:900px){
    .std-expand-panel-wrap{grid-template-columns:1fr; gap:32px; padding:32px;}
  }
  @media (max-width:600px){
    .std-expand-panel-wrap{padding:24px;}
  }

  /* ===== FOOTER ===== */
  .std-foot{background:var(--paper); border-top:1px solid var(--line); padding:32px 0;}
  .std-foot .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .std-foot-left{display:flex; align-items:center; gap:14px; font-family:var(--ff-mono); font-size:11.5px; color:var(--silver-3);}
  .std-foot-mark{font-family:var(--ff-display); font-size:15px; text-transform:uppercase; color:var(--ink); letter-spacing:.01em;}
  .std-foot-links{display:flex; gap:20px; font-family:var(--ff-mono); font-size:11.5px; color:var(--silver-3);}
  .std-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;}
  }