/* Secciones debajo del hero (spec: docs/superpowers/specs/2026-09-11-sitio-completo-design.md).
   Sistema de formas (una sola regla para toda la página):
   - interactivos (botones, filtros, chips, corazones): píldora o círculo;
   - tarjetas y fotos: esquinas de 28 px (24 px en celular);
   - la foto de la clienta: forma orgánica; la transformación: un arco.
   Nada de esquinas rectas. Los cortes entre secciones son festones (medios
   círculos del color de la sección de arriba), como los manteles y toldos
   de fiesta. */

:root {
  /* Nube de la marca recortable (data URI). La escribe herramientas/nubes.py
     entre estas marcas; no editar a mano. Va incrustada y no como archivo
     porque por file:// el navegador bloquea las máscaras SVG externas. */
  /* nubes.py:feston-inicio */
  --nube-mascara: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22168.0%22%20height=%2222.0%22%20viewBox=%220%200%20168.0%2022.0%22%3E%0A%20%20%3C%21--%20Corte%20entre%20secciones:%20una%20onda%20grande%20y%20alargada%2C%20valle%20en%20la%0A%20%20%20%20%20%20%20linea%20de%20corte%20y%20cresta%20abajo.%20Se%20usa%20como%20mascara%20%28mask%29%2C%20no%20como%0A%20%20%20%20%20%20%20imagen:%20asi%20conserva%20el%20color%20de%20la%20seccion%20de%20arriba.%0A%20%20%20%20%20%20%20Generado%20por%20herramientas/nubes.py%20--%3E%0A%20%20%3Cpath%20d=%22M0%2C0C30.24%2C0%2053.76%2C22.00%2084.00%2C22.00C114.24%2C22.00%20137.76%2C0%20168.00%2C0Z%22%20fill=%22%23fff%22/%3E%0A%3C/svg%3E%0A");
  /* nubes.py:feston-fin */

  /* Sombras de profundidad (pedido del usuario): hacia abajo, fucsia oscuro
     muy suave (~10%), nunca negras. Que no roben atención pero den la
     sensación de estar por encima. */
  --sombra-flotar: drop-shadow(0 26px 14px rgba(110, 16, 72, 0.11));
  --blanco-rosado: #FFF8FB;
  --mantequilla: #FFF4DA;
  --morado-oscuro: #4E1F63;
  --texto-suave: rgba(43, 24, 48, 0.74);
  --radio: 28px;
  --sombra: 0 18px 50px rgba(112, 48, 136, 0.14);
  --sombra-magenta: 0 12px 30px rgba(224, 16, 120, 0.3);
  --seccion-y: clamp(5rem, 10vw, 9rem);
  --ancho: min(1240px, 100% - 2 * clamp(1.25rem, 4vw, 3rem));
  --ancho-sala: min(1600px, 100% - 2 * clamp(1.25rem, 3vw, 3rem));
}

/* Íconos Phosphor duotono: la mitad clara usa var(--duo) (las reglas CSS no
   entran a los <use>, pero las variables sí se heredan). */
svg { fill: currentColor; }

/* --- utilidades ------------------------------------------------------ */

.titulo {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-morado);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.titulo em {
  font-style: normal;
  color: var(--color-magenta);
  text-decoration: underline wavy var(--color-dorado);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

.titulo--xl { font-size: clamp(2.8rem, 6.6vw, 5.4rem); }

.bajada {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--texto-suave);
  max-width: 52ch;
  margin: 0;
}

.bajada--grande { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-blanco);
  background: var(--color-magenta);
  border: 2px solid var(--color-magenta);
  padding: 1rem 1.8rem 0.9rem;
  border-radius: 999px;
  box-shadow: var(--sombra-magenta);
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.25s;
}

.boton svg { width: 1.35em; height: 1.35em; }
.boton:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(224, 16, 120, 0.38); }
.boton:active { transform: translateY(0) scale(0.98); }

.boton--suave {
  color: var(--color-morado);
  background: var(--color-blanco);
  border-color: rgba(112, 48, 136, 0.16);
  box-shadow: 0 8px 22px rgba(112, 48, 136, 0.1);
}

.boton--suave:hover { border-color: var(--color-morado); box-shadow: 0 14px 30px rgba(112, 48, 136, 0.16); }

.redondo {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 2px solid rgba(112, 48, 136, 0.14);
  background: var(--color-blanco);
  color: var(--color-morado);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(112, 48, 136, 0.12);
  transition: transform 0.3s var(--ease-out), background 0.2s, color 0.2s;
}

.redondo svg { width: 1.4rem; height: 1.4rem; }
.redondo:hover { background: var(--color-morado); color: var(--color-blanco); transform: scale(1.06); }
.redondo:disabled { opacity: 0.35; pointer-events: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-dorado);
  outline-offset: 3px;
}

/* Corazón "me gusta / me interesa" — relleno completo al marcarlo */
.corazon {
  display: inline-grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 0;
  background: var(--color-blanco);
  color: var(--color-magenta);
  cursor: pointer;
  box-shadow: 0 8px 14px rgba(110, 16, 72, 0.14);
  transition: transform 0.3s var(--ease-out), background 0.2s, color 0.2s;
}

.corazon svg { width: 1.45rem; height: 1.45rem; }
.corazon:hover { transform: scale(1.1); }
.corazon[aria-pressed="true"] { background: var(--color-magenta); color: var(--color-blanco); }
.corazon[aria-pressed="true"] { --duo: 1; }
.corazon.is-latido { animation: latido 0.5s var(--ease-out); }

