/*
Theme Name:   Rosenthal — Divi Child
Theme URI:    https://salesianorosenthal.edu.pe
Description:  Tema hijo de Divi para el Colegio Salesiano Rosenthal de la Puente. Todo el CSS y el PHP propios del proyecto viven aquí, para que las actualizaciones de Divi nunca los pisen. La capa .sdb- corresponde al Manual de Identidad de la Congregación Salesiana del Perú y está pensada para replicarse en otras obras.
Author:       Rodolfo Velarde
Template:     Divi
Version:      3.51.0
Text Domain:  divi-child
*/

/* ==========================================================================
   SISTEMA DE DISEÑO

   Dos capas, deliberadamente separadas:

   --sdb-*   Congregación Salesiana del Perú. Igual en todas las obras.
             No se toca al adaptar el kit a otro colegio.

   --rsn-*   Colegio Salesiano Rosenthal de la Puente. Lo propio.
             ESTA es la costura del sistema: para adaptar el kit a otra
             obra, se reescribe solo este bloque.

   Referencias: recursos/identidad/Lineamientos.txt
                C:\dev\recursos\salesianos\manual-congregacion\
   ========================================================================== */

:root {

    /* ------------------------------------------------------------------
       CAPA SALESIANA — Manual de Identidad V4 de la Congregación

       Los cinco colores de la paleta corporativa (pág. 18-19). Desde la
       reunión con los directivos de la Red Salesiana de Escuelas (set. 2026),
       ESTA es la paleta del sitio: la obra no aporta cromatismo propio.

       Los valores son los de las MUESTRAS de las págs. 18-19, no los del
       texto corrido de la pág. 73, que se contradice con ellas —beige
       #FDE6C1 y rojo #DA0B33 allí—. Es el Punto 2 del informe a la
       Inspectoría, todavía sin respuesta.
       ------------------------------------------------------------------ */

    /* Celeste corporativo, pág. 18.
       NO SIRVE PARA TEXTO: 3.20 sobre blanco y 2.12 sobre el azul. Es un
       color de barras, filetes, iconos y bloques con tinta oscura encima. */
    --sdb-celeste:           #0099D9;

    /* Azul corporativo, pág. 18. El caballo de batalla: 6.78 sobre blanco
       y 6.78 en blanco sobre él. Enlaces, botones, fondos oscuros. */
    --sdb-azul:              #005F99;

    --sdb-blanco:            #FFFFFF;

    /* Beige y rojo, pág. 19. OJO: el manual los rotula «provisional» incluso
       en la V4, entregada como final. Viven en un token justamente por eso:
       si la Inspectoría fija otros valores, se cambian aquí y no en 92
       reglas repartidas por la hoja. */
    --sdb-beige:             #FAE3B5;
    --sdb-rojo:              #D6182C;


    /* ------------------------------------------------------------------
       CAPA DEL COLEGIO — la costura replicable

       Ya no son colores propios: son PAPELES que se resuelven sobre la
       paleta salesiana. Se mantienen los nombres --rsn-* porque son los
       que usa toda la hoja, y porque si algún día la Inspectoría autoriza
       a una obra a conservar su cromatismo, este bloque es lo único que
       hay que reescribir.
       ------------------------------------------------------------------ */

    --rsn-marino:            var(--sdb-azul);    /* bandas oscuras y titulares */
    --rsn-azul:              var(--sdb-azul);    /* botones, enlaces */
    --rsn-blanco:            #FFFFFF;

    /* --- Acentos: CONTEXTUALES ---

       Aquí estaba el dorado, que servía para las dos cosas a la vez porque
       se leía sobre blanco y sobre marino. Ningún color de la paleta nueva
       hace eso: el celeste desaparece sobre el azul (2.12) y el beige
       desaparece sobre el blanco (1.26).

       Por eso el acento se parte en tres papeles y se REDEFINE dentro de los
       bloques oscuros, más abajo. Una regla escrita una vez, y cada acento
       sale legible esté donde esté.

       Los VALORES de cada contexto viven aquí, en tokens con apellido
       —«claro» y «oscuro»—, y no dentro de la lista de bandas oscuras. Así la
       lista de veinticinco selectores existe una sola vez y no sabe de qué
       color pinta: el interruptor de identidad, al final de este bloque, solo
       cambia los apellidos. */

    /* Sobre fondo claro (blanco y superficies suaves) */
    --rsn-acento-claro:       var(--sdb-celeste); /* barras, filetes, marcas sin texto */
    --rsn-acento-texto-claro: var(--sdb-azul);    /* acento que SÍ lleva texto */
    --rsn-foco-claro:         var(--sdb-azul);    /* anillo de foco del teclado */

    /* Sobre las bandas oscuras. Un solo valor para los tres papeles: sobre
       oscuro, el color que se lee como texto también sirve de filete. */
    --rsn-acento-oscuro:      var(--sdb-beige);   /* 5.40 sobre el azul */

    /* Solo lo usa el destacado de la cabecera oscura al pasar el ratón. Aquí
       es el celeste, y la razón está junto a esa regla. */
    --rsn-acento-oscuro-hover: var(--sdb-celeste);

    /* Los tres papeles que usa toda la hoja. Arrancan en su valor claro; la
       lista de bandas oscuras los cambia al oscuro. */
    --rsn-acento:            var(--rsn-acento-claro);
    --rsn-acento-texto:      var(--rsn-acento-texto-claro);
    --rsn-foco:              var(--rsn-foco-claro);

    /* El acento en versión velo: fondos al 10-18 % detrás de avisos, marcas y
       el evento de Admisión. Componentes RGB para meterlo en un rgba().
       OJO: en la identidad salesiana este trío sigue siendo el dorado viejo
       (#BF953F), que es lo que esas cuatro reglas pintaban antes de pasar por
       token; se conserva para no cambiar nada de lo que se ve. Decidir su
       valor definitivo está en PENDIENTES.md. */
    --rsn-acento-rgb:        191, 149, 63;

    /* Nombres antiguos, para que nada quede huérfano mientras se migra. */
    --rsn-dorado:            var(--rsn-acento);
    --rsn-dorado-texto:      var(--rsn-acento-texto);

    /* --- Derivados --- */
    --rsn-azul-hover:        #00486F;
    --rsn-azul-rgb:          0, 95, 153;          /* el azul, para halos rgba() */

    /* El velo sobre las fotos del héroe. No es un color de la paleta sino un
       oscurecido del azul: tiene que garantizar el blanco del titular sobre
       una fotografía cualquiera, y el azul corporativo puro no da para eso. */
    --rsn-marino-overlay:    rgba(0, 60, 96, 0.86);

    /* --- Neutros ---
       El manual no define tinta de texto: ninguno de sus cinco colores
       aguanta párrafos largos. Este gris azulado es decisión tipográfica
       nuestra, no de marca, y va dicho en el informe a la Inspectoría. */
    /* Las sombras y los velos sobre fotografía se componen con este trío, no
       con un color de la paleta: son recursos de profundidad y de legibilidad,
       no de marca. Es el azul corporativo oscurecido, para que la familia
       cromática no se rompa. Cambiarlo aquí los cambia los 51 sitios. */
    --rsn-tinta-rgb:         0, 45, 72;

    --rsn-texto:             #1A1F2E;
    --rsn-texto-suave:       #5A6472;
    --rsn-borde:             #DFE3E8;
    --rsn-fondo-suave:       #F2F8FB;            /* celeste susurrado */
    --rsn-fondo-calido:      var(--sdb-beige);   /* franjas cálidas */
    --rsn-aviso:             var(--sdb-rojo);    /* SOLO avisos y campañas, pág. 74 */


    /* ------------------------------------------------------------------
       TIPOGRAFÍA

       El manual (pág. 23) fija Merriweather como fuente principal, y
       (pág. 25) Times New Roman como complementaria.

       Times New Roman es una decisión de imprenta que no se sostiene en
       pantalla: dos serifas juntas compiten, y en cuerpos pequeños rinde
       mal. rse.edu.pe ya resolvió esto usando Merriweather Sans, que es
       la hermana sans de la principal — mismo origen, mismas proporciones,
       licencia libre para web. Se adopta ese criterio.

       Las fuentes las carga el tema hijo (functions.php), no Divi.
       ------------------------------------------------------------------ */

    --rsn-font-display:      'Merriweather', Georgia, 'Times New Roman', serif;
    /* Titillium Web y no Merriweather Sans: lo fija el Manual de Identidad V4
       de la Congregación —p. 24 y p. 75—. La pila de respaldo importa más de lo
       habitual porque el propio manual admite Arial o Times cuando Titillium no
       esté disponible. */
    --rsn-font-body:         'Titillium Web', system-ui, -apple-system, Arial,
                             'Helvetica Neue', sans-serif;


    /* ------------------------------------------------------------------
       ESCALA TIPOGRÁFICA

       Fluida con clamp(): el valor crece con el ancho de la ventana entre
       un mínimo y un máximo, sin saltos bruscos en los puntos de quiebre.

       El cuerpo va a 18px, no a 16. El manual de la Congregación pone el
       suelo en 16 —«se evitarán cuerpos menores a 16px en lectura continua»,
       p. 75—, y este sitio va por encima a propósito: son textos
       institucionales largos, y Titillium Web tiene una altura de x menor que
       Merriweather Sans, así que al mismo tamaño en píxeles se lee más
       pequeña.
       ------------------------------------------------------------------ */

    --rsn-txt-xs:    0.8125rem;                                  /* 13px */
    --rsn-txt-sm:    0.9375rem;                                  /* 15px */
    --rsn-txt-base:  1.125rem;                                   /* 18px */
    --rsn-txt-lg:    clamp(1.1875rem, 1.13rem + 0.30vw, 1.375rem);

    /* Escala recortada tras verla en pantalla: la anterior llegaba a 62 px
       en h1 y resultaba aplastante. Merriweather tiene una altura de x
       grande y ojo abierto, así que al mismo tamaño en píxeles se lee
       bastante mayor que una serifa clásica. Con titulares largos —"Gran
       Desfile Escolar por el aniversario de Magdalena del Mar"— el efecto
       se multiplica.

       Escala actual, de 28 a 40 px en h1, con razón ~1.25 entre niveles. */

    --rsn-h6:        clamp(1rem,       0.98rem + 0.10vw, 1.0625rem);  /* 16→17 */
    --rsn-h5:        clamp(1.0625rem,  1.02rem + 0.18vw, 1.1875rem);  /* 17→19 */
    --rsn-h4:        clamp(1.1875rem,  1.13rem + 0.25vw, 1.375rem);   /* 19→22 */
    --rsn-h3:        clamp(1.3125rem,  1.20rem + 0.50vw, 1.625rem);   /* 21→26 */
    --rsn-h2:        clamp(1.5rem,     1.30rem + 0.85vw, 2rem);       /* 24→32 */
    --rsn-h1:        clamp(1.75rem,    1.35rem + 1.70vw, 2.5rem);     /* 28→40 */

    /* Interlineado: los titulares serif necesitan poco; el cuerpo, mucho */
    --rsn-lh-titulo: 1.2;
    --rsn-lh-corto:  1.4;
    --rsn-lh-texto:  1.65;

    /* Merriweather es ancha: los titulares grandes piden tracking negativo */
    --rsn-track-h1:  -0.02em;
    --rsn-track-h2:  -0.015em;


    /* ------------------------------------------------------------------
       ESPACIADO — escala de 4px
       ------------------------------------------------------------------ */

    --rsn-esp-1:     0.25rem;
    --rsn-esp-2:     0.5rem;
    --rsn-esp-3:     0.75rem;
    --rsn-esp-4:     1rem;
    --rsn-esp-5:     1.25rem;   /* faltaba: el filete de la hoja lo pedía y, al no existir,
                                   el navegador descartaba su margen entero */
    --rsn-esp-6:     1.5rem;
    --rsn-esp-8:     2rem;
    --rsn-esp-12:    3rem;
    --rsn-esp-16:    4rem;
    --rsn-esp-24:    6rem;

    /* Aire vertical de una sección, fluido */
    --rsn-seccion:   clamp(3.5rem, 2.5rem + 5vw, 7rem);


    /* ------------------------------------------------------------------
       FORMA
       ------------------------------------------------------------------ */

    --rsn-radio-sm:  4px;
    --rsn-radio:     8px;
    --rsn-radio-lg:  16px;

    --rsn-sombra:    0 1px 3px rgba(var(--rsn-tinta-rgb), 0.08),
                     0 4px 16px rgba(var(--rsn-tinta-rgb), 0.06);
    --rsn-sombra-lg: 0 4px 12px rgba(var(--rsn-tinta-rgb), 0.10),
                     0 16px 40px rgba(var(--rsn-tinta-rgb), 0.10);

    /* EL RELIEVE DE LO PULSABLE

       Lo comparten el botón y la tarjeta del plano. El sitio tiene un solo
       lenguaje de relieve, y si cada pieza lo escribe por su cuenta acaban con
       énfasis distintos: el plano se veía elevado y el botón, casi plano al
       lado.

       Dos capas y no una. La primera es corta y oscura —el contacto con el
       suelo, lo que impide que la pieza parezca flotar—; la segunda es larga
       y tenue —la sombra proyectada—. Con una sola capa, subir el énfasis
       obliga a subir el desenfoque y la pieza se despega. Por eso el tamaño
       del elemento deja de importar: un botón de 42 px y un plano de 500
       leen la misma altura. */
    --rsn-realce:      0 2px 5px rgba(var(--rsn-tinta-rgb), 0.10),
                       0 8px 22px rgba(var(--rsn-tinta-rgb), 0.13);
    --rsn-realce-alto: 0 4px 12px rgba(var(--rsn-tinta-rgb), 0.14),
                       0 16px 38px rgba(var(--rsn-tinta-rgb), 0.22);

    /* Sobre marino, una sombra marino no existe. */
    --rsn-realce-oscuro:      0 2px 6px rgba(0, 0, 0, 0.24),
                              0 8px 24px rgba(0, 0, 0, 0.30);
    --rsn-realce-oscuro-alto: 0 4px 14px rgba(0, 0, 0, 0.32),
                              0 16px 38px rgba(0, 0, 0, 0.46);

    /* Grosor de la línea dorada de acento */
    --rsn-filete:    3px;
}


/* ==========================================================================
   EL INTERRUPTOR DE IDENTIDAD

   Las dos instalaciones —la maqueta de la RSE y el sitio del colegio— corren
   este mismo archivo. Lo que las distingue es UNA constante por instalación,
   RSN_IDENTIDAD (ver inc/identidad.php), que el tema escribe en la etiqueta
   <html> como data-identidad. Dos valores:

     salesiana   La paleta del Manual V4. Es lo de arriba y no necesita bloque:
                 es el valor por omisión de cada token.
     propia      El cromatismo del colegio. Este bloque, y nada más.

   Se cuelga de :root Y NO DE body, y la razón es técnica: una propiedad
   personalizada se resuelve donde se declara. `--rsn-acento` se declara en
   :root como var(--rsn-acento-claro); si «propia» reescribiera el acento claro
   en body, :root ya habría resuelto el suyo con el valor salesiano y body
   heredaría el resultado, no la fórmula. En :root, ambos bloques pesan sobre
   el mismo elemento y gana el más específico: el de la identidad.

   Lo que NO cambia con la identidad es la capa --sdb-*: el beige de las
   franjas cálidas y el rojo de los avisos son de la Congregación y viajan
   iguales a todas las obras, también a esta.

   El Rosenthal conserva este año su identidad porque aún no adopta los
   lineamientos de la RSE. Los valores son los del MANUAL DE MARCA del colegio
   («Salesiano Rosenthal — Identidad visual», recibido el 11 set. 2026,
   docs/manual-marca-rosenthal.pdf): marino #021039 para cabecera, pie y
   secciones especiales; azul institucional #0A3BAB para botones, enlaces y
   títulos destacados; dorado #F1C969 como acento —Admisión, botones, palabras
   importantes, líneas y detalles—; blanco predominante. Montserrat en todo.
   El día que adopte los lineamientos, el cambio es la constante de su
   wp-config.php; este bloque se queda, por si la decisión se revisa en la
   siguiente reunión.

   Contrastes medidos (WCAG 2.1):
     dorado #F1C969 sobre marino #021039 ........ 11.71 ✓ texto
     marino sobre dorado (botones) .............. 11.71 ✓ texto
     blanco sobre marino ........................ 18.49 ✓ texto
     azul #0A3BAB sobre blanco .................. 9.43  ✓ texto
     dorado-texto #956D0E sobre blanco .......... 4.70  ✓ texto
     azul #0A3BAB sobre beige ................... 7.51  ✓ texto (islas)
     dorado #F1C969 sobre blanco ................ 1.58  ✗ solo filetes
   ========================================================================== */

:root[data-identidad="propia"] {

    --rsn-marino:             #021039;           /* azul marino del colegio */
    --rsn-azul:               #0A3BAB;           /* azul institucional */
    --rsn-azul-hover:         #082F86;
    --rsn-azul-rgb:           10, 59, 171;

    /* El dorado vuelve a hacer de acento en los dos contextos: sobre marino
       se lee como texto de sobra (11.71), y sobre blanco va en filetes,
       iconos y fondos de botón. El dorado del manual es claro —#F1C969, 1.58
       sobre blanco— así que el ÚNICO caso en que hace falta una palabra
       dorada sobre blanco usa un derivado oscurecido en su mismo tono. */
    --rsn-acento-claro:       #F1C969;
    --rsn-acento-texto-claro: #956D0E;
    --rsn-foco-claro:         #0A3BAB;
    --rsn-acento-oscuro:      #F1C969;
    --rsn-acento-oscuro-hover:#F8DC96;           /* el destacado de la cabecera oscura */
    --rsn-acento-rgb:         241, 201, 105;

    /* Velos, sombras y superficies, en la familia del marino */
    --rsn-marino-overlay:     rgba(2, 16, 57, 0.86);
    --rsn-tinta-rgb:          2, 16, 57;
    --rsn-fondo-suave:        #F5F7FA;

    /* TIPOGRAFÍA. El manual del colegio fija Montserrat para títulos (en su
       corte «Montserrat Arabic», cuyo alfabeto latino es el mismo Montserrat)
       y para el texto. Una sola familia en dos pesos, en vez de la pareja
       serif + sans de la Congregación. La carga functions.php según la
       identidad, para no descargar cuatro familias. */
    --rsn-font-display:       'Montserrat', system-ui, -apple-system, Arial, sans-serif;
    --rsn-font-body:          'Montserrat', system-ui, -apple-system, Arial, sans-serif;

    /* Montserrat tiene la altura de x grande y el ojo ancho: a 18 px se lee
       mayor que Titillium y los párrafos largos se vuelven pesados. Un punto
       menos, sin bajar del suelo de 16 px de lectura continua. */
    --rsn-txt-base:           1.0625rem;                                   /* 17px */
}


/* ==========================================================================
   ACENTOS EN FONDO OSCURO

   Cada selector de esta lista pinta una banda oscura. Dentro de ellas, los
   tres acentos cambian a su valor oscuro: el celeste y el azul serían
   invisibles sobre el azul corporativo, y el beige sí se lee (5.40).

   Es la lista de los selectores que declaran `background: var(--rsn-marino)`.
   Si mañana nace otra banda oscura, hay que añadirla aquí — o su anillo de
   foco desaparecerá, que es un fallo de accesibilidad que nadie ve hasta que
   alguien navega con el teclado.

   La lista no lleva ningún color escrito: lee --rsn-acento-oscuro, que es lo
   que el interruptor de identidad cambia. Así existe una sola vez.
   ========================================================================== */

.rsn-marino,
.rsn-saltar,
.rsn-portada,
.rsn-mision,
.rsn-video,
.rsn-video-portada,
.rsn-nivel-lamina,
.rsn-nivel-lamina--sin-foto,
.rsn-admision,
.rsn-teletipo-rotulo,
.rsn-noticia-caja,
.rsn-noticia-plancha,
.rsn-perfil-icono,
.rsn-dimension-emblema,
.rsn-reconocimiento-lupa,
.rsn-adm-portada,
.rsn-adm-paso-numero,
.rsn-adm-cierre,
.rsn-archivo-tema.esta-activo,
.rsn-paginacion .page-numbers.current,
.rsn-pie,
.rsn-doc-ext,
.rsn-doc-version,
.rsn-cabecera--oscuro {
    --rsn-acento:        var(--rsn-acento-oscuro);
    --rsn-acento-texto:  var(--rsn-acento-oscuro);
    --rsn-foco:          var(--rsn-acento-oscuro);
}


/* ISLAS CLARAS DENTRO DE BANDAS OSCURAS

   La franja de Razón, Religión y Amor es beige y vive DENTRO de la sección
   de misión, que es oscura. Sin esta regla hereda los acentos del padre y
   pinta beige sobre beige: el rótulo desaparece por completo.

   La propiedad personalizada la resuelve el ancestro más cercano que la
   declare, así que basta con declararla aquí; no hace falta pelear con la
   especificidad ni con el orden del archivo.

   Sobre el beige, los tres papeles van al azul —también el filete—: ni el
   celeste ni el dorado se leen sobre una superficie cálida. */

.rsn-mision-valores {
    --rsn-acento:        var(--rsn-azul);
    --rsn-acento-texto:  var(--rsn-azul);
    --rsn-foco:          var(--rsn-azul);
}


/* --------------------------------------------------------------------------
   LA CAJA, DECLARADA

   Divi ya pone `border-box` en todo, así que sobre el sitio real esta regla no
   cambia absolutamente nada. Se declara porque el kit tiene que sostenerse por
   sí mismo: cada vez que se ha probado un bloque aislado —sin Divi delante—
   ha aparecido el mismo error, un `height: 100%` más su relleno desbordando la
   caja que lo contiene, y se ha corregido dos veces a mano. Vale más cerrar la
   clase entera de errores que ir cazándolos de uno en uno.
   -------------------------------------------------------------------------- */

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


/* Lo que se oye pero no se ve.

   Para etiquetas que un lector de pantalla necesita y que en pantalla sobran
   porque el icono ya lo dice. No es `display: none` ni `visibility: hidden`:
   esos dos lo esconden TAMBIÉN del lector, que es justo lo contrario de lo que
   se busca. */
.rsn-visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   REGLAS DE CONTRASTE — leer antes de maquetar
   --------------------------------------------------------------------------
   Calculado según WCAG 2.1. Mínimo para texto normal 4.5:1; para texto
   grande (24px, o 19px en negrita) 3:1.

     Azul institucional sobre blanco ......... 9.5:1   ✓ texto
     Blanco sobre azul marino ................ 18.5:1  ✓ texto
     Dorado sobre azul marino ................ 7.7:1   ✓ texto
     Celeste salesiano sobre azul marino ..... 6.5:1   ✓ texto
     Dorado sobre blanco ..................... 2.4:1   ✗ NO como texto
     Celeste salesiano sobre blanco .......... 2.8:1   ✗ NO como texto
     Azul institucional sobre azul marino .... 1.9:1   ✗ solo decorativo

   Los dos colores de acento — dorado y celeste — se comportan igual:
   brillan sobre el marino y desaparecen sobre el blanco. Sobre fondo
   claro van en líneas, íconos y bordes; nunca en texto que haya que leer.

   Si hace falta una palabra dorada sobre blanco: --rsn-dorado-texto.
   ========================================================================== */


/* ==========================================================================
   BASE

   Capa mínima: establece el sistema y deja que Divi haga el resto.
   No se usa !important en ningún sitio — si un módulo de Divi necesita
   otra cosa, se ajusta en el módulo, no peleando desde aquí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sobre la especificidad de este bloque
   --------------------------------------------------------------------------
   Los selectores llevan `html` delante a propósito. No es descuido ni manía.

   Divi imprime la hoja del personalizador — et-divi-customizer.min.css —
   DESPUÉS de la del tema hijo, y lo hace fuera del sistema de dependencias
   de WordPress: no se puede pedir que cargue antes. Esa hoja escribe
   `font-family: 'Open Sans'` sobre body y sobre los encabezados aunque el
   selector del personalizador diga "Default Theme Font".

   Con la misma especificidad gana la última en cargar, que es la de Divi.
   Anteponer `html` sube un escalón (0,0,2 frente a 0,0,1) y resuelve el
   conflicto sin recurrir a !important, que sí cerraría la puerta a
   cualquier ajuste posterior desde un módulo.

   Los selectores con .et_pb_module llevan `html` por la misma razón:
   Divi los escribe como (0,1,1) y necesitamos (0,1,2).
   -------------------------------------------------------------------------- */

html body,
html .et_pb_module,
html input, html textarea, html select, html button {
    font-family: var(--rsn-font-body);
}

html body {
    font-size: var(--rsn-txt-base);
    line-height: var(--rsn-lh-texto);
    color: var(--rsn-texto);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Divi fija `p { font-size: 14px }` en su hoja principal, así que el tamaño
   del body no se hereda hasta el párrafo. Hay que decirlo explícitamente. */
html body p,
html .et_pb_text p,
html .entry-content p {
    font-size: var(--rsn-txt-base);
    line-height: var(--rsn-lh-texto);
}

html h1, html h2, html h3, html h4, html h5, html h6,
html .et_pb_module h1, html .et_pb_module h2, html .et_pb_module h3,
html .et_pb_module h4, html .et_pb_module h5, html .et_pb_module h6 {
    font-family: var(--rsn-font-display);
    line-height: var(--rsn-lh-titulo);
    color: var(--rsn-marino);
    font-weight: 700;
}

html h1, html .et_pb_module h1 { font-size: var(--rsn-h1); letter-spacing: var(--rsn-track-h1); font-weight: 700; }
html h2, html .et_pb_module h2 { font-size: var(--rsn-h2); letter-spacing: var(--rsn-track-h2); }
html h3, html .et_pb_module h3 { font-size: var(--rsn-h3); }
html h4, html .et_pb_module h4 { font-size: var(--rsn-h4); line-height: var(--rsn-lh-corto); }
html h5, html .et_pb_module h5 { font-size: var(--rsn-h5); line-height: var(--rsn-lh-corto); }
html h6, html .et_pb_module h6 { font-size: var(--rsn-h6); line-height: var(--rsn-lh-corto); }

p { margin-bottom: var(--rsn-esp-6); }


/* --------------------------------------------------------------------------
   Excepciones a la escala de titulares

   La escala de arriba está pensada para titulares de CONTENIDO. Aplicarla a
   ciegas rompe los sitios donde un encabezado cumple función de etiqueta y no
   de titular: los títulos de widget en la barra lateral, y los del pie.

   Sin esto, "Entradas recientes" se renderiza a 30 px dentro de una columna
   de 250 px y parte en tres líneas dejando letras huérfanas.
   -------------------------------------------------------------------------- */

html .widgettitle,
html .et_pb_widget h1, html .et_pb_widget h2, html .et_pb_widget h3,
html .et_pb_widget h4, html .et_pb_widget h5, html .et_pb_widget h6,
html #sidebar h1, html #sidebar h2, html #sidebar h3,
html #sidebar h4, html #sidebar h5, html #sidebar h6,
html #main-footer h1, html #main-footer h2, html #main-footer h3,
html #main-footer h4, html #main-footer h5, html #main-footer h6 {
    font-size: var(--rsn-txt-lg);
    line-height: var(--rsn-lh-corto);
    letter-spacing: 0;
    font-weight: 700;
    margin-bottom: var(--rsn-esp-4);
}

/* Los enlaces de widget son listas de navegación, no texto de lectura:
   van en el sans, un punto por debajo del cuerpo. */
html .et_pb_widget,
html .et_pb_widget li,
html .et_pb_widget a {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    line-height: var(--rsn-lh-corto);
}

html .et_pb_widget a { color: var(--rsn-azul); }
html .et_pb_widget a:hover { color: var(--rsn-azul-hover); }

/* La línea de metadatos de una entrada — fecha y categoría */
html .post-meta,
html .et_pb_post .post-meta,
html .et_pb_post .post-meta a {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto-suave);
}

/* Ancho de línea cómodo para lectura larga.
   Por encima de ~75 caracteres el ojo pierde el renglón al volver. */
.entry-content p,
.et_pb_text_inner p {
    max-width: 70ch;
}

a {
    color: var(--rsn-azul);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color 0.15s ease;
}

a:hover { color: var(--rsn-azul-hover); }

/* Foco visible: obligatorio para navegación por teclado.
   Divi lo elimina en varios sitios; aquí se restituye. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

strong, b { font-weight: 700; }

blockquote {
    font-family: var(--rsn-font-display);
    font-style: italic;
    font-size: var(--rsn-txt-lg);
    line-height: var(--rsn-lh-corto);
    color: var(--rsn-marino);
    border-left: var(--rsn-filete) solid var(--rsn-acento);
    padding-left: var(--rsn-esp-6);
    margin-left: 0;
}


/* ==========================================================================
   UTILIDADES DEL SISTEMA
   Clases para aplicar desde el campo "Clase CSS" de cualquier módulo Divi.
   ========================================================================== */

/* Fondo marino con el texto ya resuelto en claro */
.rsn-marino {
    background-color: var(--rsn-marino);
    color: var(--rsn-blanco);
}
.rsn-marino h1, .rsn-marino h2, .rsn-marino h3,
.rsn-marino h4, .rsn-marino h5, .rsn-marino h6 {
    color: var(--rsn-blanco);
}
.rsn-marino a { color: var(--rsn-acento); }

/* Antetítulo: la línea corta en mayúsculas sobre el titular.
   Es el recurso del mockup de admisión ("ADMISIÓN 2027"). */
.rsn-antetitulo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    display: flex;
    align-items: center;
    gap: var(--rsn-esp-3);
}
.rsn-antetitulo::before {
    content: "";
    width: 2rem;
    height: var(--rsn-filete);
    background: var(--rsn-acento);
    flex: none;
}

/* Palabra destacada dentro de un titular */
.rsn-destacado {
    color: var(--rsn-acento-texto);
    font-style: italic;
}

/* Tarjeta estándar */
.rsn-tarjeta {
    background: var(--rsn-blanco);
    border-radius: var(--rsn-radio-lg);
    box-shadow: var(--rsn-sombra);
    overflow: hidden;
}

/* Filete dorado superior, para separar secciones */
.rsn-filete-superior {
    border-top: var(--rsn-filete) solid var(--rsn-acento);
}


/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */

/* Respeta a quien pidió menos movimiento en su sistema operativo.
   Divi anima bastante por defecto. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   Estilos propios
   Escribir debajo.
   ========================================================================== */


/* ==========================================================================
   LA MARCA

   La genera el shortcode [logo]. Ver inc/marca.php

   REGLA QUE MANDA SOBRE TODO LO DEMÁS
   El Manual de Identidad de la Congregación fija un ancho mínimo de 450 px
   para el logotipo horizontal con marca paraguas (pág. 15). Por debajo, el
   nombre del colegio deja de leerse.

   Por eso aquí NO se encoge el horizontal en pantallas pequeñas: se cambia a
   la versión vertical, que es la que el manual prevé para espacios estrechos
   (pág. 29). El corte está en 981 px porque es donde Divi pasa a su
   maquetación de tableta, y por debajo de ahí una cabecera no puede dedicar
   450 px al logotipo sin comerse el menú.
   ========================================================================== */

.rsn-logo-enlace {
    display: inline-block;
    line-height: 0;              /* sin esto el enlace añade unos píxeles bajo la imagen */
    text-decoration: none;
    border: 0;
}

.rsn-logo { display: block; }

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

/* Fuera de la cabecera, 450 px: el mínimo que fija el manual para el logotipo
   con marca paraguas (pág. 15). */
.rsn-logo-h { width: var(--rsn-logo-ancho, 450px); }

/* En la cabecera, fluido entre 300 y 400 px.

   El criterio no es mío: lo medí en salesianos.pe, el sitio oficial de la
   Congregación, con el navegador y a distintos anchos de ventana.

       ventana 1920 px  ->  logotipo 401 px  (21% del ancho)
       ventana 1345 px  ->  logotipo 302 px  (22%)
       ventana 1280 px  ->  logotipo 286 px  (22%)

   Su logotipo NO tiene un ancho fijo: la cabecera mide 130 px de alto, el
   logotipo ocupa ese alto menos el relleno, y el ancho sale de la
   proporción. El archivo que prepararon se llama logo-salesiano-400x75.png,
   así que 400 px es su techo y de ahí baja según la pantalla.

   Este clamp() reproduce esa curva: 400 px de tope en monitores grandes,
   ~300 px en un portátil de 13". Por debajo de 1100 px entra la versión
   vertical y esto deja de aplicar.

   Sí, 300 px queda por debajo del mínimo de 450 px de la pág. 15. Pero quien
   escribió el manual lo aplica así en su propia casa, y nuestra línea
   inferior —"Rosenthal de la Puente - Lima"— es más corta y por tanto más
   grande que su "CONGREGACIÓN SALESIANA DEL PERÚ" al mismo ancho: donde
   ellos son legibles, nosotros lo somos más.

   Vale para los diez colegios de la red, no solo para Rosenthal. */
.rsn-cabecera { --rsn-logo-ancho: clamp(300px, 22vw, 400px); }

/* En modo automático el shortcode imprime las dos versiones y aquí se decide
   cuál se ve. Cuando la plantilla pide una forma concreta, se respeta. */
.rsn-logo--auto .rsn-logo-v { display: none; }
.rsn-logo--vertical .rsn-logo-v { width: var(--rsn-logo-ancho-v, 150px); }

@media (max-width: 980px) {
    .rsn-logo--auto .rsn-logo-h { display: none; }
    .rsn-logo--auto .rsn-logo-v { display: block; width: var(--rsn-logo-ancho-v, 150px); }
}

/* En pantallas muy estrechas la vertical también cede algo, pero nunca por
   debajo de donde el nombre deja de leerse. */
@media (max-width: 480px) {
    .rsn-logo--auto .rsn-logo-v { width: var(--rsn-logo-ancho-v-min, 120px); }
}

/* El enlace del logotipo tiene que verse al navegar con teclado: es el
   primer elemento enfocable de la página. */
.rsn-logo-enlace:focus-visible {
    outline: 3px solid var(--rsn-azul);
    outline-offset: 4px;
    border-radius: var(--rsn-radio-sm);
}


/* --- El logotipo del colegio: escudo + nombre ------------------------------

   Con la identidad propia, el shortcode no imprime el imagotipo salesiano
   sino el logotipo principal del MANUAL DE MARCA del colegio: el escudo y, a
   su derecha, «Salesiano Rosenthal» en dos líneas, Montserrat en negrita
   extra y marino. El nombre va como texto vivo y no como imagen: el manual
   no entregó un vectorial, el PNG que hay del rótulo lleva un contorno que a
   tamaño de cabecera se ve sucio, y el texto vivo sale nítido a cualquier
   escala y cambia a blanco sobre marino con una sola regla.

   Todo se mide en em a partir de --rsn-logo-escudo-tamano, que es el cuerpo
   del nombre: cambiar ese valor escala el conjunto entero. No aplica el
   mínimo de 450 px de la Congregación —eso es para su imagotipo con marca
   paraguas—; este logotipo cabe en 240 px sin perder nada.
   ------------------------------------------------------------------------- */

.rsn-logo--escudo {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-size: var(--rsn-logo-escudo-tamano, 28px);
    line-height: 1;
    text-decoration: none;
}

.rsn-logo--escudo .rsn-logo-escudo {
    display: block;
    height: 2.75em;
    width: auto;
    flex: none;
}

.rsn-logo--escudo .rsn-logo-nombre {
    display: block;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: 1em;
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--rsn-marino);
    white-space: nowrap;
}
.rsn-logo--escudo .rsn-logo-nombre span { display: block; }

.rsn-logo--escudo.rsn-logo--blanco .rsn-logo-nombre { color: var(--rsn-blanco); }

/* Apilado: la «versión secundaria» del manual, para el pie y los espacios
   verticales. */
.rsn-logo--escudo.rsn-logo--apilado {
    flex-direction: column;
    gap: 0.5em;
    text-align: center;
}
.rsn-logo--escudo.rsn-logo--apilado .rsn-logo-escudo { height: 4.2em; }

/* En la cabecera ocupa el alto de las dos filas del menú, como el imagotipo;
   en móvil baja con la ventana. */
.rsn-cabecera .rsn-logo--escudo { --rsn-logo-escudo-tamano: clamp(19px, 1.7vw, 27px); }
@media (max-width: 480px) {
    .rsn-cabecera .rsn-logo--escudo { --rsn-logo-escudo-tamano: 17px; }
}

.rsn-pie-marca .rsn-logo--escudo { --rsn-logo-escudo-tamano: 24px; }


/* ==========================================================================
   CABECERA

   La genera inc/cabecera.php, que sustituye la de Divi por el filtro
   et_html_main_header. Nada de esto vive en la base de datos.

   LA COMPOSICIÓN

   Tres piezas, no una barra de elementos sueltos:

       logotipo          |  utilidades · redes            |  DESTACADO
       (ocupa el alto    |  MENÚ PRINCIPAL                |  (cuelga por
        de las dos filas)|                                |   debajo)

   La asimetría es deliberada. Una pieza grande a la izquierda y dos filas
   cortas a la derecha se leen como una composición; todo alineado en una
   sola fila se lee como una barra de herramientas. Es la diferencia entre
   que la cabecera parezca diseñada o ensamblada.

   Y hay un beneficio práctico: al no compartir fila con el logotipo, el menú
   dispone del ancho completo de la columna derecha. Eso es lo que permite
   ponerlo en mayúsculas —que ocupan un 33% más— sin volver a empujar el
   punto de plegado.

   DOS VERSIONES TERMINADAS
   .rsn-cabecera--claro    blanca, logotipo a color
   .rsn-cabecera--oscuro   marino, logotipo en blanco (manual pág. 20)

   Cuál se sirve lo decide RSN_CABECERA_TEMA en inc/cabecera.php.
   ========================================================================== */

/* Divi calcula por JavaScript la altura de SU cabecera y se la añade como
   padding al contenedor de la página. Como esa cabecera ya no existe, el
   cálculo dejaba un hueco blanco de un centenar de píxeles sobre la nuestra.

   El !important es necesario y no es pereza: Divi lo escribe como estilo en
   línea sobre el elemento, y un estilo en línea solo se puede vencer así. */
#page-container { padding-top: 0 !important; }


/* El contenido del sitio se centra a 1080 px, pero la cabecera ocupa todo el
   ancho. El margen lateral crece con la pantalla en vez de ser fijo. */
.rsn-cabecera .rsn-contenedor {
    width: 100%;
    max-width: none;
    padding-inline: clamp(1rem, 2.5vw, 3rem);
}

.rsn-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: var(--rsn-esp-3) var(--rsn-esp-6);
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    font-family: var(--rsn-font-body);
    text-decoration: none;
    border-radius: 0 0 var(--rsn-radio) 0;
}
.rsn-saltar:focus { left: 0; }

/* Los colores se declaran como variables y el resto del bloque las usa sin
   saber qué versión está activa. Así la versión oscura son ocho líneas al
   final y no una copia de todo. */
.rsn-cabecera {
    /* Ojo: --rsn-logo-ancho se declara también en el bloque LA MARCA, junto a
       la explicación de por qué vale lo que vale. */

    /* Un solo tamaño para el menú y sus desplegables. Existe como variable
       para que no puedan separarse: si algún día se cambia el del menú y el
       del submenú fuera un número aparte, se quedaría atrás sin que nadie lo
       note hasta verlo en pantalla. */
    --cab-menu-tamano:   var(--rsn-txt-sm);

    --cab-fondo:         var(--rsn-blanco);
    --cab-texto:         var(--rsn-texto);
    --cab-texto-suave:   var(--rsn-texto-suave);
    --cab-realce:        var(--rsn-azul);
    --cab-borde:         var(--rsn-borde);
    --cab-submenu:       var(--rsn-blanco);
    --cab-submenu-hover: var(--rsn-fondo-suave);
    --cab-hover-fondo:   rgba(0, 0, 0, 0.05);

    position: relative;
    z-index: 999;
    background: var(--cab-fondo);
}

/* --- La cabecera que aparece al bajar -------------------------------------

   Arriba del todo la cabecera es la de siempre, en su sitio y con sus dos
   filas. Cuando la página baja más de lo que mide, js/cabecera.js pone la
   clase rsn-cabecera-pegada en <html> y entonces —y solo entonces— la
   cabecera pasa a fija, entra deslizándose desde arriba y, en escritorio,
   COMPACTA: sin fila de utilidades, logotipo menor, relleno corto. Al volver
   arriba, desaparece y la cabecera normal vuelve a estar donde estaba.

   Para que el contenido no dé un salto cuando la cabecera sale del flujo, el
   centinela —un punto de un píxel arriba del todo— ocupa entonces su alto
   (--rsn-cabecera-alto, que mide el script). El cambio ocurre cuando la
   cabecera ya no está en pantalla, así que nada visible se mueve.

   Con la barra de administración de WordPress, que es fija y mide 32 px
   (46 en móvil), la cabecera se pega debajo de ella y no detrás.
   -------------------------------------------------------------------------- */

/* Divi da a #page-container `overflow: hidden`; a una cabecera fija no le
   afecta, pero `clip` recorta igual y no crea un contenedor de
   desplazamiento, por si algún día se quiere sticky. */
#page-container { overflow-x: clip !important; overflow-y: visible !important; }

/* Los anclas (#solicitar, #escribenos, los títulos de los documentos…) no
   quedan escondidos debajo de la cabecera cuando está pegada. */
html { scroll-padding-top: 6rem; }

/* El centinela ocupa exactamente la franja donde está la cabecera normal
   (de 0 al alto medido). Mientras algo de esa franja se ve, no hay cabecera
   fija; cuando ha salido entera de pantalla, sí. Absoluto y detrás de la
   cabecera mientras ella está en su sitio; en el flujo cuando ella se fija,
   para que el contenido no salte. Su geometría es la misma en los dos
   estados, y por eso el observador no se realimenta. */
.rsn-cabecera-centinela {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: var(--rsn-cabecera-alto, 1px);
    pointer-events: none;
    visibility: hidden;
}

@keyframes rsn-cabecera-baja {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

html.rsn-cabecera-pegada .rsn-cabecera-centinela {
    position: static;
    display: block;
    width: auto;
    height: var(--rsn-cabecera-alto, 0px);
}

html.rsn-cabecera-pegada .rsn-cabecera {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 4px 18px rgba(var(--rsn-tinta-rgb), 0.16);
    animation: rsn-cabecera-baja .3s cubic-bezier(.16, .84, .44, 1);
}

html.rsn-cabecera-pegada body.admin-bar .rsn-cabecera { top: 32px; }
@media (max-width: 782px) { html.rsn-cabecera-pegada body.admin-bar .rsn-cabecera { top: 46px; } }

@media (min-width: 981px) {
    html.rsn-cabecera-pegada .rsn-cabecera { --rsn-logo-ancho: clamp(220px, 16vw, 290px); }
    html.rsn-cabecera-pegada .rsn-cabecera .rsn-logo--escudo { --rsn-logo-escudo-tamano: clamp(15px, 1.25vw, 20px); }
    html.rsn-cabecera-pegada .rsn-cabecera-utilidades { display: none; }
    html.rsn-cabecera-pegada .rsn-cabecera-int { padding-block: var(--rsn-esp-2); row-gap: 0; }
}

/* En móvil el menú desplegado vive dentro de la cabecera; fija, no puede
   crecer más que la pantalla: el panel se desplaza por dentro. */
@media (max-width: 980px) {
    html.rsn-cabecera-pegada body.rsn-menu-abierto .rsn-cabecera-derecha {
        max-height: calc(100vh - 6rem);
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.rsn-cabecera-pegada .rsn-cabecera { animation: none; }
}

/* Sin filete bajo la cabecera. El marino ya la separa del contenido por sí
   solo, y cualquier línea ahí competía con la punta del destacado, que es el
   elemento que debe cortar ese borde. */


/* --- La rejilla ----------------------------------------------------------- */

/* Dos filas explícitas, para poder colocar cada pieza en la suya:

       fila 1 |  logotipo  |  utilidades · redes  |
       fila 2 |  (sigue)   |  MENÚ PRINCIPAL      |  DESTACADO

   El destacado ocupa solo la segunda fila. Arrancando a la altura del menú
   —y no desde el borde superior de la página— queda emparejado con él en
   lugar de flotar suelto contra la esquina. */
.rsn-cabecera-int {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(1.5rem, 3vw, 3.5rem);
    row-gap: var(--rsn-esp-2);
    padding-block: var(--rsn-esp-3);
}

/* El envoltorio desaparece de la maquetación y sus hijos entran directamente
   en la rejilla del padre. Así no hace falta un contenedor intermedio que
   estorbe para colocar cada fila. */
.rsn-cabecera-derecha { display: contents; }

.rsn-cabecera-marca      { grid-area: 1 / 1 / 3 / 2; }
/* Las utilidades cruzan hasta la última columna, así que quedan justo encima
   del destacado y alineadas con su borde derecho. Sin ese cruce se quedaban
   dentro de la columna del menú y el destacado sobresalía por su lado. */
.rsn-cabecera-utilidades { grid-area: 1 / 2 / 2 / 4; }
.rsn-cabecera-nav        { grid-area: 2 / 2 / 3 / 3; }


/* --- Fila de utilidades ---------------------------------------------------

   Sin banda de fondo propia y sin borde: comparte el fondo de la cabecera.
   Un recuadro gris encima de otro parte la cabecera en dos cajas apiladas y
   es justo lo que le quitaba finura. La jerarquía la da el contraste y el
   tamaño, no una caja.
   ------------------------------------------------------------------------- */

.rsn-cabecera-utilidades {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 2vw, 2rem);
}

.rsn-menu-secundario,
.rsn-servicios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 1.8vw, 1.75rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Caja alta con interletraje generoso: aquí sí funciona. Son etiquetas de una
   o dos palabras que se reconocen de un vistazo, y el espaciado es lo que les
   da el aire que las hace ver finas en vez de apretadas.

   Peso medio (500), no semibold: la fila debe pesar menos que el menú
   principal para que la cabecera no se vea cargada. Más abajo (400) las
   mayúsculas de 12 px sobre fondo oscuro se apagan. */
.rsn-cabecera-utilidades a {
    font-family: var(--rsn-font-body);
    font-size: 0.75rem;              /* 12px */
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cab-texto-suave);
    text-decoration: none;
    transition: color .15s ease;
}
.rsn-cabecera-utilidades a:hover,
.rsn-cabecera-utilidades a:focus-visible { color: var(--cab-realce); }


/* --- El buscador ----------------------------------------------------------

   Nace abierto en el marcado y lo pliega js/cabecera.js. Por eso el estado por
   omisión de este CSS es el desplegado: si el script no llega, se ve y se usa.
   ------------------------------------------------------------------------- */

.rsn-buscador { flex: 0 0 auto; }

.rsn-buscador-forma {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--cab-borde);
    border-radius: 999px;
    padding: 2px 2px 2px 12px;
    transition: border-color .25s ease, background-color .25s ease;
}

.rsn-buscador-forma:focus-within {
    border-color: var(--cab-realce);
    background: rgba(255, 255, 255, 0.06);
}

/* EL COLOR SALE DE LAS VARIABLES DE LA CABECERA, NUNCA DE `inherit`

   Aquí estuvo el fallo. Puse `color: inherit` dando por hecho que la cabecera
   fijaba un color de texto para sus hijos, y no lo hace: `.rsn-cabecera` solo
   declara el fondo, y cada pieza toma su color de `--cab-texto` o
   `--cab-texto-suave`. Así que `inherit` se iba a buscar el color del `body`
   —texto oscuro— y lo pintaba sobre el marino: la lupa apenas se distinguía y
   lo que se escribía en el campo era ilegible.

   Con las variables, las dos versiones de cabecera —la blanca y la marino—
   quedan resueltas sin escribir una sola regla aparte. */
.rsn-buscador-campo {
    width: 170px;

    /* `min-width: 0` NO es decorativo, es lo que permite que se pliegue.

       Un elemento dentro de un contenedor flexible tiene por omisión
       `min-width: auto`, o sea que no encoge por debajo de su tamaño natural.
       Y el tamaño natural de un `<input>` son unos veinte caracteres. Sin esta
       línea, el `width: 0` del estado plegado se cumple sobre el papel y el
       navegador lo ignora: la caja seguía midiendo 170 px con la clase puesta y
       parecía que el CSS no cargaba. */
    min-width: 0;

    border: 0;
    background: transparent;
    color: var(--cab-texto);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    padding: 6px 0;
    /* La transición es del ancho y del relleno, no de `display`: así el
       plegado se ve como un cajón que entra y no como algo que desaparece. */
    transition: width .3s cubic-bezier(.16, .84, .44, 1), padding .3s ease, opacity .2s ease;
}

.rsn-buscador-campo::placeholder { color: var(--cab-texto-suave); opacity: 1; }
.rsn-buscador-campo:focus { outline: none; }

/* La equis de vaciar que pone el navegador en `type="search"` es siempre
   oscura. Sobre la cabecera marino no se ve, así que ahí —y solo ahí— se
   invierte. En la cabecera blanca se deja como viene: invertirla la volvería
   blanca sobre blanco, que es el mismo problema al revés. */
.rsn-buscador-campo::-webkit-search-cancel-button { opacity: .55; }
.rsn-cabecera--oscuro .rsn-buscador-campo::-webkit-search-cancel-button { filter: invert(1); }

.rsn-buscador-enviar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cab-texto-suave);
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

/* Al acercarse, la lupa toma el mismo realce que los enlaces de al lado —azul
   en la cabecera blanca, dorado en la marino— y el fondo usa la variable de
   hover de la cabecera, que ya está resuelta para las dos versiones. */
.rsn-buscador-enviar:hover,
.rsn-buscador-enviar:focus-visible {
    background: var(--cab-hover-fondo);
    color: var(--cab-realce);
}

.rsn-buscador-enviar:focus-visible {
    outline: 2px solid var(--cab-realce);
    outline-offset: 2px;
}

.rsn-buscador-lupa svg { width: 17px; height: 17px; display: block; }

/* Cuando el campo está enfocado, la lupa deja de ser el elemento suave y pasa
   al color pleno: en ese momento es el botón de enviar, no un adorno. */
.rsn-buscador-forma:focus-within .rsn-buscador-enviar { color: var(--cab-texto); }

/* Plegado: el campo se va a cero y queda la lupa. El borde desaparece para que
   no quede una cápsula vacía alrededor del icono. */
.rsn-buscador.esta-plegado .rsn-buscador-forma {
    border-color: transparent;
    padding-left: 2px;
}

.rsn-buscador.esta-plegado .rsn-buscador-campo {
    width: 0;
    flex-basis: 0;
    padding: 6px 0;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .rsn-buscador-campo,
    .rsn-buscador-forma,
    .rsn-buscador-enviar { transition: none; }
}


/* --- Redes sociales -------------------------------------------------------

   Los iconos son SVG en línea con fill:currentColor, así que toman el color
   del texto que los rodea. Eso es lo que hace que funcionen igual en la
   cabecera clara y en la oscura sin una sola regla duplicada.
   ------------------------------------------------------------------------- */

.rsn-redes {
    display: flex;
    align-items: center;
    gap: var(--rsn-esp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsn-redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--cab-texto-suave);
    border-radius: 50%;
    transition: color .15s ease, background .15s ease;
}

.rsn-redes a:hover,
.rsn-redes a:focus-visible {
    color: var(--cab-realce);
    background: var(--cab-hover-fondo);
}

.rsn-redes svg { display: block; }


/* --- Menú principal ------------------------------------------------------- */

.rsn-cabecera-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.rsn-menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsn-menu > li > a {
    display: block;
    font-family: var(--rsn-font-body);
    font-size: var(--cab-menu-tamano);
    font-weight: 700;
    color: var(--cab-texto);
    text-decoration: none;
    padding-block: var(--rsn-esp-2);
    white-space: nowrap;
    /* El subrayado se dibuja con el borde y no con text-decoration para poder
       animarlo y para que no toque las descendentes de las letras. */
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

/* La caja alta del menú se enciende desde PHP con RSN_MENU_MAYUSCULAS.
   13px porque la caja alta ya pesa por sí sola. El tamaño se fija en la
   variable, no en la regla, para que los desplegables lo hereden. */
.rsn-cabecera--caja-alta { --cab-menu-tamano: 0.8125rem; }

.rsn-cabecera--caja-alta .rsn-menu > li > a {
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.rsn-menu a:hover,
.rsn-menu a:focus-visible {
    color: var(--cab-realce);
    border-bottom-color: var(--cab-realce);
}

/* La página en la que estás. Divi y WordPress ponen estas clases solos. */
.rsn-menu .current-menu-item > a,
.rsn-menu .current-menu-ancestor > a,
.rsn-menu .current_page_parent > a {
    color: var(--cab-realce);
    border-bottom-color: var(--rsn-acento);
}


/* --- Submenús ------------------------------------------------------------- */

.rsn-menu li { position: relative; }

.rsn-menu .sub-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 250px;
    margin: 0;
    padding: var(--rsn-esp-2) 0;
    list-style: none;
    background: var(--cab-submenu);
    border: 1px solid var(--cab-borde);
    border-radius: var(--rsn-radio);
    box-shadow: 0 12px 32px rgba(var(--rsn-tinta-rgb), 0.35);
    text-align: left;
    z-index: 5;              /* por encima del destacado, que cuelga a su lado */

    /* Oculto con opacidad y no con display:none, para poder animarlo.
       visibility:hidden lo saca igualmente del orden de tabulación. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

/* :focus-within lo abre también navegando con teclado, no solo con el ratón. */
.rsn-menu li:hover > .sub-menu,
.rsn-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Misma familia y mismo tamaño que el menú principal, pero sin negrita: los
   niveles se distinguen por el peso, no por el cuerpo.

   Y en caja normal, no en mayúsculas. Un desplegable son frases —"Quiénes
   somos", "Misión y visión"—, no etiquetas de una palabra, y ahí la caja alta
   sí estorba la lectura. El interletraje también vuelve a cero por lo mismo. */
.rsn-menu .sub-menu a {
    display: block;
    padding: var(--rsn-esp-2) var(--rsn-esp-4);
    font-family: var(--rsn-font-body);
    font-size: var(--cab-menu-tamano);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cab-texto);
    text-decoration: none;
    border-bottom: 0;
}
.rsn-menu .sub-menu a:hover,
.rsn-menu .sub-menu a:focus-visible {
    background: var(--cab-submenu-hover);
    color: var(--cab-realce);
}


/* --- El destacado ---------------------------------------------------------

   Cuelga por debajo del filete inferior, con las esquinas de abajo
   redondeadas. Ese pequeño desbordamiento es lo que lo saca de la fila y lo
   convierte en el único elemento con relieve de toda la cabecera.
   ------------------------------------------------------------------------- */

/* El botón vive en su propia sección, más abajo. Aquí había una segunda
   definición de `.rsn-boton`, resto de cuando la cabecera fue lo primero que
   se montó: la pisaba entera la de abajo salvo por dos propiedades que esta
   declaraba y aquella no. Se llevaron allí y esta se retiró — dos reglas con
   el mismo nombre en la misma hoja son una trampa esperando. */

/* El chaflán arranca en las dos esquinas inferiores y baja a un vértice
   centrado, así que se dibuja recortando el bloque —clip-path— y no con un
   triángulo pegado debajo.

   12 px de profundidad: suficiente para que se lea como remate, poco para
   que parezca una flecha. La sombra va como filter y no como box-shadow,
   porque box-shadow dibujaría la del rectángulo original, antes del recorte,
   y se vería un rectángulo flotando bajo el vértice.

   ALINEACIÓN CON EL MENÚ
   El bloque empieza en el borde superior de la fila del menú y su contenido
   se apoya arriba con el mismo relleno que los enlaces (8 px). Así el título
   del destacado cae en la misma línea que INICIO, NOSOTROS y el resto, en vez
   de quedar centrado en un bloque más alto y aparecer descolgado.

   El color vive en --destacado-fondo. Al ser una sola variable, el hover no
   puede descoordinar la cara del chaflán. */
.rsn-cabecera-destacado {
    --destacado-fondo: var(--rsn-azul);
    --punta: 12px;
    --destacado-aire: 5px;          /* aire extra sobre el título */
    --destacado-baja: 20px;         /* cuánto asoma por debajo de la cabecera */
    /* Los lados parten de un valor fluido —crece con la pantalla— y se le
       restan 15 px. Restar en vez de fijar un número mantiene esa
       elasticidad: entre 1100 y 1455 px de ventana el aire lateral queda
       entre 9 y 17 px.

       Es el mínimo razonable. Restar más dejaría el texto rozando los cantos
       en portátiles, que es donde el valor fluido es más pequeño. Si hiciera
       falta estrechar más, la palanca ya no es el relleno sino acortar el
       texto del destacado, y eso se hace desde el personalizador. */
    --destacado-lados: calc(clamp(1.25rem, 2.2vw, 2rem) - 15px);

    /* La sombra cambia de color con la versión de cabecera, no solo de
       intensidad: sobre el marino de la cabecera oscura, una sombra marino
       sería invisible.

       Pero la sombra NO es lo que delimita el bloque. Como asoma por debajo
       de la cabecera, la mitad inferior cae sobre lo que haya ahí —un slider,
       una foto, una franja de color—, y ningún desenfoque aguanta contra un
       fondo desconocido. Eso lo tiene que hacer el color de relleno. */
    --destacado-sombra:       0 4px 12px rgba(var(--rsn-tinta-rgb), 0.28);
    --destacado-sombra-hover: 0 10px 22px rgba(var(--rsn-tinta-rgb), 0.42);

    display: block;
    text-decoration: none;
    line-height: 1.25;
    text-align: center;
    grid-area: 2 / 3 / 3 / 4;
    align-self: stretch;

    /* Arranca a ras de la fila del menú y baja por debajo de la cabecera,
       montándose sobre el contenido. */
    margin-block: 0 calc((var(--rsn-esp-3) + var(--destacado-baja)) * -1);
    position: relative;
    z-index: 3;

    background: var(--destacado-fondo);
    border-radius: 2px 2px 0 0;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--punta)),
        50% 100%,
        0 calc(100% - var(--punta))
    );
    filter: drop-shadow(var(--destacado-sombra));
    transition: background .18s ease, filter .18s ease, transform .18s ease;
}

.rsn-destacado-cara {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;     /* apoyado arriba, para alinear con el menú */
    gap: 2px;
    height: 100%;
    /* Arriba: 8 px —el relleno de los enlaces del menú— más los 5 de aire,
       porque el texto de un bloque con fondo necesita más margen respecto a
       su borde que un texto suelto.

       Abajo solo los 8 px más el chaflán. No lleva el aire extra a propósito:
       la V ya aleja visualmente el subtítulo del canto, y sumarle relleno
       hacía el bloque más alto de lo necesario. */
    padding: calc(var(--rsn-esp-2) + var(--destacado-aire))
             var(--destacado-lados)
             calc(var(--rsn-esp-2) + var(--punta));
    color: var(--rsn-blanco);
    transition: color .18s ease;
}

/* Cabecera clara: al pasar por encima, el azul profundo de la paleta. Sobre
   él el texto blanco da 11,9:1 frente a los 9,5:1 del azul en reposo, así
   que el hover gana contraste en vez de perderlo. */
.rsn-cabecera-destacado:hover,
.rsn-cabecera-destacado:focus-visible {
    --destacado-fondo: var(--rsn-azul-hover);
    filter: drop-shadow(var(--destacado-sombra-hover));
    /* Dos píxeles de descenso. El movimiento se percibe siempre, dé igual lo
       que haya debajo, y no depende de que la sombra tenga dónde verse. */
    transform: translateY(2px);
}

.rsn-destacado-titulo {
    text-transform: uppercase;
    font-weight: 700;
    /* La caja alta pierde la silueta de la palabra; un poco de interletraje
       devuelve la separación que las mayúsculas se comen. */
    letter-spacing: 0.07em;
}

.rsn-destacado-sub {
    font-weight: 400;
    font-size: 0.75rem;              /* 12px */
    opacity: 0.92;
    letter-spacing: 0;
    text-transform: none;
}


/* --- El botón del menú ---------------------------------------------------- */

.rsn-menu-boton {
    display: none;
    align-items: center;
    gap: var(--rsn-esp-2);
    padding: var(--rsn-esp-2) var(--rsn-esp-3);
    background: transparent;
    border: 1px solid var(--cab-borde);
    border-radius: var(--rsn-radio);
    color: var(--cab-texto);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    cursor: pointer;
}

/* Las tres rayas, dibujadas con bordes: sin imagen ni fuente de iconos. */
.rsn-menu-boton-icono {
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
    display: block;
}
.rsn-menu-boton-icono::before,
.rsn-menu-boton-icono::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}
.rsn-menu-boton-icono::before { top: -6px; }
.rsn-menu-boton-icono::after  { top:  6px; }


/* --- Cuándo aparece el menú plegado ---------------------------------------

   1100 px. Con el menú en su propia fila la cuenta ya no incluye el
   logotipo, así que hay holgura de sobra en escritorio; el corte lo marca
   ahora el ancho total de la cabecera, no el del menú.

   La regla real no es "1100 px": es "cuando la composición de tres columnas
   deja de tener sitio". Si el menú crece mucho, este número sube con él.
   ------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    .rsn-menu-boton { display: flex; order: 3; }

    .rsn-cabecera-int {
        grid-template-columns: 1fr auto;
        row-gap: var(--rsn-esp-3);
    }

    .rsn-cabecera-marca { order: 1; }

    /* En móvil el destacado vuelve a ser un botón normal: el chaflán necesita
       que el bloque cuelgue de una cabecera alta, y aquí no la hay. */
    .rsn-cabecera-destacado {
        order: 2;
        align-self: center;
        margin-block: 0;
        z-index: auto;
        filter: none;
        clip-path: none;
        border-radius: var(--rsn-radio);
    }

    .rsn-destacado-cara {
        justify-content: center;
        padding: var(--rsn-esp-2) calc(var(--rsn-esp-4) - 5px);
        /* En móvil no se resta más: el ancho ahí lo marca el texto, no el
           hueco disponible. */
    }

    .rsn-cabecera-marca,
    .rsn-cabecera-utilidades,
    .rsn-cabecera-nav,
    .rsn-cabecera-destacado { grid-area: auto; }

    .rsn-cabecera-derecha {
        order: 4;
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        grid-column: 1 / -1;
        gap: var(--rsn-esp-4);
        padding-top: var(--rsn-esp-4);
        border-top: 1px solid var(--cab-borde);
    }

    body.rsn-menu-abierto .rsn-cabecera-derecha { display: flex; }

    .rsn-cabecera-utilidades { justify-content: flex-start; order: 2; }

    /* En móvil la fila de utilidades ya vive dentro del menú desplegable, que
       el usuario abrió a propósito. Plegar ahí el buscador sería esconderlo
       dentro de algo que ya estaba escondido, así que ocupa el ancho entero y
       se ve. js/cabecera.js tampoco lo pliega por debajo de 981 px. */
    .rsn-buscador { width: 100%; order: 1; }
    .rsn-buscador-campo { width: 100%; }

    .rsn-cabecera-nav { justify-content: flex-start; }

    .rsn-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .rsn-menu > li > a {
        padding-block: var(--rsn-esp-3);
        border-bottom: 1px solid var(--cab-borde);
    }

    /* En táctil no hay hover: los submenús se muestran siempre, indentados. */
    .rsn-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 var(--rsn-esp-4);
        transition: none;
    }
}

@media (max-width: 560px) {
    /* En pantallas muy estrechas el destacado de dos líneas ya no cabe junto
       al logotipo: pasa a ocupar su propia fila, a lo ancho. */
    .rsn-cabecera-destacado {
        grid-column: 1 / -1;
        order: 3;
    }
}


/* --- La versión oscura ----------------------------------------------------

   Solo cambia las variables. Todo lo de arriba sigue valiendo igual.

   El destacado pasa a dorado con texto marino: el azul institucional sobre
   marino da 1,7:1 y desaparecería; el dorado da 7,7:1 y el marino sobre
   dorado, otros 7,7:1. Los grises de las utilidades quedan en 8:1 sobre el
   marino, muy por encima del 4,5:1 exigido — el sitio actual anda bastante
   más justo en ese punto.
   ------------------------------------------------------------------------- */

.rsn-cabecera--oscuro {
    --cab-fondo:         var(--rsn-marino);
    --cab-texto:         var(--rsn-blanco);
    --cab-texto-suave:   rgba(255, 255, 255, 0.68);
    --cab-realce:        var(--rsn-acento);
    --cab-borde:         rgba(255, 255, 255, 0.15);
    --cab-submenu:       var(--rsn-marino);
    --cab-submenu-hover: rgba(255, 255, 255, 0.08);
    --cab-hover-fondo:   rgba(255, 255, 255, 0.10);
}

/* Sobre el marino, el destacado va en dorado con texto marino. */
.rsn-cabecera--oscuro .rsn-cabecera-destacado {
    --destacado-fondo: var(--rsn-acento);
    --destacado-sombra:       0 4px 14px rgba(0, 0, 0, 0.55);
    --destacado-sombra-hover: 0 10px 22px rgba(0, 0, 0, 0.55);
}
.rsn-cabecera--oscuro .rsn-destacado-cara { color: var(--rsn-marino); }

/* CELESTE Y NO BLANCO, y la razón es el trozo que cuelga.

   El bloque asoma 20 px por debajo de la cabecera, sobre lo que venga
   después: un slider, una fotografía, una franja clara. Un relleno blanco
   sobre una imagen clara pierde el borde y la punta se disuelve — se ve como
   un botón sin límites. Comprobado sobre un degradado claro antes de
   decidirlo.

   El celeste es Pantone 2995 C, el color principal del imagotipo salesiano.
   Está saturado, así que se recorta contra cualquier fondo, claro u oscuro, y
   es el color de la propia marca en vez de un tono neutro. Con el texto en
   marino da 6,5:1. */
.rsn-cabecera--oscuro .rsn-cabecera-destacado:hover,
.rsn-cabecera--oscuro .rsn-cabecera-destacado:focus-visible {
    --destacado-fondo: var(--rsn-acento-oscuro-hover);
}

.rsn-cabecera--oscuro .rsn-menu .current-menu-item > a,
.rsn-cabecera--oscuro .rsn-menu .current-menu-ancestor > a,
.rsn-cabecera--oscuro .rsn-menu .current_page_parent > a {
    border-bottom-color: var(--rsn-acento);
}


/* --------------------------------------------------------------------------
   El aire entre la cabecera y el contenido

   Divi reserva 58 px de relleno superior en su contenedor. Con la cabecera
   antigua tenía sentido; con la nuestra, que ya trae su propio respiro y de
   la que cuelga el destacado, sobraba casi la mitad.

   24 px deja sitio para que la punta del destacado caiga sobre fondo limpio
   sin que el contenido parezca despegado del encabezado.
   -------------------------------------------------------------------------- */

#main-content .container { padding-top: var(--rsn-esp-6); }


/* ==========================================================================
   PÁGINA INTERNA

   La pinta page.php del tema hijo, que sustituye a la de Divi: sin título
   repetido —lo pone la banda— y sin la barra lateral. El cuerpo va en el
   contenedor del sitio con aire arriba y abajo; la lectura en columna
   estrecha, cuando se quiera, la da la composición de inc/hoja.php.
   ========================================================================== */

.rsn-pagina-cuerpo { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* La hoja compuesta (inc/hoja.php) trae su propio aire vertical, pensado para
   la page.php de Divi; dentro de esta plantilla ya lo pone el cuerpo. */
.rsn-pagina-cuerpo .rsn-hoja { padding-block: 0; }

.rsn-pagina-titulo {
    margin: 0 0 var(--rsn-esp-6);
}

/* Aire entre párrafos y bloques, que Divi ya no envuelve en su .container. */
.rsn-pagina-cuerpo .entry-content > :first-child { margin-top: 0; }
.rsn-pagina-cuerpo .entry-content > :last-child  { margin-bottom: 0; }

/* Los párrafos de una página interna no se estiran a los 1330 px del
   contenedor: a más de ~75 caracteres por línea el ojo pierde el renglón.
   Lo que no es texto —el calendario, una tabla, una galería— sí va a todo
   el ancho. */
.rsn-pagina-cuerpo .entry-content > :is(p, ul, ol, h2, h3, h4, blockquote) {
    max-width: 68rem;
}


/* ==========================================================================
   CARRUSEL DE LA PORTADA

   Lo genera inc/portada.php con las entradas de la categoría «En HOME».

   El desplazamiento es scroll-snap del navegador, no JavaScript moviendo
   posiciones: con eso el arrastre táctil, el rebote y el teclado funcionan
   sin escribirlos, y sin JavaScript el carrusel sigue siendo una tira
   desplazable con todas las noticias accesibles.
   ========================================================================== */

.rsn-portada {
    /* El alto de la lámina: la pantalla entera menos la cabecera y un margen
       que deja asomar el contenido de abajo.

       Ese margen no es decorativo. Si el carrusel llega justo al borde
       inferior, quien entra no ve que la página sigue y se queda ahí. Con 40
       px asomando, el ojo entiende que hay que bajar.

       svh y no vh: en un móvil, vh mide la ventana SIN la barra del navegador,
       así que la lámina se pasa de largo y hay que desplazar para ver el
       titular. svh mide lo que realmente se ve. */
    /* Solo la cabecera. Antes descontaba además 40 px para que asomara el
       principio de la sección siguiente y se entendiera que la página sigue;
       Rodo prefiere que el carrusel llene la pantalla y que lo de abajo
       aparezca al desplazar. La pista de miniaturas queda pegada al borde
       inferior y hace ese papel de indicio.

       125 px medidos, no estimados. Y no crece con el ancho de la ventana: la
       altura de la cabecera la marcan sus dos filas de menú —texto—, no el
       logotipo, que ahí mide 29 px de alto. */
    --rsn-portada-hueco: 128px;

    /* LOS TIEMPOS, EN ORDEN
       Primero la fotografía limpia, después el velo, y solo entonces el
       acercamiento. Ese orden es deliberado: si el zoom arranca a la vez que
       el velo, los dos movimientos compiten y el conjunto se lee como un
       tirón en lugar de como una secuencia. */
    --rsn-portada-espera:  1s;       /* la foto se ve limpia */
    --rsn-portada-barrido: 1.125s;   /* entra el velo */
    /* El acercamiento dura lo que dura la lámina. El valor lo pone
       inc/portada.php en --rsn-portada-duracion a partir del mismo ajuste que
       gobierna el avance, así que subir el carrusel a 8 segundos sube también
       el zoom: antes eran 5 fijos aquí y, con láminas de 8, la imagen se
       quedaba quieta los tres últimos. */
    --rsn-portada-zoom: var(--rsn-portada-duracion, 5s);

    /* Sin tope superior: «que llene toda la pantalla» quiere decir eso. El
       suelo de 440 px sigue, para que en una ventana muy baja el titular no se
       quede sin sitio. */
    --rsn-portada-alto: max(440px, calc(100vh - var(--rsn-portada-hueco)));

    position: relative;
    background: var(--rsn-marino);
    overflow: hidden;          /* el acercamiento no debe asomar por los lados */
}

@supports (height: 100svh) {
    .rsn-portada { --rsn-portada-alto: max(440px, calc(100svh - var(--rsn-portada-hueco))); }
}

/* Con la sesión iniciada, WordPress reserva 32 px arriba para su barra. Sin
   esto, el carrusel se pasa de largo justo para quien lo está revisando. */
.admin-bar .rsn-portada { --rsn-portada-hueco: 160px; }

.rsn-portada-pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rsn-portada-pista::-webkit-scrollbar { display: none; }

.rsn-portada-lamina {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: var(--rsn-portada-alto);
    display: grid;
    isolation: isolate;
    overflow: hidden;
}

.rsn-portada-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    /* Punto de referencia por defecto. PHP lo sobrescribe en línea con el
       encuadre elegido en cada entrada; este valor es el que se usa cuando
       nadie ha tocado nada, y está subido a propósito: en las fotos escolares
       las caras están en el tercio superior, así que recortar desde el centro
       —el comportamiento normal de object-fit— corta cabezas. */
    object-position: center 30%;
    /* El acercamiento crece desde el mismo punto por el que se encuadra, no
       desde el centro geométrico: si no, la imagen se desplaza mientras crece
       y deshace el encuadre elegido. */
    transform-origin: center 30%;
}

/* EL ACERCAMIENTO
   Solo la lámina visible se anima, y dura exactamente lo que dura la lámina
   —la variable la escribe PHP desde el mismo ajuste que gobierna el avance—.
   Si la imagen siguiera creciendo después del cambio, o se quedara quieta
   antes, se notaría el desajuste.

   Un 6% es suficiente: el movimiento debe percibirse sin que se vea "que hay
   una animación". Por encima del 10% empieza a marear y se pierde nitidez en
   los bordes. */
@keyframes rsn-portada-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* El acercamiento empieza cuando el velo termina de entrar y dura lo que diga
   su propia variable, no lo que sobre de la lámina.

   Antes se calculaba restando: duración de la lámina menos la entrada. Con la
   entrada más pausada, al zoom le quedaban 2,9 s y el mismo 6% de crecimiento
   en menos tiempo se percibe más brusco — justo lo contrario de lo que el
   acercamiento busca.

   Si la lámina acaba antes de que el zoom termine, se corta y no pasa nada: es
   un desplazamiento continuo y lento, no una animación con final que haya que
   ver. Para que complete su recorrido entero, la lámina tendría que durar
   7,2 s o más. */
.rsn-portada-lamina.es-actual .rsn-portada-foto {
    animation: rsn-portada-zoom
        var(--rsn-portada-zoom)
        linear
        calc(var(--rsn-portada-espera) + var(--rsn-portada-barrido))
        both;
}

/* Quien pidió menos movimiento en su sistema no quiere una imagen creciendo
   bajo el texto que está leyendo. */
@media (prefers-reduced-motion: reduce) {
    .rsn-portada-lamina.es-actual .rsn-portada-foto { animation: none; }
    .rsn-portada-lamina.es-actual .rsn-portada-texto::before { animation: none; }
    .rsn-portada-pista { scroll-behavior: auto; }
}

/* EL VELO
   No cubre la lámina entera: ocupa el bloque de texto y arranca 50 px por
   encima del titular. Por encima de esa línea, la fotografía se ve limpia.

   Va de 0% arriba a 50% abajo, en rampa continua y sin escalones
   intermedios. Ese 50% es el equilibrio que buscábamos —imagen nítida, texto
   legible— y también el límite: por debajo, el titular deja de sostenerse
   sobre una foto clara. Lo que lo hace viable es la sombra del texto, unas
   líneas más abajo; sin ella habría que subir el velo al 70% y la fotografía
   se apagaría.

   Va en un pseudoelemento y no en el fondo del bloque porque tiene que
   poder recortarse para el barrido sin llevarse el texto por delante. */
.rsn-portada-texto {
    position: relative;
    align-self: end;
    width: 100%;
    padding: 50px clamp(1rem, 4vw, 3rem) calc(var(--rsn-esp-8) + 92px);
    color: var(--rsn-blanco);
    text-align: center;

    /* El centrado va por flex y NO por `margin-inline: auto` en los hijos.
       Divi declara `margin: 0` sobre los encabezados con más especificidad que
       cualquier selector razonable nuestro, así que los márgenes automáticos
       se quedaban en cero y el titular se pegaba a la izquierda —comprobado en
       el inspector: margin-left 0px con el bloque a 1330 px de ancho—.

       align-items centra los hijos sin depender de sus márgenes, así que la
       regla de Divi deja de importar. Es más robusto que ganar la puja. */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rsn-portada-texto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgba(var(--rsn-tinta-rgb), 0)   0%,
        rgba(var(--rsn-tinta-rgb), 0.5) 100%
    );
}

/* EL BARRIDO
   El velo entra de derecha a izquierda cuando la lámina se hace visible, con
   un retardo que deja ver la fotografía limpia antes de oscurecerla. Es lo
   que convierte el cambio de diapositiva en algo que ocurre, en vez de algo
   que ya estaba.

   El recorte va de "todo tapado por la izquierda" a "nada tapado": la zona
   visible crece desde el borde derecho hacia el izquierdo. */
@keyframes rsn-portada-barrido {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
}

.rsn-portada-lamina.es-actual .rsn-portada-texto::before {
    animation: rsn-portada-barrido var(--rsn-portada-barrido)
        cubic-bezier(.22, .61, .36, 1) var(--rsn-portada-espera) both;
}

/* El contenido se limita en ancho; el velo no, para que cruce la lámina de
   lado a lado y no se vean sus bordes.

   El text-align va explícito y no solo heredado, por el mismo motivo: Divi
   trae reglas propias para h2 y p que ganan a la herencia. */
.rsn-portada-texto > * {
    max-width: 900px;
    width: 100%;
    text-align: center;
}

/* La fecha es la excepción: su chapa debe ceñirse al texto, no cruzar los
   900 px del bloque. */
.rsn-portada-texto > .rsn-portada-fecha { width: auto; }

/* LA FECHA EN DORADO, SOBRE SU PROPIA CHAPA

   El dorado suelto no aguanta: es texto pequeño —necesita 4,5:1— y con el
   velo al 50% sobre una zona clara de la fotografía da 1,6:1. Ilegible.

   La solución no es cambiar el color ni subir el velo entero: es darle a la
   fecha un fondo propio. Con una chapa marino al 70% sobre el velo, el peor
   caso sube a 5,3:1, y encima queda como una etiqueta —algo deliberado— en
   vez de un texto flotando.

   Medido: sin chapa 1,65:1 · al 55% 4,1:1 · al 70% 5,3:1. Se eligió el 70%
   porque es el primer valor con holgura, no el primero que aprueba. */
.rsn-portada-fecha {
    display: inline-block;
    width: auto;
    font-family: var(--rsn-font-body);
    font-size: 0.8125rem;            /* 13px: es una etiqueta, no un párrafo */
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: var(--rsn-esp-4) 0 0;
    padding: var(--rsn-esp-2) var(--rsn-esp-4);
    background: rgba(var(--rsn-tinta-rgb), 0.70);
    border-radius: 100px;
    /* Sin sombra de texto: sobre la chapa no hace falta, y encima ensuciaría
       una tipografía pequeña con interletraje abierto. */
}

.rsn-portada-titulo {
    margin: 0;
    text-align: center;
    text-wrap: balance;
}

.rsn-portada-titulo a { display: block; text-align: center; }

.rsn-portada-titulo a {
    color: var(--rsn-blanco);
    text-decoration: none;
    /* Una sombra muy abierta bajo el texto: sostiene el titular en la zona
       donde la fotografía tenga una mancha clara y el velo no baste. */
    /* Dos sombras: una cerrada que perfila la letra y otra muy abierta que
       oscurece la zona. Con el velo al 50% son ellas las que sostienen el
       titular cuando detrás hay una mancha clara. */
    text-shadow:
        0 1px 3px  rgba(var(--rsn-tinta-rgb), 0.85),
        0 4px 26px rgba(var(--rsn-tinta-rgb), 0.75);
    transition: color .15s ease;
}
.rsn-portada-titulo a:hover,
.rsn-portada-titulo a:focus-visible { color: var(--rsn-acento); }


/* --- La tira de miniaturas ------------------------------------------------

   Sustituyen a los puntos. Un punto dice "hay otra noticia"; una miniatura
   dice cuál, y eso es lo que hace que alguien decida pulsarla.

   Es una ventana de N miniaturas completas según el ancho de la pantalla
   —6 en monitores grandes, 5, 4, 3 y 2 en móvil— y, al avanzar el carrusel,
   la tira se corre de una en una para que entre la siguiente, hasta la
   última de la categoría. js/portada.js lee el mismo valor.
   ------------------------------------------------------------------------- */

.rsn-portada { --rsn-portada-visibles: 2; }
@media (min-width: 700px)  { .rsn-portada { --rsn-portada-visibles: 3; } }
@media (min-width: 1000px) { .rsn-portada { --rsn-portada-visibles: 4; } }
@media (min-width: 1280px) { .rsn-portada { --rsn-portada-visibles: 5; } }
@media (min-width: 1600px) { .rsn-portada { --rsn-portada-visibles: 6; } }

.rsn-portada-tira {
    position: absolute;
    /* El margen lateral va en la posición y no en un padding: el padding
       de una caja que desborda se desplaza con el contenido y deja asomar
       un trozo de la miniatura anterior y de la siguiente. */
    left: clamp(0.5rem, 2vw, 3rem);
    right: clamp(0.5rem, 2vw, 3rem);
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.rsn-portada-tira::-webkit-scrollbar { display: none; }

/* Cada miniatura mide exactamente la enésima parte del ancho de la tira
   (--rsn-portada-visibles), así que se ven N completas y ni un trozo de la
   siguiente.
   Con menos de N noticias, los márgenes automáticos de la primera y la
   última centran el grupo; con más, no hay hueco que repartir y la tira se
   desplaza de una en una (js/portada.js). No se usa justify-content: center
   porque en una caja que desborda deja inaccesibles las primeras. */
.rsn-portada-mini:first-child { margin-left: auto; }
.rsn-portada-mini:last-child  { margin-right: auto; }

.rsn-portada-mini {
    flex: 0 0 auto;
    width: calc(100% / var(--rsn-portada-visibles, 4));
    scroll-snap-align: start;
    /* La separación es un filete y no un gap: así cada miniatura mide
       exactamente 1/N y la tira se para siempre en un borde limpio. */
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    gap: var(--rsn-esp-3);
    padding: var(--rsn-esp-3);
    background: rgba(var(--rsn-tinta-rgb), 0.55);
    backdrop-filter: blur(6px);
    border: 0;
    border-top: 3px solid transparent;
    color: var(--rsn-blanco);
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.rsn-portada-mini:hover,
.rsn-portada-mini:focus-visible { background: rgba(var(--rsn-tinta-rgb), 0.78); }

/* El filete dorado marca cuál se está viendo: es la misma señal que usa el
   menú para la página actual, así que el sitio se lee con un solo código. */
.rsn-portada-mini[aria-selected="true"] {
    background: rgba(var(--rsn-tinta-rgb), 0.88);
    border-top-color: var(--rsn-acento);
}

.rsn-portada-mini-foto {
    flex: 0 0 auto;
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--rsn-radio-sm);
}

.rsn-portada-mini-titulo {
    font-family: var(--rsn-font-body);
    font-size: 0.75rem;              /* 12px */
    line-height: 1.35;
    /* Tres líneas como mucho: a partir de ahí la miniatura crece y desordena
       la tira. El titular completo está en la lámina. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* --- Flechas y pausa ------------------------------------------------------ */

.rsn-portada-flecha,
.rsn-portada-pausa {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44 px es el área táctil mínima recomendada. Un mando que hay que
       apuntar con precisión no lo usa nadie en un teléfono. */
    width: 44px;
    height: 44px;
    background: rgba(var(--rsn-tinta-rgb), 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: var(--rsn-blanco);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.rsn-portada-flecha:hover,
.rsn-portada-pausa:hover,
.rsn-portada-flecha:focus-visible,
.rsn-portada-pausa:focus-visible { background: rgba(var(--rsn-tinta-rgb), 0.8); }

.rsn-portada-flecha {
    top: calc(50% - 46px);           /* centrado sobre la imagen, no sobre la tira */
    transform: translateY(-50%);
}
.rsn-portada-flecha--antes   { left: clamp(0.5rem, 2vw, 2rem); }
.rsn-portada-flecha--despues { right: clamp(0.5rem, 2vw, 2rem); }

.rsn-portada-pausa {
    top: var(--rsn-esp-4);
    right: clamp(0.5rem, 2vw, 2rem);
    width: 38px;
    height: 38px;
}

.rsn-portada-pausa-icono {
    width: 11px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
/* En pausa, el icono pasa a triángulo de reproducción. */
.rsn-portada--pausada .rsn-portada-pausa-icono {
    width: 0;
    height: 0;
    border-left: 11px solid currentColor;
    border-right: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 3px;
}


@media (max-width: 780px) {

    .rsn-portada { --rsn-portada-hueco: 140px; }

    .rsn-portada-texto {
        padding: 40px var(--rsn-esp-4) calc(var(--rsn-esp-6) + 76px);
    }

    /* Las flechas estorban donde ya se arrastra con el dedo. */
    .rsn-portada-flecha { display: none; }
}


/* ==========================================================================
   CONTENEDOR

   La caja de ancho máximo que comparten todas las secciones.

   Existía solo en versiones locales —una en la cabecera, otra en el pie— y
   esa ausencia costó un fallo real: la rejilla del pie tenía ancho máximo sin
   `margin-inline: auto`, así que en pantallas de más de 1560 px se quedaba
   pegada a la izquierda y dejaba una franja muerta que parecía una sexta
   columna. Un contenedor sin margen automático no se centra; se alinea a la
   izquierda y no avisa.
   ========================================================================== */

.rsn-contenedor {
    /* `box-sizing` explícito y no heredado de Divi.

       Sin él, `width: 100%` más el relleno lateral da un contenedor de 1410 px
       dentro de una ventana de 1330 —los 80 px del propio relleno— y la página
       entera se puede desplazar de lado. En el sitio no se notaba porque Divi
       declara `border-box` para todo; se vio al renderizar estas secciones
       sueltas, sin Divi delante.

       Que no se note gracias a Divi es justamente la razón para declararlo:
       este kit tiene que sostenerse por sí mismo. */
    box-sizing: border-box;
    width: 100%;
    max-width: 1560px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 3rem);
}


/* ==========================================================================
   BOTÓN

   Uno solo, con variantes. --claro es el que va sobre fondo marino.
   ========================================================================== */

.rsn-boton {
    /* LA SOMBRA, Y POR QUÉ ESTÁ AQUÍ

       El plano de la franja de contacto se levanta al pasar el ratón, y un
       botón plano al lado del plano se lee como una etiqueta, no como algo
       que se pulsa. Un sitio solo tiene un lenguaje de relieve: o lo tienen
       todas las piezas pulsables o no lo tiene ninguna.

       En reposo la sombra es corta y discreta —despega el botón del fondo sin
       hacerlo flotar—, y al pasar por encima se abre y el botón sube 2 px. Al
       pulsar vuelve a su sitio: el botón se «hunde» bajo el dedo, que es lo
       que hace un botón de verdad.

       Los dos valores van en variables porque cada variante los cambia: sobre
       marino, una sombra marino no existe. Pero los valores en sí son los del
       sistema —`--rsn-realce`—, los mismos que usa la tarjeta del plano, para
       que las dos piezas se lean a la misma altura. */
    --rsn-boton-sombra:      var(--rsn-realce);
    --rsn-boton-sombra-alta: var(--rsn-realce-alto);

    display: inline-block;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding: var(--rsn-esp-3) var(--rsn-esp-8);
    border: 1px solid transparent;
    border-radius: var(--rsn-radio-sm);
    background: var(--rsn-azul);
    color: var(--rsn-blanco);
    box-shadow: var(--rsn-boton-sombra);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease,
                transform .25s cubic-bezier(.16, .84, .44, 1), box-shadow .25s ease;
}

.rsn-boton:hover,
.rsn-boton:focus-visible {
    background: var(--rsn-azul-hover);
    color: var(--rsn-blanco);
    transform: translateY(-2px);
    box-shadow: var(--rsn-boton-sombra-alta);
}

/* Al pulsar, de vuelta al suelo y sin transición: la respuesta al clic tiene
   que ser inmediata o no se percibe como respuesta. */
.rsn-boton:active {
    transform: translateY(0);
    box-shadow: var(--rsn-boton-sombra);
    transition: none;
}

/* El mismo cerco dorado que la tarjeta del plano, para que el foco de teclado
   se vea igual en todo el sitio. */
.rsn-boton:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .rsn-boton { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .25s ease; }

    .rsn-boton:hover,
    .rsn-boton:focus-visible { transform: none; }
}

/* Sobre marino, el azul institucional desaparece: es casi el mismo tono. Aquí
   el botón se dibuja con el borde y se rellena al pasar por encima. */
.rsn-boton--claro {
    --rsn-boton-sombra:      var(--rsn-realce-oscuro);
    --rsn-boton-sombra-alta: var(--rsn-realce-oscuro-alto);

    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--rsn-blanco);
}

/* --linea: el botón secundario sobre fondo claro. Sin relleno ni sombra —solo
   el contorno y el texto en azul—, para acciones que acompañan y no mandan:
   «abrir en Google Calendar» bajo el calendario, «ver todas» bajo un listado.
   Al pasar el ratón se rellena y pasa a ser el botón normal. */
.rsn-boton.rsn-boton--linea {
    /* Las dos clases en el selector: esta variante está escrita ANTES que la
       regla base de .rsn-boton, y a igual especificidad ganaba la base, que
       volvía a rellenar el botón de azul con el texto también azul. */
    --rsn-boton-sombra:      none;
    --rsn-boton-sombra-alta: var(--rsn-realce);

    background: transparent;
    border-color: currentColor;
    color: var(--rsn-azul);
}
.rsn-boton.rsn-boton--linea:hover,
.rsn-boton.rsn-boton--linea:focus-visible {
    background: var(--rsn-azul);
    border-color: var(--rsn-azul);
    color: var(--rsn-blanco);
}

.rsn-boton--claro:hover,
.rsn-boton--claro:focus-visible {
    background: var(--rsn-blanco);
    border-color: var(--rsn-blanco);
    color: var(--rsn-marino);
}



/* --- El enlace de «seguir leyendo» ----------------------------------------

   Lo pinta rsn_enlace_mas(), en inc/enlaces.php, y lo usan las siete secciones
   que llevan a una página que desarrolla lo que ellas resumen: carisma,
   Sistema Preventivo, Aguinaldo, Promotor, Dirección, reconocimientos y
   noticias.

   POR QUÉ NO ES UN BOTÓN

   El peso de un botón es una promesa sobre lo que pasa al pulsarlo. Cuando
   siete enlaces de lectura llevan botón, la única llamada a la acción real de
   la portada —«Agenda una visita»— deja de destacar; llegó a pesar menos que
   «Ver todas las noticias». Este registro deja el peso donde hace falta.

   EL COLOR SALE DEL TOKEN

   `--rsn-acento-texto` es azul sobre claro y beige dentro de las bandas
   oscuras. Nació escrito a mano como azul, en el enlace de reconocimientos, y
   así daba 2.12 de contraste sobre marino: invisible. Con el token, una sola
   clase sirve en los dos fondos.

   LA FLECHA ES LA SEÑAL

   En reposo esto es texto en versalitas: el subrayado solo aparece al pasar por
   encima. Lo que dice «esto se pulsa» es la flecha, que además avanza al
   acercarse — el mismo gesto que ya usan las filas de Admisión. Es la señal más
   discreta del tema y no conviene bajar de ahí.
   ------------------------------------------------------------------------- */

.rsn-enlace-mas {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    /* En una columna flexible, sin esto se estiraría a todo el ancho y se
       leería como una barra en vez de como un enlace. */
    align-self: flex-start;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    text-decoration: none;
    padding: 0.4em 0;
    border-bottom: 2px solid transparent;
    transition: border-color .25s ease, color .25s ease;
}

.rsn-enlace-mas:hover,
.rsn-enlace-mas:focus-visible {
    color: var(--rsn-acento-texto);
    border-bottom-color: var(--rsn-acento);
}

.rsn-enlace-mas:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 4px;
}

.rsn-enlace-flecha {
    display: inline-block;
    transition: transform .25s ease;
}

.rsn-enlace-mas:hover .rsn-enlace-flecha,
.rsn-enlace-mas:focus-visible .rsn-enlace-flecha { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .rsn-enlace-mas,
    .rsn-enlace-flecha { transition: none; }
    .rsn-enlace-mas:hover .rsn-enlace-flecha { transform: none; }
}


/* ==========================================================================
   PORTADA · BARRA DE CIFRAS

   La genera inc/cifras.php. Va entre el carrusel y la franja de misión: una
   banda clara entre dos oscuras, que es lo que le da respiración a la página.
   ========================================================================== */

.rsn-cifras {
    background: var(--rsn-blanco);
    border-bottom: 1px solid var(--rsn-borde);
}

/* EL RELLENO FANTASMA DE DIVI

   Divi declara `p { padding-bottom: 1em }` y lo anula solo en el último `p` de
   cada bloque. Como es en `em`, crece con el cuerpo: bajo un número de 52 px
   dejaba 52 px de vacío, y la barra medía 262 px para 78 de contenido. Ese era
   todo el «margen de más», no el relleno de la sección.

   Nuestros componentes espacian con márgenes, así que aquí se anula sin
   pérdida. Va por sección y no en un `p` global, para no tocar el contenido
   que escriba el colegio con el editor. */
.rsn-cifras p,
.rsn-mision p,
.rsn-pie p { padding-bottom: 0; }

/* Rejilla, y con el número de columnas dicho a mano.

   Con `flex` el reparto lo decidía el navegador, y entre 700 y 900 px de ancho
   decidía tres columnas y la cuarta debajo, sola y centrada.

   Aquí el recuento lo pone inc/cifras.php en `--rsn-cifras-n`, así que la fila
   tiene exactamente tantas columnas como cifras haya: con cinco, cinco. Y por
   debajo de 1024 px, siempre dos —que es lo que hace que cinco cifras salgan
   2 + 2 + 1 y seis salgan 2 + 2 + 2, sin filas huérfanas de tres—. */
.rsn-cifras-fila {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Aire entre filas solo cuando hay filas. En una sola línea el hueco
       vertical no existe y los filetes separan las columnas. */
    row-gap: var(--rsn-esp-6);
    padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}

@media (min-width: 1024px) {
    .rsn-cifras-fila {
        grid-template-columns: repeat(var(--rsn-cifras-n, 4), 1fr);
        row-gap: 0;
    }
}

.rsn-cifra {
    position: relative;
    text-align: center;
    padding: var(--rsn-esp-2) var(--rsn-esp-4);
    /* Sin esto, un número largo ensancha su columna y desiguala la fila: en una
       rejilla, el mínimo de una pista es el contenido, no cero. */
    min-width: 0;
}

/* EL FILETE, CORTO Y CENTRADO

   No es el borde de la celda. Un borde ocuparía todo el alto de la caja
   —relleno incluido— y se leería como una tabla; el filete del modelo es una
   línea breve a la altura del número, que separa sin dividir. */
.rsn-cifra::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: clamp(42px, 4vw, 58px);
    background: var(--rsn-borde);
}

/* En dos columnas el filete va solo en la de la derecha; si no, aparecería
   pegado al margen izquierdo de la barra. */
.rsn-cifra:nth-child(odd)::before { display: none; }

/* LA CIFRA HUÉRFANA, AL CENTRO

   Con un número impar de cifras, la última se queda sola en su fila. Alineada a
   la izquierda parece que falta algo a su derecha; ocupando las dos columnas
   queda centrada bajo las de arriba y la fila se lee como cierre.

   `:last-child:nth-child(odd)` dice exactamente eso —la última, y en posición
   impar— sin que PHP tenga que contar ni añadir clases: en una rejilla de dos
   columnas, las posiciones impares son las que abren fila. */
@media (max-width: 1023px) {
    .rsn-cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .rsn-cifra:nth-child(odd)::before { display: block; }
    .rsn-cifra:first-child::before    { display: none; }
}

.rsn-cifra-valor {
    font-family: var(--rsn-font-display);
    font-weight: 900;
    /* Grande de verdad: es el único sitio de la portada donde un número tiene
       que verse antes de leerse. */
    font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-2);
    /* Los números se leen en fila: con cifras de ancho fijo, las comas y los
       dígitos quedan a la misma altura óptica. */
    font-variant-numeric: tabular-nums;
}

/* Con cinco o seis cifras el cuerpo baja: «1,200+» a 52 px en una columna de
   seis no cabe. Lo decide inc/cifras.php, que es quien sabe cuántas hay. */
.rsn-cifras-fila--compacta .rsn-cifra-valor {
    font-size: clamp(1.75rem, 1rem + 1.9vw, 2.4rem);
}

/* El «+» y el «%», a menor cuerpo y volados. Es el detalle que hace que se lea
   como cifra y no como palabra. Los envuelve inc/cifras.php */
.rsn-cifra-signo {
    font-size: 0.62em;
    font-weight: 700;
    vertical-align: 0.32em;
    letter-spacing: 0;
    margin-left: 0.02em;
}

/* Versalitas pequeñas y en dorado: el registro de rótulo, no de texto. En
   blanco el dorado de marca no llega al contraste mínimo, así que va el
   derivado que sí (--rsn-dorado-texto, 5.9:1). */
.rsn-cifra-rotulo {
    font-family: var(--rsn-font-body);
    font-size: 0.6875rem;            /* 11px */
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--rsn-acento-texto);
    margin: 0;
    text-wrap: balance;
}


/* ==========================================================================
   PORTADA · MISIÓN Y VISIÓN

   La genera inc/proposito.php.

   Casi no hay reglas aquí, y ese es el punto: la franja reutiliza las clases de
   la franja clara del Sistema Preventivo —`.rsn-mision-valores`,
   `.rsn-valores-rejilla`, `.rsn-valor`— y `.rsn-proposito` solo marca en qué se
   aparta. Las dos dicen lo mismo en su forma: un enunciado y las piezas que lo
   desarrollan, en columnas, sobre beige.

   LO QUE CAMBIA RESPECTO A LA DE LOS PILARES

   Allí la franja va pegada al fondo de la sección de misión, así que su aire
   superior lo pone el bloque oscuro que la precede y ella solo necesita el de
   abajo. Aquí va suelta entre dos secciones claras y tiene que ponerse los dos,
   además de sus propios filetes de separación.

   Y son dos columnas de texto largo —ochenta y tantas palabras cada una, frente
   a las cuarenta de un pilar—, así que el enunciado se lleva algo menos de
   ancho: con las cuatro columnas de la otra franja repartidas a partes casi
   iguales, aquí quedaban dos bloques de texto demasiado estrechos.

   Se probó antes en dos cajas con fotografía y se descartó: pesaban como una
   sección propia y partían en dos el tramo de la portada donde hablan las
   personas —el Promotor y la Dirección—.
   ========================================================================== */

/* --- EN NEGATIVO ----------------------------------------------------------

   Misma franja que la de los pilares, con los dos colores intercambiados: azul
   institucional de fondo y beige encima. No es un capricho de contraste — es lo
   que convierte a las dos franjas en una pareja: positivo arriba, negativo
   abajo, los mismos dos colores del manual en los dos sitios.

   Y resuelve el ritmo de esa zona de la portada. Los dos saludos que la rodean
   —Promotor y Dirección— van sobre gris suave; en claro, la franja habría sido
   la tercera banda pálida seguida y el tramo entero se habría leído como una
   sola losa. En oscuro corta, y la secuencia queda marino · claro · azul ·
   claro · marino.

   EL CUERPO NO VA EN BEIGE, Y ESTO ES LO ÚNICO QUE ME APARTO DE LO PEDIDO

   Beige sobre azul da 5.44 de contraste: pasa la norma de sobra. Pero aquí hay
   ciento setenta palabras, cuatro veces lo que ocupa un pilar, a cuerpo pequeño;
   y un tono cálido y poco saturado sobre un azul saturado vibra a ese tamaño.

   Así que el beige se queda donde rinde —rótulo, títulos y filetes, que es
   donde se lee la marca— y el cuerpo va en blanco al 88 %, que da 5.64 y es el
   registro que ya usa el resto de bandas oscuras del sitio. El carácter de la
   franja es exactamente el pedido; lo que cambia es dónde cae el peso.
   ------------------------------------------------------------------------- */

/* Las DOS clases en el selector, y no solo `.rsn-proposito`: el elemento lleva
   también `.rsn-mision-valores`, que pinta el fondo beige y vive más abajo en
   esta hoja. A igual especificidad gana la última, así que con una sola clase
   el fondo seguía siendo beige —y el texto, que sí cambiaba a beige, quedaba
   invisible—. Con las dos clases este bloque pesa más y no depende del orden. */
.rsn-mision-valores.rsn-proposito {
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    /* Sin filetes: el cambio de color ya dice dónde empieza y dónde acaba
       mucho mejor que una línea de un píxel. */
    border-block: 0;
    padding-block: clamp(1rem, 2vw, 1.75rem);

    /* Acentos de banda oscura. `.rsn-mision-valores` los pone en azul porque
       allí es una isla clara dentro de un bloque oscuro; aquí la isla es
       oscura, así que hay que devolverlos al valor oscuro. */
    --rsn-acento: var(--rsn-acento-oscuro);
    --rsn-acento-texto: var(--rsn-acento-oscuro);
    --rsn-foco: var(--rsn-acento-oscuro);
}

/* Los tres colores que la franja clara escribe a mano y que el cambio de fondo
   deja ilegibles: dos marinos sobre marino y un gris oscuro sobre azul. */
.rsn-proposito .rsn-valores-cabeza { border-top-color: var(--rsn-acento); }
.rsn-proposito .rsn-valores-titulo,
.rsn-proposito .rsn-valor-titulo   { color: var(--rsn-acento-texto); }
.rsn-proposito .rsn-valor-texto    { color: rgba(255, 255, 255, 0.88); }

/* Dos columnas: el enunciado y, a su derecha, el acordeón con las dos piezas
   apiladas. El enunciado se lleva algo menos de ancho para que el texto de la
   pieza abierta tenga sitio. */
@media (min-width: 900px) {
    .rsn-proposito .rsn-valores-rejilla {
        grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    }
}

/* --- El acordeón ---------------------------------------------------------

   <details> nativos, uno debajo de otro. Cada uno hereda de .rsn-valor el
   filete de arriba; el título hace de botón y la flecha gira al abrir. Sin
   altura animada: <details> no la tiene, y fingirla exige medir en JS. Lo que
   sí se anima es la entrada del texto.
   ------------------------------------------------------------------------- */

/* --- MISMO LENGUAJE QUE LA BANDA DE ADMISIÓN ------------------------------

   Las dos son las bandas marino de la portada, y se leen mejor si hablan
   igual: mismo aire vertical, rótulo dorado en versalitas, titular blanco y
   grande, y a la derecha FILAS —no columnas con filete— sobre un velo blanco
   al 5 %, con el filete dorado a la izquierda que se enciende al pasar el
   ratón o al abrir. Aquí las filas se despliegan en vez de llevar a otra
   página; el resto es idéntico a .rsn-modalidad-caja.
   ------------------------------------------------------------------------- */

.rsn-mision-valores.rsn-proposito { padding-block: clamp(3rem, 6vw, 5rem); }

@media (min-width: 900px) {
    .rsn-proposito .rsn-valores-rejilla { align-items: center; }
}

.rsn-proposito .rsn-valores-cabeza { border-top: 0; padding-top: 0; }

.rsn-proposito .rsn-valores-titulo {
    font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--rsn-blanco);
}

.rsn-proposito-acordeon {
    display: grid;
    gap: 2px;                        /* el filete entre filas lo hace el fondo */
}

.rsn-proposito .rsn-proposito-item {
    padding-top: 0;
    border-top: 0;
    background: rgba(255, 255, 255, 0.05);
    border-left: var(--rsn-filete) solid transparent;
    border-radius: var(--rsn-radio-sm);
    transition: background-color .25s ease, border-color .25s ease;
}

.rsn-proposito .rsn-proposito-item:hover,
.rsn-proposito .rsn-proposito-item[open] {
    background: rgba(255, 255, 255, 0.11);
    border-left-color: var(--rsn-acento);
}

.rsn-proposito-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsn-esp-4);
    padding: clamp(0.9rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.5rem);
    cursor: pointer;
    list-style: none;                 /* fuera el triángulo por omisión */
}
.rsn-proposito-resumen::-webkit-details-marker { display: none; }

/* El título como el de una modalidad: cuerpo en negrita y blanco, no serif
   dorado; el dorado queda para el icono y la flecha. */
.rsn-proposito .rsn-proposito-resumen .rsn-valor-titulo {
    margin: 0;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-base);
    font-weight: 700;
    line-height: 1.3;
    color: var(--rsn-blanco);
}
.rsn-proposito .rsn-proposito-resumen .rsn-valor-icono { width: 24px; height: 24px; }

.rsn-proposito-flecha {
    flex: none;
    color: var(--rsn-acento-texto);
    transition: transform .25s ease;
}
.rsn-proposito-item[open] .rsn-proposito-flecha { transform: rotate(180deg); }

.rsn-proposito-resumen:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
    border-radius: var(--rsn-radio-sm);
}

.rsn-proposito .rsn-proposito-item .rsn-valor-texto {
    padding: 0 clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 1.8vw, 1.5rem);
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

@keyframes rsn-proposito-entrar {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.rsn-proposito-item[open] .rsn-valor-texto { animation: rsn-proposito-entrar .3s ease both; }

@media (prefers-reduced-motion: reduce) {
    .rsn-proposito-flecha,
    .rsn-proposito .rsn-proposito-item { transition: none; }
    .rsn-proposito-item[open] .rsn-valor-texto { animation: none; }
}


/* ==========================================================================
   PORTADA · FRANJA DE MISIÓN

   La genera inc/mision.php.

   La composición es una sola idea: Don Bosco detrás, los valores delante y
   cortándole el torso. Eso obliga a tres capas apiladas dentro de la misma
   sección, y a que la figura se ancle al fondo —no al centro— para que la
   franja caiga siempre sobre el pecho y no sobre la cara, mida lo que mida la
   pantalla.
   ========================================================================== */

.rsn-mision {
    position: relative;
    /* Recorta lo que sobresalga de la figura por los lados en pantallas
       estrechas, en vez de generar barra horizontal.

       `clip` y no `hidden`, y no es lo mismo: `hidden` convierte el elemento en
       un contenedor de desplazamiento —aunque nunca se desplace—, y eso rompía
       el parallax, porque `view()` mide el avance contra el contenedor de
       scroll más cercano y pasaba a medirlo contra una caja quieta. Con `clip`
       se recorta igual sin crear ese contenedor. La línea de `hidden` queda
       debajo como reserva para navegadores que no entiendan `clip`. */
    overflow: hidden;
    overflow: clip;
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    isolation: isolate;              /* la pila es asunto interno de esta sección */

    /* Las medidas que gobiernan la composición, juntas y con nombre.

       AHORA MANDA EL ALTO, NO EL ANCHO

       La figura tiene que empezar en la línea de «Nuestra misión» y terminar
       90 px por debajo del bloque, donde la franja de valores la corta. Eso es
       una ALTURA, no un ancho: se declara aquí y el ancho sale de multiplicarla
       por la proporción real del archivo, que inc/mision.php lee con
       `getimagesize()` y escribe en `--rsn-figura-relacion`.

       Antes se gobernaba por ancho —`clamp(280px, 34vw, 620px)`— y el alto
       caía donde cayera: a 1900 px la figura empezaba 133 px por debajo del
       rótulo y a 1080, 361 px. No había forma de alinearla.

       La reserva de 0,62 es la proporción a la que este bloque funciona, y la
       del archivo actual (0,6007) anda justo ahí. El busto que había antes
       —1120 x 1102, relación 1,016— necesitaba 732 px de ancho para llegar a
       los 720 de alto, y a partir de 1560 px de ventana eso ya no cabía al
       lado del texto: de ahí el cambio a una figura de cuerpo tres cuartos. */
    --rsn-figura-alto: 720px;
    --rsn-figura-relacion: 0.62;     /* lo pisa la proporción real del archivo */
    --rsn-figura-corte: 90px;        /* cuánto de la figura tapa la franja */
    --rsn-mision-fondo: clamp(2rem, 4vw, 3.5rem);   /* aire bajo el texto */
    --rsn-figura-vuelo: 44px;        /* cuánto se desplaza con el parallax */
    --rsn-figura-entrada: 64px;      /* cuánto sube al aparecer */
}

/* El bloque alto: figura y texto. La franja queda fuera, debajo. */
.rsn-mision-alto { position: relative; }

.rsn-mision-cuerpo {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

/* El texto no ocupa el ancho completo aunque la figura no esté: una línea de
   ochenta caracteres sobre fondo oscuro se lee mal, y el hueco de la derecha
   es donde vive Don Bosco.

   60ch y no 52: con la figura nueva —433 px de ancho frente a los 620 del
   busto anterior— el hueco entre columna y retrato se había ido a 436 px y el
   bloque se leía partido en dos. A 60ch la medida sale de 59 a 68 caracteres
   por línea, que sigue dentro de lo cómodo, y el hueco baja a 347. Más ancho
   no arregla nada: a 68ch el texto termina 76 px antes que la figura y el
   vacío se muda debajo del botón. */
.rsn-mision-texto { max-width: 60ch; }

.rsn-mision-titulo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
}

.rsn-mision-lema {
    font-family: var(--rsn-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 1rem + 1.5vw, 2.15rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--rsn-blanco);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-mision-parrafo p {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-mision-parrafo p:last-child { margin-bottom: var(--rsn-esp-8); }


/* --- La cita de Don Bosco -------------------------------------------------

   Va en registro distinto al del lema de arriba, y a propósito.

   El lema —«Hagan lo que Él les diga.»— ya es una cita, y está compuesto en
   serifa cursiva y a cuerpo grande. Repetir ese tratamiento aquí pondría dos
   voces gritando lo mismo. Así que esta va en serifa REDONDA, a cuerpo medio:
   se lee como documento, no como proclama, que es justo lo que es —tiene
   volumen, página y año—.

   El filete dorado a la izquierda no es nuevo: es el que este tema ya le da a
   toda cita (ver la regla de `blockquote` más arriba). Se hereda tal cual, en
   vez de inventar otro recurso para lo mismo. Le había puesto además un filete
   corto encima, y con los dos a la vez había una marca dorada de más.
   ------------------------------------------------------------------------- */

.rsn-cita {
    margin: 0 0 var(--rsn-esp-8);
    max-width: 48ch;
}

.rsn-cita-texto { margin: 0; }

.rsn-cita-texto p {
    font-family: var(--rsn-font-display);
    /* REDONDA, no cursiva —contra la regla general de `blockquote`—.

       El lema de arriba ya es una cita compuesta en serifa cursiva. Dos bloques
       en cursiva, uno detrás de otro, se leen como la misma voz repitiéndose.
       En redonda esta suena a documento citado, que es lo que es: tiene
       volumen, página y año. */
    font-style: normal;
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* Las comillas las pone la hoja y no el texto guardado: así salen siempre las
   angulares —las que corresponden en español— escriba quien escriba en el
   Personalizador. */
.rsn-cita-texto p::before { content: "\00AB"; }
.rsn-cita-texto p::after  { content: "\00BB"; }

/* La firma se alinea con la cita, no con el margen del texto: una atribución
   que arranca antes que aquello que atribuye se lee como si fuera otra cosa. */
.rsn-cita-firma {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--rsn-esp-4);
    padding-left: calc(var(--rsn-esp-6) + var(--rsn-filete, 3px));
}

.rsn-cita-autor {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
}

.rsn-cita-fuente {
    font-family: var(--rsn-font-body);
    font-size: 0.8125rem;            /* 13px */
    font-style: italic;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.80);
}

/* --- La figura ------------------------------------------------------------

   DOS COMPORTAMIENTOS, NO UNO

   En pantalla ancha es una columna más de la retícula, al lado del texto. En
   pantalla estrecha no cabe al lado de nada, así que pasa a marca de agua
   detrás del texto.

   El caso estrecho es el de partida —posición absoluta— y el ancho lo
   sustituye. Al revés costaría más deshacer.
   ------------------------------------------------------------------------- */

/* Estrecho: marca de agua.

   ANCLADA ARRIBA, NO ABAJO

   Iba pegada al suelo del bloque. Como la figura es más alta que el bloque, lo
   que sobraba salía por arriba y el `overflow: clip` de la sección le cortaba
   la cabeza: se veía el cuello y la sotana, y la cara no. Anclada arriba, la
   cara está siempre entera y lo que se pierde es el borde inferior del
   recorte, que es justo lo que hay que esconder.

   Es la misma regla que la banda de las páginas internas: en un retrato lo que
   importa está en el tercio alto, y cualquier recorte que empiece por abajo lo
   siega. */
.rsn-mision-figura {
    position: absolute;
    right: -14%;
    top: 0;
    z-index: 0;
    width: min(70vw, 460px);
    opacity: 0.22;
    line-height: 0;
}

.rsn-mision-figura img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35));
}

/* EL CANTO DE ABAJO SE DISUELVE

   Anclada arriba, la figura ya no llega al suelo del bloque: en un móvil el
   recorte termina a media franja y su borde inferior —recto, porque es un
   recorte— se queda a la vista como una línea horizontal sobre el marino.
   Antes no pasaba porque colgaba del suelo y la tapaba la franja clara.

   Se degrada en vez de recortarse: la máscara la desvanece en el último tercio
   y deja de haber canto que esconder, mida lo que mida el bloque. Y de paso es
   lo que una marca de agua debería hacer.

   Solo por debajo de 1080 px: a partir de ahí la figura es una columna de la
   retícula, llega hasta abajo y es la franja clara la que corta, que es el
   efecto que se buscaba desde el principio. */
@media (max-width: 1079px) {

    .rsn-mision-figura {
        -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
                mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
    }

    /* La sombra proyectada sobra cuando el borde se desvanece: dibujaba el
       contorno justo donde la máscara lo está borrando. */
    .rsn-mision-figura img { filter: none; }
}

/* EN MÓVIL SIGUE ESTANDO, MÁS TENUE

   Antes se ocultaba por debajo de 560 px. Tenía sentido mientras la figura
   colgaba del suelo: a ese tamaño solo asomaba la sotana por detrás del botón y
   se leía como una mancha. Anclada arriba se ve la cara, que es lo que la hace
   reconocible, así que ocultarla ya no compra nada y el móvil se quedaba sin la
   mitad de la composición.

   Lo que sí cambia es cuánto se transparenta. En una pantalla estrecha la
   figura ocupa proporcionalmente mucho más ancho y el párrafo cae encima de la
   cara, que es la zona clara del retrato. A 0.22 el texto blanco al 82 % sobre
   esa zona se queda en 4.46 de contraste, por debajo del 4.5 que exige la
   norma. A 0.16 sube a 4.68 y pasa, y la figura se sigue leyendo. */
@media (max-width: 700px) {
    .rsn-mision-figura { opacity: 0.16; }
}

/* El texto solo necesita medida propia cuando comparte fila con la figura. */
@media (max-width: 1079px) {
    .rsn-mision-texto { max-width: none; }

    /* Un alto mínimo para la marca de agua.

       Ya no está para evitar que se corte la cabeza —de eso se ocupa el
       anclaje arriba—, sino para que la figura tenga sitio: con un texto muy
       corto, el bloque se encogería hasta dejar a la vista poco más que la
       frente, y una cara a medias es peor que ninguna. */
    .rsn-mision-alto {
        min-height: calc(min(70vw, 460px) - var(--rsn-figura-corte) + var(--rsn-esp-8));
    }
}

/* Ancho: columna de la retícula, junto al texto.

   Se pega al borde derecho del contenedor —no al del texto— para quedar a
   plomo con la barra de cifras de arriba y con la última columna de la franja
   de valores. Probé la alternativa, pegarla al texto: cierra el hueco a 56 px
   pero deja 400 de marino vacío a su derecha y la saca de la retícula que
   sigue el resto de la portada. Peor negocio.

   El margen inferior negativo es lo que la hace asomar por debajo del bloque
   para que la franja la corte. Sustituye al `bottom` del caso estrecho. */
@media (min-width: 1080px) {
    /* Arriba y no abajo: la figura y el rótulo empiezan los dos en el canto
       superior del bloque, que es lo que los alinea. Con `flex-end` la figura
       colgaba del suelo y su cabeza caía donde su propia altura decidiera. */
    .rsn-mision-cuerpo {
        display: flex;
        align-items: flex-start;
        gap: clamp(2rem, 3vw, 3.5rem);
        padding-bottom: var(--rsn-mision-fondo);
    }

    .rsn-mision-texto { flex: 0 1 auto; }

    .rsn-mision-figura {
        position: static;
        opacity: 1;
        flex: 0 0 auto;
        line-height: 0;
        margin-left: auto;           /* pegada al borde derecho del contenedor */
        /* El tope del 50 % es un seguro para un archivo de proporción impropia
           —el actual, sin ir más lejos—: sin él, la figura se comería la fila.
           Cuando el retrato tiene la proporción de este bloque, no actúa. */
        width: min(calc(var(--rsn-figura-alto) * var(--rsn-figura-relacion)), 50%);
        /* El margen negativo hace dos cosas a la vez: saca los 90 px que la
           franja tapa y, al restar de la altura exterior de la figura, deja que
           sea ella quien fije lo alto del bloque. El relleno inferior hay que
           descontarlo también: sin sumarlo, la figura solo asomaba 34 px de los
           90. El texto sí quiere ese aire; la figura tiene que atravesarlo. */
        margin-bottom: calc((var(--rsn-figura-corte) + var(--rsn-mision-fondo)) * -1);
    }

    .rsn-mision-figura img {
        display: block;              /* en línea, la línea base metía 5 px */
        width: 100%;
        height: var(--rsn-figura-alto);
        object-fit: contain;
        object-position: top right;
    }
}

/* --- El parallax de la figura ---------------------------------------------

   Sin JavaScript: `animation-timeline: view()` ata la animación al avance de
   la sección por la ventana, y el navegador la ejecuta en el compositor. Un
   oyente de scroll en JS haría lo mismo peor —en el hilo principal, compitiendo
   con todo lo demás— y costaría un archivo más.

   LO QUE HAY QUE CUIDAR: EL CORTE

   La figura asoma 90 px por debajo de su bloque para que la franja de valores
   se los tape. Si el parallax la sube, esos 90 se reducen y aparece el borde
   inferior recto del recorte, que es justo lo que la franja está escondiendo.

   Por eso el asomo crece en la mitad de `--rsn-figura-vuelo`: en el punto más
   alto del recorrido siguen tapados exactamente 90 px, y a partir de ahí solo
   puede taparse más. El corte nunca se abre.

   Y EL RECORRIDO VA CENTRADO EN LA POSICIÓN ALINEADA

   Antes iba de menos el vuelo entero hasta cero, con lo que la figura pasaba
   casi todo el rato por encima de su sitio. Desde que su borde superior tiene
   que coincidir con el rótulo, eso se nota: ahora va de menos la mitad a más
   la mitad, así que con la sección centrada en la ventana —que es donde se lee
   el bloque— el desplazamiento es cero y los dos bordes coinciden. A los
   extremos del recorrido se separan 22 px, que es deriva de parallax y se lee
   como tal.

   `@supports` y no una regla suelta: donde no haya cronología de scroll no se
   toca el asomo tampoco, así que la figura se queda quieta y cortada como
   estaba, sin quedarse a medio camino de nada.

   Y con «reducir movimiento» no hay parallax. Es de los efectos que peor
   sienta a quien tiene problemas vestibulares. */

@keyframes rsn-figura-vuelo {
    from { transform: translateY(calc(var(--rsn-figura-vuelo) / -2)); }
    to   { transform: translateY(calc(var(--rsn-figura-vuelo) / 2)); }
}

/* --- La entrada de la figura ----------------------------------------------

   DOS MOVIMIENTOS SOBRE DOS ELEMENTOS

   Aquí conviven el parallax y la entrada, y los dos quieren desplazar en
   vertical. Puestos sobre el mismo elemento, el segundo pisaría al primero: una
   sola propiedad `transform`, un solo valor.

   Así que se reparten. La entrada va en la FIGURA y el parallax en la IMAGEN
   que hay dentro: cada uno tiene su propio `transform` y el navegador los
   compone al pintar. La entrada ocurre una vez, al asomar; el parallax sigue
   corriendo después, para siempre.

   Solo desde 1080 px, que es donde la figura es una columna de verdad. Por
   debajo es marca de agua al 22% de opacidad, y una regla de entrada que la
   dejara al 100% la convertiría en un retrato a plena luz detrás del texto.
   ------------------------------------------------------------------------- */

@media (min-width: 1080px) {

    .rsn-mision-figura.esta-fuera {
        transform: translateY(var(--rsn-figura-entrada));
        opacity: 0;
    }

    .rsn-mision-figura.esta-dentro {
        transition: transform .6s cubic-bezier(.16, .84, .44, 1),
                    opacity   .45s ease-out;
        transform: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rsn-mision-figura.esta-dentro { transition: none; }
}


@supports (animation-timeline: view()) {
    @media (min-width: 1080px) and (prefers-reduced-motion: no-preference) {

        .rsn-mision-figura {
            margin-bottom: calc(
                (var(--rsn-figura-corte) + var(--rsn-figura-vuelo) / 2 + var(--rsn-mision-fondo)) * -1
            );
        }

        .rsn-mision-figura img {
            animation: rsn-figura-vuelo linear both;
            animation-timeline: view();
            /* De cuando la sección asoma por abajo a cuando termina de salir por
               arriba: el recorrido completo, para que el desplazamiento sea lento
               y no un tirón al entrar. */
            animation-range: entry 0% exit 100%;
        }
    }
}

/* --- La franja de valores -------------------------------------------------

   Beige del manual (pág. 18) sobre marino: el contraste más alto de la paleta
   institucional, que es lo que hace que se lea como un corte y no como una
   sombra. Y va en `z-index: 2`, por encima de la figura: ahí está el efecto.
   ------------------------------------------------------------------------- */

.rsn-mision-valores {
    position: relative;
    z-index: 2;
    background: var(--rsn-fondo-calido);
    color: var(--rsn-marino);
}

.rsn-valores-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rsn-esp-8) clamp(2rem, 4vw, 4rem);
    padding-block: clamp(2rem, 4vw, 3rem);
}

/* El encabezado y un pilar por columna. Declaradas a mano y no con `auto-fit`:
   el número lo pone el marcado, que sabe cuántos pilares hay —tres, salvo que
   alguien vacíe uno en el Personalizador—. Que el navegador decidiera cuántas
   caben es justo lo que rompió la barra de cifras más arriba.

   El encabezado va algo más estrecho porque lleva menos texto y así las tres
   columnas de definición quedan iguales entre sí, que es lo que se compara. */
@media (min-width: 900px) {
    .rsn-valores-rejilla {
        grid-template-columns: minmax(0, .95fr) repeat(var(--rsn-valores-columnas, 3), minmax(0, 1fr));
    }
}

/* La lista desaparece como caja y sus <li> se convierten en columnas de la
   rejilla de arriba, junto al encabezado. Sin esto, los tres pilares se
   apilarían dentro de una sola columna.

   `list-style` va en el <li> y no en el <ul>: al quitarle la caja al <ul> con
   `display: contents`, sus reglas de lista dejan de aplicarse a los hijos y
   volvían a salir las viñetas. Es el mismo tropiezo que ya dio la lista de
   documentos. */
.rsn-valores-lista { display: contents; }

/* El filete va en la columna, no en el título.

   Lo tenía en `.rsn-valor-titulo`, y al meter el icono encima quedaba entre el
   icono y el título: partía en dos un grupo que se lee junto. En la columna,
   el orden es filete, icono, título y texto. */
.rsn-valor {
    list-style: none;
    margin: 0;
    padding-top: var(--rsn-esp-4);
    border-top: 2px solid var(--rsn-acento);
}

/* En línea con el título. Sobre él ocupaba una fila propia y sumaba unos 52 px
   de altura a cada columna —icono más su separación—, que en una franja de
   tres columnas es medio dedo de página por nada. */
.rsn-valor-icono {
    flex: none;
    color: var(--rsn-acento-texto);
}

/* --- El encabezado de la franja ------------------------------------------- */

/* Filete marino y no dorado: el dorado encabeza cada pilar, y usarlo también
   aquí pondría cuatro columnas visualmente iguales. En marino, el encabezado
   se lee como lo que es —el enunciado— y los tres pilares como la respuesta. */
.rsn-valores-cabeza {
    padding-top: var(--rsn-esp-4);
    border-top: 2px solid var(--rsn-marino);
}

.rsn-valores-ojo {
    display: block;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin-bottom: var(--rsn-esp-3);
}

.rsn-valores-boton { margin-top: var(--rsn-esp-6); }

.rsn-valores-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 700;
    font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.6rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--rsn-marino);
    margin: 0;
    text-wrap: balance;
}


.rsn-valor-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    line-height: 1.2;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
    display: flex;
    align-items: center;
    gap: var(--rsn-esp-3);
}

.rsn-valor-texto {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    /* Marino rebajado: el texto largo a pleno marino sobre beige pesa
       demasiado y compite con los titulares. */
    color: #3A4258;
    margin: 0;
}


/* ==========================================================================
   PORTADA · EL AGUINALDO DEL AÑO

   La genera inc/aguinaldo.php.

   Casi no hay reglas aquí, y ese es el punto: la sección reutiliza las clases
   de la franja de misión —`.rsn-mision`, `.rsn-mision-alto`, `.rsn-mision-
   figura`, `.rsn-mision-valores`— y `.rsn-aguinaldo` solo marca en qué se
   aparta. La portada abre y cierra con la misma composición a propósito: la
   Congregación hablando en el mismo registro visual, con el colegio contando
   lo suyo en medio.

   Lo que cambia es el contenido de la franja clara. Arriba lleva tres pilares
   en tres columnas; aquí, la frase del Rector Mayor y su firma. Lo que la
   franja hace es lo mismo en los dos sitios: tapar el borde recto con que
   termina el recorte de la figura. Aquí además cae en la costura con la franja
   de contacto que cierra la página, así que el corte quedaría justo donde más
   se vería.
   ========================================================================== */

/* --- La franja de la firma ------------------------------------------------

   La frase a la izquierda y la firma a la derecha, y no la firma debajo. Es
   una franja ancha: una cita de 48 caracteres de medida dejaría dos tercios de
   beige vacío a su derecha, justo donde está el retrato detrás.

   Y con la firma en la última columna, el nombre cae a plomo bajo la cara,
   que es donde uno lo busca.
   ------------------------------------------------------------------------- */

.rsn-aguinaldo-franja .rsn-cita {
    /* La medida de lectura la fija ahora la columna, no la cita. */
    max-width: none;
    margin: 0;
    padding-block: clamp(2rem, 4vw, 3rem);
}

.rsn-aguinaldo-franja .rsn-cita-texto p {
    /* El mismo marino rebajado que el texto de los pilares. A pleno marino,
       un párrafo largo sobre beige pesa demasiado; y en el blanco que hereda
       de la sección oscura, sencillamente no se vería. Un solo color para
       «texto corrido sobre beige» en toda la portada. */
    color: #3A4258;
    font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
}

.rsn-aguinaldo-franja .rsn-cita-fuente { color: #3A4258; }

/* Dos columnas desde 900 px, que es el mismo umbral en que la franja de
   valores despliega las suyas. */
@media (min-width: 900px) {

    .rsn-aguinaldo-franja .rsn-cita {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 4rem);
        align-items: start;
    }

    .rsn-aguinaldo-franja .rsn-cita-firma {
        /* El sangrado que alinea la firma bajo la cita solo tiene sentido
           cuando va debajo. Aquí va al lado. */
        padding-left: 0;
        margin-top: 0;
        /* Filete como el de cada pilar de la franja de arriba: es la misma
           familia de piezas y así se lee. */
        padding-top: var(--rsn-esp-4);
        border-top: 2px solid var(--rsn-acento);
    }
}


/* ==========================================================================
   PORTADA · VÍDEO

   Lo genera inc/video.php. Banda a sangre bajo la franja de misión.
   ========================================================================== */

.rsn-video {
    background: var(--rsn-marino);   /* el marino se ve mientras el vídeo carga */
    line-height: 0;                  /* sin esto el marco deja unos píxeles debajo */
}

/* 16:9, que es la proporción del vídeo, con tope de altura.

   Sin el tope, en un monitor ancho la banda se comería una pantalla entera:
   a 2560 px de ancho, 16:9 son 1440 de alto. `max-height` con el ancho al
   100% recorta por los lados en vez de estirar la imagen, que en un plano
   general de patio no se nota y en cambio deja la página navegable. */
.rsn-video-marco {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 78vh;
    overflow: hidden;
}

/* El marco se agranda por encima de su caja a propósito.

   YouTube mete barras negras cuando la proporción del contenedor no es la del
   vídeo, y con `max-height` recortando, el contenedor deja de ser 16:9. Al
   escalarlo desde el centro con un poco de holgura, lo que sobra se va fuera
   del recorte y la imagen llega a los cuatro bordes sin bandas. */
.rsn-video-marco-int {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 177.78vh;             /* 16/9 del alto de la ventana */
    min-height: 56.25vw;             /* 9/16 del ancho */
    transform: translate(-50%, -50%);
    border: 0;
    display: block;
    pointer-events: none;            /* sin controles: nada que pulsar dentro */
}

/* --- La portada fija, para quien pidió reducir el movimiento -------------- */

.rsn-video-quieto { display: none; }


/* --- La portada del modo «al pulsar» --------------------------------------

   Un botón que ocupa el marco entero, con la imagen dentro y el triángulo
   encima. Es un `<button>` y no una imagen con un manejador de clic: recibe el
   foco, responde a Intro y a la barra espaciadora, y se anuncia como lo que es.
   ------------------------------------------------------------------------- */

.rsn-video-portada {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    background: var(--rsn-marino);
    cursor: pointer;
    line-height: 0;
}

.rsn-video-portada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Un punto de oscurecimiento para que el triángulo y el rótulo se lean
       sobre cualquier fotograma, venga claro o venga oscuro. */
    filter: brightness(0.82);
    transition: filter .4s ease, transform .6s cubic-bezier(.16, .84, .44, 1);
}

.rsn-video-portada:hover img,
.rsn-video-portada:focus-visible img {
    filter: brightness(0.68);
    transform: scale(1.03);
}

.rsn-video-portada:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: -3px;
}

.rsn-video-portada-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(64px, 8vw, 92px);
    height: clamp(64px, 8vw, 92px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--rsn-marino);
    box-shadow: var(--rsn-realce-oscuro-alto);
    transition: background-color .3s ease, transform .3s cubic-bezier(.16, .84, .44, 1);
}

.rsn-video-portada-play svg {
    width: 44%;
    height: 44%;
    /* El triángulo tiene el peso visual a la izquierda: centrado geométrico se
       ve descentrado. Se corre un pelo a la derecha para que parezca centrado,
       que es lo que importa. */
    margin-left: 6%;
}

.rsn-video-portada:hover .rsn-video-portada-play,
.rsn-video-portada:focus-visible .rsn-video-portada-play {
    background: var(--rsn-acento);
    transform: translate(-50%, -50%) scale(1.08);
}

.rsn-video-portada-texto {
    position: absolute;
    left: 50%;
    bottom: clamp(1.25rem, 4vw, 2.5rem);
    transform: translateX(-50%);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--rsn-blanco);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .rsn-video-portada img,
    .rsn-video-portada-play { transition: none; }
    .rsn-video-portada:hover img { transform: none; }
    .rsn-video-portada:hover .rsn-video-portada-play { transform: translate(-50%, -50%); }
}

/* En modo «al pulsar» la regla de movimiento reducido de más abajo no debe
   esconder nada: no hay vídeo arrancando que evitar, solo una imagen quieta
   esperando a que alguien decida. */
.rsn-video--al-pulsar .rsn-video-quieto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    /* Un vídeo que arranca solo es exactamente lo que esa preferencia pide
       evitar. Se sustituye por la portada del vídeo, enlazada a YouTube: quien
       quiera verlo, lo ve cuando decide.

       Ojo al `:not()`: esto vale para el modo automático. En el modo «al
       pulsar» el vídeo lo arrancó la persona a propósito, así que esconderlo
       sería quitarle lo que acaba de pedir — y el botón de pausa ahí hace más
       falta que nunca. */
    .rsn-video:not(.rsn-video--al-pulsar) .rsn-video-marco-int { display: none; }
    .rsn-video:not(.rsn-video--al-pulsar) .rsn-video-pausa     { display: none; }

    .rsn-video:not(.rsn-video--al-pulsar) .rsn-video-quieto {
        display: block;
        position: absolute;
        inset: 0;
        line-height: 0;
    }

    .rsn-video-quieto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .rsn-video-quieto-boton {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--rsn-font-body);
        font-size: var(--rsn-txt-sm);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        line-height: 1;
        color: var(--rsn-marino);
        background: var(--rsn-blanco);
        padding: var(--rsn-esp-4) var(--rsn-esp-8);
        border-radius: var(--rsn-radio-sm);
    }
}

/* --- El botón de pausa ---------------------------------------------------- */

/* Nace oculto y lo muestra js/video.js: si el script no llega, no queda un
   control muerto que no hace nada al pulsarlo. */
.rsn-video-pausa {
    position: absolute;
    right: clamp(1rem, 2vw, 2rem);
    bottom: clamp(1rem, 2vw, 2rem);
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--rsn-tinta-rgb), 0.55);
    backdrop-filter: blur(4px);
    color: var(--rsn-blanco);
    cursor: pointer;
    transition: background-color .15s ease;
}

.rsn-video-pausa[hidden] { display: none; }

.rsn-video-pausa:hover,
.rsn-video-pausa:focus-visible { background: rgba(var(--rsn-tinta-rgb), 0.85); }

/* Dos barras = pausa. Al pausarlo pasa a triángulo, que es reproducir. */
.rsn-video-pausa-icono {
    width: 12px;
    height: 14px;
    background: currentColor;
    clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

.rsn-video--pausado .rsn-video-pausa-icono {
    clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}


/* ==========================================================================
   PORTADA · BIENVENIDA DE LA DIRECCIÓN

   La genera inc/bienvenida.php. Retrato a la izquierda, saludo a la derecha.

   EL RETRATO VA A LA IZQUIERDA A PROPÓSITO

   En la franja de misión la figura está a la derecha. Repetir el mismo lado
   dos secciones más abajo haría que la página se leyera como una plantilla
   rellenada; alternándolos, el ojo baja en zigzag y cada bloque se distingue
   del anterior.
   ========================================================================== */

.rsn-bienvenida {
    background: var(--rsn-fondo-suave);
    /* El mismo aire lo usan el texto (como relleno) y el retrato (como
       desplazamiento desde arriba). Es lo que hace que sus bordes superiores
       coincidan: con dos valores separados se descuadraban a la primera. */
    --rsn-bienvenida-aire: clamp(2rem, 4vw, 3.5rem);
    --rsn-bienvenida-vuelo: 56px;    /* cuánto sube el retrato al entrar */
    /* `clip` y no `hidden`, por lo mismo que en la sección de misión: `hidden`
       crearía un contenedor de desplazamiento y rompería las cronologías de
       scroll de la página. */
    overflow: hidden;
    overflow: clip;
}

.rsn-bienvenida-cuerpo {
    position: relative;              /* ancla la marca de agua de abajo */
    padding-top: clamp(3rem, 6vw, 5.5rem);
}

/* --- Hasta 900 px: marca de agua, no retrato apilado --------------------

   Antes, en pantalla estrecha, la foto se ponía encima del saludo a 320 px de
   ancho. Eso son unos 400 px de alto que hay que pasar con el dedo antes de
   llegar a la primera palabra, y en un móvil esa es la mitad de la pantalla
   gastada en una fotografía que ya se ha visto en la sección de al lado.

   Pasa a marca de agua detrás del texto, que es lo que ya hacen las franjas de
   Don Bosco y del Rector Mayor por debajo de 1080 px. La sección se acorta a la
   altura de lo que tiene que decir, y el retrato sigue ahí: no se pierde ni la
   persona ni la composición.

   ANCLADA ARRIBA, Y CON EL CANTO DISUELTO

   Las dos cosas por lo mismo que allí: la cara está en el tercio alto y un
   encuadre que empiece por abajo la siega; y como el recorte termina en un
   borde recto, la máscara lo desvanece en lugar de dejar una línea horizontal
   a media sección.

   AL 18 %, Y AQUÍ SÍ HAY QUE MEDIRLO

   Estas dos secciones van sobre gris claro, no sobre marino, así que la marca
   de agua oscurece el fondo en vez de aclararlo. Con la zona más oscura del
   retrato —el traje— el texto queda en 10.5 de contraste, muy por encima de lo
   exigido. Por debajo del 18 % la figura deja de reconocerse; por encima del
   25 % empieza a competir con la lectura. */
.rsn-bienvenida-figura {
    position: absolute;
    right: -12%;
    top: 0;
    z-index: 0;
    width: min(66vw, 380px);
    opacity: 0.18;
    line-height: 0;
    margin-inline: 0;
    max-width: none;
    /* Decorativa y por detrás: que no intercepte ni un clic ni una selección
       de texto. */
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
}

/* Sobre la marca de agua, no debajo. */
.rsn-bienvenida-texto {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.rsn-bienvenida-foto {
    width: 100%;
    height: auto;
    display: block;
}

/* La entrada solo donde el retrato es una columna de verdad. De marca de agua
   no entra: subir y aparecer una silueta al 18 % detrás del texto se lee como
   un parpadeo del fondo, no como una figura que llega. */
@media (max-width: 899px) {
    .rsn-bienvenida-figura.esta-fuera .rsn-bienvenida-foto,
    .rsn-bienvenida-figura.esta-dentro .rsn-bienvenida-foto {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

@media (min-width: 900px) {

    /* LA CAJA SE CONSTRUYE SOBRE LA PROPORCIÓN REAL DE LA FOTO

       Antes la figura tenía un ancho fijo (27vw) y la imagen se ajustaba dentro
       con `object-fit: contain`. Eso solo cuadra si la foto tiene exactamente la
       proporción de la caja, y la caja cambiaba de proporción con el ancho de
       ventana: 0,84 a 1900 px y 0,51 a 900. Con cualquier foto real sobraba
       caja por un lado —una banda transparente a la izquierda, o un hueco
       arriba que descuadraba el borde superior respecto al rótulo.

       Ahora es al revés: la altura del retrato se declara aquí y el ancho sale
       de multiplicarla por la proporción de la imagen que el colegio subió, que
       inc/bienvenida.php lee de la biblioteca de medios y escribe en
       `--rsn-retrato-relacion`. La caja mide siempre lo que mide la foto, así
       que no hay nada que ajustar y no sobra ni un píxel.

       Y sirve para cualquier colegio: cada uno sube su retrato con el encuadre
       que tenga y la sección se acomoda sola. */
    .rsn-bienvenida {
        /* 420 y no 520. El retrato ocupaba media pantalla de escritorio y la
           sección pasaba de 640 px de alto por sí sola, con el saludo —sesenta
           palabras— nadando dentro. Bajarlo cien píxeles recorta la sección
           casi una quinta parte sin que el retrato deje de reconocerse.

           El ANCHO no se toca aquí, ni hace falta: sale de multiplicar esta
           altura por la proporción real del archivo, que inc/bienvenida.php lee
           de la biblioteca de medios. La foto encoge sin deformarse, y con
           cualquier retrato que suba cualquier colegio. */
        --rsn-retrato-alto: 420px;
        --rsn-bienvenida-copete: clamp(1rem, 2vw, 1.75rem);   /* aire sobre la cabeza */
        --rsn-retrato-relacion: 0.72;    /* de reserva: lo pisa el valor real */
    }

    .rsn-bienvenida-cuerpo {
        display: flex;
        align-items: stretch;
        /* Centrado, y aquí sí a diferencia de la franja de misión.

           Allí las dos piezas van a ras del contenedor porque entre las dos
           llenan 1166 de los 1464 px. Aquí no: el retrato de la directora es
           una figura estrecha —282 px frente a los 433 de Don Bosco— y pegar
           saludo y foto a sus bordes abría un hueco de 541 px en mitad de la
           sección. Centrada, la fila reparte ese sobrante a los lados, donde
           se lee como margen y no como agujero. */
        justify-content: center;
        gap: clamp(2rem, 4vw, 4.5rem);
        /* Un respiro sobre la cabeza: sin esto el retrato, que es la pieza más
           alta, arranca pegado al canto superior de la sección. */
        padding-top: var(--rsn-bienvenida-copete);
        /* Garantiza que la fila da de sí lo que mide el retrato. Sin esto, un
           saludo corto dejaba la figura colgando por debajo del suelo.

           El relleno entra en la cuenta porque la caja es `border-box`: sin
           sumarlo, el mínimo se quedaba 40 px corto y el retrato se salía de la
           sección justo esos 40 px, que el `overflow: clip` recortaba. */
        min-height: calc(var(--rsn-bienvenida-copete) + var(--rsn-retrato-alto));
    }

    /* EL RETRATO EMPIEZA DONDE EMPIEZA EL TÍTULO

       La imagen va en posición absoluta, y eso no es un adorno: en el flujo, su
       altura natural entraría en el cálculo de la fila y sería ella quien
       decidiera lo alta que es la sección. Sin contenido en flujo, la altura la
       manda el texto —con el mínimo de arriba— y la figura la ocupa. */
    /* A LA DERECHA, COMO DON BOSCO

       El retrato va después del saludo, igual que en la franja de misión: el
       texto entra por la izquierda y la figura cierra por la derecha. Se hace
       con `order` y no cambiando el marcado para no tocar el orden en móvil,
       donde la foto va encima del saludo y así se queda. Es decorativa —`alt`
       vacío—, así que reordenarla visualmente no altera lo que oye nadie. */
    .rsn-bienvenida-texto { order: 1; }
    .rsn-bienvenida-figura { order: 2; }

    /* EL SALUDO DEL PROMOTOR LO INVIERTE

       Dos saludos idénticos, uno detrás de otro y con el retrato del mismo
       lado, se leen como una plantilla rellenada dos veces. Alternando el lado
       el ojo baja en zigzag y cada uno se distingue del otro.

       Se hace con `order` y no cambiando el marcado: así en móvil —donde no hay
       dos columnas— los dos siguen saliendo con la foto encima del texto, que
       es el orden que se lee bien en vertical. La figura es decorativa, con
       `alt` vacío, de modo que invertirla visualmente no altera lo que oye
       nadie. */
    .rsn-bienvenida--izquierda .rsn-bienvenida-figura { order: 1; }
    .rsn-bienvenida--izquierda .rsn-bienvenida-texto  { order: 2; }

    /* El retrato se apoya en el canto contrario al suyo. Sin esto, invertido
       seguiría pegándose a la derecha de su caja y abriría un hueco entre foto
       y texto. */
    .rsn-bienvenida--izquierda .rsn-bienvenida-foto { object-position: bottom left; }

    .rsn-bienvenida-figura {
        flex: 0 0 auto;
        align-self: stretch;
        /* Deshace la marca de agua del caso estrecho: vuelve al flujo, a plena
           opacidad y sin máscara, porque aquí el canto inferior lo esconde el
           propio suelo de la sección. */
        position: relative;
        top: auto;
        right: auto;
        z-index: auto;
        opacity: 1;
        pointer-events: auto;
        -webkit-mask-image: none;
                mask-image: none;
        margin-inline: 0;
        /* El tope del 40 % es solo un seguro: si alguien sube un retrato casi
           cuadrado, el ancho calculado se comería la fila. En ese caso —y solo
           en ese— vuelve a actuar el `object-fit` de abajo. */
        width: min(calc(var(--rsn-retrato-alto) * var(--rsn-retrato-relacion)), 46%);
        max-width: none;
    }

    .rsn-bienvenida-foto {
        position: absolute;
        /* ANCLADO AL SUELO, NO AL RÓTULO

           Antes colgaba del rótulo —`top: aire`— y el alto mínimo de la fila
           se encargaba de que llegara justo al suelo. Eso solo funciona
           mientras el retrato sea más alto que el texto: es lo que obligaba a
           los 520 px.

           Con un retrato de 420 el saludo puede ser la pieza más alta, y
           entonces la foto se quedaría flotando cien píxeles por encima del
           canto, enseñando el corte recto de la cadera que toda esta
           composición existe para esconder. Apoyada en el suelo, ese corte no
           existe nunca, mida lo que mida el saludo. Lo que se pierde es la
           coincidencia del borde superior con el rótulo; a cambio, la sección
           no se rompe con ningún texto. */
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--rsn-retrato-alto);
        object-fit: contain;
        object-position: bottom right;
    }

    /* El saludo arranca arriba, no centrado.

       Centrado se descuadraba: cuando la fila es más alta que el texto —que es
       lo normal, porque quien manda es el retrato—, el sobrante se repartía
       arriba y abajo y el rótulo bajaba unos píxeles respecto a la cabeza de la
       foto. Alineado arriba, los dos empiezan a la misma distancia del canto y
       coinciden siempre, mida lo que mida el saludo. El aire que sobra cae
       debajo del texto, que es donde está la figura y no se lee como hueco. */
    .rsn-bienvenida-texto {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 0 1 auto;
        max-width: 56ch;
        /* AIRE ARRIBA Y ABAJO

           El de abajo estuvo en cero, y con razón mientras el retrato colgaba
           del rótulo: la columna de texto podía pasar a ser la pieza más alta y
           la figura se quedaba flotando 25 px por encima del canto.

           Desde que el retrato se apoya en el suelo, ese riesgo no existe: mida
           lo que mida el saludo, la foto sigue tocando el borde inferior y la
           fila crece por debajo. Así que el aire vuelve, y hace falta — sin él
           el enlace de «Conócenos» quedaba a un pelo de la sección siguiente y
           se leía como si perteneciera a ella. */
        padding-top: var(--rsn-bienvenida-aire);
        padding-bottom: var(--rsn-bienvenida-aire);
    }
}

.rsn-bienvenida-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-6);
}

/* El saludo en serifa y a cuerpo algo mayor que el texto corriente: es una
   persona hablando, no información de servicio. */
.rsn-bienvenida-saludo p {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
    line-height: 1.75;
    color: var(--rsn-texto);
    margin: 0 0 var(--rsn-esp-6);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-bienvenida-saludo p:last-child { margin-bottom: 0; }

/* Misma forma que la firma de la cita de Don Bosco, en la franja de misión:
   son dos voces del mismo sitio y conviene que se firmen igual. */
.rsn-bienvenida-firma {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--rsn-esp-8) 0 0;
    padding-bottom: 0;
}

.rsn-bienvenida-nombre {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
}

.rsn-bienvenida-cargo {
    font-family: var(--rsn-font-body);
    font-size: 0.8125rem;            /* 13px */
    font-style: italic;
    color: var(--rsn-texto-suave);
}

/* --- La frase destacada del saludo ----------------------------------------

   La misma idea que la cita de Don Bosco de la franja del carisma —una voz que
   se separa del cuerpo del texto— pero resuelta con otro filete, porque no es
   la misma voz: allí se cita a un santo del siglo XIX con volumen y página;
   aquí se destaca una frase de quien firma el saludo, que está hablando ahora.

   EL FILETE SE DESVANECE

   La cita de Don Bosco lleva el filete macizo que este tema da a todo
   `blockquote`. Este va en degradado, del acento a nada: arranca con el mismo
   peso y se apaga hacia abajo, así que la frase se lee como algo que sobresale
   del saludo y no como un bloque aparte pegado dentro. Es un recurso barato
   —un pseudoelemento— y no se parece a nada más de la página, que es lo que
   hace que se note sin gritar.

   En serifa CURSIVA, al revés que la de Don Bosco: allí el lema de encima ya
   iba en cursiva y repetirlo habría puesto dos voces diciendo lo mismo. Aquí
   el saludo va en serifa redonda, así que la cursiva es lo que separa.
   ------------------------------------------------------------------------- */

.rsn-bienvenida-frase {
    position: relative;
    margin: var(--rsn-esp-6) 0 0;
    padding-left: var(--rsn-esp-6);
    max-width: 46ch;
}

.rsn-bienvenida-frase::before {
    content: "";
    position: absolute;
    left: 0;
    top: .25em;
    bottom: .35em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(
        to bottom,
        var(--rsn-acento) 0%,
        var(--rsn-acento) 38%,
        rgba(var(--rsn-tinta-rgb), 0) 100%
    );
}

.rsn-bienvenida-frase blockquote {
    /* La regla general de `blockquote` de este tema pone filete y sangrado
       propios. Aquí sobran los dos: el filete lo pone el pseudoelemento de
       arriba y el sangrado, el contenedor. */
    border-left: 0;
    padding-left: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.rsn-bienvenida-frase p {
    font-family: var(--rsn-font-display);
    font-style: italic;
    font-size: clamp(1.125rem, 1rem + .55vw, 1.35rem);
    line-height: 1.55;
    color: var(--rsn-marino);
    margin: 0;
    padding-bottom: 0;               /* el relleno fantasma de Divi */
    text-wrap: pretty;
}

/* Las comillas las pone la hoja y no el texto guardado: así salen siempre las
   angulares —las que corresponden en español— escriba quien escriba en el
   Personalizador. Mismo criterio que la cita de Don Bosco. */
.rsn-bienvenida-frase p::before { content: "\00AB"; }
.rsn-bienvenida-frase p::after  { content: "\00BB"; }


/* Solo la separación: el `align-self` que impide que se estire a todo el ancho
   de la columna lo trae ya la clase compartida `.rsn-enlace-mas`. */
.rsn-bienvenida-boton { margin-top: var(--rsn-esp-6); }


/* --- La entrada del retrato -----------------------------------------------

   Sube desde abajo al asomar la sección, deprisa.

   Va con clase y no con cronología de scroll —lo que usa el parallax de Don
   Bosco— y la diferencia importa: `view()` ata el avance a la posición del
   desplazamiento, así que quien se detiene a media pantalla deja a la figura a
   medio subir. Una entrada tiene que durar lo que dura.

   Quien pone y quita las clases es js/entradas.js. El estado de partida lo
   aplica ese archivo, no esta hoja: si no llega a cargarse, el retrato se ve en
   su sitio en vez de quedarse invisible esperando una clase que nadie va a
   añadir.

   Lo que sobresale por abajo mientras sube lo recorta la sección, así que la
   figura parece emerger del suelo en lugar de deslizarse sobre él.
   ------------------------------------------------------------------------- */

.rsn-bienvenida-figura.esta-fuera .rsn-bienvenida-foto {
    transform: translateY(var(--rsn-bienvenida-vuelo));
    opacity: 0;
}

.rsn-bienvenida-figura.esta-dentro .rsn-bienvenida-foto {
    /* Salida rápida y frenada al final: es una entrada, no un desplazamiento. */
    transition: transform .55s cubic-bezier(.16, .84, .44, 1),
                opacity   .40s ease-out;
    transform: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .rsn-bienvenida-figura.esta-dentro .rsn-bienvenida-foto { transition: none; }
}


/* ==========================================================================
   PORTADA · CONTENIDO LIBRE

   Lo que el colegio escriba en la página «Inicio» desde WordPress. Ver
   front-page.php
   ========================================================================== */

.rsn-portada-libre { padding-block: clamp(2.5rem, 5vw, 4.5rem); }


/* ==========================================================================
   PORTADA · TARJETAS DE NIVEL

   Las genera inc/niveles.php.

   LA FILA TIENE QUE QUEDAR PAREJA CON Y SIN FOTOGRAFÍA

   Es la exigencia que gobierna todo lo de abajo. La lámina superior mide lo
   mismo —proporción 3:2 declarada, no heredada de la imagen— tanto si lleva
   foto como si lleva la plancha de color, así que una fila con dos fotos y una
   plancha se lee como una fila, no como un error a medio arreglar.

   Y los cuerpos de las tarjetas se alinean entre sí: la rejilla estira todas a
   la altura de la más alta y el enlace «Conocer más» se ancla abajo, para que
   los tres queden en la misma línea aunque un texto ocupe dos renglones y
   otro uno.
   ========================================================================== */

.rsn-niveles {
    background: var(--rsn-blanco);
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.rsn-niveles-cabeza {
    max-width: 52ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rsn-niveles-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-niveles-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    line-height: 1.2;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-4);
}

.rsn-niveles-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.65;
    color: var(--rsn-texto-suave);
    margin: 0;
    padding-bottom: 0;
}

/* --- La rejilla ----------------------------------------------------------- */

.rsn-niveles-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .rsn-niveles-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Una tarjeta impar suelta al final se queda centrada en vez de pegada a
       la izquierda con un hueco al lado. Misma regla que en la barra de
       cifras. */
    .rsn-nivel:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; margin-inline: auto; }
}

@media (min-width: 1000px) {
    /* Tantas columnas como tarjetas haya, ni una vacía esperando. */
    .rsn-niveles-rejilla { grid-template-columns: repeat(var(--rsn-niveles-n, 3), minmax(0, 1fr)); }
    .rsn-nivel:last-child:nth-child(odd) { grid-column: auto; max-width: none; margin-inline: 0; }
}

.rsn-nivel { display: flex; }

/* --- La tarjeta ----------------------------------------------------------- */

.rsn-nivel-caja {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--rsn-blanco);
    border-radius: var(--rsn-radio);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--rsn-realce);
}

/* El mismo relieve y el mismo gesto que el plano de la franja de contacto y
   que los botones: un solo lenguaje para todo lo pulsable del sitio. */
.rsn-nivel-caja--enlace {
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

.rsn-nivel-caja--enlace .rsn-nivel-foto,
.rsn-nivel-caja--enlace .rsn-nivel-inicial {
    transition: transform .5s cubic-bezier(.16, .84, .44, 1);
}

.rsn-nivel-caja--enlace:hover,
.rsn-nivel-caja--enlace:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-nivel-caja--enlace:hover .rsn-nivel-foto,
.rsn-nivel-caja--enlace:focus-visible .rsn-nivel-foto,
.rsn-nivel-caja--enlace:hover .rsn-nivel-inicial,
.rsn-nivel-caja--enlace:focus-visible .rsn-nivel-inicial { transform: scale(1.05); }

.rsn-nivel-caja--enlace:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .rsn-nivel-caja--enlace,
    .rsn-nivel-caja--enlace .rsn-nivel-foto,
    .rsn-nivel-caja--enlace .rsn-nivel-inicial { transition: none; }

    .rsn-nivel-caja--enlace:hover,
    .rsn-nivel-caja--enlace:focus-visible { transform: none; }

    .rsn-nivel-caja--enlace:hover .rsn-nivel-foto,
    .rsn-nivel-caja--enlace:focus-visible .rsn-nivel-foto,
    .rsn-nivel-caja--enlace:hover .rsn-nivel-inicial,
    .rsn-nivel-caja--enlace:focus-visible .rsn-nivel-inicial { transform: none; }
}

/* --- La lámina ------------------------------------------------------------ */

/* 3:2 declarado aquí y no heredado de la imagen: es lo que iguala la tarjeta
   con foto y la que aún no la tiene. */
.rsn-nivel-lamina {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--rsn-marino);
    line-height: 0;
}

.rsn-nivel-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La plancha, mientras no haya fotografía. Un degradado de la casa y la
   inicial del nivel muy tenue: distingue una tarjeta de otra sin fingir que
   ahí hay una imagen. */
.rsn-nivel-lamina--sin-foto {
    background: linear-gradient(155deg, var(--rsn-marino) 0%, var(--rsn-azul) 100%);
    display: grid;
    place-items: center;
}

.rsn-nivel-inicial {
    font-family: var(--rsn-font-display);
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.14);
    user-select: none;
}

/* --- El cuerpo ------------------------------------------------------------ */

.rsn-nivel-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;                  /* estira para que el enlace caiga al pie */
    padding: clamp(1.25rem, 2vw, 1.75rem);
}

.rsn-nivel-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    line-height: 1.25;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-nivel-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-6);
    padding-bottom: 0;
}

/* Al pie de la tarjeta, no pegado al texto: es lo que alinea el «Conocer más»
   de las tres aunque una descripción ocupe un renglón más que otra. */
.rsn-nivel-mas {
    margin-top: auto;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-azul);
}

.rsn-nivel-mas::after {
    content: "\2192";               /* la flecha, con su propio aire */
    display: inline-block;
    margin-left: 0.45em;
    transition: transform .25s ease;
}

.rsn-nivel-caja--enlace:hover .rsn-nivel-mas::after,
.rsn-nivel-caja--enlace:focus-visible .rsn-nivel-mas::after {
    transform: translateX(4px);
}


/* ==========================================================================
   PORTADA · ADMISIÓN

   La genera inc/admision.php. Es la única banda oscura de la mitad baja de la
   portada, entre las tarjetas de nivel y las noticias, que son claras.

   No es capricho: en una portada larga, lo que quieres que la gente haga tiene
   que dejar de parecerse a lo que hay alrededor. Un bloque más de fondo claro
   se lee como sección informativa y se pasa de largo.
   ========================================================================== */

.rsn-admision {
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
}

.rsn-admision-cuerpo {
    padding-block: clamp(3rem, 6vw, 5rem);
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
    /* La columna de modalidades algo más ancha: es la que lleva las filas
       pulsables, y una lista apretada al lado de un titular holgado se lee
       como un apéndice. */
    .rsn-admision-cuerpo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: center;
    }
}

.rsn-admision-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-admision-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem);
    line-height: 1.15;
    color: var(--rsn-blanco);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-admision-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    max-width: 46ch;
    margin: 0 0 var(--rsn-esp-8);
    padding-bottom: 0;
}

.rsn-admision-boton { align-self: flex-start; }

/* --- Las modalidades ------------------------------------------------------ */

.rsn-admision-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;                        /* el filete entre filas lo hace el fondo */
}

.rsn-modalidad-caja {
    display: flex;
    align-items: center;
    gap: var(--rsn-esp-4);
    padding: clamp(0.9rem, 1.6vw, 1.25rem) clamp(1rem, 1.8vw, 1.5rem);
    background: rgba(255, 255, 255, 0.05);
    border-left: var(--rsn-filete) solid transparent;
    border-radius: var(--rsn-radio-sm);
    text-decoration: none;
    color: var(--rsn-blanco);
}

/* Filas, no tarjetas: por eso NO se levantan. Una fila que flota se lee mal.
   El aviso es otro —el fondo se enciende, aparece el filete dorado y la flecha
   avanza— y es igual de claro. */
.rsn-modalidad-caja--enlace {
    transition: background-color .25s ease, border-color .25s ease;
}

.rsn-modalidad-caja--enlace:hover,
.rsn-modalidad-caja--enlace:focus-visible {
    background: rgba(255, 255, 255, 0.11);
    border-left-color: var(--rsn-acento);
    /* El color hay que repetirlo: la regla general `a:hover` de más arriba lo
       lleva al azul institucional, que sobre marino es casi invisible. Como
       el título de la fila hereda `currentColor`, sin esto el titular se
       apagaba justo al pasar el ratón por encima. */
    color: var(--rsn-blanco);
}

.rsn-modalidad-caja--enlace:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

.rsn-modalidad-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.rsn-modalidad-titulo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-base);
    font-weight: 700;
    line-height: 1.3;
}

.rsn-modalidad-detalle {
    font-size: var(--rsn-txt-sm);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}

.rsn-modalidad-flecha {
    flex: 0 0 auto;
    font-size: 1.1rem;
    color: var(--rsn-acento-texto);
    transition: transform .25s ease;
}

.rsn-modalidad-caja--enlace:hover .rsn-modalidad-flecha,
.rsn-modalidad-caja--enlace:focus-visible .rsn-modalidad-flecha {
    transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
    .rsn-modalidad-flecha { transition: none; }
    .rsn-modalidad-caja--enlace:hover .rsn-modalidad-flecha,
    .rsn-modalidad-caja--enlace:focus-visible .rsn-modalidad-flecha { transform: none; }
}


/* ==========================================================================
   PORTADA · NOTICIAS

   Las genera inc/noticias.php. Mosaico de cinco —una destacada y cuatro— y un
   teletipo encima con los titulares que no caben.

   EL VELO ES LO QUE HACE QUE ESTO FUNCIONE

   Poner texto blanco encima de una fotografía cualquiera es una apuesta: sale
   bien con las oscuras y se pierde con las claras. En el modelo del que viene
   la idea se lee de milagro. Aquí cada tarjeta lleva un degradado de marino
   que sube desde el borde inferior, denso donde va el texto y transparente
   arriba. La foto sigue viéndose entera y el titular se lee igual sobre un
   patio a mediodía que sobre una misa a contraluz.
   ========================================================================== */

.rsn-noticias {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* --- La cabecera y el teletipo -------------------------------------------- */

.rsn-noticias-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rsn-esp-6) clamp(1.5rem, 3vw, 3rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.rsn-noticias-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-noticias-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    line-height: 1.2;
    color: var(--rsn-marino);
    margin: 0;
}

/* Misma escalera que en las tarjetas de nivel y en la franja de contacto:
   rótulo dorado, título en serifa y una línea de entrada. Las tres franjas se
   presentan igual porque son hermanas; que una tuviera dos piezas y las otras
   tres se notaba aunque no se supiera decir por qué. */
.rsn-noticias-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.65;
    color: var(--rsn-texto-suave);
    margin: var(--rsn-esp-4) 0 0;
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

/* Con la entrada, la columna de rótulos necesita medida propia: sin ella el
   texto corría por debajo del teletipo. */
.rsn-noticias-rotulos { max-width: 52ch; }

.rsn-teletipo {
    display: flex;
    align-items: center;
    gap: var(--rsn-esp-4);
    flex: 1 1 20rem;
    min-width: 0;                    /* deja que el titular se recorte */
    justify-content: flex-end;
}

.rsn-teletipo-rotulo {
    flex: 0 0 auto;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-blanco);
    background: var(--rsn-marino);
    padding: 0.5em 0.9em;
    border-radius: var(--rsn-radio-sm);
}

/* La lista se apila en una sola casilla: todos los titulares ocupan el mismo
   sitio y solo cambia cuál se ve. Así la franja no da un salto de alto cada
   vez que pasa a uno más largo. */
.rsn-teletipo-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.rsn-teletipo-item {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
    /* Una línea: el teletipo es un asomo, no un resumen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rsn-teletipo-item.esta-visible { opacity: 1; visibility: visible; }

.rsn-teletipo-item a {
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto);
    text-decoration: none;
}

.rsn-teletipo-item a:hover,
.rsn-teletipo-item a:focus-visible { color: var(--rsn-azul); }

@media (prefers-reduced-motion: reduce) {
    .rsn-teletipo-item { transition: none; }
}

.rsn-teletipo-mandos { display: flex; gap: 6px; flex: 0 0 auto; }

.rsn-teletipo-boton {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--rsn-marino);
    background: var(--rsn-blanco);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.15);
    border-radius: var(--rsn-radio-sm);
    cursor: pointer;
    box-shadow: var(--rsn-realce);
    transition: background-color .2s ease, color .2s ease, box-shadow .25s ease;
}

.rsn-teletipo-boton:hover,
.rsn-teletipo-boton:focus-visible {
    background: var(--rsn-azul);
    color: var(--rsn-blanco);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-teletipo-boton:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

/* --- El mosaico ----------------------------------------------------------- */

.rsn-noticias-mosaico {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(0.75rem, 1.4vw, 1.1rem);
    grid-template-columns: 1fr;
}

@media (min-width: 620px) {
    .rsn-noticias-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La retícula del modelo: cuatro columnas, la destacada ocupa dos por dos y
   las otras cuatro se reparten la mitad derecha. */
@media (min-width: 1000px) {

    .rsn-noticias-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .rsn-noticia--destacada {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.rsn-noticia { display: flex; }

.rsn-noticia-caja {
    position: relative;
    display: block;
    width: 100%;
    /* 4:3 en las pequeñas. La destacada ocupa dos filas y su alto lo fija la
       rejilla, así que ahí la proporción sobra: se estira a la casilla. */
    aspect-ratio: 4 / 3;
    border-radius: var(--rsn-radio);
    overflow: hidden;
    text-decoration: none;
    background: var(--rsn-marino);
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

@media (min-width: 1000px) {
    .rsn-noticia--destacada .rsn-noticia-caja { aspect-ratio: auto; height: 100%; }
}

.rsn-noticia-lamina { position: absolute; inset: 0; line-height: 0; }

.rsn-noticia-foto,
.rsn-noticia-plancha {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}

/* Sin fotografía, la misma plancha que en las tarjetas de nivel: una noticia
   sin foto sigue siendo noticia y esconderla haría que el colegio publicara
   al vacío sin enterarse. */
.rsn-noticia-plancha {
    background: linear-gradient(155deg, var(--rsn-marino) 0%, var(--rsn-azul) 100%);
}

/* EL VELO. Denso abajo, donde va el texto; transparente arriba, para que la
   fotografía se siga viendo. */
.rsn-noticia-caja::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--rsn-tinta-rgb), 0.94) 0%,
        rgba(var(--rsn-tinta-rgb), 0.80) 26%,
        rgba(var(--rsn-tinta-rgb), 0.30) 58%,
        rgba(var(--rsn-tinta-rgb), 0.02) 100%
    );
    transition: opacity .35s ease;
}

.rsn-noticia-ficha {
    position: relative;
    z-index: 1;                      /* por encima del velo */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--rsn-esp-2);
    padding: clamp(0.9rem, 1.6vw, 1.5rem);
}

.rsn-noticia-categoria {
    font-family: var(--rsn-font-body);
    font-size: 0.6875rem;            /* 11px */
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-acento-oscuro);
    background: rgba(var(--rsn-tinta-rgb), 0.72);
    padding: 0.4em 0.7em;
    border-radius: 3px;
    line-height: 1.2;
}

.rsn-noticia-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
    line-height: 1.28;
    color: var(--rsn-blanco);
    margin: 0;
    /* Tres renglones como mucho: un titular más largo empuja la firma fuera de
       la tarjeta y deja el mosaico descosido. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rsn-noticia--destacada .rsn-noticia-titulo {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
    -webkit-line-clamp: 4;
}

.rsn-noticia-firma {
    margin: 0;
    padding-bottom: 0;
    font-family: var(--rsn-font-body);
    font-size: 0.8125rem;            /* 13px */
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.80);
}

.rsn-noticia-autor {
    color: var(--rsn-acento-texto);
    font-weight: 700;
}

.rsn-noticia-autor::after {
    content: "·";
    margin: 0 0.45em;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}

/* --- El gesto, el mismo de todo el sitio ---------------------------------- */

.rsn-noticia-caja:hover,
.rsn-noticia-caja:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-noticia-caja:hover .rsn-noticia-foto,
.rsn-noticia-caja:focus-visible .rsn-noticia-foto,
.rsn-noticia-caja:hover .rsn-noticia-plancha,
.rsn-noticia-caja:focus-visible .rsn-noticia-plancha { transform: scale(1.06); }

/* El velo se aclara un punto al pasar: deja ver algo más de la fotografía sin
   que el titular pierda contraste. */
.rsn-noticia-caja:hover::after,
.rsn-noticia-caja:focus-visible::after { opacity: 0.88; }

.rsn-noticia-caja:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .rsn-noticia-caja,
    .rsn-noticia-foto,
    .rsn-noticia-plancha { transition: none; }

    .rsn-noticia-caja:hover,
    .rsn-noticia-caja:focus-visible { transform: none; }

    .rsn-noticia-caja:hover .rsn-noticia-foto,
    .rsn-noticia-caja:focus-visible .rsn-noticia-foto,
    .rsn-noticia-caja:hover .rsn-noticia-plancha,
    .rsn-noticia-caja:focus-visible .rsn-noticia-plancha { transform: none; }
}

.rsn-noticias-pie {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    padding-bottom: 0;
    text-align: center;
}


/* ==========================================================================
   LA HOJA — el texto de las páginas internas

   La compone inc/hoja.php a partir de lo que el colegio escribe en el editor.

   EL COLOR, QUE ERA LA PREGUNTA

   El modelo del que se partió estaba todo en gris. Aquí el gris se reparte
   según la función de cada pieza, con la paleta institucional:

     titular, primera mitad ... gris de apoyo   5.95 sobre blanco
     titular, la negrita ...... azul corporativo 6.78   ← lo que hay que leer
     filete ................... celeste          es un elemento gráfico, y es
                                                 el único sitio donde el
                                                 celeste rinde de verdad
     entradilla ............... gris de apoyo   5.95   suena a introducción,
                                                       no a contenido
     frase destacada .......... azul corporativo 6.78   la voz de la casa
     cuerpo ................... tinta          16.41   máxima legibilidad

   La idea: el azul marca lo que el lector debe retener —el nombre propio del
   titular y el sumario—, el gris acompaña, y el cuerpo va en la tinta más
   legible que hay. Nada decorativo.
   ========================================================================== */

.rsn-hoja {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.rsn-hoja-seccion + .rsn-hoja-seccion { margin-top: clamp(3rem, 6vw, 5rem); }


/* --- El titular a dos tonos ----------------------------------------------- */

.rsn-hoja-titulo h2 {
    font-family: var(--rsn-font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
    line-height: 1.2;
    color: var(--rsn-texto-suave);
    margin: 0;
    max-width: 34ch;
}

/* Lo que el editor ponga en negrita. Es toda la convención que hay que
   aprender: se marca en negrita la parte que nombra, y sale en azul. */
.rsn-hoja-titulo h2 :is( strong, b ) {
    font-weight: 700;
    color: var(--rsn-azul);
}

.rsn-hoja-filete {
    display: block;
    width: 48px;
    height: 3px;
    margin: var(--rsn-esp-5) 0 var(--rsn-esp-6);
    background: var(--rsn-acento);
    border-radius: 2px;
}


/* --- La entradilla -------------------------------------------------------- */

.rsn-hoja-entrada p {
    font-family: var(--rsn-font-body);
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-8);
    max-width: 62ch;
}


/* --- El reparto: sumario a la izquierda, cuerpo a la derecha -------------- */

.rsn-hoja-reparto {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.rsn-hoja-cuerpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {

    /* Un tercio para el sumario. Fijo en fracción y no en píxeles: la frase
       destacada tiene que crecer con la página, o en un monitor ancho se queda
       en una columna estrecha con el texto suelto a su lado. */
    .rsn-hoja-reparto--con-sumario { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

    /* Un párrafo por columna. auto-fit y no un número fijo: con dos párrafos
       salen dos columnas, con cuatro salen dos filas de dos, y con uno solo
       ocupa lo que le toca sin dejar un hueco al lado. */
    .rsn-hoja-cuerpo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}


/* --- La frase destacada --------------------------------------------------- */

/* Es un bloque «Cita destacada» del editor. Se le quitan las comillas y la
   raya que trae de serie: aquí no cita a nadie, resume. */
.rsn-hoja-sumario blockquote,
.rsn-hoja-sumario .wp-block-pullquote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.rsn-hoja-sumario p {
    font-family: var(--rsn-font-display);
    font-weight: 700;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
    line-height: 1.3;
    color: var(--rsn-azul);
    margin: 0;
}

.rsn-hoja-sumario cite {
    display: block;
    margin-top: var(--rsn-esp-3);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-style: normal;
    color: var(--rsn-texto-suave);
}


/* --- El cuerpo ------------------------------------------------------------ */

.rsn-hoja-columna p {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto);
    margin: 0 0 var(--rsn-esp-5);
    text-align: justify;
    hyphens: auto;
}

.rsn-hoja-columna p:last-child { margin-bottom: 0; }

.rsn-hoja-columna a {
    color: var(--rsn-azul);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* --- Lo que no encaja en la composición ----------------------------------- */

/* Imágenes, listas, vídeos: pasan tal cual y a todo el ancho. Que una página
   pueda escribir algo que esta hoja no contempla, sin que se rompa, es lo que
   permite dársela al colegio sin instrucciones. */
.rsn-hoja-sueltos {
    margin-top: var(--rsn-esp-8);
}

.rsn-hoja-sueltos > :first-child { margin-top: 0; }
.rsn-hoja-sueltos > :last-child  { margin-bottom: 0; }


@media print {
    .rsn-hoja-reparto--con-sumario,
    .rsn-hoja-cuerpo { display: block; }
    .rsn-hoja-columna p { text-align: left; }
}


/* ==========================================================================
   LA BANDA DE LAS PÁGINAS INTERNAS

   La genera inc/banda.php y se cuela justo detrás de la cabecera.

   EL ALTO NO ES UNA PROPORCIÓN

   La imagen se pide a 1920 x 800, pero la banda no se dibuja con aspect-ratio:
   3.84:1 en un móvil de 375 px daría una tira de 98 px de alto. El alto se fija
   con clamp() y la fotografía recorta POR LOS LADOS —de ahí que el motivo tenga
   que estar centrado—, así que en escritorio se ve panorámica y en el móvil
   sigue siendo una banda con presencia.
   ========================================================================== */

.rsn-banda {
    position: relative;
    display: flex;
    align-items: flex-end;

    /* El tope, 500 px, es el alto de los encabezados hechos a medida del
       colegio (1920 × 500, recursos/fotografia/encabezados): a 1920 px se
       ven enteros. Por debajo manda el 28 % del ancho —382 px a 1366, 287 a
       1024—, así que en portátil la foto se ve completa en vertical y recorta
       un poco por los lados; en móvil, el mínimo de 220 recorta los lados a
       fondo y conviene que lo importante esté en el centro. */
    min-height: clamp(220px, 28vw, 500px);
    background: var(--rsn-marino);
    overflow: hidden;

    /* La sombra marca dónde termina la portada y empieza el contenido. Importa
       más desde que el título se mudó aquí: sin ella, con una fotografía clara
       en el borde inferior, el corte se vuelve blando y la página parece
       empezar en cualquier sitio. Muy contenida a propósito — el resto del
       sitio no flota, y una sombra marcada aquí desentonaría. */
    box-shadow: 0 5px 14px rgba(var(--rsn-tinta-rgb), 0.30);
    z-index: 2;

    /* Los acentos de dentro se leen sobre oscuro, como en el resto de bandas. */
    --rsn-acento:        var(--rsn-acento-oscuro);
    --rsn-acento-texto:  var(--rsn-acento-oscuro);
    --rsn-foco:          var(--rsn-acento-oscuro);
}

/* --- La banda sin fotografía ---------------------------------------------

   Beige y no azul, por dos razones medidas:

   1. El botón destacado de la cabecera es azul #005F99. Con la banda del mismo
      azul, el contraste entre ambos es 1.00 —son el mismo color— y el botón se
      disuelve en cuanto se toca con ella. Sobre beige separa a 5.40.

   2. En blanco al 72 % sobre azul, la miga de pan daba 4.31, por debajo del
      4.5 exigible. Sobre beige, con el gris de apoyo, da 4.78.

   Se descartó el celeste: la miga sobre él queda en 2.32 y el título en 3.20.
   Y el azul susurrado, que pasa de sobra pero se confunde con la cabecera
   blanca hasta hacer que la banda deje de leerse como banda.

   Más baja, además: una franja de 380 px sin nada dentro salvo el título es
   un muro, no una portada. */

.rsn-banda:not(.rsn-banda--con-foto) {
    min-height: clamp(150px, 16vw, 220px);
    background: var(--rsn-fondo-calido);

    /* Los acentos vuelven al azul, como en toda isla cálida: el bloque de
       arriba los había puesto en su valor oscuro, y aquí serían invisibles. */
    --rsn-acento:        var(--rsn-azul);
    --rsn-acento-texto:  var(--rsn-azul);
    --rsn-foco:          var(--rsn-azul);
}

.rsn-banda:not(.rsn-banda--con-foto) .rsn-banda-titulo { color: var(--rsn-texto); }

.rsn-banda:not(.rsn-banda--con-foto) .rsn-banda-migas ol,
.rsn-banda:not(.rsn-banda--con-foto) .rsn-banda-migas a { color: var(--rsn-texto-suave); }

.rsn-banda:not(.rsn-banda--con-foto) .rsn-banda-migas li + li::before { color: var(--rsn-borde); }

.rsn-banda:not(.rsn-banda--con-foto) .rsn-banda-migas a:hover,
.rsn-banda:not(.rsn-banda--con-foto) .rsn-banda-migas [aria-current="page"] { color: var(--rsn-texto); }

.rsn-banda-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Centrada en vertical.

       Con los encabezados a medida (1920 × 500) a 1920 px no hay recorte; en
       anchos menores la banda es proporcionalmente más alta que la foto y
       recorta por los lados, centrada. Anclarla arriba, como estuvo, hacía
       que otras fotos parecieran cortadas por abajo; centrada, lo que se
       pierde es simétrico y la foto se lee como una foto.

       La consecuencia para quien sube las fotos: lo que tiene que verse —las
       caras— va en el centro de la imagen, no pegado a un borde. */
    object-position: center center;
}

/* El velo. Denso abajo, donde va el texto, y casi transparente arriba, para
   que la fotografía se vea. Sin él, el blanco del título depende de lo clara
   que sea la foto, que es justo lo que no se puede controlar. */
.rsn-banda-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--rsn-tinta-rgb), 0.20)  0%,
        rgba(var(--rsn-tinta-rgb), 0.55) 55%,
        rgba(var(--rsn-tinta-rgb), 0.88) 100%
    );
}

.rsn-banda-cuerpo {
    position: relative;
    z-index: 2;
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
}


/* --- La miga de pan ------------------------------------------------------- */

.rsn-banda-migas ol {
    list-style: none;
    margin: 0 0 var(--rsn-esp-3);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--rsn-esp-2);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.80);
}

/* El separador va en ::before del hermano y no como texto en el HTML: así no
   lo lee un lector de pantalla, que ya anuncia la lista como ruta. */
.rsn-banda-migas li + li::before {
    content: "/";
    margin-right: var(--rsn-esp-2);
    color: rgba(255, 255, 255, 0.60);
}

.rsn-banda-migas a {
    color: rgba(255, 255, 255, 0.80);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.rsn-banda-migas a:hover {
    color: var(--rsn-blanco);
    border-bottom-color: var(--rsn-acento);
}

.rsn-banda-migas a:focus-visible {
    outline: 2px solid var(--rsn-foco);
    outline-offset: 3px;
    border-radius: 2px;
}

.rsn-banda-migas [aria-current="page"] { color: var(--rsn-blanco); }

@media (prefers-reduced-motion: reduce) {
    .rsn-banda-migas a { transition: none; }
}


/* --- El título ------------------------------------------------------------ */

.rsn-banda-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
    line-height: 1.12;
    color: var(--rsn-blanco);
    margin: 0;
    max-width: 22ch;

    /* La sombra es la red de seguridad: el velo cubre el caso normal, pero una
       fotografía muy clara en la zona baja lo atraviesa. */
    text-shadow: 0 1px 3px rgba(var(--rsn-tinta-rgb), 0.55);
}

.rsn-banda:not(.rsn-banda--con-foto) .rsn-banda-titulo { text-shadow: none; }


/* --- La página que sigue -------------------------------------------------- */

/* El listado de noticias y la página de perfiles ya no abren con su título: lo
   puso la banda. Lo que queda de su cabecera —la entradilla, si la hay— no
   necesita el aire que separaba del titular que ya no está. */
.rsn-archivo-cabeza--tras-banda { margin-top: 0; }

@media print {
    .rsn-banda-foto,
    .rsn-banda-velo { display: none; }

    .rsn-banda {
        min-height: 0;
        background: none;
        color: inherit;
    }

    .rsn-banda-titulo { color: var(--rsn-texto); text-shadow: none; }
}


/* ==========================================================================
   PERFILES SALESIANOS

   Los pinta inc/perfiles.php desde la plantilla page-perfiles.php.

   ES UNA PÁGINA DE CONSULTA, NO DE LECTURA SEGUIDA

   Cuatro perfiles, dieciocho dimensiones y más de cien descriptores. Nadie la
   lee entera: se busca la parte que interesa. De ahí las tarjetas de atajo
   arriba, el «volver» al final de cada perfil, y sobre todo que cada dimensión
   llegue plegada — título, resumen de una línea y cuántos descriptores hay
   dentro—. Lo que se ve es un índice de dieciocho renglones; el texto aparece
   cuando alguien lo pide.

   UNA FICHA POR FILA

   Antes iban en dos columnas y sobraba siempre una, porque los perfiles tienen
   cuatro o cinco dimensiones y cinco no se reparte en filas de dos. Plegadas
   ocupan una franja baja, así que caben en una sola columna sin alargar la
   página — y una columna no deja huérfanas nunca.
   ========================================================================== */

.rsn-perfiles { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }

/* La entrada.

   Composición de la hoja (la misma de inc/hoja.php): filete dorado, el primer
   párrafo como entradilla grande a todo lo ancho, y debajo un reparto de un
   tercio / dos tercios: la frase destacada —el ideal de Don Bosco— a la
   izquierda y el resto del texto a la derecha. Debajo de 900 px todo va en
   una columna, en ese mismo orden.

   Antes eran dos columnas iguales de texto justificado, que llenaban el ancho
   pero no daban jerarquía: los dos párrafos pesaban lo mismo. (12 set. 2026) */
.rsn-perfiles-cabeza {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rsn-perfiles-decir {
    max-width: 122ch;
    margin-inline: auto;
}

.rsn-perfiles-filete {
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 0 var(--rsn-esp-6);
    background: var(--rsn-acento);
    border-radius: 2px;
}

.rsn-perfiles-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-perfiles-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
    line-height: 1.12;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-8);
}

/* La entradilla: más cuerpo, en marino, sin justificar. Doble clase para
   ganar a la regla base de .rsn-perfiles-entrada, que viene después. */
.rsn-perfiles-entrada.rsn-perfiles-entrada--lead {
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    line-height: 1.55;
    color: var(--rsn-marino);
    text-align: left;
    hyphens: none;
    max-width: 68ch;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.rsn-perfiles-entrada--lead em {
    font-style: italic;
    color: var(--rsn-azul);
}

.rsn-perfiles-reparto {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

@media (min-width: 900px) {
    .rsn-perfiles-reparto { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* La frase destacada: filete dorado a la izquierda, en azul, sin comillas */
.rsn-perfiles-sumario {
    margin: 0;
    padding: var(--rsn-esp-2) 0 var(--rsn-esp-2) var(--rsn-esp-6);
    border: 0;
    border-left: 4px solid var(--rsn-acento);
    background: none;
    text-align: left;
}

.rsn-perfiles-sumario p {
    font-family: var(--rsn-font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--rsn-azul);
    margin: 0;
    text-wrap: balance;
}

.rsn-perfiles-sumario cite {
    display: block;
    margin-top: var(--rsn-esp-3);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
}

.rsn-perfiles-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto-suave);
    text-align: justify;
    hyphens: auto;
    margin: 0 0 var(--rsn-esp-6);
    padding-bottom: 0;
}

.rsn-perfiles-entrada:last-child { margin-bottom: 0; }

/* La nota que avisa de los perfiles todavía en elaboración. No es del
   documento: la ponemos nosotros, y por eso se ve distinta del texto oficial. */
.rsn-perfiles-nota {
    margin: var(--rsn-esp-6) 0 0;
    padding: var(--rsn-esp-3) 0 0;
    border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.10);
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    font-style: italic;
    color: var(--rsn-texto-suave);
}

/* --- Los atajos ----------------------------------------------------------- */

.rsn-perfiles-indice {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rsn-esp-4);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 620px) {
    .rsn-perfiles-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .rsn-perfiles-indice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La tarjeta.

   Es una ficha en vertical: la fotografía arriba y debajo el icono, el nombre
   y el número de dimensiones. El relleno vive en el cuerpo y no en el enlace,
   para que la imagen llegue hasta el borde; `overflow: hidden` es lo que hace
   que respete el redondeo de la esquina.

   Sin fotografía la tarjeta es solo el cuerpo y queda igual que antes: la obra
   que no tenga fotos publica la página sin ellas. */
.rsn-perfil-atajo {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--rsn-blanco);
    border-radius: var(--rsn-radio);
    text-decoration: none;
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

.rsn-perfil-atajo-figura {
    display: block;
    overflow: hidden;
}

.rsn-perfil-atajo-foto {
    display: block;
    width: 100%;
    /* `height: auto` es obligatorio: WordPress escribe el alto real en el
       atributo del <img>, y sin esto ganaría al aspect-ratio. */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}

.rsn-perfil-atajo:hover .rsn-perfil-atajo-foto,
.rsn-perfil-atajo:focus-visible .rsn-perfil-atajo-foto {
    transform: scale(1.05);
}

.rsn-perfil-atajo-cuerpo {
    display: flex;
    align-items: center;
    gap: var(--rsn-esp-4);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.rsn-perfil-atajo:hover,
.rsn-perfil-atajo:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-perfil-atajo:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .rsn-perfil-atajo,
    .rsn-perfil-atajo-foto { transition: none; }
    .rsn-perfil-atajo:hover,
    .rsn-perfil-atajo:focus-visible { transform: none; }
    .rsn-perfil-atajo:hover .rsn-perfil-atajo-foto,
    .rsn-perfil-atajo:focus-visible .rsn-perfil-atajo-foto { transform: none; }
}

.rsn-perfil-icono {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
}

.rsn-perfil-icono svg { width: 24px; height: 24px; }

.rsn-perfil-icono--grande {
    width: 58px;
    height: 58px;
    background: var(--rsn-acento);
    color: var(--rsn-marino);
}

.rsn-perfil-icono--grande svg { width: 30px; height: 30px; }

.rsn-perfil-atajo-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rsn-perfil-atajo-nombre {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    line-height: 1.2;
    color: var(--rsn-marino);
}

.rsn-perfil-atajo-dato {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rsn-texto-suave);
}

/* El perfil que todavía no es oficial se avisa ya en el atajo, para que nadie
   entre creyendo que va a leer el documento de la Congregación. */
.rsn-perfil-atajo-marca {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    background: rgba(var(--rsn-acento-rgb), 0.18);
    color: var(--rsn-acento-texto);
    font-size: 0.85em;
    letter-spacing: 0.06em;
}

/* --- Cada perfil ---------------------------------------------------------- */

.rsn-perfil {
    padding-top: clamp(2rem, 4vw, 3rem);
    /* El desplazamiento del ancla no puede dejar el título debajo de la
       cabecera fija de Divi. */
    scroll-margin-top: 140px;
}

.rsn-perfil + .rsn-perfil { border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.10); }

.rsn-perfil-cabeza {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rsn-esp-4);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* El «abrir todas» lo crea js/perfiles.js y no existe en el marcado: sin
   JavaScript no habría nada que pudiera hacer, y un botón que no hace nada es
   peor que la ausencia del botón. */
.rsn-perfil-abrir {
    margin-left: auto;
    padding: 0.55em 1.15em;
    background: transparent;
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.18);
    border-radius: 999px;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rsn-azul);
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.rsn-perfil-abrir:hover {
    background: var(--rsn-marino);
    border-color: var(--rsn-marino);
    color: var(--rsn-blanco);
}

.rsn-perfil-abrir:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

/* El aviso de texto provisional.

   Va en dorado suave y no en rojo: no es un error, es una advertencia de
   procedencia. Pero va, y va arriba del todo del perfil, porque publicar
   texto nuestro bajo un título oficial sin decirlo sería hacerle decir a la
   Congregación algo que no ha dicho. */
.rsn-perfil-aviso {
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
    padding: clamp(0.85rem, 1.6vw, 1.1rem) clamp(1rem, 2vw, 1.35rem);
    background: rgba(var(--rsn-acento-rgb), 0.10);
    border-left: var(--rsn-filete) solid var(--rsn-acento);
    border-radius: 0 var(--rsn-radio) var(--rsn-radio) 0;
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: var(--rsn-texto);
}

.rsn-perfil-aviso strong { color: var(--rsn-marino); }

.rsn-perfil-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
    line-height: 1.15;
    color: var(--rsn-marino);
    margin: 0;
}

/* --- Las fichas de dimensión ---------------------------------------------- */

.rsn-perfil-dimensiones {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rsn-esp-3);
}

.rsn-dimension {
    /* Las tres medidas de la ficha en un sitio: la cabecera y el cuerpo tienen
       que compartirlas para que el texto desplegado caiga alineado con el
       título y no con el emblema. */
    --ficha-aire:    clamp(0.9rem, 1.8vw, 1.25rem);
    --ficha-emblema: clamp(54px, 8vw, 72px);
    --ficha-hueco:   clamp(0.9rem, 2vw, 1.4rem);

    background: var(--rsn-blanco);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.09);
    border-left: var(--rsn-filete) solid var(--rsn-acento);
    border-radius: 0 var(--rsn-radio) var(--rsn-radio) 0;
    transition: box-shadow .3s ease;
}

.rsn-dimension:hover,
.rsn-dimension[open] { box-shadow: var(--rsn-realce); }

/* La cabecera pulsable.

   `<summary>` solo admite contenido de frase y un encabezado, así que aquí
   dentro no hay ni un `<div>`: el título es el `<h3>` y lo demás son `<span>`.
   Por eso la maqueta es una rejilla con áreas y no cajas anidadas. */
.rsn-dimension-resorte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "emblema titulo  pestana"
        "resumen resumen resumen";
    align-items: center;
    column-gap: var(--ficha-hueco);
    row-gap: 0.55rem;
    padding: var(--ficha-aire);
    cursor: pointer;

    /* Fuera el triángulo del navegador: la flecha de la derecha ya dice lo
       mismo, y mejor. Hacen falta las dos declaraciones —`list-style` para los
       navegadores modernos, el pseudoelemento para Safari. */
    list-style: none;
}

.rsn-dimension-resorte::-webkit-details-marker { display: none; }
.rsn-dimension-resorte::marker { content: ""; }

.rsn-dimension-resorte:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: -3px;
}

@media (min-width: 760px) {
    .rsn-dimension-resorte {
        grid-template-areas:
            "emblema titulo  pestana"
            "emblema resumen pestana";
        row-gap: 4px;
    }
}

/* El emblema.

   Aquí iría la fotografía si algún día se pone una por dimensión. De momento
   es una placa con el icono de la familia de dimensión y su número de orden:
   dieciocho fotografías distintas —una por dimensión y por perfil— no las
   tiene el colegio, y repetir la misma cinco veces se lee como un fallo. */
.rsn-dimension-emblema {
    grid-area: emblema;
    position: relative;
    width: var(--ficha-emblema);
    aspect-ratio: 1;
    border-radius: calc(var(--rsn-radio) * 0.8);
    background: linear-gradient(145deg, var(--rsn-marino), var(--rsn-azul));
    color: var(--rsn-blanco);
    display: grid;
    place-items: center;
}

.rsn-dimension-emblema svg { width: 46%; height: 46%; }

.rsn-dimension-orden {
    position: absolute;
    right: 0.45em;
    bottom: 0.25em;
    font-family: var(--rsn-font-display);
    font-size: 0.72rem;
    line-height: 1;
    color: var(--rsn-acento-texto);
}

.rsn-dimension-titulo {
    grid-area: titulo;
    font-family: var(--rsn-font-display);
    font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
    line-height: 1.2;
    color: var(--rsn-marino);
    margin: 0;
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

/* El resumen no está en el documento de la Congregación: lo escribimos
   nosotros y vive en inc/perfiles.php, no en perfiles-datos.php. Es una señal
   para decidir si abrir la ficha, no doctrina. */
.rsn-dimension-resumen {
    grid-area: resumen;
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: var(--rsn-texto-suave);
}

.rsn-dimension-pestana {
    grid-area: pestana;
    display: flex;
    align-items: center;
    gap: 0.7em;
}

.rsn-dimension-cuenta {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rsn-texto-suave);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .rsn-dimension-cuenta { display: none; }
}

.rsn-dimension-flecha {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rsn-fondo-suave);
    color: var(--rsn-azul);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.rsn-dimension-flecha svg { width: 18px; height: 18px; }

.rsn-dimension[open] .rsn-dimension-flecha { transform: rotate(180deg); }

.rsn-dimension-resorte:hover .rsn-dimension-flecha {
    /* Misma razón que la etiqueta del evento: sobre el celeste, la tinta. */
    background: var(--rsn-acento);
    color: var(--rsn-texto);
}

@media (prefers-reduced-motion: reduce) {
    .rsn-dimension,
    .rsn-dimension-flecha { transition: none; }
}

/* El detalle.

   Sangrado a la izquierda hasta la vertical del título, para que al abrirse el
   texto continúe la columna que ya venía leyéndose en vez de empezar otra. En
   pantalla estrecha esa sangría se come el ancho útil, así que desaparece. */
.rsn-dimension-cuerpo {
    padding: clamp(1rem, 2vw, 1.35rem) var(--ficha-aire) clamp(1.15rem, 2.2vw, 1.6rem);
    border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
}


@media (min-width: 760px) {
    .rsn-dimension-cuerpo {
        padding-left: calc(var(--ficha-aire) + var(--ficha-emblema) + var(--ficha-hueco));
    }
}

.rsn-dimension-grupo {
    font-family: var(--rsn-font-display);
    font-size: var(--rsn-txt-base);
    line-height: 1.3;
    color: var(--rsn-marino);
    margin: var(--rsn-esp-6) 0 var(--rsn-esp-3);
}

.rsn-dimension-grupo:first-of-type { margin-top: 0; }

/* Los descriptores tienen tope de ancho aunque la ficha lo tenga de 1.400 px:
   a pantalla completa, sin este tope, las líneas pasaban de 130 caracteres y
   el ojo pierde el renglón al volver a la izquierda. */
.rsn-perfil-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 82ch;
    display: grid;
    gap: var(--rsn-esp-3);
}

/* El punto va con `::before` y no con la viñeta del navegador: así se le puede
   dar el dorado de la casa y alinearlo con la primera línea del descriptor,
   que suele tener tres o cuatro renglones. */
.rsn-perfil-lista li {
    position: relative;
    padding-left: 1.35em;
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: var(--rsn-texto);
}

.rsn-perfil-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rsn-acento);
}

.rsn-perfil-volver {
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
    padding-bottom: 0;
}

.rsn-perfil-volver a {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-azul);
    text-decoration: none;
}

.rsn-perfil-volver a::before {
    content: "\2191";
    margin-right: 0.45em;
}

/* --- En papel --------------------------------------------------------------

   Los perfiles se imprimen: se reparten en reuniones de tutores y de padres.
   Lo que en pantalla sirve para navegar —atajos, botones, flechas— en papel
   solo ocupa sitio. Abrir las fichas cerradas no se puede hacer desde aquí; de
   eso se encarga js/perfiles.js antes de imprimir.
   -------------------------------------------------------------------------- */

@media print {

    .rsn-perfiles-indice,
    .rsn-perfil-volver,
    .rsn-perfil-abrir,
    .rsn-dimension-pestana { display: none; }

    .rsn-dimension {
        box-shadow: none;
        break-inside: avoid;
    }

    .rsn-dimension-cuerpo { padding-left: var(--ficha-aire); }

    .rsn-perfil { break-before: page; }
    .rsn-perfil:first-of-type { break-before: auto; }
}


/* ==========================================================================
   LOS RECONOCIMIENTOS

   La pinta inc/reconocimientos.php, en la página de Admisión o con el atajo
   [rsn_reconocimientos].

   REJILLA DE FLEXBOX, NO DE GRID

   Aquí sí, y va contra la costumbre del resto de la hoja. En una rejilla de
   grid, un grupo de cinco en filas de tres deja dos tarjetas alineadas a la
   izquierda y un hueco a la derecha que se lee como un error de maquetación.
   Con flexbox y `justify-content: center`, la última fila incompleta se centra
   sola, sea cual sea el número — y el número cambia en cada obra de la red.

   EL DIPLOMA VA ENTERO, NO RECORTADO

   `object-fit: contain` sobre una lámina con fondo. Los diplomas vienen en
   proporciones distintas y con márgenes blancos que forman parte del
   documento; recortarlos a un cuadrado corta sellos y firmas, que es
   justamente lo que da fe.
   ========================================================================== */

.rsn-reconocimientos {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    background: var(--rsn-fondo-suave);
}

.rsn-reconocimientos-cabeza {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rsn-reconocimientos-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-reconocimientos-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
    line-height: 1.15;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-reconocimientos-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto-suave);
    margin: 0;
    padding-bottom: 0;
}

.rsn-reconocimientos-grupo + .rsn-reconocimientos-grupo {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* El rótulo del grupo: un filete dorado y el nombre. Es una separación, no un
   titular — no compite con el título de la sección. */
.rsn-reconocimientos-rotulo {
    display: flex;
    align-items: center;
    gap: var(--rsn-esp-4);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-azul);
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
    padding-bottom: 0;
}

.rsn-reconocimientos-rotulo::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(var(--rsn-tinta-rgb), 0.14);
}

.rsn-reconocimientos-rejilla {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsn-reconocimiento {
    flex: 1 1 250px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--rsn-blanco);
    border-radius: var(--rsn-radio);
    overflow: hidden;
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

.rsn-reconocimiento:hover,
.rsn-reconocimiento:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--rsn-realce-alto);
}

@media (prefers-reduced-motion: reduce) {
    .rsn-reconocimiento { transition: none; }
    .rsn-reconocimiento:hover,
    .rsn-reconocimiento:focus-within { transform: none; }
}

.rsn-reconocimiento-marco {
    position: relative;
    margin: 0;
    padding: clamp(0.75rem, 1.5vw, 1rem);
    background: #FFFFFF;
    border-bottom: var(--rsn-filete) solid var(--rsn-acento);
}

.rsn-reconocimiento-lamina {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: contain;
    cursor: zoom-in;
}

.rsn-reconocimiento-lamina:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

/* La lupa aparece al acercarse: dice que el papel se puede leer entero sin
   ocupar sitio mientras nadie lo pide. */
.rsn-reconocimiento-lupa {
    position: absolute;
    right: clamp(0.75rem, 1.5vw, 1rem);
    bottom: clamp(0.75rem, 1.5vw, 1rem);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}

.rsn-reconocimiento-lupa svg { width: 17px; height: 17px; }

.rsn-reconocimiento:hover .rsn-reconocimiento-lupa,
.rsn-reconocimiento:focus-within .rsn-reconocimiento-lupa {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .rsn-reconocimiento-lupa { transition: none; }
}

.rsn-reconocimiento-decir {
    flex: 1 1 auto;
    padding: clamp(0.9rem, 1.8vw, 1.2rem);
}

.rsn-reconocimiento-institucion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rsn-esp-3);
    font-family: var(--rsn-font-display);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
    line-height: 1.25;
    color: var(--rsn-marino);
    margin: 0;
    padding-bottom: 0;
}

/* El año, en dorado y sin poder encogerse: es la mitad del argumento de la
   sección, no un detalle que se pueda partir en dos líneas. */
.rsn-reconocimiento-anio {
    flex: 0 0 auto;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--rsn-acento-texto);
    white-space: nowrap;
}

.rsn-reconocimiento-motivo {
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
    margin: var(--rsn-esp-3) 0 0;
    padding-bottom: 0;
}

/* El «ver todos», solo en la portada.

   Enlace de texto y no botón: el botón de esta zona de la portada es «Agenda
   una visita», en la banda de admisión que viene justo debajo. Dos botones
   seguidos compiten, y el que tiene que ganar no es este. */
.rsn-reconocimientos-pie {
    margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
    padding-bottom: 0;
    text-align: center;
}

@media print {
    .rsn-reconocimiento { box-shadow: none; border: 1px solid #CCC; break-inside: avoid; }
    .rsn-reconocimiento-lupa { display: none; }
    .rsn-reconocimientos-pie { display: none; }
}


/* ==========================================================================
   LA PÁGINA DE ADMISIÓN

   La pinta inc/admision-pagina.php desde page-admision.php.

   EL RITMO DE FONDOS

   Nueve secciones seguidas necesitan alternancia o se leen como una sola masa.
   El orden es: fotografía oscura, blanco (cifras), gris (pilares), marino
   (vídeo), blanco (misión), gris (reconocimientos), blanco (ruta), dorado
   claro (evento), marino (cierre). Nunca hay dos iguales pegadas — y por eso
   los reconocimientos van ANTES de la ruta y no después, y por eso la banda de
   evento es dorada y no marino: si fuera marino chocaría con el cierre.

   EL EVENTO NO ES UNA LLAMADA A LA ACCIÓN

   Es un anuncio. Por eso va en dorado claro y no en marino: el marino de esta
   página está reservado para el cierre, que es donde se pide algo.
   ========================================================================== */

/* --- Piezas comunes a varias secciones ------------------------------------ */

.rsn-adm-cabeza {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rsn-adm-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-adm-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
    line-height: 1.15;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-adm-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto-suave);
    margin: 0;
    padding-bottom: 0;
}

/* Dos variantes de botón que no existían: el macizo blanco para el cierre
   sobre marino, y el verde de WhatsApp. El resto reutiliza los del sistema. */
.rsn-boton--blanco {
    --rsn-boton-sombra:      var(--rsn-realce-oscuro);
    --rsn-boton-sombra-alta: var(--rsn-realce-oscuro-alto);

    background: var(--rsn-blanco);
    border-color: var(--rsn-blanco);
    color: var(--rsn-marino);
}

.rsn-boton--blanco:hover,
.rsn-boton--blanco:focus-visible {
    background: var(--rsn-acento);
    border-color: var(--rsn-acento);
    color: var(--rsn-marino);
}

.rsn-boton--whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    background: #128C4B;
    border-color: #128C4B;
    color: var(--rsn-blanco);
}

.rsn-boton--whatsapp:hover,
.rsn-boton--whatsapp:focus-visible {
    background: #0E6F3B;
    border-color: #0E6F3B;
    color: var(--rsn-blanco);
}

.rsn-adm-whatsapp-icono svg { width: 18px; height: 18px; display: block; }


/* --- 1 · La portada ------------------------------------------------------- */

.rsn-adm-portada {
    position: relative;
    background: var(--rsn-marino);
    overflow: hidden;
}

.rsn-adm-portada-fondo {
    position: absolute;
    inset: 0;
}

.rsn-adm-portada-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* El velo.

   Sin él, el texto blanco cae sobre una fotografía a pleno sol y deja de
   leerse en cuanto el recorte cambia. Es un degradado y no un color plano
   para que la fotografía siga viéndose donde no hay texto: más denso a la
   izquierda, donde está la ficha, y casi transparente a la derecha. */
.rsn-adm-portada-fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(var(--rsn-tinta-rgb), 0.92) 0%, rgba(var(--rsn-tinta-rgb), 0.72) 45%, rgba(var(--rsn-tinta-rgb), 0.55) 100%),
        linear-gradient(180deg, rgba(var(--rsn-tinta-rgb), 0.35) 0%, rgba(var(--rsn-tinta-rgb), 0) 40%);
}

.rsn-adm-portada-filete {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rsn-filete);
    background: var(--rsn-acento);
    z-index: 2;
}

.rsn-adm-portada-cuerpo {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 960px) {
    .rsn-adm-portada-cuerpo {
        grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    }
}

.rsn-adm-portada-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;
}

/* EL TITULAR, Y POR QUÉ NO ES LA LETRA DEL LANDING

   El landing publicado usa Playfair Display; este sitio usa Merriweather en
   todos sus titulares, en todas sus páginas. Cambiar solo este h1 dejaría la
   página de Admisión pareciendo pegada de otro sitio — que es exactamente lo
   que veníamos a evitar—, y cambiar Merriweather por Playfair en todo el sitio
   no es un ajuste de página: es una decisión de marca que pasa por el Manual de
   Identidad.

   Lo que sí se puede copiar es lo que hace que el titular del landing funcione,
   que no es la tipografía sino el contraste: peso máximo en la redonda, cursiva
   LIGERA en el destaque, interlínea muy cerrada y un cuerpo grande. Merriweather
   trae los pesos 900 y 400 cursiva, así que ese contraste se reproduce entero.
   El resultado se parece mucho y no rompe nada. */
.rsn-adm-portada-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(2.1rem, 1.35rem + 3vw, 4rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--rsn-blanco);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-adm-portada-titulo em {
    display: block;
    font-style: italic;
    font-weight: 400;
    color: var(--rsn-acento-texto);
}

.rsn-adm-portada-bajada {
    max-width: 52ch;
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
    margin: 0 0 var(--rsn-esp-8);
    padding-bottom: 0;
}

.rsn-adm-portada-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsn-esp-4);
}


/* --- 2 · La ficha del formulario ------------------------------------------ */

.rsn-adm-ficha {
    position: relative;
    background: var(--rsn-blanco);
    border-radius: var(--rsn-radio);
    padding: clamp(1.25rem, 2.4vw, 1.85rem);
    box-shadow: var(--rsn-realce-oscuro-alto);
    /* El ancla del cierre baja hasta aquí; que no quede bajo la cabecera fija
       de Divi. */
    scroll-margin-top: 140px;
}

/* EL DESTELLO QUE SEÑALA LA FICHA

   Lo dispara js/admision.js cuando se pulsa un botón que apunta aquí. Va en un
   `::after` y no en el `box-shadow` de la caja porque la caja ya tiene sombra
   propia: animarla haría parpadear el relieve en vez de dibujar un anillo.

   Ni el borde ni el relleno cambian, así que nada se mueve de sitio: un
   elemento que crece para llamar la atención empuja lo que tiene debajo, y eso
   se lee como un fallo, no como una indicación.

   Dura 1,6 s y no uno: un segundo justo sale demasiado rápido y se percibe
   como un parpadeo raro más que como «mira aquí». */
.rsn-adm-ficha::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 3px solid var(--rsn-acento);
    opacity: 0;
    pointer-events: none;
}

.rsn-adm-ficha.esta-senalada::after {
    animation: rsn-adm-senal 1.6s cubic-bezier(.16, .84, .44, 1) forwards;
}

@keyframes rsn-adm-senal {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    62%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Tres latidos, solo para quien llega desde otra página.

   Más cortos que el latido único —0,75 s cada uno frente a 1,6— porque tres
   veces el mismo compás lento se hace largo y acaba pareciendo una alarma. El
   total ronda los dos segundos y cuarto: suficiente para que el ojo lo cace
   mientras termina de situarse en una página que no conocía. */
.rsn-adm-ficha.esta-senalada--triple::after {
    animation-name: rsn-adm-senal-latido;
    animation-duration: .75s;
    animation-iteration-count: 3;
    animation-timing-function: ease-in-out;
}

@keyframes rsn-adm-senal-latido {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Quien pide menos movimiento recibe el mismo aviso, sin pulso: el anillo
   aparece y se va de una vez. La información no se le quita, solo el vaivén. */
@media (prefers-reduced-motion: reduce) {

    /* AQUÍ NO SE ANIMA NADA, Y NO ES POR ELEGANCIA

       Este archivo tiene arriba una regla que aplasta toda animación a 0,01 ms
       con `!important` cuando el sistema pide menos movimiento. Es correcta —
       Divi anima bastante—, pero se llevaba por delante también el anillo: quien
       activa esa preferencia se quedaba sin ninguna señal, ni fija ni en
       movimiento. Perder el aviso no es «menos movimiento», es menos
       información.

       Así que el anillo se pone y ya está, sin animación que aplastar. Quien lo
       retira es el temporizador de js/admision.js, que es el mismo en los dos
       casos justamente para que esto funcione. */
    .rsn-adm-ficha.esta-senalada::after {
        animation: none !important;
        opacity: 1;
    }
}

.rsn-adm-ficha-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
    line-height: 1.2;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-adm-ficha-bajada {
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-6);
    padding-bottom: 0;
}

/* LA CAJA TIENE QUE CABER EN PANTALLA

   Con el botón de WhatsApp dentro y los espacios anteriores, la ficha medía más
   que el alto útil de un portátil: la familia no llegaba a ver el botón de
   enviar sin desplazarse, y un formulario cuyo botón no se ve es un formulario
   que no se envía. El WhatsApp se fue al panel de agradecimiento —donde tiene
   más sentido, porque ahí es una segunda vía y no una competencia— y los
   espacios se cerraron. */
.rsn-adm-formulario {
    display: grid;
    gap: var(--rsn-esp-3);
}

/* La trampa para robots. Fuera de la vista y fuera del foco, pero presente en
   el marcado: un programa la rellena, una persona no puede. */
.rsn-adm-trampa {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.rsn-adm-campo {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-bottom: 0;
}

.rsn-adm-campo label {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--rsn-marino);
}

.rsn-adm-campo input,
.rsn-adm-campo select {
    width: 100%;
    padding: 0.62em 0.8em;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto);
    background: var(--rsn-fondo-suave);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.16);
    border-radius: var(--rsn-radio-sm);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.rsn-adm-campo input:focus,
.rsn-adm-campo select:focus {
    outline: none;
    background: var(--rsn-blanco);
    border-color: var(--rsn-azul);
    box-shadow: 0 0 0 3px rgba(var(--rsn-azul-rgb), 0.16);
}

/* El error se marca en el borde Y con el mensaje de abajo: solo con el color
   no lo ve quien no distingue el rojo. */
.rsn-adm-campo input[aria-invalid="true"],
.rsn-adm-campo select[aria-invalid="true"] {
    border-color: #B3261E;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

.rsn-adm-error {
    font-size: var(--rsn-txt-xs);
    line-height: 1.4;
    color: #B3261E;
}

.rsn-adm-captcha {
    /* El widget de Google mide 304 px y no encoge; en pantalla estrecha se
       escala para que no desborde la ficha. */
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 380px) {
    .rsn-adm-captcha .g-recaptcha {
        transform: scale(.86);
        transform-origin: 0 0;
        height: 66px;
    }
}

.rsn-adm-enviar,
.rsn-adm-whatsapp {
    width: 100%;
    text-align: center;
}

.rsn-adm-enviar[disabled] {
    opacity: .6;
    cursor: progress;
}

/* La respuesta reserva su altura desde el principio: si apareciera de golpe,
   empujaría el botón justo cuando la persona está mirando el resultado. */
.rsn-adm-respuesta {
    min-height: 1.4em;
    margin: 0;
    padding-bottom: 0;
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
}

.rsn-adm-respuesta.esta-bien { color: #0E6F3B; }
.rsn-adm-respuesta.esta-mal  { color: #B3261E; }

/* --- El relevo: se va el formulario, entra el agradecimiento --------------

   La caja se queda; lo de dentro cambia. Que no desaparezca la caja entera
   importa: si se esfumara, la columna se descolocaría y la persona perdería de
   vista el sitio donde acaba de escribir.
   -------------------------------------------------------------------------- */

.rsn-adm-gracias { display: none; }

.rsn-adm-ficha.esta-enviado .rsn-adm-formulario,
.rsn-adm-ficha.esta-enviado .rsn-adm-ficha-titulo,
.rsn-adm-ficha.esta-enviado .rsn-adm-ficha-bajada { display: none; }

/* `grid-template-columns: minmax(0, 1fr)` y NO `justify-items: center`.

   Con `justify-items: center`, la columna se dimensiona al hijo más ancho, y
   los hijos que piden `width: 100%` la miden contra esa columna: se realimenta
   y el aviso y los botones se salían de la caja por la derecha. Centrar el
   texto y estirar las cajas hace lo mismo a la vista y no se desborda. */
.rsn-adm-ficha.esta-enviado .rsn-adm-gracias {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rsn-esp-4);
    text-align: center;
}

.rsn-adm-gracias-marca { justify-self: center; }

.rsn-adm-gracias:focus { outline: none; }

.rsn-adm-gracias-marca {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(18, 140, 75, 0.12);
    color: #128C4B;
}

.rsn-adm-gracias-marca svg { width: 28px; height: 28px; }

.rsn-adm-gracias-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
    line-height: 1.2;
    color: var(--rsn-marino);
    margin: 0;
}

.rsn-adm-gracias-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.65;
    color: var(--rsn-texto-suave);
    margin: 0;
    padding-bottom: 0;
}

/* EL AVISO DE QUE SE SALE DEL SITIO

   No es letra pequeña de descargo: es información que la familia necesita antes
   de pulsar, no después de ver otro logotipo en la barra del navegador. Por eso
   va SOBRE el botón y no debajo, y por eso lleva su icono. */
.rsn-adm-gracias-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    text-align: left;
    width: 100%;
    padding: var(--rsn-esp-3) var(--rsn-esp-4);
    background: var(--rsn-fondo-suave);
    border-left: var(--rsn-filete) solid var(--rsn-acento);
    border-radius: 0 var(--rsn-radio-sm) var(--rsn-radio-sm) 0;
    font-size: var(--rsn-txt-xs);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
    margin: 0;
    padding-bottom: var(--rsn-esp-3);
}

.rsn-adm-gracias-aviso-icono {
    flex: 0 0 auto;
    color: var(--rsn-acento-texto);
}

.rsn-adm-gracias-aviso-icono svg { width: 16px; height: 16px; display: block; }

.rsn-adm-gracias-seguir,
.rsn-adm-gracias-whatsapp {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    text-align: center;
}

.rsn-adm-gracias-fuera svg { width: 15px; height: 15px; display: block; }

/* La clase para lo que se oye pero no se ve está ahora entre las utilidades
   generales, arriba del archivo: la usan la cabecera y esta página. */

.rsn-adm-ficha-aviso {
    font-size: var(--rsn-txt-xs);
    line-height: 1.5;
    color: var(--rsn-texto-suave);
    margin: 0;
    padding-bottom: 0;
    text-align: center;
}


/* --- 3 · Los pilares ------------------------------------------------------ */

.rsn-adm-pilares {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(3rem, 6vw, 5rem);
    /* «Conocer el colegio» baja hasta aquí; que el titular no quede debajo de
       la cabecera fija de Divi. */
    scroll-margin-top: 140px;
}

.rsn-adm-pilares-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px)  { .rsn-adm-pilares-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rsn-adm-pilares-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rsn-adm-pilar {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    border-radius: var(--rsn-radio);
    overflow: hidden;
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

.rsn-adm-pilar:hover {
    transform: translateY(-4px);
    box-shadow: var(--rsn-realce-alto);
}

@media (prefers-reduced-motion: reduce) {
    .rsn-adm-pilar { transition: none; }
    .rsn-adm-pilar:hover { transform: none; }
}

.rsn-adm-pilar-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}

.rsn-adm-pilar:hover .rsn-adm-pilar-foto { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .rsn-adm-pilar-foto { transition: none; }
    .rsn-adm-pilar:hover .rsn-adm-pilar-foto { transform: none; }
}

/* El velo llega hasta arriba con muy poca densidad y se cierra abajo: el texto
   se lee sea cual sea la fotografía, y la fotografía sigue viéndose. */
.rsn-adm-pilar-velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--rsn-tinta-rgb), 0.15) 0%,
        rgba(var(--rsn-tinta-rgb), 0.55) 45%,
        rgba(var(--rsn-tinta-rgb), 0.92) 100%
    );
}

.rsn-adm-pilar-numero {
    position: absolute;
    top: clamp(0.9rem, 2vw, 1.25rem);
    right: clamp(0.9rem, 2vw, 1.25rem);
    font-family: var(--rsn-font-display);
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.28);
}

.rsn-adm-pilar-decir {
    position: relative;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
}

.rsn-adm-pilar-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
    line-height: 1.2;
    color: var(--rsn-blanco);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-adm-pilar-titulo::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin-top: var(--rsn-esp-3);
    background: var(--rsn-acento);
}

.rsn-adm-pilar-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    padding-bottom: 0;
}


/* --- 5 · La misión -------------------------------------------------------- */

.rsn-adm-legado {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5rem);
}

.rsn-adm-legado-cuerpo {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .rsn-adm-legado-cuerpo {
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    }
}

.rsn-adm-legado-figura {
    margin: 0;
    padding: 0;
}

.rsn-adm-legado-foto {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rsn-radio);
    box-shadow: var(--rsn-realce);
}

.rsn-adm-legado-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.75;
    color: var(--rsn-texto-suave);
    max-width: 60ch;
    margin: 0 0 var(--rsn-esp-8);
    padding-bottom: 0;
}

.rsn-adm-puntos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsn-esp-4);
    max-width: 62ch;
}

.rsn-adm-puntos li {
    display: flex;
    align-items: flex-start;
    gap: var(--rsn-esp-4);
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: var(--rsn-texto);
}

.rsn-adm-punto-marca {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--rsn-acento-rgb), 0.16);
    color: var(--rsn-acento-texto);
}

.rsn-adm-punto-marca svg { width: 14px; height: 14px; }


/* --- 7 · La ruta de ingreso ----------------------------------------------- */

.rsn-adm-ruta {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5rem);
}

.rsn-adm-pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    counter-reset: none;
}

@media (min-width: 700px)  { .rsn-adm-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rsn-adm-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* El paso no es una tarjeta: es una columna con un filete arriba. Cuatro
   tarjetas seguidas aquí competirían con las de pilares, que están dos
   secciones más arriba y son las que tienen que destacar. */
.rsn-adm-paso {
    display: flex;
    flex-direction: column;
    gap: var(--rsn-esp-4);
    padding-top: var(--rsn-esp-6);
    border-top: 2px solid rgba(var(--rsn-tinta-rgb), 0.10);
}

.rsn-adm-paso-numero {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rsn-marino);
    color: var(--rsn-acento-texto);
    font-family: var(--rsn-font-display);
    font-size: 1.15rem;
    line-height: 1;
}

.rsn-adm-paso-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.2;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-adm-paso-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
    margin: 0;
    padding-bottom: 0;
}

/* Las fechas del paso: el dato que la familia busca primero, así que va entre
   el título y la explicación, en azul y con algo más de peso que el texto. */
.rsn-adm-paso-cuando {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    line-height: 1.4;
    color: var(--rsn-azul);
    margin: 0 0 var(--rsn-esp-2);
}

/* El botón cierra la columna, pegado abajo: con cuatro pasos de distinto
   largo, los botones quedan alineados entre sí en vez de a media altura. */
.rsn-adm-paso-accion {
    margin: auto 0 0;
    padding-top: var(--rsn-esp-2);
}


/* --- 8 · El evento -------------------------------------------------------- */

.rsn-adm-evento {
    background: rgba(var(--rsn-acento-rgb), 0.12);
    border-top: var(--rsn-filete) solid var(--rsn-acento);
    border-bottom: var(--rsn-filete) solid var(--rsn-acento);
    padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.rsn-adm-evento-cuerpo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.rsn-adm-evento-decir { max-width: 62ch; }

.rsn-adm-evento-tag {
    display: inline-block;
    padding: 0.25em 0.8em;
    border-radius: 999px;

    /* Tinta oscura y no azul: sobre el celeste, el azul corporativo da 2.12
       y desaparece. La tinta da 5.13. */
    background: var(--rsn-acento);
    color: var(--rsn-texto);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0.25em;
}

.rsn-adm-evento-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.35rem, 1.2rem + 0.9vw, 2rem);
    line-height: 1.18;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-adm-evento-cuando {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;
}

.rsn-adm-evento-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.65;
    color: var(--rsn-texto-suave);
    margin: 0;
    padding-bottom: 0;
}

.rsn-adm-evento-accion { flex: 0 0 auto; }


/* --- 9 · La llamada final ------------------------------------------------- */

.rsn-adm-cierre {
    background: var(--rsn-marino);
}

.rsn-adm-cierre-cuerpo {
    padding-block: clamp(3rem, 6vw, 5rem);
    text-align: center;
}

.rsn-adm-cierre-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;
}

.rsn-adm-cierre-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.8rem, 1.4rem + 2vw, 3rem);
    line-height: 1.1;
    color: var(--rsn-blanco);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-adm-cierre-titulo em {
    display: block;
    font-style: italic;
    color: var(--rsn-acento-texto);
}

.rsn-adm-cierre-texto {
    max-width: 56ch;
    margin: 0 auto var(--rsn-esp-8);
    padding-bottom: 0;
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.86);
}

.rsn-adm-cierre-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rsn-esp-4);
}

.rsn-adm-libre {
    background: var(--rsn-blanco);
    padding-block: clamp(2rem, 4vw, 3rem);
}


/* ==========================================================================
   CALENDARIO DE ACTIVIDADES

   Lo pinta el atajo [rsn_calendario] (inc/calendario.php): dos marcos con el
   mismo Google Calendar, el de mes para escritorio y el de agenda para
   móvil. Solo uno se muestra; el otro, con loading="lazy", ni se descarga.

   Sin borde gris ni alto clavado en 800 px, que es lo que trae el código de
   Google: el alto sigue a la ventana para que el mes entero quepa sin
   desplazamiento interno, y el marco se recorta con el radio del sistema.
   ========================================================================== */

.rsn-calendario { margin-block: var(--rsn-esp-8); }

.rsn-calendario-marco {
    border: 1px solid var(--rsn-borde);
    border-radius: var(--rsn-radio);
    overflow: hidden;
    background: var(--rsn-blanco);
    box-shadow: var(--rsn-sombra);
}

.rsn-calendario-marco iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Escritorio: el mes. Seis semanas de Google Calendar necesitan unos 700 px
   para que cada día muestre dos o tres actos sin cortar. */
.rsn-calendario-marco--mes iframe { height: clamp(640px, 82vh, 900px); }

/* Móvil: la agenda, que es una lista. Más baja: no hay rejilla que llenar. */
.rsn-calendario-marco--agenda iframe { height: clamp(480px, 75vh, 640px); }

.rsn-calendario-marco--agenda { display: none; }

@media (max-width: 760px) {
    .rsn-calendario-marco--mes    { display: none; }
    .rsn-calendario-marco--agenda { display: block; }
}

.rsn-calendario-abrir {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: var(--rsn-esp-6) 0 0;
}

/* El aviso que solo ve quien puede arreglarlo. */
.rsn-calendario-aviso {
    padding: var(--rsn-esp-4) var(--rsn-esp-6);
    border-left: var(--rsn-filete) solid var(--rsn-aviso);
    background: var(--rsn-fondo-suave);
    font-size: var(--rsn-txt-sm);
}

@media print {
    .rsn-calendario-marco { display: none; }
    .rsn-calendario-abrir { text-align: left; }
}


/* ==========================================================================
   NOSOTROS · QUIÉNES SOMOS

   La pinta inc/quienes.php (plantilla page-quienes-somos.php). Siete
   secciones que alternan claro y marino, con el mismo lenguaje del resto del
   sitio —relieve de --rsn-realce, filete dorado, rótulo en versalitas— y tres
   recursos propios: el collage con marco desplazado de la apertura, la frase
   sobre fotografía y las tarjetas que se levantan al pasar el ratón.

   Todo el movimiento es transform + opacity (no cuesta repintado) y se apaga
   con prefers-reduced-motion.
   ========================================================================== */

/* --- Piezas comunes -------------------------------------------------------- */

.rsn-quienes-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-quienes-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--rsn-marino);
    margin: 0;
    text-wrap: balance;
    max-width: 22ch;
}

.rsn-quienes-filete {
    display: block;
    width: 56px;
    height: 3px;
    margin: var(--rsn-esp-5) 0 var(--rsn-esp-6);
    background: var(--rsn-acento);
    border-radius: 2px;
}

.rsn-quienes-entrada {
    font-size: var(--rsn-txt-lg);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
    max-width: 52ch;
    margin: 0 0 var(--rsn-esp-8);
}

.rsn-quienes-cabeza { margin-bottom: clamp(2rem, 4vw, 3rem); }
.rsn-quienes-cabeza .rsn-quienes-entrada { margin-bottom: 0; }

/* La cabeza sobre marino */
.rsn-quienes-cabeza--claro .rsn-quienes-titulo  { color: var(--rsn-blanco); }
.rsn-quienes-cabeza--claro .rsn-quienes-entrada { color: rgba(255, 255, 255, 0.78); }

/* --- 1 · Apertura con collage --------------------------------------------- */

.rsn-quienes-apertura {
    background: var(--rsn-blanco);
    overflow: hidden;                /* el marco del collage asoma por fuera */
}

.rsn-quienes-apertura-cuerpo {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 960px) {
    .rsn-quienes-apertura-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* El collage: una fotografía grande, otra pequeña que se le monta en la
   esquina y un marco dorado desplazado detrás. Tres capas, y las proporciones
   en % del ancho para que el conjunto escale entero. */
.rsn-quienes-collage {
    position: relative;
    aspect-ratio: 4 / 3.4;
    max-width: 640px;
    margin: 0 auto 4%;               /* sitio para el marco, que asoma por abajo */
    width: 100%;
}

.rsn-quienes-collage figure { margin: 0; position: absolute; overflow: hidden; border-radius: var(--rsn-radio-lg); }
.rsn-quienes-collage img    { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, .84, .44, 1); }

.rsn-quienes-collage-marco {
    position: absolute;
    inset: 6% -4% -4% 6%;
    width: auto; height: auto;
    border: 3px solid var(--rsn-acento);
    border-radius: var(--rsn-radio-lg);
    opacity: 0.9;
}

.rsn-quienes-collage-grande {
    inset: 0 8% 12% 0;
    box-shadow: var(--rsn-realce-alto);
}

.rsn-quienes-collage-chica {
    width: 40%;
    aspect-ratio: 1;
    right: 0;
    bottom: 0;
    border: 6px solid var(--rsn-blanco);
    box-shadow: var(--rsn-realce-alto);
    transform: rotate(3deg);
    transition: transform .5s cubic-bezier(.16, .84, .44, 1);
}

.rsn-quienes-collage:hover .rsn-quienes-collage-grande img { transform: scale(1.04); }
.rsn-quienes-collage:hover .rsn-quienes-collage-chica     { transform: rotate(0deg) translateY(-6px); }

/* --- 2 · La frase sobre Don Bosco ----------------------------------------- */

.rsn-quienes-cita {
    position: relative;
    background: var(--rsn-marino) var(--rsn-quienes-cita-foto) center 40% / cover no-repeat;
    color: var(--rsn-blanco);
    isolation: isolate;
}

/* El velo: marino en degradado, más denso a la izquierda, donde va el texto,
   para que la fotografía siga viéndose a la derecha. */
.rsn-quienes-cita::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(var(--rsn-tinta-rgb), 0.94) 0%, rgba(var(--rsn-tinta-rgb), 0.82) 55%, rgba(var(--rsn-tinta-rgb), 0.55) 100%);
    z-index: -1;
}

.rsn-quienes-cita-cuerpo { padding-block: clamp(3.5rem, 8vw, 7rem); }

.rsn-quienes-cita-texto {
    position: relative;
    margin: 0;
    padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem);
    border-left: var(--rsn-filete) solid var(--rsn-acento-oscuro);
    max-width: 36ch;
    background: none;
    font-style: normal;
}

/* Color explícito: la regla general de <blockquote> pinta las citas en marino,
   y sobre esta banda marino desaparecerían. */
.rsn-quienes-cita-texto p {
    font-family: var(--rsn-font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem);
    line-height: 1.22;
    letter-spacing: -0.015em;
    color: var(--rsn-blanco);
    margin: 0 0 var(--rsn-esp-4);
    text-wrap: balance;
}

.rsn-quienes-cita-texto cite {
    font-family: var(--rsn-font-body);
    font-style: normal;
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rsn-acento-oscuro);
}

/* Las comillas grandes, en dorado y medio transparentes, detrás del texto */
.rsn-quienes-comillas {
    position: absolute;
    top: -0.35em;
    left: clamp(1rem, 2vw, 1.75rem);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(6rem, 12vw, 11rem);
    line-height: 1;
    color: var(--rsn-acento-oscuro);
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
}

/* --- 3 · Las tres claves --------------------------------------------------- */

.rsn-quienes-claves {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-quienes-claves-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 760px) { .rsn-quienes-claves-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La tarjeta: blanca, con el número en marca de agua y el filete dorado que
   se dibuja de izquierda a derecha al pasar el ratón. */
.rsn-quienes-clave {
    position: relative;
    overflow: hidden;
    background: var(--rsn-blanco);
    border-radius: var(--rsn-radio-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    /* La misma sombra en reposo que todas las tarjetas del sitio (puertas,
       momentos, etapas): --rsn-realce; al pasar, --rsn-realce-alto. */
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

.rsn-quienes-clave::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--rsn-acento);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.16, .84, .44, 1);
}

.rsn-quienes-clave:hover {
    transform: translateY(-6px);
    box-shadow: var(--rsn-realce-alto);
}
.rsn-quienes-clave:hover::after { transform: scaleX(1); }

.rsn-quienes-clave-icono {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(var(--rsn-acento-rgb), 0.16);
    color: var(--rsn-acento-texto);
    margin-bottom: var(--rsn-esp-6);
    transition: transform .35s ease, background-color .35s ease;
}
.rsn-quienes-clave:hover .rsn-quienes-clave-icono { transform: scale(1.08) rotate(-6deg); }

.rsn-quienes-clave-numero {
    position: absolute;
    top: 0.5rem;
    right: 1.25rem;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--rsn-marino);
    opacity: 0.06;
}

.rsn-quienes-clave-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    line-height: 1.2;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-quienes-clave-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.65;
    color: var(--rsn-texto-suave);
    margin: 0;
}

/* --- 5 · Los valores ------------------------------------------------------- */

.rsn-quienes-valores {
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
    --rsn-acento:       var(--rsn-acento-oscuro);
    --rsn-acento-texto: var(--rsn-acento-oscuro);
    --rsn-foco:         var(--rsn-acento-oscuro);
}

.rsn-quienes-valores-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 760px) { .rsn-quienes-valores-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Sobre marino, la tarjeta es un velo de blanco con borde fino; al pasar el
   ratón el borde se vuelve dorado, el icono se rellena y la tarjeta sube.
   Tres tarjetas y no cuatro: son los tres valores de la Matriz Axiológica. */
.rsn-quienes-valor {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--rsn-radio-lg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}

.rsn-quienes-valor:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--rsn-acento-oscuro);
    box-shadow: var(--rsn-realce-oscuro-alto);
}

.rsn-quienes-valor-icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--rsn-acento-oscuro);
    color: var(--rsn-acento-oscuro);
    margin-bottom: var(--rsn-esp-5);
    transition: background-color .35s ease, color .35s ease, transform .35s ease;
}
.rsn-quienes-valor:hover .rsn-quienes-valor-icono {
    background: var(--rsn-acento-oscuro);
    color: var(--rsn-marino);
    transform: scale(1.06);
}

.rsn-quienes-valor-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.9rem);
    line-height: 1.25;
    color: var(--rsn-blanco);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-quienes-valor-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

/* --- 6 · La vida en el colegio ------------------------------------------- */

.rsn-quienes-vida {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-quienes-vida-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 640px)  { .rsn-quienes-vida-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rsn-quienes-vida-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cada espacio es una fotografía con su nombre encima; la explicación está
   plegada bajo el nombre y se despliega al pasar el ratón, mientras la imagen
   se acerca y el velo marino sube. En pantallas táctiles no hay hover, así que
   la explicación va siempre visible. */
.rsn-quienes-foto figure {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;             /* vertical: cuatro en fila piden alto */
    overflow: hidden;
    border-radius: var(--rsn-radio-lg);
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}
.rsn-quienes-foto:hover figure { transform: translateY(-4px); box-shadow: var(--rsn-realce-alto); }

.rsn-quienes-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, .84, .44, 1);
}
.rsn-quienes-foto:hover img { transform: scale(1.06); }

.rsn-quienes-foto figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem);
    background: linear-gradient(to top, rgba(var(--rsn-tinta-rgb), 0.92) 0%, rgba(var(--rsn-tinta-rgb), 0.55) 55%, rgba(var(--rsn-tinta-rgb), 0) 100%);
    color: var(--rsn-blanco);
    font-family: var(--rsn-font-body);
}

.rsn-quienes-foto-numero {
    display: block;
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--rsn-acento-oscuro);
    margin-bottom: 0.25em;
}

.rsn-quienes-foto-titulo {
    display: block;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* La explicación: plegada (altura 0, transparente) y se despliega al pasar
   el ratón. `grid-template-rows` de 0fr a 1fr es la única forma de animar
   una altura desconocida sin JavaScript. */
.rsn-quienes-foto-texto {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    transition: grid-template-rows .4s cubic-bezier(.16, .84, .44, 1), opacity .3s ease .05s, margin-top .4s ease;
}
.rsn-quienes-foto-texto > * { min-height: 0; }

.rsn-quienes-foto:hover .rsn-quienes-foto-texto,
.rsn-quienes-foto:focus-within .rsn-quienes-foto-texto {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.6em;
}

/* Sin ratón, siempre desplegada */
@media (hover: none) {
    .rsn-quienes-foto-texto { grid-template-rows: 1fr; opacity: 1; margin-top: 0.6em; }
}

/* --- 7 · El cierre --------------------------------------------------------- */

.rsn-quienes-cierre {
    position: relative;
    background: var(--rsn-marino) var(--rsn-quienes-cierre-foto) center / cover no-repeat;
    color: var(--rsn-blanco);
    isolation: isolate;
    text-align: center;
    --rsn-acento:       var(--rsn-acento-oscuro);
    --rsn-acento-texto: var(--rsn-acento-oscuro);
    --rsn-foco:         var(--rsn-acento-oscuro);
}

.rsn-quienes-cierre::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--rsn-tinta-rgb), 0.88);
    z-index: -1;
}

.rsn-quienes-cierre-cuerpo { padding-block: clamp(3.5rem, 7vw, 6rem); }

.rsn-quienes-cierre-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
    line-height: 1.12;
    color: var(--rsn-blanco);
    margin: 0 auto var(--rsn-esp-4);
    max-width: 24ch;
    text-wrap: balance;
}

.rsn-quienes-cierre-texto {
    font-size: var(--rsn-txt-base);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    max-width: 52ch;
    margin: 0 auto var(--rsn-esp-8);
}

.rsn-quienes-cierre-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rsn-esp-4);
}

/* Sobre marino, el botón principal va en dorado con texto marino: es el
   mismo par que el destacado de la cabecera oscura. */
.rsn-quienes-cierre .rsn-boton:not(.rsn-boton--claro) {
    background: var(--rsn-acento-oscuro);
    color: var(--rsn-marino);
    --rsn-boton-sombra:      var(--rsn-realce-oscuro);
    --rsn-boton-sombra-alta: var(--rsn-realce-oscuro-alto);
}
.rsn-quienes-cierre .rsn-boton:not(.rsn-boton--claro):hover,
.rsn-quienes-cierre .rsn-boton:not(.rsn-boton--claro):focus-visible {
    background: var(--rsn-acento-oscuro-hover);
    color: var(--rsn-marino);
}

/* --- Movimiento reducido --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .rsn-quienes-collage img,
    .rsn-quienes-collage-chica,
    .rsn-quienes-clave, .rsn-quienes-clave::after, .rsn-quienes-clave-icono,
    .rsn-quienes-valor, .rsn-quienes-valor-icono,
    .rsn-quienes-foto figure, .rsn-quienes-foto img, .rsn-quienes-foto figcaption { transition: none; }
    .rsn-quienes-collage:hover .rsn-quienes-collage-grande img,
    .rsn-quienes-collage:hover .rsn-quienes-collage-chica,
    .rsn-quienes-clave:hover, .rsn-quienes-clave:hover .rsn-quienes-clave-icono,
    .rsn-quienes-valor:hover, .rsn-quienes-valor:hover .rsn-quienes-valor-icono,
    .rsn-quienes-foto:hover figure, .rsn-quienes-foto:hover img { transform: none; }
    .rsn-quienes-foto figcaption { transform: none; }
}


/* ==========================================================================
   NOSOTROS · LAS OTRAS PÁGINAS DEL SUBMENÚ

   Las pinta inc/nosotros.php, una plantilla por página: Nosotros
   (page-nosotros.php), Misión y visión (page-mision-vision.php), Nuestra
   historia (page-historia.php), Mensaje de la Dirección y Promotoría
   (page-direccion.php y page-promotoria.php, la misma carta con retrato).

   Reutilizan las piezas comunes de Quiénes somos —rótulo, título, filete,
   apertura con collage, frase sobre fotografía y cierre— y añaden cinco
   propias: las puertas (tarjetas con foto que llevan a cada página), las
   bandas alternas, los paneles de misión y visión con sello, la línea de
   tiempo y la carta con retrato recortado.

   Todo el movimiento es transform + opacity y se apaga con
   prefers-reduced-motion.
   ========================================================================== */

/* --- Las puertas: seis tarjetas con foto que llevan a cada página --------- */

.rsn-nos-puertas {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-nos-puertas-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 640px)  { .rsn-nos-puertas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rsn-nos-puertas-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La tarjeta entera es el enlace. Se levanta al pasar el ratón, la foto se
   acerca y la flecha avanza: tres señales que dicen «esto se abre». */
.rsn-nos-puerta-enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--rsn-radio-lg);
    overflow: hidden;
    background: var(--rsn-blanco);
    box-shadow: var(--rsn-realce);
    text-decoration: none;
    color: inherit;
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

.rsn-nos-puerta-enlace:hover,
.rsn-nos-puerta-enlace:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--rsn-realce-alto);
    text-decoration: none;
    color: inherit;
}

.rsn-nos-puerta-enlace:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 3px;
}

.rsn-nos-puerta-foto {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.rsn-nos-puerta-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, .84, .44, 1);
}
.rsn-nos-puerta-enlace:hover img { transform: scale(1.06); }

.rsn-nos-puerta-decir {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.5rem);
    position: relative;
}

/* El filete dorado nace de la izquierda al pasar el ratón */
.rsn-nos-puerta-decir::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rsn-acento);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.16, .84, .44, 1);
}
.rsn-nos-puerta-enlace:hover .rsn-nos-puerta-decir::before { transform: scaleX(1); }

.rsn-nos-puerta-numero {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--rsn-acento-texto);
    margin-bottom: 0.35em;
}

.rsn-nos-puerta-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rsn-marino);
    margin-bottom: 0.45em;
}

.rsn-nos-puerta-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
    flex: 1;
}

.rsn-nos-puerta-flecha {
    display: inline-block;
    margin-top: var(--rsn-esp-4);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--rsn-acento-texto);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}
.rsn-nos-puerta-enlace:hover .rsn-nos-puerta-flecha { transform: translateX(8px); }

/* --- Las bandas: fotografía y texto, alternando de lado ------------------ */

.rsn-nos-banda { background: var(--rsn-fondo-suave); }
.rsn-nos-banda--invertida { background: var(--rsn-blanco); }

.rsn-nos-banda-cuerpo {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .rsn-nos-banda-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    /* En la invertida la foto pasa a la derecha sin tocar el marcado */
    .rsn-nos-banda--invertida .rsn-nos-banda-foto { order: 2; }
}

.rsn-nos-banda-foto {
    position: relative;
    margin: 0;
    border-radius: var(--rsn-radio-lg);
    overflow: hidden;
    box-shadow: var(--rsn-realce-alto);
    aspect-ratio: 4 / 3;
}

.rsn-nos-banda-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, .84, .44, 1);
}
.rsn-nos-banda-foto:hover img { transform: scale(1.04); }

/* La cita va sobre la foto, abajo, con velo marino */
.rsn-nos-banda-cita {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
    background: linear-gradient(to top, rgba(var(--rsn-tinta-rgb), 0.9) 0%, rgba(var(--rsn-tinta-rgb), 0.5) 60%, rgba(var(--rsn-tinta-rgb), 0) 100%);
    color: var(--rsn-blanco);
}

.rsn-nos-banda-cita p {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
    font-style: italic;
    line-height: 1.4;
    margin: 0;
    color: var(--rsn-blanco);
}

.rsn-nos-banda-cita cite {
    display: block;
    margin-top: 0.5em;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-acento-oscuro);
}

.rsn-nos-banda-texto {
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto-suave);
    max-width: 54ch;
    margin: 0;
}

/* --- Misión y visión: dos paneles con sello ------------------------------ */

.rsn-nos-panel { background: var(--rsn-blanco); }
.rsn-nos-panel--invertido { background: var(--rsn-fondo-suave); }

.rsn-nos-panel-cuerpo {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .rsn-nos-panel-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .rsn-nos-panel--invertido .rsn-nos-panel-foto { order: 2; }
}

/* La foto con el sello dorado colgado de la esquina: el icono de misión o de
   visión, el mismo del acordeón de la portada. Margen para que el sello
   asome por fuera del recuadro. */
.rsn-nos-panel-foto {
    position: relative;
    isolation: isolate;              /* el marco con z-index -1 queda dentro, no bajo la sección */
    margin: 0 0 1.75rem 1.75rem;
    border-radius: var(--rsn-radio-lg);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-nos-panel--invertido .rsn-nos-panel-foto { margin: 0 1.75rem 1.75rem 0; }

.rsn-nos-panel-foto img {
    display: block;
    width: 100%;
    height: auto;                    /* el height="" del marcado no manda */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rsn-radio-lg);
}

/* El marco dorado desplazado, como en el collage */
.rsn-nos-panel-foto::before {
    content: '';
    position: absolute;
    inset: 6% -1.25rem -1.25rem 6%;
    border: 3px solid var(--rsn-acento);
    border-radius: var(--rsn-radio-lg);
    opacity: 0.9;
    z-index: -1;
}
.rsn-nos-panel--invertido .rsn-nos-panel-foto::before { inset: 6% 6% -1.25rem -1.25rem; }

.rsn-nos-panel-sello {
    position: absolute;
    left: -1.75rem;
    bottom: -1.75rem;
    display: grid;
    place-items: center;
    width: clamp(4.5rem, 8vw, 6rem);
    height: clamp(4.5rem, 8vw, 6rem);
    border-radius: 50%;
    background: var(--rsn-acento-oscuro);
    color: var(--rsn-marino);
    box-shadow: var(--rsn-realce-alto);
    border: 5px solid var(--rsn-blanco);
    transition: transform .4s cubic-bezier(.16, .84, .44, 1);
}
.rsn-nos-panel--invertido .rsn-nos-panel-sello { left: auto; right: -1.75rem; }
.rsn-nos-panel-foto:hover .rsn-nos-panel-sello { transform: scale(1.08) rotate(-6deg); }

.rsn-nos-panel-sello svg { width: 48%; height: 48%; }

.rsn-nos-panel-texto {
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto-suave);
    max-width: 54ch;
    margin: 0 0 var(--rsn-esp-4);
}
.rsn-nos-panel-texto:last-child { margin-bottom: 0; }

/* El primer párrafo —la definición— va más grande y en marino */
.rsn-nos-panel-texto--primero {
    font-size: var(--rsn-txt-lg);
    line-height: 1.55;
    color: var(--rsn-marino);
    font-weight: 500;
}

/* --- La línea de tiempo --------------------------------------------------- */

.rsn-nos-linea {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-nos-linea .rsn-quienes-cabeza { text-align: center; }
.rsn-nos-linea .rsn-quienes-titulo { margin-inline: auto; }
.rsn-nos-linea .rsn-quienes-filete { margin-inline: auto; }

/* La lista es la línea: un eje vertical dibujado con ::before. En pantalla
   estrecha el eje va a la izquierda y las tarjetas a su derecha; a partir de
   900 px el eje va al centro y las tarjetas alternan de lado. */
.rsn-nos-hitos {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    max-width: 62rem;
    --rsn-hito-eje: 1.1rem;
}

.rsn-nos-hitos::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--rsn-hito-eje);
    width: 3px;
    margin-left: -1.5px;
    background: linear-gradient(to bottom, var(--rsn-acento), rgba(var(--rsn-acento-rgb), 0.25));
    border-radius: 2px;
}

.rsn-nos-hito {
    position: relative;
    padding-left: calc(var(--rsn-hito-eje) + 2rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.rsn-nos-hito:last-child { padding-bottom: 0; }

/* El punto: círculo dorado con anillo blanco, centrado en el eje */
.rsn-nos-hito-punto {
    position: absolute;
    top: 1.6rem;
    left: var(--rsn-hito-eje);
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: var(--rsn-acento);
    border: 4px solid var(--rsn-blanco);
    box-shadow: 0 0 0 2px var(--rsn-acento), var(--rsn-realce);
    z-index: 1;
    transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}
.rsn-nos-hito:hover .rsn-nos-hito-punto { transform: scale(1.3); }

.rsn-nos-hito-tarjeta {
    position: relative;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-blanco);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease, border-color .35s ease;
}
.rsn-nos-hito:hover .rsn-nos-hito-tarjeta {
    transform: translateY(-4px);
    box-shadow: var(--rsn-realce-alto);
    border-color: rgba(var(--rsn-acento-rgb), 0.5);
}

/* La flecha de la tarjeta hacia el eje */
.rsn-nos-hito-tarjeta::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: -8px;
    width: 14px;
    height: 14px;
    background: inherit;
    border-left: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
    transform: rotate(45deg);
}

.rsn-nos-hito-foto {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--rsn-radio);
    margin-bottom: var(--rsn-esp-4);
}

.rsn-nos-hito-fecha {
    display: inline-block;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-marino);
    background: rgba(var(--rsn-acento-rgb), 0.22);
    border-radius: 999px;
    padding: 0.35em 0.9em;
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-nos-hito-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-nos-hito-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
    margin: 0;
}

@media (min-width: 900px) {
    .rsn-nos-hitos { --rsn-hito-eje: 50%; }

    .rsn-nos-hito {
        width: 50%;
        padding-left: 0;
        padding-right: calc(2.5rem);
        padding-bottom: 0;
        margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    }
    .rsn-nos-hito:last-child { margin-bottom: 0; }

    /* Impares a la izquierda; pares a la derecha, empezando algo más abajo
       para que las tarjetas se intercalen y no queden pareadas. */
    .rsn-nos-hito:nth-child(odd)  { left: 0; }
    .rsn-nos-hito:nth-child(even) {
        left: 50%;
        padding-right: 0;
        padding-left: 2.5rem;
        margin-top: -3.5rem;         /* sube para intercalarse con la impar de arriba */
    }
    /* Si la de arriba lleva foto es mucho más alta: la par sube más para que
       la línea no quede llena de huecos. */
    .rsn-nos-hito--con-foto + .rsn-nos-hito:nth-child(even) { margin-top: -11rem; }
    .rsn-nos-hito:nth-child(even) .rsn-nos-hito-punto { left: 0; }
    .rsn-nos-hito:nth-child(odd)  .rsn-nos-hito-punto { left: 100%; }

    .rsn-nos-hito:nth-child(odd) .rsn-nos-hito-tarjeta::before {
        left: auto;
        right: -8px;
        border-left: 0;
        border-bottom: 0;
        border-right: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
        border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
    }
}

/* La aparición al entrar en pantalla: solo cuando js/historia.js está y ha
   puesto la clase en <html>; sin él, todo se ve desde el principio. */
.rsn-nos-hitos-animan .rsn-nos-hito {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .44, 1);
}
.rsn-nos-hitos-animan .rsn-nos-hito.es-visible {
    opacity: 1;
    transform: none;
}

/* --- La carta con retrato (Dirección y Promotoría) ------------------------ */

.rsn-nos-mensaje {
    background: var(--rsn-blanco);
    overflow: hidden;                /* el marco del retrato asoma por fuera */
}

.rsn-nos-mensaje-cuerpo {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    display: grid;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

@media (min-width: 900px) {
    .rsn-nos-mensaje-cuerpo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
    .rsn-nos-retrato { position: sticky; top: calc(90px + 1.5rem); }
}

/* El retrato: la figura recortada sale de un bloque marino con el marco
   dorado desplazado detrás; el pie con nombre y cargo va bajo el bloque. */
.rsn-nos-retrato {
    position: relative;
    margin: 0 auto;
    width: min(100%, 22rem);
}

/* El cuadro: bloque, marco y figura; el pie va fuera, debajo */
.rsn-nos-retrato-cuadro {
    position: relative;
    display: block;
    padding-top: 2rem;               /* la cabeza asoma por encima del bloque */
}

.rsn-nos-retrato-marco {
    position: absolute;
    inset: calc(2rem + 6%) -4% -4% 6%;
    border: 3px solid var(--rsn-acento);
    border-radius: var(--rsn-radio-lg);
    opacity: 0.9;
}

.rsn-nos-retrato-fondo {
    position: absolute;
    inset: 2rem 8% 0 0;
    background: linear-gradient(160deg, var(--rsn-azul) 0%, var(--rsn-marino) 70%);
    border-radius: var(--rsn-radio-lg);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-nos-retrato img {
    position: relative;
    display: block;
    width: 78%;
    height: auto;
    margin: 0 auto;
    padding-right: 4%;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.3));
    transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}
.rsn-nos-retrato:hover img { transform: translateY(-6px); }

.rsn-nos-retrato figcaption {
    position: relative;
    margin-top: 1.5rem;
    padding: 0.75rem 0 0;
    text-align: center;
    border-top: 2px solid rgba(var(--rsn-acento-rgb), 0.5);
    margin-inline: 8%;
}

.rsn-nos-retrato figcaption strong {
    display: block;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: var(--rsn-txt-base);
    color: var(--rsn-marino);
}

.rsn-nos-retrato figcaption span {
    display: block;
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin-top: 0.3em;
}

.rsn-nos-carta { max-width: 62ch; }

.rsn-nos-carta-saludo {
    font-family: var(--rsn-font-display);
    font-size: var(--rsn-txt-lg);
    font-weight: 600;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-4);
}

.rsn-nos-carta-texto {
    font-size: var(--rsn-txt-base);
    line-height: 1.75;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-5);
}

/* La frase entresacada: en marino, con el filete dorado a la izquierda */
.rsn-nos-carta-cita {
    margin: var(--rsn-esp-6) 0;
    padding: var(--rsn-esp-4) 0 var(--rsn-esp-4) var(--rsn-esp-6);
    border-left: 4px solid var(--rsn-acento);
    background: none;
}

.rsn-nos-carta-cita p {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rsn-marino);
    margin: 0;
}

.rsn-nos-carta-firma {
    margin: var(--rsn-esp-8) 0 0;
    padding-top: var(--rsn-esp-4);
    border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.1);
}

.rsn-nos-carta-firma strong {
    display: block;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    color: var(--rsn-marino);
}

.rsn-nos-carta-firma span {
    display: block;
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto-suave);
}

/* --- Movimiento reducido --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .rsn-nos-puerta-enlace, .rsn-nos-puerta-foto img, .rsn-nos-puerta-decir::before, .rsn-nos-puerta-flecha,
    .rsn-nos-banda-foto img,
    .rsn-nos-panel-sello,
    .rsn-nos-hito-punto, .rsn-nos-hito-tarjeta,
    .rsn-nos-retrato img { transition: none; }
    .rsn-nos-puerta-enlace:hover, .rsn-nos-puerta-enlace:hover img, .rsn-nos-puerta-enlace:hover .rsn-nos-puerta-flecha,
    .rsn-nos-banda-foto:hover img,
    .rsn-nos-panel-foto:hover .rsn-nos-panel-sello,
    .rsn-nos-hito:hover .rsn-nos-hito-punto, .rsn-nos-hito:hover .rsn-nos-hito-tarjeta,
    .rsn-nos-retrato:hover img { transform: none; }
    .rsn-nos-puerta-enlace:hover .rsn-nos-puerta-decir::before { transform: scaleX(1); }
    .rsn-nos-hitos-animan .rsn-nos-hito { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   CONTACTO

   La pinta inc/contacto.php (plantilla page-contacto.php). Dos secciones:
   la apertura con las tres vías directas como tarjetas, y el reparto
   formulario + cómo llegar. Reutiliza el rótulo, el título y el filete de
   Quiénes somos y los campos del formulario de Admisión (.rsn-adm-campo).

   Todo el movimiento es transform + opacity y se apaga con
   prefers-reduced-motion.
   ========================================================================== */

/* --- 1 · Apertura y las vías --------------------------------------------- */

.rsn-con-apertura {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-con-cabeza .rsn-quienes-entrada { margin-bottom: 0; }

.rsn-con-vias-titulo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-4);
}

.rsn-con-vias {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 720px) { .rsn-con-vias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La tarjeta entera es el enlace: icono en círculo, rótulo, el dato en
   grande y la acción abajo. La principal —WhatsApp— va en marino con el
   icono dorado, como el destacado de la cabecera oscura. */
.rsn-con-via-enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-blanco);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
    box-shadow: var(--rsn-realce);
    color: inherit;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease, border-color .35s ease;
}

.rsn-con-via-enlace:hover,
.rsn-con-via-enlace:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--rsn-realce-alto);
    border-color: rgba(var(--rsn-acento-rgb), 0.6);
    color: inherit;
    text-decoration: none;
}

.rsn-con-via-enlace:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 3px;
}

.rsn-con-via-icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--rsn-azul-rgb), 0.08);
    color: var(--rsn-azul);
    margin-bottom: var(--rsn-esp-5);
    transition: transform .35s ease, background-color .35s ease, color .35s ease;
}
.rsn-con-via-icono svg { display: block; }
.rsn-con-via-enlace:hover .rsn-con-via-icono { transform: scale(1.08) rotate(-6deg); background: var(--rsn-azul); color: var(--rsn-blanco); }

.rsn-con-via-rotulo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin-bottom: 0.4em;
}

.rsn-con-via-dato {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rsn-marino);
    overflow-wrap: anywhere;
    margin-bottom: 0.5em;
}

/* Un correo largo baja de cuerpo antes que partirse por la mitad */
.rsn-con-via-dato--largo { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); letter-spacing: 0; }

.rsn-con-via-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
    flex: 1;
}

.rsn-con-via-accion {
    display: inline-block;
    margin-top: var(--rsn-esp-5);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    color: var(--rsn-azul);
}
.rsn-con-via-accion > span {
    display: inline-block;
    transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}
.rsn-con-via-enlace:hover .rsn-con-via-accion > span { transform: translateX(6px); }

/* La principal, en marino */
.rsn-con-via--principal .rsn-con-via-enlace {
    background: var(--rsn-marino);
    border-color: transparent;
    --rsn-acento-texto: var(--rsn-acento-oscuro);
}
.rsn-con-via--principal .rsn-con-via-enlace:hover { box-shadow: var(--rsn-realce-oscuro-alto); border-color: var(--rsn-acento-oscuro); }
.rsn-con-via--principal .rsn-con-via-icono { background: rgba(255, 255, 255, 0.1); color: var(--rsn-acento-oscuro); }
.rsn-con-via--principal .rsn-con-via-enlace:hover .rsn-con-via-icono { background: var(--rsn-acento-oscuro); color: var(--rsn-marino); }
.rsn-con-via--principal .rsn-con-via-dato { color: var(--rsn-blanco); }
.rsn-con-via--principal .rsn-con-via-texto { color: rgba(255, 255, 255, 0.78); }
.rsn-con-via--principal .rsn-con-via-accion { color: var(--rsn-acento-oscuro); }

/* --- 2 · Formulario + cómo llegar ----------------------------------------- */

.rsn-con-doble { background: var(--rsn-fondo-suave); }

.rsn-con-doble-cuerpo {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

@media (min-width: 960px) {
    .rsn-con-doble-cuerpo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* La ficha del formulario: tarjeta blanca con relieve, como la de Admisión */
.rsn-con-ficha {
    background: var(--rsn-blanco);
    border-radius: var(--rsn-radio-lg);
    box-shadow: var(--rsn-realce);
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.rsn-con-ficha .rsn-quienes-filete { margin-bottom: var(--rsn-esp-4); }

.rsn-con-ficha-bajada {
    font-size: var(--rsn-txt-base);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-6);
    max-width: 56ch;
}

.rsn-con-formulario { gap: var(--rsn-esp-4); }

/* Dos campos por fila en pantalla mediana y ancha */
.rsn-con-fila {
    display: grid;
    gap: var(--rsn-esp-4);
}
@media (min-width: 600px) { .rsn-con-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* El área de texto, con los mismos estilos que el resto de campos */
.rsn-adm-campo textarea {
    width: 100%;
    padding: 0.62em 0.8em;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: var(--rsn-texto);
    background: var(--rsn-fondo-suave);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.16);
    border-radius: var(--rsn-radio-sm);
    resize: vertical;
    min-height: 8rem;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.rsn-adm-campo textarea:focus {
    outline: none;
    background: var(--rsn-blanco);
    border-color: var(--rsn-azul);
    box-shadow: 0 0 0 3px rgba(var(--rsn-azul-rgb), 0.16);
}
.rsn-adm-campo textarea[aria-invalid="true"] {
    border-color: #B3261E;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

/* Botón y aviso, lado a lado cuando cabe */
.rsn-con-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rsn-esp-4) var(--rsn-esp-6);
}

.rsn-con-enviar.rsn-adm-enviar { width: auto; }

.rsn-con-ficha-aviso {
    flex: 1 1 16rem;
    margin: 0;
    padding-bottom: 0;
    font-size: var(--rsn-txt-xs);
    line-height: 1.5;
    color: var(--rsn-texto-suave);
}

/* El relevo: se va el formulario, entra el agradecimiento (misma caja) */
.rsn-con-gracias { display: none; }

.rsn-con-ficha.esta-enviado .rsn-con-formulario,
.rsn-con-ficha.esta-enviado .rsn-con-ficha-bajada { display: none; }

.rsn-con-ficha.esta-enviado .rsn-con-gracias {
    display: grid;
    justify-items: start;
    gap: var(--rsn-esp-4);
    outline: none;
}

.rsn-con-gracias-icono {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--rsn-acento);
    color: var(--rsn-marino);
}

.rsn-con-gracias-texto {
    font-size: var(--rsn-txt-base);
    line-height: 1.6;
    color: var(--rsn-texto);
    margin: 0;
    max-width: 48ch;
}

/* --- Cómo llegar ---------------------------------------------------------- */

.rsn-con-llegar .rsn-quienes-filete { margin-bottom: var(--rsn-esp-5); }

.rsn-con-llegar-texto {
    font-size: var(--rsn-txt-base);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-5);
}

.rsn-con-mapa {
    position: relative;
    display: block;
    line-height: 0;
    border-radius: var(--rsn-radio-lg);
    overflow: hidden;
    box-shadow: var(--rsn-realce);
    margin-bottom: var(--rsn-esp-4);
}

.rsn-con-marco {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    filter: saturate(0.72) hue-rotate(-10deg) contrast(1.03);
}

.rsn-con-plano {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}
.rsn-con-mapa--enlace:hover .rsn-con-plano { transform: scale(1.03); }

.rsn-con-mapa-rotulo {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-block;
    padding: 0.55em 1.1em;
    background: var(--rsn-blanco);
    color: var(--rsn-marino);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(var(--rsn-tinta-rgb), 0.2);
}
.rsn-con-mapa--enlace:hover .rsn-con-mapa-rotulo { background: var(--rsn-azul); color: var(--rsn-blanco); }

.rsn-con-mapa-pie {
    margin: 0 0 var(--rsn-esp-5);
    padding-bottom: 0;
    line-height: 1;
}

/* Los datos: icono a la izquierda, rótulo pequeño encima del dato */
.rsn-con-datos {
    list-style: none;
    margin: 0 0 var(--rsn-esp-5);
    padding: 0;
    display: grid;
    gap: var(--rsn-esp-4);
}

.rsn-con-datos li {
    display: flex;
    gap: var(--rsn-esp-3);
    align-items: flex-start;
    color: var(--rsn-azul);
}

.rsn-con-datos li > span {
    display: block;
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: var(--rsn-texto);
}

.rsn-con-datos strong {
    display: block;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-texto-suave);
    margin-bottom: 0.15em;
}

.rsn-con-datos svg { flex: none; margin-top: 0.15em; }

.rsn-con-horarios { margin: 0 0 var(--rsn-esp-6); padding-bottom: 0; }

.rsn-con-horarios-enlace {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    color: var(--rsn-azul);
    text-decoration: none;
    border-bottom: 2px solid rgba(var(--rsn-acento-rgb), 0.6);
    padding-bottom: 2px;
}
.rsn-con-horarios-enlace:hover { border-bottom-color: var(--rsn-azul); }

/* Las redes: los mismos iconos del pie, sobre claro */
.rsn-con-redes-rotulo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-con-redes-lista.rsn-redes { gap: var(--rsn-esp-3); }

.rsn-con-redes-lista.rsn-redes a {
    width: 40px;
    height: 40px;
    color: var(--rsn-azul);
    background: rgba(var(--rsn-azul-rgb), 0.08);
    transition: transform .3s cubic-bezier(.16, .84, .44, 1), background-color .2s ease, color .2s ease;
}
.rsn-con-redes-lista.rsn-redes a svg { width: 20px; height: 20px; }
.rsn-con-redes-lista.rsn-redes a:hover,
.rsn-con-redes-lista.rsn-redes a:focus-visible {
    background: var(--rsn-azul);
    color: var(--rsn-blanco);
    transform: translateY(-3px);
}

/* --- Movimiento reducido --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .rsn-con-via-enlace, .rsn-con-via-icono, .rsn-con-via-accion > span,
    .rsn-con-plano, .rsn-con-redes-lista.rsn-redes a { transition: none; }
    .rsn-con-via-enlace:hover, .rsn-con-via-enlace:hover .rsn-con-via-icono, .rsn-con-via-enlace:hover .rsn-con-via-accion > span,
    .rsn-con-mapa--enlace:hover .rsn-con-plano, .rsn-con-redes-lista.rsn-redes a:hover { transform: none; }
}


/* ==========================================================================
   PASTORAL

   La pinta inc/pastoral.php (plantilla page-pastoral.php) con las piezas de
   Quiénes somos y de Nosotros: apertura con collage, frase, tarjetas de
   claves (las cuatro dimensiones), tarjetas sobre marino (los ambientes de
   la obra) y cierre. Lo propio de esta página son los MOMENTOS —seis
   fotografías con su nombre y la explicación plegada— y las FIESTAS del año,
   una fila de meses con filete dorado.

   Todo el movimiento es transform + opacity y se apaga con
   prefers-reduced-motion.
   ========================================================================== */

/* --- Las cuatro dimensiones: las claves, a cuatro columnas ---------------- */

@media (min-width: 760px)  { .rsn-pas-dimensiones-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rsn-pas-dimensiones-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* «En el colegio»: lo concreto, separado de la definición por un filete */
.rsn-pas-dimension-colegio {
    margin: var(--rsn-esp-4) 0 0;
    padding: var(--rsn-esp-4) 0 0;
    border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.1);
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: var(--rsn-texto);
}

.rsn-pas-dimension-colegio strong {
    display: block;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin-bottom: 0.3em;
}

/* --- Los momentos: seis fotografías con la explicación plegada ----------- */

.rsn-pas-momentos {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
    scroll-margin-top: 6rem;
}

.rsn-pas-momentos-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 620px)  { .rsn-pas-momentos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rsn-pas-momentos-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La misma mecánica que «La vida en el colegio» de Quiénes somos, en 4:3 */
.rsn-pas-momento figure {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--rsn-radio-lg);
    box-shadow: var(--rsn-realce);
    background: var(--rsn-marino);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}
.rsn-pas-momento:hover figure { transform: translateY(-4px); box-shadow: var(--rsn-realce-alto); }

.rsn-pas-momento img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16, .84, .44, 1);
}
.rsn-pas-momento:hover img { transform: scale(1.06); }

.rsn-pas-momento figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem);
    background: linear-gradient(to top, rgba(var(--rsn-tinta-rgb), 0.92) 0%, rgba(var(--rsn-tinta-rgb), 0.55) 55%, rgba(var(--rsn-tinta-rgb), 0) 100%);
    color: var(--rsn-blanco);
    font-family: var(--rsn-font-body);
}

.rsn-pas-momento-numero {
    display: block;
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--rsn-acento-oscuro);
    margin-bottom: 0.25em;
}

.rsn-pas-momento-titulo {
    display: block;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.rsn-pas-momento-texto {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    transition: grid-template-rows .4s cubic-bezier(.16, .84, .44, 1), opacity .3s ease .05s, margin-top .4s ease;
}
.rsn-pas-momento-texto > * { min-height: 0; }

.rsn-pas-momento:hover .rsn-pas-momento-texto,
.rsn-pas-momento:focus-within .rsn-pas-momento-texto {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.6em;
}

@media (hover: none) {
    .rsn-pas-momento-texto { grid-template-rows: 1fr; opacity: 1; margin-top: 0.6em; }
}

/* --- El año pastoral: una fila de fiestas ---------------------------------- */

.rsn-pas-anio {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-pas-fiestas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 620px)  { .rsn-pas-fiestas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .rsn-pas-fiestas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rsn-pas-fiestas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cada fiesta: el mes en dorado sobre un filete, y debajo el nombre y la
   explicación. Tarjeta blanca que se levanta al pasar el ratón. */
.rsn-pas-fiesta {
    position: relative;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-top: calc(clamp(1.25rem, 2.5vw, 1.75rem) + 4px);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-blanco);
    box-shadow: var(--rsn-realce);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}
.rsn-pas-fiesta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--rsn-acento);
    transform: scaleX(0.35);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.16, .84, .44, 1);
}
.rsn-pas-fiesta:hover { transform: translateY(-4px); box-shadow: var(--rsn-realce-alto); }
.rsn-pas-fiesta:hover::before { transform: scaleX(1); }

.rsn-pas-fiesta-mes {
    display: block;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin-bottom: 0.5em;
}

.rsn-pas-fiesta-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-pas-fiesta-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
    margin: 0;
}

.rsn-pas-anio-pie {
    margin-top: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

/* --- La obra: los valores sobre marino, a cinco ----------------------------- */

@media (min-width: 760px)  { .rsn-pas-obra-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rsn-pas-obra-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La entrada sobre marino se lee en claro */
.rsn-pas-obra .rsn-quienes-cabeza .rsn-quienes-entrada { max-width: 60ch; }

/* --- Movimiento reducido --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .rsn-pas-momento figure, .rsn-pas-momento img, .rsn-pas-fiesta, .rsn-pas-fiesta::before { transition: none; }
    .rsn-pas-momento:hover figure, .rsn-pas-momento:hover img, .rsn-pas-fiesta:hover { transform: none; }
}


/* ==========================================================================
   ADMISIÓN · LAS PÁGINAS DE CADA MODALIDAD

   Las pinta inc/admision-modalidad.php (plantillas page-admision-primer-grado
   .php y page-admision-traslados.php) con los datos de inc/admision-datos.php.
   Reutiliza la cabeza y el cierre de Quiénes somos y las puertas de Nosotros;
   lo propio son las cifras clave, la rejilla de vacantes, el cronograma en
   etapas, la ficha de la evaluación, la lista de documentos con casillas y
   las tarjetas de costos.
   ========================================================================== */

/* --- 1 · Apertura y cifras clave ------------------------------------------ */

.rsn-mod-apertura {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-mod-cabeza .rsn-quienes-entrada { margin-bottom: var(--rsn-esp-6); }

.rsn-mod-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsn-esp-3) var(--rsn-esp-4);
}

.rsn-mod-claves {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 560px)  { .rsn-mod-claves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rsn-mod-claves { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* La cifra grande en marino con el rótulo debajo, sobre tarjeta clara con
   filete dorado a la izquierda: el registro de las cifras de la portada. */
.rsn-mod-clave {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-fondo-suave);
    border-left: 4px solid var(--rsn-acento);
}

.rsn-mod-clave-dato {
    display: block;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rsn-marino);
}

.rsn-mod-clave-rotulo {
    display: block;
    margin-top: 0.35em;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
}

.rsn-mod-clave-nota {
    display: block;
    margin-top: 0.4em;
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto-suave);
}

/* --- 2 · Vacantes por grado ------------------------------------------------ */

.rsn-mod-vacantes {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-mod-vacantes-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (min-width: 640px)  { .rsn-mod-vacantes-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rsn-mod-vacante {
    text-align: center;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) var(--rsn-esp-4);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-blanco);
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}
.rsn-mod-vacante:hover { transform: translateY(-4px); box-shadow: var(--rsn-realce-alto); }

.rsn-mod-vacante-numero {
    display: block;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
    line-height: 1;
    color: var(--rsn-azul);
}

.rsn-mod-vacante-grado {
    display: block;
    margin-top: 0.5em;
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    color: var(--rsn-marino);
}

/* Con una o dos vacantes, la cifra va en dorado sobre marino: hay que verlo */
.rsn-mod-vacante--pocas { background: var(--rsn-marino); }
.rsn-mod-vacante--pocas .rsn-mod-vacante-numero { color: var(--rsn-acento-oscuro); }
.rsn-mod-vacante--pocas .rsn-mod-vacante-grado  { color: var(--rsn-blanco); }

/* --- 3 · El cronograma ------------------------------------------------------ */

.rsn-mod-crono {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-mod-etapas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsn-esp-4);
}

/* Cada etapa es una fila: número en círculo dorado, título y fecha, y a la
   derecha el horario y quién atiende. En móvil las tres piezas se apilan. */
.rsn-mod-etapa {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rsn-esp-3) var(--rsn-esp-5);
    align-items: start;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-blanco);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
    box-shadow: var(--rsn-realce);
}

@media (min-width: 800px) {
    .rsn-mod-etapa { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
}

.rsn-mod-etapa-numero {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rsn-acento);
    color: var(--rsn-marino);
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: 1.1rem;
}

.rsn-mod-etapa-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    line-height: 1.25;
    color: var(--rsn-marino);
    margin: 0 0 0.25em;
}

.rsn-mod-etapa-fecha {
    font-size: var(--rsn-txt-base);
    font-weight: 700;
    color: var(--rsn-azul);
    margin: 0;
}

.rsn-mod-etapa-datos {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rsn-esp-4);
    margin: 0;
    padding-top: var(--rsn-esp-3);
    border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
}

@media (min-width: 800px) {
    .rsn-mod-etapa-datos { grid-column: 3; padding-top: 0; border-top: 0; border-left: 1px solid rgba(var(--rsn-tinta-rgb), 0.08); padding-left: var(--rsn-esp-5); }
}

.rsn-mod-etapa-datos dt {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-texto-suave);
    margin-bottom: 0.2em;
}

.rsn-mod-etapa-datos dd {
    margin: 0;
    font-size: var(--rsn-txt-sm);
    line-height: 1.45;
    color: var(--rsn-texto);
}

/* Bajo el cronograma: la guía para llevársela y el enlace a los demás
   documentos, centrados y en fila cuando caben */
.rsn-mod-crono-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--rsn-esp-3) var(--rsn-esp-6);
    margin-top: var(--rsn-esp-8);
}

.rsn-mod-crono-enlace {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 600;
    color: var(--rsn-azul);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.rsn-mod-crono-enlace:hover,
.rsn-mod-crono-enlace:focus-visible { color: var(--rsn-marino); }

/* --- 4 · La evaluación ------------------------------------------------------ */

.rsn-mod-eval {
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    --rsn-acento:       var(--rsn-acento-oscuro);
    --rsn-acento-texto: var(--rsn-acento-oscuro);
}

.rsn-mod-eval-cuerpo {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

@media (min-width: 900px) { .rsn-mod-eval-cuerpo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

.rsn-mod-eval .rsn-quienes-titulo { color: var(--rsn-blanco); }

.rsn-mod-eval-texto {
    font-size: var(--rsn-txt-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 52ch;
}

.rsn-mod-eval-datos {
    margin: 0;
    display: grid;
    gap: var(--rsn-esp-3);
}

.rsn-mod-eval-dato {
    padding: var(--rsn-esp-4) var(--rsn-esp-5);
    border-radius: var(--rsn-radio-lg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.rsn-mod-eval-dato dt {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-acento-oscuro);
    margin-bottom: 0.25em;
}

.rsn-mod-eval-dato dd {
    margin: 0;
    font-size: var(--rsn-txt-base);
    line-height: 1.45;
    color: var(--rsn-blanco);
}

/* --- 5 · Documentos ---------------------------------------------------------- */

.rsn-mod-docs {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-mod-docs-cuerpo {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
}

@media (min-width: 900px) { .rsn-mod-docs-cuerpo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

.rsn-mod-docs-grupo {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-fondo-suave);
}

.rsn-mod-docs-grupo--propios {
    background: rgba(var(--rsn-acento-rgb), 0.16);
    border: 1px solid rgba(var(--rsn-acento-rgb), 0.5);
}

.rsn-mod-docs-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-4);
}

.rsn-mod-docs-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsn-esp-3);
}

/* La casilla: un cuadrado con borde marino y el visto dorado dentro */
.rsn-mod-docs-lista li {
    position: relative;
    padding-left: 2.1rem;
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: var(--rsn-texto);
}

.rsn-mod-docs-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--rsn-marino);
    border-radius: 4px;
    background: var(--rsn-blanco);
}

.rsn-mod-docs-lista li::after {
    content: '';
    position: absolute;
    left: 0.42rem;
    top: 0.22em;
    width: 0.4rem;
    height: 0.75rem;
    border: solid var(--rsn-acento-texto);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* --- 6 · Costos -------------------------------------------------------------- */

.rsn-mod-costos {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-mod-costos-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 640px)  { .rsn-mod-costos-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rsn-mod-costos-rejilla { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }

.rsn-mod-costo {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-blanco);
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}
.rsn-mod-costo:hover { transform: translateY(-4px); box-shadow: var(--rsn-realce-alto); }

.rsn-mod-costo-concepto {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin-bottom: 0.6em;
}

.rsn-mod-costo-importe {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rsn-marino);
    margin-bottom: 0.5em;
}

.rsn-mod-costo-nota {
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: var(--rsn-texto-suave);
    overflow-wrap: anywhere;
}

/* --- 7 · Criterios ----------------------------------------------------------- */

.rsn-mod-criterios { background: var(--rsn-blanco); }

.rsn-mod-criterios-cuerpo {
    padding-block: clamp(3rem, 6vw, 5rem);
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 900px) { .rsn-mod-criterios-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }

.rsn-mod-criterios .rsn-quienes-filete { margin-bottom: 0; }

.rsn-mod-criterios-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: criterio;
    display: grid;
    gap: var(--rsn-esp-4);
}

.rsn-mod-criterios-lista li {
    position: relative;
    padding-left: 2.75rem;
    font-size: var(--rsn-txt-base);
    line-height: 1.55;
    color: var(--rsn-texto);
    counter-increment: criterio;
}

.rsn-mod-criterios-lista li::before {
    content: counter(criterio, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.15em;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-acento-texto);
    letter-spacing: 0.08em;
}

.rsn-mod-nee {
    margin: var(--rsn-esp-6) 0 0;
    padding: var(--rsn-esp-4) var(--rsn-esp-5);
    border-left: 4px solid var(--rsn-acento);
    background: var(--rsn-fondo-suave);
    border-radius: 0 var(--rsn-radio) var(--rsn-radio) 0;
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
}

/* --- Las puertas en la página madre ------------------------------------------ */

.rsn-mod-puertas {
    background: var(--rsn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-mod-puertas-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 700px) { .rsn-mod-puertas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La puerta y, debajo, el botón de su guía en PDF: la tarjeta sigue siendo
   un solo enlace (a la página de la modalidad) y el botón otro, así que no
   hay un enlace dentro de otro. */
.rsn-mod-puertas-rejilla .rsn-nos-puerta {
    display: flex;
    flex-direction: column;
    gap: var(--rsn-esp-4);
}
.rsn-mod-puertas-rejilla .rsn-nos-puerta-enlace { flex: 1 1 auto; }
.rsn-mod-puerta-guia { align-self: center; }

/* Ancla invisible que no ocupa sitio y deja la sección bajo la cabecera
   fija (scroll-padding-top ya lo compensa). */
.rsn-ancla { display: block; height: 0; }

@media (prefers-reduced-motion: reduce) {
    .rsn-mod-vacante, .rsn-mod-costo { transition: none; }
    .rsn-mod-vacante:hover, .rsn-mod-costo:hover { transform: none; }
}


/* ==========================================================================
   COMUNIDAD

   La pinta inc/comunidad.php (plantilla page-comunidad.php) con las piezas
   de Quiénes somos y de Nosotros: apertura con collage, las puertas, las
   tarjetas de noticia de la portada, las tarjetas sobre marino y el cierre.
   Lo propio: las puertas a cuatro columnas, las noticias a tres sin
   destacada y los servicios como tarjetas-enlace.
   ========================================================================== */

@media (min-width: 1000px) { .rsn-com-puertas-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Las últimas noticias: tres iguales, sin la destacada de la portada */
.rsn-com-noticias {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

@media (min-width: 620px)  { .rsn-com-noticias-rejilla.rsn-noticias-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rsn-com-noticias-rejilla.rsn-noticias-mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rsn-com-noticias-pie {
    margin-top: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

/* Los servicios: la tarjeta entera es el enlace, con flecha */
.rsn-com-servicio { padding: 0; }

.rsn-com-servicio-enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    color: inherit;
    text-decoration: none;
}
.rsn-com-servicio-enlace:hover,
.rsn-com-servicio-enlace:focus-visible { color: inherit; text-decoration: none; }
.rsn-com-servicio-enlace:focus-visible { outline: 3px solid var(--rsn-acento-oscuro); outline-offset: 3px; border-radius: var(--rsn-radio-lg); }

.rsn-com-servicio .rsn-quienes-valor-titulo { display: block; }
.rsn-com-servicio .rsn-quienes-valor-texto  { display: block; flex: 1; }

.rsn-com-servicio-flecha {
    display: inline-block;
    margin-top: var(--rsn-esp-5);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--rsn-acento-oscuro);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}
.rsn-com-servicio:hover .rsn-com-servicio-flecha { transform: translateX(8px); }

/* Con solo tres o cuatro servicios, a cuatro columnas cuando cabe */
@media (min-width: 1100px) { .rsn-com-servicios-rejilla { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
    .rsn-com-servicio-flecha { transition: none; }
    .rsn-com-servicio:hover .rsn-com-servicio-flecha { transform: none; }
}


/* ==========================================================================
   PROPUESTA EDUCATIVA

   La pinta inc/propuesta.php (cinco plantillas page-propuesta*.php) con las
   piezas de Quiénes somos, Nosotros y Pastoral. Lo propio: la fila de cifras
   del nivel, la rejilla de áreas con icono y el resumen por nivel en el plan.
   ========================================================================== */

/* --- Las cifras del nivel --------------------------------------------------- */

.rsn-prop-cifras {
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.rsn-prop-cifras-fila {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rsn-esp-4) var(--rsn-esp-6);
}

@media (min-width: 900px) { .rsn-prop-cifras-fila { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.rsn-prop-cifra { text-align: center; }

.rsn-prop-cifra-dato {
    display: block;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rsn-acento-oscuro);
}

.rsn-prop-cifra--grados .rsn-prop-cifra-dato { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); color: var(--rsn-blanco); padding-top: 0.35em; }

.rsn-prop-cifra-rotulo {
    display: block;
    margin-top: 0.4em;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 899px) { .rsn-prop-cifra--grados { grid-column: 1 / -1; } }

/* --- Las áreas ---------------------------------------------------------------- */

.rsn-prop-plan,
.rsn-prop-nivel-areas {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.rsn-prop-nivel-areas { background: var(--rsn-blanco); }

.rsn-prop-areas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 620px)  { .rsn-prop-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rsn-prop-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rsn-prop-areas--breve { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tarjeta con el icono en círculo y el número grande al fondo, como las
   claves de Quiénes somos; en la versión breve solo icono y nombre. */
.rsn-prop-area {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-blanco);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.06);
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}
.rsn-prop-nivel-areas .rsn-prop-area { background: var(--rsn-fondo-suave); }
.rsn-prop-area:hover { transform: translateY(-5px); box-shadow: var(--rsn-realce-alto); }

.rsn-prop-area::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--rsn-acento);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.16, .84, .44, 1);
}
.rsn-prop-area:hover::after { transform: scaleX(1); }

.rsn-prop-area-icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--rsn-azul-rgb), 0.08);
    color: var(--rsn-azul);
    margin-bottom: var(--rsn-esp-5);
    transition: transform .35s ease, background-color .35s ease, color .35s ease;
}
.rsn-prop-area:hover .rsn-prop-area-icono { transform: scale(1.08) rotate(-6deg); background: var(--rsn-azul); color: var(--rsn-blanco); }

.rsn-prop-area-numero {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    line-height: 1;
    color: rgba(var(--rsn-tinta-rgb), 0.07);
}

.rsn-prop-area-titulo {
    font-family: var(--rsn-font-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-prop-areas--breve .rsn-prop-area { padding: clamp(1.25rem, 2.5vw, 1.5rem); display: flex; align-items: center; gap: var(--rsn-esp-4); }
.rsn-prop-areas--breve .rsn-prop-area-icono { width: 48px; height: 48px; margin: 0; flex: none; }
.rsn-prop-areas--breve .rsn-prop-area-titulo { margin: 0; font-size: var(--rsn-txt-base); }
.rsn-prop-areas--breve .rsn-prop-area-numero { display: none; }

.rsn-prop-area-texto {
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
    color: var(--rsn-texto-suave);
    margin: 0;
}

.rsn-prop-areas-pie { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* --- El resumen por nivel, sobre marino -------------------------------------- */

@media (min-width: 760px) { .rsn-prop-niveles-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rsn-prop-nivel-grados {
    display: block;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-acento-oscuro);
    margin-top: 0.35em;
}

.rsn-prop-nivel-lista {
    list-style: none;
    margin: var(--rsn-esp-4) 0 var(--rsn-esp-5);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsn-esp-2);
}

.rsn-prop-nivel-lista li {
    padding: 0.35em 0.8em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    color: var(--rsn-blanco);
}

.rsn-prop-nivel-enlace {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    color: var(--rsn-acento-oscuro);
    text-decoration: none;
}
.rsn-prop-nivel-enlace:hover { color: var(--rsn-blanco); }

/* La banda del estilo en la portada */
.rsn-prop-banda-accion { margin: var(--rsn-esp-6) 0 0; padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .rsn-prop-area, .rsn-prop-area::after, .rsn-prop-area-icono { transition: none; }
    .rsn-prop-area:hover, .rsn-prop-area:hover .rsn-prop-area-icono { transform: none; }
    .rsn-prop-area:hover::after { transform: scaleX(1); }
}


/* ==========================================================================
   LIBRO DE RECLAMACIONES

   Plantilla page-reclamaciones.php, pintada por inc/reclamaciones.php.
   Misma composición que Contacto: a la izquierda quién es el proveedor y qué
   es un reclamo y qué una queja; a la derecha la Hoja de Reclamación en la
   tarjeta blanca de los formularios (.rsn-con-ficha). La hoja es larga, así
   que la columna de la ficha es la ancha y la de texto se queda pegada
   arriba al bajar.
   ========================================================================== */

.rsn-rec-cuerpo {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

@media (min-width: 960px) {
    .rsn-rec-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
    .rsn-rec-decir  { position: sticky; top: 7rem; }
}

.rsn-rec-decir .rsn-quienes-filete { margin-bottom: var(--rsn-esp-5); }

.rsn-rec-decir .rsn-quienes-entrada {
    margin: 0 0 var(--rsn-esp-6);
    max-width: 52ch;
}

/* Quién responde: razón social, RUC y domicilio, como ficha de registro */
.rsn-rec-proveedor {
    margin: 0 0 var(--rsn-esp-6);
    padding: var(--rsn-esp-5);
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-fondo-suave);
    display: grid;
    gap: var(--rsn-esp-3);
}

.rsn-rec-proveedor > div {
    display: grid;
    gap: 0.15em;
}

.rsn-rec-proveedor dt {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rsn-azul);
}

.rsn-rec-proveedor dd {
    margin: 0;
    font-size: var(--rsn-txt-base);
    line-height: 1.5;
    color: var(--rsn-texto);
}

/* Reclamo o queja: las dos definiciones, con el término en marino */
.rsn-rec-tipos {
    display: grid;
    gap: var(--rsn-esp-3);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-rec-tipos p {
    margin: 0;
    padding-left: var(--rsn-esp-4);
    border-left: 3px solid var(--rsn-acento);
    font-size: var(--rsn-txt-base);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
}

.rsn-rec-tipos strong { color: var(--rsn-marino); }

/* El aviso legal, pequeño y sereno: es lo que la ley manda decir */
.rsn-rec-aviso {
    margin: 0;
    font-size: var(--rsn-txt-xs);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
    max-width: 52ch;
}

/* --- La hoja ------------------------------------------------------------- */

.rsn-rec-ficha .rsn-con-ficha-bajada { margin-bottom: var(--rsn-esp-5); }

/* Cada bloque de la hoja, numerado como en el formato oficial */
.rsn-rec-grupo {
    margin: 0;
    padding: 0 0 var(--rsn-esp-5);
    border: 0;
    border-bottom: 1px solid rgba(var(--rsn-tinta-rgb), 0.10);
    min-width: 0;
    display: grid;
    gap: var(--rsn-esp-4);
}

.rsn-rec-grupo legend {
    float: left;               /* para que el grid del fieldset lo respete */
    width: 100%;
    margin: 0 0 var(--rsn-esp-2);
    padding: 0;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rsn-azul);
}

.rsn-rec-grupo legend + * { clear: both; }

/* Reclamo o queja: dos opciones grandes, se marca la elegida */
.rsn-rec-tipo {
    display: grid;
    gap: var(--rsn-esp-3);
}
@media (min-width: 600px) { .rsn-rec-tipo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rsn-rec-radio,
.rsn-rec-check {
    display: flex;
    gap: var(--rsn-esp-3);
    align-items: flex-start;
    cursor: pointer;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: var(--rsn-texto);
}

.rsn-rec-radio {
    padding: var(--rsn-esp-4);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.16);
    border-radius: var(--rsn-radio-sm);
    background: var(--rsn-fondo-suave);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.rsn-rec-radio:has(input:checked) {
    background: var(--rsn-blanco);
    border-color: var(--rsn-azul);
    box-shadow: 0 0 0 3px rgba(var(--rsn-azul-rgb), 0.16);
}

.rsn-rec-radio input,
.rsn-rec-check input {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    margin: 0.2em 0 0;
    accent-color: var(--rsn-azul);
}

.rsn-rec-radio strong { color: var(--rsn-marino); }

.rsn-rec-tipo .rsn-adm-error { grid-column: 1 / -1; }

.rsn-rec-check { color: var(--rsn-texto-suave); }
.rsn-rec-check .rsn-adm-error { flex-basis: 100%; }

/* El código de la hoja, en el agradecimiento: grande, para anotarlo */
.rsn-rec-codigo {
    margin: 0;
    font-size: var(--rsn-txt-base);
    color: var(--rsn-texto-suave);
}

.rsn-rec-codigo strong {
    display: inline-block;
    margin-left: 0.3em;
    padding: 0.2em 0.6em;
    border-radius: var(--rsn-radio-sm);
    background: var(--rsn-fondo-suave);
    font-family: var(--rsn-font-body);
    font-size: 1.1em;
    letter-spacing: 0.06em;
    color: var(--rsn-marino);
}

.rsn-rec-gracias-enlace { margin: 0; }


/* ==========================================================================
   AGUINALDO · LA PÁGINA

   Plantilla page-aguinaldo.php, pintada por inc/aguinaldo-pagina.php. Reusa
   las piezas de Nosotros (cabeza, cita, claves, valores, bandas, cierre) y
   la composición de la hoja; lo propio de aquí son la apertura con el
   retrato del Rector Mayor, las fechas del contexto, la lista de frases y el
   video del cierre.
   ========================================================================== */

.rsn-agui-apertura { padding-block: clamp(3rem, 6vw, 5.5rem); }

.rsn-agui-apertura-cuerpo {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
}

@media (min-width: 900px) {
    .rsn-agui-apertura-cuerpo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.rsn-agui-apertura-decir .rsn-quienes-filete { margin-block: var(--rsn-esp-5) var(--rsn-esp-5); }

.rsn-agui-lema { margin-bottom: var(--rsn-esp-2); }

.rsn-agui-sub {
    margin: 0;
    font-family: var(--rsn-font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem);
    line-height: 1.25;
    color: var(--rsn-azul);
}

.rsn-agui-apertura-decir .rsn-quienes-entrada { margin: 0; max-width: 60ch; }

/* El retrato: el mismo recorte sin fondo de la portada, apoyado en un
   bloque marino con la ficha debajo, como los retratos de Dirección */
.rsn-agui-retrato {
    margin: 0;
    justify-self: center;
    width: min(100%, 22rem);
    display: grid;
    justify-items: center;
}

.rsn-agui-retrato img {
    display: block;
    width: min(100%, 17rem);
    height: auto;
    margin-bottom: -1px;
    filter: drop-shadow(0 12px 24px rgba(var(--rsn-tinta-rgb), 0.25));
}

.rsn-agui-retrato figcaption {
    width: 100%;
    padding: var(--rsn-esp-4) var(--rsn-esp-5);
    border-radius: var(--rsn-radio);
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    text-align: center;
    display: grid;
    gap: 0.15em;
}

.rsn-agui-retrato strong {
    font-family: var(--rsn-font-display);
    font-size: var(--rsn-txt-base);
}

.rsn-agui-retrato span {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    color: rgba(255, 255, 255, 0.8);
}

/* Qué es: la hoja. En pantalla estrecha el texto va alineado a la
   izquierda: justificado en una columna de 40 caracteres abre ríos. */
.rsn-agui-que-es { padding-block: clamp(3rem, 6vw, 5rem); }
.rsn-agui-que-es .rsn-quienes-titulo { margin-bottom: var(--rsn-esp-4); }
@media (max-width: 899px) {
    .rsn-agui-que-es .rsn-perfiles-entrada { text-align: left; hyphens: none; }
}

/* Caná: el texto a la izquierda y el cartel oficial a la derecha, en una
   tarjeta con la misma sombra y el mismo gesto al pasar el ratón que el
   resto de cajas; debajo, las tres claves a todo el ancho */
.rsn-agui-cana-cuerpo {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
    .rsn-agui-cana-cuerpo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.rsn-agui-cana-texto--sigue { margin-top: var(--rsn-esp-4) !important; }

.rsn-agui-cana-texto {
    max-width: 72ch;
    margin: calc(-1 * var(--rsn-esp-4)) 0 0;
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto-suave);
}

.rsn-agui-cartel {
    margin: 0;
    width: 100%;             /* en móvil, a sangre como las cajas de abajo */
    justify-self: center;
    border-radius: var(--rsn-radio-lg);
    overflow: hidden;
    background: var(--rsn-blanco);
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

@media (min-width: 900px) {
    .rsn-agui-cartel { width: min(100%, 24rem); }
}

.rsn-agui-cartel:hover {
    transform: translateY(-6px);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-agui-cartel img {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
    transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}

.rsn-agui-cartel:hover img { transform: scale(1.03); }

.rsn-agui-cartel figcaption {
    position: relative;      /* por encima de la imagen agrandada */
    padding: var(--rsn-esp-3) var(--rsn-esp-4);
    background: var(--rsn-marino);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    text-align: center;
}

/* Las cinco ánforas: tres columnas en tableta, cinco en escritorio ancho.
   minmax(0, 1fr) y no 1fr a secas: «Corresponsabilidad» en la tipografía de
   los títulos no cabe en una quinta parte y, con el mínimo automático, la
   columna se estiraba y la fila desbordaba la página. */
@media (min-width: 1100px) {
    .rsn-agui-anforas-rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.rsn-agui-anforas .rsn-quienes-valor { padding: clamp(1.5rem, 2.5vw, 2rem); }

.rsn-agui-anforas .rsn-quienes-valor-titulo {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
    hyphens: manual;   /* «Correspon­sabilidad» lleva guion blando en los datos */
}

/* El contexto: texto y, al lado, las tres fechas */
.rsn-agui-contexto { padding-block: clamp(3rem, 6vw, 5rem); }

.rsn-agui-contexto-cuerpo {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

@media (min-width: 900px) {
    .rsn-agui-contexto-cuerpo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.rsn-agui-contexto-decir .rsn-quienes-cabeza { margin-bottom: var(--rsn-esp-4); }

.rsn-agui-parrafo {
    max-width: 62ch;
    margin: 0 0 var(--rsn-esp-4);
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto-suave);
}

.rsn-agui-fechas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsn-esp-3);
}

.rsn-agui-fecha {
    padding: var(--rsn-esp-4) var(--rsn-esp-5);
    border-left: 4px solid var(--rsn-acento);
    border-radius: 0 var(--rsn-radio) var(--rsn-radio) 0;
    background: var(--rsn-fondo-suave);
    display: grid;
    gap: 0.2em;
}

.rsn-agui-fecha-dato {
    font-family: var(--rsn-font-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
    letter-spacing: 0.02em;
    color: var(--rsn-marino);
}

.rsn-agui-fecha-rotulo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto-suave);
}

/* Las frases del Rector Mayor: a la izquierda su retrato sobre marino, como
   firma; a la derecha las frases, sin viñetas y con filete dorado (las
   comillas ya van en el texto) */
.rsn-agui-voces { padding-block: clamp(3rem, 6vw, 5rem); }

.rsn-agui-voces-cuerpo {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

@media (min-width: 900px) {
    .rsn-agui-voces-cuerpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); }
}

/* La tarjeta se comporta como las demás cajas del sitio: sombra en reposo,
   se levanta al pasar el ratón y la foto se acerca un poco */
.rsn-agui-voces-figura {
    margin: 0;
    width: 100%;             /* en móvil, a sangre como las demás cajas */
    justify-self: center;
    border-radius: var(--rsn-radio-lg);
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    overflow: hidden;
    display: grid;
    justify-items: center;
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

@media (min-width: 900px) {
    .rsn-agui-voces-figura { width: min(100%, 26rem); }
}

.rsn-agui-voces-figura:hover {
    transform: translateY(-6px);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-agui-voces-figura .rsn-agui-voces-foto-img { transition: transform .6s cubic-bezier(.16, .84, .44, 1); }
.rsn-agui-voces-figura:hover .rsn-agui-voces-foto-img { transform: scale(1.04); }

/* El recorte sin fondo se apoya en el borde inferior del bloque, con aire
   arriba; una foto real ocupa toda la caja */
.rsn-agui-voces-recorte {
    display: block;
    width: 70%;
    height: auto;
    margin-top: var(--rsn-esp-6);
}

.rsn-agui-voces-figura--foto .rsn-agui-voces-foto-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.rsn-agui-voces-figura figcaption {
    width: 100%;
    padding: var(--rsn-esp-4) var(--rsn-esp-5);
    border-top: 3px solid var(--rsn-acento-oscuro);
    text-align: center;
    display: grid;
    gap: 0.15em;
}

.rsn-agui-voces-figura strong {
    font-family: var(--rsn-font-display);
    font-size: var(--rsn-txt-base);
}

.rsn-agui-voces-figura span {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    color: rgba(255, 255, 255, 0.8);
}

.rsn-agui-voces-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rsn-esp-5);
    max-width: 70ch;
}

.rsn-agui-voces-lista li {
    padding: var(--rsn-esp-2) 0 var(--rsn-esp-2) var(--rsn-esp-6);
    border-left: 4px solid var(--rsn-acento);
    font-family: var(--rsn-font-display);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
    line-height: 1.4;
    color: var(--rsn-marino);
    text-wrap: balance;
}

/* En nuestro colegio: texto libre del Personalizador */
.rsn-agui-colegio { padding-block: clamp(3rem, 6vw, 5rem); }

.rsn-agui-colegio-cuerpo { max-width: 72ch; }

.rsn-agui-colegio-texto p {
    margin: 0 0 var(--rsn-esp-4);
    font-size: var(--rsn-txt-base);
    line-height: 1.7;
    color: var(--rsn-texto);
}

/* El video, dentro del cierre oscuro, antes de los botones */
.rsn-agui-video {
    width: min(100%, 52rem);
    margin: 0 auto var(--rsn-esp-8);
    aspect-ratio: 16 / 9;
    border-radius: var(--rsn-radio-lg);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    background: #000;
}

.rsn-agui-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   HORARIO DE ATENCIÓN A PADRES DE FAMILIA

   Lo pinta [rsn_horarios] (inc/horarios.php) con los datos de
   inc/horarios-datos.php. Grupos → áreas → tablas.

   Una tabla de verdad, con <thead> y <th scope>, porque son datos tabulares
   y así los lee un lector de pantalla. En móvil no cabe: cada fila pasa a ser
   una tarjeta y cada celda escribe su rótulo delante, tomado de data-rotulo.
   El truco —display:block sobre las celdas— es el único que respeta el
   marcado semántico y no obliga a mantener dos versiones del contenido.
   ========================================================================== */

.rsn-horarios { margin-block: var(--rsn-esp-8); }

/* --- El aviso: cómo pedir la cita ---------------------------------------- */

.rsn-horarios-aviso {
    max-width: 68rem;
    padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--rsn-fondo-suave);
    border-left: var(--rsn-filete) solid var(--rsn-acento);
    border-radius: 0 var(--rsn-radio) var(--rsn-radio) 0;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.rsn-horarios-desde {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-3);
}

.rsn-horarios-reglas {
    margin: 0;
    padding-left: 1.2em;
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: var(--rsn-texto);
}
.rsn-horarios-reglas li + li { margin-top: var(--rsn-esp-2); }
.rsn-horarios-reglas li::marker { color: var(--rsn-acento-texto); }

/* --- Grupos y áreas ------------------------------------------------------ */

.rsn-horarios-grupo + .rsn-horarios-grupo { margin-top: clamp(2.5rem, 5vw, 4rem); }

.rsn-horarios-grupo-titulo {
    font-size: var(--rsn-h3);
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: var(--rsn-esp-3);
    border-bottom: var(--rsn-filete) solid var(--rsn-acento);
    display: inline-block;
}

/* El nombre del área es el caption de su tabla: va arriba, alineado a la
   izquierda, como un subtítulo pequeño en mayúsculas. */
.rsn-horarios-area {
    caption-side: top;
    text-align: left;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rsn-texto-suave);
    padding: 0 0 var(--rsn-esp-2);
}

.rsn-horarios-tabla-marco + .rsn-horarios-tabla-marco { margin-top: var(--rsn-esp-6); }

/* --- La tabla ------------------------------------------------------------- */

.rsn-horarios-tabla {
    width: 100%;
    /* Anchos fijos por columna, iguales en todas las tablas de la página. Sin
       esto cada tabla reparte el ancho según su contenido y, al ir una debajo
       de otra, las columnas bailan de una a la siguiente. */
    table-layout: fixed;
    border-collapse: collapse;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    line-height: 1.45;
    background: var(--rsn-blanco);
    border: 1px solid var(--rsn-borde);
    border-radius: var(--rsn-radio);
    overflow: hidden;
}

/* Con o sin primera columna, el horario y el lugar empiezan en el mismo sitio
   (54 % y 84 %): así las tablas de tutores y las de áreas, una debajo de
   otra, comparten la misma vertical. */
.rsn-horarios-col-nombre  { width: 54%; }
.rsn-horarios-col-horario { width: 30%; }
.rsn-horarios-col-lugar   { width: 16%; }

.rsn-horarios-tabla--con-cargo .rsn-horarios-col-cargo   { width: 24%; }
.rsn-horarios-tabla--con-cargo .rsn-horarios-col-nombre  { width: 30%; }
.rsn-horarios-tabla--con-cargo .rsn-horarios-col-horario { width: 30%; }
.rsn-horarios-tabla--con-cargo .rsn-horarios-col-lugar   { width: 16%; }

.rsn-horarios-tabla thead th {
    /* Cabecera oscura: el acento se lee sobre ella como en cualquier banda. */
    --rsn-acento: var(--rsn-acento-oscuro);
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: var(--rsn-esp-3) var(--rsn-esp-4);
    border-bottom: 2px solid var(--rsn-acento);
}

.rsn-horarios-tabla tbody th,
.rsn-horarios-tabla tbody td {
    padding: var(--rsn-esp-3) var(--rsn-esp-4);
    border-bottom: 1px solid var(--rsn-borde);
    vertical-align: top;
    text-align: left;
}
.rsn-horarios-tabla tbody tr:last-child > * { border-bottom: 0; }
.rsn-horarios-tabla tbody tr:nth-child(even) { background: var(--rsn-fondo-suave); }

.rsn-horarios-cargo {
    font-weight: 700;
    color: var(--rsn-marino);
}
.rsn-horarios-nombre { color: var(--rsn-texto); }
.rsn-horarios-horario { color: var(--rsn-texto); }

/* Las etiquetas: el rol bajo el nombre y la cita bajo el horario, en texto
   pequeño y no en píldoras de colores — la tabla ya tiene bastante ritmo. */
.rsn-horarios-rol,
.rsn-horarios-cita {
    display: block;
    font-size: var(--rsn-txt-xs);
    color: var(--rsn-texto-suave);
    margin-top: 0.15em;
}
.rsn-horarios-cita { color: var(--rsn-acento-texto); font-weight: 700; }

/* El lugar sí va en píldora: es lo que la familia busca al llegar al colegio. */
.rsn-horarios-modulo {
    display: inline-block;
    padding: 0.15em 0.7em;
    border-radius: 999px;
    background: rgba(var(--rsn-azul-rgb), 0.10);
    color: var(--rsn-azul);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* --- Móvil: cada fila, una tarjeta ---------------------------------------- */

@media (max-width: 760px) {

    .rsn-horarios-tabla,
    .rsn-horarios-tabla tbody,
    .rsn-horarios-tabla tr,
    .rsn-horarios-tabla tbody th,
    .rsn-horarios-tabla tbody td { display: block; }

    .rsn-horarios-tabla { border: 0; background: transparent; overflow: visible; table-layout: auto; }
    .rsn-horarios-tabla thead { display: none; }
    .rsn-horarios-area { display: block; }

    .rsn-horarios-tabla tbody tr {
        background: var(--rsn-blanco);
        border: 1px solid var(--rsn-borde);
        border-radius: var(--rsn-radio);
        overflow: hidden;
        box-shadow: var(--rsn-sombra);
    }
    .rsn-horarios-tabla tbody tr:nth-child(even) { background: var(--rsn-blanco); }
    .rsn-horarios-tabla tbody tr + tr { margin-top: var(--rsn-esp-3); }

    /* La primera columna es la cabecera de la tarjeta */
    .rsn-horarios-tabla tbody th.rsn-horarios-cargo {
        background: var(--rsn-marino);
        color: var(--rsn-blanco);
        white-space: normal;
        border-bottom: 0;
    }

    .rsn-horarios-tabla tbody td {
        padding: var(--rsn-esp-2) var(--rsn-esp-4);
        border-bottom: 1px solid var(--rsn-borde);
    }
    .rsn-horarios-tabla tbody td:last-child { border-bottom: 0; padding-bottom: var(--rsn-esp-3); }
    .rsn-horarios-tabla tbody td:nth-last-child(2) { padding-bottom: var(--rsn-esp-3); }
    .rsn-horarios-lugar--vacio { display: none; }

    /* El rótulo de cada dato, sacado del atributo */
    .rsn-horarios-tabla tbody td::before {
        content: attr(data-rotulo);
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--rsn-texto-suave);
        margin-bottom: 0.1em;
    }
}

@media print {
    .rsn-horarios-tabla-marco { break-inside: avoid; }
    .rsn-horarios-tabla thead th { background: none; color: var(--rsn-marino); border-bottom: 1px solid var(--rsn-marino); }
}

@media print {
    .rsn-adm-ficha,
    .rsn-adm-portada-botones,
    .rsn-adm-cierre-botones { display: none; }
    .rsn-adm-pilar { break-inside: avoid; }
}


/* ==========================================================================
   LA NOTICIA ABIERTA

   La genera inc/articulo.php desde single.php.

   UNA SOLA MEDIDA PARA TODO

   Texto, fotografía de portada y galerías comparten el mismo ancho. Es lo que
   da al artículo un eje único de arriba abajo: en cuanto la foto es más ancha
   que el texto, cada imagen obliga al ojo a recolocarse y la lectura se
   entrecorta. 46 rem son unas 74 letras por línea, que con el texto justificado
   y partición de palabras es una medida cómoda.
   ========================================================================== */

.rsn-articulo {
    /* La medida, en un solo sitio. La usan la cabecera, la portada, el cuerpo,
       las galerías y el pie. */
    --rsn-lectura: 46rem;
    padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
}

.rsn-articulo-cabeza,
.rsn-articulo-cuerpo,
.rsn-articulo-pie {
    max-width: var(--rsn-lectura);
    margin-inline: auto;
}

/* La portada cuelga de un `.rsn-contenedor` propio —es la única pieza que
   rompe la caja del artículo—, y ese contenedor lleva su relleno lateral. Sin
   sumarlo aquí, la foto salía 94 px más estrecha que el texto: justo el
   descuadre que este cambio venía a quitar. */
.rsn-articulo-portada > .rsn-contenedor {
    max-width: calc(var(--rsn-lectura) + clamp(1rem, 3vw, 3rem) * 2);
    margin-inline: auto;
}

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

.rsn-articulo-cabeza { text-align: center; }

.rsn-articulo-migas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--rsn-esp-4);
}

.rsn-articulo-migas a {
    color: var(--rsn-acento-texto);
    text-decoration: none;
}

.rsn-articulo-migas a:hover,
.rsn-articulo-migas a:focus-visible { color: var(--rsn-azul); }

.rsn-articulo-migas span { color: var(--rsn-texto-suave); }

.rsn-articulo-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.8rem, 1.35rem + 1.8vw, 2.75rem);
    line-height: 1.15;
    color: var(--rsn-marino);
    /* Equilibrado: reparte las palabras entre los renglones en vez de dejar
       una sola colgando al final, que en un titular centrado se ve mucho. */
    text-wrap: balance;
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-articulo-autor {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rsn-azul);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-articulo-datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em clamp(1.25rem, 3vw, 2.5rem);
    font-family: var(--rsn-font-body);
    font-size: 0.75rem;              /* 12px */
    letter-spacing: 0.06em;
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-6);
    padding-bottom: 0;
}

.rsn-articulo-dato {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.rsn-articulo-dato time,
.rsn-articulo-dato span:last-child {
    font-weight: 700;
    color: var(--rsn-marino);
    text-transform: uppercase;
}

.rsn-articulo-etiqueta {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rsn-texto-suave);
}

/* --- La barra de compartir ------------------------------------------------ */

.rsn-compartir {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--rsn-esp-2);
}

.rsn-compartir-boton {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--rsn-texto-suave);
    background: var(--rsn-fondo-suave);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.10);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.16, .84, .44, 1), box-shadow .25s ease;
}

.rsn-compartir-boton:hover,
.rsn-compartir-boton:focus-visible {
    background: var(--rsn-azul);
    border-color: var(--rsn-azul);
    color: var(--rsn-blanco);
    transform: translateY(-2px);
    box-shadow: var(--rsn-realce);
}

.rsn-compartir-boton:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

/* El aviso de «Enlace copiado», FUERA DEL FLUJO.

   Estaba dentro, con un ancho mínimo para que la fila no diera un salto al
   aparecer el texto, y ese ancho contaba para el reparto: los iconos quedaban
   desplazados a la izquierda del centro justo lo que medía el aviso. Colgado
   debajo en posición absoluta, la fila se centra por los iconos y el aviso
   aparece y desaparece sin mover nada. */
.rsn-compartir-aviso {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    white-space: nowrap;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--rsn-acento-texto);
}

/* Para lectores de pantalla: el nombre de cada botón, que en pantalla lo dice
   el icono. */
.rsn-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .rsn-compartir-boton { transition: background-color .2s ease, color .2s ease; }
    .rsn-compartir-boton:hover,
    .rsn-compartir-boton:focus-visible { transform: none; }
}

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

.rsn-articulo-portada { margin: clamp(1.75rem, 3.5vw, 2.75rem) 0; }

.rsn-articulo-imagen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rsn-radio);
    box-shadow: var(--rsn-realce);
}

.rsn-articulo-portada figcaption {
    margin: var(--rsn-esp-3) 0 0;
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: var(--rsn-texto-suave);
}

/* --- El cuerpo -----------------------------------------------------------

   El contenido lo escribe el colegio desde WordPress, así que aquí no hay
   clases: se dan estilos a las etiquetas que salgan del editor. Es el único
   sitio del kit donde tiene sentido hacerlo.
   ------------------------------------------------------------------------- */

.rsn-articulo-cuerpo {
    font-size: var(--rsn-txt-base);
    line-height: 1.75;
    color: var(--rsn-texto);
}

/* JUSTIFICADO, CON PARTICIÓN DE PALABRAS

   El justificado sin partición abre ríos de blanco entre palabras —en la
   franja de misión llegamos a medir espacios estirados 2,5 veces—. Con
   `hyphens: auto` el navegador parte por sílabas usando el diccionario del
   idioma del documento, y el estiramiento se reparte. Es la única forma de
   justificar sin castigar la lectura.

   Queda anotado que la WCAG 1.4.8 desaconseja el texto justificado para nivel
   AAA. Con partición activa el motivo —los ríos— se mitiga mucho, y se puede
   volver a bandera izquierda quitando estas tres líneas. */
.rsn-articulo-cuerpo p {
    text-align: justify;
    hyphens: auto;
    padding-bottom: 0;
}

.rsn-articulo-cuerpo > * + * { margin-top: var(--rsn-esp-6); }

.rsn-articulo-cuerpo h2,
.rsn-articulo-cuerpo h3 {
    font-family: var(--rsn-font-display);
    color: var(--rsn-marino);
    line-height: 1.22;
    /* Más aire encima que debajo: un intertítulo pertenece a lo que viene
       después, no a lo que acaba de terminar. */
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--rsn-esp-4);
}

.rsn-articulo-cuerpo h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
.rsn-articulo-cuerpo h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }

.rsn-articulo-cuerpo a {
    color: var(--rsn-azul);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.rsn-articulo-cuerpo ul,
.rsn-articulo-cuerpo ol { padding-left: 1.4em; }

.rsn-articulo-cuerpo li + li { margin-top: var(--rsn-esp-2); }

.rsn-articulo-cuerpo blockquote {
    margin-inline: 0;
    padding-left: var(--rsn-esp-6);
    border-left: var(--rsn-filete) solid var(--rsn-acento);
    font-family: var(--rsn-font-display);
    font-size: 1.15em;
    line-height: 1.6;
    color: var(--rsn-marino);
}

/* Una cita no se justifica: son dos o tres renglones y el estiramiento se ve
   entero. */
.rsn-articulo-cuerpo blockquote p { text-align: left; }

.rsn-articulo-cuerpo img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--rsn-radio-sm);
}

.rsn-articulo-cuerpo figure { margin-inline: 0; }

.rsn-articulo-cuerpo figcaption {
    margin-top: var(--rsn-esp-3);
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto-suave);
}

/* --- Las galerías --------------------------------------------------------

   HAY QUE DESHACER LO QUE TRAE WORDPRESS

   El bloque «Galería» reparte sus fotos con `flex` y les escribe un ancho
   calculado en cada hija —`width: calc(33.33% - 10.66px)`— y hasta estilos en
   línea. Metido eso dentro de una rejilla, cada figura se queda con su
   porcentaje DEL HUECO DE LA REJILLA en vez del de la fila: de ahí salían las
   miniaturas diminutas y descolocadas. Se anulan esos anchos y manda la
   rejilla.

   El `!important` no es pereza: los estilos que se pisan son en línea o de una
   hoja del núcleo que se carga después de esta, y no hay especificidad que
   valga contra eso.

   LA ÚLTIMA FILA NUNCA QUEDA COJA

   Siete fotos en tres columnas dejan una sola abajo a la izquierda y dos
   huecos a su derecha. Eso es lo que hace que una galería parezca cortada a
   mitad en vez de terminada.

   La rejilla se declara de DOCE columnas en vez de tres, y cada foto ocupa
   cuatro. Doce es divisible entre 2, 3, 4 y 6, así que cualquier reparto de la
   última fila se puede expresar: una huérfana ocupa las doce; dos huérfanas,
   seis cada una. Y quién queda huérfana lo sabe el navegador sin contar nada,
   mirando la posición de la última con `:nth-child` — ni JavaScript, ni que
   nadie cuente las fotos al publicar.

   La que se queda sola a todo el ancho pasa a 16:9. A 4:3 mediría 552 px de
   alto contra los 178 de sus compañeras, y dejaría de leerse como parte de la
   galería para convertirse en un mural.
   ------------------------------------------------------------------------- */

.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--rsn-esp-3);
    list-style: none;
    margin-inline: 0;
    padding: 0;
}

/* La variante antigua lleva un <ul> dentro que es quien debe hacer de rejilla;
   el <figure> de fuera vuelve a ser un bloque normal. */
.rsn-articulo-cuerpo .wp-block-gallery:has(.blocks-gallery-grid) { display: block; }

.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) > :is( figure, li ) {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    grid-column: span 4;             /* tres columnas, que es lo normal */
}

.rsn-articulo-cuerpo .wp-block-gallery.columns-2 > :is( figure, li ) { grid-column: span 6; }
.rsn-articulo-cuerpo .wp-block-gallery.columns-4 > :is( figure, li ) { grid-column: span 3; }
.rsn-articulo-cuerpo .wp-block-gallery.columns-6 > :is( figure, li ) { grid-column: span 2; }

/* --- Las huérfanas de la última fila --------------------------------------

   `:last-child:nth-child(3n + 1)` se lee: «la última, y además en una posición
   que deja resto 1 al dividir entre 3». Es decir, se quedó sola.
   ------------------------------------------------------------------------- */

/* Tres columnas, que es lo normal. */
.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ):not(.columns-2):not(.columns-4):not(.columns-6) > :is( figure, li ):last-child:nth-child(3n + 1) {
    grid-column: span 12;
}

.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ):not(.columns-2):not(.columns-4):not(.columns-6) > :is( figure, li ):last-child:nth-child(3n + 2),
.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ):not(.columns-2):not(.columns-4):not(.columns-6) > :is( figure, li ):nth-last-child(2):nth-child(3n + 1) {
    grid-column: span 6;
}

/* Dos columnas. */
.rsn-articulo-cuerpo .wp-block-gallery.columns-2 > :is( figure, li ):last-child:nth-child(2n + 1) {
    grid-column: span 12;
}

/* Cuatro columnas. */
.rsn-articulo-cuerpo .wp-block-gallery.columns-4 > :is( figure, li ):last-child:nth-child(4n + 1) {
    grid-column: span 12;
}

.rsn-articulo-cuerpo .wp-block-gallery.columns-4 > :is( figure, li ):last-child:nth-child(4n + 2),
.rsn-articulo-cuerpo .wp-block-gallery.columns-4 > :is( figure, li ):nth-last-child(2):nth-child(4n + 1) {
    grid-column: span 6;
}

.rsn-articulo-cuerpo .wp-block-gallery.columns-4 > :is( figure, li ):last-child:nth-child(4n + 3),
.rsn-articulo-cuerpo .wp-block-gallery.columns-4 > :is( figure, li ):nth-last-child(2):nth-child(4n + 2),
.rsn-articulo-cuerpo .wp-block-gallery.columns-4 > :is( figure, li ):nth-last-child(3):nth-child(4n + 1) {
    grid-column: span 4;
}

.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) figure > a {
    display: block;
    height: 100%;
}

/* Todas al mismo formato: una galería de un acto trae verticales y
   horizontales mezcladas, y en su tamaño original la fila queda dentada. */
.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* La huérfana que ocupa las doce columnas, más apaisada. */
.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) > :is( figure, li ):last-child:nth-child(3n + 1) img,
.rsn-articulo-cuerpo .wp-block-gallery.columns-2 > :is( figure, li ):last-child:nth-child(2n + 1) img,
.rsn-articulo-cuerpo .wp-block-gallery.columns-4 > :is( figure, li ):last-child:nth-child(4n + 1) img {
    aspect-ratio: 16 / 9;
}

/* En el móvil todo baja a dos columnas —cuatro son cuatro sellos de correos—,
   y ahí la huérfana vuelve a ser la impar. */
@media (max-width: 700px) {

    .rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) > :is( figure, li ) {
        grid-column: span 6;
    }

    .rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) > :is( figure, li ) img {
        aspect-ratio: 4 / 3;
    }

    .rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) > :is( figure, li ):last-child:nth-child(2n + 1) {
        grid-column: span 12;
    }

    .rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) > :is( figure, li ):last-child:nth-child(2n + 1) img {
        aspect-ratio: 16 / 9;
    }
}

/* El pie de foto que WordPress superpone en la galería estorba a la sombra y
   al aumento, y su sitio ya está en el visor. */
.rsn-articulo-cuerpo :is( .wp-block-gallery, .blocks-gallery-grid ) figcaption { display: none; }



/* --- Ampliar --------------------------------------------------------------

   Cualquier fotografía del artículo se puede abrir. La clase la pone el
   JavaScript, así que si no llega no hay nada que prometa un aumento que
   después no ocurre.
   ------------------------------------------------------------------------- */

.rsn-ampliable {
    cursor: zoom-in;
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}

.rsn-ampliable:hover,
.rsn-ampliable:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-ampliable:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .rsn-ampliable { transition: none; }
    .rsn-ampliable:hover,
    .rsn-ampliable:focus-visible { transform: none; }
}

/* --- El visor ------------------------------------------------------------- */

.rsn-sin-scroll { overflow: hidden; }

.rsn-visor {
    position: fixed;
    inset: 0;
    z-index: 99999;                  /* por encima de la cabecera fija de Divi */
    display: none;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(var(--rsn-tinta-rgb), 0.94);
}

.rsn-visor.esta-abierto { display: grid; }

.rsn-visor-marco {
    margin: 0;
    max-width: min(100%, 1400px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--rsn-esp-3);
    align-items: center;
}

.rsn-visor-marco img {
    display: block;
    max-width: 100%;
    /* El alto disponible menos el sitio del pie y del contador: sin esto una
       foto vertical se sale por abajo y el pie de foto no se ve. */
    max-height: calc(100vh - 11rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--rsn-radio-sm);
}

.rsn-visor-marco figcaption {
    max-width: 62ch;
    text-align: center;
    font-size: var(--rsn-txt-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.rsn-visor-cerrar,
.rsn-visor-mando {
    position: absolute;
    display: grid;
    place-items: center;
    color: var(--rsn-blanco);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s ease;
}

.rsn-visor-cerrar:hover,
.rsn-visor-mando:hover,
.rsn-visor-cerrar:focus-visible,
.rsn-visor-mando:focus-visible { background: rgba(255, 255, 255, 0.22); }

.rsn-visor-cerrar:focus-visible,
.rsn-visor-mando:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

.rsn-visor-cerrar {
    top: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.rsn-visor-mando {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
    line-height: 1;
}

.rsn-visor-atras  { left: clamp(0.5rem, 2vw, 1.5rem); }
.rsn-visor-alante { right: clamp(0.5rem, 2vw, 1.5rem); }

/* Con una sola imagen en el artículo no hay a dónde pasar. */
.rsn-visor--sola .rsn-visor-mando,
.rsn-visor--sola .rsn-visor-cuenta { display: none; }

.rsn-visor-cuenta {
    position: absolute;
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding-bottom: 0;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.80);
}

/* --- El pie del artículo -------------------------------------------------- */

.rsn-articulo-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsn-esp-6) var(--rsn-esp-4);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.10);
}

/* Al pie los iconos no van centrados en la columna sino a la izquierda, con
   «Todas las noticias» al otro extremo: aquí no abren el artículo, lo cierran,
   y una fila con dos extremos se lee como un pie. */
.rsn-compartir--pie { justify-content: flex-start; }

.rsn-articulo-volver {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rsn-azul);
    text-decoration: none;
}

.rsn-articulo-volver::before {
    content: "\2190";
    display: inline-block;
    margin-right: 0.45em;
    transition: transform .25s ease;
}

.rsn-articulo-volver:hover::before,
.rsn-articulo-volver:focus-visible::before { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
    .rsn-articulo-volver::before { transition: none; }
    .rsn-articulo-volver:hover::before,
    .rsn-articulo-volver:focus-visible::before { transform: none; }
}

/* --- Seguir leyendo ------------------------------------------------------- */

.rsn-relacionadas {
    background: var(--rsn-fondo-suave);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.rsn-relacionadas-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
    color: var(--rsn-marino);
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Al imprimir no se llevan ni los mandos ni las noticias de al lado. */
@media print {
    .rsn-compartir,
    .rsn-articulo-pie,
    .rsn-relacionadas,
    .rsn-hablemos,
    .rsn-pie { display: none !important; }
}


/* ==========================================================================
   LISTADO DE NOTICIAS

   Lo genera inc/archivo.php, desde home.php —la página de entradas— y desde
   archive.php. Las tarjetas son las MISMAS que en la portada: se reutiliza
   `rsn_noticia_tarjeta()`, así que aquí solo hay que resolver la cabecera, los
   filtros, la rejilla y la paginación.
   ========================================================================== */

.rsn-archivo { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); }

.rsn-archivo-cabeza {
    max-width: 58ch;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.rsn-archivo-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-archivo-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
    line-height: 1.12;
    color: var(--rsn-marino);
    margin: 0;
}

.rsn-archivo-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.65;
    color: var(--rsn-texto-suave);
    margin: var(--rsn-esp-4) 0 0;
    padding-bottom: 0;
}

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

.rsn-archivo-temas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsn-esp-2);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    border-bottom: 1px solid rgba(var(--rsn-tinta-rgb), 0.10);
}

.rsn-archivo-tema {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rsn-marino);
    text-decoration: none;
    padding: 0.55em 1em;
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.16);
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.rsn-archivo-tema:hover,
.rsn-archivo-tema:focus-visible {
    background: var(--rsn-azul);
    border-color: var(--rsn-azul);
    color: var(--rsn-blanco);
}

/* El tema en el que estás no es un botón que puedas pulsar para llegar donde
   ya estás: se marca lleno y se distingue del resto. */
.rsn-archivo-tema.esta-activo {
    background: var(--rsn-marino);
    border-color: var(--rsn-marino);
    color: var(--rsn-blanco);
}

.rsn-archivo-tema:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

/* --- La rejilla ----------------------------------------------------------- */

.rsn-archivo-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
    grid-template-columns: 1fr;
}

@media (min-width: 620px) {
    .rsn-archivo-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .rsn-archivo-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- La paginación -------------------------------------------------------- */

.rsn-paginacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.rsn-paginacion .page-numbers {
    min-width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding-inline: 0.6em;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 700;
    color: var(--rsn-marino);
    background: var(--rsn-blanco);
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.14);
    border-radius: var(--rsn-radio-sm);
    text-decoration: none;
    box-shadow: var(--rsn-realce);
    transition: background-color .2s ease, color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16, .84, .44, 1);
}

.rsn-paginacion a.page-numbers:hover,
.rsn-paginacion a.page-numbers:focus-visible {
    background: var(--rsn-azul);
    color: var(--rsn-blanco);
    transform: translateY(-2px);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-paginacion .page-numbers.current {
    background: var(--rsn-marino);
    border-color: var(--rsn-marino);
    color: var(--rsn-blanco);
}

/* Los puntos suspensivos no son un botón. */
.rsn-paginacion .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.rsn-paginacion a.page-numbers:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rsn-paginacion .page-numbers { transition: background-color .2s ease, color .2s ease; }
    .rsn-paginacion a.page-numbers:hover,
    .rsn-paginacion a.page-numbers:focus-visible { transform: none; }
}

.rsn-archivo-vacio {
    font-size: var(--rsn-txt-base);
    color: var(--rsn-texto-suave);
    padding-block: clamp(2rem, 5vw, 4rem);
}

.rsn-archivo-vacio a { color: var(--rsn-azul); }


/* ==========================================================================
   FRANJA DE CONTACTO · «HABLEMOS»

   La genera inc/hablemos.php, sobre el pie y en todas las páginas.

   UNA SOLA ACCIÓN CON PESO DE BOTÓN

   WhatsApp es la única pieza con forma de botón. Teléfono, correo, dirección
   y horario van debajo como lista de datos. Cuatro botones del mismo tamaño
   obligan a elegir antes de saber qué se elige; uno solo y bien puesto no.

   El plano es una imagen y no un mapa incrustado —el porqué está en el
   encabezado de inc/hablemos.php—, así que aquí solo hay que darle marco.
   ========================================================================== */

.rsn-hablemos {
    background: var(--rsn-fondo-suave);
    border-top: 1px solid rgba(var(--rsn-tinta-rgb), 0.08);
}

.rsn-hablemos-cuerpo {
    padding-block: clamp(3rem, 6vw, 5rem);
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 900px) {
    .rsn-hablemos-cuerpo {
        /* El plano algo más ancho que el texto: es lo que hay que mirar, y el
           texto de al lado son cuatro líneas cortas que no piden medida. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        align-items: center;
    }

    /* Sin plano no hay dos columnas que repartir: el texto se queda a su
       medida en vez de estirarse a lo ancho de la pantalla. */
    .rsn-hablemos--sin-mapa .rsn-hablemos-cuerpo {
        grid-template-columns: minmax(0, 46rem);
        justify-content: center;
        text-align: center;
    }

    .rsn-hablemos--sin-mapa .rsn-hablemos-datos { justify-content: center; }
}

.rsn-hablemos-ojo {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
    padding-bottom: 0;               /* el relleno fantasma de Divi */
}

.rsn-hablemos-titulo {
    font-family: var(--rsn-font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    line-height: 1.15;
    color: var(--rsn-marino);
    margin: 0 0 var(--rsn-esp-6);
}

.rsn-hablemos-entrada {
    font-size: var(--rsn-txt-base);
    line-height: 1.65;
    color: var(--rsn-texto-suave);
    max-width: 46ch;
    margin: 0 0 var(--rsn-esp-8);
    padding-bottom: 0;
}

.rsn-hablemos--sin-mapa .rsn-hablemos-entrada { margin-inline: auto; }

/* El botón de WhatsApp: icono y texto en la misma línea, y el icono alineado
   ópticamente —`flex` y no un margen a ojo—, que es lo que evita que el texto
   baje un píxel respecto al dibujo. */
.rsn-hablemos-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}

.rsn-hablemos-wa .rsn-hablemos-icono { flex: 0 0 auto; }

.rsn-hablemos-datos {
    list-style: none;
    margin: var(--rsn-esp-8) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsn-esp-4) clamp(1.25rem, 2.5vw, 2.25rem);
}

.rsn-hablemos-datos li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto-suave);
    line-height: 1.4;
}

.rsn-hablemos-datos .rsn-hablemos-icono {
    flex: 0 0 auto;
    color: var(--rsn-azul);
}

.rsn-hablemos-datos a {
    color: var(--rsn-texto);
    text-decoration: none;
}

.rsn-hablemos-datos a:hover,
.rsn-hablemos-datos a:focus-visible { color: var(--rsn-azul); }

/* --- El mapa vivo de Google ----------------------------------------------

   El incrustado `maps/embed?pb=…` no lleva clave de API ni marca de agua —esa
   la estampa la otra vía, la API de JavaScript, cuando le falta facturación—,
   así que la única contrapartida es el peso y las cookies de Google en todas
   las páginas. `loading="lazy"` deja al menos que no se descargue hasta que la
   franja asoma.

   La proporción se declara aquí y no en el marcado: el `width`/`height` que
   Google copia junto al fragmento son medidas fijas en píxeles y en un móvil
   dejan el mapa cortado o con barras.
   ------------------------------------------------------------------------- */

.rsn-hablemos-marco {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    border: 0;
    /* Google pinta el mapa con su propia paleta y no hay forma de estilizarlo
       desde fuera. Un filtro suave —menos saturación y un giro de matiz hacia
       el azul— lo acerca a la del colegio sin tocar la legibilidad: las calles
       siguen claras y las etiquetas siguen leyéndose. Es lo máximo que se
       puede hacer sobre un documento de otro dominio. */
    filter: saturate(0.72) hue-rotate(-10deg) contrast(1.03);
}

.rsn-hablemos-mapa--vivo { box-shadow: var(--rsn-realce); }

.rsn-hablemos-pie-mapa {
    margin: var(--rsn-esp-4) 0 0;
    padding-bottom: 0;               /* el relleno fantasma de Divi */
    text-align: right;
    line-height: 1;
}


/* --- El plano ------------------------------------------------------------- */

.rsn-hablemos-mapa {
    position: relative;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--rsn-realce);
}

.rsn-hablemos-plano {
    display: block;
    width: 100%;
    height: auto;
}

/* Encima del plano y no debajo: pegado al borde inferior derecho ocupa el
   sitio donde un mapa no dice nada, y deja de robarle alto a la franja. */
.rsn-hablemos-llegar {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-block;
    padding: 0.55em 1.1em;
    background: var(--rsn-blanco);
    color: var(--rsn-marino);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(var(--rsn-tinta-rgb), 0.2);
}

.rsn-hablemos-llegar:hover,
.rsn-hablemos-llegar:focus-visible {
    background: var(--rsn-azul);
    color: var(--rsn-blanco);
}

/* --- La tarjeta pulsable -------------------------------------------------

   Cuando hay enlace, el plano entero es el enlace, y tiene que notarse antes
   del clic: se levanta un poco, la sombra se abre, el mapa se acerca dentro
   de su marco y el rótulo se enciende. Los cuatro a la vez y suaves; uno solo
   se lee como un fallo de pintado, y bruscos parecen un anuncio.

   El acercamiento va sobre la IMAGEN y el levantamiento sobre la TARJETA:
   son dos `transform` y uno pisaría al otro si vivieran en el mismo elemento.
   Como la tarjeta ya recorta con `overflow: hidden`, la imagen crece por
   dentro sin desbordar.
   ------------------------------------------------------------------------- */

.rsn-hablemos-mapa--enlace {
    display: block;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.16, .84, .44, 1),
                box-shadow .35s ease;
}

.rsn-hablemos-mapa--enlace .rsn-hablemos-plano {
    transition: transform .5s cubic-bezier(.16, .84, .44, 1);
}

.rsn-hablemos-mapa--enlace .rsn-hablemos-llegar {
    transition: background-color .25s ease, color .25s ease;
}

.rsn-hablemos-mapa--enlace:hover,
.rsn-hablemos-mapa--enlace:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--rsn-realce-alto);
}

.rsn-hablemos-mapa--enlace:hover .rsn-hablemos-plano,
.rsn-hablemos-mapa--enlace:focus-visible .rsn-hablemos-plano {
    transform: scale(1.045);
}

.rsn-hablemos-mapa--enlace:hover .rsn-hablemos-llegar,
.rsn-hablemos-mapa--enlace:focus-visible .rsn-hablemos-llegar {
    background: var(--rsn-azul);
    color: var(--rsn-blanco);
}

/* Quien navega con teclado ve el mismo aviso, y además el cerco: la tarjeta
   no tiene borde propio y sin él no se sabría dónde está el foco. */
.rsn-hablemos-mapa--enlace:focus-visible {
    outline: 3px solid var(--rsn-foco);
    outline-offset: 3px;
}

/* Con «reducir movimiento» quedan el color y la sombra, que dicen lo mismo
   sin desplazar nada. */
@media (prefers-reduced-motion: reduce) {

    .rsn-hablemos-mapa--enlace,
    .rsn-hablemos-mapa--enlace .rsn-hablemos-plano { transition: none; }

    .rsn-hablemos-mapa--enlace:hover,
    .rsn-hablemos-mapa--enlace:focus-visible { transform: none; }

    .rsn-hablemos-mapa--enlace:hover .rsn-hablemos-plano,
    .rsn-hablemos-mapa--enlace:focus-visible .rsn-hablemos-plano { transform: none; }
}


/* Bajo el mapa vivo, en el flujo. Va DESPUÉS de la regla base a propósito:
   con la misma especificidad, gana la última, y si se declarase antes el
   `position: absolute` de arriba seguiría mandando y el enlace se iría a
   buscar un ancestro posicionado fuera de la franja. */
.rsn-hablemos-llegar--suelto {
    position: static;
    box-shadow: none;
    border: 1px solid rgba(var(--rsn-tinta-rgb), 0.15);
}


/* ==========================================================================
   PIE

   Lo genera inc/pie.php, pintado desde footer.php del tema hijo. Cinco
   columnas: marca y contacto, tres menús, y el Boletín Salesiano incrustado.

   Marino con el logotipo en blanco, como exige la pág. 20 del manual sobre
   fondos corporativos.
   ========================================================================== */

.rsn-pie {
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    /* Un filete dorado arriba: cierra la página con el mismo acento con que la
       abre el destacado de la cabecera. */
    border-top: 3px solid var(--rsn-acento);
}

/* LA SEXTA COLUMNA QUE NO EXISTÍA

   Este contenedor tenía `max-width: 1560px` y ningún margen automático. Un
   bloque con ancho máximo y sin `margin-inline: auto` no se centra: se queda
   pegado a la izquierda. En una pantalla de 1900 px eso dejaba 340 px de
   marino vacío a la derecha del Boletín —justo el ancho de una columna—, y de
   ahí la impresión de que el pie tenía seis.

   El fondo oscuro llega a sangre de todos modos, así que ceñir el contenido a
   1560 no ganaba nada: solo desplazaba el pie hacia un lado. Ahora ocupa el
   ancho completo con un margen lateral único, el mismo que usa la franja de
   cierre, para que el logotipo quede a plomo con el © y la portada del
   Boletín a plomo con el crédito. */
.rsn-pie {
    --rsn-pie-margen: clamp(1rem, 2vw, 2rem);
}

.rsn-pie .rsn-contenedor {
    width: 100%;
    max-width: none;
    padding-inline: var(--rsn-pie-margen);
}

/* Cinco columnas explícitas, no `auto-fit`.

   Con auto-fit el navegador decide cuántas columnas caben, y en una ventana
   de 1345 px decidía CUATRO de 282 px. Como el Boletín ocupa dos, ya no
   entraba en la primera fila y bajaba solo. Medido en el inspector: eso era
   exactamente lo que pasaba.

   Con anchos declarados, el reparto es el que queremos: la marca y el Boletín
   piden más sitio que una lista de enlaces, y el Boletín no puede saltar de
   fila porque tiene su columna reservada.

   El escalonado va de menos a más, así que el móvil es el caso por defecto y
   no una excepción. */
.rsn-pie-rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-block: var(--rsn-esp-16);
    align-items: start;
}

@media (min-width: 620px) {
    .rsn-pie-rejilla { grid-template-columns: repeat(2, 1fr); }
    .rsn-pie-boletin { grid-column: span 2; }
}

@media (min-width: 1000px) {
    .rsn-pie-rejilla { grid-template-columns: repeat(4, 1fr); }
    .rsn-pie-boletin { grid-column: span 2; }
}

/* Las cinco de verdad. 1280 px es donde caben sin apretar el Boletín, que es
   el que marca el mínimo: por debajo, su marco encoge tanto que la portada
   del número deja de leerse. */
@media (min-width: 1280px) {
    .rsn-pie-rejilla { grid-template-columns: 1.15fr .85fr .85fr .85fr minmax(170px, 240px); }
    .rsn-pie-boletin { grid-column: auto; }
}


/* --- Marca y contacto ----------------------------------------------------- */

/* La columna entera centrada, logotipo incluido. Es la columna de la
   identidad: un bloque simétrico bajo el logotipo se lee como una firma,
   mientras que alineado a la izquierda parecía el comienzo de otra lista de
   enlaces como las tres de al lado. */
.rsn-pie-marca { text-align: center; }

.rsn-pie-marca .rsn-logo-v {
    width: var(--rsn-logo-pie, 200px);
    margin-inline: auto;
}

.rsn-pie-contacto {
    list-style: none;
    margin: var(--rsn-esp-6) 0 var(--rsn-esp-6);
    padding: 0;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    line-height: 1.55;
}

/* LA TARJETA DEL LIBRO DE RECLAMACIONES

   Cierra la columna de la identidad: un recuadro delgado, apenas más claro
   que el pie, con el icono del libro en dorado y el título; nada más, para
   que no estire el pie hacia abajo. Es un enlace entero, centrado en la
   columna como el resto de datos. */
.rsn-pie-reclamaciones {
    display: inline-flex;
    align-items: center;
    gap: var(--rsn-esp-3);
    margin: 0 auto var(--rsn-esp-6);
    padding: var(--rsn-esp-2) var(--rsn-esp-4);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--rsn-radio);
    transition: background-color .2s ease, border-color .2s ease, color .15s ease;
}

.rsn-pie-reclamaciones:hover,
.rsn-pie-reclamaciones:focus-visible {
    color: var(--rsn-acento-texto);
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--rsn-acento-texto);
}

.rsn-pie-reclamaciones-icono {
    flex: 0 0 auto;
    color: var(--rsn-acento-texto);
}

/* CADA DATO CON SU VIÑETA

   Dos envoltorios y no uno: el <li> es el renglón y .rsn-pie-dato es la
   pareja icono + texto. Hace falta la distinción porque el teléfono y el
   WhatsApp comparten renglón —son la misma idea, cómo contactar— y cada uno
   necesita mantener su icono pegado a su número si la línea se parte.

   El .rsn-pie-dato es `inline-flex`, así que el texto que ocupe dos renglones
   —la dirección en una pantalla estrecha— sigue debajo de sí mismo y no se
   mete bajo el icono. */
.rsn-pie-contacto li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rsn-esp-2) var(--rsn-esp-6);
    margin-bottom: var(--rsn-esp-3);
}

.rsn-pie-dato {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--rsn-esp-3);
}

.rsn-pie-icono {
    /* El icono es referencia, no protagonista: se queda por debajo del texto
       en peso visual. Se aclara al pasar por el dato de al lado.

       El desplazamiento vertical es a ojo: un cuadrado de 16 px alineado por
       arriba con una línea de 15 px queda alto, y se nota. */
    color: var(--rsn-acento-texto);
    opacity: 0.75;
    margin-top: 0.2em;
    flex: none;
}

.rsn-pie-dato:hover .rsn-pie-icono { opacity: 1; }

/* Las redes ya no van en esta columna: viven en la franja de cierre, centradas
   entre el © y el crédito. Ver más abajo. */
.rsn-redes--pie { justify-content: center; margin: 0; }
.rsn-redes--pie a { color: rgba(255, 255, 255, 0.75); }
.rsn-redes--pie a:hover,
.rsn-redes--pie a:focus-visible {
    color: var(--rsn-acento-texto);
    background: rgba(255, 255, 255, 0.1);
}


/* --- Columnas de enlaces -------------------------------------------------- */

.rsn-pie-titulo {
    font-family: var(--rsn-font-body);
    font-size: 0.8125rem;            /* 13px */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rsn-acento-texto);
    margin: 0 0 var(--rsn-esp-4);
}

.rsn-pie-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rsn-pie-lista li { margin-bottom: var(--rsn-esp-2); }

/* CAJA ALTA EN LAS TRES COLUMNAS DE ENLACES

   No es una decisión estética: es la única forma de que se vean iguales.

   Los rótulos los escribe el colegio en Apariencia → Menús, y ahí cada quien
   teclea como quiere: «Inicio» en un menú y «SALESIANOS PERÚ» en otro. Con
   `text-transform` el resultado es el mismo venga como venga el texto, y no
   depende de que alguien recuerde una convención.

   La alternativa —pedir que se escriban todos igual— falla a la primera
   persona nueva que añada un enlace.

   Va con cuerpo pequeño e interletraje abierto, que es el registro de
   directorio: en una columna de enlaces cortos la caja alta se lee sin el
   coste que tendría en un texto seguido. */
.rsn-pie-lista a {
    text-transform: uppercase;
    font-size: 0.75rem;              /* 12px */
    letter-spacing: 0.06em;
}

.rsn-pie-lista a,
.rsn-pie-contacto a {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color .15s ease;
}

/* Solo el color. El subrayado sobraba: en una columna de doce enlaces cortos
   el cambio a dorado ya se ve de sobra, y la línea añadía peso sin decir nada
   que el color no dijera.

   El foco de teclado no se queda sin señal: lo marca el contorno del navegador
   —que este tema no anula—, no el subrayado. */
.rsn-pie-lista a:hover,
.rsn-pie-lista a:focus-visible,
.rsn-pie-contacto a:hover,
.rsn-pie-contacto a:focus-visible {
    color: var(--rsn-acento-texto);
}


/* --- El Boletín ------------------------------------------------------------

   Ya no se incrusta la página de la Congregación: inc/pie.php la lee en el
   servidor y saca de ella la portada, que se pinta aquí como una imagen
   normal. Eso arregla el recorte —la portada es vertical, 904 x 1200, y el
   marco la encerraba en una proporción apaisada— y de paso quita un documento
   entero de la carga de la página.

   Sin proporción declarada: la manda la propia imagen, así que si algún
   número sale en otro formato se verá igual de bien.
   ------------------------------------------------------------------------- */

.rsn-pie-boletin-portada {
    display: block;
    line-height: 0;                  /* si no, el <a> deja un hueco bajo la imagen */
    border-radius: var(--rsn-radio);
    overflow: hidden;
    /* Un realce apenas perceptible: sobre el marino, una portada a sangre se
       ve pegada al fondo. */
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    transition: transform .2s ease, box-shadow .2s ease;
}

.rsn-pie-boletin-portada img {
    display: block;
    width: 100%;
    height: auto;
}

.rsn-pie-boletin-portada:hover,
.rsn-pie-boletin-portada:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .rsn-pie-boletin-portada { transition: none; }
    .rsn-pie-boletin-portada:hover { transform: none; }
}

/* Reserva, solo si su página no se deja leer. Ver inc/pie.php */
.rsn-pie-marco {
    position: relative;
    width: 100%;
    max-width: 624px;
    aspect-ratio: 624 / 390;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--rsn-radio);
    overflow: hidden;
}

.rsn-pie-marco iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* --- La franja de cierre -------------------------------------------------- */

.rsn-pie-cierre {
    background: rgba(0, 0, 0, 0.25);
    font-family: var(--rsn-font-body);
}

/* POR QUÉ EL CRÉDITO NO LLEGABA AL BORDE

   La vez pasada lo medí a 1330 px de ancho, vi que terminaba a 1 px del borde
   de su contenedor y di el asunto por cerrado. Estaba mal medido: a ese ancho
   el contenedor ocupa la pantalla entera, así que el fallo no podía aparecer.

   El contenedor tiene `max-width: 1560px`. En cuanto la pantalla pasa de esa
   medida —la del monitor de Rodo, por ejemplo— deja de ocupar el ancho
   completo y se centra, y cada lado se queda con un margen de cien y pico
   píxeles. Como la franja oscura sí llega a sangre, ese margen se ve: el
   crédito parece flotar a media distancia del borde.

   La franja de cierre es una barra de servicio, no una columna de contenido,
   así que aquí se anula el ancho máximo y se pega a los bordes con un
   respiro. */
/* Tres huecos, no tres cosas repartidas.

   Con `justify-content: space-between` el bloque del medio no queda centrado
   en la franja, sino a medio camino entre sus dos vecinos —y como el © es
   mucho más largo que el crédito, se iría claramente a la derecha—. Con una
   rejilla de `1fr auto 1fr` las dos columnas de los extremos miden lo mismo
   pase lo que pase, así que las redes caen en el centro exacto.

   Cada pieza se coloca en su columna a mano y no por orden de aparición: si
   el colegio deja el crédito en blanco, las redes tienen que seguir en el
   medio en vez de correrse. */
.rsn-pie-cierre-int {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--rsn-esp-4);
    padding-block: var(--rsn-esp-3);
}

.rsn-pie-cierre-copy   { grid-column: 1; }
.rsn-pie-cierre-int .rsn-redes--pie { grid-column: 2; }
.rsn-pie-credito       { grid-column: 3; justify-self: end; text-align: right; }

/* Donde no caben en fila, una debajo de otra y todo centrado: repartir tres
   bloques en una franja de móvil deja huecos raros. */
@media (max-width: 860px) {
    .rsn-pie-cierre-int {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: var(--rsn-esp-3);
    }
    .rsn-pie-cierre-copy,
    .rsn-pie-cierre-int .rsn-redes--pie,
    .rsn-pie-credito { grid-column: 1; justify-self: center; text-align: center; }
}

/* Discretos a propósito: es la información menos importante de la página.
   Cuerpo por debajo del de los enlaces, peso normal y un blanco a media asta.

   Va sobre `*` y no sobre `p, a` porque el crédito lo escribe el colegio en el
   personalizador y puede llegar con un <strong> dentro sin que nadie lo
   pretenda. */
.rsn-pie-cierre-int,
.rsn-pie-cierre-int p,
.rsn-pie-cierre-int p * {
    margin: 0;
    font-size: 0.75rem;              /* 12px */
    font-weight: 400;
    letter-spacing: 0.01em;
    /* 80 % y no 55: sobre el marino de antes, el 55 daba 6.06; sobre el azul
       institucional se hunde a 3.17. Al 80 vuelve a 4.95. */
    color: rgba(255, 255, 255, 0.80);
}

.rsn-pie-cierre a { text-decoration: none; transition: color .15s ease; }
.rsn-pie-cierre a:hover,
.rsn-pie-cierre a:focus-visible { color: var(--rsn-acento); }


/* ==========================================================================
   RECONOCIMIENTOS · LA PÁGINA  (/nosotros/reconocimientos)

   La pinta inc/reconocimientos-pagina.php. Tres tramos: la apertura (blanca,
   con la cabeza de la hoja), los diplomas (la sección .rsn-reconocimientos
   de siempre, gris suave) y los egresados (blanca), antes del cierre marino.
   ========================================================================== */

.rsn-recp-apertura {
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
}
.rsn-recp-apertura .rsn-quienes-cabeza {
    max-width: 68ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Dentro de la página, los rótulos de grupo llevan el aire de la cabeza que
   ya no está. */
.rsn-nos-pagina--reconocimientos .rsn-reconocimientos { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* --- Los egresados --------------------------------------------------------- */

.rsn-recp-egresados {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    background: var(--rsn-blanco);
}
.rsn-recp-egresados .rsn-quienes-cabeza { max-width: 68ch; }

.rsn-recp-egresados-rejilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.rsn-recp-egresado {
    display: flex;
    flex-direction: column;
    background: var(--rsn-blanco);
    border-radius: var(--rsn-radio-lg);
    overflow: hidden;
    box-shadow: var(--rsn-realce);
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;
}
.rsn-recp-egresado:hover,
.rsn-recp-egresado:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--rsn-realce-alto);
}
@media (prefers-reduced-motion: reduce) {
    .rsn-recp-egresado { transition: none; }
    .rsn-recp-egresado:hover,
    .rsn-recp-egresado:focus-within { transform: none; }
}

.rsn-recp-egresado-figura {
    margin: 0;
    aspect-ratio: 1 / 1;
    background: var(--rsn-marino);
    display: grid;
    place-items: center;
}
.rsn-recp-egresado-figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rsn-recp-egresado-iniciales {
    font-family: var(--rsn-font-display);
    font-size: clamp(3rem, 8vw, 4.5rem);
    letter-spacing: 0.06em;
    color: var(--rsn-acento);
}

.rsn-recp-egresado-decir {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: var(--rsn-esp-2);
}

.rsn-recp-egresado-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rsn-esp-2) var(--rsn-esp-3);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.rsn-recp-egresado-ambito    { color: var(--rsn-acento-texto); }
.rsn-recp-egresado-promocion { color: var(--rsn-texto-suave); }

.rsn-recp-egresado-nombre {
    margin: 0;
    font-family: var(--rsn-font-display);
    font-size: var(--rsn-txt-lg);
    line-height: 1.25;
    color: var(--rsn-marino);
}

.rsn-recp-egresado-titulo {
    margin: 0;
    font-weight: 600;
    color: var(--rsn-azul);
}

.rsn-recp-egresado-resena {
    margin: 0;
    font-size: var(--rsn-txt-sm);
    line-height: 1.6;
    color: var(--rsn-texto-suave);
}

.rsn-recp-egresado-enlace {
    margin: auto 0 0;
    padding-top: var(--rsn-esp-2);
    font-size: var(--rsn-txt-sm);
    font-weight: 600;
}


/* ==========================================================================
   FICHAS DE DOCUMENTO

   Las genera el shortcode [documentos]. Ver inc/documentos.php

   Cada documento es una ficha con:
       cabecera   distintivo del tipo · año de la versión
       cuerpo     título · descripción
       pie        subido el ... · tipo y peso

   Tipografía según el manual: Merriweather en el título, Merriweather Sans
   en el resto. Color: marino en el título, texto suave en lo secundario,
   dorado solo como acento — nunca como texto sobre blanco.
   ========================================================================== */

.rsn-docs { margin: var(--rsn-esp-8) 0; }

.rsn-docs-titulo { margin-bottom: var(--rsn-esp-2); }


/* --------------------------------------------------------------------------
   Repositorio completo: un bloque por carpeta

   Lo genera [documentos_todos]. Cada carpeta del disco es una <section> con
   su encabezado. La página puede acabar con cinco o seis bloques seguidos, y
   sin una separación clara se leen como una sola lista larga.

   La solución es una línea de separación entre bloques, no un borde en cada
   uno: el peso visual debe estar en las fichas, no en los contenedores.
   -------------------------------------------------------------------------- */

.rsn-docs-repositorio > .rsn-docs { margin: 0; }

/* Espacio y línea SOLO entre bloques: ni antes del primero ni tras el último.
   Con :not(:first-child) el separador nace del orden, no de una clase que
   alguien tenga que acordarse de poner. */
.rsn-docs-repositorio > .rsn-docs:not(:first-child) {
    margin-top: var(--rsn-esp-12);
    padding-top: var(--rsn-esp-12);
    border-top: 1px solid var(--rsn-borde);
}

/* El ancla del enlace #proceso-de-admision deja el encabezado pegado al borde
   superior de la ventana, o debajo de la cabecera fija. Este margen lo baja
   sin mover nada en la maquetación normal. */
.rsn-docs-repositorio > .rsn-docs { scroll-margin-top: var(--rsn-esp-16); }

.rsn-docs-contador {
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    color: var(--rsn-texto-suave);
    margin: 0 0 var(--rsn-esp-6);
}

/* Rejilla fluida: las fichas se acomodan solas al ancho disponible, sin
   necesidad de puntos de quiebre. Con 320 px de mínimo, en móvil cae a una
   columna y en escritorio entran dos o tres según el contenedor.

   La lista es un <div role="list">, no un <ul>. Divi pinta viñetas en las
   listas del contenido con selectores de especificidad muy alta, y apagarlas
   desde aquí era una carrera que se volvía a perder con cada actualización.
   Un div no lleva viñeta que quitar, y el role mantiene la semántica intacta
   para los lectores de pantalla. */
.rsn-docs-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--rsn-esp-4);
}

.rsn-doc { margin: 0; }

/* La fecha va en un <time> para que buscadores y lectores de pantalla reciban
   el valor exacto en el atributo datetime. Visualmente no debe distinguirse
   del texto que la rodea. */
.rsn-doc-subido time {
    font: inherit;
    color: inherit;
}

/* La ficha entera es el enlace. En móvil, un área táctil grande evita
   tener que apuntar a un texto pequeño. */
.rsn-doc-ficha {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--rsn-esp-6);
    background: var(--rsn-blanco);
    border: 1px solid var(--rsn-borde);
    border-radius: var(--rsn-radio-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
                transform 0.18s ease;
}

.rsn-doc-ficha:hover,
.rsn-doc-ficha:focus-visible {
    border-color: var(--rsn-acento);
    box-shadow: var(--rsn-sombra-lg);
    transform: translateY(-3px);
    color: inherit;
}


/* --- Cabecera: tipo de archivo y año -------------------------------------- */

.rsn-doc-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rsn-esp-3);
    margin-bottom: var(--rsn-esp-4);
}

.rsn-doc-ext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--rsn-marino);
    color: var(--rsn-blanco);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: var(--rsn-radio-sm);
}

/* Dorado sobre marino: 7.7:1, cumple AA. El mismo dorado sobre blanco daría
   2.4:1 y sería ilegible — de ahí el fondo oscuro. */
.rsn-doc-version {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    background: var(--rsn-marino);
    color: var(--rsn-acento-texto);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 999px;
    white-space: nowrap;
}


/* --- Cuerpo --------------------------------------------------------------- */

.rsn-doc-nombre {
    display: block;
    font-family: var(--rsn-font-display);
    font-size: var(--rsn-h5);
    font-weight: 700;
    line-height: var(--rsn-lh-corto);
    color: var(--rsn-marino);
    margin-bottom: var(--rsn-esp-2);
}

.rsn-doc-desc {
    display: block;
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-sm);
    line-height: var(--rsn-lh-texto);
    color: var(--rsn-texto-suave);
    /* Empuja el pie al fondo: con fichas de distinto largo, los pies quedan
       alineados entre sí en vez de flotar a distinta altura. */
    margin-bottom: auto;
}


/* --- Pie ------------------------------------------------------------------ */

.rsn-doc-pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rsn-esp-3);
    margin-top: var(--rsn-esp-6);
    padding-top: var(--rsn-esp-3);
    border-top: 1px solid var(--rsn-borde);
    font-family: var(--rsn-font-body);
    font-size: var(--rsn-txt-xs);
    color: var(--rsn-texto-suave);
}

.rsn-doc-archivo {
    font-weight: 600;
    white-space: nowrap;
    color: var(--rsn-azul);
}


/* --- Estados -------------------------------------------------------------- */

.rsn-docs-vacio {
    padding: var(--rsn-esp-12) var(--rsn-esp-6);
    text-align: center;
    color: var(--rsn-texto-suave);
    background: var(--rsn-fondo-suave);
    border-radius: var(--rsn-radio-lg);
}

/* Solo la ve un administrador */
.rsn-docs-error {
    padding: var(--rsn-esp-3) var(--rsn-esp-4);
    background: #FDEAEA;
    border-left: var(--rsn-filete) solid #C0392B;
    border-radius: var(--rsn-radio-sm);
    font-size: var(--rsn-txt-sm);
}


/* --- Pantallas estrechas -------------------------------------------------- */

@media (max-width: 420px) {
    .rsn-docs-lista { grid-template-columns: 1fr; gap: var(--rsn-esp-3); }
    .rsn-doc-ficha  { padding: var(--rsn-esp-4); }

    /* El pie en una sola línea no cabe: se apila. */
    .rsn-doc-pie {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rsn-esp-1);
    }
}


/* --- Impresión ------------------------------------------------------------ */

@media print {
    .rsn-docs-lista { grid-template-columns: 1fr; gap: 0; }
    .rsn-doc-ficha  {
        border: 0;
        border-bottom: 1px solid #ccc;
        border-radius: 0;
        padding: 0.5rem 0;
        box-shadow: none;
    }
    /* En papel, un enlace sin su dirección es texto muerto. */
    .rsn-doc-ficha::after {
        content: attr(href);
        display: block;
        margin-top: 0.25rem;
        font-size: 0.7rem;
        word-break: break-all;
        color: #555;
    }
}