/* ==========================================================================
   Home público de Piruli — secciones propias de la portada.
   Depende de publico.css (tokens .publico, .pb-wrap, .pb-btn, .pb-circulos).

   Nota de contraste (mockup v2): el mockup pinta el título de cada tarjeta en
   el color de su área. Los colores DECORATIVOS del Brandbook no alcanzan
   contraste como texto sobre su propio pastel (amarillo #FFD975 sobre su tinte
   da 1.18:1; coral #FA8D7A sobre rosa, 1.64:1). Se usan los tokens de TEXTO que
   ya existen para eso —--brand-coral-legible y --brand-blue-text—, que conservan el
   color del área y quedan entre 3.4:1 y 4.2:1: AA para texto grande. No se
   inventó ningún hex. Anotado para que Marige/Enrique lo confirmen.
   ========================================================================== */

/* ------------------------------------------------------------------ hero -- */
/* El hero es una TARJETA con márgenes (así lo dibuja el mockup), no una franja
   a sangre: alrededor se ve el crema del fondo. */
.pb-hero { padding: 1.25rem 0 0; }
.pb-hero-marco {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  min-height: clamp(400px, 58vh, 560px);
  display: flex;
  align-items: center;
  box-shadow: var(--sh-lg);
}
.pb-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.pb-hero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(41, 52, 58, .86) 0%,
    rgba(41, 52, 58, .70) 38%,
    rgba(41, 52, 58, .28) 70%,
    rgba(41, 52, 58, .10) 100%);
}
.pb-hero-cuerpo {
  position: relative;
  z-index: 2;
  padding: 3.25rem clamp(1.5rem, 4vw, 3.25rem);
  max-width: 34rem;
}
/* Baloo 2 negrita en MAYÚSCULAS (Marige, 21-sep). El text-transform hace las
   mayúsculas; el texto en el marcado sigue en caja normal para que el buscador
   y el lector de pantalla no reciban un titular deletreado. */
.pb-hero-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  font-size: clamp(1.85rem, 4.2vw, 3.05rem);
  line-height: 1.12;
  color: #fff;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.pb-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 1.75rem;
  max-width: 30rem;
}
.pb-hero-nota {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.75rem);
  bottom: 2rem;
  z-index: 2;
  margin: 0;
  text-align: right;
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 10px rgba(41, 52, 58, .55);
}
.pb-hero-nota svg { width: 24px; height: 24px; vertical-align: -.2em; }

@media (max-width: 767.98px) {
  .pb-hero-marco { min-height: 0; border-radius: 24px; }
  .pb-hero-velo {
    background: linear-gradient(180deg, rgba(41, 52, 58, .55) 0%, rgba(41, 52, 58, .82) 55%, rgba(41, 52, 58, .9) 100%);
  }
  .pb-hero-cuerpo { padding: 2.25rem 1.5rem 6.5rem; max-width: none; }
  .pb-hero-nota { right: 1.25rem; bottom: 1.5rem; left: 1.25rem; text-align: center; }
}

/* ------------------------------------------- encabezado de cada sección --- */
/* Título a la izquierda y nota en versalitas a la derecha, con el corazón, tal
   como el mockup. */
.pb-seccion-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
/* Baloo 2 negrita en MAYÚSCULAS (Marige, 21-sep): antes iban en manuscrita.
   Las mayúsculas se hacen con text-transform y NO escribiendo el texto en
   mayúsculas en la vista: así el buscador y el lector de pantalla reciben
   "Nuestras áreas" y no "NUESTRAS ÁREAS" deletreado. */
.pb-seccion-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--brand-blue-text); /* azul de Kínder (Marige, 24-sep); contraste en la doc 289596 */
  margin: 0;
}
.pb-seccion-nota {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .35rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--brand-slate);
  text-align: right;
}
.pb-seccion-nota svg { width: 26px; height: 26px; flex: none; color: var(--brand-coral); }

@media (max-width: 575.98px) {
  .pb-seccion-head { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .pb-seccion-nota { text-align: left; margin-bottom: 0; }
}

/* -------------------------------------------------------------- tarjetas -- */
.pb-cats { padding: 3.25rem 0; }
.pb-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 1099.98px) { .pb-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px)  { .pb-cats-grid { grid-template-columns: 1fr; } }