@keyframes latido {
  0% { transform: scale(1); }
  35% { transform: scale(1.32); }
  65% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.corazon--texto {
  width: auto;
  height: auto;
  gap: 0.5rem;
  grid-auto-flow: column;
  padding: 0.65rem 1.1rem 0.6rem 0.9rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
}

.corazon--texto svg { width: 1.3rem; height: 1.3rem; }
.corazon--texto:hover { transform: translateY(-2px); }
.corazon--texto[aria-pressed="true"] { border-color: var(--color-magenta); }

/* Borde entre secciones: la nube de la marca, estirada a lo ancho. Antes eran
   medios círculos de 44 px y el usuario dijo que parecía un toldo ("muy
   cerrado, muy juntas"): ahora son ondas largas, de nube.
   Va de MÁSCARA, no de imagen de fondo: así conserva el color de la sección de
   arriba (--feston), que cambia en cada corte. */
.con-feston { position: relative; }
.con-feston::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Medidas del dibujo del usuario (recursos/idea de cortes sesiones.svg):
     cada onda se repite cada 273 px y baja 119 (el lóbulo mide 338 de ancho:
     se solapa con el de al lado, por eso se lee redondo y no dentado). Ancho y
     alto van atados en esa misma proporción (2.30:1) para que la onda no se
     deforme al encoger en pantallas pequeñas. */
  --feston-ancho: clamp(118px, 11.8vw, 168px);
  height: clamp(15px, 1.55vw, 22px);
  background: var(--feston);
  /* el dibujo de la nube vive en :root (--nube-mascara), lo escribe nubes.py */
  -webkit-mask: var(--nube-mascara) repeat-x left top / var(--feston-ancho) 100%;
  mask: var(--nube-mascara) repeat-x left top / var(--feston-ancho) 100%;
  /* Relieve (pedido del usuario): la nube pertenece a la sección de arriba y se
     mete sobre la de abajo; la sombra hace que se vea montada encima y no
     pegada. Sigue la silueta porque es drop-shadow, no box-shadow. */
  filter: drop-shadow(0 7px 9px rgba(110, 16, 72, 0.13));
  pointer-events: none;
  z-index: 2;
}

/* Cielo con las nubes de la marca corriendo despacio (sección de la
   transformación). Dos capas a distinta velocidad y tamaño: la de atrás casi
   no se mueve, la de delante va un poco más suelta — así el fondo tiene
   profundidad y queda "esponjoso" sin robarle atención a la sala.
   Se mueve el fondo (background-position), no el elemento: el navegador lo
   resuelve sin recalcular el diseño. */
.nubes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.nubes__capa {
  position: absolute;
  left: 0;
  right: 0;
  background-image: url('../assets/fondos/nubes-cinta.svg');
  background-repeat: repeat-x;
  animation: correr-nubes linear infinite;
}

/* El recorrido es exactamente un mosaico: así el ciclo no tiene corte. */
@keyframes correr-nubes { to { background-position-x: calc(-1 * var(--paso)); } }

.nubes__capa--lejos {
  --paso: 760px;
  top: 2%;
  height: 46%;
  background-size: 760px auto;
  opacity: 0.16;
  animation-duration: 150s;
}

.nubes__capa--cerca {
  --paso: 1200px;
  top: 26%;
  height: 62%;
  background-size: 1200px auto;
  opacity: 0.26;
  animation-duration: 95s;
}

@media (prefers-reduced-motion: reduce) {
  .nubes__capa { animation: none; }
}

/* Textura de fondo: los iconos de la marca en un mosaico muy tenue, como un
   papel de regalo. Se genera con herramientas/patron_fondo.py a partir del
   mismo sprite de iconos, así nunca se despega del resto de la página.
   `section.` (no solo `.con-patron`) para ganarle al `background` corto que
   cada sección define con su color. */
section.con-patron {
  background-image: url('../assets/fondos/patron-fiesta.svg');
  background-repeat: repeat;
  background-size: 640px 640px;
}

/* Renders sueltos de la muñeca: acompañan, no protagonizan */
.render {
  position: absolute;
  height: clamp(170px, 22vw, 320px);
  width: auto;
  max-width: none;
  pointer-events: none;
  filter: var(--sombra-flotar);
  z-index: 3;
  /* Flotan en su lugar, siempre completas dentro de su sección (nunca
     cortadas por el borde: ni en los pies ni en la cabeza). El mecerse va en
     translate/rotate sueltos; la entrada/salida con el scroll (GSAP) usa
     transform, y se suman. */
  animation: flotar 5.5s ease-in-out infinite;
}

.render:nth-of-type(2n) { animation-duration: 6.5s; animation-delay: -2s; }

@keyframes flotar {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -14px; rotate: -2deg; }
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}

.blob--magenta {
  inset: 6% 2% 4% 8%;
  background: radial-gradient(circle at 45% 45%, rgba(224, 16, 120, 0.3), rgba(248, 176, 24, 0.14) 55%, transparent 72%);
}

.blob--dorado {
  inset: 8% 0 2% 0;
  background: radial-gradient(circle at 50% 55%, rgba(248, 176, 24, 0.4), rgba(224, 16, 120, 0.12) 58%, transparent 74%);
}

/* --- nav (ajustes para las secciones nuevas) -------------------------- */

.nav__links { align-items: center; }
.nav__logo img { height: 4.1rem; width: auto; }

.nav__links a.nav__cta {
  color: var(--color-blanco);
  background: var(--color-magenta);
  border: 0;
  text-shadow: none;
  padding: 0.6rem 1.2rem 0.55rem;
  border-radius: 999px;
  font-family: var(--font-display);
  box-shadow: var(--sombra-magenta);
}

.nav--scrolled .nav__links a.nav__cta { color: var(--color-blanco); }

@media (max-width: 900px) {
  .nav { padding: 0 1rem; }
  .nav__links li:not(:last-child) { display: none; }
}

/* --- 02 Bienvenida ---------------------------------------------------- */

.bienvenida {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: var(--ancho);
  margin: 0 auto;
  padding: calc(var(--seccion-y) + 3vh) 0 var(--seccion-y);
}

.bienvenida__texto { display: grid; gap: 1.6rem; justify-items: start; }

.sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.sellos li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  color: var(--color-morado);
}

.sello__icono {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--color-blanco);
  box-shadow: 0 6px 16px rgba(112, 48, 136, 0.12);
}

.sello__icono svg { width: 1.35rem; height: 1.35rem; }
.sello__icono--magenta { color: var(--color-magenta); }
.sello__icono--dorado { color: #C98A00; }
.sello__icono--morado { color: var(--color-morado); }

.acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.4rem; }

.bienvenida__visual {
  position: relative;
  min-height: clamp(360px, 42vw, 560px);
  display: grid;
  place-items: center;
}

.bienvenida__visual .render {
  position: relative;
  height: clamp(320px, 38vw, 520px);
}

.flota {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--color-blanco);
  box-shadow: 0 16px 12px -4px rgba(110, 16, 72, 0.13);
  z-index: 4;
}

