/* =====================================================================
   ESTILOS COMPARTIDOS DE LAS INVITACIONES DE MUESTRA · CyC Invitaciones
   Cada invitación (boda.html, quince.html, ...) define su propia paleta
   en :root (dentro de su <style>) y este archivo usa esas variables.
   Así, un mismo diseño sirve para todos los eventos.
   ===================================================================== */

/* Valores por defecto (cada página los reemplaza con su paleta) */
:root {
  --c-oscuro: #38471e;        /* títulos y fondos oscuros */
  --c-medio: #445e19;         /* botones y cuenta regresiva */
  --c-suave: #a3b18a;         /* íconos, bordes, sobre */
  --c-claro: #dfe6cf;         /* fondos claros de sección */
  --c-crema: #e8e8c0;         /* fondo alternativo */
  --c-fondo: #f6f5ee;         /* fondo general */
  --c-texto: #33392a;
  --c-texto-suave: #5f6653;
  --c-sello: #b89a5a;         /* sello de lacre del sobre */
  --c-petalo: #ffffff;        /* color de los pétalos al abrir */
  --f-script: 'Great Vibes', cursive;
  --f-titulo: 'Cormorant Garamond', serif;
  --f-texto: 'Montserrat', system-ui, sans-serif;
  --portada-bg: radial-gradient(circle at 50% 30%, #ffffff, var(--c-claro));
  --radio: 20px;
  --sombra: 0 12px 40px rgba(0, 0, 0, 0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-texto); font-weight: 300; color: var(--c-texto);
  background: var(--c-fondo); line-height: 1.7; overflow-x: hidden;
}
body.bloqueado { overflow: hidden; height: 100vh; }   /* mientras el sobre está cerrado */
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }                 /* hidden siempre oculta */
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.contenedor { width: min(1000px, 100% - 32px); margin-inline: auto; }
.seccion { padding: 90px 0; position: relative; text-align: center; overflow: hidden; }

/* ===== Encabezados de sección ===== */
.icono-seccion { width: 60px; height: 60px; margin: 0 auto 14px; color: var(--c-suave); }
.icono-seccion svg { width: 100%; height: 100%; }
.titulo { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.1rem, 6vw, 3.1rem); color: var(--c-oscuro); line-height: 1.15; }
.subtitulo { font-family: var(--f-script); font-size: 1.9rem; color: var(--c-suave); line-height: 1.3; }
.texto { max-width: 560px; margin: 14px auto 0; color: var(--c-texto-suave); }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px; margin-top: 26px;
  background: var(--c-medio); color: #fff;
  font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15); transition: transform .25s, filter .25s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-claro { background: transparent; color: var(--c-medio); border: 1.5px solid var(--c-medio); box-shadow: none; }
.btn svg { width: 18px; height: 18px; }

/* =====================================================================
   SOBRE DE APERTURA
   ===================================================================== */
.sobre-pantalla {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 34px;
  background: var(--portada-bg); transition: opacity 1s ease, visibility 1s;
}
.sobre-pantalla.oculta { opacity: 0; visibility: hidden; }
.sobre-iniciales { font-family: var(--f-script); font-size: 3.2rem; color: var(--c-oscuro); }
.sobre { position: relative; width: 300px; height: 200px; perspective: 900px; cursor: pointer; }
/* Orden de capas: tarjeta (1) < cuerpo (2) < solapa (3) < sello (4) */
.sobre-cuerpo { position: absolute; inset: 0; z-index: 2; border-radius: 8px; background: var(--c-suave); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.sobre-cuerpo::before {   /* solapas laterales (triángulos hechos con bordes) */
  content: ''; position: absolute; inset: 0; border-radius: 8px; opacity: .25;
  border-left: 150px solid #000; border-right: 150px solid #000;
  border-top: 100px solid transparent; border-bottom: 100px solid transparent;
}
.sobre-cuerpo::after {    /* solapa inferior */
  content: ''; position: absolute; left: 0; bottom: 0;
  border-left: 150px solid transparent; border-right: 150px solid transparent;
  border-bottom: 110px solid rgba(255, 255, 255, .22);
}
.sobre-solapa {           /* solapa superior: gira en 3D al abrir */
  position: absolute; top: 0; left: 0; z-index: 3;
  border-left: 150px solid transparent; border-right: 150px solid transparent;
  border-top: 115px solid var(--c-suave); filter: brightness(.88);
  transform-origin: top center; transition: transform 1.4s ease-in-out, z-index 0s .7s;
}
.sobre.abierto .sobre-solapa { transform: rotateX(180deg); z-index: 0; }
.sobre-sello {
  position: absolute; top: 88px; left: 50%; transform: translateX(-50%); z-index: 4;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.35), var(--c-sello) 60%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  font-family: var(--f-script); color: #fff; font-size: 1.3rem; transition: opacity .4s;
}
.sobre.abierto .sobre-sello { opacity: 0; }
.sobre-tarjeta {          /* tarjeta que asoma del sobre */
  position: absolute; left: 16px; right: 16px; top: 14px; height: 170px; z-index: 1;
  background: #fff; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--f-script); font-size: 1.8rem; color: var(--c-oscuro);
  transition: transform 1s ease 1s;
}
.sobre.abierto .sobre-tarjeta { transform: translateY(-110px); }
.sobre-indicacion { font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--c-oscuro); animation: parpadeo 2s ease-in-out infinite; }
@keyframes parpadeo { 50% { opacity: .35; } }

