/* ADLANTE · la academia de ejemplo (Salsa con María) · sale del boceto 11 */
@font-face{font-family:"Archivo Variable";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/ejemplo/letras/archivo.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans Variable";font-style:normal;font-display:swap;font-weight:400 700;src:url(/ejemplo/letras/instrument-sans.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono Variable";font-style:normal;font-display:swap;font-weight:100 800;src:url(/ejemplo/letras/jetbrains-mono.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-display:swap;font-weight:600;src:url(/ejemplo/letras/barlow-condensed-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-display:swap;font-weight:700;src:url(/ejemplo/letras/barlow-condensed-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:700;src:url(/ejemplo/letras/nunito-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:800;src:url(/ejemplo/letras/nunito-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bitter";font-style:normal;font-display:swap;font-weight:600;src:url(/ejemplo/letras/bitter-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bitter";font-style:normal;font-display:swap;font-weight:700;src:url(/ejemplo/letras/bitter-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* =====================================================================
   ADLANTE · la web de una academia · boceto 11
   El esqueleto es de ADLANTE (letras, medidas, radios, cabecera, preguntas,
   el cine, el pie: copiados de src/styles/portada.css, main aa65ef8).
   La piel es de la academia: su color, su letra, su logo y su fondo. Los
   colores del texto no los elige ella: los calcula el motor (motor.js).
   ===================================================================== */
:root {
  --a-claro: #5B52E5;
  --a-oscuro: #8B84FF;
  --letra-titulo: "Archivo Variable", "Helvetica Neue", Arial, sans-serif;
  --letra-texto: "Instrument Sans Variable", "Helvetica Neue", Arial, sans-serif;
  --letra-dir: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ancho: 1280px;
  --margen: clamp(16px, 4vw, 40px);
  --r-pastilla: 999px;
  --r-bloque: 32px;
  --r-tarjeta: 20px;
  --r-campo: 14px;
  --peso-titulo: 320;
  --ver-luna: block;
  --ver-sol: none;
  --alto-foto: clamp(220px, calc(var(--pantalla-alto, 100svh) * 0.36), 380px); /* (30-sep, N133) la pantalla del aparato (colocaciones.css) */
  /* La piel (reserva: María, fondo liso, de día). El motor la recalcula. */
  --academia: #E5484D; --sobre-academia: #0D0C1D; --academia-texto: #BB3D46; --academia-cine: #E85A5F; --fondo: #FFFFFF; --resplandor: #FFFFFF; --velo: #FFFFFF; --superficie: #F7F7F8; --bloque: #FCE9EA; --linea: #E0E0E3; --tinta: #14132B; --suave: #585672; --tenue: #6A6884; --cine-fondo: #1B1115; --cine-superficie: #291F23; --cine-linea: #3B3236; --cine-tinta: #F3F3F5; --cine-suave: #A7A7AF; --cine-borde: transparent; --liso-fondo: #FFFFFF; --liso-superficie: #F7F7F8; --liso-bloque: #FCE9EA; --liso-linea: #E0E0E3; --liso-tinta: #14132B; --liso-suave: #585672; --liso-tenue: #6A6884; --liso-academia: #E5484D; --liso-sobre-academia: #0D0C1D; --liso-academia-texto: #BB3D46; --suave-fondo: #FBE5E6; --suave-superficie: #FDF5F6; --suave-bloque: #F8D2D4; --suave-linea: #DDCACE; --suave-tinta: #14132B; --suave-suave: #585672; --suave-tenue: #5E5C77; --suave-academia: #E5484D; --suave-sobre-academia: #0D0C1D; --suave-academia-texto: #A63843; --color-fondo: #E5484D; --color-superficie: #E85A5F; --color-bloque: #E96569; --color-linea: #A0353E; --color-tinta: #0D0C1D; --color-suave: #201121; --color-tenue: #201121; --color-academia: #0D0C1D; --color-sobre-academia: #E5484D; --color-academia-texto: #0D0C1D; --oscuro-fondo: #1B1115; --oscuro-superficie: #291F23; --oscuro-bloque: #471D21; --oscuro-linea: #3B3236; --oscuro-tinta: #F3F3F5; --oscuro-suave: #A7A7AF; --oscuro-tenue: #A7A7AF; --oscuro-academia: #E5484D; --oscuro-sobre-academia: #0D0C1D; --oscuro-academia-texto: #EA6D71; --blanco-fondo: #FFFFFF; --blanco-superficie: #F7F7F8; --blanco-bloque: #FCE9EA; --blanco-linea: #E0E0E3; --blanco-tinta: #14132B; --blanco-suave: #585672; --blanco-tenue: #6A6884; --blanco-academia: #E5484D; --blanco-sobre-academia: #0D0C1D; --blanco-academia-texto: #BB3D46;
  --letra-academia: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --peso-nombre: 700;
  --peso-seccion: 600;
  --escala-nombre: 1;
  --escala-seccion: 1;
  --espaciado-academia: -0.005em;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --academia: #E5484D; --sobre-academia: #0D0C1D; --academia-texto: #E76065; --academia-cine: #E64F54; --fondo: #0F0E13; --resplandor: #0F0E13; --velo: #0F0E13; --superficie: #1D1C21; --bloque: #3A1A1F; --linea: #333238; --tinta: #F2F1FB; --suave: #ABA8C6; --tenue: #8F8CAD; --cine-fondo: #12090B; --cine-superficie: #20181A; --cine-linea: #332B2D; --cine-tinta: #F3F3F5; --cine-suave: #A7A7AF; --cine-borde: rgba(255, 255, 255, 0.09); --liso-fondo: #0F0E13; --liso-superficie: #1D1C21; --liso-bloque: #3A1A1F; --liso-linea: #333238; --liso-tinta: #F2F1FB; --liso-suave: #ABA8C6; --liso-tenue: #8F8CAD; --liso-academia: #E5484D; --liso-sobre-academia: #0D0C1D; --liso-academia-texto: #E76065; --suave-fondo: #241419; --suave-superficie: #312227; --suave-bloque: #4B1E23; --suave-linea: #45373D; --suave-tinta: #F2F1FB; --suave-suave: #ABA8C6; --suave-tenue: #9794B3; --suave-academia: #E5484D; --suave-sobre-academia: #0D0C1D; --suave-academia-texto: #E9777E; --color-fondo: #65252A; --color-superficie: #5B2126; --color-bloque: #551F23; --color-linea: #966B6E; --color-tinta: #FFFFFF; --color-suave: #E0D3D4; --color-tenue: #E0D3D4; --color-academia: #FFFFFF; --color-sobre-academia: #65252A; --color-academia-texto: #FFFFFF; --oscuro-fondo: #12090B; --oscuro-superficie: #20181A; --oscuro-bloque: #40171A; --oscuro-linea: #332B2D; --oscuro-tinta: #F3F3F5; --oscuro-suave: #A7A7AF; --oscuro-tenue: #A7A7AF; --oscuro-academia: #E5484D; --oscuro-sobre-academia: #0D0C1D; --oscuro-academia-texto: #E96266; --blanco-fondo: #FFFFFF; --blanco-superficie: #F7F7F8; --blanco-bloque: #FCE9EA; --blanco-linea: #E0E0E3; --blanco-tinta: #14132B; --blanco-suave: #585672; --blanco-tenue: #6A6884; --blanco-academia: #E5484D; --blanco-sobre-academia: #0D0C1D; --blanco-academia-texto: #BB3D46; --barra-fondo: #65252A; --barra-tinta: #FFFFFF;
    --peso-titulo: 360; --ver-luna: none; --ver-sol: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --academia: #E5484D; --sobre-academia: #0D0C1D; --academia-texto: #E76065; --academia-cine: #E64F54; --fondo: #0F0E13; --resplandor: #0F0E13; --velo: #0F0E13; --superficie: #1D1C21; --bloque: #3A1A1F; --linea: #333238; --tinta: #F2F1FB; --suave: #ABA8C6; --tenue: #8F8CAD; --cine-fondo: #12090B; --cine-superficie: #20181A; --cine-linea: #332B2D; --cine-tinta: #F3F3F5; --cine-suave: #A7A7AF; --cine-borde: rgba(255, 255, 255, 0.09); --liso-fondo: #0F0E13; --liso-superficie: #1D1C21; --liso-bloque: #3A1A1F; --liso-linea: #333238; --liso-tinta: #F2F1FB; --liso-suave: #ABA8C6; --liso-tenue: #8F8CAD; --liso-academia: #E5484D; --liso-sobre-academia: #0D0C1D; --liso-academia-texto: #E76065; --suave-fondo: #241419; --suave-superficie: #312227; --suave-bloque: #4B1E23; --suave-linea: #45373D; --suave-tinta: #F2F1FB; --suave-suave: #ABA8C6; --suave-tenue: #9794B3; --suave-academia: #E5484D; --suave-sobre-academia: #0D0C1D; --suave-academia-texto: #E9777E; --color-fondo: #65252A; --color-superficie: #5B2126; --color-bloque: #551F23; --color-linea: #966B6E; --color-tinta: #FFFFFF; --color-suave: #E0D3D4; --color-tenue: #E0D3D4; --color-academia: #FFFFFF; --color-sobre-academia: #65252A; --color-academia-texto: #FFFFFF; --oscuro-fondo: #12090B; --oscuro-superficie: #20181A; --oscuro-bloque: #40171A; --oscuro-linea: #332B2D; --oscuro-tinta: #F3F3F5; --oscuro-suave: #A7A7AF; --oscuro-tenue: #A7A7AF; --oscuro-academia: #E5484D; --oscuro-sobre-academia: #0D0C1D; --oscuro-academia-texto: #E96266; --blanco-fondo: #FFFFFF; --blanco-superficie: #F7F7F8; --blanco-bloque: #FCE9EA; --blanco-linea: #E0E0E3; --blanco-tinta: #14132B; --blanco-suave: #585672; --blanco-tenue: #6A6884; --blanco-academia: #E5484D; --blanco-sobre-academia: #0D0C1D; --blanco-academia-texto: #BB3D46; --barra-fondo: #65252A; --barra-tinta: #FFFFFF;
  --peso-titulo: 360; --ver-luna: none; --ver-sol: block;
}

/* ── Base (literal de ADLANTE) ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--fondo);
  background-image: linear-gradient(180deg, var(--resplandor), var(--fondo) min(calc(var(--pantalla-alto, 100svh) * 1.1), 960px));
  color: var(--tinta);
  font: 400 17px/1.55 var(--letra-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
img, svg, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--academia-texto); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--letra-titulo); margin: 0; text-wrap: balance; }
p { margin: 0; }
.envoltura {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: max(var(--margen), env(safe-area-inset-left, 0px)) max(var(--margen), env(safe-area-inset-right, 0px));
}
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--tinta); color: var(--fondo); padding: 10px 16px; border-radius: var(--r-pastilla); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }
section[id] { scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Letra de la academia: su nombre y sus títulos ────────────────── */
.letra-academia { font-family: var(--letra-academia); letter-spacing: var(--espaciado-academia); font-stretch: normal; }
.titulo-seccion {
  font-family: var(--letra-academia);
  font-weight: var(--peso-seccion);
  font-size: calc(clamp(36px, 5.2vw, 68px) * var(--escala-seccion));
  line-height: 1;
  letter-spacing: var(--espaciado-academia);
}
.cabeza-seccion { display: grid; gap: 14px; margin-bottom: clamp(24px, 4vw, 44px); }
.cabeza-seccion p { color: var(--suave); font-size: clamp(18px, 1.6vw, 20px); max-width: 34em; }

/* ── Botones ──────────────────────────────────────────────────────── */
/* (29-sep, tanda del editor, N135) «El tamaño» encoge el botón ENTERO: su
   --tam (lo pone cascada.js) multiplica las letras, el alto, el relleno y el
   hueco. Sin tocar vale 1: la web sale igual, píxel a píxel. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--tam, 1));
  min-height: calc(48px * var(--tam, 1)); background: var(--academia); color: var(--sobre-academia);
  border: 0; border-radius: var(--r-pastilla); padding: calc(12px * var(--tam, 1)) calc(22px * var(--tam, 1));
  font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: transform 0.12s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.boton:hover { filter: brightness(1.06); }
.boton:active { transform: scale(0.97); }
.boton svg { flex: none; }
.boton-borde { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 50%, transparent); }
.boton-borde:hover { filter: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 75%, transparent); }
.boton-pequeno { min-height: calc(40px * var(--tam, 1)); padding: calc(8px * var(--tam, 1)) calc(16px * var(--tam, 1)); font-size: 15px; }
/* Sus iconos (el ▶ de «Ver el vídeo», el sol, el ☰…) crecen y encogen con él:
   toman su --tam y lo aplican a su medida de siempre */
:is(.boton, .entrar, .control-barra, .boton-alumno) > svg { --tam: inherit; }
:is(.boton, .entrar, .control-barra, .boton-alumno) > svg[width="14"] { width: calc(14px * var(--tam, 1)); height: calc(14px * var(--tam, 1)); }
:is(.boton, .entrar, .control-barra, .boton-alumno) > svg[width="17"] { width: calc(17px * var(--tam, 1)); height: calc(17px * var(--tam, 1)); }
:is(.boton, .entrar, .control-barra, .boton-alumno) > svg[width="18"] { width: calc(18px * var(--tam, 1)); height: calc(18px * var(--tam, 1)); }
:is(.boton, .entrar, .control-barra, .boton-alumno) > svg[width="20"] { width: calc(20px * var(--tam, 1)); height: calc(20px * var(--tam, 1)); }
:is(.boton, .entrar, .control-barra, .boton-alumno) > svg[width="22"] { width: calc(22px * var(--tam, 1)); height: calc(22px * var(--tam, 1)); }
/* La zona del dedo (ley 10): aunque el botón se vea pequeño, se toca en 44 × 44
   px como mínimo (lo que piden Apple y Google). Se agranda por dentro, sin que
   se vea */
:is(.boton, .entrar, .control-barra, .boton-alumno) { position: relative; }
:is(.boton, .entrar, .control-barra, .boton-alumno)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.enlace { color: var(--academia-texto); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* En el móvil, si dos botones no caben juntos, cada uno ocupa su línea entera */
@media (max-width: 479px) { .acciones > .boton { flex: 1 1 auto; } }

/* ── 🔘 Elegir una opción: el botón redondo (1-oct, encargo 11, idea 7) ──
   Una pieza para todos los de su web (al pagar: «Cómo lo quieres» y «Cómo
   pagas»; en un intensivo: «Vas como»). Él, al pagar en su iPhone: la única
   opción ya venía elegida, pero su círculo parecía vacío y la intentaba marcar
   sin conseguirlo. El del navegador, pintado con el color de cada academia
   (accent-color), en el iPhone es un anillo grueso con el centro blanco. Este
   lo dibujamos aquí: un aro fino y, al elegirlo, su punto lleno, en el color de
   las letras de la academia (el que se comprueba en cada fondo, de día y de
   noche). Con colores forzados (alto contraste), el del sistema. */
.eleccion { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--suave); border-radius: 50%; background: var(--superficie); color: var(--academia-texto); cursor: pointer; }
.eleccion::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transform: scale(0); }
.eleccion:checked { border-color: currentColor; }
.eleccion:checked::before { transform: scale(1); }
.eleccion:disabled { cursor: default; opacity: 0.6; }
.eleccion:focus-visible { outline: 2px solid var(--academia-texto); outline-offset: 2px; border-radius: 50%; }
@media (forced-colors: active) { .eleccion { appearance: auto; } .eleccion::before { display: none; } }

/* ── Cabecera: la barra de arriba, con su color ───────────────────── */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: var(--academia); color: var(--sobre-academia);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.cabecera > .envoltura :focus-visible, .franja :focus-visible, .pie-academia :focus-visible { outline-color: var(--sobre-academia); }
.menu :focus-visible { outline-color: var(--academia-texto); }
.cabecera > .envoltura { display: flex; align-items: center; gap: 8px; min-height: 60px; }
.marca-academia { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; margin-right: auto; color: inherit; text-decoration: none; padding-block: 8px; }
.logo {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sobre-academia); color: var(--academia);
  font-family: var(--letra-academia); font-weight: var(--peso-nombre); font-size: 19px; line-height: 1;
}
.logo svg { display: block; }
.nombre-marca {
  font-family: var(--letra-academia); font-weight: var(--peso-nombre);
  font-size: calc(23px * var(--escala-nombre)); line-height: 1.02; letter-spacing: var(--espaciado-academia);
  min-width: 0; overflow-wrap: anywhere;
}
.nav-academia { display: none; }
.nav-academia a { color: inherit; text-decoration: none; font-weight: 500; font-size: 16px; padding: 8px 2px; white-space: nowrap; }
.nav-academia a:hover { text-decoration: underline; text-underline-offset: 4px; }
.control-barra {
  flex: none; display: inline-grid; place-items: center; min-width: calc(40px * var(--tam, 1)); height: calc(40px * var(--tam, 1)); padding: 0 calc(11px * var(--tam, 1));
  background: none; color: inherit; border: 1px solid color-mix(in srgb, var(--sobre-academia) 70%, transparent);
  border-radius: var(--r-pastilla); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.control-barra.redondo { padding: 0; width: calc(40px * var(--tam, 1)); }
.icono-luna { display: var(--ver-luna); }
.icono-sol { display: var(--ver-sol); }
.solo-ancho { display: none !important; }
.entrar {
  flex: none; display: inline-flex; align-items: center; min-height: calc(40px * var(--tam, 1)); padding: calc(8px * var(--tam, 1)) calc(16px * var(--tam, 1));
  background: var(--sobre-academia); color: var(--academia); border: 0; border-radius: var(--r-pastilla);
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: transform 0.12s ease;
}
.entrar:active { transform: scale(0.97); }
@media (min-width: 600px) { .solo-ancho { display: inline-grid !important; } }
@media (min-width: 1080px) {
  .nav-academia { display: flex; gap: 22px; margin-inline: 12px 8px; }
  .boton-menu { display: none !important; }
  .cabecera > .envoltura { gap: 10px; }
}
.menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--fondo); color: var(--tinta);
  min-height: calc(100svh - 100%); max-height: calc(100dvh - 100%);
  overflow-y: auto; overscroll-behavior: contain;
}
html:has(.menu:not([hidden])) { overflow: hidden; }
.menu .envoltura { display: grid; gap: 18px; padding-block: 8px 24px; }
.menu-enlaces { list-style: none; margin: 0; padding: 0; }
.menu-enlaces a { display: block; padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 19px; font-weight: 500; text-decoration: none; }
.menu-ajustes { display: grid; gap: 12px; }
.menu-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-fila span { font-weight: 600; font-size: 15px; color: var(--suave); }

/* Selector de dos o más opciones (las «puertas» de ADLANTE) */
.puertas { display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-pastilla); }
.puertas button { border: 0; background: none; border-radius: var(--r-pastilla); padding: 8px 16px; font-weight: 600; font-size: 15px; color: var(--suave); cursor: pointer; white-space: nowrap; }
.puertas button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }

/* ── Portada de la academia ───────────────────────────────────────── */
.portada { position: relative; padding-block: clamp(36px, 7vw, 104px) clamp(44px, 6vw, 96px); }
.portada-rejilla { display: grid; gap: 40px; align-items: center; }
.portada-texto { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.profes-mini { display: flex; align-items: center; gap: 10px; color: var(--academia-texto); font-weight: 600; font-size: 15px; }
.caras { display: flex; }
.caras .retrato-mini + .retrato-mini { margin-left: -6px; }
.portada h1 {
  font-family: var(--letra-academia); font-weight: var(--peso-nombre);
  font-size: calc(clamp(46px, 15.2vw, 140px) * var(--escala-nombre));
  line-height: 0.92; letter-spacing: var(--espaciado-academia);
  max-width: 100%; overflow-wrap: anywhere;
}
.portada .entradilla { font-size: clamp(19px, 1.7vw, 22px); color: var(--suave); max-width: 26em; line-height: 1.45; }
.portada .acciones { margin-top: 6px; }
.cifras { font-size: 15px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.carteles { display: none; }
@media (min-width: 960px) {
  .portada-rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
  .carteles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 36px; }
  .carteles > :nth-child(2n) { transform: translateY(36px); }
}
.proxima-etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pastilla); background: var(--bloque); color: var(--academia-texto); font-size: 14px; font-weight: 600; }
.proxima-etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.redes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 479px) { .redes-bloque { justify-self: stretch; } .redes-lista { flex-direction: column; } .redes-lista .boton { width: 100%; } }

