/* ==========================================================================
   INVITACIÓN INFANTIL — TEMA "PIÑATA"
   Sin librerías, sin build. Un solo archivo de estilos.

   LA PALETA (regla 60-30-10)
   ---------------------------------------------------------------------------
   60%  crema           fondos. Deja que los colores fuertes resalten.
   30%  turquesa        títulos, iconos, detalles. Alegre pero calmado.
   10%  fucsia          SOLO botones y lo que convierte. Por eso jala el ojo.
        amarillo/lima/naranja/morado → papel picado y confeti nada más.

   CONTRASTE (medido, no al ojo — WCAG sobre el crema #FFF8EE)
   ---------------------------------------------------------------------------
   --tinta        #123B45  sobre crema = 11.4:1  → AAA
   --tinta-suave  #4A6E72  sobre crema =  5.3:1  → AA
   --turquesa     #127C77  sobre crema =  4.8:1  → AA
   --fucsia       #C92760  sobre crema =  5.1:1  → AA   (y blanco encima: 5.3:1)
   ========================================================================== */

:root{
  --papel:#FFF8EE;
  --papel-hondo:#FBEFE0;
  --tinta:#123B45;
  --tinta-suave:#4A6E72;

  --turquesa:#127C77;
  --turquesa-claro:#1FA8A0;
  --fucsia:#C92760;
  --fucsia-claro:#E8447E;

  --amarillo:#FFC53D;
  --naranja:#FF8A3D;
  --lima:#8CC63F;
  --morado:#8B5CF6;

  --f-display:"Fredoka", system-ui, sans-serif;
  --f-texto:"Nunito", system-ui, sans-serif;

  --sombra:0 6px 20px -6px rgba(18,59,69,.22);
  --sombra-alta:0 16px 40px -12px rgba(18,59,69,.32);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
/* Mientras la piñata está entera, la página de atrás no se mueve */
body.cerrado{ overflow:hidden; height:100dvh; }

img,svg,video,iframe{ max-width:100%; }
h1,h2{ margin:0; font-family:var(--f-display); font-weight:600; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }


/* ══════════════════════════════════════════════════════════════════════
   PAPEL PICADO
   Tira de banderines de colores. Se dibuja con un degradado a rayas al
   que se le recorta la forma de triángulo con una máscara: cero imágenes.
   ══════════════════════════════════════════════════════════════════════ */
.picado{
  height:26px;
  width:100%;
  background:repeating-linear-gradient(90deg,
    var(--turquesa-claro) 0 38px,
    var(--amarillo)       38px 76px,
    var(--fucsia-claro)   76px 114px,
    var(--lima)           114px 152px,
    var(--naranja)        152px 190px,
    var(--morado)         190px 228px);
  -webkit-mask:conic-gradient(from 135deg at 50% 0, #000 0 90deg, transparent 0) 50% 0/38px 100% repeat-x;
          mask:conic-gradient(from 135deg at 50% 0, #000 0 90deg, transparent 0) 50% 0/38px 100% repeat-x;
}


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — ROMPE LA PIÑATA
   Es lo primero que ve el invitado. Tres golpes y se abre la invitación.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  position:fixed; inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  padding:1.5rem;
  background:
    linear-gradient(180deg, #FFFDF8 0%, var(--papel) 45%, var(--papel-hondo) 100%);
  transition:opacity .7s ease, visibility .7s;
}
.entrada__papel{
  position:absolute; top:0; left:0; right:0;
  height:26px;
  background:repeating-linear-gradient(90deg,
    var(--turquesa-claro) 0 38px, var(--amarillo) 38px 76px,
    var(--fucsia-claro) 76px 114px, var(--lima) 114px 152px,
    var(--naranja) 152px 190px, var(--morado) 190px 228px);
  -webkit-mask:conic-gradient(from 135deg at 50% 0, #000 0 90deg, transparent 0) 50% 0/38px 100% repeat-x;
          mask:conic-gradient(from 135deg at 50% 0, #000 0 90deg, transparent 0) 50% 0/38px 100% repeat-x;
}
.entrada--rota{ opacity:0; visibility:hidden; pointer-events:none; }

.entrada__para{
  font-family:var(--f-texto);
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.entrada__nombre{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.4rem,6.5vw,2rem);
  color:var(--turquesa);
  margin-bottom:.4rem;
  text-align:center;
}

/* El mecate del que cuelga */
.cuerda{
  width:3px; height:30px;
  background:repeating-linear-gradient(180deg, #C7A77A 0 6px, #A98A5E 6px 12px);
  border-radius:2px;
}

.pinata{
  border:0; padding:0; background:none;
  cursor:pointer;
  width:min(74vw,300px);
  transform-origin:50% -34px;   /* gira desde el mecate, como colgada */
  animation:colgar 3.4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.pinata__svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 12px 18px rgba(18,59,69,.22)); }
@keyframes colgar{
  0%,100%{ transform:rotate(-5deg); }
  50%    { transform:rotate(5deg); }
}
/* Cada golpe: se sacude fuerte y regresa */
.pinata.golpe{ animation:sacudir .62s cubic-bezier(.36,.07,.19,.97); }
@keyframes sacudir{
  0%  { transform:rotate(0deg)   translateX(0); }
  18% { transform:rotate(-16deg) translateX(-10px) scale(.97); }
  42% { transform:rotate(13deg)  translateX(9px); }
  66% { transform:rotate(-8deg)  translateX(-5px); }
  85% { transform:rotate(4deg); }
  100%{ transform:rotate(0deg)   translateX(0); }
}
/* El último golpe: se rompe y se va */
.pinata.rota{ animation:reventar .8s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes reventar{
  0%  { transform:rotate(0) scale(1);            opacity:1; }
  25% { transform:rotate(-10deg) scale(1.16);    opacity:1; }
  100%{ transform:rotate(24deg) scale(.35) translateY(60px); opacity:0; }
}

.entrada__pista{
  margin-top:1.1rem;
  font-family:var(--f-display);
  font-weight:500;
  font-size:1.05rem;
  color:var(--fucsia);
}
.entrada__golpes{
  font-size:.85rem;
  color:var(--tinta-suave);
  letter-spacing:.16em;
  min-height:1.4em;
}


/* ══════════════════════════════════════════════════════════════════════
   LA INVITACIÓN
   ══════════════════════════════════════════════════════════════════════ */
.carta{
  opacity:0;
  transition:opacity .8s ease;
}
.carta.visible{ opacity:1; }

.seccion{
  padding:3.2rem 1.5rem;
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.seccion.alterna{
  max-width:none;
  background:var(--papel-hondo);
}
.seccion.alterna > *{ max-width:640px; margin-left:auto; margin-right:auto; }

.etiqueta{
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  font-weight:600;
}
.titulo{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.7rem,7.5vw,2.4rem);
  color:var(--turquesa);
  margin:.3rem 0 1.4rem;
}


/* ══════════ PORTADA ══════════ */
.portada{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.1rem;
  padding:3.5rem 1.5rem 4.5rem;
  text-align:center;
  background:linear-gradient(180deg, #FFFDF8 0%, var(--papel) 50%, var(--papel-hondo) 100%);
}
.portada .picado{ position:absolute; top:0; left:0; }

.portada__cumple{
  font-family:var(--f-display);
  font-size:1.05rem;
  color:var(--tinta-suave);
  letter-spacing:.08em;
}
.portada__edad{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(6rem,34vw,11rem);
  line-height:.86;
  color:var(--fucsia);
  text-shadow:
     4px 4px 0 var(--amarillo),
     8px 8px 0 rgba(18,59,69,.10);
}
.portada__anos{
  font-family:var(--f-display);
  font-size:1.2rem;
  color:var(--tinta-suave);
  margin-bottom:.5rem;
}
.portada__nombre{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2.6rem,15vw,4.4rem);
  line-height:1.05;
  color:var(--turquesa);
  margin:.2rem 0 1.2rem;
}
.portada__fecha{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:.7rem 1.2rem;
  border-top:3px solid var(--amarillo);
  border-bottom:3px solid var(--amarillo);
}
.portada__fecha .fcol{ display:flex; flex-direction:column; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); }
.portada__fecha .fcol small{ font-size:.72rem; opacity:.85; }
.portada__fecha .fnum{
  font-family:var(--f-display);
  font-weight:700;
  font-size:2.7rem;
  line-height:1;
  color:var(--fucsia);
}
.portada__lugar{
  margin-top:1rem;
  font-size:.92rem;
  color:var(--tinta-suave);
}
.portada__flecha{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
}
.portada__flecha span{
  display:block; width:14px; height:14px;
  border-right:3px solid var(--turquesa);
  border-bottom:3px solid var(--turquesa);
  transform:rotate(45deg);
  animation:bajar 1.9s ease-in-out infinite;
}
@keyframes bajar{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5;} 50%{ transform:rotate(45deg) translate(5px,5px); opacity:1;} }


/* ══════════ SALUDO ══════════ */
.saludo__nombre{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.5rem,7vw,2.1rem);
  color:var(--tinta);
  margin:.3rem 0 .5rem;
}
.saludo__pases{
  display:inline-block;
  padding:.35rem 1rem;
  border-radius:999px;
  background:var(--turquesa);
  color:#fff;
  font-weight:700;
  font-size:.88rem;
}


/* ══════════ EL MOMENTO — la foto del festejado ══════════ */
.momento{
  position:relative;
  padding:1rem 1.5rem 2.4rem;
  display:flex;
  justify-content:center;
  overflow:hidden;
}
.momento__media{
  display:block;
  width:min(86%,380px);
  height:auto;
  border-radius:22px;
  border:7px solid #fff;
  box-shadow:var(--sombra-alta);
  transform:rotate(-1.6deg);
}
.momento__globos{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }


/* ══════════ CUENTA REGRESIVA ══════════ */
.cuenta__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.6rem;
}
.cuenta__caja{
  background:var(--papel);
  border:3px solid var(--turquesa-claro);
  border-radius:16px;
  padding:.8rem .2rem .6rem;
  box-shadow:var(--sombra);
}
.cuenta__caja .n{
  display:block;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.5rem,7vw,2.1rem);
  line-height:1;
  color:var(--fucsia);
}
.cuenta__caja .l{
  display:block;
  margin-top:.25rem;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  font-weight:600;
}


/* ══════════ DEDICATORIA ══════════ */
.dedicatoria__texto{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.1rem,4.8vw,1.35rem);
  line-height:1.55;
  color:var(--tinta);
  margin-bottom:1.4rem;
}
.dedicatoria__papas{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.15rem;
  color:var(--turquesa);
}


