/* Web de Jaime Franco · Método RAÍZ · versión 2 (14-11-2026)
   La página es un corte de la tierra: arriba, la línea del suelo con el brote; al bajar, las raíces
   y una tierra cada vez más honda. Colores y letras del logo «La línea del suelo» (2-11-2026).
   Sin JavaScript todo se ve y se usa; con JavaScript (clase .js en <html>) se mueve. */

@font-face { font-family: "Fraunces"; src: url("../fuentes/fraunces.woff?v=e8eb4dc7a8") format("woff"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "JF Sans"; src: url("../fuentes/jf-sans.woff?v=d6069a2513") format("woff"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JF Mono"; src: url("../fuentes/jf-mono.woff?v=cfd4de78e9") format("woff"); font-weight: 500; font-display: swap; }

:root {
  --papel: #F8F4EC;
  --arcilla: #EADFCB;
  --musgo: #2F5D46;
  --hondo: #1E3A2B;
  --tierra: #13221A;
  --fondo: #0E1A13;
  --raiz: #C2461F;
  --raiz-clara: #E3825A;
  --tinta: #17231B;
  --tinta-2: #2E3A32;
  --claro: rgba(248, 244, 236, 0.86);
  --claro-2: rgba(248, 244, 236, 0.64);
  --raya: rgba(23, 35, 27, 0.16);
  --raya-clara: rgba(248, 244, 236, 0.16);
  --serif: "Fraunces", Georgia, serif;
  --sans: "JF Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JF Mono", ui-monospace, Consolas, monospace;
  --ancho: 1200px;
  --curva: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; color-scheme: light; -webkit-tap-highlight-color: rgba(194, 70, 31, .18); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.65 var(--sans); overflow-x: clip; }
body.menu-abierto { overflow: hidden; }
main { overflow-x: clip; } /* lo que asoma por los lados (las raíces) no ensancha la página en el móvil; clip no rompe el corte fijo */
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--raiz-clara); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--raiz); color: var(--papel); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0 0 .45em; letter-spacing: -0.02em; line-height: 1.04; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; }
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.16; font-variation-settings: "opsz" 40, "SOFT" 40, "WONK" 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--papel); padding: 8px 14px; border-radius: 8px; z-index: 90; }
.saltar:focus { left: 8px; }
.dato { font: 500 .76rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.entrada { font-size: clamp(1.08rem, 1.5vw, 1.28rem); max-width: 48ch; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }

/* ── Botones: el principal siempre es terracota, el color de la raíz ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 28px; border-radius: 999px; border: 2px solid transparent; font: 600 1.02rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s var(--curva), background-color .2s, color .2s, border-color .2s; }
.boton .flecha { display: inline-block; transition: transform .25s var(--curva); }
@media (hover: hover) { .boton:hover .flecha { transform: translateX(4px); } }
.boton:active { transform: scale(.97); }
.boton--raiz { background: var(--raiz); color: var(--papel); box-shadow: 0 12px 30px -14px rgba(194, 70, 31, .8); }
@media (hover: hover) { .boton--raiz:hover { background: #A93B18; } }
.boton--linea { border-color: currentColor; }
@media (hover: hover) { .boton--linea:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } }
@media (hover: hover) { .oscuro .boton--linea:hover { background: var(--papel); border-color: var(--papel); color: var(--tierra); } }

/* ── Cabecera: se esconde al bajar, vuelve al subir y cambia de tono según la tierra que tiene debajo ── */
.cab { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--tinta); transition: transform .35s var(--curva), background-color .3s, color .3s, box-shadow .3s; }
.cab .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.cab--solida { background: rgba(248, 244, 236, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--raya); }
.cab--oscura { color: var(--papel); }
.cab--oscura.cab--solida { background: rgba(14, 26, 19, .86); box-shadow: 0 1px 0 var(--raya-clara); }
.cab--oculta { transform: translateY(-105%); }
.no-js .cab { position: absolute; } /* sin JavaScript la cabecera no sabe qué tiene debajo: se queda arriba y no tapa nada */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { width: 40px; height: auto; }
.logo__sobre-oscuro { display: none; }
.cab--oscura .logo__sobre-claro { display: none; }
.cab--oscura .logo__sobre-oscuro { display: block; }
.logo__nombre { display: block; font: 600 1.25rem/1 var(--serif); font-variation-settings: "opsz" 40, "SOFT" 40; white-space: nowrap; }
.logo__oficio { display: block; font: 500 .58rem/1.2 var(--mono); letter-spacing: .16em; margin-top: 5px; opacity: .78; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a:not(.boton) { text-decoration: none; font-weight: 500; font-size: .95rem; position: relative; white-space: nowrap; }
.menu a:not(.boton)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--raiz); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--curva); }
.cab--oscura .menu a:not(.boton)::after { background: var(--raiz-clara); }
.menu a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) { .menu a:not(.boton):hover::after { transform: scaleX(1); } }
.menu .boton { padding: 12px 20px; font-size: .94rem; box-shadow: none; }
.menu__abrir { display: none; align-items: center; gap: 10px; border: 0; background: transparent; padding: 16px 11px; margin-right: -11px; font-weight: 600; cursor: pointer; }
.rayas { position: relative; width: 22px; height: 12px; }
.rayas::before, .rayas::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--curva), top .3s var(--curva); }
.rayas::before { top: 1px; }
.rayas::after { top: 9px; }
.menu__abrir[aria-expanded="true"] .rayas::before { top: 5px; transform: rotate(45deg); }
.menu__abrir[aria-expanded="true"] .rayas::after { top: 5px; transform: rotate(-45deg); }

