/* Pasión Dejando Huellas — tokens + base */

/* Fuentes redondeadas servidas desde el propio sitio (subset latino: tildes y ñ incluidas). */
@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/baloo2-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --color-magenta: #E01078;
  --color-morado: #703088;
  --color-dorado: #F8B018;
  --color-rosa-fondo: #FCE4EF;
  --color-texto: #2B1830;
  --color-blanco: #FFFFFF;

  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --nav-height: 5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-texto);
  background: var(--color-rosa-fondo);
}

img { max-width: 100%; display: block; }

/* Oculta visualmente pero deja accesible (lectores de pantalla, SEO) —
   para el H1 del hero, que por pedido del cliente no debe verse en pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Nav --- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  background: transparent;
  z-index: 100;
  transition: background 0.3s var(--ease-out);
}

/* Fuera de la portada el fondo deja de ser oscuro/collage, así que el nav
   gana un fondo sólido apenas se hace scroll más allá del hero. */
.nav--scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(43, 24, 48, 0.08);
}

.nav--scrolled .nav__links a {
  color: var(--color-texto);
  text-shadow: none;
}

.nav__logo img { height: 2.75rem; }

.nav__links {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* El menú se apoya en la cinta de nubes (blanca), no en la barra morada de
   antes: en blanco sobre blanco era ilegible. Va en el morado de la marca,
   con un halo claro por si una nube deja ver el collage detrás. */
.nav__links a {
  color: var(--color-morado);
  text-decoration: none;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.85);
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s var(--ease-out);
}

.nav__links a.is-active { border-bottom-color: currentColor; }

/* --- Portada / stage --- */

.portada {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-rosa-fondo) 0%, #fff 100%);
}

.portada__stage {
  position: absolute;
  inset: 0;
}

/* Franjas "ventana" arriba/abajo — enmarcan la vista y disimulan que el
   video fuente no tiene margen (globos/pies ya tocan el borde del cuadro
   original). Placeholder de color plano; arte real pendiente (banner de
   marca arriba, cinta de fiesta arqueada abajo). */
.portada__banner {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--color-blanco);
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 var(--space-3);
  /* Es un marco decorativo, nunca debe capturar el mouse: la franja de
     arriba (21% de alto) tapaba por completo el boton "arriba" (top:8%,
     z-index mas bajo) y ningun hover/click le llegaba. */
  pointer-events: none;
}

/* Cinta de nubes del hero (pedido del usuario: "una sola nube esponjosa como
   aplanada que hace de cinta arriba"). Era una barra morada plana.

   El dibujo es del usuario: `recursos/cinta de nubes para hero.svg`, veinte
   copias de la nube de la marca solapadas hasta formar UNA masa. Aquí va
   recortada al contenido (assets/fondos/cinta-nubes-hero.svg) y estirada al
   ancho de la pantalla, así que se aplana sola en monitores anchos — que es
   justo el efecto pedido.

   Va como imagen y no como máscara: la nube tiene su propio degradado (rosa
   arriba, blanco abajo) y así conserva el volumen. */
.portada__banner--top {
  top: 0;
  --cinta-alto: clamp(96px, 15vh, 215px);
  height: var(--cinta-alto);
  /* Ancho del dibujo: nunca MENOS que su proporcion natural (1278.6 x 202 =
     6.33:1). En pantallas anchas se estira y se aplana (el efecto pedido); en
     celular, estirada al 100% se comprimia a la mitad y las nubes quedaban
     flacas y deformes (reporte del usuario). Ahi mantiene su proporcion y se
     recorta por los lados, centrada. */
  background: url('../assets/fondos/cinta-nubes-hero.svg') center top / max(100%, calc(var(--cinta-alto) * 6.33)) 100% no-repeat;
  font-size: clamp(0.9rem, 2vw, 1.4rem);
}

