/* =====================================================================
   AXIA Estudio · sistema de diseño (axia.css)
   Mundo: juego de láminas técnicas. Papel, tinta y óxido; dibujo a línea.
   Tipos: Unbounded (rótulos) · Schibsted Grotesk (texto) · Red Hat Mono (datos, cotas, etiquetas).
   Cada página es una lámina: marco fijo (.sheet), cajetín (.cartouche), cortes de sección (.cut).
   Uso y API: ver site/_plantilla.html. Tema: claro u oscuro según el sistema (prefers-color-scheme).
   ===================================================================== */

/* ---------- 1 · tokens ---------- */
:root{
  /* paleta (ruta A) */
  --paper:#F2EEE6; --paper-2:#E8E2D6; --paper-3:#DED7C8;
  --ink:#1A1814; --ink-2:#4A453C; --ink-3:#6B655A;
  --rule:rgba(26,24,20,.16); --rule-2:rgba(26,24,20,.32);
  --rust:#A3431D;             /* óxido para texto (AA sobre papel) */
  --line-ink:#1A1814; --line-rust:#B4502A; --line-faint:#A9A399;   /* trazos de dibujo */
  --logo-dot:#B4502A;
  --hatch:rgba(26,24,20,.55);
  --shadow:0 1px 0 rgba(26,24,20,.04), 0 18px 40px -24px rgba(26,24,20,.35);

  /* tipos */
  --f-display:'Unbounded','Archivo Black','Helvetica Neue',Arial,system-ui,sans-serif;
  --f-text:'Schibsted Grotesk','Helvetica Neue',Arial,system-ui,sans-serif;
  --f-mono:'Red Hat Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* escala tipográfica (fluida) */
  --t-hero:clamp(2.35rem, 1.05rem + 5.4vw, 5.9rem);
  --t-h2:clamp(1.85rem, 1.15rem + 2.7vw, 3.35rem);
  --t-h3:clamp(1.2rem, 1.02rem + .7vw, 1.6rem);
  --t-lede:clamp(1.08rem, 1rem + .38vw, 1.32rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-mono:.8125rem;
  --t-micro:.71875rem;

  /* espacio */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem;
  --s-7:3rem; --s-8:4.5rem; --s-9:6.5rem; --s-10:9rem;

  /* maquetación */
  --frame:10px;                                /* margen del marco de lámina */
  --gut:clamp(20px, 5.2vw, 92px);              /* margen lateral del contenido */
  --max:1320px;                                /* ancho máximo del contenido */
  --navh:68px;
  --sec-pad:clamp(4rem, 2.6rem + 5vw, 7.5rem);

  /* movimiento */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.7s;
  --draw-dur:1.6s;

  color-scheme:light;
}
/* tema oscuro: sigue siempre al sistema (no hay selector manual: así las escenas embebidas,
   que también siguen al sistema, coinciden siempre con la página) */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#15130F; --paper-2:#1E1B16; --paper-3:#29251E;
    --ink:#ECE6DA; --ink-2:#BAB2A3; --ink-3:#958D7F;
    --rule:rgba(236,230,218,.15); --rule-2:rgba(236,230,218,.32);
    --rust:#E2865C; --line-ink:#E4DDCF; --line-rust:#D9774A; --line-faint:#5C574E;
    --logo-dot:#E2865C; --hatch:rgba(236,230,218,.5);
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 18px 40px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

/* ---------- 2 · base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 12px);
  scrollbar-color:var(--ink-3) var(--paper);scrollbar-width:thin}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-body)/1.6 var(--f-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:clip;font-feature-settings:"ss01" 0}
::selection{background:var(--rust);color:var(--paper)}
img,svg,video,canvas,iframe{display:block;max-width:100%}
svg{overflow:visible}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--rule-2);
  transition:color .2s,text-decoration-color .2s}
a:hover{color:var(--rust);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:1px}
p{margin:0 0 var(--s-4);text-wrap:pretty}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h1{font-size:var(--t-hero);font-weight:800;letter-spacing:-.04em;line-height:.98}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.12;letter-spacing:-.025em;font-weight:600}
b,strong{font-weight:600}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;
  font:500 var(--t-mono)/1 var(--f-mono);text-decoration:none}
.skip:focus{top:12px;color:var(--paper)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* utilidades de texto */
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink);max-width:40ch}
.quiet{color:var(--ink-2)}
.small{font-size:var(--t-small)}
.label{font:500 var(--t-micro)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.dot-r{color:var(--line-rust)}

/* ---------- 3 · maquetación ---------- */
.wrap{width:min(var(--max), 100% - 2 * var(--gut));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px)}
.sec{position:relative;padding-block:var(--sec-pad)}
.sec--tight{padding-block:calc(var(--sec-pad) * .6)}
main{position:relative;z-index:2;display:block}

