/* ============================================================
   THE SPANISH FORUM — powered by Tilde Madrid
   Hoja de estilos del prototipo (v3 "Postales de España").
   Un solo archivo compartido por todas las plantillas.
   ============================================================ */

/* ============================================================
   FUENTES — servidas desde nuestro servidor (prototipo/fuentes/), no desde Google:
   Fraunces (títulos), Inter (texto) y Space Grotesk (etiquetas). Solo latin y latin-ext.
   ============================================================ */
/* Fraunces italic 400 · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/fraunces-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces italic 400 · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/fraunces-italic-latin.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;
}
/* Fraunces italic 700 · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/fraunces-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces italic 700 · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/fraunces-italic-latin.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;
}
/* Fraunces normal 400 · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/fraunces-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal 400 · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/fraunces-latin.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;
}
/* Fraunces normal 600 · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/fraunces-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal 600 · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/fraunces-latin.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;
}
/* Fraunces normal 700 · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/fraunces-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal 700 · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/fraunces-latin.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;
}
/* Fraunces normal 900 · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fuentes/fraunces-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal 900 · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fuentes/fraunces-latin.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;
}
/* Inter normal 400 · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 400 · latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/inter-latin.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;
}
/* Inter normal 500 · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 500 · latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/inter-latin.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;
}
/* Inter normal 600 · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter normal 600 · latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/inter-latin.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;
}
/* Space Grotesk normal 500 · latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk normal 500 · latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/space-grotesk-latin.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;
}
/* Space Grotesk normal 700 · latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk normal 700 · latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/space-grotesk-latin.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;
}

:root {
  /* Escala tipográfica fija: solo estos 10 tamaños (más el logo y los adornos gigantes) */
  --t-2xs: 0.6875rem;   /* 11px */
  --t-xs: 0.75rem;   /* 12px */
  --t-sm: 0.875rem;   /* 14px */
  --t-md: 1rem;   /* 16px */
  --t-base: 1.0625rem;   /* 17px */
  --t-lg: 1.1875rem;   /* 19px */
  --t-xl: 1.5rem;   /* 24px */
  --t-2xl: 1.875rem;   /* 30px */
  --t-3xl: 2.5rem;   /* 40px */
  --t-4xl: 3.375rem;   /* 54px */
  --papel: #FBF5E9;
  --papel-sombra: #F0E5CE;
  --tinta: #26190F;
  --tinta-suave: #6B5D4F;
  --carmin: #C3272E;
  --carmin-oscuro: #8E1B21;
  --azulejo: #2E5E8C;
  --ocre: #E8A93B;
  --atardecer1: #FFD9A0;
  --atardecer2: #FFB37A;
  --atardecer3: #F98B60;
  --blanco: #FFFFFF;

  --a1: #588142; --a2: #3F826B;      /* WCAG AA con texto blanco (antes #7BAE5F y #4C9E82) */
  --b1: #2E5E8C; --b2: #6A5AA8;
  --c1: #C3272E; --c2: #8A2432;

  --tipo-gramatica: #C3272E;
  --tipo-video: #2E5E8C;
  --tipo-imagen: #E8A93B;
  --tipo-test: #6A5AA8;
  --tipo-tips: #3F826B;               /* antes #4C9E82: 3,2:1 con blanco */
  --tipo-noticias: #6B5D4F;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "Space Grotesk", monospace;

  --ancho: 1140px;
  --radio: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; touch-action: manipulation; -webkit-text-size-adjust: 100%; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Solo para lectores de pantalla y buscadores (títulos de listado que no se ven) */
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Títulos con las líneas equilibradas: nada de una palabra o un «(O-» colgando */
h1, h2, h3 { text-wrap: balance; }

img { max-width: 100%; height: auto; display: block; }   /* width/height en el HTML solo reservan el hueco */
button, input, select, textarea { font-family: inherit; }   /* los campos de formulario no heredan la letra por sí solos */
a { color: var(--carmin); }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* Cada bloque ocupa (casi) una pantalla y encaja al hacer scroll */
/* Ritmo vertical uniforme entre bloques (sin huecos de pantalla completa) */
.bloque {
  position: relative;
  overflow: hidden;
  padding: 78px 0;
}
.bloque > .contenedor { position: relative; z-index: 2; width: 100%; }

/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-zoom { opacity: 0; transform: scale(.92); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal-zoom.visible { opacity: 1; transform: scale(1); }
.reveal-1 { transition-delay: .08s; } .reveal-2 { transition-delay: .16s; }
.reveal-3 { transition-delay: .24s; } .reveal-4 { transition-delay: .32s; }
.reveal-5 { transition-delay: .40s; } .reveal-6 { transition-delay: .48s; }
/* En pantallas táctiles todo está visible desde el principio: nada aparece justo cuando se toca */
@media (hover: none) { .reveal, .reveal-zoom { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   CABECERA
   ============================================================ */
.cabecera {
  background: rgba(251, 245, 233, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(38,25,15,.08);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}
/* Barra superior: aquí vive el "brought by Tilde Madrid", separado del logo */
.barra-tilde {
  background: var(--tinta); color: #D8CFC2;
  max-height: 46px; overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
}

/* Cabecera compacta al bajar: libera pantalla sin perder la marca */
.cabecera { transition: box-shadow .25s ease; }
.cabecera.compacta { box-shadow: 0 8px 26px rgba(38,25,15,.13); }
.cabecera.compacta .barra-tilde { max-height: 0; opacity: 0; }
.cabecera.compacta .cabecera-inner { padding-block: 7px; }
.cabecera.compacta .logo-marca { width: 48px; height: 48px; }
.cabecera.compacta .logo-the { font-size: .84rem; }
.cabecera.compacta .logo-forum { font-size: 1.75rem; }
.cabecera.compacta .logo-tilde { max-height: 0; opacity: 0; margin-top: 0; }
.logo-marca, .logo-the, .logo-forum, .cabecera-inner {
  transition: width .25s ease, height .25s ease, font-size .25s ease, padding .25s ease;
}
.logo-tilde { max-height: 62px; overflow: hidden; transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease; }
.barra-tilde-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  padding-block: 7px; text-transform: uppercase;   /* solo arriba y abajo: el margen lateral es el del .contenedor */
}
.barra-tilde a { color: var(--ocre); text-decoration: none; transition: color .15s; }
.barra-tilde a strong { color: var(--blanco); }
@media (hover: hover) { .barra-tilde a:hover { color: var(--blanco); } }
.barra-tilde .barra-lema { opacity: .8; }

.cabecera-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 12px; flex-wrap: nowrap; }

/* Logo: sol-tilde + nombre grande + sello "brought to you by TILDE MADRID" */
.logo { text-decoration: none; color: var(--tinta); display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.logo-marca { width: 62px; height: 62px; flex-shrink: 0; overflow: visible; }

/* ------------------------------------------------------------
   EL SOL — componente reutilizable (cabecera, pie, y donde haga falta).
   Los rayos giran al pasar el ratón por el sol o por su contenedor.
   Basta con poner class="sol" en el <svg> y, si el hover debe activarse
   desde un elemento padre, class="gira-sol" en ese padre.
   ------------------------------------------------------------ */
.sol { flex-shrink: 0; overflow: visible; }
.sol .sol-rayos { transform-origin: 50px 50px; transition: transform .5s ease; }
.sol .sol-centro { transform-origin: 50px 50px; transition: transform .35s ease; }
@media (hover: hover) { .sol:hover .sol-rayos, .gira-sol:hover .sol-rayos { animation: sol-girar 7s linear infinite; } }
@media (hover: hover) { .sol:hover .sol-centro, .gira-sol:hover .sol-centro { transform: scale(1.08); } }
@keyframes sol-girar { to { transform: rotate(360deg); } }

/* Tamaños del sol según dónde aparezca */
.sol-pie { width: 52px; height: 52px; }
.sol-mini { width: 30px; height: 30px; }

.logo-texto { display: flex; flex-direction: column; line-height: 1; }
.logo-the {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--tinta-suave); letter-spacing: .04em;
}
.logo-forum {
  font-family: var(--serif); font-weight: 900; font-size: 2.35rem;
  letter-spacing: .05em; color: var(--tinta); margin-top: 1px;
}
.logo-forum em { font-style: normal; color: var(--carmin); }
/* Respaldo de la escuela, justo bajo el nombre */
/* "brought to you by" + logo de Tilde, en una línea.
   El texto se baja unos píxeles para quedar a la altura de las palabras
   "tilde madrid" (el SVG reserva espacio arriba para la tilde de pincel). */
.logo-tilde {
  display: flex; align-items: center; gap: 10px; margin-top: 5px;
}
.logo-tilde-txt {
  font-family: var(--sans); font-size: .54rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-suave);
  white-space: nowrap; line-height: 1;
  transform: translateY(2px);
}
.logo-tilde img { height: 38px; width: auto; display: block; }

/* keyframes de la tilde del footer */
@keyframes tilde-saludo {
  0%, 88%, 100% { transform: rotate(6deg); }
  92% { transform: rotate(22deg); }
  96% { transform: rotate(-3deg); }
}
.logo-nombre { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; position: relative; display: inline-block; }

.nav { display: flex; gap: 2px; flex-wrap: nowrap; align-items: center; white-space: nowrap; }
.nav > a, .nav-grupo > a {
  text-decoration: none; color: var(--tinta); font-size: var(--t-sm); font-weight: 500;
  padding: 9px 8px; border-radius: 999px; position: relative; display: inline-block;
}
.nav > a:not(.nav-cta)::after, .nav-grupo > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--carmin); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s;
}
.nav-grupo:hover > a::after, .nav a[aria-current="page"]:not(.nav-cta)::after { transform: scaleX(1); }
@media (hover: hover) { .nav > a:not(.nav-cta):hover::after { transform: scaleX(1); } }
.nav .nav-cta { background: var(--carmin); color: var(--blanco); font-weight: 600; margin-left: 8px; transition: background .15s, transform .15s; }
@media (hover: hover) { .nav .nav-cta:hover { background: var(--carmin-oscuro); } }

/* Desplegable "Classroom material" (agrupa como el menú real) */
.nav-grupo { position: relative; }
.caret {
  width: 10px; height: 6px; margin-left: 6px;
  display: inline-block; vertical-align: middle;
  color: var(--carmin);
  transition: transform .22s ease;
}
.nav-grupo:hover .caret, .nav-grupo:focus-within .caret { transform: rotate(180deg); }
.nav-desplegable {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  background: var(--blanco); border-radius: 14px; padding: 8px;
  box-shadow: 0 18px 44px rgba(38,25,15,.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-grupo:hover .nav-desplegable, .nav-grupo:focus-within .nav-desplegable {
  opacity: 1; visibility: visible; transform: none;
}
.nav-desplegable a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--tinta); font-size: var(--t-sm);
  padding: 10px 12px; border-radius: 10px; transition: background .15s;
}
@media (hover: hover) { .nav-desplegable a:hover { background: var(--papel); } }
.nav-desplegable .punto { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ============================================================
   HERO — atardecer sobre Madrid
   ============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--tinta);
}

/* Foto real de Madrid al atardecer (dashboard: campo hero_imagen) */
.hero-foto { position: absolute; inset: 0; z-index: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* Velo: garantiza que el texto se lea sobre cualquier foto.
   Tres capas: oscurecido general + foco central tras el texto + tinte cálido. */
.hero-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(20,13,7,.72) 0%, rgba(20,13,7,.30) 60%, transparent 78%),
    linear-gradient(180deg, rgba(28,18,10,.70) 0%, rgba(28,18,10,.48) 40%, rgba(28,18,10,.86) 100%),
    linear-gradient(120deg, rgba(142,27,33,.30), rgba(232,169,59,.10));
}

