/* ============================================================================
   components.css — LA ESCUELA DE CANAL (escuela_v2)
   Capa de componentes de CUERPO de página. Reutiliza el marcado de escuela/
   re-tematizado a los tokens LEC (tokens.css).
   NO redefine: .container, .btn, header/footer/mega/hero/areas (viven en styles.css).
   ========================================================================== */

/* ============================================================================
   0. FONT AWESOME (glifos usados por el marcado <i class="fa ...">)
   ========================================================================== */
/* Font Awesome retirado: 160 KB (fa-solid + fa-brands) en las 29 páginas para un
   único glifo, el chevron de dos acordeones. Ese chevron se dibuja ahora con un
   borde girado (.acc-chevron), sin cargar ninguna fuente de iconos. Los iconos
   sociales del pie y el resto de la web ya eran SVG propios (includes/icons.php). */
.acc-chevron {
  display: inline-block;
  width: .5em;
  height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}

/* Glifos (extraídos de escuela/assets/css/styles.css) */
.fa-plus:before                { content: "\f067"; }
.fa-music:before               { content: "\f001"; }
.fa-check:before               { content: "\f00c"; }
.fa-clock:before               { content: "\f017"; }
.fa-user:before                { content: "\f007"; }
.fa-sun:before                 { content: "\f185"; }
.fa-calendar-alt:before        { content: "\f073"; }
.fa-long-arrow-alt-right:before{ content: "\f30b"; }
.fa-long-arrow-alt-left:before { content: "\f30a"; }
.fa-map-marker-alt:before      { content: "\f3c5"; }
.fa-arrow-up:before            { content: "\f062"; }
.fa-phone:before               { content: "\f095"; }
.fa-envelope:before            { content: "\f0e0"; }
.fa-paper-plane:before         { content: "\f1d8"; }
.fa-chevron-down:before        { content: "\f078"; }
.fa-chevron-right:before       { content: "\f054"; }
.fa-chevron-left:before        { content: "\f053"; }
.fa-chevron-up:before          { content: "\f077"; }
.fa-users:before               { content: "\f0c0"; }
.fa-guitar:before              { content: "\f7a6"; }
.fa-info-circle:before         { content: "\f05a"; }
.fa-facebook-f:before          { content: "\f39e"; }
.fa-instagram:before           { content: "\f16d"; }
.fa-youtube:before             { content: "\f167"; }
.fa-twitter:before             { content: "\f099"; }

/* ============================================================================
   1. REJILLA BOOTSTRAP MÍNIMA (.row / .col-* / utilidades)
   ========================================================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.row > [class*="col-"] {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* base (móvil): cada columna a 100%, salvo las col-N numéricas */
