/* ─────────────────────────────────────────────────────────────
   Chato · página de la empresa · "La puerta de la heladera"
   La puerta de la heladera es donde una casa tiene el día a la vista.
   Un campo tomate de borde a borde, hojas blancas sostenidas por imanes de tinta
   y el objeto recortado encima. Una sola familia tipográfica: la jerarquía es de tamaño.
   Identidad propia: no comparte colores ni letras con la home de .argy.
   Orden: fuentes · tokens · base · tipografía · componentes · hoja e imán · cabecera ·
   hero · secciones · conversación · problema · para quién · objeto · reglas · sistema ·
   etapa · fundador · contacto · pie · responsive · movimiento reducido.
   ───────────────────────────────────────────────────────────── */

/* Atkinson Hyperlegible, del Braille Institute: cada letra se distingue de las demás */
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url(/fonts/atkinson-next.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Mono'; src: url(/fonts/atkinson-mono.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --tomate: #F2553B;
  --tinta: #1B1512;
  --hoja: #FFFFFF;
  --pared: #F1F4F3;
  --apoyo: #555C5B;
  --linea: #D5DBD9;
  /* El ámbar son los ojos de Chato: no sale de la pantalla dibujada */
  --ambar: #FFC857;
  --pantalla: #14100D;
  --marfil: #EDE6D8;

  /* Contexto: lo redefine cada superficie y los componentes solo leen esto */
  --bg: var(--pared);
  --fg: var(--tinta);
  --fg2: var(--apoyo);
  --ln: var(--linea);

  --f-texto: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'Atkinson Hyperlegible Mono', ui-monospace, Menlo, Consolas, monospace;

  --t-hero: clamp(2.5rem, 1.2rem + 4.2vw, 4.75rem);
  --t-h2: clamp(2rem, 1.2rem + 2.9vw, 3.6rem);
  --t-h3: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --t-lead: clamp(1.1rem, 1.02rem + .4vw, 1.35rem);

  --e-salida: cubic-bezier(.16, 1, .3, 1);
  --radio-hoja: 4px;
  --radio: 8px;
  --max: 1280px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --borde: max(var(--gutter), calc((100vw - var(--max)) / 2));
  --cabecera: 68px;
  --sec-pad: clamp(72px, 9vw, 136px);

  color-scheme: light;
}

/* Las tres superficies */
/* Sobre tomate todo el texto va en tinta: un gris no llega al contraste */
.tomate { --bg: var(--tomate); --fg: var(--tinta); --fg2: var(--tinta); --ln: rgba(27, 21, 18, .3); background: var(--bg); color: var(--fg); }
.hoja { --bg: var(--hoja); --fg: var(--tinta); --fg2: var(--apoyo); --ln: var(--linea); background: var(--bg); color: var(--fg); }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--cabecera); scrollbar-color: var(--apoyo) var(--pared); }
body { margin: 0; background: var(--pared); color: var(--tinta); font-family: var(--f-texto); font-size: 1.125rem; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; accent-color: var(--tinta); }
p, h1, h2, h3, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
::selection { background: var(--tinta); color: var(--hoja); }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: var(--radio); }
[hidden] { display: none !important; }

.saltar { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--tinta); color: var(--hoja); padding: 12px 18px; border-radius: var(--radio); font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
.envoltura { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Idioma: los dos textos están en el HTML; se muestra uno */
html[data-lang="es"] [lang="en"], html[data-lang="en"] [lang="es"] { display: none !important; }

/* ── Tipografía: una familia, la jerarquía es de tamaño ── */
h1, h2, h3 { font-weight: 800; text-wrap: balance; }
h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.03em; }
h2 { max-width: 15em; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.028em; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.012em; }
.lead { margin-top: clamp(16px, 2vw, 26px); max-width: 36em; font-size: var(--t-lead); line-height: 1.45; color: var(--fg2); text-wrap: pretty; }
.aviso { margin-top: clamp(28px, 4vw, 44px); max-width: 44em; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 1rem; color: var(--apoyo); }

