/* ==========================================================================
   Nido Piruli (/nido) — mockup de Marina del 9-oct (adj. 13308): encabezado y
   "¿Qué es Nido Pirulí?". El resto de las secciones vive en
   publico-nido-secciones.css. Se carga junto con publico.css (tokens, nav,
   pie). Títulos: Baloo 2 negritas en MAYÚSCULAS (lo único que Marina pidió
   distinto al mockup); frases a mano en --font-script; textos en Montserrat.
   ========================================================================== */

.nd-hero, .nd-que, .nd-pedacito, .nd-grupos, .nd-bebe, .nd-cierre {
  --nd-azul: #3E6CB0;
  --nd-coral: #F0735F;
  --nd-amarillo: #E9A300;
  --nd-verde: #4E9F49;
  --nd-rosa: #FCE6E4;
  --nd-celeste: #E3EDF9;
  /* Fondo de "Un pedacito de lo que hacemos": azul de marca #5986C6 al 8 % sobre
     blanco. Más claro que --nd-celeste para que la etiqueta SENTIR (que usa
     --nd-celeste) se distinga del fondo (Marina, 9-oct). */
  --nd-celeste-claro: #F2F5FB;
  --nd-crema-sol: #FFF3D6;
  --nd-menta: #E6F3EC;
  position: relative;
}
/* El mockup usa un contenedor más ancho que el del resto del sitio (1180). */
.nd-hero > .pb-wrap, .nd-que > .pb-wrap, .nd-pedacito > .pb-wrap, .nd-grupos > .pb-wrap,
.nd-bebe > .pb-wrap, .nd-cierre > .pb-wrap { max-width: 1320px; }
.nd-azul { color: var(--nd-azul); }
.nd-coral { color: var(--nd-coral); }
/* Color por elemento (íconos, etiquetas, tarjetas): cada uno declara su par
   tinta / pastel y el componente sólo lee --nd-c y --nd-p. */
.nd-c-amarillo { --nd-c: var(--nd-amarillo); --nd-p: var(--nd-crema-sol); }
.nd-c-azul     { --nd-c: var(--nd-azul);     --nd-p: var(--nd-celeste); }
.nd-c-coral    { --nd-c: var(--nd-coral);    --nd-p: var(--nd-rosa); }
.nd-c-verde    { --nd-c: var(--nd-verde);    --nd-p: var(--nd-menta); }

