/* Philadelphia — estilos compartidos por las landings del Open House.
   Paleta según el manual de marca (Combinación de colores). Reglas de uso:
   sobre blanco: texto navy, azul, pizarra, celeste, rojo o vino · sobre navy: blanco, celeste, pizarra u ocre
   sobre azul: blanco, celeste, navy · sobre celeste: blanco, pizarra, azul, navy · sobre rojo: blanco · sobre gris: navy */

@font-face { font-family: "Neue Haas"; src: url("../fonts/NeueHaasDisplay-Roman.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Haas"; src: url("../fonts/NeueHaasDisplay-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Neue Haas"; src: url("../fonts/NeueHaasDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --navy: #012246;
  --azul: #005588;
  --pizarra: #6980aa;
  --celeste: #9ec1e5;
  --rojo: #e20303;
  --vino: #6d0201;
  --ocre: #c46c03;
  --arena: #dbaa86;
  --gris: #e0e0e0;
  --blanco: #fff;

  --texto-suave: #2f4466;   /* navy aclarado para párrafos largos sobre blanco */
  --borde: #cfd8e6;
  --error: #c62828;

  --font: "Neue Haas", "Helvetica Neue", Arial, sans-serif;
  --font-form: "Inter", system-ui, sans-serif;
  --contenedor: 1150px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blanco); color: var(--navy); font-family: var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }

.contenedor { width: min(100% - 32px, var(--contenedor)); margin-inline: auto; }

.ceja { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rojo); margin-bottom: 18px; }
.titulo {
  font-size: clamp(38px, 8vw, 50px);
  line-height: 1.02;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.titulo--claro { color: var(--blanco); }
.texto { font-size: 19px; line-height: 1.4; color: var(--texto-suave); }
.centro { text-align: center; }

.seccion { padding-block: 88px; }
.seccion--gris { background: var(--gris); }
.seccion--celeste { background: var(--celeste); }

/* Botón principal */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 320px; min-height: 54px; padding: 15px 28px;
  background: var(--rojo); color: var(--blanco); border: 0; border-radius: 100px;
  font: 700 17px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color .2s, transform .2s;
}
.boton:hover { background: var(--vino); transform: translateY(-2px); }
.boton:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.cta { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- Barra de cuenta regresiva ---------- */
.cuenta { background: var(--navy); color: var(--blanco); font-size: 14px; }
.cuenta__fila { width: min(100% - 32px, 1260px); min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 8px; }
.cuenta__texto b { font-weight: 700; }
.cuenta__reloj { display: flex; align-items: baseline; gap: 14px; }
.cuenta__lbl { color: var(--celeste); }
.cuenta__u { color: var(--celeste); white-space: nowrap; }
.cuenta__u b { display: inline-block; min-width: 2ch; text-align: center; font-size: 20px; font-weight: 700; color: var(--blanco); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cuenta__cta {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 18px; border-radius: 100px;
  background: var(--rojo); color: var(--blanco); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s;
}
.cuenta__cta:hover { background: var(--vino); }
.cuenta__cta:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
.cuenta[data-estado="pasado"] .cuenta__reloj { display: none; }

/* ---------- Hero + formulario ---------- */
/* Fondo gris con un grano de papel casi imperceptible (ruido SVG, ~4% de opacidad) */
.hero {
  padding-block: 72px 96px;
  background-color: var(--gris);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.004 0 0 0 0 0.133 0 0 0 0 0.275 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Corazón del isotipo (trazado original del SVG de marca, sin girar ni deformar) en outline, grande y cortado por el borde */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; pointer-events: none;
  width: 1040px; aspect-ratio: 700.02 / 574.74; right: -300px; top: 50%; transform: translateY(-46%);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20700.02%20574.74%22%3E%3Cpath%20d%3D%22M688.02%2C152.15c-1.48%2C48.67-10.5%2C101.24-31.93%2C151.06c-25.68%2C59.68-80.48%2C102.16-130.66%2C145.57c-52.26%2C45.21-112%2C85.66-178.37%2C113.15c-2.08%2C0.86-3.91%2C1.18-6.08%2C0.27c-77.87-32.59-145.65-81.88-207.79-134.04C76.91%2C380.93%2C30.95%2C319.85%2C14.22%2C252.15c-9.74-39.4-15.57-79.24-13.96-119.98C1%2C113.66%2C3.63%2C95.46%2C9.38%2C77.82C20.52%2C43.59%2C44.7%2C22.87%2C77.03%2C11.04c27.74-10.15%2C56.48-12.47%2C85.71-9.82C234.9%2C7.76%2C288.8%2C45.91%2C331.98%2C102.61c1.41%2C1.85%2C2.73%2C3.78%2C4.11%2C5.67c4.89%2C6.69%2C10.81%2C6.72%2C15.59%2C0c11.44-16.09%2C24.15-31.06%2C38.55-44.48c33.14-30.9%2C71.11-52.57%2C115.75-60.21c36.23-6.2%2C72.23-4.89%2C107.11%2C8.32c38.21%2C14.47%2C61.87%2C41.79%2C69.97%2C82.81C686.44%2C111.89%2C687.9%2C129.22%2C688.02%2C152.15z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  opacity: .9;
}
.hero::after {
  content: ""; position: absolute; pointer-events: none;
  width: 520px; aspect-ratio: 700.02 / 574.74; left: -230px; bottom: -190px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20700.02%20574.74%22%3E%3Cpath%20d%3D%22M688.02%2C152.15c-1.48%2C48.67-10.5%2C101.24-31.93%2C151.06c-25.68%2C59.68-80.48%2C102.16-130.66%2C145.57c-52.26%2C45.21-112%2C85.66-178.37%2C113.15c-2.08%2C0.86-3.91%2C1.18-6.08%2C0.27c-77.87-32.59-145.65-81.88-207.79-134.04C76.91%2C380.93%2C30.95%2C319.85%2C14.22%2C252.15c-9.74-39.4-15.57-79.24-13.96-119.98C1%2C113.66%2C3.63%2C95.46%2C9.38%2C77.82C20.52%2C43.59%2C44.7%2C22.87%2C77.03%2C11.04c27.74-10.15%2C56.48-12.47%2C85.71-9.82C234.9%2C7.76%2C288.8%2C45.91%2C331.98%2C102.61c1.41%2C1.85%2C2.73%2C3.78%2C4.11%2C5.67c4.89%2C6.69%2C10.81%2C6.72%2C15.59%2C0c11.44-16.09%2C24.15-31.06%2C38.55-44.48c33.14-30.9%2C71.11-52.57%2C115.75-60.21c36.23-6.2%2C72.23-4.89%2C107.11%2C8.32c38.21%2C14.47%2C61.87%2C41.79%2C69.97%2C82.81C686.44%2C111.89%2C687.9%2C129.22%2C688.02%2C152.15z%22%20fill%3D%22none%22%20stroke%3D%22%236980aa%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  opacity: .28;
}
.hero__grid { position: relative; z-index: 1; width: min(100% - 32px, 1260px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero__visual { justify-self: end; width: min(100%, 600px); }
.hero__img { width: 100%; }
.hero__contenido { width: 100%; max-width: 640px; justify-self: start; }
.hero .form-card { max-width: none; }
/* En escritorio el formulario del hero va en dos columnas: más ancho y más corto */
@media (min-width: 821px) {
  .hero .form-card__cuerpo { padding: 32px 36px 14px; }
  .hero [data-paso="1"] .form-card__cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .hero .campo--ancho, .hero .check { grid-column: 1 / -1; }
  .hero .hijo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
}
.hero__titulo { font-size: clamp(38px, 4vw, 52px); letter-spacing: -0.03em; text-align: center; }
.hero__titulo { text-wrap: balance; }
/* "Open House" resalta con una píldora celeste de bordes redondos (como el key visual) que se dibuja al cargar */
.hero__titulo b { position: relative; z-index: 0; font-weight: 700; white-space: nowrap; padding-inline: .1em; }
.hero__titulo .linea { display: block; } /* fuerza una línea propia (gracias de costos: "¡Excelente," arriba) */
.hero__titulo b::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: .04em; height: .46em;
  border-radius: 999px; background: var(--celeste);
  transform: scaleX(0); transform-origin: left center;
  animation: resalte .9s .35s cubic-bezier(.25, .8, .3, 1) forwards;
}
@keyframes resalte { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero__titulo b::before { animation: none; transform: none; } }
.hero__intro { margin: 16px auto 32px; font-size: 17px; text-align: center; max-width: 460px; }
.hero__intro { text-wrap: balance; }
.hero__intro strong { font-weight: 700; color: var(--navy); }

/* Fecha / hora / lugar, como en la pieza de Babies: íconos pizarra, texto navy */
.evento { list-style: none; margin: 28px 0 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 30px; color: var(--navy); font-size: 22px; line-height: 1.02; letter-spacing: -0.03em; }
.evento li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.evento b { display: block; font-weight: 700; }
.evento__fino { display: block; font-weight: 400; }
.evento svg { width: 38px; height: 38px; fill: var(--pizarra); flex: none; }
.evento li:nth-child(3) svg { width: 31px; height: 41px; }

/* ---------- Tarjeta de formulario ---------- */
.form-card {
  width: 100%; max-width: 507px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: 0 18px 44px rgb(1 34 70 / 0.12);
  font-family: var(--font-form);
  overflow: hidden;
  scroll-margin-top: 24px;
}
.form-card__cuerpo { padding: 40px 40px 24px; }
.campo { margin-bottom: 18px; }
.campo label, .campo legend { display: block; font-size: 15px; line-height: 1.4; color: var(--navy); margin-bottom: 7px; }
.campo input, .campo select {
  width: 100%; min-height: 42px; padding: 9px 18px 9px 16px;
  background: var(--blanco); color: var(--navy);
  border: 1px solid #a9b6cb; border-radius: 6px;
  font: 400 14px var(--font-form);
  transition: border-color .15s, box-shadow .15s;
}
.campo select { min-height: 48px; appearance: none; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23012246' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 18px center; cursor: pointer; }
.campo input::placeholder { color: #5c6a84; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgb(0 85 136 / 0.2); }
.campo[data-error] input, .campo[data-error] select { border-color: var(--error); }
.campo__error { display: none; margin-top: 4px; font-size: 12px; color: var(--error); }
.campo[data-error] .campo__error { display: block; }

.con-icono { position: relative; }
.con-icono svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #7d8aa1; pointer-events: none; }
.con-icono input { padding-left: 36px; }

.telefono { display: flex; border: 1px solid #a9b6cb; border-radius: 6px; transition: border-color .15s, box-shadow .15s; }
.telefono:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgb(0 85 136 / 0.2); }
.campo[data-error] .telefono { border-color: var(--error); }
.telefono select, .telefono input { border: 0; min-height: 42px; box-shadow: none !important; }
.telefono select { width: auto; padding: 0 26px 0 10px; background-position: right 8px center; border-right: 1px solid #e3e7ef; border-radius: 6px 0 0 6px; font-size: 13px; }
.telefono input { border-radius: 0 6px 6px 0; padding-left: 12px; }

.check { display: grid; grid-template-columns: 16px 1fr; gap: 0 16px; align-items: start; font-size: 14px; line-height: 20px; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--azul); cursor: pointer; }
.check label { line-height: 20px; margin: 0; font-size: 14px; }
.check a { color: var(--azul); }
.check .campo__error { grid-column: 2; }

.hijo { padding: 16px 0 4px; border: 0; margin: 0; border-top: 1px solid #eef0f4; }
.hijo:first-of-type { border-top: 0; padding-top: 0; }
.form-nota { font-size: 13px; color: var(--texto-suave); margin: 0 0 16px; line-height: 1.4; }

.form-card__pie { display: flex; justify-content: space-between; background: var(--navy); min-height: 52px; }
.form-card__pie button {
  border: 0; background: transparent; color: var(--blanco); padding: 0 24px; min-height: 52px;
  font: 500 14px var(--font-form); letter-spacing: .06em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.form-card__pie .principal { background: var(--rojo); margin-left: auto; }
.form-card__pie button:hover { background: rgb(255 255 255 / 0.1); }
.form-card__pie .principal:hover { background: var(--vino); }
.form-card__pie button:focus-visible { outline: 3px solid var(--blanco); outline-offset: -4px; }
.form-card__pie button[disabled] { opacity: .7; cursor: wait; }

.paso[hidden] { display: none; }
.exito { padding: 56px 40px; text-align: center; }
.exito h2 { font: 500 28px/1.15 var(--font); color: var(--navy); margin-bottom: 12px; }
.exito p { font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
.exito__icono { width: 56px; height: 56px; margin: 0 auto 18px; color: var(--azul); }
.form-error-envio { margin: 0 40px 16px; padding: 10px 14px; border-radius: 6px; background: #fdecea; color: var(--error); font-size: 13px; }

/* ---------- Video de presentación ---------- */
.presentacion { padding-block: 88px 96px; overflow: hidden; }
.presentacion .titulo { max-width: 820px; margin-inline: auto; }
.presentacion .texto { max-width: 620px; margin: 18px auto 40px; }
/* Dos franjas rectas de borde a borde que cruzan por detrás del video */
.presentacion__marco { position: relative; }
.presentacion__marco::before, .presentacion__marco::after {
  content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
}
.presentacion__marco::before { top: calc(50% - 34px); height: 18px; background: var(--celeste); }
.presentacion__marco::after { top: calc(50% + 22px); height: 8px; background: var(--pizarra); }
.presentacion__video { position: relative; z-index: 1; max-width: 960px; margin-inline: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgb(1 34 70 / 0.16); }
/* Mientras carga el reproductor, reserva el espacio con la miniatura borrosa para que la página no salte */
wistia-player[media-id="czertu0gq3"]:not(:defined) {
  display: block; padding-top: 56.25%; filter: blur(5px);
  background: center / contain no-repeat url("https://fast.wistia.com/embed/medias/czertu0gq3/swatch");
}


/* ---------- Sección imagen + texto ---------- */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.dos-col .titulo { margin-bottom: 22px; }
.dos-col .texto { max-width: 500px; }
.dos-col .texto strong { font-weight: 500; color: var(--navy); }
.dos-col__img { width: 100%; max-width: 560px; justify-self: end; border-radius: 28px 28px 4px 28px; }

/* ---------- Pestañas de lo que ofrece Philadelphia Kids ---------- */
.momentos { position: relative; overflow: hidden; background: var(--navy); color: var(--blanco); padding-block: 96px 104px; }
.momentos::before, .momentos::after { content: ""; position: absolute; aspect-ratio: 700.02 / 574.74; pointer-events: none; background-position: center; background-size: contain; background-repeat: no-repeat; }
.momentos::before { width: 860px; right: -260px; top: -90px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20700.02%20574.74%22%3E%3Cpath%20d%3D%22M688.02%2C152.15c-1.48%2C48.67-10.5%2C101.24-31.93%2C151.06c-25.68%2C59.68-80.48%2C102.16-130.66%2C145.57c-52.26%2C45.21-112%2C85.66-178.37%2C113.15c-2.08%2C0.86-3.91%2C1.18-6.08%2C0.27c-77.87-32.59-145.65-81.88-207.79-134.04C76.91%2C380.93%2C30.95%2C319.85%2C14.22%2C252.15c-9.74-39.4-15.57-79.24-13.96-119.98C1%2C113.66%2C3.63%2C95.46%2C9.38%2C77.82C20.52%2C43.59%2C44.7%2C22.87%2C77.03%2C11.04c27.74-10.15%2C56.48-12.47%2C85.71-9.82C234.9%2C7.76%2C288.8%2C45.91%2C331.98%2C102.61c1.41%2C1.85%2C2.73%2C3.78%2C4.11%2C5.67c4.89%2C6.69%2C10.81%2C6.72%2C15.59%2C0c11.44-16.09%2C24.15-31.06%2C38.55-44.48c33.14-30.9%2C71.11-52.57%2C115.75-60.21c36.23-6.2%2C72.23-4.89%2C107.11%2C8.32c38.21%2C14.47%2C61.87%2C41.79%2C69.97%2C82.81C686.44%2C111.89%2C687.9%2C129.22%2C688.02%2C152.15z%22%20fill%3D%22%239ec1e5%22%20fill-opacity%3D%22.07%22%2F%3E%3C%2Fsvg%3E"); }
.momentos::after { width: 600px; right: -130px; top: -10px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20700.02%20574.74%22%3E%3Cpath%20d%3D%22M688.02%2C152.15c-1.48%2C48.67-10.5%2C101.24-31.93%2C151.06c-25.68%2C59.68-80.48%2C102.16-130.66%2C145.57c-52.26%2C45.21-112%2C85.66-178.37%2C113.15c-2.08%2C0.86-3.91%2C1.18-6.08%2C0.27c-77.87-32.59-145.65-81.88-207.79-134.04C76.91%2C380.93%2C30.95%2C319.85%2C14.22%2C252.15c-9.74-39.4-15.57-79.24-13.96-119.98C1%2C113.66%2C3.63%2C95.46%2C9.38%2C77.82C20.52%2C43.59%2C44.7%2C22.87%2C77.03%2C11.04c27.74-10.15%2C56.48-12.47%2C85.71-9.82C234.9%2C7.76%2C288.8%2C45.91%2C331.98%2C102.61c1.41%2C1.85%2C2.73%2C3.78%2C4.11%2C5.67c4.89%2C6.69%2C10.81%2C6.72%2C15.59%2C0c11.44-16.09%2C24.15-31.06%2C38.55-44.48c33.14-30.9%2C71.11-52.57%2C115.75-60.21c36.23-6.2%2C72.23-4.89%2C107.11%2C8.32c38.21%2C14.47%2C61.87%2C41.79%2C69.97%2C82.81C686.44%2C111.89%2C687.9%2C129.22%2C688.02%2C152.15z%22%20fill%3D%22none%22%20stroke%3D%22%239ec1e5%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.momentos .contenedor { position: relative; }
.momentos__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.momentos__ceja { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--celeste); margin-bottom: 22px; }
.momentos__titulo { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.02; font-weight: 500; letter-spacing: -0.03em; color: var(--blanco); }
.momentos__nota { font-size: 15px; line-height: 1.6; max-width: 300px; padding-bottom: 6px; color: var(--celeste); }

.momentos__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.6fr); gap: 48px; align-items: start; }
.momento__lista { display: grid; gap: 4px; }
.momento__tab {
  display: grid; grid-template-columns: 22px 1fr 14px; gap: 18px; align-items: center;
  width: 100%; padding: 18px 16px; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color .25s, color .25s;
}
.momento__tab:hover { background: rgb(158 193 229 / 0.12); }
.momento__tab[aria-selected="true"] { background: var(--blanco); color: var(--navy); }
.momento__tab:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.momento__icono { color: var(--celeste); }
.momento__tab[aria-selected="true"] .momento__icono { color: var(--rojo); }
.momento__textos { display: grid; gap: 4px; }
.momento__nombre { font-size: 17px; line-height: 1.25; }
.momento__sub { font-size: 12.5px; color: var(--celeste); }
.momento__tab[aria-selected="true"] .momento__sub { color: var(--azul); }
.momento__flecha { opacity: .85; transition: transform .25s; }
.momento__tab:hover .momento__flecha, .momento__tab[aria-selected="true"] .momento__flecha { transform: translate(2px, -2px); }

.momento__tarjeta { position: relative; background: var(--blanco); color: var(--navy); border-radius: 10px; padding: 34px 38px 26px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.25); }
.momento__marca { position: absolute; top: 26px; right: 28px; color: var(--rojo); }
/* Paneles apilados: la tarjeta toma el alto del más largo y no salta al cambiar de pestaña */
.momento__tarjeta { display: grid; }
.momento__panel { grid-area: 1 / 1; }
.momento__panel[hidden] { display: block; visibility: hidden; }
.momento__panel.entra { animation: panel-entra .45s ease both; }
.momento__panel:focus-visible { outline: 2px solid var(--azul); outline-offset: 8px; border-radius: 4px; }
.momento__ceja { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--azul); margin: 0 44px 24px 0; }
.momento__h { font-size: clamp(28px, 3vw, 36px); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 16px; }
.momento__p { font-size: 15px; line-height: 1.6; color: var(--texto-suave); max-width: 470px; margin-bottom: 22px; }
.momento__p strong { color: var(--navy); font-weight: 500; }
.momento__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.momento__chips li { font-size: 12.5px; padding: 7px 13px; border-radius: 999px; background: rgb(158 193 229 / 0.35); color: var(--navy); }
.momento__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--rojo); font-size: 14px; font-weight: 500; text-decoration: none; }
.momento__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.momento__link:focus-visible { outline: 2px solid var(--rojo); outline-offset: 4px; border-radius: 2px; }

.momento__foto { margin: 24px 0 8px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 6px; background: var(--gris); }
.momento__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.entra .momento__foto img { animation: foto-entra 1.2s ease-out both; }

@keyframes panel-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes foto-entra { from { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .momento__panel.entra, .entra .momento__foto img { animation: none; }
}

/* ---------- Espacios: foto grande con tarjeta blanca encima ---------- */
.espacios { padding-block: 64px; }
.espacios .contenedor { width: min(100% - 32px, 1500px); }
.espacios__marco { position: relative; min-height: 640px; border-radius: 26px; overflow: hidden; display: flex; align-items: flex-end; padding: 44px; }
.espacios__fotos { position: absolute; inset: 0; }
.espacios__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.espacios__img.activa { opacity: 1; }
.espacios__tarjeta { position: relative; max-width: 400px; background: var(--blanco); border-radius: 16px; padding: 30px 32px 28px; box-shadow: 0 18px 40px rgb(1 34 70 / 0.18); }
.espacios__titulo { font-size: clamp(28px, 2.6vw, 34px); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; color: var(--navy); margin-bottom: 14px; }
.espacios__texto { font-size: 15px; line-height: 1.6; color: var(--texto-suave); margin-bottom: 22px; }
.espacios__link { display: inline-flex; align-items: center; gap: 8px; color: var(--rojo); font-size: 14px; font-weight: 500; text-decoration: none; }
.espacios__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.espacios__link:focus-visible { outline: 2px solid var(--rojo); outline-offset: 4px; border-radius: 2px; }

/* ---------- Niveles ---------- */
.niveles { background: var(--azul); color: var(--blanco); padding-block: 88px 96px; }
/* Título e intro comparten la grilla con foto y niveles: la intro queda alineada a la columna de niveles */
.niveles__intro { width: 0; min-width: 100%; align-self: end; font-size: 16px; line-height: 1.55; color: var(--blanco); }
.niveles__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 44px 24px; align-items: stretch; }
.niveles__grid .titulo { align-self: end; }
.niveles__foto { position: relative; min-height: 360px; border-radius: 16px; overflow: hidden; }
.niveles__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.niveles__contenido { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.niveles__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.nivel { background: var(--blanco); color: var(--navy); border-radius: 14px; padding: 16px 24px 16px 20px; display: flex; align-items: center; gap: 14px; }
.nivel__codigo { font-size: 42px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; color: var(--azul); min-width: 58px; }
.nivel__edad { font-size: 16px; line-height: 1.25; padding-left: 14px; border-left: 1px solid var(--borde); white-space: nowrap; }
.nivel:nth-child(-n+2) .nivel__codigo { color: var(--rojo); }
.niveles__pie { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.niveles__nota { font-size: 15px; line-height: 1.5; color: var(--blanco); max-width: 340px; }

/* ---------- Testimonio en video ---------- */
.testimonio .dos-col { grid-template-columns: 5fr 6fr; }
.testimonio__texto { margin-top: 22px; }
/* Dos reels verticales lado a lado, el segundo un poco más abajo */
.testimonio__videos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 520px; justify-self: end; width: 100%; }
.testimonio__item { margin: 0; }
.testimonio__item:nth-child(2) { margin-top: 48px; }
.testimonio__video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 12px; background: var(--navy); object-fit: cover; }
.testimonio__nombre { margin-top: 10px; font-size: 14px; line-height: 1.3; color: var(--texto-suave); }
.testimonio__nombre b { display: block; font-weight: 500; color: var(--navy); }

/* ---------- FAQ ---------- */
.faq { padding-block: 88px 72px; position: relative; overflow: hidden; }
.faq .contenedor { position: relative; z-index: 1; }
/* Corazón del isotipo (trazado original, sin girar ni deformar) leve en el fondo */
.faq::before, .faq::after { content: ""; position: absolute; aspect-ratio: 700.02 / 574.74; pointer-events: none; background-position: center; background-size: contain; background-repeat: no-repeat; }
.faq::before { width: 760px; left: -300px; top: 40px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20700.02%20574.74%22%3E%3Cpath%20d%3D%22M688.02%2C152.15c-1.48%2C48.67-10.5%2C101.24-31.93%2C151.06c-25.68%2C59.68-80.48%2C102.16-130.66%2C145.57c-52.26%2C45.21-112%2C85.66-178.37%2C113.15c-2.08%2C0.86-3.91%2C1.18-6.08%2C0.27c-77.87-32.59-145.65-81.88-207.79-134.04C76.91%2C380.93%2C30.95%2C319.85%2C14.22%2C252.15c-9.74-39.4-15.57-79.24-13.96-119.98C1%2C113.66%2C3.63%2C95.46%2C9.38%2C77.82C20.52%2C43.59%2C44.7%2C22.87%2C77.03%2C11.04c27.74-10.15%2C56.48-12.47%2C85.71-9.82C234.9%2C7.76%2C288.8%2C45.91%2C331.98%2C102.61c1.41%2C1.85%2C2.73%2C3.78%2C4.11%2C5.67c4.89%2C6.69%2C10.81%2C6.72%2C15.59%2C0c11.44-16.09%2C24.15-31.06%2C38.55-44.48c33.14-30.9%2C71.11-52.57%2C115.75-60.21c36.23-6.2%2C72.23-4.89%2C107.11%2C8.32c38.21%2C14.47%2C61.87%2C41.79%2C69.97%2C82.81C686.44%2C111.89%2C687.9%2C129.22%2C688.02%2C152.15z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.faq::after { width: 420px; right: -140px; bottom: -120px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20700.02%20574.74%22%3E%3Cpath%20d%3D%22M688.02%2C152.15c-1.48%2C48.67-10.5%2C101.24-31.93%2C151.06c-25.68%2C59.68-80.48%2C102.16-130.66%2C145.57c-52.26%2C45.21-112%2C85.66-178.37%2C113.15c-2.08%2C0.86-3.91%2C1.18-6.08%2C0.27c-77.87-32.59-145.65-81.88-207.79-134.04C76.91%2C380.93%2C30.95%2C319.85%2C14.22%2C252.15c-9.74-39.4-15.57-79.24-13.96-119.98C1%2C113.66%2C3.63%2C95.46%2C9.38%2C77.82C20.52%2C43.59%2C44.7%2C22.87%2C77.03%2C11.04c27.74-10.15%2C56.48-12.47%2C85.71-9.82C234.9%2C7.76%2C288.8%2C45.91%2C331.98%2C102.61c1.41%2C1.85%2C2.73%2C3.78%2C4.11%2C5.67c4.89%2C6.69%2C10.81%2C6.72%2C15.59%2C0c11.44-16.09%2C24.15-31.06%2C38.55-44.48c33.14-30.9%2C71.11-52.57%2C115.75-60.21c36.23-6.2%2C72.23-4.89%2C107.11%2C8.32c38.21%2C14.47%2C61.87%2C41.79%2C69.97%2C82.81C686.44%2C111.89%2C687.9%2C129.22%2C688.02%2C152.15z%22%20fill%3D%22%236980aa%22%20fill-opacity%3D%22.08%22%2F%3E%3C%2Fsvg%3E"); }
.faq .titulo { margin-bottom: 36px; }
.faq__lista { max-width: 934px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--blanco); border-radius: 10px; }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 48px 18px 22px; position: relative;
  font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--navy); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; margin-top: -2px;
  border: 5px solid transparent; border-top: 6px solid var(--rojo); border-bottom: 0;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 10px; }
.faq__resp { padding: 0 22px 20px; font-size: 16px; line-height: 1.55; color: var(--texto-suave); }
.faq__resp p + p { margin-top: 12px; }
.faq__resp strong { color: var(--navy); font-weight: 500; }

/* ---------- Cierre ---------- */
.cierre { padding-block: 80px; overflow: hidden; }
.cierre__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.cierre .titulo { max-width: 520px; }
.cierre .texto { max-width: 440px; margin: 20px 0 32px; color: var(--navy); }
/* Collage escalonado: dos columnas con una foto alta y una baja alternadas */
.cierre__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cierre__col { display: grid; gap: 14px; align-content: start; }
.cierre__col--baja { margin-top: 48px; }
.cierre__collage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 30px rgb(1 34 70 / 0.16); }
.cierre__collage img.alta { aspect-ratio: 4 / 5; }

/* ---------- Footer ---------- */
.pie { position: relative; overflow: hidden; background: var(--navy); color: var(--blanco); padding: 72px 0 28px; }
/* Corazón del isotipo (trazado original, sin girar ni deformar) en contorno, cortado por la esquina */
.pie::before { content: ""; position: absolute; width: 620px; aspect-ratio: 700.02 / 574.74; right: -180px; bottom: -260px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20700.02%20574.74%22%3E%3Cpath%20d%3D%22M688.02%2C152.15c-1.48%2C48.67-10.5%2C101.24-31.93%2C151.06c-25.68%2C59.68-80.48%2C102.16-130.66%2C145.57c-52.26%2C45.21-112%2C85.66-178.37%2C113.15c-2.08%2C0.86-3.91%2C1.18-6.08%2C0.27c-77.87-32.59-145.65-81.88-207.79-134.04C76.91%2C380.93%2C30.95%2C319.85%2C14.22%2C252.15c-9.74-39.4-15.57-79.24-13.96-119.98C1%2C113.66%2C3.63%2C95.46%2C9.38%2C77.82C20.52%2C43.59%2C44.7%2C22.87%2C77.03%2C11.04c27.74-10.15%2C56.48-12.47%2C85.71-9.82C234.9%2C7.76%2C288.8%2C45.91%2C331.98%2C102.61c1.41%2C1.85%2C2.73%2C3.78%2C4.11%2C5.67c4.89%2C6.69%2C10.81%2C6.72%2C15.59%2C0c11.44-16.09%2C24.15-31.06%2C38.55-44.48c33.14-30.9%2C71.11-52.57%2C115.75-60.21c36.23-6.2%2C72.23-4.89%2C107.11%2C8.32c38.21%2C14.47%2C61.87%2C41.79%2C69.97%2C82.81C686.44%2C111.89%2C687.9%2C129.22%2C688.02%2C152.15z%22%20fill%3D%22none%22%20stroke%3D%22%239ec1e5%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.pie .contenedor { position: relative; }
.pie__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 64px; align-items: start; }
.pie__logo { width: 300px; margin-bottom: 26px; }
/* Datos del Open House en pequeño, iguales a los del hero pero sobre navy */
.pie__evento { justify-content: flex-start; gap: 22px; margin: 0 0 28px; color: var(--blanco); font-size: 14px; }
.pie__evento li { gap: 8px; }
.pie__evento svg { width: 22px; height: 22px; fill: var(--celeste); }
.pie__evento li:nth-child(3) svg { width: 18px; height: 24px; }
.pie__redes { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pie__redes a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(158 193 229 / 0.4); color: var(--celeste); transition: background-color .2s, color .2s, border-color .2s; }
.pie__redes a:hover { background: var(--blanco); border-color: var(--blanco); color: var(--navy); }
.pie__redes a:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
/* Datos como lista de filas: etiqueta pequeña, dato grande y flecha que se mueve al pasar el mouse */
.pie__datos { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(158 193 229 / 0.3); }
.pie__datos > li { border-bottom: 1px solid rgb(158 193 229 / 0.3); }
.pie__fila { display: grid; grid-template-columns: 120px 1fr 18px; align-items: baseline; gap: 16px; padding: 22px 0; color: inherit; text-decoration: none; }
.pie__etiqueta { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--celeste); }
.pie__valor { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pie__valor a { color: inherit; text-decoration: none; }
.pie__valor a:hover, a.pie__fila:hover .pie__valor { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(158 193 229 / 0.6); }
.pie__flecha { align-self: center; color: var(--celeste); transition: transform .25s, color .25s; }
a.pie__fila:hover .pie__flecha { transform: translate(3px, -3px); color: var(--blanco); }
a.pie__fila:focus-visible, .pie__valor a:focus-visible { outline: 2px solid var(--blanco); outline-offset: 4px; border-radius: 2px; }
.pie__legal { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgb(158 193 229 / 0.2); font-size: 13px; line-height: 1.5; color: var(--celeste); }
.pie__legal a { color: var(--blanco); }

/* ---------- Animación de entrada (solo si JS la activa) ---------- */
.js .aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .espacios__img { transition: none; }
  .js .aparece { opacity: 1; transform: none; transition: none; }
  .boton:hover { transform: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Páginas del embudo (gracias, confirmación, edad no apta) ---------- */
/* Misma estructura del hero de registro; cambian el fondo y la tarjeta */
.hero--pagina { min-height: calc(100svh - 52px); display: grid; align-items: center; }
.hero--oscuro { background-color: var(--navy); border-top: 1px solid rgb(158 193 229 / 0.16); }
.hero--azul { background-color: var(--azul); }
.hero--oscuro::before { opacity: .14; }
.hero__titulo .pegado { margin-left: -.1em; }
.hero--azul::before { opacity: .22; }
.hero--oscuro::after, .hero--azul::after { opacity: .5; }
.hero--oscuro .hero__titulo, .hero--azul .hero__titulo { color: var(--blanco); }
.hero--oscuro .hero__titulo b::before { background: var(--azul); }
.hero--azul .hero__titulo b::before { background: var(--navy); }
.hero--oscuro .hero__intro, .hero--azul .hero__intro { color: var(--celeste); }
.hero--azul .hero__intro { color: #d6e6f6; }
.hero--oscuro .hero__intro strong, .hero--azul .hero__intro strong { color: var(--blanco); }
.hero--oscuro .evento, .hero--azul .evento { color: var(--blanco); }
.hero--oscuro .evento svg, .hero--azul .evento svg { fill: var(--celeste); }

/* Tarjeta de mensaje: mismo marco que el formulario, con contenido en vez de campos */
.aviso { background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 18px 44px rgb(1 34 70 / 0.12); overflow: hidden; }
.aviso__cuerpo { padding: 32px 36px 30px; }
.aviso__titulo { font: 500 24px/1.15 var(--font); letter-spacing: -0.02em; color: var(--navy); margin-bottom: 18px; }
.aviso__texto { font-size: 16px; line-height: 1.5; color: var(--texto-suave); }
.aviso__texto + .aviso__texto { margin-top: 10px; }
.aviso__texto strong { color: var(--navy); font-weight: 700; }
.aviso__nota { margin-top: 18px; padding: 12px 16px; border-radius: 8px; background: #eef3f9; font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
.aviso__nota strong { color: var(--navy); }
/* Pasos numerados de "lo que sigue" */
.aviso__pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 14px; }
.aviso__pasos li { counter-increment: paso; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-size: 16px; line-height: 1.45; color: var(--texto-suave); }
.aviso__pasos li::before { content: counter(paso); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--celeste); color: var(--navy); font: 700 15px/1 var(--font); }
.aviso__pasos strong { display: block; color: var(--navy); font-weight: 700; }
/* Pie de la tarjeta: botón a todo el ancho, como el del formulario */
.aviso__pie, .form-card__pie--solo { display: flex; background: var(--navy); }
.aviso__accion, .form-card__pie--solo .principal { flex: 1; justify-content: center; text-align: center; }
/* El footer también es navy: una línea lo separa del hero oscuro */
main:has(.hero--oscuro) + .pie { border-top: 1px solid rgb(158 193 229 / 0.16); }
.aviso__accion {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 24px;
  background: var(--rojo); color: var(--blanco); text-decoration: none;
  font: 500 15px var(--font-form); letter-spacing: .06em; transition: background-color .2s;
}
.aviso__accion svg { width: 20px; height: 20px; flex: none; }
.aviso__accion:hover { background: var(--vino); }
.aviso__accion:focus-visible { outline: 3px solid var(--blanco); outline-offset: -4px; }
.form-card__pie--solo .principal { min-height: 56px; font-size: 15px; }
.aviso__enlace { display: block; margin: 18px auto 0; text-align: center; font-size: 15px; color: var(--azul); }
@media (min-width: 821px) {
  .hero .form-card__cuerpo--dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
}
.campo__ayuda { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }

/* ---------- Efectos leves (todas las páginas) ---------- */
/* Entrada del hero al cargar: el texto sube en cascada y el key visual aparece con un leve acercamiento */
@keyframes sube { from { opacity: 0; transform: translateY(16px); } }
@keyframes acerca { from { opacity: 0; transform: scale(.96); } }
@keyframes flota { 50% { translate: 0 -8px; } }
@keyframes deriva { 50% { translate: 0 -16px; } }
@keyframes tic { from { opacity: .35; transform: translateY(-4px); } }
.js .hero__contenido > * { animation: sube .7s cubic-bezier(.2, .7, .3, 1) both; }
.js .hero__contenido > :nth-child(2) { animation-delay: .1s; }
.js .hero__contenido > :nth-child(3) { animation-delay: .2s; }
.js .hero__contenido > :nth-child(4) { animation-delay: .3s; }
.js .hero__titulo b::before { animation-delay: .6s; }
.js .hero__visual { animation: acerca 1s .15s cubic-bezier(.2, .7, .3, 1) both; }
/* El niño del key visual flota apenas, como respirando */
.hero__img { animation: flota 7s 1.2s ease-in-out infinite; }
/* Los pasos de "Lo que sigue" entran uno tras otro */
.js .aviso__pasos li { animation: sube .6s cubic-bezier(.2, .7, .3, 1) both; }
.js .aviso__pasos li:nth-child(1) { animation-delay: .45s; }
.js .aviso__pasos li:nth-child(2) { animation-delay: .57s; }
.js .aviso__pasos li:nth-child(3) { animation-delay: .69s; }
/* Corazones del fondo: se desplazan muy despacio en vertical (sin girar ni deformar el isotipo) */
.hero::before, .faq::before, .pie::before { animation: deriva 14s ease-in-out infinite; }
.hero::after, .faq::after { animation: deriva 11s 2s ease-in-out infinite; }
/* Segundero de la cuenta regresiva: cada número nuevo cae suavemente */
.cuenta__u b { display: inline-block; }
.cuenta__u b.tic { animation: tic .35s ease-out; }

/* Botones rojos: un brillo cruza al pasar el mouse y la flecha se adelanta */
.boton, .cuenta__cta, .form-card__pie .principal, .aviso__accion { position: relative; overflow: hidden; isolation: isolate; }
.boton::after, .cuenta__cta::after, .form-card__pie .principal::after, .aviso__accion::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.22) 50%, transparent 65%);
  translate: -110% 0; transition: translate .7s ease;
}
.boton:hover::after, .cuenta__cta:hover::after, .form-card__pie .principal:hover::after, .aviso__accion:hover::after { translate: 110% 0; }
.form-card__pie button svg, .aviso__accion svg:last-child:not(:first-child) { transition: transform .25s; }
.form-card__pie .principal:hover svg, .aviso__accion:hover svg:last-child:not(:first-child) { transform: translateX(4px); }
.form-card__pie button[data-ir="1"]:hover svg { transform: translateX(-4px); }

/* Formularios: la etiqueta del campo activo toma el azul de marca */
.campo label { transition: color .2s; }
.campo:focus-within > label { color: var(--azul); }

/* Franjas de la sección de video: se trazan desde los bordes al entrar en pantalla */
.js .presentacion__marco::before, .js .presentacion__marco::after { scale: 0 1; transition: scale 1.1s cubic-bezier(.2, .7, .3, 1); }
.js .presentacion__marco::before { transform-origin: 0 50%; }
.js .presentacion__marco::after { transform-origin: 100% 50%; transition-delay: .15s; }
.js .presentacion__marco.visible::before, .js .presentacion__marco.visible::after { scale: 1 1; }

/* Fotos: leve acercamiento o elevación al pasar el mouse */
.niveles__foto img, .dos-col__img { transition: scale .8s cubic-bezier(.2, .7, .3, 1); }
.niveles__foto:hover img { scale: 1.04; }
.cierre__collage img, .js .cierre__collage img.aparece { transition: translate .4s ease, box-shadow .4s ease, opacity .6s ease, transform .6s ease; }
.cierre__collage img:hover { translate: 0 -6px; box-shadow: 0 22px 40px rgb(1 34 70 / 0.22); }

/* Preguntas frecuentes: la respuesta aparece con un fundido al abrir */
.faq details[open] .faq__resp { animation: sube .4s ease both; }
.faq details { transition: box-shadow .25s; }
.faq details:hover { box-shadow: 0 8px 24px rgb(1 34 70 / 0.08); }

@media (prefers-reduced-motion: reduce) {
  .js .hero__contenido > *, .js .hero__visual, .hero__img, .js .aviso__pasos li,
  .hero::before, .hero::after, .faq::before, .faq::after, .pie::before,
  .cuenta__u b.tic, .faq details[open] .faq__resp { animation: none; }
  .js .presentacion__marco::before, .js .presentacion__marco::after { scale: 1 1; transition: none; }
  .boton::after, .cuenta__cta::after, .form-card__pie .principal::after, .aviso__accion::after { display: none; }
  .niveles__foto:hover img, .cierre__collage img:hover { scale: none; translate: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .hero__grid { gap: 36px; }
}

/* Registro: ceja, título, fecha y hora, (foto), texto y formulario */
.hero--registro .hero__ceja { text-align: center; margin-bottom: 14px; }
.hero--registro .evento { margin: 20px 0 0; }
.hero--registro .hero__intro { margin-top: 24px; }

/* ---------- Móvil ---------- */
@media (max-width: 820px) {
  .seccion, .cierre { padding-block: 56px; }
  .cierre__grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .cierre .titulo, .cierre .texto { margin-inline: auto; }
  .cierre__collage, .cierre__col { gap: 10px; }
  .cierre__col--baja { margin-top: 28px; }
  .presentacion { padding-block: 56px; }
  .presentacion__marco::before { top: calc(50% - 20px); height: 10px; }
  .presentacion__marco::after { top: calc(50% + 12px); height: 5px; }
  .presentacion .texto { margin-bottom: 28px; }
  .cuenta__texto { display: none; }
  .cuenta__fila { gap: 12px; }
  .cuenta__reloj { gap: 8px; font-size: 12px; }
  .cuenta__u b { font-size: 17px; }
  .cuenta__cta { padding: 0 12px; font-size: 11px; letter-spacing: .04em; }
  .hero { padding-block: 32px 56px; }
  .hero__visual { width: min(100%, 340px); justify-self: center; order: -1; }
  .hero__contenido { justify-self: center; }
  .hero__grid, .dos-col, .testimonio .dos-col { grid-template-columns: 1fr; gap: 32px; }
  .hero__titulo { font-size: 38px; }
  .texto br, .titulo br { display: none; }
  /* Fecha, hora y lugar en una sola fila: cada icono junto a su texto, repartidos parejo */
  .evento { flex-wrap: nowrap; justify-content: space-between; gap: 10px; font-size: 14px; letter-spacing: -0.02em; }
  .evento li { gap: 6px; min-width: 0; }
  .evento svg { width: 22px; height: 22px; }
  .evento li:nth-child(3) svg { width: 18px; height: 24px; }
  .hero__intro { margin: 12px auto 24px; font-size: 16px; }
  .hero--pagina { min-height: 0; }
  .aviso__cuerpo { padding: 26px 22px 24px; }
  .aviso__titulo { font-size: 21px; }
  .aviso__accion, .form-card__pie--solo .principal { padding: 0 16px; font-size: 13px; letter-spacing: .04em; }
  .form-card { margin-inline: auto; }
  .form-card__cuerpo { padding: 32px 22px 20px; }
  .dos-col__img { justify-self: center; }
  .testimonio__videos { justify-self: stretch; max-width: none; gap: 10px; }
  .testimonio__item:nth-child(2) { margin-top: 28px; }

  .momentos { padding-block: 64px 56px; }
  .momentos__cabeza { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
  .momentos__grid { grid-template-columns: 1fr; gap: 20px; }
  .momento__lista { grid-template-columns: 1fr 1fr; gap: 8px; }
  .momento__tab { grid-template-columns: 20px 1fr; gap: 10px; padding: 12px; border: 1px solid rgb(158 193 229 / 0.3); }
  .momento__tab[aria-selected="true"] { border-color: transparent; }
  .momento__nombre { font-size: 14px; }
  .momento__sub, .momento__tab .momento__flecha { display: none; }
  .momento__tarjeta { padding: 28px 22px 18px; }
  .momento__foto { aspect-ratio: 3 / 2; margin-top: 20px; }

  .espacios { padding-block: 56px; }
  .espacios__marco { min-height: 0; padding: 0; flex-direction: column; align-items: stretch; background: var(--gris); }
  .espacios__fotos { position: relative; aspect-ratio: 4 / 3; }
  .espacios__tarjeta { max-width: none; margin: -40px 14px 14px; padding: 24px 22px; }
  .niveles { padding-block: 56px 64px; }
  .niveles__intro { width: auto; margin-top: -6px; }
  .niveles__grid { grid-template-columns: 1fr; gap: 20px; }
  .niveles__foto { min-height: 0; aspect-ratio: 4 / 3; }
  .niveles__img { object-position: 50% 25%; }
  .niveles__lista { gap: 10px; }
  .nivel { padding: 14px 16px; gap: 12px; }
  .nivel__codigo { font-size: 32px; min-width: 44px; }
  .nivel__edad { font-size: 14px; padding-left: 12px; }
  .niveles__pie { text-align: center; }
  .niveles__nota { max-width: none; }

  .faq::before { width: 440px; left: -220px; }
  .faq::after { width: 280px; right: -120px; }
  .faq summary { font-size: 16px; padding-left: 18px; }
  .faq__resp { padding-inline: 18px; }

  .boton { min-width: 0; width: min(352px, 100%); }
  .pie { padding-top: 52px; }
  .pie::before { width: 380px; right: -140px; bottom: -160px; }
  .pie__grid { grid-template-columns: 1fr; gap: 36px; }
  .pie__logo { width: min(260px, 100%); margin-bottom: 20px; }
  .pie__evento { justify-content: space-between; gap: 10px; font-size: 14px; }
  .pie__evento svg { width: 22px; height: 22px; }
  .pie__evento li:nth-child(3) svg { width: 18px; height: 24px; }
  .pie__fila { grid-template-columns: 1fr 18px; gap: 6px 12px; padding: 18px 0; }
  .pie__etiqueta { grid-column: 1 / -1; }
  .pie__valor { font-size: 16px; }
  .pie__legal { flex-direction: column; gap: 6px; margin-top: 40px; }

  /* Registro en móvil: la foto va entre la fecha/hora y el texto. display:contents deja ordenar los hijos del bloque de texto junto con la foto. */
  .hero--registro .hero__grid { gap: 0; }
  .hero--registro .hero__contenido { display: contents; }
  .hero--registro .hero__ceja { order: 1; }
  .hero--registro .hero__titulo { order: 2; }
  .hero--registro .evento { order: 3; }
  .hero--registro .hero__visual { order: 4; margin-top: 24px; }
  .hero--registro .hero__intro { order: 5; }
  .hero--registro .form-card { order: 6; }
}

/* Formulario de GHL incrustado: form_embed.js ajusta la altura al contenido.
   min-height 700: en el paso de los hijos el formulario mide ~470 y el calendario de GHL (~344) no cabía; con menos se recorta el botón de confirmar. */
.ghl-form { display: block; width: 100%; min-height: 700px; border: 0; }
/* Altura inicial = lo que mide el paso 1 (1219px a 342px de ancho, 974px a 609px) para que el formulario no empuje la página al cargar.
   form_embed.js la reemplaza con un height en línea. Si cambia el formulario en GHL, volver a medir. */
.ghl-form { height: clamp(974px, calc(1564px - 92vw), 1300px); }
/* Formulario de confirmación: mide 802px a 390px de ancho y 636px desde 600px. Mismo criterio: volver a medir si cambia en GHL. */
#inline-EY1ahp7pE2J5gQAvPXrE { min-height: 0; height: clamp(636px, calc(1110px - 79vw), 802px); }
/* form_embed.js deja el iframe en position:absolute mientras carga, y así la tarjeta colapsa a 0. Se mantiene en el flujo. */
.ghl-form { position: relative !important; }

/* ---------- Solicitud de costos (/costos/) ---------- */
/* Portal: las tarjetas .nivel de registro, como enlaces. Maternal y Moments ocupan la fila completa. */
.costos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: left; }
.costos__lista .nivel--ancho { grid-column: 1 / -1; }
.costos__lista .nivel { height: 100%; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.costos__lista .nivel:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(0 0 0 / 0.28); }
.costos__lista .nivel:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
/* La regla :nth-child de registro pintaría todas de rojo (cada tarjeta es la única de su <li>): K0–K5 en azul, Babies en rojo. */
.costos__lista .nivel .nivel__codigo { color: var(--azul); }
.costos__lista .nivel--ancho .nivel__codigo { color: var(--rojo); }
.costos__lista .nivel--ancho .nivel__edad { white-space: normal; }
.nivel--ancho .nivel__codigo { font-size: 28px; }
.nivel__flecha { flex: none; margin-left: auto; color: var(--rojo); transition: transform .25s; }
.nivel:hover .nivel__flecha { transform: translate(2px, -2px); }
.volver { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 0 auto 18px; font-size: 15px; color: var(--celeste); text-decoration: none; }
.volver:hover { color: var(--blanco); }
.volver:focus-visible { outline: 2px solid var(--celeste); outline-offset: 4px; border-radius: 2px; }
.aviso .ceja { margin-bottom: 8px; }
/* ponytail: altura provisional; medir cada formulario de nivel cuando estén conectados (como #inline-EY1ahp7pE2J5gQAvPXrE). */
.ghl-form--costos { min-height: 0; height: 640px; }
@media (max-width: 820px) {
  .costos__lista { gap: 10px; }
  .nivel--ancho .nivel__codigo { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .costos__lista .nivel, .nivel__flecha { transition: none; }
}