/* Pétalos / confeti que vuelan al abrir (los genera el JS) */
.petalo {
  position: fixed; z-index: 1001; width: 14px; height: 14px; pointer-events: none; opacity: 0;
  background: var(--c-petalo); border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  animation: volar var(--duracion) ease-out var(--retraso) forwards;
}
@keyframes volar {
  0%   { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--giro)) scale(1); opacity: 0; }
}

/* =====================================================================
   PORTADA
   ===================================================================== */
.portada {
  min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  text-align: center; padding: 56px 16px; position: relative; overflow: hidden;
  background: var(--portada-bg);
}
.portada > div { position: relative; z-index: 1; }
.portada-intro { font-size: .78rem; letter-spacing: .4em; text-transform: uppercase; color: var(--c-medio); }
.portada h1 { font-family: var(--f-script); font-weight: 400; color: var(--c-oscuro); font-size: clamp(4.2rem, 17vw, 7.6rem); line-height: 1; margin: 18px 0; }
.portada h1 span { display: block; font-size: .5em; color: var(--c-suave); }
.portada-lema { font-family: var(--f-titulo); font-size: 1.5rem; font-style: italic; color: var(--c-medio); }
.portada-fecha {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px;
  font-family: var(--f-titulo); font-size: 1.25rem; letter-spacing: .25em; color: var(--c-oscuro);
}
.portada-fecha span { border-block: 1px solid var(--c-suave); padding: 6px 4px; }
.portada-fecha strong { font-size: 2.6rem; font-weight: 400; letter-spacing: 0; }
.bajar { margin-top: 50px; display: inline-block; color: var(--c-medio); animation: rebote 2s infinite; }
.bajar svg { width: 28px; height: 28px; }
@keyframes rebote { 50% { transform: translateY(10px); } }

/* =====================================================================
   CUENTA REGRESIVA
   ===================================================================== */
