:root{
  --cream:#EDEAE2;
  --blue:#45708E;
  --red:#B8534B;
  --bluegray:#A9B4BA;
  --radius:16px;
}

/* Fondo con pattern + velo (fade) */
html,body{height:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#1a1a1a;
  background-color:var(--cream);
  background-image:url('/assets/patterns/doodles.png');
  background-repeat:repeat;
  background-size:200px auto;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:rgba(255,255,255,.55); /* ajustá opacidad del velo */
  z-index:0;
}

.container{max-width:1100px;margin:0 auto;padding:24px;position:relative;z-index:1}

/* Hero */
.hero{text-align:center;padding:24px 16px}
.title{
  font-family:'Pacifico',cursive;margin:0;
  font-size:clamp(52px, 9vw, 110px); color:var(--red);
}
.subtitle{margin:8px 0 12px;color:#333}

/* Countdown digital */
.countdown{
  display:inline-flex; gap:8px; margin-bottom:14px;
  align-items:center; justify-content:center; flex-wrap:wrap;
}
.countdown .box{
  background:#fff; border:1.5px solid var(--bluegray);
  border-radius:12px; padding:10px 12px; min-width:62px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-weight:800; color:#222; text-align:center;
}
.countdown .label{display:block;font-size:12px;color:#666;margin-top:2px}

/* Botones / filas */
.btn{display:inline-block;padding:10px 16px;border-radius:999px;border:2px solid var(--blue);
  text-decoration:none;color:var(--blue);font-weight:700;background:transparent}
.btn.primary{background:var(--red);color:white;border-color:var(--red)}
.btn.outline{background:transparent}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* Collage superior */
.mini-collage{
  width:100%;
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  gap:12px;
  padding:12px clamp(12px, 4vw, 40px);
  box-sizing:border-box;
  position:relative; z-index:1;
}
.mini-collage img{
  width:100%; height:72px; object-fit:cover; border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.08); background:#fff;
}
@media (max-width:800px){
  .mini-collage{ grid-template-columns:repeat(5,1fr); }
  .mini-collage img{ height:56px; }
}

/* Eventos */
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.event-card{background:white;border:1px solid var(--bluegray);border-radius:var(--radius);padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.event-card h2{margin:0 0 8px;color:var(--blue)}

/* Mapas embebidos (Google Maps iframe) */
.map-embed{
  border-radius:12px; overflow:hidden; margin:8px 0;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.map-embed iframe{
  width:100%; height:240px; border:0;
}
.map-link a{color:var(--red);font-weight:700}

/* RSVP en tarjeta blanca (más contraste) */
.rsvp{margin-top:8px}
.rsvp .card-row{
  background:#fff; border:1px solid var(--bluegray);
  border-radius:16px; padding:16px; box-shadow:0 6px 20px rgba(0,0,0,.06)
}

/* Regalos + Info */
.gifts{background:#fff3f2;border-top:1px solid var(--bluegray);border-bottom:1px solid var(--bluegray)}
.gifts h2{margin:0 0 8px;color:var(--blue)}
.alias{color:#444}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:white;border:1px solid var(--bluegray);border-radius:var(--radius);padding:16px}

/* Carrusel */
.carousel-wrap{margin-top:12px}
.carousel-wrap h2{margin-bottom:12px;color:#222}
.carousel{
  position:relative;
  border-radius:16px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.10); background:#fff;
}
.carousel img{width:100%; height:420px; object-fit:cover; display:block}
@media (max-width:900px){ .carousel img{ height:260px; } }
.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.9); border:none; font-size:44px;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  line-height:44px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.15)
}
.nav:hover{background:#fff}
.prev{left:12px} .next{right:12px}
.dots{display:flex; gap:8px; justify-content:center; margin-top:10px}
.dots button{width:10px; height:10px; border-radius:50%; border:0; background:#c9cfd3; cursor:pointer}
.dots button.active{ background:var(--red); }

.faq details{background:white;border:1px solid var(--bluegray);border-radius:12px;padding:12px;margin-bottom:8px}
.photos{text-align:center}
.footer{text-align:center;padding:24px;color:#666}
