:root{
  --brand: #d8a1b4; /* blush */
  --accent: #d4af37; /* gold */
  --bg: #F9F7F3;
  --text: #2b2b2b;
  --muted: #6c757d;
}
*{box-sizing:border-box}
body{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif;background:var(--bg);color:var(--text);scroll-behavior:smooth}
h1,h2,h3,.section-title,.hero-title{font-family:'Playfair Display',Georgia,'Times New Roman',serif}
.navbar-brand{letter-spacing:.04em}
.nav-link{font-weight:500}
.bg-body-tertiary{background:#ffffffd9 !important;backdrop-filter:saturate(180%) blur(10px)}
.section-title{font-weight:700}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* hero: mar + hortensias + pajaritos */
#hero{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.25)),url('../img/fondo.jpg') center/cover no-repeat;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.4))}
.leaf{position:absolute;width:220px;opacity:.55;filter:grayscale(.1) contrast(.95)}
.leaf-left{left:-30px;bottom:10px;transform:rotate(-8deg)}
.leaf-right{right:-30px;top:20px;transform:rotate(8deg)}

.countdown .cd-box{min-width:92px;padding:.75rem 1rem;border-radius:1rem;background:#ffffffc9;color:#111;text-shadow:none}
.countdown .cd-box .num{font-size:1.6rem;font-weight:700;display:block}
.countdown .cd-box .lbl{font-size:.8rem;text-transform:uppercase;letter-spacing:.15em}

/* sections */
.section-fade{opacity:0;transform:translateY(20px);transition:all .6s ease}
.section-fade.in-view{opacity:1;transform:translateY(0)}
.bg-soft{background:#fff}

/* buttons */
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline-primary{border-color:var(--brand);color:var(--brand)}
.btn-outline-primary:hover{background:var(--brand);color:#fff}

/* gifts grid */
.gifts-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width: 992px){ .gifts-grid{grid-template-columns:1fr 1fr} }
.gift-card{display:block;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.06);text-decoration:none;color:inherit;transition:transform .2s ease, box-shadow .2s ease}
.gift-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.08)}
.gift-media img{width:100%;height:260px;object-fit:cover;display:block}
.gift-body{padding:1rem}

/* RSVP gray look */
.rsvp-gray .form-control{background:#f1f3f5;border-color:#e9ecef}

/* footer */
footer{background:#fff;border-top:1px solid rgba(0,0,0,.05)}

/* WhatsApp Floating */
.whatsapp-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;font-size:1.6rem;box-shadow:0 10px 20px rgba(0,0,0,.2);z-index:1040}

/* themes */
body.theme-blush{--brand:#d8a1b4}
body.theme-sage{--brand:#a3b18a}
body.theme-ivorygold{--brand:#b6b6b6}

/* La pedida — detalles estéticos */
.pedida-quote {
  padding-left: 1rem;
  border-left: 4px solid var(--brand);
  color: #495057;
}
.pedida-quote p { font-size: 1.1rem; }

/* Grid visual amable para 3 fotos */
.pedida-grid .photo-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: .5rem;
}
.pedida-grid .photo-card img {
  transition: transform .35s ease, filter .35s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pedida-grid .photo-card:hover img {
  transform: scale(1.03);
  filter: contrast(1.02);
}

#pedida img {
  transition: transform 0.4s ease, filter 0.4s ease;
}
#pedida img:hover {
  transform: scale(1.04);
  filter: brightness(1.05);
}
#pedida .blockquote {
  border-left: 4px solid var(--brand);
  padding-left: 1rem;
  margin-top: 2rem;
  color: #444;
}


/* Nuestra familia — carrusel limpio y elegante */
.familia-carousel { max-width: 980px; }
.familia-carousel .carousel-control-prev,
.familia-carousel .carousel-control-next {
  width: 12%;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.familia-carousel .carousel-control-prev-icon,
.familia-carousel .carousel-control-next-icon {
  background-size: 100% 100%;
}
.familia-carousel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%;
  background-color: var(--brand); /* usa tu color de tema */
  opacity: .35;
}
.familia-carousel .carousel-indicators .active { opacity: 1; }



/* Carrusel elegante para "Retratos de Nuestro Amor" */
.familia-carousel { max-width: 1200px; }
.familia-carousel .carousel-control-prev,
.familia-carousel .carousel-control-next {
  width: 8%;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
.familia-carousel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%;
  background-color: var(--brand);
  opacity: .35;
}
.familia-carousel .carousel-indicators .active { opacity: 1; }

/* Marco tipo "polaroid" sobrio */
.polaroid {
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: .75rem .75rem 1.25rem;
  height: 100%;
}
.polaroid img {
  display: block;
  border-radius: .35rem;
  transition: transform .4s ease, filter .4s ease;
}
.polaroid:hover img {
  transform: scale(1.02);
  filter: brightness(1.03);
}

/* Suavizar el fondo de la sección (tono cálido pastel) */
#familia {
  background: linear-gradient(180deg, #f7efe7 0%, #f9f7f3 100%);
}

/* ===== Retratos: scroll-snap responsivo ===== */
#familia { background: linear-gradient(180deg, #f7efe7 0%, #f9f7f3 100%); }

.snap-wrap {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
}

.snap-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 48px; /* deja espacio para los botones laterales */
}
.snap-scroller::-webkit-scrollbar { display: none; }
.snap-scroller { -ms-overflow-style: none; scrollbar-width: none; }

.snap-slide {
  flex: 0 0 92%;             /* 1 por vista en móvil */
  scroll-snap-align: center;
}
@media (min-width: 768px) {   /* md: 2 por vista */
  .snap-slide { flex-basis: 48%; }
}
@media (min-width: 992px) {   /* lg: 3 por vista */
  .snap-slide { flex-basis: 32%; }
}

/* Marco fotográfico tipo polaroid (ya usado en tu versión previa) */
.polaroid {
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: .75rem .75rem 1.25rem;
  height: 100%;
}
.polaroid img {
  display: block;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: .35rem;
  transition: transform .35s ease, filter .35s ease;
}
.polaroid:hover img { transform: scale(1.02); filter: brightness(1.03); }

/* Botones laterales */
.snap-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #fff; color: #333; font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
  transition: transform .15s ease;
  z-index: 1;
}
.snap-btn:hover { transform: translateY(-50%) scale(1.06); }
.snap-btn.prev { left: 0; }
.snap-btn.next { right: 0; }

/* Puntitos opcionales (si los quieres luego) */
/* .snap-dots { text-align:center; gap:8px; margin-top:10px; }
.snap-dots button{ width:8px;height:8px;border-radius:50%;border:0;background:#00000030 }
.snap-dots button.active{ background:var(--brand); } */


/* Alojamiento & Transporte — tarjetas */
#alojamientos { background: linear-gradient(180deg, #f7efe7 0%, #f9f7f3 100%); }
.stay-card{
  background: #fff9f1;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.stay-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.1);
}
.stay-card h6{
  font-weight: 600;
  letter-spacing: .2px;
}
.stay-card .btn{
  border-color: var(--brand);
  color: var(--brand);
}
.stay-card .btn:hover{
  background: var(--brand);
  color: #fff;
}


/* ===== RSVP Modal ===== */
.rsvp-modal{
  border: 0;
  border-radius: 22px;
  padding: 28px 22px 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.rsvp-close{
  position:absolute; top:14px; right:14px;
  background:#fff; border-radius:50%;
  padding:10px; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.rsvp-icon-wrap{
  position:absolute; left:50%; top:-32px; transform:translateX(-50%);
}
.rsvp-icon{
  width:64px; height:64px; border-radius:50%;
  background:#fff; display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  color: var(--brand); font-size: 28px;
}
.rsvp-form .form-control{
  background:#f6f7f8; border:1px solid rgba(0,0,0,.06);
  border-radius: 12px; padding:.7rem .9rem;
}
.rsvp-form .form-label{ color:#6c757d; }
.modal-backdrop.show{
  backdrop-filter: blur(2px);
}

/* Tarjetas de regalos */
.gift-card { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; overflow:hidden; box-shadow:0 14px 28px rgba(0,0,0,.08); transition:transform .18s ease, box-shadow .18s ease; }
.gift-card:hover { transform:translateY(-2px); box-shadow:0 18px 36px rgba(0,0,0,.1); }
.gift-card .gift-body { padding: .9rem 1rem 1.1rem; }

/* Modal regalo (reusa estilos del modal RSVP) */
.gift-modal .gift-amount { padding:.5rem .75rem; border-radius:999px; }
.gift-modal .gift-kv { display:flex; justify-content:space-between; border-bottom:1px dashed rgba(0,0,0,.08); padding:.5rem 0; }
.gift-modal .gift-kv span { color:#6c757d; font-size:.875rem; }
.gift-modal .gift-kv strong { font-weight:600; }


.gift-card img {
  object-fit: cover;
  width: 100%;
  height: 250px; /* puedes ajustar este valor */
  border-radius: 12px;
}


.gift-card {
  transition: transform .3s ease, box-shadow .3s ease;
  border-radius: 16px;
  overflow: hidden;
}

.gift-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.gift-body h5 {
  color: #333;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2rem;
  color: #2d2d2d;
}

/* === Tarjetas de Regalos === */
.gift-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gift-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.gift-media {
  line-height: 0;
  overflow: hidden;
}

.gift-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1; /* cuadrado por defecto */
  transition: transform .3s ease;
}

@media (min-width: 768px) {
  .gift-img {
    aspect-ratio: 16 / 9; /* panorámico en escritorio */
  }
}

.gift-card:hover .gift-img {
  transform: scale(1.05);
}

.gift-body {
  padding: 16px;
  border-top: 1px solid rgba(0,0,0,.04);
}

.gift-body h5 {
  margin-bottom: 6px;
  color: #222;
}

.gift-body small {
  color: #666;
  font-size: 0.9rem;
}

/* Espaciado más suave en móvil */
@media (max-width: 575.98px) {
  .row.g-4 { --bs-gutter-y: 1.25rem; }
}


/* === Sección RSVP === */
#rsvp {
  background-color: #fffaf5;
  border-top: 1px solid rgba(0,0,0,0.05);
}

#rsvp .section-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2rem;
  color: #183f35;
}

#rsvp p {
  color: #5c5c5c;
  font-size: 1rem;
}

/* Campos más suaves */
#rsvp input, #rsvp select {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 1rem;
}
#rsvp input:focus, #rsvp select:focus {
  border-color: #c7a4f0;
  box-shadow: 0 0 0 0.2rem rgba(199,164,240,.25);
}



/* Botón degradado coherente con el hero */
.btn-rsvp-gradient {
  background: linear-gradient(90deg, #c287f2, #8bb2f2);
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-rsvp-gradient:hover,
.btn-rsvp-gradient:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}


/* ==== LOADER DE ENTRADA ==== */
.loader-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #F9F3E7 0%, #f4e9d6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .6s ease, visibility .6s ease;
}
.loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
}

.loader-heart {
  width: 100px;
  height: 100px;
  margin-bottom: 1.5rem;
  animation: heartbeat 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.15); }
  50% { transform: scale(1); }
}

.loader-title {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  color: #204434;
  margin-bottom: 2rem;
}

/* Botón "Entrar" armonizado con el corazón */
.btn-enter {
  padding: 0.8rem 2.6rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #c68ab7, #a3b3e2);
  border: 1.8px solid #c7a536; /* dorado igual al corazón */
  border-radius: 16px; /* más suave, sin parecer pastilla */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* sombra neutra */
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-enter:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  background: linear-gradient(135deg, #b87fab, #95a8d8);
}

.btn-enter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(199,165,54,0.35);
}



/* ==== FIN LOADER ==== */



/* ==== Historia (layout y responsivo) ==== */
.hist-img { 
  width: 100%; 
  height: auto; 
  object-fit: cover;
  border-radius: 14px;
}
@media (min-width: 992px){
  /* altura visual agradable en desktop, manteniendo proporción */
  .hist-figure { max-height: 520px; overflow: hidden; }
  .hist-img { height: 520px; }
}

/* Espaciado fino para el bloque "Detalles del evento" */
#evento .list-unstyled { margin-bottom: .75rem; }  /* separa lista del grid */
#evento .row.g-3 { margin-bottom: .25rem; }       /* separa tarjetas del botón */

/* Botón RSVP: mejora en móvil */
@media (max-width: 576px){
  #evento .btn { 
    padding-top: .85rem; 
    padding-bottom: .85rem; 
    font-size: 1.05rem;
  }
}


/* Eyebrow más grande en el hero */
.eyebrow.eyebrow-lg { font-size: 1.1rem; }
@media (min-width: 768px){ .eyebrow.eyebrow-lg { font-size: 1.35rem; } }


.gift-kv { display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.gift-kv span { color:#6c757d; margin-right:.5rem; }


/* Footer boda */
.wedding-footer {
  background-color: #f9f9f8;
  border-top: 1px solid #e4e4e4;
  font-family: 'Montserrat', sans-serif;
}

.wedding-footer p {
  color: #6c757d;
  letter-spacing: 0.3px;
}

@media (min-width: 768px) {
  .wedding-footer {
    padding: 1.5rem 0;
  }
}

/* ==== Sección Nuestra historia ==== */
#historia {
  padding-top: 4rem;       /* espacio arriba */
  padding-bottom: 4rem;    /* espacio abajo */
}

#historia .container {
  max-width: 1100px;       /* ancho más controlado */
}

#historia .row {
  align-items: center;     /* alinea verticalmente imagen y texto */
  gap: 2rem;               /* espacio entre columnas */
}

#historia img {
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  margin-bottom: 1rem;
}

#historia .section-title {
  margin-bottom: 1.5rem;
}

#historia p {
  line-height: 1.8;
}

#historia {
  background-color: #fdfcfb;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}


/* ============ RSVP: éxito visible y suave ============ */
#rsvp-success {
  opacity: 0;
  transition: opacity .25s ease;
}

/* Cuando se quite d-none (Bootstrap), que aparezca */
#rsvp-success:not(.d-none) {
  opacity: 1;
}


/* ===== WhatsApp: animaciones periódicas ===== */
@keyframes vibrar {
  0%,100% { transform: translate(0); }
  20% { transform: translate(-2px, 0); }
  40% { transform: translate(2px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
}
@keyframes flotar {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.whatsapp-float.vibrate { animation: vibrar .45s ease; }
.whatsapp-float.bounce  { animation: flotar 1s ease-in-out; }

/* efecto hover (opcional) */
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}

.gift-body small {
  display: block;
  color: var(--brand);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(216,161,180,0.2);
  transition: all 0.3s ease;
}

.gift-card:hover small {
  transform: scale(1.05);
  opacity: 0.9;
}