.menu-movil { position: fixed; inset: 0; z-index: 58; background: var(--tierra); color: var(--papel); padding: 96px 24px calc(40px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; display: flex; flex-direction: column; }
.menu-movil[hidden] { display: none; }
.menu-movil a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--raya-clara); text-decoration: none; font: 600 clamp(1.8rem, 7vw, 2.6rem)/1.1 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 40; }
.menu-movil a:not(.boton) span { font: 500 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--raiz-clara); white-space: nowrap; }
.menu-movil .boton { margin-top: 28px; border-bottom: 0; padding: 18px 28px; font: 600 1.05rem/1 var(--sans); justify-content: center; }
.js .menu-movil:not([hidden]) a { animation: entra .45s var(--curva) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* La raíz que crece en el borde izquierdo mientras bajas (pantallas anchas) */
.guia { display: none; position: fixed; left: 22px; top: 120px; bottom: 48px; width: 2px; z-index: 40; pointer-events: none; }
.guia__linea { position: absolute; inset: 0; background: var(--raya); border-radius: 2px; }
.guia__crece { position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--avance, 0) * 100%); background: var(--raiz); border-radius: 2px; }
.guia__punta { position: absolute; left: -5px; top: calc(var(--avance, 0) * 100%); width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--raiz); box-shadow: 0 0 0 5px rgba(194, 70, 31, .18); }
.guia__nombre { display: none; position: absolute; left: 18px; top: calc(var(--avance, 0) * 100%); transform: translateY(-50%); white-space: nowrap; color: var(--raiz); }
.guia--clara .guia__linea { background: var(--raya-clara); }
.guia--clara .guia__crece, .guia--clara .guia__punta { background: var(--raiz-clara); }
.guia--clara .guia__nombre { color: var(--raiz-clara); }
@media (min-width: 1320px) { .js .guia { display: block; } }
@media (min-width: 1560px) { .guia__nombre { display: block; } }

/* ── Portada: el cielo, la línea del suelo y la tierra ── */
.portada { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto 1fr; background: var(--arcilla); }
.portada__cielo { background: var(--papel); display: flex; align-items: flex-end; padding: 128px 0 36px; }
.portada__antes { color: var(--musgo); margin-bottom: 20px; }
.titular { font-size: clamp(3rem, 8.4vw, 8.2rem); line-height: .94; letter-spacing: -0.035em; margin: 0; font-weight: 650; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1; max-width: 12.5ch; word-spacing: .06em; }
.titular .palabra { display: inline-block; }
.portada__suelo { position: relative; height: 0; z-index: 1; }
.portada__linea { position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--musgo); transform-origin: left; }
.portada__suelo .contenedor { position: relative; height: 0; }
.portada__dibujo { position: absolute; right: -24px; top: -150px; width: 560px; height: 470px; overflow: visible; pointer-events: none; }
.portada__dibujo text { font: 500 12px var(--mono); letter-spacing: .16em; }
.portada__dibujo .etq-arriba { fill: var(--musgo); }
.portada__dibujo .etq-abajo { fill: var(--raiz); }
.brote path { fill: var(--musgo); }
.brote .tallo { fill: none; stroke: var(--musgo); stroke-width: 5; stroke-linecap: round; }
.raices path { fill: none; stroke: var(--raiz); stroke-linecap: round; }
.portada__tierra { position: relative; z-index: 2; padding: 48px 0 84px; }
.portada__abajo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.hechos { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--tinta-2); font-size: .98rem; }
.hechos li { display: flex; align-items: center; gap: 9px; }
.hechos li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--raiz); }

