/*
Theme Name:  Aula Suzuki
Theme URI:   https://aulasuzukiuio.com
Description: Tema propio de Aula Suzuki. Sustituye a hello-elementor y al Theme Builder de Elementor Pro: cabecera, pie y las plantillas de curso, profesor, galería, área y búsqueda. Los datos viven en aulasuzuki-core y los formularios en aulasuzuki-forms; este tema solo presenta.
Version:     1.2.1
Author:      Aula Suzuki
Requires PHP: 8.1
Text Domain: aulasuzuki
License:     Proprietary
*/

/* -------------------------------------------------------------------------
   Sistema visual

   Los valores vienen del kit de Elementor que el sitio usa hoy
   (Educita, post 1404), para que la migración no cambie el diseño mientras
   se cambia la tecnología. Un rediseño, si llega, es una decisión aparte.
   ------------------------------------------------------------------------- */

:root {
    --as-primario:    #282828;
    --as-secundario:  #007DC5;

    /* El gris de cuerpo era #6E6E6E: 5,18:1 sobre blanco, o sea que cumplía AA
       y aun así se leía lavado en párrafos largos. Éste da 6,89:1 y tiene una
       pizca de calidez, para que no compita en frío con la crema. Un texto que
       cumple la norma todavía puede estar mal ajustado. */
    --as-texto:       #5C5A55;

    --as-acento:      #61CE70;
    --as-crema:       #FFFFF4;
    --as-blanco:      #FFFFFF;
    /* El rojo de error era #FF6464 y no llegaba a ninguno de los dos umbrales
       que le hacen falta: 2.89:1 sobre blanco cuando WCAG pide 4.5:1 para el
       texto de .as-form__error, y los mismos 2.89:1 cuando pide 3:1 para el
       borde de un campo inválido. Un aviso que no se lee no avisa. Éste da
       5.62:1 sobre blanco y 5.59:1 sobre la crema de la tarjeta de contacto,
       y sigue siendo inequívocamente rojo. Sus tres usos —texto del error,
       borde del campo y filete del resumen— pasan con margen. */
    --as-alerta:      #C62828;
    --as-aviso:       #FFA000;
    --as-linea:       #E3E3E3;

    /* El azul de marca da 4.43:1 contra blanco, por debajo del 4.5:1 que pide
       WCAG AA. Ese número gobierna las dos direcciones: ni sirve como texto
       azul sobre blanco, ni como fondo azul con texto blanco encima. Por eso
       este segundo azul, oscurecido lo justo (5.24:1), es el que se usa
       siempre que haya texto de por medio — enlaces, botones, franjas.

       --as-secundario se conserva intacto para lo que no lleva texto: barras
       de área, bordes y filetes. Mismo tono, mismo carácter, contraste
       correcto donde hace falta. */
    --as-enlace:      #0071B2;

    /* Un color por área de conocimiento. Los valores ya estaban en el sistema;
       esto sólo les da significado, y ese significado se repite en el menú,
       los archivos, las fichas y el pie. Artes Escénicas y Manualidades
       comparten color porque entre las dos suman tres cursos. */
    --as-area-musica:    var(--as-secundario);
    --as-area-bellas:    var(--as-aviso);
    --as-area-escenicas: var(--as-acento);
    --as-area-neutral:   var(--as-linea);

    --as-titulos: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --as-cuerpo:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --as-ancho:   1450px;
    --as-lectura: 68ch;

    /* Tres radios con una regla escrita, en lugar de uno solo aplicado a todo.
       Un único valor repartido entre una fotografía de 700px y la píldora del
       menú no es coherencia: es no haber decidido.

         --as-radio-foto  la imagen manda, no su marco: fotos y mosaicos
         --as-radio       lo que es una caja de verdad: tarjetas, paneles,
                          campos y botones
         --as-radio-pill  lo que se toca de un dedo: chips, filtros, pastillas

       El nombre dice a qué familia pertenece cada cosa, así que añadir un
       componente nuevo es elegir familia, no inventar un número. */
    --as-radio-foto: 2px;
    --as-radio:      8px;
    --as-radio-pill: 999px;

    /* Las curvas de CSS son flojas: `ease` arranca y frena con la misma
       timidez, y el resultado es que nada parece responder. Estas dos tienen
       carácter y son las únicas que usa el tema.

         --as-salida  para lo que entra o sale de pantalla, y para el hover.
                      Arranca rápido: el ojo ve movimiento en el primer
                      fotograma, que es el momento en el que está mirando.
         --as-mueve   para lo que se desplaza sin entrar ni salir. Acelera y
                      frena, como se mueven las cosas.

       Nunca ease-in en una interfaz: empezar despacio es exactamente lo que
       hace que una web se sienta lenta. */
    --as-salida: cubic-bezier(.23, 1, .32, 1);
    --as-mueve:  cubic-bezier(.77, 0, .175, 1);

    --as-sombra:  0 1px 2px rgba(40, 40, 40, .06), 0 10px 30px -20px rgba(40, 40, 40, .3);

    --as-esp-1: .5rem;
    --as-esp-2: 1rem;
    --as-esp-3: 1.5rem;
    --as-esp-4: 2.5rem;
    --as-esp-5: 4rem;
    --as-esp-6: 6rem;
}

/* Fuentes propias del tema.

   Se copian aquí a propósito: hoy las sirve Elementor desde uploads, y
   desinstalarlo se las lleva. Jost es variable, así que un archivo cubre
   todos sus pesos. */

@font-face {
    font-family: 'Jost';
    src: url('assets/fonts/jost-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/poppins-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ base --- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--as-blanco);
    color: var(--as-texto);
    font-family: var(--as-cuerpo);
    /* 17px. Poppins tiene la x pequeña y a 16 el cuerpo se quedaba corto al
       lado de unos titulares que llegan a 64. La medida de lectura se defiende
       sola: --as-lectura va en ch, así que sigue midiendo 68 caracteres. */
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--as-titulos);
    color: var(--as-primario);
    line-height: 1.15;
    margin: 0 0 var(--as-esp-2);
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem);  font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: clamp(1.375rem, 2.5vw, 2rem); font-weight: 600; }
h4 { font-size: 1.625rem; font-weight: 600; }
h5 { font-size: 1.5rem;   font-weight: 600; }
h6 { font-size: 1.25rem;  font-weight: 600; font-family: var(--as-cuerpo); }

p { margin: 0 0 var(--as-esp-2); max-width: var(--as-lectura); }

a {
    color: var(--as-enlace);
    text-underline-offset: .15em;
    text-decoration-thickness: 1px;
}

a:hover { color: var(--as-primario); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--as-enlace);
    outline-offset: 3px;
    border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.25rem; }

hr { border: 0; border-top: 1px solid var(--as-linea); margin: var(--as-esp-4) 0; }

/* Visible sólo para lectores de pantalla, hasta que recibe el foco. */
.as-salto {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--as-primario);
    color: var(--as-blanco);
    padding: .75rem 1.25rem;
    z-index: 1000;
}
.as-salto:focus { left: 0; }

.as-oculto-visual {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- layout --- */

.as-contenedor {
    width: min(100% - 2.5rem, var(--as-ancho));
    margin-inline: auto;
}

.as-contenedor--lectura { width: min(100% - 2.5rem, 46rem); }

.as-seccion { padding-block: var(--as-esp-5); }

.as-rejilla {
    display: grid;
    gap: var(--as-esp-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* ------------------------------------------------------------- cabecera --- */

.as-cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--as-blanco);
    border-bottom: 1px solid var(--as-linea);
}

/* La cabecera se despega al bajar.

   Sin JavaScript y sin escuchar el scroll: una animación con línea de tiempo de
   desplazamiento, que corre fuera del hilo principal. El `@supports` es
   obligatorio, no cortesía — donde `animation-timeline` no existe, una
   `animation` sin línea de tiempo cae en la del documento y se reproduce sola
   al cargar la página, que es justo lo contrario de lo que se pide aquí.

   Lo único que cambia es la sombra: el filete se apaga y aparece un realce.
   La cabecera NO encoge, aunque encoger quedaría bien. Es pegajosa y sigue
   ocupando su sitio en el flujo, así que cambiarle el alto mientras ese sitio
   todavía está en pantalla mueve toda la página hacia arriba bajo el dedo del
   visitante. Un gesto bonito no vale un salto de scroll. */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .as-cabecera {
            animation: as-cabecera-posada linear both;
            animation-timeline: scroll();
            animation-range: 0 120px;
        }
    }
}

@keyframes as-cabecera-posada {
    to {
        border-bottom-color: transparent;
        box-shadow: 0 12px 30px -24px rgba(40, 40, 40, .75);
    }
}

.as-cabecera__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--as-esp-3);
    padding-block: var(--as-esp-2);
}

.as-marca { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }

/* the_custom_logo() prints its own markup, outside .as-marca, so the rule
   below has to name its classes: the uploaded file is 606×429 and without a
   ceiling it renders at full size, which pushes the sticky header down past
   half the viewport. */
.as-marca img,
.custom-logo-link { display: inline-flex; }

.as-marca img,
.custom-logo {
    max-height: 56px;
    width: auto;
    height: auto;
}

@media (min-width: 961px) {
    .as-marca img,
    .custom-logo { max-height: 68px; }
}
.as-marca__nombre {
    font-family: var(--as-titulos);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--as-primario);
}

/* ----------------------------------------------------------- navegación ---

   Un solo árbol para los dos tamaños de pantalla. En móvil los paneles son
   acordeones dentro del cajón; a partir de 961px los mismos elementos pasan a
   ser desplegables anclados a la cabecera. Mismo DOM, mismos estados ARIA:
   nada duplicado que pueda desincronizarse.

   Móvil primero. Todo lo de escritorio vive dentro de la media query.
   --------------------------------------------------------------------------- */

.as-menu-boton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: 1px solid var(--as-linea);
    border-radius: var(--as-radio);
    padding: .6rem .9rem;
    min-height: 44px;
    font-family: var(--as-titulos);
    font-weight: 600;
    color: var(--as-primario);
    cursor: pointer;
}

.as-menu-boton__barras,
.as-menu-boton__barras::before,
.as-menu-boton__barras::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform .2s var(--as-mueve), opacity .2s var(--as-mueve);
}

.as-menu-boton__barras { position: relative; }
.as-menu-boton__barras::before,
.as-menu-boton__barras::after { content: ''; position: absolute; left: 0; }
.as-menu-boton__barras::before { top: -6px; }
.as-menu-boton__barras::after  { top: 6px; }

.as-menu-boton[aria-expanded='true'] .as-menu-boton__barras { background: transparent; }
.as-menu-boton[aria-expanded='true'] .as-menu-boton__barras::before { transform: translateY(6px) rotate(45deg); }
.as-menu-boton[aria-expanded='true'] .as-menu-boton__barras::after  { transform: translateY(-6px) rotate(-45deg); }

.as-nav {
    display: none;
    width: 100%;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--as-esp-2);
}

.as-nav[data-abierto='true'] { display: block; }

.as-nav__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--as-linea);
}

.as-nav__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--as-linea);
}

.as-nav__enlace {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem 0;
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--as-primario);
    text-decoration: none;
}

.as-nav__enlace:hover,
.as-nav__item--activo > .as-nav__enlace { color: var(--as-enlace); }

/* El enlace lleva a la página de la sección y el botón abre el panel. Así,
   sin JavaScript, la navegación sigue siendo navegable: los paneles no se
   abren, pero cada sección tiene su enlace. */
.as-nav__abrir {
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    background: none;
    border: 0;
    color: var(--as-texto);
    cursor: pointer;
}

.as-nav__chevron {
    width: .5em;
    height: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform .2s var(--as-mueve);
}

.as-nav__abrir[aria-expanded='true'] { color: var(--as-primario); }
.as-nav__abrir[aria-expanded='true'] .as-nav__chevron { transform: translateY(10%) rotate(-135deg); }

.as-panel { width: 100%; }
.as-panel[hidden] { display: none; }
.as-panel__interior { padding-bottom: var(--as-esp-2); }

.as-nav__cta {
    display: block;
    margin-top: var(--as-esp-2);
    padding: .7rem 1.4rem;
    background: var(--as-enlace);
    color: var(--as-blanco);
    border-radius: var(--as-radio-pill);
    font-family: var(--as-titulos);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.as-nav__cta:hover { background: var(--as-primario); color: var(--as-blanco); }

/* Columnas de los paneles ------------------------------------------------- */

.as-panel__columnas,
.as-panel__profesores {
    display: grid;
    gap: var(--as-esp-3);
}

.as-panel__titulo {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--as-primario);
    margin: 0 0 .6rem;
    padding-left: .7rem;
    border-left: 3px solid var(--as-area-neutral);
}