/* ── Las portadillas de los cursos (siempre a oscuras, como el cine) ─ */
.portadilla {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; max-width: 100%;
  background:
    radial-gradient(110% 90% at 12% 10%, color-mix(in srgb, var(--academia) 55%, var(--cine-fondo)) 0%, transparent 60%),
    radial-gradient(90% 90% at 95% 100%, color-mix(in srgb, var(--academia) 32%, var(--cine-superficie)) 0%, transparent 70%),
    var(--cine-fondo);
  color: #FFFFFF;
}
.portadilla.cartel { aspect-ratio: 4 / 5; border-radius: var(--r-tarjeta); }
.portadilla svg.motivo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.motivo .a { fill: color-mix(in srgb, var(--academia) 85%, #FFFFFF); }
.motivo .b { fill: none; stroke: color-mix(in srgb, var(--academia) 70%, #FFFFFF); stroke-width: 2; }
.motivo .c { fill: color-mix(in srgb, var(--academia) 40%, transparent); }
.motivo .d { fill: rgba(255, 255, 255, 0.85); }
.motivo .e { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.5; }
.cartel-titulo {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  font-family: var(--letra-academia); font-weight: var(--peso-nombre);
  font-size: calc(34px * var(--escala-seccion)); line-height: 0.98; letter-spacing: var(--espaciado-academia);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.chip-oscuro {
  position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px;
  border-radius: var(--r-pastilla); background: rgba(12, 12, 14, 0.74); color: #FFFFFF; border: 0;
  font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.chip-oscuro:hover { background: rgba(12, 12, 14, 0.9); }
.chip-oscuro:focus-visible { outline-color: #FFFFFF; }
.chip-arriba { top: 12px; left: 12px; }
.chip-derecha { top: 12px; right: 12px; }

/* ── El cine: el vídeo de presentación (literal de ADLANTE) ───────── */
.sala-cine {
  position: relative; isolation: isolate; overflow: hidden; color-scheme: dark;
  background: var(--cine-fondo); color: var(--cine-tinta);
  border-block: 1px solid var(--cine-borde);
  padding-block: clamp(52px, 8vw, 120px);
}
.sala-cine::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.sala-cine :focus-visible { outline-color: var(--academia-cine); }
.cine-rejilla { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 960px) { .cine-rejilla { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.cine-texto { display: grid; gap: 14px; }
.cine-texto p { color: var(--cine-suave); font-size: clamp(18px, 1.6vw, 20px); max-width: 30em; }
.cine-texto .cine-antetitulo { color: var(--academia-cine); font-weight: 600; font-size: 15px; }
.pantalla { position: relative; display: grid; gap: 12px; min-width: 0; }
.pantalla::before {
  content: ""; position: absolute; inset: -14% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--academia) 30%, transparent), transparent 70%);
}
.reproductor { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--r-tarjeta); overflow: hidden; background: var(--cine-fondo); }
.poster {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 18% 20%, color-mix(in srgb, var(--academia) 70%, var(--cine-fondo)) 0%, transparent 58%),
    radial-gradient(90% 80% at 88% 85%, color-mix(in srgb, var(--academia) 38%, var(--cine-superficie)) 0%, transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55)),
    var(--cine-fondo);
}
.poster-titulo { position: absolute; left: clamp(16px, 3vw, 28px); right: 32%; bottom: clamp(48px, 7vw, 66px); font-family: var(--letra-academia); font-weight: var(--peso-seccion); font-size: calc(clamp(20px, 2.4vw, 32px) * var(--escala-seccion)); line-height: 1.05; letter-spacing: var(--espaciado-academia); color: #FFFFFF; }
@media (max-width: 559px) { .poster-titulo { display: none; } }
.play {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: clamp(58px, 8vw, 84px); aspect-ratio: 1; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--academia); color: var(--sobre-academia);
  cursor: pointer; transition: transform 0.15s ease;
}
.play:active { transform: translate(-50%, -50%) scale(0.95); }
.play .icono-pausa { display: none; }
.reproductor.sonando .play .icono-play { display: none; }
.reproductor.sonando .play .icono-pausa { display: block; }
.barra { position: absolute; left: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); bottom: clamp(28px, 4vw, 36px); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--academia); }
.tiempos { position: absolute; left: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); bottom: 7px; display: flex; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; }
.sello-ejemplo { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: var(--r-pastilla); background: rgba(12, 12, 14, 0.74); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.sin-cuenta { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--cine-suave); }
.sin-cuenta svg { color: var(--academia-cine); flex: none; }

/* ── Secciones y la raya entre ellas (la de ADLANTE, 25-sep) ──────── */
.seccion { padding-block: clamp(48px, 7vw, 104px); }
.seccion + .seccion { padding-top: 0; }
.seccion + .seccion::before {
  content: ""; display: block; max-width: var(--ancho); height: 1px; margin: 0 auto clamp(48px, 7vw, 104px);
  padding-inline: max(var(--margen), env(safe-area-inset-left, 0px)) max(var(--margen), env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--tinta) 14%, transparent); background-clip: content-box;
}

