/* ==========================================
   CSS DEL SITIO — panel de control de ESTA web
   ==========================================
   Espejo editable de las variables del tema padre. Vive en el HIJO, así que
   todo lo que cambies aquí SOBREVIVE a las actualizaciones del padre.

   Cómo gana a la del padre, sin !important:
   - Se encola después del CSS del padre (depende de 'pgweb-main').
   - Va SIN @layer, y en la cascada el CSS sin capa gana a todo lo que está en
     capas — el padre importa global.css en `layer(base)`.

   Los valores de abajo son los de fábrica: tal cual está, la web se ve igual
   que con el tema base. Cambia los que necesites.
   ========================================== */

/* ==========================================
   TEMA CLARO
   ========================================== */
:root,
[data-theme="light"] {
  /* ── MARCA — los tres colores del cliente ─────────────────────────────
     Con cambiar estos tres, el padre recalcula solo el texto sobre los
     botones, los subtítulos, los fondos suaves y las variantes que cumplen
     WCAG AA. Es lo único que hace falta tocar en la mayoría de webs.

     oklch(L% C H):  L = luz 0–100% · C = saturación 0–0.37 · H = matiz 0–360
                     (0 rojo · 60 amarillo · 150 verde · 250 azul ·
                      280 violeta · 350 rosa)
     También se acepta hex: --color-primary: #422ad5;
     ──────────────────────────────────────────────────────────────────── */
  --azul: oklch(0.35 0.12 265.24);
  --verde: oklch(44.94% 0.114 133.913);
  --naranja: oklch(67.14% 0.184 47.179);
  --amarillo: oklch(70.54% 0.144 87.478);
  --lila: oklch(0.48 0.2 336.86);
  --rojo: oklch(57.88% 0.222 23.106);

  --color-primary: oklch(57.69% 0.135 241.221);
  --color-secondary: oklch(81.87% 0.166 117.387);
  --color-accent: oklch(44.94% 0.114 133.913);

  /* ── FONDOS Y TEXTO BASE ──────────────────────────────────────────────
     El blanco puro es lo neutro; un off-white cálido (bajar L y subir algo
     de croma con matiz 60-90) cambia mucho el carácter de la web.
     ──────────────────────────────────────────────────────────────────── */
  /* --color-base-100: oklch(100% 0 0); */ /* fondo principal */
  /* --color-base-200: oklch(98% 0 0); */ /* tarjetas / secciones */
  /* --color-base-300: oklch(94% 0 0); */ /* bordes y .section--light */
  /* Se deja el gris de fábrica A PROPÓSITO: este token no es solo el fondo de
     .section--light, es también --color-border (el borde por defecto de todo
     el tema), --shape-color y el color de las cifras del 404. Para las bandas
     en claro del primario está la clase .section--primary-light, que tira de
     --color-base-primary y no arrastra los bordes. */
  /* ── DERIVADOS — normalmente NO se tocan ──────────────────────────────
     El padre los calcula a partir de los tres colores de marca, manteniendo
     la lightness que garantiza el contraste WCAG AA. Déjalos comentados y se
     actualizan solos (y reciben las mejoras del padre). Descomenta uno solo
     si esta web necesita fijarlo a mano.
     ──────────────────────────────────────────────────────────────────── */
  /* --color-primary-content:   oklch(from var(--color-primary) 93% calc(c * 0.14) h); */
  /* --color-secondary-content: oklch(from var(--color-secondary) 94% calc(c * 0.12) h); */
  /* --color-secondary-text:    oklch(from var(--color-secondary) 57% c h); */
  /* texto de marca, AA 5.0:1 */
  /* --color-accent-content:    oklch(from var(--color-accent) 38% calc(c * 0.41) h); */
  /* --color-accent-text:       oklch(from var(--color-accent) 52% c h); */
  /* texto de acento, AA 4.7:1 */
  /* --color-base-primary:      oklch(from var(--color-primary) 95% calc(c * 0.3) h); */
  /* --color-base-secondary:    oklch(from var(--color-secondary) 95% calc(c * 0.3) h); */
}

