/*
Theme Name: Trade Up
Theme URI: https://trade-up.com.ar
Author: Marisol Garaycoechea
Author URI: https://marigarayco.com.ar
Description: Tema a medida para Trade Up. Sin plugins: todos los textos e imágenes se editan desde el panel (metaboxes propios y "Ajustes del sitio").
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: tradeup
Update URI: false
*/
  /* ============ TOKENS (solo escala de grises) ============ */
  :root{
    /* Escala neutra mapeada a los neutros de marca (tokens.css) */
    --g-0:var(--color-white); --g-1:var(--color-neutral-50); --g-2:var(--color-neutral-100); --g-3:var(--color-neutral-200); --g-4:var(--color-neutral-300);
    --g-5:var(--color-neutral-400); --g-6:var(--color-neutral-600); --g-7:var(--color-neutral-800); --g-8:var(--color-neutral-900);
    --accent:var(--color-primary); --accent-hover:var(--color-primary-hover);
    --gutter:clamp(20px,4vw,72px);
    --radius:14px;
    /* Forma del logo: rectángulo con solo la esquina inferior derecha redondeada */
    --shape-s:0 0 12px 0; --shape-m:0 0 24px 0; --shape-l:0 0 clamp(36px,6vw,72px) 0;
    --gap:clamp(16px,2.5vw,28px);
    --section:clamp(56px,8vw,104px);
    --header-h:68px;
    --mono:'Ubuntu Mono',ui-monospace,Consolas,monospace;
    --font:'Ubuntu',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px);}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important; animation:none!important;} }
  body{margin:0; font-family:var(--font); color:var(--g-8); background:var(--g-0); line-height:1.6; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{line-height:1.15; letter-spacing:-.02em; margin:0;}
  p{margin:0;}
  a{color:inherit;}
  ul{margin:0; padding:0; list-style:none;}
  img,svg{display:block; max-width:100%;}
  :focus-visible{outline:2px solid var(--g-8); outline-offset:3px; border-radius:3px;}

  .wrap{width:min(1760px,100% - 2 * var(--gutter)); margin-inline:auto;}
  .wrap.bleed{width:100%;}
  .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .skip{position:absolute; left:12px; top:-60px; background:var(--g-8); color:var(--g-0); padding:10px 16px; border-radius:var(--radius); z-index:200; text-decoration:none;}
  .skip:focus{top:12px;}

  /* ============ ATOMS ============ */
  .h1{font-size:clamp(36px,5.6vw,64px); font-weight:700;}
  .h2{font-size:clamp(26px,3.4vw,40px); font-weight:700;}
  .h3{font-size:18px; font-weight:650;}
  .lede{font-size:clamp(16px,1.6vw,19px); color:var(--g-6); max-width:56ch;}
  .muted{color:var(--g-6);}
  .small{font-size:13px;}


  /* Placeholder de imagen: caja gris con cruz */
  .ph{position:relative; display:grid; place-items:center; background:var(--g-2); border:1px solid var(--g-3); border-radius:var(--radius); overflow:hidden; color:var(--g-6); font-size:12px; text-align:center;}
  .ph > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .ph.has-img{border:0; background:var(--g-2);}
  .ph > span{position:relative; background:var(--g-2); padding:3px 10px; border-radius:999px; border:1px solid var(--g-3);}
  .r-43{aspect-ratio:4/3;} .r-169{aspect-ratio:16/9;} .r-1610{aspect-ratio:16/10;} .r-11{aspect-ratio:1;}
  .ph-icon{width:40px; height:40px; border-radius:var(--radius); border-width:1.5px; background-image:none; display:block;}
  .ph-play{position:absolute; width:60px; height:60px; border-radius:50%; background:var(--g-8); display:grid; place-items:center;}
  .ph-play::after{content:""; border-left:16px solid var(--g-0); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px;}

  section.sec{padding-block:var(--section);}
  section.sec.alt{background:var(--g-1); border-block:1px solid var(--g-3);}
  .sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px);}
  .sec-head > div{max-width:620px;}
  .sec-head .h2{margin-bottom:12px;}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;}
  @media (max-width:820px){ .split{grid-template-columns:1fr;} }
  /* Nosotros: en 2 columnas el video estira hasta el alto de la columna de texto (el aspect-ratio queda como mínimo) */
  @media (min-width:821px){ #nosotros .split{align-items:stretch;} #nosotros .split > .video-frame{align-self:stretch; height:auto; width:100%; min-width:0; max-width:100%;} #nosotros .split > .video-frame video,#nosotros .split > .video-frame iframe{object-fit:cover; object-position:center;} }

  /* ============ HEADER / NAV ============ */
  .site-header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--g-0) 86%, transparent); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--g-3);}
  .bar{display:flex; align-items:center; gap:24px; height:var(--header-h);}
  .logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:18px; letter-spacing:-.02em; margin-right:auto;}
  /* Logo real; filtro gris para mantener el wireframe en escala de grises (quitar para ver el color de marca) */
  .logo-img{height:34px; width:auto; }
  .nav-main{display:flex; align-items:center; gap:4px;}
  .nav-main a, .nav-main > li > button{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border:0; background:none; border-radius:var(--radius); font:500 14px/1 var(--font); color:var(--g-7); text-decoration:none; cursor:pointer;}
  .nav-main a:hover, .nav-main > li > button:hover{background:var(--g-2); color:var(--g-8); border-radius:0;}
  .nav-main [aria-current="page"], .nav-main [aria-current="true"]{color:var(--g-8); font-weight:650; box-shadow:inset 0 -3px 0 var(--accent); border-radius:0;}
  .nav-main li{position:relative;}
  .header-cta{display:flex; align-items:center; gap:10px;}
  .lang-switch{display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 10px; border:1.5px solid var(--g-8); border-radius:var(--radius); font-size:13px; font-weight:700; letter-spacing:.08em; text-decoration:none; color:var(--g-8);}
  .lang-switch:hover{text-decoration:underline; text-underline-offset:4px;}
  .lang{display:flex; border:1.5px solid var(--g-4); border-radius:0; overflow:hidden;}
  .lang button{min-width:40px; min-height:36px; border:0; background:transparent; font:600 12px/1 var(--font); letter-spacing:.06em; color:var(--g-6); cursor:pointer;}
  .lang button + button{border-left:1.5px solid var(--g-4);}
  .lang button:hover{color:var(--g-8);}
  .lang button[aria-pressed="true"]{background:var(--g-8); color:var(--g-0);}
  .menu-btn{display:none; width:44px; height:44px; border:1.5px solid var(--g-8); border-radius:var(--radius); background:none; cursor:pointer; place-items:center;}
  .menu-btn svg{width:20px; height:20px;}
  @media (max-width:900px){
    .nav-main, .header-cta .btn{display:none;}
    .menu-btn{display:grid;}
  }

  /* Menú móvil (dialog modal: foco atrapado + Esc nativo) */
  dialog.drawer{margin:0 0 0 auto; width:min(380px,100%); height:100dvh; max-height:none; border:0; border-left:1px solid var(--g-4); padding:0; background:var(--g-0); color:var(--g-8);}
  dialog.drawer::backdrop{background:rgba(20,20,20,.5);}
  .drawer-head{display:flex; align-items:center; justify-content:space-between; height:var(--header-h); padding-inline:20px; border-bottom:1px solid var(--g-3);}
  .drawer nav{padding:12px 20px 24px; display:flex; flex-direction:column; height:calc(100dvh - var(--header-h)); overflow:auto;}
  .drawer nav a{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--g-3); font-size:18px; font-weight:600; text-decoration:none;}
  .drawer nav a.sub{font-size:15px; font-weight:400; color:var(--g-6); padding:11px 0 11px 16px;}
  .drawer nav a[aria-current]{text-decoration:underline; text-underline-offset:6px;}
  .drawer .btn{margin-top:24px;}

  /* Breadcrumb */
  .crumbs{border-bottom:1px solid var(--g-3); background:var(--g-1);}
  .crumbs ol{display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; margin:0; padding:12px 0; font-size:13px; color:var(--g-6);}
  .crumbs li{white-space:nowrap;} .crumbs li:last-child{white-space:normal;}
  .crumbs li+li::before{content:"/"; margin-right:8px; color:var(--g-4);}
  .crumbs a{text-decoration:none;} .crumbs a:hover{text-decoration:underline;}
  .crumbs [aria-current]{color:var(--g-8); font-weight:600;}

  /* ============ PAGES ============ */
  /* Imágenes protagonistas con la forma del logo */
  .ph.shape{border-radius:var(--shape-l);}


  /* Hero */
  /* Hero: imagen arriba, caja blanca (mensaje) + caja oscura con forma del logo (dato + CTA) */
  .hero{position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:clamp(560px,86svh,900px); padding-block:clamp(40px,6vw,88px); margin-bottom:clamp(32px,5vw,56px); color:var(--g-0); overflow:hidden;}
  .hero-stage{position:relative; isolation:isolate; display:grid;}
  .hero-stage > .hero-bg,.hero-stage > .hero{grid-area:1 / 1;}
  .hero-stage > .stats-sec{grid-row:2;}
  .hero-bg{position:relative; z-index:-1; background:var(--g-8); margin-bottom:-2px;}
  .hero-bg-sticky{position:absolute; inset:0; overflow:hidden;}
  .hero-bg-sticky .hero-img{position:absolute; inset:0; width:100%; height:100%; border-radius:0; border:0; background-color:var(--g-8);}
  .hero-bg-sticky .hero-img > span{display:none;}
  .hero-bg-sticky .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1);}
  @media (prefers-reduced-motion:reduce){ .hero-bg-sticky .hero-video{display:none;} }
  .hero-bg-sticky::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgb(49 49 48 / .86) 0%, rgb(49 49 48 / .55) 55%, rgb(49 49 48 / .2) 100%), linear-gradient(0deg, rgb(49 49 48 / .75), transparent 95%);}
  .hero-inner{display:grid; width:min(1760px,100% - 2 * var(--gutter));}
  .hero-row{display:grid; grid-template-columns:1.55fr 1fr; align-items:end; gap:clamp(20px,3vw,48px);}
  .hero-msg{padding:0; display:flex; flex-direction:column; justify-content:center; gap:24px;}
  .hero-msg h1{font-size:clamp(40px,6.4vw,92px); line-height:1; text-transform:none; max-width:16ch; text-wrap:balance;}
  .hero-msg .lede{max-width:52ch; color:var(--color-text-inverse-muted);}
  .hero-card{background:var(--accent); color:var(--color-on-primary); border-radius:0 0 clamp(36px,6vw,72px) 0; padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:0; position:relative; text-decoration:none; transition:background .2s;}
  .hero-card:hover{background:var(--accent-hover);}
  .hero-card-cta{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:clamp(28px,3.4vw,44px); font-weight:700; letter-spacing:-.02em; line-height:1;}
  .hero-card-cta svg{flex-shrink:0; transition:transform .25s;}
  .hero-card:hover .hero-card-cta svg{transform:translateX(6px);}
  @media (max-width:820px){ .hero-row{grid-template-columns:1fr;} }

  /* Stats */
  /* Stats: bloques en grises que se superponen, cada uno con la esquina del logo */
  .stats{--r:clamp(40px,6vw,80px); display:grid; grid-auto-flow:column; grid-auto-columns:1fr; grid-template-rows:1fr auto; isolation:isolate;} /* fila 1: número, fila 2: texto con línea (subgrid: las líneas quedan a la misma altura) */
  .stats-sec .stat{clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.65,0,.2,1);}
  .stats-sec .stat:nth-child(2){transition-delay:.18s;}
  .stats-sec .stat:nth-child(3){transition-delay:.36s;}
  .stats-sec.in .stat{clip-path:inset(0);}
  @media (prefers-reduced-motion:reduce){ .stats-sec .stat{clip-path:none; transition:none;} }
  .stat{grid-row:span 2; position:relative; border-radius:0 0 var(--r) 0; padding:clamp(56px,6.2vw,80px) calc(var(--r) + 16px) clamp(24px,3vw,40px) clamp(24px,3vw,40px); margin-right:calc(var(--r) * -1); display:grid; grid-template-rows:subgrid; justify-items:start; align-items:start; row-gap:clamp(14px,1.8vw,24px); min-height:clamp(240px,24vw,320px);}
  .stat:last-child{margin-right:0;}
  .stat:last-child{padding-right:clamp(24px,3vw,40px);}
  .stat:not(:first-child){padding-left:calc(var(--r) + clamp(20px,2.4vw,32px));}
  .stat:nth-child(1){background:var(--g-3); color:var(--g-8); z-index:3;}
  .stat:nth-child(2){background:var(--g-6); color:var(--g-0); z-index:2;}
  .stat:nth-child(3){background:var(--g-8); color:var(--g-0); z-index:1;}
  .stat b{align-self:end; font-family:var(--mono); font-size:clamp(52px,6.2vw,80px); font-weight:400; letter-spacing:-.04em; line-height:.8;}
  .stat b sup{font-size:.28em; letter-spacing:0; vertical-align:top; position:relative; top:.1em; margin-left:4px; font-weight:500;}
  .stat > span{font-size:clamp(14px,1.25vw,16px); line-height:1.45; max-width:30ch; padding-top:16px; border-top:1px solid currentColor; opacity:.9; width:100%;}
  @media (max-width:820px){
    /* Se mantienen las 3 columnas en fila, a menor escala */
    .stats{--r:clamp(20px,5vw,40px);}
    .stat{min-height:0; row-gap:12px; padding:36px calc(var(--r) + 10px) 20px 16px;}
    .stat:last-child{padding-right:16px; border-radius:0;}
    .stat:not(:first-child){padding-left:calc(var(--r) + 10px);}
    .stat b{font-size:clamp(30px,8vw,56px);}
    .stat > span{font-size:clamp(11px,1.9vw,14px); max-width:none; padding-top:10px;}
  }

  /* Logos */
  .logos{display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
  .logos div{height:64px; border:1px solid var(--g-3); border-radius:var(--radius); display:grid; place-items:center; font-size:11px; letter-spacing:.1em; color:var(--g-6); background:var(--g-0);}
  @media (max-width:820px){ .logos{grid-template-columns:repeat(3,1fr);} }

  /* Servicios */
  .filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;}
  .chip{min-height:40px; padding:0 18px; border:1.5px solid var(--g-4); background:var(--g-0); border-radius:999px; font:600 13.5px/1 var(--font); cursor:pointer; color:var(--g-7);}
  .chip:hover{border-color:var(--g-8);}
  .chip[aria-pressed="true"]{background:var(--g-8); border-color:var(--g-8); color:var(--g-0);}

  /* Servicios: col 1 fija (título) + filas que se apilan al scrollear (sticky) */
  .svc-section{padding-block:var(--section) 0; overflow-x:clip;}
  .svc-layout{display:grid; grid-template-columns:minmax(clamp(220px,26vw,300px),1fr) minmax(0,3fr); column-gap:0; align-items:start;}
  .svc-head{align-self:stretch; background:var(--g-7); color:var(--g-0); padding:0 calc((100vw - min(1760px, 100vw - 2 * var(--gutter))) / 2) 0 0; position:relative;}
  .svc-head::before{content:""; position:absolute; top:0; bottom:0; right:100%; width:100vw; background:var(--g-7);}
  .svc-head-in{position:sticky; top:var(--header-h); height:var(--rh); box-sizing:border-box; padding-top:clamp(12px,1.4vw,18px);}
  .svc-head h2{font-size:clamp(26px,3.4vw,40px); line-height:1.15; letter-spacing:-.02em; font-weight:700;}
  .svc-head .lede{margin:16px 0 0; font-size:15px; color:var(--g-3);}
  .svc-layout{--step:64px; --pl:20px; --rh:clamp(380px,62vh,520px);}
  @media (min-width:821px) and (max-width:1200px){ .svc-layout{--rh:clamp(480px,76vh,640px);} } /* columnas más angostas: el texto necesita más alto */
  .svc-panel::after{content:""; display:block; height:calc(var(--rh) - var(--step));}
  .svc-panel:last-child::after{display:none;}
  .svc-panel:last-child .svc-inner{border-bottom:1px solid var(--g-4);} /* línea inferior de la última card, que sigue por la extensión hasta el borde derecho */
  .svc-panel:last-child .svc-inner::after{bottom:-1px; border-bottom:1px solid var(--g-4); box-sizing:border-box;}
  .svc-panel:last-child .svc-inner{margin-bottom:0;}
  .svc-inner{position:sticky; top:var(--header-h); background:var(--g-0); height:var(--rh); margin-bottom:calc(var(--step) - var(--rh)); border-left:1px solid var(--g-4); padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,30%); column-gap:clamp(16px,3vw,48px);}
  .svc-inner::before{content:""; position:absolute; top:0; left:-1px; width:100vw; height:1px; background:var(--g-4); pointer-events:none;}
  .svc-inner{isolation:isolate;}
  .svc-inner::after{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:100%; width:100vw; background:var(--g-0); pointer-events:none;} /* el fondo blanco sangra hasta el borde derecho */
  .svc-text{padding-bottom:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:16px; align-items:flex-start;}
  .svc-top{display:flex; align-items:center; gap:16px; height:var(--step); align-self:stretch; width:100%;}
  .svc-panel .n{flex:none; width:var(--step); height:100%; margin-left:-1px; position:relative; z-index:1; align-self:flex-start; display:flex; align-items:center; padding-left:var(--pl); box-sizing:border-box; background:var(--g-8); color:var(--g-0); font-family:var(--mono); font-size:15px; border-radius:0 0 14px 0;}
  .svc-panel h3{font-size:clamp(20px,2.2vw,28px); font-weight:650; letter-spacing:-.02em; line-height:1.15; min-height:0;}
  .svc-panel .desc{padding-left:var(--pl);}
  .svc-panel .desc p{color:var(--g-6); font-size:clamp(15px,1.4vw,17px);}
  .svc-panel .desc p + p{margin-top:1em;}
  .svc-panel .phase{margin-top:auto; padding-left:var(--pl); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--g-6);}
  .svc-panel .ph{align-self:stretch; margin:0 calc((min(1760px, 100vw - 2 * var(--gutter)) - 100vw) / 2) 0 0; min-height:240px; border-radius:0; background-color:var(--g-0);}
  .svc-panel[data-svc="maquinaria-pesada"] .ph img,
  .svc-panel[data-svc="retiro-y-traslado-de-carga"] .ph img{object-position:right center;}
  .svc-panel .ph > span{background:var(--g-0);}
  @media (max-width:820px){
    .svc-layout{grid-template-columns:1fr;}
    .svc-head-in{position:static; height:auto; margin-bottom:24px; padding-block:24px 0;}
    .svc-stack{--step:52px;}
    .svc-layout{--rh:500px;}
    .svc-inner{grid-template-columns:1fr; row-gap:16px;}
    .svc-panel .ph{min-height:0; height:180px; margin:0;}
    /* El wrap llega a los bordes de la pantalla y las cards no llevan borde izquierdo; el título y el texto conservan el margen lateral */
    .svc-layout{width:100%;}
    .svc-head-in{padding-left:var(--gutter);}
    .svc-inner{border-left:0;}
    .svc-panel.svc-anim .ph img{transform:none; will-change:auto;} /* sin zoom ligado al scroll */
    /* Apilado sin empuje: el sticky pasa al panel (su contenedor es toda la pila), así la card fija no se mueve cuando llega la siguiente; antes, con margen negativo, el panel anterior la empujaba hacia arriba al terminar su tramo */
    .svc-panel{position:sticky; top:var(--header-h); height:var(--rh);}
    .svc-panel::after{display:none;}
    .svc-inner{position:relative; top:auto; height:100%; margin-bottom:0;}
    .svc-text{padding-right:var(--gutter);}
  }
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);}
  .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap);}
  @media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .grid-3,.grid-2{grid-template-columns:1fr;} }
  .card{background:var(--g-0); border:1px solid var(--g-3); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s;}
  a.card{text-decoration:none;} .card:hover{border-color:var(--g-8);}
  .card[hidden]{display:none;}
  .card .tag{align-self:flex-start; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--g-6); border:1px solid var(--g-3); border-radius:999px; padding:3px 10px;}
  .card p{font-size:14px; color:var(--g-6);}

  /* Certificación */
  .band{display:grid; grid-template-columns:2fr 1fr; align-items:stretch; border:1px solid var(--g-3); border-radius:var(--radius); overflow:hidden; background:var(--g-0);}
  .band .ph{border:0; border-radius:0; min-height:clamp(220px,22vw,280px); height:100%; aspect-ratio:auto;}
  .band-body{padding:clamp(20px,2.6vw,36px); display:flex; flex-direction:column; justify-content:center; gap:14px;}
  @media (max-width:820px){ .band{grid-template-columns:1fr;} .band .ph{min-height:240px;} }

  /* ZFLP teaser */
  .teaser{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--g-3); border-radius:var(--shape-l); overflow:hidden; background:var(--g-0);}
  .teaser .ph{border:0; border-radius:0; min-height:280px; height:100%; order:2;}
  .teaser-body{padding:clamp(24px,4vw,48px); display:flex; flex-direction:column; justify-content:center; gap:18px; align-items:flex-start;}
  @media (max-width:820px){ .teaser{grid-template-columns:1fr;} .teaser .ph{order:0;} }

  /* FAQ */
  .faq-title{position:sticky; top:calc(var(--header-h) + 32px);}
  @media (max-width:820px){ .faq-title{position:static;} }
  .faq details:first-child{border-top:1px solid var(--g-3);}
  .faq details{border-bottom:1px solid var(--g-3);}
  .faq summary{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:600; font-size:16px; cursor:pointer; list-style:none;}
  .faq summary::-webkit-details-marker{display:none;}
  /* Ícono +/– de 1.5rem dibujado con CSS (el glifo de texto no llenaba la caja) */
  .faq summary::after{content:""; flex:none; width:1.5rem; height:1.5rem; background:
    linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 100% no-repeat; transition:background-size .2s;}
  .faq details[open] summary::after{background-size:100% 2px,2px 0;}
  .faq details > div{padding:0 0 20px; max-width:62ch;}

  /* Form */
  form.contact{display:grid; gap:14px;}
  label{display:grid; gap:6px; font-size:13px; font-weight:600;}
  input,select,textarea{font:400 15px/1.4 var(--font); padding:12px 14px; border:1.5px solid var(--g-5); border-radius:var(--radius); background:var(--g-0); color:var(--g-8); width:100%;}
  input:hover,select:hover,textarea:hover{border-color:var(--g-6);}
  textarea{min-height:120px; resize:vertical;}
  .contact-list{display:grid; gap:14px; margin-block:28px;}
  .contact-list div{display:flex; gap:14px; align-items:flex-start;}
  .contact-list .ph-icon{flex-shrink:0; width:32px; height:32px;}
  .contact-list dt{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--g-6);}

  /* CTA final */
  .cta-band{background:var(--g-7); color:var(--g-0); border-radius:var(--shape-l); padding:clamp(32px,6vw,72px); display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;}
  .cta-band p{color:var(--g-4);}

  /* Page header (internas) */
  .page-head{padding-block:clamp(40px,6vw,80px) clamp(32px,4vw,56px); border-bottom:1px solid var(--g-3);}
  .page-head .h1{font-size:clamp(34px,4.6vw,54px); margin-bottom:16px;}

  /* In-page index (internas) */
  .layout-aside{display:grid; grid-template-columns:220px 1fr; gap:clamp(32px,5vw,72px); align-items:start;}
  .aside{position:sticky; top:calc(var(--header-h) + 24px);}
  .aside p{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--g-6); margin-bottom:10px; font-weight:600;}
  .aside a{display:block; padding:8px 0 8px 14px; border-left:2px solid var(--g-3); text-decoration:none; font-size:14px; color:var(--g-6);}
  .aside a:hover{color:var(--g-8);}
  .aside a[aria-current="true"]{border-color:var(--g-8); color:var(--g-8); font-weight:600;}
  @media (max-width:900px){ .layout-aside{grid-template-columns:1fr;} .aside{display:none;} }
  .block + .block{margin-top:clamp(48px,7vw,88px);}

  /* Timeline vertical (narrada al scroll) */
  .vtl{position:relative; max-width:720px; padding-left:44px;}
  .vtl::before,.vtl-fill{content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:var(--g-3);}
  .vtl-fill{background:var(--g-8); bottom:auto; height:0; transition:height .15s linear;}
  .tl{position:relative; padding-bottom:clamp(56px,10vh,110px); opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
  .tl:last-child{padding-bottom:0;}
  .tl.in{opacity:1; transform:none;}
  .tl::before{content:""; position:absolute; left:-44px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--g-0); border:2px solid var(--g-4); transition:background .4s, border-color .4s;}
  .tl.in::before{background:var(--g-8); border-color:var(--g-8);}
  .tl b{font-size:clamp(28px,4vw,40px); letter-spacing:-.03em; display:block; margin-bottom:10px; line-height:1.1;}
  .tl p{margin:0 0 10px; max-width:58ch;}
  .tl-kicker{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--g-6); font-weight:600; margin:0 0 14px!important;}
  @media (prefers-reduced-motion:reduce){ .tl{opacity:1; transform:none;} }

  /* Documentación */
  .checks{display:grid; gap:0; margin-top:18px;}
  .checks li{display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--g-3); font-size:15px;}
  .checks li::before{content:""; width:20px; height:20px; border:1.5px solid var(--g-8); border-radius:4px; flex-shrink:0;}
  @media (min-width:700px){ .checks.cols{grid-template-columns:repeat(2,1fr); column-gap:clamp(32px,5vw,72px);} .checks.cols li:nth-child(2){border-top:1px solid var(--g-3);} }
  .steps{display:grid; gap:0;}
  .step{display:grid; grid-template-columns:clamp(88px,10vw,128px) 1fr; column-gap:clamp(16px,3vw,40px); padding-bottom:clamp(48px,7vw,88px);}
  .step:last-child{padding-bottom:0;}
  .step-n{position:sticky; top:calc(var(--header-h) + 24px); align-self:start; font-family:var(--mono); font-size:clamp(52px,6.2vw,80px); font-weight:400; letter-spacing:-.04em; line-height:.8;}
  .step-body{min-width:0;}
  .checks.tick li::before{background:var(--g-8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;}
  .checks.num{counter-reset:n;}
  .checks.num li{counter-increment:n;}
  .checks.num li{align-items:flex-start;}
  .checks.num li::before{content:counter(n); width:24px; height:auto; border:0; border-radius:0; font-weight:600; font-size:15px; line-height:inherit; color:var(--g-8);}
  .file{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--g-3); border-radius:var(--radius); text-decoration:none; font-size:14px; background:var(--g-0);}
  .file:hover{border-color:var(--g-8);}
  .file .ph-icon{width:32px; height:40px;} .file small{display:block; color:var(--g-6);}
  .file em{margin-left:auto; display:flex; flex:0 0 20px; width:20px; height:20px; font-style:normal; color:var(--g-6);}
  .file em svg{width:20px; height:20px; flex:0 0 20px;}
  .file:hover em{color:var(--g-8);}
  .doc-tabs{display:flex; gap:8px; margin:20px 0 16px;}

  /* En acción: tarjetas y vista detalle */
  .pager{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:clamp(40px,6vw,72px);}
  .pager .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 12px; border:1.5px solid var(--g-5); background:transparent; font:600 14px/1 var(--font); color:var(--g-8); text-decoration:none; transition:background .2s;}
  .pager a.page-numbers:hover{background:var(--g-2);}
  .pager .page-numbers.current{background:var(--g-8); border-color:var(--g-8); color:var(--g-0);}
  .pager .page-numbers.dots{border:0;}
  .post-card{display:flex; flex-direction:column; gap:12px; text-decoration:none;}
  .post-card .media{position:relative;}
  .post-card .ph,.post-detail .ph{border-radius:0;}
  .post-card:hover h3{text-decoration:underline; text-underline-offset:4px;}
  .post-card .meta,.post-meta{font-size:13px; color:var(--g-6);}
  .post-card p.ex{color:var(--g-6); font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
  .post-card .more{position:relative; margin-top:auto; align-self:flex-start; width:52px; height:52px; overflow:hidden; white-space:nowrap; background:var(--g-8); color:var(--g-0); border-radius:0 0 20px 0; font-size:14px; font-weight:700; transition:width .35s cubic-bezier(.16,1,.3,1), background .2s;}
  .post-card .more::before{content:""; position:absolute; top:0; right:0; width:52px; height:100%; background:var(--color-red-600); opacity:0; transition:opacity .2s;}
  .post-card .more svg{z-index:1; position:absolute; top:50%; left:15px; width:22px; height:22px; margin-top:-11px; transition:left .35s cubic-bezier(.16,1,.3,1);}
  .post-card .more span{position:absolute; left:20px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .2s;}
  .post-card:hover .more,.post-card:focus-visible .more{width:100%;}
  .post-card:hover .more::before,.post-card:focus-visible .more::before{opacity:1; transition-delay:.12s;}
  .post-card:hover .more svg,.post-card:focus-visible .more svg{left:calc(100% - 37px);}
  .post-card:hover .more span,.post-card:focus-visible .more span{opacity:1; transition-delay:.12s;}
  /* Tablet y mobile: no hay hover, el botón se muestra siempre completo */
  @media (max-width:820px){
    .post-card .more{width:100%;}
    .post-card .more::before{opacity:1;}
    .post-card .more svg{left:calc(100% - 37px);}
    .post-card .more span{opacity:1;}
    .grid-3:has(> .post-card){row-gap:clamp(40px,8vw,64px);}
    /* En acción (home): carrusel con swipe. Tablet: 2 cards por vista; mobile: 1 (con un asomo de la siguiente) */
    #en-accion-home .grid-3{display:flex; gap:var(--gap); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);}
    #en-accion-home .grid-3::-webkit-scrollbar{display:none;}
    #en-accion-home .grid-3 > .post-card{flex:0 0 calc((100% - var(--gap)) / 2); scroll-snap-align:start;}
  }
  @media (max-width:600px){ #en-accion-home .grid-3 > .post-card{flex-basis:88%;} }
  .play-sm{position:absolute; width:52px; height:52px; border-radius:50%; background:var(--g-8); display:grid; place-items:center;}
  .play-sm::after{content:""; border-left:14px solid var(--g-0); border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px;}
  .act-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,40px);}
  .post-detail{padding-block:clamp(32px,5vw,64px) 0;}
  .post-detail h1{font-size:clamp(30px,4.2vw,52px); max-width:24ch; margin:10px 0 clamp(24px,4vw,40px);}
  .post-cols{display:grid; grid-template-columns:clamp(220px,24vw,300px) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:start; margin-top:clamp(24px,4vw,40px);}
  .post-cols.video{grid-template-columns:clamp(240px,28vw,340px) minmax(0,1fr); margin-top:0;}
  .post-facts{display:grid; gap:16px; margin:0; font-size:14px;}
  .post-facts dt{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--g-6);}
  .post-facts dd{margin:2px 0 0;}
  .post-text{max-width:62ch; font-size:clamp(16px,1.3vw,18px);}
  .post-text p + p{margin-top:1em;}
  .post-nav{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); border-top:1px solid var(--g-3); margin-top:clamp(48px,7vw,88px); padding-top:24px;}
  .post-nav a{text-decoration:none; display:grid; gap:4px;}
  .post-nav a:hover strong{text-decoration:underline; text-underline-offset:4px;}
  .post-nav .next{text-align:right;}
  .post-nav small{color:var(--g-6); font-size:13px;}
  @media (max-width:820px){
    .post-cols,.post-cols.video{grid-template-columns:1fr;}
    .post-cols:not(.video) > :first-child{order:2;}
    .post-nav{grid-template-columns:1fr;} .post-nav .next{text-align:left;}
  }
  .r-916{aspect-ratio:9/16;}

  /* ============ FOOTER ============ */
  footer{background:var(--g-1); border-top:1px solid var(--g-3); padding-block:56px 28px;}
  main > .page-end{padding-bottom:var(--section);}
  .foot-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px);}
  .foot-brand{order:-1;}
  .foot-links{display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:32px clamp(28px,5vw,72px); align-content:start;}
  .foot-grid h4{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--g-6); margin-bottom:14px; font-weight:600;}
  .foot-grid li + li{margin-top:8px;}
  .foot-grid a{text-decoration:none; font-size:14px;} .foot-grid a:hover{text-decoration:underline;}
  .foot-base{display:flex; flex-direction:column; gap:6px; margin-top:14px; font-size:13px; color:var(--g-6);}
  @media (max-width:820px){ .foot-grid{grid-template-columns:1fr;} .foot-brand{order:1;} .foot-links{justify-content:space-between;} } /* en 1 columna: arriba los links (repartidos), abajo la marca */
  /* Mobile: 2 columnas; una con todo el sitemap (los dos menús seguidos) y otra con contacto y LinkedIn */
  @media (max-width:520px){
    .foot-links{grid-template-columns:repeat(2,auto); row-gap:0;}
    .foot-links > .foot-nav{grid-column:1;}
    .foot-links > .foot-nav + .foot-nav{margin-top:8px;}
    .foot-links > .foot-contact{grid-column:2; grid-row:1 / span 2;}
  }

  .wa{position:fixed; right:16px; bottom:16px; z-index:90; width:56px; height:56px; display:grid; place-items:center; background:var(--g-8); color:var(--g-0); border-radius:var(--shape-s); border-bottom-right-radius:22px; text-decoration:none; transition:background .2s, transform .2s;}
  .wa:hover{background:var(--g-7); transform:translateY(-2px);}
  .wa svg{width:28px; height:28px;}
  .to-top{position:fixed; right:16px; bottom:84px; width:56px; height:56px; border-radius:0; border:1.5px solid var(--g-8); background:var(--g-0); cursor:pointer; display:none; place-items:center; z-index:90;}
  .to-top.show{display:grid;}

  /* ============ WORDPRESS / AÑADIDOS ============ */
  .wp-caption,.alignnone{max-width:100%;}
  .skip:focus{outline:2px solid var(--g-0); outline-offset:2px;}
  .hero-card:focus-visible,.cta-band a:focus-visible,.stat a:focus-visible{outline-color:var(--g-0); outline-offset:3px; box-shadow:0 0 0 5px var(--g-8);}
  .hero-img{position:relative;}
  .logo-img{height:34px; width:auto;}
  .logos div{overflow:hidden; padding:10px;}
  .logos div img,.logos a img{max-height:100%; width:auto; max-width:100%; object-fit:contain;}
  .logos a{height:64px; border:1px solid var(--g-3); border-radius:var(--radius); display:grid; place-items:center; padding:10px; background:var(--g-0);}
  .logos a:hover{border-color:var(--g-8);}
  .btn-row{display:flex; gap:12px; flex-wrap:wrap;}
  .nav-main li{list-style:none;}
  .video-frame{position:relative; background:var(--g-8); overflow:hidden;}
  .video-frame video,.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;}
  .shape .video-frame{border-radius:inherit;}
  .video-frame.shape{border-radius:var(--shape-l);}
  /* Máscara que crece desde la esquina superior izquierda según el scroll (--rv: 0..1) */
  .reveal-mask.is-masked{clip-path:inset(0 calc((1 - var(--rv,0)) * 100%) calc((1 - var(--rv,0)) * 100%) 0 round var(--shape-l));}
  .reveal-mask-tr.is-masked{clip-path:inset(0 0 calc((1 - var(--rv,0)) * 100%) calc((1 - var(--rv,0)) * 100%));} /* desde arriba a la derecha */
  /* Título de FAQ: el fondo negro se pinta de izquierda a derecha y el texto pasa de negro a blanco en el mismo borde */
  #faq .faq-title.paint-lr.is-masked{
    color:transparent; -webkit-text-fill-color:transparent;
    background:linear-gradient(90deg, var(--g-0) calc(var(--rv,0) * 100%), var(--g-8) calc(var(--rv,0) * 100%)), linear-gradient(90deg, var(--g-7) calc(var(--rv,0) * 100%), transparent calc(var(--rv,0) * 100%));
    -webkit-background-clip:text, border-box; background-clip:text, border-box;
  }
  .contact-list dd{margin:4px 0 0;}
  .contact-list svg{flex-shrink:0; width:28px; height:28px; margin-top:2px;}
  .contact-list dt{margin:0;}
  .form-note{padding:14px 16px; border:1.5px solid var(--g-8); border-left-width:6px; border-radius:0; font-size:15px; margin-bottom:14px; background:var(--g-1);}
  .form-note:focus{outline:2px solid var(--g-8); outline-offset:3px;}
  .form-note ul{margin:8px 0 0; padding-left:20px; list-style:disc;}
  .field-error{font-size:13px; font-weight:500; color:#9b1c1c;}
  input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#9b1c1c; border-width:2px;}
  .req{font-weight:400; color:var(--g-6);}
  .hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .map-embed{position:relative; aspect-ratio:16/9; border:1px solid var(--g-3); overflow:hidden; border-radius:var(--radius);}
  .map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .post-text :where(h2,h3){margin:1.6em 0 .6em;}
  .post-text :where(ul,ol){padding-left:1.3em; margin:1em 0; list-style:revert;}
  .post-text img{height:auto;}
  .post-text a{text-underline-offset:3px;}
  .prose{max-width:62ch; font-size:1rem;}
  .prose > * + *{margin-top:1em;}
  /* Nosotros en 1 columna: el video es una franja a sangre, a modo de divisor de sección */
  @media (max-width:820px){
    #nosotros{padding-top:0; --nov:clamp(48px,13vw,104px); --ngap:clamp(28px,5vw,72px); --nmax:clamp(72px,24vw,200px); padding-bottom:max(0px,calc(var(--section) - var(--nmax))); overflow:clip;}
    /* El contenido sube y tapa un poco el video (a sangre, para cubrir también los costados). El video interno es más alto que el marco y se desplaza con el scroll (parallax, ver main.js) */
    #nosotros .split > .video-frame video,#nosotros .split > .video-frame iframe{inset:auto; top:-30%; height:160%; transform:translate3d(0,var(--np,0px),0); will-change:transform;}
    #nosotros .split > :last-child{transform:translate3d(0,calc(var(--nt,0) * var(--nmax) * -1),0); will-change:transform; position:relative; z-index:1; margin-top:calc((var(--nov) + var(--ngap)) * -1); padding-top:calc(var(--nov) + clamp(12px,3vw,20px));}
    #nosotros .split > :last-child::before{content:""; position:absolute; z-index:-1; inset:0 calc(var(--gutter) * -1); background:var(--g-0);}
    #nosotros .prose{max-width:none;}
    #nosotros .split > .video-frame{--shape-l:0px; border-radius:0; aspect-ratio:auto; height:clamp(240px,56vw,420px); margin-inline:calc(var(--gutter) * -1);}
  }
  .tl p + p{margin-top:10px;}
  .doc-note a{text-underline-offset:3px;}
  .muted a{text-underline-offset:3px;}
  .step-body .checks small{display:block; margin-top:4px; font-size:13px;}
  .post-card .ph.empty{background:var(--g-2);}
  .post-card .ph.empty::after{content:""; width:48px; height:48px; background:url("assets/img/logo-tradeup-color.png") center/contain no-repeat; opacity:.35;}
  .benefit-icon{width:40px; height:40px; object-fit:contain;}
  .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  @media (forced-colors:active){ .hero-card,.post-card .more{border:2px solid ButtonText;} }
  .contact-list > div{display:block;}
  .contact-list dt{display:flex; align-items:center; gap:10px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--g-6);}
  .contact-list dt svg{width:24px; height:24px; margin:0;}
  .contact-list dd{margin:4px 0 0; padding-left:34px;}

  /* ============ MODERNO / FULL WIDTH ============ */
  .stat:nth-child(1){background:var(--accent); color:var(--color-on-primary);}
  .stat:nth-child(2){background:var(--g-7);}
  .stat:nth-child(3){background:var(--g-8);}
  section.sec.alt{border-block:0;}
  .card,.band,.file,.map-embed,.ph{border-radius:var(--radius);}
  .card{transition:border-color .2s, transform .25s, box-shadow .25s;}
  .card:hover{transform:translateY(-4px); box-shadow:0 18px 40px -24px rgb(29 29 27 / .35);}
  .chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent);}
  .page-head{background:var(--g-1); border-bottom:0;}
  .page-head .h1{font-size:clamp(38px,5.4vw,76px);}
  .h2{font-size:clamp(30px,4vw,56px);}
  .cta-band{background:var(--g-7); border-radius:0 0 clamp(48px,8vw,120px) 0; padding:clamp(40px,7vw,104px);}
  footer{background:var(--g-7); color:var(--g-0); border-top:0; padding-block:clamp(48px,6vw,88px) 28px;}
  footer .muted,footer .foot-grid h4,footer .foot-base{color:var(--color-text-inverse-muted);}
  footer{padding-top:0;}
  footer > .wrap{border-top:1px solid var(--g-6); padding-top:clamp(24px,3vw,40px);}
  footer :focus-visible{outline-color:var(--g-0);}
  .logo-img{filter:none;}
  .wa{background:var(--accent);} .wa:hover{background:var(--accent-hover);}
  input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent);}

  /* Header transparente sobre el hero (solo home); sólido al hacer scroll */
  body.home .site-header{position:fixed; inset:0 0 auto 0; transition:background-color .3s, border-color .3s, backdrop-filter .3s;}
  body.home .site-header:not(.is-scrolled){background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
  body.home .site-header:not(.is-scrolled) .nav-main a{color:var(--g-0);}
  body.home .site-header:not(.is-scrolled) .nav-main a:hover{background:rgb(255 255 255 / .16); color:var(--g-0); border-radius:0;}
  body.home .site-header:not(.is-scrolled) .nav-main [aria-current="page"],
  body.home .site-header:not(.is-scrolled) .nav-main [aria-current="true"]{color:var(--g-0);}
  body.home .site-header:not(.is-scrolled) .logo-img{background:var(--g-0); padding:5px 9px; border-radius:8px; height:42px; box-sizing:border-box;}
  body.home .site-header:not(.is-scrolled) .menu-btn,body.home .site-header:not(.is-scrolled) .lang-switch{color:var(--g-0); border-color:var(--g-0);}
  body.home .site-header:not(.is-scrolled) :focus-visible{outline-color:var(--g-0);}

  /* Home: logo sin fondo (blanco monocromo) y header con blur, sin fondo claro al scrollear */
  body.home .site-header .logo-img,body.home .site-header:not(.is-scrolled) .logo-img{background:none; padding:0; height:34px; border-radius:0; filter:none;}
  body.home .site-header.is-scrolled{background:rgb(49 49 48 / .35); border-bottom-color:rgb(255 255 255 / .12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
  body.home .site-header .nav-main a,
  body.home .site-header .nav-main [aria-current="page"],
  body.home .site-header .nav-main [aria-current="true"]{color:var(--g-0);}
  body.home .site-header .nav-main a:hover{background:rgb(255 255 255 / .16); color:var(--g-0); border-radius:0;}
  body.home .site-header .menu-btn,body.home .site-header .lang-switch{color:var(--g-0); border-color:var(--g-0);}
  body.home .site-header :focus-visible{outline-color:var(--g-0);}

  /* Botones flotantes (WhatsApp / volver arriba): viven en el margen lateral, sin pisar contenido */
  @media (min-width:900px){
    :root{--gutter:clamp(88px,6vw,120px); --fab:56px;}
    .wa,.to-top{right:calc((var(--gutter) - var(--fab)) / 2);}
  }
  @media (max-width:899px){
    .wa,.to-top{width:48px; height:48px; right:12px;}
    .wa{bottom:12px;} .to-top{bottom:68px;}
    .wa svg{width:24px; height:24px;}
    /* aire al final de la página para que los botones no tapen el último contenido */
    footer{padding-bottom:calc(28px + 64px);}
  }
  .foot-base a{color:var(--g-0); text-underline-offset:3px;} .foot-base a:hover{color:var(--accent);}
  footer .logo-img{background:none; padding:0; border-radius:0;}

  /* Stats a ancho completo, pegadas al hero */
  .hero{margin-bottom:0;}
  section.stats-sec{padding-block:0;}
  .stats-sec .stats{--edge:calc((100% - min(1760px, 100% - 2 * var(--gutter))) / 2); width:100%;}
  .stats-sec .stat:first-child{padding-left:var(--edge);}
  .stats-sec .stat:last-child{padding-right:var(--edge);}

  /* Tira de logos: marquesina infinita, una fila, de derecha a izquierda */
  .logos-strip{position:relative; background:var(--g-0); padding-block:clamp(28px,4vw,48px); overflow:hidden;}
  .marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
  .marquee-track{display:flex; width:max-content; animation:marquee calc(var(--n) * 3.2s) linear infinite;}
  .marquee:hover .marquee-track,.marquee:focus-within .marquee-track,.marquee.paused .marquee-track{animation-play-state:paused;}
  @keyframes marquee{to{transform:translateX(-50%);}}
  .logos-strip .logos{display:flex; flex-wrap:nowrap; flex-shrink:0; align-items:center; gap:clamp(40px,6vw,96px); padding-right:clamp(40px,6vw,96px);}
  .logos-strip .logos li{list-style:none; flex:none;}
  .logos-strip .logos div,.logos-strip .logos a{display:flex; align-items:center; justify-content:center; height:clamp(36px,4vw,52px); width:auto; padding:0; border:0; background:none; border-radius:0;}
  .logos-strip .logos img{height:100%; width:auto; max-width:none; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter .25s, opacity .25s;}
  .logos-strip .logos li:hover img,.logos-strip .logos a:focus-visible img{filter:none; opacity:1;}
  @media (prefers-reduced-motion:reduce){
    .marquee{-webkit-mask-image:none; mask-image:none; overflow-x:auto;}
    .marquee-track{animation:none!important;}
    .logos-strip .logos[aria-hidden="true"]{display:none;}
  }

  /* Header del home sobre secciones claras: texto oscuro, solo blur (sin fondo) */
  body.home .site-header.on-light{background:transparent; border-bottom-color:rgb(29 29 27 / .1);}
  body.home .site-header.on-light .nav-main a,
  body.home .site-header.on-light .nav-main [aria-current="page"],
  body.home .site-header.on-light .nav-main [aria-current="true"]{color:var(--g-8);}
  body.home .site-header.on-light .nav-main a:hover{background:rgb(29 29 27 / .08); color:var(--g-8); border-radius:0;}
  body.home .site-header.on-light .menu-btn,body.home .site-header.on-light .lang-switch{color:var(--g-8); border-color:var(--g-8);}
  body.home .site-header.on-light :focus-visible{outline-color:var(--g-8);}
  body.home .site-header.on-svc{background:var(--g-0); border-bottom-color:var(--g-3); -webkit-backdrop-filter:none; backdrop-filter:none;}
  /* Cards de servicios: al entrar en pantalla se traza el borde superior de izquierda a derecha y el título aparece palabra por palabra */
  .svc-panel.svc-anim .svc-inner::before{transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.65,0,.2,1);}
  .svc-panel.svc-anim.in .svc-inner::before{transform:scaleX(1);}
  .svc-panel.svc-anim h3 .w{display:inline-block; opacity:0; transform:translateY(.45em); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); transition-delay:calc(.3s + var(--wi) * .08s);}
  .svc-panel.svc-anim.in h3 .w{opacity:1; transform:none;}
  .svc-panel.svc-anim .ph{clip-path:inset(0 0 100% 100%); transition:clip-path 1.1s cubic-bezier(.65,0,.2,1) .2s;} /* máscara desde arriba a la derecha */
  .svc-panel.svc-anim.in .ph{clip-path:inset(0);}
  /* Párrafos: aparecen uno tras otro, después del título */
  .svc-panel.svc-anim .desc p{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:.75s;}
  .svc-panel.svc-anim .desc p:nth-child(2){transition-delay:.9s;}
  .svc-panel.svc-anim .desc p:nth-child(3){transition-delay:1.05s;}
  .svc-panel.svc-anim .desc p:nth-child(n+4){transition-delay:1.2s;}
  .svc-panel.svc-anim.in .desc p{opacity:1; transform:none;}
  .svc-panel.svc-anim .ph{overflow:hidden;}
  .svc-panel.svc-anim .ph img{transform:scale(calc(1 + (var(--sp,1) + 1) * .1)); will-change:transform;} /* zoom: arranca en 1.2 y baja a 1 con el scroll */

  /* Enlaces dentro de las cards de servicios: flecha diagonal roja y subrayado que crece al pasar el mouse */
  .svc-panel .desc a{color:inherit; text-decoration:none; background:linear-gradient(var(--accent),var(--accent)) left bottom/100% 2px no-repeat; padding-bottom:1px; transition:background-size .2s ease, color .2s ease;}
  .svc-panel .desc a::after{content:""; display:inline-block; width:.8em; height:.8em; margin-left:.25em; vertical-align:-.05em; background:var(--accent);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M7 7h10v10M17 7L5 19'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M7 7h10v10M17 7L5 19'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform .2s ease;}
  .svc-panel .desc a:hover,.svc-panel .desc a:focus-visible{color:var(--accent); background-size:100% 4px;}
  .svc-panel .desc a:hover::after,.svc-panel .desc a:focus-visible::after{transform:translate(2px,-2px);}
  @media (prefers-reduced-motion:reduce){ .svc-panel .desc a,.svc-panel .desc a::after{transition:none;} }
  .ext-arrow{display:inline-block; width:.8em; height:.8em; vertical-align:-.05em; margin-left:.2em;}
  section.sec#zflp{padding-block:0; background:var(--g-0);}
  #zflp .wrap{width:100%;}
  #zflp .teaser{border:0; border-radius:0; min-height:clamp(360px,36vw,520px);}
  #zflp .teaser .ph{min-height:100%;}
  @media (max-width:820px){ #zflp .teaser{min-height:0;} #zflp .teaser .ph{min-height:0; height:clamp(260px,62vw,460px);} } /* 1 columna: el 100% no tiene referencia, se da un alto propio a la imagen */
  #zflp .teaser-body{padding-inline:max(var(--gutter),calc((100vw - 1760px) / 2 + var(--gutter)));}

  /* FAQ: hover/foco en rojo de marca, transición lenta (texto y ícono +/–) */
  .faq summary{transition:color .6s ease;}
  .faq summary:hover,.faq summary:focus-visible{color:var(--accent);}
  .faq summary::after{transition:background-size .2s, color .6s ease;}
  @media (prefers-reduced-motion:reduce){ .faq summary{transition:none;} }

  /* FAQ: cada pregunta es una fila con borde completo; el +/– vive en un cuadrado con borde a la izquierda */
  .faq details,.faq details:first-child{border:1px solid var(--g-3);}
  .faq details + details{margin-top:-1px;}
  .faq summary{--cell:3.5rem; padding:18px 0; gap:20px; align-items:center; justify-content:flex-start;}
  .faq summary::after{align-self:stretch; width:var(--cell); height:auto; margin-block:-18px; order:-1; border-right:1px solid var(--g-3); background:
    linear-gradient(currentColor,currentColor) center/1.5rem 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 1.5rem no-repeat;}
  .faq details[open] summary::after{background-size:1.5rem 2px,2px 0;}
  .faq details > div{padding:4px 20px 22px;}

  /* FAQ: sin superponer bordes (evitaba líneas dobles con escalas de pantalla fraccionarias, p. ej. 125 %) */
  .faq{border-top:1px solid var(--g-3);}
  .faq details,.faq details:first-child{border:1px solid var(--g-3); border-top:0;}
  .faq details + details{margin-top:0;}
  .faq summary{line-height:24px;}

  /* FAQ: todo el listado sangra hasta el borde derecho de la pantalla */
  #faq{--bleed:calc((100vw - min(1760px, 100vw - 2 * var(--gutter))) / 2); overflow-x:clip;}
  #faq .faq{margin-right:calc(-1 * var(--bleed));}

  /* FAQ: una vez fijo, el fondo negro del título crece hacia abajo hasta tocar el final de la sección (--fg: alto, lo calcula el JS) */
  @media (min-width:821px){
    #faq .faq-title::after{content:""; position:absolute; left:0; right:0; top:100%; height:var(--fg,0px); background:var(--g-7); pointer-events:none;}
  }

  /* FAQ hover: fondo negro que avanza de izquierda a derecha; la celda del +/– se rellena de rojo */
  .faq summary{
    --wipe:0%; --fill:0%; --v:1.5rem;
    background:linear-gradient(var(--g-8),var(--g-8)) var(--cell) 0/var(--wipe) 100% no-repeat;
    transition:background-size .6s ease, color .6s ease;
  }
  .faq details[open] summary{--v:0;}
  .faq summary:hover,.faq summary:focus-visible{--wipe:100%; --fill:100%; color:var(--g-0);}
  .faq summary::after{
    background:
      linear-gradient(currentColor,currentColor) center/1.5rem 2px no-repeat,
      linear-gradient(currentColor,currentColor) center/2px var(--v) no-repeat,
      linear-gradient(var(--accent),var(--accent)) left/var(--fill) 100% no-repeat;
    transition:background-size .6s ease, border-color .6s ease;
  }
  .faq details[open] summary::after{background-size:1.5rem 2px, 2px var(--v), var(--fill) 100%;}
  .faq summary:hover::after,.faq summary:focus-visible::after{border-right-color:var(--g-7);}
  @media (prefers-reduced-motion:reduce){ .faq summary,.faq summary::after{transition:none;} }

  /* FAQ hover como una sola tira (0.3s en total): primero el negro hasta la celda, luego el rojo; el +/– se vuelve blanco recién con el rojo */
  .faq summary{transition:background-size .26s linear, color .26s linear;}
  .faq summary::after{color:var(--g-8); transition:background-size .04s linear .26s, border-color .04s linear .26s, color .04s linear .26s;}
  .faq summary:hover,.faq summary:focus-visible{--wipe:calc(100% - var(--cell)); transition:background-size .26s linear .04s, color .26s linear .04s;}
  .faq summary:hover::after,.faq summary:focus-visible::after{color:var(--g-0); transition:background-size .04s linear, border-color .04s linear, color .04s linear;}
  @media (prefers-reduced-motion:reduce){ .faq summary,.faq summary::after,.faq summary:hover,.faq summary:hover::after,.faq summary:focus-visible,.faq summary:focus-visible::after{transition:none;} }

  /* FAQ: la pregunta desplegada mantiene el estado de hover (negro + celda roja) */
  .faq details[open] summary{--wipe:calc(100% - var(--cell)); --fill:100%; color:var(--g-0); transition:background-size .26s linear .04s, color .26s linear .04s;}
  .faq details[open] summary::after{color:var(--g-0); border-right-color:var(--g-7); transition:background-size .04s linear, border-color .04s linear, color .04s linear;}

  /* FAQ: respuesta con fondo gris */
  .faq details > div{background:var(--g-1);}
  .faq details > div{max-width:none;}
  .faq details > div > *{max-width:62ch;}

  /* FAQ: más aire en la respuesta (alineada al texto de la pregunta: 20px a la izquierda) */
  .faq details > div{padding:clamp(20px,2.4vw,28px) 20px clamp(24px,2.8vw,32px) calc(3.5rem + 20px); line-height:1.7;}
  .faq details > div > * + *{margin-top:1em;}
  @media (max-width:600px){ .faq details > div{padding-left:calc(3.5rem + 20px);} }

  /* ============ CONTACTO: fondo negro de marca, campos solo con línea ============ */
  section.sec.contact-dark{background:var(--g-7); color:var(--g-0); border:0;}
  .contact-dark .lede{color:var(--g-4);}
  .contact-dark a{text-underline-offset:3px;}
  .contact-dark .contact-list dt{color:var(--g-5); font-family:var(--mono); font-size:13px; letter-spacing:.1em;}
  .contact-dark .contact-list dd a{text-decoration-color:rgba(255,255,255,.35);}
  .contact-dark .contact-list dd a:hover{text-decoration-color:var(--g-0);}
  .contact-dark .muted{color:var(--g-5);}
  .contact-dark .map-embed{border:1px solid var(--g-6); filter:grayscale(1) invert(.92) contrast(.9);}
  .contact-dark :focus-visible{outline-color:var(--g-0);}

  .contact-dark form.contact{gap:0;}
  .contact-dark form.contact label{display:block; padding:20px 0 4px; border-bottom:1px solid var(--color-neutral-700); font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--g-4); transition:border-color .2s, color .2s;}
  .contact-dark form.contact label:first-of-type{border-top:0;}
  .contact-dark form.contact label:hover{border-color:var(--g-6);}
  .contact-dark form.contact label:focus-within{border-color:var(--g-0); color:var(--g-0);}
  .contact-dark .req{color:var(--accent); font-weight:700; margin-left:.35em;}
  .contact-dark form.contact input,
  .contact-dark form.contact textarea{display:block; padding:8px 0 12px; border:0; border-radius:0; background:transparent; color:var(--g-0); font:400 clamp(18px,1.8vw,22px)/1.35 var(--font); letter-spacing:-.01em; text-transform:none; outline:0;}
  .contact-dark form.contact textarea{min-height:96px; resize:vertical;}
  .contact-dark form.contact ::placeholder{color:var(--g-6); opacity:1;}
  .contact-dark form.contact input:-webkit-autofill{-webkit-text-fill-color:var(--g-0); box-shadow:0 0 0 100px var(--g-7) inset; caret-color:var(--g-0);}
  .contact-dark form.contact label:has([aria-invalid="true"]){border-color:#e8838f;}
  .contact-dark input[aria-invalid="true"],
  .contact-dark textarea[aria-invalid="true"]{border:0;}
  .contact-dark .field-error{font-family:var(--font); font-size:14px; letter-spacing:0; text-transform:none; color:#f0a0a8; padding-bottom:10px;}
  .contact-dark .form-note{background:transparent; color:var(--g-0); border:0; border-top:1px solid var(--g-0); border-bottom:1px solid var(--g-6); border-radius:0; padding:16px 0; margin-bottom:8px;}
  .contact-dark .form-note a{color:var(--g-0);}
  .contact-dark .form-note:focus{outline-color:var(--g-0);}
  .contact-dark form.contact .btn{justify-self:start; margin-top:32px; min-height:56px; padding:0 36px;}
  .contact-dark .btn:focus-visible{outline-color:var(--g-0);}
  .contact-dark form.contact .btn{--btn-bg:transparent; --btn-fg:var(--g-0); --btn-border:var(--g-0); --btn-bg-hover:transparent; --btn-fg-hover:var(--color-on-primary); --btn-border-hover:var(--color-primary); border-width:1px;
    background-image:linear-gradient(var(--color-primary),var(--color-primary)); background-repeat:no-repeat; background-position:left center; background-size:0 100%; transition:background-size .35s ease, color .2s, border-color .2s;}
  .contact-dark form.contact .btn:hover,.contact-dark form.contact .btn:focus-visible{background-size:100% 100%;}
  @media (prefers-reduced-motion:reduce){ .contact-dark form.contact .btn{transition:none;} }
  .contact-dark form.contact input,.contact-dark form.contact textarea{display:block;}
  .contact-dark .h2{color:var(--g-0);}

  /* Contacto compacto: etiqueta y campo en una sola línea */
  section.sec.contact-dark{padding-block:clamp(36px,5vw,64px);}
  .contact-dark .contact-list{gap:10px; margin-block:18px;}
  .contact-dark .map-embed{aspect-ratio:21/9;}
  .contact-dark form.contact label{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:0; padding:10px 0 0; font-size:14px;}
  .contact-dark form.contact label:first-of-type{padding-top:0;}
  .contact-dark form.contact input,
  .contact-dark form.contact textarea{flex:0 0 62%; width:62%; margin-left:auto; padding:6px 0 10px; font-size:clamp(16px,1.5vw,19px);}
  .contact-dark form.contact textarea{min-height:44px; height:44px; resize:vertical;}
  .contact-dark .field-error{flex:0 0 100%; order:3; padding:0 0 8px;}
  .contact-dark form.contact .btn{margin-top:20px; min-height:52px;}
  @media (max-width:600px){
    .contact-dark form.contact input,.contact-dark form.contact textarea{flex-basis:100%; width:100%; margin-left:0;}
  }

  /* Contacto → footer: espacio mínimo entre ambos */
  section.sec.contact-dark{padding-bottom:12px;}
  /* Contacto superpuesto al footer: al subir, el footer se va revelando por debajo */
  @media (min-width:821px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
    body.home main#main,body.page-template-page-zona-franca main#main,body.page-template-page-documentacion main#main{position:relative; z-index:1; background:var(--g-0);}
    body.home footer,body.page-template-page-zona-franca footer,body.page-template-page-documentacion footer{position:sticky; bottom:0; z-index:0;}
    body.home footer::after,body.page-template-page-zona-franca footer::after,body.page-template-page-documentacion footer::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:#000; opacity:calc(var(--fd,0) * .75);} /* capa oscura que se aclara hasta 0 al revelarse del todo */
  }
  /* Secciones que se descubren por detrás de la anterior, con parallax: "En acción" bajo "Cómo trabajamos" y Zona Franca bajo Mercosur */
  @media (prefers-reduced-motion:no-preference){
    #servicios{position:relative; z-index:2; background:var(--g-0);}
    #mercosur{position:relative; z-index:2;}
    #faq{position:relative; z-index:2; background:var(--g-0);}
    #en-accion-home,#zflp,#contacto{--ov:clamp(120px,22vh,240px); position:relative; z-index:1; margin-top:calc(var(--ov) * -1); padding-top:calc(var(--section) + var(--ov));}
    #en-accion-home{background:var(--g-0);}
    section.sec#contacto{padding-top:calc(var(--section) + var(--ov));}
    section.sec#zflp{padding-top:var(--ov);} /* a sangre: sin relleno propio, solo el solape */
    #en-accion-home > .wrap,#zflp > .wrap,#contacto > .wrap{transform:translate3d(0,calc((1 - var(--er,1)) * var(--ov) * -1.2),0); will-change:transform;}
  }
  /* Tablet y mobile: Nosotros se descubre por detrás del hero (con las stats) al subir, igual que Zona Franca bajo Mercosur */
  @media (max-width:820px) and (prefers-reduced-motion:no-preference){
    .hero-stage{z-index:2;}
    section.sec#nosotros{--ov:clamp(120px,22vh,240px); position:relative; z-index:1; background:var(--g-0); margin-top:calc(var(--ov) * -1); padding-top:var(--ov);}
    #nosotros > .wrap{transform:translate3d(0,calc((1 - var(--er,1)) * var(--ov) * -1.2),0); will-change:transform;}
  }
  /* Datos de contacto: ícono y dato en la misma fila */
  .contact-dark .contact-list{gap:0;}
  .contact-dark .contact-list > div{display:flex; align-items:stretch; gap:0; border:1px solid var(--g-6);}
  .contact-dark .contact-list > div + div{margin-top:-1px;}
  .contact-dark .contact-list dt{flex:none; display:flex; align-items:center; justify-content:center; width:3.5rem; border-right:1px solid var(--g-6);}
  .contact-dark .contact-list dt svg{width:24px; height:24px; margin:0; color:var(--g-0); stroke-width:1;}
  .contact-dark .contact-list dd{margin:0; padding:16px 20px; align-self:center;}
  /* Formulario alineado al bottom de la columna de datos/mapa */
  .contact-dark .split{align-items:stretch;}
  .contact-dark .contact-wrap{align-self:end;}
  /* Datos de contacto: las filas se estiran para llegar al bottom de la columna */
  .contact-dark .split > div:first-child{display:flex; flex-direction:column;}
  .contact-dark .contact-list{flex:1; grid-auto-rows:1fr; margin-bottom:0;}
  @media (max-width:820px){ .contact-dark .split{align-items:start;} .contact-dark .contact-list{flex:none; grid-auto-rows:auto;} }
  body.home footer{padding-top:20px;}

  /* FAQ: pegadas a la sección ZFLP y con el borde izquierdo alineado al de la imagen (mitad exacta del ancho) */
  @media (min-width:821px){
    section.sec#faq{padding-top:0;}
    #faq .split{column-gap:0;}
    #faq .faq-title{padding-top:var(--section); padding-right:clamp(28px,5vw,72px);}
  }

  /* FAQ: título dentro de un rectángulo negro */
  #faq .faq-title{background:var(--g-7); color:var(--g-0); padding:clamp(24px,3vw,40px); margin:0;}
  @media (min-width:821px){
    #faq .faq-title{padding-top:clamp(24px,3vw,40px); padding-right:clamp(24px,3vw,40px);}
  }

  /* FAQ: el rectángulo negro se pega justo debajo del header al hacer scroll (sin hueco) */
  #faq .faq-title{top:var(--header-h);}

  /* FAQ: el rectángulo negro sangra hasta el borde izquierdo de la pantalla (el texto conserva su alineación) */
  #faq .faq-title{--bleed:calc((100vw - min(1760px, 100vw - 2 * var(--gutter))) / 2); margin-left:calc(-1 * var(--bleed)); padding-left:calc(var(--bleed) + clamp(24px,3vw,40px));}

  /* FAQ: pegadas a la sección de contacto */
  section.sec#faq{padding-bottom:0;}

  /* FAQ: despliegue animado de la respuesta (altura); sin soporte, abre/cierra sin animación */
  .faq details{interpolate-size:allow-keywords;}
  .faq details::details-content{block-size:0; overflow:clip; transition:block-size .35s ease, content-visibility .35s allow-discrete;}
  .faq details[open]::details-content{block-size:auto;}
  @media (prefers-reduced-motion:reduce){ .faq details::details-content{transition:none;} }

  .contact-dark form.contact .btn{margin-top:0;}

  /* Botón de enviar: primero solo flecha; en hover se extiende a todo el ancho y aparece el texto (como "Leer más" de noticias) */
  .contact-dark form.contact .send{position:relative; justify-self:stretch; align-self:start; width:52px; height:52px; margin-top:20px; padding:0; overflow:hidden; white-space:nowrap; cursor:pointer; font:inherit; font-size:14px; font-weight:700; color:var(--g-0); background:transparent; border:1px solid var(--g-0); border-radius:0 0 20px 0; transition:width .35s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s;}
  .contact-dark form.contact .send svg{position:absolute; top:50%; left:14px; width:22px; height:22px; margin-top:-11px; transition:left .35s cubic-bezier(.16,1,.3,1);}
  .contact-dark form.contact .send span{position:absolute; left:20px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .2s;}
  .contact-dark form.contact .send:hover,.contact-dark form.contact .send:focus-visible{width:100%; background:var(--color-primary); border-color:var(--color-primary);}
  .contact-dark form.contact .send:hover svg,.contact-dark form.contact .send:focus-visible svg{left:calc(100% - 37px);}
  .contact-dark form.contact .send:hover span,.contact-dark form.contact .send:focus-visible span{opacity:1; transition-delay:.12s;}
  .contact-dark form.contact .send:focus-visible{outline:2px solid var(--g-0); outline-offset:3px;}
  /* Tablet y mobile: no hay hover, el botón se muestra siempre extendido y con el texto */
  @media (max-width:820px){
    .contact-dark form.contact .send{width:100%; background:var(--color-primary); border-color:var(--color-primary);}
    .contact-dark form.contact .send svg{left:calc(100% - 37px);}
    .contact-dark form.contact .send span{opacity:1;}
  }
  @media (prefers-reduced-motion:reduce){ .contact-dark form.contact .send,.contact-dark form.contact .send svg,.contact-dark form.contact .send span{transition:none;} }

  .contact-dark form.contact .send{margin-top:0;}

  /* Mensaje: borde inferior siempre blanco (igual que activo) */
  .contact-dark form.contact label:has(textarea){border-color:var(--g-0);}

  /* FAQ: el texto del título arranca en el mismo borde izquierdo que el título de contacto */
  #faq .faq-title{padding-left:var(--bleed);}

  #faq .faq-title{border-bottom:1px solid var(--g-3);}

  /* FAQ en tablet y mobile: todo el ancho de la pantalla, sin gap entre título y listado y sin bordes laterales */
  @media (max-width:820px){
    #faq{--bleed:0px;}
    #faq > .wrap{width:100%; gap:0;}
    #faq .faq-title{margin-left:0; padding-inline:var(--gutter);}
    #faq .faq{margin-right:0;}
    #faq .faq details{border-left:0; border-right:0;}
  }

  /* Zona Franca: la banda de cierre ocupa todo el ancho y queda sobre el footer, que se revela por debajo (como el contacto del inicio) */
  body.page-template-page-zona-franca main > .page-end,body.page-template-page-documentacion main > .page-end{padding-bottom:0;}
  body.page-template-page-zona-franca .page-end > .wrap,body.page-template-page-documentacion .page-end > .wrap{width:100%;}
  body.page-template-page-zona-franca .cta-band,body.page-template-page-documentacion .cta-band{border-radius:0; padding-inline:max(var(--gutter),calc((100vw - 1760px) / 2 + var(--gutter)));}

  /* ============ ZONA FRANCA (mismo lenguaje que el inicio) ============ */
  body.page-template-page-zona-franca .site-header{position:fixed; inset:0 0 auto 0; width:100%; transition:background-color .3s, border-color .3s, backdrop-filter .3s;}
  body.page-template-page-zona-franca .site-header:not(.is-scrolled){background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
  body.page-template-page-zona-franca .site-header.is-scrolled{background:rgb(49 49 48 / .94); border-bottom-color:rgb(255 255 255 / .12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
  body.page-template-page-zona-franca .site-header .nav-main a,
  body.page-template-page-zona-franca .site-header .nav-main [aria-current="page"]{color:var(--g-0);}
  body.page-template-page-zona-franca .site-header .nav-main a:hover{background:rgb(255 255 255 / .16); color:var(--g-0); border-radius:0;}
  body.page-template-page-zona-franca .site-header .menu-btn,body.page-template-page-zona-franca .site-header .lang-switch{color:var(--g-0); border-color:var(--g-0);}
  body.page-template-page-zona-franca .site-header :focus-visible{outline-color:var(--g-0);}
  .zf-hero{position:relative; isolation:isolate; overflow:hidden; background:var(--g-8); color:var(--g-0); min-height:clamp(480px,70svh,720px); display:flex; align-items:flex-end; padding-block:calc(var(--header-h) + 40px) clamp(32px,5vw,72px);}
  .zf-hero-bg{position:absolute; inset:0; z-index:-1;}
  .zf-hero-bg video{width:100%; height:100%; object-fit:cover; filter:grayscale(1);}
  .zf-hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgb(49 49 48 / .88) 0%, rgb(49 49 48 / .6) 55%, rgb(49 49 48 / .25) 100%), linear-gradient(0deg, rgb(49 49 48 / .75), transparent 95%);}
  @media (prefers-reduced-motion:reduce){ .zf-hero-bg video{display:none;} }
  .zf-hero-in{width:min(1760px,100% - 2 * var(--gutter));}
  .zf-hero-msg{display:flex; flex-direction:column; gap:24px;}
  .zf-hero .h1{font-size:clamp(40px,6.4vw,92px); line-height:1; max-width:16ch; margin:0; text-wrap:balance;}
  .zf-hero .lede{max-width:52ch; color:var(--color-text-inverse-muted); margin:0;}

  /* Beneficios: dentro de "Trade Up en la zona", en la columna izquierda, uno debajo del otro */
  .zf-ben{margin-top:clamp(32px,4vw,56px);}
  .zf-ben-title{font-size:clamp(20px,2vw,26px); font-weight:650; margin-bottom:clamp(16px,2vw,24px);}
  .zf-ben-grid{display:grid; grid-template-columns:1fr; gap:12px; list-style:none; margin:0; padding:0;}
  .zf-ben-card{background:var(--g-8); color:var(--g-0); border-radius:0 0 clamp(20px,2.4vw,32px) 0; padding:0; display:grid; grid-template-columns:auto 1fr; column-gap:clamp(16px,2.4vw,32px); align-items:start;}
  .zf-ben-card .n{width:56px; height:56px; display:flex; align-items:center; padding-left:20px; box-sizing:border-box; background:var(--accent); color:var(--g-0); font-family:var(--mono); font-size:15px; border-radius:0 0 14px 0;}
  .zf-ben-body{display:flex; flex-direction:column; gap:8px; padding:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,28px) clamp(18px,2.2vw,28px) 0;}
  .zf-ben-card h4{font-size:clamp(17px,1.6vw,20px); font-weight:650;}
  .zf-ben-card p{font-size:15px; color:var(--g-4);}
  .zf-ben-card p + p{margin-top:.8em;}

  section.sec.zf-hist{position:relative; isolation:isolate; overflow:clip; background:var(--g-7); color:var(--g-0);}
  .zf-hist-bg{position:absolute; inset:0; z-index:-1;}
  .zf-hist-bg video{position:sticky; top:0; display:block; width:100%; height:100svh; object-fit:cover; filter:grayscale(1);} /* el video queda fijo y la línea de tiempo sube por encima */
  .zf-hist-bg::after{content:""; position:absolute; inset:0; background:rgb(49 49 48 / .72);}
  @media (prefers-reduced-motion:reduce){ .zf-hist-bg video{display:none;} }
  .zf-hist-title{margin-bottom:clamp(40px,7vw,96px);}
  /* Línea central que se llena al scrollear; ítems alternados a izquierda y derecha */
  .zf-hist .vtl{max-width:none; padding:0;}
  .zf-hist .vtl::before,.zf-hist .vtl-fill{left:50%; width:2px; margin-left:-1px; top:15px; bottom:0;} /* arranca en el centro del primer punto */
  .zf-hist .vtl::before{background:rgb(255 255 255 / .2);}
  .zf-hist .vtl-fill{bottom:auto; background:var(--accent); transition:none;}
  .zf-hist .tl{width:50%; box-sizing:border-box; padding:0 clamp(32px,5vw,80px) clamp(56px,10vh,120px) 0; text-align:right; margin-left:0;}
  .zf-hist .tl:nth-child(odd){margin-left:50%; padding:0 0 clamp(56px,10vh,120px) clamp(32px,5vw,80px); text-align:left;} /* el primer hijo es el relleno de la línea */
  .zf-hist .tl:last-child{padding-bottom:0;}
  .zf-hist .tl::before{top:8px; left:auto; right:-6px; background:#4a4a49; border-color:#4a4a49;}
  .zf-hist .tl:nth-child(odd)::before{right:auto; left:-8px;}
  .zf-hist .tl.hit::before{background:var(--accent); border-color:var(--accent);} /* se pinta cuando la línea roja llega al punto */
  .zf-hist .tl-kicker{font-family:var(--mono); color:var(--g-0); opacity:.7; font-size:clamp(18px,2vw,30px); letter-spacing:-.02em; margin:0 0 12px;}
  .zf-hist .tl h3{font-size:clamp(24px,3vw,38px); letter-spacing:-.03em; margin-bottom:12px; color:var(--g-5); transition:color .4s;}
  .zf-hist .tl.hit h3{color:var(--g-0);} /* el año se enciende cuando llega la línea */
  .zf-hist .tl p{color:var(--g-3); font-size:clamp(15px,1.4vw,17px); margin-left:auto; opacity:0; transition:opacity .5s; text-wrap:balance;}
  .zf-hist .tl.hit p{opacity:1;}
  .zf-hist .tl p.tl-kicker{opacity:.7;} /* la etiqueta pequeña también es un <p>; queda como estaba */
  /* La etiqueta (p. ej. "Sus comienzos") va arriba del título, pegada al borde de su columna (el estilo base la dejaba a la izquierda) */
  .zf-hist .tl p.tl-kicker{margin:0 0 12px auto !important;}
  .zf-hist .tl:nth-child(odd) p.tl-kicker{margin:0 0 12px 0 !important;}
  @media (prefers-reduced-motion:reduce){ .zf-hist .tl p{opacity:1;} }
  .zf-hist .tl:nth-child(odd) p{margin-left:0;}
  @media (max-width:820px){
    .zf-hist .vtl::before,.zf-hist .vtl-fill{left:6px;}
    .zf-hist .tl,.zf-hist .tl:nth-child(odd){width:auto; margin-left:0; padding:0 0 clamp(48px,8vh,80px) 44px; text-align:left;}
    .zf-hist .tl::before,.zf-hist .tl:nth-child(odd)::before{left:0; right:auto;}
    .zf-hist .tl p{margin-left:0;}
    .zf-hist .tl p.tl-kicker,.zf-hist .tl:nth-child(odd) p.tl-kicker{margin:0 0 12px !important;}
  }

  /* Documentación: banda de cierre bastante más grande */
  body.page-template-page-documentacion .cta-band{min-height:clamp(380px,62vh,640px); padding-block:clamp(56px,10vh,120px); align-items:flex-end;}
  body.page-template-page-documentacion .cta-band .h2{font-size:clamp(36px,5.2vw,76px); line-height:1.08; max-width:18ch;}
  body.page-template-page-documentacion .cta-band p{font-size:clamp(16px,1.6vw,22px); max-width:46ch;}
  body.page-template-page-documentacion .cta-band .btn{min-height:clamp(64px,8vh,88px); padding:0 clamp(36px,4vw,64px); font-size:clamp(17px,1.5vw,22px); --btn-radius:0 0 clamp(18px,2vw,28px) 0;}
  body.page-template-page-documentacion .cta-band .btn svg{width:1.2em; height:1.2em;}

  /* Zona Franca: banda de cierre y botón igual de grandes que en Documentación */
  body.page-template-page-zona-franca .cta-band{min-height:clamp(380px,62vh,640px); padding-block:clamp(56px,10vh,120px); align-items:flex-end;}
  body.page-template-page-zona-franca .cta-band .h2{font-size:clamp(36px,5.2vw,76px); line-height:1.08; max-width:18ch;}
  body.page-template-page-zona-franca .cta-band p{font-size:clamp(16px,1.6vw,22px); max-width:46ch;}
  body.page-template-page-zona-franca .cta-band .btn{min-height:clamp(52px,6.5vh,72px); padding:0 clamp(28px,3vw,48px); font-size:clamp(15px,1.25vw,18px); --btn-radius:0 0 clamp(14px,1.6vw,22px) 0;}
  body.page-template-page-zona-franca .cta-band .btn svg{width:1.2em; height:1.2em;}
  body.page-template-page-zona-franca .cta-band{flex-wrap:nowrap; align-items:flex-end; align-items:last baseline;}
  body.page-template-page-zona-franca .cta-band .btn-row{margin-left:auto; flex:none; align-items:last baseline;}
  .cta-band .btn[href*="/documentacion"]{--btn-radius:0; border-radius:0;}
  /* Banda de cierre: "Ver documentación" con trazo blanco y "Contactar" rojo */
  .cta-band .btn[href*="/documentacion"]{--btn-bg:transparent; --btn-fg:var(--color-white); --btn-border:var(--color-white); --btn-bg-hover:var(--color-white); --btn-fg-hover:var(--color-neutral-900); --btn-border-hover:var(--color-white);}
  .cta-band .btn[href*="/documentacion"]:active{background:var(--color-neutral-100); color:var(--color-neutral-900); border-color:var(--color-neutral-100);}
  .cta-band .btn--secondary:not([href*="/documentacion"]){--btn-bg:var(--color-primary); --btn-fg:var(--color-on-primary); --btn-border:var(--color-primary); --btn-bg-hover:var(--color-primary-hover); --btn-fg-hover:var(--color-on-primary); --btn-border-hover:var(--color-primary-hover);}
  .cta-band .btn--secondary:not([href*="/documentacion"]):active{background:var(--color-primary-active); border-color:var(--color-primary-active); color:var(--color-on-primary);}
  /* Zona Franca: la banda de cierre se pega a la línea de tiempo, sin espacio en blanco entre ambas */
  body.page-template-page-zona-franca section.zf-hist{padding-bottom:var(--section);}
  body.page-template-page-zona-franca .page-end{padding-top:0 !important;}

  /* Zona Franca: en "Qué es", la imagen queda fija mientras la columna de texto sigue subiendo */
  @media (min-width:821px){
    #zf-que-sec .split{align-items:start;}
    #zf-que-sec .split > .ph{position:sticky; top:calc(var(--header-h) + 24px);}
  }

  /* Zona Franca: al subir la línea de tiempo, la banda de cierre se descubre por detrás con parallax (igual que en el inicio) */
  @media (prefers-reduced-motion:no-preference){
    body.page-template-page-zona-franca section.zf-hist{z-index:2;}
    body.page-template-page-zona-franca main > .page-end{--ov:clamp(120px,22vh,240px); position:relative; z-index:1; margin-top:calc(var(--ov) * -1); padding-top:var(--ov) !important;}
    body.page-template-page-zona-franca .page-end > .wrap{transform:translate3d(0,calc((1 - var(--er,1)) * var(--ov) * -1.2),0); will-change:transform;}
  }

  /* Zona Franca: "Trade Up en la zona" se va y descubre la línea de tiempo por detrás, con parallax */
  @media (prefers-reduced-motion:no-preference){
    body.page-template-page-zona-franca section#zf-que-sec{position:relative; z-index:3; background:var(--g-0);}
    body.page-template-page-zona-franca section.zf-hist{--ov:clamp(120px,22vh,240px); margin-top:calc(var(--ov) * -1); padding-top:calc(var(--section) + var(--ov));}
    body.page-template-page-zona-franca section.zf-hist > .wrap{transform:translate3d(0,calc((1 - var(--er,1)) * var(--ov) * -1.2),0); will-change:transform;}
  }

  /* Zona Franca: el header reaparece con una transición corta cuando se scrollea hacia arriba */
  body.page-template-page-zona-franca .site-header.zf-peek,body.page-template-page-documentacion .site-header.zf-peek,body.single-operacion .site-header.zf-peek{transition:transform .35s cubic-bezier(.16,1,.3,1), background-color .3s, border-color .3s, backdrop-filter .3s;}

  /* ============ DOCUMENTACIÓN (mismo lenguaje que el inicio y Zona Franca) ============ */
  body.page-template-page-documentacion .site-header{position:fixed; inset:0 0 auto 0; width:100%; transition:background-color .3s, border-color .3s, backdrop-filter .3s;}
  body.page-template-page-documentacion .site-header:not(.is-scrolled){background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
  body.page-template-page-documentacion .site-header.is-scrolled{background:rgb(49 49 48 / .94); border-bottom-color:rgb(255 255 255 / .12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
  body.page-template-page-documentacion .site-header .nav-main a,
  body.page-template-page-documentacion .site-header .nav-main [aria-current="page"]{color:var(--g-0);}
  body.page-template-page-documentacion .site-header .nav-main a:hover{background:rgb(255 255 255 / .16); color:var(--g-0); border-radius:0;}
  body.page-template-page-documentacion .site-header .menu-btn,body.page-template-page-documentacion .site-header .lang-switch{color:var(--g-0); border-color:var(--g-0);}
  body.page-template-page-documentacion .site-header :focus-visible{outline-color:var(--g-0);}
  body.page-template-page-documentacion .crumbs{display:none;}

.doc-n{display:flex; align-items:center; width:56px; height:56px; padding-left:20px; box-sizing:border-box; background:var(--g-8); color:var(--g-0); font-family:var(--mono); font-size:15px; border-radius:0 0 14px 0; margin-bottom:24px;}
  .doc-tag{font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;}
.doc-head{display:flex; flex-direction:column; align-items:flex-start;}  .doc-head .h2{margin-bottom:18px;}  .doc-head > p.muted{margin-bottom:24px; max-width:48ch;}  @media (min-width:821px){ .doc-head{position:sticky; top:calc(var(--header-h) + 24px);} }
  .doc-sub{font-size:clamp(20px,2vw,26px); font-weight:650; margin-bottom:clamp(16px,2vw,24px);}
  .doc-reqs{counter-reset:none;}
  .doc-req-text{color:var(--g-0) !important; font-size:clamp(15px,1.4vw,17px) !important; font-weight:550;}
  .doc-req-note{color:var(--g-4) !important; font-size:14px !important;}

  .doc-files{display:grid; gap:12px;}
  .doc-files .file{background:var(--g-8); color:var(--g-0); border:0; border-radius:0 0 clamp(20px,2.4vw,32px) 0; padding:0 0 0 clamp(18px,2.2vw,28px); gap:16px; min-height:72px; font-size:clamp(15px,1.4vw,17px); font-weight:550;}
  .doc-files .file span{padding-block:16px;}
  .doc-files .file small{color:var(--g-4); font-weight:400; font-size:14px;}
  .doc-files .file em{flex:none; width:72px; height:72px; align-self:stretch; margin-left:auto; display:grid; place-items:center; background:var(--accent); color:var(--g-0); border-radius:0 0 clamp(20px,2.4vw,32px) 0;}
  .doc-files .file:hover em{background:var(--accent-hover); color:var(--g-0);}

  section.sec.doc-ops{background:var(--g-7); color:var(--g-0);}
.doc-ops .doc-n{background:var(--accent);}
  .doc-ops .h2{margin-bottom:clamp(28px,4vw,48px); max-width:22ch;}
  .doc-ops-grid{display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(32px,5vw,72px);}
  .doc-ops-grid li{display:flex; align-items:center; gap:16px; padding:20px 0; border-top:1px solid rgb(255 255 255 / .18); font-size:clamp(15px,1.4vw,18px);}
  .doc-ops-grid li::before{content:""; flex:none; width:24px; height:24px; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; border-radius:0 0 6px 0;}
  @media (max-width:700px){ .doc-ops-grid{grid-template-columns:1fr;} }

  body.page-template-page-documentacion main > .page-end{padding-top:0 !important;}
  body.page-template-page-documentacion .cta-band{border-top:1px solid rgb(255 255 255 / .14);}

  /* "Cómo operar" se descubre por detrás de la parte blanca, con parallax */
  @media (prefers-reduced-motion:no-preference){
    body.page-template-page-documentacion #doc-pre{position:relative; z-index:3; background:var(--g-0);}
    body.page-template-page-documentacion section.doc-ops{--ov:clamp(120px,22vh,240px); position:relative; z-index:2; margin-top:calc(var(--ov) * -1); padding-top:calc(var(--section) + var(--ov));}
    body.page-template-page-documentacion section.doc-ops > .wrap{transform:translate3d(0,calc((1 - var(--er,1)) * var(--ov) * -1.2),0); will-change:transform;}
  }

  /* Documentación: "Formularios a completar" dentro de la columna izquierda del paso 01 (sin columna fija: el contenido es más alto que la pantalla) */
  .doc-s1 .doc-head{position:static;}
  .doc-forms-in{width:100%; margin-top:clamp(32px,4vw,56px);}
  .doc-forms-in .small{margin:16px 0 0;}
  .doc-forms-in p:has(> .btn){margin-top:24px;}

  /* Documentación: número y rótulo juntos en una misma card (cuadrado con el número + rótulo al lado) */
  .doc-top{display:flex; align-items:stretch; width:fit-content; max-width:100%; background:var(--g-8); border-radius:0 0 14px 0; margin-bottom:24px;}
  .doc-top .doc-n{background:var(--accent); margin:0; flex:none;}
  .doc-top .doc-tag{display:flex; align-items:center; margin:0; padding:0 24px 0 20px; color:var(--g-0);}
  .doc-ops .doc-top{background:var(--g-8);}

  /* Documentación: cards claras con borde superior (como las de "Cómo trabajamos"), sin fondo negro */
  .doc-reqs .zf-ben-card{background:var(--g-0); color:var(--g-8); border-top:1px solid var(--g-4); border-left:1px solid var(--g-4); border-radius:0;}
  .doc-reqs .zf-ben-card .n{margin-left:-1px; background:var(--g-8); color:var(--g-0);}
  .doc-req-text{color:var(--g-8) !important;}
  .doc-req-note{color:var(--g-6) !important;}
  .doc-reqs{gap:0;}
  .doc-reqs .zf-ben-card + .zf-ben-card{border-top:1px solid var(--g-4);}
  .doc-reqs .zf-ben-card:last-child{border-bottom:1px solid var(--g-4);}

  .doc-files{gap:0;}
  .doc-files .file{background:var(--g-0); color:var(--g-8); border:0; border-top:1px solid var(--g-4); border-left:1px solid var(--g-4); border-radius:0; padding-left:clamp(18px,2.2vw,28px);}
  .doc-files li:last-child .file{border-bottom:1px solid var(--g-4);}
  .doc-files .file small{color:var(--g-6);}
  .doc-files .file em{background:var(--g-8); color:var(--g-0); border-radius:0 0 14px 0;}
  .doc-files .file:hover em{background:var(--accent); color:var(--g-0);}

  .doc-top{background:transparent; border-top:1px solid var(--g-4); border-left:1px solid var(--g-4); border-radius:0;}
  .doc-top .doc-n{background:var(--g-8); margin-left:-1px;}
  .doc-top .doc-tag{color:var(--g-8);}
  .doc-ops .doc-top{background:transparent; border-color:rgb(255 255 255 / .3);}
  .doc-ops .doc-top .doc-n{background:var(--accent);}
  .doc-ops .doc-top .doc-tag{color:var(--g-0);}

  /* Documentación: la card del rótulo ("Para inscribirte" / "Para operar") lleva solo el texto, sin número */
  .doc-top .doc-tag{padding:14px 24px;}
  .doc-top{border-left-color:var(--g-4);}

  /* Documentación: las cards llevan solo el borde superior (sin borde izquierdo) */
  .doc-reqs .zf-ben-card,.doc-files .file,.doc-top{border-left:0;}
  .doc-reqs .zf-ben-card .n,.doc-top .doc-n{margin-left:0;}

  /* Documentación: el rótulo ("Para inscribirte" / "Para operar") va en una card con fondo y la esquina inferior derecha redondeada */
  .doc-top{background:var(--g-8); border:0; border-radius:0 0 14px 0;}
  .doc-top .doc-tag{color:var(--g-0);}
  .doc-ops .doc-top{background:var(--g-8); border:0;}

  /* Documentación: "Formularios a completar" debajo de "Documentación a presentar" (columna derecha); la columna izquierda queda fija mientras sube la derecha */
  @media (min-width:821px){ .doc-s1 .doc-head{position:sticky; top:calc(var(--header-h) + 24px);} }

  /* Documentación: el botón de consulta va en la columna izquierda, debajo del texto */
  .doc-head > p:has(> .btn){margin-top:28px;}

  /* Beneficios y requisitos: la base de la primera línea del título queda alineada con la base del número del cuadradito (.n) */
  .zf-ben-card{--tf:clamp(17px,1.6vw,20px); --tlh:1.15;}
  .zf-ben-card h4{font-size:var(--tf); line-height:var(--tlh);}
  .doc-reqs .zf-ben-card{--tf:clamp(15px,1.4vw,17px); --tlh:1.3;}
  .doc-req-text{font-size:var(--tf) !important; line-height:var(--tlh);}
  .zf-ben-body{padding-top:calc(32px - (var(--tlh) / 2 + .3715) * var(--tf));} /* 32px = base del número dentro del cuadradito de 56px */

  /* El número de las cards va solo (sin cuadradito); su base se alinea sola con la del título */
  .zf-ben-card{padding:clamp(18px,2.2vw,28px); align-items:first baseline;}
  .zf-ben-card .n,.doc-reqs .zf-ben-card .n{display:block; width:auto; height:auto; padding:0; margin:0; background:none; color:var(--accent); font-size:15px; border-radius:0;}
  .zf-ben-body{padding:0;}

  /* Las cards con número van sin relleno a la izquierda */
  .zf-ben-card{padding-left:0;}

  /* Relleno vertical de las cards con número: ~24px */
  .zf-ben-card{padding-block:24px;}

  /* Formularios a completar: sin relleno a la izquierda */
  .doc-files .file{padding-left:0;}

  /* Formularios a completar: todas las cards con el mismo alto (el de la más alta) */
  .doc-files{grid-auto-rows:1fr;}
  .doc-files li{display:flex;}
  .doc-files .file{flex:1;}

  /* Documentación: la columna derecha ("Documentación a presentar") arranca a la altura del título, por debajo de la card del rótulo */
  .doc-top{--dt:48px; height:var(--dt); box-sizing:border-box;}
  .doc-top .doc-tag{padding-block:0;}
  @media (min-width:821px){ .doc-s1 .doc-head + div{margin-top:calc(var(--dt, 48px) + 24px);} }

  /* Formularios a completar: el contenido de cada card queda arriba, no centrado */
  .doc-files .file{align-items:flex-start;}
  .doc-files .file em{align-self:stretch;}

  /* Rótulos ("Para inscribirte" / "Para operar"): sin esquina redondeada y con menos relleno, para que no parezcan un botón */
  .doc-top{--dt:38px; border-radius:0;}
  .doc-top .doc-tag{padding:0 14px;}

  /* Rótulos: el fondo se pinta de izquierda a derecha al entrar en pantalla (el texto pasa de oscuro a blanco en el mismo borde, como el título de las FAQ) */
  .doc-top.paint-lr.is-masked{background:linear-gradient(90deg, var(--g-8) calc(var(--rv,0) * 100%), transparent calc(var(--rv,0) * 100%));}
  .doc-top.paint-lr.is-masked .doc-tag{color:transparent; -webkit-text-fill-color:transparent; background:linear-gradient(90deg, var(--g-0) calc(var(--rv,0) * 100%), var(--g-8) calc(var(--rv,0) * 100%)); -webkit-background-clip:text; background-clip:text;}
  .doc-ops .doc-top.paint-lr.is-masked{background:linear-gradient(90deg, var(--g-8) calc(var(--rv,0) * 100%), transparent calc(var(--rv,0) * 100%));}
  .doc-ops .doc-top.paint-lr.is-masked .doc-tag{background:var(--g-0); -webkit-background-clip:text; background-clip:text;}

  /* "Para operar": dos columnas como "Para inscribirte" (rótulo y título a la izquierda, lista a la derecha) */
  .doc-ops .doc-ops-grid{grid-template-columns:1fr; margin-top:0;}
  .doc-ops .doc-ops-grid li:last-child{border-bottom:1px solid rgb(255 255 255 / .18);}
  .doc-ops .h2{margin-bottom:0;}
  .doc-ops .h2{max-width:none;}

  /* "Para operar": lista numerada (01, 02…) en lugar de tildes */
  .doc-ops-grid{counter-reset:ops;}
  .doc-ops-grid li{counter-increment:ops; align-items:baseline; gap:20px;}
  .doc-ops-grid li::before{content:counter(ops, decimal-leading-zero); width:auto; height:auto; background:none; border-radius:0; color:var(--accent); font-family:var(--mono); font-size:15px;}

  /* ============ EN ACCIÓN (mismo lenguaje que el resto del sitio) ============ */
body.page-template-page-en-accion .site-header{position:fixed; inset:0 0 auto 0; width:100%; transition:background-color .3s, border-color .3s, backdrop-filter .3s;}
  body.page-template-page-en-accion .site-header:not(.is-scrolled){background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
  body.page-template-page-en-accion .site-header.is-scrolled{background:rgb(49 49 48 / .94); border-bottom-color:rgb(255 255 255 / .12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
  body.page-template-page-en-accion .site-header .nav-main a,
  body.page-template-page-en-accion .site-header .nav-main [aria-current="page"]{color:var(--g-0);}
  body.page-template-page-en-accion .site-header .nav-main a:hover{background:rgb(255 255 255 / .16); color:var(--g-0); border-radius:0;}
  body.page-template-page-en-accion .site-header .menu-btn,body.page-template-page-en-accion .site-header .lang-switch{color:var(--g-0); border-color:var(--g-0);}
  body.page-template-page-en-accion .site-header :focus-visible{outline-color:var(--g-0);}
  body.page-template-page-en-accion .crumbs{display:none;}
  .acc-hero{min-height:clamp(380px,56svh,560px);}
  section.sec.acc-list{padding-top:var(--section);}

  /* ============ Detalle de operación: la banda de cierre ocupa todo el ancho y queda sobre el footer, que se revela por debajo ============ */
  @media (min-width:821px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
    body.single-operacion main#main{position:relative; z-index:1; background:var(--g-0);}
    body.single-operacion footer{position:sticky; bottom:0; z-index:0;}
    body.single-operacion footer::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:#000; opacity:calc(var(--fd,0) * .75);}
  }
  body.single-operacion main > .page-end{padding-bottom:0;}
  body.single-operacion .page-end > .wrap{width:100%;}
  body.single-operacion .cta-band{border-radius:0; padding-inline:max(var(--gutter),calc((100vw - 1760px) / 2 + var(--gutter))); min-height:clamp(380px,62vh,640px); padding-block:clamp(56px,10vh,120px); align-items:flex-end;}
  body.single-operacion .cta-band .h2{font-size:clamp(36px,5.2vw,76px); line-height:1.08; max-width:18ch;}
  body.single-operacion .cta-band p{font-size:clamp(16px,1.6vw,22px); max-width:46ch;}
  body.single-operacion .cta-band .btn{min-height:clamp(52px,6.5vh,72px); padding:0 clamp(28px,3vw,48px); font-size:clamp(15px,1.25vw,18px); --btn-radius:0 0 clamp(14px,1.6vw,22px) 0;}

  /* Zona Franca: los números de los beneficios vuelven a ir en su cuadradito rojo pegado a la esquina (la base del título se alinea con la del número) */
  .zf-ben .zf-ben-card{padding:0; align-items:start; column-gap:clamp(16px,2.4vw,32px);}
  .zf-ben .zf-ben-card .n{display:flex; align-items:center; width:56px; height:56px; padding:0 0 0 20px; box-sizing:border-box; background:var(--accent); color:var(--g-0); font-size:15px; border-radius:0 0 14px 0;}
  .zf-ben .zf-ben-body{padding:calc(32px - (var(--tlh) / 2 + .3715) * var(--tf)) clamp(18px,2.2vw,28px) 24px 0;}

  /* ============ DETALLE DE OPERACIÓN (mismo lenguaje que el resto del sitio) ============ */
  body.single-operacion .site-header{position:fixed; inset:0 0 auto 0; width:100%; transition:background-color .3s, border-color .3s, backdrop-filter .3s;}
  body.single-operacion .site-header:not(.is-scrolled){background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
  body.single-operacion .site-header.is-scrolled{background:rgb(49 49 48 / .94); border-bottom-color:rgb(255 255 255 / .12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
  body.single-operacion .site-header .nav-main a,
  body.single-operacion .site-header .nav-main [aria-current="page"]{color:var(--g-0);}
  body.single-operacion .site-header .nav-main a:hover{background:rgb(255 255 255 / .16); color:var(--g-0); border-radius:0;}
  body.single-operacion .site-header .menu-btn,body.single-operacion .site-header .lang-switch{color:var(--g-0); border-color:var(--g-0);}
  body.single-operacion .site-header :focus-visible{outline-color:var(--g-0);}
  body.single-operacion .crumbs{display:none;}
  .op-hero{min-height:clamp(420px,62svh,640px);}
  .op-hero .zf-hero-bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(1);}
  .op-hero .zf-hero-bg .ph,.op-hero .zf-hero-bg picture{display:block; width:100%; height:100%;}
  .op-hero .h1{font-size:clamp(34px,5vw,72px); max-width:20ch;}
  .op-meta{font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--g-0); opacity:.85; align-self:flex-start;}
  .op-hero .op-meta{background:var(--accent); padding:6px 14px; opacity:1; border-radius:0 0 12px 0;}

  article.post-detail.sec{padding-block:var(--section) 0;}
  .op-cols{grid-template-columns:clamp(240px,26vw,360px) minmax(0,1fr); gap:clamp(32px,6vw,96px); margin-top:0;}
  .op-side{position:sticky; top:calc(var(--header-h) + 24px);}
  .op-side .post-facts{gap:0;}
  .op-side .post-facts > div{padding:16px 0; border-top:1px solid var(--g-4);}
  .op-side .post-facts dt{font-family:var(--mono); letter-spacing:.12em; color:var(--accent);}
  .op-side .post-facts dd{font-size:clamp(16px,1.4vw,18px); font-weight:550; margin-top:6px;}
  .op-main{display:grid; gap:clamp(28px,4vw,48px); min-width:0;}
  .op-video{max-width:min(100%,460px);}
  .op-video .video-frame{border-radius:0 0 clamp(36px,6vw,72px) 0;}
  .op-main .post-text{max-width:64ch;}
  @media (max-width:900px){ .op-cols{grid-template-columns:1fr;} .op-side{position:static; order:2;} }

  /* Navegación entre operaciones */
  .post-nav{border-top:0; gap:0; margin-top:clamp(56px,8vw,104px); padding-top:0;}
  .post-nav a,.post-nav > span{padding:clamp(20px,2.6vw,32px) 0; border-top:1px solid var(--g-4);}
  .post-nav a{gap:8px;}
  .post-nav a small{font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-size:12px;}
  .post-nav a strong{font-size:clamp(18px,2vw,26px); font-weight:650; letter-spacing:-.02em; line-height:1.2;}
  .post-nav a:hover strong{text-decoration:none; color:var(--accent);}
  .post-nav .next{padding-left:clamp(16px,3vw,40px);}
  article.post-detail + .page-end{padding-top:var(--section);}

  /* Detalle con video: el video a la izquierda (fijo) y a la derecha el texto con los datos de la operación */
  .op-cols.has-video{grid-template-columns:clamp(260px,32vw,460px) minmax(0,1fr);}
  .op-cols.has-video > .op-video{position:sticky; top:calc(var(--header-h) + 24px); max-width:none;}
  .op-cols.has-video .op-side{position:static;}
  .op-cols.has-video .op-side .post-facts{max-width:56ch;}
  @media (max-width:900px){ .op-cols.has-video{grid-template-columns:1fr;} .op-cols.has-video > .op-video{position:static;} }

  /* Detalle de operación: el video va con las esquinas rectas */
  .op-video .video-frame,.op-video .video-frame video{border-radius:0;}

  /* Detalle de operación: la fecha/cliente va a la derecha, alineada con la base del título */
  @media (min-width:821px){
    .op-hero .zf-hero-msg{flex-direction:row; justify-content:space-between; align-items:flex-end; gap:clamp(24px,4vw,64px);}
    .op-hero .op-meta{order:2; align-self:flex-end; margin-bottom:.35em; flex:none;}
  }

  /* Etiqueta de fecha/cliente del hero del detalle: fondo negro y esquinas rectas */
  .op-hero .op-meta{background:var(--g-8); border-radius:0;}

  /* Video horizontal: se respeta su proporción (sin recortar). Va a todo el ancho y debajo el texto con los datos en dos columnas */
  .op-video .video-frame video{object-fit:contain;}
  .op-cols.has-video.is-landscape{grid-template-columns:1fr; gap:clamp(28px,4vw,56px);}
  .op-cols.has-video.is-landscape > .op-video{position:static;}
  .op-cols.has-video.is-landscape .op-main{grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr); align-items:start; gap:clamp(32px,6vw,96px);}
  @media (max-width:900px){ .op-cols.has-video.is-landscape .op-main{grid-template-columns:1fr;} }

  /* Tira de logos: todos en silueta de un único gris (filtro #tu-mono de la home); al pasar el mouse recuperan su color */
  .logos-strip .logos img{filter:url(#tu-mono); mix-blend-mode:multiply; opacity:.5;}
  .logos-strip .logos li:hover img,.logos-strip .logos a:focus-visible img{filter:none; mix-blend-mode:normal; opacity:1;}

  /* CTA band en tablet y mobile: en columna, el contenido arriba y los botones abajo (al final al ser alta) */
  @media (max-width:820px){
    body[class] .cta-band{flex-direction:column; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:28px;}
    body[class] .cta-band .btn-row{margin-left:0; flex:none; align-items:flex-start;}
  }

  /* Botón de idioma (ES/EN): esquinas rectas, en el header y en el menú móvil */
  .lang-switch,.drawer .lang-switch{border-radius:0;}

  /* Cómo trabajamos en tablet y mobile: sin sticky (las cards ya no se apilan al scrollear; van una debajo de otra) */
  @media (max-width:1024px){
    .svc-layout{--rh:auto;}
    .svc-head-in{position:static; height:auto; margin-bottom:24px; padding-block:24px 0;}
    .svc-inner{position:relative; top:auto; height:auto; min-height:0; margin-bottom:0;}
    .svc-panel::after{display:none;}
    .svc-panel{transform:none !important;}
  }

  /* Menú móvil: botón hamburguesa con esquinas rectas; panel en --g-7 con entrada animada */
  .menu-btn{border-radius:0;}
  dialog.drawer{background:var(--g-7); color:var(--g-0); border-left:1px solid var(--g-6);}
  dialog.drawer::backdrop{background:rgba(20,20,20,.55);}
  .drawer-head{border-bottom-color:var(--g-6);}
  .drawer .menu-btn{color:var(--g-0); border-color:var(--g-0);}
  .drawer nav a{border-bottom-color:var(--g-6); color:var(--g-0);}
  .drawer nav a.sub{color:var(--g-4);}
  .drawer nav a:hover{color:var(--g-3);}
  .drawer :focus-visible{outline-color:var(--g-0);}
  .drawer nav > *{opacity:0; transform:translateX(18px);}
  @media (prefers-reduced-motion:no-preference){
    dialog.drawer[open]{animation:drawerIn .42s cubic-bezier(.16,1,.3,1) both;}
    dialog.drawer[open]::backdrop{animation:drawerFade .42s ease both;}
    dialog.drawer.is-closing{animation:drawerOut .26s cubic-bezier(.4,0,1,1) both;}
    dialog.drawer.is-closing::backdrop{animation:drawerFadeOut .26s ease both;}
    dialog.drawer[open] nav > *{animation:drawerItem .5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(.12s + var(--i,0) * .05s);}
    dialog.drawer[open] nav > :nth-child(1){--i:0;} dialog.drawer[open] nav > :nth-child(2){--i:1;} dialog.drawer[open] nav > :nth-child(3){--i:2;}
    dialog.drawer[open] nav > :nth-child(4){--i:3;} dialog.drawer[open] nav > :nth-child(5){--i:4;} dialog.drawer[open] nav > :nth-child(6){--i:5;}
  }
  @media (prefers-reduced-motion:reduce){ .drawer nav > *{opacity:1; transform:none;} }
  @keyframes drawerIn{from{transform:translateX(100%);} to{transform:none;}}
  @keyframes drawerOut{from{transform:none;} to{transform:translateX(100%);}}
  @keyframes drawerFade{from{opacity:0;} to{opacity:1;}}
  @keyframes drawerFadeOut{from{opacity:1;} to{opacity:0;}}
  @keyframes drawerItem{from{opacity:0; transform:translateX(18px);} to{opacity:1; transform:none;}}

  /* Los <button> sin color propio toman el azul del sistema en algunos navegadores móviles (iOS/Android); el ícono (currentColor) se veía azul. Se fija el color. */
  .menu-btn,.to-top{color:var(--g-8); -webkit-text-fill-color:currentColor; -webkit-tap-highlight-color:transparent;}
  .to-top svg,.menu-btn svg{color:inherit; stroke:currentColor;}
  .drawer .menu-btn{color:var(--g-0);}

  /* Cursor personalizado: punto que crece al pasar sobre elementos interactivos (solo mouse; en táctil no se activa) */
  .cursor-dot{position:fixed; top:0; left:0; z-index:9999; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:#fff; mix-blend-mode:difference; pointer-events:none; opacity:0; scale:.5; transition:opacity .25s ease, scale .45s cubic-bezier(.16,1,.3,1); will-change:translate,scale;}
  .cursor-dot.is-on{opacity:1;}
  .cursor-dot.is-hover{scale:1;}
  .cursor-dot.is-text{opacity:0;}
  html.has-cursor-dot,html.has-cursor-dot *{cursor:none!important;}
  html.has-cursor-dot input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),html.has-cursor-dot textarea{cursor:text!important;}
  /* Con el menú (dialog) abierto el punto queda tapado por la capa superior: se usa el cursor normal */
  html.has-cursor-dot:has(dialog[open]) *{cursor:auto!important;}
  html.has-cursor-dot:has(dialog[open]) a,html.has-cursor-dot:has(dialog[open]) button{cursor:pointer!important;}
  html.has-cursor-dot:has(dialog[open]) .cursor-dot{display:none;}