/* La portada al cargar: la línea se dibuja, el brote sale, las palabras ganan peso y las raíces crecen */
.js .portada__linea { transform: scaleX(0); transition: transform 1.3s var(--curva) .1s; }
.js .listo .portada__linea { transform: none; }
.js .brote { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.15); opacity: 0; transition: transform 1.1s var(--curva) .9s, opacity .3s .9s; }
.js .listo .brote { transform: none; opacity: 1; }
.js .titular .palabra { opacity: 0; transform: translateY(.45em); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1, "wght" 300; transition: opacity .8s var(--curva), transform .9s var(--curva), font-variation-settings 1.5s var(--curva); transition-delay: calc(var(--i, 0) * 65ms + 120ms); }
.js .listo .titular .palabra { opacity: 1; transform: none; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1, "wght" 650; }
.js .raices path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--crece, 0)); transition: stroke-dashoffset 1.1s var(--curva); }
.js .portada__dibujo text { opacity: 0; transition: opacity .8s 1.5s; }
.js .listo .portada__dibujo text { opacity: 1; }

/* ── Secciones y el borde irregular entre capas de tierra ── */
.seccion { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
.seccion--arcilla { background: var(--arcilla); }
.seccion--musgo { background: var(--musgo); }
.seccion--hondo { background: var(--hondo); }
.seccion--tierra { background: var(--tierra); }
.seccion--fondo { background: var(--fondo); }
.oscuro { color: var(--papel); }
.oscuro p, .oscuro li { color: var(--claro); }
.oscuro h2, .oscuro h3 { color: var(--papel); }
.borde::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 46px; background: inherit; pointer-events: none; clip-path: polygon(0 100%, 0 60%, 5% 54%, 11% 64%, 18% 48%, 26% 57%, 33% 41%, 41% 53%, 48% 45%, 56% 59%, 63% 39%, 71% 51%, 78% 35%, 86% 49%, 93% 43%, 100% 55%, 100% 100%); }
.borde--b::before { clip-path: polygon(0 100%, 0 42%, 7% 53%, 14% 38%, 22% 56%, 30% 46%, 37% 62%, 45% 44%, 52% 54%, 60% 36%, 68% 50%, 75% 42%, 83% 60%, 90% 46%, 100% 52%, 100% 100%); }
.cabeza { max-width: 900px; margin-bottom: clamp(36px, 5vw, 60px); }
.cabeza > .dato { display: block; color: var(--raiz); margin-bottom: 18px; }
.oscuro .cabeza > .dato { color: var(--raiz-clara); }

/* ── ¿Qué te trae por aquí? ── */
.trae__opciones { display: flex; flex-wrap: wrap; gap: 10px; margin: -16px 0 40px; }
.chip { border: 2px solid var(--tinta); background: transparent; border-radius: 999px; padding: 13px 22px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s, transform .25s var(--curva); }
@media (hover: hover) { .chip:hover { transform: translateY(-2px); } }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.trae__panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.trae__panel[hidden] { display: none; }
.trae__titulo { font-size: clamp(1.7rem, 3.1vw, 2.5rem); max-width: 20ch; }
.dolores li { position: relative; padding: 15px 0 15px 34px; border-top: 1px solid var(--raya); font-size: 1.06rem; }
.dolores li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 16px; height: 2px; background: var(--raiz); }
.debajo { position: relative; overflow: hidden; background: var(--tierra); color: var(--papel); border-radius: 26px; padding: clamp(26px, 3vw, 38px); }
.debajo .dato { display: block; color: var(--raiz-clara); margin-bottom: 8px; }
.debajo p { color: var(--claro); max-width: 40ch; }
.debajo p:last-of-type { margin-bottom: 0; }
.debajo strong { color: var(--papel); }
.debajo svg { position: absolute; right: 8px; bottom: -6px; width: 120px; opacity: .25; }
.debajo svg path { fill: none; stroke: var(--raiz-clara); stroke-width: 3; stroke-linecap: round; }
.remate { margin: 48px 0 0; max-width: 36ch; font: 600 clamp(1.3rem, 2.3vw, 1.75rem)/1.3 var(--serif); font-variation-settings: "opsz" 60, "SOFT" 50; }
.no-js .trae__opciones, .no-js [data-solo-js] { display: none; }
.no-js .trae__panel + .trae__panel { margin-top: 48px; }
.js .trae__panel { animation: entra .55s var(--curva) both; }
.js .trae__panel .dolores li { animation: entra .5s var(--curva) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }

/* ── El descenso: las 4 fases como capas de tierra ── */
.descenso { position: relative; background: var(--arcilla); }
.descenso__escena { padding: clamp(84px, 10vw, 130px) 0; }
.descenso__rejilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.descenso h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); max-width: 17ch; }
.corte { position: relative; width: 100%; max-width: 480px; justify-self: center; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--tierra); box-shadow: 0 30px 60px -30px rgba(19, 34, 26, .55); }
.corte svg { width: 100%; height: 100%; }
.corte .raiz-honda, .corte .brotes path { fill: none; stroke: var(--raiz-clara); stroke-linecap: round; }
.estrato__nombre { font: 600 24px var(--serif); font-variation-settings: "opsz" 40, "SOFT" 40; fill: var(--papel); }
.estrato__semanas { font: 500 10px var(--mono); letter-spacing: .16em; fill: rgba(248, 244, 236, .72); }
.corte__lectura { display: none; position: absolute; left: 22px; top: 14px; margin: 0; color: var(--tinta); }
.corte__lectura .dato { display: block; color: var(--musgo); }
.corte__lectura b { font: 650 1.75rem/1 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 30; font-variant-numeric: tabular-nums; }
.fase { position: relative; padding: 18px 0 18px 30px; border-left: 3px solid var(--raya); transition: border-color .4s, opacity .4s; }
.fase::before { content: ""; position: absolute; left: -9px; top: 26px; width: 15px; height: 15px; border-radius: 50%; background: var(--arcilla); border: 3px solid var(--musgo); transition: background-color .4s, border-color .4s, transform .4s var(--curva); }
.fase .dato { color: var(--raiz); }
.fase h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 4px 0 6px; }
.fase__cuerpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--curva); }
.fase__cuerpo > div { overflow: hidden; min-height: 0; }
.fase p { color: var(--tinta-2); max-width: 46ch; margin: 0 0 .5em; }
.fase .fase__extra { font-size: .95rem; margin-bottom: 0; }
.fase .fase__extra b { color: var(--tinta); }

/* Con JavaScript y pantalla grande, el corte se queda fijo y las fases van pasando al bajar */
@media (min-width: 1001px) and (min-height: 620px) {
  .js .descenso { height: 400vh; }
  .js .descenso__escena { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 84px 0 24px; transition: background-color .7s; }
  .js .descenso[data-paso="2"] .descenso__escena { background: #DFD2BA; }
  .js .descenso[data-paso="3"] .descenso__escena { background: #D2C2A5; }
  .js .descenso[data-paso="4"] .descenso__escena { background: #C3B08E; }
  .js .descenso--vivo .corte { width: min(100%, calc((100vh - 170px) * .8)); max-width: 500px; }
  .js .descenso--vivo .corte__lectura { display: block; }
  .js .descenso--vivo .fase { opacity: .45; }
  .js .descenso--vivo .fase.activa { opacity: 1; border-color: var(--raiz); }
  .js .descenso--vivo .fase.activa::before { background: var(--raiz); border-color: var(--raiz); transform: scale(1.25); }
  .js .descenso--vivo .fase.pasada::before { background: var(--musgo); }
  .js .descenso--vivo .fase:not(.activa) .fase__cuerpo { grid-template-rows: 0fr; }
  .js .descenso--vivo .raiz-honda { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); }
  .js .descenso--vivo .brotes path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--curva); }
  .js .descenso--vivo .alcanzado .brotes path { stroke-dashoffset: 0; }
  .js .descenso--vivo .estrato text { opacity: .5; transition: opacity .5s; }
  .js .descenso--vivo .estrato.alcanzado text { opacity: 1; }
}