/* corte de sección: línea de corte de plano con referencia (no es un antetítulo: va en la línea) */
.cut{display:flex;align-items:center;gap:14px;margin-bottom:clamp(2rem, 1rem + 3vw, 4rem);
  font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cut::before{content:"";flex:0 0 auto;width:9px;height:9px;border:1.25px solid var(--line-rust);transform:rotate(45deg)}
.cut__line{flex:1 1 auto;height:1px;background:var(--rule-2);transform-origin:left;
  transition:transform 1.2s var(--ease-out)}
.cut__ref{color:var(--ink)}
.cut__note{white-space:nowrap}
.js .cut:not(.is-in) .cut__line{transform:scaleX(0)}
.sec-head{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:var(--s-5);
  align-items:end;margin-bottom:clamp(2.5rem, 1.5rem + 3vw, 4.5rem)}
.sec-head h2{grid-column:1 / span 7}
.sec-head .lede{grid-column:8 / -1;margin:0;color:var(--ink-2)}
.sec-head--stack h2,.sec-head--stack .lede{grid-column:1 / span 8}
@media (max-width:959px){
  .sec-head h2,.sec-head .lede{grid-column:1 / -1}
}

/* ---------- 4 · lámina: marco + cajetín ---------- */
.sheet{position:fixed;inset:var(--frame);z-index:40;pointer-events:none;border:1px solid var(--rule)}
.sheet i{position:absolute;background:var(--ink-3)}
.sheet .t,.sheet .b{left:50%;width:1px;height:9px}.sheet .t{top:0}.sheet .b{bottom:0}
.sheet .l,.sheet .r{top:50%;height:1px;width:9px}.sheet .l{left:0}.sheet .r{right:0}
.sheet .c1,.sheet .c2,.sheet .c3,.sheet .c4{width:0;height:0;background:none}
.sheet .c1::before,.sheet .c2::before,.sheet .c3::before,.sheet .c4::before{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--ink-2)}
.sheet .c1{left:-1px;top:-1px}.sheet .c1::before{border-left-width:1px;border-top-width:1px}
.sheet .c2{right:-1px;top:-1px}.sheet .c2::before{right:0;border-right-width:1px;border-top-width:1px}
.sheet .c3{right:-1px;bottom:-1px}.sheet .c3::before{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.sheet .c4{left:-1px;bottom:-1px}.sheet .c4::before{bottom:0;border-left-width:1px;border-bottom-width:1px}

.cartouche{position:fixed;right:calc(var(--frame) + 10px);bottom:calc(var(--frame) + 14px);z-index:41;
  writing-mode:vertical-rl;transform:rotate(180deg);display:flex;background:var(--paper);border:1px solid var(--ink-2);
  font:400 10.5px/1 var(--f-mono);color:var(--ink-2);letter-spacing:.04em;white-space:nowrap;
  transition:opacity .35s}
.cartouche > div{padding:10px 6px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:7px}
.cartouche > div:last-child{border-bottom:0}
.cartouche b{font-weight:500;color:var(--ink);font-size:11px}
.cartouche .cartouche__plano b{display:inline-block;min-height:19ch}
.cartouche .cartouche__brand svg{width:14px;height:14px;flex:0 0 auto;transform:rotate(90deg)}
.cartouche.is-hidden{opacity:0}
@media (max-width:1099px){.sheet,.cartouche{display:none}}
@media (min-width:1100px){:root{--gut:max(clamp(20px, 5.2vw, 92px), 64px)}}

/* ---------- 5 · marca ---------- */
.logo{display:inline-flex;align-items:flex-end;gap:.36em;font-size:22px;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo:hover{color:var(--ink)}
.logo__word{height:.966em;width:3.632em;flex:0 0 auto}
.logo__word .ink{fill:currentColor}
.logo__word .dot{fill:var(--logo-dot);transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease-out)}
.logo:hover .logo__word .dot{transform:scale(1.25)}
.logo__sub{font:500 .42em/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.235em}

/* ---------- 6 · navegación ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);display:flex;align-items:center;gap:clamp(16px, 3vw, 40px);
  padding:0 calc(var(--frame) + clamp(14px, 2.4vw, 34px));
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px);
  transition:opacity .6s var(--ease-out), background .3s}
.nav::after{content:"";position:absolute;left:var(--frame);right:var(--frame);bottom:0;height:1px;background:var(--rule);
  transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease-out)}
.nav.is-scrolled::after{transform:scaleX(1)}
.nav.is-faded{opacity:0;pointer-events:none}
.nav.is-faded::after{transform:scaleX(0)}
.nav > nav{margin-left:auto}
.nav__links{display:flex;gap:clamp(18px, 2.2vw, 34px);list-style:none;margin:0 0 0 auto;padding:0}
.nav__links a{position:relative;display:inline-block;padding:8px 0;font-size:.95rem;font-weight:500;text-decoration:none;color:var(--ink-2)}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--line-rust);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__links .n{font:500 10px/1 var(--f-mono);color:var(--ink-3);margin-right:6px;letter-spacing:.04em;vertical-align:1px}
.nav__cta{flex:0 0 auto}
.nav__toggle{display:none;margin-left:auto;align-items:center;gap:10px;height:42px;padding:0 4px 0 12px;border:0;background:none;color:var(--ink);
  font:500 var(--t-mono)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.nav__toggle .bars{position:relative;width:22px;height:10px}
.nav__toggle .bars::before,.nav__toggle .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .4s var(--ease-out), top .4s var(--ease-out)}
.nav__toggle .bars::before{top:0}.nav__toggle .bars::after{top:8.5px}
.nav__toggle[aria-expanded="true"] .bars::before{top:4.25px;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] .bars::after{top:4.25px;transform:rotate(-45deg)}

/* menú móvil: una lámina que se despliega */
.menu{position:fixed;inset:0;z-index:49;background:var(--paper);padding:calc(var(--navh) + 24px) 22px 28px;
  display:flex;flex-direction:column;gap:28px;overflow:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease-out), visibility 0s .6s}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--ease-out), visibility 0s}
.menu ol{list-style:none;border-top:1px solid var(--rule-2)}
.menu li{border-bottom:1px solid var(--rule-2)}
.menu li a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 2px;text-decoration:none;
  font:700 clamp(1.6rem, 7vw, 2.2rem)/1.05 var(--f-display);letter-spacing:-.035em}
.menu li a .n{font:500 var(--t-mono)/1 var(--f-mono);letter-spacing:.04em;color:var(--ink-2)}
.menu__foot{margin-top:auto;display:grid;gap:14px}
.menu__foot p{margin:0;font:400 var(--t-mono)/1.5 var(--f-mono);color:var(--ink-2)}
html.menu-open{overflow:hidden}
@media (max-width:959px){
  :root{--navh:60px}
  .nav__links,.nav .nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .logo{font-size:19px}
}
@media (min-width:960px){.menu{display:none}}

/* ---------- 7 · botones y enlaces ---------- */
.btn{--bg:transparent;--fg:var(--ink);--bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 22px;
  border:1px solid var(--bd);background:var(--bg);color:var(--fg);font:600 .97rem/1 var(--f-text);letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;isolation:isolate;overflow:hidden;
  transition:color .35s var(--ease-out), border-color .35s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease-out)}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:scaleY(1)}