/* ══════════ VA A HABER ══════════ */
.habra__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.9rem;
}
.habra__item{
  background:var(--papel);
  border-radius:18px;
  padding:1.2rem .7rem 1rem;
  box-shadow:var(--sombra);
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
}
.habra__icono{ color:var(--turquesa); width:44px; height:44px; display:block; }
.habra__icono svg{ width:100%; height:100%; }
.habra__item b{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; }
.habra__item small{ color:var(--tinta-suave); font-size:.8rem; }
/* Cada tarjeta con su color, en el orden del papel picado */
.habra__item:nth-child(6n+1) .habra__icono{ color:var(--turquesa); }
.habra__item:nth-child(6n+2) .habra__icono{ color:var(--fucsia); }
.habra__item:nth-child(6n+3) .habra__icono{ color:var(--naranja); }
.habra__item:nth-child(6n+4) .habra__icono{ color:var(--morado); }
.habra__item:nth-child(6n+5) .habra__icono{ color:var(--turquesa-claro); }
.habra__item:nth-child(6n+6) .habra__icono{ color:#6BA22E; }


/* ══════════ GALERÍA ══════════ */
.galeria__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.foto{ margin:0; }
.foto--ancha{ grid-column:1 / -1; }
.foto img, .foto__hueco{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
  border:5px solid #fff;
  box-shadow:var(--sombra);
}
.foto--ancha img, .foto--ancha .foto__hueco{ aspect-ratio:16/10; }
.foto__hueco{
  display:grid; place-items:center;
  background:repeating-linear-gradient(45deg, var(--papel-hondo) 0 12px, #F3E4D2 12px 24px);
  color:var(--tinta-suave);
  font-size:.85rem;
  font-weight:600;
}
.galeria__nota{ margin-top:.9rem; font-size:.82rem; color:var(--tinta-suave); }


/* ══════════ ITINERARIO ══════════ */
.linea{ text-align:left; position:relative; padding-left:1.2rem; }
.linea::before{
  content:""; position:absolute; left:4px; top:.6rem; bottom:.6rem;
  width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--turquesa-claro),var(--fucsia-claro));
}
.linea__paso{
  position:relative;
  display:flex; gap:1rem; align-items:baseline;
  padding:.7rem 0 .7rem 1.2rem;
}
.linea__paso::before{
  content:""; position:absolute; left:-6px; top:1.15rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--papel); border:3px solid var(--turquesa);
}
.linea__paso:nth-child(3)::before{ border-color:var(--fucsia); background:var(--fucsia); }
.linea__hora{
  font-family:var(--f-display); font-weight:600;
  color:var(--fucsia); font-size:.95rem; min-width:3.1rem;
}
.linea__que{ display:flex; flex-direction:column; }
.linea__que b{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; }
.linea__que small{ color:var(--tinta-suave); font-size:.84rem; }


