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

   Nota de contraste: los títulos de tarjeta que el mockup pinta en amarillo o
   coral van en tinta oscura (#33424A). Coral sobre coral pálido da 1.80:1 y
   amarillo sobre amarillo pálido es peor; ninguno alcanza ni el 3:1 de texto
   grande. La identidad de color la cargan el fondo, el ícono y el botón
   circular, que sí pasan AA. Está anotado para que Marige lo confirme.
   ========================================================================== */

/* ------------------------------------------------------------------ hero -- */
.pb-hero {
  position: relative;
  min-height: clamp(430px, 64vh, 640px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pb-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.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-block: 3.5rem;
  max-width: 34rem;
}
.pb-hero-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  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: 2.5rem;
  bottom: 2.25rem;
  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 { min-height: 0; }
  .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-block: 2.5rem 7rem; max-width: none; }
  .pb-hero-nota { right: 1.25rem; bottom: 1.5rem; left: 1.25rem; text-align: center; }
}

/* ----------------------------------------------------------------- intro -- */
.pb-intro {
  background: var(--brand-cream);
  padding: 3.5rem 0 3rem;
  text-align: center;
}
.pb-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-slate-strong);
  margin: 0 0 .9rem;
}
.pb-intro-titulo {
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  line-height: 1.25;
  color: var(--brand-slate-strong);
  margin: 0 auto 1.1rem;
  /* 22ch dejaba al corazón solo en un renglón: la Dancing Script es angosta y la
     frase entera cabía en una línea, pero el ícono ya no. */
  max-width: 30ch;
}
.pb-intro-titulo svg { width: 30px; height: 30px; color: var(--brand-coral); vertical-align: -.12em; }
.pb-intro-texto {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--brand-ink);
  margin: 0 auto;
  max-width: 52ch;
}

/* -------------------------------------------------------------- tarjetas -- */
.pb-cats { padding: 2.75rem 0 3.25rem; }
.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;
}
.pb-cat-icono { color: var(--pb-cat-ink); line-height: 0; }
.pb-cat-icono svg { width: 60px; height: 60px; display: block; }
.pb-cat-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--pb-cat-ink);
  margin: .45rem 0 .5rem;
}
.pb-cat-texto {
  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. */
.pb-cat--nido {
  --pb-cat-bg: var(--brand-pink);                                  /* rosa claro oficial */
  --pb-cat-ink: var(--brand-blue-text);
  --pb-cat-accion: var(--brand-blue-text); --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-ink);
  --pb-cat-accion: var(--brand-yellow); --pb-cat-accion-ink: var(--brand-ink);
}
.pb-cat--cuidame {
  --pb-cat-bg: color-mix(in srgb, var(--brand-coral) 28%, #fff);
  --pb-cat-ink: var(--brand-ink);
  --pb-cat-accion: var(--brand-coral); --pb-cat-accion-ink: #33424A;
}
/* 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.25rem 0 3.5rem; text-align: center; }
.pb-porque-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  color: var(--brand-slate-strong);
  margin: 0 0 .9rem;
}
.pb-porque-texto {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--brand-ink);
  margin: 0 auto 2.5rem;
  max-width: 58ch;
}
.pb-valores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.25rem .75rem;
}
@media (max-width: 991.98px) { .pb-valores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .pb-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pb-valor { display: flex; flex-direction: column; align-items: center; gap: .6rem; min-width: 0; }
.pb-valor-circulo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pb-valor-bg);
  color: var(--brand-slate-strong);
}
.pb-valor-circulo svg { width: 36px; height: 36px; }
.pb-valor span {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-ink);
  overflow-wrap: break-word;
}
.pb-valor:nth-child(1) { --pb-valor-bg: color-mix(in srgb, var(--brand-coral) 30%, #fff); }
.pb-valor:nth-child(2) { --pb-valor-bg: color-mix(in srgb, var(--brand-yellow) 45%, #fff); }
.pb-valor:nth-child(3) { --pb-valor-bg: color-mix(in srgb, var(--brand-blue) 22%, #fff); }
.pb-valor:nth-child(4) { --pb-valor-bg: color-mix(in srgb, var(--brand-green) 26%, #fff); }
.pb-valor:nth-child(5) { --pb-valor-bg: color-mix(in srgb, var(--brand-orange) 28%, #fff); }
.pb-valor:nth-child(6) { --pb-valor-bg: var(--brand-pink); }
.pb-valor:nth-child(7) { --pb-valor-bg: color-mix(in srgb, var(--brand-gray) 28%, #fff); }
@supports not (background: color-mix(in srgb, red 20%, #fff)) {
  .pb-valor-circulo { background: var(--brand-pink); }
}

/* -------------------------------------------------------------- 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: 2.5rem 0 1rem; }
.pb-avisos-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--brand-slate-strong);
  margin: 0 0 1.25rem;
}