.as-panel__columna--musica       .as-panel__titulo { border-left-color: var(--as-area-musica); }
.as-panel__columna--bellas-artes .as-panel__titulo { border-left-color: var(--as-area-bellas); }
.as-panel__columna--escenicas    .as-panel__titulo { border-left-color: var(--as-area-escenicas); }

.as-panel__lista { list-style: none; margin: 0; padding: 0; }

.as-panel__lista a {
    display: block;
    padding: .5rem .7rem;
    min-height: 44px;
    font-size: .95rem;
    color: var(--as-primario);
    text-decoration: none;
    border-radius: var(--as-radio);
}

.as-panel__lista a:hover { background: var(--as-crema); color: var(--as-enlace); }
.as-panel__lista a:active { background: color-mix(in srgb, var(--as-crema) 60%, var(--as-linea)); }
.as-panel__todo { font-weight: 600; color: var(--as-enlace); }

.as-panel__destacado {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 200px;
    border-radius: var(--as-radio-foto);
    overflow: hidden;
    text-decoration: none;
}

.as-panel__destacado img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--as-salida);
}

.as-panel__destacado:hover img { transform: scale(1.04); }

.as-panel__destacado-pie {
    position: relative;
    width: 100%;
    padding: 2.5rem .9rem .9rem;
    background: linear-gradient(transparent, rgba(40, 40, 40, .88));
    color: var(--as-blanco);
}

.as-panel__destacado-pie strong {
    display: block;
    font-family: var(--as-titulos);
    font-size: 1.15rem;
    font-weight: 600;
}

.as-panel__destacado-pie > span:last-child { font-size: .82rem; opacity: .88; }

/* Panel de profesores ----------------------------------------------------- */

.as-panel__retratos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
}

.as-panel__retratos a {
    display: block;
    text-align: center;
    font-size: .78rem;
    color: var(--as-primario);
    text-decoration: none;
}

.as-panel__retratos img {
    width: 74px;
    height: 74px;
    margin: 0 auto .4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--as-crema);
    box-shadow: var(--as-sombra);
    transition: border-color .2s var(--as-salida);
}

.as-panel__retratos a:hover img { border-color: var(--as-secundario); }

.as-panel__enlace-contado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    border-left: 3px solid var(--as-area-neutral);
}

.as-panel__enlace-contado--musica       { border-left-color: var(--as-area-musica); }
.as-panel__enlace-contado--bellas-artes { border-left-color: var(--as-area-bellas); }
.as-panel__enlace-contado--escenicas    { border-left-color: var(--as-area-escenicas); }

.as-panel__cuenta {
    font-size: .78rem;
    color: var(--as-texto);
    font-variant-numeric: tabular-nums;
}

.as-panel__postula {
    display: inline-block;
    margin-top: .8rem;
    padding: .5rem 1rem;
    border-radius: var(--as-radio-pill);
    background: color-mix(in srgb, var(--as-area-escenicas) 26%, white);
    color: var(--as-primario);
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}

.as-panel__postula:hover { background: color-mix(in srgb, var(--as-area-escenicas) 42%, white); }

/* Panel de tarjetas ------------------------------------------------------- */

.as-panel__tarjetas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--as-esp-2);
}

.as-panel__tarjeta {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 150px;
    border-radius: var(--as-radio-foto);
    overflow: hidden;
    text-decoration: none;
}

.as-panel__tarjeta img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--as-salida);
}

.as-panel__tarjeta:hover img { transform: scale(1.04); }

.as-panel__tarjeta-pie {
    position: relative;
    width: 100%;
    padding: 2rem .9rem .8rem;
    background: linear-gradient(transparent, rgba(40, 40, 40, .85));
    color: var(--as-blanco);
    font-family: var(--as-titulos);
}

.as-panel__tarjeta-pie strong { display: block; font-size: 1rem; font-weight: 600; }
.as-panel__tarjeta-pie span { font-size: .78rem; opacity: .88; }

.as-nav-velo[hidden] { display: none; }

/* --------------------------------------------------------- escritorio --- */

@media (min-width: 961px) {
    .as-menu-boton { display: none; }
    .as-cabecera__interior { flex-wrap: nowrap; }

    .as-nav {
        display: flex;
        align-items: center;
        gap: var(--as-esp-1);
        width: auto;
        max-height: none;
        overflow: visible;
        padding-bottom: 0;
    }

    .as-nav__lista {
        display: flex;
        align-items: center;
        border-top: 0;
    }

    .as-nav__item {
        border-bottom: 0;
        padding: .25rem .1rem;
        border-radius: var(--as-radio);
    }

    .as-nav__item--mega:hover,
    .as-nav__item:has(.as-nav__abrir[aria-expanded='true']) { background: var(--as-crema); }

    .as-nav__enlace {
        min-height: 0;
        padding: .5rem .55rem .5rem .8rem;
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .as-nav__item--mega > .as-nav__enlace { padding-right: .2rem; }

    .as-nav__abrir { width: 1.9rem; min-height: 0; padding: .5rem .55rem .5rem .2rem; }

    /* El panel se ancla a la cabecera, no al elemento: ocupa todo el ancho y
       así las columnas tienen sitio sin empujar la navegación. */
    .as-nav__item--mega { position: static; }

    .as-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--as-blanco);
        border-top: 1px solid var(--as-linea);
        border-bottom: 1px solid var(--as-linea);
        box-shadow: 0 24px 40px -28px rgba(40, 40, 40, .35);
        z-index: 90;
    }

    .as-panel__interior {
        width: min(100% - 2.5rem, var(--as-ancho));
        margin-inline: auto;
        padding-block: var(--as-esp-3) var(--as-esp-4);
    }

    .as-panel__columnas { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); gap: var(--as-esp-4); }
    .as-panel__profesores { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--as-esp-4); }
    .as-panel__tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .as-panel__tarjeta { min-height: 180px; }

    .as-panel__lista a { min-height: 0; }
    .as-panel__destacado { min-height: 100%; }

    .as-nav__cta { margin-top: 0; margin-left: var(--as-esp-1); }

    /* Fondo tenue tras el panel abierto, para separarlo de la página sin
       oscurecerla del todo. */
    .as-nav-velo {
        position: fixed;
        inset: 0;
        top: var(--as-alto-cabecera, 5rem);
        background: rgba(40, 40, 40, .28);
        z-index: 80;
    }
}

@media (prefers-reduced-motion: reduce) {
    .as-nav__chevron,
    .as-panel__destacado img,
    .as-panel__tarjeta img,
    .as-panel__retratos img,
    .as-menu-boton__barras,
    .as-menu-boton__barras::before,
    .as-menu-boton__barras::after { transition: none; }
}

/* ------------------------------------------------------------------ pie --- */

/* La franja de inscripción: la segunda oportunidad de conversión de la
   página. Quien llega hasta aquí ha leído todo. Se muestra sólo mientras las
   inscripciones estén abiertas, y eso lo decide un ajuste, no la plantilla. */

/* La franja deja de ser un rectángulo de color y pasa a ser un sitio.

   La fotografía va debajo, casi apagada: no se mira, se nota. Va en un
   pseudoelemento y no en el fondo del elemento para que el azul quede DELANTE
   —un `mix-blend-mode` sobre la foto teñiría también el texto— y para que la
   franja siga funcionando igual el día que no haya imagen que poner: sin
   `--as-franja-foto` el pseudoelemento no pinta nada y lo que queda es la
   plancha azul de siempre.

   El texto blanco se apoya en el azul, no en la foto, así que el contraste
   sigue siendo el que estaba medido. */

.as-franja {
    position: relative;
    isolation: isolate;
    background: var(--as-enlace);
    color: var(--as-blanco);
    padding-block: var(--as-esp-4);
    overflow: hidden;
}

.as-franja::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--as-franja-foto, none);
    background-size: cover;
    background-position: center 35%;
    opacity: .16;
    filter: grayscale(1) contrast(1.1);
}

.as-franja__interior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--as-esp-3);
}

.as-franja__titulo {
    color: var(--as-blanco);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 600;
    margin: 0;
    max-width: 22ch;
}

.as-franja__texto {
    margin: .35rem 0 0;
    color: #EAF6FF;
    font-size: .95rem;
    max-width: 46ch;
}

.as-franja__cta {
    flex: none;
    background: var(--as-blanco);
    color: var(--as-primario);
    font-family: var(--as-titulos);
    font-weight: 600;
    padding: .8rem 1.75rem;
    border-radius: var(--as-radio-pill);
    text-decoration: none;
}

.as-franja__cta:hover { background: var(--as-crema); color: var(--as-primario); }
.as-franja__cta:focus-visible { outline-color: var(--as-blanco); }

/* El colofón. Última página de una revista: declaración de marca, mapa del
   sitio por áreas, contacto y letra pequeña. */

.as-pie {
    background: var(--as-primario);
    color: #CFCFC6;
    padding-block: var(--as-esp-5) var(--as-esp-3);
}

/* Aire entre el contenido y el cierre de la página.

   Lo lleva el primero de los dos, no cada uno: la franja y el pie son dos
   planchas de color que se tocan a propósito, y un margen sobre el pie abriría
   una franja del fondo de la página entre ambas. */
.as-franja,
.as-pie { margin-top: var(--as-esp-6); }

.as-franja + .as-pie { margin-top: 0; }

.as-pie h2, .as-pie h3 { color: var(--as-blanco); }

.as-pie h3 {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9E9E94;
    margin: 0 0 var(--as-esp-2);
}

.as-pie a { color: #EDEDE2; text-decoration: none; }
.as-pie a:hover { color: var(--as-blanco); text-decoration: underline; }
.as-pie a:focus-visible { outline-color: var(--as-blanco); }

.as-pie__rejilla {
    display: grid;
    gap: var(--as-esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

@media (min-width: 900px) {
    .as-pie__rejilla { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}

/* Sólo el reset. El sentido de cada lista lo pone su propia clase, para que
   ninguna tenga que pelearle a esta regla con un !important. */
.as-pie ul { list-style: none; padding: 0; margin: 0; }

.as-pie__enlaces,
.as-pie__contacto { display: grid; gap: .25rem; }

/* Objetivos táctiles. Un enlace de pie mide de suyo unos 23px de alto: pasa
   por debajo de los 24px que pide WCAG 2.2 (2.5.8) y muy por debajo de los
   44px cómodos en un pulgar. Se gana altura con relleno, no con interlineado,
   para que el área pulsable crezca de verdad y no sólo el hueco entre líneas. */
.as-pie__enlaces a,
.as-pie__contacto a,
.as-pie__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

@media (max-width: 899px) {
    .as-pie__enlaces,
    .as-pie__contacto { gap: 0; }

    .as-pie__enlaces a,
    .as-pie__contacto a { min-height: 44px; }

    .as-pie__legal a { min-height: 44px; padding-right: .5rem; }
    .as-pie__legal ul { gap: 0 var(--as-esp-2); }
}

.as-pie__nombre { font-size: 1.4rem; font-weight: 700; margin: 0; }

.as-pie__lema {
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--as-blanco);
    margin: var(--as-esp-2) 0 var(--as-esp-3);
    max-width: 18ch;
}

.as-pie__redes { display: flex; gap: .7rem; }

.as-pie__redes a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 244, .38);
    border-radius: 50%;
}

.as-pie__redes a:hover { border-color: var(--as-blanco); background: rgba(255, 255, 244, .08); }

/* La leyenda del código de color.

   Los tres puntos vivían sueltos al pie de la columna de marca, sin nada al
   lado que dijera qué significaban. Un código de color sin clave no es un
   código. Aquí cada punto va pegado al nombre de su área, en la única columna
   del sitio donde explicarlo no cuesta ni una línea de más. */
.as-pie__enlaces--areas .as-pie__area a { display: inline-flex; align-items: center; gap: .55rem; }

.as-pie__area a::before {
    content: '';
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--as-area, var(--as-area-neutral));
}

.as-pie__area--musica       { --as-area: var(--as-area-musica); }
.as-pie__area--bellas-artes { --as-area: var(--as-area-bellas); }
.as-pie__area--escenicas    { --as-area: var(--as-area-escenicas); }

.as-pie__contacto li { display: flex; gap: .65rem; align-items: flex-start; }
.as-pie__contacto .as-icono { flex: none; margin-top: .25em; color: var(--as-acento); }

.as-pie__legal {
    margin-top: var(--as-esp-5);
    padding-top: var(--as-esp-2);
    border-top: 1px solid rgba(255, 255, 244, .15);
    font-size: .8rem;
    color: #B9B9AF;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem var(--as-esp-4);
    justify-content: space-between;
    align-items: center;
}