/* ==========================================
   TEMA OSCURO
   ==========================================
   Solo aplica si web.json lleva "theme": "dark". Si la web va en claro puedes
   ignorar este bloque entero.

   Ojo: el primario necesita MÁS luz sobre fondo oscuro (58% en vez de 45%);
   por eso lleva su propio valor y no se deriva del claro (una variable no
   puede referenciarse a sí misma: sería un ciclo y CSS la descarta).
   ========================================== */
[data-theme="dark"] {
  /* ── MARCA ─────────────────────────────────────────────────────────── */
  --color-primary: oklch(58% 0.233 277.117);
  --color-secondary: oklch(65% 0.241 354.308);
  --color-accent: oklch(77% 0.152 181.912);

  /* ── FONDOS Y TEXTO BASE ──────────────────────────────────────────── */
  /* --color-base-100: oklch(25.33% 0.016 252.42); */
  /* --color-base-200: oklch(23.26% 0.014 253.1); */
  /* --color-base-300: oklch(21.15% 0.012 254.09); */
  /* --color-base-content: oklch(97.807% 0.029 256.847); */

  /* ── DERIVADOS — normalmente NO se tocan ──────────────────────────── */
  /* --color-primary-content:   oklch(from var(--color-primary) 96% calc(c * 0.075) h); */
  /* --color-secondary-content: oklch(from var(--color-secondary) 94% calc(c * 0.12) h); */
  /* --color-secondary-text:    oklch(from var(--color-secondary) 70% c h); */
  /* --color-accent-content:    oklch(from var(--color-accent) 38% calc(c * 0.41) h); */
  /* --color-accent-text:       oklch(from var(--color-accent) 77% c h); */
}

/* ==========================================
   FORMA Y RITMO (comunes a los dos temas)
   ==========================================
   La segunda palanca visual después del color: el mismo contenido con radios
   a 0 y sin sombra parece otra web. Descomenta lo que quieras cambiar.
   ========================================== */
:root {
  /* --radius-box: 0.5rem; */ /* tarjetas, modales, cajas */
  /* --radius-button: 0.5rem; */ /* botones (999px = píldora) */
  /* --radius-img: 0.5rem; */ /* imágenes */
  /* --radius-field: 0.25rem; */ /* inputs */
  /* --radius-selector: 0.5rem; */ /* checkboxes, radios */

  /* --padding-v: clamp(3rem, 6vw + 2rem, 7rem); */ /* alto de las secciones */
  /* --padding-h: clamp(1rem, 1.5vw + 0.7rem, 3rem); */ /* márgenes laterales */
  /* --max-width: 1280px; */ /* ancho del container */

  --font1: "Montserrat"; /* familia de texto — la de la web anterior */
  --font2: "Montserrat"; /* familia de títulos */
  --bold1: 600;
  --bold2: 700;
  --max-width: 1380px;
}

.header__pre-left {
  font-size: 0.8rem;
}
.contact--ghost .contact__link {
  font-size: 0.85rem;
}
.title--4 {
  --max-size: 20;
  --min-size: 18;
}

/* ==========================================
   CLASES HEREDADAS DE LA WEB ANTERIOR
   ==========================================
   Piezas de la plantilla antigua que no tienen equivalente en el tema pero que
   son parte del diseño de ESTA marca, así que viven aquí y no en el padre.
   ========================================== */

/* Botones de color por servicio: cada especialidad tenía el color de su lápiz
   (el azul del TEA, el verde del aprendizaje, el lila del lenguaje…). El tema
   solo trae primary/secondary, de modo que los cinco se declaran aquí.
   El texto va en blanco porque los cinco son colores oscuros o medios; el más
   claro, el amarillo, queda en 4.6:1 sobre blanco. */
