:root{
  --terracota:#D96C4A;
  --marfil:#FAF6F2;
  --carbon:#2A2A2A;
}

/* Reset básico */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  overflow-x:hidden;
  height:auto;
  scroll-behavior:smooth;
}


/* Base */
body{
  min-height:100dvh;
  background:var(--marfil);
  color:var(--carbon);
  font-family:"Poppins", sans-serif;
  display:grid;
  place-items:center;
  padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  -webkit-tap-highlight-color:transparent;
}

/* Página de invitación (full page) */
body.page-invite{
  display:block;
  padding:0;
  background-image:url('../img/papel.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
}

body.page-invite .wrap-full{
  width:100vw;
  max-width:100vw;
  padding:0;
  margin:0;
}

/* Contenedor que controla el "page scroll" */
.snap-container{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
}

/* Intro a pantalla completa con textura de papel */
/* Intro a pantalla completa con textura de papel */
.intro-hero{
  min-height:100svh;
  width:100vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 18px 40px;
  background-image:url('../img/papel.jpg');
  background-size:cover;
  background-position:center;
  position:relative;
}

/* Tarjeta de intro centrada */
.intro-hero-card{
  max-width:680px;
  text-align:center;
}

/* Hint de scroll */
.scroll-hint{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.8;
}

.scroll-text{
  display:block;
  margin-bottom:4px;
}

.scroll-arrow{
  display:block;
  font-size:18px;
  animation:bounce 1.4s infinite;
}

/* Animación de la flecha */
@keyframes bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(4px); }
}



/* Portada full screen */
.hero{
  position:relative;
  height:100svh;
  width:100vw;
  overflow:hidden;
  background-image:var(--bg);
  background-size:cover;
  background-position:var(--bg-pos, 50% 50%);
  background-repeat:no-repeat;
  scroll-snap-align:start; /* Se engancha igual que la intro */
}


.hero2{
  position:relative;
  height:60svh;
  width:100vw;
  overflow:hidden;
  background-image:var(--bg);
  background-size:cover;
  background-position:var(--bg-pos, 50% 50%);
  background-repeat:no-repeat;
}

.hero3{
  position:relative;
  height:30svh;
  width:100vw;
  overflow:hidden;
  background-image:var(--bg);
  background-size:cover;
  background-position:var(--bg-pos, 50% 50%);
  background-repeat:no-repeat;
}

.hero4{
  position:relative;
  height:30svh;
  width:100vw;
  overflow:hidden;
  background-image:var(--bg);
  background-size:cover;
  background-position:var(--bg-pos, 50% 50%);
  background-repeat:no-repeat;
}

/* Tarjeta con nombre en portada */
.names-card{
  position:absolute;
  left:50%;
  bottom:4vh;
  transform:translateX(-50%);
  width:min(640px,92vw);
  background:#fff;
  padding:16px 18px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.18);
  backdrop-filter:blur(2px);
}

.names{
  font-family:"Luxurious Script", cursive;
  font-size:clamp(26px,8vw,40px);
  margin-top:6px;
}

/* Subtítulos / títulos coloreados */
.aviso-blanco{
  margin-top:10px;
  font-weight:500;
  color:#8b4423;
}

/* Intro */
.intro{
  background-image:url('../img/ffpapel.jpg');
  background-size:cover;
  background-position:center;
  padding:22px 18px 40px;
}

/* Tarjeta Intro */
.intro-card{
  border-radius:1px;
  padding:18px 20px;
  text-align:center;
  margin:0 auto;
  max-width:680px;
  background-size:cover;
}

/* Tarjetas estilo papel */
.paper-card{
  background:#fff;
  border-radius:1px;
  padding:18px 20px;
  text-align:center;
  margin:0 auto;
  max-width:680px;
  background-image:url('../img/papel.jpg');
  background-size:cover;
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.10);
}

.titulo-seccion{
  font-family:"Luxurious Script", cursive;
  font-size:clamp(26px,8vw,40px);
  margin-bottom:6px;
}

.intro-texto{
  font-size:clamp(14px,3.5vw,16px);
  line-height:1.55;
  color:#444;
  margin-top:8px;
}

/* Bloques debajo de la portada */
.section-block{
  padding:22px 18px 32px;
}

/* Detalles de la boda */
.detalles-card{
  max-width:700px;
}

.detalles-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
  text-align:left;
  font-size:clamp(14px,3.5vw,15px);
}

