/* ==========================================================================
   Kínder Piruli (/kinder) — mockup de Marina del 10-oct (adj. 13353). Se carga
   junto con publico.css (tokens, nav, pie). Mismo lenguaje que /nido: títulos
   Baloo 2 negritas en MAYÚSCULAS, textos Montserrat, rayitas amarillas a los dos
   lados como comillas, etiquetas de color tinta/pastel.
   ========================================================================== */

.kd-hero, .kd-dia, .kd-etapas, .kd-sentir, .kd-conocer {
  --kd-azul: #3E6CB0;
  --kd-azul-btn: #3E6CB0;
  --kd-tinta: #2E4A73;
  --kd-coral: #F0735F;
  --kd-amarillo: #E9A300;
  --kd-verde: #4E9F49;
  --kd-rosa: #FCE6E4;
  --kd-celeste: #E3EDF9;
  --kd-crema: #FFF3D6;
  --kd-menta: #E6F3EC;
  position: relative;
}
.kd-hero > .pb-wrap, .kd-dia > .pb-wrap, .kd-etapas > .pb-wrap, .kd-sentir > .pb-wrap,
.kd-conocer > .pb-wrap { max-width: 1320px; position: relative; z-index: 1; }
.kd-c-coral    { --kd-c: var(--kd-coral);    --kd-p: var(--kd-rosa); }
.kd-c-azul     { --kd-c: var(--kd-azul);     --kd-p: var(--kd-celeste); }
.kd-c-amarillo { --kd-c: var(--kd-amarillo); --kd-p: var(--kd-crema); }
.kd-c-verde    { --kd-c: var(--kd-verde);    --kd-p: var(--kd-menta); }