/* ══════════ LUGAR Y MAPA ══════════ */
.lugares__dir{ color:var(--tinta-suave); }
.lugares__hora{ margin-top:.3rem; font-weight:700; }
.mapa{
  margin:1.4rem 0;
  border-radius:20px;
  overflow:hidden;
  border:5px solid #fff;
  box-shadow:var(--sombra);
  aspect-ratio:4/3;
}
.mapa iframe{ width:100%; height:100%; border:0; display:block; }


/* ══════════ ROPA / REGALOS / NOTAS ══════════ */
.ropa__texto,.regalos__texto{ font-size:1.02rem; }
.ropa__extra,.regalos__nota{ margin-top:.8rem; color:var(--tinta-suave); font-size:.9rem; }

.notas__lista{ text-align:left; display:grid; gap:.7rem; }
.notas__lista li{
  background:var(--papel);
  border-left:5px solid var(--amarillo);
  border-radius:12px;
  padding:.75rem .95rem;
  box-shadow:var(--sombra);
  font-size:.94rem;
}


/* ══════════ FAQ ══════════ */
.faq__lista{ display:grid; gap:.6rem; text-align:left; }
.faq__item{
  background:var(--papel);
  border-radius:14px;
  box-shadow:var(--sombra);
  overflow:hidden;
}
.seccion.alterna .faq__item{ background:var(--papel); }
.faq__item summary{
  cursor:pointer;
  list-style:none;
  padding:.9rem 2.4rem .9rem 1rem;
  font-family:var(--f-display);
  font-weight:500;
  position:relative;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+";
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-family:var(--f-display); font-size:1.4rem; line-height:1;
  color:var(--fucsia);
}
.faq__item[open] summary::after{ content:"–"; }
.faq__item p{ padding:0 1rem 1rem; color:var(--tinta-suave); font-size:.93rem; }