[class*="col-lg-"], [class*="col-md-"], [class*="col-sm-"], [class*="col-xl-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
.col-12 { flex: 0 0 100%;         max-width: 100%; }
.col-6  { flex: 0 0 50%;          max-width: 50%; }
.col-4  { flex: 0 0 33.333333%;   max-width: 33.333333%; }
.col-3  { flex: 0 0 25%;          max-width: 25%; }
.col    { flex: 1 1 0; max-width: 100%; }

/* >= 576px */
@media (min-width: 576px) {
  .col-sm-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}
/* >= 768px */
@media (min-width: 768px) {
  .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}
/* >= 992px */
@media (min-width: 992px) {
  .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
  .col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
}

/* Utilidades */
.d-flex          { display: flex; }
.flex-wrap       { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.text-center     { text-align: center; }
.w-100           { width: 100%; }
.ml-auto         { margin-left: auto; }
.mt-4            { margin-top: var(--sp-6); }
.mb-0            { margin-bottom: 0; }
.position-static { position: static !important; }
.hidden          { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.list-unstyled { list-style: none; margin: 0; padding: 0; }

/* ============================================================================
   2. BOTÓN .btn-default (terracota LEC, hover vino) + variantes
   ========================================================================== */
.btn-default {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  background-color: var(--lec-terracota);
  padding: .78rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.btn-default:hover,
.btn-default:focus-visible {
  color: #fff;
  background-color: var(--lec-vino);
  transform: translateY(-1px);
}
.btn-default i {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: .78rem;
  color: var(--lec-terracota);
  background-color: #fff;
  border-radius: 50%;
  transition: color var(--transition);
}
.btn-default:hover i { color: var(--lec-vino); }

.btn-light {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--lec-vino);
  background: var(--lec-blanco);
  padding: .78rem 1.5rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: all var(--transition);
}
.btn-light:hover { background: var(--lec-melocoton); color: var(--lec-vino); border-color: var(--lec-melocoton); }

/* Variante clara del botón principal (para acompañar a un .btn-default sólido) */
.btn-default--ghost {
  color: var(--lec-vino);
  background: var(--lec-blanco);
  border-color: var(--color-border);
}
.btn-default--ghost:hover,
.btn-default--ghost:focus-visible {
  color: var(--lec-vino);
  background: var(--lec-melocoton);
  border-color: var(--lec-melocoton);
}
.btn-default--ghost i { color: var(--lec-terracota); background: var(--lec-melocoton); }

/* Botón de vídeo: el mismo botón, con más cuerpo y el icono de reproducción.
   En las fichas de vídeo antiguas ese enlace es todo el contenido —el
   reproductor incrustado no se recupera, para no meter terceros en la
   página—, así que tiene que cantar más que un botón normal. */
.btn-default--video {
  font-size: var(--fs-base);
  padding: .85rem 1.6rem;
  gap: .6rem;
  box-shadow: var(--shadow);
}
.btn-default--video .lec-icon { flex: none; }
.btn-default--video:hover,
.btn-default--video:focus-visible { transform: translateY(-1px); }

/* ---- Líneas huérfanas -----------------------------------------------------
   Utilidad para trozos que no deben partirse nunca («Bono 10 h», «45 min.»,
   importes con su símbolo). Se aplica al fragmento concreto, no a todo el
   texto: forzar nowrap de más provoca desbordamiento horizontal en móvil. */
.nowrap { white-space: nowrap; }

/* El tramo de edad de una asignatura, bajo su nombre. Va dentro del <h1>/<h3>
   —forma parte del título— pero en su propia línea y con menos peso, para que
   «Música para peques» y «de 6 meses a 6 años» no compitan. */
.class-info__edad {
  display: block;
  font-size: .78em;
  font-weight: var(--fw-medium, 500);
  color: var(--color-text-soft);
  letter-spacing: 0;
  margin-top: 2px;
}

/* Botonera de la ficha de asignatura: la CTA de reserva y, en las grupales de
   peques, el enlace a sus horarios. En móvil se apilan solas por el wrap; no
   se fuerza ancho completo para que no parezcan dos acciones del mismo peso. */
.asignatura-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Enlaces dentro de un párrafo: subrayados, no solo de otro color. El
   terracota junto al texto gris no llega al 3:1 que exige distinguirlos solo
   por color (lo marcaba PageSpeed en Jazz). Incluye los que se escriben en el
   panel con [texto](ruta). */
.class-single-content p a:not(.btn):not(.btn-default) { text-decoration: underline; text-underline-offset: 2px; }

/* Blindaje: las reglas de enlaces de contenido de cada página ($extra_head se
   imprime ANTES que este archivo) no deben pisar el color de los botones. */
.class-single-content a.btn-default:not(.btn-default--ghost),
.acc-panel__inner a.btn-default:not(.btn-default--ghost),
.legal-section a.btn-default:not(.btn-default--ghost),
.class-single-content a.btn:not(.btn--ghost),
.acc-panel__inner a.btn:not(.btn--ghost),
.legal-section a.btn:not(.btn--ghost) {
  color: #fff;
  text-decoration: none;
}
.class-single-content a.btn-default--ghost,
.acc-panel__inner a.btn-default--ghost,
.legal-section a.btn-default--ghost,
.class-single-content a.btn--ghost,
.acc-panel__inner a.btn--ghost,
.legal-section a.btn--ghost {
  color: var(--lec-vino);
  text-decoration: none;
}

/* ============================================================================
   3. CABECERA DE PÁGINA (.pager-section / .pager-content / .page-titlee)
   ========================================================================== */
.pager-section {
  /* Lado de la ilustración de sección (escritorio). El título le reserva ese
     hueco a los dos lados, ver más abajo. */
  --pager-ilu: 210px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 88% 30%, var(--lec-melocoton) 0%, transparent 62%),
    var(--lec-crema-2);
  padding: var(--sp-12) 0;
}
/* Monograma LEC de marca de agua. Va por CSS y no por <img> en cada página:
   antes se copiaba a mano y 16 de las 29 cabeceras se habían quedado sin él. */
.pager-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(30vw, 300px);
  aspect-ratio: 5906 / 3573;
  background: url('../img/logo-lec-monograma.png') center / contain no-repeat;
  opacity: .10;
  z-index: 1;
  pointer-events: none;
}
/* Si la sección tiene ilustración propia, sustituye al monograma: se va a la
   derecha, más grande y más visible. El <body> ya trae data-page, así que se
   resuelve solo desde CSS sin tocar las 29 páginas.
   El ?v= obliga a pedir la imagen de nuevo al sustituirla con el mismo
   nombre (el servidor la cachea 60 días como «immutable»): si se cambia
   una, hay que cambiarle también la fecha. */
body[data-page="la-escuela"] .pager-section::after             { background-image: url('../img/secciones/la-escuela.webp?v=20261027'); }
body[data-page="nuestras-clases"] .pager-section::after        { background-image: url('../img/secciones/nuestras-clases.webp?v=20261027'); }
body[data-page="peques"] .pager-section::after                 { background-image: url('../img/secciones/peques.webp?v=20261027'); }
body[data-page="espacio-musica-antigua"] .pager-section::after { background-image: url('../img/secciones/espacio-musica-antigua.webp?v=20261027'); }
body[data-page="jazz"] .pager-section::after                   { background-image: url('../img/secciones/jazz.webp?v=20261027'); }
body[data-page="aulas-de-ensayo"] .pager-section::after        { background-image: url('../img/secciones/aulas-de-ensayo.webp?v=20261027'); }
body[data-page="otras-actividades"] .pager-section::after      { background-image: url('../img/secciones/otras-actividades.webp?v=20261027'); }
body[data-page="contacto"] .pager-section::after               { background-image: url('../img/secciones/contacto.webp'); }

body[data-page="la-escuela"] .pager-section::after,
body[data-page="nuestras-clases"] .pager-section::after,
body[data-page="peques"] .pager-section::after,
body[data-page="espacio-musica-antigua"] .pager-section::after,
body[data-page="jazz"] .pager-section::after,
body[data-page="aulas-de-ensayo"] .pager-section::after,
body[data-page="otras-actividades"] .pager-section::after,
body[data-page="contacto"] .pager-section::after {
  left: auto;
  /* Alineada con el container (1200px centrado), no con el borde de la ventana:
     en pantallas anchas se despegaba del contenido y en las justas se salía y
     el overflow:hidden la cortaba. */
  right: max(var(--sp-6), calc((100% - var(--container)) / 2 + var(--sp-6)));
  transform: translateY(-50%);
  /* Dimensionada por ALTURA: la sección es baja y con un ancho fijo la
     ilustración desbordaba y el overflow:hidden la decapitaba. */
  height: min(80%, var(--pager-ilu));
  width: auto;
  aspect-ratio: 1;
  opacity: .62;
}
/* Los títulos largos (fichas de actividad o de asignatura) llegaban hasta la
   ilustración de la derecha y se montaban encima (lo vio la escuela el
   07/11/2026). El título le reserva su hueco a los dos lados, para seguir
   centrado; entre 992 y 1199px la ilustración baja a 160px para que los títulos
   cortos («Otras Actividades») no se partan. */
@media (max-width: 1199px) { .pager-section { --pager-ilu: 160px; } }
@media (min-width: 992px) {
  body[data-page="la-escuela"] .pager-content,
  body[data-page="nuestras-clases"] .pager-content,
  body[data-page="peques"] .pager-content,
  body[data-page="espacio-musica-antigua"] .pager-content,
  body[data-page="jazz"] .pager-content,
  body[data-page="aulas-de-ensayo"] .pager-content,
  body[data-page="otras-actividades"] .pager-content,
  body[data-page="contacto"] .pager-content {
    padding-inline: calc(var(--pager-ilu) + var(--sp-6));
  }
}
/* Por debajo de 992px el título centrado llega hasta la ilustración y se
   montaban uno sobre otro (lo vio la escuela en el móvil el 27/10/2026: los
   iconos nuevos son vino oscuro, los anteriores eran trazos claros). Probada
   como marca de agua detrás del título, en Peques quedaba una mancha. Ahí la
   ilustración pasa a ir pequeña, entera y nítida, encima del título. */
@media (max-width: 991px) {
  /* Lo mismo con el monograma LEC de las páginas sin ilustración propia
     (legales, 404): pequeño encima del título en vez de detrás. */
  .pager-section::after { display: none; }
  .pager-content::before {
    content: '';
    display: block;
    width: 64px;
    height: 40px;
    margin: 0 auto var(--sp-2);
    background: url('../img/logo-lec-monograma.png') center / contain no-repeat;
    opacity: .55;
  }
  body[data-page="la-escuela"] .pager-content::before,
  body[data-page="nuestras-clases"] .pager-content::before,
  body[data-page="peques"] .pager-content::before,
  body[data-page="espacio-musica-antigua"] .pager-content::before,
  body[data-page="jazz"] .pager-content::before,
  body[data-page="aulas-de-ensayo"] .pager-content::before,
  body[data-page="otras-actividades"] .pager-content::before,
  body[data-page="contacto"] .pager-content::before {
    /* 96px (antes 64): la escuela los pidió algo más grandes en el móvil
       (07/11/2026). */
    width: 96px;
    height: 96px;
    opacity: 1;
  }
  body[data-page="la-escuela"] .pager-content::before             { background-image: url('../img/secciones/la-escuela.webp?v=20261027'); }
  body[data-page="nuestras-clases"] .pager-content::before        { background-image: url('../img/secciones/nuestras-clases.webp?v=20261027'); }
  body[data-page="peques"] .pager-content::before                 { background-image: url('../img/secciones/peques.webp?v=20261027'); }
  body[data-page="espacio-musica-antigua"] .pager-content::before { background-image: url('../img/secciones/espacio-musica-antigua.webp?v=20261027'); }
  body[data-page="jazz"] .pager-content::before                   { background-image: url('../img/secciones/jazz.webp?v=20261027'); }
  body[data-page="aulas-de-ensayo"] .pager-content::before        { background-image: url('../img/secciones/aulas-de-ensayo.webp?v=20261027'); }
  body[data-page="otras-actividades"] .pager-content::before      { background-image: url('../img/secciones/otras-actividades.webp?v=20261027'); }
  body[data-page="contacto"] .pager-content::before               { background-image: url('../img/secciones/contacto.webp'); }
}

.pager-content { position: relative; z-index: 2; }
.pager-content > h1,
.pager-content > h2 {
  color: var(--color-heading);
  font-size: var(--fs-3xl);
  line-height: 1.08;
  margin-bottom: var(--sp-2);
}
.pager-content > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pager-content > ul li {
  display: inline-block;
  position: relative;
  padding: 0 14px;
}
.pager-content > ul li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 1px;
  height: 14px;
  background-color: var(--color-border);
  transform: translateY(-50%);
}
.pager-content > ul li:last-child:before { display: none; }
.pager-content > ul li a,
.pager-content > ul li span {
  display: inline-block;
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
}
.pager-content > ul li a:hover { color: var(--color-accent); }