/* ── Cursos ───────────────────────────────────────────────────────── */
.cursos-rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .cursos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1180px) { .cursos-rejilla:not(.dos) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarjeta-curso { display: flex; flex-direction: column; min-width: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); overflow: hidden; }
.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; }
.tarjeta-curso h3 { font-family: var(--letra-academia); font-weight: var(--peso-seccion); font-size: calc(clamp(30px, 2.8vw, 36px) * var(--escala-seccion)); line-height: 1; letter-spacing: var(--espaciado-academia); }
.fila-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; color: var(--suave); font-variant-numeric: tabular-nums; }
.sello-nivel { padding: 3px 10px; border-radius: var(--r-pastilla); background: var(--bloque); color: var(--academia-texto); font-size: 13px; font-weight: 600; }
.tarjeta-curso .descripcion { color: var(--suave); }
.profe { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; font-size: 15px; }
.profe .caras:empty { display: none; }
.profe b { font-weight: 600; }
.profe .idioma-curso { color: var(--tenue); }
.retrato-mini {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bloque); color: var(--academia-texto);
  font-family: var(--letra-academia); font-weight: var(--peso-nombre); font-size: 15px; line-height: 1;
  box-shadow: 0 0 0 2px var(--anillo, var(--fondo));
}
.tarjeta-curso { --anillo: var(--superficie); }
.etiqueta-gratis { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: var(--r-pastilla); background: var(--bloque); color: var(--academia-texto); font-size: 14px; font-weight: 600; line-height: 1.3; }
.etiqueta-gratis svg { flex: none; }
.tarjeta-pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--linea); }
.precio { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.precio-desde { font-size: 13px; color: var(--tenue); font-weight: 600; }
.precio-cifra { font-size: 26px; font-weight: 600; line-height: 1.1; }
.precio-cifra small { font-size: 15px; font-weight: 500; color: var(--suave); }
.precio-entero { font-size: 14px; color: var(--suave); }
.estreno { display: grid; gap: 2px; }
.estreno b { color: var(--academia-texto); font-weight: 600; }
.estreno span { font-size: 14px; color: var(--suave); }
.tarjeta-pie .acciones { width: 100%; }
.nota-compra { margin-top: 18px; font-size: 15px; color: var(--tenue); }

/* ── La franja: su color a lo ancho (las lecciones gratis) ────────── */
.franja { background: var(--academia); color: var(--sobre-academia); padding-block: clamp(44px, 6vw, 88px); transition: background-color 0.4s ease; }
.franja-rejilla { display: grid; gap: 22px; }
@media (min-width: 900px) { .franja-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } }
.franja-texto { display: grid; gap: 14px; justify-items: start; }
.franja-texto p { font-size: 18px; max-width: 30em; }
.franja-lista { list-style: none; margin: 0; padding: 0; }
.franja-lista li { border-top: 1px solid color-mix(in srgb, var(--sobre-academia) 32%, transparent); }
.franja-lista li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--sobre-academia) 32%, transparent); }
.fila-gratis { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 12px 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fila-gratis .circulo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--sobre-academia); color: var(--academia); }
.fila-gratis .texto { display: grid; gap: 2px; min-width: 0; }
.fila-gratis b { font-weight: 600; font-size: 18px; line-height: 1.3; }
.fila-gratis .de { font-size: 15px; }
.fila-gratis .dur { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fila-gratis:hover b { text-decoration: underline; text-underline-offset: 3px; }
.boton-sobre { background: var(--sobre-academia); color: var(--academia); }
.enlace-sobre { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 16px; }

/* ── Quiénes somos y las fichas de profesor ───────────────────────── */
.quienes-rejilla { display: grid; gap: 28px; }
@media (min-width: 960px) { .quienes-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.texto-largo { display: grid; gap: 14px; color: var(--suave); font-size: 18px; max-width: 34em; }
.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ficha { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); }
.retrato {
  width: 88px; aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; overflow: hidden; position: relative;
  background: var(--bloque);
  color: var(--academia-texto); font-family: var(--letra-academia); font-weight: var(--peso-nombre); font-size: 32px; line-height: 1; letter-spacing: 0.01em;
}
.ficha-texto { display: grid; gap: 4px; min-width: 0; }
.ficha h3 { font-family: var(--letra-academia); font-weight: var(--peso-seccion); font-size: calc(27px * var(--escala-seccion)); line-height: 1.05; letter-spacing: var(--espaciado-academia); }
.ficha .especialidad { color: var(--academia-texto); font-size: 14px; font-weight: 600; }
.ficha .frase { color: var(--suave); font-size: 16px; margin-top: 4px; }
/* 👥 (29-sep, cosa 11) Su foto, en su retrato (sin ella, sus iniciales) */
.retrato img { display: block; width: 100%; height: 100%; object-fit: cover; }
.redes-bloque { display: grid; gap: 12px; margin-top: 8px; }
.redes-bloque h2, .redes-bloque h3 { font-family: var(--letra-texto); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.proxima-texto { color: var(--suave); font-size: 18px; max-width: 30em; }

/* ── Galería ──────────────────────────────────────────────────────── */
.galeria-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.galeria-rejilla li { min-width: 0; }
.galeria-rejilla li:nth-child(1), .galeria-rejilla li:nth-child(4) { grid-column: span 2; }
.foto { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #3A2C20; cursor: zoom-in; position: relative; }
.galeria-rejilla li:nth-child(1) .foto, .galeria-rejilla li:nth-child(4) .foto { aspect-ratio: 16 / 9; }
.foto canvas { display: block; width: 100%; height: 100%; }
/* 🖼️ (30-sep, cosa 15) Sus fotos, en vez de las dibujadas: cubren su hueco, como ellas */
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto:focus-visible { outline-offset: 3px; }
@media (min-width: 760px) {
  .galeria-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 19vw, 280px); gap: 12px; }
  .galeria-rejilla li:nth-child(1), .galeria-rejilla li:nth-child(4), .galeria-rejilla li:nth-child(6) { grid-column: span 2; }
  .galeria-rejilla li:nth-child(5) { grid-column: auto; }
  .foto, .galeria-rejilla li .foto { aspect-ratio: auto !important; height: 100%; }
}
.nota-galeria { margin-top: 14px; font-size: 14px; color: var(--tenue); }

/* ── Opiniones ────────────────────────────────────────────────────── */
.nota-recogidas { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--suave); }
.nota-recogidas svg { flex: none; color: var(--academia-texto); }
.opiniones-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 900px) { .opiniones-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.opinion { margin: 0; display: grid; gap: 16px; align-content: start; border-top: 1px solid var(--linea); padding-top: 20px; }
.opinion blockquote { margin: 0; font-size: 19px; line-height: 1.5; }
.opinion figcaption { display: grid; gap: 2px; font-size: 15px; }
.opinion figcaption b { font-weight: 600; }
.opinion figcaption span { color: var(--academia-texto); font-weight: 600; }

/* ── Preguntas frecuentes (literal de ADLANTE) ────────────────────── */
.preguntas { max-width: 860px; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; font-family: var(--letra-texto); font-size: clamp(18px, 1.9vw, 22px); font-weight: 500; line-height: 1.35; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-weight: 300; font-size: 1.3em; line-height: 1; color: var(--suave); }
.preguntas details[open] summary::after { content: "\2212"; }
.preguntas details p { padding: 0 0 22px; color: var(--suave); max-width: 40em; }

/* ── Contacto: cada fila es la acción ─────────────────────────────── */
/* Tocar la fila abre el correo, WhatsApp o el perfil (el enlace la cubre
   entera). El dato se ve siempre como texto, y el correo y el WhatsApp se
   copian con su botón. Con ratón, el dato también se puede seleccionar. */
.contacto-rejilla { display: grid; gap: 24px; }
@media (min-width: 900px) { .contacto-rejilla { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; } }
.contacto-texto { display: grid; gap: 16px; justify-items: start; }
.contacto-texto p:not(.sello-pagina) { color: var(--suave); font-size: 18px; max-width: 30em; }
.sello-pagina { display: inline-flex; padding: 4px 10px; border-radius: var(--r-pastilla); background: var(--superficie); border: 1px solid var(--linea); color: var(--suave); font-size: 13px; font-weight: 600; }
.datos-contacto { list-style: none; margin: 0; padding: 4px 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); }
.contacto-fila { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linea); }
.contacto-fila:first-child { border-top: 0; }
.contacto-fila > svg { color: var(--academia-texto); }
.contacto-fila > .flecha { color: var(--suave); }
.contacto-enlace { position: absolute; inset: 3px -10px; z-index: 0; border-radius: 12px; }
.contacto-enlace:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.contacto-enlace:focus-visible { outline-offset: 0; }
.dato { display: grid; min-width: 0; }
.dato-etiqueta { font-size: 13px; color: var(--tenue); font-weight: 600; }
.dato-valor { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .dato-valor { position: relative; z-index: 1; justify-self: start; cursor: text; -webkit-user-select: text; user-select: text; } }
.copiar { position: relative; z-index: 1; min-height: 36px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--tinta) 50%, transparent); background: var(--superficie); border-radius: var(--r-pastilla); font-size: 14px; font-weight: 600; color: var(--tinta); cursor: pointer; }
.copiar:hover { border-color: color-mix(in srgb, var(--tinta) 75%, transparent); }
@media (max-width: 479px) { .datos-contacto { padding-inline: 14px; } }
/* Si la tarjeta es estrecha, «Copiar» baja debajo del dato para que el dato quepa en su línea */
.datos-contacto { container-type: inline-size; }
@container (max-width: 329px) {
  .contacto-fila { grid-template-columns: 22px minmax(0, 1fr) 16px; row-gap: 8px; }
  .contacto-fila > svg:first-child { grid-row: 1; }
  .contacto-fila > .flecha { grid-column: 3; grid-row: 1; }
  .contacto-fila > .copiar { grid-column: 2; grid-row: 2; justify-self: start; }
  .contacto-fila > span:empty { display: none; }
}

/* ── El pie, con su color ─────────────────────────────────────────── */
.pie-academia { position: relative; z-index: 1; background: var(--academia); color: var(--sobre-academia); padding-block: 44px calc(100px + env(safe-area-inset-bottom, 0px)); transition: background-color 0.4s ease; }
.pie-rejilla { display: grid; gap: 22px; }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; } }
.pie-marca { display: flex; align-items: center; gap: 12px; }
.pie-marca .nombre-marca { font-size: calc(28px * var(--escala-nombre)); }
.pie-redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pie-redes a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; border: 1px solid color-mix(in srgb, var(--sobre-academia) 70%, transparent); }
.pie-redes a:hover { background: color-mix(in srgb, var(--sobre-academia) 12%, transparent); }
.pie-correo { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pie-datos { display: grid; gap: 10px; font-size: 15px; }
/* 🦶 (30-sep, cosa 12) Sus redes y su correo, juntos: en el pie de siempre no se nota (sus cosas
   siguen en su columna); cuando su logo o sus enlaces legales van a su fila, es su bloque */
.pie-medio { display: contents; }
.pie-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* 🦶 (30-sep, cosa 12) «El tamaño» de «Tus enlaces legales» (el grupo) llega a cada uno; el de uno, solo a ese */
.pie-legal > li, .pie-legal > li > :is(button, a) { --tam: inherit; }
.pie-legal button, .pie-legal a { color: inherit; font-weight: 500; font-size: calc(15px * var(--tam, 1)); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pie-seguro { display: inline-flex; align-items: center; gap: 8px; }
.pie-hecho { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--sobre-academia) 32%, transparent); font-size: 14px; }
.hecho-con { display: inline-flex; align-items: baseline; gap: 7px; color: inherit; text-decoration: none; font-weight: 500; padding-block: 6px; }
.hecho-con:hover .marca-adlante { text-decoration: underline; text-underline-offset: 3px; }
.marca-adlante { font-family: var(--letra-titulo); font-size: 16px; line-height: 1; letter-spacing: 0.01em; font-stretch: 125%; }
.marca-adlante b { font-weight: 850; }
.marca-adlante span { font-weight: 300; }

/* ── Con foto o vídeo de fondo ────────────────────────────────────── */
/* La imagen va fija detrás de toda la página. En el móvil y el iPad, cada
   parte es una tarjeta casi opaca (90 %), separada de las demás: la foto y
   el vídeo se ven entre ellas y a los lados, de arriba abajo. En el
   ordenador, una hoja con márgenes. No se difumina lo de detrás: gasta
   batería en el móvil y con el 90 % apenas se nota. */
