/* BISO · marca. El sistema visual de la home (public/home.css) reducido a lo que comparten las páginas sueltas del sitio:
   tokens, base, etiquetas, titulares, botones, la flecha, el grano, los tonos de sección, el menú simple, las preguntas y el pie.
   Lo usan las páginas de presentación: /academia/ (src/pages/academia/index.astro), /guia (src/pages/guia.astro) y las
   estáticas de public/ (/kit, la de gracias del kit y /skill). El movimiento lo suma public/marca.js.
   ponytail: es una copia de partes de home.css, no un import (la home sigue autocontenida). Si cambia un token o un componente
   de la home, se cambia también acá. */

/* ───────── 1. Tokens (home.css, sección 1) ───────── */
:root{
  --night:#0a0d0b;--deep:#0d1710;--forest:#153521;--paper:#f1f3f1;--soft:#dce6dc;
  --ink:#141815;--text-2:#5a655b;--muted:#647067;--rule:#ced5cf;--rule-strong:#afc0ad;
  --white:#e9edea;--text-2-dark:#a9baaa;--muted-dark:#91a78d;--rule-dark:#334638;
  --line-dark:rgba(233,237,234,.22);--line-forest:rgba(183,217,191,.24);
  --green:#2e7d4f;--sage:#b7d9bf;--sage-2:#c0d4ba;
  --hover-light:#dce8dc;--hover-dark:#294b35;--focus-dark:#72ab79;--focus:var(--green);
  --ease:cubic-bezier(.22,1,.36,1);--gutter:clamp(22px,4.4vw,76px);
  --fs-manifesto:clamp(44px,7vw,100px);--fs-h2:clamp(36px,2.6vw + 26px,64px);--fs-h3-big:clamp(30px,2.4vw + 14px,48px);
  --fs-h3:clamp(24px,1.1vw + 14px,30px);--fs-figure:clamp(48px,6vw,96px);--fs-lead:clamp(16px,.25vw + 15px,19px);
  --fs-q:clamp(16px,.2vw + 15px,18px);--fs-body:15px;--fs-small:13px;--fs-micro:12px;--fs-label:11px;
  --col-gap:clamp(16px,2vw,24px);--split-gap:clamp(40px,7vw,100px);
  --section-y:clamp(72px,8vw,120px);--block-y:clamp(36px,4.5vw,64px);
  --field:#1c2b1f;--field-text:#e0ecda;--placeholder:#94a889;--field-line:#6f8c66;--safelight:#f0957a;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media(max-width:500px){:root{--fs-manifesto:clamp(36px,10.4vw,44px);--fs-label:10px}}

/* ───────── 2. Base ───────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit}
button{cursor:pointer;color:inherit}
img{display:block;max-width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
::selection{background:#bed6b9;color:var(--night)}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
p{line-height:1.65;text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;z-index:300;left:16px;top:-90px;background:var(--paper);padding:14px 20px;border-radius:30px;color:var(--ink)}
.skip:focus{top:16px}
.wrap{width:min(1360px,100%);padding-inline:var(--gutter);margin:auto}
.section{padding-block:var(--section-y)}
.label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.14em;font-weight:500;line-height:1.5;color:var(--muted)}
.section-title{font-size:var(--fs-h2);letter-spacing:-.05em;line-height:1.05}
.label+h2,.label+h3{margin-top:20px}
@media(max-width:500px){.label{letter-spacing:.1em}}

/* ───────── 3. Tonos de sección ─────────
   Fondo, texto y los colores secundarios que pasan AA sobre cada fondo: --txt-2 (texto secundario) y --line (filetes).
   En --soft la etiqueta va en --text-2: --muted no llega a 4,5:1 (como en la home). */
.tone-night,.tone-deep,.tone-forest{color:var(--white);--txt-2:var(--text-2-dark);--line:var(--rule-dark);--focus:var(--focus-dark);color-scheme:dark}
.tone-night{background:var(--night)}
.tone-deep{background:var(--deep)}
.tone-forest{background:var(--forest);--line:var(--line-forest)}
.tone-paper,.tone-soft{color:var(--ink);--txt-2:var(--text-2);--line:var(--rule-strong);color-scheme:light}
.tone-paper{background:var(--paper)}
.tone-soft{background:var(--soft)}
.tone-night .label,.tone-deep .label{color:var(--muted-dark)}
.tone-forest .label{color:var(--text-2-dark)}
.tone-paper .label,.tone-soft .label{color:var(--text-2)} /* --text-2 y no --muted: sobre el orbe, --muted bajaba de 4,5:1 */
.acento{color:var(--sage-2)}
.tone-paper .acento,.tone-soft .acento{color:var(--green)}
/* Una sección clara que tapa el orbe (como las oscuras): para las que tienen texto verde chico. */
.cubre{position:relative;isolation:isolate}

/* Grano de película: solo en las secciones oscuras de color liso. */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);background-size:160px;opacity:.07}
@media(prefers-contrast:more){.grain::after{display:none}}