/* Cinta real (recursos/) — elemento flotante fuera de cualquier sección (ver
   comentario en index.html): se posiciona respecto al documento, no respecto
   al hero, así el overflow:hidden de portada/transformación nunca la recorta.
   "top: 100vh" es justo el borde entre el hero (100vh de alto) y la sección
   siguiente; translateY(-50%) la centra ahí, mitad tapando la línea del
   defecto de la muñeca, mitad ya sobre la sección de abajo. width/height en
   vw/vh (no % ni auto) para que se aplaste horizontalmente, igual que hizo el
   usuario en su propia simulación. */
.portada__cinta {
  position: absolute;
  top: 100vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 9vh;
  max-width: none;
  z-index: 200;
  pointer-events: none;
}

.portada__titulo {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--color-morado);
  z-index: 5;
  pointer-events: none;
}

/* --- capas placeholder --- */

.capa {
  position: absolute;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  border: 2px dashed rgba(0, 0, 0, 0.25);
  will-change: transform;
}

/* --- capas del escenario (2026-09-27) -------------------------------------
   Arte del usuario ("fondo capas/"), repartido por él en tres planos, con la
   muñeca de cuarto. Reemplazan al fondo de prueba desenfocado y a los
   marcadores de maquetación (globos, cilindros, standees, poses).
   El reparto de profundidad va en index.html (data-depth); aquí solo cómo se
   dibuja cada imagen dentro de su caja. */
.capa--fondo,
.capa--sombra,
.capa--mesa-dulce,
.capa--frente {
  border: none;
  border-radius: 0;
}

.capa__arte {
  width: 100%;
  height: 100%;
  /* "contain" + anclado abajo: la pieza se apoya en el piso de la escena y
     nunca se deforma, cambie como cambie la proporción de la pantalla. */
  object-fit: contain;
  object-position: bottom center;
  /* Son decorado: el mouse tiene que llegar a los objetos del hero y a ella. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Los dos planos que hacen de escenario completo sí llenan el marco (su caja
   es más grande que el escenario a propósito: ese excedente es lo que permite
   el pan sin que asome el borde del dibujo). */
.capa__arte--cubre { object-fit: cover; }
/* LAS TRES CAPAS DEL ESCENARIO COMPARTEN LIENZO, CAJA Y RECORTE. Es lo único
   que garantiza que nada se despegue del piso ni enseñe su corte: el navegador
   las escala y las recorta exactamente igual. Lo que las separa es solo la
   VELOCIDAD a la que se deslizan (data-depth en index.html). */
.capa--fondo .capa__arte,
.capa--mesa-dulce .capa__arte,
.capa--frente .capa__arte { object-position: center; }

/* Luz por profundidad: cuanto más al fondo, un punto menos de brillo. Es lo que
   hace que la muñeca y los textos se adelanten, y de paso disimula el borde de
   su recorte, que sobre fondos muy iluminados se nota (pedido del usuario,
   2026-09-27). Es apenas un velo: nada de oscurecer la escena. Un número por
   capa; 1 = sin tocar. */
.capa--fondo .capa__arte      { filter: brightness(var(--luz-fondo, 0.86)); }
.capa--mesa-dulce .capa__arte { filter: brightness(var(--luz-mesa, 0.93)); }
.capa--frente .capa__arte     { filter: brightness(var(--luz-frente, 0.97)); }
/* <picture> es en línea: sin esto la imagen no hereda el alto de la capa. */
.capa > picture { display: block; width: 100%; height: 100%; }

/* En celular el escenario apaisado se recorta a una pared lisa: el fondo pasa a
   su versión vertical (ver <picture> en index.html), que ya trae su propia
   decoración. La mesa y el primer plano se ocultan: están dibujados sobre el
   lienzo apaisado y en vertical saldrían reventados de tamaño y descolocados
   (pendiente: versiones verticales de esas dos capas). */
@media (max-width: 700px) {
  .capa--mesa-dulce { display: none; }
  /* El primer plano sí se queda, pero entero y apoyado abajo: así no hay nada
     recortado que pueda enseñar su corte, y el celular no se queda con una
     pared pelada. */
  .capa--frente .capa__arte {
    object-fit: contain;
    object-position: bottom center;
  }
}

/* El arte es claro justo donde se para la muñeca y su contorno empezaba a
   notarse — el fondo de prueba era oscuro al centro precisamente por eso
   (ver CLAUDE.md > pipeline de matte). Viñeta morada de la paleta, muy tenue:
   oscurece el arco detrás de ella y deja los lados con toda su luz.
   Para apagarla: --sombra-escenario: 0. */
.capa--sombra {
  --sombra-escenario: 0.42;
  background: radial-gradient(58% 46% at 50% 66%,
      rgba(112, 48, 136, var(--sombra-escenario)) 0%,
      rgba(112, 48, 136, calc(var(--sombra-escenario) * 0.5)) 45%,
      rgba(112, 48, 136, 0) 72%);
}
/* z-index 55: por encima de las franjas "ventana" (z-index 50) -- esas
   franjas existen para tapar el defecto de borde de la capa de globos, no
   el de la muñeca (ella ya tiene su propio desvanecido, ver .muneca-frame
   mas abajo). Sin este z-index, la franja de arriba pintaba encima de la
   cabeza/pelo durante "mirar arriba" y la animacion se veia tapada aunque
   el codigo si la estuviera reproduciendo. */
.capa--muneca     { background: rgba(224, 16, 120, 0.55); cursor: pointer; overflow: visible; z-index: 55; }

/* "Foco" del saltito (lo enciende/apaga js/portada.js): oscurece todo lo que
   queda por debajo de la muñeca —fondo, capas y la franja de arriba
   (z-index 50)— con un viñeteado: apenas detrás de ella, más hacia los
   bordes. Tinte morado muy oscuro (de la paleta), no negro puro. */
.portada__foco {
  position: absolute;
  inset: 0;
  z-index: 54;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 42% 62% at 50% 58%,
    rgba(24, 6, 30, 0.12) 0%, rgba(24, 6, 30, 0.30) 55%, rgba(24, 6, 30, 0.55) 100%);
}