.pb-cat {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: var(--pb-cat-bg);
  box-shadow: var(--sh);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pb-cat:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
/* La foto va en posición absoluta DENTRO del marco 4/3, no como hijo en flujo.
   Si fluye, una foto vertical (la de fiestas es 900×1200) resuelve su height:100%
   contra un padre de altura automática, se queda con su alto intrínseco y estira
   la tarjeta: en el grid quedaba una tarjeta más alta que las otras tres y la ola
   se salía del recorte. En absoluto no aporta tamaño al contenedor. */
.pb-cat-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; flex: none; }
.pb-cat-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* La ola es la transición foto → color de la tarjeta que pide el mockup. */
.pb-cat-ola { position: absolute; left: 0; bottom: -1px; width: 100%; height: 44px; display: block; }
.pb-cat-ola path { fill: var(--pb-cat-bg); }

.pb-cat-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .35rem 1.2rem 1.5rem;
}
/* La ilustración oficial del área. Se fija el ALTO y el ancho queda libre
   (.pb-ilustracion en publico.css): cada dibujo del Brandbook trae su propia
   proporción y meterlos a la fuerza en un cuadro los deforma. */
.pb-cat-icono { height: 68px; line-height: 0; display: flex; align-items: flex-end; }
/* Montserrat NEGRITA (Marige, 21-sep): antes iba en manuscrita. Conserva el
   color del área; ver la nota de contraste del encabezado: el color sale de los
   tokens de TEXTO, no del decorativo. */
.pb-cat-titulo {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .01em;
  line-height: 1.25;
  color: var(--pb-cat-ink);
  margin: .6rem 0 .55rem;
}
/* El salto de renglón lo decide el contenido (\n en ResumenHome, Marige
   25-sep: «siendo tú» y «también en casa» en su propio renglón). */
.pb-cat-texto {
  white-space: pre-line;
  text-wrap: balance;
  font-family: var(--font-body);
  font-size: .93rem;
  line-height: 1.55;
  color: var(--brand-ink);
  margin: 0 0 1.2rem;
}
.pb-cat-flecha {
  margin-top: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pb-cat-accion);
  color: var(--pb-cat-accion-ink);
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .18s var(--ease);
}
.pb-cat-flecha:hover { color: var(--pb-cat-accion-ink); transform: translateX(3px); }

/* Fondos: tintes DERIVADOS de la paleta oficial hacia blanco, nunca hex nuevos.
   El botón circular va SÓLIDO en el color de acción del área, con la flecha
   BLANCA (mismo criterio que los botones: ver la nota de --pb-acento en
   publico.css). En coral (Nido, Cuídame) es #FA8D7A + blanco, 2.29:1:
   trade-off aceptado por Enrique el 2026-09-24. En amarillo (Fiestas) también
   va blanca: 1.36:1, mismo trade-off aceptado ese día.
   Marige, 25-sep: Nido = rosa (flecha #F9D0D1 + blanco, 1.40:1) y el NOMBRE
   «Fiestas» en amarillo #FFD975 (1.18:1 sobre su panel: prácticamente no se
   lee). Ambos dentro de la autorización general de Enrique para cambios de
   color de Marige en dev; los números van en la doc 289596. */