.flota svg { width: 1.7rem; height: 1.7rem; }
.flota--1 { top: 6%; left: 6%; color: var(--color-magenta); }
.flota--2 { top: 16%; right: 4%; color: #C98A00; width: 2.8rem; height: 2.8rem; }
.flota--3 { bottom: 20%; left: 0; color: var(--color-magenta); width: 2.6rem; height: 2.6rem; }
.flota--4 { bottom: 8%; right: 12%; color: var(--color-morado); }
.flota--5 { top: 48%; right: -2%; color: var(--color-morado); width: 2.5rem; height: 2.5rem; }

/* --- 03 ¿Qué celebramos? ---------------------------------------------- */

.eventos {
  --feston: var(--color-rosa-fondo);
  position: relative;
  background: var(--blanco-rosado);
  padding: var(--seccion-y) 0;
  overflow: hidden;
}

.eventos__cabecera {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  width: var(--ancho);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.eventos__cabecera .render { position: relative; height: clamp(150px, 16vw, 230px); }

.slider { position: relative; }

.slider__pista {
  display: flex;
  gap: clamp(1.6rem, 2.6vw, 2.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(1.25rem, (100% - 1240px) / 2);
  padding: 2rem max(1.25rem, (100% - 1240px) / 2) 4rem;
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}

.slider__pista::-webkit-scrollbar { display: none; }
.slider__pista.is-arrastrando { cursor: grabbing; scroll-snap-type: none; }
.slider__pista.is-arrastrando * { pointer-events: none; }

.evento {
  --c: var(--color-magenta);
  --c-suave: rgba(224, 16, 120, 0.1);
  flex: 0 0 clamp(270px, 28vw, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: var(--radio);
  background: var(--color-blanco);
  box-shadow: var(--sombra);
  /* Desorden intencional (gustó al usuario): cada tarjeta un poco inclinada y
     a otra altura. Va en las propiedades sueltas rotate/translate, NO en
     transform: así la animación de entrada (GSAP, que usa transform) se suma
     en vez de pisarla. Antes una tarjeta quedaba derecha y se montaba. */
  rotate: var(--r, 0deg);
  translate: var(--x, 0px) var(--y, 0rem);
  transition: rotate 0.45s var(--ease-out), translate 0.45s var(--ease-out), scale 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.evento:nth-child(4n + 1) { --r: -2deg; --y: 0rem; }
.evento:nth-child(4n + 2) { --r: 1.6deg; --y: 1.7rem; }
.evento:nth-child(4n + 3) { --r: -1.1deg; --y: 0.5rem; }
.evento:nth-child(4n + 4) { --r: 2.1deg; --y: 2rem; }
.evento:hover { rotate: 0deg; translate: var(--x, 0px) calc(var(--y) - 0.5rem); scale: 1.02; box-shadow: 0 26px 60px rgba(112, 48, 136, 0.2); }

.evento--morado { --c: var(--color-morado); --c-suave: rgba(112, 48, 136, 0.1); }
.evento--dorado { --c: #C98A00; --c-suave: rgba(248, 176, 24, 0.18); }
.evento--rosa { --c: #D0457F; --c-suave: rgba(252, 228, 239, 0.9); }

.evento__icono {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: var(--c-suave);
  color: var(--c);
}

.evento__icono svg { width: 2.4rem; height: 2.4rem; }

.evento h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--c);
  margin: 0.2rem 0 0;
}

.evento p { margin: 0; line-height: 1.6; color: var(--texto-suave); flex: 1; }
.evento .corazon--texto { align-self: flex-start; color: var(--c); background: transparent; }
.evento .corazon--texto[aria-pressed="true"] { color: var(--color-blanco); background: var(--color-magenta); }

.slider__controles {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: var(--ancho);
  margin: 0 auto;
}

.slider__barra {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(112, 48, 136, 0.1);
  overflow: hidden;
}

.slider__barra span {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-magenta), var(--color-dorado));
  transform-origin: left;
  transition: transform 0.2s linear;
}

/* --- 04 Transformación: slider de un mismo espacio -------------------------- */

.transformacion {
  --feston: var(--blanco-rosado);
  position: relative;
  padding: calc(var(--seccion-y) + 1rem) 0 var(--seccion-y);
  background:
    radial-gradient(circle at 80% 18%, rgba(224, 16, 120, 0.35), transparent 45%),
    radial-gradient(circle at 8% 92%, rgba(248, 176, 24, 0.2), transparent 40%),
    var(--color-morado);
  color: var(--color-blanco);
}

.transformacion__cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  width: var(--ancho-sala);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.transformacion .titulo { color: var(--color-blanco); }
.transformacion .titulo em { color: var(--color-dorado); text-decoration-color: var(--color-magenta); }
.transformacion .bajada { color: rgba(255, 255, 255, 0.86); }
.transformacion__flechas { display: flex; gap: 0.75rem; flex: none; }

/* Ancho: aprovecha las pantallas grandes (pedido del usuario). Alto: limitado
   para que marco y pestañas quepan juntos; si la pantalla es ancha y baja el
   marco se vuelve más apaisado (las escenas se recortan arriba/abajo con cover). */
.sala { width: var(--ancho-sala); margin: 0 auto; }

/* El marco: un gran ventanal con el arriba apenas en arco (un espacio es
   apaisado), con el mismo anillo blanco + dorado que la ventana del baile. */
.sala__marco {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 17rem);
  min-height: 300px;
  border-radius: 46% 46% var(--radio) var(--radio) / 16% 16% var(--radio) var(--radio);
  overflow: hidden;
  background: var(--morado-oscuro);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.96), 0 0 0 16px var(--color-dorado), 0 44px 50px rgba(60, 8, 50, 0.3);
  touch-action: pan-y;
}

.sala__escena { position: absolute; inset: 0; margin: 0; visibility: hidden; z-index: 0; }
.sala__escena.is-activa { visibility: visible; z-index: 2; }
.sala__escena.is-anterior { visibility: visible; z-index: 1; }

/* Revelado de marcador: la decoración se "arma" creciendo desde el piso.
   Cuando lleguen las animaciones de IA, las reemplaza el video. */
.sala__escena.is-armando { animation: armar 1.2s var(--ease-out) both; }
.sala__escena.is-anterior { animation: alejar 1.2s var(--ease-out) both; }

@keyframes armar {
  from { clip-path: circle(0% at 50% 100%); transform: scale(1.08); }
  to { clip-path: circle(150% at 50% 100%); transform: scale(1); }
}

@keyframes alejar { to { transform: scale(1.05); } }

/* Mientras las escenas sean fotos verticales de marcador: la foto completa
   sobre una copia desenfocada de sí misma. */
.sala__fondo { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(22px) saturate(1.2); opacity: 0.85; }
.sala__img { position: relative; width: 100%; height: 100%; object-fit: contain; }

.sala__transicion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }

.sala__escena--pendiente { background: radial-gradient(circle at 50% 60%, rgba(224, 16, 120, 0.35), transparent 60%), var(--morado-oscuro); }

.sala__pendiente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.4rem);
}

.sala__pendiente svg { width: 3.5rem; height: 3.5rem; color: var(--color-dorado); }
.sala__pendiente p { margin: 0; }

.sala__tabs {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.3rem 0.2rem 0.6rem;
}

.sala__tabs::-webkit-scrollbar { display: none; }

.sala__tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem 0.6rem 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}

.sala__tab svg { width: 1.3rem; height: 1.3rem; }
.sala__tab:hover { border-color: var(--color-blanco); color: var(--color-blanco); transform: translateY(-2px); }
.sala__tab.is-activa { background: var(--color-blanco); color: var(--color-morado); border-color: var(--color-blanco); }
.sala__tab.is-activa svg { color: var(--color-magenta); }

/* Avance del cambio automático: una rayita que se llena en la pestaña activa. */
.sala__progreso { position: absolute; left: 1rem; right: 1rem; bottom: 0.3rem; height: 3px; border-radius: 999px; background: var(--color-magenta); transform: scaleX(0); transform-origin: left; }
.sala.is-auto .sala__tab.is-activa .sala__progreso { animation: progreso var(--dur, 6s) linear forwards; }

@keyframes progreso { to { transform: scaleX(1); } }

/* --- 05 Galería --------------------------------------------------------- */

.galeria {
  --feston: var(--color-morado);
  padding: var(--seccion-y) 0;
  /* La galeria se ensancha mas que el resto de secciones: --ancho esta topado
     en 1240 px y en un monitor ancho dejaba medio escritorio sin aprovechar.
     Cabecera, filtros y rejilla comparten esta medida para que el titulo siga
     alineado con la primera foto. El valor de respaldo mantiene el ancho
     normal si alguna de esas piezas se reutiliza fuera de la galeria. */
  --ancho-galeria: min(1760px, 100% - 2 * clamp(1.25rem, 4vw, 3rem));
}

.galeria__cabecera {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  width: var(--ancho-galeria, var(--ancho));
  margin: 0 auto 2rem;
}

.galeria__cabecera .render { position: relative; height: clamp(160px, 18vw, 260px); }

.filtros {
  display: flex;
  gap: 0.6rem;
  width: var(--ancho-galeria, var(--ancho));
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.3rem 0.2rem 0.6rem;
}

.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-morado);
  background: var(--color-blanco);
  border: 2px solid rgba(112, 48, 136, 0.12);
  border-radius: 999px;
  padding: 0.6rem 1.25rem 0.5rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ease-out);
}

.filtro:hover { border-color: var(--color-morado); transform: translateY(-2px); }
.filtro.is-active { background: var(--color-morado); color: var(--color-blanco); border-color: var(--color-morado); }

/* Sin JS: columnas CSS. Con JS (galeria.js): columnas reales, cada una con su velocidad. */
.galeria__grid {
  width: var(--ancho-galeria, var(--ancho));
  margin: 0 auto;
  columns: 3 280px;
  column-gap: clamp(1rem, 2vw, 1.5rem);
}

.galeria__grid.is-columnas {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}

.galeria__col { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.galeria__col:nth-child(2) { margin-top: 3.5rem; }
.galeria__col:nth-child(4) { margin-top: 2rem; }

/* En celular la galeria pasa a 3 columnas (galeria.js) y cada foto baja a
   ~106 px de ancho. Con el desfase de escritorio, la columna del medio
   arrancaba 56 px mas abajo: un hueco de mas de media foto arriba y, de paso,
   la seccion se alargaba — lo contrario de lo que se busca aqui. */
@media (max-width: 699px) {
  .galeria__col:nth-child(2) { margin-top: 1.25rem; }
}

.foto {
  position: relative;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  break-inside: avoid;
}

.is-columnas .foto { margin: 0; }
.foto[hidden] { display: none; }

.foto__abrir {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--color-blanco);
  cursor: zoom-in;
  box-shadow: 0 12px 30px rgba(112, 48, 136, 0.12);
}

.foto__abrir img { width: 100%; height: auto; transition: transform 0.7s var(--ease-out); }
.foto__abrir:hover img { transform: scale(1.05); }

.foto figcaption {
  padding: 0.7rem 0.4rem 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-morado);
}

.foto .corazon { position: absolute; top: 0.85rem; right: 0.85rem; }

.galeria__mas { display: flex; justify-content: center; margin-top: 3rem; }
.galeria__mas[hidden] { display: none; }

/* Visor */
.visor {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.visor::backdrop { background: rgba(40, 10, 50, 0.88); backdrop-filter: blur(6px); }
.visor[open] { display: grid; place-items: center; }

.visor__figura { margin: 0; display: grid; gap: 1rem; justify-items: center; padding: 4.5rem 5rem 6rem; }
.visor__figura img { max-width: min(92vw, 1100px); max-height: 74vh; width: auto; height: auto; border-radius: var(--radio); box-shadow: 0 34px 50px rgba(20, 4, 24, 0.35); }
.visor__figura figcaption { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--color-blanco); }
.visor__cerrar { position: fixed; top: 1.25rem; right: 1.25rem; }
.visor__prev, .visor__next { position: fixed; top: 50%; transform: translateY(-50%); }
.visor__prev { left: 1.25rem; }
.visor__next { right: 1.25rem; }
.visor__prev:hover, .visor__next:hover { transform: translateY(-50%) scale(1.06); }
.visor__corazon { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--color-blanco); color: var(--color-magenta); }
.visor__corazon:hover { transform: translateX(-50%) translateY(-2px); }
.visor__corazon[aria-pressed="true"] { background: var(--color-magenta); color: var(--color-blanco); }