/* ───────── 4. Botones y la flecha ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:14px 22px;border-radius:50px;border:1px solid transparent;font-size:var(--fs-small);font-weight:500;line-height:1.2;transition:background .25s,border-color .25s}
.btn-light{background:var(--paper);color:var(--night)}
.btn-light:hover{background:var(--hover-light)}
.btn-dark{background:var(--night);color:var(--paper)}
.btn-dark:hover{background:var(--hover-dark)}
.btn-outline{border-color:#ffffff58;background:#17221a38;color:var(--white)}
.btn-outline:hover{background:#273f3070;border-color:#ffffffa0}
.text-link{display:inline-flex;gap:18px;align-items:center;padding:10px 0;border-bottom:1px solid currentColor;font-size:var(--fs-small);transition:opacity .2s}
.text-link:hover{opacity:.7}
.inline-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.inline-link:hover{text-decoration-thickness:2px}
/* Flecha única del sitio (el SVG fino de home.css): abajo, arriba y afuera son la misma flecha rotada; en hover avanza 3 px. */
.ico-arrow{display:inline-block;flex:none;vertical-align:middle;width:13px;height:13px;transition:transform .25s var(--ease)}
.ico-down{transform:rotate(90deg)}
.ico-up{transform:rotate(-90deg)}
.ico-ext{transform:rotate(-45deg)}
.btn:hover .ico-arrow,.text-link:hover .ico-arrow{transform:translateX(3px)}
.btn:hover .ico-down,.text-link:hover .ico-down{transform:translateY(3px) rotate(90deg)}
@media(prefers-reduced-motion:no-preference){.btn:active{transform:scale(.97);transition:transform .1s ease-out}}
@media(prefers-reduced-motion:reduce){.ico-arrow{transition:none}}

/* ───────── 5. Menú ─────────
   El vidrio de la home, sin enlaces del medio. Sin JS (o con "Reducir movimiento") queda arriba de todo, en blanco sobre la
   primera sección, que tiene que ser oscura, y se va con el scroll. Con marca.js (html.marca-js) es fijo como en la home y
   home.js le pone o le saca .nav--dark según la sección [data-nav-theme] que tiene debajo. */