.page-titlee {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.page-titlee.page-titlee-image {
  width: min(30vw, 300px);
  opacity: .10;
}
.page-titlee.page-titlee-image img { display: block; width: 100%; height: auto; }

/* Barra de acciones sobre listados */
.events-toolbar,
.salas-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  justify-content: space-between;
  margin: var(--sp-8) 0 var(--sp-6);
}
/* `space-between` con un solo hijo lo pega al inicio de la línea, así que bajo
   una cabecera centrada el botón quedaba suelto a la izquierda. */
.section-lead.text-center + .events-toolbar { justify-content: center; }

/* Tarifas de alquiler en la ficha de aula: tabla compacta dentro de la tarjeta
   lateral de información. */
.sala-tarifas {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
/* Las columnas de precio necesitan aire por la izquierda: sin él «Hora» y
   «Bono 10 h» se tocaban y se leían como una sola palabra, «HoraBono 10 h». */
.sala-tarifas th,
.sala-tarifas td { padding: 5px 0 5px var(--sp-3); text-align: right; vertical-align: top; }

/* Y no deben partirse: el importe se quedaba como «15» con el «€» debajo. Los
   nombres de fila sí pueden seguir ocupando dos líneas, que ahí sobra sitio. */
.sala-tarifas thead th,
.sala-tarifas tbody td { white-space: nowrap; }

.sala-tarifas thead th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-soft);
  border-bottom: 1px solid var(--color-border);
}
.sala-tarifas tbody th {
  text-align: left;
  font-weight: var(--fw-normal);
  color: var(--color-text-soft);
  padding-left: 0;
  padding-right: var(--sp-3);
}
.sala-tarifas tbody td { font-weight: var(--fw-semibold); color: var(--color-text); }
.sala-tarifas__nota {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}

/* ============================================================================
   4. TÍTULOS DE SECCIÓN (.section-title / .section-lead)
   ========================================================================== */
.section-title { margin-bottom: var(--sp-12); }
.section-title > h2 {
  color: var(--color-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}
.section-title > h2 > span { color: var(--color-accent); }
.section-title p {
  color: var(--color-text-soft);
  max-width: 560px;
  margin: 0 auto;
}

.section-lead { margin-bottom: var(--sp-8); }
.section-lead h2 {
  color: var(--color-heading);
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-3);
}
.section-lead p {
  color: var(--color-text-soft);
  font-size: var(--fs-lg);
  max-width: 68ch;
}
/* Con `text-center` se centraba el h2 pero no el párrafo: su caja de 68ch seguía
   anclada a la izquierda del contenedor y el bloque salía descuadrado. Solo
   afecta a las cabeceras marcadas como centradas; el resto de `.section-lead`
   quiere el párrafo alineado a la izquierda y se queda como está. */
.section-lead.text-center p { margin-inline: auto; }

/* ============================================================================
   5. REJILLA DE FICHAS (.classes-section / .classes-col / .class-thumb ...)
   ========================================================================== */
.classes-page { padding: var(--sp-12) 0 var(--sp-16); }
.classes-section { padding-bottom: var(--sp-8); }
.classes-section .row { row-gap: var(--sp-8); }

.classes-col {
  height: 100%;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.classes-col:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.class-thumb {
  position: relative;
}
.class-thumb:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--lec-terracota);
  border-radius: 0 0 0 0;
  z-index: 1;
}
.class-thumb > img,
.class-thumb > a > img {
  width: 100%;
  min-height: 180px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.class-thumb .crt-btn {
  position: absolute;
  bottom: -19px;
  right: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  background: var(--lec-terracota);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), transform var(--transition);
}
.class-thumb .crt-btn:hover { background: var(--lec-vino); color: #fff; transform: scale(1.06); }

.class-info {
  padding: var(--sp-8) var(--sp-4) var(--sp-6);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}
.class-info > h3 {
  font-size: var(--fs-lg);
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-3);
}
.class-info > h3 a { color: var(--color-heading); }
.class-info > h3 a:hover { color: var(--color-accent); }
.class-info > span {
  display: block;
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.class-info > p {
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

/* Profesorado de la tarjeta de asignatura: pila de avatares + rótulo.
   Vive aquí porque lo usan el listado de clases y la home por igual. */
.class-info__teacher {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}
/* La tarjeta es estrecha: avatares algo menores que en la ficha. */
.class-info__teacher .profes-pila { --pila-tam: 40px; flex: none; padding: 0; }
.class-info__teacher a { color: var(--color-heading); font-weight: var(--fw-semibold); }
/* El globo del tooltip sale por encima del borde de la tarjeta: sin esto lo
   recortaría el redondeo de .class-info. */
.classes-col:has(.class-info__teacher),
.class-info:has(.class-info__teacher) { overflow: visible; }

/* Meta con profe + CTA (tarjeta asignatura) */
.asignaturas-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}
.posted-by { display: flex; align-items: center; gap: .55rem; }
.posted-by > img,
.asignaturas-card__teacher > img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.posted-by a,
.asignaturas-card__teacher a {
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.posted-by a:hover { color: var(--color-accent); }
.asignaturas-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--color-accent-ink);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.asignaturas-card__cta:hover { color: var(--lec-vino); }
.asignaturas-card__cta i { font-size: .82rem; }
.asignaturas-card__meta--sidebar { justify-content: flex-start; }

/* ============================================================================
   6. HERO DE DETALLE DE ASIGNATURA (.asignatura-hero*)
   ========================================================================== */
.asignatura-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
}
.asignatura-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.asignatura-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.asignatura-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(94,21,25,.35) 0%, rgba(94,21,25,.78) 100%);
}
.asignatura-hero .container { position: relative; z-index: 2; }
.asignatura-hero-content {
  padding: var(--sp-16) 0;
  max-width: 760px;
}
.asignatura-hero-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--lec-terracota);
  padding: .3rem .9rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}