/* ── Componentes ── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--tinta); color: var(--hoja); font-weight: 700; line-height: 1.2; text-decoration: none; transition: background .18s, color .18s, transform .2s var(--e-salida); }
.btn:hover { transform: translateY(-2px); }
.btn:active { background: var(--hoja); color: var(--tinta); transform: none; }
.btn-chico { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.link { padding: 0; border: 0; background: none; font-weight: 700; text-decoration: underline; }
.link:hover { text-decoration-thickness: 4px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ── La hoja y su imán ── */
.hoja { position: relative; padding: 30px clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px); border-radius: var(--radio-hoja); box-shadow: 0 16px 22px -18px rgba(27, 21, 18, .75), 0 1px 0 rgba(27, 21, 18, .12); }
/* El imán: un disco de tinta, arriba y al centro */
.hoja::before { content: ''; position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--tinta); }
.hoja-titulo { margin-bottom: 8px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.dia li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ln); }
.dia li:last-child { border-bottom: 0; }
.dia .mono { font-size: .9375rem; }
/* El color se reserva para lo que importa ahora: el paso activo va en tinta plena */
.dia .ahora { margin-inline: -10px; padding-inline: 10px; border-bottom: 0; border-radius: var(--radio-hoja); background: var(--tinta); color: var(--hoja); font-weight: 700; }
.hoja-pie { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ln); font-size: .875rem; line-height: 1.4; color: var(--fg2); }
.js .hero-hojas .hoja { animation: se-acomoda .9s var(--e-salida) both; }
.js .hero-hojas .hoja-nota { animation-delay: .12s; }
@keyframes se-acomoda { from { transform: rotate(var(--giro-desde, 6deg)) translateY(-14px); } }

/* ── Cabecera ── */
.cab { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--cabecera); padding: 0 var(--borde); --bg: var(--tomate); background: var(--bg); color: var(--tinta); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.cab.suelta { --bg: var(--pared); border-bottom-color: var(--linea); }
.marca { display: inline-flex; align-items: center; gap: 10px; font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; text-decoration: none; }
/* El símbolo es la cara de Chato: la pantalla, dos ojos y la sonrisa */
.marca-cara { width: 40px; height: 28px; flex: none; }
.marca-cara rect { fill: var(--pantalla); }
.marca-cara .ojo { fill: var(--ambar); }
.marca-cara .boca { fill: none; stroke: var(--ambar); stroke-width: 2.2; stroke-linecap: round; }
.cab-nav { display: flex; gap: clamp(18px, 2.4vw, 34px); font-size: 1rem; font-weight: 600; }
.cab-nav a { text-decoration: none; }
.cab-nav a:hover { text-decoration: underline; }
.cab-lado { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); }
.idioma { display: flex; border: 2px solid var(--tinta); border-radius: var(--radio); overflow: hidden; font-size: .875rem; font-weight: 700; }
.idioma button { min-width: 40px; min-height: 34px; padding: 0 8px; border: 0; background: none; }
.idioma button[aria-pressed="true"] { background: var(--tinta); color: var(--hoja); }
.idioma button:focus-visible { outline: 3px solid var(--hoja); outline-offset: -5px; box-shadow: inset 0 0 0 2px var(--tinta); }
.menu-btn { display: none; min-height: 44px; padding: 0 14px; border: 2px solid var(--tinta); border-radius: var(--radio); background: none; font-weight: 700; font-size: 1rem; }
.menu-btn[aria-expanded="true"] { background: var(--tinta); color: var(--hoja); }