/* --- Frase de la clienta -------------------------------------------------- */

.frase {
  --feston: var(--color-rosa-fondo);
  position: relative;
  background: var(--color-magenta);
  padding: clamp(6rem, 12vw, 10rem) 0;
  overflow: hidden;
  text-align: center;
}

.frase p {
  width: min(1000px, 100% - 3rem);
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.12;
  color: var(--color-blanco);
  text-wrap: balance;
}

.frase em { font-style: normal; color: var(--color-dorado); }

.frase__deco { position: absolute; color: rgba(255, 255, 255, 0.9); }
.frase__deco svg { width: 100%; height: 100%; }
.frase__deco--1 { width: 4.5rem; height: 4.5rem; top: 14%; left: 7%; transform: rotate(-14deg); }
.frase__deco--2 { width: 3.5rem; height: 3.5rem; bottom: 16%; right: 9%; color: var(--color-dorado); }
.frase__deco--3 { width: 4rem; height: 4rem; top: 20%; right: 16%; transform: rotate(12deg); }

/* --- 06 Nosotros ------------------------------------------------------------ */

.nosotros {
  --feston: var(--color-magenta);
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: var(--seccion-y) max(1.25rem, (100% - 1240px) / 2);
  /* (Se probó el collage de marca desenfocado de fondo: descartado por el
     usuario 2026-09-11, no se veía bien y chocaba con los festones.) */
  background: var(--blanco-rosado);
  overflow: hidden;
}

.nosotros__foto { position: relative; justify-self: center; width: min(100%, 460px); }

.nosotros__marco {
  aspect-ratio: 1;
  border-radius: 58% 42% 55% 45% / 50% 55% 45% 50%;
  overflow: hidden;
  box-shadow: 0 0 0 12px var(--color-blanco), 0 0 0 18px var(--color-rosa-fondo), 0 40px 70px rgba(112, 48, 136, 0.22);
}

.nosotros__marco img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }

.sticker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-blanco);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-morado);
  box-shadow: 0 18px 14px -6px rgba(110, 16, 72, 0.14);
  white-space: nowrap;
}

.sticker svg { width: 1.3rem; height: 1.3rem; color: var(--color-magenta); }
.sticker--1 { top: 52%; right: -9%; rotate: 6deg; }
.sticker--2 { bottom: 10%; left: -8%; rotate: -5deg; }

.nosotros__texto { display: grid; gap: 1.2rem; justify-items: start; max-width: 600px; }

.nosotros__cargo {
  margin: -0.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-magenta);
}

.nosotros__equipo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.8rem;
  padding: 1rem 1.5rem 1rem 1rem;
  border-radius: var(--radio);
  background: var(--color-blanco);
  box-shadow: var(--sombra);
}

.nosotros__equipo img { width: 7.5rem; height: 7.5rem; object-fit: cover; object-position: 50% 20%; border-radius: 22px; flex: none; }
.nosotros__equipo p { margin: 0; font-weight: 700; color: var(--color-morado); line-height: 1.5; }

.render--beso { right: max(1.5rem, (100% - 1400px) / 2); top: 3.5rem; height: clamp(150px, 14vw, 210px); }

/* --- 07 Cómo trabajamos ------------------------------------------------------ */

.como {
  --feston: var(--blanco-rosado);
  position: relative;
  background: var(--mantequilla);
  padding: var(--seccion-y) max(1.25rem, (100% - 1240px) / 2) calc(var(--seccion-y) + 2rem);
  text-align: center;
  overflow: hidden;
}

.como__camino { position: relative; margin-top: clamp(2rem, 5vw, 4rem); }

.como__linea {
  position: absolute;
  inset: 8% 0 auto;
  width: 100%;
  height: 72%;
  overflow: visible;
}

.como__linea path {
  fill: none;
  stroke: var(--color-magenta);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

.pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.paso { display: grid; justify-items: center; gap: 0.6rem; padding: 0 0.5rem; }
.paso--1 { margin-top: 9rem; }
.paso--2 { margin-top: 0; }
.paso--3 { margin-top: 8rem; }
.paso--4 { margin-top: 0.5rem; }

.paso__icono {
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--color-blanco);
  box-shadow: 0 16px 34px rgba(201, 138, 0, 0.22);
  color: var(--color-magenta);
  margin-bottom: 0.4rem;
}

.paso__icono svg { width: 3rem; height: 3rem; }
.paso--2 .paso__icono { color: var(--color-morado); }
.paso--3 .paso__icono { color: #C98A00; }
.paso h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: var(--color-morado); margin: 0; line-height: 1.15; }
.paso p { margin: 0; color: var(--texto-suave); line-height: 1.6; max-width: 26ch; }

/* A la derecha, bajo "Tú disfrutas" (el paso más alto): ahí queda aire y no tapa texto. */
/* Cabe en el hueco que queda bajo el cuarto paso: si crece, se le monta
   encima y tapa "Tú disfrutas" (pasó, el usuario lo reportó). */
.render--mira-arriba { right: max(0.5rem, (100% - 1560px) / 2); bottom: 0.75rem; height: clamp(120px, 9vw, 155px); }

/* --- 08 Redes ---------------------------------------------------------------- */

.redes {
  --feston: var(--mantequilla);
  position: relative;
  background: var(--blanco-rosado);
  padding: var(--seccion-y) 0;
  overflow: hidden;
}

.redes__cabecera { width: var(--ancho); margin: 0 auto clamp(3rem, 6vw, 5rem); display: grid; gap: 1.2rem; justify-items: start; }
.redes__botones { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.6rem; }

.red {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem 0.7rem 1rem;
  border-radius: 999px;
  background: var(--color-blanco);
  color: var(--color-morado);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 10px 24px rgba(112, 48, 136, 0.12);
  transition: transform 0.3s var(--ease-out), background 0.25s, color 0.25s;
}

.red svg { width: 1.6rem; height: 1.6rem; color: var(--color-magenta); transition: color 0.25s; }
.red:hover { transform: translateY(-3px) rotate(-1.5deg); background: var(--color-magenta); color: var(--color-blanco); }
.red:hover svg { color: var(--color-blanco); }

.redes__cinta { rotate: -3deg; margin: 0 -2rem; }