.as-pie__legal p { margin: 0; max-width: none; }
.as-pie__legal ul { display: flex; flex-wrap: wrap; gap: .5rem var(--as-esp-3); }
.as-pie__legal a { color: #B9B9AF; }

/* ---------------------------------------------------------------- fichas --- */

/* La tarjeta pierde la caja.

   Trece cursos en tarjetas con borde, sombra y esquinas se leían como una tabla
   de precios, no como un catálogo de una escuela de artes. Y la caja no estaba
   haciendo ningún trabajo: dentro de una rejilla, lo que separa una tarjeta de
   la siguiente es el espacio, no una raya.

   Lo que queda es lo que importa: la fotografía, el filete de su área, el
   nombre, una línea y el precio. El mismo filete que llevan los mosaicos de la
   portada y los retratos del equipo — en este sitio, una fotografía se apoya
   siempre en el color de su área. */

.as-ficha {
    --as-area: var(--as-area-neutral);
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
}

.as-ficha--musica       { --as-area: var(--as-area-musica); }
.as-ficha--bellas-artes { --as-area: var(--as-area-bellas); }
.as-ficha--escenicas    { --as-area: var(--as-area-escenicas); }

.as-ficha__imagen {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--as-crema);
    border-radius: var(--as-radio-foto);
    border-bottom: 4px solid var(--as-area);
}

.as-ficha__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s var(--as-salida);
}

.as-ficha:hover .as-ficha__imagen img { transform: scale(1.04); }

/* Sin la caja, el desnivel se ve.

   Con borde y sombra, tres extractos de distinto largo quedaban disimulados
   dentro de tres rectángulos iguales. Al quitar la caja, cada tarjeta termina
   donde termina su texto y los precios de una misma fila salen a tres alturas
   distintas — que es justo el dato que un padre compara de un vistazo.

   `margin-top: auto` sobre los metadatos empuja al fondo el bloque que cierra
   la tarjeta, así que la fila de precios vuelve a leerse como una fila. */
.as-ficha__cuerpo {
    padding: var(--as-esp-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

/* Dentro de una sección de un área, la etiqueta repite lo que el filete ya
   dijo y lo que el titular de la sección dice encima: seis pastillas iguales
   que ponen «MÚSICA» debajo de un «Música» de 48px. En un listado mezclado
   —el archivo, la búsqueda— sigue haciendo falta, así que no se borra: se
   calla donde sobra. */
.as-listado--un-area .as-etiqueta { display: none; }

.as-ficha__titulo { font-size: 1.375rem; margin: 0; }
.as-ficha__titulo a { color: var(--as-primario); text-decoration: none; }
.as-ficha__titulo a:hover { color: var(--as-enlace); }

.as-ficha__meta {
    /* Empuja al fondo el bloque que cierra la tarjeta, para que la fila de
       precios vuelva a leerse como una fila. */
    margin-top: auto;
    padding-top: .2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .875rem;
    color: var(--as-texto);
}

.as-ficha__extracto { margin: 0; font-size: .95rem; }

/* La etiqueta mide lo que mide su palabra.

   `display: inline-block` no basta dentro de .as-ficha__cuerpo: ahí la etiqueta
   es un item de rejilla, y una rejilla blockifica a sus hijos y los estira a
   todo el ancho de la columna. El resultado eran trece tarjetas de curso con
   una barra azul pálido de borde a borde encima del título, que no se leía como
   una etiqueta sino como un campo de formulario roto.

   `justify-self: start` es la instrucción que sí entiende una rejilla. Se pone
   aquí, en el componente, y no en el contenedor, para que la etiqueta se
   comporte igual dondequiera que la dejen caer. */
.as-etiqueta {
    display: inline-block;
    justify-self: start;
    align-self: start;
    width: fit-content;
    font-family: var(--as-titulos);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .25em .75em;
    border-radius: var(--as-radio-pill);
    background: var(--as-crema);
    color: var(--as-primario);
    text-decoration: none;
}

a.as-etiqueta { transition: background-color 160ms var(--as-salida), color 160ms var(--as-salida); }
.as-etiqueta:hover { background: var(--as-enlace); color: var(--as-blanco); }

/* Variantes por área. Fondo suave y texto tinta: ni el verde ni el ámbar
   llegan a 4.5:1 como texto, así que el color va detrás, nunca delante. */
.as-etiqueta--musica       { background: color-mix(in srgb, var(--as-area-musica) 18%, white); }
.as-etiqueta--bellas-artes { background: color-mix(in srgb, var(--as-area-bellas) 24%, white); }
.as-etiqueta--escenicas    { background: color-mix(in srgb, var(--as-area-escenicas) 26%, white); }

a.as-etiqueta--musica:hover       { background: var(--as-enlace); color: var(--as-blanco); }
a.as-etiqueta--bellas-artes:hover { background: color-mix(in srgb, var(--as-area-bellas) 45%, white); color: var(--as-primario); }
a.as-etiqueta--escenicas:hover    { background: color-mix(in srgb, var(--as-area-escenicas) 48%, white); color: var(--as-primario); }

.as-precio {
    font-family: var(--as-titulos);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--as-primario);
}

.as-precio small { font-family: var(--as-cuerpo); font-weight: 400; font-size: .875rem; color: var(--as-texto); }

/* --------------------------------------------------------------- entrada --- */

.as-portada { margin-bottom: var(--as-esp-4); }
.as-portada img { width: 100%; border-radius: var(--as-radio-foto); }

.as-encabezado { padding-block: var(--as-esp-5) var(--as-esp-3); }
.as-encabezado p { color: var(--as-texto); font-size: 1.125rem; }

.as-encabezado__entrada { font-size: 1.125rem; max-width: 56ch; }

.as-antetitulo {
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--as-enlace);
    margin: 0 0 var(--as-esp-1);
}

/* ---------------------------------------------------------------- portada ---

   La portada es una tesis y su prueba: lo que la escuela cree, las áreas que
   enseña dimensionadas por lo que cada una contiene de verdad, y quién las da.
   ---------------------------------------------------------------------------- */

/* El héroe.

   La fotografía era un rectángulo de 4:3 flotando con radio de 6px y una
   sombra tímida, y debajo quedaban setenta píxeles muertos antes de la sección
   siguiente. Una escuela cuyo producto es un niño tocando delante de gente no
   puede enseñar esa foto dentro de una tarjeta.

   Aquí la imagen ocupa el alto entero del héroe y se sale por la derecha hasta
   el borde de la pantalla. El sangrado se calcula, no se adivina: `.as-contenedor`
   mide min(100% - 2.5rem, --as-ancho) y está centrado, así que lo que sobra a
   cada lado es la mitad de la diferencia. Se mide en `cqw` y no en `vw` porque
   `vw` incluye la barra de desplazamiento: con `vw` el sangrado se pasa de
   largo justo el ancho de la barra y la página entera se va en scroll
   horizontal. `overflow-x: clip` es el cinturón por si algún navegador
   redondea distinto — clip y no hidden, que hidden crearía un contenedor de
   scroll y rompería las tarjetas pegajosas del resto del sitio. */

.as-heroe {
    padding-block: var(--as-esp-5) var(--as-esp-4);
    container-type: inline-size;
    overflow-x: clip;
}

.as-heroe__interior {
    display: grid;
    gap: var(--as-esp-4);
    align-items: center;
}

.as-heroe__titulo {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: -.03em;
    max-width: 14ch;
    margin: 0 0 var(--as-esp-2);
}

.as-heroe__entrada { font-size: 1.15rem; max-width: 44ch; }

.as-heroe__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-esp-2);
    margin-top: var(--as-esp-3);
    max-width: none;
}

.as-heroe__imagen { margin: 0; }

.as-heroe__imagen img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--as-radio-foto);
}

@media (min-width: 900px) {
    .as-heroe { padding-block: var(--as-esp-5); }

    .as-heroe__interior {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--as-esp-5);
        align-items: stretch;
    }

    .as-heroe__texto { align-self: center; }

    .as-heroe__imagen {
        margin-right: calc(-1 * (100cqw - min(100cqw - 2.5rem, var(--as-ancho))) / 2);
    }

    .as-heroe__imagen img {
        height: 100%;
        min-height: 30rem;
        aspect-ratio: auto;
        /* Redondeada por donde toca la página, recta por donde toca el borde. */
        border-radius: var(--as-radio-foto) 0 0 var(--as-radio-foto);
    }
}

/* --------------------------------------------------------------- hechos ---

   La prueba, en los números de la propia escuela. Habla el mismo idioma que
   .as-cifra —filete, número y rótulo en versalita— porque es el mismo gesto: un
   dato pequeño se anuncia con una raya y una etiqueta encima.
   ---------------------------------------------------------------------------- */

.as-hechos { padding-block: var(--as-esp-2) var(--as-esp-4); }

.as-hechos__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(50% - 1rem, 9rem), 1fr));
    gap: var(--as-esp-3) var(--as-esp-4);
    max-width: 60rem;
}

.as-hechos__lista > li {
    padding-top: .6rem;
    border-top: 3px solid var(--as-secundario);
}

.as-hechos__lista b {
    display: block;
    font-family: var(--as-titulos);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--as-primario);
    font-variant-numeric: tabular-nums;
}

.as-hechos__lista span {
    display: block;
    margin-top: .45rem;
    font-family: var(--as-titulos);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--as-texto);
}

.as-seccion--crema { background: var(--as-crema); }

.as-seccion__cabecera { margin-bottom: var(--as-esp-4); }
.as-seccion__cabecera h2 { margin-bottom: var(--as-esp-1); }
.as-seccion__cabecera p { color: var(--as-texto); max-width: 56ch; }
.as-seccion__pie { margin: var(--as-esp-3) 0 0; }

.as-enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    font-family: var(--as-titulos);
    font-weight: 600;
    text-decoration: none;
}

.as-enlace-flecha span { transition: transform .2s var(--as-salida); display: inline-block; }
.as-enlace-flecha:hover span { transform: translateX(3px); }

/* Retícula bento. Los tamaños los decide BentoPlan a partir del volumen real
   de cada área, no una lista fija: el día que Bellas Artes supere a Música,
   la portada lo refleja sola. */

.as-bento {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--as-esp-2);
    grid-template-columns: 1fr;
}

.as-bento__celda { min-height: 190px; display: grid; }

/* En tableta, dos columnas: el área mayor ocupa la fila entera y las otras dos
   se reparten la siguiente. Con cuatro columnas aquí, tres áreas dejaban media
   fila vacía — que es exactamente el agujero que esta retícula viene a cerrar,
   solo que un punto de ruptura más arriba. */
@media (min-width: 700px) {
    .as-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem; }
    .as-bento__celda { min-height: 0; grid-row: span 2; }
    .as-bento__celda--hero { grid-column: span 2; grid-row: span 3; }
}

/* En escritorio, cuatro columnas y todas las celdas de alto completo: el área
   mayor toma dos carriles y las demás uno. Tres áreas cierran la fila sin que
   sobre nada.

   Las tres reglas de abajo son consultas de cantidad, para que la retícula no
   dependa de que sigan siendo tres. `:has()` toma la especificidad de su
   argumento, así que pesan más que `--hero` y ganan sin !important. */
@media (min-width: 1000px) {
    .as-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .as-bento__celda { grid-column: span 1; grid-row: span 3; }
    .as-bento__celda--hero { grid-column: span 2; grid-row: span 3; }

    .as-bento:has(> :only-child) > .as-bento__celda { grid-column: span 4; grid-row: span 2; }
    .as-bento:has(> :nth-child(2):last-child) > .as-bento__celda { grid-column: span 2; }
    .as-bento:has(> :nth-child(4)) > .as-bento__celda { grid-column: span 1; }
}

.as-mosaico {
    /* El código de color del sitio entra por aquí. Cada mosaico declara el
       color de su área una vez y lo usan el filete y lo que venga después, en
       lugar de repetir tres reglas por cada cosa que quiera teñirse. */
    --as-area: var(--as-area-neutral);

    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: var(--as-radio-foto);
    background: var(--as-primario);
    text-decoration: none;
    color: var(--as-blanco);
    isolation: isolate;
}

.as-mosaico--musica       { --as-area: var(--as-area-musica); }
.as-mosaico--bellas-artes { --as-area: var(--as-area-bellas); }
.as-mosaico--escenicas    { --as-area: var(--as-area-escenicas); }

/* El filete del área, por fin donde se presentan las áreas.

   Estaba en el menú, en los archivos, en las fichas y en el pie, y faltaba
   justo en la sección que enseña las tres. Un código de color que no aparece
   donde se explica no es un código: es una leyenda que nadie descifra. */
/* El filete crece con `transform`, no con `height`.

   El efecto es el mismo y el coste no: animar el alto obliga al navegador a
   rehacer el diseño en cada fotograma, mientras que una escala se compone en la
   GPU. Aquí el filete mide siempre 8px y se dibuja a la mitad; el hover sólo lo
   deja a tamaño natural. El origen abajo es lo que hace que crezca hacia
   arriba en vez de desde el centro. */