.button--rojo,
.button--verde,
.button--azul,
.button--amarillo,
.button--lila {
  color: #fff;
}

.button--rojo {
  background: var(--rojo);
} /* #df1c34 */
.button--verde {
  background: var(--verde);
} /* #396216 */
.button--azul {
  background: var(--azul);
} /* #0081C1 */
.button--amarillo {
  background: var(--amarillo);
} /* #C69900 */
.button--lila {
  background: var(--lila);
} /* #1D3478 */

/* Ficha de icono alineada a la izquierda. El tema centra .icon-txt siempre y
   solo ofrece --cols/--headcols, que además cambian la rejilla; esto es lo que
   hacía .icon-txt-left en la web anterior: alinear, sin tocar el layout. */
.icon-txt.icon-txt-left {
  text-align: left;
}

.icon-txt.icon-txt-left .icon-txt__ico {
  margin-inline: 0;
}

/* Colores de texto por especialidad. En la web anterior salían de variables
   sueltas (--verde, --naranja…); aquí se declaran como valores porque solo los
   usa esta marca y son decorativos. `.azul` va más arriba, mapeado al acento. */
.verde {
  color: var(--verde);
}
.naranja {
  color: var(--naranja);
}
.amarillo {
  color: var(--amarillo);
}
.lila {
  color: var(--lila);
}
.rojo {
  color: var(--rojo);
}
.azul {
  color: var(--azul);
}

/* Fondos en claro por especialidad. Mismo patrón que .section--primary-light
   del padre: el fondo se deriva del color con la fórmula de
   --color-base-primary (L 95%, croma al 30%), así que el texto base sigue
   cumpliendo contraste y las tarjetas de dentro pasan a blanco. */
.section--verde-light,
.section--amarillo-light,
.section--lila-light,
.section--azul-light {
  background: var(--section-light-bg);
  color: var(--color-base-content);
  --bg-component: var(--color-base-100);
  --item-bg: var(--bg-component);
  /* El degradado que tapa el texto plegado de los desplegables (blocks/texto)
     acaba en --desp-bg, blanco por defecto: sin esto se ve una franja blanca
     sobre el fondo de color. Se hereda, así que .container--box y
     .dual--radius, que lo redefinen en el propio .desplegables, siguen ganando. */
  --desp-bg: var(--section-light-bg);
}
.section--verde-light {
  --section-light-bg: oklch(from var(--verde) 95% calc(c * 0.15) h);
}
.section--amarillo-light {
  --section-light-bg: oklch(from var(--amarillo) 95% calc(c * 0.15) h);
}
.section--lila-light {
  --section-light-bg: oklch(from var(--lila) 95% calc(c * 0.15) h);
}
.section--azul-light {
  --section-light-bg: oklch(from var(--azul) 95% calc(c * 0.15) h);
}

body .dual.is-layout-flex {
  align-items: center !important;
}

.dual + .dual {
  margin-top: var(--padding-v);
}

.button {
  font-size: 0.95rem;
  padding: 0.7em 1em;
}
/* ==========================================================================
   LANDING DE CONVERSIÓN — variante `sectionImage--landing`
   ==========================================================================
   Réplica de `.section--landing` de la web anterior (css/landing.css): la
   portada de /retraso-lenguaje-coruña. Es EXCLUSIVA de esta marca, así que
   vive en el hijo; el padre solo trae las variantes 1/2/3 de
   `pgweb/section-image`, que son genéricas y las comparten todas las webs.

   Se enciende poniendo `sectionImage--landing` en el atributo `estilo` del
   bloque, en lugar de `sectionImage--1`. El desplegable «Estilo» del editor
   NO la lista, porque ese desplegable es del padre: si alguien lo toca, la
   clase se pierde (le pasa igual a `font--center`, que tampoco está en la
   lista y lleva ahí desde la migración).

   Este fichero va sin @layer, así que gana a las reglas del padre
   (blocks/section-image/style.css, en `layer(components)`) sin subir
   especificidad ni usar !important.

   Equivalencias con el HTML antiguo (estructura que pinta render.php):
     section.sectionImage--landing   ≙ .section--landing
       ├ .sectionImage__img > img    ≙ .landing__img
       └ .container                  ≙ .landing__info
           ├ h1                      ≙ .landing__title
           ├ h2                      ≙ .landing__subtitle
           ├ p.landing__badge        ≙ .slider-text (tenía UN solo slide)
           └ .sectionImage__buttons  ≙ .landing__buttons
   ========================================================================== */