/* ── Tus 16 semanas ── */
.semanas { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.semana { position: relative; display: grid; justify-items: center; gap: 8px; padding: 12px 0; border: 0; border-radius: 12px; background: rgba(248, 244, 236, .08); color: var(--papel); cursor: pointer; transition: background-color .25s, transform .25s var(--curva), color .25s; }
@media (hover: hover) { .semana:hover { transform: translateY(-3px); background: rgba(248, 244, 236, .16); } }
.semana[aria-pressed="true"] { background: var(--papel); color: var(--tierra); }
.semana__num { font: 600 1.15rem/1 var(--serif); font-variation-settings: "opsz" 40; font-variant-numeric: tabular-nums; }
.semana__marcas { display: grid; justify-items: center; align-content: start; gap: 5px; min-height: 30px; }
.marca { display: block; width: 8px; height: 8px; border-radius: 50%; }
.marca--consulta { background: var(--raiz-clara); }
.marca--academia { background: #A8CDB0; }
.marca--checkin { width: 14px; height: 3px; border-radius: 2px; background: rgba(248, 244, 236, .5); }
.semana[aria-pressed="true"] .marca--checkin { background: var(--tinta-2); }
.semana[aria-pressed="true"] .marca--academia { background: var(--musgo); }
.tramos { display: grid; grid-template-columns: 4fr 6fr 3fr 3fr; gap: 6px; margin-bottom: 24px; }
.tramo { border-top: 3px solid var(--raiz-clara); padding-top: 8px; color: var(--claro-2); }
.tramo b { color: var(--papel); font-weight: 600; margin-right: 6px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 26px; color: var(--claro-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.detalle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px clamp(20px, 3vw, 40px); align-items: start; min-height: 200px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--raya-clara); border-radius: 22px; background: rgba(14, 26, 19, .28); }
.detalle__num { font: 650 clamp(3.6rem, 7vw, 5.6rem)/.86 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 30; color: var(--raiz-clara); font-variant-numeric: tabular-nums; min-width: 1.2ch; }
.detalle .dato { color: var(--raiz-clara); margin-bottom: 6px; }
.detalle h3 { margin-bottom: 12px; }
.detalle li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.detalle li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--raiz-clara); }
.detalle.cambia > * { animation: entra .4s var(--curva) both; }
.detalle.cambia > :last-child { animation-delay: 60ms; }
.siempre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 34px; background: var(--raya-clara); border-radius: 22px; overflow: hidden; }
.siempre div { background: var(--hondo); padding: 22px 24px; }
.siempre b { display: block; margin-bottom: 4px; color: var(--papel); font: 600 1.12rem/1.3 var(--serif); font-variation-settings: "opsz" 40, "SOFT" 40; }
.siempre span { color: var(--claro-2); font-size: .96rem; }
.sin-js-semanas { max-width: 60ch; }
.js .sin-js-semanas, .no-js .calendario { display: none; }
.js .calendario .marca { transform: scale(0); }
.js .calendario.visto .marca { transform: none; transition: transform .45s var(--curva) calc(var(--i, 0) * 45ms + 150ms); }

/* ── Lo que no te voy a prometer: las promesas se tachan al llegar ── */
.tachadas { margin: 0 0 30px; }
.tachadas li { padding: 4px 0; color: var(--claro-2); font: 600 clamp(1.8rem, 4.6vw, 3.6rem)/1.15 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; }
.tachadas span { background-image: linear-gradient(var(--raiz-clara), var(--raiz-clara)); background-repeat: no-repeat; background-position: 0 58%; background-size: 100% .09em; }
.js .tachadas span { background-size: 0 .09em; transition: background-size .8s var(--curva); transition-delay: calc(var(--i, 0) * 160ms + 150ms); }
.js .tachadas.visto span { background-size: 100% .09em; }
.sin-promesa { max-width: 60ch; font-size: 1.1rem; }
.si-garantizo { margin-top: clamp(48px, 7vw, 84px); }
.si-garantizo h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 26px 0 22px; }
.tres li { border-top: 3px solid var(--raiz-clara); padding-top: 14px; }
.tres b { display: block; margin-bottom: 4px; color: var(--papel); font: 600 1.25rem/1.25 var(--serif); font-variation-settings: "opsz" 40, "SOFT" 40; }
.no-tendras { margin-top: 44px; }
.no-tendras ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.no-tendras li { border: 1px solid var(--raya-clara); border-radius: 999px; padding: 9px 16px; }
.no-tendras > .dato { color: var(--raiz-clara); }