.asignatura-hero-content h1 { color: #fff; margin-bottom: var(--sp-4); }
.asignatura-hero-breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
}
.asignatura-hero-breadcrumb li { display: inline-block; position: relative; padding: 0 14px 0 0; margin-right: 10px; }
.asignatura-hero-breadcrumb li:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 13px;
  background: rgba(255,255,255,.5);
  transform: translateY(-50%);
}
.asignatura-hero-breadcrumb li:last-child:after { display: none; }
.asignatura-hero-breadcrumb a { color: #f3e0d2; font-size: var(--fs-sm); }
.asignatura-hero-breadcrumb a:hover { color: #fff; }
.asignatura-hero-breadcrumb span { color: #fff; font-size: var(--fs-sm); }

/* ============================================================================
   7. DETALLE DE ASIGNATURA (contenido + sidebar)
   ========================================================================== */
.page-content { padding: var(--sp-16) 0; }
.asignatura-detail-main { padding: var(--sp-16) 0; }
.asignatura-detail-main .row { row-gap: var(--sp-8); }

.class-single-content { max-width: 780px; }
.class-single-content h2 {
  color: var(--color-heading);
  font-size: var(--fs-2xl);
  line-height: 1.18;
  margin-bottom: var(--sp-4);
}
.class-single-content h3 {
  color: var(--color-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: var(--sp-8) 0 var(--sp-4);
}
/* CUERPO DE TEXTO ÚNICO de las páginas de contenido.
   Antes cada página lo redefinía en su propio <style> y convivían tres cuerpos
   (16/18px), tres interlineados (1.65/1.7/1.75), dos separaciones (20/24px) y
   tres colores —incluido un #575757 ajeno a la paleta—. Esta es ahora la única
   definición: si una página necesita algo distinto, es que hay que revisarla,
   no añadir otra excepción. */
.class-single-content p {
  color: var(--color-text);
  font-size: var(--fs-lg);
  line-height: 1.75;
  margin: 0 0 var(--sp-6);
}
.asignatura-section-intro__subtitle {
  color: var(--color-accent-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--sp-6);
}

/* Migas superiores (ocultas en detalle: el hero ya las muestra) */
.meta-box {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: none;
}
.meta-box li { display: inline-block; position: relative; padding: 0 12px 0 0; margin-right: 8px; }
.meta-box li a { color: var(--color-text-soft); font-size: var(--fs-sm); }
.meta-box li span { color: var(--color-heading); font-size: var(--fs-sm); }

/* Listas con icono (instrumentos / actividades) */
.ordrd {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--sp-8);
}
.asignatura-bullet-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--sp-3);
  color: var(--color-text);
  line-height: 1.55;
}
.asignatura-bullet-list__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lec-melocoton);
  color: var(--lec-terracota);
  font-size: .72rem;
}
.asignatura-bullet-list__text { flex: 1 1 auto; min-width: 0; }

/* Galería de detalle */
.class-gallery { margin-bottom: var(--sp-8); }
.class-gallery-img { margin-bottom: var(--sp-6); }
.class-gallery-img > a,
.class-gallery-img > a img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
/* Marco fijo: las fotos de las aulas se suben tal cual desde el panel, y una
   vertical salía a toda su altura y descuadraba la ficha. Todas van al mismo
   3:2 recortadas desde el centro, como las fotos de profesorado. La foto
   entera sigue viéndose al abrirla en grande. */
.class-gallery-img > a img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.class-gallery .row { margin: 0 -10px; }
.class-gallery .row > div { padding: 0 10px; }

/* Sidebar de detalle */
.class-sidebar { position: relative; }
.class-sidebar.position-static { position: static; }
.widget { margin-bottom: var(--sp-8); }
.widget-title {
  color: var(--color-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
}
.widget-information {
  background: var(--color-surface);
  border: 2px solid var(--lec-melocoton);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
}
.asignatura-info-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}
.asignatura-info-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  margin-bottom: var(--sp-4);
}
.asignatura-info-list li:last-child { margin-bottom: 0; }
.asignatura-info-list__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lec-terracota);
  font-size: 1.05rem;
}
/* h3 donde el título del lateral es h2 (ficha de asignatura) y h4 donde es h3:
   así no se salta ningún nivel de encabezado. */
.asignatura-info-list__body h3,
.asignatura-info-list__body h4 {
  margin: 0 0 2px;
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  font-style: italic;
  font-weight: var(--fw-normal);
}
.asignatura-info-list__body span {
  display: block;
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* Ficha del profe dentro del widget */
.tech-info { padding-top: var(--sp-6); text-align: center; }
.tech-tble { display: flex; align-items: center; margin-bottom: var(--sp-6); text-align: left; }
.tech-avatar {
  display: block;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
}
.tech-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tch-info { padding-left: var(--sp-4); }
.tch-info h3 { color: var(--color-heading); font-size: var(--fs-lg); margin-bottom: 2px; }
.tch-info span { display: block; color: var(--color-text-soft); font-size: var(--fs-sm); }

/* ============================================================================
   8. REJILLA DE PROFESORES (.teachers-section / .teacher ...)
   ========================================================================== */
.teachers-section { padding: var(--sp-12) 0 var(--sp-16); }
.teachers-section.teacher-page { padding-top: var(--sp-16); }
.teachers .row { row-gap: var(--sp-12); }

.teacher { height: 100%; }
.teacher-img { position: relative; margin-bottom: var(--sp-4); }
.teacher-img > a { display: block; }
/* Proporción fija 3:2 para TODAS las tarjetas. Sin esto cada imagen imponía la
   suya y la fila se descuadraba: el placeholder es 800x1066 (vertical) frente a
   las fotos, que son horizontales. Con aspect-ratio + cover da igual lo que
   mida el fichero que se suba. */
.teacher-img img { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); object-fit: cover; }
.teacher-info { padding: 0 var(--sp-4); }
.teacher-info > h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}
.teacher-info > h3 a { color: var(--color-heading); }
.teacher-info > h3 a:hover { color: var(--color-accent); }
.teacher-info > span {
  display: block;
  color: var(--color-accent-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}
.teacher-info > p { color: var(--color-text-soft); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------------
   PILA DE PROFESORADO (.profes-pila)
   Avatares solapados, cada uno enlazando a su ficha, con tooltip propio.
   Se usa en el listado de clases y en la ficha de asignatura: por eso vive aquí
   y no en el <style> de una página. El tamaño se ajusta con --pila-tam.

   El tooltip NO es el `title` nativo: aquel tarda casi un segundo en aparecer,
   no admite estilo y no sale al navegar con teclado. Con data-nombre + ::after
   es inmediato y responde también a :focus-visible.
   --------------------------------------------------------------------------- */
.profes-pila {
  --pila-tam: 48px;
  list-style: none;
  display: flex;
  margin: 0;
  padding: 6px 0 0;
}
.profes-pila li + li { margin-left: calc(var(--pila-tam) / -3.4); }
.profes-pila a {
  position: relative;
  display: block;
  border-radius: 50%;
  transition: transform .18s ease;
}
.profes-pila img {
  display: block;
  width: var(--pila-tam);
  height: var(--pila-tam);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lec-blanco);
  box-shadow: var(--shadow-sm);
}
.profes-pila a:hover,
.profes-pila a:focus-visible { transform: translateY(-4px); z-index: 3; }
.profes-pila a::after {
  content: attr(data-nombre);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--lec-vino);
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 1.3;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.profes-pila a:hover::after,
.profes-pila a:focus-visible::after { opacity: 1; }
/* El primer avatar va pegado al borde izquierdo de la tarjeta: su globo, si se
   centrara, se saldría del contenedor. Se ancla a la izquierda. */
.profes-pila li:first-child a::after { left: 0; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .profes-pila a { transition: none; }
}

/* Materias que imparte, en chips. Mismo lenguaje visual que los estilos de
   Combos (.style-chips), para que la web hable de una sola manera. */
.teacher-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--sp-2) 0 0;
  padding: 0;
}
.teacher-tags li {
  background: var(--lec-melocoton);
  color: var(--lec-vino);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

/* ============================================================================
   9. DETALLE DE PROFESOR (.teacher-single-page ...)
   ========================================================================== */
.teacher-detail-page-content { padding: var(--sp-12) 0 var(--sp-16); }
.teacher-single-page { margin-bottom: var(--sp-12); }
.teacher-single-page .row { row-gap: var(--sp-8); }
.teacher-coly { position: relative; }
.teacher-coly > img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.teacher-coly .social-icons {
  text-align: center;
  position: relative;
  top: -25px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.teacher-coly .social-icons li { display: inline-block; margin: 0 4px; }
.teacher-coly .social-icons li a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--lec-terracota);
  transition: background var(--transition);
}
.teacher-coly .social-icons li a:hover { background: var(--lec-vino); color: #fff; }

.teacher-content { padding-left: var(--sp-6); }
.teacher-content > h2 {
  color: var(--color-accent-ink);
  font-size: var(--fs-xl);
  font-style: italic;
  margin-bottom: var(--sp-6);
}
.teacher-content p {
  color: var(--color-text);
  margin-bottom: var(--sp-6);
  max-width: 620px;
}
.teacher-content .skills-tech { max-width: 620px; margin-bottom: var(--sp-6); }
.teacher-content .skills-tech > h2 {
  color: var(--color-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-4);
}
.teacher-content .skills-tech ul { margin: 0; padding-left: 0; list-style: none; }
.teacher-content .skills-tech ul li {
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-bottom: .6rem;
}
.teacher-content .skills-tech ul li i { color: var(--lec-terracota); margin-right: .4rem; }

.teacher-content .tech-detils {
  max-width: 480px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--lec-melocoton);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  margin: 0 0 var(--sp-6);
}
.teacher-content .tech-detils li { display: flex; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.teacher-content .tech-detils li:last-child { margin-bottom: 0; }
.teacher-content .tech-detils li strong {
  display: inline-block;
  width: 145px;
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  font-style: italic;
  font-weight: var(--fw-normal);
}
.teacher-content .tech-detils li span {
  flex: 1 1 0;
  min-width: 0;
  color: var(--color-heading);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Barras de competencias */
.teacher-content .skills-tech .progess-row { position: relative; margin-bottom: var(--sp-3); }
.teacher-content .skills-tech .progess-row > span {
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  position: absolute;
  top: 0;
  right: 0;
}
.teacher-content .skills-tech .progess-row h3 {
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  margin-bottom: .5rem;
}
.progress {
  display: flex;
  overflow: hidden;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--lec-crema-2);
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--lec-terracota);
}
.progress-bar.bg-clr1 { background-color: var(--lec-terracota); }
.progress-bar.bg-clr2 { background-color: var(--lec-vino); }
.progress-bar.bg-clr3 { background-color: var(--lec-terracota-2); }
.progress-bar.bg-clr4 { background-color: var(--lec-vino-2); }

