/* abuelito.co/ingles/ (tools/sitio-ingles.mjs): el aspecto de Abuelito English sobre el sitio general. Blanco y negro con UN acento,
   el amarillo del sol; el botón principal es el sol con letra negra (igual que la app). Solo aplica a las páginas del curso
   (body.c-ingles). Sin JavaScript todo se lee completo; el audio es lo único que lo usa. */
body.c-ingles {
  --bg: #ffffff; --bg2: #f6f7f9; --card: #ffffff; --soft: #f3f4f6; --line: #e8e9ed; --ink: #0f1115; --muted: #5f6472;
  --sun: #ffc42e; --sun-d: #b98400; --sun-soft: #fff6dc; --teal: #0f1115; --teal-d: #0f1115; --yellow: #ffc42e; --on-brand: #0f1115;
  background: var(--bg); color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  body.c-ingles { --bg: #000000; --bg2: #0c0c0e; --card: #141416; --soft: #1c1c1f; --line: #2a2a2f; --ink: #f5f5f7; --muted: #a2a2ad;
    --sun: #ffc93f; --sun-d: #ffc93f; --sun-soft: #2a2310; --teal: #f5f5f7; --teal-d: #f5f5f7; }
}
body.c-ingles a { color: inherit; }
body.c-ingles .eyebrow { color: var(--sun-d); }
body.c-ingles .btn { background: var(--sun); color: #0f1115; border: 0; box-shadow: none; }
body.c-ingles .btn.ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
body.c-ingles h1 { font-size: clamp(32px, 5.4vw, 58px); }
body.c-ingles h2 { font-size: clamp(24px, 3.4vw, 36px); }

/* portada */
.ing-hero { padding: 40px 0 10px; }
.ing-hero-in { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .ing-hero-in { grid-template-columns: 1.3fr .7fr; } }
.ing-marca { width: min(320px, 70vw); justify-self: center; border-radius: 32px; }
.ing-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.ing-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: p; }
@media (min-width: 720px) { .ing-pasos { grid-template-columns: repeat(4, 1fr); } }
.ing-pasos li { counter-increment: p; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); display: grid; gap: 6px; }
.ing-pasos li::before { content: counter(p); width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: #0f1115; display: grid; place-items: center; font-weight: 900; }
.ing-pasos span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.ing-ejemplo { margin-top: 18px; padding: 18px; border-radius: 20px; background: var(--sun-soft); display: grid; gap: 4px; }
.ing-ejemplo small { color: var(--sun-d); text-transform: uppercase; letter-spacing: .1em; font-weight: 900; font-size: 12px; }

/* tarjetas (listas de situaciones y rutas) */
.ing-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 14px 0 6px; }
.ing-cards.grande { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ing-card { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); text-decoration: none;
  transition: border-color .15s, transform .15s; }
.ing-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.ing-card b { font-size: 17px; line-height: 1.3; }
.ing-card span { color: var(--muted); font-size: 15px; line-height: 1.45; }

