:root{
  --text: #000;
  --bg: #fff;
  --elev: hsl(0 0% 100% / .7);
  --shadow: 0 0 10px .5px rgba(0,0,0,.7);
  --radius: 20px;
  --gap: clamp(.5rem, 2vw, 1rem);

  /* Tamaños */
  --page-h: clamp(28rem, 90vh, 40rem);
  --btn-py: .5rem;
  --btn-px: 1rem;
}

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

html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Poiret One", sans-serif;
  overflow-x: hidden;
}

.flow > * + * { margin-block-start: var(--gap); }

/* Página genérica: reutilizamos la misma clase */
.page{
  position: relative;
  width: 100%;
  min-height: var(--page-h);
  background-image: var(--bg, none);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 0;
}

/* En pantallas más anchas, evita distorsión */
@media (width > 450px){
  .page{
    background-size: contain;
    min-height: min(100vh, 56.25vw); /* 16:9 safety */
  }
}

/* ===== Timer ===== */

.timer{
  position: absolute;
  inset: 15% auto auto 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: .5rem;

  background: var(--elev);
  color: var(--text);
  padding: .25rem .5rem;
  border-radius: 10px;
  box-shadow: var(--shadow);
  white-space: nowrap;

  font-family: "Poiret One", system-ui, sans-serif;
  text-shadow: 1px 1px 0 #000;
}

.time-block{ display: grid; place-items: center; padding-inline: .1rem; }
.time-value{ font-size: clamp(1.25rem, 4vw, 2rem); font-weight: 700; }
.unit{ font-size: .75rem; opacity: .9; }

/* ===== Botones reutilizables ===== */
.btn{
  --btn-bg: var(--elev);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: var(--btn-bg);
  box-shadow: var(--shadow);
  font-family: "Poiret One", system-ui, sans-serif;
  font-size: clamp(1rem, 3vw, 1.2rem);
  text-shadow: 1px 1px 0 #000;
  border: none;
}

/* ubicación 1 y 2 (solo cambia top) */
.btn--map{ top: 45%; }
.btn--map-2{ top: 92%; }

button#toggle-music.btn--music{
  all: unset;                     /* limpia TODO lo heredado */
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;

  /* cuadrado sí o sí */
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1;            /* si algo intenta deformarlo, lo corrige */
  box-sizing: border-box;
  padding: 0 !important;          /* evita que crezca por padding */
  line-height: 1 !important;      /* evita que crezca por line-height */

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 0 10px 0.5px rgba(0,0,0,.5);

  font-family: "Schoolbell", system-ui, sans-serif;
  font-size: 1.2rem;
  color: #111;
  cursor: pointer;
  text-shadow: none;
}

button#toggle-music.btn--music:hover{
  background: rgba(255,255,255,1);
}
.btn--music[aria-pressed="true"]{
  background: rgba(255,255,255,1);
}

/* Footer */
.footer{
  padding: 15px;
  background: var(--bg);
  color: #333;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0,0,0,.1);
  display: grid;
  gap: .5rem;
}
.footer p{ margin: 0; }
.fb-link{
  color: var(--text);
  font-size: clamp(1rem, 3vw, 1.25rem);
  text-decoration: none;
}
.fb-link:hover{ color: #0d6efd; }
.fb-icon{ display: inline-flex; color: #1877f2; }

/* Preferencias del usuario (accesibilidad) */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===== Galería ===== */
.galeria{
  background:#fff;
  min-height: 100vh;
  padding: 2rem 1rem;
  text-align:center;
}
.galeria__titulo{
  font-family: "Poiret One", sans-serif;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.galeria__grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap:1rem;
  max-width: 960px;
  margin: auto;
}
.galeria__grid img{
  width:100%; height:140px; object-fit:cover;
  border-radius:10px; cursor:pointer;
  transition: transform .3s;
}
.galeria__grid img:hover{ transform: scale(1.05) }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.85); border:none; padding:0;
}
.lightbox[open]{ display:grid }
.lb__img{
  width:100%;
  height:100%;
  object-fit:contain; /* mantiene proporción dentro del marco */
  border-radius:12px;
}
.lb__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#ffffff2a; color:#fff; border:none;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  font-size:1.2rem;
}
.lb__btn--prev{ left:20px }
.lb__btn--next{ right:20px }
.lb__btn--close{ top:20px; right:20px; transform:none }