/* ── Hero ── */
.hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(20px, 3vw, 48px); min-height: 100svh; padding: calc(var(--cabecera) + clamp(20px, 4svh, 48px)) var(--borde) clamp(36px, 6svh, 72px); }
.hero h1 { max-width: 9.5em; }
.bajada { margin-top: clamp(18px, 2.2vw, 26px); max-width: 30em; font-size: var(--t-lead); line-height: 1.42; text-wrap: pretty; }
.hero .acciones { margin-top: clamp(22px, 3vw, 34px); }
.estado { margin-top: clamp(22px, 3.4svh, 40px); max-width: 30em; font-size: 1rem; line-height: 1.4; }
/* Chato va delante: las hojas pasan por detrás de su borde */
.hero-objeto { position: relative; z-index: 2; align-self: center; margin-inline: -24% -30%; }
.hero-objeto img { width: 100%; filter: drop-shadow(0 26px 22px rgba(27, 21, 18, .28)); }
.hero-objeto figcaption { margin-top: 6px; text-align: center; font-size: .875rem; white-space: nowrap; }
.hero-hojas { position: relative; z-index: 1; display: grid; gap: 44px; align-self: center; margin-left: -52px; }
.hero-hojas .hoja-dia { transform: rotate(1.6deg); --giro-desde: 7deg; }
.hero-hojas .hoja-nota { margin-left: 12%; transform: rotate(-1.8deg); --giro-desde: -8deg; font-size: 1rem; line-height: 1.4; }
.firma { margin-top: 8px; font-weight: 800; }

/* ── Secciones ── */
.sec { padding-block: var(--sec-pad); }
.sec + .sec { padding-top: 0; }
.tomate + .sec:not(.tomate) { padding-top: var(--sec-pad); }
/* La conversación sigue en la puerta: es el mismo campo que el hero */
.sec.tomate { padding-top: clamp(40px, 6vw, 88px); }

/* ── La conversación de prueba ── */
.demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 4fr); align-items: start; gap: clamp(24px, 3.4vw, 56px); margin-top: clamp(36px, 5vw, 64px); }
/* La pantalla de 3,5 pulgadas, dibujada dentro de su marco marfil */
.aparato { padding: clamp(14px, 1.6vw, 22px); border-radius: 28px; background: var(--marfil); box-shadow: 0 22px 30px -24px rgba(27, 21, 18, .8); }
.pantalla { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; border-radius: 18px; background: var(--pantalla); color: var(--ambar); overflow: hidden; }
.cara { width: 82%; }
.cara .ojo { fill: var(--ambar); transform-box: fill-box; transform-origin: center; transition: transform .35s var(--e-salida); }
.cara .boca { transition: opacity .2s, transform .35s var(--e-salida); transform-box: fill-box; transform-origin: center; }
.cara .boca-linea { fill: none; stroke: var(--ambar); stroke-width: 9; stroke-linecap: round; }
.cara .boca-abierta { fill: var(--ambar); opacity: 0; }
/* Los estados de la cara. Cada uno lleva además su palabra. */
[data-estado="habla"] .boca-linea { opacity: 0; }
[data-estado="habla"] .boca-abierta { opacity: 1; animation: habla .5s ease-in-out 3 alternate; }
@keyframes habla { to { transform: scaleY(.45); } }
[data-estado="escucha"] .ojo { transform: scale(1.12, 1.08); }
[data-estado="escucha"] .boca-linea { transform: scaleX(.7); }
[data-estado="piensa"] .ojo { transform: translate(-7px, -9px) scaleY(.8); }
[data-estado="piensa"] .boca-linea { transform: scaleX(.5) translateX(10px); }
[data-estado="reposo"] .ojo { transform: scaleY(.78); }
/* Ayuda: ojos bien abiertos y la boca quieta, mientras se manda el aviso */
[data-estado="ayuda"] .ojo { transform: scale(1.18, 1.14); }
[data-estado="ayuda"] .boca-linea { opacity: 0; }
[data-estado="ayuda"] .boca-abierta { opacity: 1; transform: scale(.6, .8); }
.foto { display: none; place-items: center; gap: 4px; text-align: center; font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); font-weight: 800; color: #FFF7E3; }
.foto svg { width: clamp(64px, 8vw, 110px); }
.foto rect, .foto path { fill: #8FB7C9; }
.foto .etiqueta { fill: #FFF7E3; }
[data-modo="foto"] .cara { display: none; }
[data-modo="foto"] .foto { display: grid; }
.pantalla-palabra { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-family: var(--f-mono); font-size: clamp(.8rem, .7rem + .4vw, 1rem); letter-spacing: .04em; }
[data-modo="foto"] .pantalla-palabra { display: none; }
.aparato-nota { margin-top: 12px; font-size: .875rem; line-height: 1.4; color: #4A443D; }
/* La hoja que aparece cuando la respuesta fue «no» */
.demo-hojas { display: grid; gap: 36px; align-content: start; }
.hoja-no { margin-left: 8%; transform: rotate(-1.6deg); --giro-desde: -9deg; font-size: 1.0625rem; line-height: 1.4; }
.hoja-no b { display: block; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.hoja.se-acomoda { animation: se-acomoda .8s var(--e-salida) both; }

/* Lo que dice Chato: una idea por turno, grande */
.dice { min-height: 3.3em; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem); font-weight: 800; line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; }
.dice.entra { animation: aparece .5s var(--e-salida) both; }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }
.respuestas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* Las respuestas son las que tendría la persona: botones grandes, dos o tres */
.resp { min-height: 58px; padding: 0 24px; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--hoja); font-size: 1.15rem; font-weight: 700; transition: background .15s, color .15s, transform .2s var(--e-salida); }
.resp:not(:disabled):hover { transform: translateY(-2px); }
.resp:not(:disabled):active { background: var(--tinta); color: var(--hoja); transform: none; }
.reinicio { margin-top: 20px; font-size: 1rem; }
.regla { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--tinta); max-width: 34em; }
.regla-titulo { margin-bottom: 4px; font-weight: 800; }
.regla-cita { display: inline-block; margin-top: 8px; font-weight: 700; }
.demo-dia { transform: rotate(1.4deg); --giro-desde: 6deg; }
/* Con JavaScript se usa la conversación; sin JavaScript, el guion escrito */
.guion { counter-reset: turno; margin-top: 40px; max-width: 44em; display: grid; gap: 12px; }
.js .guion { display: none; }
.guion li { counter-increment: turno; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); }
.guion li::before { content: counter(turno); font-family: var(--f-mono); }
.guion li > * { grid-column: 2; }

