/*
Theme Name: Alma Digital Fotografía
Description: Tema de bloques propio de Alma Digital Fotografía. FASE 0 DE PROTOTIPO — contiene únicamente el sistema global ya aprobado en docs/proyecto/05_Decisiones_Nuevas_Aprobadas.md (Etapas 1-9). No incluye componentes ni valores todavía en hipótesis.
Author: Alma Digital Fotografía
Version: 0.1.0-prototipo
Requires at least: 6.6
Text Domain: alma-digital
*/

/* Foto central de "Momentos que merecen recordarse" (Home): en movil recupera
   su alto natural (4:5) a todo el ancho, como la regla anterior hacia con el
   contenedor. !important necesario porque la altura de escritorio (16rem) esta
   en el style="" en linea generado por el bloque Imagen. */
@media (max-width: 781px) {
    .seleccion-central img {
        height: auto !important;
    }
}

@media (min-width: 782px) and (max-width: 959.98px) {
    .wp-block-columns.diferenciales-columnas {
        flex-wrap: wrap !important;
    }

    .diferenciales-columnas > .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (min-width: 782px) and (max-width: 959.98px) {
    .wp-block-columns.colegios-testimonios {
        flex-wrap: wrap !important;
    }

    .colegios-testimonios > .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (min-width: 782px) and (max-width: 959.98px) {
    .wp-block-columns.colegios-publicos {
        flex-wrap: wrap !important;
    }

    .colegios-publicos > .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (max-width: 959.98px) {
    .colegios-publicos p.has-text-align-center {
        text-align: left;
    }
}

@media (min-width: 782px) and (max-width: 959.98px) {
    .colegios-publicos p.has-text-align-center {
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }
}

:where(.wp-element-button, .wp-block-button__link, .ff-btn-submit):active {
    transform: translateY(1px);
}

.colegios-servicios-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--wp--preset--spacing--l);
}

/* Tarjetas de "Servicios para centros educativos": son wp:group con
   layout:constrained, y ese mecanismo nativo aplica margin-left/right:auto
   a los hijos no alineados de su contenedor (colegios-servicios-wrap,
   tambien constrained) -- esto encoge la tarjeta al ancho de su propio
   contenido en vez de estirarla a su pista de grid. Solo se notaba en
   Graduaciones porque su parrafo es mas corto que el resto y su ancho de
   contenido cae por debajo de los 384px de pista disponibles. width:100%
   neutraliza ese ajuste-al-contenido sin tocar columnas, filas, gap ni el
   breakpoint de 812px ya existentes. */
.colegios-servicio-item {
    min-width: 0;
    width: 100%;
    position: relative;
}

.colegios-servicio-navidad        { grid-column: 1 / 3; grid-row: 1; }
.colegios-servicio-fin-de-curso   { grid-column: 3 / 5; grid-row: 1; }
.colegios-servicio-orlas          { grid-column: 5 / 7; grid-row: 1; }
.colegios-servicio-graduaciones   { grid-column: 2 / 4; grid-row: 2; }
.colegios-servicio-extraescolares { grid-column: 4 / 6; grid-row: 2; }

@media (max-width: 812px) {
    .colegios-servicios-wrap {
        grid-template-columns: 1fr;
    }

    .colegios-servicio-navidad,
    .colegios-servicio-fin-de-curso,
    .colegios-servicio-orlas,
    .colegios-servicio-graduaciones,
    .colegios-servicio-extraescolares {
        grid-column: 1;
        grid-row: auto;
    }
}

/* "¿Qué servicio necesita tu centro?" — en movil/tablet, acorta el recorrido
   vertical reduciendo el margen de los separadores de este bloque (L -> M),
   sin tocar tipografia, padding lateral ni los separadores de Organizacion.
   !important es necesario porque el bloque separador aplica su margen como
   estilo en linea (style=""), que una regla de hoja de estilos normal no
   puede sobrescribir sin el. */
@media (max-width: 812px) {
    .colegios-que-servicio hr.wp-block-separator {
        margin-top: var(--wp--preset--spacing--m) !important;
        margin-bottom: var(--wp--preset--spacing--m) !important;
    }
}

/* Enlaces "Ir a..." de "¿Qué servicio necesita tu centro?" — mismo lenguaje
   de enlace textual que .colegios-servicio-item h3 a y form.frm-fluent-form
   .ff_t_c a, aplicando el rol tipografico "Cuerpo pequeno/auxiliar" (Inter
   Regular 14px) ya cerrado en el sistema para que se perciban secundarios
   respecto al H3. */
.colegios-que-servicio p a {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 14px;
    line-height: 1.6;
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.colegios-que-servicio p a:hover,
.colegios-que-servicio p a:active {
    text-decoration-color: #B86F52;
}

.colegios-que-servicio p a:focus-visible {
    color: var(--wp--preset--color--grafito);
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

/* Testimonios de "Navidad escolar" — mismo patron de colapso a tablet ya
   cerrado para colegios-testimonios, con selector propio de esta pagina. */
@media (min-width: 782px) and (max-width: 959.98px) {
    .wp-block-columns.navidad-testimonios {
        flex-wrap: wrap !important;
    }

    .navidad-testimonios > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Enlaces de "Otros servicios relacionados" en Navidad escolar — mismo
   lenguaje de enlace textual discreto ya cerrado en .colegios-que-servicio
   p a, con selector propio de esta pagina. */
.navidad-otros-servicios p a {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 14px;
    line-height: 1.6;
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.navidad-otros-servicios p a:hover,
.navidad-otros-servicios p a:active {
    text-decoration-color: #B86F52;
}

/* "Navidad escolar" — reduccion moderada de H2 principales y citas de
   Testimonios exclusivamente en movil (<=781px, mismo punto de corte ya
   usado en el proyecto para el colapso nativo de wp:columns). !important
   necesario porque el tamano actual es style="" inline generado por el
   bloque, igual que en los ajustes de separadores ya cerrados antes. */
@media (max-width: 781px) {
    .navidad-h2 {
        font-size: 1.5rem !important;
    }

    .navidad-testimonio-cita {
        font-size: 1.25rem !important;
    }
}

/* Testimonios de "Fin de curso" — mismo tratamiento tipografico movil ya
   aprobado en .navidad-testimonio-cita (1.25rem, mismo breakpoint 781px).
   Las citas de esta pagina no llevaban className propio, por eso no
   recibian ninguna regla movil; se anade la clase al bloque y se reutiliza
   exactamente el mismo valor, sin crear un tamano nuevo. !important
   necesario porque el tamano actual es style="" en linea generado por el
   bloque, igual que en Navidad. */
@media (max-width: 781px) {
    .findecurso-testimonio-cita {
        font-size: 1.25rem !important;
    }
}

.navidad-otros-servicios p a:focus-visible {
    color: var(--wp--preset--color--grafito);
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

/* Testimonios de "Fin de curso" — mismo patron de colapso a tablet ya
   cerrado para navidad-testimonios, con selector propio de esta pagina. */
@media (min-width: 782px) and (max-width: 959.98px) {
    .wp-block-columns.findecurso-testimonios {
        flex-wrap: wrap !important;
    }

    .findecurso-testimonios > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Botones de tarifas en Orlas — mismo ancho en movil para reforzar que
   son 4 opciones equivalentes; sin cambios en escritorio/tablet. */
@media (max-width: 781px) {
    .orlas-tarifas-buttons .wp-block-button {
        width: 100%;
    }

    .orlas-tarifas-buttons .wp-block-button__link {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* Enlaces de "Otros servicios relacionados" en Fin de curso — mismo
   lenguaje de enlace textual discreto ya cerrado, con selector propio
   de esta pagina. */
.findecurso-otros-servicios p a {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 14px;
    line-height: 1.6;
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.findecurso-otros-servicios p a:hover,
.findecurso-otros-servicios p a:active {
    text-decoration-color: #B86F52;
}

.findecurso-otros-servicios p a:focus-visible {
    color: var(--wp--preset--color--grafito);
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

/* Enlaces discretos de Orlas — compartido entre los CTA contextuales de
   "Orlas adaptadas a cada etapa educativa" y "Otros servicios relacionados",
   mismo lenguaje de enlace textual ya cerrado en el resto del sitio. Una
   unica clase para ambos usos porque son visualmente identicos. */
.orlas-enlace-discreto p a {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 14px;
    line-height: 1.6;
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.orlas-enlace-discreto p a:hover,
.orlas-enlace-discreto p a:active {
    text-decoration-color: #B86F52;
}

.orlas-enlace-discreto p a:focus-visible {
    color: var(--wp--preset--color--grafito);
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

.colegios-servicio-item h3 a {
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.colegios-servicio-item h3 a:hover,
.colegios-servicio-item h3 a:active {
    text-decoration-color: #B86F52;
}

.colegios-servicio-item h3 a:focus-visible {
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

/* Tecnica de enlace expandido: el enlace real y accesible vive en el texto
   del H3 (arriba); este ::after solo amplia su AREA de clic/toque a toda la
   tarjeta mediante position:absolute + inset:0, sin mover ni duplicar
   contenido y sin JavaScript. Al no llevar borde/fondo/outline propios, no
   tapa ni interfiere con el focus-visible del enlace real (que se sigue
   dibujando sobre el texto del H3, no sobre este pseudo-elemento). */
.colegios-servicio-item h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Fluent Forms — base visual reutilizable de Alma Digital.
   Selectores con el prefijo "form.frm-fluent-form" (clase real que genera Fluent Forms
   en cualquier formulario) para ganar especificidad frente a su CSS base sin necesitar
   !important ni depender del orden de carga de las hojas de estilo. */

form.frm-fluent-form .ff-el-input--label label {
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 600;
    color: var(--wp--preset--color--grafito);
}

form.frm-fluent-form .ff-el-form-control {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1rem;
    color: var(--wp--preset--color--grafito);
    background-color: var(--wp--preset--color--crema);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--grafito) 60%, transparent);
    border-radius: 8px;
    padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
}

form.frm-fluent-form .ff-el-form-control:focus {
    outline: 2px solid #B86F52;
    outline-offset: 2px;
    border-color: #B86F52;
}

form.frm-fluent-form .ff-el-form-check-input {
    accent-color: #B86F52;
}

form.frm-fluent-form .ff_t_c a {
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

form.frm-fluent-form .ff_t_c span {
    white-space: nowrap;
}

form.frm-fluent-form .ff_t_c a:hover,
form.frm-fluent-form .ff_t_c a:active {
    text-decoration-color: #B86F52;
}

form.frm-fluent-form .ff_t_c a:focus-visible {
    color: var(--wp--preset--color--grafito);
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

form.frm-fluent-form .ff-btn-submit {
    border-radius: 8px;
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    padding: 12px 24px;
}

form.frm-fluent-form .ff-btn-submit:hover {
    text-decoration: underline;
}

form.frm-fluent-form .ff-btn-submit:focus-visible {
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

/* Accesibilidad (WCAG AA) - estados de error y obligatorio de Fluent Forms.
   Fluent usa #f56c6c (2,6:1 sobre Crema). En los formularios sobre Crema
   (todos menos Incidencias, formulario 6) se usa #A8322D (5,9:1) para el texto
   del mensaje de error, los asteriscos de obligatorio, el borde del campo con
   error mientras no tiene el foco (con foco sigue el borde Arcilla) y el texto
   de la casilla de consentimiento con error. */
div.fluentform:not(.fluentform_wrapper_6) .text-danger {
    color: #A8322D;
}

div.fluentform:not(.fluentform_wrapper_6) .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
div.fluentform:not(.fluentform_wrapper_6) .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
    color: #A8322D;
}

div.fluentform:not(.fluentform_wrapper_6) .ff-el-is-error .ff-el-form-control:not(:focus) {
    border-color: #A8322D;
}

div.fluentform:not(.fluentform_wrapper_6) .ff-el-is-error .ff-el-form-check-label.ff_tc_label {
    color: #A8322D;
}

/* Incidencias (formulario 6, fondo Grafito): solo el texto del mensaje de
   error, en #FF9B8F (6,2:1). Asteriscos y bordes no cambian. */
div.fluentform.fluentform_wrapper_6 .text-danger {
    color: #FF9B8F;
}

/* Incidencias - boton "Anadir hermano/a": solo el color del texto, en Crema
   (11,2:1; unos 9:1 sobre el fondo de foco). Borde, fondo y foco no cambian:
   los define el plugin alma-incidencias. */
form#fluentform_6 .alma-boton-anadir-hermano {
    color: var(--wp--preset--color--crema);
}

/* Enlace contextual discreto — clase generica reutilizable para el mismo
   lenguaje de enlace textual ya cerrado en .colegios-que-servicio p a,
   .navidad-otros-servicios p a, .findecurso-otros-servicios p a y
   .orlas-enlace-discreto p a (regla identica en las 4). Las 4 clases
   anteriores no se tocan ni se refactorizan; esta clase es solo para uso
   en paginas nuevas a partir de ahora. */
.enlace-discreto p a {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 14px;
    line-height: 1.6;
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.enlace-discreto p a:hover,
.enlace-discreto p a:active {
    text-decoration-color: #B86F52;
}

.enlace-discreto p a:focus-visible {
    color: var(--wp--preset--color--grafito);
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

/* Bloque narrativo de "Fotografia para escuelas infantiles" (Azul niebla) —
   padding lateral extra solo en movil, para dar mas aire al cuerpo de texto
   frente al H2/introduccion, que ya respiran bien con el padding raiz. */
@media (max-width: 781px) {
    .escuelas-infantiles-narrativa {
        padding-left: var(--wp--preset--spacing--m);
        padding-right: var(--wp--preset--spacing--m);
    }
}

/* Fotografia individual de "En Fin de curso" (Escuelas infantiles) — ancho
   fijo por breakpoint: 270px en escritorio/tablet, 135px en movil. Se
   controla por clase en vez de por el atributo width del bloque porque
   necesita dos anchos distintos segun viewport. Mismo punto de corte
   (781px) ya usado en el resto del proyecto. */
.escuelas-infantiles-individual-fincurso img {
    width: 270px;
}
@media (max-width: 781px) {
    .escuelas-infantiles-individual-fincurso img {
        width: 135px;
    }
}

/* Padding de seccion reducido en movil — clase generica reutilizable para
   transiciones entre secciones que en escritorio necesitan el preset XXXL
   (72px) pero en movil resultan excesivas. Reduce a XL (32px) solo en
   <=781px, mismo punto de corte ya usado en el proyecto. No se aplica a
   todas las secciones: solo a las que su padding real es XXXL y necesitan
   reducirse; las que ya usan XL no llevan esta clase porque no cambian.
   !important necesario porque el padding real esta en estilo en linea
   generado por el bloque (style=""), igual que en las demas reducciones
   moviles ya cerradas en este archivo. */
@media (max-width: 781px) {
    .seccion-padding-movil {
        padding-top: var(--wp--preset--spacing--xl) !important;
        padding-bottom: var(--wp--preset--spacing--xl) !important;
    }
}

/* Seccion azul "Entregas antes del puente de diciembre" (Navidad escolar) —
   respiracion interior lateral en movil. El padding lateral real de esta
   seccion viene del mecanismo has-global-padding del propio WordPress
   (aplicado una unica vez en <main> y anulado en los hijos anidados para
   evitar doble padding), no de un estilo en linea del bloque; por eso esta
   regla no necesita !important. No toca el ancho exterior ni el fondo. */
@media (max-width: 781px) {
    .navidad-azul-padding-lateral {
        padding-left: var(--wp--preset--spacing--l);
        padding-right: var(--wp--preset--spacing--l);
    }
}

/* Transicion Azul -> "Una campana sencilla..." (Navidad escolar) —
   correccion puntual para recuperar una pausa visual clara tras reducir
   seccion-padding-movil (32px + 32px = 64px resultaba demasiado junto).
   Sube solo el padding-top de esta seccion a XXL (48px) en movil, dejando
   el total en 80px. !important necesario porque el padding real esta en
   estilo en linea generado por el bloque. */
@media (max-width: 781px) {
    .navidad-campana-padding-top-movil {
        padding-top: var(--wp--preset--spacing--xxl) !important;
    }
}

/* Seccion Hermanos (Navidad escolar) — vincula la fotografia al Hero en
   movil, reduciendo un paso mas alla de seccion-padding-movil solo el
   padding-top de esta seccion concreta (32px -> 16px), sin tocar el
   padding-bottom compartido con la transicion hacia la seccion azul.
   !important necesario porque el padding real esta en estilo en linea
   generado por el bloque. */
@media (max-width: 781px) {
    .navidad-hermanos-padding-top-movil {
        padding-top: 16px !important;
    }
}

/* Media-text "Una campana sencilla..." (Navidad escolar) — el nucleo de
   WordPress aplica padding:0 8% a .wp-block-media-text__content para dar
   aire al texto cuando el bloque esta en dos columnas; esa regla no esta
   condicionada al layout y sigue activa cuando el bloque se apila en
   movil (@media max-width:600px, el mismo punto de corte nativo del
   bloque), dejando el texto mas metido hacia dentro que la fotografia.
   Se anula solo en ese breakpoint y solo para este bloque especifico;
   en dos columnas (>600px) el padding original se conserva intacto. */
@media (max-width: 600px) {
    .navidad-individual-media-text .wp-block-media-text__content {
        padding: var(--wp--preset--spacing--m) 0 0 0;
    }
}

/* Fin de curso — seccion "Que fotografias realizamos": aire lateral adicional
   solo para H3 y parrafos en movil (termino medio de 12px, decision de gusto,
   no correccion de un margen ausente: el margen general de 24px ya es correcto
   en todo el sitio). El selector apunta solo a h3/p, nunca a figure/img, para
   que grupo, orla e informal conserven exactamente su ancho actual. */
@media (max-width: 781px) {
    .findecurso-azul-texto-lateral h3,
    .findecurso-azul-texto-lateral p {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Fin de curso — fotografia "Segunda toma individual opcional": ancho contenido
   en movil para que no compita en protagonismo con el resto del contenido.
   !important necesario porque el ancho actual esta en estilo en linea del
   propio bloque (verificado: sin !important una clase de hoja de estilos no
   puede sobrescribir un style="" en linea). */
@media (max-width: 600px) {
    .findecurso-informal-movil img {
        width: 300px !important;
    }
}

/* Orlas — seccion "Orlas adaptadas a cada etapa educativa": aire lateral
   adicional solo para H3 y parrafos de los 4 bloques en movil (24px del
   padding raiz de main + 12px extra = 36px), mismo criterio ya usado en
   Fin de curso. El selector apunta solo a h3/p, nunca a figure/img/CTA, para
   que fotografias, separadores y enlaces conserven su ancho/posicion actual. */
@media (max-width: 781px) {
    .orlas-azul-texto-lateral h3,
    .orlas-azul-texto-lateral p {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Orlas — fotografia "Orlas para universidades": al apilarse en movil ocupa
   el ancho completo del contenedor (~342px reales) y por ser vertical genera
   una altura excesiva (~515px). Se reduce solo en movil a 260px, conservando
   proporcion completa (height:auto) y sin recorte. !important necesario
   porque el ancho de referencia en escritorio no debe tocarse y esta clase
   debe ganar sobre cualquier regla de layout por defecto en ese rango. */
@media (max-width: 781px) {
    .orlas-universidad-foto-movil img {
        width: 260px !important;
        height: auto !important;
    }
}

/* Orlas — transicion "Orlas para universidades" -> "Como trabajamos las
   orlas": en movil neutraliza el margin-bottom de 28px del bloque columns de
   Universidad (valor no controlado, no correspondiente a ningun token) y
   reduce el padding-bottom de la seccion azul de XXXL a XL, sin tocar su
   padding-top (que no forma parte de este ajuste). No se reutiliza
   seccion-padding-movil porque esa clase tambien reduce el padding-top, cosa
   que aqui no se pide. !important necesario porque ambos valores reales
   estan en estilo en linea generado por el propio bloque. */
@media (max-width: 781px) {
    .orlas-universidad-columnas-movil {
        margin-bottom: 0 !important;
    }
    .orlas-azul-padding-bottom-movil {
        padding-bottom: var(--wp--preset--spacing--xl) !important;
    }
}

/* Orlas — bloque "Infantil y Primaria": las dos composiciones se reducen en
   movil a 300px (conservando proporcion completa, sin recorte) porque a
   ancho completo (~342px reales) el conjunto apilado resultaba demasiado
   grande frente a los otros 3 bloques. !important necesario porque en
   escritorio no hay ningun estilo en linea de ancho que competir, pero se
   mantiene por consistencia con el resto de reducciones moviles de esta
   hoja y para garantizar que gana sobre el max-width:100% por defecto de
   .wp-block-image img en cualquier orden de carga. */
@media (max-width: 781px) {
    .orlas-infantil-primaria-foto-movil img {
        width: 300px !important;
        height: auto !important;
    }
}

/* Orlas — bloque "Infantil y Primaria": el gap vertical entre columnas al
   apilarse en movil viene del valor global por defecto de WordPress
   :where(.wp-block-columns.is-layout-flex){gap:2em} (32px), no de nuestro
   blockGap personalizado (verificado: WordPress no serializa blockGap.top/
   left para este bloque con layout flex + justifyContent, por lo que su
   valor real nunca ha sido nuestro token "l"). Como :where() tiene
   especificidad cero, una clase normal ya gana sin necesitar !important.
   row-gap:8px, sumado a los 16px de margin-bottom del figcaption, deja
   caption->siguiente imagen en 24px (verificado). margin-bottom:0 neutraliza
   el margin-bottom por defecto del bloque columns (28px, tambien de
   WordPress, no un token nuestro) para que caption Primaria->CTA baje a
   24px (verificado). No toca el gap horizontal de escritorio (fuera del
   media query) ni el margin-bottom del figcaption (no se toca esa regla). */
@media (max-width: 781px) {
    .orlas-infantil-primaria-columnas-movil {
        row-gap: 8px;
        margin-bottom: 0;
    }
}

/* Extraescolares — seccion "Una fotografia que refleje cada actividad": en
   movil reduce solo el padding-top de XXXL (72px) a XL (32px), para que la
   transicion desde la fotografia del Hero (900px, alignwide+contentSize)
   quede en 16 (figure) + 32 (Hero, sin tocar) + 32 (este padding-top) = 80px
   en vez de 120px. No toca el padding-bottom de esta seccion ni el
   padding-bottom del Hero. !important necesario porque el padding-top real
   esta en el style="" en linea generado por el propio bloque. */
@media (max-width: 781px) {
    .extraescolares-actividad-padding-top-movil {
        padding-top: var(--wp--preset--spacing--xl) !important;
    }
}

/* Extraescolares — seccion "Fotografia de grupo o equipo": en movil reduce
   solo el padding-top de XXXL (72px) a XL (32px), para que la separacion
   respecto al cierre de la seccion anterior (72px, sin tocar) quede en
   72 + 32 = 104px en vez de 144px. No toca el padding-bottom de esta
   seccion ni el padding-bottom/contenido de la seccion anterior, que
   permanece cerrada. !important necesario porque el padding-top real esta
   en el style="" en linea generado por el propio bloque. */
@media (max-width: 781px) {
    .extraescolares-grupo-padding-top-movil {
        padding-top: var(--wp--preset--spacing--xl) !important;
    }
}

/* Extraescolares — seccion "Nos adaptamos a quien organiza la actividad": en
   movil reduce solo el padding-top de XXXL (72px) a XL (32px), para que la
   separacion respecto al cierre de la seccion anterior (72px, sin tocar)
   quede en 72 + 32 = 104px en vez de 144px. No toca el padding-bottom de
   esta seccion ni la seccion anterior. !important necesario porque el
   padding-top real esta en el style="" en linea generado por el propio
   bloque. */
@media (max-width: 781px) {
    .extraescolares-organiza-padding-top-movil {
        padding-top: var(--wp--preset--spacing--xl) !important;
    }
}

/* Extraescolares — seccion "Como organizamos la sesion": en movil reduce
   solo el padding-top de XXXL (72px) a XL (32px), para que la separacion
   respecto al cierre de la seccion anterior (72px, sin tocar) quede en
   72 + 32 = 104px en vez de 144px. No toca el padding-bottom de esta
   seccion ni la seccion anterior. !important necesario porque el
   padding-top real esta en el style="" en linea generado por el propio
   bloque. */
@media (max-width: 781px) {
    .extraescolares-como-padding-top-movil {
        padding-top: var(--wp--preset--spacing--xl) !important;
    }
}

/* Graduaciones — seccion galeria (Hero->4 fotos): en movil reduce solo el
   padding-top de XXXL (72px) a XL (32px). El padding-bottom ya es XL (32px)
   en todos los anchos (cambio global directo en el atributo del bloque, sin
   necesidad de clase). Con esto, superior queda en 72+32=104px (igual que
   el resto de transiciones ya cerradas) y no toca "Que fotografiamos
   durante el acto", cuyo padding-top permanece en XXXL en todos los anchos.
   !important necesario porque el padding-top real esta en el style="" en
   linea generado por el propio bloque. */
@media (max-width: 781px) {
    .graduaciones-galeria-padding-top-movil {
        padding-top: var(--wp--preset--spacing--xl) !important;
    }
}

/* Escuelas infantiles — seccion "Ritmo y trato adaptados a los mas
   pequenos": en movil reduce solo el padding-top de XXXL (72px) a XL
   (32px), para que la transicion desde la fotografia del Hero (900px,
   alignwide+contentSize) quede en 16 (figure) + 32 (Hero, sin tocar) + 32
   (este padding-top) = 80px en vez de 120px. No toca el padding-bottom de
   esta seccion ni el padding-bottom del Hero. !important necesario porque
   el padding-top real esta en el style="" en linea generado por el propio
   bloque. */
@media (max-width: 781px) {
    .escuelas-infantiles-ritmo-padding-top-movil {
        padding-top: var(--wp--preset--spacing--xl) !important;
    }
}

/* "Como trabajamos" -- decision visual aprobada (2026-08-28): las 4
   fotografias de esta pagina se muestran en blanco y negro mediante filtro
   CSS, reversible y sin tocar los archivos originales. La clase
   "como-trabajamos-foto" solo existe en page-como-trabajamos.html, por lo
   que esta regla no afecta a ninguna otra plantilla ni fotografia del sitio. */
.como-trabajamos-foto img {
    filter: grayscale(100%);
}

/* Seccion -> media-text (patron generico y reutilizable): cuando una
   seccion con padding-bottom XXXL (72px) precede directamente a un
   wp:media-text con padding-top XXXL (72px), en escritorio ambos separan
   dos columnas horizontales y no se perciben como vacio real. Al apilarse
   en movil se suman en vertical (144px), sin que el cambio de fondo (si lo
   hay) baste para justificar una pausa tan larga. Ademas, el H2 dentro del
   media-text queda pegado al pie de la fotografia en movil porque el grid
   apilado nativo de core/media-text (wp-includes/blocks/media-text) no
   define gap entre fila 1 (media) y fila 2 (contenido), y el H2 no tiene
   margin-top propio.
   Causa comun identificada en page-como-trabajamos.html en dos puntos:
   seccion "Antes de nada, hablamos contigo" -> media-text de IMG_9110, y
   seccion azul "Cada alumno, correctamente identificado" -> media-text
   "Durante la sesion" (IMG_9110/WhatsApp 21-08 sin cambios, solo espaciado).
   Por eso se resuelve con este mismo par de clases en las dos instancias en
   vez de una clase distinta por cada una. Nombradas con el prefijo
   "como-trabajamos-" a proposito: son especificas de esta plantilla, no
   genericas para otras paginas. !important en los paddings
   porque los valores reales estan en estilo en linea generado por los
   bloques; el margin-top del H2 no lo necesita porque el bloque no define
   ningun margin propio que sobrescribir. */
@media (max-width: 781px) {
    .como-trabajamos-cierre-media-movil {
        padding-bottom: var(--wp--preset--spacing--xl) !important;
    }

    .como-trabajamos-apertura-media-movil {
        padding-top: var(--wp--preset--spacing--xl) !important;
    }

    .como-trabajamos-apertura-media-movil .wp-block-media-text__content h2 {
        margin-top: var(--wp--preset--spacing--l);
    }
}

/* "Como trabajamos" -- H2 "Cada alumno, correctamente identificado": es el
   unico H2 narrativo centrado (textAlign:"center"), y por su longitud cae
   en lineas estrechas a 390px, rompiendo el ritmo con el resto de H2
   narrativos, que van alineados a la izquierda. Se alinea a la izquierda
   solo en movil, sin afectar a su version de escritorio ni al H2 centrado
   del cierre ("¿Quieres que hablemos de tu centro?"), que usa otro bloque y
   no lleva esta clase. !important en text-align necesario porque
   has-text-align-center (CSS nativo de WordPress) tiene la misma
   especificidad de clase.
   Verificado que H2 y parrafos comparten exactamente el mismo eje
   izquierdo y el mismo ancho util (sin padding/margen horizontal propio en
   ninguno de los dos) -- no hay desajuste real de caja. El tamano fijo de
   2rem (32px, sin clamp) sí resulta excesivo a 390px (cae en 3 lineas) y
   acentua la sensacion de estar pegado al borde azul; se reduce a 1.5rem,
   reutilizando el mismo valor ya aprobado para este mismo ajuste en
   ".navidad-h2", sin tocar peso ni line-height. !important en font-size
   por el mismo motivo (valor real en estilo en linea generado por el
   bloque). */
@media (max-width: 781px) {
    .como-trabajamos-identificacion-h2-movil {
        text-align: left !important;
        font-size: 1.5rem !important;
    }
}

/* ===== Familias — landing (borrador, pendiente de publicar) ===== */

/* Hero: columnas lado a lado desde 782px; en movil (<=781px, mismo punto de
   corte ya usado en el resto del proyecto) se apilan en el orden del propio
   marcado -- texto primero, fotografia debajo -- sin reordenar nada por
   CSS. Mismo mecanismo ya cerrado en .diferenciales-columnas,
   .colegios-testimonios y .colegios-publicos. */
@media (max-width: 781px) {
    .wp-block-columns.familias-hero-columnas {
        flex-wrap: wrap !important;
    }

    .familias-hero-columnas > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Grid "Encuentra tu sesion": 3 columnas en escritorio, 2 en tablet
   (782-959.98px, mismo rango ya usado en el resto del sitio) y 1 en movil
   (<=781px). Mismo patron de grid ya cerrado en .colegios-servicios-wrap;
   aqui la cuadricula es simetrica (9 tarjetas) en vez de una composicion
   3+2, por lo que no hace falta posicionar cada item a mano. */
.familias-servicios-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--l);
}

@media (min-width: 782px) and (max-width: 959.98px) {
    .familias-servicios-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 781px) {
    .familias-servicios-wrap {
        grid-template-columns: 1fr;
    }
}

/* Tarjetas del grid: mismo min-width:0 ya documentado en
   .colegios-servicio-item (evita que el ajuste-al-contenido de
   layout:constrained encoja la tarjeta cuyo parrafo es mas corto). */
.familias-servicio-item {
    min-width: 0;
    width: 100%;
    position: relative;
}

/* Filete decorativo en Terracota claro (#D99A7A) sobre la fotografia de
   cada tarjeta. Uso puntual aprobado, puramente decorativo: no transmite
   texto ni es interactivo, por lo que no le aplica el umbral de contraste
   de texto. No se usa como color de enlace porque Terracota sobre Crema
   (~2.1:1) no supera ni el minimo de texto grande (3:1). */
.familias-servicio-item figure {
    border-top: 3px solid #D99A7A;
}

/* Enlace de titulo de tarjeta: mismo lenguaje ya cerrado en
   .colegios-servicio-item h3 a -- Grafito en reposo, subrayado que pasa a
   Arcilla (#B86F52) en hover/focus, y ::after que amplia el area de clic a
   toda la tarjeta sin anadir ni mover contenido. */
.familias-servicio-item h3 a {
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.familias-servicio-item h3 a:hover,
.familias-servicio-item h3 a:active {
    text-decoration-color: #B86F52;
}

.familias-servicio-item h3 a:focus-visible {
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

.familias-servicio-item h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ===== Embarazo (/familias/embarazo/) — borrador, pendiente de publicar ===== */

/* "Estudio, exterior o combinada": mismo mecanismo de colapso a tablet ya
   cerrado para .colegios-publicos, .colegios-testimonios y
   .diferenciales-columnas (782-959.98px), con selector propio de esta
   pagina. Por debajo de 782px, wp:columns ya se apila de forma nativa. */
@media (min-width: 782px) and (max-width: 959.98px) {
    .wp-block-columns.embarazo-modalidades {
        flex-wrap: wrap !important;
    }

    .embarazo-modalidades > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ===== Footer global (borrador, pendiente de extender a otras plantillas) ===== */

/* Footer -- logotipo y navegacion: en movil (<=781px, mismo punto de corte ya
   usado en todo el proyecto para el apilado nativo de wp:columns) el logotipo
   queda centrado y los 4 enlaces de navegacion tambien, reduciendo ademas el
   espacio vertical entre ambos bloques apilados. En escritorio (>=782px) esta
   clase no tiene ningun estilo propio, por lo que el diseno original (logo
   a la izquierda, navegacion a la derecha) permanece intacto. overlayMenu
   del bloque de navegacion sigue en "never": los 4 enlaces nunca colapsan en
   un menu hamburguesa, en ningun ancho. */
@media (max-width: 781px) {
    .wp-block-columns.footer-columnas {
        row-gap: var(--wp--preset--spacing--s);
    }

    .footer-columnas .wp-block-image {
        text-align: center;
        margin-bottom: var(--wp--preset--spacing--s);
    }

    .footer-columnas .wp-block-navigation.is-content-justification-right,
    .footer-columnas .wp-block-navigation__container.items-justified-right {
        justify-content: center !important;
    }
}

/* ===== Paginas legales (plantilla page-legal) =====
   El estilo global deja a 0 los margenes de titulos y parrafos y el tema no
   define blockGap, asi que el ritmo vertical del texto legal se fija aqui.
   Ancho de lectura: el de contentSize (36rem), heredado del layout
   constrained de la plantilla. Tipografia de H2/H3 igual que en el resto de
   paginas (H2 Playfair 400, H3 Inter 600 1.125rem). Doble clase para ganar a
   :root :where(...) sin !important. Solo afecta a paginas con la plantilla
   "Pagina legal". */
.legal-pagina .legal-contenido {
    margin-top: var(--wp--preset--spacing--xl);
}

.legal-pagina .legal-contenido > * + * {
    margin-top: var(--wp--preset--spacing--m);
}

.legal-pagina .legal-contenido h2 {
    font-family: var(--wp--preset--font-family--playfair-display);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.25;
}

.legal-pagina .legal-contenido > * + h2 {
    margin-top: var(--wp--preset--spacing--xxl);
}

.legal-pagina .legal-contenido h3 {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.legal-pagina .legal-contenido > * + h3 {
    margin-top: var(--wp--preset--spacing--l);
}

.legal-pagina .legal-contenido ul,
.legal-pagina .legal-contenido ol {
    padding-left: var(--wp--preset--spacing--l);
}

.legal-pagina .legal-contenido li + li {
    margin-top: var(--wp--preset--spacing--s);
}

.legal-pagina .legal-contenido a {
    color: var(--wp--preset--color--grafito);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    overflow-wrap: anywhere;
}

.legal-pagina .legal-contenido a:hover,
.legal-pagina .legal-contenido a:active {
    text-decoration-color: #B86F52;
}

.legal-pagina .legal-contenido a:focus-visible {
    text-decoration-color: #B86F52;
    outline: 2px solid #B86F52;
    outline-offset: 2px;
}

/* Tabla de cookies: si en algun ancho no cabe, se desplaza solo dentro de
   su propio contenedor (overflow-x), nunca la pagina entera. Celdas
   alineadas arriba, bordes suaves y nombres de cookie (code) que pueden
   partirse para no desbordar en movil. */
.legal-pagina .legal-contenido .wp-block-table {
    max-width: 100%;
    overflow-x: auto;
}

.legal-pagina .legal-contenido .wp-block-table th,
.legal-pagina .legal-contenido .wp-block-table td {
    padding: var(--wp--preset--spacing--s);
    text-align: left;
    vertical-align: top;
    border: 1px solid rgba(46, 52, 56, 0.25);
}

.legal-pagina .legal-contenido .wp-block-table code {
    font-size: 0.875em;
    overflow-wrap: anywhere;
}

@media (max-width: 781px) {
    .legal-pagina .legal-contenido h2 {
        font-size: 1.5rem;
    }

    .legal-pagina .legal-contenido .wp-block-table table {
        font-size: 14px;
    }
}

/* Footer -- linea de enlaces legales bajo el copyright. Cada enlace es un
   navigation-link vinculado al ID de su pagina: WordPress no lo muestra
   mientras la pagina no este publicada, y aparece solo al publicarla, sin
   tocar footer.html. Aqui se ajusta la separacion (mas compacta que la
   navegacion principal), el punto medio entre enlaces y el margen superior
   (el bloque navigation no serializa margin). Mientras ninguna pagina este
   publicada, WordPress deja un <nav> vacio: :empty lo oculta tambien a
   lectores de pantalla. */
.wp-block-navigation.footer-legal {
    gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
    margin-top: var(--wp--preset--spacing--s);
}

.wp-block-navigation.footer-legal:empty {
    display: none;
}

.footer-legal .wp-block-navigation__container {
    gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
}

.footer-legal .wp-block-navigation-item + .wp-block-navigation-item::before {
    content: "\00B7";
    margin-right: var(--wp--preset--spacing--s);
}