.muneca-frame {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* -61% en vez de -50%: el personaje no queda centrado dentro de su propio
     cuadro (recorte del video fuente), así que se corrige a ojo para que la
     cara —lo que el público mira— quede al centro del hero, no el cuadro. */
  transform: translateX(-61%);
  height: 100%;
  max-width: none;
  width: auto;
  display: none;
  pointer-events: none;
  /* Colchón extra arriba y abajo: el video fuente no tiene margen en
     ninguno de los dos bordes (pelo arriba, pies abajo, ya tocan el borde
     del cuadro original), así que ambos extremos se desvanecen a
     transparente en vez de cortar en seco — si el parallax la mueve un
     poco, se disuelve en vez de mostrar el corte. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.muneca-frame.is-visible { display: block; }

/* --- modo demo: oculta las guías de maquetación sin quitarlas --- */

/* Para mostrarle la idea al cliente sin ver cuadros de colores, bordes
   punteados, etiquetas ni el HUD de depuración: activar con
   <body class="modo-demo"> en index.html. Las capas guía siguen existiendo
   con su tamaño/posición real (el parallax sigue funcionando igual) — solo
   se vuelven invisibles. Quitar la clase para recuperarlas mientras se
   sigue maquetando. La capa de fondo de prueba y el personaje NO se tocan. */
body.modo-demo .capa {
  border-color: transparent;
  color: transparent;
}

body.modo-demo .capa--muneca {
  background: transparent;
  background-image: none;
}

body.modo-demo .debug-hud { display: none; }

/* --- objetos del hero (reemplazan a los botones de mirada) ----------------------
   La estrella, el globo, el regalo y el logo. Lógica en js/objetos-hero.js.
   Aprobado por el usuario en herramientas/maqueta-hero-objetos.html.

   Tres niveles, cada uno con UNA sola responsabilidad de movimiento (lección
   del cierre: si dos animaciones tocan transform/translate del mismo elemento,
   se pisan):
     .objeto-hero          -> solo posición
     .objeto-hero__cuerpo  -> flota (translate)
     .objeto-hero__disco   -> reacciones al tocar (transform)
   Y todo medido con --tam, no con alturas en %: dentro de un <button> el alto
   en % de su contenido no se resuelve (el icono caía a 150 px y estiraba el
   disco en óvalo). */

/* La barra de navegación ocupa todo el ancho arriba: mientras está sobre el
   hero (transparente) no debe tapar los clics del logo centrado. */
.nav:not(.nav--scrolled) { pointer-events: none; }
.nav a, .nav button { pointer-events: auto; }
/* El logo de la barra pasa al centro de la cinta de nubes (es el objeto
   "arriba"); vuelve a la barra al bajar de la portada. */
.nav:not(.nav--scrolled) .nav__logo { visibility: hidden; }

.objeto-hero {
  --tam: clamp(66px, 5.6vw, 96px);
  display: block;
  position: absolute;
  z-index: 70;
  width: var(--tam);
  height: var(--tam);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.objeto-hero:focus-visible { outline: 3px solid var(--color-dorado); outline-offset: 10px; border-radius: 50%; }

.objeto-hero__cuerpo {
  position: absolute;
  inset: 0;
  animation: obj-flotar 3.6s ease-in-out infinite;
}
.objeto-hero--globo .objeto-hero__cuerpo { animation-duration: 4.2s; animation-delay: -1.2s; }
.objeto-hero--regalo .objeto-hero__cuerpo { animation-duration: 3.2s; animation-delay: -2s; }

/* Halo dorado que respira: es lo que dice "tócame" sin palabras. */
.objeto-hero__halo {
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 176, 24, 0.75) 0%, rgba(248, 176, 24, 0.3) 36%, rgba(248, 176, 24, 0) 68%);
  animation: obj-respirar 2.8s ease-in-out infinite;
  pointer-events: none;
}