/* Caracteres españoles flotando sobre la foto */
.hero-flotantes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-flotantes span {
  position: absolute; font-family: var(--serif); font-weight: 700;
  color: rgba(251, 245, 233, .30);
  text-shadow: 0 2px 12px rgba(38,25,15,.4);
  animation: flotar 12s ease-in-out infinite;
}
.hero-flotantes span:nth-child(1) { left: 7%;  top: 18%; font-size: 3.4rem; animation-delay: 0s; }
.hero-flotantes span:nth-child(2) { left: 16%; top: 58%; font-size: 2.2rem; animation-delay: -3s; color: rgba(232,169,59,.42); }
.hero-flotantes span:nth-child(3) { right: 9%; top: 22%; font-size: 3rem;   animation-delay: -6s; color: rgba(232,169,59,.42); }
.hero-flotantes span:nth-child(4) { right: 18%; top: 62%; font-size: 2.4rem; animation-delay: -9s; }
.hero-flotantes span:nth-child(5) { left: 42%; top: 10%; font-size: 2rem;   animation-delay: -5s; }
.hero-flotantes span:nth-child(6) { right: 38%; top: 74%; font-size: 2.6rem; animation-delay: -7s; color: rgba(232,169,59,.42); }
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-26px) rotate(5deg); }
}

.hero-contenido { position: relative; z-index: 2; max-width: 880px; padding: 0 24px; }

/* Saludo giratorio: ¡Hola! → ¿Qué tal? → ¡Bienvenido!... */
.saludo {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: clamp(3.2rem, 9vw, 6.5rem); line-height: 1.05;
  color: #FF7A6B; height: 1.2em; position: relative; margin-bottom: 10px;
  text-shadow: 0 2px 6px rgba(20,13,7,.85), 0 6px 30px rgba(20,13,7,.7);
}
.saludo span {
  position: absolute; left: 0; right: 0; opacity: 0;
  animation: saludo-rotar 12s infinite;
}
.saludo span:nth-child(1) { animation-delay: 0s; }
.saludo span:nth-child(2) { animation-delay: 3s; color: var(--ocre); }
.saludo span:nth-child(3) { animation-delay: 6s; color: var(--papel); }
.saludo span:nth-child(4) { animation-delay: 9s; color: var(--ocre); }
@keyframes saludo-rotar {
  0%   { opacity: 0; transform: translateY(28px) rotate(-2deg); }
  4%   { opacity: 1; transform: translateY(0) rotate(0); }
  22%  { opacity: 1; transform: translateY(0) rotate(0); }
  27%  { opacity: 0; transform: translateY(-24px) rotate(2deg); }
  100% { opacity: 0; }
}

.hero h1 {
  font-family: var(--serif); font-weight: 600; color: var(--papel);
  font-size: clamp(var(--t-xl), 3.3vw, var(--t-3xl)); line-height: 1.3; letter-spacing: -0.01em;
  text-shadow: 0 2px 5px rgba(20,13,7,.9), 0 4px 22px rgba(20,13,7,.65);
}
.hero h1 em { font-style: normal; color: #FFC960; font-weight: 700; }
/* Marca de la escuela dentro del titular */
.hero h1 .marca-tilde { display: inline-block; white-space: nowrap; }
.hero-sub {
  margin: 16px auto 0; font-size: var(--t-base); color: rgba(251,245,233,.94); max-width: 36em;
  text-shadow: 0 2px 6px rgba(20,13,7,.85);
}
.hero-botones { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Solo dos botones en el hero, ambos con peso propio */
.hero-botones .boton { padding: 15px 34px; font-size: var(--t-base); }
.hero-botones .boton-secundario {
  background: rgba(251,245,233,.96); color: var(--tinta);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), inset 0 0 0 2px rgba(38,25,15,.12);
}
@media (hover: hover) { .hero-botones .boton-secundario:hover { background: var(--blanco); } }

/* Indicador de scroll */
.hero-scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
  color: var(--blanco); font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
  animation: rebote 2.2s ease-in-out infinite;
}
@keyframes rebote { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

.boton {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: 14px 30px; border-radius: 999px; font-size: var(--t-md);
  transition: transform .15s, background .15s, box-shadow .15s;
}
@media (hover: hover) { .boton:hover { transform: scale(1.03); } }
.boton-primario { background: var(--carmin); color: var(--blanco); box-shadow: 0 8px 24px rgba(142,27,33,.35); }
@media (hover: hover) { .boton-primario:hover { background: var(--carmin-oscuro); } }
.boton-secundario { background: rgba(255,255,255,.85); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }

/* ============================================================
   TÍTULOS DE SECCIÓN
   ============================================================ */
.seccion-eyebrow {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--carmin); margin-bottom: 10px;
}
.seccion-eyebrow::before { content: "´ "; font-family: var(--serif); font-weight: 900; }
.bloque h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(var(--t-2xl), 3.4vw, var(--t-3xl)); margin-bottom: 34px; }

/* ============================================================
   BLOQUE NIVELES — escalera
   ============================================================ */
.bloque-niveles { background: var(--blanco); }
.escalera { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: end; }
.peldano {
  border-radius: 16px; padding: 18px 16px; color: var(--blanco);
  text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .25s cubic-bezier(.2,.7,.3,1.4), box-shadow .25s;
  position: relative; overflow: hidden;
}
.peldano::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 45%); }
@media (hover: hover) { .peldano:hover { transform: rotate(-1.5deg) scale(1.05); box-shadow: 0 22px 38px rgba(38,25,15,.25); } }
.peldano.a1 { background: var(--a1); min-height: 120px; }
.peldano.a2 { background: var(--a2); min-height: 148px; }
.peldano.b1 { background: var(--b1); min-height: 176px; }
.peldano.b2 { background: var(--b2); min-height: 204px; }
.peldano.c1 { background: var(--c1); min-height: 232px; }
.peldano.c2 { background: var(--c2); min-height: 260px; }
.peldano .nivel { font-family: var(--mono); font-weight: 700; font-size: var(--t-2xl); }
.peldano .frase { font-size: var(--t-sm); opacity: 0.94; line-height: 1.35; }

/* ============================================================
   BLOQUE FORMATOS — azulejos
   ============================================================ */
.bloque-formatos {
  background:
    radial-gradient(circle at 12px 12px, rgba(46,94,140,.06) 3px, transparent 3px) 0 0 / 44px 44px,
    var(--papel);
}
.formatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.formato {
  border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--tinta);
  background: var(--blanco); box-shadow: 0 6px 20px rgba(38,25,15,.07);
  transition: transform .22s, box-shadow .22s;
  display: flex; flex-direction: column;
}
@media (hover: hover) { .formato:hover { transform: rotate(-.5deg) scale(1.03); box-shadow: 0 22px 44px rgba(38,25,15,.15); } }
/* Cabecera tipo azulejo de cada formato */
.formato-azulejo {
  height: 92px; display: grid; place-items: center; font-size: 2.4rem; color: var(--blanco);
  position: relative; overflow: hidden;
}
.formato-azulejo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 10px 10px, rgba(255,255,255,.18) 3px, transparent 3px) 0 0 / 26px 26px;
}
.formato-azulejo span { transition: transform .3s ease; }
@media (hover: hover) { .formato:hover .formato-azulejo span { transform: scale(1.3) rotate(-8deg); } }
.f-gramatica .formato-azulejo { background: var(--tipo-gramatica); }
.f-video .formato-azulejo { background: var(--tipo-video); }
.f-imagen .formato-azulejo { background: var(--tipo-imagen); }
.f-test .formato-azulejo { background: var(--tipo-test); }
.f-tips .formato-azulejo { background: var(--tipo-tips); }
.f-noticias .formato-azulejo { background: var(--tipo-noticias); }
.formato-cuerpo { padding: 20px 22px 22px; }
.formato h3 { font-family: var(--serif); font-size: var(--t-lg); margin-bottom: 6px; }
.formato p { font-size: var(--t-sm); color: var(--tinta-suave); }
.formato .cuenta { font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-suave); display: block; margin-top: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ============================================================
   ETIQUETAS Y BADGES
   ============================================================ */
.etiqueta {
  display: inline-block; font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--blanco); padding: 4px 11px; border-radius: 999px;
}
.etiqueta.t-gramatica { background: var(--tipo-gramatica); }
.etiqueta.t-video { background: var(--tipo-video); }
.etiqueta.t-imagen { background: var(--tipo-imagen); color: var(--tinta); }
.etiqueta.t-test { background: var(--tipo-test); }
.etiqueta.t-tips { background: var(--tipo-tips); }
.etiqueta.t-noticias { background: var(--tipo-noticias); }

.badge-nivel {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: var(--t-xs); padding: 3px 9px; border-radius: 6px; color: var(--blanco);
}
.badge-nivel.a1 { background: var(--a1); } .badge-nivel.a2 { background: var(--a2); }
.badge-nivel.b1 { background: var(--b1); } .badge-nivel.b2 { background: var(--b2); }
.badge-nivel.c1 { background: var(--c1); } .badge-nivel.c2 { background: var(--c2); }
/* Rango de niveles (B1–B2, B2–C1...), como en Teaching activities del sitio real */
.badge-nivel.rango { background: linear-gradient(100deg, var(--b1), var(--b2)); }

/* ============================================================
   BLOQUE ÚLTIMOS MATERIALES — con imágenes
   ============================================================ */