/* ── ¿Es para ti? ── */
.encaja { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.pregunta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--raya-clara); }
.pregunta p { margin: 0; color: var(--papel); }
.sino { display: inline-flex; border: 1px solid var(--raya-clara); border-radius: 999px; padding: 3px; }
.sino button { min-width: 58px; border: 0; background: transparent; color: var(--claro); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; transition: background-color .2s, color .2s; }
@media (hover: hover) { .sino button:hover { color: var(--papel); } }
.sino button[aria-pressed="true"] { background: var(--papel); color: var(--tierra); }
.encaja__nota { margin-top: 18px; font-size: .92rem; }
.oscuro .encaja__nota { color: var(--claro-2); }
.veredicto { position: sticky; top: 100px; background: var(--papel); color: var(--tinta); border-radius: 26px; padding: clamp(24px, 3vw, 34px); }
.veredicto .dato { color: var(--raiz); }
.veredicto h3 { color: var(--tinta); font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.veredicto p { color: var(--tinta-2); }
.veredicto__barra { height: 6px; margin: 12px 0 22px; background: var(--arcilla); border-radius: 6px; overflow: hidden; }
.veredicto__barra i { display: block; height: 100%; width: calc(var(--hecho, 0) * 100%); background: var(--musgo); border-radius: 6px; transition: width .45s var(--curva), background-color .3s; }
.veredicto--parar .veredicto__barra i { background: var(--raiz); }
.veredicto [data-resultado]:not([hidden]) { animation: entra .45s var(--curva) both; }
.veredicto .boton { margin-top: 6px; }
@media (hover: hover) { .veredicto .boton--linea:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } }
.sin-js { display: none; }
.no-js .sin-js { display: grid; }
.no-js .encaja { display: none; }
.dos-listas { grid-template-columns: 1fr 1fr; gap: 40px; }
.dos-listas li { padding: 10px 0; border-top: 1px solid var(--raya-clara); }

/* ── Quién soy ── */
.quien { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.retrato-caja { position: relative; max-width: 340px; }
.retrato { aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--musgo); display: grid; place-items: center; }
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato img.sin-foto { width: 42%; height: auto; }
.sello { position: absolute; right: -20px; bottom: -20px; width: 124px; height: 124px; transform: rotate(var(--giro, -12deg)); }
.sello text { font: 500 10.5px var(--mono); letter-spacing: .12em; fill: var(--papel); }
.sello .brote-sello path { fill: var(--papel); }
.sello .brote-sello .tallo { fill: none; stroke: var(--papel); stroke-width: 5; stroke-linecap: round; }
.credenciales { margin-top: 28px; }
.credenciales li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--raya-clara); }
.credenciales b { color: var(--raiz-clara); font: 500 .72rem/1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* ── Precio ── */
.precio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: stretch; }
.tarjeta-precio { display: flex; flex-direction: column; background: var(--papel); color: var(--tinta); border-radius: 28px; padding: clamp(28px, 4vw, 46px); }
.tarjeta-precio .dato { color: var(--raiz); }
.tarjeta-precio p { color: var(--tinta-2); }
.modo { display: inline-flex; align-self: flex-start; margin: 18px 0 6px; padding: 4px; background: var(--arcilla); border-radius: 999px; }
.modo button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--tinta-2); transition: background-color .2s, color .2s; }
.modo button[aria-pressed="true"] { background: var(--tierra); color: var(--papel); }
.no-js .modo { display: none; }
.cifra { margin: 8px 0 2px; font: 650 clamp(3.4rem, 8.5vw, 6.4rem)/1 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 20; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.tarjeta-precio .cifra { color: var(--tinta); }
.cifra small { margin-left: 12px; font: 500 .95rem/1 var(--mono); letter-spacing: .06em; color: var(--tinta-2); }
.tarjeta-precio .por-semana { margin-bottom: 18px; color: var(--musgo); font-weight: 600; }
.tarjeta-precio .aparte { border-top: 1px solid var(--raya); padding-top: 14px; font-size: .96rem; margin-bottom: 26px; }
.tarjeta-precio .boton { margin-top: auto; align-self: flex-start; }
.garantia { border: 1px solid var(--raya-clara); border-radius: 28px; padding: clamp(28px, 4vw, 46px); }
.garantia > .dato { color: var(--raiz-clara); }
.dias { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin: 22px 0 8px; }
.dias i { height: 34px; border-radius: 6px; background: var(--raiz-clara); }
.js .dias i { transform: scaleY(.2); opacity: .3; transform-origin: bottom; transition: transform .5s var(--curva), opacity .5s; transition-delay: calc(var(--i, 0) * 50ms); }
.js .dias.visto i { transform: none; opacity: 1; }
.dias__eje { display: flex; justify-content: space-between; margin-bottom: 22px; color: var(--claro-2); }

/* ── Cómo empezar ── */
.camino { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.camino::before, .camino::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 3px; }
.camino::before { background: var(--raya-clara); }
.camino::after { background: var(--raiz-clara); transform-origin: left; }
.js .camino::after { transform: scaleX(0); transition: transform 1.4s var(--curva) .1s; }
.js .camino.visto::after { transform: none; }
.camino li { position: relative; padding-top: 50px; }
.camino li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 4px; width: 21px; height: 21px; border-radius: 50%; background: var(--raiz-clara); border: 3px solid var(--raiz-clara); box-shadow: 0 0 0 6px var(--tierra); }
.js .camino li::before { background: var(--tierra); border-color: var(--raya-clara); transition: background-color .4s, border-color .4s; transition-delay: calc(var(--i, 0) * 450ms + 250ms); }
.js .camino.visto li::before { background: var(--raiz-clara); border-color: var(--raiz-clara); }
.camino .dato { color: var(--raiz-clara); }
.camino h3 { margin: 10px 0 8px; }

