/* Durán & Quiroz Abogados · sistema de diseño canon (guía v3) */
:root{
  --ink:#16201C; --paper:#F4F1E8; --pine:#1E5235; --mint:#8FC9A9;
  --line:#DCD7C8; --muted:#565B53;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",Arial,Helvetica,sans-serif;
  --mono:"IBM Plex Mono","Courier New",Courier,monospace;
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--pine);color:var(--paper)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:2px}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.grain>.wrap{position:relative;z-index:1}

/* ---------- tipografía ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:560;line-height:1.06;letter-spacing:-.01em;font-optical-sizing:auto}
h1{font-size:clamp(44px,7.4vw,104px)}
h2{font-size:clamp(34px,4.6vw,58px);line-height:1.1}
h3{font-size:21px;line-height:1.3}
p{color:var(--ink)}
.lede{font-size:18px;line-height:1.65;color:var(--muted);max-width:640px}
.accent{font-style:italic;color:var(--pine)}
.on-ink .accent{color:var(--mint)}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--pine)}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--pine);flex:none}
.on-ink .eyebrow{color:var(--mint)}
.on-ink .eyebrow::before{background:var(--mint)}
.mono{font-family:var(--mono)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.nav.scrolled{background:rgba(244,241,232,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:18px;font-weight:560}
.brand svg{width:34px;height:34px;flex:none}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease)}
.nav-links a:hover{color:var(--pine)}
.langs{display:flex;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.langs a{color:var(--muted);padding:3px 2px;border-bottom:2px solid transparent}
.langs a:hover{color:var(--pine)}
.langs a[aria-current="true"]{color:var(--pine);border-bottom-color:var(--pine)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--pine);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 22px;border-radius:99px;border:1px solid var(--pine);transition:transform .3s var(--ease),background .3s var(--ease);cursor:pointer}
.btn:hover{transform:translateY(-4px)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--pine);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--pine)}
.nav .btn{padding:10px 18px}

/* ---------- secciones ---------- */
.sec{padding:104px 0;border-top:1px solid var(--line)}
.sec-head{display:grid;gap:22px;margin-bottom:56px;max-width:820px}
.sec--ink{background:var(--ink);color:var(--paper);border-top:none}
.sec--ink p{color:var(--paper)}

/* ---------- hero ---------- */
.hero{padding:190px 0 110px;border-top:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:center}
.hero-copy{display:grid;gap:26px;justify-items:start}
.hero .lede{max-width:600px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:6px 12px}


/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;white-space:nowrap}
.marquee .track{display:inline-flex;gap:34px;animation:mq 30s linear infinite;padding-right:34px}
.marquee span{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:34px}
.marquee i{width:6px;height:6px;border-radius:50%;background:var(--pine);display:inline-block}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--paper);display:grid;gap:14px;align-content:start;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--pine)}
.card p{font-size:15px;color:var(--muted)}
.idx{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--pine)}
.pillrow{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border-radius:99px;padding:5px 11px}
.pill--pine{background:var(--pine);color:var(--paper)}
.pill--mint{background:var(--mint);color:var(--ink)}
.pill--ghost{border:1px solid var(--line);color:var(--muted)}
.card-link{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);display:inline-flex;gap:8px;align-items:center}
.card-link .ar{transition:transform .3s var(--ease)}
.card:hover .card-link .ar,.card-link:hover .ar{transform:translateX(4px)}

/* precios */
.price-line{display:flex;align-items:baseline;gap:10px;margin-top:auto}
.price-from{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.price{font-family:var(--mono);font-size:27px;color:var(--ink)}
.price-cur{font-family:var(--mono);font-size:12px;color:var(--muted)}
.price-note{margin-top:34px;font-size:14px;color:var(--muted);max-width:720px}
.price-date{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* proceso */
.step .num{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--pine)}

/* equipo */
.plate{width:58px;height:58px;border-radius:6px;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:21px;box-shadow:inset 0 0 0 1px rgba(244,241,232,.25)}
.pl-ink{background:var(--ink);color:var(--paper)}
.pl-pine{background:var(--pine);color:var(--paper)}
.pl-mint{background:var(--mint);color:var(--ink)}
.role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.g2{grid-template-columns:repeat(2,1fr)}
.team-note{margin-top:30px;font-size:14px;color:var(--muted)}

/* manifiesto */
.manif{display:grid;gap:30px;max-width:900px}
.manif h2{font-size:clamp(30px,4.2vw,52px)}
.manif .body{color:rgba(244,241,232,.82);font-size:17px;max-width:760px}
.manif .close{font-family:var(--serif);font-style:italic;font-size:23px;color:var(--mint)}

/* datos (sección oscura de cifras) */
.data-card{border:1px solid rgba(220,215,200,.22);border-radius:14px;padding:26px;display:grid;gap:12px;background:transparent;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.data-card:hover{transform:translateY(-4px);border-color:var(--mint)}
.data-fig{font-family:var(--mono);font-size:22px;color:var(--mint);line-height:1.3}
.data-card p{color:rgba(244,241,232,.8);font-size:14px}
.data-note{margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(220,215,200,.6)}

/* contacto */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.channel{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 2px;border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.channel:hover{border-color:var(--pine)}
.channel .lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.channel .val{font-family:var(--serif);font-size:19px}
.channel .ar{color:var(--pine);transition:transform .3s var(--ease)}
.channel:hover .ar{transform:translateX(4px)}
.form-card{border:1px solid var(--line);border-radius:16px;padding:32px;display:grid;gap:16px}
.form-card label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:grid;gap:8px}
.form-card input,.form-card textarea{width:100%;background:transparent;border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);transition:border-color .3s var(--ease)}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--pine)}
.form-card textarea{min-height:120px;resize:vertical}
.form-card .form-consent{display:flex;align-items:flex-start;gap:10px;font-family:var(--sans);font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--muted)}
.form-card .form-consent input{width:auto;min-width:16px;height:16px;margin-top:2px;accent-color:var(--pine)}
.form-note{font-size:12.5px;color:var(--muted)}
.form-note a{color:var(--pine);text-decoration:underline;text-underline-offset:3px}
.form-ok{display:none;font-size:14px;color:var(--pine)}
.form-ok.show{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* faq */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font-family:var(--serif);font-size:19px;font-weight:560;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--pine)}
.faq summary .pm{font-family:var(--mono);font-size:18px;color:var(--pine);transition:transform .3s var(--ease);flex:none}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 2px 24px;font-size:15px;color:var(--muted);max-width:760px}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center}
.crumb a:hover{color:var(--pine)}

/* disclaimer */
.legalstrip{border-top:1px solid var(--line);padding:22px 0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--paper);padding:84px 0 40px}
.foot-mark{font-family:var(--serif);font-size:clamp(52px,10.5vw,148px);line-height:1;letter-spacing:-.015em;margin-bottom:64px}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(220,215,200,.2)}
.foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-bottom:16px}
.foot-grid a,.foot-grid p{display:block;color:rgba(244,241,232,.82);font-size:14.5px;padding:5px 0;transition:color .3s var(--ease)}
.foot-grid a:hover{color:var(--mint)}
.foot-legal{padding-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:12.5px;color:rgba(220,215,200,.62)}

/* whatsapp flotante */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;background:var(--pine);display:grid;place-items:center;box-shadow:0 8px 24px rgba(22,32,28,.28);transition:transform .3s var(--ease)}
.wa-float:hover{transform:translateY(-4px)}
.wa-float svg{width:26px;height:26px;fill:var(--paper)}

/* reveals */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav-links{display:none}
  .sec{padding:78px 0}
  .hero{padding:150px 0 80px}
  .g3,.g4,.g2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* skip link + prose (aviso) + hero secundario */
.skip{position:absolute;left:-9999px;top:0;background:var(--pine);color:var(--paper);padding:10px 16px;border-radius:0 0 10px 0;z-index:99}
.skip:focus{left:0}
.hero--sub{padding:170px 0 84px}
.hero--sub .wrap{display:block}
.prose{max-width:760px}
.prose h2{font-size:25px;margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px;color:var(--muted);font-size:15.5px}

/* cierre de postura en secciones oscuras */
.ink-close{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--mint);margin-top:30px;max-width:760px}


/* ---------- actualizacion 2026-08-29 · contenido, boletin y datos ---------- */

/* movil: en la barra solo vive el sello DQ */
@media (max-width:680px){
  .brand span{display:none}
  .brand svg{width:38px;height:38px}
}

/* boletin en el footer (captura de correos, Web3Forms) */
.nl{padding:44px 0 6px}
.nl-lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.nl p{color:rgba(244,241,232,.82);font-size:14.5px;max-width:540px}
.nl-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;max-width:600px}
.nl-form input[type=email]{flex:1;min-width:220px;background:transparent;border:1px solid rgba(220,215,200,.35);border-radius:99px;padding:12px 18px;font-family:var(--sans);font-size:14.5px;color:var(--paper);transition:border-color .3s var(--ease)}
.nl-form input[type=email]::placeholder{color:rgba(244,241,232,.45)}
.nl-form input[type=email]:focus{outline:none;border-color:var(--mint)}
.nl-form .btn{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.nl-note{font-size:12px;color:rgba(220,215,200,.62);margin-top:10px}
.nl-note a{text-decoration:underline;text-underline-offset:3px}
.nl-ok{display:none;font-size:14px;color:var(--mint);margin-top:10px}
.nl-ok.show{display:block}

/* banda de cifras del despacho (seccion oscura del index) */
.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.data-fig{font-size:30px}
.data-fig .unit{font-size:14px;color:rgba(244,241,232,.7);margin-left:2px}
@media (max-width:980px){.data-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.data-grid{grid-template-columns:1fr}}

/* articulos y recursos */
.art-date{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prose h3{font-size:19px;margin:26px 0 10px}
.prose ul{margin:0 0 14px 18px;color:var(--muted);font-size:15.5px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink);font-weight:600}

/* resaltado de lectura (manifiesto del index) */
.manif .body span{color:rgba(244,241,232,.38);transition:color .45s var(--ease)}
.manif .body span.leida{color:rgba(244,241,232,.92)}
/* dos renglones de precio apilados */
.price-line + .price-line{margin-top:6px}

/* ---------- rediseño 2026-09-05 · hero de aterrizaje, pin y pestañas ---------- */

/* 1 · hero-home: dos columnas, acciones arriba del lienzo. Las palancas del pliegue
   (H1, padding superior, gap del hero-top, hero-act y scene-wrap) estan calibradas
   para que a 1366x768 entren H1, lede, los dos CTAs, los chips y >=180px de lienzo */
.hero--home{padding:112px 0 92px}
.hero--home .wrap{display:block}
.hero--home h1{font-size:clamp(36px,4.4vw,64px)}
.hero--home .hero-top{display:grid;grid-template-columns:1.28fr .72fr;gap:40px;align-items:start}
.hero--home .hero-title{display:grid;grid-template-columns:1fr;gap:20px;justify-items:start}
.hero--home .hero-side{display:grid;grid-template-columns:1fr;gap:16px;padding-top:8px}
.hero--home .hero-side .lede{max-width:none;border-left:2px solid var(--line);padding-left:22px}
.hero--home .hero-act{display:grid;grid-template-columns:1fr;gap:12px;justify-items:start;margin-top:24px}

/* 2 · scene-base: el estado declarado es el estado final aterrizado */
.scene-wrap{margin-top:32px}
.scene-stage{position:relative;width:100%;max-width:890px;margin:0 auto;aspect-ratio:1200 / 620}
.scene{width:100%;height:100%}
.scene .rt{fill:none;stroke:var(--pine);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:0;opacity:1;transition:opacity .5s var(--ease),stroke .5s var(--ease)}
.scene .rt-sat{fill:none;stroke:var(--line);stroke-width:1;opacity:0;transition:opacity .5s var(--ease)}
.scene .station{fill:var(--pine);transition:fill .3s var(--ease)}
.scene .node{fill:var(--paper);stroke:var(--pine);stroke-width:1.8;opacity:1;transition:opacity .5s var(--ease),stroke .5s var(--ease),stroke-width .5s var(--ease)}
.scene .hub{fill:var(--paper);stroke:none}
.scene .halo{fill:none;stroke:var(--mint);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.scene .seal-g{transform-box:fill-box;transform-origin:center;transform:scale(1);will-change:transform}
.scene .seal-inner{stroke-dasharray:100;stroke-dashoffset:0}
.scene .sat{fill:var(--paper);stroke:var(--line);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.9);transition:opacity .5s var(--ease),stroke .5s var(--ease),transform .5s var(--ease)}
.scene .traveler{fill:var(--pine);opacity:0}

/* 3 · scene-anim: la animación solo recorre ese estado base */
@keyframes dq-node-in{from{opacity:0}}
@keyframes dq-draw{from{stroke-dashoffset:100}}
@keyframes dq-travel{from{offset-distance:0%;opacity:0}18%{opacity:1}84%{opacity:1}to{offset-distance:100%;opacity:0}}
@keyframes dq-land{from{transform:scale(.92)}}
@keyframes dq-halo{from{transform:scale(1);opacity:.5}to{transform:scale(1.5);opacity:0}}
.scene-wrap.in .node{animation:dq-node-in .5s var(--ease)}
.scene-wrap.in .r-us{animation:dq-draw 1.6s var(--ease) .15s backwards}
.scene-wrap.in .r-br{animation:dq-draw 1.6s var(--ease) .4s backwards}
.scene-wrap.in .seal-g{animation:dq-land .5s var(--ease) 2.65s backwards}
.scene-wrap.in .halo{animation:dq-halo .9s var(--ease) 2.65s}
.scene-wrap.tab-2 .seal-inner{animation:dq-draw .9s var(--ease)}

/* 4 · scene-supports: los viajeros solo existen si hay offset-path */
@supports (offset-path: path("M0,0 L1,1")){
  .scene .traveler{transform-box:fill-box;transform-origin:center}
  .scene .t-us{offset-path:path("M170,120 C330,200 470,300 600,430")}
  .scene .t-br{offset-path:path("M1030,170 C880,240 720,330 600,430")}
  .scene-wrap.in .t-us{animation:dq-travel .9s var(--ease) 1.75s backwards}
  .scene-wrap.in .t-br{animation:dq-travel .9s var(--ease) 1.9s backwards}
}
@supports not (offset-path: path("M0,0 L1,1")){
  .scene .traveler{display:none}
}

/* estados por pestaña de la escena */
.scene-wrap.scene-js .station{fill:var(--line)}
.scene-wrap.scene-js .station.lit{fill:var(--pine)}
.scene-wrap.tab-2 .rt{opacity:.35}
.scene-wrap.tab-3 .rt{opacity:.25}
.scene-wrap.tab-2 .node,.scene-wrap.tab-3 .node{stroke:var(--muted);stroke-width:1.4;opacity:.65}
.scene-wrap.tab-3 .rt-sat{opacity:1}
.scene-wrap.tab-3 .sat{opacity:1;transform:none;stroke:var(--pine)}

/* 5 · scene-labels: texto HTML sobre el lienzo, nunca dentro del svg */
.scene-labels{position:absolute;inset:0;list-style:none;pointer-events:none}
.scene-labels li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,0);white-space:nowrap;line-height:1.2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .5s var(--ease),opacity .5s var(--ease)}
.scene-labels li.is-on{color:var(--pine)}
.scene-wrap.tab-1 .lb-node{color:var(--pine)}
.scene-labels .lb-sat{opacity:0}
.scene-wrap.tab-3 .lb-sat{opacity:1;color:var(--pine)}