.capa-imagen { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; background: #3A2C20; }
.capa-imagen canvas { display: block; width: 100%; height: 100%; }
.con-imagen .capa-imagen { display: block; }
.pagina { position: relative; z-index: 1; }
.portada-foto { display: none; height: var(--alto-foto); }
.sello-foto { display: none; position: absolute; top: 14px; right: max(var(--margen), env(safe-area-inset-right, 0px)); gap: 6px; align-items: center; z-index: 2; }
.sello-foto .sello-ejemplo { position: static; }
.pausa-fondo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(12, 12, 14, 0.74); color: #FFFFFF; cursor: pointer; }
.pausa-fondo:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 2px #0C0C0E; }
.con-imagen .portada-foto { display: block; }
.con-imagen .sello-foto { display: flex; }
.con-imagen .carteles { display: none !important; }
.con-imagen .portada { padding-top: 0; padding-bottom: 14px; }
.con-imagen .portada-rejilla { margin-inline: 10px; padding-block: 28px 32px; border-radius: 24px; background: color-mix(in srgb, var(--velo) 90%, transparent); }
.con-imagen .hoja > section { margin: 0 10px 14px; border-radius: 24px; padding-block: clamp(32px, 6vw, 56px); background: color-mix(in srgb, var(--fondo) 90%, transparent); }
.con-imagen .hoja > .franja { background: var(--academia); }
.con-imagen .hoja > .seccion + .seccion::before { display: none; }
.con-imagen .sala-cine { margin: 0 10px 14px; border-radius: 24px; border: 0; background: color-mix(in srgb, var(--cine-fondo) 90%, transparent); }
@media (min-width: 960px) {
  .con-imagen .portada-foto { display: none; }
  .con-imagen .portada {
    padding-block: clamp(88px, 12vw, 176px);
    background: linear-gradient(to right,
      color-mix(in srgb, var(--velo) 88%, transparent) 0,
      color-mix(in srgb, var(--velo) 88%, transparent) 58%,
      color-mix(in srgb, var(--velo) 40%, transparent) 75%,
      color-mix(in srgb, var(--velo) 10%, transparent) 100%);
  }
  .con-imagen .portada-rejilla { margin-inline: auto; padding-block: 0; border-radius: 0; background: none; }
  .con-imagen .hoja, .con-imagen .sala-cine { margin: 0 clamp(16px, 2.5vw, 40px) clamp(16px, 2.5vw, 40px); border-radius: var(--r-bloque); overflow: hidden; }
  .con-imagen .hoja { background: color-mix(in srgb, var(--fondo) 90%, transparent); }
  .con-imagen .hoja > section { margin: 0; border-radius: 0; padding-block: clamp(48px, 7vw, 104px); background: none; }
  .con-imagen .hoja > .franja { background: var(--academia); padding-block: clamp(44px, 6vw, 88px); }
  .con-imagen .hoja > .seccion + .seccion { padding-top: 0; }
  .con-imagen .hoja > .seccion + .seccion::before { display: block; }
}

/* ── Ventanas: la página de un curso, el tráiler y la foto ampliada ── */
html:has(dialog[open]) { overflow: hidden; }
dialog { border: 0; padding: 0; color: var(--tinta); background: var(--fondo); }
dialog::backdrop { background: rgba(10, 10, 12, 0.62); }
.ventana-curso { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; }
@media (min-width: 760px) { .ventana-curso { width: min(760px, calc(100% - 48px)); height: auto; max-height: calc(100% - 64px); margin: auto; border-radius: 24px; } }
.ventana-barra { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: color-mix(in srgb, var(--fondo) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.ventana-barra p { font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cerrar { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); cursor: pointer; }
/* La página de un curso lleva arriba la barra de la academia: su color y su letra */
.ventana-curso .ventana-barra { background: var(--academia); color: var(--sobre-academia); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ventana-curso .ventana-barra :focus-visible { outline-color: var(--sobre-academia); }
.ventana-curso .ventana-barra .cerrar { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--sobre-academia) 70%, transparent); }
/* (29-sep, cosa 19) La «×», 44 × 44 para el dedo (ley 10) sin que se vea distinta: crece su zona, no su círculo */
.cerrar { position: relative; }
.cerrar::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
/* 🔗 «Compartir» (un curso o un producto): el aspecto de su «×», sin colores nuevos */
.compartir { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.ventana-curso .ventana-barra .compartir { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--sobre-academia) 70%, transparent); }
.ventana-barra .compartir + .cerrar { margin-left: 0; }
@media (max-width: 419px) { .compartir { padding: 0; width: 44px; } .compartir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.ventana-barra .marca-ventana { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-ventana .logo { width: 30px; height: 30px; font-size: 17px; }
.marca-ventana .nombre-marca { font-size: calc(21px * var(--escala-nombre)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.ventana-cuerpo { display: grid; gap: 20px; padding: 20px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 760px) { .ventana-cuerpo { padding: 24px 28px 32px; } }
.ventana-cuerpo .portadilla { border-radius: var(--r-tarjeta); }
.ventana-cuerpo h2 { font-family: var(--letra-academia); font-weight: var(--peso-nombre); font-size: calc(clamp(38px, 6vw, 56px) * var(--escala-seccion)); line-height: 0.98; letter-spacing: var(--espaciado-academia); }
.caja-compra { display: grid; gap: 12px; padding: 18px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); }
.caja-compra .fila-precio { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.caja-compra .cifra-grande { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.caja-compra small { display: block; font-size: 14px; color: var(--suave); }
.caja-compra .nota { font-size: 14px; color: var(--tenue); }
.caja-gratis { display: grid; gap: 12px; padding: 18px; background: var(--bloque); border-radius: var(--r-tarjeta); }
.caja-gratis > p:not(.etiqueta-gratis) { color: var(--tinta); }
.temario { display: grid; gap: 0; border-bottom: 1px solid var(--linea); }
.temario h3 { font-family: var(--letra-texto); font-size: 18px; font-weight: 600; padding-bottom: 10px; }
.temario details { border-top: 1px solid var(--linea); }
.temario summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 0; }
.temario summary::-webkit-details-marker { display: none; }
.temario summary b { font-weight: 600; }
.temario summary span { grid-column: 1; font-size: 14px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.temario summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; font-weight: 300; color: var(--suave); }
.temario details[open] summary::after { content: "\2212"; }
.lecciones { list-style: none; margin: 0 0 14px; padding: 0; }
.lecciones li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 15px; }
.lecciones .n, .lecciones .d { color: var(--tenue); font-variant-numeric: tabular-nums; }
.lecciones .t { display: grid; gap: 2px; min-width: 0; }
.lecciones .t small { font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.mini-gratis { justify-self: end; padding: 3px 10px; border-radius: var(--r-pastilla); background: var(--bloque); color: var(--academia-texto); font-size: 13px; font-weight: 600; white-space: nowrap; }
.mini-precio { justify-self: end; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pastilla); border: 1px solid color-mix(in srgb, var(--tinta) 50%, transparent); background: transparent; color: var(--tinta); font-size: 14px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.comprar-modulo { margin-bottom: 16px; }
.ventana-cine { width: min(920px, calc(100% - 24px)); max-width: 100%; margin: auto; background: var(--cine-fondo); color: var(--cine-tinta); border-radius: 22px; color-scheme: dark; }
.ventana-cine .ventana-barra { background: transparent; border-color: var(--cine-linea); }
.ventana-cine .cerrar { background: var(--cine-superficie); border-color: var(--cine-linea); color: var(--cine-tinta); }
.ventana-cine .ventana-cuerpo { gap: 14px; }
.ventana-foto { width: min(1100px, calc(100% - 16px)); max-width: 100%; margin: auto; background: #0C0C0E; color: #F3F3F5; border-radius: 18px; color-scheme: dark; }
.ventana-foto .ventana-barra { background: transparent; border-color: #26262C; }
.ventana-foto .cerrar, .ventana-foto .paso { background: #1A1A1F; border: 1px solid #45454E; color: #F3F3F5; }
.ventana-foto canvas { display: block; width: 100%; height: auto; border-radius: 12px; }
.ventana-foto .foto-grande { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 12px; }
.ventana-foto .ventana-cuerpo { gap: 12px; padding-top: 12px; }
.foto-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.foto-pie p { color: #DADADF; }
.foto-pie .pasos-foto { display: flex; gap: 8px; }
.paso { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.ventana-foto :focus-visible, .ventana-cine :focus-visible { outline-color: #FFFFFF; }

/* ── El panel del boceto (es de ADLANTE, no de la academia) ───────── */
.boceto { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: grid; justify-items: end; gap: 8px; max-width: calc(100vw - 24px); color-scheme: dark; font-family: var(--letra-texto); }
.boceto :focus-visible { outline: 2px solid #F2F1FB; outline-offset: 2px; box-shadow: 0 0 0 2px #0D0C1D; }
.boceto-pastilla { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px 8px 12px; border: 0; border-radius: 999px; background: #14132B; color: #F5F4F9; font: 600 13px/1.2 var(--letra-texto); box-shadow: 0 6px 24px rgba(13, 12, 29, 0.3); cursor: pointer; }
.boceto-pastilla .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--academia); flex: none; }
.boceto-pastilla .resumen { color: #ABA8C6; font-weight: 500; }
/* En el móvil, cerrada, es solo un botón redondo: tapa lo menos posible */
@media (max-width: 479px) {
  .boceto-pastilla { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 3px; }
  .boceto-pastilla .texto-pastilla, .boceto-pastilla .resumen { display: none; }
}
.boceto-pastilla svg { transition: transform 0.2s ease; }
.boceto-pastilla[aria-expanded="true"] svg { transform: rotate(180deg); }
.boceto-hoja { width: min(380px, calc(100vw - 24px)); max-height: min(80vh, 680px); max-height: min(80svh, 680px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: #14132B; color: #F2F1FB; box-shadow: 0 18px 48px rgba(13, 12, 29, 0.4); }
.boceto-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.boceto-dir { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--letra-dir); font-size: 12.5px; color: #ABA8C6; }
.boceto-dir span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boceto-fila { display: grid; gap: 5px; }
.boceto-fila > span { font-size: 12px; font-weight: 600; color: #ABA8C6; letter-spacing: 0.02em; }
.segmentos { display: flex; gap: 3px; padding: 3px; background: #0D0C1D; border: 1px solid #2A2750; border-radius: 999px; }
.segmentos button { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 5px 6px; border: 0; background: none; border-radius: 999px; color: #C9C6DE; font: 600 13.5px/1.15 var(--letra-texto); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segmentos button[aria-pressed="true"] { background: #F2F1FB; color: #0D0C1D; }
.segmentos.ajustado button { flex: 1 1 auto; padding-inline: 8px; }
.segmentos .muestra { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.segmentos [aria-pressed="true"] .muestra { box-shadow: 0 0 0 1.5px rgba(13, 12, 29, 0.6); }
.boceto-mas { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; padding: 6px 14px; border: 1px solid #2A2750; border-radius: 999px; background: none; color: #F2F1FB; font: 600 13.5px/1.2 var(--letra-texto); cursor: pointer; }
.boceto-mas svg { transition: transform 0.2s ease; }
.boceto-mas[aria-expanded="true"] svg { transform: rotate(180deg); }
.boceto-extra { display: grid; gap: 10px; }
.boceto-nota { font-size: 12.5px; line-height: 1.4; color: #ABA8C6; }
.boceto-plegar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #2A2750; background: none; color: #F2F1FB; cursor: pointer; flex: none; }

/* ── Aviso del boceto (lo que no hace de verdad, lo dice) ─────────── */
.aviso-boceto { position: fixed; left: 50%; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 70; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); width: max-content; padding: 10px 16px; border-radius: 14px; background: #14132B; color: #F5F4F9; font-size: 14px; font-weight: 500; box-shadow: 0 8px 28px rgba(13, 12, 29, 0.3); transition: opacity 0.2s ease, transform 0.2s ease; }
.aviso-boceto.visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Lo que en el boceto iba en atributos style="…" ───────────────── */
/* (la política de seguridad de adlante.com no los deja: el pintor pone
   estas clases y los estilos van aquí) */
.sin-margen { margin: 0; }
.dir-pie { font-family: var(--letra-dir); font-size: 13px; }
/* 🔤 (29-sep, 16) Su dirección, partida por el punto (direccion_web.js): a 320 px la
   más larga se salía por el lado */
.dir-partida { overflow-wrap: anywhere; }
.ventana-cuerpo .descripcion, .texto-suave { color: var(--suave); }
.nota-segura { display: flex; gap: 8px; align-items: center; }
.caja-gratis .sobre-superficie { background: var(--superficie); }
.sello-temario { margin: 10px 0 18px; }

/* ── Mientras se pinta la que pide el enlace ──────────────────────── */
/* La página llega ya hecha (la de fábrica). Si el enlace pide otra
   academia, otro estado u otro fondo (#academia=lucia…), primero.js la
   tapa hasta que app.js pinta la que toca: así no se ve un instante la que
   no es. Si el programa no llegara, primero.js la destapa a los 3 s. */
.rehaciendo #cabecera, .rehaciendo #contenido, .rehaciendo #pie { visibility: hidden; }

/* =====================================================================
   🎓 (29-sep) Los cursos de VERDAD (el panel del creador): su portada (una
   foto suya, entera: cada hueco tiene su forma y no se recorta), su cartel
   con su color, lo que incluye, «Sobre este curso» y su tráiler. Los de
   ejemplo no usan nada de esto: su web sale igual. Sin colores nuevos: el
   del cartel lo elige ella (se pone con la hoja del navegador, ley 7).
   ===================================================================== */
.portadilla .portada-real { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: contain; }
.cartel-curso { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 12px; border-radius: var(--r-pastilla); background: var(--cartel, var(--bloque)); color: var(--sobre-cartel, var(--academia-texto)); font-size: 13px; font-weight: 700; line-height: 1.2; }
.cartel-curso > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portadilla .cartel-abajo { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); }
.beneficios-curso, .sobre-curso { display: grid; gap: 12px; }
.beneficios-curso h3, .sobre-curso h3 { font-family: var(--letra-texto); font-size: 18px; font-weight: 600; }
.beneficios-curso ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.beneficios-curso li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.icono-beneficio { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bloque); color: var(--academia-texto); }
.beneficios-curso b { display: block; font-weight: 600; }
.beneficios-curso small { display: block; font-size: 15px; color: var(--suave); }
.sobre-curso .texto-largo { font-size: 17px; max-width: none; }
.sobre-curso .texto-largo > * { margin: 0; }
.sobre-curso .texto-largo :is(h4, h5, h6) { color: var(--tinta); font-family: var(--letra-texto); font-size: 17px; font-weight: 600; }
.sobre-curso .texto-largo :is(ul, ol) { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.sobre-curso .texto-largo blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--linea); }
.sobre-curso .texto-largo a { color: var(--academia-texto); text-underline-offset: 3px; }
.sobre-curso .texto-largo hr { width: 100%; border: 0; border-top: 1px solid var(--linea); }
.sobre-curso .texto-largo strong { color: var(--tinta); font-weight: 600; }
.precio-modulo { margin: -4px 0 14px; font-size: 15px; color: var(--suave); font-variant-numeric: tabular-nums; }
.trailer-real { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-tarjeta); background: var(--cine-fondo); }
.trailer-real.vertical { width: auto; max-width: 100%; height: min(78vh, 720px); aspect-ratio: 9 / 16; margin: 0 auto; }
.caja-compra .boton[disabled] { opacity: 0.62; cursor: default; filter: none; transform: none; }

/* =====================================================================
   ADLANTE · la web de una academia · las opciones de cada pieza (boceto 14)
   Lo que el pintor pone como clases cuando la receta es de ella: el fondo
   de cada sección (esquema-…), su alineación y sus colocaciones (col-…).
   La receta de fábrica no lleva ninguna: sale igual que siempre.
   Doc 18 (el almacén de piezas), apartados 5, 6 y B5.
   ===================================================================== */

/* ── Los fondos de sección ───────────────────────────────────────── */
/* Cada fondo trae resueltos TODOS sus colores (los calcula motor.js,
   esquemas, y los deja en :root como --liso-tinta, --color-fondo…). La
   sección cambia sus variables y todo lo de dentro se repinta solo: el
   texto, los botones, las líneas, las tarjetas y el anillo del teclado. */
:root {
  --raiz-academia: var(--academia); --raiz-sobre: var(--sobre-academia);
  --raiz-cine-fondo: var(--cine-fondo); --raiz-cine-superficie: var(--cine-superficie);
}
.esquema-liso { --fondo: var(--liso-fondo); --superficie: var(--liso-superficie); --bloque: var(--liso-bloque); --linea: var(--liso-linea); --tinta: var(--liso-tinta); --suave: var(--liso-suave); --tenue: var(--liso-tenue); --academia: var(--liso-academia); --sobre-academia: var(--liso-sobre-academia); --academia-texto: var(--liso-academia-texto); }
.esquema-suave { --fondo: var(--suave-fondo); --superficie: var(--suave-superficie); --bloque: var(--suave-bloque); --linea: var(--suave-linea); --tinta: var(--suave-tinta); --suave: var(--suave-suave); --tenue: var(--suave-tenue); --academia: var(--suave-academia); --sobre-academia: var(--suave-sobre-academia); --academia-texto: var(--suave-academia-texto); }
.esquema-color { --fondo: var(--color-fondo); --superficie: var(--color-superficie); --bloque: var(--color-bloque); --linea: var(--color-linea); --tinta: var(--color-tinta); --suave: var(--color-suave); --tenue: var(--color-tenue); --academia: var(--color-academia); --sobre-academia: var(--color-sobre-academia); --academia-texto: var(--color-academia-texto); }
.esquema-oscuro { --fondo: var(--oscuro-fondo); --superficie: var(--oscuro-superficie); --bloque: var(--oscuro-bloque); --linea: var(--oscuro-linea); --tinta: var(--oscuro-tinta); --suave: var(--oscuro-suave); --tenue: var(--oscuro-tenue); --academia: var(--oscuro-academia); --sobre-academia: var(--oscuro-sobre-academia); --academia-texto: var(--oscuro-academia-texto); }
.esquema-blanco { --fondo: var(--blanco-fondo); --superficie: var(--blanco-superficie); --bloque: var(--blanco-bloque); --linea: var(--blanco-linea); --tinta: var(--blanco-tinta); --suave: var(--blanco-suave); --tenue: var(--blanco-tenue); --academia: var(--blanco-academia); --sobre-academia: var(--blanco-sobre-academia); --academia-texto: var(--blanco-academia-texto); }
[class*="esquema-"]:not(.esquema-pagina) { background: var(--fondo); color: var(--tinta); }
.esquema-oscuro, .esquema-color { color-scheme: dark; }
.esquema-blanco, .esquema-liso { color-scheme: normal; }
/* Sobre su color, las tarjetas se pintan como «Liso» (doc 18 · B5) */
.esquema-color :is(.tarjeta-curso, .ficha, .datos-contacto, .opinion-tarjeta) { --fondo: var(--liso-fondo); --superficie: var(--liso-superficie); --bloque: var(--liso-bloque); --linea: var(--liso-linea); --tinta: var(--liso-tinta); --suave: var(--liso-suave); --tenue: var(--liso-tenue); --academia: var(--liso-academia); --sobre-academia: var(--liso-sobre-academia); --academia-texto: var(--liso-academia-texto); color: var(--tinta); }
/* Su segundo color y el degradado (sus ideas del 26 y 27-sep; la 84 y la 86) */
.esquema-color2 { --fondo: var(--color2-fondo); --superficie: var(--color2-superficie); --bloque: var(--color2-bloque); --linea: var(--color2-linea); --tinta: var(--color2-tinta); --suave: var(--color2-suave); --tenue: var(--color2-tenue); --academia: var(--color2-academia); --sobre-academia: var(--color2-sobre-academia); --academia-texto: var(--color2-academia-texto); }
.esquema-degradado { --fondo: var(--degradado-fondo); --superficie: var(--degradado-superficie); --bloque: var(--degradado-bloque); --linea: var(--degradado-linea); --tinta: var(--degradado-tinta); --suave: var(--degradado-suave); --tenue: var(--degradado-tenue); --academia: var(--degradado-academia); --sobre-academia: var(--degradado-sobre-academia); --academia-texto: var(--degradado-academia-texto); }
.esquema-color2, .esquema-degradado, .sala-cine.esquema-color2, .sala-cine.esquema-degradado { color-scheme: dark; }
:is(.esquema-color2, .esquema-degradado) :is(.tarjeta-curso, .ficha, .datos-contacto, .opinion-tarjeta) { --fondo: var(--liso-fondo); --superficie: var(--liso-superficie); --bloque: var(--liso-bloque); --linea: var(--liso-linea); --tinta: var(--liso-tinta); --suave: var(--liso-suave); --tenue: var(--liso-tenue); --academia: var(--liso-academia); --sobre-academia: var(--liso-sobre-academia); --academia-texto: var(--liso-academia-texto); color: var(--tinta); }

/* Una sección con fondo propio es un bloque: su aire arriba y abajo, y sin
   la raya que separa dos secciones sobre la hoja */
.hoja > .seccion.con-fondo, .hoja > .con-fondo + .seccion { padding-top: clamp(48px, 7vw, 104px); }
.hoja > .seccion.con-fondo::before, .hoja > .con-fondo + .seccion::before { display: none; }

/* La franja (lecciones gratis) con otro fondo que el de fábrica */
.franja[class*="esquema-"] { background: var(--fondo); color: var(--tinta); }
.franja.esquema-pagina { background: transparent; }
.franja[class*="esquema-"] .boton-sobre { background: var(--academia); color: var(--sobre-academia); }
.franja[class*="esquema-"] .fila-gratis .circulo { background: var(--academia); color: var(--sobre-academia); }
.franja[class*="esquema-"] .franja-lista li { border-color: var(--linea); }
.franja[class*="esquema-"] :focus-visible { outline-color: var(--academia-texto); }
.con-imagen .hoja > .franja[class*="esquema-"] { background: color-mix(in srgb, var(--fondo) 90%, transparent); }
.con-imagen .hoja > .franja.esquema-color { background: var(--fondo); }

/* El vídeo con otro fondo que la sala a oscuras: la sala toma los colores
   del fondo, y el reproductor sigue a oscuras (es una pantalla) */
.sala-cine[class*="esquema-"]:not(.esquema-oscuro) {
  --cine-fondo: var(--fondo); --cine-tinta: var(--tinta); --cine-suave: var(--suave);
  --academia-cine: var(--academia-texto); --cine-borde: transparent; --cine-linea: var(--linea);
  color-scheme: normal;
}
.sala-cine.esquema-color { color-scheme: dark; }
.sala-cine.esquema-pagina { background: transparent; }
.sala-cine[class*="esquema-"]:not(.esquema-oscuro)::before { display: none; }
.sala-cine[class*="esquema-"]:not(.esquema-oscuro) .pantalla::before { display: none; }
.sala-cine[class*="esquema-"] .reproductor {
  --academia: var(--raiz-academia); --sobre-academia: var(--raiz-sobre);
  --cine-fondo: var(--raiz-cine-fondo); --cine-superficie: var(--raiz-cine-superficie);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.55);
}

/* De noche, con «el mismo criterio»: la barra y el pie, en el tono oscuro de su
   color. Y si ella ha elegido otro color para la barra o para el pie (su idea
   del 27-sep: «que tu color no lo pinte todo»), el suyo, de día y de noche */
.barra-oscura :is(.cabecera, .ventana-curso .ventana-barra), .barra-propia :is(.cabecera, .ventana-curso .ventana-barra) { --academia: var(--barra-fondo); --sobre-academia: var(--barra-tinta); }
.barra-oscura .pie-academia, .pie-propio .pie-academia { --academia: var(--pie-fondo, var(--barra-fondo)); --sobre-academia: var(--pie-tinta, var(--barra-tinta)); }
.barra-oscura .cabecera .menu, .barra-propia .cabecera .menu { --academia: var(--raiz-academia); --sobre-academia: var(--raiz-sobre); }

/* ── La alineación: a la izquierda (de fábrica) o centrada ───────── */
.alinear-centro :is(.cabeza-seccion, .portada-texto, .franja-texto, .cine-texto, .contacto-texto, .libre-texto) { text-align: center; justify-items: center; }
.alinear-centro :is(.cabeza-seccion p, .entradilla, .franja-texto p, .cine-texto p, .contacto-texto p, .texto-largo, .libre-texto p) { margin-inline: auto; }
.alinear-centro :is(.acciones, .profes-mini) { justify-content: center; }
.alinear-centro .texto-largo { text-align: center; }

/* ── Portada ─────────────────────────────────────────────────────── */
/* En el móvil, las fotos de la portada (en el boceto 11 no salían por
   debajo de 960 px): lo decide él en el boceto 14 («Para decidir»): en
   una tira que se desliza, en rejilla de dos o como hoy (no salen). */
@media (max-width: 959px) {
  .fotos-movil-tira .portada[data-seccion] .carteles {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 44%); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * max(var(--margen), env(safe-area-inset-left, 0px)));
    padding-inline: max(var(--margen), env(safe-area-inset-left, 0px)); scroll-padding-inline: max(var(--margen), env(safe-area-inset-left, 0px));
  }
  .fotos-movil-tira .portada[data-seccion] .carteles::-webkit-scrollbar { display: none; }
  .fotos-movil-tira .portada[data-seccion] .carteles > * { scroll-snap-align: start; min-width: 0; }
  .fotos-movil-rejilla .portada[data-seccion] .carteles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  :is(.fotos-movil-tira, .fotos-movil-rejilla) .portada[data-seccion] .cartel-titulo { font-size: calc(24px * var(--escala-seccion)); left: 14px; right: 14px; bottom: 14px; }
}
.foto-cartel { aspect-ratio: 4 / 5; border-radius: var(--r-tarjeta); overflow: hidden; background: #3A2C20; }
.foto-cartel canvas { display: block; width: 100%; height: 100%; }
/* Primero las imágenes (en el móvil, arriba; en el ordenador, a la izquierda) */
.portada.col-orden-imagenes .carteles { order: -1; }
@media (min-width: 960px) {
  .portada.col-orden-imagenes:not(.col-ordenador-apilado) .portada-rejilla { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  /* Una encima de otra: las imágenes, en una fila de cuatro */
  .portada.col-ordenador-apilado .portada-rejilla { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .portada.col-ordenador-apilado .carteles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Las fotos rectas (sin escalonar) */
  .portada.col-fotos-rectas .carteles { padding-bottom: 0; }
  .portada.col-fotos-rectas .carteles > :nth-child(2n) { transform: none; }
}
/* Una foto a lo ancho, con el texto encima y un velo para que se lea */
/* (30-sep, tanda del editor, N133) «La pantalla» es la del aparato: en su web, la de verdad
   (100svh); en el editor, la del aparato que se mira (--pantalla-alto, lo pone editor.js), no la
   del hueco del marco. Así «Probar» mide lo mismo que su móvil */
.portada.col-orden-ancho { isolation: isolate; min-height: clamp(calc(460px * var(--alto-portada, 1)), calc(var(--pantalla-alto, 100svh) * 0.78 * var(--alto-portada, 1)), calc(760px * var(--alto-portada, 1))); display: grid; align-items: end; color: #FFFFFF;
  --tinta: #FFFFFF; --suave: rgba(255, 255, 255, 0.9); --tenue: rgba(255, 255, 255, 0.84); --academia-texto: #FFFFFF; background: #1A1410; }
.portada-ancho { position: absolute; inset: 0; z-index: -1; }
.portada-ancho canvas { display: block; width: 100%; height: 100%; }
.portada-ancho::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 12, 0.88) 0%, rgba(10, 9, 12, 0.6) 45%, rgba(10, 9, 12, 0.18) 100%); }
.portada.col-orden-ancho .retrato-mini { --anillo: rgba(0, 0, 0, 0.45); background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
.portada.col-orden-ancho .boton-borde { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8); }

/* ── Cursos: tarjetas grandes (de fábrica) o lista ────────────────── */
/* En la tableta y el ordenador (desde 720 px), la lista lleva la foto a un lado.
   📱 (30-sep, tanda 2 del editor, cosa 4) Quién elige lista o tarjetas: en el ordenador, «Ordenador»
   (col.vista); en la tableta, lo mismo, salvo si va como el móvil (cosa 14: `tableta-movil` en
   <html>): entonces, lo del móvil (col.movil; sin él, lo del ordenador), con la forma de la tableta
   (la lista, con su foto a un lado). Las MISMAS reglas en los dos: cambia solo quién las elige, y
   con `:where` su peso no sube (de fábrica, la tableta sale igual que siempre, píxel a píxel) */
@media (min-width: 1100px) {
  .col-vista-lista .cursos-rejilla { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .col-vista-lista .tarjeta-curso { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  /* (30-sep, tanda del editor, N137) La foto, con SU forma («La foto»: ancha, cuadrada o
     vertical), arriba y con su margen, como una miniatura: antes se estiraba al alto de la
     fila y su forma se perdía */
  .col-vista-lista .tarjeta-curso .portadilla { aspect-ratio: 16 / 9; margin: 16px 0 16px 16px; border-radius: calc(var(--r-tarjeta) * 0.6); }
  .col-vista-lista.col-tfoto-cuadrada .tarjeta-curso .portadilla { aspect-ratio: 1; }
  .col-vista-lista.col-tfoto-vertical .tarjeta-curso .portadilla { aspect-ratio: 4 / 5; }
  .col-vista-lista .tarjeta-curso .chip-oscuro span:not(.oculto) { display: none; }
  .col-vista-lista .tarjeta-curso .chip-oscuro { padding: 8px; }
  .col-vista-lista .tarjeta-cuerpo { gap: 8px; padding: 14px 16px 16px; }
  .col-vista-lista .tarjeta-curso h3 { font-size: calc(26px * var(--escala-seccion)); }
  .col-vista-lista .tarjeta-curso .etiqueta-gratis { display: none; }
  .col-vista-lista .tarjeta-pie { padding-top: 10px; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .cursos-rejilla { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .tarjeta-curso { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .tarjeta-curso .portadilla { aspect-ratio: 16 / 9; margin: 16px 0 16px 16px; border-radius: calc(var(--r-tarjeta) * 0.6); }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)).col-tfoto-cuadrada .tarjeta-curso .portadilla { aspect-ratio: 1; }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)).col-tfoto-vertical .tarjeta-curso .portadilla { aspect-ratio: 4 / 5; }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .tarjeta-curso .chip-oscuro span:not(.oculto) { display: none; }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .tarjeta-curso .chip-oscuro { padding: 8px; }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .tarjeta-cuerpo { gap: 8px; padding: 14px 16px 16px; }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .tarjeta-curso h3 { font-size: calc(26px * var(--escala-seccion)); }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .tarjeta-curso .etiqueta-gratis { display: none; }
  :is(.col-vista-lista:where(:not(.tableta-movil .col-movil-tarjetas)), :where(.tableta-movil .col-movil-lista)) .tarjeta-pie { padding-top: 10px; }
}
/* En el móvil, la lista compacta de verdad (su queja del 27-sep: la de antes
   era la fila del ordenador apretada): una foto pequeña que conserva su forma,
   el título, una línea de datos y el precio. Sale si la elige para el móvil, o
   si la eligió para el ordenador y en el móvil no ha dicho otra cosa */
@media (max-width: 719px) {
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .cursos-rejilla { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-curso { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-curso .portadilla { width: 92px; aspect-ratio: 16 / 9; align-self: start; margin: 12px 0 12px 12px; border-radius: calc(var(--r-tarjeta) * 0.6); }
  /* (30-sep, N137) «Conserva su forma» de verdad: la de «La foto» (antes, siempre cuadrada) */
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)).col-tfoto-cuadrada .tarjeta-curso .portadilla { aspect-ratio: 1; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)).col-tfoto-vertical .tarjeta-curso .portadilla { aspect-ratio: 4 / 5; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-curso .portadilla .chip-oscuro { display: none; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-cuerpo { gap: 6px; padding: 12px 14px; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-curso h3 { font-size: calc(22px * var(--escala-seccion)); }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-curso :is(.descripcion, .profe, .etiqueta-gratis, .precio-desde, .precio-entero, .estreno span) { display: none; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-curso .fila-datos { font-size: 13px; gap: 4px 8px; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-curso .sello-nivel { padding: 2px 8px; font-size: 12px; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-pie { padding-top: 4px; border-top: 0; align-items: center; gap: 10px; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-pie .precio-cifra { font-size: 18px; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-pie .precio-cifra small { font-size: 13px; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-pie .boton { min-height: 38px; padding: 6px 14px; font-size: 14px; }
  :is(.col-movil-lista, .col-vista-lista:not(.col-movil-tarjetas)) .tarjeta-pie .acciones { width: auto; gap: 8px; }
}

/* ── Lecciones gratis, vídeo, quiénes y contacto: qué va primero, y en
   el ordenador al lado (de fábrica) o una encima de otra ─────────── */
.col-orden-video .pantalla, .col-orden-fichas .fichas { order: -1; }
@media (min-width: 900px) {
  .franja.col-ordenador-apilado .franja-rejilla, .col-ordenador-apilado .contacto-rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (min-width: 960px) {
  .sala-cine.col-ordenador-apilado .cine-rejilla, .col-ordenador-apilado .quienes-rejilla { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sala-cine.col-orden-video:not(.col-ordenador-apilado) .cine-rejilla { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .col-ordenador-apilado .fichas { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* ── Galería: rejilla (de fábrica) o mosaico ──────────────────────── */
.col-vista-mosaico .galeria-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.col-vista-mosaico .galeria-rejilla li:nth-child(n) { grid-column: auto; }
.col-vista-mosaico .galeria-rejilla li:first-child { grid-column: 1 / -1; }
.col-vista-mosaico .galeria-rejilla li .foto { aspect-ratio: 1; height: auto; }
.col-vista-mosaico .galeria-rejilla li:first-child .foto { aspect-ratio: 16 / 9; }
@media (min-width: 760px) {
  .col-vista-mosaico .galeria-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: 10px; }
  .col-vista-mosaico .galeria-rejilla li:first-child { grid-column: span 2; grid-row: span 2; }
  .col-vista-mosaico .galeria-rejilla li .foto, .col-vista-mosaico .galeria-rejilla li:first-child .foto { aspect-ratio: auto !important; height: 100%; }
}

/* ── Opiniones: tarjetas (de fábrica) o una destacada ─────────────── */
.col-vista-destacada .opiniones-lista li:first-child blockquote { font-size: clamp(23px, 2.8vw, 32px); line-height: 1.35; }
@media (min-width: 900px) {
  .col-vista-destacada .opiniones-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-vista-destacada .opiniones-lista li:first-child { grid-column: 1 / -1; max-width: 900px; }
}

/* ── Preguntas: el título arriba (de fábrica) o a un lado ─────────── */
@media (min-width: 900px) {
  [data-pieza="preguntas"].col-vista-lado > .envoltura { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
}

/* ── La pieza libre: texto e imagen (su 81) ───────────────────────── */
.libre-rejilla { display: grid; gap: clamp(22px, 4vw, 48px); align-items: center; }
.libre-texto { display: grid; gap: 14px; justify-items: start; }
.libre-texto p { color: var(--suave); font-size: clamp(18px, 1.6vw, 20px); max-width: 34em; }
.libre-imagen { border-radius: var(--r-tarjeta); overflow: hidden; aspect-ratio: 4 / 3; background: #3A2C20; min-width: 0; }
.libre-imagen canvas { display: block; width: 100%; height: 100%; }
/* 🖼️ (30-sep, cosa 15) Su foto, en vez de la dibujada: cubre su hueco, como ella */
.libre-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.col-orden-imagen .libre-imagen { order: -1; }
@media (min-width: 900px) {
  .libre-receta-texto-imagen:not(.col-ordenador-apilado) .libre-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
}
/* Imagen grande: la foto a lo ancho, con el texto encima y un velo */
.libre-receta-imagen .libre-rejilla {
  position: relative; isolation: isolate; min-height: clamp(320px, 52vw, 560px); align-items: end;
  padding: clamp(22px, 4vw, 48px); border-radius: var(--r-bloque); overflow: hidden; color: #FFFFFF;
  margin-inline: max(var(--margen), env(safe-area-inset-left, 0px)); max-width: calc(var(--ancho) - 2 * var(--margen));
  --tinta: #FFFFFF; --suave: rgba(255, 255, 255, 0.9); --academia-texto: #FFFFFF;
}
@media (min-width: 1360px) { .libre-receta-imagen .libre-rejilla { margin-inline: auto; } }
.libre-receta-imagen .libre-imagen { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; border-radius: 0; order: 0; }
.libre-receta-imagen .libre-imagen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 12, 0.86), rgba(10, 9, 12, 0.2) 70%); }
/* Llamada: un título y un botón grande */
.libre-receta-llamada .libre-rejilla, .libre-receta-llamada .libre-texto { justify-items: center; text-align: center; }
.libre-receta-llamada .libre-texto p { margin-inline: auto; }
.boton-grande { min-height: calc(56px * var(--tam, 1)); padding: calc(14px * var(--tam, 1)) calc(30px * var(--tam, 1)); font-size: 18px; }

/* ── Un botón que sale de su web lleva su marca (su 83) ───────────── */
.fuera-marca { font-size: 0.95em; line-height: 1; margin-left: 2px; }

/* ── La forma: redonda (de fábrica), suave o recta ────────────────── */
/* Cambia a la vez las esquinas de las tarjetas, las fotos y los botones,
   para que no se peleen entre sí (doc 18 · 5a) */
:root[data-forma="suave"] { --r-pastilla: 14px; --r-bloque: 20px; --r-tarjeta: 14px; --r-campo: 10px; }
:root[data-forma="recta"] { --r-pastilla: 3px; --r-bloque: 4px; --r-tarjeta: 3px; --r-campo: 3px; }
:root[data-forma="suave"] :is(.foto, .retrato) { border-radius: 10px; }
:root[data-forma="recta"] :is(.foto, .retrato, .logo, .retrato-mini, .fila-gratis .circulo, .play, .pie-redes a, .cerrar, .paso) { border-radius: 3px; }
:root[data-forma="suave"] :is(.logo, .retrato-mini) { border-radius: 30%; }
:root[data-forma="recta"] .con-imagen .hoja > section, :root[data-forma="recta"] .con-imagen .sala-cine, :root[data-forma="recta"] .con-imagen .portada-rejilla { border-radius: 4px; }

/* ── Los títulos en MAYÚSCULAS o en minúsculas (su idea, 26-sep) ─────
   Solo lo que va con la letra de títulos: su nombre (arriba, en la portada y
   en el pie) y los títulos. Nunca las iniciales ni el texto: todo en
   mayúsculas cuesta leerlo. El aire entre letras lo pone app.js; el de entre
   líneas, aquí: las tildes de las mayúsculas (la Í de MARÍA) suben más y, con
   las líneas tan juntas, chocaban con la línea de arriba. */
:root[data-caja="mayusculas"] :is(.nombre-marca, .portada h1, .titulo-seccion, .cartel-titulo, .poster-titulo, .tarjeta-curso h3, .ficha h3, .ventana-cuerpo h2) { text-transform: uppercase; line-height: 1.08; }
:root[data-caja="minusculas"] :is(.nombre-marca, .portada h1, .titulo-seccion, .cartel-titulo, .poster-titulo, .tarjeta-curso h3, .ficha h3, .ventana-cuerpo h2) { text-transform: lowercase; }

/* ── Las piezas nuevas de la tanda 17 (sus ideas del 26 y 27-sep) ───── */
/* Horarios: una tabla en el ordenador; en el móvil, una tarjeta por clase */
.horario { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.horario th { text-align: left; font-size: 14px; font-weight: 600; color: var(--suave); padding: 0 16px 12px 0; border-bottom: 1px solid var(--linea); }
.horario td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.horario td:first-child { font-weight: 600; color: var(--tinta); }
.horario td:last-child { color: var(--suave); }
@media (max-width: 599px) {
  .horario, .horario tbody { display: block; }
  .horario thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .horario tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: var(--superficie); }
  .horario td { padding: 0; border: 0; }
  .horario td:nth-child(2) { text-align: right; font-weight: 600; color: var(--tinta); }
  .horario td:nth-child(3) { grid-column: 1 / -1; font-size: 17px; }
  .horario td:nth-child(4) { grid-column: 1 / -1; font-size: 15px; }
}

/* 🗓️ (1-oct, tanda 3 del editor, idea 3) Los horarios, con 5 formas (pintor.js: la tabla, por días o
   una clase detrás de otra; cada forma, su estilo). Si el móvil va distinto, cada aparato enseña la suya. */
@media (max-width: 719px) { .horario-forma[data-en="ordenador"] { display: none; } }
@media (min-width: 720px) { .horario-forma[data-en="movil"] { display: none; } }
.horario-plano, .horario-dias ul { list-style: none; margin: 0; padding: 0; }
.horario-hora { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.horario-clase { color: var(--tinta); }
.horario-lugar { color: var(--suave); }
/* Por días (y la semana, en el móvil y la tableta) */
.horario-dias { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: start; }
.horario-dia { padding: 18px 20px; border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: var(--superficie); }
.horario-dia h3 { margin: 0 0 6px; font-size: calc(19px * var(--escala-seccion, 1)); }
.horario-dia li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--linea); }
.horario-dia li:first-child { border-top: 0; }
.horario-dia .horario-lugar { grid-column: 2; font-size: 15px; }
/* 🤝 (5-oct, encargo 14) El programa de un intensivo colaborativo (la misma pieza, por días): quién da
   cada clase y lo que queda, debajo de su nombre. La sección «Horarios» no los lleva: sale igual */
.horario-dia .horario-quien, .horario-dia .horario-quedan { grid-column: 2; font-size: 15px; color: var(--suave); }
.horario-dia .horario-quedan.no { color: var(--tenue); }
/* Una lista compacta: una línea por clase */
.horario-plano li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.horario-cuando { display: inline-flex; gap: 10px; min-width: 9.5em; font-weight: 600; color: var(--tinta); }
.horario-plano .horario-clase { flex: 1 1 12em; }
.horario-plano .horario-lugar { font-size: 15px; }
@media (min-width: 720px) {
  /* Agrupado por días: una fila por día, el día a un lado y sus clases al otro */
  .forma-dias .horario-dias { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .forma-dias .horario-dia { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: none; }
  .forma-dias .horario-dia h3 { margin: 0; }
  .forma-dias .horario-dia ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 24px; }
  .forma-dias .horario-dia li { padding: 0; border-top: 0; }
  /* Una tarjeta por clase */
  .forma-tarjetas .horario-plano { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .forma-tarjetas .horario-plano li { display: grid; align-content: start; gap: 6px; padding: 18px 20px; border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: var(--superficie); }
  .forma-tarjetas .horario-cuando { min-width: 0; font-weight: 500; color: var(--suave); }
  .forma-tarjetas .horario-cuando .horario-hora { color: var(--suave); font-weight: 500; }
  .forma-tarjetas .horario-plano .horario-clase { font-size: calc(20px * var(--escala-seccion, 1)); font-weight: 600; }
}
@media (min-width: 1100px) {
  /* La semana, en columnas: un día al lado de otro */
  .forma-semana .horario-dias { gap: 12px; }
  .forma-semana .dias-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forma-semana .dias-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forma-semana .dias-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .forma-semana .dias-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .forma-semana .dias-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .forma-semana .dias-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .forma-semana .horario-dia { padding: 14px 12px; }
  .forma-semana .horario-dia h3 { padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
  .forma-semana .horario-dia li { grid-template-columns: minmax(0, 1fr); border-top: 0; padding: 8px 0 0; }
  .forma-semana .horario-dia .horario-lugar { grid-column: 1; font-size: 14px; }
}

/* El degradado gana a los fondos lisos de cada pieza (la franja, la sala…):
   va al final y con una clase más, para que ninguna regla de arriba lo pise */
.esquema-degradado[class*="esquema-"]:not(.esquema-pagina) { background: linear-gradient(135deg, var(--degradado-fondo) 0%, var(--degradado-fondo2) 100%); }

/* Su logo (la 87): donde hoy sale su inicial, con tres tamaños con tope, para
   que nunca empuje los botones de la barra. «Con placa»: sobre un fondo blanco
   redondeado, para que se vea sobre cualquier color, de día y de noche */
.logo-imagen { flex: none; display: block; line-height: 0; }
.logo-imagen img { display: block; width: auto; object-fit: contain; }
.logo-imagen.tam-pequeno img { height: 28px; max-width: 110px; }
.logo-imagen.tam-mediano img { height: 34px; max-width: 136px; }
.logo-imagen.tam-grande img { height: 42px; max-width: 170px; }
.pie-marca .logo-imagen.tam-pequeno img { height: 34px; max-width: 140px; }
.pie-marca .logo-imagen.tam-mediano img { height: 44px; max-width: 180px; }
.pie-marca .logo-imagen.tam-grande img { height: 54px; max-width: 220px; }
.logo-imagen.con-placa, .logo-portada.con-placa { background: #FFFFFF; border-radius: 10px; padding: 4px 8px; box-sizing: content-box; }
@media (max-width: 379px) { .cabecera .logo-imagen.tam-grande img { height: 38px; max-width: 140px; } .cabecera .logo-imagen.tam-mediano img { max-width: 120px; } }
.logo-portada-arriba { margin: 0 0 4px; }
.logo-portada { display: block; width: auto; max-width: 100%; object-fit: contain; }
.logo-portada.tam-pequeno { height: 80px; }
.logo-portada.tam-mediano { height: 110px; }
.logo-portada.tam-grande { height: 140px; }
.portada h1.con-logo { line-height: 0; }
.portada h1.con-logo .logo-portada.tam-pequeno { height: 110px; }
.portada h1.con-logo .logo-portada.tam-mediano { height: 150px; }
.portada h1.con-logo .logo-portada.tam-grande { height: 190px; }
.alinear-centro .logo-portada { margin-inline: auto; }

/* Su foto o su vídeo: de fondo de toda la web, o a lo ancho en la portada */
.capa-imagen.con-medio canvas { display: none; }
.capa-imagen .medio-suyo, .portada-ancho img, .portada-ancho video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pausa-medio { position: absolute; top: 14px; right: max(var(--margen), env(safe-area-inset-right, 0px)); z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(12, 12, 14, 0.74); color: #FFFFFF; cursor: pointer; }
/* Con foto o vídeo de fondo en toda la web, la portada «a lo ancho» lleva su
   propia imagen y su velo oscuro: sin la tarjeta clara de encima (su texto es
   blanco). Y si hay dos vídeos, los dos botones de pausa, uno al lado del otro */
.con-imagen .portada.col-orden-ancho { padding-block: clamp(36px, 7vw, 104px) clamp(44px, 6vw, 96px); background: #1A1410; }
.con-imagen .portada.col-orden-ancho .portada-rejilla { margin-inline: auto; padding-block: 0; border-radius: 0; background: none; }
.con-imagen .portada.col-orden-ancho .portada-foto { display: none; }
.con-imagen .pausa-medio { right: calc(max(var(--margen), env(safe-area-inset-right, 0px)) + 44px); }

/* La barra, si se llena: el menú, recogido en su botón (app.js, recogerBarra) */
.cabecera.recogida .nav-academia { display: none; }
.cabecera.recogida .boton-menu { display: inline-grid !important; }

/* 🧭 (30-sep, la tanda del editor, cosa 13) La barra de arriba. Su logo en el centro («Dónde va»,
   cada aparato el suyo: el pintor pone logo-centro-movil…): en el móvil, el botón del menú (☰) a
   la izquierda, su logo en medio y «Entrar» a la derecha; en la tableta, su logo en el centro de
   verdad; en el ordenador, dos filas: su logo arriba, en el centro, y el menú debajo, centrado
   (para que nunca se esconda tras el ☰). Sus colores, nunca. */
@media (max-width: 719px) {
  .logo-centro-movil .boton-menu { order: -1; }
  .logo-centro-movil .marca-academia { flex: 0 1 auto; margin: 0 auto; justify-content: center; }
}
@media (min-width: 600px) and (max-width: 719px) {
  .cabecera > .logo-centro-movil { position: relative; }
  .logo-centro-movil .marca-academia { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 40%; margin: 0; }
  .logo-centro-movil :is(.marca-academia, .nav-academia) + :not(.nav-academia) { margin-left: auto; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .cabecera > .logo-centro-tableta { position: relative; }
  .logo-centro-tableta .boton-menu { order: -1; }
  .logo-centro-tableta .marca-academia { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 40%; margin: 0; justify-content: center; }
  .logo-centro-tableta :is(.marca-academia, .nav-academia) + :not(.nav-academia) { margin-left: auto; }
}
@media (min-width: 1080px) and (max-width: 1099px) {
  .cabecera > .logo-centro-tableta { flex-wrap: wrap; row-gap: 0; }
  .logo-centro-tableta .marca-academia { top: 30px; }
  .logo-centro-tableta .nav-academia { order: 9; flex: 1 0 100%; justify-content: center; margin: 0; padding: 0 0 10px; }
  .logo-centro-tableta :is(.control-barra, .entrar) { margin-block: 10px; }
}
@media (min-width: 1100px) {
  .cabecera > .logo-centro-ordenador { position: relative; flex-wrap: wrap; row-gap: 0; }
  .logo-centro-ordenador .marca-academia { position: absolute; left: 50%; top: 30px; transform: translate(-50%, -50%); max-width: 40%; margin: 0; justify-content: center; }
  .logo-centro-ordenador :is(.marca-academia, .nav-academia) + :not(.nav-academia) { margin-left: auto; }
  .logo-centro-ordenador .nav-academia { order: 9; flex: 1 0 100%; justify-content: center; margin: 0; padding: 0 0 10px; }
  .logo-centro-ordenador :is(.control-barra, .entrar) { margin-block: 10px; }
}
/* Transparente encima de su portada (su «Encima de tu portada»; solo si la página empieza por su
   portada a lo ancho: el pintor pone transparente-movil…). Arriba del todo se ve su foto o su
   vídeo detrás, y el menú va en blanco con una sombra suave encima, para que se lea siempre (ley
   10); al bajar (app.js quita «sobre-portada»), la barra se pone de su color. Su portada pasa por
   debajo (la barra no ocupa sitio: fija arriba, o con la página si no se queda fija), y lo de
   dentro, nunca debajo del menú (--alto-barra, lo mide app.js). Con
   «!important», porque lo decide la página, y gana a lo de su capa (su color, «¿se queda fija?») */
@media (max-width: 719px) {
  .cabecera:has(> .transparente-movil) { position: fixed !important; top: 0; left: 0; right: 0; }
  .cabecera:has(> .transparente-movil.se-va-movil) { position: absolute !important; }
  .cabecera:has(> .transparente-movil) ~ .pagina .portada.col-orden-ancho { padding-top: calc(var(--alto-barra, 60px) + 24px); }
  .cabecera.sobre-portada:has(> .transparente-movil) { background: transparent !important; color: #FFFFFF !important; --sobre-academia: #FFFFFF !important; }
  .cabecera.sobre-portada:has(> .transparente-movil)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 48px); background: linear-gradient(to bottom, rgba(10, 9, 12, 0.62), rgba(10, 9, 12, 0)); pointer-events: none; }
  .cabecera.sobre-portada > .transparente-movil { position: relative; z-index: 1; }
  .cabecera.sobre-portada > .transparente-movil :is(.nav-academia a, .nombre-marca, .control-barra) { color: #FFFFFF !important; }
  .cabecera.sobre-portada > .transparente-movil .entrar { background: #FFFFFF !important; color: #111113 !important; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .cabecera:has(> .transparente-tableta) { position: fixed !important; top: 0; left: 0; right: 0; }
  .cabecera:has(> .transparente-tableta.se-va-tableta) { position: absolute !important; }
  .cabecera:has(> .transparente-tableta) ~ .pagina .portada.col-orden-ancho { padding-top: calc(var(--alto-barra, 60px) + 24px); }
  .cabecera.sobre-portada:has(> .transparente-tableta) { background: transparent !important; color: #FFFFFF !important; --sobre-academia: #FFFFFF !important; }
  .cabecera.sobre-portada:has(> .transparente-tableta)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 48px); background: linear-gradient(to bottom, rgba(10, 9, 12, 0.62), rgba(10, 9, 12, 0)); pointer-events: none; }
  .cabecera.sobre-portada > .transparente-tableta { position: relative; z-index: 1; }
  .cabecera.sobre-portada > .transparente-tableta :is(.nav-academia a, .nombre-marca, .control-barra) { color: #FFFFFF !important; }
  .cabecera.sobre-portada > .transparente-tableta .entrar { background: #FFFFFF !important; color: #111113 !important; }
}
@media (min-width: 1100px) {
  .cabecera:has(> .transparente-ordenador) { position: fixed !important; top: 0; left: 0; right: 0; }
  .cabecera:has(> .transparente-ordenador.se-va-ordenador) { position: absolute !important; }
  .cabecera:has(> .transparente-ordenador) ~ .pagina .portada.col-orden-ancho { padding-top: calc(var(--alto-barra, 60px) + 24px); }
  .cabecera.sobre-portada:has(> .transparente-ordenador) { background: transparent !important; color: #FFFFFF !important; --sobre-academia: #FFFFFF !important; }
  .cabecera.sobre-portada:has(> .transparente-ordenador)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 48px); background: linear-gradient(to bottom, rgba(10, 9, 12, 0.62), rgba(10, 9, 12, 0)); pointer-events: none; }
  .cabecera.sobre-portada > .transparente-ordenador { position: relative; z-index: 1; }
  .cabecera.sobre-portada > .transparente-ordenador :is(.nav-academia a, .nombre-marca, .control-barra) { color: #FFFFFF !important; }
  .cabecera.sobre-portada > .transparente-ordenador .entrar { background: #FFFFFF !important; color: #111113 !important; }
}

/* ══ La tanda del boceto 18 (sus ideas del 27-sep, noche) ═══════════════ */

/* ── Dónde va cada color (la 84 y la 89) ─────────────────────────────
   Los títulos, los subtítulos y los botones, del color que ella elija. Cada
   fondo trae el suyo ya comprobado (motor.js, esquemas): si en un fondo no se
   leyera, ahí va ajustado. Solo se encienden si ella lo ha elegido. */
.esquema-liso { --titulo: var(--liso-titulo); --subtitulo: var(--liso-subtitulo); --boton-fondo: var(--liso-boton-fondo); --boton-tinta: var(--liso-boton-tinta); }
.esquema-suave { --titulo: var(--suave-titulo); --subtitulo: var(--suave-subtitulo); --boton-fondo: var(--suave-boton-fondo); --boton-tinta: var(--suave-boton-tinta); }
.esquema-color { --titulo: var(--color-titulo); --subtitulo: var(--color-subtitulo); --boton-fondo: var(--color-boton-fondo); --boton-tinta: var(--color-boton-tinta); }
.esquema-color2 { --titulo: var(--color2-titulo); --subtitulo: var(--color2-subtitulo); --boton-fondo: var(--color2-boton-fondo); --boton-tinta: var(--color2-boton-tinta); }
.esquema-degradado { --titulo: var(--degradado-titulo); --subtitulo: var(--degradado-subtitulo); --boton-fondo: var(--degradado-boton-fondo); --boton-tinta: var(--degradado-boton-tinta); }
.esquema-oscuro { --titulo: var(--oscuro-titulo); --subtitulo: var(--oscuro-subtitulo); --boton-fondo: var(--oscuro-boton-fondo); --boton-tinta: var(--oscuro-boton-tinta); }
.esquema-blanco { --titulo: var(--blanco-titulo); --subtitulo: var(--blanco-subtitulo); --boton-fondo: var(--blanco-boton-fondo); --boton-tinta: var(--blanco-boton-tinta); }
/* Las tarjetas que van sobre un fondo lleno se pintan como «Liso» (B5): también sus letras y sus botones */
:is(.esquema-color, .esquema-color2, .esquema-degradado) :is(.tarjeta-curso, .ficha, .datos-contacto, .opinion-tarjeta) { --titulo: var(--liso-titulo); --subtitulo: var(--liso-subtitulo); --boton-fondo: var(--liso-boton-fondo); --boton-tinta: var(--liso-boton-tinta); }
/* Sobre una foto con su velo oscuro, las letras van siempre en blanco: se leen */
.portada.col-orden-ancho, .libre-receta-imagen .libre-rejilla { --titulo: #FFFFFF; --subtitulo: #FFFFFF; }
:root.titulos-propios :is(.titulo-seccion, .portada h1) { color: var(--titulo); }
:root.subtitulos-propios :is(.tarjeta-curso h3, .ficha h3) { color: var(--subtitulo); }
:root.botones-propios .boton:not(.boton-borde):not(.boton-sobre) { background: var(--boton-fondo); color: var(--boton-tinta); }

/* ── La tarjeta de cada curso, editable entera (la 94) ───────────────── */
/* Su color: el de la sección (de fábrica) o uno de los fondos, con todos sus colores */
.col-tcolor-liso .tarjeta-curso { --fondo: var(--liso-fondo); --superficie: var(--liso-superficie); --bloque: var(--liso-bloque); --linea: var(--liso-linea); --tinta: var(--liso-tinta); --suave: var(--liso-suave); --tenue: var(--liso-tenue); --academia: var(--liso-academia); --sobre-academia: var(--liso-sobre-academia); --academia-texto: var(--liso-academia-texto); --titulo: var(--liso-titulo); --subtitulo: var(--liso-subtitulo); --boton-fondo: var(--liso-boton-fondo); --boton-tinta: var(--liso-boton-tinta); }
.col-tcolor-blanco .tarjeta-curso { --fondo: var(--blanco-fondo); --superficie: var(--blanco-superficie); --bloque: var(--blanco-bloque); --linea: var(--blanco-linea); --tinta: var(--blanco-tinta); --suave: var(--blanco-suave); --tenue: var(--blanco-tenue); --academia: var(--blanco-academia); --sobre-academia: var(--blanco-sobre-academia); --academia-texto: var(--blanco-academia-texto); --titulo: var(--blanco-titulo); --subtitulo: var(--blanco-subtitulo); --boton-fondo: var(--blanco-boton-fondo); --boton-tinta: var(--blanco-boton-tinta); color-scheme: light; }
.col-tcolor-suave .tarjeta-curso { --fondo: var(--suave-fondo); --superficie: var(--suave-superficie); --bloque: var(--suave-bloque); --linea: var(--suave-linea); --tinta: var(--suave-tinta); --suave: var(--suave-suave); --tenue: var(--suave-tenue); --academia: var(--suave-academia); --sobre-academia: var(--suave-sobre-academia); --academia-texto: var(--suave-academia-texto); --titulo: var(--suave-titulo); --subtitulo: var(--suave-subtitulo); --boton-fondo: var(--suave-boton-fondo); --boton-tinta: var(--suave-boton-tinta); }
.col-tcolor-color .tarjeta-curso { --fondo: var(--color-fondo); --superficie: var(--color-superficie); --bloque: var(--color-bloque); --linea: var(--color-linea); --tinta: var(--color-tinta); --suave: var(--color-suave); --tenue: var(--color-tenue); --academia: var(--color-academia); --sobre-academia: var(--color-sobre-academia); --academia-texto: var(--color-academia-texto); --titulo: var(--color-titulo); --subtitulo: var(--color-subtitulo); --boton-fondo: var(--color-boton-fondo); --boton-tinta: var(--color-boton-tinta); }
.col-tcolor-color2 .tarjeta-curso { --fondo: var(--color2-fondo); --superficie: var(--color2-superficie); --bloque: var(--color2-bloque); --linea: var(--color2-linea); --tinta: var(--color2-tinta); --suave: var(--color2-suave); --tenue: var(--color2-tenue); --academia: var(--color2-academia); --sobre-academia: var(--color2-sobre-academia); --academia-texto: var(--color2-academia-texto); --titulo: var(--color2-titulo); --subtitulo: var(--color2-subtitulo); --boton-fondo: var(--color2-boton-fondo); --boton-tinta: var(--color2-boton-tinta); }
.col-tcolor-oscuro .tarjeta-curso { --fondo: var(--oscuro-fondo); --superficie: var(--oscuro-superficie); --bloque: var(--oscuro-bloque); --linea: var(--oscuro-linea); --tinta: var(--oscuro-tinta); --suave: var(--oscuro-suave); --tenue: var(--oscuro-tenue); --academia: var(--oscuro-academia); --sobre-academia: var(--oscuro-sobre-academia); --academia-texto: var(--oscuro-academia-texto); --titulo: var(--oscuro-titulo); --subtitulo: var(--oscuro-subtitulo); --boton-fondo: var(--oscuro-boton-fondo); --boton-tinta: var(--oscuro-boton-tinta); color-scheme: dark; }
[class*="col-tcolor-"] .tarjeta-curso { background: var(--fondo); color: var(--tinta); border-color: var(--linea); --anillo: var(--fondo); }
.col-tcolor-color .tarjeta-curso, .col-tcolor-color2 .tarjeta-curso { color-scheme: dark; }
/* La foto: ancha (de fábrica), cuadrada o vertical */
.col-tfoto-cuadrada .tarjeta-curso .portadilla { aspect-ratio: 1; }
.col-tfoto-vertical .tarjeta-curso .portadilla { aspect-ratio: 4 / 5; }
/* El marco: con borde (de fábrica), con sombra o sin marco */
.col-tmarco-sombra .tarjeta-curso { border-color: transparent; box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.08); }
.col-tmarco-sin .tarjeta-curso { border-color: transparent; box-shadow: none; }
.col-tmarco-sin:not([class*="col-tcolor-"]) .tarjeta-curso { background: transparent; overflow: visible; }
.col-tmarco-sin:not([class*="col-tcolor-"]) .tarjeta-cuerpo { padding-inline: 0; }
.col-tmarco-sin:not([class*="col-tcolor-"]) .tarjeta-curso .portadilla { border-radius: var(--r-tarjeta); }
/* Qué datos salen: lo apagado no se pinta (pintor.js). Sin profesores, el idioma ocupa la fila */
.col-dprofes-no .tarjeta-curso .profe { grid-template-columns: minmax(0, 1fr); }
/* Sin precio, el botón va a la derecha, como con él */
.col-dprecio-no .tarjeta-curso .tarjeta-pie { justify-content: flex-end; }

/* ── Cada aparato por separado (la 88) ───────────────────────────────── */
/* En el móvil (y en la tableta de pie), qué va primero, aparte del ordenador */
@media (max-width: 959px) {
  .portada.col-movil-texto .carteles { order: 0; }
  .portada.col-movil-imagenes .carteles { order: -1; }
  .sala-cine.col-movil-texto .pantalla { order: 0; }
  .sala-cine.col-movil-video .pantalla { order: -1; }
  [data-pieza="quienes"].col-movil-texto .fichas { order: 0; }
  [data-pieza="quienes"].col-movil-fichas .fichas { order: -1; }
}
@media (max-width: 899px) {
  .libre.col-movil-texto .libre-imagen { order: 0; }
  .libre.col-movil-imagen .libre-imagen { order: -1; }
}
/* 📱 (30-sep, cosa 14) «La tableta, como el móvil» (tableta-movil, en <html>): qué va primero, como en
   el móvil también en la tableta tumbada (las columnas las sigue poniendo el ancho) */
@media (min-width: 960px) and (max-width: 1099px) {
  .tableta-movil .portada.col-movil-texto .carteles { order: 0; }
  .tableta-movil .portada.col-movil-imagenes .carteles { order: -1; }
  .tableta-movil .sala-cine.col-movil-texto .pantalla { order: 0; }
  .tableta-movil .sala-cine.col-movil-video .pantalla { order: -1; }
  .tableta-movil [data-pieza="quienes"].col-movil-texto .fichas { order: 0; }
  .tableta-movil [data-pieza="quienes"].col-movil-fichas .fichas { order: -1; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .tableta-movil .libre.col-movil-texto .libre-imagen { order: 0; }
  .tableta-movil .libre.col-movil-imagen .libre-imagen { order: -1; }
}
/* La galería: en el móvil, rejilla o mosaico, aparte del ordenador */
@media (max-width: 759px) {
  .col-vista-mosaico.col-movil-rejilla .galeria-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .col-vista-mosaico.col-movil-rejilla .galeria-rejilla li:nth-child(n) { grid-column: auto; }
  .col-vista-mosaico.col-movil-rejilla .galeria-rejilla li:nth-child(1), .col-vista-mosaico.col-movil-rejilla .galeria-rejilla li:nth-child(4) { grid-column: span 2; }
  .col-vista-mosaico.col-movil-rejilla .galeria-rejilla li .foto { aspect-ratio: 1; }
  .col-vista-mosaico.col-movil-rejilla .galeria-rejilla li:nth-child(1) .foto, .col-vista-mosaico.col-movil-rejilla .galeria-rejilla li:nth-child(4) .foto { aspect-ratio: 16 / 9; }
  .col-movil-mosaico:not(.col-vista-mosaico) .galeria-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .col-movil-mosaico:not(.col-vista-mosaico) .galeria-rejilla li:nth-child(n) { grid-column: auto; }
  .col-movil-mosaico:not(.col-vista-mosaico) .galeria-rejilla li:first-child { grid-column: 1 / -1; }
  .col-movil-mosaico:not(.col-vista-mosaico) .galeria-rejilla li .foto { aspect-ratio: 1; }
  .col-movil-mosaico:not(.col-vista-mosaico) .galeria-rejilla li:first-child .foto { aspect-ratio: 16 / 9; }
}
/* Sale en: el móvil (hasta 719 px), la tableta (720 a 1.099) y el ordenador
   (desde 1.100). Lo apagado en un aparato no sale en él, ni su enlace del menú
   ni los botones que llevan a ella (el pintor les pone la misma clase) */
@media (max-width: 719px) { .col-enmovil-no { display: none !important; } }
@media (min-width: 720px) and (max-width: 1099px) { .col-entableta-no { display: none !important; } }
@media (min-width: 1100px) { .col-enordenador-no { display: none !important; } }

/* ── Los iconos de sus redes (su idea del 27-sep) ────────────────────── */
/* De fábrica, como los botones («La forma»); o en círculo, cuadrados o sin marco; y más grandes */
:root[data-iconos="circulo"] :is(.pie-redes a, .control-barra.red-barra) { border-radius: 50%; }
:root[data-iconos="cuadrado"] :is(.pie-redes a, .control-barra.red-barra) { border-radius: 4px; }
:root[data-iconos="sin"] :is(.pie-redes a, .control-barra.red-barra) { border-color: transparent; }
:root[data-iconos-tam="grande"] .pie-redes a { width: 54px; height: 54px; }
:root[data-iconos-tam="grande"] .pie-redes a svg { width: 26px; height: 26px; }

/* =====================================================================
   El editor nuevo (28-sep, plan 05): cada capa con lo suyo
   Lo que la hoja de estilos de sus capas (cascada.js) necesita de la base.
   En la web de ejemplo no hay nada de esto: no cambia nada.
   ===================================================================== */
/* Los colores de la página, para volver a ellos dentro de una sección */
:root {
  --raiz-fondo: var(--fondo); --raiz-superficie: var(--superficie); --raiz-bloque: var(--bloque); --raiz-linea: var(--linea);
  --raiz-tinta: var(--tinta); --raiz-suave: var(--suave); --raiz-tenue: var(--tenue); --raiz-academia-texto: var(--academia-texto);
}
/* Un fondo de cualquier color o un degradado: como «Tu color» (sus variables las pone la hoja de sus capas) */
.esquema-lleno { background: var(--fondo); color: var(--tinta); }
.esquema-lleno :is(.tarjeta-curso, .ficha, .datos-contacto, .opinion-tarjeta) { --fondo: var(--liso-fondo); --superficie: var(--liso-superficie); --bloque: var(--liso-bloque); --linea: var(--liso-linea); --tinta: var(--liso-tinta); --suave: var(--liso-suave); --tenue: var(--liso-tenue); --academia: var(--liso-academia); --sobre-academia: var(--liso-sobre-academia); --academia-texto: var(--liso-academia-texto); }
/* Su foto o su vídeo de fondo de una sección, con su velo encima */
[data-seccion] { position: relative; isolation: isolate; }
.fondo-medio { display: none; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fondo-medio :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fondo-medio::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
/* Una foto o un vídeo para cada aparato (la 97): cada uno ve el suyo */
@media (max-width: 719px) { [data-aparatos]:not([data-aparatos~="movil"]) { display: none !important; } }
@media (min-width: 720px) and (max-width: 1099px) { [data-aparatos]:not([data-aparatos~="tableta"]) { display: none !important; } }
@media (min-width: 1100px) { [data-aparatos]:not([data-aparatos~="ordenador"]) { display: none !important; } }
/* Su logo de noche, si lo ha subido: de día uno, de noche el otro */
.logo-noche { display: none !important; }
:root[data-theme="dark"] .logo-dia { display: none !important; }
:root[data-theme="dark"] .logo-noche { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-dia { display: none !important; }
  :root:not([data-theme="light"]) .logo-noche { display: block !important; }
}
/* El tamaño de cada texto (su «Tamaño», como en Word): los que no llevan uno
   propio lo toman de su sitio. (29-sep, N135) También «Los derechos» del pie:
   guardaba su tamaño y no lo usaba (lo vigila el guardián: el_tamano.mjs) */
:is(.pie-correo, .pie-seguro, .hecho-con, [data-parte="derechos"]) { font-size: calc(1em * var(--tam, 1)); }

/* (28-sep, noche) Su foto o su vídeo de portada en el hueco de la imagen, sea
   cual sea la colocación (no solo «a lo ancho») */
.portada-medio-envoltura { position: relative; min-width: 0; }
.portada .carteles.portada-medio-caja, .portada[data-seccion] .carteles.portada-medio-caja { display: block !important; overflow: visible; margin-inline: 0; padding: 0; transform: none; }
.portada-medio-caja :is(img, video, canvas) { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-tarjeta); background: #3A2C20; }
.portada.col-ordenador-apilado .portada-medio-caja :is(img, video, canvas) { aspect-ratio: 16 / 9; }
.portada.col-orden-imagenes .portada-medio-envoltura { order: -1; }
.portada-medio-envoltura .pausa-medio { position: absolute; top: 12px; right: 12px; }
/* Sus cuatro fotos («Tus fotos») */
.foto-cartel img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 🃏 Una sección pintada con contenido de ejemplo (solo en el editor) */
.sello-de-seccion { z-index: 3; max-width: calc(100% - 24px); white-space: normal; }