.detalle-item{
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.detalle-item:last-child{
  border-bottom:none;
}

.detalle-label{
  font-weight:600;
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  opacity:.8;
}

.detalle-valor{
  display:block;
  margin-top:2px;
}

.detalle-ubicacion .detalle-valor{
  font-weight:500;
}

.detalle-links{
  margin-top:4px;
  font-size:13px;
}

.detalle-links a{
  color:var(--terracota);
  text-decoration:none;
}

.detalle-links a:hover{
  text-decoration:underline;
}

.detalle-sep{
  opacity:.5;
  margin:0 4px;
}

/* Cuenta regresiva – tradicional / rústico */
.countdown-card{
  max-width:700px;
}

.countdown{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:4px;
  margin-top:16px;
  padding:10px 0 6px;
  border-top:1px solid rgba(0,0,0,.18);
  border-bottom:1px solid rgba(0,0,0,.18);
  flex-wrap:wrap;
}

.count-item{
  padding:0 10px;
  position:relative;
}

.count-num{
  display:block;
  font-weight:600;
  font-size:clamp(20px,6vw,24px);
  color:var(--terracota);
  letter-spacing:.04em;
}

.count-label{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.75;
  margin-top:2px;
}

/* Dress code */
.dress-card{
  max-width:700px;
}

/* Imagen dentro de la tarjeta (traje) */
.img-card{
  width:30%;
  height:auto;
  margin:0 auto 12px;
  border-radius:6px;
  display:block;
}

/* Regalos */
.regalos-card{
  max-width:700px;
}

.cuentas{
  margin-top:12px;
  text-align:left;
}

.cuentas-label{
  margin-bottom:4px;
  font-weight:600;
}

.cuentas-lista{
  list-style:none;
  padding-left:0;
  font-size:clamp(14px,3.5vw,15px);
}

.cuentas-lista li + li{
  margin-top:4px;
}

/* Disclaimers */
.disclaimers-card{
  max-width:700px;
}

.disclaimer-lista{
  list-style:disc;
  padding-left:20px;
  text-align:left;
  font-size:clamp(14px,3.5vw,15px);
}

.disclaimer-lista li + li{
  margin-top:6px;
}

/* RSVP por invitado (2 columnas) */
.rsvp-card{
  max-width:700px;
}

.rsvp-descripcion{
  margin-bottom:14px;
  text-align:left;
}

.rsvp-lista{
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:left;
}

.rsvp-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 4px;
  border-bottom:1px solid rgba(0,0,0,.1);
  gap:10px;
}

.rsvp-nombre{
  font-weight:600;
  font-size:clamp(14px,3.6vw,16px);
  flex:1;
}

.rsvp-botones{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.rsvp-btn{
  font-family:"Poppins", sans-serif;
  font-size:13px;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid var(--terracota);
  cursor:pointer;
  transition:background-color .2s ease, transform .1s ease;
  min-width:42px;
}

.rsvp-si{
  background-color:var(--terracota);
  color:#fff;
}

.rsvp-si:hover{
  background-color:#c05c3b;
  transform:translateY(-1px);
}

.rsvp-no{
  background-color:#fff;
  color:var(--terracota);
}

.rsvp-no:hover{
  background-color:#f6e2d9;
  transform:translateY(-1px);
}

/* Estado deshabilitado y seleccionado */
.rsvp-btn:disabled{
  opacity:.6;
  cursor:default;
  pointer-events:none;
  transform:none;
}

/* Botón que fue seleccionado (solo visual) */
.rsvp-btn.selected{
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
}

/* Opcional: diferenciar mejor el SÍ seleccionado */
.rsvp-si.selected{
  background-color:#b14f30;
}

/* Opcional: diferenciar el NO seleccionado */
.rsvp-no.selected{
  background-color:#f3d5c7;
}

/* Mobile: botones ligeramente más compactos */
@media (max-width:400px){
  .rsvp-item{
    padding:8px 0;
  }
  .rsvp-btn{
    font-size:12px;
    padding:7px 12px;
  }
}

/* Sección final de agradecimiento */
.gracias-card{
  max-width:700px;
}

.gracias-nombres{
  font-family:"Luxurious Script", cursive;
  font-size:clamp(24px,7vw,36px);
  color:var(--terracota);
  display:inline-block;
  margin-top:8px;
}

.intro-nombres{
  font-size:clamp(32px, 12vw, 64px);
  margin-top:10px;
  color:#8b4423;
}


/* Ajustes tablet/desktop */
@media (min-width:768px){
  .hero{
    height:92vh;
  }
  .names-card{
    bottom:6vh;
    padding:20px;
    width:min(640px,70vw);
  }
  .names{
    font-size:clamp(32px,5vw,46px);
  }
  .section-block{
    padding:26px 40px 40px;
  }
  .detalles-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:18px;
  }
  .detalle-ubicacion{
    grid-column:1 / -1;
  }
}

@media (min-width:768px){
  .intro-hero{
    padding:40px 40px 48px;
  }
}