/* ── El problema: tres enunciados ── */
.enunciados { margin-top: clamp(36px, 5vw, 60px); }
.enunciados > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px clamp(28px, 5vw, 88px); padding: 22px 0; border-top: 1px solid var(--linea); }
.enunciados > div:first-child { border-top: 2px solid var(--tinta); }
.enunciados dt { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.enunciados dd { color: var(--apoyo); }

/* ── Para quién ── */
.quien { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: clamp(28px, 5vw, 88px); }
.roles > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-top: 1px solid var(--linea); }
.roles > div:first-child { border-top: 2px solid var(--tinta); }
.roles dt { font-size: 1rem; font-weight: 700; color: var(--apoyo); padding-top: .25em; }
.roles dd b { display: block; margin-bottom: 4px; font-size: var(--t-h3); font-weight: 800; line-height: 1.3; letter-spacing: -.012em; }
.roles dd { color: var(--apoyo); }
.roles dd b { color: var(--tinta); }

/* ── El objeto ── */
.objeto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(28px, 5vw, 80px); margin-top: clamp(36px, 5vw, 64px); }
.objeto-frente { padding: clamp(12px, 2vw, 28px) clamp(12px, 2vw, 28px) 14px; border-radius: var(--radio-hoja); }
.objeto-frente img { filter: drop-shadow(0 22px 18px rgba(27, 21, 18, .28)); }
.objeto-frente figcaption, .hoja-foto figcaption { margin-top: 8px; font-size: .875rem; }
/* Tres vistas más, cada una en su azulejo tomate */
.vistas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); margin-top: clamp(20px, 3vw, 40px); }
.vistas figure { padding: clamp(8px, 1.4vw, 20px) clamp(8px, 1.4vw, 20px) 12px; border-radius: var(--radio-hoja); }
.vistas img { filter: drop-shadow(0 16px 14px rgba(27, 21, 18, .26)); }
.vistas figcaption { margin-top: 4px; font-size: .9375rem; font-weight: 700; text-align: center; }
.partes > div { padding: 18px 0; border-top: 1px solid var(--linea); }
.partes > div:first-child { border-top: 2px solid var(--tinta); }
.partes dt { font-size: var(--t-h3); font-weight: 800; line-height: 1.3; letter-spacing: -.012em; }
.partes dd { margin-top: 6px; color: var(--apoyo); }
.existe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); align-items: start; gap: clamp(22px, 3vw, 44px); margin-top: clamp(56px, 7vw, 104px); }
.existe-texto p { margin-top: 12px; color: var(--apoyo); }
.ficha { margin-top: 22px; font-size: .9375rem; }
.ficha > div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-top: 1px solid var(--linea); }
.ficha dt { color: var(--apoyo); }
.ficha dd { text-align: right; }
.hoja-foto { padding: 26px 12px 12px; }
.hoja-foto img { border-radius: 2px; }
.hoja-foto figcaption { color: var(--apoyo); }
.cad-1 { transform: rotate(-1.4deg); }
.cad-2 { margin-top: 48px; transform: rotate(1.8deg); }