/* 6 · scene-bar: las tres fases con anillo de progreso y el control de pausa.
   La zona que pausa por hover o foco son los propios botones de pestaña, nunca
   el ancho completo de la fila ni el lienzo (WCAG 2.2.2 con control visible) */
.scene-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 30px;margin-top:30px}
.scene-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:34px;width:max-content;max-width:100%;margin:0}
.scene-tabs [role=tab]{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px;padding:0 0 8px;border-bottom:2px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.scene-tabs [role=tab]:hover{color:var(--pine)}
.scene-tabs [role=tab][aria-selected=true]{color:var(--pine);border-bottom-color:var(--pine)}
.scene-tabs .tab-n{color:var(--muted)}
.scene-tabs [role=tab][aria-selected=true] .tab-n{color:var(--pine)}
.scene-tabs .ring{width:20px;height:20px;flex:none}
.scene-tabs .ring circle{fill:none;stroke-width:2;transform:rotate(-90deg);transform-origin:center}
.scene-tabs .ring-bg{stroke:var(--line)}
.scene-tabs .ring-p{stroke:var(--pine);stroke-dasharray:106.8;stroke-dashoffset:calc(106.8 - 106.8 * var(--p,0))}
.scene-pause{flex:none;background:none;border:1px solid var(--line);border-radius:99px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:7px 15px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.scene-pause:hover{color:var(--pine);border-color:var(--pine)}
.scene-pause[aria-pressed=true]{color:var(--pine);border-color:var(--pine)}

/* 7 · scene-panel y caption */
.scene-panels{max-width:660px;margin:22px auto 0;min-height:48px}
.scene-panel{text-align:center;font-size:15px;color:var(--muted);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.scene-panel:focus-visible{outline-offset:6px}
.scene-panel.enter{opacity:0;transform:translateY(10px)}
.scene-cap{margin:18px auto 0;max-width:640px;text-align:center;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--muted)}

/* 8 · sec-head--split: título a la izquierda, lede con hairline a la derecha */
.sec-head--split{grid-template-columns:1.05fr .95fr;column-gap:56px;row-gap:22px;max-width:none;align-items:start}
.sec-head--split>.eyebrow,.sec-head--split>h2{grid-column:1}
.sec-head--split>.lede{grid-column:2;grid-row:1 / span 2;align-self:start;margin:0;max-width:none;border-left:2px solid var(--line);padding-left:22px}

/* 9 · clipline: el título se revela recortado por una banda */
.clipline{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.clipline>span{display:block;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease)}
.rv:not(.in) .clipline>span{clip-path:inset(0 0 100% 0)}

/* 10 · pin del proceso: la clase pinned solo la pone el JS a partir de 768px.
   Fijado, el bloque es una reja de dos columnas: a la izquierda el indice de los
   cuatro pasos con su riel de progreso, a la derecha el paso activo ampliado */
.pinwrap{position:relative}
.pinsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.pinstep{display:grid;grid-template-columns:minmax(0,1fr)}
.pinmini{display:none}
.pinrail{display:none}
.pinwrap.pinned{height:calc(var(--pasos,4) * var(--pin-alto,50dvh))}
.pinwrap.pinned .pinstick{position:sticky;top:72px;height:auto;display:grid;grid-template-rows:auto auto;gap:0}
.pinwrap.pinned .sec-head{margin-bottom:40px;padding-top:28px}
.pinwrap.pinned .pinsteps{position:relative;grid-template-columns:minmax(230px,.4fr) 1fr;grid-template-rows:repeat(4,minmax(0,1fr));column-gap:48px;row-gap:0;min-height:52dvh;align-items:stretch}
.pinwrap.pinned .pinstep{display:contents}
.pinwrap.pinned .pinmini{display:flex;align-items:baseline;gap:14px;grid-column:1;padding:16px 0 0;border-top:1px solid var(--line);color:var(--muted);opacity:.6;transition:opacity .5s var(--ease),color .5s var(--ease)}
.pinwrap.pinned .pinmini-n{flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.pinwrap.pinned .pinmini-t{font-family:var(--serif);font-size:21px;font-weight:560;line-height:1.2;letter-spacing:-.01em}
.pinwrap.pinned .pinstep.on .pinmini{opacity:1;color:var(--pine)}
.pinwrap.pinned .pinstep .pinbody{grid-column:2;grid-row:1 / span 4;width:100%;max-width:640px;margin:0;padding:40px 44px;gap:16px;min-height:52dvh;align-content:center;opacity:0;transform:translateY(48px);transition:opacity .5s var(--ease),transform .5s var(--ease);will-change:opacity,transform;pointer-events:none}
.pinwrap.pinned .pinstep.on .pinbody{opacity:1;transform:none;pointer-events:auto}
.pinwrap.pinned .pinstep .pinbody:hover{transform:none;border-color:var(--line)}
/* el numeral es folio editorial: va en mono (guia v5 4.2 y 4.4); el Fraunces
   grande se reserva para el titulo del paso, que si es titulo */
.pinwrap.pinned .pinstep .pinbody .num{font-family:var(--mono);font-size:22px;line-height:1.1;letter-spacing:.18em;color:var(--pine)}
.pinwrap.pinned .pinstep h3{font-size:34px;line-height:1.12}
.pinwrap.pinned .pinstep .pinbody p{font-size:18px;line-height:1.6;max-width:46ch}
.pinwrap.pinned .pinrail{display:block;position:absolute;left:-20px;top:0;height:100%;width:2px}
.pinrail svg{width:2px;height:100%}
.pinrail line{stroke-width:2}
.pinrail .pinrail-bg{stroke:var(--line)}
.pinrail .pinrail-fg{stroke:var(--pine);stroke-dasharray:100;stroke-dashoffset:calc(100 - 100 * var(--pp,0))}

/* 11 · reduced: sin ciclo, sin control de pausa, sin pin, escena completa y estática */
@media (prefers-reduced-motion:reduce){
  .scene-pause{display:none}
  .pinwrap,.pinwrap.pinned{height:auto!important}
  .pinwrap.pinned .pinstick,.pinwrap .pinstick{position:static;height:auto;overflow:visible;display:block}
  .pinwrap.pinned .sec-head,.pinwrap .sec-head{margin-bottom:56px;padding-top:0}
  .pinwrap.pinned .pinsteps,.pinwrap .pinsteps{position:static;grid-template-columns:repeat(4,1fr);grid-template-rows:none;min-height:0;align-content:start;gap:22px}
  .pinwrap.pinned .pinstep,.pinwrap .pinstep{display:grid;grid-area:auto;opacity:1;transform:none;will-change:auto;pointer-events:auto}
  .pinwrap.pinned .pinmini,.pinwrap .pinmini{display:none}
  .pinwrap.pinned .pinstep .pinbody,.pinwrap .pinstep .pinbody{grid-column:auto;grid-row:auto;max-width:none;min-height:0;padding:26px;gap:14px;align-content:start;opacity:1;transform:none;will-change:auto;pointer-events:auto}
  .pinwrap.pinned .pinstep .pinbody .num,.pinwrap .pinstep .pinbody .num{font-family:var(--mono);font-size:13px;line-height:1.6;letter-spacing:.14em}
  .pinwrap.pinned .pinstep h3,.pinwrap .pinstep h3{font-size:21px;line-height:1.3}
  .pinwrap.pinned .pinstep .pinbody p,.pinwrap .pinstep .pinbody p{font-size:15px;max-width:none}
  .pinwrap.pinned .pinrail,.pinwrap .pinrail{display:none}
  .scene .traveler{display:none}
  .scene-panel.enter{opacity:1;transform:none}
  .rv:not(.in) .clipline>span,.clipline>span{clip-path:none}
}

/* 12 · responsive */
@media (max-width:980px){
  .hero--home .hero-top{grid-template-columns:1fr;gap:24px}
  .hero--home .hero-side{padding-top:0}
  .hero--home .hero-side .lede{border-left:0;border-top:2px solid var(--line);padding-left:0;padding-top:18px}
  .sec-head--split{grid-template-columns:1fr;max-width:820px}
  .sec-head--split>.lede{grid-column:1;grid-row:auto;border-left:0;border-top:2px solid var(--line);padding-left:0;padding-top:18px}
  .pinwrap .pinsteps{grid-template-columns:repeat(2,1fr)}
  .scene-stage{max-width:735px}
  .scene-labels li{font-size:10px;letter-spacing:.08em}
}
@media (max-width:767px){
  .pinwrap,.pinwrap.pinned{height:auto!important}
  .pinwrap.pinned .pinstick,.pinwrap .pinstick{position:static;height:auto;overflow:visible;display:block}
  .pinwrap.pinned .sec-head,.pinwrap .sec-head{margin-bottom:40px;padding-top:0}
  .pinwrap.pinned .pinsteps,.pinwrap .pinsteps{position:static;grid-template-columns:repeat(2,1fr);grid-template-rows:none;min-height:0;align-content:start;gap:22px}
  .pinwrap.pinned .pinstep,.pinwrap .pinstep{display:grid;grid-area:auto;opacity:1;transform:none;will-change:auto;pointer-events:auto}
  .pinwrap.pinned .pinmini,.pinwrap .pinmini{display:none}
  .pinwrap.pinned .pinstep .pinbody,.pinwrap .pinstep .pinbody{grid-column:auto;grid-row:auto;max-width:none;min-height:0;padding:28px;gap:14px;align-content:start;opacity:1;transform:none;will-change:auto;pointer-events:auto}
  .pinwrap.pinned .pinstep .pinbody .num,.pinwrap .pinstep .pinbody .num{font-family:var(--mono);font-size:13px;line-height:1.6;letter-spacing:.14em}
  .pinwrap.pinned .pinstep h3,.pinwrap .pinstep h3{font-size:21px;line-height:1.3}
  .pinwrap.pinned .pinstep .pinbody p,.pinwrap .pinstep .pinbody p{font-size:15px;max-width:none}
  .pinwrap.pinned .pinrail,.pinwrap .pinrail{display:none}
}
@media (max-width:680px){
  .hero--home{padding:104px 0 70px}
  .hero--home .hero-act{margin-top:22px}
  .scene-wrap{margin-top:28px}
  /* los 4 pasos apilados en una sola columna: es criterio bloqueante del plan */
  .pinwrap .pinsteps,.pinwrap.pinned .pinsteps{grid-template-columns:1fr}
  /* el plan fija el lienzo de teléfono en 300px de alto y recorta con slice */
  .scene-stage{max-width:none;width:calc(100% + 48px);margin-left:-24px;margin-right:-24px;aspect-ratio:auto;height:300px}
  /* el recorte de slice nunca debe comerse los nodos: el dibujo se encoge lo
     justo para caber en la ventana recortada de 320px a 680px */
  .scene .scene-fit{transform-box:view-box;transform-origin:600px 345px;transform:scale(.88)}
  /* sin etiqueta no hay nodo: los satelites y sus hairlines no se dibujan en
     telefono, su contenido vive completo en el panel de la pestaña 03 */
  .scene .rt-sat,.scene .sat,.scene .check{display:none}
  .scene-labels li{font-size:10px;letter-spacing:.04em}
  /* left y top se fijan aqui, no por --x/--y: esas variables van en el style del li
     y una declaracion en linea gana siempre a la hoja. 14px de aire contra el borde */
  .scene-labels .lb-us{left:14px;top:11%;transform:translate(0,0)}
  .scene-labels .lb-br{left:auto;right:14px;top:11%;transform:translate(0,0)}
  .scene-labels .lb-mx{top:89%}
  .scene-labels .lb-sat{display:none}
  /* pestañas y control de pausa en dos renglones limpios */
  .scene-bar{flex-direction:column;gap:14px;margin-top:22px}
  .scene-tabs{gap:16px;width:100%}
  .scene-tabs [role=tab]{gap:8px}
  .scene-panels{min-height:72px}
  .scene-cap{font-size:13px}
}
@media (max-width:420px){
  .scene .scene-fit{transform:scale(.84)}
  .scene-tabs{gap:10px}
  .scene-tabs [role=tab]{gap:6px;font-size:9.5px;letter-spacing:.04em}
  .scene-tabs .ring{width:14px;height:14px}
  /* el numeral de fase se conserva: se encoge, no se esconde (guia v5 4.4) */
  .scene-tabs .tab-n{font-size:8.5px;letter-spacing:.02em}
  .scene-pause{font-size:9.5px;letter-spacing:.04em;padding:6px 13px}
}
@media (max-width:400px){
  /* la ventana recortada se angosta: el dibujo baja otro escalon para que los dos
     nodos de origen conserven su aire contra el borde */
  .scene .scene-fit{transform:scale(.78)}
}
@media (max-width:360px){
  .scene .scene-fit{transform:scale(.68)}
  /* por debajo de 360px el numeral si se retira: con el, las tres fases pasan a
     dos renglones y la franja perderia los dos renglones limpios */
  .scene-tabs .tab-n{display:none}
}


/* ---------- iteración 2026-09-06 · China, cumplimiento, menos cards y más movimiento ---------- */

/* 13 · escena-china: el tercer origen entra por el ápice del arco, sobre el eje
   del sello, para que las tres rutas queden separadas 204 unidades a media altura */
.scene-wrap.in .r-cn{animation:dq-draw 1.6s var(--ease) .275s backwards}
@supports (offset-path: path("M0,0 L1,1")){
  .scene .t-cn{offset-path:path("M600,76 C656,178 544,324 600,430")}
}
@media (max-width:680px){
  .scene-labels .lb-cn{left:50%;top:8px;transform:translate(-50%,0)}
}

/* 14 · escena-bucles: los únicos bucles nuevos del sitio viven en el lienzo.
   Duraciones no armónicas (7.6 / 8.2 / 8.8 s) para que nunca se sincronicen.
   Los arranques van separados de verdad (0 / 2.8 / 5.5 s) y la ventana visible
   ocupa el 43% del ciclo: la union de las tres rutas no deja hueco quieto.
   Los tramos intermedios reparten la distancia en pasos parejos para que el
   var(--ease) de cada intervalo no deje al punto arrastrandose al final */
@keyframes dq-trip{0%{offset-distance:0%;opacity:0}3%{offset-distance:4%;opacity:1}13%{offset-distance:28%;opacity:1}23%{offset-distance:51%;opacity:1}32%{offset-distance:74%;opacity:1}42%{offset-distance:97%;opacity:1}46%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes dq-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@supports (offset-path: path("M0,0 L1,1")){
  .scene-wrap.in .t-us{animation:dq-trip 7.6s var(--ease) 0s infinite}
  .scene-wrap.in .t-cn{animation:dq-trip 8.2s var(--ease) 2.8s infinite}
  .scene-wrap.in .t-br{animation:dq-trip 8.8s var(--ease) 5.5s infinite}
}
.scene .traveler{transition:fill .5s var(--ease)}
.scene-wrap.tab-2 .traveler{fill:var(--muted)}
/* las estaciones respiran desfasadas, siempre después del encendido más tardío */
.scene-wrap.in .station{animation:dq-pulse 4.4s var(--ease) infinite}
.scene-wrap.in .st-1{animation-delay:2.2s}
.scene-wrap.in .st-2{animation-delay:2.65s}
.scene-wrap.in .st-3{animation-delay:3.1s}
.scene-wrap.in .st-4{animation-delay:3.55s}
.scene-wrap.in .st-5{animation-delay:4s}
.scene-wrap.in .st-6{animation-delay:4.45s}

/* 15 · escena-redibujo: al cambiar de pestaña las rutas se atenúan y se redibujan */
.scene-wrap.redraw .r-us{animation:dq-draw 1.1s var(--ease) 0s both}
.scene-wrap.redraw .r-cn{animation:dq-draw 1.1s var(--ease) .09s both}
.scene-wrap.redraw .r-br{animation:dq-draw 1.1s var(--ease) .18s both}

/* 16 · escena-cumplimiento: anillo del año, seis rubros y sus palomitas */
/* el anillo del año es barra de progreso, no un tercer anillo del sello: trazo
   más fino que el sello (1.2 contra 1.6 y 3.4), opacidad menor y un hueco final
   de 8 unidades para que se lea como año que se cierra y no como circunferencia */
.scene .ring-year-bg{fill:none;stroke:var(--line);stroke-width:1.2;opacity:0;transition:opacity .5s var(--ease)}
.scene .ring-year{fill:none;stroke:var(--pine);stroke-width:1.2;stroke-dasharray:100;stroke-dashoffset:8;opacity:0;transition:opacity .5s var(--ease)}
.scene .check{fill:none;stroke:var(--pine);stroke-width:1.8;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:100;stroke-dashoffset:0;opacity:0;transition:opacity .4s var(--ease)}
.scene-wrap.tab-3 .rt{opacity:.18}
.scene-wrap.tab-3 .node{opacity:.5}
.scene-wrap.tab-3 .ring-year-bg,.scene-wrap.tab-3 .check{opacity:1}
.scene-wrap.tab-3 .ring-year{opacity:.6}
/* en la fase 03 la etiqueta "México" caía dentro del abanico de los seis rubros
   y se leía como un séptimo rubro: se retira. El sello ya dice México y el
   anillo del año ocupa ese lugar; en 01 y 02 la etiqueta sigue igual */
.scene-wrap.tab-3 .lb-mx{opacity:0}
/* en la fase 03 los viajeros se apagan: la escena deja de contar el viaje */
.scene-wrap.in.tab-3 .traveler{animation-name:none}
.scene-wrap.tab-3 .sr1,.scene-wrap.tab-3 .c1,.scene-wrap.tab-3 .k1,.scene-wrap.tab-3 .lb-c1{transition-delay:0s}
.scene-wrap.tab-3 .sr2,.scene-wrap.tab-3 .c2,.scene-wrap.tab-3 .k2,.scene-wrap.tab-3 .lb-c2{transition-delay:.09s}
.scene-wrap.tab-3 .sr3,.scene-wrap.tab-3 .c3,.scene-wrap.tab-3 .k3,.scene-wrap.tab-3 .lb-c3{transition-delay:.18s}
.scene-wrap.tab-3 .sr4,.scene-wrap.tab-3 .c4,.scene-wrap.tab-3 .k4,.scene-wrap.tab-3 .lb-c4{transition-delay:.27s}
.scene-wrap.tab-3 .sr5,.scene-wrap.tab-3 .c5,.scene-wrap.tab-3 .k5,.scene-wrap.tab-3 .lb-c5{transition-delay:.36s}
.scene-wrap.tab-3 .sr6,.scene-wrap.tab-3 .c6,.scene-wrap.tab-3 .k6,.scene-wrap.tab-3 .lb-c6{transition-delay:.45s}
.scene-wrap.redraw.tab-3 .ring-year{animation:dq-draw 2.4s var(--ease) .15s both}
.scene-wrap.redraw.tab-3 .k1{animation:dq-draw .55s var(--ease) .3s both}
.scene-wrap.redraw.tab-3 .k2{animation:dq-draw .55s var(--ease) .39s both}
.scene-wrap.redraw.tab-3 .k3{animation:dq-draw .55s var(--ease) .48s both}
.scene-wrap.redraw.tab-3 .k4{animation:dq-draw .55s var(--ease) .57s both}
.scene-wrap.redraw.tab-3 .k5{animation:dq-draw .55s var(--ease) .66s both}
.scene-wrap.redraw.tab-3 .k6{animation:dq-draw .55s var(--ease) .75s both}
/* en teléfono la fase 03 conserva los seis rubros: la iteración 1 los apagaba y
   la escena quedaba más vacía que en 01 y 02, justo donde Víctor pidió que se
   viera el cumplimiento. Vuelven el satélite, su hairline y su palomita; la
   etiqueta sigue fuera porque se posiciona en % del recuadro y el recorte slice
   la desalinea, y su texto ya vive completo en el panel de la pestaña 03 */
@media (max-width:680px){
  .scene .rt-sat,.scene .sat,.scene .check{display:inline}
  /* el recorte encoge el dibujo: el trazo se engorda para no desaparecer */
  .scene .rt-sat{stroke-width:1.6}
  .scene .sat{stroke-width:2}
  .scene .check{stroke-width:3.4}
}
@media (max-width:400px){
  .scene .check{stroke-width:4.2}
  .scene .sat{stroke-width:2.4}
}

/* 17 · motion-base: revelado escalonado por elemento, sin una línea de JS.
   El contenedor .stg no anima: sólo dispara la escalera de sus hijos */
.stg.rv{opacity:1;transform:none;transition:none}
.dq-anim .stg>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.dq-anim .stg>.rise{transform:translateY(22px)}
.dq-anim .stg.in>*{opacity:1;transform:none}
.stg.in>*:nth-child(1),.stg.in>*:nth-child(1)::before{transition-delay:0ms}
.stg.in>*:nth-child(2),.stg.in>*:nth-child(2)::before{transition-delay:70ms}
.stg.in>*:nth-child(3),.stg.in>*:nth-child(3)::before{transition-delay:140ms}
.stg.in>*:nth-child(4),.stg.in>*:nth-child(4)::before{transition-delay:210ms}
.stg.in>*:nth-child(5),.stg.in>*:nth-child(5)::before{transition-delay:280ms}
.stg.in>*:nth-child(6),.stg.in>*:nth-child(6)::before{transition-delay:350ms}
.stg.in>*:nth-child(7),.stg.in>*:nth-child(7)::before{transition-delay:420ms}
.stg.in>*:nth-child(8),.stg.in>*:nth-child(8)::before{transition-delay:490ms}
.stg.in>*:nth-child(9),.stg.in>*:nth-child(9)::before{transition-delay:560ms}
.stg.in>*:nth-child(10),.stg.in>*:nth-child(10)::before{transition-delay:630ms}
.stg.in>*:nth-child(11),.stg.in>*:nth-child(11)::before{transition-delay:700ms}
.stg.in>*:nth-child(12),.stg.in>*:nth-child(12)::before{transition-delay:770ms}
/* el título gigante del footer se revela por banda, en las 45 páginas */
.dq-anim .foot-mark{clip-path:inset(0 0 100% 0);transition:clip-path .95s var(--ease)}
.dq-anim .foot-mark.in{clip-path:inset(0 0 0 0)}

/* 18 · hairline-que-se-dibuja: es el ::before de cada renglón, sin markup extra */
.col,.idxrow,.prow,.rmember{position:relative}
.col::before,.idxrow::before,.prow::before,.rmember::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease)}
.stg.in>*::before,.idxrow.in::before,.prow.in::before,.rmember.in::before{transform:scaleX(1)}

/* 19 · sin-cards: la reja de tarjetas con borde deja paso al hairline superior.
   Global a propósito: alcanza a las 37 páginas interiores sin abrir su HTML */
/* sin caja, las cifras de las rejas de precios de las interiores quedaban a
   cuatro alturas distintas: la columna pasa a flex para que .price-line, que ya
   traía margin-top:auto en el canon, se ancle al pie de cada celda */
.card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:26px 0 0;display:flex;flex-direction:column}
.card:hover{transform:none;border-color:var(--line)}
.card:hover .card-link .ar{transform:translateX(4px)}
.grid{gap:22px 44px}
.data-card{background:transparent;border:0;border-top:1px solid rgba(220,215,200,.22);border-radius:0;padding:22px 0 0}
.data-card:hover{transform:none;border-color:rgba(220,215,200,.22)}
@media (max-width:680px){.card{padding:22px 0 0}}

/* 20 · cols3: "Por qué" y "Para quién" en tres columnas tipográficas sin caja */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 44px}
.col{display:grid;gap:14px;align-content:start;padding-top:22px}
.col p{font-size:15.5px;color:var(--muted)}

