/* Solo la portada. Aquí sí hay movimiento y letra grande, por decisión de Mateo. La app sigue sobria. */
.pub-main:has(.inicio) { max-width: none; padding: 0; }
.inicio { position: relative; overflow: clip; }
.h-rotulo { font: 700 13px/1.4 var(--titulo); font-stretch: 90%; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lapiz); }
.btn-grande { min-height: 48px; padding: 12px 24px; font-size: 17px; }

/* Línea de boli que se dibuja al bajar */
.linea-boli { position: absolute; top: 0; left: 0; width: 32px; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.linea-boli path { fill: none; stroke: var(--boli); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Portada */
.h-portada { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; min-height: calc(100dvh - 53px); padding: 48px max(48px, calc((100vw - 1328px) / 2)) 48px; background-image: var(--rej); background-size: 32px 32px; background-position: -1px -1px; animation: papel 700ms ease-out both; }
@keyframes papel { from { background-color: var(--papel-2); } to { background-color: transparent; } }
.h-titulo { font: 900 clamp(64px, 10vw, 168px)/0.9 var(--titulo); font-stretch: 62%; letter-spacing: -0.02em; }
.h-linea { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.h-linea > span { display: inline-block; animation: subir 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.h-linea:nth-child(2) > span { animation-delay: 90ms; }
.h-linea:nth-child(3) > span { animation-delay: 180ms; }
@keyframes subir { from { transform: translateY(105%); } to { transform: none; } }
.h-toca { position: relative; z-index: 0; }
.h-toca svg { position: absolute; left: -2%; bottom: 8%; width: 104%; height: 42%; z-index: -1; transform-origin: left; animation: marcar 500ms 720ms cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.h-toca path { fill: var(--subrayador); }
@keyframes marcar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.h-entrada { font-size: 20px; line-height: 1.4; max-width: 28em; margin-top: 24px; background: var(--papel); animation: aparecer 500ms 500ms both; }
.h-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; animation: aparecer 500ms 620ms both; }
.h-botones .btn:not(.btn-1) { background: var(--papel); }
.h-botones .btn:not(.btn-1):hover { background: var(--papel-2); }
.h-nota { margin-top: 12px; font-size: 13px; color: var(--lapiz); background: var(--papel); display: inline-block; animation: aparecer 500ms 740ms both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* La herramienta en movimiento */
.vivo-marco { min-width: 0; animation: aparecer 600ms 320ms both; }
.vivo { display: flex; flex-direction: column; height: 520px; background: var(--papel); border: 1px solid var(--tinta); }
.vivo-barra { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--tinta); font-size: 15px; white-space: nowrap; overflow: hidden; }
.vivo-barra strong { font: 700 17px var(--titulo); font-stretch: 85%; }
.vivo-barra b { font-weight: 500; font-size: 17px; }
.vivo-barra small { margin-left: auto; }
.vivo-reloj { color: var(--lapiz); }
.vivo-reloj.activo { color: var(--boli); font-weight: 500; }
.vivo-cuerpo { position: relative; flex: 1; overflow: hidden; }
.vivo-cuerpo > section { position: absolute; inset: 0; padding: 24px; opacity: 0; transform: translateX(24px); transition: opacity 260ms, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); visibility: hidden; }
.vivo-cuerpo > section.activa { opacity: 1; transform: none; visibility: visible; }
.vivo-rot { font: 800 34px/1.05 var(--titulo); font-stretch: 70%; margin-bottom: 16px; }
.vivo-texto { margin: 0; height: 248px; padding: 12px; overflow: hidden; font: 15px/24px var(--cifra); word-spacing: -0.2em; white-space: pre-wrap; border: 1px solid var(--lapiz); background-image: linear-gradient(var(--cuadricula) 1px, transparent 1px); background-size: 100% 24px; background-position: 0 11px; }
.vivo-texto::after { content: ""; display: inline-block; width: 2px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--boli); animation: cursor 900ms steps(2) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.vivo-boton { display: inline-block; margin-top: 16px; padding: 8px 16px; background: var(--boli); color: var(--papel); font-weight: 700; transition: background-color 120ms, transform 120ms; }
.vivo-boton.pulsado { background: var(--tinta); transform: translateY(2px); }
.vivo-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tinta); border-bottom: var(--regla); }
.vivo-cifras > div { padding: 16px 12px 16px 0; }
.vivo-cifras > div + div { padding-left: 12px; border-left: var(--regla); }
.vivo-cifras dd { font-size: clamp(48px, 6vw, 88px); line-height: 1; font-weight: 500; letter-spacing: -0.06em; }
.vivo-cifras dt { margin-top: 4px; font-size: 15px; color: var(--lapiz); }
.vivo-frase { margin-top: 24px; font-size: 20px; }
.vivo-filas li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; font-size: 17px; border-bottom: var(--regla); opacity: 0; transform: translateY(12px); transition: opacity 240ms, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), color 200ms; }
.vivo-filas li.entra { opacity: 1; transform: none; }
.vivo-filas i { position: relative; width: 24px; height: 24px; border: 1px solid var(--tinta); transition: background-color 120ms; }
.vivo-filas .rep i { border-style: dashed; border-color: var(--lapiz); }
.vivo-filas i::after { content: ""; position: absolute; left: 7px; top: 3px; width: 8px; height: 13px; border: solid var(--boli); border-width: 0 2px 2px 0; transform: rotate(40deg) scale(0); transition: transform 160ms; }
.vivo-filas li.hecha i::after { transform: rotate(40deg) scale(1); }
.vivo-filas li.hecha { color: var(--lapiz); }
.vivo-filas em { font-style: normal; font-size: 13px; color: var(--lapiz); }
.vivo-filas .traza-tachado { animation-duration: 320ms; }
.vivo-semana { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 208px; border: var(--regla); background-image: linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px); background-size: calc(100% / 7) 100%; }
.vivo-semana > span { padding: 4px; text-align: center; font: 700 13px var(--titulo); color: var(--lapiz); }
.vivo-semana > span.perdido { color: var(--rojo); }
.vivo-carril { position: absolute; inset: 32px 0 0; }
.vivo-bloque { position: absolute; width: calc(100% / 7 - 6px); height: 72px; padding: 4px; background: var(--boli); color: var(--papel); font: 500 13px/1.2 var(--cifra); transition: left 520ms cubic-bezier(0.4, 0, 0.2, 1); }
.vivo-bloque.b2 { top: 80px; background: var(--papel); color: var(--boli); border: 1px solid var(--boli); height: 48px; }
.vivo-hueco { position: absolute; top: -32px; bottom: 0; width: calc(100% / 7); background-image: repeating-linear-gradient(135deg, var(--rojo) 0 1px, transparent 1px 8px); opacity: 0; transition: opacity 240ms; }
.vivo-hueco.ver { opacity: 0.6; }
.vivo-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tinta); font: 700 13px var(--titulo); font-stretch: 85%; }
.vivo-pasos li { position: relative; padding: 8px 12px; color: var(--lapiz); }
.vivo-pasos li + li { border-left: var(--regla); }
.vivo-pasos li::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--boli); }
.vivo-pasos li.activo { color: var(--tinta); }
.vivo-pasos li.activo::before { width: 100%; transition: width var(--dura, 4s) linear; }