/* ── Las reglas: siete, numeradas porque el número se cita ── */
.reglas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: clamp(28px, 5vw, 88px); }
.reglas h2 { position: sticky; top: calc(var(--cabecera) + 32px); }
.lista-reglas { counter-reset: regla; }
.lista-reglas li { counter-increment: regla; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 12px; padding: 20px 0; border-top: 1px solid var(--linea); }
.lista-reglas li:first-child { border-top: 2px solid var(--tinta); }
.lista-reglas li::before { content: counter(regla); grid-row: span 2; font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.lista-reglas p { grid-column: 2; margin-top: 4px; color: var(--apoyo); }

/* ── El sistema ── */
.sistema { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 56px); margin-top: clamp(36px, 5vw, 60px); }
.sistema > div { padding-top: 18px; border-top: 2px solid var(--tinta); }
.sistema p { margin-top: 8px; color: var(--apoyo); }
.modelo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 18px clamp(28px, 5vw, 80px); margin-top: clamp(40px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--linea); }
.modelo-texto { color: var(--apoyo); }
.modelo-texto b { display: block; margin-bottom: 6px; color: var(--tinta); font-size: var(--t-h3); font-weight: 800; line-height: 1.3; }
.precios { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.precios dt { font-size: .875rem; color: var(--apoyo); }
.precios dd { font-size: clamp(1.1rem, .95rem + .7vw, 1.4rem); font-weight: 600; white-space: nowrap; }
.modelo-nota { grid-column: 2; font-size: 1rem; font-weight: 700; }

/* ── Dónde estamos ── */
.etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(40px, 5vw, 64px); }
.etapas ul { margin-top: 12px; display: grid; gap: 10px; }
.etapas li { padding-left: 20px; position: relative; font-size: 1.0625rem; line-height: 1.4; }
.etapas li::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--tinta); }
/* Lo hecho se marca con el punto lleno; lo que falta, vacío */
.etapa-hecho li::before { background: var(--tinta); }
.etapa-hecho { transform: rotate(-.8deg); }
.etapa-sigue { margin-top: 24px; transform: rotate(.7deg); }
.etapa-despues { margin-top: 8px; transform: rotate(-.4deg); }
.replanteo { margin-top: clamp(32px, 4vw, 52px); max-width: 40em; font-size: var(--t-lead); line-height: 1.4; }