.btn svg{width:18px;height:18px;flex:0 0 auto;transition:transform .45s var(--ease-out)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--solid{--bg:var(--ink);--fg:var(--paper)}
.btn--solid::before{background:var(--rust)}
.btn--solid:hover{color:var(--paper);border-color:var(--rust)}
.btn--sm{min-height:40px;padding:0 16px;font-size:.9rem}
.btn[aria-disabled="true"],.btn--solid[aria-disabled="true"]{--bg:transparent;--fg:var(--ink-2);--bd:var(--ink-3);border-style:dashed;cursor:not-allowed}
.btn[aria-disabled="true"]::before{display:none}
.btn[aria-disabled="true"]:hover{color:var(--ink-2)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;padding:6px 0;
  background:linear-gradient(var(--line-rust),var(--line-rust)) left bottom / 0 1px no-repeat;
  transition:background-size .5s var(--ease-out), color .2s}
.link-arrow svg{width:16px;height:16px;transition:transform .45s var(--ease-out)}
.link-arrow:hover{background-size:100% 1px;color:var(--ink)}
.link-arrow:hover svg{transform:translateX(4px)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}

/* ---------- 8 · etiquetas honestas ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--rust);border:1px solid currentColor;padding:5px 7px 4px;white-space:nowrap;vertical-align:middle}
.tag--ink{color:var(--ink-2)}
.pend{display:inline-flex;align-items:center;gap:6px;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--rust);border:1px dashed currentColor;padding:5px 8px 4px;white-space:nowrap}
.pend::before{content:"";width:5px;height:5px;background:currentColor;transform:rotate(45deg)}

/* ---------- 9 · escenas embebidas (iframes diferidos) ---------- */
.scene{position:relative;aspect-ratio:16/10;background:var(--paper);overflow:hidden;contain:layout paint}
.scene iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .8s var(--ease-out);background:transparent}
.scene.is-ready iframe{opacity:1}
.scene__poster{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);transition:opacity .6s}
.scene.is-ready .scene__poster{opacity:0}
.scene__poster svg{width:56px;height:56px}
.scene__poster::before,.scene__poster::after{content:"";position:absolute;background:var(--rule)}
.scene__poster::before{left:0;right:0;top:50%;height:1px}
.scene__poster::after{top:0;bottom:0;left:50%;width:1px}
.scene__poster span{position:relative;z-index:1;background:var(--paper);padding:6px 10px;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:699px){.scene[data-narrow]{aspect-ratio:10/13}}
.fig{margin:0;position:relative}
.fig__frame{position:relative;border:1px solid var(--rule-2);padding:clamp(6px, 1vw, 12px)}
.fig__frame::before,.fig__frame::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--line-rust);pointer-events:none}
.fig__frame::before{left:-1px;top:-1px;border-left-width:1.5px;border-top-width:1.5px}
.fig__frame::after{right:-1px;bottom:-1px;border-right-width:1.5px;border-bottom-width:1.5px}
.fig figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 16px;margin-top:12px;
  font:400 var(--t-mono)/1.45 var(--f-mono);color:var(--ink-2)}
.fig figcaption b{font-weight:500;color:var(--ink)}
.fig figcaption .tag{align-self:center}

/* ---------- 10 · dibujo que se traza (stroke-dashoffset) ----------
   axia.js pone pathLength="1" (--dl = 1). Con vector-effect:non-scaling-stroke Chrome aplica los guiones en
   píxeles de pantalla, así que en esos trazos axia.js quita pathLength y pone --dl = longitud en pantalla (px).
   Al terminar cada trazo (o el dibujo entero: .is-done) se quita el guion del trazado y vuelve el propio del
   elemento (p. ej. una línea discontinua .da). */
.js [data-draw]:not(.is-done) .d:not(.is-done){stroke-dasharray:var(--dl, 1) var(--dl, 1);stroke-dashoffset:var(--dl, 1);
  transition:stroke-dashoffset var(--draw-dur) var(--ease-io) calc(var(--i, 0) * 90ms)}
.js [data-draw].is-drawn:not(.is-done) .d:not(.is-done){stroke-dashoffset:0}
.js [data-draw] .f{opacity:0;transition:opacity .8s ease calc(var(--i, 0) * 90ms + .6s)}
.js [data-draw].is-drawn .f{opacity:1}

/* ---------- 11 · pie ---------- */
.foot{position:relative;z-index:2;margin:0 var(--frame) var(--frame);border-top:1px solid var(--ink);padding:clamp(3rem, 2rem + 4vw, 6rem) 0 var(--s-6)}
.foot__grid{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:var(--s-7)}
.foot__brand{grid-column:1 / span 5}
.foot__brand .logo{font-size:30px}
.foot__brand p{margin:var(--s-5) 0 0;font:700 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.1 var(--f-display);letter-spacing:-.035em;max-width:16ch}
.foot__col{grid-column:span 2}
.foot__col--wide{grid-column:span 3}
.foot h2{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s-4)}
.foot ul{list-style:none;display:grid;gap:9px}
.foot li a{text-decoration:none;color:var(--ink)}
.foot li a:hover{color:var(--rust)}
.foot li .n{display:inline-block;width:2.6em;font:400 var(--t-micro)/1 var(--f-mono);color:var(--ink-3)}
.foot dl{margin:0;display:grid;gap:10px;font-size:var(--t-small)}
.foot dl div{display:grid;gap:4px}
.foot dt{font:400 var(--t-micro)/1 var(--f-mono);color:var(--ink-2);letter-spacing:.04em}
.foot dd{margin:0}
.foot__base{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding-top:var(--s-5);
  border-top:1px solid var(--rule);font:400 var(--t-micro)/1.5 var(--f-mono);color:var(--ink-2);letter-spacing:.02em}