/* Tarjetas de contacto del profe */
.teacher-contact-grid { margin-top: var(--sp-2); display: grid; grid-template-columns: 1fr; gap: 10px; }
.teacher-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.teacher-contact-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--lec-terracota);
  flex: 0 0 34px;
}
.teacher-contact-card__text strong { display: block; color: var(--color-heading); font-size: var(--fs-xs); line-height: 1.2; margin-bottom: 2px; }
.teacher-contact-card__text span,
.teacher-contact-card__text a { color: var(--color-text-soft); font-size: var(--fs-xs); line-height: 1.3; word-break: break-word; }
.teacher-contact-card__text a:hover { color: var(--color-accent); }

/* ============================================================================
   10. FORMULARIOS (contacto + genéricos)
   ========================================================================== */
.page-content-contact { padding: var(--sp-16) 0; }
.mdp-contact { margin-bottom: var(--sp-16); }
.mdp-contact .row { row-gap: var(--sp-8); }
/* El row-gap de arriba es para las DOS columnas de la página (formulario e
   información), pero al ser selector descendente alcanzaba también al .row
   interno del formulario: cada bloque (mensaje, casillas, texto legal, botón)
   se separaba 32px de más. Dentro del formulario mandan sus propios márgenes. */
#contact-form .row { row-gap: 0; }

.comment-area,
.mdp-our-contacts {
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.comment-area { padding: var(--sp-8); }
.mdp-our-contacts { padding: var(--sp-8) var(--sp-6); }
.comment-area h2,
.mdp-our-contacts h2,
.contact-map-heading h2 {
  color: var(--color-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}
.contact-section-kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-ink);
  margin-bottom: var(--sp-2);
}
.contact-section-intro { color: var(--color-text-soft); margin-bottom: var(--sp-6); }

.form-group { margin-bottom: var(--sp-4); }
.form-group label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-heading); margin-bottom: .35rem; }
.form-group input,
.form-group select,
.form-group textarea,
.comment-area input,
.comment-area textarea,
.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--lec-crema);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group textarea,
.comment-area textarea { min-height: 150px; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
  outline: none;
  border-color: var(--lec-terracota);
  box-shadow: 0 0 0 3px rgba(192, 71, 42, .14);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-text-soft); opacity: .8; }

/* Consentimientos */
.consent-group { margin: var(--sp-2) 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.consent-option {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.consent-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--lec-terracota);
}
.consent-option .consent-copy { flex: 1 1 auto; line-height: 1.5; }
.consent-option a { color: var(--color-accent-ink); text-decoration: underline; }
.consent-option a:hover { color: var(--lec-vino); }
.consent-option-secondary { color: var(--color-text-soft); }

/* Campo trampa de los formularios (includes/antispam.php): fuera de la vista y
   del tabulador, pero no con display:none, que algunos robots se saltan. */
.campo-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Información básica de protección de datos, junto a las casillas. */
.aviso-datos {
  margin: var(--sp-3) 0 var(--sp-2);
  padding: var(--sp-4);
  background: var(--lec-crema-2);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-soft);
}
.aviso-datos__titulo { margin: 0 0 var(--sp-2); font-weight: var(--fw-semibold); color: var(--color-heading); }
.aviso-datos dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; }
.aviso-datos dt { font-weight: var(--fw-semibold); color: var(--color-text); }
.aviso-datos dd { margin: 0; }
/* Terracota oscuro: el normal sobre este fondo crema daba 4,1:1 (mínimo 4,5). */
.aviso-datos a { color: var(--color-accent-ink); text-decoration: underline; }
.aviso-datos__menores { margin: var(--sp-2) 0 0; }
@media (max-width: 575px) {
  .aviso-datos dl { grid-template-columns: 1fr; }
  .aviso-datos dd { margin-bottom: var(--sp-2); }
}

/* Tablas de precios y de datos en el móvil: cada fila pasa a ser una tarjeta y
   cada dato lleva delante el nombre de su columna (data-label). Deslizar una
   tabla de lado en el móvil no lo hace casi nadie, y se quedaban sin ver la
   edad y el precio (revisión móvil del 27/10/2026). La primera celda de cada
   fila, sin etiqueta, hace de título de la tarjeta. */