.nd-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 .9rem;
  position: relative;
}
.nd-titulo--seccion { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.nd-titulo--centro { font-size: clamp(1.7rem, 3.2vw, 2.5rem); text-align: center; }
.nd-texto {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.5;
  color: var(--nd-azul);
  margin: 0 0 1.4rem;
}
.nd-frase {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 3.6vw, 3.15rem);
  line-height: 1.15;
  color: var(--nd-coral);
  margin: 0 0 .9rem;
}
.nd-btn { background: var(--nd-coral, #F0735F); color: #fff; padding: .85rem 1.9rem; font-weight: 600; }
.nd-btn:hover, .nd-btn:focus-visible { color: #fff; background: #E8604D; transform: translateY(-2px); }

/* Rayitas (destellos) del sitio, pintadas por máscara para darles color. */
.nd-rayitas {
  display: inline-block; width: 16px; height: 24px;
  background: var(--nd-ray, #F5B81C);
  -webkit-mask: url("../img/publico/deco/rayitas.svg") no-repeat center / contain;
  mask: url("../img/publico/deco/rayitas.svg") no-repeat center / contain;
}
.nd-rayitas--der { transform: scaleX(-1); }
.nd-hoja { position: absolute; color: var(--nd-verde); line-height: 0; pointer-events: none; }
.nd-hoja svg { width: 100%; height: 100%; stroke-width: 1.4; }
.nd-corazon { display: inline-block; color: var(--nd-coral); line-height: 0; vertical-align: -.05em; }
.nd-corazon svg { width: .85em; height: .85em; stroke-width: 1.6; }

/* ------------------------------------------------------------- encabezado -- */
.nd-hero {
  overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background: #FCEDEB;
}
/* Onda inferior del color del fondo de la página (máscara: toma el tono real). */
.nd-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%;
}
.nd-burbuja { position: absolute; border-radius: 50%; background: var(--nd-celeste); opacity: .85; pointer-events: none; }
.nd-burbuja--izq { width: clamp(90px, 11vw, 170px); aspect-ratio: 1; left: clamp(-90px, -5vw, -40px); top: 14%; }
.nd-burbuja--der { width: clamp(90px, 10vw, 150px); aspect-ratio: 1; right: clamp(-80px, -4vw, -30px); top: 4%; }
.nd-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
}
.nd-hero-cuerpo { position: relative; text-align: center; }
.nd-hero-ave { display: block; width: clamp(120px, 13vw, 170px); height: auto; margin: 0 auto .4rem; }
.nd-hero-titulo { font-size: clamp(2.8rem, 6.2vw, 5rem); margin-bottom: .5rem; }
/* Logo oficial "Nido Piruli" del brandbook como título, directo sobre el rosa del
   encabezado, sin placa (Marina, 9-oct). Sus letras originales (#F9D1D2) no se
   leían sobre #FCEDEB: brand/lockup-nido-rosa-oscuro.png es el mismo logo con
   sólo esas letras subidas a #E4848A (misma familia de rosa); el resto intacto. */
.nd-hero-titulo--logo { display: inline-block; margin-bottom: .9rem; }
.nd-hero-logo { display: block; width: clamp(220px, 26vw, 340px); height: auto; }
/* El logo es bloque: las rayitas se anclan a las esquinas del título. */
.nd-hero-titulo--logo .nd-hero-rayitas-izq { left: -.35em; top: .05em; margin: 0; }
.nd-hero-titulo--logo .nd-hero-rayitas { right: -.35em; top: .05em; margin: 0; }
.nd-hero-rayitas { position: absolute; width: .32em; height: .48em; margin-left: .08em; top: -.3em; transform: rotate(20deg); }
.nd-hero-texto { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.45; color: var(--nd-azul); margin: 0 0 1.5rem; }
.nd-hoja--hero { width: clamp(50px, 5.6vw, 78px); height: clamp(64px, 7.4vw, 104px); left: -10%; bottom: 14%; transform: rotate(-14deg); }
.nd-hero-foto { position: relative; margin: 0 clamp(-2.5rem, -2vw, 0rem) 0 0; }
.nd-hero-foto img {
  display: block; width: 100%; aspect-ratio: 345 / 292; object-fit: cover;
  border-radius: 38% 46% 40% 36% / 30% 34% 44% 46%;
}
/* Rayitas de apertura (Marina, 9-oct: "como comillas, de los dos lados"): espejo
   de la de cierre, pegada al inicio del título. Sin left/right: el navegador la
   deja donde empieza el texto y el margen negativo la saca hacia la izquierda. */
.nd-hero-rayitas-izq { position: absolute; width: .32em; height: .48em; margin-left: -.4em; top: -.3em; transform: rotate(-20deg) scaleX(-1); }
.nd-hero-foto-rayitas { position: absolute; left: -2%; top: 4%; width: 26px; height: 40px; transform: rotate(-60deg) scaleX(-1); z-index: 2; }
.nd-edad {
  position: absolute; left: -3%; bottom: -2%; z-index: 2;
  display: grid; place-items: center; text-align: center;
  width: clamp(92px, 10vw, 132px); aspect-ratio: 1; border-radius: 50%;
  background: #FCE4E4;
  font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem); color: var(--nd-azul);
}

/* ----------------------------------------------------------- ¿qué es? -- */
.nd-que { padding: clamp(.5rem, 1.5vw, 1rem) 0 clamp(2.5rem, 5vw, 4rem); }
.nd-dos { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.nd-que-rayitas-izq { position: absolute; width: .36em; height: .54em; margin-left: -.5em; top: -.2em; transform: rotate(25deg); }
.nd-que-rayitas { position: absolute; width: .36em; height: .54em; margin-left: .25em; top: -.2em; transform: rotate(-25deg) scaleX(-1); }
.nd-desarrollo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.2rem); }
.nd-desarrollo-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; }
.nd-desarrollo-ico {
  display: grid; place-items: center; width: clamp(64px, 7.4vw, 92px); aspect-ratio: 1; border-radius: 50%;
  background: var(--nd-p); color: var(--nd-c);
}
.nd-desarrollo-ico svg { width: 52%; height: 52%; stroke-width: 1.6; }
.nd-desarrollo-texto { font-family: var(--font-body); font-weight: 700; font-size: clamp(.82rem, 1.1vw, .98rem); line-height: 1.3; color: var(--nd-azul); white-space: nowrap; }
.nd-que-foto { margin: 0 clamp(-2.5rem, -2vw, 0rem) 0 0; }
.nd-que-foto img { display: block; width: 100%; aspect-ratio: 296 / 254; object-fit: cover; border-radius: 30% 34% 38% 44% / 40% 36% 44% 40%; }

@media (max-width: 1139.98px) { .nd-hoja--hero { display: none; } }
@media (max-width: 991.98px) {
  .nd-hero-grid, .nd-dos { grid-template-columns: 1fr; }
  .nd-hero-foto { max-width: 560px; margin: 0 auto; }
  .nd-que-foto { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 575.98px) {
  .nd-desarrollo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.2rem; }
  .nd-hoja--hero { display: none; }
}