/* ==========================================================================
   TEMA: CUMPLEAÑOS DE ADULTO · REBOBINA — dirección de arte "CINTA MEMPHIS"
   Creada el 5 de octubre de 2026 (trabajo nocturno). La pidió Abdiel: demos
   modernos para "chavos rucos". Lo que más se repite en fiestas de adultos de
   2026 son las retro de los 80 y 90 (fiestafacil.com, birthday.tools).

   LA IDEA: la invitación es una cinta grabada. Se le da play al casete para
   entrar (primero rebobina, luego arranca); en la portada el casete sigue
   girando con su ecualizador; el programa es el "Lado A" y la pista el "Lado B".
   Al confirmar, el invitado pide SU canción. Las figuritas de colores con raya
   negra son el estilo Memphis, el de las carpetas y los videos de esa época.
   Diseño propio: sin nombres, logos ni canciones de nadie.

   TEORÍA DEL COLOR: crema de base (60); aguamarina y amarillo en bloques (30);
   rosa mexicano solo en lo que se toca (10). Rosa, amarillo y aguamarina forman
   una tríada (repartidos parejo en la rueda de color): por eso se ve alegre y
   ochentero sin pelearse. El morado es el cuarto color, en detalles. Todo lleva
   raya y sombra en tinta casi negra, que es lo que amarra los colores vivos.

   CONTRASTE MEDIDO (fórmula WCAG):
     tinta #1B1036 sobre crema 16.9 · sobre aguamarina 8.0 · sobre amarillo 12.4 · sobre rosa (botón) 5.4
     texto suave: #4B3F6B sobre crema 8.9 · #2A1F4A sobre aguamarina 6.8
     rosa hondo #C2185B sobre crema 5.5 · blanco sobre el pie morado #4A2FD6 7.9
   ========================================================================== */
:root{
  --rosa:#FF3D8B; --aqua:#00C2B8; --amar:#FFD23F; --morado:#6A4CFF; --morado-hondo:#4A2FD6; --crema:#FFF8E7; --negro:#1B1036;
  --papel:#FFF8E7;  --papel-hondo:#FCEBC4;
  --tinta:#1B1036;  --tinta-suave:#4B3F6B;
  --marca:#1B1036;  --marca-claro:#6A4CFF;
  --acento:#C2185B; --acento-hondo:#8E1244;
  --f-display:"Bungee", Impact, "Arial Black", sans-serif;
  --f-texto:"Outfit", system-ui, sans-serif;
  --f-mano:"Permanent Marker", "Comic Sans MS", cursive;
  --radio:14px;
  --sombra:5px 5px 0 var(--negro);
  --sombra-alta:7px 7px 0 var(--negro);
  --memphis:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20opacity%3D%271%27%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2740%27%20r%3D%2710%27%20fill%3D%27%23FF3D8B%27%2F%3E%3Cpath%20d%3D%27M150%2028l14%2024h-28z%27%20fill%3D%27none%27%20stroke%3D%27%236A4CFF%27%20stroke-width%3D%275%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M56%20150l11-11%2011%2011%2011-11%2011%2011%27%20fill%3D%27none%27%20stroke%3D%27%231B1036%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%27178%27%20y%3D%27130%27%20width%3D%2720%27%20height%3D%2720%27%20fill%3D%27%23FFFFFF%27%2F%3E%3Crect%20x%3D%27184%27%20y%3D%27136%27%20width%3D%2720%27%20height%3D%2720%27%20fill%3D%27none%27%20stroke%3D%27%231B1036%27%20stroke-width%3D%274%27%2F%3E%3Cg%20fill%3D%27%231B1036%27%3E%3Ccircle%20cx%3D%27108%27%20cy%3D%2784%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2784%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27108%27%20cy%3D%2796%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2796%27%20r%3D%273%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M20%20210a13%2013%200%200%201%2026%200z%27%20fill%3D%27%236A4CFF%27%2F%3E%3Ccircle%20cx%3D%27212%27%20cy%3D%27214%27%20r%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%23FF3D8B%27%20stroke-width%3D%275%27%2F%3E%3C%2Fsvg%3E") 0 0 / 240px 240px;
  --memphis-suave:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20opacity%3D%270.4%27%3E%3Ccircle%20cx%3D%2734%27%20cy%3D%2740%27%20r%3D%2710%27%20fill%3D%27%23FF3D8B%27%2F%3E%3Cpath%20d%3D%27M150%2028l14%2024h-28z%27%20fill%3D%27none%27%20stroke%3D%27%236A4CFF%27%20stroke-width%3D%275%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M56%20150l11-11%2011%2011%2011-11%2011%2011%27%20fill%3D%27none%27%20stroke%3D%27%231B1036%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%27178%27%20y%3D%27130%27%20width%3D%2720%27%20height%3D%2720%27%20fill%3D%27%23FFFFFF%27%2F%3E%3Crect%20x%3D%27184%27%20y%3D%27136%27%20width%3D%2720%27%20height%3D%2720%27%20fill%3D%27none%27%20stroke%3D%27%231B1036%27%20stroke-width%3D%274%27%2F%3E%3Cg%20fill%3D%27%231B1036%27%3E%3Ccircle%20cx%3D%27108%27%20cy%3D%2784%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2784%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27108%27%20cy%3D%2796%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%27120%27%20cy%3D%2796%27%20r%3D%273%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M20%20210a13%2013%200%200%201%2026%200z%27%20fill%3D%27%236A4CFF%27%2F%3E%3Ccircle%20cx%3D%27212%27%20cy%3D%27214%27%20r%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%23FF3D8B%27%20stroke-width%3D%275%27%2F%3E%3C%2Fsvg%3E") 0 0 / 240px 240px;
  font-synthesis:none;
}
body{ background:var(--papel); }
h1, h2, .titulo, .boton, .portada__nombre, .entrada__nombre, .saludo__nombre, .pie__nombre, .dedicatoria__firma, .linea__hora, .cuenta__caja .n, .portada__fecha .fnum{ font-weight:400; }