/* una situación */
.ing-sit .lead { margin-bottom: 20px; }
.ing-poster { float: right; width: 150px; margin: 0 0 12px 18px; border-radius: 16px; border: 1px solid var(--line); }
@media (max-width: 700px) { .ing-poster { float: none; width: 150px; margin: 0 auto 18px; } }   /* en el teléfono, centrada: flotando apretaba las frases */
.ing-frases { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; clear: none; }
.ing-frases > li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); display: grid; gap: 2px; }
.ing-frases.rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ing-f { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.ing-f b { font-size: 20px; line-height: 1.3; }
.es { color: var(--muted); font-size: 16px; }
.suena { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
.suena small { color: var(--sun-d); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.ing-oir { display: inline-flex; gap: 6px; flex: none; }
.ing-play { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 900 14px/1 system-ui; cursor: pointer; display: grid; place-items: center; }
.ing-play.on { background: var(--sun); border-color: var(--sun); color: #0f1115; }
.ing-play.lento { font-size: 16px; }
.ing-errores, .ing-pizarra { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.ing-errores > li { padding: 14px 16px; border-radius: 16px; background: var(--sun-soft); }
.ing-errores > li p { margin: 0 0 6px; }
.ing-errores ul { margin: 0; padding-left: 20px; color: var(--ink); }
.ing-pizarra li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 4px; }
.ing-pizarra li > span { color: var(--muted); }
.ing-dialogo { margin: 0; display: grid; gap: 4px; }
.ing-dialogo dt { padding: 12px 16px 4px; border-radius: 16px 16px 16px 4px; background: var(--soft); display: grid; gap: 2px; margin-top: 8px; }
.ing-dialogo dd { margin: 0 0 0 auto; max-width: 90%; padding: 10px 16px; border-radius: 16px 16px 4px 16px; background: var(--sun-soft); }
.ing-practica { margin: 34px 0 10px; padding: 24px; border-radius: 24px; background: var(--soft); }
.ing-practica h2 { margin-top: 0; }
.ing-sigue { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }
.ing-sigue a { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; display: grid; gap: 2px; }
.ing-sigue a.sig { text-align: right; }
.ing-sigue small { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 900; }
.ing-temas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ing-temas a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; font-size: 15px; }
.ing-temas a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ing-post .ing-card { margin: 14px 0; }

/* ===================== la portada (tools/sitio-ingles.mjs → .ing-home) =====================
   Una sola idea fuerte: el método se vive, no se describe. El sol de la marca enorme detrás de la portada, un chat que se escribe solo,
   «Rebobina» como televisores de VHS (lo único oscuro de la página: es una pantalla), tarjetas que voltean de «se escribe» a «suena» y
   las rutas con su escena. Todo legible sin JavaScript; el movimiento se apaga con «reducir movimiento». */
.ing-home { --ih-max: 1180px; overflow-x: clip; }
.ing-home h2 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 14px; }
.ih-kicker { margin: 0 0 12px; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--sun-d); }
.ih-sec-head { max-width: 760px; margin-bottom: 26px; }
.ih-sec-head > p:last-child { color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.5; margin: 0; }
.ih-link { font-weight: 900; text-decoration: none; border-bottom: 2px solid var(--sun); padding-bottom: 2px; }
.ing-home section { padding-block: clamp(46px, 7vw, 92px); }

/* portada: el sol detrás, el titular grande y el chat */
.ih-hero { position: relative; padding-top: clamp(30px, 5vw, 64px) !important; }
.ih-hero::before { content: ""; position: absolute; z-index: 0; right: -18vw; top: -12vw; width: min(78vw, 820px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--sun) 92%, #fff), var(--sun) 62%); opacity: .95; }
.ih-hero-in { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .ih-hero-in { grid-template-columns: 1.15fr .85fr; } }
.ih-copy h1 { font-size: clamp(44px, 8.4vw, 100px); line-height: .95; letter-spacing: -.045em; margin: 0 0 22px; max-width: 11ch; }
.ih-sol { background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%); padding-inline: .06em; }
.ih-lead { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: var(--muted); max-width: 34ch; margin: 0 0 26px; }
.ih-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.ih-datos { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.ih-datos li { display: grid; }
.ih-datos b { font-size: clamp(34px, 4vw, 46px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ih-datos span { color: var(--muted); font-size: 14px; }
.ih-chat { margin: 0; padding: 18px; border-radius: 30px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(15, 17, 21, .35); max-width: 440px; justify-self: center; width: 100%; }
.ih-chat figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--muted); padding: 2px 6px 12px; border-bottom: 1px solid var(--line); }
.ih-dot { width: 9px; height: 9px; border-radius: 50%; background: #17b26a; box-shadow: 0 0 0 4px color-mix(in srgb, #17b26a 22%, transparent); }
.ih-chat ol { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ih-msg { position: relative; max-width: 86%; padding: 11px 15px; border-radius: 20px 20px 20px 6px; background: var(--soft); display: grid; gap: 2px; }
.ih-msg b { font-size: 18px; line-height: 1.25; }
.ih-msg small { color: var(--muted); font-size: 13px; }
.ih-msg.yo { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--ink); color: var(--bg); }
.ih-mini { position: absolute; right: -10px; top: -10px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--sun); color: #0f1115; font: 900 11px/1 system-ui; cursor: pointer; }
.ih-mini.on { outline: 3px solid color-mix(in srgb, var(--sun) 40%, transparent); }
.js .ih-msg { animation: ih-entra .45s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i) * 1.1s + .4s); }
@keyframes ih-entra { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.ih-chat-pie { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 6px 2px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.35; }
.ih-chat-pie img { width: 40px; height: 40px; border-radius: 50%; flex: none; }

/* Rebobina: televisores (la pantalla es oscura en los dos temas: es una pantalla) */
.ih-tv-band { background: var(--soft); }
.ih-tvs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ih-tv { --scr: #0d0e12; --tx: #f2f2f4; position: relative; display: grid; gap: 10px; align-content: start; padding: 18px 18px 16px; border-radius: 26px;
  background: var(--scr); color: var(--tx); overflow: hidden; isolation: isolate; border: 6px solid #22232a; }
.ih-tv::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none; }
.ih-tv-top { display: flex; justify-content: space-between; font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: #9a9aa5; }
.ih-rec { color: #ff5a4e; }
.ih-tv-ctx { margin: 4px 0 0; font-size: 13px; font-weight: 900; color: #ffc42e; text-transform: uppercase; letter-spacing: .1em; }
.ih-tv-frase { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 900; }
.ih-tv-frase small { display: block; font-size: 14px; font-weight: 700; color: #b5b5bf; margin-top: 4px; }
.ih-tv mark { color: inherit; border-radius: 6px; padding: 0 .18em; }
.ih-tv mark.mal { background: #ff5a4e; color: #fff; }
.ih-tv mark.bien { background: #2bd47e; color: #0b2a1b; }
.ih-tv-que { margin: 0; color: #c9c9d2; font-size: 15px; line-height: 1.45; }
.ih-rew { justify-self: start; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 99px; border: 0; background: #ffc42e; color: #0f1115; font: 900 15px/1 inherit; font-family: inherit; cursor: pointer; }
.ih-tv-mas { color: #d7d7de; font-size: 14px; font-weight: 800; text-decoration: none; }
.ih-tv-mas:hover { text-decoration: underline; }
/* con JavaScript: primero el error; al rebobinar, estática y la frase buena */
.js .ih-tv .ih-bien { display: none; }
.js .ih-tv.ok .ih-mal, .js .ih-tv.ok .ih-tv-que { display: none; }
.js .ih-tv.ok .ih-bien { display: block; animation: ih-entra .4s both; }
.js .ih-tv.ok .ih-rew { display: none; }
.ih-tv.rew:not(.ok)::before { content: ""; position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, rgba(255,255,255,.25) 0 2px, rgba(0,0,0,.4) 2px 4px);
  animation: ih-estatica .52s steps(6) both; }
@keyframes ih-estatica { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-14px); } 100% { transform: translateY(8px); opacity: .2; } }

/* Así suena: tarjetas que voltean */
.ih-suenas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ih-suena { position: relative; display: grid; text-align: left; min-height: 170px; padding: 20px; border-radius: 24px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-family: inherit; cursor: pointer; }
.ih-suena small { display: block; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ih-suena b { font-size: 24px; line-height: 1.2; }
.ih-suena em { display: block; margin-top: 10px; font-style: normal; color: var(--muted); font-size: 14px; line-height: 1.45; font-weight: 700; }
.ih-son { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ih-son b { color: var(--ink); background: linear-gradient(transparent 60%, color-mix(in srgb, var(--sun) 70%, transparent) 60%); }
.js .ih-suena { grid-template-areas: "x"; align-items: center; }
.js .ih-esc, .js .ih-son { grid-area: x; margin: 0; padding: 0; border: 0; transition: opacity .3s, transform .3s; }
.js .ih-son { opacity: 0; transform: translateY(10px); }
.js .ih-suena.on .ih-esc { opacity: 0; transform: translateY(-10px); }
.js .ih-suena.on .ih-son { opacity: 1; transform: none; }
.js .ih-suena.on { border-color: var(--sun); background: color-mix(in srgb, var(--sun) 10%, var(--card)); }
.js .ih-suena::after { content: "Toca para oír"; position: absolute; right: 18px; bottom: 14px; font-size: 12px; font-weight: 900; color: var(--sun-d); }
.js .ih-suena.on::after { content: "Toca otra vez"; }

/* rutas: chips (radio, sin JavaScript) y el panel con su escena */
.ih-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ih-chip { padding: 10px 16px; border-radius: 99px; border: 1.5px solid var(--line); font-weight: 900; font-size: 15px; cursor: pointer; background: var(--card); }
.ih-panel { display: none; gap: 22px; padding: 22px; border-radius: 28px; border: 1px solid var(--line); background: var(--card); }
@media (min-width: 720px) { .ih-panel { grid-template-columns: 200px 1fr; align-items: start; } }
.ih-panel img { width: 200px; max-width: 100%; border-radius: 18px; border: 1px solid var(--line); justify-self: center; }
.ih-panel h3 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); }
.ih-panel h3 a { text-decoration: none; }
.ih-panel p { color: var(--muted); margin: 0 0 12px; }
.ih-panel ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.ih-panel li { display: grid; gap: 1px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ih-panel li a { font-weight: 900; text-decoration: none; }
.ih-panel li span { color: var(--muted); font-size: 14px; }
.ih-panel-tx { min-width: 0; }
#ih-r-kit:checked ~ .ih-paneles [data-ruta="kit"], #ih-r-construccion:checked ~ .ih-paneles [data-ruta="construccion"], #ih-r-limpieza:checked ~ .ih-paneles [data-ruta="limpieza"],
#ih-r-restaurante:checked ~ .ih-paneles [data-ruta="restaurante"], #ih-r-salud:checked ~ .ih-paneles [data-ruta="salud"], #ih-r-camion:checked ~ .ih-paneles [data-ruta="camion"],
#ih-r-startups:checked ~ .ih-paneles [data-ruta="startups"], #ih-r-vida:checked ~ .ih-paneles [data-ruta="vida"] { display: grid; }
#ih-r-kit:checked ~ .ih-chips [for="ih-r-kit"], #ih-r-construccion:checked ~ .ih-chips [for="ih-r-construccion"], #ih-r-limpieza:checked ~ .ih-chips [for="ih-r-limpieza"],
#ih-r-restaurante:checked ~ .ih-chips [for="ih-r-restaurante"], #ih-r-salud:checked ~ .ih-chips [for="ih-r-salud"], #ih-r-camion:checked ~ .ih-chips [for="ih-r-camion"],
#ih-r-startups:checked ~ .ih-chips [for="ih-r-startups"], #ih-r-vida:checked ~ .ih-chips [for="ih-r-vida"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ih-rutas input:focus-visible ~ .ih-chips { outline: 2px dashed var(--sun-d); outline-offset: 6px; border-radius: 12px; }

/* la clase en seis pasos: una línea de tiempo */
.ih-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: ip; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 3px solid var(--ink); }
.ih-pasos li { counter-increment: ip; display: grid; gap: 6px; padding: 20px 18px 6px 0; position: relative; }
.ih-pasos li::before { content: counter(ip); position: absolute; top: -15px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); color: #0f1115; display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.ih-pasos b { font-size: 20px; margin-top: 8px; }
.ih-pasos span { color: var(--muted); font-size: 15px; line-height: 1.45; }

/* desde cero y guías */
.ih-cero-in { display: grid; gap: 22px; padding: clamp(22px, 4vw, 40px); border-radius: 30px; background: color-mix(in srgb, var(--sun) 16%, var(--card)); border: 1px solid color-mix(in srgb, var(--sun) 45%, var(--line)); }
@media (min-width: 860px) { .ih-cero-in { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.ih-cero-in p { color: var(--muted); margin: 0; }
.ih-cero-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ih-cero-links a { padding: 10px 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-weight: 900; text-decoration: none; font-size: 15px; }
.ih-guias-list { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); border-top: 1px solid var(--line); margin-bottom: 20px; }
.ih-guias-list a { display: grid; gap: 4px; padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ih-guias-list b { font-size: 18px; line-height: 1.3; }
.ih-guias-list span { color: var(--muted); font-size: 15px; line-height: 1.45; }

/* el cierre */
.ih-final { background: var(--sun); color: #0f1115; }
.ih-final-in { display: grid; gap: 20px; align-items: center; justify-items: start; }
@media (min-width: 860px) { .ih-final-in { grid-template-columns: auto 1fr auto; } }
.ih-final img { width: 132px; height: 132px; border-radius: 50%; background: #fff; }
.ih-final h2 { margin: 0 0 4px; color: #0f1115; }
.ih-final p { margin: 0; color: #3b3a33; font-weight: 800; }
.ih-final .btn { background: #0f1115 !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .js .ih-msg, .js .ih-tv.ok .ih-bien { animation: none; }
  .ih-tv.rew:not(.ok)::before { display: none; }
  .js .ih-esc, .js .ih-son { transition: none; }
}
/* teléfono: el sol detrás del chat (no del titular: en oscuro el texto blanco sobre amarillo no se leía), los datos en una fila
   y los seis pasos en una lista vertical (en dos columnas se encimaban) */
@media (max-width: 899px) {
  .ih-hero::before { top: auto; bottom: -8vw; right: -38vw; width: 112vw; }
  .ih-datos { gap: 10px 22px; }
  .ih-datos b { font-size: 32px; }
  .ih-pasos { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid var(--ink); margin-left: 14px; }
  .ih-pasos li { padding: 4px 0 18px 26px; }
  .ih-pasos li::before { top: 2px; left: -16px; }
  .ih-pasos b { margin-top: 0; }
  .ih-panel img { width: 140px; }
}