/* ── Preguntas ── */
.preguntas { max-width: 880px; }
.preguntas details { border-top: 1px solid var(--raya-clara); }
.preguntas details:last-child { border-bottom: 1px solid var(--raya-clara); }
.preguntas summary { position: relative; padding: 24px 56px 24px 0; cursor: pointer; list-style: none; color: var(--papel); font: 600 clamp(1.12rem, 1.9vw, 1.32rem)/1.35 var(--serif); font-variation-settings: "opsz" 40, "SOFT" 40; transition: color .2s; }
@media (hover: hover) { .preguntas summary:hover { color: var(--raiz-clara); } }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: linear-gradient(var(--raiz-clara), var(--raiz-clara)) center / 100% 2px no-repeat, linear-gradient(var(--raiz-clara), var(--raiz-clara)) center / 2px 100% no-repeat; transition: transform .35s var(--curva); }
.preguntas details[open] summary::after { transform: rotate(135deg); }
.preguntas .respuesta { overflow: hidden; }
.preguntas .respuesta p { margin: 0; padding-bottom: 24px; max-width: 66ch; }
.preguntas a { color: var(--papel); }

/* ── Final: las raíces llegan al fondo ── */
.final { overflow: hidden; text-align: center; }
.final__raices { position: absolute; left: 50%; top: 0; width: min(980px, 130vw); transform: translateX(-50%); opacity: .38; pointer-events: none; }
.final__raices path { fill: none; stroke: var(--raiz-clara); stroke-linecap: round; }
.js .final__raices path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--curva); transition-delay: calc(var(--i, 0) * 120ms); }
.js .final__raices.visto path { stroke-dashoffset: 0; }
.final .contenedor { position: relative; padding-top: clamp(60px, 9vw, 120px); }
.final h2 { max-width: 15ch; margin-inline: auto; font-size: clamp(2.4rem, 6vw, 5rem); }
.final p { max-width: 50ch; margin: 0 auto 30px; font-size: 1.15rem; }
.final .acciones { justify-content: center; }

/* ── Pie ── */
.pie { position: relative; background: #09130D; color: var(--claro-2); padding: 60px 0 44px; font-size: .95rem; }
.pie .contenedor { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.pie a { color: var(--papel); }
.pie .logo { color: var(--papel); }
.pie .logo__oficio { color: var(--raiz-clara); opacity: 1; }
.pie .logo__sobre-oscuro { display: block; }
.pie h4 { margin: 6px 0 14px; color: var(--raiz-clara); font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.pie ul { display: grid; gap: 8px; }
.pie .lema { margin: 18px 0 0; max-width: 36ch; }
.pie .legal { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid var(--raya-clara); font: 500 .76rem/1.6 var(--mono); letter-spacing: .03em; }

/* ── Barra fija en el móvil ── */
.barra-movil { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--tierra); color: var(--papel); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); transform: translateY(150%); visibility: hidden; transition: transform .4s var(--curva), visibility 0s .4s; }
.barra-movil span { font-size: .9rem; color: var(--claro); white-space: nowrap; }
.barra-movil .boton { padding: 13px 20px; box-shadow: none; }
.barra-movil--visible { transform: none; visibility: visible; transition: transform .4s var(--curva); }
@media (max-width: 760px) { .js .barra-movil { display: flex; } }

/* ── Páginas legales ── */
.texto { padding: 140px 0 90px; }
.texto .contenedor { max-width: 780px; }
.texto h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.texto h2 { font-size: 1.7rem; margin-top: 2em; }
.texto ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.texto table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .98rem; }
.texto th, .texto td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--raya); }
.texto th { width: 34%; font-weight: 600; }
.texto a:not(.boton) { color: var(--musgo); }
.texto .fecha, .texto .etiqueta { font: 500 .8rem/1.4 var(--mono); letter-spacing: .1em; color: var(--tinta-2); }
.texto .etiqueta { color: var(--raiz); text-transform: uppercase; }

