/* ==========================================================================
   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-text 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 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: 3.25rem clamp(1.5rem, 4vw, 3.25rem);
  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: 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 manuscrito 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;
}
.pb-seccion-titulo {
  font-family: var(--font-script);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  color: var(--brand-slate-strong);
  margin: 0;
  /* La Dancing Script tiene ascendentes y descendentes largos que el line-height
     corto recorta arriba. */
  padding-top: .15em;
}
.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; }
}

.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;
}

/* -------------------------------------------------------------- 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; }
/* Manuscrita y en el color del área, como el mockup. 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-script);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.2;
  color: var(--pb-cat-ink);
  margin: .5rem 0 .55rem;
}
.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.
   El botón circular va SÓLIDO en el color del área (mockup v2). */
.pb-cat--nido {
  --pb-cat-bg: var(--brand-pink);                                  /* rosa claro oficial */
  --pb-cat-ink: var(--brand-coral-text);
  --pb-cat-accion: var(--brand-coral); --pb-cat-accion-ink: #33424A;
}
.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-coral-text);
  --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-coral-text);
  --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.5rem 0 3.75rem; }
.pb-porque-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  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; }
}
.pb-porque-titulo {
  position: relative;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.25;
  color: var(--brand-slate-strong);
  margin: 0 0 1.25rem;
  max-width: 24ch;
}
.pb-porque-titulo svg { width: 30px; height: 30px; color: var(--brand-coral); vertical-align: -.12em; }
/* 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;
}
.pb-porque-foto { margin: 0; }
.pb-porque-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 28px;
  display: block;
  box-shadow: var(--sh);
}
@media (max-width: 899.98px) { .pb-porque-foto img { aspect-ratio: 16 / 10; } }

/* 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);
}
.pb-circulos--valores .pb-circulo-texto { font-weight: 500; max-width: 22ch; }

/* ---------------------------------------------------------- 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;
}
.pb-carrusel-pista {
  list-style: none;
  margin: 0;
  padding: .5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1.5rem;
  /* Deslizable sólo cuando no cabe (móvil): en escritorio las tres columnas
     caben y no hay desbordamiento que deslizar. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pb-carrusel-pista::-webkit-scrollbar { display: none; }
@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;
}
.pb-testimonio-firma {
  font-family: var(--font-script);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--brand-coral-text);
}

.pb-carrusel-flecha {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-coral) 30%, #fff);
  color: var(--brand-ink);
  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-coral); 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-flecha { background: var(--brand-pink); }
}

.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; }
/* Mosaico de 3×2: cinco fotos y el enlace a Instagram ocupando la última celda. */
.pb-dia-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 767.98px) { .pb-dia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pb-dia-foto { margin: 0; }
.pb-dia-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
.pb-dia-ig {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background: color-mix(in srgb, var(--brand-coral) 30%, #fff);
  color: var(--brand-ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.4;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.pb-dia-ig:hover { color: var(--brand-ink); background: var(--brand-coral); transform: translateY(-3px); }
.pb-dia-ig svg { width: 34px; height: 34px; }
@supports not (background: color-mix(in srgb, red 20%, #fff)) {
  .pb-dia-ig { 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: 0 0 2.5rem; }
.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;
}