.pb-cat--nido {
  --pb-cat-bg: var(--brand-pink);                                  /* rosa claro oficial */
  --pb-cat-ink: var(--brand-coral-legible);
  --pb-cat-accion: var(--brand-pink); --pb-cat-accion-ink: #fff;
}
.pb-cat--kinder {
  --pb-cat-bg: color-mix(in srgb, var(--brand-blue) 20%, #fff);
  --pb-cat-ink: var(--brand-blue-text);
  --pb-cat-accion: var(--brand-blue-text); --pb-cat-accion-ink: #fff;
}
.pb-cat--fiestas {
  --pb-cat-bg: color-mix(in srgb, var(--brand-yellow) 45%, #fff);
  --pb-cat-ink: var(--brand-yellow);
  --pb-cat-accion: var(--brand-yellow); --pb-cat-accion-ink: #fff;
}
.pb-cat--cuidame {
  --pb-cat-bg: color-mix(in srgb, var(--brand-coral) 28%, #fff);
  --pb-cat-ink: var(--brand-coral-legible);
  --pb-cat-accion: var(--brand-primary); --pb-cat-accion-ink: #fff;
}
/* Respaldo para navegadores sin color-mix(): el rosa oficial sirve de base cálida. */
@supports not (background: color-mix(in srgb, red 20%, #fff)) {
  .pb-cat--kinder, .pb-cat--fiestas, .pb-cat--cuidame { --pb-cat-bg: var(--brand-cream); }
}

/* ------------------------------------------------------------- ¿por qué? -- */
.pb-porque { background: var(--brand-cream); padding: 3.5rem 0 3.75rem; }
/* La foto es rectangular HORIZONTAL (Marige, 21-sep), así que la columna de la
   foto pesa lo mismo que la del texto: con .85fr una panorámica quedaba
   raquítica al lado del titular. */
.pb-porque-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 3.25rem;
}
@media (max-width: 899.98px) {
  .pb-porque-grid { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; }
}
/* Titular corto en Baloo 2 negrita MAYÚSCULAS y más grande; la frase larga
   bajó a subtexto (.pb-porque-sub). Antes era al revés: la frase era el titular
   manuscrito. Las mayúsculas van por text-transform, no en el marcado. */
.pb-porque-titulo {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.1;
  color: var(--brand-blue-text); /* azul de Kínder (Marige, 24-sep) */
  margin: 0 0 .85rem;
}
.pb-porque-sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  line-height: 1.6;
  color: var(--brand-slate-strong);
  margin: 0 0 1.5rem;
  max-width: 34ch;
}
.pb-porque-sub svg { width: 22px; height: 22px; color: var(--brand-coral); vertical-align: -.25em; }
/* El destello va colgado arriba del titular, como en el mockup, sin empujar
   el texto: por eso absoluto y no en flujo. */
.pb-destello {
  position: absolute;
  top: -1.5rem;
  left: -.35rem;
  line-height: 0;
  color: var(--brand-yellow);
}
.pb-destello svg { width: 34px; height: 34px; color: inherit; }
@media (max-width: 899.98px) { .pb-destello { top: -1.35rem; left: 0; } }

.pb-porque-lineas {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600;
  line-height: 1.85;
  color: var(--brand-ink);
  margin: 0 0 1.75rem;
}
/* HORIZONTAL, no vertical (Marige, 21-sep): antes era 4/5 y se alargaba hacia
   abajo. La referencia la dibuja panorámica, ancha y de poca altura. */
.pb-porque-foto { margin: 0; justify-self: center; width: 100%; max-width: 440px; }
/* Foto REAL de Marige (24-sep), vertical: el marco pasa de 16:10 a 4:5 para
   que se vea casi completa (el 16:10 le cortaba más de la mitad). El recorte
   que queda es sólo un poco arriba y abajo. */
.pb-porque-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 28px;
  display: block;
  box-shadow: var(--sh);
}

/* Los valores usan el componente compartido .pb-circulos (publico.css), el
   mismo de la fila de rasgos de cada área; aquí sólo se añade el título. */
/* Los dos <span> compiten con la regla genérica `.pb-circulo span` de
   publico.css, que es más específica que una clase sola: de ahí el
   descendiente. */
.pb-circulos--valores .pb-circulo { gap: .5rem; }
.pb-circulos--valores .pb-circulo-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--brand-slate-strong);
}
/* Un solo fondo para los seis (Marige, 24-sep): #EFDFD7 al 70 %, en vez de la
   rotación de pasteles del componente compartido. Sin frase debajo: solo
   ícono y título. */
.pb-circulos--valores .pb-circulo-marco { background: rgba(239, 223, 215, .7); }