@media (max-width: 600px) {
  table.tabla-apilable { min-width: 0; width: 100%; border: 0; background: none; }
  .tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td, .tabla-apilable th { display: block; width: 100%; }
  .tabla-apilable tr,
  .tabla-apilable tbody tr:nth-child(even) {
    margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  }
  .tabla-apilable td, .tabla-apilable th { border: 0 !important; padding: 3px 0 !important; text-align: left !important; white-space: normal !important; }
  .tabla-apilable td[data-label] { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: var(--sp-3); }
  .tabla-apilable td[data-label]::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-soft); }
  .tabla-apilable td:empty { display: none; }
  .tabla-apilable tr > :first-child { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
  /* La nota de una aula va pegada a su tarjeta, no en una propia. */
  .tabla-apilable tr.tarifas-alquiler__nota { margin-top: calc(-1 * var(--sp-3)); padding-top: 0; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .tabla-apilable tr.tarifas-alquiler__nota > :first-child { font-size: var(--fs-sm); }
  .tarifa-table-wrap:has(.tabla-apilable) { border: 0; box-shadow: none; background: none; overflow: visible; }

  /* Tabla del titular (dos columnas): que se ajuste al ancho, sin desplazarse. */
  table.legal-table--titular { min-width: 0; }
  .legal-table--titular td { overflow-wrap: anywhere; }
  .legal-table--titular td:first-child { white-space: normal; width: 30%; }
}

.legal-note {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  line-height: 1.55;
  margin: var(--sp-2) 0 var(--sp-4);
}
.legal-note a { color: var(--color-accent-ink); }

.form-submit { margin-top: var(--sp-2); }

/* Respuesta AJAX + flash */
.response { margin-bottom: var(--sp-3); }
.response:empty { margin: 0; }
.response .text-info,
.response .failed,
.response .success,
.contact-flash,
.newsletter-flash {
  display: block;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.response .text-info { background: var(--lec-melocoton); color: var(--lec-vino); }
.response .failed,
.contact-flash.is-error,
.newsletter-flash.is-error {
  background: #f7dcd4;
  color: var(--lec-vino-2);
  border: 1px solid #e7b8ab;
}
.response .success,
.contact-flash.is-success,
.newsletter-flash.is-success {
  background: #e2efe0;
  color: #2f6b3a;
  border: 1px solid #bcdcb8;
}
.contact-flash,
.newsletter-flash { margin-bottom: var(--sp-4); }

/* Datos de contacto (columna derecha) */
.mdp-our-contacts ul { list-style: none; margin: 0; padding: 0; }
.mdp-our-contacts ul li { padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-border); }
.mdp-our-contacts ul li:last-child { border-bottom: 0; }
.mdp-our-contacts .icon-v { flex: 0 0 auto; margin-right: var(--sp-4); }
.mdp-our-contacts .icon-v img { width: 49px; height: auto; }
.mdp-our-contacts .dd-cont strong { display: block; color: var(--color-heading); font-family: var(--font-head); margin-bottom: 2px; }
.mdp-our-contacts .dd-cont span { color: var(--color-text-soft); font-size: var(--fs-sm); }
.mdp-our-contacts .dd-cont a { color: var(--color-text-soft); }
.mdp-our-contacts .dd-cont a:hover { color: var(--color-accent); }

/* ============================================================================
   11. MAPA (.mdp-map): imagen propia enlazada a Google Maps
   ========================================================================== */
.contact-map-block { margin-top: var(--sp-8); }
.contact-map-heading { margin-bottom: var(--sp-6); }
.contact-map-heading p { color: var(--color-text-soft); }
/* El mapa es una IMAGEN propia enlazada a Google Maps, no un iframe. Antes se
   incrustaba el mapa de Google tras pulsar un botón, y la escuela lo leyó como
   que «no se cargaba la ubicación». Así se ve de entrada, la página no pide
   nada a terceros y no hay cookies hasta que alguien decide ir a Google. */
.mdp-map {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  background: var(--lec-crema-2);
}
.mdp-map img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition);
}
.mdp-map:hover img,
.mdp-map:focus-visible img { transform: scale(1.02); }

/* La pastilla dice adónde lleva. Sin ella, una imagen de mapa parece
   interactiva y no lo es: se pulsa esperando arrastrar y no pasa nada. */
.mdp-map__cta {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--lec-vino);
  color: #fff;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition);
}
.mdp-map:hover .mdp-map__cta,
.mdp-map:focus-visible .mdp-map__cta { background: var(--lec-terracota); }
.mdp-map__icon { display: inline-grid; place-items: center; }

/* La atribución de OpenStreetMap va impresa abajo a la derecha de la imagen:
   ahí se pisaría con la pastilla, así que en pantallas estrechas se sube. */
@media (max-width: 575px) {
  .mdp-map__cta { right: 50%; transform: translateX(50%); bottom: var(--sp-8); }
}

/* ============================================================================
   12. NEWSLETTER (.newsletter-*)
   ========================================================================== */
.newsletter-section { padding: var(--sp-12) 0; }
.newsletter-sec {
  position: relative;
  background: linear-gradient(90deg, var(--lec-terracota) 0%, var(--lec-vino) 100%);
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.newsletter-sec .row { align-items: center; row-gap: var(--sp-6); }
.newsz-ltr-text > h2 { color: #fff; font-size: var(--fs-2xl); line-height: 1.2; margin-bottom: var(--sp-6); }
.newsletter-form { }
.newsletter-form .row { margin: 0 -10px; row-gap: 0; }
.newsletter-form .row > [class*="col-"] { padding: 0 10px; }
.newsletter-form .form-group { margin-bottom: var(--sp-4); }
.newsletter-form .form-group input {
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
}
.newsletter-form .form-group input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.newsletter-form .consent-option { color: #fff; }
.newsletter-form .consent-option a { color: #fff; }
.newsletter-form .consent-option input[type="checkbox"] { accent-color: var(--lec-vino); }
.newsletter-response { margin-bottom: var(--sp-3); }
.newsletter-response:empty { margin: 0; }
.newsz-ltr-text .btn-default { background: var(--lec-blanco); color: var(--lec-vino); }
.newsz-ltr-text .btn-default i { color: var(--lec-vino); background: var(--lec-melocoton); }
.newsz-ltr-text .btn-default:hover { background: var(--lec-vino-2); color: #fff; }
.newsz-ltr-text .btn-default:hover i { color: var(--lec-vino-2); background: #fff; }

/* ============================================================================
   13. CALENDARIO ESCOLAR (.calendar-* + overrides .fc)
   ========================================================================== */
.calendar-page-content { padding: var(--sp-12) 0 var(--sp-16); }
.calendar-header { margin-bottom: var(--sp-8); }
.calendar-page-content .row { row-gap: var(--sp-8); }

.calendar-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
#school-calendar,
#sala-calendar { min-height: 320px; }

.calendar-load-panel { margin-bottom: var(--sp-3); }
.calendar-load-button {
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  padding: .8rem 1rem;
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--lec-terracota);
  cursor: pointer;
  transition: opacity var(--transition), background var(--transition);
}
.calendar-load-button:hover { background: var(--lec-vino); }
.calendar-load-button[disabled] { opacity: .76; cursor: wait; }

.calendar-detail-card {
  background: var(--color-surface);
  border: 2px solid var(--lec-melocoton);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.calendar-detail-card.is-loading { opacity: .7; }
.calendar-detail-kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-ink);
  margin-bottom: var(--sp-3);
}
.calendar-detail-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.calendar-detail-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lec-melocoton);
  color: var(--lec-terracota);
  flex: none;
}
.calendar-detail-top h3 { margin: 0; color: var(--color-heading); font-size: var(--fs-lg); }
.calendar-detail-card .meta { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.calendar-detail-card .meta li { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text); }
.calendar-detail-card .meta li strong { color: var(--color-heading); }
.calendar-detail-card p { color: var(--color-text-soft); font-size: var(--fs-sm); margin: 0; }
.calendar-meta-icon { color: var(--lec-terracota); flex: none; }
.calendar-detail-spinner { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--sp-3); color: var(--color-text-soft); font-size: var(--fs-sm); }
.calendar-detail-spinner[hidden] { display: none; }
.calendar-detail-spinner .spinner-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--lec-melocoton);
  border-top-color: var(--lec-terracota);
  animation: lec-spin .7s linear infinite;
}
@keyframes lec-spin { to { transform: rotate(360deg); } }