.as-mosaico::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 8px;
    background: var(--as-area);
    transform: scaleY(.5);
    transform-origin: bottom;
    transition: transform 160ms var(--as-salida);
}

.as-mosaico:hover::after { transform: scaleY(1); }

.as-mosaico img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform .4s var(--as-salida);
}

.as-mosaico:hover img { transform: scale(1.05); }

/* El velo que sostiene el rótulo.

   Era `transparent → rgba(40,40,40,.88)`, un degradado que llega a su parte
   opaca demasiado tarde: sobre una foto clara —las manualidades, con su mesa
   blanca y sus fieltros de colores— el nombre del área se leía a medias. Éste
   arranca la parte oscura antes y añade un tramo intermedio, así que el rótulo
   sobrevive a cualquier fotografía en vez de a las que salieron oscuras.

   El relleno inferior deja sitio al filete del área, para que la palabra no se
   apoye en la raya de color. */
.as-mosaico__pie {
    width: 100%;
    padding: 3.25rem var(--as-esp-3) 1.4rem;
    background: linear-gradient(
        to top,
        rgba(24, 24, 22, .94) 0%,
        rgba(24, 24, 22, .80) 34%,
        rgba(24, 24, 22, .34) 70%,
        transparent 100%
    );
    font-family: var(--as-titulos);
}

.as-mosaico__pie strong { display: block; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }

.as-mosaico__pie small {
    display: block;
    margin-top: .3rem;
    font-family: var(--as-cuerpo);
    font-size: .84rem;
    line-height: 1.5;
    opacity: .9;
}

/* La barra de acciones, debajo de la retícula y no dentro de ella.

   Fingían ser mosaicos: dos rectángulos planos con una palabra en el centro,
   que es un botón que ha crecido, no la fotografía de un área. Aquí son lo que
   son, y recuperan la jerarquía que el sitio usa en todas partes — el botón
   sólido es la inscripción, que es para lo que existe esta página, y el enlace
   con flecha es la invitación suave. */
.as-bento__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--as-esp-2) var(--as-esp-4);
    margin-top: var(--as-esp-2);
    padding: var(--as-esp-3);
    background: var(--as-crema);
    border-radius: var(--as-radio-foto);
}

/* Los mosaicos sólidos no llevan imagen: el color hace de fondo y el texto
   blanco necesita el azul legible, no el de marca. */
.as-mosaico--solido {
    background: var(--as-enlace);
    align-items: center;
    text-align: center;
}

.as-mosaico--solido .as-mosaico__pie { background: none; padding: var(--as-esp-2); }

.as-mosaico--verde {
    background: color-mix(in srgb, var(--as-area-escenicas) 30%, white);
    color: var(--as-primario);
}

.as-mosaico--solido:hover { background: var(--as-primario); color: var(--as-blanco); }

/* Retratos, no círculos.

   Eran cuatro círculos pequeños repartidos por una franja de 1.450px con
   `auto-fit`, así que las caras se separaban hasta flotar. Y el círculo recorta
   justo lo que esta sección vende: una persona con un instrumento en las manos.

   Ahora es una tira que se desplaza: en escritorio se ven cinco enteros y el
   sexto lo corta el borde. Ese corte es el mensaje —así se dice «hay más» sin
   escribirlo— y por eso el ancho de columna va en porcentaje del contenedor:
   para que el recorte siga ahí a cualquier tamaño de pantalla en vez de
   depender de que la ventana mida justo lo que midió el día que se diseñó. */

.as-equipo {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--as-esp-1);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: var(--as-esp-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}

@media (min-width: 700px)  { .as-equipo { grid-auto-columns: 30%; } }
@media (min-width: 1000px) { .as-equipo { grid-auto-columns: 17.2%; } }

.as-equipo__persona { scroll-snap-align: start; }

.as-equipo__persona--musica       { --as-area: var(--as-area-musica); }
.as-equipo__persona--bellas-artes { --as-area: var(--as-area-bellas); }
.as-equipo__persona--escenicas    { --as-area: var(--as-area-escenicas); }

.as-equipo a {
    display: grid;
    gap: .65rem;
    font-family: var(--as-titulos);
    font-weight: 600;
    color: var(--as-primario);
    text-decoration: none;
}

.as-equipo__retrato {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--as-blanco);
    border-radius: var(--as-radio-foto);
    border-bottom: 4px solid var(--as-area, var(--as-area-neutral));
}

.as-equipo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mismo encuadre que el claustro: las caras están arriba en el original. */
    object-position: center 22%;
    filter: saturate(.82) contrast(1.04);
    transition: transform .45s var(--as-salida), filter .3s var(--as-salida);
}

.as-equipo a:hover img,
.as-equipo a:focus-visible img { transform: scale(1.04); filter: none; }

.as-equipo__nombre { font-size: 1.02rem; line-height: 1.3; }
.as-equipo a:hover .as-equipo__nombre { color: var(--as-enlace); }

/* --------------------------------------------------------------- filtros ---

   Enlaces de verdad a un archivo filtrado: funcionan sin JavaScript, se pueden
   compartir y los indexa un buscador. El script sólo ahorra la recarga.
   ---------------------------------------------------------------------------- */

.as-filtros { margin-top: var(--as-esp-3); }

.as-filtros ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.as-filtro {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .4rem 1rem;
    border: 1px solid var(--as-linea);
    border-radius: var(--as-radio-pill);
    background: var(--as-blanco);
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: .92rem;
    color: var(--as-primario);
    text-decoration: none;
}

.as-filtro:hover { border-color: var(--as-primario); color: var(--as-primario); }

.as-filtro__cuenta {
    font-size: .78rem;
    font-weight: 400;
    color: var(--as-texto);
    font-variant-numeric: tabular-nums;
}

.as-filtro--activo {
    background: var(--as-primario);
    border-color: var(--as-primario);
    color: var(--as-blanco);
}

.as-filtro--activo:hover { color: var(--as-blanco); }
.as-filtro--activo .as-filtro__cuenta { color: #CFCFC6; }

/* El color del área entra por el borde izquierdo del chip, no por el texto. */
.as-filtro--musica       { border-left: 4px solid var(--as-area-musica); }
.as-filtro--bellas-artes { border-left: 4px solid var(--as-area-bellas); }
.as-filtro--escenicas    { border-left: 4px solid var(--as-area-escenicas); }

/* ------------------------------------------------------- ficha de curso ---

   Dos columnas: el curso a la izquierda, y a la derecha una tarjeta que
   acompaña el scroll. La decisión que el visitante vino a tomar sigue en
   pantalla mientras lee las razones para tomarla.
   ---------------------------------------------------------------------------- */

.as-ficha-curso__columnas {
    display: grid;
    gap: var(--as-esp-4);
    align-items: start;
}

@media (min-width: 1000px) {
    .as-ficha-curso__columnas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.as-inscripcion__tarjeta {
    border: 1px solid var(--as-linea);
    border-radius: var(--as-radio);
    background: var(--as-blanco);
    box-shadow: var(--as-sombra);
    padding: var(--as-esp-3);
}

/* La columna derecha deja de ser una tarjeta flotando sobre un vacío.

   Debajo del precio entra lo que un padre pregunta a continuación, así que la
   columna ya no mide 420px contra 1.900 de texto. Sigue acompañando el scroll,
   porque la decisión que el visitante vino a tomar tiene que seguir en pantalla
   mientras lee las razones para tomarla.

   El tope de altura y el scroll propio son la válvula de seguridad: una columna
   pegajosa más alta que la ventana esconde su parte de abajo para siempre, y
   ahí es donde ahora viven los profesores. */
@media (min-width: 1000px) {
    .as-inscripcion {
        position: sticky;
        top: calc(var(--as-alto-cabecera, 5rem) + 1rem);
        display: grid;
        gap: var(--as-esp-3);
        align-content: start;
        max-height: calc(100dvh - var(--as-alto-cabecera, 5rem) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Sitio para que la sombra de la tarjeta no la recorte su propio scroll. */
        padding: 2px;
        margin: -2px;
    }
}

/* --------------------------------------------------------------- docentes ---

   Los profesores del curso, en la columna del precio. Una cara, un nombre y un
   enlace: aquí el motivo para enseñarlos es el reconocimiento, no la
   biografía — para eso está su ficha, a un clic.
   ---------------------------------------------------------------------------- */

.as-docentes__titulo {
    font-family: var(--as-titulos);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--as-texto);
    padding-top: var(--as-esp-1);
    border-top: 1px solid var(--as-linea);
    margin: 0 0 var(--as-esp-2);
}

/* La misma regla que el claustro, por el mismo motivo: con `auto-fill` la
   columna calculaba tres carriles y cuatro profesores salían 3+1, con una cara
   sola cerrando la fila. Aquí el número de columnas lo decide cuánta gente
   enseña el curso. */
.as-docentes__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--as-esp-2);
}

.as-docentes__lista:has(> :nth-child(3):last-child),
.as-docentes__lista:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Un profesor solo no necesita media columna: sería un póster. */
.as-docentes__lista:has(> :only-child) { grid-template-columns: minmax(0, 9rem); }

.as-docentes__lista .as-retrato__nombre { font-size: .92rem; }

/* Una portada de curso es una banda, no una ilustración dentro del texto.
   Cruza las dos columnas porque es lo que vende la clase. */
.as-portada--curso { margin-bottom: var(--as-esp-5); }

.as-inscripcion__precio {
    font-family: var(--as-titulos);
    font-weight: 700;
    font-size: 2rem;
    color: var(--as-primario);
    margin: 0 0 var(--as-esp-2);
}

.as-inscripcion__precio small { font-size: .9rem; font-weight: 400; color: var(--as-texto); font-family: var(--as-cuerpo); }

/* Dos grupos, un separador.

   Cada fila llevaba su propio filete: cuatro rayas para separar cosas que van
   juntas, y ninguna entre las dos preguntas que las filas contestan de verdad
   —qué es la clase y cuánto cuesta—. Ahora el filete separa los grupos, no las
   líneas, y dentro de cada grupo manda el espacio. */
.as-inscripcion__datos { margin: 0 0 var(--as-esp-2); display: grid; gap: .35rem; }

.as-inscripcion__datos > div {
    display: flex;
    justify-content: space-between;
    gap: var(--as-esp-2);
    padding-block: .2rem;
    font-size: .92rem;
}

.as-inscripcion__datos--precios {
    padding-top: var(--as-esp-2);
    border-top: 1px solid var(--as-linea);
}

.as-inscripcion__datos dt { color: var(--as-texto); }
.as-inscripcion__datos dd { margin: 0; color: var(--as-primario); font-weight: 600; text-align: right; }

.as-inscripcion__nota {
    font-size: .85rem;
    background: var(--as-crema);
    border-radius: var(--as-radio);
    padding: .6rem .8rem;
    margin: 0 0 var(--as-esp-2);
    max-width: none;
}

.as-inscripcion__cerrado {
    font-size: .9rem;
    color: var(--as-texto);
    background: var(--as-crema);
    border-radius: var(--as-radio);
    padding: .75rem;
    text-align: center;
    margin: 0;
    max-width: none;
}

.as-boton--bloque { display: flex; justify-content: center; width: 100%; margin-top: .5rem; }