.bloque-materiales { background: var(--blanco); }
.articulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tarjeta-articulo {
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  text-decoration: none; color: var(--tinta); display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(38,25,15,.09);
  transition: transform .22s, box-shadow .22s;
}
@media (hover: hover) { .tarjeta-articulo:hover { transform: scale(1.025); box-shadow: 0 24px 48px rgba(38,25,15,.16); } }
.tarjeta-media { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--papel-sombra); }
.tarjeta-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) { .tarjeta-articulo:hover .tarjeta-media img { transform: scale(1.08); } }
.tarjeta-cuerpo { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tarjeta-meta { display: flex; gap: 8px; align-items: center; }
.tarjeta-articulo h3 { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.35; }
.tarjeta-pie { margin-top: auto; font-size: var(--t-sm); color: var(--tinta-suave); }

/* ============================================================
   BLOQUE PILAR Y LOLA — polaroids sobre fondo oscuro
   ============================================================ */
.bloque-somos { background: linear-gradient(160deg, #2E2013, #26190F 70%); color: var(--papel); }
.somos { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.somos h2 { color: var(--papel); margin-bottom: 16px; }
.somos p { color: #D8CFC2; margin-bottom: 12px; }
.somos .firma { font-family: var(--serif); font-style: italic; color: var(--ocre); font-size: var(--t-lg); }

.polaroids { position: relative; min-height: 380px; }
.polaroid {
  position: absolute; width: 62%; background: var(--blanco); padding: 12px 12px 44px;
  border-radius: 4px; box-shadow: 0 20px 44px rgba(0,0,0,.45);
  transition: transform .3s ease, z-index 0s;
}
.polaroid img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.polaroid figcaption {
  position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
  font-family: var(--serif); font-style: italic; color: var(--tinta); font-size: var(--t-md);
}
/* Cinta adhesiva */
.polaroid::before {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 90px; height: 26px; background: rgba(232,169,59,.65); border-radius: 2px;
}
.polaroid:nth-child(1) { left: 0; top: 6%; transform: rotate(-6deg); z-index: 1; }
.polaroid:nth-child(2) { right: 0; top: 26%; transform: rotate(5deg); z-index: 2; }
@media (hover: hover) { .polaroid:hover { transform: rotate(0deg) scale(1.06); z-index: 5; } }

/* ============================================================
   BLOQUE TILDE MADRID — billete/postal
   ============================================================ */
.bloque-tilde { background: var(--papel); }
.tilde-postal {
  background: linear-gradient(120deg, var(--carmin) 0%, var(--carmin-oscuro) 100%);
  color: var(--blanco); border-radius: 24px; padding: 56px 60px;
  position: relative; overflow: hidden;
  box-shadow: 0 30px 70px rgba(142,27,33,.35);
}
/* Borde perforado tipo sello postal */
.tilde-postal::after {
  content: ""; position: absolute; inset: 10px; border-radius: 16px;
  border: 2px dashed rgba(255,255,255,.35); pointer-events: none;
}
.tilde-postal::before {
  content: "´"; position: absolute; right: -20px; top: -130px;
  font-family: var(--serif); font-weight: 900; font-size: 24rem;
  color: rgba(255,255,255,.08); pointer-events: none;
}
.tilde-postal .seccion-eyebrow { color: var(--ocre); }
.tilde-postal h2 { color: var(--blanco); margin-bottom: 10px; }
.tilde-postal p { color: #F3D9D9; max-width: 44em; }
.tilde-postal p + p { margin-top: 10px; }
.tilde-cursos { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.tilde-cursos span {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.32);
  padding: 7px 16px; border-radius: 999px; font-size: var(--t-sm);
  transition: background .2s, transform .2s;
}
@media (hover: hover) { .tilde-cursos span:hover { background: rgba(255,255,255,.26); transform: translateY(-3px); } }
.tilde-postal .boton-primario { background: var(--blanco); color: var(--carmin); box-shadow: none; }

/* ============================================================
   PIE
   ============================================================ */
.pie { background: #26190F; color: #D8CFC2; padding: 56px 0 28px; position: relative; overflow: hidden; }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; position: relative; z-index: 1; }
.pie h4 { color: var(--papel); font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.pie a:not(.sendar-firma) { color: #D8CFC2; text-decoration: none; display: block; padding: 3px 0; font-size: var(--t-sm); transition: color .15s, padding-left .15s; }
@media (hover: hover) { .pie a:not(.sendar-firma):hover { color: var(--blanco); padding-left: 5px; } }
/* Marca del pie: el mismo sol, con el mismo giro al pasar el ratón */
.pie-marca {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--papel);
  position: relative; z-index: 1;
}
.pie-marca .pie-nombre {
  font-family: var(--serif); font-weight: 900; font-size: 1.5rem;
  letter-spacing: .04em; line-height: 1;
}
.pie-marca .pie-nombre em { font-style: normal; color: var(--carmin); }
.pie-marca .pie-the {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: .78rem; font-weight: 400; color: #B9AE9E; letter-spacing: .03em;
}
.pie-lema { font-size: var(--t-sm); margin-top: 12px; max-width: 30em; }

.pie-sello { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--t-sm); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.pie-sello strong { color: var(--ocre); }

/* ============================================================
   PLANTILLAS DE ARTÍCULO
   ============================================================ */
.articulo-cabecera { padding: 130px 0 28px; max-width: 800px; margin: 0 auto; position: relative; }
.articulo-cabecera .tarjeta-meta { margin-bottom: 16px; }
.articulo-cabecera h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(var(--t-2xl), 3.5vw, var(--t-3xl)); line-height: 1.18; }
.articulo-datos { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; font-size: var(--t-sm); color: var(--tinta-suave); }
.articulo-datos strong { color: var(--tinta); }

.articulo-cuerpo { max-width: 800px; margin: 0 auto; padding-bottom: 48px; }
.articulo-cuerpo p { margin-bottom: 18px; }
.articulo-cuerpo h2 { font-family: var(--serif); font-size: var(--t-xl); margin: 32px 0 14px; }

.caja-instrucciones {
  background: var(--blanco); border-radius: var(--radio); padding: 24px 28px;
  border-left: 6px solid var(--tipo-test); margin: 24px 0;
  box-shadow: 0 6px 18px rgba(38,25,15,.06);
}
.caja-instrucciones h2 { margin-top: 0; font-size: var(--t-lg); }
.caja-instrucciones ul { padding-left: 20px; }

.embed-form { background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: 0 12px 34px rgba(38,25,15,.1); margin: 28px 0; }
.embed-form iframe { width: 100%; min-height: 720px; border: 0; display: block; }
.embed-form .embed-nota { padding: 12px 20px; font-size: var(--t-sm); color: var(--tinta-suave); border-top: 1px solid var(--papel-sombra); background: var(--papel); }

.embed-video { aspect-ratio: 16/9; border-radius: var(--radio); overflow: hidden; box-shadow: 0 12px 34px rgba(38,25,15,.16); margin: 28px 0; background: var(--tinta); }
.embed-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.puntos-clave { background: var(--blanco); border-radius: var(--radio); padding: 24px 28px; border-left: 6px solid var(--tipo-video); margin: 24px 0; box-shadow: 0 6px 18px rgba(38,25,15,.06); }
.puntos-clave h2 { margin-top: 0; font-size: var(--t-lg); }
.puntos-clave li { margin-bottom: 8px; }

.relacionados { background: var(--papel-sombra); border-radius: var(--radio); padding: 28px; margin-top: 40px; }
.relacionados h2 { font-family: var(--serif); font-size: var(--t-lg); margin-bottom: 16px; }
.relacionados ul { list-style: none; }
.relacionados li { padding: 8px 0; border-bottom: 1px dashed rgba(38,25,15,.15); }
.relacionados li:last-child { border-bottom: 0; }
.relacionados a { text-decoration: none; font-weight: 500; }
@media (hover: hover) { .relacionados a:hover { text-decoration: underline; } }

.articulo-tilde {
  margin-top: 36px; text-align: center; padding: 32px;
  border: 2px dashed var(--carmin); border-radius: var(--radio);
  background: rgba(195,39,46,.03);
}
.articulo-tilde p { color: var(--tinta-suave); margin-bottom: 14px; }

/* Los formatos son 7 según el sitemap: en pantallas anchas, 4 + 3 */
@media (min-width: 901px) {
  .formatos { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   LANDINGS DE CATEGORÍA (una por apartado del sitemap)
   ============================================================ */
.landing-hero {
  padding: 130px 0 64px; color: var(--blanco); position: relative; overflow: hidden;
}
.landing-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 12px 12px, rgba(255,255,255,.1) 3px, transparent 3px) 0 0 / 34px 34px;
  pointer-events: none;
}
.landing-hero .contenedor { position: relative; z-index: 1; }
.landing-hero .seccion-eyebrow { color: rgba(255,255,255,.85); }
.landing-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(var(--t-2xl), 4.2vw, var(--t-4xl)); line-height: 1.12; max-width: 15em; }
.landing-hero .landing-sub { margin-top: 14px; max-width: 38em; color: rgba(255,255,255,.88); font-size: var(--t-base); }
.landing-hero .landing-icono {
  position: absolute; right: 4%; bottom: -30px; font-size: 11rem; opacity: .18;
  transform: rotate(-8deg); pointer-events: none; z-index: 0;
}
.lh-gramatica { background: linear-gradient(130deg, var(--tipo-gramatica), #8E1B21); }
.lh-video { background: linear-gradient(130deg, var(--tipo-video), #1D4166); }
.lh-imagen { background: linear-gradient(130deg, #A36E14, #7E520C); }   /* el blanco se lee (antes ocre claro, 2:1) */
.lh-test { background: linear-gradient(130deg, var(--tipo-test), #4A3D7E); }
.lh-tips { background: linear-gradient(130deg, var(--tipo-tips), #337158); }
.lh-actividades { background: linear-gradient(130deg, #6B5D4F, #4A3E32); }
.lh-noticias { background: linear-gradient(130deg, #6B5D4F, #4A3E32); }

/* Filtros por nivel */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin: -26px 0 34px; position: relative; z-index: 2; }
.filtros a {
  background: var(--blanco); color: var(--tinta); text-decoration: none;
  font-family: var(--mono); font-weight: 700; font-size: var(--t-sm);
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 16px rgba(38,25,15,.12);
  transition: transform .15s, background .15s, color .15s;
}
.filtros a.activo { background: var(--tinta); color: var(--blanco); transform: translateY(-2px); }
@media (hover: hover) { .filtros a:hover { background: var(--tinta); color: var(--blanco); transform: scale(1.05); } }

.landing-lista { padding: 0 0 70px; }

/* Tarjeta sin foto: cabecera de color con inicial grande */
.tarjeta-inicial {
  aspect-ratio: 16/7; display: grid; place-items: center; color: var(--blanco);
  font-family: var(--serif); font-weight: 900; font-size: var(--t-4xl); font-style: italic;
  position: relative; overflow: hidden; text-align: center; line-height: 1.05; padding-inline: 18px;
}
/* Palabra de portada larga (hasta 16 caracteres): el importador añade la clase según la longitud */
.tarjeta-inicial.largo { font-size: var(--t-3xl); }
.tarjeta-inicial.muy-largo { font-size: var(--t-2xl); }
/* Rejilla que mezcla fotos y portadas tipográficas (noticias, portada): misma altura, títulos alineados */
.articulos:has(.tarjeta-media) .tarjeta-inicial { aspect-ratio: 16/10; }
.tarjeta-inicial::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 10px 10px, rgba(255,255,255,.14) 3px, transparent 3px) 0 0 / 28px 28px;
}
.ti-gramatica { background: var(--tipo-gramatica); } .ti-video { background: var(--tipo-video); }
.ti-imagen { background: var(--tipo-imagen); } .ti-test { background: var(--tipo-test); }
.ti-tips { background: var(--tipo-tips); } .ti-actividades { background: #6B5D4F; }
.ti-noticias { background: #6B5D4F; }

/* ============================================================
   COMPONENTES ESPECÍFICOS POR APARTADO
   (cada uno mapea a un tipo de contenido del futuro dashboard)
   ============================================================ */

/* --- Tarjetas de nivel (Grammar y Tests: así se organiza la web real) --- */
.niveles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nivel-card {
  border-radius: var(--radio); color: var(--blanco); padding: 26px;
  text-decoration: none; min-height: 180px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.nivel-card::after {
  content: attr(data-nivel); position: absolute; right: -14px; bottom: -34px;
  font-family: var(--serif); font-weight: 900; font-size: 7.5rem;
  color: rgba(255,255,255,.13); pointer-events: none;
}
@media (hover: hover) { .nivel-card:hover { transform: scale(1.03); box-shadow: 0 20px 40px rgba(38,25,15,.22); } }
.nivel-card .nivel-letra { font-family: var(--mono); font-weight: 700; font-size: var(--t-3xl); line-height: 1; }
.nivel-card .nivel-desc { font-size: var(--t-md); opacity: .95; margin-top: 8px; max-width: 20em; }
.nivel-card .nivel-cuenta { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; margin-top: 16px; opacity: .85; }
.nivel-card.a1 { background: var(--a1); } .nivel-card.a2 { background: var(--a2); }
.nivel-card.b1 { background: var(--b1); } .nivel-card.b2 { background: var(--b2); }
.nivel-card.c1 { background: var(--c1); } .nivel-card.c2 { background: var(--c2); }

/* --- Miniatura de vídeo con botón de play y duración --- */
.video-thumb { position: relative; }
.video-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(38,25,15,.18); transition: background .2s;
}
.video-thumb::after {
  content: "▶"; position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(251,245,233,.92); color: var(--carmin);
  display: grid; place-items: center; font-size: 1.2rem; padding-left: 4px;
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
  transition: transform .2s, background .2s;
}
@media (hover: hover) { .tarjeta-articulo:hover .video-thumb::after { transform: translate(-50%, -50%) scale(1.15); background: var(--blanco); } }
@media (hover: hover) { .tarjeta-articulo:hover .video-thumb::before { background: rgba(38,25,15,.05); } }
.video-duracion {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(38,25,15,.85); color: var(--blanco);
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
}

/* --- Meta con fecha y likes (los posts reales llevan contador) --- */
.meta-post { display: flex; gap: 14px; align-items: center; font-size: var(--t-xs); color: var(--tinta-suave); font-family: var(--mono); }
.meta-post .likes::before { content: "♥ "; color: var(--carmin); }

/* --- Galería Picture learning: la foto es la protagonista --- */
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.foto-card {
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  text-decoration: none; color: var(--tinta);
  box-shadow: 0 8px 24px rgba(38,25,15,.09);
  transition: transform .22s, box-shadow .22s;
}
@media (hover: hover) { .foto-card:hover { transform: scale(1.025); box-shadow: 0 22px 44px rgba(38,25,15,.16); } }
.foto-card .foto-media { aspect-ratio: 16/10; overflow: hidden; }
.foto-card .foto-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) { .foto-card:hover .foto-media img { transform: scale(1.07); } }
.foto-card .foto-cuerpo { padding: 20px 24px 22px; }
.foto-card h3 { font-family: var(--serif); font-size: var(--t-lg); margin-bottom: 6px; }
.foto-card .foto-extracto { font-size: var(--t-md); color: var(--tinta-suave); }
.foto-card .meta-post { margin-top: 12px; }

/* About: la carta de bienvenida de Pilar y Lola, con su contacto */
.carta-autoras {
  max-width: 760px; margin-inline: auto; padding: 34px 40px 28px; border-radius: var(--radio);
  background: var(--blanco); box-shadow: 0 10px 30px rgba(38,25,15,.07), inset 0 0 0 1px rgba(232,169,59,.35);
  font-size: var(--t-base); line-height: 1.75;
}
.carta-autoras p { margin-bottom: 14px; }
.carta-saludo { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: var(--t-xl); color: var(--carmin); line-height: 1.2; }
.carta-firma { font-family: var(--serif); font-style: italic; font-size: var(--t-lg); text-align: right; color: var(--tinta); }
.carta-contacto { margin: 18px 0 0 !important; padding-top: 14px; border-top: 1px dashed rgba(232,169,59,.6); font-size: var(--t-sm); color: var(--tinta-suave); }
@media (max-width: 600px) { .carta-autoras { padding: 26px 22px 22px; } }
/* Portada: acciones del bloque de Tilde */
.tilde-acciones { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tilde-ofertas { color: var(--blanco); font-weight: 600; text-underline-offset: 4px; }
@media (hover: hover) { .tilde-ofertas:hover { color: var(--ocre); } }

/* Cabecera del artículo alineada con la columna de lectura cuando la página lleva índice */
@media (min-width: 901px) {
  .articulo-cabecera:has(~ .articulo-layout:not(.compacto)) { max-width: calc(250px + 48px + 720px + 48px); padding-left: calc(250px + 48px + 24px); padding-right: 24px; }
  .articulo-cabecera:has(~ .articulo-layout.compacto) { max-width: calc(760px + 48px); padding-inline: 24px; }
}

/* Vídeos: el texto de las autoras, tal cual, bajo el vídeo */
.video-nota { margin-top: 18px; padding: 16px 22px; background: var(--blanco); border-left: 4px solid var(--tipo-video);
              border-radius: 0 14px 14px 0; box-shadow: 0 4px 14px rgba(38,25,15,.05); font-size: var(--t-md); }
.video-nota p:last-child { margin-bottom: 0; }

/* --- Tips: un punto de partida y una lista tranquila ---
   Antes eran notas adhesivas (inclinadas, con cinta y tres colores): distraían.
   Ahora manda el texto: título, dos líneas, pie. El verde de Tips solo como acento. */
.nota-destacada {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 34px; align-items: center;
  padding: 34px 40px; border-radius: var(--radio); text-decoration: none; color: var(--tinta);
  background: linear-gradient(135deg, #F1F8F4 0%, var(--blanco) 70%);
  box-shadow: 0 10px 30px rgba(38,25,15,.08), inset 0 0 0 1px rgba(76,158,130,.18);
  transition: transform .25s, box-shadow .25s;
}
@media (hover: hover) { .nota-destacada:hover { transform: scale(1.015); box-shadow: 0 18px 40px rgba(38,25,15,.12), inset 0 0 0 1px rgba(76,158,130,.35); } }
.nd-marca { font-family: var(--serif); font-style: italic; font-weight: 900; font-size: 5.4rem; line-height: 1; color: var(--tipo-tips); opacity: .9; }
.nd-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.nd-eyebrow { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--tipo-tips); font-weight: 700; }
.nd-eyebrow .likes::before { content: "♥ "; color: var(--carmin); }
.nd-titulo { font-family: var(--serif); font-weight: 600; font-size: clamp(var(--t-xl), 2.6vw, var(--t-2xl)); line-height: 1.2; text-wrap: balance; }
.nd-extracto { color: var(--tinta-suave); font-size: var(--t-md); max-width: 46em; }
.nd-cta { font-weight: 600; color: var(--tipo-tips); margin-top: 4px; }
.nd-cta span { display: inline-block; transition: transform .2s; }
@media (hover: hover) { .nota-destacada:hover .nd-cta span { transform: translateX(5px); } }

.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nota {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 24px 20px; border-radius: 16px; text-decoration: none; color: var(--tinta);
  background: var(--blanco); box-shadow: 0 4px 16px rgba(38,25,15,.06), inset 0 0 0 1px rgba(38,25,15,.06);
  border-top: 4px solid var(--tipo-tips);
  transition: transform .2s, box-shadow .2s;
}
@media (hover: hover) { .nota:hover { transform: scale(1.025); box-shadow: 0 14px 30px rgba(38,25,15,.1), inset 0 0 0 1px rgba(76,158,130,.3); } }
.nota .nota-pregunta { font-family: var(--serif); font-weight: 600; font-size: var(--t-lg); line-height: 1.3; text-wrap: balance; }
.nota .nota-extracto {
  font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-suave);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nota .nota-pie { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; }
.nota .nota-pie .meta-post { margin: 0; }
.nota .nota-ir {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: #EAF4EF; color: var(--tipo-tips); font-weight: 700; transition: transform .2s, background .2s, color .2s;
}
@media (hover: hover) { .nota:hover .nota-ir { transform: translateX(3px); background: var(--tipo-tips); color: var(--blanco); } }
@media (max-width: 600px) {
  .nota-destacada { grid-template-columns: 1fr; gap: 6px; padding: 26px 22px; }
  .nd-marca { font-size: 3.4rem; }
}

/* --- Useful links: tarjetas con logo --- */
.enlaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.enlace-card {
  background: var(--blanco); border-radius: var(--radio); padding: 34px 28px;
  text-decoration: none; color: var(--tinta); text-align: center;
  box-shadow: 0 8px 24px rgba(38,25,15,.09);
  transition: transform .22s, box-shadow .22s;
}
@media (hover: hover) { .enlace-card:hover { transform: scale(1.03); box-shadow: 0 22px 44px rgba(38,25,15,.16); } }
.enlace-logo {
  width: 92px; height: 92px; border-radius: 22px; margin: 0 auto 18px;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 900;
  font-size: 2.2rem; color: var(--blanco);
}
.enlace-card h2 { font-family: var(--serif); font-size: var(--t-lg); margin-bottom: 6px; }
.enlace-card p { font-size: var(--t-sm); color: var(--tinta-suave); }

/* --- About: perfiles de Pilar y Lola --- */
.perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.perfil {
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 10px 28px rgba(38,25,15,.1); text-align: center; padding-bottom: 28px;
}
.perfil img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.perfil h2 { font-family: var(--serif); font-size: var(--t-xl); margin: 20px 0 4px; }
.perfil .perfil-rol { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--carmin); }
.perfil p { padding: 14px 26px 0; font-size: var(--t-md); color: var(--tinta-suave); }

/* Credenciales: chips de autoridad (libros, canal, especialidades) */
.credenciales {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 16px 22px 0; list-style: none;
}
.credenciales li {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .04em;
  background: var(--papel); border: 1px solid var(--papel-sombra);
  color: var(--tinta-suave); padding: 5px 12px; border-radius: 999px;
}
.credenciales li strong { color: var(--carmin); font-weight: 700; }

/* ============================================================
   PÁGINA DE DETALLE (blog post): índice + bloques + FAQ + autor
   ============================================================ */
.migas {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  color: var(--tinta-suave); margin-bottom: 18px; text-transform: uppercase;
}
.migas a { color: var(--tinta-suave); text-decoration: none; }
@media (hover: hover) { .migas a:hover { color: var(--carmin); } }
.migas span { color: var(--carmin); }

/* Layout dos columnas: índice pegajoso + contenido */
.articulo-layout {
  display: grid; grid-template-columns: 250px minmax(0, 720px); gap: 48px; justify-content: center;
  max-width: var(--ancho); margin: 0 auto; padding: 36px 24px 64px;   /* 720 px: ≈ 75–80 caracteres por línea */
  align-items: start;
}
.indice {
  position: sticky; top: 130px;
  background: var(--blanco); border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 8px 22px rgba(38,25,15,.08);
}
.indice h2 {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--carmin); margin-bottom: 12px;
}
.indice ol { list-style: none; counter-reset: indice; }
.indice li { counter-increment: indice; }
.indice a {
  display: flex; gap: 10px; align-items: baseline;
  text-decoration: none; color: var(--tinta); font-size: var(--t-sm);
  padding: 7px 8px; border-radius: 8px; transition: background .15s, color .15s;
}
.indice a::before {
  content: counter(indice, decimal-leading-zero);
  font-family: var(--mono); font-size: .7rem; color: var(--tinta-suave);
}
@media (hover: hover) { .indice a:hover { background: var(--papel); color: var(--carmin); } }
.indice .indice-tilde { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--papel-sombra); font-size: var(--t-sm); color: var(--tinta-suave); }
.indice .indice-tilde a { color: var(--carmin); font-weight: 600; padding: 2px 0; display: inline; }
.indice .indice-tilde a::before { content: none; }

.detalle { min-width: 0; overflow-wrap: break-word; }   /* direcciones largas escritas en el texto */
.detalle > section { scroll-margin-top: 140px; margin-bottom: 40px; }
.detalle h2 {
  font-family: var(--serif); font-size: var(--t-xl); margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.detalle h2::before { content: "´"; color: var(--carmin); font-weight: 900; }
.detalle p { margin-bottom: 16px; }

/* Bloque de teoría con ejemplo destacado */
.bloque-teoria {
  background: var(--blanco); border-radius: var(--radio); padding: 26px 30px;
  box-shadow: 0 6px 18px rgba(38,25,15,.06);
}
.ejemplo {
  background: var(--papel); border-left: 5px solid var(--ocre);
  border-radius: 10px; padding: 14px 18px; margin: 14px 0;
  font-family: var(--serif); font-size: var(--t-base);
}
.ejemplo strong { color: var(--carmin); }
.ejemplo .traduccion { display: block; font-family: var(--sans); font-size: var(--t-sm); color: var(--tinta-suave); font-style: normal; margin-top: 4px; }

/* Descarga de PDF (los ejercicios reales son PDFs) */
.descarga-pdf {
  display: flex; align-items: center; gap: 22px;
  background: var(--blanco); border: 2px dashed var(--carmin);
  border-radius: var(--radio); padding: 24px 28px;
}
.descarga-pdf .pdf-icono {
  width: 62px; height: 62px; border-radius: 14px; background: var(--carmin);
  color: var(--blanco); display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: var(--t-sm); flex-shrink: 0;
}
.descarga-pdf h3 { font-family: var(--serif); font-size: var(--t-base); margin-bottom: 4px; }
.descarga-pdf p { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0; }
.descarga-pdf .boton { margin-left: auto; flex-shrink: 0; }

/* Vocabulario (picture learning real lleva definiciones) */
.vocabulario { background: var(--blanco); border-radius: var(--radio); padding: 26px 30px; box-shadow: 0 6px 18px rgba(38,25,15,.06); }
.vocabulario dt {
  font-family: var(--serif); font-weight: 700; font-size: var(--t-base); color: var(--carmin);
  margin-top: 14px;
}
.vocabulario dt:first-child { margin-top: 0; }
.vocabulario dd { color: var(--tinta-suave); font-size: var(--t-md); padding-left: 0; }
/* las definiciones de las autoras se guardan tal cual; aquí solo se pinta en mayúscula su primera letra */
.vocabulario dd:not(.traduccion)::first-letter { text-transform: uppercase; }

/* FAQ con acordeón */
.faq details {
  background: var(--blanco); border-radius: 14px; margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(38,25,15,.06); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-family: var(--serif); font-size: var(--t-base); font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  transition: color .15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-size: 1.3rem; color: var(--carmin);
  transition: transform .25s ease; flex-shrink: 0;
}
.faq details[open] summary { color: var(--carmin); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 18px; color: var(--tinta-suave); margin: 0; }

/* Caja de autora */
.autor-box {
  display: flex; gap: 20px; align-items: center;
  background: var(--tinta); color: var(--papel);
  border-radius: var(--radio); padding: 24px 28px;
}
.autor-box img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ocre); flex-shrink: 0; }
.autor-box h3 { font-family: var(--serif); font-size: var(--t-lg); }
.autor-box .autor-rol { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ocre); display: block; margin: 2px 0 6px; }
.autor-box p { font-size: var(--t-sm); color: #D8CFC2; margin: 0; }

/* ============================================================
   UTILIDADES (sustituyen a los antiguos estilos inline)
   ============================================================ */
.h2-lista { font-family: var(--serif); font-size: var(--t-xl); margin-bottom: 22px; }
.h2-lista-sep { margin: 48px 0 22px; }
.mt-44 { margin-top: 44px; }
.mt-0 { margin-top: 0; }
.mt-14 { margin-top: 14px; }
.pt-44 { padding-top: 44px; }

/* ============================================================
   WIDGET DE VISITAS — "You're visiting from X · visitor no. N"
   ============================================================ */
/* Separador entre bloques: banda clara con la bandera y el saludo */
.visitas-zona {
  display: flex; justify-content: center; align-items: center; gap: 18px;
  padding: 40px 24px;
}
/* Rayitas decorativas a los lados, como un separador de capítulo */
.visitas-zona::before, .visitas-zona::after {
  content: ""; height: 2px; width: min(90px, 12vw);
  background: repeating-linear-gradient(90deg, var(--ocre) 0 8px, transparent 8px 16px);
  border-radius: 2px; flex-shrink: 0;
}
/* El separador es un billete a Madrid: sello «¡Olé!», tu ciudad ✈ Madrid y, en el talón,
   tu número de estudiante. Lo rellena js/visitas.js al entrar en pantalla. */
.visitas {
  display: block; margin: 0; max-width: 100%;
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .6s ease, transform .6s ease;
}
.visitas.visible { opacity: 1; transform: none; }
.billete {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
  min-width: min(500px, 100%); max-width: 620px;
  background: var(--blanco); border-radius: 16px;
  box-shadow: 0 14px 34px rgba(38,25,15,.11), inset 0 0 0 1.5px rgba(232,169,59,.5);
}
.billete-ruta { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 24px 26px 22px 40px; }
.billete-lugar {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--mono); font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta);
}
.billete-lugar b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billete-lugar:last-child { flex-shrink: 0; }   /* Madrid, el destino, nunca se corta */
.billete-lugar img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(38,25,15,.1); flex-shrink: 0; }
.billete-mundo { font-size: 1.1rem; }
.billete-vuelo { flex: 1; min-width: 56px; display: flex; align-items: center; gap: 6px; color: var(--carmin); }
.billete-vuelo i { flex: 1; border-top: 2px dashed rgba(195,39,46,.32); }
.billete-avion { display: inline-block; font-size: 1.05rem; animation: billete-vuela 3.6s ease-in-out infinite; }
.billete-aqui { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: var(--t-base); color: var(--carmin); }
/* Talón: separado por la línea de puntos, con las dos muescas del billete */
.billete-talon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 14px 26px; border-left: 2px dashed rgba(232,169,59,.6);
  background: linear-gradient(180deg, #FFFBF1, #FFF3D9); border-radius: 0 16px 16px 0;
}
.billete-talon::before, .billete-talon::after {
  content: ""; position: absolute; left: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--papel);
}
.billete-talon::before { top: -9px; box-shadow: inset 0 -1.5px 0 rgba(232,169,59,.5); }
.billete-talon::after { bottom: -9px; box-shadow: inset 0 1.5px 0 rgba(232,169,59,.5); }
.billete-talon small { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); }
.billete-talon b { font-family: var(--mono); font-size: var(--t-base); font-weight: 700; color: var(--carmin); white-space: nowrap; }
/* «¡Olé!» como sello de pasaporte: cae sobre la esquina cuando aparece el billete */
.billete-sello {
  position: absolute; left: -22px; top: -26px; z-index: 1;
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-weight: 900; font-size: var(--t-base); color: var(--carmin);
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 2px var(--carmin), inset 0 0 0 5px rgba(255,255,255,.9), inset 0 0 0 6.5px rgba(195,39,46,.45);
  transform: rotate(-14deg);
}
.visitas.visible .billete-sello { animation: billete-sello .6s cubic-bezier(.2,.7,.3,1.35) .35s both; }
@keyframes billete-sello {
  from { opacity: 0; transform: rotate(-32deg) scale(1.9); }
  to { opacity: 1; transform: rotate(-14deg) scale(1); }
}
@keyframes billete-vuela {
  0%, 100% { transform: translateX(-5px) rotate(0); }
  50% { transform: translateX(5px) rotate(-6deg); }
}
@media (max-width: 600px) {
  .visitas-zona::before, .visitas-zona::after { display: none; }
  .billete { grid-template-columns: 1fr; min-width: 0; width: 100%; }
  .billete-ruta { padding: 26px 18px 16px 34px; gap: 10px; }
  .billete-lugar { font-size: var(--t-xs); letter-spacing: .06em; }
  .billete-lugar b { white-space: normal; line-height: 1.25; }   /* una ciudad larga pasa a dos líneas, sin cortarse */
  .billete-vuelo { min-width: 30px; }
  .billete-talon { flex-direction: row; gap: 10px; border-left: 0; border-top: 2px dashed rgba(232,169,59,.6); border-radius: 0 0 16px 16px; padding: 12px 18px; }
  .billete-talon::before { top: -10px; left: -9px; box-shadow: inset -1.5px 0 0 rgba(232,169,59,.5); }
  .billete-talon::after { top: -10px; bottom: auto; left: auto; right: -9px; box-shadow: inset 1.5px 0 0 rgba(232,169,59,.5); }
  .billete-sello { width: 58px; height: 58px; font-size: var(--t-md); left: -10px; top: -24px; }
}
@media (prefers-reduced-motion: reduce) {
  .billete-avion, .visitas.visible .billete-sello { animation: none; }
}

/* ============================================================
   FIRMA DE SENDAR STUDIO
   El componente vive en firma-sendar/ (su HTML y su CSS, sin tocar).
   Aquí solo el hueco que ocupa en el pie.
   ============================================================ */
.pie-firma { display: flex; justify-content: center; padding: 34px 20px 8px; position: relative; z-index: 1; }

/* ============================================================
   GUÍA DE LECTURA — el sol del logo, abajo a la derecha
   Se llena de 0 a 100 % al bajar: los doce rayos se encienden uno a uno
   en el sentido del reloj, el sol gira con la página y el centro se llena
   desde abajo. La flecha de dentro baja una pantalla; al subir o al llegar
   al final se da la vuelta y lleva arriba. Solo en páginas largas.
   ============================================================ */
.sol-guia {
  --p: 0;
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  width: 66px; height: 66px; padding: 5px; border: 0; border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 38%, #FFFDF8 0%, var(--papel) 72%);
  box-shadow: 0 10px 26px rgba(38,25,15,.18), 0 0 0 1px rgba(232,169,59,.28),
              0 0 calc(8px + var(--p) * 26px) rgba(255,193,7, calc(.18 + var(--p) * .42));
  transition: transform .3s cubic-bezier(.2,.7,.3,1.4), box-shadow .3s, opacity .3s;
  animation: sg-aparece .5s cubic-bezier(.2,.7,.3,1.2) backwards;
}
.sol-guia.reposo { opacity: 0; transform: translateY(12px) scale(.85); pointer-events: none; }
.sol-guia[hidden] { display: none; }
@media (hover: hover) { .sol-guia:hover { transform: scale(1.08); } }
.sol-guia:active { transform: scale(.94); }
.sol-guia:focus-visible { outline: 3px solid var(--carmin); outline-offset: 4px; }
.sol-guia svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Rayos: giran con la lectura y se encienden en orden (--i = su turno, de 0 a 11) */
.sg-rayos { fill: #FFC107; transform-origin: 50px 50px; transform: rotate(calc(var(--p) * 360deg)); }
.sg-rayos ellipse { opacity: clamp(.22, calc(var(--p) * 12 - var(--i) + .3), 1); transition: opacity .35s; }
.sg-rayos ellipse:nth-child(1) { --i: 0; }  .sg-rayos ellipse:nth-child(2) { --i: 1; }
.sg-rayos ellipse:nth-child(3) { --i: 2; }  .sg-rayos ellipse:nth-child(4) { --i: 3; }
.sg-rayos ellipse:nth-child(5) { --i: 4; }  .sg-rayos ellipse:nth-child(6) { --i: 5; }
.sg-rayos ellipse:nth-child(7) { --i: 6; }  .sg-rayos ellipse:nth-child(8) { --i: 7; }
.sg-rayos ellipse:nth-child(9) { --i: 8; }  .sg-rayos ellipse:nth-child(10) { --i: 9; }
.sg-rayos ellipse:nth-child(11) { --i: 10; } .sg-rayos ellipse:nth-child(12) { --i: 11; }
/* Centro: contorno del sol y el «nivel» que sube desde abajo */
.sg-centro { fill: #FFF4D2; stroke: #FFC107; stroke-width: 3; }
.sg-nivel { fill: #FFC107; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--p)); }
/* Flecha: respira hacia donde lleva; da media vuelta para volver arriba */
.sg-giro { transform-origin: 50px 50px; transition: transform .45s cubic-bezier(.2,.7,.3,1.3); }
.sol-guia.arriba .sg-giro { transform: rotate(180deg); }
.sg-flecha { fill: none; stroke: var(--tinta); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round;
             animation: sg-bote 1.8s ease-in-out infinite; }
@media (hover: hover) { .sol-guia:hover .sg-flecha { animation-duration: .9s; } }
@keyframes sg-bote { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@keyframes sg-aparece { from { opacity: 0; transform: translateY(14px) scale(.8); } }
@media (max-width: 1100px) {   /* encima de la barra inferior */
  .sol-guia { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-guia, .sg-flecha { animation: none; }
  .sg-giro, .sg-rayos ellipse { transition: none; }
}

/* Ejemplos quietos en la guía de componentes */
.sg-ejemplos { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.sg-ejemplo-celda { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.sg-ejemplo-celda figcaption { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; color: var(--tinta-suave); }
.sol-guia.sg-ejemplo { position: static; animation: none; pointer-events: none; }
.sg-p0 { --p: 0; } .sg-p50 { --p: .5; } .sg-p100 { --p: 1; }

/* ============================================================
   «VER MÁS» — listas largas en una sola página (vídeos)
   Se enseña una tanda; el resto aparece al pulsar. El buscador busca
   siempre en todas. Sin JavaScript se ven todas.
   ============================================================ */
.ver-mas-zona { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 34px 0 6px; }
.ver-mas-zona[hidden] { display: none; }
.ver-mas-cuenta { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.ver-mas { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font-family: var(--sans); }
.ver-mas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
@media (hover: hover) { .ver-mas:hover svg { transform: translateY(3px); } }

/* Al pasar el ratón, lo pulsable crece desde el centro en vez de subir: si subiera, el borde de abajo
   se escaparía del puntero (parpadeo y clics perdidos). */

/* ============================================================
   ACCESIBILIDAD Y RESPONSIVE
   ============================================================ */
:focus-visible { outline: 3px solid var(--azulejo); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal, .reveal-zoom { opacity: 1; transform: none; }
  html { scroll-behavior: auto; scroll-snap-type: none; }
}

@media (max-width: 900px) {
  html { scroll-snap-type: none; }
  .bloque { padding: 56px 0; }
  .somos, .pie-grid, .galeria, .perfiles, .articulo-layout { grid-template-columns: 1fr; }
  .indice { position: static; }
  .descarga-pdf { flex-direction: column; text-align: center; }
  .descarga-pdf .boton { margin-left: 0; }
  .formatos, .articulos, .niveles-grid, .notas, .enlaces-grid { grid-template-columns: 1fr 1fr; }
  .escalera { grid-template-columns: repeat(3, 1fr); }
  .peldano { min-height: 120px !important; }
  .polaroids { min-height: 320px; }
}

@media (max-width: 600px) {
  /* barra superior en una línea: solo el enlace a Tilde */
  .barra-tilde .barra-lema { display: none; }
  .barra-tilde-inner { justify-content: center; letter-spacing: .05em; }
  .logo-tilde img { height: 34px; }   /* el logo entero cabe en 390 px */
  .formatos, .articulos, .escalera, .niveles-grid, .notas, .enlaces-grid { grid-template-columns: 1fr; }
  .escalera { align-items: stretch; }
  .cabecera-inner { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 10px; }
  .nav { font-size: var(--t-sm); }
  .tilde-postal { padding: 34px 26px; }
  .polaroid { width: 74%; }
  .articulo-cabecera { padding-top: 150px; }
  .landing-hero .landing-icono { font-size: 6.5rem; right: -14px; bottom: -22px; opacity: .12; }
}

/* Móviles estrechos (iPhone SE 1.ª gen., Android pequeños): el logo entero y la barra de arriba en una línea */
@media (max-width: 380px) {
  .cabecera .contenedor { padding-inline: 16px; }
  .barra-tilde-inner { font-size: var(--t-2xs); letter-spacing: .03em; }
  .logo { gap: 10px; }
  .logo-marca { width: 50px; height: 50px; }
  .logo-forum { font-size: 1.95rem; }
  .logo-tilde { gap: 7px; }
  .logo-tilde img { height: 28px; }
}

/* ============================================================
   BLOQUE COMUNIDAD — la escuela detrás (vídeo) + suscripción
   Sustituye a la antigua escalera de niveles.
   ============================================================ */
.bloque-comunidad { background: linear-gradient(160deg, #2E2013, #26190F 72%); color: var(--papel); }
.bloque-comunidad h2 { color: var(--papel); margin-bottom: 18px; }
.bloque-comunidad p { color: #D8CFC2; }

.comunidad {
  display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 52px; align-items: center;
}

/* --- Pantalla 3D: el vídeo dentro de un monitor, ligeramente girado --- */
.video-escena {
  perspective: 1500px;
  margin-left: -34px;   /* se sale un poco por la izquierda: da profundidad */
  position: relative;
}
.video-portada {
  position: relative; aspect-ratio: 16/9; cursor: pointer;
  background: #0E0906;
  border-radius: 20px;
  padding: 12px 12px 26px;      /* marco del monitor */
  transform: rotateY(6deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .55s ease;
  box-shadow:
    0 2px 0 rgba(255,255,255,.09) inset,
    0 44px 70px -20px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.07);
}
.video-portada::after {              /* reflejo del cristal */
  content: ""; position: absolute; inset: 12px 12px 26px;
  border-radius: 12px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 32%, transparent 55%);
  transition: opacity .4s ease;
}
.video-portada::before {             /* piloto encendido del monitor */
  content: ""; position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: 46px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,193,7,.75), transparent);
}
.video-portada img,
.video-portada iframe {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 11px; border: 0;
}
@media (hover: hover) { .video-portada:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-6px) scale(1.015);
  box-shadow:
    0 2px 0 rgba(255,255,255,.12) inset,
    0 60px 90px -22px rgba(0,0,0,.8),
    0 0 0 1px rgba(232,169,59,.25);
} }
@media (hover: hover) { .video-portada:hover::after { opacity: .5; } }

/* Sombra de apoyo bajo la pantalla */
.video-peana {
  display: block; height: 26px; margin: -6px auto 0; width: 74%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, transparent 72%);
  filter: blur(6px);
}

.video-play {
  position: absolute; left: 50%; top: calc(50% - 7px); transform: translate(-50%, -50%);
  width: 82px; height: 82px; border-radius: 50%; z-index: 2;
  background: var(--carmin);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 8px rgba(195,39,46,.16);
  transition: transform .25s ease, background .25s ease;
}
.video-play::after {
  content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent var(--blanco);
}
.video-play::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid rgba(195,39,46,.5);
  animation: play-latido 2.6s ease-out infinite;
}
@keyframes play-latido {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}
@media (hover: hover) { .video-portada:hover .video-play { transform: translate(-50%, -50%) scale(1.12); background: var(--carmin-oscuro); } }

/* Texto del bloque: centrado verticalmente y sin apelotonar */
.comunidad-texto h2 { font-size: clamp(var(--t-2xl), 3.3vw, var(--t-3xl)); line-height: 1.15; }
.comunidad-texto > p { font-size: var(--t-base); max-width: 26em; }

/* Prueba social: la cifra del canal */
.prueba-social {
  display: inline-flex; align-items: center; gap: 16px; margin: 28px 0;
  padding: 14px 24px 14px 20px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(232,169,59,.32);
}
.dato-cifra {
  font-family: var(--serif); font-weight: 900; font-size: var(--t-3xl); line-height: 1;
  color: var(--ocre); flex-shrink: 0;
}
.dato-texto { font-size: var(--t-md); color: #D8CFC2; line-height: 1.35; }
.dato-texto strong { color: var(--papel); }

/* Suscripción */
.newsletter {
  margin-top: 56px; padding: 30px 34px; border-radius: var(--radio);
  background: rgba(255,255,255,.06); border: 1px dashed rgba(232,169,59,.4);
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.newsletter-texto h3 { font-family: var(--serif); font-size: var(--t-lg); color: var(--papel); margin-bottom: 6px; }
.newsletter-texto p { font-size: var(--t-sm); margin: 0; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form input {
  font-family: var(--sans); font-size: var(--t-md); color: var(--tinta);
  background: var(--papel); border: 0; border-radius: 999px;
  padding: 14px 22px; min-width: 250px;
}
.newsletter-form input:focus { outline: 3px solid var(--ocre); outline-offset: 2px; }
.newsletter-form .boton { border: 0; cursor: pointer; }
/* Primera capa de información RGPD bajo el formulario (obligatoria al pedir el email) */
.newsletter-legal { grid-column: 1 / -1; font-size: var(--t-xs); line-height: 1.5; color: #D8CFC2; margin: -10px 0 0; }
.newsletter-legal a { color: var(--ocre); }

@media (max-width: 900px) {
  .comunidad { grid-template-columns: 1fr; gap: 34px; }
  .newsletter { grid-template-columns: 1fr; gap: 18px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { min-width: 0; width: 100%; }
  .video-play { width: 66px; height: 66px; }
  .video-play::after { border-width: 12px 0 12px 20px; }
}

/* ============================================================
   CABECERA CON RELIEVE (3D suave)
   ============================================================ */
.cabecera {
  background: linear-gradient(180deg, #FEFAF2 0%, var(--papel) 62%, #F3E9D6 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 20px rgba(38,25,15,.09);
  border-bottom: 1px solid rgba(38,25,15,.10);
}
.cabecera.compacta {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 30px rgba(38,25,15,.16);
}
/* Los enlaces del menú se elevan al pasar el ratón */
.nav > a, .nav-grupo > a {
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nav-grupo:hover > a {
  background: rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(38,25,15,.12), 0 1px 0 rgba(255,255,255,.9) inset;
  transform: translateY(-1px);
}
@media (hover: hover) { .nav > a:not(.nav-cta):hover {
  background: rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(38,25,15,.12), 0 1px 0 rgba(255,255,255,.9) inset;
  transform: translateY(-1px);
} }
/* El botón de cursos, con volumen */
.nav .nav-cta {
  background: linear-gradient(180deg, #D33840 0%, var(--carmin) 55%, var(--carmin-oscuro) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 5px 14px rgba(142,27,33,.4);
}
@media (hover: hover) { .nav .nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 9px 20px rgba(142,27,33,.5);
} }
.nav .nav-cta:active { transform: translateY(0); }
/* El desplegable, despegado del menú */
.nav-desplegable {
  box-shadow: 0 24px 50px rgba(38,25,15,.22), 0 0 0 1px rgba(38,25,15,.06);
}

/* ============================================================
   MENÚ INFERIOR DE MÓVIL (barra de app)
   Solo visible por debajo de 900px. El HTML vive en cada página;
   todo el comportamiento visual está aquí.
   ============================================================ */
.nav-movil { display: none; }
/* La cabecera es algo más ancha que el contenido (1240 px): logo y menú completos caben en una línea sin salirse */
.cabecera .contenedor { max-width: calc(var(--ancho) + 100px); }
/* Menú de escritorio en pantallas medianas (1101–1240 px: iPad en horizontal, portátiles pequeños): sin «Home»
   (el logo ya lleva a la portada), más junto y con el logo algo menor, para que quepa entero dentro del margen */
@media (min-width: 1101px) and (max-width: 1240px) {
  .nav > a[href="index.html"] { display: none; }
  .nav > a, .nav-grupo > a { padding: 9px 6px; }
  .nav > a:not(.nav-cta)::after, .nav-grupo > a::after { left: 8px; right: 8px; }
  .nav .nav-cta { margin-left: 4px; padding-inline: 10px; }
  .cabecera-inner { gap: 10px; }
  .logo { gap: 10px; }
  .logo-marca { width: 50px; height: 50px; }
  .logo-forum { font-size: 1.9rem; }
  .logo-tilde { gap: 8px; }
  .logo-tilde img { height: 32px; }
}

@media (max-width: 1100px) {
  /* En móvil y tableta en vertical (hasta 1100 px, iPad Pro incluido), manda la barra inferior */
  .cabecera .nav { display: none; }
  .cabecera-inner { justify-content: center; padding-block: 10px; }
  body { padding-bottom: 76px; }   /* hueco para la barra */
  /* la portada termina encima de la barra: el «Scroll ▼» no queda tapado (svh: sin contar la barra del navegador) */
  .hero { min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); padding: 150px 0 76px; }

  .nav-movil {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 103;   /* barra > panel > velo > cabecera (100) */
    background: linear-gradient(180deg, #FFFDF8 0%, var(--papel) 100%);
    box-shadow: 0 -1px 0 rgba(255,255,255,.9) inset, 0 -6px 24px rgba(38,25,15,.16);
    border-top: 1px solid rgba(38,25,15,.1);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: stretch;
  }
  .nm-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: 0; cursor: pointer;
    text-decoration: none; color: var(--tinta-suave);
    font-family: var(--sans); font-size: var(--t-2xs); letter-spacing: .02em;
    padding: 6px 2px 4px; border-radius: 12px;
    transition: color .18s ease, background .18s ease, transform .18s ease;
  }
  .nm-item svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .nm-item:active { transform: scale(.93); }
  .nm-item[aria-current="page"], .nm-item.activo { color: var(--carmin); background: rgba(195,39,46,.08); }
  /* El de cursos destaca: es la conversión */
  .nm-cta { color: var(--carmin); font-weight: 600; }
  .nm-cta svg { stroke-width: 2.2; }

  /* Panel que sube al pulsar "Material" */
  .nm-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 102;   /* por debajo de la barra: «Material» sigue a mano */
    background: var(--blanco);
    border-radius: 22px 22px 0 0;
    padding: 10px 16px calc(84px + env(safe-area-inset-bottom, 0px));   /* deja libre la barra */
    box-shadow: 0 -14px 44px rgba(38,25,15,.3);
    max-height: calc(100vh - 12px); max-height: calc(100svh - 12px);   /* móvil en horizontal: nunca más alto que la pantalla */
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(100%); visibility: hidden;   /* cerrado: fuera de la vista, del tabulador y del lector de pantalla */
    transition: transform .32s cubic-bezier(.2,.8,.3,1), visibility 0s .32s;
  }
  .nm-panel[hidden] { display: block; }         /* lo controla el transform */
  .nm-panel.abierto { transform: translateY(var(--arrastre, 0px)); visibility: visible; transition: transform .32s cubic-bezier(.2,.8,.3,1); }
  .nm-panel.arrastrando { transition: none; }   /* sigue al dedo al deslizarlo hacia abajo */
  .nm-panel::before {                            /* asa de arrastre */
    content: ""; display: block; width: 42px; height: 4px; border-radius: 3px;
    background: var(--papel-sombra); margin: 4px auto 14px;
  }
  .nm-panel a {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 12px; border-radius: 14px;
    text-decoration: none; color: var(--tinta); font-size: var(--t-md); font-weight: 500;
    border-bottom: 1px solid var(--papel);
  }
  .nm-panel a:last-child { border-bottom: 0; }
  .nm-panel a:active { background: var(--papel); }
  .nm-panel .punto { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }

  .nm-velo[hidden] { display: block; }           /* lo controlan la opacidad y pointer-events */
  .nm-velo {
    position: fixed; inset: 0; z-index: 101; background: rgba(38,25,15,.45);   /* tapa también la cabecera: tocar fuera cierra */
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
    touch-action: none;                          /* con el panel abierto, la página de detrás no se mueve */
  }
  .nm-velo.abierto { opacity: 1; pointer-events: auto; }

  /* Ajustes del bloque comunidad en móvil */
  .video-escena { margin-left: 0; perspective: none; }
  .video-portada { transform: none; padding: 8px 8px 18px; }
  @media (hover: hover) { .video-portada:hover { transform: none; } }
  .prueba-social { width: 100%; }
}

/* Colores de los puntos del panel móvil (sin estilos en el HTML) */
@media (max-width: 1100px) {
  .nm-panel .punto[data-color="gramatica"]   { background: var(--tipo-gramatica); }
  .nm-panel .punto[data-color="imagen"]      { background: var(--tipo-imagen); }
  .nm-panel .punto[data-color="tips"]        { background: var(--tipo-tips); }
  .nm-panel .punto[data-color="actividades"] { background: var(--tipo-noticias); }
  .nm-panel .punto[data-color="noticias"]    { background: var(--tipo-video); }
  .nm-panel .punto[data-color="enlaces"]     { background: var(--azulejo); }
  .nm-panel .punto[data-color="about"]       { background: var(--carmin); }
  /* «Material ˄»: la flecha va junto a la palabra y se da la vuelta al abrir */
  .nm-abrir .nm-chev { display: none; }
  .nm-abrir span { display: inline-flex; align-items: center; gap: 4px; }
  .nm-abrir span::after {
    content: ""; width: 5px; height: 5px; opacity: .7;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: translateY(1px) rotate(-135deg); transition: transform .3s ease;
  }
  .nm-abrir[aria-expanded="true"] span::after { transform: translateY(-2px) rotate(45deg); }
  .nm-abrir[aria-expanded="true"] { color: var(--carmin); background: rgba(195,39,46,.08); }
  /* con el panel abierto, solo «Material» se ve encendido */
  .nav-movil:has(.nm-abrir[aria-expanded="true"]) .nm-item.activo:not(.nm-abrir) { color: var(--tinta-suave); background: none; }
}
/* Panel en pantallas anchas (móvil en horizontal, tableta): dos columnas y centrado, para que quepa sin desplazarse */
@media (min-width: 560px) and (max-width: 1100px) {
  .nm-panel, .nm-panel[hidden] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; max-width: 760px; margin-inline: auto; }
  .nm-panel::before { grid-column: 1 / -1; }
  .nm-panel a, .nm-panel a:last-child { border-bottom: 1px solid var(--papel); }
}

/* Móvil en horizontal (poca altura): la cabecera se va al bajar y la barra inferior es más baja (icono y nombre en
   una fila), para que el contenido tenga sitio. El panel «Material» ya va en dos columnas. */
@media (max-width: 1100px) and (max-height: 500px) {
  .cabecera { position: absolute; }
  body { padding-bottom: 52px; }
  .hero { min-height: calc(100vh - 52px); min-height: calc(100svh - 52px); }
  .nav-movil { padding-block: 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .nm-item { flex-direction: row; justify-content: center; gap: 7px; padding: 8px 4px; font-size: var(--t-xs); }
  .nm-panel { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .sol-guia { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   CLASES QUE SUSTITUYEN A LOS ÚLTIMOS ESTILOS EN LÍNEA
   Regla del proyecto: ni un solo atributo style en el HTML.
   ============================================================ */
/* Puntos de color del desplegable de escritorio y del panel móvil */
.punto[data-color="gramatica"]   { background: var(--tipo-gramatica); }
.punto[data-color="imagen"]      { background: var(--tipo-imagen); }
.punto[data-color="tips"]        { background: var(--tipo-tips); }
.punto[data-color="actividades"] { background: var(--tipo-noticias); }
.punto[data-color="noticias"]    { background: var(--tipo-video); }
.punto[data-color="enlaces"]     { background: var(--azulejo); }
.punto[data-color="about"]       { background: var(--carmin); }

/* Migas sobre hero de color */
.migas-claras, .migas-claras a { color: rgba(255,255,255,.78); }
.migas-claras span { color: var(--blanco); }

/* Utilidades de texto y medios */
.mono { font-family: var(--mono); }
.texto-ocre { color: var(--ocre); }
.embed-form iframe { background: var(--blanco); min-height: 480px; }
.foto-completa { width: 100%; height: 100%; object-fit: cover; }
.ratio-16-10 { aspect-ratio: 16/10; }

/* Logos de la página de enlaces útiles */
.enlace-logo[data-marca="tilde"]   { background: var(--carmin); }
.enlace-logo[data-marca="arabe"]   { background: var(--azulejo); }
.enlace-logo[data-marca="mundos"]  { background: var(--ocre); color: var(--tinta); }
.relacionados h2.titulo-bloque { display: block; }
.relacionados h2.titulo-bloque::before { margin-right: .4em; }

/* ============================================================
   COMPONENTES PARA EL CONTENIDO REAL (v28)
   Prediseñados tras auditar los 317 artículos de WordPress
   (ver REGLAS-DISENO.md y componentes.html, guía de todos los estados).
   ============================================================ */

/* --- Test: portada que carga el Google Form solo al pulsar (data-gform) --- */
.test-portada {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center;
  padding: 34px 34px 30px;
  background:
    radial-gradient(circle at 12px 12px, rgba(106,90,168,.07) 3px, transparent 3px) 0 0 / 30px 30px,
    linear-gradient(135deg, var(--blanco) 55%, #F3EFFA);
}
.test-portada::after {
  content: "✓"; position: absolute; right: 18px; bottom: -64px; pointer-events: none;
  font-family: var(--serif); font-weight: 900; font-size: 12rem; line-height: 1;
  color: rgba(106,90,168,.08); transform: rotate(-8deg);
}
.test-sello {
  width: 96px; height: 96px; border-radius: 24px; flex-shrink: 0;
  display: grid; place-items: center; transform: rotate(-5deg);
  font-family: var(--mono); font-weight: 700; font-size: var(--t-2xl); color: var(--blanco);
  background: var(--tipo-test); box-shadow: 0 12px 26px rgba(38,25,15,.2);
  transition: transform .3s cubic-bezier(.2,.7,.3,1.4);
}
@media (hover: hover) { .test-portada:hover .test-sello { transform: rotate(0) scale(1.06); } }
.test-sello[data-nivel="A1"] { background: var(--a1); } .test-sello[data-nivel="A2"] { background: var(--a2); }
.test-sello[data-nivel="B1"] { background: var(--b1); } .test-sello[data-nivel="B2"] { background: var(--b2); }
.test-sello[data-nivel="C1"] { background: var(--c1); } .test-sello[data-nivel="C2"] { background: var(--c2); }
.test-portada-eyebrow {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tipo-test); margin: 0 0 4px;
}
.test-portada h3 { font-family: var(--serif); font-weight: 600; font-size: var(--t-xl); line-height: 1.2; margin-bottom: 18px; }
.test-acciones { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; position: relative; z-index: 1; }
.test-acciones .boton { border: 0; cursor: pointer; font-family: var(--sans); }
.enlace-externo { display: inline-block; padding: 4px 0; font-size: var(--t-sm); font-weight: 500; color: var(--tinta-suave); text-underline-offset: 3px; }
@media (hover: hover) { .enlace-externo:hover { color: var(--carmin); } }
/* Ya cargado: el formulario ocupa la caja, con la altura que guarda el panel */
.embed-form.cargado iframe { min-height: 0; }
/* Formulario que ya no responde: el test se aparta con elegancia */
.embed-form.no-disponible .test-portada { background: repeating-linear-gradient(-45deg, var(--papel), var(--papel) 12px, #F6EEDD 12px, #F6EEDD 24px); }
.embed-form.no-disponible .test-portada::after { content: "…"; color: rgba(38,25,15,.07); bottom: -22px; transform: none; }
.embed-form.no-disponible .test-sello { filter: grayscale(1); opacity: .55; }
.embed-form.no-disponible .test-portada-eyebrow { color: var(--tinta-suave); }
.test-alternativas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; position: relative; z-index: 1; }
.test-alternativas a {
  display: inline-block; background: var(--blanco); color: var(--tinta); text-decoration: none;
  font-size: var(--t-sm); padding: 7px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(38,25,15,.08);
  transition: background .15s, color .15s;
}
@media (hover: hover) { .test-alternativas a:hover { background: var(--tipo-test); color: var(--blanco); } }
/* Guía de resultados (texto común a todos los tests) */
.resultados p { display: flex; gap: 14px; align-items: baseline; }
.resultado-rango {
  font-family: var(--mono); font-weight: 700; font-size: var(--t-xs); flex-shrink: 0;
  min-width: 52px; text-align: center; padding: 3px 8px; border-radius: 6px;
  background: var(--papel); color: var(--tipo-test); box-shadow: inset 0 0 0 1.5px var(--tipo-test);
}

/* --- Ficha de la actividad (bloque "Descripción" de las Teaching activities reales) --- */
.ficha {
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 6px 18px rgba(38,25,15,.06); border-top: 6px solid var(--tipo-noticias);
}
.ficha dt, .ficha dd { padding: 13px 22px; border-bottom: 1px dashed var(--papel-sombra); }
.ficha dt {
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--carmin); background: #FDFAF3; display: flex; align-items: center;
}
.ficha dd { font-size: var(--t-md); }
.ficha dt:last-of-type, .ficha dd:last-of-type { border-bottom: 0; }

/* --- Varias descargas por material (gramática y actividades llevan 1 o 2 PDF) --- */
.descargas { display: grid; gap: 16px; }
.descarga-pdf .pdf-peso { display: block; font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-suave); margin-top: 4px; }

/* --- Vídeo dentro de un artículo: miniatura + play; YouTube solo carga al pulsar --- */
.video-articulo { position: relative; cursor: pointer; }
.video-articulo img { transition: transform .5s ease, filter .3s ease; }
@media (hover: hover) { .video-articulo:hover img { transform: scale(1.03); filter: brightness(.92); } }
.video-articulo .video-play { top: 50%; }
@media (hover: hover) { .video-articulo:hover .video-play { transform: translate(-50%, -50%) scale(1.12); background: var(--carmin-oscuro); } }

/* --- Foto protagonista de Picture learning: sin recortes (muchas fotos reales son verticales) --- */
.foto-principal {
  margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--tinta);
  box-shadow: 0 14px 36px rgba(38,25,15,.18);
}
.foto-principal img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; margin: 0 auto; }

/* --- Vídeo MP4 propio (noticias): mismo marco que YouTube, sin autoplay --- */
.embed-video video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--tinta); }
.embed-video.cargado { cursor: default; }
@media (hover: hover) { .embed-video.cargado:hover img { transform: none; filter: none; } }

/* --- Prosa: viste el HTML antiguo de WordPress con el estilo nuevo --- */
.prosa { font-size: var(--t-base); overflow-wrap: break-word; }
.prosa a { overflow-wrap: anywhere; }   /* URLs largas escritas como texto del enlace */
.prosa h2 { font-family: var(--serif); font-size: var(--t-xl); margin: 30px 0 12px; }
/* Los títulos del texto antiguo pueden llevar cursivas o enlaces: bloque normal, no flex (el flex los partiría) */
.detalle .prosa h2 { display: block; }
.detalle .prosa h2::before { margin-right: .4em; }
.prosa h3 { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; margin: 26px 0 10px; }
.prosa > :first-child { margin-top: 0; }
.prosa p { margin-bottom: 16px; }
/* Lectura cómoda: ningún párrafo de texto corrido pasa de ≈ 80 caracteres por línea (imágenes y tablas, a todo el ancho) */
.prosa p, .prosa li, .detalle > section > p, .faq details p { max-width: 39em; }
.prosa ul, .prosa ol { margin: 0 0 18px; padding-left: 24px; }
.prosa li { margin-bottom: 6px; }
.prosa li::marker { color: var(--carmin); font-weight: 700; }
.prosa strong, .prosa b { font-weight: 600; color: var(--tinta); }
.prosa a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prosa img { height: auto; border-radius: 14px; box-shadow: 0 8px 22px rgba(38,25,15,.1); }
.prosa .img-centro { margin: 24px auto; }
.prosa .img-izq { float: left; max-width: 45%; margin: 6px 24px 14px 0; }
.prosa .img-der { float: right; max-width: 45%; margin: 6px 0 14px 24px; }
.prosa::after { content: ""; display: table; clear: both; }
.prosa blockquote {
  margin: 22px 0; padding: 16px 22px; background: var(--papel); border-left: 5px solid var(--ocre);
  border-radius: 10px; font-family: var(--serif); font-style: italic; font-size: var(--t-base);
}
.prosa hr { border: 0; text-align: center; margin: 30px 0; }
.prosa hr::after { content: "´  ´  ´"; font-family: var(--serif); font-weight: 900; color: var(--carmin); letter-spacing: .4em; }
.tabla-scroll { overflow-x: auto; margin: 22px 0; border-radius: 14px; box-shadow: 0 6px 18px rgba(38,25,15,.07); }
.prosa table { width: 100%; border-collapse: collapse; background: var(--blanco); font-size: var(--t-sm); }
.prosa th {
  background: var(--tinta); color: var(--papel); text-align: left; padding: 12px 16px;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
}
.prosa th strong, .prosa th b, .prosa th em { color: inherit; }   /* la negrita de la prosa es oscura: en la cabecera de tabla no se veía */
.prosa th a { color: var(--ocre); }
.prosa td { padding: 11px 16px; border-bottom: 1px solid var(--papel-sombra); vertical-align: top; }
.prosa tr:nth-child(even) td { background: #FDFAF3; }
.prosa tr:last-child td { border-bottom: 0; }

/* --- Vocabulario: definición en español y/o traducción (los dos tipos reales) --- */
.vocabulario dd + dd { margin-top: 4px; }
.vocabulario dd.traduccion::before {
  content: "EN"; font-family: var(--mono); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .08em;
  background: var(--azulejo); color: var(--blanco); padding: 2px 6px; border-radius: 4px;
  margin-right: 8px; vertical-align: 2px;
}

/* --- Nivel sin materiales: tarjeta en espera, no enlaza a una página vacía --- */
.nivel-card.vacio {
  background: repeating-linear-gradient(-45deg, var(--papel-sombra), var(--papel-sombra) 14px, #EADCBF 14px, #EADCBF 28px);
  color: var(--tinta-suave); cursor: default; box-shadow: inset 0 0 0 2px rgba(38,25,15,.06);
}
@media (hover: hover) { .nivel-card.vacio:hover { transform: none; box-shadow: inset 0 0 0 2px rgba(38,25,15,.06); } }
.nivel-card.vacio::after { color: rgba(38,25,15,.07); }

/* --- Paginación (secciones con más de 24 materiales) --- */
.paginacion { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 44px; }
.paginacion a, .paginacion span {
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px;
  display: inline-grid; place-items: center; text-decoration: none;
  font-family: var(--mono); font-weight: 700; font-size: var(--t-sm); color: var(--tinta);
  background: var(--blanco); box-shadow: 0 6px 16px rgba(38,25,15,.1);
  transition: transform .15s, background .15s, color .15s;
}
@media (hover: hover) { .paginacion a:hover { transform: scale(1.08); background: var(--tinta); color: var(--blanco); } }
.paginacion [aria-current="page"] { background: var(--carmin); color: var(--blanco); }
.paginacion .pag-hueco { background: none; box-shadow: none; min-width: 20px; padding: 0; }

/* --- Buscador dentro de una sección (data-buscador): filtra al escribir, sin tildes --- */
.buscador-seccion { position: relative; z-index: 2; margin: -30px 0 18px; max-width: 640px; }
.buscador-seccion input {
  width: 100%; font-family: var(--sans); font-size: var(--t-md); color: var(--tinta);
  background: var(--blanco); border: 2px solid transparent; border-radius: 999px;
  padding: 16px 22px 16px 54px; box-shadow: 0 10px 26px rgba(38,25,15,.14);
  transition: border-color .15s, box-shadow .15s;
}
.buscador-seccion input:focus { outline: none; border-color: var(--tipo-video); box-shadow: 0 12px 30px rgba(46,94,140,.22); }
.buscador-seccion svg {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; fill: none; stroke: var(--tinta-suave); stroke-width: 2; stroke-linecap: round;
}
.buscador-cuenta { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 22px 6px; }
.sin-resultados {
  text-align: center; padding: 46px 24px; border: 2px dashed var(--papel-sombra);
  border-radius: var(--radio); color: var(--tinta-suave);
}
.sin-resultados .sol { width: 46px; height: 46px; margin: 0 auto 10px; display: block; }
/* las tarjetas son flex/grid: sin esto, el atributo hidden no las ocultaría */
[data-buscable][hidden], .sin-resultados[hidden] { display: none; }
.sin-resultados strong { color: var(--tinta); }

/* --- La cabecera fija mide ~156px desde que creció (3D, logo, barra de Tilde): el primer
       texto de cada sección y artículo (las migas) quedaba debajo. Hueco real para él --- */
.landing-hero, .articulo-cabecera { padding-top: 182px; }
/* "Me gusta" en la cabecera del artículo: con su corazón, como en las tarjetas (antes, un número suelto) */
.articulo-datos .likes::before { content: "♥ "; color: var(--carmin); }

/* --- Artículo con poco contenido: una columna centrada, sin índice --- */
.articulo-layout.compacto { grid-template-columns: minmax(0, 760px); justify-content: center; }

/* --- Página de error 404 --- */
.pagina-error { padding: 170px 0 80px; text-align: center; }
.pagina-error .error-numero {
  font-family: var(--serif); font-weight: 900; font-style: italic; line-height: 1;
  font-size: clamp(6rem, 18vw, 11rem); color: var(--carmin); position: relative; display: inline-block;
}
.pagina-error .error-numero .sol { position: absolute; width: .42em; height: .42em; right: -.34em; top: -.1em; }
.pagina-error h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(var(--t-2xl), 3.6vw, var(--t-3xl)); margin: 18px 0 10px; }
.pagina-error .error-sub { color: var(--tinta-suave); max-width: 34em; margin: 0 auto 30px; }
.error-secciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin-top: 34px; }
.error-secciones a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta);
  background: var(--blanco); padding: 10px 18px; border-radius: 999px; font-weight: 500; font-size: var(--t-sm);
  box-shadow: 0 6px 16px rgba(38,25,15,.1); transition: transform .15s;
}
@media (hover: hover) { .error-secciones a:hover { transform: scale(1.05); } }
.error-secciones .punto { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.punto[data-color="video"] { background: var(--tipo-video); }
.punto[data-color="test"]  { background: var(--tipo-test); }

/* --- Páginas legales (privacidad, cookies, aviso legal) --- */
.legal .detalle h3 { font-family: var(--serif); font-size: var(--t-base); margin: 20px 0 8px; }
.legal .detalle ul { padding-left: 22px; margin-bottom: 16px; }
/* Enlaces legales del pie */
.pie .pie-legal { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.pie .pie-legal a { display: inline-block; padding: 4px 0; min-height: 24px; font-size: var(--t-sm); color: #B9AE9E; }
@media (hover: hover) { .pie .pie-legal a:hover { padding-left: 0; color: var(--blanco); } }

/* --- Guía de componentes (componentes.html, página interna, noindex) --- */
.guia-bloque { padding: 34px 0 10px; border-top: 1px dashed var(--papel-sombra); }
.guia-bloque:first-of-type { border-top: 0; }
.guia-bloque > h2 { font-family: var(--serif); font-size: var(--t-xl); margin-bottom: 6px; }
.guia-nota { font-size: var(--t-sm); color: var(--tinta-suave); margin-bottom: 20px; max-width: 46em; }
.guia-nota code { font-family: var(--mono); font-size: .82em; background: var(--papel-sombra); padding: 1px 6px; border-radius: 4px; }
.guia-par { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.guia-etiqueta { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--carmin); margin-bottom: 8px; display: block; }
.guia-bloque > .tarjeta-meta { flex-wrap: wrap; }

@media (max-width: 900px) {
  .guia-par { grid-template-columns: 1fr; }
  /* La cabecera del artículo anulaba el margen lateral de .contenedor: texto pegado al borde */
  .articulo-cabecera { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 600px) {
  .test-portada { grid-template-columns: 1fr; padding: 26px 22px; gap: 16px; }
  .test-sello { width: 72px; height: 72px; font-size: var(--t-xl); border-radius: 18px; }
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { border-bottom: 0; padding-bottom: 2px; background: none; }
  .ficha dd { padding-top: 2px; }
  .prosa .img-izq, .prosa .img-der { float: none; max-width: 100%; margin: 20px auto; }
  .resultados p { flex-direction: column; gap: 6px; }
  .pagina-error { padding-top: 190px; }
  /* En móvil la cabecera mide ~165px: las migas y el primer texto quedaban debajo */
  .landing-hero { padding-top: 188px; }
  .articulo-cabecera { padding-top: 188px; }
}

/* ============================================================
   IMÁGENES DE LAS NOTICIAS: la MISMA imagen fuera (tarjeta) y dentro (artículo),
   presentada según su tipo (migracion/datos/portadas.json; en el panel, "Tipo de imagen"):
   foto → recortada en la tarjeta y grande bajo el título;
   cartel → nunca recortado: entero, enmarcado y colgado con chincheta;
   sello (logo o gráfico pequeño) → sin ampliar, sobre blanco.
   Las fotos del texto se agrupan en un mosaico al final ("In pictures").
   ============================================================ */
.tarjeta-media.tm-cartel, .tarjeta-media.tm-sello { display: grid; place-items: center; padding: 18px; }
.tarjeta-media.tm-cartel {
  background: radial-gradient(circle at 10px 10px, rgba(38,25,15,.09) 2.5px, transparent 3px) 0 0 / 24px 24px, var(--papel-sombra);
}
.tarjeta-media.tm-cartel img {
  width: auto; height: auto; max-width: 80%; max-height: 100%; object-fit: contain;
  background: var(--blanco); padding: 5px; border-radius: 4px;
  box-shadow: 0 10px 22px rgba(38,25,15,.22); transform: rotate(-2deg);
}
.tarjeta-media.tm-sello { background: var(--blanco); border-bottom: 1px solid var(--papel-sombra); }
.tarjeta-media.tm-sello img { width: auto; height: auto; max-width: 72%; max-height: 82%; object-fit: contain; }
@media (hover: hover) { .tarjeta-articulo:hover .tarjeta-media.tm-cartel img { transform: rotate(0deg) scale(1.04); } }
@media (hover: hover) { .tarjeta-articulo:hover .tarjeta-media.tm-sello img { transform: scale(1.04); } }

.portada-articulo { max-width: var(--ancho); margin: 4px auto 0; padding: 0 24px; }
.portada-articulo img {
  display: block; width: 100%; height: auto; aspect-ratio: 21/9; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radio); box-shadow: 0 14px 36px rgba(38,25,15,.18);
}
.cartel-articulo { float: right; width: min(42%, 330px); margin: 6px 0 26px 34px; text-align: center; }
.cartel-articulo a {
  display: block; position: relative; background: var(--blanco); padding: 8px; border-radius: 6px;
  box-shadow: 0 14px 30px rgba(38,25,15,.2); transform: rotate(1.5deg); transition: transform .3s ease;
}
.cartel-articulo a::before {   /* chincheta */
  content: ""; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: var(--carmin); box-shadow: 0 2px 5px rgba(38,25,15,.35);
}
.cartel-articulo a:focus-visible { transform: rotate(0deg) scale(1.02); }
@media (hover: hover) { .cartel-articulo a:hover { transform: rotate(0deg) scale(1.02); } }
.cartel-articulo img { display: block; width: 100%; height: auto; border-radius: 3px; }
.cartel-articulo figcaption {
  margin-top: 14px; font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.sello-articulo {
  float: right; width: min(36%, 220px); margin: 6px 0 18px 28px; padding: 14px;
  background: var(--blanco); border-radius: 14px; box-shadow: 0 8px 22px rgba(38,25,15,.08);
}
.sello-articulo img { display: block; width: 100%; height: auto; }
.galeria-articulo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.galeria-articulo figure { margin: 0; }
.galeria-articulo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 12px; background: var(--papel-sombra);
}
.galeria-articulo > figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.galeria-articulo > figure:first-child:nth-last-child(odd) img { aspect-ratio: 16/9; }
.texto-articulo::after { content: ""; display: table; clear: both; }

@media (max-width: 600px) {
  .portada-articulo { padding: 0 16px; }
  .portada-articulo img { aspect-ratio: 16/10; }
  .cartel-articulo, .sello-articulo { float: none; width: auto; max-width: 320px; margin: 10px auto 28px; }
  .sello-articulo { max-width: 200px; }
}

/* Pantallas táctiles: todo lo que se toca mide al menos 44 px de alto (recomendación de Apple y WCAG AAA).
   Va al final del archivo para ganar a las reglas de cada componente. */
@media (pointer: coarse) {
  .pie a:not(.sendar-firma) { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .pie .pie-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .indice a { min-height: 44px; }
  .error-secciones a { min-height: 44px; }
  .filtros a, .test-alternativas a, .enlace-externo, .tilde-ofertas, .hero-scroll { display: inline-flex; align-items: center; min-height: 44px; }
}