.lb__frame{
  width:90vw; 
  height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Botón cerrar destacado */
.lb__btn--close {
  background: rgba(255, 255, 255, 0.85); /* fondo rojo translúcido */
  color: #000000;                       /* X blanca encima */
  font-weight: bold;
}

.lb__btn--close:hover {
  background: rgba(200, 0, 0, 1);    /* más intenso al pasar el mouse */
}




/*******************/

/* ===== Gate (pantalla de código) ===== */
.gate{
  position: fixed;      /* <- clave: ocupa toda la pantalla */
  inset: 0;
  z-index: 1000;        /* por encima del resto */
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.85); /* oscurece el fondo */
  backdrop-filter: blur(12px);  /* blur fuerte */
}

.gate__card{
  max-width: 420px;
  width: min(92vw, 420px);
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.gate__desc{ margin: .25rem 0 1rem; color: #555; }
.gate__form{ display: grid; gap: .75rem; }

.gate__label{ display: grid; gap: .35rem; font-weight: 600; }
.gate__input{
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid #d0d6e0;
  border-radius: 10px;
  font-size: 1rem;
  letter-spacing: .06em;
}
.gate__input:focus{
  border-color: #7fd1ae;
  outline: 3px solid #7fd1ae55;
}

.gate__help{ margin: .25rem 0 0; font-size: .85rem; color: #666 }
.gate__btn{
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid #2a2f39;
  background: #161b22;
  color: #fff; font-weight: 700; cursor: pointer;
}
.gate__btn:hover{ filter: brightness(1.1); }

.gate__error{
  margin: .25rem 0 0;
  color: #b00020; font-weight: 600;
}

@keyframes gate-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.gate--shake .gate__card { animation: gate-shake 450ms ease; }

body.gate-open #main,
body.gate-open .footer,
body.gate-open .btn--music {
  filter: blur(8px) brightness(.8);
  pointer-events: none;     /* no se puede interactuar */
  user-select: none;
}

.btn--music {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 500;             /* menor que el gate (1000) */
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 10px rgba(0,0,0,.4);
  font: 700 20px/1 "Schoolbell", system-ui, sans-serif;
}

/* ========== Invitado (pg9) ========== */
.pg9.invitado{
  /* ocupa la pantalla como el resto de “pages” */
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
  /* fondo sutil con degradado para separar del gif anterior */
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(255,255,255,.7), rgba(255,255,255,0)) ,
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8));
}

/* Título elegante */
.invitado__titulo{
  font-family: "Dancing Script", cursive;
  font-weight: 600;
  font-size: clamp(28px, 5vw, 48px);
  text-align: center;
  color: #2b2b2b;
  letter-spacing: .5px;
  margin-bottom: 1rem;
  position: relative;
}

.invitado__titulo::after{
  content: "";
  display: block;
  width: 84px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #b08d57, #e7d4a7, #b08d57); /* dorado */
  opacity: .9;
}

/* Tarjeta “glass” */
.invitado__card{
  --card-bg: rgba(255,255,255,.55);
  --card-br: 22px;
  --card-bd: rgba(255,255,255,.7);
  width: min(720px, 92vw);
  padding: clamp(18px, 3.5vw, 32px);
  border-radius: var(--card-br);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  box-shadow:
    0 10px 30px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cardIn .6s ease both;
}

/* Layout con 2 columnas: etiqueta / valor */
.invitado__card p{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
  font-family: "Poiret One", sans-serif;
  font-size: clamp(16px, 2.6vw, 20px);
  color: #333;
}