mark.pendiente { background: #FFE27A; color: #5A3B00; padding: 0 6px; border-radius: 4px; font: 600 .82em/1.4 var(--mono); }
.aviso-borrador { position: fixed; left: 12px; bottom: 12px; z-index: 80; max-width: 380px; padding: 10px 14px; border-radius: 12px; background: #FFE27A; color: #5A3B00; font: 600 .74rem/1.45 var(--mono); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }

/* ── Tamaños ── */
@media (max-width: 1100px) {
  .menu a:not(.boton) { display: none; }
  .js .menu__abrir { display: inline-flex; }
}
@media (max-width: 1000px) {
  .trae__panel, .descenso__rejilla, .encaja, .quien, .precio { grid-template-columns: 1fr; }
  .corte { max-width: 360px; justify-self: start; }
  .siempre, .tres { grid-template-columns: 1fr 1fr; }
  .veredicto { position: static; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .portada { min-height: 0; grid-template-rows: auto auto auto; }
  .portada__cielo { padding: 112px 0 76px; }
  .portada__dibujo { right: -40px; top: -96px; width: 358px; height: 300px; }
  .raices { opacity: .4; }
  .portada__dibujo text { display: none; }
  .portada__tierra { padding-top: 36px; }
  .portada__abajo { grid-template-columns: 1fr; }
  .acciones .boton { flex: 1 1 100%; }
  .semanas { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .tramos { display: none; }
  .detalle { grid-template-columns: 1fr; }
  .siempre, .tres, .camino, .dos-listas { grid-template-columns: 1fr; }
  .camino::before, .camino::after { display: none; }
  .camino li { padding: 0 0 0 42px; }
  .camino li::before { top: 2px; }
  .credenciales li { grid-template-columns: 1fr; gap: 2px; }
  .pregunta { grid-template-columns: 1fr; gap: 10px; }
  .pie .contenedor { grid-template-columns: 1fr; }
  .pie { padding-bottom: 110px; }
  .logo__oficio { display: none; }
  .cab .menu .boton { padding: 10px 14px; font-size: .86rem; }
  .menu { gap: 14px; }
  .sello { width: 104px; height: 104px; right: -14px; bottom: -14px; }
  .retrato-caja { max-width: 240px; }
  .aviso-borrador { bottom: 84px; right: 12px; max-width: none; font-size: .66rem; }
}
@media (max-width: 420px) {
  .menu__texto { display: none; }
  .cab .contenedor { gap: 10px; }
  .logo { gap: 8px; }
  .logo img { width: 34px; }
  .logo__nombre { font-size: 1.08rem; }
  .menu { gap: 10px; }
  .cab .menu .boton { padding: 9px 12px; font-size: .82rem; }
}

/* Toques cómodos en el móvil (15-11-2026): lo que se pulsa mide 44 px o casi, sin cambiar el dibujo */
.cab .logo { padding-block: 6px; margin-block: -6px; }
.cab .menu .boton { position: relative; }
.cab .menu .boton::after { content: ""; position: absolute; inset: -5px -3px; }
@media (max-width: 760px) {
  .pie ul { gap: 0; }
  .pie li a { display: inline-block; padding-block: 10px; }
}
/* Móviles de 320 px: el nombre del logo no cabe junto al botón; queda la marca JF (el enlace ya se llama «Jaime Franco, inicio») */
@media (max-width: 359px) {
  .cab .logo__nombre { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .js .titular .palabra { opacity: 1; transform: none; }
  .js .portada__linea, .js .brote { transform: none; opacity: 1; }
  .js .raices path { stroke-dashoffset: 0; }
  .js .portada__dibujo text { opacity: 1; }
  .js .tachadas span { background-size: 100% .09em; }
  .js .camino::after { transform: none; }
  .js .dias i { transform: none; opacity: 1; }
  .js .final__raices path { stroke-dashoffset: 0; }
  .js .calendario .marca { transform: none; }
}