/* Lo que dejas de hacer */
.h-tachar { padding: 96px max(48px, calc((100vw - 1328px) / 2)); border-top: 1px solid var(--tinta); }
.h-tachar ul { margin-top: 24px; }
.h-tacha, .h-una { font: 900 clamp(38px, 10.5vw, 152px)/1.08 var(--titulo); font-stretch: 62%; letter-spacing: -0.015em; white-space: nowrap; }
.h-tacha { position: relative; width: fit-content; max-width: 100%; transition: color 300ms 200ms; }
.h-tacha svg { position: absolute; left: -1%; top: 50%; width: 102%; height: 0.14em; margin-top: -0.04em; overflow: visible; pointer-events: none; }
.h-tacha path { fill: none; stroke: var(--boli); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.anima .h-tacha svg { clip-path: inset(-24px 100% -24px -24px); }
.anima .h-tacha.visto svg { clip-path: inset(-24px -24px -24px -24px); transition: clip-path 520ms cubic-bezier(0.5, 0, 0.2, 1) 120ms; }
.h-tacha { color: var(--lapiz); }
.anima .h-tacha { color: var(--tinta); }
.anima .h-tacha.visto { color: var(--lapiz); }
.h-una { margin-top: 48px; }
.h-marcador { background: linear-gradient(var(--subrayador), var(--subrayador)) no-repeat 0 72% / 100% 46%; padding: 0 0.06em; }
.anima .h-marcador { background-size: 0 46%; }
.anima .visto .h-marcador, .anima .h-una.visto .h-marcador { background-size: 100% 46%; transition: background-size 640ms cubic-bezier(0.4, 0, 0.2, 1) 160ms; }
.h-marcador-suave { background: linear-gradient(var(--subrayador), var(--subrayador)) no-repeat 0 76% / 100% 40%; padding: 0 0.06em; }

/* Calculadora */
.h-calc { background: var(--boli); color: var(--papel); }
.h-calc-dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; max-width: 1424px; margin: 0 auto; padding: 96px 48px; }
.h-grande { font: 900 clamp(48px, 7vw, 104px)/0.95 var(--titulo); font-stretch: 62%; letter-spacing: -0.015em; }
.h-calc-sub { margin-top: 16px; font-size: 20px; }
.calc { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.calc label { display: block; }
.calc label > span { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; font-weight: 700; }
.calc output { font-size: 26px; font-weight: 500; }
.calc input[type=range] { display: block; width: 100%; min-height: 32px; padding: 0; background: none; border: 0; accent-color: var(--papel); cursor: grab; }
.calc input[type=range]:focus-visible { outline-color: var(--papel); }
.h-calc-hoja { min-width: 0; padding: 32px; background: var(--papel); color: var(--tinta); background-image: var(--rej); background-size: 24px 24px; }
.calc-veredicto { font: 900 clamp(48px, 6vw, 88px)/0.95 var(--titulo); font-stretch: 62%; letter-spacing: -0.015em; }
.calc-veredicto.mal { color: var(--rojo); }
.calc-veredicto.golpe { animation: golpe 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes golpe { 0% { transform: scale(0.96); } 60% { transform: scale(1.015); } 100% { transform: none; } }
.calc-detalle { margin-top: 12px; min-height: 76px; font-size: 17px; background: var(--papel); }
.calc-semanas { display: flex; align-items: flex-end; gap: 1px; height: 136px; margin-top: 16px; border-bottom: 1px solid var(--tinta); background: var(--papel); }
.calc-semanas i { flex: 1 1 0; min-width: 0; background: var(--boli); transition: height 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.calc-semanas i.vacia { background: var(--cuadricula); }
.calc-semanas i.falta { background: var(--rojo); }
.calc-eje { display: flex; justify-content: space-between; font-size: 13px; padding-top: 4px; background: var(--papel); }
.calc-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.calc-acciones .btn:not(.btn-1) { background: var(--papel); }
.calc-acciones .btn:not(.btn-1):hover { background: var(--papel-2); }
.calc-nota { margin-top: 12px; font-size: 13px; color: var(--lapiz); background: var(--papel); }

/* Recorrido por las pestañas */
.h-tour { padding: 96px max(48px, calc((100vw - 1424px) / 2 + 48px)) 48px; }
.h-tour-t { max-width: 14em; }
.tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 48px; margin-top: 32px; }
.tour-paso { min-height: 72vh; padding-top: 24vh; color: var(--lapiz); transition: color 200ms; }
.tour-paso:first-child { padding-top: 8vh; }
.tour-paso:last-child { min-height: 64vh; }
.tour-paso h3 { font: 900 clamp(48px, 5vw, 72px)/1 var(--titulo); font-stretch: 62%; }
.tour-paso p { margin-top: 12px; font-size: 20px; line-height: 1.4; }
.tour-paso.activo { color: var(--tinta); }
.tour-movil { display: none; }
.tour-ventana { position: sticky; top: calc(50vh - 280px); align-self: start; }
.tour-tabs { display: flex; gap: 4px; margin-bottom: -1px; position: relative; z-index: 1; }
.tour-tabs span { padding: 8px 16px; font: 700 15px/1.4 var(--titulo); font-stretch: 80%; background: var(--papel-2); border: 1px solid transparent; border-bottom: 0; transition: background-color 120ms; }
.tour-tabs span.activo { background: var(--papel); border-color: var(--tinta); }
.tour-imagenes { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; border: 1px solid var(--tinta); background: var(--papel); }
.tour-imagenes img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 100% 0 0); transition: clip-path 460ms cubic-bezier(0.5, 0, 0.1, 1); }
.tour-imagenes img.activa { clip-path: inset(0 0 0 0); z-index: 1; }
.tour-imagenes img.pasada { clip-path: inset(0 0 0 0); }
.tour-ventana figcaption { padding-top: 4px; font-size: 13px; color: var(--lapiz); }