.calendar-legend-horizontal { margin-top: var(--sp-6); }
.calendar-legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.calendar-legend-list li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text); }
.calendar-legend-swatch { width: 16px; height: 16px; border-radius: 5px; flex: none; }

/* (Overrides de FullCalendar retirados: la librería se sustituyó por la rejilla
   anual dibujada a mano; estas variables --fc-* y reglas .fc-* ya no pintaban nada.) */

/* ============================================================================
   14. TABLA DE TARIFAS (responsive, scroll horizontal en móvil)
   ========================================================================== */
.tarifas-page { padding: var(--sp-12) 0 var(--sp-16); }
.tarifas-header { margin-bottom: var(--sp-8); }
.tarifas-filters { margin-bottom: var(--sp-6); }
.tarifas-count { color: var(--color-text-soft); margin-bottom: var(--sp-4); }
.tarifas-count strong { color: var(--color-heading); }
.tarifas-empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--color-text-soft);
  background: var(--lec-crema-2);
  border-radius: var(--radius);
}

/* Grupo desplegable (details/summary) */
.tarifa-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  background: var(--color-surface);
  overflow: hidden;
}
.tarifa-group > summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  background: var(--lec-crema-2);
  list-style: none;
  position: relative;
}
.tarifa-group > summary::-webkit-details-marker { display: none; }
.tarifa-group > summary:after {
  content: "";
  position: absolute;
  right: var(--sp-6);
  top: calc(50% - 4px);
  width: 7px; height: 7px;
  border-right: 2px solid var(--lec-terracota);
  border-bottom: 2px solid var(--lec-terracota);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.tarifa-group[open] > summary:after { transform: rotate(-135deg); }

/* Envoltorio con scroll horizontal */
.tarifa-table-wrap,
.tarifas-tabla-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tarifa-table,
.tarifas-tabla {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tarifa-table thead th,
.tarifas-tabla thead th {
  text-align: left;
  white-space: nowrap;
  padding: var(--sp-3) var(--sp-4);
  color: #fff;
  background: var(--lec-vino);
  font-family: var(--font-head);
  font-weight: var(--fw-medium);
}
.tarifa-table tbody td,
.tarifas-tabla tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: top;
}
.tarifa-table tbody tr:nth-child(even),
.tarifas-tabla tbody tr:nth-child(even) { background: var(--lec-crema); }
.tarifa-row.hidden,
.tarifas-fila.hidden { display: none; }

/* ============================================================================
   15. SALAS DE ENSAYO (listado + detalle)
   ========================================================================== */
.salas-page { padding: var(--sp-12) 0 var(--sp-16); }
.salas-topbar-copy { margin-bottom: 0; }
.salas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-8);
}
.sala-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.sala-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.sala-card-media { position: relative; }
.sala-card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sala-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--lec-terracota);
  color: #fff;
  font-size: var(--fs-xs);
  font-family: var(--font-head);
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
}
.sala-m2 {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(58, 43, 40, .78);
  color: #fff;
  font-size: var(--fs-xs);
  padding: .2rem .6rem;
  border-radius: var(--radius-sm);
}
.sala-card-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.sala-card-body h3 { color: var(--color-heading); font-size: var(--fs-lg); margin: 0; }
.sala-card-desc { color: var(--color-text-soft); font-size: var(--fs-sm); margin: 0; }
.sala-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; }
.sala-price { color: var(--lec-vino); font-family: var(--font-head); font-weight: var(--fw-bold); }

/* Hero de sala */
.sala-hero { position: relative; color: #fff; overflow: hidden; }
.sala-hero-image { position: absolute; inset: 0; z-index: 0; }
.sala-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.sala-hero:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(94,21,25,.35) 0%, rgba(94,21,25,.82) 100%); }
.sala-hero .container { position: relative; z-index: 2; }
.sala-hero-content { padding: var(--sp-16) 0; max-width: 720px; }
.sala-hero-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--lec-terracota);
  padding: .3rem .9rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-4);
}
.sala-hero-content h1 { color: #fff; margin-bottom: var(--sp-3); }
.sala-hero-content > p { color: #f3e0d2; max-width: 60ch; }
.sala-hero-box { margin-top: var(--sp-6); }
.sala-hero-kpis { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-bottom: var(--sp-6); }
.sala-kpi strong { display: block; font-family: var(--font-head); font-size: var(--fs-xl); color: #fff; }
.sala-kpi span { color: #f3e0d2; font-size: var(--fs-sm); }
.sala-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Detalle de sala */
.sala-detail-main { padding: var(--sp-12) 0 var(--sp-16); }
.sala-detail-main > .container > section { margin-bottom: var(--sp-12); }
.sala-section-title,
.sala-detail-main h2 { color: var(--color-heading); font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.sala-intro p { color: var(--color-text); }

/* Pestañas de equipamiento */
.sala-equip-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.sala-tab-btn {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--lec-vino);
  background: var(--lec-crema-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.sala-tab-btn:hover { background: var(--lec-melocoton); }
.sala-tab-btn.is-active { background: var(--lec-terracota); border-color: var(--lec-terracota); color: #fff; }
.sala-tab-panel[hidden] { display: none; }
.sala-tab-panel ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: var(--sp-8); }
.sala-tab-panel li { margin-bottom: .5rem; color: var(--color-text); break-inside: avoid; }

/* Galería de sala */
.sala-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }
.sala-gallery-main img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.sala-gallery-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.sala-gallery-side img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* Tarifas de sala (tarjetas) */
.sala-tarifas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }
.sala-tarifa-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.sala-tarifa-card.extras { background: var(--lec-crema-2); }
.sala-tarifa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sala-tarifa-head h3 { color: var(--color-heading); font-size: var(--fs-lg); margin: 0 0 2px; }
.sala-tarifa-head p { color: var(--color-text-soft); font-size: var(--fs-xs); margin: 0; }
.sala-tarifa-head .desde { color: var(--color-text-soft); font-size: var(--fs-xs); text-align: right; white-space: nowrap; }
.sala-tarifa-head .desde strong { display: block; color: var(--lec-vino); font-size: var(--fs-lg); }
.sala-tarifa-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sala-tarifa-table td { padding: .5rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.sala-tarifa-table tr:last-child td { border-bottom: 0; }
.sala-tarifa-table td:last-child { text-align: right; font-weight: var(--fw-semibold); color: var(--color-heading); white-space: nowrap; }
.sala-tarifa-table .old { text-decoration: line-through; color: var(--color-text-soft); font-weight: var(--fw-normal); margin-right: .4rem; }

/* Disponibilidad de sala */
.sala-calendar-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.sala-calendar-tools .filters select {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: .5rem .9rem;
}
.sala-calendar-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.sala-legend { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-4); }
.sala-legend span { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text); }
.sala-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.sala-dot.libre { background: #2f8f5b; }
.sala-dot.reservada { background: var(--lec-terracota); }
.sala-dot.mantenimiento { background: #c9a227; }

/* ============================================================================
   16. ACORDEÓN (.accordion / .acc-item / .acc-header / .acc-panel)
   ========================================================================== */
.accordion { display: grid; gap: var(--sp-3); }
.acc-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.acc-item.is-open { border-color: var(--lec-melocoton); box-shadow: var(--shadow-sm); }
.acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  text-align: left;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  background: transparent;
  border: 0;
  transition: color var(--transition);
}
.acc-header:hover { color: var(--color-accent); }
.acc-header:after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--lec-terracota);
  border-bottom: 2px solid var(--lec-terracota);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.acc-item.is-open .acc-header:after { transform: rotate(-135deg); margin-top: 2px; }
.acc-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition);
}
.acc-item.is-open .acc-panel { max-height: 2000px; }
.acc-panel.is-open { max-height: 2000px; }
.acc-panel .acc-panel__inner { padding: 0 var(--sp-6) var(--sp-6); color: var(--color-text); }
.acc-panel .acc-panel__inner > *:first-child { margin-top: 0; }

/* ============================================================================
   17. FILTROS (.filtro-bar / .filtro-btn)
   ========================================================================== */
.filtro-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.filtro-btn {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--lec-vino);
  background: var(--lec-crema-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.filtro-btn:hover { background: var(--lec-melocoton); }
.filtro-btn.is-active {
  background: var(--lec-terracota);
  border-color: var(--lec-terracota);
  color: #fff;
}
/* elemento oculto por el filtro JS */
[data-cats].is-filtered-out { display: none !important; }

/* ============================================================================
   18. GALERÍA / LIGHTBOX (.class-gallery ya arriba · .site-lightbox)
   ========================================================================== */
body.lightbox-open { overflow: hidden; }
.site-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8);
  background: rgba(58, 43, 40, .92);
}
.site-lightbox[hidden] { display: none; }
.site-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.site-lightbox .lb-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  background: rgba(255, 255, 255, .14);
  transition: background var(--transition);
}
.site-lightbox .lb-btn:hover { background: var(--lec-terracota); }
.site-lightbox .lb-close { position: absolute; top: var(--sp-6); right: var(--sp-6); width: 44px; height: 44px; font-size: 1.4rem; }
.site-lightbox .lb-prev,
.site-lightbox .lb-next { flex: none; }