.cuenta { background: var(--c-medio); color: #fff; }
.cuenta .titulo { color: #fff; font-family: var(--f-script); font-size: clamp(3rem, 9vw, 4.2rem); }
.reloj { display: grid; grid-template-columns: repeat(4, minmax(0, 115px)); justify-content: center; gap: 12px; margin-top: 28px; }
.reloj div { border: 1px solid rgba(255, 255, 255, .35); border-radius: 16px; padding: 16px 4px; background: rgba(255, 255, 255, .08); }
.reloj strong { display: block; font-family: var(--f-titulo); font-size: clamp(2.1rem, 7vw, 3.1rem); font-weight: 400; line-height: 1; }
.reloj span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.cuenta .btn { background: #fff; color: var(--c-oscuro); }

/* =====================================================================
   TARJETAS DE LUGARES / PADRINOS
   ===================================================================== */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 36px; }
.tarjeta { background: rgba(255, 255, 255, .92); border-radius: var(--radio); padding: 36px 26px; box-shadow: var(--sombra); border: 1px solid var(--c-claro); }
.tarjeta .icono-seccion { width: 52px; height: 52px; }
.tarjeta h3 { font-family: var(--f-titulo); font-size: 1.8rem; font-weight: 400; color: var(--c-oscuro); }
.tarjeta-hora { font-family: var(--f-titulo); font-size: 2.1rem; color: var(--c-medio); margin: 2px 0; }
.tarjeta-lugar { font-weight: 500; }
.tarjeta-direccion { font-size: .9rem; color: var(--c-texto-suave); }
.tarjeta .btn { margin-top: 18px; }

/* =====================================================================
   SECCIONES DE COLOR
   ===================================================================== */
.fondo-claro { background: var(--c-claro); }
.fondo-crema { background: var(--c-crema); }
.fondo-oscuro { background: var(--c-oscuro); color: #fff; }
.fondo-oscuro .titulo, .fondo-oscuro .icono-seccion { color: #fff; }
.fondo-oscuro .texto { color: rgba(255, 255, 255, .8); }
.fondo-suave { background: var(--c-suave); color: #fff; }
.fondo-suave .titulo, .fondo-suave .icono-seccion { color: #fff; }
.fondo-suave .texto { color: #fff; font-weight: 400; }
.fondo-suave .btn, .fondo-oscuro .btn { background: #fff; color: var(--c-oscuro); }
.fecha-limite { display: inline-block; margin-top: 18px; padding: 10px 22px; border-radius: 999px; background: #fff; color: var(--c-oscuro); font-weight: 500; font-size: .9rem; }
.dress-estilo { font-family: var(--f-script); font-size: clamp(3rem, 10vw, 4.4rem); line-height: 1.2; }

/* ===== Regalos: datos bancarios con botón copiar ===== */
.cuentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-top: 30px; text-align: left; }
.cuenta-banco { background: #fff; border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra); }
.cuenta-banco h3 { font-family: var(--f-titulo); font-size: 1.45rem; font-weight: 600; color: var(--c-oscuro); margin-bottom: 10px; }
.dato { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--c-claro); }
.dato:last-child { border-bottom: none; }
.dato small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-texto-suave); }
.dato p { font-weight: 500; word-break: break-all; }
.copiar { flex-shrink: 0; padding: 6px 14px; border-radius: 999px; font-size: .75rem; font-weight: 500; border: 1px solid var(--c-suave); color: var(--c-medio); }
.copiar.ok { background: var(--c-medio); color: #fff; }
.aviso-demo { font-size: .78rem; color: var(--c-texto-suave); margin-top: 14px; font-style: italic; }

/* ===== Notas ===== */
.notas-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 36px; }
.nota { background: #fff; border-radius: var(--radio); padding: 26px 20px; border-top: 3px solid var(--c-suave); box-shadow: 0 6px 20px rgba(0, 0, 0, .06); }
.nota svg { width: 30px; height: 30px; color: var(--c-suave); margin: 0 auto 10px; }

/* ===== Fotos compartidas ===== */
.hashtag { font-family: var(--f-titulo); font-size: 2rem; font-weight: 600; color: var(--c-medio); margin-top: 10px; }

/* ===== Cierre ===== */
.cierre { background: var(--portada-bg); padding: 110px 16px 44px; text-align: center; position: relative; overflow: hidden; }
.cierre > * { position: relative; z-index: 1; }
.cierre h2 { font-family: var(--f-script); font-weight: 400; font-size: clamp(3.3rem, 12vw, 5.3rem); color: var(--c-oscuro); line-height: 1.1; }
.cierre .texto { margin-bottom: 60px; }
.creditos { font-size: .75rem; letter-spacing: .1em; color: var(--c-texto-suave); }
.creditos a { font-weight: 600; color: var(--c-medio); }

/* =====================================================================
   VENTANAS MODALES (confirmación y canción de muestra)
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.modal.abierto { display: flex; animation: aparecer .3s ease; }
@keyframes aparecer { from { opacity: 0; } }
.modal-caja { background: var(--c-fondo); border-radius: var(--radio); width: min(460px, 100%); max-height: 90vh; overflow: auto; padding: 28px; position: relative; text-align: left; }
.modal-caja h3 { font-family: var(--f-titulo); font-size: 1.7rem; color: var(--c-oscuro); margin-bottom: 16px; text-align: center; }
.modal-cerrar { position: absolute; top: 10px; right: 14px; font-size: 1.8rem; line-height: 1; color: var(--c-oscuro); }
.form-demo { display: grid; gap: 14px; }
.form-demo label { font-size: .8rem; font-weight: 500; display: block; margin-bottom: 4px; }
.form-demo input, .form-demo select, .form-demo textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--c-claro); font: inherit; background: #fff; }
.form-demo .btn { margin-top: 6px; width: 100%; }
.gracias { text-align: center; padding: 20px 0; }
.gracias p:first-child { font-family: var(--f-script); font-size: 2.6rem; color: var(--c-medio); }

/* ===== Botón flotante de música ===== */
.btn-musica { position: fixed; right: 18px; bottom: 18px; z-index: 800; width: 54px; height: 54px; border-radius: 50%; background: var(--c-medio); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.btn-musica svg { width: 22px; height: 22px; }
.ecualizador { display: none; gap: 3px; align-items: flex-end; height: 20px; }
.ecualizador i { width: 4px; background: currentColor; border-radius: 2px; animation: barra 1s ease-in-out infinite; }
.ecualizador i:nth-child(2) { animation-delay: .2s; }
.ecualizador i:nth-child(3) { animation-delay: .4s; }
@keyframes barra { 0%, 100% { height: 6px; } 50% { height: 20px; } }
.btn-musica.sonando .ecualizador { display: flex; }
.btn-musica.sonando .icono-play { display: none; }

/* Aviso "¡Copiado!" */
.aviso { position: fixed; left: 50%; bottom: 86px; transform: translate(-50%, 20px); z-index: 950; background: var(--c-oscuro); color: #fff; padding: 10px 22px; border-radius: 999px; font-size: .85rem; opacity: 0; pointer-events: none; transition: .3s; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }

/* Cinta "Invitación de muestra" arriba a la izquierda */
.cinta-demo { position: fixed; top: 12px; left: 12px; z-index: 700; background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; letter-spacing: .1em; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); }
.cinta-demo a { text-decoration: underline; }

/* ===== Aparición al hacer scroll ===== */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
}
@media (max-width: 640px) { .seccion { padding: 70px 0; } .reloj { gap: 8px; } }