.redes__pista {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  /* Loop infinito: js/cinta-redes.js clona fotos hasta cubrir dos pantallas y
     mide un "juego"; al recorrer ese ancho vuelve al inicio sin que se note. */
  animation: cinta var(--dur, 46s) linear infinite;
}

.redes__cinta:hover .redes__pista { animation-play-state: paused; }

.redes__pista img {
  height: clamp(180px, 20vw, 260px);
  width: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: 0 14px 30px rgba(112, 48, 136, 0.16);
}

.redes__pista img:nth-child(odd) { rotate: 2deg; }
.redes__pista img:nth-child(3n) { rotate: -2.5deg; }

@keyframes cinta { to { transform: translateX(calc(-1 * var(--ancho-juego, 50%))); } }

/* El margen no es solo estético: la entrada "infla" el render con un rebote
   que se pasa de tamaño (~5%) y lo hacía asomar por el borde de la pantalla
   en portátiles y celular. 2.6rem deja sitio para ese rebote. */
.render--celebra { right: max(2.6rem, (100% - 1300px) / 2); top: clamp(1.5rem, 3vw, 2.5rem); height: clamp(170px, 18vw, 260px); }

/* --- 09 Cotiza --------------------------------------------------------------- */

.cotiza {
  --feston: var(--blanco-rosado);
  position: relative;
  display: grid;
  /* Más ancha que el resto (pedido del usuario: el formulario se sentía
     largo): la ventana del baile a la izquierda y los campos lado a lado. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  padding: var(--seccion-y) max(1.25rem, (100% - 1480px) / 2);
}

.cotiza__muneca { position: relative; display: grid; place-items: center; align-self: stretch; min-height: 420px; }
.cotiza__muneca .blob { inset: 6% -8% 4%; }

/* Ventana en arco por la que se ve bailar a la muñeca. La proporción es la
   del video (457 x 480): el canvas llena el vidrio exacto, sin recortarla. */
.ventana { position: relative; width: min(100%, 645px); }

.ventana__vidrio {
  position: relative;
  aspect-ratio: 457 / 480;
  border-radius: 50% 50% 18px 18px / 30% 30% 18px 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%),
    url('../assets/fondos/ventana-salon.webp') center / cover;
  box-shadow: 0 0 0 10px var(--color-blanco), 0 0 0 16px var(--color-dorado), 0 34px 70px rgba(112, 48, 136, 0.28);
}

.cotiza__respaldo, .cotiza__baile { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; }
.cotiza__baile { display: none; width: 100%; height: 100%; }
.cotiza__respaldo { height: 94%; width: auto; }
.cotiza__muneca.is-bailando .cotiza__baile { display: block; }
.cotiza__muneca.is-bailando .cotiza__respaldo { display: none; }

/* Se puede tocar: suelta los globos y los recupera (js/baile.js). */
.cotiza__baile.es-pulsable { cursor: pointer; }
.cotiza__baile.es-pulsable:focus-visible { outline: 3px solid var(--color-dorado); outline-offset: 4px; }

/* Alféizar: donde se para. */
.ventana__repisa {
  position: relative;
  z-index: 2;
  width: calc(100% + 56px);
  height: 22px;
  margin: -6px -28px 0;
  border-radius: 999px;
  background: var(--color-blanco);
  box-shadow: inset 0 -6px 0 var(--color-dorado), 0 14px 26px rgba(112, 48, 136, 0.22);
}

.cotiza__panel {
  background: var(--color-blanco);
  border-radius: 40px;
  padding: clamp(2rem, 4vw, 3.25rem);
  box-shadow: 0 30px 80px rgba(112, 48, 136, 0.16);
}

.cotiza__panel > .bajada { margin-bottom: 2rem; }

.formulario { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem 1.1rem; }
.formulario > * { grid-column: 1 / -1; }
.formulario > .campo--mitad { grid-column: span 3; }
.formulario > .campo--tercio { grid-column: span 2; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.campo { display: grid; gap: 0.45rem; }

.campo label, .campo__etiqueta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-morado);
}

.campo input, .campo select, .campo textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--color-texto);
  background: var(--blanco-rosado);
  border: 2px solid rgba(112, 48, 136, 0.18);
  border-radius: 18px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.campo textarea { resize: vertical; min-height: 6rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--color-magenta);
  background: var(--color-blanco);
  box-shadow: 0 0 0 5px rgba(224, 16, 120, 0.14);
}

.campo.is-error input, .campo.is-error select { border-color: #B00C5E; }
.campo__error { margin: 0; min-height: 0; color: #B00C5E; font-weight: 700; font-size: 0.92rem; }
.campo__error:empty { display: none; }
.campo__ayuda { margin: 0; font-size: 0.92rem; color: var(--texto-suave); }

.gustos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gustos:empty { display: none; }

.gusto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.35rem 0.3rem 0.3rem;
  border-radius: 999px;
  background: var(--color-rosa-fondo);
  color: var(--color-morado);
  font-weight: 700;
  font-size: 0.92rem;
}

.gusto img, .gusto__icono {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.gusto__icono { display: grid; place-items: center; background: var(--color-blanco); color: var(--color-magenta); }
.gusto__icono svg { width: 1.1rem; height: 1.1rem; }

.gusto button {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-blanco);
  color: var(--color-morado);
  cursor: pointer;
}

.gusto button svg { width: 0.95rem; height: 0.95rem; }
.gusto button:hover { background: var(--color-magenta); color: var(--color-blanco); }

.gustos__vacio {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  border: 2px dashed rgba(112, 48, 136, 0.2);
  color: var(--texto-suave);
  font-size: 0.95rem;
}

.gustos__vacio[hidden] { display: none; }

.boton--whatsapp { justify-content: center; width: 100%; font-size: 1.2rem; padding-block: 1.15rem 1.05rem; margin-top: 0.4rem; }

.cotiza__listo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: 20px;
  background: var(--mantequilla);
  color: var(--color-texto);
}

.cotiza__listo[hidden] { display: none; }
.cotiza__listo svg { width: 2.2rem; height: 2.2rem; color: var(--color-magenta); flex: none; }
.cotiza__listo p { margin: 0; line-height: 1.5; }
.cotiza__listo a, .cotiza__directo a { color: var(--color-magenta); font-weight: 800; }
.cotiza__directo { margin: 1.4rem 0 0; color: var(--texto-suave); text-align: center; }