.sectionImage--landing {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  /* La original fijaba `height`; aquí es `min-height` para que el bloque no
     recorte el texto en pantallas bajas: la foto (flex:1) absorbe el sobrante
     igual, pero si el contenido crece, crece la sección en vez de cortarse. */
  min-height: calc(var(--app-height, 100vh) - var(--header-height, 0px));
}

.sectionImage--landing .title--1 {
  --min-size: 28;
}
.sectionImage--landing .title--2 {
  --max-size: 26;
  --min-size: 20;
  letter-spacing: -0.025em;
}

.sectionImage--landing .sectionImage__img img {
  object-position: var(--img-box-obj, 50% 50%);
  border-radius: 0;
}

.sectionImage--landing .container {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
}

/* Pastilla azul del reclamo. En la web anterior era un carrusel (.slider-text)
   de una sola diapositiva, con una caja blanca y una estrella a la izquierda;
   sin carrusel que justifique el JS, queda como párrafo con la estrella en un
   ::before. La clase la lleva el propio párrafo (Avanzado → Clase CSS). */
.sectionImage--landing .landing__badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 0.75rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  background: var(--azul);
  color: #fff;
  --max-size: 22;
  --min-size: 18;

  border-radius: var(--radius-box);
}

.sectionImage--landing .landing__badge::before {
  content: "\f005";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 1.5rem;
  color: var(--azul);
  background: #fff;
  border-radius: var(--radius-box);
}

.sectionImage--landing .landing__badge > strong {
  flex: 1;
}

.sectionImage--landing .sectionImage__buttons .button {
  white-space: nowrap;
  font-size: 1.25rem;
}

/* ── Apilado: foto arriba, texto debajo ──────────────────────────────────
   El corte es 820px, el mismo de la web anterior. Hace falta cubrir desde
   601px porque a partir de ahí el padre ya manda la foto al fondo absoluto
   (`.sectionImage:not(.sectionImage--3)`), y aquí eso llega 220px más tarde. */
@media screen and (max-width: 820px) {
  .sectionImage--landing {
    max-height: 844px;
  }
  .sectionImage--landing .sectionImage__img {
    position: relative;
    flex: 1 1 260px;
    min-height: 260px;
    margin-bottom: var(--padding-h);
  }
  .sectionImage--landing .sectionImage__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0; /* anula el min-height:300px de la base del bloque */
    object-fit: cover;
  }
  /* Velo inferior: es lo que hace legible el H1 en blanco sobre la foto. */
  .sectionImage--landing .sectionImage__img::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 75%;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.85) 100%
    );
  }
  /* Curva que corta la foto contra el fondo, con la silueta del tema. */
  .sectionImage--landing .sectionImage__img::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: min(6vw, 16px);
    z-index: 2;
    background-color: var(--color-base-100);
    -webkit-mask-image: var(--shape-curve);
    mask-image: var(--shape-curve);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: rotate(180deg);
    pointer-events: none;
  }
  .sectionImage--landing .container {
    padding: 0 var(--padding-h) min(var(--padding-v), 2.5rem);
  }
  /* El H1 sube fuera de su caja y se tumba sobre la foto, encima del velo. */
  .sectionImage--landing .container > h1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    z-index: 2;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    padding: var(--padding-h) var(--padding-h)
      calc(var(--padding-h) * 2 + min(6vw, 24px));
  }
}