/* ── Quién lo hace ── */
.fundador { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: clamp(28px, 5vw, 88px); }
.persona { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 24px; max-width: 560px; transform: rotate(-.7deg); }
.persona h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); letter-spacing: -.02em; }
.persona p { margin: 4px 0 12px; color: var(--apoyo); }
.retrato { width: 132px; height: 132px; }
.r-fondo { fill: var(--tomate); }
.r-remera { fill: var(--tinta); }
.r-piel { fill: #F3CFB1; }
.r-cuello { fill: #E5B893; }
.r-pelo { fill: #A9733D; }
.r-ceja { fill: none; stroke: #8C5E30; stroke-width: 2.4; stroke-linecap: round; }
.r-ojo { fill: #5F8298; }
.r-nariz { fill: none; stroke: #D9A27F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r-bigote { fill: none; stroke: #B5824C; stroke-width: 3.4; stroke-linecap: round; }
.r-boca { fill: none; stroke: #C98773; stroke-width: 2.2; stroke-linecap: round; }

/* ── Contacto: otra vez la puerta ── */
.contacto { padding-block: var(--sec-pad); }
.contacto h2 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.03em; }
.puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); max-width: 980px; }
.puerta { display: grid; gap: 8px; text-decoration: none; font-size: 1.0625rem; transition: transform .3s var(--e-salida); }
.puerta:nth-child(1) { transform: rotate(-1.1deg); }
.puerta:nth-child(2) { transform: rotate(.9deg); }
.puerta:hover, .puerta:focus-visible { transform: rotate(0) translateY(-4px); }
.puerta b { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.8rem); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; }
.puerta > span { color: var(--fg2); }
.puerta .puerta-correo { margin-top: 6px; color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ── Pie ── */
.pie { padding: 32px 0 40px; }
.pie .envoltura { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.pie-marca { font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; }
.pie p { font-size: 1rem; color: var(--apoyo); }
.pie a { color: var(--tinta); font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 1160px) {
  .hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .hero-objeto { margin-inline: -10% -4%; }
  .hero-hojas { margin-left: 0; }
  .hero-hojas { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 28px; justify-content: start; margin-top: 12px; }
  .hero-hojas .hoja-nota { margin-left: 0; align-self: start; }
  .demo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .demo-hojas { grid-column: 2; max-width: 340px; }
  .existe { grid-template-columns: 1fr 1fr; }
  .existe-texto { grid-column: 1 / -1; max-width: 40em; }
}
@media (max-width: 900px) {
  .cab-nav { display: none; position: absolute; inset: 100% 0 auto 0; flex-direction: column; gap: 0; padding: 8px var(--borde) 20px; background: var(--bg); border-bottom: 2px solid var(--tinta); font-size: 1.2rem; }
  .cab-nav.abierto { display: flex; }
  .cab-nav a { padding: 14px 0; border-bottom: 1px solid rgba(27, 21, 18, .25); }
  .js .menu-btn { display: block; }
  .idioma button { min-height: 42px; min-width: 42px; }
  .quien, .objeto, .reglas, .fundador, .modelo { grid-template-columns: 1fr; }
  .reglas h2 { position: static; }
  .modelo-nota { grid-column: auto; }
  .sistema, .etapas, .enunciados > div { grid-template-columns: 1fr; }
  .etapas .hoja.etapa-hecho, .etapas .hoja.etapa-sigue, .etapas .hoja.etapa-despues { margin-top: 0; transform: none; }
  .etapas { gap: 30px; }
  .puertas { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  .cab .btn { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-objeto { max-width: 340px; margin: -8% auto -4%; }
  .precios { grid-template-columns: 1fr; }
  .hero-hojas { grid-template-columns: 1fr; max-width: 320px; gap: 32px; }
  .hero-hojas .hoja-nota { margin-left: 10%; }
  .demo { grid-template-columns: 1fr; }
  .demo-hojas { grid-column: auto; max-width: none; }
  .demo-dia { transform: none; }
  .aparato { max-width: 380px; }
  .resp { flex: 1 1 auto; }
  .existe { grid-template-columns: 1fr; }
  .cad-2 { margin-top: 0; }
  .roles > div { grid-template-columns: 1fr; }
  .persona { grid-template-columns: 96px minmax(0, 1fr); transform: none; }
  .retrato { width: 96px; height: 96px; }
}

/* ── Movimiento reducido: todo aparece en su lugar ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}