.objeto-hero__disco {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tam);
  height: var(--tam);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff 52%, var(--color-rosa-fondo) 100%);
  box-shadow: 0 12px 24px rgba(110, 16, 72, 0.3), inset 0 -7px 14px rgba(224, 16, 120, 0.13);
  transition: transform 0.35s var(--ease-out);
}

.objeto-hero__icono { width: calc(var(--tam) * 0.6); height: calc(var(--tam) * 0.6); fill: currentColor; }
.objeto-hero--estrella .objeto-hero__icono { color: var(--color-dorado); --duo: 0.5; }
.objeto-hero--regalo .objeto-hero__icono { color: var(--color-magenta); --duo: 0.28; }
.objeto-hero--globo .objeto-hero__icono { color: var(--color-morado); --duo: 0.3; }

/* Chispa que titila en una esquina. */
.objeto-hero__chispa {
  position: absolute;
  top: -12%;
  right: -10%;
  width: calc(var(--tam) * 0.38);
  height: calc(var(--tam) * 0.38);
  fill: var(--color-dorado);
  --duo: 0.6;
  animation: obj-titilar 2.4s ease-in-out infinite;
  pointer-events: none;
}
.objeto-hero--globo .objeto-hero__chispa { animation-delay: -0.9s; left: -10%; right: auto; }
.objeto-hero--regalo .objeto-hero__chispa { animation-delay: -1.6s; }