/* 21 · idxlist: las áreas pasan a índice editorial en filas */
.idxlist{border-bottom:1px solid var(--line)}
.idxrow{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(240px,.4fr);column-gap:36px;row-gap:12px;align-items:start;padding:30px 0}
.idxrow-b{display:grid;gap:10px}
.idxrow-m{display:grid;gap:14px;justify-items:start}
.idxrow p{font-size:15.5px;color:var(--muted);max-width:58ch}
.idxrow:hover .idx{color:var(--pine)}
.idxrow:hover .card-link .ar{transform:translateX(4px)}

/* 22 · prlist: los precios pasan a tabla editorial por renglones */
.prlist{border-bottom:1px solid var(--line)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.34fr);column-gap:40px;row-gap:12px;align-items:start;padding:26px 0}
.prow-b{display:grid;gap:10px;justify-items:start}
.prow-b p{font-size:15.5px;color:var(--muted);max-width:62ch}
.prow-p{justify-self:end;text-align:right}
.prow-p .price-line{margin-top:0;justify-content:flex-end;flex-wrap:wrap}
.prow-p .price-from{display:inline-block;max-width:26ch}
.prow:hover .card-link .ar{transform:translateX(4px)}

/* 23 · roster: el equipo pasa a filas con la placa de iniciales (canon 4.4) */
.roster{display:grid;grid-template-columns:repeat(2,1fr);column-gap:56px}
.rmember{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:20px;align-items:start;padding:26px 0}
.rmember-b{display:grid;gap:10px}
.rmember p{font-size:15px;color:var(--muted)}
.roster--lead .rmember h3{font-size:27px;line-height:1.15}
.roster--lead .rmember p{font-size:15.5px}

