/* ==========================================================================
   FONDO ANIMADO: PÉTALOS DE CEMPASÚCHIL
   ==========================================================================

   ╔══════════════════════════════════════════════════════════════════════╗
   ║  AQUÍ SE MODIFICAN LOS PÉTALOS (solo cambia los valores de abajo)    ║
   ╚══════════════════════════════════════════════════════════════════════╝

   --opacidad-petalos : transparencia. 1 = sólido, .5 = 50%, .25 = muy tenue
   --escala-petalos   : tamaño. 1 = 100%, .5 = 50%, 1.5 = 150%
   --zona-petalos     : qué parte de cada lado ocupan los pétalos.
                        1  = 20% a la izquierda y 20% a la derecha
                        .5 = 10% a la izquierda y 10% a la derecha
   --color-petalo-1/2 : colores del degradado del pétalo
   --z-petalos        : capa. Debe ser MENOR que --z-header
   --z-header         : capa del header. Debe ser MAYOR que --z-petalos
   -------------------------------------------------------------------------- */

:root{
  /* ---------- ESCRITORIO (más de 450px) ---------- */
  --opacidad-petalos: .5;          /* ← TRANSPARENCIA (50%) */
  --escala-petalos:   1;           /* ← TAMAÑO en escritorio (1 = 100%) */
  --zona-petalos:     1;           /* ← ANCHO DE ZONA en escritorio (1 = 20% por lado) */

  --color-petalo-1:   #ffd166;     /* ← color claro del pétalo */
  --color-petalo-2:   #ff9a1f;     /* ← color naranja del pétalo */

  --z-petalos:        9990;        /* ← capa de los pétalos */
  --z-header:         9999;        /* ← capa del header (siempre mayor) */

  /* Variables que ya tenías */
  --noche:#FFF;
  --noche-2:#FFF;
  --cempasuchil:#FFB76B;
  --rosa:#FFB76B;
}

/* ---------- MÓVIL (450px o menos) ----------
   Para cambiar a partir de qué ancho aplica, modifica "450px" aquí
   (y solo aquí; es el único breakpoint de este archivo). */
@media (max-width:450px){
  :root{
    --escala-petalos: .5;          /* ← TAMAÑO en móvil (.5 = reducido 50%) */
    --zona-petalos:   .5;          /* ← ANCHO DE ZONA en móvil (.5 = 10% por lado) */
    /* --opacidad-petalos: .5;        descomenta si quieres otra transparencia en móvil */
  }
}

/* ==========================================================================
   A PARTIR DE AQUÍ NO ES NECESARIO MODIFICAR NADA
   ========================================================================== */

*{box-sizing:border-box}

/* ===== Header por encima de los pétalos =====
   Se aplica al contenedor del header dinámico. No cambia su posición ni su
   diseño: solo lo coloca en una capa superior a la de los pétalos. */
.dinamicHeader{
  position:relative;
  z-index:var(--z-header);
}

/* ===== Capa fija: sigue al usuario al hacer scroll ===== */
.capa-petalos{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;            /* no bloquea clics */
  z-index:var(--z-petalos);       /* sobre el contenido, debajo del header y del chat */
}

/* ===== Pétalos (caen desde arriba) ===== */
.capa-petalos .petal{
  display:block;
  position:absolute;
  top:-5%;
  /* Lado izquierdo (los primeros 8): la posición se comprime según --zona-petalos */
  left:calc(var(--x) * var(--zona-petalos));
  width:calc(var(--s) * 1.6 * var(--escala-petalos));
  height:calc(var(--s) * 2.2 * var(--escala-petalos));
  background:radial-gradient(circle at 30% 30%, var(--color-petalo-1), var(--color-petalo-2));
  border-radius:60% 0 60% 0;
  opacity:var(--opacidad-petalos);
  animation:cae var(--d) linear infinite;
  animation-delay:var(--r);
}

/* Lado derecho (del pétalo 9 en adelante): se ancla al borde derecho.
   Si agregas pétalos en el HTML, mantén el orden: primero los de la
   izquierda (hasta el 8) y después los de la derecha. */
.capa-petalos .petal:nth-child(n+9){
  left:calc(100% - (100% - var(--x)) * var(--zona-petalos));
}

@keyframes cae{
  from{transform:translate(0,0) rotate(0deg)}
  to{transform:translate(calc(var(--dx) * var(--zona-petalos)),115vh) rotate(540deg)}
}

/* Respeta a quien tiene activado "reducir movimiento" */
@media (prefers-reduced-motion:reduce){
  .capa-petalos .petal{animation:none;top:var(--y)}
}

/* ===== Contenedor de contenido ===== */
.hero{
  position:unset;
  z-index:1;
  min-height:100vh;
  display:inline;
  place-content:center;
  justify-items:center;
}