/* Final */
.h-final { padding: 96px max(48px, calc((100vw - 1328px) / 2)); background: var(--tinta); color: var(--papel); }
.h-enorme { font: 900 clamp(56px, 12vw, 200px)/0.9 var(--titulo); font-stretch: 62%; letter-spacing: -0.02em; }
.h-final > p { margin-top: 24px; font-size: 20px; max-width: 34em; }
.h-final-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.btn-claro { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.btn-claro:hover { background: var(--subrayador); border-color: var(--subrayador); }
.h-enlace { color: var(--papel); font-weight: 700; }
.h-final :focus-visible { outline-color: var(--subrayador); }
.h-final > .h-final-nota { margin-top: 32px; font-size: 13px; color: var(--cuadricula); }

/* Aparecer al bajar */
.anima [data-rev] { opacity: 0; transform: translateY(24px); }
.anima [data-rev].visto { opacity: 1; transform: none; transition: opacity 420ms, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }

@media (max-width: 1099px) {
  .h-portada { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-left: 32px; padding-right: 32px; }
  .h-titulo { font-size: clamp(72px, 15vw, 144px); }
  .h-calc-dentro { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 64px 32px; }
  .h-tachar, .h-final, .h-tour { padding-left: 32px; padding-right: 32px; }
  .tour { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 32px; }
  .linea-boli { display: none; }
}
@media (max-width: 759px) {
  .h-portada { padding: 32px 16px; gap: 32px; }
  .h-titulo { font-size: clamp(64px, 21vw, 150px); }
  .h-entrada { font-size: 17px; }
  .btn-grande { flex: 1 1 auto; }
  .vivo { height: 468px; }
  .vivo-barra { gap: 12px; padding: 8px 12px; font-size: 13px; }
  .vivo-barra small { display: none; }
  .vivo-cuerpo > section { padding: 16px 12px; }
  .vivo-rot { font-size: 26px; margin-bottom: 12px; }
  .vivo-texto { font-size: 13px; height: 224px; padding: 8px; }
  .vivo-filas li { font-size: 15px; min-height: 64px; }
  .vivo-cifras dt { font-size: 13px; }
  .vivo-frase { font-size: 17px; margin-top: 16px; }
  .vivo-bloque { font-size: 13px; letter-spacing: -0.06em; padding: 2px; }
  .h-tachar { padding: 64px 16px; }
  .h-una { margin-top: 32px; }
  .h-calc-dentro { padding: 48px 16px; }
  .h-calc-hoja { padding: 16px; }
  .h-tour { padding: 64px 16px 32px; }
  .tour { display: block; }
  .tour-ventana { display: none; }
  .tour-paso, .tour-paso:first-child, .tour-paso:last-child { min-height: 0; padding: 24px 0 32px; color: var(--tinta); }
  .tour-movil { display: block; width: min(100%, 320px); margin-top: 16px; border: 1px solid var(--tinta); }
  .h-final { padding: 64px 16px; }
  .h-final > p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .anima [data-rev] { opacity: 1; transform: none; }
  .anima .h-tacha svg { clip-path: none; }
  .anima .h-tacha { color: var(--lapiz); }
  .anima .h-marcador { background-size: 100% 46%; }
  .h-linea > span, .h-entrada, .h-botones, .h-nota, .vivo-marco, .h-toca svg { animation: none; }
  .tour-imagenes img { transition: none; }
}