.kd-titulo {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  color: var(--kd-azul); line-height: 1.05; margin: 0 0 .5rem; position: relative;
}
.kd-titulo--seccion { font-size: clamp(1.9rem, 3.6vw, 2.9rem); display: inline-block; }
.kd-etiqueta {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  color: var(--kd-azul); font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: .02em;
  margin: 0 0 .2rem; position: relative; display: inline-block;
}
.kd-texto {
  font-family: var(--font-body); color: var(--kd-tinta);
  font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.45; margin: 0 0 1.4rem;
}
.kd-btn { background: var(--kd-azul-btn); color: #fff; padding: .95rem 2.3rem; font-weight: 600; font-size: clamp(1rem, 1.35vw, 1.2rem); }
.kd-btn:hover, .kd-btn:focus-visible { color: #fff; background: #345C98; transform: translateY(-2px); }
.kd-btn-caja { position: relative; display: inline-block; }

/* Rayitas (destellos), pintadas por máscara para darles color. */
.kd-rayitas {
  display: inline-block; width: 16px; height: 24px; position: absolute;
  background: var(--kd-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;
}
.kd-rayitas--der { transform: scaleX(-1); }
/* Rayitas de título: a los dos lados del texto, como comillas. */
.kd-ray-izq { width: .42em; height: .62em; left: -.65em; top: -.2em; transform: rotate(-20deg); }
.kd-ray-der { width: .42em; height: .62em; right: -.65em; top: -.2em; transform: rotate(20deg) scaleX(-1); }
.kd-etiqueta .kd-ray-izq, .kd-etiqueta .kd-ray-der { width: .7em; height: 1em; top: -.35em; }
.kd-etiqueta .kd-ray-izq { left: -1em; }
.kd-etiqueta .kd-ray-der { right: -1em; }
.kd-btn-ray-izq { width: 18px; height: 28px; left: -30px; top: -6px; transform: rotate(-25deg); }
.kd-btn-ray-der { width: 18px; height: 28px; right: -30px; top: -6px; transform: rotate(25deg) scaleX(-1); }

/* Camino punteado coral con su corazón (el mismo trazo del resto del sitio). */
.kd-camino {
  position: absolute; pointer-events: none; z-index: 0;
  background: url("../img/publico/deco/camino-lazo.svg") no-repeat center / 100% 100%;
}

/* ------------------------------------------------------------ encabezado -- */
.kd-hero {
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0 clamp(2.5rem, 5vw, 4rem);
}
/* Franja crema ondulada bajo el nav, como el mockup. */
.kd-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(1.4rem, 2.6vw, 2.2rem);
  background: url("../img/publico/deco/onda-crema.svg") no-repeat center / 100% 100%;
  opacity: .9;
}
/* Manchas celestes al pie (izquierda) y detrás de la foto. */
.kd-hero::after {
  content: ""; position: absolute; left: -6%; bottom: -14%; width: 48%; aspect-ratio: 3.2;
  background: var(--kd-celeste); border-radius: 50%; opacity: .7; z-index: 0;
}
.kd-camino--hero { right: 0; top: 2%; width: clamp(160px, 22vw, 300px); height: clamp(30px, 4vw, 52px); transform: scaleX(-1); }
.kd-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(1rem, 2.5vw, 2rem); align-items: center;
}
/* Logo oficial (lockup del brandbook) directo sobre el fondo, sin placa, como /nido. */
.kd-hero-marca { position: relative; display: table; margin: 0 auto 1rem; }
.kd-hero-titulo--logo { font-size: 1rem; line-height: 1; }
.kd-hero-logo { display: block; width: clamp(220px, 26vw, 340px); height: auto; }
.kd-hero-ave-ray-izq { left: -30px; top: 4%; width: 18px; height: 28px; transform: rotate(-25deg); }
.kd-hero-ave-ray-der { right: -30px; top: 4%; width: 18px; height: 28px; transform: rotate(25deg) scaleX(-1); }
/* Frase bajo el logo: misma letra manuscrita que .nd-frase de /nido, en el azul de Kínder (Marige, 10-oct). */
.kd-frase {
  font-family: var(--font-script); font-size: clamp(1.8rem, 3.6vw, 3.15rem);
  line-height: 1.15; color: var(--kd-azul); margin: 0 0 .9rem;
}
.kd-hero-texto { margin-bottom: 1.6rem; }
/* Encabezado centrado como el de /nido (.nd-hero-cuerpo). */
.kd-hero-cuerpo { text-align: center; }
.kd-hero-foto { position: relative; margin: 0 clamp(-2rem, -1.5vw, 0rem) 0 0; }
.kd-hero-foto::before {
  content: ""; position: absolute; inset: 8% -6% -6% 10%; z-index: -1;
  background: var(--kd-celeste); border-radius: 46% 40% 48% 42% / 40% 46% 42% 48%;
}
.kd-hero-foto img {
  display: block; width: 100%; aspect-ratio: 1.33; object-fit: cover;
  border-radius: 42% 48% 40% 46% / 48% 40% 50% 44%;
}
.kd-hero-foto-ray { left: -4%; top: 2%; width: 30px; height: 46px; transform: rotate(-35deg); z-index: 2; }

/* --------------------------------------------------- así se vive kínder -- */
.kd-dia { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; }
.kd-dia::before {
  content: ""; position: absolute; right: -4%; top: -4%; width: 20%; aspect-ratio: 2;
  background: var(--kd-rosa); border-radius: 50%; opacity: .8;
}
.kd-camino--dia { right: 5%; top: 18%; width: clamp(180px, 25vw, 330px); height: clamp(30px, 4vw, 52px); }
.kd-dia .kd-etiqueta--seccion { display: table; margin-left: 1.2em; }
.kd-dia .kd-titulo--seccion { display: block; }
.kd-dia-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.6rem);
}
.kd-dia-item { position: relative; }
.kd-dia-item img {
  display: block; width: 100%; aspect-ratio: 1 / 1.03; object-fit: cover;
  border-radius: 14% 12% 16% 13% / 13% 15% 12% 16%;
}
.kd-dia-etiqueta {
  position: absolute; left: 6%; bottom: 5%; max-width: 88%;
  background: var(--kd-p); color: var(--kd-tinta);
  font-family: var(--font-body); font-weight: 700; font-size: clamp(.82rem, 1.25vw, 1.08rem);
  padding: .55rem 1.3rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(46, 74, 115, .1);
}
.kd-c-amarillo .kd-dia-etiqueta { border: 2px solid #FFD975; }

/* ----------------------------------------------------- etapas (tarjetas) -- */
.kd-etapas { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; }
.kd-etapas .kd-titulo--seccion { margin-left: .7em; }
.kd-etapas-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem);
}
.kd-etapa {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  background: var(--kd-p); border-radius: 30px; overflow: hidden; min-height: clamp(230px, 22vw, 300px);
}
.kd-etapa-cuerpo { padding: clamp(1rem, 2vw, 1.6rem) clamp(.8rem, 1.6vw, 1.4rem); display: flex; flex-direction: column; justify-content: center; }
.kd-etapa-ico { position: relative; display: block; width: clamp(56px, 5.6vw, 80px); margin: 0 auto .3rem; }
.kd-etapa-ico img { display: block; width: 100%; height: clamp(56px, 5.6vw, 80px); object-fit: contain; }
.kd-etapa-ray { right: -26px; top: 0; width: 14px; height: 22px; transform: rotate(25deg) scaleX(-1); }
.kd-etapa-nombre {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--kd-c);
  font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.1; margin: 0 0 .4rem; text-align: center;
}
.kd-etapa p {
  margin: 0; font-family: var(--font-body); color: var(--kd-tinta); white-space: pre-line;
  font-size: clamp(.88rem, 1.25vw, 1.1rem); line-height: 1.35;
}
.kd-etapa-foto { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 26px 0 0 26px; }