/* ══════════ CONFIRMAR ══════════ */
.rsvp__intro{ margin-bottom:1.4rem; color:var(--tinta-suave); }
.formulario{
  display:grid; gap:.9rem;
  text-align:left;
  background:var(--papel);
  padding:1.4rem;
  border-radius:22px;
  box-shadow:var(--sombra-alta);
}
.formulario__quien{ text-align:center; color:var(--tinta-suave); font-size:.9rem; }
.formulario__quien b{ color:var(--tinta); }
.campo{ display:grid; gap:.35rem; }
.campo > span{ font-weight:700; font-size:.9rem; }
.campo > span small{ font-weight:400; color:var(--tinta-suave); }
.campo select,.campo textarea{
  font-family:var(--f-texto); font-size:1rem;
  padding:.7rem .8rem;
  border:2px solid #E3D5C4;
  border-radius:12px;
  background:#fff;
  color:var(--tinta);
  width:100%;
}
.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--turquesa);
  box-shadow:0 0 0 3px rgba(18,124,119,.18);
}
.campo textarea{ resize:vertical; }
.campo__ayuda{ font-size:.82rem; color:var(--tinta-suave); }
#campoPases{ display:grid; gap:.9rem; }
#campoPases.oculto{ display:none; }
.formulario__nota{ text-align:center; font-size:.8rem; color:var(--tinta-suave); }