/* ── Escritorio: foto a sangre y caja de texto de 540px a la izquierda ──── */
@media screen and (min-width: 821px) {
  .sectionImage--landing {
    justify-content: center;
    min-height: max(
      70vh,
      calc(var(--app-height, 100vh) - var(--header-height, 0px))
    );
    padding: var(--padding-v) var(--padding-h);
  }
  .sectionImage--landing .sectionImage__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
  }
  .sectionImage--landing .sectionImage__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Aquí no hay velo ni curva: la original los daba solo en móvil. */
  .sectionImage--landing .sectionImage__img::before,
  .sectionImage--landing .sectionImage__img::after {
    display: none;
  }
  /* La caja de 540px se alinea con el borde IZQUIERDO de la rejilla de 1280,
     no con el del viewport: por eso el .container conserva su ancho máximo y
     es una rejilla de UNA columna de 540 la que estrecha el contenido. Con
     flex + `align-items:flex-start` no valía: los `margin:0 auto` de dentro
     (la pastilla) centraban respecto a los 1280 en lugar de a los 540.
     El texto sigue centrado dentro de la caja, como en la web anterior (el
     bloque lleva `font--center`). */
  .sectionImage--landing .container {
    display: grid;
    grid-template-columns: minmax(0, 540px);
    margin-inline: auto;
  }
  .sectionImage--landing .container > h1 {
    position: static;
    transform: none;
    padding: 0;
    /* El H1 iba en azul en la web anterior (clase `azul` del original). En
       móvil manda el blanco sobre la foto, que se define más arriba. */
    color: var(--azul);
    text-shadow: none;
  }
}

/* Pre-barra de la cabecera: sin WhatsApp (sigue en el pie y en el bloque
   Datos de contacto). template-parts/contact.php no pone el tipo en el <li>,
   así que se reconoce por el icono. */
.header__pre .contact__item:has(.fa-whatsapp) {
  display: none;
}

/* ==========================================================================
   PORTADA — ajustes de esta marca sobre pgweb/portada (blocks/portada/style.css
   del padre, en `layer(components)`). Van sin capa, así que ganan al padre
   aunque tengan menos especificidad o estén fuera de su media query: por eso
   cada regla se acota a la variante que toca.
   ========================================================================== */

/* El padre pone `color: #fff` en .portada__inner. Aquí el texto hereda.
   Solo en estilo1/2: los estilos 3, 4 y 5 ya fijan su propio color en el inner
   y una regla sin capa en `.portada__inner` se lo pisaría. OJO: en móvil el
   texto de estilo1/2 va sobre el degradado oscuro de la foto (en escritorio
   `.portada__info` lo vuelve a poner en #fff). */
.portada--estilo1 .portada__inner,
.portada--estilo2 .portada__inner {
  color: inherit;
}

/* estilo3 — panel dividido: foto redondeada a la derecha, texto sin fondo de
   color sobre base-200. */
@media screen and (min-width: 768px) {
  .portada--estilo3 {
    background: var(--color-base-200);
    padding: 1rem 1rem 1rem 0;
  }
  .portada--estilo3 .portada__overlink {
    grid-template-columns: 0.5fr 0.5fr;
  }
  .portada--estilo3 .portada__img {
    max-width: 1024px;
    border-radius: var(--radius-box);
    overflow: hidden;
  }
  .portada--estilo3 .portada__inner {
    background: none;
    color: inherit;
  }
  .portada--estilo3 .portada__info {
    margin: 0;
    margin-left: auto;
  }
  .portada--estilo3 .portada__title {
    color: var(--color-primary);
  }
}