/* ---------------------------------------------------- también a sentir -- */
.kd-sentir { padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(3rem, 6vw, 4.5rem); overflow: hidden; }
.kd-sentir-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.kd-sentir .kd-titulo--seccion { margin-left: .7em; }
.kd-sentir-foto { position: relative; margin: 0; }
.kd-sentir-foto::before {
  content: ""; position: absolute; inset: -10% -12% -8% -10%; z-index: -1;
  background: var(--kd-rosa); border-radius: 48% 42% 46% 40% / 44% 48% 40% 46%;
}
.kd-sentir-foto img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; border-radius: 40% 46% 36% 44% / 44% 40% 46% 38%; }
.kd-sentir-corazon { position: absolute; line-height: 0; }
.kd-sentir-corazon svg { width: 100%; height: 100%; stroke-width: 1.6; }
.kd-sentir-corazon--coral { color: var(--kd-coral); width: 34px; height: 34px; right: -6%; top: 6%; transform: rotate(10deg); }
.kd-sentir-corazon--azul { color: var(--kd-azul); width: 34px; height: 34px; right: -12%; top: 34%; transform: rotate(-12deg); }
.kd-camino--sentir { left: 4%; bottom: 8%; width: clamp(260px, 48vw, 640px); height: clamp(34px, 4.6vw, 60px); }

/* ---------------------------------------------------- ven a conocer -- */
.kd-conocer { padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(4.5rem, 9vw, 7rem); overflow: hidden; }
.kd-conocer::before {
  content: ""; position: absolute; left: -8%; bottom: -30%; width: 70%; aspect-ratio: 3;
  background: var(--kd-celeste); border-radius: 50%; opacity: .7;
}
.kd-conocer::after {
  content: ""; position: absolute; left: 22%; bottom: -36%; width: 50%; aspect-ratio: 3.4;
  background: var(--kd-rosa); border-radius: 50%; opacity: .7;
}
.kd-conocer .kd-titulo--seccion { margin-left: .7em; }
.kd-pasos {
  list-style: none; margin: clamp(.6rem, 1.5vw, 1rem) 0 clamp(1.2rem, 2.4vw, 1.8rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem);
}
.kd-paso { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(.6rem, 2vw, 1.6rem); align-items: start; justify-items: center; }
.kd-paso + .kd-paso::before {
  content: ""; position: absolute; left: calc(-1 * clamp(.5rem, 1.5vw, 1.25rem) - 5px); top: 2.4rem;
  width: 10px; height: 10px; border-right: 2px solid var(--kd-tinta); border-bottom: 2px solid var(--kd-tinta);
  transform: rotate(-45deg); opacity: .7;
}
.kd-paso-num {
  grid-row: 1 / span 2; display: grid; place-items: center; width: clamp(30px, 2.8vw, 38px); aspect-ratio: 1;
  border-radius: 50%; background: #7FA3D6; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.25rem);
}
.kd-paso-ico { color: var(--kd-azul); width: clamp(44px, 4.4vw, 60px); height: clamp(44px, 4.4vw, 60px); line-height: 0; }
.kd-paso-ico svg { width: 100%; height: 100%; stroke-width: 1.5; }
.kd-paso-texto {
  grid-column: 2; text-align: center; white-space: pre-line; margin-top: .4rem;
  font-family: var(--font-body); color: var(--kd-tinta); font-size: clamp(.95rem, 1.4vw, 1.2rem); line-height: 1.35;
}
.kd-conocer-cta { text-align: center; }
.kd-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; }
.kd-flor svg, .kd-hoja svg { width: 100%; height: 100%; stroke-width: 1.4; }
.kd-hoja { position: absolute; left: 1%; bottom: 2%; width: clamp(44px, 5vw, 70px); height: clamp(60px, 7vw, 96px); color: var(--kd-verde); line-height: 0; z-index: 1; transform: rotate(-10deg); }
.kd-colina {
  position: absolute; right: 0; bottom: 0; width: clamp(200px, 26vw, 360px); height: clamp(60px, 8vw, 110px); z-index: 0;
  background: url("../img/publico/deco/colina-amarilla.svg") no-repeat center / 100% 100%;
}
.kd-conocer-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) {
  .kd-etapa { grid-template-columns: 1fr; }
  .kd-etapa-foto { height: 200px; border-radius: 26px 26px 0 0; order: -1; }
  .kd-etapa-cuerpo { text-align: center; }
}
@media (max-width: 991.98px) {
  .kd-hero-grid, .kd-sentir-grid { grid-template-columns: 1fr; }
  .kd-hero-foto, .kd-sentir-foto { max-width: 520px; margin: 0 auto; }
  .kd-dia-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-etapas-lista { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .kd-etapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kd-etapa-foto { height: 100%; border-radius: 26px 0 0 26px; order: 0; }
  .kd-texto br { display: none; }
  .kd-camino--hero, .kd-camino--dia { display: none; }
}
@media (max-width: 767.98px) {
  .kd-pasos { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
  .kd-paso + .kd-paso::before { display: none; }
  .kd-conocer-ave, .kd-colina { opacity: .6; }
}
@media (max-width: 575.98px) {
  .kd-dia-etiqueta { white-space: normal; text-align: center; }
  .kd-btn { padding-inline: 1.4rem; }
  .kd-camino--sentir { display: none; }
  .kd-conocer-ave, .kd-colina { display: none; }
}