/* El botón: el ÚNICO lugar donde va el fucsia a tope. Por eso jala el ojo. */
.boton{
  display:inline-block;
  font-family:var(--f-display); font-weight:600;
  font-size:1rem;
  text-decoration:none;
  text-align:center;
  padding:.85rem 1.6rem;
  border:0; border-radius:999px;
  background:var(--fucsia);
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 0 #9E1E4C, var(--sombra);
  transition:transform .12s ease, box-shadow .12s ease;
}
.boton:active{ transform:translateY(4px); box-shadow:0 2px 0 #9E1E4C, var(--sombra); }
.boton--grande{ width:100%; font-size:1.06rem; padding:1rem; }
.boton--linea{
  background:var(--papel); color:var(--turquesa);
  border:3px solid var(--turquesa);
  box-shadow:none;
}
.boton--linea:active{ transform:translateY(2px); box-shadow:none; }


/* ══════════ PIE ══════════ */
.pie{
  position:relative;
  text-align:center;
  padding:3.4rem 1.5rem 2.4rem;
  background:var(--turquesa);
  color:#fff;
}
.picado--pie{ position:absolute; top:0; left:0; }
.pie__nombre{ font-family:var(--f-display); font-weight:700; font-size:2rem; }
.pie__fecha{ letter-spacing:.24em; font-size:.82rem; opacity:.9; }
.pie__gracias{ margin-top:.9rem; font-size:.95rem; opacity:.95; }
.pie__folio{ margin-top:.5rem; font-size:.74rem; letter-spacing:.14em; opacity:.75; }


/* ══════════ FIRMA SEQLOGIC ══════════ */
.seqlogic-watermark-container{
  margin-top:2.5rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:2rem;
  width:100%; max-width:300px;
  margin-left:auto; margin-right:auto;
}
.seqlogic-watermark-title{
  font-size:.75rem; color:rgba(255,255,255,.55);
  letter-spacing:2px; text-transform:uppercase;
}
.seqlogic-watermark{
  width:130px; height:auto;
  opacity:.55;
  filter:grayscale(1) brightness(2.4);
  transition:opacity .4s ease, filter .4s ease, transform .4s ease;
}
.seqlogic-watermark:hover{
  opacity:1;
  filter:grayscale(0) brightness(1.15) drop-shadow(0 0 10px rgba(0,144,224,.55));
  transform:scale(1.03);
}
.seqlogic-social-links{ display:flex; gap:1rem; margin-top:.5rem; justify-content:center; }
.seqlogic-social-icon{
  color:rgba(255,255,255,.75);
  transition:all .3s ease;
  padding:.5rem; border-radius:50%;
  background:rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.seqlogic-social-icon:hover{ transform:translateY(-3px); background:rgba(255,255,255,.2); }
.seqlogic-social-icon.facebook:hover{ color:#1877F2; box-shadow:0 0 10px rgba(24,119,242,.35); background:rgba(24,119,242,.18); }
.seqlogic-social-icon.youtube:hover{ color:#FF0000; box-shadow:0 0 10px rgba(255,0,0,.35); background:rgba(255,0,0,.18); }


/* ══════════════════════════════════════════════════════════════════════
   CONFETI Y DULCES
   Los crea el script cuando se rompe la piñata. Son divs con animación
   de CSS: no calientan el teléfono como sí lo haría dibujarlos en JS.
   ══════════════════════════════════════════════════════════════════════ */
.confeti{
  position:fixed; inset:0;
  z-index:70;
  pointer-events:none;
  overflow:hidden;
}
.papelito{
  position:absolute;
  top:-6vh;
  width:9px; height:14px;
  border-radius:2px;
  opacity:0;
  animation:caer linear forwards;
}
.dulce{
  position:absolute;
  top:-6vh;
  width:13px; height:13px;
  border-radius:50%;
  opacity:0;
  animation:caer linear forwards;
}
@keyframes caer{
  0%   { transform:translate3d(0,0,0) rotate(0deg);            opacity:0; }
  6%   { opacity:1; }
  85%  { opacity:1; }
  100% { transform:translate3d(var(--desvio,20px),112vh,0) rotate(720deg); opacity:0; }
}
/* Globos que suben junto a la foto del festejado */
.globo{
  position:absolute;
  bottom:-16%;
  width:26px; height:33px;
  border-radius:50% 50% 50% 50% / 46% 46% 54% 54%;
  opacity:.85;
  animation:subir linear infinite;
}
.globo::after{
  content:""; position:absolute; left:50%; top:100%;
  width:1px; height:22px; background:rgba(18,59,69,.28);
}
@keyframes subir{
  0%  { transform:translate3d(0,0,0) rotate(-4deg);        opacity:0; }
  10% { opacity:.85; }
  90% { opacity:.6; }
  100%{ transform:translate3d(18px,-125%,0) rotate(5deg);  opacity:0; }
}


/* ══════════ BOTÓN DE MÚSICA ══════════ */
.musica{
  position:fixed; right:1rem; bottom:1rem;
  z-index:50;
  width:48px; height:48px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--turquesa);
  color:#fff;
  cursor:pointer;
  box-shadow:var(--sombra-alta);
}
/* Sin archivo de música el botón NO existe. El atributo hidden le gana al grid. */
.musica[hidden]{ display:none; }
.musica svg{ width:22px; height:22px; }
.musica.apagada{ opacity:.55; }
.musica.musica--llama{ animation:latir 1.5s ease-in-out 6; }
@keyframes latir{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.14);} }


/* ══════════ APARECER AL HACER SCROLL ══════════ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.dentro{ opacity:1; transform:none; }


/* ══════════════════════════════════════════════════════════════════════
   PANTALLAS GRANDES
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:700px){
  .seccion{ padding:4rem 2rem; }
  .galeria__grid{ grid-template-columns:repeat(4,1fr); }
  .foto--ancha{ grid-column:span 4; }
}

/* ══════════════════════════════════════════════════════════════════════
   QUIEN PIDE MENOS MOVIMIENTO, MENOS MOVIMIENTO RECIBE
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .confeti{ display:none; }
  html{ scroll-behavior:auto; }
}