.as-rejilla--estrecha { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

/* En móvil la tarjeta deja de flotar y se convierte en el cierre de la
   página: mismo contenido, sin robar altura al contenido que la justifica. */
@media (max-width: 999px) {
    .as-inscripcion__tarjeta { position: static; }
}

/* ------------------------------------------------- páginas, blog y áreas --- */

.as-encabezado--pagina { max-width: var(--as-lectura); }
.as-encabezado--archivo { padding-bottom: var(--as-esp-2); }

/* El aire bajo la cabecera del sitio lo pone el contenedor, no el encabezado:
   en las páginas cuyo título vive en el contenido no hay encabezado que lo
   ponga, y el texto arrancaba pegado a la barra de navegación. */
.as-pagina,
.as-entrada,
.as-ficha-curso { padding-top: var(--as-esp-4); }

/* El contenedor general mide 1.450px porque la portada lo necesita: el bento y
   la tira de profesores viven de ese ancho. Una página de contenido no tiene
   nada que poner ahí. Su texto se lee a 68 caracteres, así que a 1.450px salía
   una columna pegada a la izquierda con media pantalla vacía al lado — y las
   cifras y las tarjetas se estiraban para rellenar ese vacío en vez de formar
   un bloque. Estrechando la página, texto, columnas y rejillas vuelven a
   pertenecer a la misma composición.

   La ficha de curso tenía el mismo hueco por otro camino: su columna de texto
   se para a los 68 caracteres y la tarjeta de precio es corta, así que por
   debajo de ella quedaba una franja vacía de casi 600px de ancho a lo largo de
   toda la página. */
.as-pagina,
.as-ficha-curso { width: min(100% - 2.5rem, 76rem); }

.as-pagina > .as-encabezado,
.as-entrada > .as-encabezado { padding-top: 0; }

.as-migas + .as-encabezado,
.as-migas + .as-perfil,
.as-migas + .as-ficha-curso__columnas { padding-top: var(--as-esp-2); }

.as-portada--ancha img { aspect-ratio: 21 / 9; object-fit: cover; }

/* La cabecera de un área lleva su color en un filete superior: el mismo
   código que el chip, la etiqueta y el punto del pie. */
.as-encabezado--area {
    border-top: 4px solid var(--as-area-neutral);
    /* Separado de la cabecera del sitio: pegado, el filete parecía parte de
       ella en vez del código de color del área. */
    margin-top: var(--as-esp-3);
    padding-top: var(--as-esp-3);
}
.as-encabezado--musica       { border-top-color: var(--as-area-musica); }
.as-encabezado--bellas-artes { border-top-color: var(--as-area-bellas); }
.as-encabezado--escenicas    { border-top-color: var(--as-area-escenicas); }

.as-encabezado__cuenta {
    font-size: .92rem;
    color: var(--as-texto);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* La portada del área, cuando alguien le eligió una imagen.

   Los dos márgenes están puestos porque los heredados salían al revés de lo que
   hace falta. Arriba, la cabecera de archivo cierra con --as-esp-2 y la foto
   quedaba pegada a la línea del recuento, como si fuera parte de la cabecera y
   no la portada de la página. Abajo, el margen propio de .as-portada se suma al
   padding de .as-seccion y separaba la foto de sus cursos casi el doble de lo
   que la separaba del título: la imagen parecía flotar sola entre dos bloques.
   Anulado, manda el padding de la sección, que es el ritmo del resto del sitio.

   Y los laterales a cero. El tema no resetea <figure> en ningún sitio, así que
   el margen del navegador —40 px a cada lado— seguía puesto: la foto medía 1370
   px dentro de un contenedor de 1450, sin alinear ni con el filete de color de
   la cabecera que la anuncia ni con la primera tarjeta de curso de debajo, y es
   el elemento más alto de la página. Se anula sólo aquí, y no en .as-portada,
   porque esa clase también la usan la página y la ficha de curso, que no son
   parte de este cambio. */
.as-encabezado--area + .as-portada {
    margin-top: var(--as-esp-3);
    margin-bottom: 0;
    margin-inline: 0;
}

/* El fondo propio de una página.

   Las tres propiedades las imprime inc/fondo.php, y sólo cuando la página tiene
   fondo elegido. Una página sin fondo no recibe ni la clase ni las variables:
   estas reglas no existen para ella.

   Va en el <body> y no en .as-pagina a propósito. El contenedor mide 76rem, así
   que pintarlo a él deja dos franjas del color anterior a los lados y corta el
   fondo justo donde termina el texto — se ve una caja de color sobre una página
   blanca, que es lo contrario de lo que se pide. En el body el fondo ES la
   página, y además llega al hueco que queda bajo el contenido en las páginas
   cortas, que es donde más se nota una caja.

   La cabecera y el pie conservan el suyo, y eso también es una decisión, no un
   descuido. La cabecera es blanca y pegajosa: por debajo de ella pasa el
   contenido, así que si adoptara el color de la página el texto se vería
   atravesarla al bajar. El pie es --as-primario y su texto claro está medido
   contra ese oscuro y contra ningún otro; teñirlo del color de la página
   convierte un contraste comprobado en uno que nadie ha mirado. El fondo es de
   la página, no del sitio. */

body.as-fondo {
    background-color: var(--as-fondo-color, var(--as-blanco));
}

/* La imagen va en una capa propia detrás de todo, y no en el background del body
   con background-attachment: fixed, que es lo que pide el manual.

   El manual funciona en escritorio y se rompe en el móvil: iOS no implementa
   attachment fijo y cae en uno que dimensiona la imagen contra el documento
   entero, de modo que un `cover` sobre una página de 6.000px muestra una franja
   ampliada de la foto en lugar de la foto. Y donde sí funciona, obliga al
   navegador a repintar el fondo en cada fotograma del scroll. Una capa con
   inset:0 da exactamente lo que promete `attachment: fixed` —la imagen
   encuadrada al viewport— en todas partes y en una capa compuesta, sin
   repintados.

   Lo que este comentario afirmaba antes y era falso: que aquí no había
   «parallax que declarar ante prefers-reduced-motion». Una capa a pantalla
   completa en `position: fixed` mientras el contenido se desplaza por encima ES
   el patrón de parallax; que el efecto salga de no moverse en vez de moverse
   más despacio no cambia lo que ve quien lo sufre. El tema declara otros tres
   bloques de movimiento reducido, así que la omisión era incoherente con su
   propio criterio y está corregida más abajo.

   z-index:-1 la deja por debajo del contenido y por encima del color del body,
   que se propaga al lienzo: así el color sigue viéndose si la imagen tiene
   transparencia, y sigue siendo lo que se ve mientras la imagen carga. La
   cabecera y el pie pintan su fondo en una fase posterior del orden de pintado,
   así que ninguno de los dos necesita z-index para conservarlo.

   El velo es la primera capa de background-image, encima de la foto y debajo de
   todo lo demás: es la única posición en la que interviene la imagen sin tocar
   el texto.

   Y ACLARA. Salía de --as-primario (#282828), es decir oscurecía, y eso era el
   fallo: éste es un tema claro cuyo texto de cuerpo es un gris medio,
   --as-texto (#5C5A55). Oscurecer el fondo lo acerca al color del texto en vez
   de alejarlo, así que el control llamado «velo» —el que se le explica al
   administrador como lo que hace legible el texto— destruía justo lo que decía
   proteger: al 100 % el fondo quedaba en #282828 y el texto en 2,14:1, muy por
   debajo del 4,5:1 que el resto de esta hoja respeta con disciplina, y con un
   mínimo de 1,06:1 a mitad de recorrido. Mezclando hacia --as-crema (#FFFFF4)
   la relación se ordena: más velo, más claro el fondo, más lejos del gris del
   texto. Al 100 % la capa es crema pura y el texto da 6,84:1, el mismo
   contraste que tiene cualquier otra página del sitio. La crema y no el blanco
   porque conserva el matiz cálido que el velo anterior buscaba en el gris del
   tema, sin pagarlo con el contraste.

   Que el velo y la foto compartan una sola declaración es lo que hace que el
   navegador que no entiende color-mix() —el mismo que ya se pierde el color de
   las etiquetas de área— se quede sin las dos a la vez: la propiedad entera se
   invalida y la página cae al color de fondo. Es la degradación correcta y por
   eso están juntas. Repartirlas en ::before y ::after dejaría la foto sin la
   capa que sostiene la legibilidad del texto encima, que es el único resultado
   peor que no tener foto. */

body.as-fondo--imagen::before {
    --as-fondo-manto: color-mix(in srgb, var(--as-crema) var(--as-fondo-velo, 0%), transparent);

    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--as-fondo-manto), var(--as-fondo-manto)),
        var(--as-fondo-imagen, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Quien pide movimiento reducido recibe un fondo que se desplaza con la página,
   no uno anclado al viewport.

   La capa pasa a `absolute` contra el body, que es lo que obliga a posicionar el
   body: el bloque contenedor de un ::before absoluto es el ancestro posicionado
   más cercano, y sin esto sería el bloque contenedor inicial —del tamaño del
   viewport, anclado arriba del documento—, de modo que bajo el pliegue no
   quedaría imagen ninguna. min-height cubre el caso contrario, la página corta
   cuyo body no llega a la altura de la pantalla.

   `position: relative` con z-index automático no crea contexto de apilamiento,
   así que el z-index:-1 de la capa sigue significando lo mismo que arriba. */
@media (prefers-reduced-motion: reduce) {
    body.as-fondo--imagen {
        position: relative;
    }

    body.as-fondo--imagen::before {
        position: absolute;
        min-height: 100vh;
    }
}

/* ------------------------------------------------------------- la entrada ---

   La medida de lectura es correcta y no se toca: 68 caracteres. Lo que fallaba
   en pantallas grandes es que no había nada más — a 1920px el artículo era una
   tira de 736px flotando con 590 de vacío a cada lado, y la portada, vertical,
   se comía la pantalla antes del primer párrafo.

   La solución no es ensanchar el texto sino anclarlo: una columna de apoyo a
   la izquierda con la fecha y el tiempo de lectura, que acompaña el scroll, y
   una portada que se sale hacia esa columna. El texto sigue midiendo lo mismo;
   la página deja de flotar.
   ---------------------------------------------------------------------------- */

.as-entrada__cabecera,
.as-entrada__cuerpo,
.as-siguiente { margin-inline: auto; }

.as-entrada__cabecera,
.as-siguiente { max-width: 46rem; }
.as-entrada__cuerpo { display: grid; gap: var(--as-esp-2); max-width: 46rem; }

.as-entrada__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem var(--as-esp-2);
    font-size: .92rem;
    color: var(--as-texto);
    margin: 0;
}

.as-entrada__meta p { margin: 0; max-width: none; }

/* La portada no puede robar una pantalla entera: es la entrada al texto, no
   el texto. Un retrato a 736px de ancho medía más de 700 de alto. */
.as-entrada .as-portada img {
    max-height: 26rem;
    object-fit: cover;
    object-position: center 30%;
}

@media (min-width: 1200px) {
    .as-entrada__cuerpo {
        grid-template-columns: 11rem minmax(0, 46rem);
        column-gap: var(--as-esp-5);
        max-width: none;
        justify-content: center;
        align-items: start;
    }

    .as-entrada__meta {
        display: grid;
        gap: .3rem;
        text-align: right;
        position: sticky;
        top: calc(var(--as-alto-cabecera, 5rem) + var(--as-esp-3));
        padding-top: .4rem;
        border-top: 2px solid var(--as-primario);
    }

    .as-entrada .as-portada img { max-height: 30rem; }
}

/* La portada se sale hacia la DERECHA, y sólo a partir de aquí.

   Hacia la izquierda no puede: ese lado lo ocupa la columna de fecha y la
   imagen se le montaba encima. Y el sangrado necesita sitio: la rejilla mide
   61rem, el contenedor se topa en 1450px, así que por debajo de 1500 lo que
   sobra a la derecha es menos que el sangrado y la página se iba en scroll
   horizontal — 128px de más a 1200. A partir de 1500 el hueco libre ya no
   cambia (el contenedor está topado) y 8rem caben con holgura. */
@media (min-width: 1500px) {
    .as-entrada__texto > .as-portada {
        margin-right: -8rem;
        width: calc(100% + 8rem);
    }

    .as-entrada__cabecera,
    .as-siguiente { max-width: calc(46rem + 11rem + var(--as-esp-5)); }
}

/* Entrada destacada del blog. */
.as-destacada {
    display: grid;
    gap: var(--as-esp-3);
    align-items: center;
    margin-bottom: var(--as-esp-5);
}

@media (min-width: 860px) {
    .as-destacada { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--as-esp-4); }
}

.as-destacada__imagen { display: block; border-radius: var(--as-radio-foto); overflow: hidden; }

.as-destacada__imagen img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s var(--as-salida);
}

.as-destacada__imagen:hover img { transform: scale(1.03); }

.as-destacada__titulo { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 var(--as-esp-2); }
.as-destacada__titulo a { color: var(--as-primario); text-decoration: none; }
.as-destacada__titulo a:hover { color: var(--as-enlace); }
.as-destacada__extracto { font-size: 1.05rem; }

/* Anterior / siguiente al pie de una entrada. */
.as-siguiente {
    display: grid;
    gap: var(--as-esp-2);
    margin-top: var(--as-esp-5);
    padding-top: var(--as-esp-3);
    border-top: 1px solid var(--as-linea);
}

@media (min-width: 700px) {
    .as-siguiente { grid-template-columns: 1fr 1fr; }
}

.as-siguiente__enlace {
    display: grid;
    gap: .2rem;
    padding: var(--as-esp-2);
    border: 1px solid var(--as-linea);
    border-radius: var(--as-radio);
    text-decoration: none;
}

.as-siguiente__enlace:hover { border-color: var(--as-primario); background: var(--as-crema); }
.as-siguiente__enlace--fin { text-align: right; }

.as-siguiente__etiqueta {
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--as-texto);
}

.as-siguiente__titulo { font-family: var(--as-titulos); font-weight: 600; color: var(--as-primario); }

.as-paginacion--interna { margin-top: var(--as-esp-3); }

/* ------------------------------------------------------------ inscripción ---

   El destino de todos los «Inscríbete» del sitio: el formulario a la
   izquierda y, al lado, el curso que el visitante vino a contratar. Confirma
   la decisión que ya tomó en vez de pedirle que la recuerde.
   ---------------------------------------------------------------------------- */