/* 24 · pin-tipografico: el paso del proceso deja la caja y queda bloque de texto */
.pinbody{display:grid;gap:16px;align-content:start;border-top:1px solid var(--line);padding:26px 0 0}
/* con la caja retirada, cuatro filas de 1fr dejaban el índice con un hairline
   flotando sobre 170px de vacío: las cuatro filas pasan a contenido y una quinta
   fila flexible absorbe el alto del paso activo, que abarca las cinco */
.pinwrap.pinned .pinsteps{grid-template-rows:repeat(4,min-content) 1fr;min-height:34dvh}
.pinwrap.pinned .pinmini{margin-bottom:14px}
.pinwrap.pinned .pinstep .pinbody{grid-column:2;grid-row:1 / span 5;width:100%;max-width:640px;margin:0;border:0;padding:0;gap:16px;min-height:34dvh;align-content:start;opacity:0;transform:translateY(64px);transition:opacity .5s var(--ease),transform .5s var(--ease);will-change:opacity,transform;pointer-events:none}
.pinwrap.pinned .pinstep.on .pinbody{opacity:1;transform:none;pointer-events:auto}
.pinwrap.pinned .pinstep.past .pinbody{opacity:0;transform:translateY(-64px)}
.pinwrap.pinned .pinstep .pinbody .num{font-family:var(--mono);font-size:22px;line-height:1.1;letter-spacing:.18em;color:var(--pine)}
.pinwrap.pinned .pinstep h3{font-size:34px;line-height:1.12}
.pinwrap.pinned .pinstep .pinbody p{font-size:18px;line-height:1.6;max-width:46ch;color:var(--muted)}
.pinmini{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pinwrap.pinned .pinstep.on .pinmini{transform:translateX(4px)}

/* 25 · roadmap: la sección "Después de constituir", fijada al scroll sobre tinta */
.roadwrap{--pin-alto:42dvh}
.roadgrid{display:grid;grid-template-columns:minmax(240px,.42fr) 1fr;column-gap:56px;position:relative;align-items:start}
/* sin pin (tableta vertical, ventana alta) el índice está oculto: la reja vuelve a una columna
   para que los pasos apilados no queden en la columna angosta del índice */
.roadwrap:not(.pinned) .roadgrid{grid-template-columns:1fr;column-gap:0}
/* 40dvh y no 56: con 56 el bloque fijado medía casi 800px y el CTA de texto
   quedaba fuera de pantalla en portátiles, y el paso activo caía tan abajo que
   el cuadrante superior derecho quedaba vacío */
.roadwrap.pinned .roadgrid{min-height:32dvh}
.roadidx{list-style:none;display:none}
.roadwrap.pinned .roadidx{display:grid}
/* el renglón inactivo se distingue sólo por opacidad, nunca animando color: a
   .7 el menta sobre tinta mide 5.0:1, por encima del 4.5:1 de WCAG AA */
.roadidx-i{display:flex;align-items:baseline;gap:14px;padding:16px 0 0;border-top:1px solid rgba(220,215,200,.22);color:var(--mint);transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* la escalera de .stg gana por especificidad: el estado activo la supera sin
   tocar la regla del stagger */
.dq-anim .roadidx.stg.in>.roadidx-i{opacity:.7}
.dq-anim .roadidx.stg.in>.roadidx-i.on{opacity:1;transform:translateX(4px)}
.roadidx-i.on{opacity:1;transform:translateX(4px)}
.roadidx-n{flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.roadidx-t{font-family:var(--serif);font-size:19px;font-weight:560;line-height:1.2;letter-spacing:-.01em}
.roadpanes{position:relative;display:grid;gap:48px}
.roadwrap.pinned .roadpanes{min-height:32dvh;display:block}
/* sin la clase pinned los seis pasos viven en flujo y visibles: si el JS muere,
   no desaparece contenido. El estado oculto cuelga sólo de .roadwrap.pinned */
.roadstep{display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:44px;align-items:center;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.roadwrap.pinned .roadstep{position:absolute;inset:0;opacity:0;transform:translateY(56px);pointer-events:none}
.roadwrap.pinned .roadstep.on{opacity:1;transform:none;pointer-events:auto}
.roadwrap.pinned .roadstep.past{opacity:0;transform:translateY(-56px)}
/* fijado, el paso activo arranca a la altura del índice: centrado dejaba vacío
   todo el cuadrante superior derecho */
.roadwrap.pinned .roadstep{align-items:start}
.roadwrap.pinned .roadstep h3{font-size:34px;line-height:1.12}
.roadwrap.pinned .roadstep .roadtx p{font-size:18px;max-width:46ch}
.roadtx{display:grid;gap:14px;align-content:center}
.dqroad .num{font-family:var(--mono);font-size:22px;letter-spacing:.18em;color:var(--mint)}
.dqroad .roadtx p{color:rgba(244,241,232,.78)}
.roadcta{margin-top:20px}
/* ajustes tras la revisión final de la iteración 2026-09-06 */
.pinwrap.pinned .pinstep .pinbody{align-content:center}
.pinwrap.pinned .pinstep .pinbody h3{font-size:clamp(34px,3.2vw,46px)}
.pinwrap.pinned .pinstep .pinbody p{font-size:20px;max-width:34ch}
@media (min-width:681px) and (max-width:860px){.scene-labels .lb-sat{font-size:10px;letter-spacing:.10em}}
.on-ink .card-link{color:var(--mint)}
.on-ink .sec-head--split>.lede{border-left-color:rgba(220,215,200,.28)}
.on-ink .pinrail-bg{stroke:rgba(220,215,200,.28)}
.on-ink .pinrail-fg{stroke:var(--mint)}

/* 26 · roadart: ilustraciones de trazo lineal, un solo color, que se dibujan */
.roadart{color:var(--mint);justify-self:end}
.roadart svg{width:100%;max-width:210px;height:auto}
.roadart .dl{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:100;stroke-dashoffset:0}
.dq-anim .roadstep .dl{stroke-dashoffset:100}
.roadwrap.pinned .roadstep .dl{animation:none}
@keyframes dq-draw-in{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.roadwrap.pinned .roadstep.on .dl,.roadwrap:not(.pinned) .roadstep.in .dl{animation:dq-draw-in .8s var(--ease) forwards}
.roadwrap.pinned .roadstep.on .dl:nth-child(1),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(1){animation-delay:.00s}
.roadwrap.pinned .roadstep.on .dl:nth-child(2),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(2){animation-delay:.09s}
.roadwrap.pinned .roadstep.on .dl:nth-child(3),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(3){animation-delay:.18s}
.roadwrap.pinned .roadstep.on .dl:nth-child(4),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(4){animation-delay:.27s}
.roadwrap.pinned .roadstep.on .dl:nth-child(5),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(5){animation-delay:.36s}
.roadwrap.pinned .roadstep.on .dl:nth-child(6),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(6){animation-delay:.45s}

/* 27 · reduced-2: todo queda estático y completo, sin bucles y sin huecos */
@media (prefers-reduced-motion:reduce){
  /* las filas de contenido del pin se declaran más abajo que el reseteo del
     bloque 11: se repone aquí para que una clase pinned rezagada no las gane */
  .pinwrap.pinned .pinsteps,.pinwrap .pinsteps{grid-template-rows:none;min-height:0}
  .pinwrap.pinned .pinstep .pinbody,.pinwrap .pinstep .pinbody{grid-row:auto;min-height:0}
  .pinwrap.pinned .pinmini,.pinwrap .pinmini{margin-bottom:0}
  .dq-anim .stg>*{opacity:1;transform:none}
  .col::before,.idxrow::before,.prow::before,.rmember::before{transform:scaleX(1)}
  .dq-anim .foot-mark{clip-path:none}
  .dq-anim .roadstep .dl{stroke-dashoffset:0}
  .pinwrap.pinned .pinstep.past .pinbody{opacity:1;transform:none}
  .roadwrap,.roadwrap.pinned{height:auto!important}
  .roadwrap .pinstick{position:static;height:auto;display:block}
  .roadgrid{grid-template-columns:1fr;column-gap:0}
  .roadidx{display:none}
  .roadwrap .pinrail{display:none}
  .roadpanes{position:static;display:grid;gap:48px}
  .roadwrap.pinned .roadstep,.roadstep{position:static;opacity:1;transform:none;pointer-events:auto;grid-template-columns:1fr;row-gap:20px}
  .roadstep .roadart{justify-self:start}
  .roadstep .roadart svg{max-width:140px}
}

/* 28 · responsive-2 */
@media (max-width:1100px){
  .roadstep{grid-template-columns:minmax(0,1fr) 170px;column-gap:32px}
  .roadart svg{max-width:170px}
}
@media (max-width:980px){
  .cols3{grid-template-columns:1fr 1fr}
  .idxrow{grid-template-columns:68px minmax(0,1fr);row-gap:14px}
  .idxrow-m{grid-column:2}
  .roadgrid{grid-template-columns:minmax(200px,.46fr) 1fr;column-gap:36px}
}
@media (max-width:767px){
  /* mismo reseteo tardío que en el bloque 27, por el mismo motivo de orden */
  .pinwrap.pinned .pinsteps,.pinwrap .pinsteps{grid-template-rows:none;min-height:0}
  .pinwrap.pinned .pinstep .pinbody,.pinwrap .pinstep .pinbody{grid-row:auto;min-height:0}
  .pinwrap.pinned .pinmini,.pinwrap .pinmini{margin-bottom:0}
  .roadwrap,.roadwrap.pinned{height:auto!important}
  .roadwrap .pinstick{position:static;height:auto;display:block}
  .roadgrid{grid-template-columns:1fr;column-gap:0}
  .roadidx{display:none}
  .roadwrap .pinrail{display:none}
  .roadpanes{position:static;display:grid;gap:48px}
  .roadwrap.pinned .roadstep,.roadstep{position:static;opacity:1;transform:none;pointer-events:auto;grid-template-columns:1fr;row-gap:20px}
  .roadstep .roadart{justify-self:start}
  .roadstep .roadart svg{max-width:140px}
}
@media (max-width:680px){
  .cols3{grid-template-columns:1fr}
  .idxrow{grid-template-columns:1fr;row-gap:10px;padding:24px 0}
  .prow{grid-template-columns:1fr;row-gap:10px;padding:22px 0}
  .prow-p{justify-self:start;text-align:left}
  .prow-p .price-line{justify-content:flex-start}
  .roster{grid-template-columns:1fr}
  .roster--lead .rmember h3{font-size:23px}
  .roadstep .roadart svg{max-width:140px}
}


/* ---------- iteración 3 · 2026-09-06 · corrientes, aterrizaje y abanico de áreas ---------- */

/* 29 · neutralizaciones. Van primero y con la misma especificidad que las reglas
   que sustituyen: ganan por orden de fuente y no hay que tocar un byte anterior.
   Las estaciones se apagan: seis puntos fijos del mismo pino, sentados sobre las
   mismas líneas por las que ahora corren catorce puntos móviles, hacían que el
   ojo no distinguiera lo que se mueve de lo que está parado. Los seis
   <circle class="station"> siguen en el markup porque dqScene corta con
   `if (dqReduced() || !estaciones.length) return` y, sin ellos, nunca añadiría la
   clase .in de la que cuelga todo el movimiento. Deuda explícita: al próximo
   cambio de site.js se borran los dos juntos.
   CSS muerto documentado: .scene-wrap.in .t-us/.t-cn/.t-br con dq-trip (bloque 14)
   se queda sin destino porque los círculos ya no llevan esas clases, y dq-trip y
   dq-pulse quedan como @keyframes huérfanos. No se borran: son bytes anteriores. */
.scene .station{opacity:0}
.scene-wrap.in .station{animation-name:none}
/* los dos disparos únicos del bloque 3 quedan fuera del compás nuevo: su retraso
   fijo de 2.65s no coincide con ninguna llegada de la corriente */
.scene-wrap.in .seal-g{animation-name:none}
.scene-wrap.in .halo{animation-name:none}

/* 30 · corrientes del hero. Cada ruta lleva de 4 a 5 puntos espaciados en bucle
   continuo; su offset-path es la curva MÁS el tronco concatenados, así el punto
   aterriza en el borde del sello y los tres flujos se solapan en el tronco: ahí
   está el apilamiento, sin un elemento extra.
   La aceleración no vive en la curva de tiempo (linear en el maestro) sino en la
   rampa de los keyframes: d(t) = (t + 0.35t^2) / 1.35, que arranca a 0.741 de la
   velocidad media y llega a 1.259. Monótona, sin tirón y sin nada elástico: es la
   familia de var(--ease) leída al revés, calculada. El apagado ocupa 2.6% del
   ciclo (0.09s a T=3.5s): el punto no se desvanece, se absorbe. */
@keyframes dq-flow{
  0%{offset-distance:0%;opacity:0}
  5%{offset-distance:3.8%;opacity:1}
  12.5%{offset-distance:9.7%}
  25%{offset-distance:20.1%}
  37.5%{offset-distance:31.4%}
  50%{offset-distance:43.5%}
  62.5%{offset-distance:56.4%}
  75%{offset-distance:70.1%}
  87.5%{offset-distance:84.7%}
  97.4%{offset-distance:96.8%;opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.scene .fl{fill:var(--pine)}
.scene .fl-1{fill-opacity:1}
.scene .fl-2{fill-opacity:.78}
.scene .fl-3{fill-opacity:.92}
.scene .fl-4{fill-opacity:.82}
.scene .fl-5{fill-opacity:.95}
@supports (offset-path: path("M0,0 L1,1")){
  .scene .fl{transform-box:fill-box;transform-origin:center}
  .scene .fl-us{offset-path:path("M150,72 C296,148 600,168 600,286 L600,368")}
  .scene .fl-cn{offset-path:path("M600,76 C652,134 598,194 600,286 L600,368")}
  .scene .fl-br{offset-path:path("M1030,170 C914,190 600,174 600,286 L600,368")}
  /* posición de reposo de cada punto: es lo que se ve con la animación apagada,
     así reducción de movimiento muestra rutas dibujadas y puntos repartidos sin
     una línea de JS. Va dentro de @supports: sin él, un navegador sin offset-path
     apilaría los catorce puntos en (0,0) */
  .scene .fl-us.fl-1{offset-distance:10%}
  .scene .fl-us.fl-2{offset-distance:30%}
  .scene .fl-us.fl-3{offset-distance:50%}
  .scene .fl-us.fl-4{offset-distance:70%}
  .scene .fl-us.fl-5{offset-distance:90%}
  .scene .fl-cn.fl-1{offset-distance:12%}
  .scene .fl-cn.fl-2{offset-distance:37%}
  .scene .fl-cn.fl-3{offset-distance:62%}
  .scene .fl-cn.fl-4{offset-distance:87%}
  .scene .fl-br.fl-1{offset-distance:8%}
  .scene .fl-br.fl-2{offset-distance:28%}
  .scene .fl-br.fl-3{offset-distance:48%}
  .scene .fl-br.fl-4{offset-distance:68%}
  .scene .fl-br.fl-5{offset-distance:88%}
  /* duraciones no armónicas dentro de la ventana de 2.8 a 3.6s: 4.37 llegadas por
     segundo y 2.11 puntos de media en el tronco */
  .scene-wrap.in .fl-us{animation:dq-flow 3.5s linear infinite;animation-play-state:paused}
  .scene-wrap.in .fl-cn{animation:dq-flow 2.8s linear infinite;animation-play-state:paused}
  .scene-wrap.in .fl-br{animation:dq-flow 3.3s linear infinite;animation-play-state:paused}
  /* fuera de pantalla no se paga ni un cuadro: .streaming la pone el JS */
  .scene-wrap.in.streaming .fl{animation-play-state:running}
  /* retrasos negativos: la corriente ya está poblada en el cuadro cero */
  .scene-wrap.in .fl-us.fl-1{animation-delay:0s}
  .scene-wrap.in .fl-us.fl-2{animation-delay:-.7s}
  .scene-wrap.in .fl-us.fl-3{animation-delay:-1.4s}
  .scene-wrap.in .fl-us.fl-4{animation-delay:-2.1s}
  .scene-wrap.in .fl-us.fl-5{animation-delay:-2.8s}
  .scene-wrap.in .fl-cn.fl-1{animation-delay:-.31s}
  .scene-wrap.in .fl-cn.fl-2{animation-delay:-1.01s}
  .scene-wrap.in .fl-cn.fl-3{animation-delay:-1.71s}
  .scene-wrap.in .fl-cn.fl-4{animation-delay:-2.41s}
  .scene-wrap.in .fl-br.fl-1{animation-delay:-.53s}
  .scene-wrap.in .fl-br.fl-2{animation-delay:-1.19s}
  .scene-wrap.in .fl-br.fl-3{animation-delay:-1.85s}
  .scene-wrap.in .fl-br.fl-4{animation-delay:-2.51s}
  .scene-wrap.in .fl-br.fl-5{animation-delay:-3.17s}
}
/* el tronco: las tres rutas se funden en él con tangente vertical, sin codo */
.scene-wrap.in .r-tk{animation:dq-draw 1.6s var(--ease) .55s backwards}
.scene-wrap.redraw .r-tk{animation:dq-draw 1.1s var(--ease) .27s both}

/* 31 · aterrizaje del hero. Tres arcos concéntricos de trazo fino bajo el sello,
   con escalas y opacidades decrecientes: eso es lo que se lee como amortiguación
   y no como tres anillos decorativos. Nada de esto es infinito: todo cuelga de la
   clase .landing, que pone el JS en el compás de 1.40s */
.scene .lnd{fill:none;stroke:var(--mint);stroke-width:1.2;opacity:0;transform-box:view-box;transform-origin:600px 430px}
@keyframes dq-ripple-1{from{transform:scale(1);opacity:.5}to{transform:scale(1.34);opacity:0}}
@keyframes dq-ripple-2{from{transform:scale(1);opacity:.36}to{transform:scale(1.24);opacity:0}}
@keyframes dq-ripple-3{from{transform:scale(1);opacity:.24}to{transform:scale(1.15);opacity:0}}
@keyframes dq-absorb{from{transform:scale(1);opacity:.32}to{transform:scale(1.13);opacity:0}}
@keyframes dq-tap{0%{transform:scale(1)}42%{transform:scale(.986)}100%{transform:scale(1)}}
@keyframes dq-wave{0%{transform:skewX(0) translateX(0)}30%{transform:skewX(-4deg) translateX(.6px)}62%{transform:skewX(2.4deg) translateX(-.4px)}100%{transform:skewX(0) translateX(0)}}
.scene-wrap.landing .lnd-1{animation:dq-ripple-1 .86s var(--ease) 1 both}
.scene-wrap.landing .lnd-2{animation:dq-ripple-2 .78s var(--ease) .11s 1 both}
.scene-wrap.landing .lnd-3{animation:dq-ripple-3 .7s var(--ease) .22s 1 both}
.scene-wrap.landing .halo{animation:dq-absorb .42s var(--ease) 1 both}
/* el sello se comprime, no rebota */
.scene-wrap.landing .seal-g{animation:dq-tap .42s var(--ease) 1 both}

/* 32 · mexicanidad del hero. La pista de aterrizaje es la silueta del país en
   trazo fino, colocada para que la Ciudad de México caiga bajo el centro del
   sello: el sello aterriza sobre el centro de México, no sobre un punto
   cualquiera. Un solo color, sin relleno, nunca dos colores en el mismo icono.
   El Ángel de la Independencia se dibujó y se verificó, pero no se publica: el
   encargo pide el mapa O el Ángel, y poner los dos detrás del mismo sello sería
   folclor de plantilla. Su fragmento SVG vive en la adenda del rediseño, no en
   el HTML servido (ronda de correcciones del 6 de septiembre) */

/* 33 · estados por pestaña. En la fase 03 se apagan los arcos (a escala 1.34
   llegan a y=529 y cruzan las hairlines sr3 y sr4) y la pista baja de intensidad
   sin desaparecer: pertenece a la escena, pero deja de competir con los seis
   rubros. Las corrientes ya se apagan solas con la regla del bloque 16 */
.scene-wrap.tab-3 .lnd{opacity:0;animation-name:none}

/* 34 · módulo de áreas: siete líneas que nacen en siete puntos alineados y
   convergen en un tronco que termina en el sello. Es la misma idea del H2 que ya
   estaba escrito, dibujada */
.aslot{position:relative;width:100%;aspect-ratio:1200/420;margin:0 auto 46px;overflow:visible}
.afan{width:100%;height:100%}
.afan .arc{fill:none;stroke:var(--pine);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:0}
.dq-anim .aslot:not(.in) .arc{stroke-dashoffset:100}
.aslot.in .arc{transition:stroke-dashoffset 1.5s var(--ease)}
/* el abanico se dibuja de fuera hacia dentro, en pares simétricos */
.aslot.in .a-1,.aslot.in .a-7{transition-delay:0s}
.aslot.in .a-2,.aslot.in .a-6{transition-delay:.09s}
.aslot.in .a-3,.aslot.in .a-5{transition-delay:.18s}
.aslot.in .a-4{transition-delay:.27s}
.aslot.in .a-tk{transition-delay:.4s}
.afan .aorig{fill:var(--pine)}
.afan .ahub{fill:var(--paper)}
.afan .apoint{display:none;fill:var(--pine)}
.afan .aflow{fill:var(--pine);opacity:0}
.afan .af-a{fill-opacity:1}
.afan .af-b{fill-opacity:.8}
.afan .af-c{fill-opacity:.92}
.afan .af-d{fill-opacity:.84}

/* 35 · módulo de áreas: las corrientes. Mismo sistema y mismos keyframes que el
   hero. Las duraciones son proporcionales al largo de cada línea para que la
   dispersión de velocidad quede en 1.7x y las siete se lean como un solo sistema:
   con duraciones iguales, el punto de la línea central iría 2.4 veces más lento
   y se vería atorado, que es justo lo que hay que evitar */
@supports (offset-path: path("M0,0 L1,1")){
  .afan .aflow{transform-box:fill-box;transform-origin:center}
  .afan .af-1{offset-path:path("M84,76 C84,150 600,204 600,268 L600,352")}
  .afan .af-2{offset-path:path("M256,76 C256,150 600,204 600,268 L600,352")}
  .afan .af-3{offset-path:path("M428,76 C428,150 600,204 600,268 L600,352")}
  .afan .af-4{offset-path:path("M600,76 L600,268 L600,352")}
  .afan .af-5{offset-path:path("M772,76 C772,150 600,204 600,268 L600,352")}
  .afan .af-6{offset-path:path("M944,76 C944,150 600,204 600,268 L600,352")}
  .afan .af-7{offset-path:path("M1116,76 C1116,150 600,204 600,268 L600,352")}
  .afan .af-1.af-a,.afan .af-7.af-a{offset-distance:9%}
  .afan .af-1.af-b,.afan .af-7.af-b{offset-distance:33%}
  .afan .af-1.af-c,.afan .af-7.af-c{offset-distance:57%}
  .afan .af-1.af-d,.afan .af-7.af-d{offset-distance:81%}
  .afan .af-2.af-a,.afan .af-6.af-a{offset-distance:11%}
  .afan .af-2.af-b,.afan .af-6.af-b{offset-distance:44%}
  .afan .af-2.af-c,.afan .af-6.af-c{offset-distance:77%}
  .afan .af-3.af-a,.afan .af-4.af-a,.afan .af-5.af-a{offset-distance:16%}
  .afan .af-3.af-b,.afan .af-4.af-b,.afan .af-5.af-b{offset-distance:62%}
  .aslot.in .af-1,.aslot.in .af-7{animation:dq-flow 4s linear infinite;animation-play-state:paused}
  .aslot.in .af-2,.aslot.in .af-6{animation:dq-flow 3.6s linear infinite;animation-play-state:paused}
  .aslot.in .af-3,.aslot.in .af-5{animation:dq-flow 3.2s linear infinite;animation-play-state:paused}
  .aslot.in .af-4{animation:dq-flow 3s linear infinite;animation-play-state:paused}
  .aslot.in.streaming .aflow{animation-play-state:running}
  /* paso = T/n, más una fase base de .06s por línea para que la fila no baje en
     formación rígida */
  .aslot.in .af-1.af-a{animation-delay:0s}
  .aslot.in .af-1.af-b{animation-delay:-1s}
  .aslot.in .af-1.af-c{animation-delay:-2s}
  .aslot.in .af-1.af-d{animation-delay:-3s}
  .aslot.in .af-2.af-a{animation-delay:-.06s}
  .aslot.in .af-2.af-b{animation-delay:-1.26s}
  .aslot.in .af-2.af-c{animation-delay:-2.46s}
  .aslot.in .af-3.af-a{animation-delay:-.12s}
  .aslot.in .af-3.af-b{animation-delay:-1.72s}
  .aslot.in .af-4.af-a{animation-delay:-.18s}
  .aslot.in .af-4.af-b{animation-delay:-1.68s}
  .aslot.in .af-5.af-a{animation-delay:-.24s}
  .aslot.in .af-5.af-b{animation-delay:-1.84s}
  .aslot.in .af-6.af-a{animation-delay:-.3s}
  .aslot.in .af-6.af-b{animation-delay:-1.5s}
  .aslot.in .af-6.af-c{animation-delay:-2.7s}
  .aslot.in .af-7.af-a{animation-delay:-.36s}
  .aslot.in .af-7.af-b{animation-delay:-1.36s}
  .aslot.in .af-7.af-c{animation-delay:-2.36s}
  .aslot.in .af-7.af-d{animation-delay:-3.36s}
}
@supports not (offset-path: path("M0,0 L1,1")){
  .afan .aflow{display:none}
}

/* 36 · etiquetas del abanico y banda del título.
   18.1% es y=76 de 420 y el -230% de la caja de línea sube la etiqueta 27.6px:
   se ata al punto, no a la altura de la caja, así aguanta cualquier breakpoint.
   La etiqueta del tronco cuelga por debajo del lienzo para no chocar nunca con
   el sello, esté a la altura que esté */
.alabels{position:absolute;inset:0;list-style:none;pointer-events:none}
.alb{position:absolute;left:var(--x);top:18.1%;transform:translate(-50%,-230%);white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.alb-hub{position:absolute;left:50%;top:100%;transform:translate(-50%,10px);white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
/* la banda del título es línea al 40%, no un panel: un panel completo detrás de
   un título de tres renglones vuelve a ser una caja, y Víctor pidió menos cajas.
   Cruza la altura de x del primer renglón y sale por la izquierda hasta el margen
   del wrap, que es lo que la hace leer como regla editorial deliberada */
#areas .sec-head--split>h2{position:relative;isolation:isolate}
#areas .sec-head--split>h2::before{content:"";position:absolute;z-index:-1;left:-24px;width:calc(100% + 24px + 7%);top:.4em;height:.32em;background:var(--line);opacity:.4;clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--ease) .1s}
#areas .sec-head--split.in>h2::before{clip-path:inset(0 0 0 0)}

/* 37 · responsive 3 */
@media (min-width:681px) and (max-width:900px){
  /* a 700px la separación entre puntos baja a 97.8px y el par más largo del
     portugués pediría 110.5: el rótulo se encoge y el tracking se cierra */
  .alb{font-size:8.5px;letter-spacing:.02em}
}
@media (max-width:980px){
  /* con una sola columna el 7% de la derecha se saldría del wrap y abriría scroll
     horizontal: la banda pasa a cubrir exactamente de margen a margen */
  #areas .sec-head--split>h2::before{width:calc(100% + 48px)}
}
@media (max-width:680px){
  .aslot{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px}
  /* siete rótulos de 10px sobre 327px de ancho no caben de ninguna manera y el
     precedente ya existe en el sitio (.lb-sat). El lienzo es aria-hidden y los
     siete nombres completos están tres centímetros más abajo, en el índice */
  .alb{display:none}
  /* a esta escala el monograma mide 5px y no se lee: pasa a punto sólido */
  .aseal{display:none}
  .afan .apoint{display:block}
  /* el lienzo se encoge, el trazo engorda para no desaparecer */
  .afan .arc{stroke-width:1.8}
  .alb-hub{font-size:10px}
}

/* 38 · reduced 3: rutas dibujadas, corrientes detenidas con los puntos repartidos
   en su posición de reposo, sello estático y banda abierta sin transición. El
   @supports anidado es obligatorio: sin él, un navegador sin offset-path y con
   reducción de movimiento apilaría los 34 puntos en el origen del viewBox. La
   regla global animation:none!important del bloque 11 ya apaga los bucles */
@media (prefers-reduced-motion:reduce){
  @supports (offset-path: path("M0,0 L1,1")){
    .scene .traveler{display:inline;opacity:1}
    .afan .aflow{opacity:1}
  }
  .scene .lnd,.scene .halo{opacity:0}
  .scene .station{opacity:0}
  .afan .arc{stroke-dashoffset:0}
  #areas .sec-head--split>h2::before{clip-path:none}
}

/* ---------- iteración 3 · ronda de correcciones · 2026-09-06 ---------- */

/* 39 · la bandera se redibuja para el tamaño al que de verdad se sirve. A
   20x13.8 px con trazo efectivo de 1.15 las dos divisiones internas y el disco
   se fundían en una mancha y el asta desaparecía debajo del borde del paño.
   Ahora el icono mide 26x18 px con trazo 1.75, que es la retícula y el trazo de
   la guía v5 4.6; el asta va en x=2.1 y el paño arranca en x=4.9, las dos
   divisiones internas se retiran y la onda sube a 3 unidades de amplitud
   (pico a pico), que a 26 px son 3 px de vaivén y sí se leen.
   En el lugar del escudo va un disco con punto central, NO el sello DQ: a este
   tamaño el monograma mediría 3 px. El favicon, el sello y el logotipo no se
   tocan; ningún trazo lleva dos colores y el único relleno sólido es el punto */

/* 40 · la amortiguación del aterrizaje pasa de menta a pino. La menta es acento
   sobre tinta (guía v5 4.1): sobre papel mide 1.68:1 y con el pico declarado los
   tres arcos no se distinguían a 1x, sólo ampliando a 3x. Pino sobre papel mide
   8.04:1, así que el mismo pulso delicado ya se percibe. El halo va con ellos
   para que los dos hablen el mismo idioma */
.scene .lnd{stroke:var(--pine);stroke-width:1.4}
.scene .halo{stroke:var(--pine)}
@keyframes dq-ripple-1{from{transform:scale(1);opacity:.5}to{transform:scale(1.34);opacity:0}}
@keyframes dq-ripple-2{from{transform:scale(1);opacity:.38}to{transform:scale(1.24);opacity:0}}
@keyframes dq-ripple-3{from{transform:scale(1);opacity:.26}to{transform:scale(1.15);opacity:0}}

/* 41 · la fase 03 ya no congela el lienzo. Con las estaciones retiradas y los
   arcos apagados, la regla de la iteración 2 que mataba a los viajeros dejaba la
   escena sin un pixel en movimiento un tercio de cada ciclo de pestañas, justo
   donde Víctor pidió más flujo. La corriente sigue corriendo, atenuada a apagado
   y media opacidad, para que los seis rubros conserven el foco */
@supports (offset-path: path("M0,0 L1,1")){
  .scene-wrap.in.tab-3 .fl{animation-name:dq-flow}
}
.scene-wrap.tab-3 .fl{fill:var(--muted);fill-opacity:.45}

/* 42 · la pista de aterrizaje baja y se reduce. A 1366x768 el pliegue corta el
   lienzo en y=368 del viewBox y del mapa sólo asomaba la península y el
   noroeste, sin cerrar: tres tiras sueltas que leían como artefacto de render.
   Con translate(421.3,379.1) scale(1.16) el contorno entero vive de y=384 a
   y=602, o sea íntegro por debajo del pliegue y completo en teléfono, donde el
   recorte slice sí lo muestra todo. El trazo sube a 1.4 para compensar la escala
   menor y conservar el mismo grosor aparente de antes */

/* 43 · el escalonado del dibujado llega hasta el noveno trazo. El paso 01 pasó de
   6 a 9 .dl (talud y escalinata de la pirámide) y el paso 06 a 9 (el nopal): sin
   estos tres renglones, los trazos 7 a 9 heredaban retraso 0 y la base aparecía
   antes que el libro que se apoya en ella */
.roadwrap.pinned .roadstep.on .dl:nth-child(7),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(7){animation-delay:.54s}
.roadwrap.pinned .roadstep.on .dl:nth-child(8),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(8){animation-delay:.63s}
.roadwrap.pinned .roadstep.on .dl:nth-child(9),.roadwrap:not(.pinned) .roadstep.in .dl:nth-child(9){animation-delay:.72s}

/* 44 · los rótulos del abanico se igualan a los del lienzo del hero (.14em, guía
   v5 4.7: la pieza 1 y la pieza 8 de la misma familia). El escalón chico se
   estira hasta 980 px porque a 901 px el par más largo del portugués pediría
   107 px y sólo hay 90 de separación entre puntos.
   La banda del título deja de cortar en el aire: termina exactamente en el filete
   de la columna del lede (100% + 24 + 56, los 56 son el column-gap) y sube de
   opacidad 0.4 a 0.7 y de .32em a .38em, porque a 34 px de título estaba al
   borde de desaparecer */
.alb{letter-spacing:.14em}
/* el escalón chico se repone completo (681 a 980) porque una media query no
   suma especificidad: la regla base de arriba, más abajo en la hoja, le ganaba
   a la del bloque 37 y el portugués volvía a chocar por 1 px a 768 */
@media (min-width:681px) and (max-width:980px){
  .alb{font-size:8.5px;letter-spacing:.02em}
}
#areas .sec-head--split>h2::before{width:calc(100% + 24px + 56px);height:.38em;opacity:.7}
@media (max-width:980px){
  #areas .sec-head--split>h2::before{width:calc(100% + 48px)}
}

/* 45 · el lienzo de áreas gana una caja propia, del tamaño exacto del dibujo.
   Con aspect-ratio sobre el contenedor, el alto quedaba a merced del ancho: 396
   px en escritorio (bien), 252 en tableta y 137 en teléfono, contra los 380 /
   300 / 220 del encargo. Un simple min-height no resuelve nada, porque con
   preserveAspectRatio el dibujo sigue atado al ancho.
   La caja .acanvas conserva la proporción del viewBox y en tableta y teléfono se
   dimensiona por ALTO: sobresale del contenedor a lo ancho y .aslot la recorta.
   Como las etiquetas viven dentro de esa misma caja, siguen clavadas a su punto
   pese al recorte, y el abanico se angosta por punto de quiebre para que ningún
   origen caiga fuera de la ventana visible.
   Los rellenos verticales dan aire a los rótulos, que salen del dibujo por
   arriba (-230%) y por abajo (la etiqueta del tronco), y que el recorte
   horizontal cortaría */
/* la columna se fija al ancho del contenedor, no a max-content: si no, la pista
   crece hasta los 857 px de la caja, la caja llena su propia pista y no queda
   nada contra lo que centrarla */
.aslot{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,100%);place-items:center;padding:30px 0;margin:0 auto 16px}
.acanvas{position:relative;width:100%;aspect-ratio:1200/420}
.afan{display:block}

/* 46 · responsive del lienzo de áreas. El @supports es obligatorio: la geometría
   por punto de quiebre se escribe con la propiedad CSS d, y sin ella el abanico
   se quedaría con el trazado ancho de escritorio dentro de una ventana recortada.
   Un navegador sin d no entra a ninguno de los dos escalones y ve exactamente lo
   que veía antes: proporción constante, sin recorte y sin hueco */
@media (max-width:980px){
  /* con overflow:hidden el contenedor pasa a ser una caja de desplazamiento y
     Chromium recorta al borde de inicio el centrado de un hijo más ancho que
     ella (si no, parte del contenido quedaría inalcanzable). Así que el borde de
     inicio se declara a propósito y el centrado se hace por transform, que no
     está sujeto a ese recorte: el recorte del lienzo queda simétrico */
  .aslot{overflow:hidden;justify-items:start}
  .acanvas{left:50%;transform:translateX(-50%)}
}
@supports (d: path("M0,0 L1,1")){
  @media (min-width:681px) and (max-width:980px){
    /* 300 px de dibujo: la caja mide 857 px y .aslot recorta 112 por lado a
       681 px de ventana, así que el abanico se cierra a 600 +/- 378 */
    .acanvas{width:auto;height:300px}
    .afan .a-1{d:path("M222,76 C222,150 600,204 600,268")}
    .afan .a-2{d:path("M348,76 C348,150 600,204 600,268")}
    .afan .a-3{d:path("M474,76 C474,150 600,204 600,268")}
    .afan .a-5{d:path("M726,76 C726,150 600,204 600,268")}
    .afan .a-6{d:path("M852,76 C852,150 600,204 600,268")}
    .afan .a-7{d:path("M978,76 C978,150 600,204 600,268")}
    .afan .ao-1{cx:222}
    .afan .ao-2{cx:348}
    .afan .ao-3{cx:474}
    .afan .ao-5{cx:726}
    .afan .ao-6{cx:852}
    .afan .ao-7{cx:978}
    .alb:nth-child(1){left:18.5%}
    .alb:nth-child(2){left:29%}
    .alb:nth-child(3){left:39.5%}
    .alb:nth-child(5){left:60.5%}
    .alb:nth-child(6){left:71%}
    .alb:nth-child(7){left:81.5%}
    .afan .af-1{offset-path:path("M222,76 C222,150 600,204 600,268 L600,352")}
    .afan .af-2{offset-path:path("M348,76 C348,150 600,204 600,268 L600,352")}
    .afan .af-3{offset-path:path("M474,76 C474,150 600,204 600,268 L600,352")}
    .afan .af-5{offset-path:path("M726,76 C726,150 600,204 600,268 L600,352")}
    .afan .af-6{offset-path:path("M852,76 C852,150 600,204 600,268 L600,352")}
    .afan .af-7{offset-path:path("M978,76 C978,150 600,204 600,268 L600,352")}
  }
  @media (min-width:629px) and (max-width:680px){
    /* de 629 a 680 px la caja ya cabe a lo ancho con 220 px de alto: no hace
       falta angostar el abanico, sólo dimensionar por alto */
    .acanvas{aspect-ratio:auto;width:100%;height:220px}
  }
  @media (max-width:628px){
    /* 220 px de dibujo en teléfono. A 320 px de ventana la caja mide 629 y la
       ventana visible del viewBox es de 611 unidades centradas: el abanico se
       cierra a 600 +/- 270 para que los siete orígenes conserven su aire */
    .acanvas{width:auto;height:220px}
    .afan .a-1{d:path("M330,76 C330,150 600,204 600,268")}
    .afan .a-2{d:path("M420,76 C420,150 600,204 600,268")}
    .afan .a-3{d:path("M510,76 C510,150 600,204 600,268")}
    .afan .a-5{d:path("M690,76 C690,150 600,204 600,268")}
    .afan .a-6{d:path("M780,76 C780,150 600,204 600,268")}
    .afan .a-7{d:path("M870,76 C870,150 600,204 600,268")}
    .afan .ao-1{cx:330}
    .afan .ao-2{cx:420}
    .afan .ao-3{cx:510}
    .afan .ao-5{cx:690}
    .afan .ao-6{cx:780}
    .afan .ao-7{cx:870}
    .afan .af-1{offset-path:path("M330,76 C330,150 600,204 600,268 L600,352")}
    .afan .af-2{offset-path:path("M420,76 C420,150 600,204 600,268 L600,352")}
    .afan .af-3{offset-path:path("M510,76 C510,150 600,204 600,268 L600,352")}
    .afan .af-5{offset-path:path("M690,76 C690,150 600,204 600,268 L600,352")}
    .afan .af-6{offset-path:path("M780,76 C780,150 600,204 600,268 L600,352")}
    .afan .af-7{offset-path:path("M870,76 C870,150 600,204 600,268 L600,352")}
  }
}
@media (max-width:680px){
  /* el sangrado se repone: la regla de margen del bloque 45 es posterior */
  .aslot{margin-left:-24px;margin-right:-24px}
  /* el sello vuelve al remate del tronco. Con 220 px de dibujo el monograma mide
     10 px y se lee; el punto sólido dejaba un destino idéntico a los siete
     orígenes y, sobre todo, un hueco entre el final del tronco y ese punto */
  .afan .aseal{display:block}
  .afan .apoint{display:none}
  /* el dibujo ya no se encoge tanto: el trazo vuelve a acercarse al de escritorio */
  .afan .arc{stroke-width:1.6}
}
/* ---------- iteración 4 · el diseño de México · 2026-09-06 ---------- */

/* 47 · la pista de aterrizaje deja de ser una silueta aproximada y pasa a ser el
   contorno real del país. El trazado NO se dibujó a mano: sale de Natural Earth
   1:50m (dominio público, CC0), anillo continental (Baja California es península
   y viene dentro del mismo anillo, conectada por la frontera norte; las quince
   islas menores del MultiPolygon se descartan por área), simplificado a 140
   vértices, dentro del presupuesto de 90 a 160 de la composición.
   1:50m y no 1:110m, que es lo que servía la primera versión de este bloque: a
   703 unidades de ancho la diferencia se ve. Con el 110m la costa del Pacífico
   continental corría casi recta de Mazatlán a Acapulco, Bahía de Vizcaíno era
   una sola muesca y la boca de la sonda de Campeche se perdía. Con el mismo
   presupuesto de vértices, el 50m devuelve Cabo Corrientes, el arco de Michoacán
   y la escotadura de Campeche.
   Simplificación por Visvalingam-Whyatt (área efectiva) y no por Douglas
   Peucker: a 140 vértices, DP conserva los dos puntos que abren la boca de la
   Laguna de Tamiahua y devuelve una espiga que sube y baja sobre la costa de
   Veracruz. Visvalingam borra primero los triángulos de área mínima, que es
   exactamente lo que son esas lengüetas, y deja la costa limpia. Área efectiva
   mínima conservada: 0.0469 grados cuadrados.
   Proyección equirectangular simple (plate carrée) a 23.2 unidades de escena por
   grado, anclada para que la Ciudad de México (19.4326 N, 99.1332 O) caiga
   exactamente en (600,430), el centro del sello: el sello no aterriza sobre un
   punto cualquiera, aterriza sobre la Ciudad de México.
   Plate carrée y no Mercator: con Mercator, la misma anchura pediría 484
   unidades de alto y la frontera norte saldría por encima del lienzo. Con plate
   carrée el mapa mide 703.1 x 421.1 y vive entero dentro del viewBox, de x=182.5
   a x=885.6 y de y=121.8 a y=542.9, y en teléfono el recorte slice lo muestra
   completo. 23.2 y no 23: a 23 el ancho daba 697 unidades, por debajo del piso
   de 700 que fijó la composición.
   Desvío del contorno servido frente a la referencia real, en unidades de
   escena: Tijuana 0.2, Ciudad Juárez 0.4, Nuevo Laredo 0.2, Matamoros 0.7, Cabo
   San Lucas 0.3, Punta Eugenia 1.0, Cabo Corrientes 0.9, Acapulco 1.1, Salina
   Cruz 0.5, Progreso 0.6, Ciudad del Carmen 1.8, Chetumal 2.2, Cabo Catoche 4.3.
   La mordida del chip de papel, que la versión anterior no mencionaba: el disco
   .hub baja de r=62 a r=59.4, apenas 0.65 unidades por encima del anillo exterior
   del sello maestro (58.75), y .halo lo sigue para que el aro de absorción no
   quede fuera del disco. Con el contorno del 50m a 23.2 la única entrada del
   contorno al disco es un tramo de la costa del Golfo entre (634.7,379.6) y
   (646.7,402.6), y el disco tapa 38.2 unidades de contorno en vez de 48.1. El
   arco del Pacífico de Guerrero y Oaxaca, que es la curva más característica del
   sur y la que la versión anterior partía, queda entero fuera del disco:
   Acapulco proyectado cae a 62.3 unidades del centro. Nada del contorno entra en
   el anillo interior del sello (r=46.25), así que el monograma nunca se cruza.
   No se reordenó el DOM para dibujar el contorno encima del disco: el sello
   maestro no lleva relleno, así que la costa se leería corriendo por dentro de
   sus anillos y cruzando el anillo exterior dos veces, que es peor que una
   interrupción limpia bajo el chip de papel.
   El relleno al 5% no se anima: la mancha del país está desde el primer cuadro y
   el contorno se dibuja encima. Es a propósito, el país no aparece de la nada,
   se perfila. Un solo color en todo el grupo, sin degradados y sin sombras.
   GeoJSON, script de conversión (mapa50v.js) y mediciones (medir.js, mordida.js)
   quedan en la carpeta de auditoría de la pasada */
.scene .mxland{color:var(--pine)}
.scene .mxmap{fill:var(--pine);fill-opacity:.05;stroke:var(--pine);stroke-width:1.4;stroke-linejoin:miter;stroke-linecap:butt;stroke-dasharray:100;stroke-dashoffset:0}
.scene-wrap.in .mxmap{animation:dq-draw 1.6s var(--ease) .05s backwards}

/* 48 · el Ángel de la Independencia. Retícula de 24 x 30 servida a 48 x 60
   unidades con scale(2), así que el trazo declarado de 0.7 aterriza en 1.4 y es
   exactamente el del mapa: una sola familia de trazo en toda la escena (guía v5
   4.6). Doce trazos: basamento de tres escalones, dado, basa, las dos caras del
   fuste con una estría central, capitel, ábaco y la figura alada (cuerpo, cabeza
   y dos alas). La corona de laurel de la mano alzada se omite: a 60 unidades
   mediría 1.4 y se leería como un punto suelto, no como una corona.
   Las alas se rehicieron para que la cima lea alas y no manos. Antes arrancaban
   en y=3.3 y su punta caía en x 8.4 y 15.6, casi a plomo sobre el cuerpo, y a los
   29 px de ancho reales a 1440 la figura se leía como una persona con los brazos
   en alto. Ahora arrancan en el hombro (y=2.5) y la punta va a x 7.4 y 16.6 por
   encima de la cabeza (y=0.5): la envergadura pasa de 7.2 a 9.2 unidades de
   retícula, 6.6 veces el ancho del cuerpo (1.4), y el contorno superior de la
   silueta es horizontal, no vertical. La punta del ala queda por encima del
   ábaco (y=3.9), así que no se confunde con el capitel.
   La estría del fuste se queda en una y no se retira: los otros dos trazos
   verticales del fuste son sus dos caras, no estrías, y sin ellas el fuste
   dejaría de ser un fuste.
   Se planta a la IZQUIERDA del sello, con su base en y=430, la paralela de la
   Ciudad de México: esa paralela es la línea de tierra de la composición. A 23.2
   unidades por grado, cualquier icono que no tape el sello queda a más de 2.5
   grados de la coordenada exacta, así que la vecindad inmediata del sello es lo
   más cerca de la Ciudad de México que un icono puede estar sin cubrirla.
   translate(464,370) y no (470,370): con scale(2) el basamento ocupa de
   translate+4.4 a translate+43.6, o sea x 474.4 a 513.6 en la versión anterior, y
   el anillo del año de la fase 03 (r=86 sobre 600,430) pasa por x=514.1 a la
   altura de y=425 y por x=514.0 a y=430, de modo que con trazo 1.4 en el Ángel y
   1.2 en el anillo los bordes pintados se cruzaban unas 0.8 unidades. A 464 el
   basamento ocupa x 468.4 a 507.6 y deja 6.4 unidades libres contra el anillo.
   Tampoco se corrió a la derecha para apretar la fila (translate 493 dejaba el
   basamento en 501.4 a 540.6): eso metía el escalón 26.6 unidades dentro del
   anillo del año. La holgura se mide contra .ring-year y .ring-year-bg, no sólo
   contra .hub y las etiquetas.
   Sobre el mapa, la base en x 468.4 a 507.6 con y=430 cae tierra adentro: el
   contorno cruza la paralela de la Ciudad de México en x=462.9 (costa del
   Pacífico) y x=665.3 (costa del Golfo), así que el escalón más occidental queda
   5.5 unidades dentro de tierra y nunca en el mar */
.scene .mxangel{fill:none;stroke:currentColor;stroke-width:.7;stroke-linecap:butt;stroke-linejoin:miter}
.scene .mxangel>*{stroke-dasharray:100;stroke-dashoffset:0}
/* el escalonado va de abajo hacia arriba: primero el basamento, al final la
   figura. Los selectores acumulativos ahorran doce renglones de retraso */
.scene-wrap.in .mxangel>*{animation:dq-draw .75s var(--ease) 1.5s backwards}
.scene-wrap.in .mxangel>:nth-child(n+2){animation-delay:1.56s}
.scene-wrap.in .mxangel>:nth-child(n+4){animation-delay:1.62s}
.scene-wrap.in .mxangel>:nth-child(n+7){animation-delay:1.68s}
.scene-wrap.in .mxangel>:nth-child(n+9){animation-delay:1.74s}

/* 49 · la bandera. Sustituye al icono de 26 x 18 px que vivía dentro de la
   etiqueta "México" (bloques 32 y 39): ahí medía 26 px y no se leía, aquí mide
   130 unidades de ancho y es un elemento de la composición.
   Paño de 126 x 72, que es la proporción oficial 4:7 de la bandera mexicana.
   Tres medias ondas de 42 unidades y amplitud 7; el control de cada Bézier va a
   4A/3 = 9.3, que es lo que hace que el pico de la curva mida exactamente 7. Las
   dos divisiones verticales caen en los cruces por cero de la onda (x=742 y
   x=784), así que arrancan y terminan en 292 y 364 sin perseguir la curva: por
   eso el paño no se lee como tres tiras pegadas, sino como una tela con costuras.
   En el lugar del escudo va el sello DQ reducido a 1/3.36 (r 14 y 11, la misma
   razón 47:37 del maestro) con el monograma en Fraunces itálica de 10.2. Va en pino,
   no con los literales del maestro: la regla de un solo color por icono manda
   dentro de la escena, y la guía v5 4.3 ya admite la reducción monocroma del
   sello como decoración. El sello maestro de (600,430) conserva sus literales.
   El filete interior del sello reducido pesa 0.85 y no 1. El maestro tiene razones
   trazo sobre radio de 3.4/47 = 0.072 y 1.6/37 = 0.043, o sea 1.7 a 1; con 1.4 y
   1 sobre radios 14 y 11 las razones eran 0.100 y 0.091, casi iguales, y los dos
   anillos se leían como un par de circunferencias del mismo peso, perdiendo el
   rasgo de anillo grueso más filete que identifica al sello DQ. Con 0.85 la razón
   sube a 1.65 a 1 y el filete vuelve a leerse como filete. La razón de radios sí
   es fiel (14/11 = 1.273 contra 47/37 = 1.270), así que no hay deformación. Aun
   así el peso relativo exacto del maestro se sacrifica a propósito: a 0.85 de
   trazo el filete rinde 0.63 px a 1440, que es el mínimo que todavía se ve, y por
   debajo de 680 px vuelve a 1 (bloque 54), en la misma lógica con la que el CSS
   ya engrosa los satélites en teléfono.
   Se planta a la DERECHA del sello, con el asta en x=700. x=700 y no x=664 porque
   el anillo del año de la fase 03 mide 86 de radio y llega a x=686: a 700 el asta
   nunca lo cruza. Con el paño de 292 a 364, su borde inferior queda 4 unidades por
   encima del canto superior del sello (368) y el remate del asta arranca en 276, a
   69 unidades por debajo de la ruta de Brasil, así que no choca con ninguna ruta.
   Ancho total 130.2 unidades.
   El pie del asta baja de y=430 a y=468 y ésta es la corrección de fondo de la
   pasada: en y=430 el asta terminaba en el aire. A 23.2 unidades por grado y con
   la Ciudad de México anclada en (600,430), el punto (700,430) proyecta a
   19.43 N 94.79 O, que es agua abierta en la sonda de Campeche, y el vértice más
   cercano del contorno quedaba 19 unidades por debajo: el trazo se cortaba en
   papel vacío sobre el Golfo mientras el Ángel sí apoyaba su basamento sobre
   tierra. En la columna x=700 el contorno cruza en y=453.9 (costa del Golfo, cerca
   de Coatzacoalcos) y en y=500.7 (costa del Pacífico, golfo de Tehuantepec): es el
   istmo de Tehuantepec. Con el pie en y=468 el asta atraviesa la línea de costa en
   453.9 y sus últimas 14 unidades se dibujan sobre el relleno del país, así que la
   bandera se lee plantada en tierra y el asta la recibe el propio mapa. Longitud
   del asta 182 unidades, antes 144. y=468 y no y=460: a 460 la punta caía justo en
   el vértice donde la costa hace una V y el pie parecía apoyarse en el aire otra
   vez; a 468 queda 14 unidades dentro de la mancha del país y se lee plantado.
   Por eso el comentario anterior ya no afirma una fila plantada: el Ángel y el
   sello comparten la paralela de la Ciudad de México (y=430) y la bandera se
   planta 38 unidades más al sur, en la costa del Golfo a la altura del istmo,
   porque ahí es donde hay tierra bajo el asta. Las tres piezas siguen leyéndose
   de izquierda a derecha, pero el pie de la bandera sigue al mapa, no a la
   retícula. No se movió el grupo a x=806 (el otro punto de la paralela de la
   Ciudad de México que sí es tierra, ya en la península de Yucatán) porque a esa
   distancia la bandera se desprende del sello y deja 144 unidades de Golfo vacío
   entre los dos; y no se acortó el asta contra el canto del disco porque el disco
   llega a x=659.4 a la altura del centro y una vertical en x=700 no lo toca:
   (700,404) queda a 103.3 unidades del centro, no sobre el arco */
.scene .mxbanner{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:butt;stroke-linejoin:miter}
.scene .mxbanner .mxsr-i{stroke-width:.85}
.scene .mxbanner .mxdq{fill:currentColor;stroke:none;font-family:var(--serif);font-style:italic;font-size:10.2px;text-anchor:middle}
/* sólo las líneas se dibujan con stroke-dashoffset. Los círculos NO: con
   dasharray 100 sobre pathLength 100 el remate a tope deja una costura visible
   a las 3 en punto, que en el remate del asta y en los anillos del sello se leía
   como un anillo roto. Ellos y el monograma entran con opacity */
.scene .mxbanner .mxdl{stroke-dasharray:100;stroke-dashoffset:0}
.scene-wrap.in .mxpole{animation:dq-draw .6s var(--ease) 1.5s backwards}
.scene-wrap.in .mxcloth>.mxdl{animation:dq-draw .8s var(--ease) 1.86s backwards}
.scene-wrap.in .mxcloth>.mxdiv{animation-delay:2.2s}
.scene-wrap.in .mxfin{animation:dq-fade .4s var(--ease) 2.1s backwards}
.scene-wrap.in .mxseal{animation:dq-fade .5s var(--ease) 2.4s backwards}
@keyframes dq-fade{from{opacity:0}}

/* 50 · el ondeo. Ondea una vez por aterrizaje, con el mismo compás de 1.40s que
   ya gobierna los arcos de amortiguación (bloque 31), así que la bandera responde
   a la llegada de las corrientes y no a un reloj propio. Se deforma el PAÑO, no el
   asta: transform-origin en el borde del asta (0% 50% de su caja) y skewY, que
   levanta el borde libre 4.8 unidades sin mover la driza. El scaleX mínimo es el
   plegado de la tela. Sin rebote: la curva es la de la marca */
@keyframes dq-banner{0%{transform:skewY(0deg) scaleX(1)}32%{transform:skewY(-2.2deg) scaleX(1.014)}66%{transform:skewY(1.2deg) scaleX(.994)}100%{transform:skewY(0deg) scaleX(1)}}
.scene .mxcloth{transform-box:fill-box;transform-origin:0% 50%}
.scene-wrap.landing .mxcloth{animation:dq-banner .9s var(--ease) 1 both}

/* 51 · la fase 03. La mexicanidad es una sola capa (.mxland) y retrocede junta,
   no sólo el mapa: con seis rubros, su anillo del año y seis hairlines saliendo
   del sello, un mapa a plena intensidad más una bandera de 130 unidades competían
   por el foco. A opacidad .2 el grupo sigue siendo el escenario y deja de ser el
   tema. Sustituye a la regla del bloque 33 que atenuaba sólo .mxmap */
.scene-wrap.tab-3 .mxland{opacity:.2}
/* 52 · CSS muerto y CSS retirado por esta pasada, en la misma convención del
   bloque 28. Hay que distinguir los dos casos, porque la primera versión de este
   bloque decía que no se había borrado nada y sí se borró.
   Se CONSERVA huérfano un solo bloque: @keyframes dq-wave (bloque 31). Se queda
   sin destino porque su único usuario era .scene-labels .mxflag, el icono de 26 px
   que la bandera de 130 unidades sustituye; son bytes anteriores y dq-banner ya
   ocupa su lugar.
   Se RETIRARON nueve reglas, todas del icono .mxflag que desapareció del markup o
   de la silueta .mxmap aproximada que el contorno real superó:
     .scene-wrap.landing .mxflag{animation:dq-wave ...}
     .scene-labels .lb-mx{display:inline-flex;align-items:center;gap:8px}
     .scene-labels .mxflag{width:20px;height:13.8px;flex:none;...}
     .scene-labels .mxflag *{stroke:currentColor}
     .scene-labels .mxflag{width:26px;height:18px}
     .scene-labels .mxflag .fdot{fill:currentColor;stroke:none}
     .scene .mxmap{fill:none;stroke:var(--pine);stroke-width:1.1;opacity:.42}
     .scene .mxmap{stroke-width:1.4}
     .scene-wrap.tab-3 .mxmap{opacity:.14}
   Un selector que ya no existe en ningún index no puede quedarse: dejaría reglas
   que nadie puede verificar contra el markup. Un @keyframes sin usuario sí, porque
   no pinta nada por sí solo */

/* 53 · precios estimados en la moneda del visitante (EN USD, PT BRL, ZH CNY), 2026-09-07. Rige el MXN; la nota .price-fx-note lo aclara */
.prow-p .price-fx{flex-basis:100%;display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);margin-top:2px}
.price-fx-note{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted);max-width:720px}

/* ---------- iteración 4 · corrección del diseño de México · 2026-09-07 ---------- */

/* 54 · la fase 03 deja de apagar la mexicanidad entera. El bloque 51 bajaba
   .mxland a opacidad .2 en bloque, y como las pestañas se ciclan solas cada 6 s,
   un tercio del tiempo el mapa recién trabajado, el Ángel y la bandera de 130
   unidades quedaban en gris fantasma mientras los seis satélites y el anillo del
   año conservaban intensidad plena. Va contra el sentido del encargo: el mapa es
   el material que se pidió reforzar.
   Ahora la atenuación es diferenciada. El grupo baja a .45, que es donde el mapa
   sigue siendo escenario legible sin competir con el abanico de rubros, y el
   Ángel y la bandera bajan otro .45 dentro del grupo. Como las opacidades de
   grupo se multiplican, los dos iconos acaban en .45 x .45 = .2025, o sea
   exactamente donde los dejaba el bloque 51, y sólo el contorno del país sube.
   Son los dos elementos que de verdad peleaban por el foco: el mapa no */
.scene-wrap.tab-3 .mxland{opacity:.45}
.scene-wrap.tab-3 .mxangel,.scene-wrap.tab-3 .mxbanner{opacity:.45}

/* 55 · el filete del sello de la bandera en teléfono. A 0.85 de trazo rinde 0.63
   px a 1440 y todavía se ve, pero por debajo de 680 px el lienzo se sirve con
   scale(.78) a .68 sobre un ancho menor y el filete desaparece. Vuelve a 1, en la
   misma lógica con la que el CSS ya engrosa los satélites en teléfono */
@media (max-width:680px){
  .scene .mxbanner .mxsr-i{stroke-width:1}
}

/* 56 · el origen de Estados Unidos, que la pasada anterior movió sin documentar.
   El nodo pasó de (170,120) a (150,72), su etiqueta de --x:9.6%;--y:25.6% a
   --x:12.5%;--y:2.4%, la ruta de "M170,120 C330,200 470,300 600,430" y luego
   "M170,120 C286,172 600,172 600,286" a "M150,72 C296,148 600,168 600,286", y el
   offset-path de .fl-us acompaña a la ruta viva con su tramo de tronco
   ("M150,72 C296,148 600,168 600,286 L600,368").
   El motivo, medido contra el contorno servido: en (170,120) el nodo quedaba a
   18.3 unidades del contorno, o sea 5.3 unidades de aire libre descontando su
   radio de 13, y su curva corría por dentro del país el 86.1% de su longitud, de
   modo que la ruta de Estados Unidos parecía nacer en Sonora. En (150,72) el nodo
   queda a 67.1 unidades (54.1 libres) y la curva corre dentro del país el 45.8%.
   Con el mapa a 23.2 el borde noroeste del contorno (Tijuana) cae en (184.6,126.1)
   y sigue a 48 unidades del nodo, 35 descontando el radio.
   Y .scene .t-us (bloque 14, dentro del @supports de offset-path) es CSS muerto
   con una coordenada obsoleta: su offset-path conserva el trazado viejo
   "M170,120 C330,200 470,300 600,430". No se borra porque son bytes anteriores y
   ya está inerte: el bloque 29 documentó que ningún <circle> lleva la clase .t-us
   desde la iteración 3, y grep sobre los cuatro index y site.js devuelve cero.
   Queda dicho aquí que la ruta que rige es la de .r-us y .fl-us, no la suya */

/* 54 · anillo del año cerrado al 100% por instrucción de Víctor (2026-09-07: "el círculo que se hace alrededor del sello DQ no cierra al 100%"). Sustituye al hueco de 8 unidades del bloque 16, que quedó documentado ahí como criterio anterior */
.scene .ring-year{stroke-dashoffset:0}