/* Globos que se escapan al enviar (baile.js) */
.globo-libre {
  position: fixed;
  z-index: 150;
  width: 3.4rem;
  height: 3.4rem;
  pointer-events: none;
}

.globo-libre svg { width: 100%; height: 100%; }
.globo-libre { --duo: 1; }

/* --- 10 Cierre: la muñeca grande que "dice" la invitación ---------------------- */

.cierre {
  --feston: var(--color-rosa-fondo);
  /* Alto de la muñeca; el globo se ubica a la altura de su boca (~1/3 desde
     arriba del render) usando la misma medida. */
  --h: min(clamp(520px, 54vw, 900px), 100dvh - 8rem); /* completa en pantalla, sin cortes */
  position: relative;
  display: grid;
  /* Mitad y mitad: con 0.9fr la muñeca se quedaba chica (su ancho de columna
     la achicaba antes que su alto) y la sección se llenaba de aire. */
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  align-items: end;
  gap: clamp(0.5rem, 2vw, 2rem);
  /* El padding de arriba tiene que dejar pasar el corte de ondas (hasta 59 px),
     o los lóbulos se montan sobre la muñeca y el globo. */
  padding: clamp(3.75rem, 5vw, 4.5rem) max(1.25rem, (100% - 1400px) / 2) 2rem;
  background:
    radial-gradient(circle at 28% 62%, #FFFFFF 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #FFF4DA 0%, #FFE3F0 100%);
  overflow: hidden;
}

/* Sol de rayos dorados detrás de ella, girando muy lento: fiesta y foco. */
.cierre__sol {
  position: absolute;
  left: 27%;
  top: 60%;
  width: 150vmax;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(248, 176, 24, 0.2) 0deg 7deg, rgba(248, 176, 24, 0) 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 58%);
  mask-image: radial-gradient(circle, #000 12%, transparent 58%);
  animation: girar 90s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes girar { to { rotate: 360deg; } }

/* El contenedor ocupa su columna entera (antes justify-self: center lo encogia
   al tamaño de la imagen, y la imagen pedia un % de el: sin la imagen cargada
   todo medía 0 x 0 y al llegar la seccion saltaba 54 px). La entrada de GSAP
   anima ESTE contenedor, creciendo desde los pies; el flote CSS vive en la
   imagen. Separados, GSAP ya no lee ni congela el `translate` del flote. */
.cierre__muneca { width: 100%; min-width: 0; max-width: 100%; transform-origin: 50% 100%; }

.cierre__render {
  display: block;
  /* El tamaño se manda por ANCHO (la proporción del render es 0.9): así la
     caja mide exactamente lo que mide la imagen. Antes se fijaba el alto y,
     cuando el ancho de columna la achicaba, quedaban ~217 px de caja vacía
     que estiraban la sección sin que se viera nada. */
  width: min(100%, calc(var(--h) * 0.9));
  height: auto;
  /* Proporcion fija del render: la caja tiene su alto real antes de que la
     imagen llegue, asi nada salta al cargarla. */
  aspect-ratio: 868 / 964;
  max-width: 100%;
  margin: 0 auto;
  filter: var(--sombra-flotar);
  /* Solo sube y baja (sin girar): girada, la esquina de los globos asomaba del borde. */
  animation: flotar-recto 6s ease-in-out infinite;
}

@keyframes flotar-recto {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

.cierre__globo {
  position: relative;
  justify-self: start;
  align-self: end;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  max-width: 560px;
  margin-bottom: calc(var(--h) * 0.34);
  padding: clamp(1.8rem, 3.6vw, 3rem);
  border-radius: 48px;
  background: var(--color-blanco);
  box-shadow: 0 30px 34px -14px rgba(110, 16, 72, 0.2);
}

/* La colita del globo, hacia su boca (abajo a la izquierda). Se ancla por
   ARRIBA: al bajar el globo y crecer la muñeca, la boca queda por encima del
   centro del globo, y anclada abajo la colita apuntaba al vacío. */
.cierre__globo::before {
  content: "";
  position: absolute;
  left: -46px;
  top: 48%;
  width: 78px;
  height: 64px;
  background: var(--color-blanco);
  clip-path: polygon(100% 0%, 100% 100%, 0% 88%);
}

.cierre__pregunta {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1.02;
  color: var(--color-magenta);
  text-wrap: balance;
}

.cierre__texto { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--texto-suave); max-width: 38ch; }
.cierre__boton { font-size: 1.2rem; padding: 1.1rem 2rem 1rem; }

@media (max-width: 900px) {
  /* La muñeca (proporción 0.9) no puede ser más ancha que la pantalla. */
  .cierre { --h: min((100vw - 2.5rem) / 0.9, 520px); grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 4.5rem; }
  .cierre__globo { max-width: 100%; }
  .cierre__globo { order: -1; justify-self: center; margin-bottom: 1.6rem; text-align: center; justify-items: center; }
  .cierre__globo::before { left: 50%; top: auto; bottom: -40px; width: 60px; height: 44px; translate: -50% 0; clip-path: polygon(0 0, 100% 0, 30% 100%); }
  .cierre__sol { left: 50%; top: 72%; }
}

@media (prefers-reduced-motion: reduce) {
  .cierre__sol, .cierre__render { animation: none; }
}

/* --- Pie ------------------------------------------------------------------------ */

.pie {
  --feston: #FFE3F0;
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 6rem max(1.25rem, (100% - 1240px) / 2) 2.5rem;
  background: var(--color-morado);
  color: rgba(255, 255, 255, 0.86);
}

.pie__marca img { height: 6rem; width: auto; }
.pie__marca p { margin: 1rem 0 0; }
.pie__titulo { margin: 0 0 0.8rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-dorado); }

.pie__contacto { display: grid; gap: 0.6rem; }
.pie__contacto a { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-blanco); text-decoration: none; font-weight: 700; }
.pie__contacto a:hover { color: var(--color-dorado); }
.pie__contacto svg { width: 1.4rem; height: 1.4rem; }

.pie__redes div { display: flex; gap: 0.6rem; }

.red-mini {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-blanco);
  transition: background 0.25s, transform 0.3s var(--ease-out);
}

.red-mini svg { width: 1.5rem; height: 1.5rem; }
.red-mini:hover { background: var(--color-magenta); transform: translateY(-3px); }