.as-inscribirse__columnas {
    display: grid;
    gap: var(--as-esp-4);
    align-items: start;
}

@media (min-width: 1000px) {
    .as-inscribirse__columnas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* El formulario es el contenido, no una lectura: ocupa la columna entera en
   lugar de estrecharse a los 68 caracteres de la prosa. */
.as-inscribirse .as-contenido > * { max-width: none; }
.as-inscribirse .as-contenido > p { max-width: var(--as-lectura); }

/* El encabezado que trae el contenido rotula el formulario; no compite en
   tamaño con el título de la página, que está justo encima. Tampoco abre
   sección: el salto de var(--as-esp-6) que llevan los h2 del contenido abriría
   media pantalla entre «Antes de inscribirte» y la lista que lo explica. Aquí
   son tres bloques rotulados dentro de una columna, no tres secciones de una
   página, y se separan como tales. */
.as-inscribirse .as-contenido > h2 {
    font-size: 1.35rem;
    letter-spacing: 0;
    margin-top: var(--as-esp-4);
    margin-bottom: var(--as-esp-1);
}

.as-inscribirse .as-contenido > :first-child { margin-top: 0; }

.as-inscripcion__resumen {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--as-texto);
    margin: 0 0 var(--as-esp-2);
}

.as-inscripcion__imagen { margin: 0 0 var(--as-esp-2); }

.as-inscripcion__imagen img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--as-radio-foto);
}

.as-inscripcion__curso {
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--as-primario);
    margin: .4rem 0 var(--as-esp-2);
    max-width: none;
}

.as-inscripcion__datos dd small { font-weight: 400; color: var(--as-texto); font-size: .8em; }

.as-inscripcion__cambiar,
.as-inscripcion__ayuda {
    font-size: .88rem;
    margin: var(--as-esp-2) 0 0;
    max-width: none;
}

.as-inscripcion__areas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.as-aviso {
    border: 1px solid var(--as-linea);
    border-left: 4px solid var(--as-aviso);
    border-radius: var(--as-radio);
    background: var(--as-crema);
    padding: var(--as-esp-3);
    max-width: var(--as-lectura);
}

.as-aviso p:last-child { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: var(--as-esp-2); }

/* ------------------------------------------------------------ destacados ---

   «Beneficios» y «¿Qué ofrecemos?» estaban pegados a mano en cuatro páginas —
   el segundo palabra por palabra en las cuatro. Ahora son un template part con
   su copia en un solo sitio.

   El diseño es a propósito discreto: filete, icono, título y dos líneas. Las
   dos secciones aparecen seguidas en la misma página, y tarjetas con borde y
   sombra apiladas de dos en dos convierten una página sobre una escuela en una
   tabla de precios.
   ---------------------------------------------------------------------------- */

.as-destacados { margin-block: var(--as-esp-5); }

.as-destacados__cabecera { margin-bottom: var(--as-esp-4); }

.as-destacados__titulo {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    margin: 0 0 var(--as-esp-2);
    max-width: 20ch;
}

.as-destacados__entrada {
    font-size: 1.05rem;
    color: var(--as-texto);
    max-width: var(--as-lectura);
    margin: 0;
}

.as-destacados__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--as-esp-4) var(--as-esp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.as-destacado {
    display: grid;
    gap: .55rem;
    align-content: start;
    padding-top: var(--as-esp-2);
    border-top: 1px solid var(--as-linea);
}

.as-destacado__icono {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--as-secundario) 12%, white);
    color: var(--as-enlace);
}

.as-destacado__icono .as-icono { width: 22px; height: 22px; }

.as-destacado__titulo {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
}

.as-destacado__texto {
    margin: 0;
    font-size: .92rem;
    color: var(--as-texto);
    max-width: 38ch;
}

/* ---------------------------------------------------------------- claustro ---

   El profesorado es lo que un padre viene a mirar, así que manda el retrato.
   Sin tarjeta, sin borde y sin la etiqueta de área que la ficha genérica
   imprime: dentro de «Música» nadie necesita que le digan que esa persona es
   de música. Lo que queda es una cara, un nombre y lo que enseña.
   ---------------------------------------------------------------------------- */

/* El recuento real, en lugar del «+10 docentes» que la página traía escrito a
   mano mientras enseñaban once. */
.as-claustro__resumen {
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--as-primario);
    margin: 0 0 var(--as-esp-3);
    max-width: none;
    font-variant-numeric: tabular-nums;
}

.as-claustro__indice { margin-bottom: var(--as-esp-5); }

.as-departamento { margin-bottom: var(--as-esp-6); scroll-margin-top: calc(var(--as-alto-cabecera, 5rem) + 1rem); }

.as-departamento__cabecera {
    padding-top: var(--as-esp-2);
    border-top: 3px solid var(--as-area-neutral);
    margin-bottom: var(--as-esp-4);
}

.as-departamento--musica       .as-departamento__cabecera { border-top-color: var(--as-area-musica); }
.as-departamento--bellas-artes .as-departamento__cabecera { border-top-color: var(--as-area-bellas); }
.as-departamento--escenicas    .as-departamento__cabecera { border-top-color: var(--as-area-escenicas); }

.as-departamento__titulo { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .3rem; }

.as-departamento__cuenta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem var(--as-esp-3);
    margin: 0;
    max-width: none;
    font-size: .92rem;
    color: var(--as-texto);
    font-variant-numeric: tabular-nums;
}

/* La retícula cuenta personas.

   Con `auto-fill` y un mínimo de 13rem, un contenedor de 76rem calcula siempre
   cinco columnas, tenga cinco profesores o tenga uno. Música cuadraba a duras
   penas (5 y 3); Bellas Artes ponía dos retratos frente a tres huecos, y
   Escénicas terminaba la página con una cara sola mirando a un vacío del ancho
   de cuatro. Eso no es aire: es una fila sin terminar.

   Aquí el número de columnas lo decide cuánta gente hay, con consultas de
   cantidad: `:has(> :nth-child(N):last-child)` acierta cuando el enésimo hijo
   es también el último, es decir, cuando hay exactamente N. Se declaran de
   mayor a menor porque todas pesan lo mismo y gana la última que coincide.

   Ocho van a cuatro columnas, que es 4+4 exacto. Y una persona sola deja de ser
   una tarjeta huérfana para convertirse en una ficha ancha: retrato al lado del
   nombre, que es lo que un departamento de un profesor pide. */

.as-claustro__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--as-esp-4) var(--as-esp-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

@media (min-width: 700px) {
    .as-claustro__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Los topes de ancho no son para que quepan: son para que cada retrato
       CREZCA cuando hay pocos. Con el tope puesto a la medida de cuatro
       columnas, dos personas salían del mismo tamaño que ocho y la fila seguía
       pareciendo incompleta. Un departamento de dos tiene sitio para dos
       retratos grandes, y eso es lo que dice la página cuando los da. */
    .as-claustro__lista:has(> :nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 60rem;
    }

    .as-claustro__lista:has(> :nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 48rem;
    }

    /* Una sola persona: ficha ancha. El enlace pasa a dos columnas y el retrato
       ocupa las dos filas, así que nombre y cursos quedan a su lado en lugar de
       debajo de una columna estrecha con media página en blanco al lado. */
    /* Una columna, no la primera de cuatro: sin esto la ficha ancha se metía
       en un carril de 184px y el retrato salía del tamaño de un sello. */
    .as-claustro__lista:has(> :only-child) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 44rem;
    }

    .as-claustro__lista > li:only-child .as-retrato__enlace {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: var(--as-esp-4);
        align-content: center;
    }

    .as-claustro__lista > li:only-child .as-retrato__imagen {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }

    .as-claustro__lista > li:only-child .as-retrato__nombre {
        align-self: end;
        font-size: 1.6rem;
    }

    .as-claustro__lista > li:only-child .as-retrato__cursos { align-self: start; }
}

.as-retrato__enlace {
    display: grid;
    gap: .15rem;
    text-decoration: none;
    color: var(--as-primario);
}

.as-retrato__imagen {
    display: block;
    margin-bottom: .6rem;
    border-radius: var(--as-radio-foto);
    overflow: hidden;
    background: var(--as-crema);
    aspect-ratio: 3 / 4;
}

/* Un tratamiento común para fotografías desiguales.

   Los once retratos vienen de sitios distintos: estudio con fondo negro, foto
   de concierto, instantánea junto a un lago, autorretrato contra una pared. En
   fila se nota, y lo que se nota no es que unos sean mejores que otros: es que
   la escuela no los pidió iguales.

   Bajar la saturación un punto y subir el contraste otro no arregla las fotos,
   pero las pone a hablar en el mismo tono, y eso es lo que convierte un montón
   disparejo en una colección. Al pasar el ratón vuelve el color pleno: la
   persona que te interesa se ve como es. */
.as-retrato__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Los retratos están encuadrados con la cara arriba; recortar por el
       centro decapitaba a media plantilla. */
    object-position: center 22%;
    filter: saturate(.82) contrast(1.04);
    transition: transform .45s var(--as-salida), filter .3s var(--as-salida);
}

.as-retrato__enlace:hover .as-retrato__imagen img,
.as-retrato__enlace:focus-visible .as-retrato__imagen img {
    transform: scale(1.04);
    filter: none;
}

.as-retrato__nombre {
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.25;
}

.as-retrato__enlace:hover .as-retrato__nombre { color: var(--as-enlace); }

.as-retrato__cursos { font-size: .85rem; color: var(--as-texto); line-height: 1.45; }

.as-claustro__llamada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--as-esp-3);
    padding: var(--as-esp-4);
    border-radius: var(--as-radio);
    background: var(--as-crema);
    border: 1px solid var(--as-linea);
}

.as-claustro__llamada h2 { font-size: 1.4rem; margin: 0 0 .3rem; }
.as-claustro__llamada p { margin: 0; color: var(--as-texto); max-width: 52ch; }

@media (prefers-reduced-motion: reduce) {
    .as-retrato__imagen img { transition: none; }
}

/* ---------------------------------------------------------------- galería ---

   En columnas, no en cuadrícula. Las ochenta y tres fotos vienen en formatos
   distintos —apaisadas de recital, verticales de retrato, cuadradas— y
   recortarlas todas a 4:3 dentro de una tarjeta con borde las igualaba hasta
   quitarles la vida: parecía un catálogo de producto. Aquí cada una conserva
   la forma en que se tomó, y el desnivel entre columnas es lo que hace que se
   lea como un muro de fotografías.

   `columns` en vez de `grid`: el masonry nativo de CSS todavía no está en
   todos los navegadores, y esto funciona en todos desde hace años.
   ---------------------------------------------------------------------------- */

.as-galeria {
    columns: 4 15rem;
    column-gap: var(--as-esp-2);
    margin-top: var(--as-esp-4);
}

.as-galeria__pieza {
    /* Sin esto una figura se parte entre el pie de una columna y la cabeza de
       la siguiente. */
    break-inside: avoid;
    margin: 0 0 var(--as-esp-2);
    border-radius: var(--as-radio-foto);
    overflow: hidden;
    background: var(--as-crema);
}

.as-galeria__pieza a {
    display: block;
    line-height: 0;
    outline-offset: -2px;
}

.as-galeria__pieza img {
    width: 100%;
    height: auto;
    transition: transform .45s var(--as-salida), filter .45s var(--as-salida);
}

.as-galeria__pieza:hover img { transform: scale(1.04); }

.as-galeria__pieza figcaption {
    padding: .6rem .8rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--as-texto);
}

@media (prefers-reduced-motion: reduce) {
    .as-galeria__pieza img { transition: none; }
}

/* --------------------------------------------------------- perfil docente --- */

.as-perfil {
    display: grid;
    gap: var(--as-esp-4);
    align-items: start;
    margin-bottom: var(--as-esp-4);
}

@media (min-width: 800px) {
    .as-perfil { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
    .as-perfil__retrato { position: sticky; top: calc(var(--as-alto-cabecera, 5rem) + 1rem); }
}

.as-perfil__retrato { margin: 0; }

.as-perfil__retrato img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--as-radio-foto);
    box-shadow: var(--as-sombra);
}

.as-perfil__texto h1 { margin: var(--as-esp-1) 0 var(--as-esp-3); }