/* ============================================================================
   19. MICRO-INTERACCIONES + APARICIÓN AL HACER SCROLL (.reveal)
   Debe ir DESPUÉS de los componentes: sus transiciones de opacity/transform
   necesitan ganar en cascada a las transiciones propias de cada tarjeta.
   ========================================================================== */
/* Zoom suave de fotos al pasar el ratón */
.teacher-img { overflow: hidden; border-radius: var(--radius-lg); }
.teacher-img img { transition: transform .6s ease; }
.teacher:hover .teacher-img img { transform: scale(1.05); }
.sala-card-media { overflow: hidden; }
.sala-card-media img { transition: transform .6s ease; }
.sala-card:hover .sala-card-media img { transform: scale(1.05); }

/* La flecha de los botones avanza al pasar el ratón */
.btn-default i { transition: color var(--transition), transform var(--transition); }
.btn-default:hover i,
.btn-default:focus-visible i { transform: translateX(3px); }
.btn .lec-icon { transition: transform var(--transition); }
.btn:hover .lec-icon { transform: translateX(3px); }

/* Los iconos redondos se rellenan de terracota al pasar el ratón */
.home-pilar:hover .home-pilar__icon,
.area:hover .area__icon,
.home-inscrip__card:hover .home-inscrip__icon .lec-icon { color: var(--lec-terracota); }
.home-pilar:hover .home-pilar__icon { background: var(--lec-terracota); color: #fff; }
.home-pilar__icon, .area__icon { transition: background var(--transition), color var(--transition); }

/* Aparición al hacer scroll: scripts.js añade .reveal y luego .is-visible */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ============================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .teacher-content { padding-left: 0; margin-top: var(--sp-6); }
  .sala-gallery { grid-template-columns: 1fr; }
  .sala-tab-panel ol { columns: 1; }
  .asignatura-hero-content,
  .sala-hero-content { padding: var(--sp-12) 0; }
}

@media (max-width: 767px) {
  .pager-section { padding: var(--sp-8) 0; }
  /* En móvil no hay sitio a la derecha: la ilustración vuelve al centro y baja
     a marca de agua, para no pelearse con el título. */
  .pager-section::after { width: min(46vw, 220px); height: auto; aspect-ratio: 5906 / 3573; left: 50%; right: auto; transform: translate(-50%, -50%); opacity: .16; }
  /* Las ilustraciones de sección sí son cuadradas */
  body[data-page] .pager-section::after { aspect-ratio: 1; }
  .comment-area { padding: var(--sp-6); }
  /* El mapa NO lleva altura fija. La llevaba cuando era un iframe; con la
     imagen dentro dejaba una franja de fondo vacía debajo y la pastilla de
     «Abrir en Google Maps» acababa flotando en ese hueco, fuera del plano.
     La imagen manda: su proporción 2:1 decide la altura. */
  .newsletter-sec { padding: var(--sp-8); }
  .teacher-content .tech-detils li strong,
  .teacher-content .tech-detils li span { width: 100%; flex: 0 0 100%; }
  .teacher-content .tech-detils li strong { margin-bottom: 4px; }
  .events-toolbar, .salas-topbar { flex-direction: column; align-items: flex-start; }
  /* En columna el eje principal es el vertical: quien centra en horizontal pasa
     a ser align-items, no justify-content. */
  .section-lead.text-center + .events-toolbar { align-items: center; }
}

@media (max-width: 575px) {
  .salas-grid { grid-template-columns: 1fr; }
  .sala-hero-kpis { gap: var(--sp-6); }
  .btn-default { width: 100%; justify-content: center; }
  .newsz-ltr-text .btn-default { width: auto; }
}

/* ============================================================================
   19. AVISO «SIN COOKIES»
   Lo pinta footer.php (#aviso-cookies, nace hidden) y lo gobierna
   components.js: informativo, presume de no rastrear. Bajo el lightbox (1000).
   ========================================================================== */
/* El display:flex de abajo le ganaría al [hidden] del navegador (que no lleva
   !important): sin esta regla, «Entendido» ponía hidden y el aviso ni se
   inmutaba. Con ella, hidden manda siempre. */
.aviso-cookies[hidden] { display: none !important; }
.aviso-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  width: fit-content;
  max-width: min(620px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--lec-terracota);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(58, 43, 40, .22);
}
.aviso-cookies__texto { margin: 0; font-size: var(--fs-sm); color: var(--color-text); }
.aviso-cookies__texto strong { font-family: var(--font-head); color: var(--lec-vino); }
.aviso-cookies__texto a { color: var(--lec-terracota); text-decoration: underline; text-underline-offset: 2px; }
.aviso-cookies__ok {
  flex-shrink: 0;
  padding: 8px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--lec-terracota);
  color: var(--lec-blanco);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color .18s ease;
}
.aviso-cookies__ok:hover { background: var(--lec-vino); }
.aviso-cookies__ok:focus-visible { outline: 2px solid var(--lec-vino); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .aviso-cookies:not([hidden]) { animation: aviso-cookies-sube .35s ease both; }
  @keyframes aviso-cookies-sube {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (max-width: 560px) {
  .aviso-cookies { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
  .aviso-cookies__ok { align-self: flex-end; }
}