.invitado__card p:last-child{
  border-bottom: 0;
}

.invitado__card strong{
  color: #6b6b6b;
  font-weight: 600;
  letter-spacing: .4px;
}

.invitado__card span{
  justify-self: start;
  font-weight: 700;
  color: #1f1f1f;
}

/* Badge para el código */
.invitado__card .inv-code span{
  display: inline-block;
  font-family: "Schoolbell";
  letter-spacing: .5px;
  padding: 6px 12px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fff, #f6f3ea);
  border: 1px solid rgba(176,141,87,.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 4px 10px rgba(176,141,87,.18);
  color: #7a5f2b; /* tono dorado oscuro */
}

/* Sutil animación de aparición */
@keyframes cardIn{
  from{ transform: translateY(8px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* Responsive fino: en pantallas muy angostas, stack vertical */
@media (max-width: 420px){
  .invitado__card p{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .invitado__card strong{
    font-size: 14px;
  }
  .invitado__card span{
    font-size: 16px;
  }
}

/* Si usas tema oscuro en algún momento, este modo queda listo */
@media (prefers-color-scheme: dark){
  .pg9.invitado{
    background:
      radial-gradient(1200px 800px at 50% -10%, rgba(30,30,30,.72), rgba(30,30,30,0)),
      linear-gradient(180deg, rgba(24,24,24,.95), rgba(24,24,24,.9));
  }
  .invitado__titulo{ color: #f3f3f3; }
  .invitado__card{
    --card-bg: rgba(30,30,30,.6);
    --card-bd: rgba(255,255,255,.08);
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  .invitado__card p{ color: #e9e9e9; border-color: rgba(255,255,255,.06); }
  .invitado__card strong{ color: #cfcfcf; }
  .invitado__card span{ color: #fff; }
  .invitado__card .inv-code span{
    background: linear-gradient(180deg, #2b2519, #1e1a13);
    border-color: rgba(231,212,167,.25);
    color: #e5cf97;
    box-shadow:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 6px 14px rgba(0,0,0,.32);
  }
}


/* === Formulario de confirmación === */
.invitado__form {
  margin-top: 32px;
  padding: clamp(18px, 3.5vw, 32px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: min(720px, 92vw);
  animation: formIn .6s ease both;
}

.invitado__form-titulo {
  font-family: "Dancing Script", cursive;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: #2b2b2b;
  position: relative;
}

.invitado__form-titulo::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #b08d57, #e7d4a7, #b08d57);
}

/* Campos */
.invitado__form label {
  display: block;
  margin-bottom: 18px;
  font-family: "Poiret One", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #444;
}

.invitado__form input,
.invitado__form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.85);
  font-family: inherit;
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.invitado__form input:focus,
.invitado__form textarea:focus {
  outline: none;
  border-color: #b08d57;
  box-shadow: 0 0 0 2px rgba(176,141,87,0.25);
}

/* Botón */
.btn--confirmar {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #b08d57, #d4b46f);
  box-shadow: 0 6px 16px rgba(176,141,87,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn--confirmar:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(176,141,87,0.45);
}

/* Animación */
@keyframes formIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Responsive */
@media (max-width: 420px) {
  .invitado__form {
    padding: 16px;
  }
  .invitado__form label {
    font-size: 14px;
  }
  .btn--confirmar {
    width: 100%;
    text-align: center;
  }
}


.form-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Reserva espacio para el mensaje y evita que empuje el botón */
.form-msg{
  min-width: 160px;            /* espacio fijo para que no mueva nada */
  white-space: nowrap;         /* no haga salto de línea */
  font-weight: 700;
  color: #1a7f37;              /* verde "éxito" */
  opacity: 0;                  /* oculto por opacidad */
  visibility: hidden;
  transition: opacity .2s ease;
}

/* estado visible sin cambiar el layout */
.form-msg.is-visible{
  opacity: 1;
  visibility: visible;
}

/* (opcional) estilo mientras se envía */
.form-msg.is-sending{
  color: #555;
}


.fb-icon {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;     /* Centra verticalmente */
  width: 100%;             /* Ocupa todo el ancho disponible */
  margin: 10px 0;          /* Opcional: añade espacio arriba/abajo */
}

.fb-icon svg {
  display: block;          /* Evita espacios raros */
}

/* Oculta el botón de música mientras el gate está abierto */
.gate-open #toggle-music {
  display: none !important;
}


.invitado__form {
  display: flex;
  flex-direction: column;
  align-items: center;      /* Centra horizontalmente */
  justify-content: center;  /* Centra verticalmente si tiene altura definida */
  max-width: 400px;         /* Opcional: ancho máximo */
  margin: 0 auto;           /* Centrado horizontal */
  padding: 20px;
  text-align: center;
}


/* ===== Gate elegante ===== */
.gate{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  /* fondo elegante con bokeh suave */
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(255,255,255,.08), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.82));
  backdrop-filter: blur(10px);
}

.gate__card{
  width: min(560px, 92vw);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  animation: gateIn .5s ease both;
}

@keyframes gateIn { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform:none } }

.gate__brand{
  text-align: center;
  margin-bottom: 10px;
}

.gate__monogram{
  width: 64px; height: 64px;
  margin: 0 auto 8px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #b08d57, #e7d4a7);
  color:#1f1f1f;
  font-family: "Dancing Script", cursive;
  font-size: 26px; font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 6px 18px rgba(176,141,87,.35);
}

.gate__title{
  margin: 0;
  font-family: "Dancing Script", cursive;
  font-weight: 600;
  font-size: clamp(28px, 5vw, 40px);
  color: #222;
}

.gate__subtitle{
  margin: 4px 0 0;
  font-family: "Poiret One", sans-serif;
  color: #555;
  font-size: clamp(14px, 2.5vw, 16px);
}

.gate__divider{
  height: 4px;
  border: none;
  margin: 14px auto 12px;
  border-radius: 999px;
  width: 90px;
  background: linear-gradient(90deg, #b08d57, #e7d4a7, #b08d57);
  opacity: .9;
}

.gate__desc{
  margin: 0 0 12px;
  color: #444;
  text-align: center;
  font-size: 0.98rem;
}

.gate__form{ display: grid; gap: 10px; }

.gate__label{
  font-weight: 600;
  color: #2b2b2b;
  margin-bottom: -4px;
}

.gate__inputwrap{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.gate__input{
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid #d6d9e0;
  border-radius: 12px;
  font-size: 1rem;
  letter-spacing: .06em;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.gate__input:focus{
  border-color: #b08d57;
  box-shadow: 0 0 0 2px rgba(176,141,87,.25);
  outline: none;
}

.gate__btn{
  padding: .85rem 1.1rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-family: "Poiret One", sans-serif;
  background: linear-gradient(135deg, #b08d57, #d4b46f);
  box-shadow: 0 8px 18px rgba(176,141,87,.35);
}
.gate__btn:hover{ filter: brightness(1.06); }

.gate__help{ margin: 0; font-size: .9rem; color: #666; text-align: center; }
.gate__error{ margin: 0; color: #b00020; font-weight: 600; text-align: center; }

.gate__secure{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b6b6b;
  font-size: .92rem;
  justify-content: center;
  width: 100%;
}

/* Accesibilidad: cuando el gate está visible, oculta/inhabilita fondo */
body.gate-open #main,
body.gate-open .footer,
body.gate-open .btn--music {
  filter: blur(8px) brightness(.8);
  pointer-events: none;
  user-select: none;
}

/* (ya lo tenías, reforzado) ocultar el botón de música mientras piden código */
.gate-open #toggle-music { display: none !important; }


#toggle-music.btn--music{
  display:flex; align-items:center; justify-content:center;
  line-height:0; /* evita espacio de línea */
  font-size:0;   /* por si queda texto/espacios */
}
#toggle-music svg{ display:block; }