/* Anillo que estalla al tocar. */
.objeto-hero__estallido {
  position: absolute;
  inset: 0;
  border: 3px dotted var(--color-dorado);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

/* "¡Tócame!": en el objeto del área donde está el mouse, o cuando la muñeca insiste. */
.objeto-hero__pista {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 12px);
  white-space: nowrap;
  background: var(--color-magenta);
  color: #fff;
  font: 700 0.82rem/1 var(--font-display);
  padding: 0.42rem 0.75rem 0.32rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(110, 16, 72, 0.28);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* Estados */
.objeto-hero.is-apuntado .objeto-hero__disco,
.objeto-hero.is-llamando .objeto-hero__disco { transform: scale(1.1); }
.objeto-hero.is-llamando .objeto-hero__halo { animation-duration: 1s; }
.objeto-hero.is-llamando .objeto-hero__pista,
.objeto-hero.is-apuntado .objeto-hero__pista { opacity: 1; transition-delay: 0.25s; }

.objeto-hero.is-activo .objeto-hero__estallido { animation: obj-estallar 0.7s var(--ease-out); }
.objeto-hero--estrella.is-activo .objeto-hero__disco { animation: obj-girar-estrella 0.9s var(--ease-out) forwards; }
.objeto-hero--regalo.is-activo .objeto-hero__disco { animation: obj-saltar-regalo 0.75s var(--ease-out) forwards; }
.objeto-hero--logo.is-activo .objeto-hero__logo { animation: obj-latido 0.8s var(--ease-out); }
/* El globo se suelta de verdad: sube y se va. Vuelve a su sitio al cerrar. */
.objeto-hero--globo.is-activo .objeto-hero__disco { animation: obj-volar-globo 1.5s cubic-bezier(0.5, 0, 0.9, 0.6) forwards; }
.objeto-hero--globo.is-activo .objeto-hero__halo,
.objeto-hero--globo.is-activo .objeto-hero__chispa { opacity: 0; transition: opacity 0.2s; }
.objeto-hero.is-vuelve .objeto-hero__disco { animation: obj-reaparecer 0.5s var(--ease-out); }

/* Logo centrado en la cinta de nubes = objeto "arriba". */
.objeto-hero--logo {
  --logo-alto: clamp(58px, 8vh, 90px);
  left: 50%;
  top: 14px;
  width: auto;
  height: var(--logo-alto);
  transform: translateX(-50%);
}
.objeto-hero--logo .objeto-hero__cuerpo { position: relative; height: var(--logo-alto); }
.objeto-hero--logo .objeto-hero__halo { inset: -34% -22%; }
.objeto-hero__logo {
  display: block;
  height: var(--logo-alto);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 6px 10px rgba(110, 16, 72, 0.25));
}

/* Posiciones en escritorio (relativas al hero). */
.objeto-hero--estrella { right: 13%; top: 37%; }
.objeto-hero--globo { left: 13%; top: 47%; }
.objeto-hero--regalo { left: 35%; bottom: 10%; }

/* --- lo que dice la muñeca --------------------------------------------------------
   Oculto por defecto: aparece suave (fundido + sube un poco) y se va solo.
   Mientras no se ve, no captura clics. */
.dialogo-hero { position: absolute; z-index: 72; left: 58%; top: 18%; pointer-events: none; }
.dialogo-hero.is-visible { pointer-events: auto; }
.dialogo-hero__caja {
  position: relative;
  max-width: min(330px, 80vw);
  background: #fff;
  color: var(--color-morado);
  font: 700 clamp(1.08rem, 1.45vw, 1.38rem)/1.15 var(--font-display);
  padding: 0.95rem 1.25rem 0.85rem;
  border-radius: 28px;
  box-shadow: 0 16px 32px rgba(110, 16, 72, 0.24);
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.45s ease, translate 0.5s var(--ease-out);
}
.dialogo-hero.is-visible .dialogo-hero__caja { opacity: 1; translate: 0 0; }
.dialogo-hero__caja::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -19px;
  width: 28px;
  height: 22px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 12% 100%);
}
.dialogo-hero__texto { margin: 0; padding-right: 0.4rem; }
.dialogo-hero__info {
  margin: 0.45rem 0 0;
  font: 700 1rem/1.35 var(--font-body);
  color: var(--color-texto);
}
.dialogo-hero__cta {
  display: inline-flex;
  margin-top: 0.7rem;
  background: var(--color-magenta);
  color: #fff;
  border-radius: 999px;
  padding: 0.6rem 1.05rem 0.5rem;
  font: 700 1rem/1 var(--font-display);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(224, 16, 120, 0.3);
}
.dialogo-hero__cerrar {
  position: absolute;
  top: 0.3rem;
  right: 0.45rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-rosa-fondo);
  color: var(--color-morado);
  font: 700 1.2rem/1 var(--font-body);
  cursor: pointer;
}
.dialogo-hero__info[hidden],
.dialogo-hero__cta[hidden],
.dialogo-hero__cerrar[hidden] { display: none; }