.as-perfil__cursos {
    list-style: none;
    margin: var(--as-esp-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.as-pastilla {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem 1rem;
    border: 1px solid var(--as-linea);
    border-left-width: 4px;
    border-radius: var(--as-radio-pill);
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: .92rem;
    color: var(--as-primario);
    text-decoration: none;
}

.as-pastilla:hover { border-color: var(--as-primario); background: var(--as-crema); color: var(--as-primario); }

.as-pastilla--musica       { border-left-color: var(--as-area-musica); }
.as-pastilla--bellas-artes { border-left-color: var(--as-area-bellas); }
.as-pastilla--escenicas    { border-left-color: var(--as-area-escenicas); }

/* --------------------------------------------------------------- revelar ---

   Un solo gesto, aplicado igual en todas las secciones. Si el visitante pidió
   menos movimiento, no hay ninguno: el contenido aparece y ya.
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .as-revelar[data-revelar='pendiente'] {
        opacity: 0;
        transform: translateY(12px);
    }

    .as-revelar[data-revelar='visible'] {
        opacity: 1;
        transform: none;
        transition: opacity .5s var(--as-salida), transform .5s var(--as-salida);
    }
}

.as-migas {
    font-size: .875rem;
    margin-bottom: var(--as-esp-2);
}
.as-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; }
.as-migas li::after { content: '/'; margin-left: .35rem; color: var(--as-linea); }
.as-migas li:last-child::after { content: ''; }

/* La medida de lectura la lleva el TEXTO, no todo lo que haya dentro.

   La regla anterior estrechaba a 68 caracteres cualquier hijo directo y luego
   iba exceptuando casos uno a uno: alignwide, alignfull, figure, galería. Los
   bloques de maquetación no estaban en esa lista, así que un `wp:columns`
   quedaba encajonado en media página — con el formulario de contacto y las
   listas de dirección y horario partidas en columnas de cuatro palabras. Trece
   páginas del sitio usan columnas, grupos o botones.

   Al revés funciona sola: se estrecha lo que se lee y lo demás ocupa lo que
   necesita, sin tener que ampliar una lista cada vez que aparece un bloque
   nuevo. */
.as-contenido > p,
.as-contenido > h1,
.as-contenido > h2,
.as-contenido > h3,
.as-contenido > h4,
.as-contenido > h5,
.as-contenido > h6,
.as-contenido > ul,
.as-contenido > ol,
.as-contenido > dl,
.as-contenido > pre,
.as-contenido > blockquote { max-width: var(--as-lectura); }

.as-contenido > .alignfull { max-width: none; }

/* ------------------------------------------- el contenido, como el tema ---

   El tema tiene un sistema visual —antetítulo, secciones con aire, botones,
   tarjetas— y hasta aquí sólo lo usaban las plantillas. El contenido de
   bloques se pintaba con los estilos base: en la MISMA página, el antetítulo
   de «¿Qué ofrecemos?» salía azul, en versalita y con letra espaciada porque
   lo imprime una plantilla, y el de «Nuestra historia» salía como texto negro
   suelto porque lo escribe un editor. Dos idiomas en una pantalla.

   Estas reglas son la traducción: lo que el contenido escribe con bloques se
   pinta con el mismo vocabulario que lo que escriben las plantillas.
   ---------------------------------------------------------------------------- */

/* Cada h2 abre una sección y necesita aire por arriba, no el margen de un
   párrafo. Sin esto «Preguntas de padres» caía pegado a la rejilla de cursos
   anterior y las tres áreas de «Nuestros cursos» se leían como una sola.

   Cuatro rem y no seis: seis separan de maravilla en «Quiénes somos», que
   tiene fotos, cifras y tarjetas entre sección y sección, pero en «Conciertos»
   —tres párrafos y poco más— convertían una página corta en una sucesión de
   huecos. Cuatro siguen siendo cuatro veces el salto entre párrafos: nadie los
   confunde con un cambio de párrafo, y una página escasa no parece rota. */
.as-contenido > h2,
.as-contenido > h6,
.as-contenido > .as-antetitulo { margin-top: var(--as-esp-5); }

.as-contenido > h3 { margin-top: var(--as-esp-4); }
.as-contenido > h4 { margin-top: var(--as-esp-3); }

/* Un antetítulo y su h2 son UNA cosa: entre ellos no hay salto de sección, y
   tampoco entre el título de la página y lo primero que viene detrás.

   Los selectores nombran cada caso en vez de usar `h1 + *` porque tienen que
   GANAR a la regla de arriba: `.as-contenido > .as-antetitulo` pesa dos clases
   y `h1 + *` sólo una clase y un elemento, así que el salto de sección se
   habría quedado puesto justo debajo del título. */
.as-contenido > .as-antetitulo + h2,
.as-contenido > h6 + h2,
.as-contenido > h1 + .as-antetitulo,
.as-contenido > h1 + h2,
.as-contenido > h1 + h6,
.as-contenido > :first-child { margin-top: 0; }

.as-contenido > h1 { margin-bottom: var(--as-esp-4); }

/* Un h6 dentro del contenido es, en la práctica, un antetítulo — nadie escribe
   un encabezado de nivel 6 detrás de un h1. Se pinta como tal para que ninguno
   vuelva a salir como texto negro suelto, aunque lo añada un editor mañana.
   El marcado correcto es <p class="as-antetitulo">, y es el que llevan hoy las
   páginas; esto es la red por debajo. */
.as-contenido h6 {
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--as-enlace);
    margin-bottom: var(--as-esp-1);
}

/* h4 y h5 estaban a 1.625 y 1.5rem: casi el mismo cuerpo, así que dentro de una
   columna no se distinguía el titular del rótulo que va sobre una lista. El h5
   pasa a ser lo que hace —una etiqueta— con la misma letra que el pie de las
   cifras y las cabeceras del pie de página. */
.as-contenido h4 { font-size: 1.375rem; }

/* El filete es el mismo idioma que .as-destacado y .as-cifra: en este tema, un dato
   pequeño se anuncia con una raya y una etiqueta encima. Con él, «Información» y
   «Horario» dejan de ser texto suelto y pasan a ser dos bloques de datos — que es lo
   que necesitaba la columna izquierda de contacto para sostener la mirada al lado de
   la tarjeta del formulario. */
.as-contenido h5 {
    font-family: var(--as-titulos);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--as-texto);
    padding-top: var(--as-esp-1);
    border-top: 1px solid var(--as-linea);
    margin-bottom: var(--as-esp-1);
}

/* Las rejillas que imprime [aulasuzuki_listado] respiran bajo su párrafo de
   entrada, y a 76rem van de tres en tres: seis cursos de música salían 4+2,
   con dos tarjetas huérfanas y media fila vacía. De tres en tres, 3+3. */
.as-contenido > .as-rejilla { margin-top: var(--as-esp-3); }

.as-contenido .as-rejilla {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

/* ----------------------------------------------- la tesis, a cuerpo grande ---

   Un momento tipográfico por página institucional.

   La observación de Shinichi Suzuki —que todos los niños aprenden a hablar sin
   que nadie les explique gramática— es la tesis entera de esta escuela, y vivía
   como primera frase de un párrafo cualquiera, al mismo cuerpo que el resto.
   Aquí es lo que es. No se reescribió ni una palabra: la frase se separó por su
   punto y cambió de recipiente.
   ---------------------------------------------------------------------------- */

.as-contenido > .as-tesis {
    margin: var(--as-esp-3) 0 var(--as-esp-4);
    padding: var(--as-esp-4);
    background: var(--as-crema);
    border-radius: var(--as-radio-foto);
}

.as-tesis p {
    margin: 0;
    max-width: 32ch;
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--as-primario);
    text-wrap: balance;
}

/* ------------------------------------------- la apertura de un área ---

   Tres secciones construidas exactamente igual —titular, entradilla gris,
   rejilla de tarjetas— se leen como una sola lista larga en vez de como tres
   áreas. El filete de color es el que ya usa la cabecera de un departamento en
   el claustro: mismo gesto, misma escala, mismo significado, dos páginas.
   ---------------------------------------------------------------------------- */

/* El color por defecto va en la clase base, NO en `.as-contenido > .as-area-apertura`.

   Puesto ahí pesa dos clases, y los modificadores pesan una: el gris neutro le
   ganaba a los tres colores y las tres áreas abrían con el mismo filete. La
   regla general es la de siempre — un valor por defecto nunca puede vivir en un
   selector más específico que las variantes que debe permitir. */
.as-area-apertura { --as-area: var(--as-area-neutral); }

.as-area-apertura--musica       { --as-area: var(--as-area-musica); }
.as-area-apertura--bellas-artes { --as-area: var(--as-area-bellas); }
.as-area-apertura--escenicas    { --as-area: var(--as-area-escenicas); }

.as-contenido > .as-area-apertura {
    display: grid;
    gap: .5rem;
    margin-top: var(--as-esp-6);
    margin-bottom: var(--as-esp-4);
    padding-top: var(--as-esp-2);
    border-top: 4px solid var(--as-area);
}

.as-area-apertura h2 { margin: 0; }
.as-area-apertura p { margin: 0; max-width: var(--as-lectura); }

/* Los botones de bloque son los botones del tema. WordPress les pone su propio
   color y salían casi negros al lado de los azules de la cabecera, el pie y la
   franja de inscripción: el mismo sitio pedía la misma acción de dos colores
   distintos. */
.as-contenido .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-esp-2);
    margin-top: var(--as-esp-3);
}

.as-contenido .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: 1.063rem;
    padding: .75rem 1.5rem;
    border: 1px solid var(--as-enlace);
    border-radius: var(--as-radio);
    background: var(--as-enlace);
    color: var(--as-blanco);
    text-decoration: none;
}

.as-contenido .wp-block-button__link:hover {
    background: var(--as-primario);
    border-color: var(--as-primario);
    color: var(--as-blanco);
}

/* Dos acciones juntas no son la misma acción: la primera manda y la segunda
   acompaña, igual que «Conoce los cursos» e «Inscríbete» en la portada. */
.as-contenido .wp-block-button:not(:first-child) .wp-block-button__link {
    background: transparent;
    color: var(--as-enlace);
}

.as-contenido .wp-block-button:not(:first-child) .wp-block-button__link:hover {
    background: var(--as-enlace);
    color: var(--as-blanco);
}

/* Dos fotos una al lado de la otra son una pareja. Si cada una conserva su
   proporción —una vertical y otra apaisada, como en «Quiénes somos»— quedan de
   altos y anchos distintos, sin pie común, y la fila parece un accidente.
   Dentro de columnas comparten recorte. */
.as-contenido .wp-block-columns .wp-block-image { margin-bottom: 0; }

.as-contenido .wp-block-columns .wp-block-image img {
    width: 100%;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--as-radio-foto);
}

/* Dos fotos idénticas alineadas a la misma altura son una plancha, no una
   pareja. Bajando la segunda, la fila deja de ser un bloque y pasa a tener
   composición — el segundo movimiento que necesitan las páginas
   institucionales.

   El selector pide que la imagen sea el ÚNICO hijo de la segunda columna: así
   entra donde hay dos fotografías y no donde la segunda columna lleva otra
   cosa, como la tarjeta del formulario de contacto. */
@media (min-width: 900px) {
    .as-contenido .wp-block-columns > .wp-block-column:nth-child(2) > .wp-block-image:only-child {
        margin-top: var(--as-esp-4);
    }
}

/* El punto de una lista, del color de la marca. */
.as-contenido li { margin-bottom: .35rem; }
.as-contenido li::marker { color: var(--as-secundario); }

/* ------------------------------------------ herencia de la conversión ---

   La migración a bloques de la fase 4 dejó en el contenido tres clases
   propias —as-cifra, as-redes, as-mapa— esperando un CSS que nunca se
   escribió. Sin él las cifras se apilaban una bajo otra y los enlaces de
   redes quedaban como texto suelto. Son ganchos que ya existen en 4 páginas:
   se estilan aquí en vez de tocar el contenido.
   ------------------------------------------------------------------------ */

/* Cifras de la escuela: +150 matriculados, +30 egresados, +90% satisfacción.
   Van seguidas, así que fluyen en fila en lugar de apilarse. */
.as-cifra {
    display: inline-block;
    vertical-align: top;
    margin: 0 var(--as-esp-4) var(--as-esp-3) 0;
    padding-top: .6rem;
    border-top: 3px solid var(--as-secundario);
}

