/* ==========================================================================
   Páginas de área del sitio público: /nido, /kinder, /fiestas, /cuidame.
   Las cuatro son el MISMO diseño; sólo cambian los tres tokens de color de
   .pc-hero--{clave}. Se carga junto con publico.css (chrome compartido).

   REGLA DE COLOR: cero hexes nuevos. Los pasteles se derivan con color-mix()
   de los tokens oficiales del Brandbook hacia blanco.
   ========================================================================== */

/* ------------------------------------------------------------- encabezado -- */
.pc-hero {
  position: relative;
  overflow: hidden;              /* contiene las manchas decorativas */
  isolation: isolate;
  /* Blanco-beige en las CUATRO áreas (Marige, 25-sep): antes cada encabezado
     era un tinte pálido del color de su área (rosa, azul, amarillo, coral). El
     color del área ya lo cargan el logotipo, la ilustración y el botón. */
  background: var(--brand-cream);
  padding-block: clamp(2.25rem, 5vw, 4.25rem);
}
/* Color de relleno mientras carga la foto; es lo único que aún varía por área. */
.pc-hero--nido    { --pc-foto: var(--brand-pink); }
.pc-hero--kinder  { --pc-foto: color-mix(in srgb, var(--brand-blue) 55%, #fff); }
.pc-hero--fiestas { --pc-foto: color-mix(in srgb, var(--brand-yellow) 75%, #fff); }
.pc-hero--cuidame { --pc-foto: color-mix(in srgb, var(--brand-coral) 55%, #fff); }
@supports not (background: color-mix(in srgb, red 20%, #fff)) {
  .pc-hero--kinder  { --pc-foto: var(--brand-blue); }
  .pc-hero--fiestas { --pc-foto: var(--brand-yellow); }
  .pc-hero--cuidame { --pc-foto: var(--brand-coral); }
}

/* Manchas del mockup. Decorativas; se ocultan en móvil, donde sólo estorban. */
.pc-mancha {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: #fff;
  opacity: .45;
  pointer-events: none;
}
.pc-mancha--1 { width: 22rem; height: 22rem; top: -8rem; right: -6rem; }
.pc-mancha--2 { width: 14rem; height: 14rem; bottom: -5rem; left: -4rem; opacity: .3; }
@media (max-width: 767.98px) { .pc-mancha { display: none; } }

.pc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}
@media (max-width: 767.98px) { .pc-hero-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- recuadro del título -- */
/* Logotipo, titular, texto y botón van dentro de un recuadro BLANCO sobre el
   blanco-beige del encabezado (Marige, 25-sep). */
.pc-hero-cuerpo {
  background: #fff;
  border-radius: 20px;
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  box-shadow: 0 8px 24px rgba(51, 66, 74, .08);
}

/* ------------------------------------------------------ logotipo del área -- */
/* El logotipo oficial llega compuesto en un solo archivo, así que aquí sólo se
   le da ancho. Se limita por ANCHO y no por alto —al revés que los iconos
   sueltos— porque los cuatro archivos comparten lienzo (640x260, con el dibujo
   centrado y el resto transparente): así los cuatro logotipos se ven del mismo
   tamaño de página a página, y el par width/height del HTML vale para todos. */
/* Va sobre BLANCO y no directo sobre el color del encabezado. No es un adorno:
   cada logotipo está rotulado en el color de su área y el encabezado de esa
   misma área es un tinte pálido de ESE color, así que el nombre desaparecía
   —«NIDO Piruli» rosa sobre rosa y «FIESTAS Piruli» amarillo sobre amarillo
   eran ilegibles; Kínder y Cuídame se salvaban por poco—. El logotipo se
   entregó dibujado para fondo blanco, así que se le da su área de respeto en
   blanco en vez de recolorearlo, que sería alterar la marca. */
/* Desde el 25-sep el recuadro blanco lo pone .pc-hero-cuerpo, así que la caja
   sólo conserva el espacio bajo el logotipo. */
.pc-marca-caja {
  display: inline-block;
  margin-bottom: 1.25rem;
}
/* Se limita por ANCHO y no por alto —al revés que los iconos sueltos— porque
   los cuatro archivos comparten lienzo (640x260, con el dibujo centrado y el
   resto transparente): así los cuatro logotipos se ven del mismo tamaño de
   página a página, y el par width/height del HTML vale para todos. */
.pc-marca {
  display: block;
  width: clamp(190px, 28vw, 270px);
  height: auto;
}

.pc-titular {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  line-height: 1.15;
  color: var(--brand-ink);
  margin: 0 0 .9rem;
  max-width: 18ch;
}
.pc-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.6;
  color: var(--brand-slate-strong);
  margin: 0 0 1.6rem;
  max-width: 46ch;
}

/* ------------------------------------------------------------------- foto -- */
.pc-hero-foto { margin: 0; }
/* RECTANGULAR con esquinas suaves (Marige, 25-sep). Antes era un recorte
   orgánico en forma de mancha. */
.pc-hero-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(51, 66, 74, .16);
  background: var(--pc-foto);   /* se ve mientras la foto carga */
}

/* ---------------------------------------------------------------- rasgos -- */
.pc-rasgos { background: #fff; padding-block: clamp(2rem, 4.5vw, 3.25rem); }

@media (max-width: 767.98px) {
  .pc-titular, .pc-sub { max-width: none; }
}