/* ==========================================================================
   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;
  background: var(--pc-bg, var(--brand-cream));
  padding-block: clamp(2.25rem, 5vw, 4.25rem);
}

/* Nido — rosa claro. La palabra va en el coral de texto (#C6472F): 3.44:1
   sobre el rosa, suficiente porque es display grande (AA large pide 3:1);
   el coral base sobre rosa se queda en 1.5:1 y es ilegible. */
.pc-hero--nido {
  --pc-bg: var(--brand-pink);
  --pc-area: var(--brand-coral-text);
  --pc-foto: color-mix(in srgb, var(--brand-coral) 55%, #fff);
}
/* Kínder — azul. Azul de texto sobre azul pálido: 4.17:1. */
.pc-hero--kinder {
  --pc-bg: color-mix(in srgb, var(--brand-blue) 20%, #fff);
  --pc-area: var(--brand-blue-text);
  --pc-foto: color-mix(in srgb, var(--brand-blue) 55%, #fff);
}
/* Fiestas — amarillo. AQUÍ SE ROMPE EL MOCKUP A PROPÓSITO: el mockup pinta
   "FIESTAS" en amarillo/naranja sobre amarillo pálido y eso da 1.84:1, ilegible.
   No existe un amarillo oscuro en la paleta oficial, así que la palabra va en
   tinta (#33424A, 8.96:1) y el color de área lo cargan el fondo, la
   ilustración y el botón. Es el mismo pendiente ya escalado a Marige. */
.pc-hero--fiestas {
  --pc-bg: color-mix(in srgb, var(--brand-yellow) 45%, #fff);
  --pc-area: var(--brand-ink);
  --pc-foto: color-mix(in srgb, var(--brand-yellow) 75%, #fff);
}
/* Cuídame — coral. El coral de texto sobre coral pálido sí alcanza (3.86:1),
   así que aquí la palabra sí conserva el color del área. */
.pc-hero--cuidame {
  --pc-bg: color-mix(in srgb, var(--brand-coral) 28%, #fff);
  --pc-area: var(--brand-coral-text);
  --pc-foto: color-mix(in srgb, var(--brand-coral) 55%, #fff);
}
/* Navegadores sin color-mix(): se cae a los colores planos del Brandbook. */
@supports not (background: color-mix(in srgb, red 20%, #fff)) {
  .pc-hero--kinder  { --pc-bg: #DDE7F4; --pc-foto: var(--brand-blue); }
  .pc-hero--fiestas { --pc-bg: #FFEFC6; --pc-foto: var(--brand-yellow); }
  .pc-hero--cuidame { --pc-bg: #FDE4DF; --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; } }

/* ------------------------------------------------------ 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. */
.pc-marca-caja {
  display: inline-block;
  background: #fff;
  border-radius: 20px;
  padding: .85rem 1.35rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 18px rgba(51, 66, 74, .08);
}
/* 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; }
/* Recorte orgánico del mockup. Se acepta que el blob recorte los bordes de la
   foto: todas las fotos del área traen al sujeto centrado. */
.pc-hero-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 48% 52% 42% 58% / 52% 44% 56% 48%;
  box-shadow: 0 14px 34px rgba(51, 66, 74, .16);
  background: var(--pc-foto);   /* se ve mientras la foto carga */
}
/* Nota manuscrita: va DEBAJO de la foto, no encima. Sobre la imagen el
   contraste depende del pixel que toque y deja de ser verificable. */
.pc-nota {
  font-family: var(--font-script);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  color: var(--brand-coral-text);
  text-align: right;
  margin-top: .85rem;
  padding-inline: .5rem;
}

/* ---------------------------------------------------------------- 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; }
  .pc-nota { text-align: center; }
}