.as-cifra h3 {
    font-size: clamp(1.9rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* Desde la reconstrucción, cada cifra vive en su propia columna. Ahí
   `inline-block` dejaba el filete del ancho del número —tres reglas de tres
   largos distintos, +150 larga, +30 corta— y la fila se estiraba por 1.400px
   hasta que los tres datos dejaron de leerse juntos. Dentro de una columna la
   cifra la ocupa entera: todos los filetes miden lo mismo. */
.wp-block-column > .as-cifra {
    display: block;
    margin: 0;
}

/* Una fila de cifras es un dato que se lee de un golpe, no una sección:
   agrupada dice «esto es la escuela en tres números».

   Y es lo mejor que tiene «Quiénes somos», así que se le da el ancho entero y
   una superficie propia. La página encadenaba cinco secciones con la misma
   forma exacta —antetítulo, titular, párrafo gris, todo a la izquierda con
   media pantalla en blanco al lado—; que las cifras sean una banda y no otro
   párrafo es el primero de los tres cambios de ritmo que necesita. */
.as-contenido > .wp-block-columns:has(.as-cifra) {
    max-width: none;
    gap: var(--as-esp-4);
    margin-top: var(--as-esp-4);
    padding: var(--as-esp-4);
    background: var(--as-crema);
    border-radius: var(--as-radio-foto);
}

.as-contenido .as-cifra h3 { font-size: clamp(2.1rem, 4vw, 3rem); }

.as-cifra p {
    margin: 0;
    max-width: none;
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--as-texto);
}

.as-redes { font-family: var(--as-titulos); font-weight: 600; }
.as-redes a { text-decoration: none; padding: .2rem .1rem; }
.as-redes a:hover { text-decoration: underline; }

/* --------------------------------------------- contacto: la tarjeta del formulario ---

   El formulario había dejado de leerse como lo que es. Dos columnas de texto sobre
   blanco y, entre medias, los campos: el visitante no veía una acción, veía más
   contenido. La tarjeta es la frontera que le devuelve al formulario su condición de
   cosa que se hace, no que se lee.

   No inventa un componente nuevo: repite la receta de .as-inscripcion__tarjeta —borde
   de 1px en --as-linea, --as-radio, relleno de la escala y --as-sombra—, que es la
   tarjeta de la ficha de curso y ocupa exactamente la misma posición, la columna
   derecha donde vive la conversión.

   El gancho es una clase en el contenido y no un :has() en la hoja porque esa es ya la
   convención del sitio: as-cifra, as-redes y as-mapa son clases que un editor ve y
   puede mover. Y cuelga de la COLUMNA, no del <form>, por dos motivos: mete el titular
   y su entradilla dentro de la tarjeta —una tarjeta con título es un componente, una
   caja de campos suelta es un cajón—, y sobrevive al envío, porque Renderer::render
   sustituye el <form> entero por .as-form__success al mandar el mensaje. Una tarjeta
   anclada al formulario desaparecería justo cuando toca dar las gracias.
   -------------------------------------------------------------------------------------- */

.as-tarjeta-contacto {
    /* Una tarjeta mide lo que mide su contenido. Sin esto las columnas de bloques la
       estirarían hasta igualar la altura de la columna vecina y el botón de enviar
       acabaría flotando sobre un vacío que nadie puso ahí. */
    align-self: start;

    padding: var(--as-esp-3);

    /* Crema, la segunda superficie del tema: la misma del marco del mapa que va justo
       debajo y la de .as-aviso. Aquí hace un trabajo concreto, no decora — los campos
       ya son blancos, así que sobre crema pasan a ser lo único rellenable de la
       página. Sobre blanco no se distinguían de nada. */
    background: var(--as-crema);
    border: 1px solid var(--as-linea);

    /* El color entra aquí, y sólo aquí: un filete, no un relleno. --as-secundario es
       válido porque no lleva texto encima —esa es la frontera que documenta :root— y
       es el gesto que el tema ya repite en .as-encabezado--area y en .as-cifra. Un
       acento en toda la pantalla convence más que cinco repartidos. */
    border-top: 3px solid var(--as-secundario);

    border-radius: var(--as-radio);
    box-shadow: var(--as-sombra);
}

/* 782px es donde los bloques dejan de apilar las columnas. Con la tarjeta al lado del
   texto sobra sitio para más aire; apilada en móvil, ese aire se lo quitaría al
   contenido. */
@media (min-width: 782px) {
    .as-tarjeta-contacto { padding: var(--as-esp-4); }
}

/* Dentro de la tarjeta la medida la pone la tarjeta: los 40rem de .as-form existen
   para cuando el formulario va suelto en una página ancha. */
.as-tarjeta-contacto .as-form { max-width: none; }

/* El titular abre la tarjeta, así que no arrastra el margen de sección que llevan los
   h4 del contenido. */
.as-tarjeta-contacto > :first-child { margin-top: 0; }

/* El mapa era un widget de Google Maps de Elementor y no sobrevivió a la
   conversión: quedó la figura vacía. Se rellena desde la dirección de los
   ajustes, así que mapa y dirección no pueden contradecirse.

   No se carga con la página: un mapa incrustado es un marco de terceros que
   instala cookies, y este sitio pide consentimiento. Hasta que alguien lo
   pida, el bloque es la dirección y un enlace a cómo llegar — que es lo que
   casi todo el mundo venía a buscar. */
.as-mapa:empty { display: none; }

.as-mapa--cargable { margin: var(--as-esp-3) 0 0; }

/* Sin mapa cargado esto es una tarjeta de dirección, no el hueco donde debería
   haber un mapa: 17rem de alto mínimo dejaban la dirección y los dos botones
   flotando en el centro de un cajón vacío del ancho de la página. Mide lo que
   mide su contenido y vuelve a ser una franja de «ven a vernos». */
.as-mapa__marco {
    display: grid;
    place-content: center;
    gap: var(--as-esp-2);
    padding: var(--as-esp-4) var(--as-esp-3);
    text-align: center;
    background: var(--as-crema);
    border: 1px solid var(--as-linea);
    border-radius: var(--as-radio);
}

.as-mapa__direccion {
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--as-primario);
    margin: 0;
    max-width: 28ch;
    margin-inline: auto;
}

.as-mapa__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--as-esp-1);
    justify-content: center;
    margin: 0;
    max-width: none;
}

.as-mapa__nota { font-size: .78rem; color: var(--as-texto); margin: 0; max-width: none; }

/* Con el mapa dentro, el marco deja de ser una tarjeta y pasa a ser el mapa. */
.as-mapa__marco[data-mapa-cargado] {
    display: block;
    padding: 0;
    overflow: hidden;
    min-height: 0;
}

.as-mapa__marco iframe { display: block; width: 100%; height: 24rem; border: 0; }

/* Una imagen suelta manda en su ancho. Una TIRA de imágenes seguidas era una
   galería o un carrusel antes de la conversión, y apilada da columnas de
   2.000px junto a textos de 700. Vuelve a ser fila. */
.wp-block-image:has(+ .wp-block-image),
.wp-block-image + .wp-block-image {
    display: inline-block;
    width: calc(50% - .4rem);
    /* El tope hace que la tira se adapte sola al sitio que tenga: tres caben
       en fila a ancho de página y dos dentro de una columna, sin contar
       hermanos ni fijar un número de columnas. */
    max-width: 22rem;
    margin-inline: 0;
    vertical-align: top;
}

/* Los grupos de botones seguidos se dejaron en bloque a propósito: como las
   cifras que suelen precederlos ya son inline-block, ponerlos en línea los
   metía dentro de esa misma fila y el botón acababa flotando junto a un
   «+90%». Apilados se leen como lo que son, dos acciones distintas. */
.wp-block-buttons + .wp-block-buttons { margin-top: var(--as-esp-1); }

.wp-block-image:has(+ .wp-block-image) img,
.wp-block-image + .wp-block-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--as-radio-foto);
}

/* Ninguna imagen de contenido debe ocupar una pantalla entera: son
   ilustraciones dentro de un texto, no portadas. */
.as-contenido .wp-block-image img { max-height: 34rem; width: auto; }
.as-contenido .wp-block-image:has(+ .wp-block-image) img,
.as-contenido .wp-block-image + .wp-block-image img { max-height: none; width: 100%; }

/* ---------------------------------------------------------------- botón --- */

.as-boton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: 1.063rem;
    padding: .75rem 1.5rem;
    border: 1px solid var(--as-enlace);
    border-radius: var(--as-radio);
    background: var(--as-enlace);
    color: var(--as-blanco);
    text-decoration: none;
    cursor: pointer;
}

.as-boton:hover { background: var(--as-primario); border-color: var(--as-primario); color: var(--as-blanco); }

.as-boton--suave { background: transparent; color: var(--as-enlace); }
.as-boton--suave:hover { background: var(--as-enlace); color: var(--as-blanco); }

/* ------------------------------------------------------ respuesta al pulsar ---

   Ningún control del sitio acusaba recibo de que lo habías pulsado. Es el
   detalle que nadie nombra y que todo el mundo nota: sin él la interfaz parece
   estar pensándoselo, aunque responda igual de rápido.

   Un 3% de reducción durante 160ms basta. Más grande parece un juguete, más
   lento deja de ser respuesta y pasa a ser animación.

   La transición nombra las propiedades que cambian en vez de usar `all`: `all`
   incluye todo lo que alguien añada mañana, y eso es cómo se acaba animando el
   ancho de un botón sin querer. El bloque de movimiento reducido del final la
   apaga; el salto de escala se queda, porque una confirmación instantánea no
   marea a nadie y quitarla dejaría el control mudo. */

.as-boton,
.as-nav__cta,
.as-franja__cta,
.as-filtro,
.as-pastilla,
.as-menu-boton,
.as-panel__postula,
.as-form__submit,
.as-form button[type='submit'],
.as-contenido .wp-block-button__link {
    transition:
        transform      160ms var(--as-salida),
        background-color 160ms var(--as-salida),
        border-color   160ms var(--as-salida),
        color          160ms var(--as-salida),
        box-shadow     160ms var(--as-salida);
}

.as-boton:active,
.as-nav__cta:active,
.as-franja__cta:active,
.as-filtro:active,
.as-pastilla:active,
.as-menu-boton:active,
.as-panel__postula:active,
.as-form__submit:active,
.as-form button[type='submit']:active,
.as-contenido .wp-block-button__link:active {
    transform: scale(.97);
}

/* ------------------------------------------------------------ formularios --- */

.as-form { display: grid; gap: var(--as-esp-3); max-width: 40rem; }
.as-form__field { display: grid; gap: .35rem; }
.as-form__field label,
.as-form__field legend { font-weight: 600; color: var(--as-primario); }

.as-form input[type='text'],
.as-form input[type='email'],
.as-form input[type='tel'],
.as-form input[type='date'],
.as-form input[type='number'],
.as-form input[type='file'],
.as-form textarea,
.as-form select {
    font: inherit;
    padding: .7rem .9rem;
    border: 1px solid var(--as-linea);
    border-radius: var(--as-radio);
    background: var(--as-blanco);
    color: var(--as-primario);
    width: 100%;
}

.as-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .35rem; }
.as-form__check { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; }
.as-form__check input { margin-top: .3rem; }

.as-form__help  { font-size: .875rem; color: var(--as-texto); margin: 0; }
.as-form__error { font-size: .875rem; color: var(--as-alerta); margin: 0; font-weight: 600; }

.as-form__field.is-invalid input,
.as-form__field.is-invalid textarea { border-color: var(--as-alerta); }

.as-form__errors {
    padding: .75rem 1rem;
    border-left: 3px solid var(--as-alerta);
    background: #FFF4F4;
    color: var(--as-primario);
}

.as-form__success {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--as-acento);
    background: #F1FBF2;
    color: var(--as-primario);
}

/* El honeypot debe existir en el DOM y no verse jamás. */
.as-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.as-form__submit { border: 0; }
.as-form__submit,
.as-form button[type='submit'] {
    justify-self: start;
    font-family: var(--as-titulos);
    font-weight: 600;
    font-size: 1.063rem;
    padding: .8rem 1.75rem;
    border-radius: var(--as-radio);
    background: var(--as-enlace);
    color: var(--as-blanco);
    cursor: pointer;
}

.as-form button[type='submit']:hover { background: var(--as-primario); }

/* --------------------------------------------------------------- avisos --- */

.as-vacio {
    padding: var(--as-esp-4);
    border: 1px dashed var(--as-linea);
    border-radius: var(--as-radio);
    text-align: center;
    color: var(--as-texto);
}

.as-paginacion {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: var(--as-esp-4);
}

.as-paginacion .page-numbers {
    padding: .5rem .85rem;
    border: 1px solid var(--as-linea);
    border-radius: var(--as-radio);
    text-decoration: none;
    color: var(--as-primario);
}

.as-paginacion .current {
    background: var(--as-primario);
    border-color: var(--as-primario);
    color: var(--as-blanco);
}

/* ------------------------------------------------------- pantallas táctiles ---

   En un móvil no hay ratón, pero sí hay :hover: el navegador lo dispara al
   tocar y lo deja puesto hasta que tocas otra cosa. Una foto que crece al pasar
   el ratón se queda crecida después de un toque, y el visitante no tiene forma
   de deshacerlo.

   Los cambios de color se quedan, que no molestan a nadie. Lo que se apaga es
   el movimiento. */
@media (hover: none) {
    .as-panel__destacado:hover img,
    .as-panel__tarjeta:hover img,
    .as-mosaico:hover img,
    .as-destacada__imagen:hover img,
    .as-galeria__pieza:hover img,
    .as-retrato__enlace:hover .as-retrato__imagen img,
    .as-ficha:hover,
    .as-enlace-flecha:hover span { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}