.pie__render { position: absolute; right: max(1rem, (100% - 1300px) / 2); top: -6.5rem; height: 170px; width: auto; filter: drop-shadow(0 22px 12px rgba(40, 6, 40, 0.18)); }

.pie__credito { grid-column: 1 / -1; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; text-align: center; color: rgba(255, 255, 255, 0.6); }

/* --- Flotantes ------------------------------------------------------------------ */

.flotante-wa {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 3.9rem;
  height: 3.9rem;
  border-radius: 50%;
  background: var(--color-magenta);
  color: var(--color-blanco);
  box-shadow: var(--sombra-magenta);
  transition: transform 0.4s var(--ease-out), opacity 0.4s;
}

.flotante-wa svg { width: 2rem; height: 2rem; }
.flotante-wa { --duo: 0.35; }
.flotante-wa:hover { transform: scale(1.08) rotate(-6deg); }

body:not(.pasado-hero) .flotante-wa,
body:not(.pasado-hero) .mi-seleccion { opacity: 0; transform: translateY(1.5rem); pointer-events: none; }

.mi-seleccion {
  position: fixed;
  right: 6rem;
  bottom: 1.6rem;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.8rem 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--color-blanco);
  color: var(--color-morado);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(112, 48, 136, 0.24);
  animation: aparece 0.5s var(--ease-out);
}

.mi-seleccion[hidden] { display: none; }
.mi-seleccion svg { width: 1.3rem; height: 1.3rem; color: var(--color-magenta); }
.mi-seleccion { --duo: 1; }
.mi-seleccion__n { display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 0.4rem; border-radius: 999px; background: var(--color-magenta); color: var(--color-blanco); font-size: 0.95rem; }
.mi-seleccion.is-latido { animation: latido 0.5s var(--ease-out); }

@keyframes aparece { from { opacity: 0; transform: translateY(1rem) scale(0.9); } }

/* --- Celular ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .bienvenida, .nosotros, .cotiza { grid-template-columns: 1fr; }
  .bienvenida__visual { order: -1; min-height: 320px; }
  .transformacion__cabecera { flex-direction: column; align-items: flex-start; }
  .transformacion__flechas { display: none; }
  .sala__marco { aspect-ratio: 4 / 3; border-radius: 46% 46% 22px 22px / 14% 14% 22px 22px; }
  .sala__tabs { justify-content: flex-start; }
  .galeria__cabecera { grid-template-columns: 1fr; }
  .galeria__cabecera .render { display: none; }
  .nosotros__foto { width: min(88%, 380px); }
  .sticker--1 { right: -4%; }
  .sticker--2 { left: -4%; }
  .pasos { grid-template-columns: 1fr; gap: 2.5rem; }
  .paso { margin-top: 0 !important; }
  .como__linea { display: none; }
  .cotiza__muneca { min-height: 300px; }
  .ventana { width: min(86%, 340px); }
  .pie { grid-template-columns: 1fr; }
  .render--beso, .render--mira-arriba, .render--celebra { height: 130px; }
  .render--celebra { top: auto; bottom: 2rem; }
}

@media (max-width: 560px) {
  .eventos__cabecera { grid-template-columns: 1fr; }
  .eventos__cabecera .render { display: none; }
  .campos-2 { grid-template-columns: 1fr; }
  .formulario > .campo--mitad, .formulario > .campo--tercio { grid-column: 1 / -1; }
  .evento { --y: 0rem !important; }
  .nosotros__equipo { flex-direction: column; align-items: flex-start; }
  .mi-seleccion { right: 5.4rem; bottom: 1.5rem; }
  .visor__figura { padding: 4rem 1rem 6rem; }
  .visor__prev, .visor__next { top: auto; bottom: 1.5rem; transform: none; }
  .visor__prev:hover, .visor__next:hover { transform: scale(1.06); }
}

/* --- Movimiento reducido ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .redes__pista, .render { animation: none; }
  .corazon.is-latido, .mi-seleccion, .mi-seleccion.is-latido { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* Lenis maneja el scroll suave: el del navegador se apaga para que no peleen. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.galeria { position: relative; }

/* Las muñecas que "llegan" esperan fuera de pantalla antes de entrar: sin
   esto estiraban la página a lo ancho en celular. clip (no hidden) no crea
   un contenedor de scroll, así que no afecta al scroll ni al pin. */
body { overflow-x: clip; }
.bienvenida, .cotiza { overflow-x: clip; overflow-y: visible; }

/* --- Brillitos al azar (js/brillos.js) ------------------------------------
   Capa detrás del contenido: la sección aísla su apilado y la capa va en
   z-index -1 (encima del fondo de la sección, debajo de todo lo demás). */
.bienvenida, .eventos, .transformacion, .galeria, .frase, .nosotros, .como, .redes, .cotiza, .cierre, .pie { isolation: isolate; }

.brillos { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.brillo {
  position: absolute;
  width: var(--t, 14px);
  height: var(--t, 14px);
  opacity: 0;
  transform: scale(0);
  animation: brillar 6s ease-in-out infinite;
  animation-play-state: paused;
}

/* La chispa (estrella de 4 puntas, gordita para que se lea aun chica)… */
.brillo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #fff 0 24%, var(--c, #F8B018) 55%);
  clip-path: polygon(50% 0%, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0% 50%, 36% 36%);
}

/* …y su halo suave, redondo, del mismo color. */
.brillo::after {
  content: "";
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c, #F8B018) 40%, transparent) 0%, transparent 62%);
}

.is-brillando .brillo { animation-play-state: running; }

/* Encendida solo un tercio del ciclo: el resto del tiempo descansa (así se
   ven pocas a la vez y parecen aparecer al azar). */
@keyframes brillar {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  14% { opacity: var(--o, 0.7); transform: scale(1) rotate(45deg); }
  32% { opacity: 0; transform: scale(0.15) rotate(90deg); }
  100% { opacity: 0; transform: scale(0) rotate(90deg); }
}


/* "Saltar al contenido": invisible hasta que alguien navega con el teclado. */
.saltar {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 400;
  padding: 0.8rem 1.4rem 0.7rem;
  border-radius: 999px;
  background: var(--color-magenta);
  color: var(--color-blanco);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.25s var(--ease-out);
}

.saltar:focus { top: 1rem; }