.etiqueta{
  display:inline-block; padding:.34rem .8rem .3rem; background:var(--negro); color:var(--amar);
  font-family:var(--f-texto); font-weight:800; font-size:.68rem; letter-spacing:.18em; transform:rotate(-1.5deg);
}
.titulo{
  font-family:var(--f-display); text-transform:uppercase; line-height:1.08;
  font-size:clamp(1.75rem,8.2vw,2.5rem); margin:.9rem 0 1.4rem;
  color:var(--negro); text-shadow:3px 3px 0 var(--rosa);
}
.seccion.alterna .titulo{ text-shadow:3px 3px 0 var(--amar); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el casete. Primer toque: rebobina. Segundo: play.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:var(--memphis), var(--amar); transition:opacity .6s ease .5s, visibility 0s linear 1.15s; }
.entrada > *{ position:relative; z-index:1; }
.entrada__para{ padding:.3rem .8rem .26rem; background:var(--negro); color:var(--amar); font-family:var(--f-texto); font-weight:800; letter-spacing:.24em; font-size:.68rem; transform:rotate(-2deg); }
.entrada__nombre{
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.5rem,7vw,2.1rem); line-height:1.12; margin:.7rem 0 1.2rem;
  color:var(--negro); text-shadow:3px 3px 0 #fff;
}
.casete{ display:block; width:100%; height:auto; overflow:visible; }
.casete__lado{ font-family:"Bungee", Impact, sans-serif; font-size:11px; fill:#1B1036; }
.casete__titulo{ font-family:"Permanent Marker", cursive; font-size:23px; fill:#4A2FD6; }
.carrete{ transform-box:fill-box; transform-origin:center; animation:cs-gira 3.2s linear infinite; }
@keyframes cs-gira{ to{ transform:rotate(360deg); } }
.gancho.casete-play{ position:relative; width:min(74vw,300px); animation:cs-flota 3.4s ease-in-out infinite; }
@keyframes cs-flota{ 0%,100%{ transform:rotate(-3deg) translateY(0); } 50%{ transform:rotate(2deg) translateY(-8px); } }
.gancho.casete-play .tecla{                    /* la tecla de play, encima del casete */
  position:absolute; left:50%; bottom:-26px; width:74px; height:74px; margin-left:-37px; border-radius:50%;
  background:var(--negro); box-shadow:0 0 0 4px #fff, 5px 6px 0 var(--rosa); display:grid; place-items:center;
}
.gancho.casete-play .tecla::after{ content:""; margin-left:6px; border-style:solid; border-width:15px 0 15px 25px; border-color:transparent transparent transparent var(--amar); }
/* primer toque: se regresa la cinta (los carretes giran al revés, rapidito) */
.gancho.casete-play.golpe{ animation:cs-sacude .55s ease; }
@keyframes cs-sacude{ 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(-5deg) translateX(-6px); } 45%{ transform:rotate(4deg) translateX(6px); } 70%{ transform:rotate(-2deg); } }
.gancho.casete-play.golpe .carrete{ animation:cs-gira .28s linear infinite reverse; }
/* al abrir: play. Los carretes arrancan y el casete se mete a la grabadora (se va hacia abajo y se pierde) */
.gancho.casete-play.abre{ animation:cs-play .8s cubic-bezier(.6,-0.3,.7,.4) forwards; }
@keyframes cs-play{ 0%{ transform:rotate(0) scale(1); opacity:1; } 35%{ transform:rotate(-3deg) scale(1.08); opacity:1; } 100%{ transform:rotate(4deg) scale(2.8) translateY(8%); opacity:0; } }
.gancho.casete-play.abre .carrete{ animation:cs-gira .22s linear infinite; }
.gancho.casete-play.abre .tecla{ background:var(--rosa); }
.entrada__pista{
  margin-top:2.9rem; padding:.55rem 1.2rem .45rem; background:var(--rosa); color:var(--negro);
  border:3px solid var(--negro); box-shadow:var(--sombra); font-family:var(--f-display); font-size:1.05rem; text-transform:uppercase;
  animation:cs-late 1.5s ease-in-out infinite;
}
@keyframes cs-late{ 0%,100%{ transform:scale(1) rotate(-1.5deg); } 50%{ transform:scale(1.06) rotate(1deg); } }
.entrada__marcador{ margin-top:.9rem; color:var(--negro); font-weight:800; letter-spacing:.12em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — el casete sonando, con su ecualizador
   ══════════════════════════════════════════════════════════════════════ */
.portada{ overflow:hidden; background:var(--memphis), var(--papel); gap:0; padding-top:2.6rem; }
.portada__arriba{ display:inline-block; padding:.3rem .8rem .26rem; background:var(--negro); color:var(--amar); font-family:var(--f-texto); font-weight:800; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; transform:rotate(-1.5deg); }
.tocacintas{ position:relative; width:min(72vw,296px); margin:5.4rem auto 5.6rem; }
.tocacintas::before{                           /* el disco de color detrás, con su sombra corrida */
  content:""; position:absolute; left:50%; top:50%; width:118%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:var(--amar); border:4px solid var(--negro); box-shadow:9px 10px 0 var(--negro);
}
.tocacintas .casete{ position:relative; transform:rotate(-5deg); }
.ecual{ position:relative; display:flex; justify-content:center; align-items:flex-end; gap:5px; height:42px; margin:0 auto; }
.ecual i{ width:11px; height:100%; background:var(--rosa); border:2.5px solid var(--negro); transform-origin:50% 100%; animation:cs-barra 1s ease-in-out infinite; }
.ecual i:nth-child(3n+2){ background:var(--aqua); } .ecual i:nth-child(3n){ background:var(--morado); }
.ecual i:nth-child(1){ animation-delay:-.2s; } .ecual i:nth-child(2){ animation-delay:-.55s; } .ecual i:nth-child(3){ animation-delay:-.1s; } .ecual i:nth-child(4){ animation-delay:-.7s; }
.ecual i:nth-child(5){ animation-delay:-.35s; } .ecual i:nth-child(6){ animation-delay:-.85s; } .ecual i:nth-child(7){ animation-delay:-.25s; } .ecual i:nth-child(8){ animation-delay:-.6s; } .ecual i:nth-child(9){ animation-delay:-.45s; }
@keyframes cs-barra{ 0%,100%{ transform:scaleY(.25); } 30%{ transform:scaleY(1); } 60%{ transform:scaleY(.5); } 80%{ transform:scaleY(.8); } }
.portada__de{ margin-top:1.1rem; font-family:var(--f-mano); font-size:1.7rem; line-height:1; color:var(--morado-hondo); transform:rotate(-3deg); }
.portada__nombre{
  font-family:var(--f-display); text-transform:uppercase; line-height:1; font-size:clamp(4rem,23vw,6.4rem); margin:.3rem 0 1.1rem;
  color:var(--negro); text-shadow:5px 5px 0 var(--rosa), 10px 10px 0 var(--aqua);
}
.portada__fecha{ background:#fff; border:3px solid var(--negro); border-radius:0; box-shadow:var(--sombra); padding:.5rem 1.1rem; gap:1rem; transform:rotate(1.2deg); }
.portada__fecha .fcol{ color:var(--negro); font-weight:800; letter-spacing:.14em; font-size:.7rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-size:2.5rem; color:var(--acento); }
.portada__lugar{ margin-top:1.3rem; color:var(--negro); font-weight:700; background:var(--papel); padding:.1rem .5rem; }
.portada__flecha span{ border-color:var(--negro); border-width:4px; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — crema y aguamarina, todo con raya y sombra negras
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.5rem,6.8vw,2rem); line-height:1.12; color:var(--negro); }
.saludo__pases{ background:var(--amar); color:var(--negro); border:3px solid var(--negro); border-radius:0; box-shadow:4px 4px 0 var(--negro); font-weight:800; }

.seccion.alterna{ --tinta-suave:#2A1F4A; --acento:#1B1036; position:relative; background:var(--aqua); }
/* la orilla en picos (como cortada con tijera de zigzag), arriba y abajo: el texto va sobre color liso */
.seccion.alterna::before, .seccion.alterna::after{
  content:""; position:absolute; left:0; right:0; top:0; height:12px; pointer-events:none;
  background:linear-gradient(135deg, var(--papel) 25%, transparent 25%) -12px 0 / 24px 24px, linear-gradient(225deg, var(--papel) 25%, transparent 25%) -12px 0 / 24px 24px;
}
.seccion.alterna::after{ top:auto; bottom:0; transform:scaleY(-1); }
.rsvp.alterna::after{ display:none; }
.seccion.alterna .etiqueta{ background:var(--negro); color:#fff; }
.seccion.alterna :is(.cuenta__caja, .tarjeta, .formulario, .notas__lista li){ --tinta-suave:#4B3F6B; --acento:#C2185B; }

.momento{ padding-top:1.6rem; padding-bottom:3.2rem; }
.momento__foto{ border:4px solid var(--negro); border-radius:14px; box-shadow:var(--sombra-alta); transform:rotate(-2deg); background:var(--aqua); }
.flotantes{ display:none; }

.cuenta__caja, .tarjeta, .notas__lista li, .formulario, .faq__item{ background:#fff; border:3px solid var(--negro); border-radius:var(--radio); box-shadow:var(--sombra); }
.cuenta__caja .n{ font-family:var(--f-display); color:var(--acento); }
.cuenta__caja .l{ color:var(--tinta-suave); font-weight:700; }
.tarjeta:nth-child(4n+1){ background:var(--amar); } .tarjeta:nth-child(4n+2){ background:#fff; } .tarjeta:nth-child(4n+3){ background:#fff; } .tarjeta:nth-child(4n+4){ background:var(--amar); }
.tarjeta:nth-child(odd){ transform:rotate(-1.2deg); } .tarjeta:nth-child(even){ transform:rotate(1.2deg); }
.tarjeta__icono{ color:var(--negro); background:var(--rosa); border:3px solid var(--negro); border-radius:50%; padding:8px; width:58px; height:58px; box-sizing:border-box; }
.tarjeta b{ font-family:var(--f-texto); font-weight:800; font-size:1.08rem; line-height:1.15; }
.tarjeta small{ color:#2A1F4A; }

.dedicatoria__texto{ font-family:var(--f-texto); font-weight:600; font-size:1.28rem; line-height:1.5; color:var(--negro); }
.dedicatoria__firma{ font-family:var(--f-mano); font-size:2rem; color:var(--morado-hondo); transform:rotate(-3deg); margin-top:.4rem; }

.galeria__grid{ gap:1rem; }
.foto img{ border:3px solid var(--negro); border-radius:12px; box-shadow:var(--sombra); background:var(--amar); }
.foto:nth-child(even) img{ transform:rotate(1.3deg); } .foto:nth-child(odd) img{ transform:rotate(-1.2deg); }
.foto--ancha img{ transform:none; }
.foto__hueco{ border:3px dashed var(--negro); border-radius:12px; }

.linea::before{ background:var(--negro); width:4px; }
.linea__paso::before{ background:#fff; border:3px solid var(--negro); border-radius:0; transform:rotate(45deg); }
.linea__paso.destaca::before{ background:var(--rosa); border-color:var(--negro); }
.linea__hora{ font-family:var(--f-display); font-size:1.05rem; color:var(--negro); }
.linea__que b{ font-family:var(--f-texto); font-weight:800; }

.lugares__hora{ font-weight:800; color:var(--acento); }
.mapa{ border:3px solid var(--negro); border-radius:14px; box-shadow:var(--sombra); }

.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ border-left:10px solid var(--rosa); font-weight:500; }
.faq__item summary{ font-family:var(--f-texto); font-weight:700; color:var(--negro); }

.boton{
  background:var(--rosa); color:var(--negro); border:3px solid var(--negro); border-radius:0;
  box-shadow:var(--sombra); font-family:var(--f-display); font-size:1.05rem; text-transform:uppercase;
}
.boton:active{ transform:translate(4px,4px); box-shadow:1px 1px 0 var(--negro); }
.boton--linea{ background:#fff; color:var(--negro); border:3px solid var(--negro); font-size:.9rem; }

.formulario{ padding:1.3rem 1.1rem 1.4rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:3px solid var(--negro); border-radius:0; background:#fff; color:var(--negro); }
.rsvp__intro b{ background:var(--amar); padding:0 .25em; }
.buscar{ border:3px solid var(--negro); border-radius:var(--radio); }

.pie{ background:var(--morado-hondo); border-top:4px solid var(--negro); }
.pie__nombre{ font-family:var(--f-display); text-transform:uppercase; font-size:2.6rem; line-height:1; color:var(--amar); text-shadow:4px 4px 0 var(--negro); }
.pie > p{ position:relative; }

@media (prefers-reduced-motion:reduce){
  .gancho.casete-play, .carrete, .ecual i, .entrada__pista{ animation:none; }
  .ecual i{ transform:scaleY(.6); }
}