/* ==========================================================================
   Páginas de área sin mockup propio: /fiestas y /cuidame (_PaginaCategoria).
   Rediseño del 10-oct (#291820, Marige): el lenguaje visual de /nido y /kinder
   (títulos Baloo en MAYÚSCULAS, frase manuscrita, textos Montserrat, rayitas,
   burbujas, onditas, foto con forma orgánica, tarjetas de color) con el color
   propio de cada área. Se carga junto con publico.css (tokens, nav, pie).
   ========================================================================== */

.pc-hero, .pc-rasgos, .pc-cierre {
  --pc-gris: #596A72;                 /* texto oficial del Brandbook */
  --pc-amarillo: #E9A300; --pc-crema: #FFF3D6;
  --pc-azul: #3E6CB0;     --pc-celeste: #E3EDF9;
  --pc-verde: #4E9F49;    --pc-menta: #E6F3EC;
  --pc-coral: #F0735F;    --pc-rosa: #FCE6E4;
  --pc-naranja: #E8803A;  --pc-durazno: #FFEBDD;
  position: relative;
}
/* Color propio de cada área: tinta (frase, títulos), fondo del encabezado y
   burbujas. El botón conserva el acento del layout (pb-btn--cta). */
.pc--fiestas { --pc-tinta: #B57B00; --pc-fondo: #FFF6DF; --pc-burbuja: #FFE7A6; }
.pc--cuidame { --pc-tinta: #E05A45; --pc-fondo: #FCEDEB; --pc-burbuja: #F9D0D1; }
.pc-hero > .pb-wrap, .pc-rasgos > .pb-wrap, .pc-cierre > .pb-wrap { max-width: 1320px; position: relative; z-index: 1; }

.pc-c-amarillo { --c: var(--pc-amarillo); --p: var(--pc-crema); }
.pc-c-azul     { --c: var(--pc-azul);     --p: var(--pc-celeste); }
.pc-c-verde    { --c: var(--pc-verde);    --p: var(--pc-menta); }
.pc-c-coral    { --c: var(--pc-coral);    --p: var(--pc-rosa); }
.pc-c-naranja  { --c: var(--pc-naranja);  --p: var(--pc-durazno); }

.pc-titulo {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 1.05; margin: 0 0 .9rem; position: relative;
}
.pc-titulo--seccion { font-size: clamp(1.8rem, 3.4vw, 2.6rem); text-align: center; }
.pc-gris { color: var(--pc-gris); }
.pc-tinta { color: var(--pc-tinta); }

/* Rayitas (destellos) del sitio, por máscara para darles color. */
.pc-rayitas {
  position: absolute; display: inline-block; width: 18px; height: 28px; background: #F5B81C;
  -webkit-mask: url("../img/publico/deco/rayitas.svg") no-repeat center / contain;
  mask: url("../img/publico/deco/rayitas.svg") no-repeat center / contain;
}
.pc-ray-izq { left: -1.1em; top: -.2em; width: .4em; height: .6em; transform: rotate(-25deg); }
.pc-ray-der { right: -1.1em; top: -.2em; width: .4em; height: .6em; transform: rotate(25deg) scaleX(-1); }
.pc-titulo--seccion { display: table; margin-inline: auto; }

.pc-btn { padding: .95rem 2.2rem; font-weight: 600; font-size: clamp(1rem, 1.35vw, 1.15rem); }

/* ------------------------------------------------------------- encabezado -- */
.pc-hero {
  overflow: hidden; background: var(--pc-fondo);
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(3.2rem, 6vw, 4.8rem);
}
.pc-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(1.8rem, 3.6vw, 3.2rem);
  background: var(--pb-beige, #F8F5F4);
  -webkit-mask: url("../img/publico/deco/onda-beige.svg") no-repeat center / 100% 100%;
  mask: url("../img/publico/deco/onda-beige.svg") no-repeat center / 100% 100%;
}
.pc-burbuja { position: absolute; border-radius: 50%; background: var(--pc-burbuja); opacity: .7; pointer-events: none; }
.pc-burbuja--izq { width: clamp(90px, 11vw, 170px); aspect-ratio: 1; left: clamp(-90px, -5vw, -40px); top: 16%; }
.pc-burbuja--der { width: clamp(90px, 10vw, 150px); aspect-ratio: 1; right: clamp(-80px, -4vw, -30px); top: 4%; background: var(--pc-celeste); }
.pc-hero-grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
}
.pc-hero-cuerpo { position: relative; text-align: center; }
.pc-hero-marca { display: table; margin: 0 auto .6rem; font-size: 1rem; }
.pc-marca { display: block; width: clamp(220px, 26vw, 340px); height: auto; }
.pc-hero-ray-izq { left: -30px; top: 4%; transform: rotate(-25deg); }
.pc-hero-ray-der { right: -30px; top: 4%; transform: rotate(25deg) scaleX(-1); }
/* El titular de siempre, ahora en la letra manuscrita de /nido y /kinder. */
.pc-frase {
  font-family: var(--font-script); font-size: clamp(1.8rem, 3.6vw, 3.15rem);
  line-height: 1.15; color: var(--pc-tinta); margin: 0 auto .9rem; max-width: 16ch;
}
.pc-sub {
  font-family: var(--font-body); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.5;
  color: var(--pc-gris); margin: 0 auto 1.6rem; max-width: 34em;
}
.pc-hero-foto { position: relative; margin: 0; }
.pc-hero-foto img {
  display: block; width: 100%; aspect-ratio: 345 / 292; object-fit: cover;
  border-radius: 38% 46% 40% 36% / 30% 34% 44% 46%;
  background: var(--pc-burbuja);
}
.pc-foto-ray { left: -2%; top: 4%; width: 26px; height: 40px; transform: rotate(-60deg) scaleX(-1); z-index: 2; }
.pc-corazon { position: absolute; right: 2%; bottom: 6%; width: 40px; height: 40px; color: var(--pc-tinta); line-height: 0; z-index: 2; transform: rotate(12deg); }
.pc-corazon svg { width: 100%; height: 100%; stroke-width: 1.6; }

/* --------------------------------------------------------------- rasgos -- */
.pc-rasgos { padding: clamp(1.2rem, 2.5vw, 2rem) 0 clamp(4rem, 8vw, 6rem); }
.pc-tarjetas {
  list-style: none; margin: clamp(1.2rem, 2.4vw, 2rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.4rem);
}
.pc-tarjeta {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem;
  background: var(--p); border-radius: 26px; padding: clamp(1.3rem, 2.2vw, 1.8rem) 1rem;
}
.pc-tarjeta-ico {
  display: grid; place-items: center; width: clamp(64px, 6.4vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; color: var(--c);
}
.pc-tarjeta-ico svg { width: 52%; height: 52%; stroke-width: 1.6; }
.pc-tarjeta-texto {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.2; color: var(--c);
}
.pc-camino {
  position: absolute; left: 50%; bottom: clamp(1rem, 2vw, 1.6rem); transform: translateX(-50%);
  width: clamp(260px, 44vw, 600px); height: clamp(34px, 4.4vw, 56px); pointer-events: none;
  background: url("../img/publico/deco/camino-lazo.svg") no-repeat center / 100% 100%;
}

/* --------------------------------------------------------------- cierre -- */
.pc-cierre { padding: clamp(.5rem, 1.5vw, 1rem) 0 clamp(5rem, 9vw, 7rem); overflow: hidden; text-align: center; }
.pc-cierre::before {
  content: ""; position: absolute; left: -8%; bottom: -30%; width: 70%; aspect-ratio: 3;
  background: var(--pc-celeste); border-radius: 50%; opacity: .7;
}
.pc-cierre::after {
  content: ""; position: absolute; left: 22%; bottom: -36%; width: 50%; aspect-ratio: 3.4;
  background: var(--pc-burbuja); border-radius: 50%; opacity: .6;
}
.pc-cierre-icono { display: block; width: clamp(90px, 9vw, 120px); height: auto; margin: 0 auto 1rem; }
.pc-btn-caja { position: relative; display: inline-block; }
.pc-btn-ray-izq { left: -30px; top: -6px; transform: rotate(-25deg); }
.pc-btn-ray-der { right: -30px; top: -6px; transform: rotate(25deg) scaleX(-1); }
.pc-flor { position: absolute; left: 3%; bottom: 14%; width: clamp(36px, 4vw, 54px); height: clamp(36px, 4vw, 54px); color: #F5B81C; line-height: 0; z-index: 1; }
.pc-hoja { position: absolute; left: 1%; bottom: 2%; width: clamp(44px, 5vw, 70px); height: clamp(60px, 7vw, 96px); color: var(--pc-verde); line-height: 0; z-index: 1; transform: rotate(-10deg); }
.pc-flor svg, .pc-hoja svg { width: 100%; height: 100%; stroke-width: 1.4; }
.pc-colina {
  position: absolute; right: 0; bottom: 0; width: clamp(200px, 26vw, 360px); height: clamp(60px, 8vw, 110px);
  background: url("../img/publico/deco/colina-amarilla.svg") no-repeat center / 100% 100%;
}
.pc-cierre-ave { position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(1.4rem, 3vw, 2.6rem); width: clamp(70px, 7.5vw, 110px); height: auto; z-index: 1; }

/* ------------------------------------------------------------ responsivo -- */
@media (max-width: 1199.98px) {
  .pc-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .pc-hero-grid { grid-template-columns: 1fr; }
  .pc-hero-foto { max-width: 560px; margin: 0 auto; }
  .pc-cierre-ave, .pc-colina { opacity: .6; }
}
@media (max-width: 575.98px) {
  .pc-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-tarjeta:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pc-flor, .pc-hoja { display: none; }
  .pc-cierre { padding-bottom: 7.5rem; }
  .pc-cierre-ave { right: 1rem; bottom: .6rem; width: 64px; }
}