/* Guía de las áreas del mouse (solo con ?areas en la dirección). */
.guia-areas { position: absolute; inset: 0; z-index: 65; pointer-events: none; }
.guia-areas svg { display: block; width: 100%; height: 100%; }
.guia-areas line { stroke: rgba(255, 255, 255, 0.85); stroke-width: 2; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; }
.guia-areas__centro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}

/* Celular: la muñeca ocupa todo el ancho. Los objetos se van a los bordes (a
   la altura de los hombros y del vestido, nunca sobre la cara) y el logo baja
   para no chocar con "Cotiza tu evento". */
@media (max-width: 700px) {
  .objeto-hero { --tam: 62px; }
  .objeto-hero--logo { --logo-alto: 52px; top: 64px; }
  .objeto-hero--estrella { right: 4%; top: 47%; }
  .objeto-hero--globo { left: 4%; top: 60%; }
  .objeto-hero--regalo { right: 8%; left: auto; bottom: 16%; }
  /* left/right en vez de left:50% + translate: con left:50% la tarjeta solo
     tenía media pantalla de ancho y partía cada frase en dos líneas. */
  .dialogo-hero { left: 20px; right: 20px; top: 140px; display: flex; justify-content: center; }
  .dialogo-hero__caja { text-align: center; }
  .dialogo-hero__caja::after { left: 50%; margin-left: -14px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .dialogo-hero__texto { padding-right: 0; }
  /* Con la información abierta la tarjeta es alta: sobre la cabeza tapaba la
     cara. Baja al pie del hero, por encima de la cinta magenta (9vh de alto,
     centrada sobre el borde de abajo: tapa los últimos 4.5vh). */
  .dialogo-hero.is-info { top: auto; bottom: calc(4.5vh + 26px); }
  .dialogo-hero.is-info .dialogo-hero__caja::after { display: none; }
}

@keyframes obj-flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes obj-respirar { 0%, 100% { opacity: 0.65; scale: 0.92; } 50% { opacity: 1; scale: 1.08; } }
@keyframes obj-titilar { 0%, 100% { opacity: 0; scale: 0.4; rotate: 0deg; } 45% { opacity: 1; scale: 1; rotate: 45deg; } }
@keyframes obj-estallar { 0% { opacity: 1; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes obj-girar-estrella { 0% { transform: scale(1) rotate(0deg); } 45% { transform: scale(1.28) rotate(210deg); } 100% { transform: scale(1.1) rotate(360deg); } }
@keyframes obj-saltar-regalo {
  0% { transform: scale(1); }
  25% { transform: scale(1.16, 0.82); }
  50% { transform: translateY(-24px) scale(0.94, 1.1); }
  75% { transform: translateY(0) scale(1.08, 0.94); }
  100% { transform: scale(1.1); }
}
@keyframes obj-volar-globo {
  0% { transform: translateY(0) rotate(0deg); }
  18% { transform: translateY(10px) rotate(-5deg); }
  100% { transform: translateY(-115vh) rotate(9deg); }
}
@keyframes obj-reaparecer { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes obj-latido { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.14); } 65% { transform: scale(0.97); } }

@media (prefers-reduced-motion: reduce) {
  .objeto-hero__cuerpo, .objeto-hero__halo, .objeto-hero__chispa { animation: none; }
  .objeto-hero.is-activo .objeto-hero__disco,
  .objeto-hero.is-activo .objeto-hero__logo,
  .objeto-hero.is-activo .objeto-hero__estallido { animation: none; }
  .dialogo-hero__caja { transition: opacity 0.2s ease; translate: 0 0; }
}

/* --- HUD de depuración (solo desarrollo) --- */

.debug-hud {
  position: fixed;
  bottom: var(--space-2);
  left: var(--space-2);
  z-index: 999;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-family: monospace;
  font-size: 0.75rem;
  padding: var(--space-1) var(--space-2);
  border-radius: 0.5rem;
  line-height: 1.6;
  pointer-events: none;
}

/* Las secciones debajo del hero viven en css/secciones.css. */