.foot__base a{color:var(--ink-2)}
/* objetivos táctiles de al menos 24 px (WCAG 2.2, 2.5.8) */
.foot__col a,.foot__base a{display:inline-block;padding-block:4px}
.logo{padding-block:4px}
@media (max-width:959px){
  .foot{margin:0}
  .foot__brand{grid-column:1 / -1}
  .foot__col,.foot__col--wide{grid-column:span 6}
}
@media (max-width:520px){.foot__col,.foot__col--wide{grid-column:1 / -1}}

/* ---------- 12 · formularios de cálculo (rangos con rombo) ---------- */
.range{-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;
  --p:50%}
.range::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--ink) var(--p),var(--rule-2) var(--p))}
.range::-moz-range-track{height:1px;background:var(--rule-2)}
.range::-moz-range-progress{height:1px;background:var(--ink)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-7px;background:var(--paper);border:1.5px solid var(--line-rust);
  transform:rotate(45deg);transition:transform .25s var(--ease-out), background .2s}
.range::-moz-range-thumb{width:12px;height:12px;background:var(--paper);border:1.5px solid var(--line-rust);border-radius:0;transform:rotate(45deg)}
.range:hover::-webkit-slider-thumb,.range:active::-webkit-slider-thumb{transform:rotate(45deg) scale(1.25);background:var(--line-rust)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--rust);outline-offset:3px}
.range:focus-visible::-moz-range-thumb{outline:2px solid var(--rust);outline-offset:3px}

/* ---------- 13 · movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-draw]:not(.is-done) .d:not(.is-done){stroke-dasharray:none;stroke-dashoffset:0}
  .js [data-draw] .f{opacity:1}
  .js .cut:not(.is-in) .cut__line{transform:none}
}

/* ---------- 14 · impresión ---------- */
@media print{
  :root{--paper:#fff;--paper-2:#fff;--ink:#000;--ink-2:#333;--rule:#999;--rule-2:#666}
  .nav,.menu,.cartouche,.sheet,.skip,.scene iframe,.nav__toggle{display:none!important}
  body{font-size:11pt;background:#fff}
  .sec{padding-block:24pt;break-inside:avoid-page}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
  .scene{aspect-ratio:auto;height:auto;border:1px solid #999}
  .scene__poster{position:static;padding:16pt}
}

/* =====================================================================
   15 · componentes reutilizables
   ===================================================================== */

/* ---- 15.1 · recorrido horizontal fijado (.journey) ----
   Vertical por defecto (móvil, sin JS, movimiento reducido). Con GSAP en ≥960px añade .is-h. */
.journey{position:relative}
.journey__bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 28px;padding-block:18px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.journey__name{margin:0;font:500 var(--t-micro)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.journey__days{position:relative;list-style:none;display:grid;grid-template-columns:repeat(5, 1fr);gap:0}
.journey__days li{position:relative}
.journey__days a{display:flex;align-items:center;gap:8px;padding:6px 0;text-decoration:none;
  font:500 var(--t-mono)/1 var(--f-mono);letter-spacing:.04em;color:var(--ink-3);transition:color .3s}
.journey__days a::before{content:"";width:7px;height:7px;border:1.25px solid currentColor;transform:rotate(45deg);transition:background .3s, border-color .3s}
.journey__days li.is-on a{color:var(--ink)}
.journey__days li.is-cur a::before{background:var(--line-rust);border-color:var(--line-rust)}
.journey__daywrap{position:relative}
.journey__progress{position:absolute;left:0;right:0;bottom:-19px;height:1px;background:transparent;pointer-events:none}
.journey__fill{position:absolute;inset:0;background:var(--line-rust);transform-origin:left;transform:scaleX(0)}
.journey__track{display:block}
.journey:not(.is-h) .panel{width:min(var(--max), 100% - 2 * var(--gut));margin-inline:auto}
.journey__panel{padding-block:clamp(2.5rem, 6vw, 4.5rem);border-bottom:1px solid var(--rule)}
.panel{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:var(--s-6);align-items:center}
.panel__copy{grid-column:1 / span 5}
.panel__fig{grid-column:6 / -1}
.panel__day{display:flex;align-items:baseline;gap:12px;margin:0 0 var(--s-4);font:500 var(--t-mono)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--rust)}
.panel__day span{color:var(--ink-3)}
.panel__title{font-size:clamp(1.6rem, 1.1rem + 1.9vw, 2.75rem);font-weight:700;letter-spacing:-.04em;line-height:1.02;margin:0 0 var(--s-6);max-width:14ch}
.panel__ba{margin:0;display:grid;gap:0}
.panel__ba > div{display:grid;grid-template-columns:7.5rem 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--rule)}
.panel__ba dt{font:500 var(--t-micro)/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:.2em}
.panel__ba dd{margin:0;font-size:var(--t-small);line-height:1.55}
.panel__ba .hoy dd{color:var(--ink-2)}
.panel__ba .hacemos{border-top-color:var(--ink)}
.panel__ba .hacemos dt{color:var(--rust)}
.panel__ba .hacemos dd{color:var(--ink);font-weight:500}
.panel__go{margin-top:var(--s-5)}
@media (max-width:959px){
  .journey__bar{grid-template-columns:1fr;gap:12px}
  .journey__bar .tag{justify-self:start}
  .panel__copy,.panel__fig{grid-column:1 / -1}
  .panel__ba > div{grid-template-columns:1fr;gap:4px}
}
/* horizontal */
.journey.is-h .journey__pin{height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;background:var(--paper)}
.journey.is-h .journey__bar{flex:0 0 auto;margin-top:calc(var(--frame) + 14px)}
.journey.is-h .journey__track{flex:1 1 auto;display:flex;width:max-content;will-change:transform}
.journey.is-h .journey__panel{flex:0 0 100vw;width:100vw;display:flex;align-items:center;padding:clamp(16px, 3vh, 40px) 0 calc(var(--frame) + 64px);border:0}
.journey.is-h .panel{width:min(var(--max), 100vw - 2 * var(--gut));margin-inline:auto}
.journey.is-h .panel__fig .scene{width:min(100%, (100svh - 300px) * 1.6);margin-inline:auto}
.journey.is-h .panel__fig{opacity:.35;transform:scale(.97);transition:opacity .8s var(--ease-out), transform 1s var(--ease-out)}
.journey.is-h .journey__panel.is-active .panel__fig{opacity:1;transform:none}

/* ---- 15.2 · antes / después ([data-compare]) ---- */
.compare{position:relative}
.compare__stage{position:relative;--x:50%;display:grid;gap:var(--s-6)}
.week{position:relative;background:var(--paper)}
.week__title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px;font:400 var(--t-mono)/1.3 var(--f-mono);color:var(--ink-2)}
.week__title b{font:700 clamp(1.05rem, .9rem + .6vw, 1.4rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.week__row{display:grid;grid-template-columns:3.2rem 1fr;align-items:center;gap:10px;padding:5px 0}
.week__day{font:500 var(--t-mono)/1 var(--f-mono);color:var(--ink-2)}
.week__strip{display:flex;height:clamp(24px, 1.6rem + .6vw, 40px);border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.wk{display:block;min-width:0;border-right:2px solid var(--paper)}
.wk:last-child{border-right:0}
.wk--A{background:var(--paper-3)}
.wk--P{background:repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 5px), var(--paper)}
.wk--I{background:var(--line-rust)}
.week__axis{display:flex;justify-content:space-between;margin:10px 0 0 calc(3.2rem + 10px);font:400 var(--t-micro)/1 var(--f-mono);color:var(--ink-3)}
.compare__handle,.compare__range{display:none}
.compare.is-on .compare__stage{display:block}
.compare.is-on .week--before{position:absolute;inset:0;clip-path:inset(-2px calc(100% - var(--x)) -2px 0);z-index:1}
.compare.is-on .week--after .week__title{justify-content:flex-end}
.compare.is-on .compare__handle{display:block;position:absolute;top:-10px;bottom:-10px;left:var(--x);width:1px;background:var(--ink);z-index:2;pointer-events:none}
.compare__handle span{position:absolute;top:50%;left:0;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--ink);border-radius:50%;color:var(--ink);transition:transform .3s var(--ease-out), background .3s}
.compare__handle span svg{width:20px;height:20px}
.compare.is-on .compare__range{display:block;position:absolute;inset:-10px 0;width:100%;height:calc(100% + 20px);margin:0;opacity:0;cursor:ew-resize;z-index:3;touch-action:pan-y}
.compare.is-on:has(.compare__range:focus-visible) .compare__handle span{outline:2px solid var(--rust);outline-offset:3px}
.compare.is-on:has(.compare__range:active) .compare__handle span{transform:scale(1.1);background:var(--ink);color:var(--paper)}
.compare__legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:var(--s-6) 0 0;padding:0;font:400 var(--t-mono)/1.3 var(--f-mono);color:var(--ink-2)}
.compare__legend li{display:flex;align-items:center;gap:10px}
.compare__legend i{width:22px;height:12px;border:0}
.compare__stats{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:var(--s-6) 0 0;border-top:1px solid var(--ink)}
.compare__stats > div{padding:16px 18px 0 0}
.compare__stats > div + div{padding-left:18px;border-left:1px solid var(--rule)}
.compare__stats dt{font:700 1rem/1.2 var(--f-display);letter-spacing:-.02em;margin-bottom:6px}
.compare__stats dd{margin:0;font:400 var(--t-mono)/1.6 var(--f-mono);color:var(--ink-2)}
.compare__stats dd b{font-weight:500;color:var(--ink)}
@media (max-width:640px){
  .week__row{grid-template-columns:2.4rem 1fr;gap:8px}
  .week__axis{margin-left:calc(2.4rem + 8px)}
  .compare__stats{grid-template-columns:1fr}
  .compare__stats > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule);margin-top:16px}
}