/* ==========================================
   NOTICIAS EN INICIO — el Bucle de consulta (core/query) de la portada
   ==========================================
   Es el patrón de WordPress «Pequeña imagen y título» en rejilla de 2
   columnas: miniatura al 25 % y, al lado, título, categoría y fecha. Aquí
   cada entrada pasa a ser una tarjeta con la imagen a 4/3, la categoría
   encima del título (como en el listado del blog) y los espacios ajustados.

   Se acota con `body.home` porque el bloque no lleva clase propia y es el
   único Bucle de consulta de la web. Si algún día hay otro en la portada,
   ponle a este una clase («Avanzado → Clase(s) CSS adicional(es)») y cambia
   el selector.

   Anchos de columna (25/75) y tamaño del título: los manda el editor, no
   este archivo. */
body.home .wp-block-query .wp-block-post-template {
  gap: 1.5rem;
}

body.home .wp-block-query .wp-block-post {
  background: var(--color-base-100);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow);
  padding: 1rem;
  transition: box-shadow 250ms ease;
}
body.home .wp-block-query .wp-block-post:hover {
  box-shadow: 0 8px 24px -6px rgba(50, 65, 80, 0.18);
}

/* El patrón anida dos filas de columnas; sus márgenes y huecos de serie
   separaban la tarjeta de su propio contenido. */
body.home .wp-block-query .wp-block-post .wp-block-columns {
  margin: 0;
  gap: 1.25rem;
}

/* Imagen a 4/3 recortada. El `margin: 0` quita el `:where(figure)` de
   WordPress, que dejaba 1em debajo y descentraba la imagen. */
body.home .wp-block-query .wp-block-post-featured-image {
  margin: 0;
  border-radius: var(--radius-img);
  overflow: hidden;
}
body.home .wp-block-query .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  body.home .wp-block-query .wp-block-post-featured-image img {
    transition: transform 0.4s ease;
  }
  body.home .wp-block-query .wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
  }
}

/* Columna de texto: categoría, título y fecha, en ese orden y juntos. */
body.home .wp-block-query .wp-block-post .wp-block-column:has(> .wp-block-post-title) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
body.home .wp-block-query .wp-block-post .wp-block-column:has(> .wp-block-post-title) > * {
  margin: 0;
}
body.home .wp-block-query .wp-block-post-terms {
  order: -1;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.home .wp-block-query .wp-block-post-terms a {
  color: var(--color-primary);
  text-decoration: none;
}
body.home .wp-block-query .wp-block-post-terms a:hover {
  text-decoration: underline;
}
body.home .wp-block-query .wp-block-post-title {
  line-height: 1.3;
}
body.home .wp-block-query .wp-block-post-title a {
  color: var(--color-base-content);
  text-decoration: none;
}
body.home .wp-block-query .wp-block-post-title a:hover {
  color: var(--color-primary);
}
body.home .wp-block-query .wp-block-post-date {
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
}

/* En móvil, miniatura al lado del texto en vez de apilada: apilada, cada
   noticia ocupaba ~370px de alto con la foto a todo el ancho. Los
   `!important` son obligados: core/columns fuerza `flex-wrap: wrap
   !important` y `flex-basis: 100% !important` por debajo de 782px. (La alternativa sin CSS es desmarcar
   «Apilar en móvil» en las columnas interiores del bloque.) */
@media (max-width: 781px) {
  body.home .wp-block-query .wp-block-post .wp-block-columns.are-vertically-aligned-center {
    flex-wrap: nowrap !important;
    gap: 1rem;
  }
  body.home .wp-block-query .wp-block-post .wp-block-columns.are-vertically-aligned-center > .wp-block-column:has(.wp-block-post-featured-image) {
    flex-basis: 35% !important;
    flex-shrink: 0;
  }
  body.home .wp-block-query .wp-block-post .wp-block-columns.are-vertically-aligned-center > .wp-block-column:has(> .wp-block-post-title) {
    flex-basis: auto !important;
    flex-grow: 1;
    min-width: 0;
  }
}