/* Íconos en ACUARELA (Marige, 24-sep): "más claros y más estéticos", como
   pintados. Cada ícono es una mancha de color (--wc-lavado, translúcida, con
   borde irregular y pigmento acumulado en la orilla) más una línea fina encima
   (--wc-trazo). Los filtros SVG viven en _IconoAcuarela.

   Colores: la mancha es el tono BASE de la paleta oficial; la línea es ese
   mismo tono apenas asentado hacia la tinta, para que dibuje sin volverse el
   trazo oscuro de antes. Son decorativos (el valor va escrito debajo y el SVG
   es aria-hidden), así que no les aplica el 3:1 de WCAG 1.4.11; lo que se
   cuida es que la silueta se reconozca sobre su pastel.
     · "Crecer juntos" es MORADO en la referencia y el Brandbook de Piruli no
       tiene morado: va en el verde de las hojas en vez de inventar un hex.
     · "Acompañar" no lleva estas variables: son las dos aves oficiales. */
.pb-circulos--valores .pb-circulo-marco .wc-icono { width: 54px; height: 54px; overflow: visible; }
.pb-circulos--valores .pb-circulo-marco .wc-pirulis { width: 66px; height: 66px; }
.pb-circulo-marco .wc-defs, .wc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wc-lavado { fill: var(--wc-lavado); opacity: .55; filter: url(#wc-lavado); }
.wc-lavado .wc-lavado-linea { fill: none; stroke: var(--wc-lavado); stroke-width: 2.8; stroke-linecap: round; }
.wc-trazo {
  fill: none;
  stroke: var(--wc-trazo);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .88;
  filter: url(#wc-trazo);
}
.wc-aves { filter: url(#wc-imagen); opacity: .92; }

.pb-circulos--valores .pb-circulo:nth-child(1) {
  --wc-lavado: var(--brand-coral);
  --wc-trazo:  color-mix(in srgb, var(--brand-coral) 78%, var(--brand-ink));
}
.pb-circulos--valores .pb-circulo:nth-child(2) {
  /* Jugar: la mancha va en naranja (en amarillo casi no se veía). */
  --wc-lavado: var(--brand-orange);
  --wc-trazo:  color-mix(in srgb, var(--brand-orange) 82%, var(--brand-ink));
}
.pb-circulos--valores .pb-circulo:nth-child(3) {
  --wc-lavado: var(--brand-blue);
  --wc-trazo:  color-mix(in srgb, var(--brand-blue) 85%, var(--brand-ink));
}
.pb-circulos--valores .pb-circulo:nth-child(4),
.pb-circulos--valores .pb-circulo:nth-child(6) {
  --wc-lavado: var(--brand-green);
  --wc-trazo:  color-mix(in srgb, var(--brand-green) 72%, var(--brand-ink));
}
@supports not (color: color-mix(in srgb, red 20%, #fff)) {
  .pb-circulos--valores .pb-circulo:nth-child(1) { --wc-trazo: var(--brand-coral); }
  .pb-circulos--valores .pb-circulo:nth-child(2) { --wc-trazo: var(--brand-orange); }
  .pb-circulos--valores .pb-circulo:nth-child(3) { --wc-trazo: var(--brand-blue); }
  .pb-circulos--valores .pb-circulo:nth-child(4),
  .pb-circulos--valores .pb-circulo:nth-child(6) { --wc-trazo: var(--brand-green); }
}

/* ---------------------------------------------------------- testimonios -- */
.pb-testimonios { padding: 3.5rem 0; }
/* Rejilla de 3 columnas: la flecha izquierda, la pista y la derecha. Los puntos
   ocupan la fila de abajo, centrados bajo la pista. */
.pb-carrusel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}
/* Se ven TRES a la vez y el resto se desliza. Desde el 21-sep son seis
   testimonios: con `1fr` los seis se aplastaban para caber en la pantalla y el
   carrusel dejaba de tener nada que deslizar, que es justo lo contrario de lo
   que pide una lista larga. El ancho se calcula contra el de la pista menos los
   dos huecos, así que las tres tarjetas visibles llenan el renglón exacto. */
.pb-carrusel-pista {
  list-style: none;
  margin: 0;
  padding: .5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 3);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pb-carrusel-pista::-webkit-scrollbar { display: none; }
@media (max-width: 1099.98px) {
  .pb-carrusel-pista { grid-auto-columns: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 899.98px) {
  .pb-carrusel-pista { grid-auto-columns: 100%; }
}

.pb-testimonio { scroll-snap-align: center; min-width: 0; }
.pb-testimonio blockquote {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--brand-cream);
  border-radius: 24px;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: var(--sh);
}
.pb-testimonio-cita {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brand-ink);
  margin: 0 0 1.25rem;
  flex: 1;
}
/* El nombre de la mamá va en AZUL (Marige, 21-sep). Se usa el azul de TEXTO
   (#3E6CB0, 5.4:1 sobre el crema de la tarjeta); el azul base da 3.1:1 y no
   alcanza AA para este tamaño. */
.pb-testimonio-firma {
  font-family: var(--font-script);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--brand-blue-text);
}

.pb-carrusel-flecha {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  /* Coral #FA8D7A + flecha BLANCA, como el resto de los botones (Marige,
     24-sep; 2.29:1, trade-off aceptado por Enrique). Antes: pastel + gris. */
  background: var(--brand-primary);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.pb-carrusel-flecha:hover { background: var(--brand-primary-hover); transform: scale(1.06); }
.pb-carrusel-flecha:disabled { opacity: .35; cursor: default; transform: none; }
@supports not (background: color-mix(in srgb, red 20%, #fff)) {
}

.pb-carrusel-puntos {
  grid-column: 2;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.pb-carrusel-puntos button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gray);
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.pb-carrusel-puntos button[aria-current="true"] { background: var(--brand-coral); transform: scale(1.3); }
/* El JS apaga los controles cuando no hay nada que deslizar: unas flechas que
   no hacen nada confunden más que no tenerlas. */
.pb-carrusel[data-pb-estatico] .pb-carrusel-flecha,
.pb-carrusel[data-pb-estatico] .pb-carrusel-puntos { display: none; }
.pb-carrusel[data-pb-estatico] { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------ día a día -- */
.pb-dia { padding: 0 0 3.75rem; }
/* Un solo renglón de seis: las cinco fotos y el enlace a Instagram. Marige
   (21-sep) las pidió MÁS CHICAS —en 3×2 cada foto medía casi 380px de ancho y
   competía con el hero—; en una fila de seis quedan del tamaño de una viñeta,
   que es lo que este bloque es: un vistazo, no una galería. */
.pb-dia-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 991.98px) { .pb-dia-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .pb-dia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pb-dia-foto { margin: 0; }
.pb-dia-foto img {
  width: 100%;
  /* Vertical 3:4, igual que las fotos reales de Marige (24-sep): se ven
     completas, sin recorte. Antes 4:3 horizontal, que les cortaba la mitad. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* El radio baja con la foto: 20px en una viñeta de 180px se come la esquina. */
  border-radius: 14px;
  display: block;
}
.pb-dia-ig {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  /* Coral sólido + texto blanco, como las flechas del carrusel (aprobado
     24-sep): 2.29:1, trade-off aceptado. En pastel daba 1.27:1. */
  background: var(--brand-primary);
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.3;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.pb-dia-ig:hover { color: #fff; background: var(--brand-primary-hover); transform: translateY(-3px); }
.pb-dia-ig svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------- cierre -- */
/* Última invitación antes del pie (Marige, 21-sep). Va centrada y sobre el
   crema para que se lea como un remate y no como una sección más. */
.pb-cierre {
  background: var(--brand-cream);
  padding: 3rem 0 3.25rem;
  text-align: center;
}
.pb-cierre-lema { text-transform: uppercase; } /* Marige, 24-sep; mayúsculas por CSS, no en el marcado */
.pb-cierre-texto {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.3;
  color: var(--brand-slate-strong);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
/* La pregunta es la que remata; va en manuscrita y en color, como el mockup.
   Azul de Kínder (--brand-blue-text #3E6CB0), igual que los títulos de sección
   (Marige, 24-sep; antes coral #FA8D7A). Contraste medido en la doc 289596. */
.pb-cierre-pregunta {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.25em;
  color: var(--brand-blue-text);
}

/* --------------------------------------------------------------- avisos -- */
/* Anuncios y publicidad que administra el Panel. Sólo se pinta si hay algo:
   un "No hay anuncios por ahora." en una portada de marketing se lee como
   sitio abandonado. */
.pb-avisos { padding: 0 0 2.5rem; }
.pb-avisos-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--brand-slate-strong);
  margin: 0 0 1.25rem;
}