/* ---- 15.4 · miniaturas de los planos (.plano__mini en la portada, .sv-mini en Servicios) ----
   Trazos .d / .s finos que no escalan; necesitan el patrón #mHatch en la página para .hatch.
   Movimiento lento (.mv) solo al pasar por encima del enlace (o siempre en táctil). */
.plano__mini,.sv-mini{width:100%;height:auto;aspect-ratio:200/120;color:var(--ink)}
.sv-mini{max-width:220px}
:is(.plano__mini,.sv-mini) :is(.d,.s){fill:none;stroke:var(--line-ink);stroke-width:1.15;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
:is(.plano__mini,.sv-mini) .r{stroke:var(--line-rust)}
:is(.plano__mini,.sv-mini) .fa{stroke:var(--line-faint)}
:is(.plano__mini,.sv-mini) .fill-r{fill:var(--line-rust);stroke:none}
:is(.plano__mini,.sv-mini) .fill-p{fill:var(--paper)}
:is(.plano__mini,.sv-mini) .hatch{fill:url(#mHatch)}
.mv{animation-play-state:paused!important}
a:hover .mv,a:focus-visible .mv{animation-play-state:running!important}
@media (hover:none){.is-drawn .mv{animation-play-state:running!important}}
@keyframes m-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}
@keyframes m-flow{to{stroke-dashoffset:-24}}
@keyframes m-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes m-rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes m-pass{0%,12%{transform:translateX(0)}30%,42%{transform:translateX(44px)}60%,72%{transform:translateX(88px)}90%,100%{transform:translateX(132px)}}
@keyframes m-fill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@keyframes m-move{to{offset-distance:100%}}
.m-pulse{transform-box:fill-box;transform-origin:center;animation:m-pulse 1.8s var(--ease-io) infinite}
.m-flow{stroke-dasharray:3 5!important;animation:m-flow 1.4s linear infinite}
.m-blink{animation:m-blink 1s steps(1) infinite}
.m-rise{animation:m-rise 2.4s var(--ease-io) infinite}
.m-pass{animation:m-pass 4.8s var(--ease-io) infinite}
/* la barra que se llena: escala en x (no guiones: con non-scaling-stroke los guiones van en px de pantalla) */
.m-fill{transform-box:fill-box;transform-origin:0 50%;animation:m-fill 3.6s var(--ease-io) infinite}
.m-move{offset-path:path("M30 34 H82 V86 H134 V34 H176");offset-rotate:0deg;animation:m-move 3.2s var(--ease-io) infinite}

/* ---- 15.5 · pies de figura en móvil: la etiqueta debajo, no al lado ---- */
@media (max-width:599px){ .fig figcaption{grid-template-columns:1fr} .fig figcaption .tag{justify-self:start;grid-row:2} }

/* =====================================================================
   16 · láminas interiores (02–05, anexos legales y 404)
   ===================================================================== */
/* cabecera (.phead) con índice (.toc) */
.phead{padding-top:calc(var(--navh) + clamp(2.5rem, 1.5rem + 4vw, 6rem));padding-bottom:clamp(3rem, 2rem + 3vw, 5.5rem)}
.phead .cut{margin-bottom:clamp(1.75rem, 1rem + 2.5vw, 3.25rem)}
.phead__grid{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:clamp(1.5rem, 1rem + 1.6vw, 2.5rem);align-items:end}
.phead h1{grid-column:1 / span 10;font-size:clamp(2.3rem, 1.15rem + 4.6vw, 5.1rem);max-width:15ch}
.phead .lede{grid-column:1 / span 6;align-self:start;margin:0;color:var(--ink-2);max-width:46ch}
.toc{grid-column:9 / -1;align-self:end}
.toc .label{margin:0 0 10px}
.toc ol{list-style:none;border-top:1px solid var(--ink)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:grid;grid-template-columns:3.4rem 1fr auto;align-items:baseline;gap:8px;padding:9px 0;text-decoration:none;font-size:var(--t-small);color:var(--ink)}
.toc a .n{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.04em;color:var(--ink-3)}
.toc a::after{content:"";width:6px;height:6px;border:1.25px solid var(--ink-3);transform:rotate(45deg);transition:background .3s,border-color .3s}
.toc a:hover::after{background:var(--line-rust);border-color:var(--line-rust)}
@media (max-width:959px){
  .phead h1,.phead .lede,.toc{grid-column:1 / -1}
  .toc{margin-top:var(--s-2)}
}
/* -- cierre «Hablemos» de las láminas interiores -- */
.cierre{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:var(--s-6);align-items:end;
  padding-top:var(--s-6);border-top:1px solid var(--ink)}
.cierre h2{grid-column:1 / span 7;font-size:clamp(2rem, 1.2rem + 3.2vw, 4rem)}
.cierre__t{grid-column:8 / -1}
.cierre__t p{color:var(--ink-2);max-width:38ch}
@media (max-width:959px){.cierre h2,.cierre__t{grid-column:1 / -1}}
.ow{display:inline-flex;vertical-align:middle;margin-left:6px}  /* contenedor de un .pend dentro de una frase */
.pend.w{white-space:normal;line-height:1.4;align-items:flex-start;max-width:100%}   /* PENDIENTE largo: puede partirse */
.pend.w::before{flex:0 0 auto;margin-top:.42em}

/* =====================================================================
   17 · láminas de servicio (01 y 01.1–01.5): .sv-*
   ===================================================================== */
/* --- portada de lámina --- */
.sv-hero{padding-top:calc(var(--navh) + clamp(1.75rem, 1rem + 2.6vw, 3.5rem))}
.sv-crumbs{margin:0 0 var(--s-5);font:400 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sv-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;row-gap:4px}
.sv-crumbs li+li::before{content:"/";margin:0 .75em;color:var(--ink-3)}
.sv-crumbs a{text-decoration:none;color:var(--ink-2)}
.sv-crumbs a:hover{color:var(--rust)}
.sv-crumbs [aria-current]{color:var(--ink)}
.sv-hero .cut{margin-bottom:clamp(1.75rem, 1rem + 2.4vw, 3.25rem)}
.sv-top{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:var(--s-7);align-items:end}
.sv-top__copy{grid-column:1 / span 8}
.sv-h1{font-size:clamp(2.35rem, 1.05rem + 4.6vw, 5.4rem);max-width:12.5ch}
.sv-h1 .dot-r{font-weight:800}
.sv-top .lede{margin:clamp(1.25rem, 1rem + 1vw, 2rem) 0 0;max-width:46ch;color:var(--ink-2)}
.sv-ficha{grid-column:9 / -1;margin:0;border-top:1px solid var(--ink);align-self:end}
.sv-ficha > div{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.sv-ficha dt{font:500 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sv-ficha dd{margin:0;font-size:var(--t-small);line-height:1.45}
.sv-hero__fig{margin-top:clamp(2.75rem, 1.5rem + 3.4vw, 5rem)}
.sv-hero--split .sv-top{align-items:start;row-gap:var(--s-6)}
.sv-hero--split .sv-top__copy{grid-column:1 / span 5}
.sv-hero--split .sv-h1{font-size:clamp(2.2rem, 1rem + 3.5vw, 4.25rem);max-width:11ch}
.sv-hero--split .sv-ficha{grid-column:1 / span 5;grid-row:2;align-self:start}
.sv-hero--split .sv-hero__fig{grid-column:7 / -1;grid-row:1 / span 2;margin:0;align-self:center}
@media (max-width:959px){
  .sv-top__copy,.sv-ficha,.sv-hero--split .sv-top__copy,.sv-hero--split .sv-ficha,.sv-hero--split .sv-hero__fig{grid-column:1 / -1;grid-row:auto}
  .sv-hero--split .sv-hero__fig{margin-top:var(--s-4)}
}
.sv-h2s{font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem)}

/* --- qué resolvemos: frases del día a día --- */
.sv-probs{list-style:none;border-top:1px solid var(--ink);counter-reset:p}
.sv-probs li{counter-increment:p;display:grid;grid-template-columns:3.25rem minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(16px, 3vw, 48px);
  padding:clamp(18px, 1.2rem + .6vw, 30px) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.sv-probs li::before{content:counter(p, decimal-leading-zero);font:500 var(--t-mono)/1 var(--f-mono);color:var(--rust)}
.sv-probs p{margin:0}
.sv-probs__a{font:600 clamp(1.12rem, .94rem + .8vw, 1.65rem)/1.22 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.sv-probs q{quotes:"«" "»"}
.sv-probs q::before,.sv-probs q::after{color:var(--rust)}
.sv-probs__b{color:var(--ink-2);font-size:var(--t-small);line-height:1.55;max-width:46ch}
@media (max-width:759px){
  .sv-probs li{grid-template-columns:2.4rem minmax(0,1fr);row-gap:8px}
  .sv-probs__b{grid-column:2}
}

/* --- qué construimos: lista de piezas --- */
.sv-parts{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));border-top:1px solid var(--ink)}
.sv-parts li{padding:22px clamp(16px, 2vw, 30px) 28px 0;border-bottom:1px solid var(--rule)}
.sv-parts li:not(:nth-child(3n+1)){padding-left:clamp(16px, 2vw, 30px);border-left:1px solid var(--rule)}
.sv-parts__k{display:block;margin-bottom:18px;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.1em;color:var(--rust)}
.sv-parts h3{margin-bottom:10px}
.sv-parts p{margin:0;color:var(--ink-2);font-size:var(--t-small);line-height:1.55;max-width:40ch}
@media (max-width:959px) and (min-width:600px){
  .sv-parts{grid-template-columns:repeat(2, minmax(0,1fr))}
  .sv-parts li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .sv-parts li:nth-child(2n){padding-left:clamp(16px, 2vw, 30px);border-left:1px solid var(--rule)}
}
@media (max-width:599px){
  .sv-parts{grid-template-columns:1fr}
  .sv-parts li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .sv-parts li{padding-bottom:22px}
}

/* --- figuras con notas --- */
.sv-look{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:var(--s-7);align-items:start}
.sv-look__main{grid-column:1 / span 8}
.sv-look__side{grid-column:9 / -1}
.sv-look__pair{grid-column:span 6}
.sv-notes{list-style:none;border-top:1px solid var(--ink);counter-reset:n}
.sv-notes li{counter-increment:n;display:grid;grid-template-columns:2rem 1fr;gap:4px;padding:15px 0;border-bottom:1px solid var(--rule);font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.sv-notes li::before{content:counter(n);display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line-rust);border-radius:50%;
  font:500 10.5px/1 var(--f-mono);color:var(--rust);margin-top:1px}
.sv-notes b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
@media (max-width:959px){ .sv-look__main,.sv-look__side,.sv-look__pair{grid-column:1 / -1} }

.sv-look__side .fig figcaption{grid-template-columns:1fr}
.sv-look__side .fig figcaption .tag{justify-self:start;grid-row:2}
/* portada con escena ancha + leyenda */
.sv-hero__fig--wide{grid-column:1 / span 9}
.sv-hero__legend{grid-column:10 / -1;align-self:end;margin-bottom:calc(var(--t-mono) * 1.45 + 12px)}
.sv-hero__legend .label{display:block;margin-bottom:12px}
@media (max-width:959px){ .sv-hero__fig--wide,.sv-hero__legend{grid-column:1 / -1} .sv-hero__legend{margin:0} }
/* --- flujo dibujado (paso → paso → tú) --- */
.sv-flow{list-style:none;display:grid;grid-template-columns:repeat(var(--n, 5), minmax(0,1fr));gap:clamp(28px, 3vw, 44px)}
.sv-flow > li{position:relative;display:grid;align-content:start;gap:8px;padding:16px 16px 18px;border:1px solid var(--rule-2);background:var(--paper);min-height:100%}
.sv-flow__k{font:500 var(--t-micro)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sv-flow b{font:600 1.02rem/1.3 var(--f-text);letter-spacing:-.01em}
.sv-flow small{font:400 var(--t-micro)/1.5 var(--f-mono);color:var(--ink-2)}
.sv-flow__wire{position:absolute;left:calc(-1 * clamp(28px, 3vw, 44px));top:50%;width:clamp(28px, 3vw, 44px);height:12px;margin-top:-6px;color:var(--ink)}
.sv-flow__wire .d{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.sv-flow > li.is-draft{border-style:dashed;border-color:var(--line-rust)}
.sv-flow > li.is-draft .sv-flow__k{color:var(--rust)}
.sv-flow > li.is-you{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sv-flow > li.is-you .sv-flow__k{color:color-mix(in srgb, var(--paper) 72%, transparent)}
.sv-flow > li.is-you small{color:color-mix(in srgb, var(--paper) 78%, transparent)}
.sv-flow > li.is-you::after{content:"";position:absolute;right:14px;top:16px;width:9px;height:9px;background:var(--line-rust);transform:rotate(45deg)}
@media (max-width:959px){
  .sv-flow{grid-template-columns:1fr;gap:30px}
  .sv-flow__wire{left:50%;top:-21px;width:30px;height:12px;margin:0 0 0 -15px;transform:rotate(90deg)}
}

/* --- qué incluye / qué no --- */
.sv-scope{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));column-gap:clamp(24px, 4vw, 72px);row-gap:var(--s-7)}
.sv-scope h3{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.sv-scope__mk{position:relative;flex:0 0 auto;width:12px;height:12px}
.sv-scope--si .sv-scope__mk{background:var(--ink);transform:rotate(45deg) scale(.8)}
.sv-scope--no .sv-scope__mk::before,.sv-scope--no .sv-scope__mk::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1.5px;background:var(--line-rust)}
.sv-scope--no .sv-scope__mk::before{transform:rotate(45deg)}.sv-scope--no .sv-scope__mk::after{transform:rotate(-45deg)}
.sv-scope ul{list-style:none}
.sv-scope li{position:relative;padding:15px 0 15px 28px;border-bottom:1px solid var(--rule);font-size:var(--t-small);line-height:1.55}
.sv-scope li::before{content:"";position:absolute;left:3px;top:calc(15px + .55em);width:7px;height:7px;transform:rotate(45deg);border:1.25px solid var(--ink)}
.sv-scope--no li{color:var(--ink-2)}
.sv-scope--no li::before{border:0;width:10px;height:1.25px;transform:none;left:2px;top:calc(15px + .8em);background:var(--line-rust)}
.sv-scope li b{color:var(--ink);font-weight:600}
.sv-scope__foot{margin:var(--s-6) 0 0;max-width:80ch;font:400 var(--t-mono)/1.6 var(--f-mono);color:var(--ink-2)}
@media (max-width:759px){ .sv-scope{grid-template-columns:1fr} }

/* --- cómo empezamos --- */
.sv-steps-wrap{position:relative}
/* del centro del primer rombo al del último: 2 de 3 columnas + 2 huecos */
.sv-steps__line{position:absolute;left:10px;top:0;width:calc(200% / 3 + 2 / 3 * clamp(16px, 2vw, 32px));height:24px;pointer-events:none}
.sv-steps__line .d{stroke:var(--ink);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.sv-steps{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:clamp(16px, 2vw, 32px)}
.sv-steps li{position:relative;padding-top:50px}
.sv-steps li::before{content:"";position:absolute;left:3px;top:5px;width:14px;height:14px;transform:rotate(45deg);background:var(--paper);border:1.5px solid var(--ink)}
.sv-steps li:last-child::before{background:var(--line-rust);border-color:var(--line-rust)}
.sv-steps__k{display:block;margin-bottom:12px;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sv-steps h3{margin-bottom:10px}
.sv-steps p{margin:0;color:var(--ink-2);font-size:var(--t-small);max-width:34ch}
.sv-start__note{margin:var(--s-7) 0 0;max-width:62ch;color:var(--ink-2)}
.sv-terms{margin:var(--s-7) 0 0;display:grid;grid-template-columns:1fr 1.6fr 1fr;border-top:1px solid var(--ink)}
.sv-terms > div{display:grid;gap:10px;align-content:start;padding:18px 18px 4px 0}
.sv-terms > div + div{padding-left:18px;border-left:1px solid var(--rule)}
.sv-terms dt{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sv-terms dd{margin:0;display:grid;gap:10px;justify-items:start}
.sv-terms small{font:400 var(--t-micro)/1.55 var(--f-mono);color:var(--ink-2);max-width:48ch}
.sv-terms .link-arrow{padding:0}
@media (max-width:959px){
  .sv-steps__line{display:none}
  .sv-steps{grid-template-columns:1fr;gap:0}
  .sv-steps li{padding:0 0 28px 40px;border-left:1px solid var(--ink);margin-left:10px}
  .sv-steps li:last-child{border-left-color:transparent}
  .sv-steps li::before{left:-8px;top:2px}
  .sv-terms{grid-template-columns:1fr}
  .sv-terms > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .sv-terms > div{padding-bottom:18px}
}

/* --- otros planos --- */
.sv-rel__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(1.75rem, 1rem + 2vw, 3rem)}
.sv-rel{list-style:none;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.sv-rel li + li{border-left:1px solid var(--rule)}
.sv-rel__a{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px;height:100%;padding:20px clamp(14px, 1.6vw, 24px) 24px;text-decoration:none;color:var(--ink);isolation:isolate}
.sv-rel__a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-2);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease-out)}
.sv-rel__a:hover,.sv-rel__a:focus-visible{color:var(--ink)}
.sv-rel__a:hover::before,.sv-rel__a:focus-visible::before{transform:scaleY(1)}
.sv-rel__n{font:500 var(--t-mono)/1 var(--f-mono);color:var(--ink-2)}
.sv-rel__name{font:700 clamp(1.08rem, .95rem + .5vw, 1.35rem)/1.1 var(--f-display);letter-spacing:-.03em}
.sv-rel__line{font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.sv-rel__go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sv-rel__go svg{width:15px;height:15px;transition:transform .5s var(--ease-out)}
.sv-rel__a:hover .sv-rel__go{color:var(--rust)}
.sv-rel__a:hover .sv-rel__go svg{transform:translate(3px,-3px)}
@media (max-width:959px){
  .sv-rel{grid-template-columns:repeat(2, minmax(0,1fr))}
  .sv-rel li:nth-child(3){border-left:0}
  .sv-rel li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:520px){
  .sv-rel{grid-template-columns:1fr}
  .sv-rel li + li{border-left:0;border-top:1px solid var(--rule)}
  .sv-rel__a{grid-template-columns:auto 96px;grid-template-areas:"n mini" "name name" "line line" "go go";padding-inline:0}
  .sv-rel__n{grid-area:n}.sv-rel .sv-mini{grid-area:mini}.sv-rel__name{grid-area:name}.sv-rel__line{grid-area:line}.sv-rel__go{grid-area:go}
}

/* --- hablemos --- */
.sv-cta{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2vw, 32px);row-gap:var(--s-6);align-items:start}
.sv-cta h2{grid-column:1 / span 7;font-size:clamp(2rem, 1.1rem + 3vw, 3.9rem);max-width:13ch}
.sv-cta__side{grid-column:8 / -1}
.sv-cta__side > p{font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:38ch}
.sv-cta__dl{margin:var(--s-5) 0 var(--s-6);display:grid;grid-template-columns:repeat(3, minmax(0,1fr));border-top:1px solid var(--ink)}
.sv-cta__dl > div{display:grid;gap:8px;align-content:start;padding:14px 12px 14px 0}
.sv-cta__dl > div + div{padding-left:12px;border-left:1px solid var(--rule)}
.sv-cta__dl dt{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sv-cta__dl dd{margin:0;font-weight:500;font-size:var(--t-small)}
@media (max-width:959px){ .sv-cta h2,.sv-cta__side{grid-column:1 / -1} }
@media (max-width:420px){ .sv-cta__dl{grid-template-columns:1fr} .sv-cta__dl > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)} }

/* --- etiquetas sobre maquetas --- */
.sv-mock-tag{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}

/* ===== v2 · pie corto (2026-11-06): marca a la izquierda, contacto a la derecha ===== */
@media (min-width:960px){ .foot__grid > .foot__col--wide{grid-column:8 / -1} }