.nav{position:absolute;inset-inline:0;top:0;z-index:90;padding:16px 16px 0;pointer-events:none}
.nav>*{pointer-events:auto}
.marca-js .nav{position:fixed}
html.marca-js{scroll-padding-top:84px}
.glass{background-image:linear-gradient(to bottom right,rgba(255,255,255,.40) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 100%);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px);border:1px solid rgba(255,255,255,.10);border-radius:4.25px;box-shadow:0 2px 2px 0 rgba(0,0,0,.10);overflow:hidden}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:20px;height:51px;padding-inline:30px}
.nav-brand{display:flex;align-items:center;min-height:44px;min-width:44px}
.nav-logo{display:block;height:28px;width:auto;filter:brightness(0);transition:filter .4s var(--ease)}
.nav-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#000;font-size:13px;letter-spacing:-.26px;white-space:nowrap;transition:opacity .3s var(--ease)}
.nav-link:hover{opacity:.65}
.nav-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff}
.nav-dot .ico-arrow{width:11px;height:11px}
.nav--dark{--focus:var(--focus-dark)}
.nav--dark .nav-link{color:#fff}
.nav--dark .nav-logo{filter:brightness(0) invert(1)}
/* El vidrio recorta (overflow:hidden): el foco va más pegado para que el anillo entre entero en los 51 px de la barra. */
.nav a:focus-visible{outline-offset:1px}
/* Lo que dice la página en el menú cuando no hay enlace (Guía gratis, Kit · US$27…). */
.nav-tag{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.14em;font-weight:500;line-height:1.5;color:#000;transition:color .4s var(--ease)}
.nav--dark .nav-tag{color:#fff}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.glass{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(0,0,0,.35)}.nav--dark .glass{background:var(--deep);border-color:rgba(255,255,255,.35)}}
@media(max-width:800px){.navrow{padding-inline:18px}.nav-link{font-size:12px}.nav-dot{display:none}}

/* ───────── 6. Preguntas (home.css, sección 10) ───────── */
/* .columnas es el mismo armado para otras secciones: titular fijo a la izquierda y el contenido a la derecha. */
.faq,.columnas{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--split-gap)}
.faq-lead,.columnas-lead{position:sticky;top:110px;align-self:start}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-of-type{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:70px;padding:21px 0;font-size:var(--fs-q);line-height:1.4;letter-spacing:-.015em}
/* Subrayado en hover en vez del verde de la home: el verde sobre --soft no llega a 4,5:1. */
.faq-list summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;font-size:22px;color:#65865c;font-weight:300}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{padding:0 34px 24px 0;font-size:var(--fs-body);line-height:1.7;color:var(--txt-2);max-width:60ch}
.faq-list details p:not(:last-child){padding-bottom:12px}
.faq-list a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.faq-list a:hover{text-decoration-thickness:2px}
@media(max-width:800px){.faq,.columnas{grid-template-columns:1fr;gap:40px}.faq-lead,.columnas-lead{position:static}}

/* ───────── 7. Pie (home.css, sección 13) ───────── */
.footer{background:var(--deep);color:var(--text-2-dark);border-top:1px solid rgba(71,96,64,.43);padding-block:64px 40px;--focus:var(--focus-dark)}
.footer a:hover{color:var(--white)}
.wordmark{width:120px;height:auto;mix-blend-mode:screen}

/* ───────── 8. Miniaturas de trabajo (home.css, sección 6) ─────────
   El video corre solo en pantalla (home.js); sin JS o con "Reducir movimiento" queda el póster. Desde 1101 px con hover, la
   línea aparece al pasar (motion.css la anima por palabras); hasta 1100 px o sin hover se ve siempre. */
.work-card{--tile-pad:clamp(16px,2vw,28px);position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:10px;background:#1b2520;color:#fff;isolation:isolate}
.work-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.05}
.work-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,18,11,0) 42%,rgba(6,18,11,.5) 70%,rgba(6,18,11,.9) 100%)}
.work-info{position:absolute;z-index:1;left:var(--tile-pad);right:calc(var(--tile-pad) + 56px);bottom:var(--tile-pad)}
.work-name{display:block;font-size:clamp(18px,.8vw + 11px,24px);font-weight:500;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.work-line-wrap{display:grid;grid-template-rows:1fr}
.work-line{display:block;min-height:0;overflow:hidden;font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#d3eadb}
.work-line::before{content:"";display:block;height:10px}
.work-cross{position:absolute;z-index:1;right:var(--tile-pad);bottom:var(--tile-pad);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(233,237,234,.4);background:rgba(6,18,11,.25);color:#fff}
.ico-cross{width:14px;height:14px;transition:none}
/* Cruz que pasa a flecha sin JS: el trazo vertical va a punta con la propiedad d (Chrome y Firefox; en Safari queda la cruz). */
.ico-cross path:last-child{d:path("M12 5L12 12L12 19")}
.work-card:is(:hover,:focus-visible) .work-cross{background:var(--paper);border-color:var(--paper);color:var(--night)}
.work-card:is(:hover,:focus-visible) .ico-cross path:last-child{d:path("M13 6L19 12L13 18")}
@media(hover:hover) and (min-width:1101px){
  .work-line-wrap{grid-template-rows:0fr}
  .work-line{opacity:0}
  .work-card:is(:hover,:focus-visible) .work-line-wrap{grid-template-rows:1fr}
  .work-card:is(:hover,:focus-visible) .work-line{opacity:1}
}
@media(prefers-reduced-motion:no-preference){
  .work-media{transition:scale .6s var(--ease)}
  .work-line-wrap{transition:grid-template-rows .6s var(--ease)}
  .work-line{transition:opacity .45s var(--ease)}
  .work-cross{transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
  .ico-cross path:last-child{transition:d .6s var(--ease)}
  @media(hover:hover){.work-card:hover .work-media{scale:1.1}}
}

/* ───────── 9. Movimiento (solo con marca.js, que no corre con "Reducir movimiento") ─────────
   Cursor de home.js y entrada del titular y de la bajada de la portada (home.css, sección 15). */
.cursor-ring{position:fixed;top:0;left:0;width:26px;height:26px;margin-left:-13px;margin-top:-13px;border:1px solid #fff;border-radius:50%;pointer-events:none;mix-blend-mode:difference;z-index:10000;will-change:transform}
.cursor-dot{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;filter:blur(4px);mix-blend-mode:screen;z-index:9999;will-change:transform}
body.cursor-light .cursor-dot{mix-blend-mode:multiply}
body.cursor-on,body.cursor-on *{cursor:none!important}
.split-ready #hero-title .sw{display:inline-block;overflow:visible clip;padding-block:.1em;margin-block:-.1em;vertical-align:top}
.split-ready #hero-title .sc{display:inline-block;transform:translateY(115%);animation:charIn 1.1s var(--ease) var(--d,0ms) forwards}
@keyframes charIn{to{transform:none}}
/* Las letras se van con el scroll (motion.js, hero): la variable mueve translate, que no choca con el transform de charIn. */
#hero-title .sc{translate:0 calc(var(--out,0) * 1%)}
.hero-lead .hl{display:block;overflow:visible clip;white-space:nowrap}
.hero-lead .hl>span{display:inline-block;vertical-align:top;transform:translateY(115%);animation:charIn 1.2s var(--ease) calc(700ms + var(--i,0) * 80ms) forwards}

/* ───────── 10. Piezas de las páginas de presentación ─────────
   Portada, botones dobles, pilares, filas, pasos, tablas, listas, recuadros, la cinta y el pie: lo que comparten /academia/,
   /guia, /kit y /skill. Cada página suma en su <style> solo lo propio. */

/* Portada: --night con grano, etiqueta con punto, titular en dos filas (.hr: motion.js las corre con el scroll) y bajada,
   abajo; a la derecha, .hero-media (la B cromada, la foto o un panel). Hasta 1100 px va todo en una columna. */
.hero{display:flex;flex-direction:column;min-height:max(640px,100svh);overflow:hidden}
.hero-inner{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--split-gap);padding-top:150px;padding-bottom:clamp(56px,11vh,120px)}
.hero .hero-eyebrow{display:flex;align-items:center;gap:13px;margin-bottom:28px;color:#d4e0d2}
.hero-eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#b6d0a9;box-shadow:0 0 0 5px #b6d0a914}
.hero-titulo{font-size:clamp(44px,5.8vw,88px);line-height:1.02;letter-spacing:-.05em;max-width:13ch}
.hero-titulo .hr{display:block}
.hero-lead{max-width:34em;margin-top:28px;font-size:var(--fs-lead);line-height:1.5;color:#d4e0d2}
.hero-botones,.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px}
.hero .chips{margin-top:28px}
/* Con marca.js, lo de la derecha se destapa de abajo hacia arriba, como la B de la pantalla de carga de la home. */
.marca-js:not(.nomotion) .hero-media{animation:destape 1.6s cubic-bezier(.76,0,.24,1) .3s backwards}
@keyframes destape{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
/* La foto de la portada (guía y kit) y el panel de la skill. */
.foto{margin:0;justify-self:end;width:100%;max-width:460px}
.foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;border-radius:10px}
.foto figcaption,.foto p{margin-top:14px;font-size:var(--fs-small);line-height:1.5;color:var(--muted-dark)}
/* La B cromada (assets/intro/b-cromo.webp) con la máscara radial de la pantalla de carga: el verde del fondo se funde en --night. */
.hero-b{justify-self:end;align-self:center;width:100%;max-width:560px;height:auto;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.panel{justify-self:end;width:100%;max-width:480px;padding:clamp(24px,3vw,36px);border:1px solid var(--line-dark);border-radius:10px;background:rgba(233,237,234,.03)}
.panel h3{margin:18px 0 12px;font-size:var(--fs-h3-big);line-height:1.1;letter-spacing:-.045em}
.panel p:last-child{font-size:var(--fs-body);line-height:1.7;color:var(--text-2-dark)}

/* Pastillas (como "En preparación" de la home). */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid rgba(183,217,191,.4);border-radius:50px;font-size:var(--fs-label);font-weight:500;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.tone-paper .chip,.tone-soft .chip{border-color:var(--line);color:var(--text-2)}

/* Botón con una línea chica debajo (precio, aclaración, "(afiliado)"). .btn-ink: el contorno sobre secciones claras. */
.btn-doble{flex-direction:column;gap:6px;min-height:64px;padding:14px 26px;border-radius:34px;font-size:15px;text-align:center}
.btn-doble small{font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.btn-apagado{margin:0;border:1px dashed var(--line);color:var(--txt-2)}
.btn-ink{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:var(--paper)}

/* Texto secundario, nota y bajada de sección. */
.nota{font-size:var(--fs-body);line-height:1.7;color:var(--txt-2);max-width:60ch}
.bajada-sec{margin-top:24px;font-size:var(--fs-lead);line-height:1.6;color:var(--txt-2);max-width:40ch}
.nota a,.bajada-sec a,.tabla a,.prosa a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.nota b,.prosa b{font-weight:600;color:inherit}

/* Pilares: la línea con el punto de los pilares de la home (motion.js, steps, por data-pillars, dibuja --rule y --dot). */
.pilares{list-style:none;margin:clamp(56px,7vw,104px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.pilares--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pilares--4{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(40px,5vw,72px)}
.pilar{position:relative;padding-top:22px}
.pilar::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);transform:scaleX(var(--rule,1));transform-origin:left}
.pilar::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--green);transform:scale(var(--dot,1))}
.pilar .label{margin-top:28px}
.pilar h3{margin:28px 0 14px;font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.035em}
.pilar .label+h3{margin-top:12px}
.pilar p:not(.label){font-size:var(--fs-body);line-height:1.7;color:var(--txt-2);max-width:36ch}
.pilar .chips{margin-top:18px}

/* Filas numeradas de "Lo que podés contratar". El número es decorativo (la lista ya lo dice); con .filas--etiqueta la
   primera columna es la etiqueta de cada fila. */
.filas{list-style:none;margin:var(--block-y) 0 0;padding:0;counter-reset:fila}
.fila{counter-increment:fila;display:grid;grid-template-columns:70px minmax(0,1.1fr) minmax(0,1fr);gap:34px;align-items:start;padding-block:32px 34px;border-top:1px solid var(--line)}
.fila:last-child{border-bottom:1px solid var(--line)}
.fila::before{content:counter(fila,decimal-leading-zero);content:counter(fila,decimal-leading-zero) / "";padding-top:8px;font-size:var(--fs-label);line-height:1.5;color:var(--muted-dark)}
.tone-paper .fila::before,.tone-soft .fila::before{color:var(--text-2)}
.filas--etiqueta .fila{grid-template-columns:150px minmax(0,1.1fr) minmax(0,1fr)}
.filas--etiqueta .fila::before{content:none}
.filas--etiqueta .fila>.label{padding-top:8px}
.fila h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.035em}
.fila .label+h3{margin-top:0}
.fila p:not(.label){font-size:var(--fs-body);line-height:1.7;color:var(--txt-2);max-width:46ch}

/* Pasos (la guía y la skill): número grande a la izquierda y el paso a la derecha. */
.pasos{margin:0;padding:0}
.paso{display:grid;grid-template-columns:96px minmax(0,1fr);gap:28px;padding-block:36px 40px;border-top:1px solid var(--line)}
.paso:last-child{border-bottom:1px solid var(--line)}
.paso-num{font-size:var(--fs-h3-big);line-height:1;letter-spacing:-.04em;color:var(--green);font-variant-numeric:lining-nums tabular-nums}
.paso h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.035em}
.prosa{font-size:16px;line-height:1.7}
.prosa>*+*{margin-top:14px}
.prosa ul,.prosa ol{margin-bottom:0;padding-left:20px}
.prosa li+li{margin-top:8px}
.prosa li::marker{color:var(--green)}
.prosa .btn{margin-top:22px}

/* Recuadro con filete verde. */
.caja{margin-block:22px;padding:18px 22px;border-left:2px solid var(--green);border-radius:0 8px 8px 0;background:rgba(46,125,79,.08)}
.tone-night .caja,.tone-deep .caja,.tone-forest .caja{border-left-color:var(--sage);background:rgba(183,217,191,.07)}
.caja p{font-size:var(--fs-body);line-height:1.7}
.caja b{font-weight:600}

/* Cifra grande (precio, total por mes). */
.cifra{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.cifra b{font-size:var(--fs-figure);font-weight:400;line-height:.9;letter-spacing:-.05em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.cifra span{font-size:var(--fs-body);color:var(--txt-2)}
.label+.cifra{margin-top:var(--block-y)}

/* Tabla con filetes, como las filas de resultados de la home. */
.tabla{width:100%;border-collapse:collapse;font-size:var(--fs-body);line-height:1.6}
.tabla th{padding:0 16px 14px 0;text-align:left;font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.tabla td{padding:18px 16px 18px 0;border-top:1px solid var(--line);vertical-align:top}
.tabla tr:last-child td{border-bottom:1px solid var(--line)}
.tabla .num{text-align:right;padding-right:0;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.tabla small{font-size:var(--fs-small);color:var(--txt-2)}

/* Lista de "lo que salió mal" y "para quién no es": una cruz por renglón. */
.lista-x{list-style:none;margin:0;padding:0}
.lista-x li{position:relative;padding:20px 0 20px 36px;border-top:1px solid var(--line);font-size:var(--fs-q);line-height:1.5}
.lista-x li:last-child{border-bottom:1px solid var(--line)}
.lista-x li::before{content:"×";position:absolute;left:4px;top:17px;font-size:22px;line-height:1;color:var(--green)}

/* La cinta que corre (guía, kit, skill): una franja --forest; corre solo sin "Reducir movimiento". */
.cinta{overflow:hidden;white-space:nowrap;background:var(--forest);border-block:1px solid var(--line-forest)}
.cinta-pista{display:inline-flex}
.cinta-pista span{padding:18px 26px;font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
.cinta-pista span::after{content:"·";margin-left:52px;color:var(--text-2-dark)}
@media(prefers-reduced-motion:no-preference){.cinta-pista{animation:correr 38s linear infinite}}
@keyframes correr{to{transform:translateX(-50%)}}

/* Cierre con titular a la izquierda y bajada y botones a la derecha (como "Hablemos" de la home). */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--split-gap);align-items:end}
.split .acciones{margin-top:28px}
.split .bajada-sec{margin-top:0}

/* Pie: la B cromada de la home y una fila de enlaces. */
.pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.pie-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;font-size:var(--fs-micro);color:var(--muted-dark)}
.pie-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

@media(max-width:1100px){
  .hero-inner{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:0;padding-top:96px}
  .hero-inner .foto,.hero-inner .panel{justify-self:auto;margin-top:var(--block-y);max-width:520px}
  .hero-b{order:-1;align-self:flex-end;width:min(300px,52vw);margin:0 -4vw auto 0}
  .pilares--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fila{grid-template-columns:40px minmax(0,1fr) minmax(0,1.05fr);gap:24px}
  .filas--etiqueta .fila{grid-template-columns:110px minmax(0,1fr) minmax(0,1.05fr)}
}
@media(max-width:800px){
  .pilares,.pilares--2,.pilares--4{grid-template-columns:1fr;gap:36px}
  .fila,.filas--etiqueta .fila{grid-template-columns:25px minmax(0,1fr);gap:10px 18px}
  .filas--etiqueta .fila{grid-template-columns:1fr}
  .fila p:not(.label){grid-column:2}
  .filas--etiqueta .fila p:not(.label){grid-column:auto}
  .paso{grid-template-columns:1fr;gap:14px}
  .split{grid-template-columns:1fr;align-items:start;gap:28px}
}
@media(max-width:500px){
  .hero-botones,.acciones{flex-direction:column;align-items:stretch;margin-top:28px}
  .hero .hero-eyebrow{align-items:flex-start;letter-spacing:.1em}
  .hero-eyebrow::before{margin-top:.45em}
  .pie{flex-direction:column;align-items:flex-start}
  .tabla{font-size:14px}
}

/* ───────── 11. Formularios (home.css, sección 11): campos oscuros para secciones oscuras ───────── */
.field{margin-bottom:22px;min-width:0}
.form-label{display:block;margin-bottom:8px;font-size:var(--fs-small);font-weight:500;line-height:1.4;color:var(--white)}
.optional{margin-left:8px;font-size:var(--fs-micro);font-weight:400;color:var(--muted-dark)}
/* 16 px: con menos, Safari de iPhone hace zoom al enfocar el campo. */
.field input{display:block;width:100%;min-height:48px;padding:13px 14px;border:1px solid var(--field-line);border-radius:7px;background:var(--field);color:var(--field-text);font-size:16px;line-height:1.4;transition:border-color .2s}
.field input::placeholder{color:var(--placeholder);opacity:1}
.field input:hover{border-color:var(--muted-dark)}
.field input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--sage)}
.field [aria-invalid="true"],.field [aria-invalid="true"]:hover{border-color:var(--safelight);box-shadow:inset 0 0 0 1px var(--safelight)}
/* Aviso del formulario (error del servidor o de validación). */
.form-status{font-size:var(--fs-small);line-height:1.6}
.form-status:empty{display:none}
.form-status:not(:empty),.estado--error{margin-bottom:20px;padding:14px 16px;border:1px solid rgba(240,149,122,.5);border-radius:8px;background:rgba(240,149,122,.08);color:var(--white)}
/* La trampa para bots: fuera de pantalla, sin foco y oculta para lectores. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Estados que se muestran sin JS con el ancla que deja el servidor (#gracias, #error-<codigo>); con JS, con .is-on. */
.estado{display:none}
.estado:target,.estado.is-on{display:block}

/* Línea de consentimiento debajo del botón de un formulario (/clase). */
.form-consentimiento { margin: 12px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--txt-2, var(--text-2-dark)); }
.form-consentimiento a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }