:root{
  --bg:#f7f5f0;
  --sage:#7C9082;
  --gold:#D4AF37;
  --text:#2f2f2f;
  --muted:#6b6b6b;
  --card:#ffffff;
}
html,body{height:100%;}
/* --- FIX full width + sin desborde --- */
html, body { overflow-x: hidden; }
body{font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}

/* Loader */
.preloader-area{position:fixed;inset:0;z-index:9999;background:var(--bg);}
.loader{width:64px;height:64px;border-radius:50%;border:4px solid rgba(124,144,130,.25);border-top-color:var(--sage);animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.content-portada{
  padding: 20px;
}

.portada{
  position: relative;
  color:#fff;
  overflow:hidden;
  background-image: url("../img/portada.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 20% 35%;
  min-height: 100vh;          /* desktop: ocupa pantalla */
  background-attachment: fixed;
}

/* Portada mobile */
@media (max-width: 768px){
  .portada{
    background-image: url("../img/portada-1.jpg");
    background-position: 65% 25%;
    min-height: 107vh;
    background-attachment: fixed;
  }
}

/* Pantallas grandes */
@media (min-width: 1200px){
  .portada{
    min-height: 143vh;        /* enseña más foto en desktop grande */
    background-position: 20% 28%;
  }
}


.portada::before{
  content:"";
  position:absolute;
  inset:0;
  background-color: rgba(74, 79, 96, 0.35);
  z-index:0;
}

@media (max-width: 768px){
    .portada::before{
      background-color: rgba(74, 79, 96, 0.24);
    }
}

.portada::after{
    background-image: url(../img/img_ondas01.svg);
    position: absolute;
    content: '';
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 100%;
    width: 100%;
    bottom: 0%;
    z-index: 9;
}

.portada > *{
  position:relative;
  z-index:1;
}
.box-nombres-fecha-portada .fecha{display:inline-block;letter-spacing:.25em;border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.5);padding:.5rem 1.5rem;font-size:2.9rem;}

@media (max-width: 768px){
  .box-nombres-fecha-portada .fecha{font-size: 1.2rem;}
}
.box-nombres-fecha-portada h1, h2, h3{font-family:"Cookie",cursive;font-size:clamp(3.2rem,6vw,6rem);line-height:.9;margin:1rem 0 2.5rem;}
.box-nombres-fecha-portada h1 span{font-family:"Open Sans",sans-serif;font-size:.55em;display:inline-block;width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:50%;line-height:44px;background:rgba(255,255,255,.15);}
.box-nombres-fecha-portada .line{width:120px;height:2px;background:rgba(255,255,255,.55);margin:.6rem auto 0;}
.box-frase-portada{max-width:750px;margin:1.8rem auto 0;font-style:italic;font-weight:300;color: black;text-align: center;}
.box-frase-portada .comilla{font-family:"Cookie",cursive;font-size:3rem;opacity:.9;}
.box-frase-portada .comilla.subtitle{font-family:"Cookie",cursive;font-size:2.5rem;opacity:.9;}

@media (max-width: 768px){
 .box-frase-portada .comilla.subtitle{font-family:"Cookie",cursive;font-size:1.5rem;opacity:.9;}
}


.flecha-continuar{margin-top:2.5rem;width:28px;height:48px;border:2px solid rgba(255,255,255,.55);border-radius:20px;position:relative;opacity:.9;}
.flecha-continuar:after{content:"";position:absolute;left:50%;top:10px;width:6px;height:6px;background:rgba(255,255,255,.85);border-radius:50%;transform:translateX(-50%);animation:down 1.2s infinite;}
@keyframes down{0%{transform:translate(-50%,0);opacity:1;}100%{transform:translate(-50%,18px);opacity:0;}}

/* Decorative blobs */
.portada-flor-izq-sup,.portada-flor-der-inf,.portada-flor-izq-inf,.ceremonia-fiesta-flor-der,.regalos-flor-der{
  position:absolute;width:240px;height:240px;opacity:.35;
  background:radial-gradient(circle at 30% 30%, rgba(214,175,55,.55), transparent 55%),radial-gradient(circle at 60% 60%, rgba(124,144,130,.55), transparent 55%);
  z-index:1;
  pointer-events:none;
}
.portada-flor-izq-sup{top:-60px;left:-60px;}
.portada-flor-der-inf{bottom:-80px;right:-80px;}
.portada-flor-izq-inf{bottom:-80px;left:-80px;}
.ceremonia-fiesta-flor-der{top:-40px;right:-60px;}
.regalos-flor-der{top:-40px;right:-60px;}
.regalos .place-thumb{
  width: 300px;
  height: 300px;
}

/* Countdown */
.cuenta-regresiva{padding:3.5rem 0;position:relative;}
.cuenta-regresiva .cuenta-lead{font-size: 2.5rem;line-height: 44px;}
.box-aros{width:320px;height:320px;margin:0 auto;position:relative;}
.box-aros::before{
  content:"";
  position:absolute;
  inset: 0;                 /* ocupa todo el box-aros */
  background: url("../img/img_circulo01.svg") no-repeat center;
  background-size: contain;  /* ajusta el SVG dentro */
  pointer-events: none;
  z-index: 2;                /* detrás */
}

.box-aros > *{
  position: relative;
  z-index: 1;
}
.box-circulo{width:260px;height:260px;background:var(--card);border-radius:50%;border:4px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.12);position:relative;z-index:2;padding-top:3.2rem;}
.falta{color:var(--gold);font-style:italic;font-weight:600;}
.reloj{
  margin-top: 1.1rem;
  display: flex;
  justify-content: center;
  gap: 0.7rem;
}
.reloj-col{border-right:1px solid #eee;padding-right:1.2rem;}
.reloj-col.no-border{border-right:none;padding-right:0;}
.reloj .number{display:block;font-weight:700;font-size:2rem;color:var(--sage);line-height:1;}
.reloj .time{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#a0a0a0;}
.corazon-falta{width:34px;height:34px;margin-top:.9rem;background:var(--sage);transform:rotate(45deg);position:relative;border-radius:6px;opacity:.9;}
.corazon-falta:before,.corazon-falta:after{content:"";width:34px;height:34px;background:var(--sage);border-radius:50%;position:absolute;}
.corazon-falta:before{left:-17px;top:0;}
.corazon-falta:after{left:0;top:-17px;}

.it-card{
    display: flex;
    flex-direction: column;
    height: 770px;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
    position: relative;
}

  .it-card .it-actions{
    position: absolute;
    bottom: 0;
  }

.it-card .it-heading{
  color:var(--sage);
  font-size: clamp(3.2rem, 5vw, 6rem);
}

@media (max-width: 768px){

  .it-card{
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
    position: relative;
}
  .it-card .it-actions{
    position: relative;
  }


}


/* Ceremony / party */
.place-thumb{
  width: 400px;           /* ajusta tamaño */
  height: 400px;          /* igual que width para círculo */
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;

  /* borde + look */
  border: 4px solid #fff;                 /* aro blanco */
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.place-thumb::before{
  content:"";
  position:absolute;
  inset:-8px;                              /* aro exterior */
  border-radius: 50%;
  border: 1px solid var(--gold);           /* dorado */
  opacity: .85;
  pointer-events:none;
}

.place-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;                       /* recorta sin deformar */
  object-position: center;                 /* centra recorte */
  display: block;
  filter: grayscale(.2);
  transition: transform .35s ease, filter .35s ease;
}

.place-thumb:hover img{
  transform: scale(1.04);
  filter: grayscale(0);
}

/* Mobile */
@media (max-width: 768px){
  .place-thumb{
    width: 300px;
    height: 300px;
  }
}
.ceremonia-fiesta{padding:3.5rem 0;position:relative;}
.ceremonia-fiesta h3{font-family:"Cookie",cursive;font-size:3rem;color:var(--sage);}
.info-col{max-width:340px;margin:0 auto;}
.info-box{margin:1.4rem 0;}
.info-box h6{font-weight:700;margin-bottom:.35rem;}
.info-box p{margin:0;color:var(--muted);}
.boton{display:inline-block;margin-top:.7rem;padding:.55rem 1.4rem;border:1px solid #dcdcdc;border-radius:999px;text-transform:uppercase;font-weight:700;letter-spacing:.12em;font-size:.72rem;color:#555;background:rgba(255,255,255,.55);transition:.2s ease;}
.boton:hover{text-decoration:none;background:#fff;border-color:#cfcfcf;color:#333;}

/* Place cards (Ceremonia / Celebración) */
.place-card{max-width:420px;margin:0 auto;}
.place-name{margin:0;font-weight:800;color:var(--text);}
.place-address{margin:.25rem 0 0;color:var(--muted);}
.place-actions{margin-top:1rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;}


/* Gallery */
.galeria{padding:3.5rem 0 2.5rem;background:#f3f1ec;}
section .title{font-family:"Cookie",cursive;font-size:3.5rem;color:var(--sage);}
.galeria .subtitle{color:var(--muted);margin-bottom:1rem;}
.content-fotos{position:relative;padding:0 10px;}
.shadow-left,.shadow-right{position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;}
.shadow-left{left:0;background:linear-gradient(90deg,#f3f1ec,rgba(243,241,236,0));}
.shadow-right{right:0;background:linear-gradient(270deg,#f3f1ec,rgba(243,241,236,0));}
.polaroid{background:#fff;padding:12px 12px 28px;box-shadow:0 15px 35px rgba(0,0,0,.12);transform:rotate(1deg);}
.polaroid img{width:100%;height:240px;object-fit:cover;transition:.35s ease;}
.polaroid:hover img{filter:grayscale(0);}
.slick-slide{padding:0 10px;}
.slick-dots li button:before{font-size:10px;}
.slick-dots li.slick-active button:before{color:var(--sage);}



/* Full-bleed: el carrusel ocupa 100vw aunque arriba uses .container */
.galeria .content-fotos{
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 0;                 /* quita el padding aquí (lo gestionan los slides) */
}

/* Compensa el padding lateral de .slick-slide */
.galeria .carrusel .slick-list{
  margin: 0 -10px;            /* mismo valor que el padding del slide */
  overflow: hidden;
}

/* Seguridad */
.galeria .carrusel .slick-slide{
  box-sizing: border-box;
}
.galeria .polaroid img{
  display:block;
}

/* === GALERIA: polaroid siempre con proporción (NO alargada en desktop) === */

/* El carrusel puede ser full width sin que el contenido se estire */
.galeria .content-fotos{
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}

/* Slick: evita márgenes raros y centra */
.galeria .carrusel{
  width: 100%;
  max-width: 100%;
}

.galeria .slick-list{
  overflow: hidden;
}

.galeria .slick-slide{
  padding: 0 14px;         /* separación entre polaroids */
  display: flex !important;
  justify-content: center;  /* centra el polaroid dentro del slide */
}

/* El “marco polaroid” mantiene tamaño consistente */
.galeria .polaroid{
  background: #fff;
  padding: 12px 12px 28px;
  box-shadow: 0 15px 35px rgba(0,0,0,.12);
  transform: rotate(1deg);

  width: 100%;
  max-width: 360px;   /* tamaño polaroid en desktop */
}

/* La imagen NO se alarga: alto fijo + cover */
.galeria .polaroid img{
  display: block;
  width: 100%;
  height: 260px;       /* alto consistente en desktop */
  object-fit: cover;   /* recorta sin deformar */
  border-radius: 2px;
  transition: .35s ease;
}

.galeria .polaroid:hover img{
  filter: grayscale(0);
}

/* Ajustes responsive */
@media (max-width: 992px){
  .galeria .polaroid{ max-width: 320px; }
  .galeria .polaroid img{ height: 240px; }
}

@media (max-width: 480px){
  .galeria .polaroid{ max-width: 92vw; }
  .galeria .polaroid img{ height: 240px; }
}

.galeria .slick-slide{
  padding: 0 6px !important;   /* antes 14px */
  display: flex !important;
  justify-content: center;
}

.slick-dotted.slick-slider {
    margin-bottom: 64px;
}

.slick-dots {
    bottom: -58px;
}

/* Transporte */

.transporte .it-card{
  height: auto;
}

/* Fiesta */
.fiesta{padding:3.5rem 0;}
.fiesta .title{font-family:"Cookie",cursive;font-size:3.5rem;color:var(--sage);}
.fiesta .subtitle{color:var(--muted);margin-bottom:2rem;}
.item-fiesta{margin-top:1.2rem;}
.content-item-fiesta{background:var(--card);border:1px solid #ececec;padding:2rem 1.5rem;border-radius:14px;min-height:330px;box-shadow:0 8px 25px rgba(0,0,0,.06);}
.content-item-fiesta h3{color:var(--gold);font-weight:800;}
.content-item-fiesta p{color:var(--muted);font-size:.95rem;}
.content-anim-fiesta{height:72px;display:flex;align-items:center;justify-content:center;}
.anim-anillos,.anim-fiesta,.anim-galeria,.anim-musica,.anim-vestuario,.anim-tips,.anim-regalos,.anim-instagram{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(212,175,55,.55), rgba(124,144,130,.25));border:1px solid rgba(124,144,130,.25);}

/* Regalos */
.regalos{padding:3.5rem 0;position:relative;background:var(--bg);}
.regalos .title{font-family:"Cookie",cursive;font-size:3.5rem;color:var(--sage);}
.regalos .subtitle{color:var(--muted);}

/* Footer */
.footer{padding:2.2rem 0;background:#fff;}
.col-nombres-footer h4{font-family:"Cookie",cursive;font-size:3rem;color:var(--sage);margin:0;}
.col-nombres-footer h4 span{font-family:"Open Sans";color:var(--sage);font-size:.55em;}
.col-acciones-footer ul{list-style:none;padding:0;margin:0;}
.col-acciones-footer li{margin:.35rem 0;}
.col-acciones-footer a{color:#777;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;}
.col-acciones-footer a:hover{text-decoration:none;color:var(--sage);}

.firma{background:var(--sage);color:#fff;padding:1rem 0;}
.firma p{margin:0;font-size:.85rem;}
.heart{opacity:.95;}

/* Map loader */
.map-loader{display:flex;align-items:center;justify-content:center;height:120px;}
.map-spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(124,144,130,.25);border-top-color:var(--sage);animation:spin 1s linear infinite;}

@media (max-width: 768px){
  .col-nombres-footer{justify-content:center !important;margin-bottom:10px;}
  .box-aros{width:300px;height:300px;}
  .box-circulo{width:250px;height:250px;}
}

/* Asistencia */
.asistencia{padding:3.5rem 0;background:var(--bg);}
.asistencia .subtitle{color:var(--muted);max-width:780px;margin:0 auto 1.6rem;}

.asistencia-card{
  background:var(--card);
  border:1px solid #ececec;
  border-radius:18px;
  padding:1.6rem 1.4rem;
  box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.asistencia .question{
  font-weight:800;
  color:var(--text);
  font-size:.95rem;
  margin-bottom:.55rem;
}

.asistencia .form-control{
  border-radius:14px;
  border:1px solid #e7e3db;
  padding:.75rem .9rem;
  background:#fff;
}
.asistencia .form-control:focus{
  box-shadow:0 0 0 .2rem rgba(124,144,130,.15);
  border-color:rgba(124,144,130,.45);
}

.radio-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.radio-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .9rem;
  border:1px solid #e7e3db;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  background:#fff;
}
.radio-pill input{accent-color: var(--sage);}

#asistenciaMsg{min-height:18px;text-align:center;}
#asistenciaMsg.ok{color:var(--sage);font-weight:800;}
#asistenciaMsg.err{color:#b54a4a;font-weight:800;}

.asistencia-note{color:var(--muted);}

/* Honeypot hidden */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* MODAL FOTO */
/* Modal foto responsive (no se sale de la pantalla) */
.modal-foto .modal-dialog{
  width: min(92vw, 980px);
  margin: 1.2rem auto;
}

.modal-foto .modal-content{
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}

/* Body ocupa el alto disponible del viewport */
.modal-foto .modal-body{
  padding: 0;
  max-height: calc(92vh - 56px); /* 56px aprox header */
  overflow: hidden;
}

/* La imagen encaja sin deformarse */
.modal-foto #modalFotoImg{
  width: 100%;
  height: calc(92vh - 56px);
  object-fit: contain;       /* clave: no recorta, no deforma */
  display: block;
  background: #111;          /* marco elegante para fotos verticales */
}

/* En móvil, aún más ajustado */
@media (max-width: 576px){
  .modal-foto .modal-dialog{
    width: 94vw;
    margin: .8rem auto;
  }
  .modal-foto .modal-body{
    max-height: calc(94vh - 52px);
  }
  .modal-foto #modalFotoImg{
    height: calc(74vh - 52px);
  }
}

/* Botón cerrar circular */
.modal-foto .modal-header{
  position: relative;
  border: 0;
  padding: .6rem .6rem 0 .6rem;
  background: transparent;
}

.modal-foto .close-circle{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  outline: none;
  line-height: 1;
}

.modal-foto .close-circle span{
  font-size: 26px;
  color: #222;
  transform: translateY(-1px);
}

.modal-foto .close-circle:hover{
  background: #fff;
}

.modal-foto .modal-header{
  position: absolute;
  top: 29px;
  right: 29px;
  z-index: 5;
  padding: 0;
}


/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f3f1ec;          /* fondo (puedes cambiarlo) */
}

::-webkit-scrollbar-thumb {
  background: #7c9082;          /* tu verde */
  border-radius: 999px;
  border: 3px solid #f3f1ec;    /* “aire” alrededor */
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7f72;          /* un pelín más oscuro al hover */
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #7c9082 #f3f1ec;
}