#home-image {
  animation: pulse 2s infinite;
 
  display: block;
  will-change: transform;
  transform-origin: center;

}


.sector {
    min-height: 80vh;              /* full screen */
    display: flex;
    flex-direction: column;
    justify-content: center;        /* vertical centering */
    align-items: center;            /* horizontal centering */
    background-color: #FFFBF7;      /* white */
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 40px;                  /* small padding for mobile */
}

.title {
  font-family: 'Amoresa', cursive;
  font-size: 30px;
  display: inline-block;
  position: relative;
}


.responsive-fechaylu {
      display: block;
      width: clamp(430px, 80%, 800px);
      height: auto;
      margin: 0 auto;
}

.responsive-programa {
      display: block;
      width: clamp(400px, 80%, 800px);
      height: auto;
      margin: 0 auto;
}

.responsive-image-vestimenta {
      display: block;
      width: clamp(400px, 80%, 650px);
      height: auto;
      margin: 0 auto;
}

.responsive-image-regalos {
      display: block;
      width: clamp(400px, 90%, 1200px);
      height: auto;
      margin: 0 auto;
}

.responsive-image-recomendaciones {
      display: block;
      width: clamp(400px, 100%, 1400px);
      height: auto;
      margin: 0 auto;
}


.responsive-image-recuerditos {
      display: block;
      width: clamp(100px, 45%, 150px);
      height: auto;
      margin: 0 auto;
}     

@media (max-width: 600px){

  .responsive-image-regalos,
  .responsive-image-recomendaciones{
    width: 120vw;                /* más grande que la pantalla */
    max-width: 115vw;
    margin-left: -7.5vw;         /* centra al desbordar */
    height: auto;
  }

}
.click-imagen{
  font-family: 'GildaDisplay', serif;
}
/* ===== Hospedaje como texto (reemplazo de imagen) ===== */
.hospedaje-block{
  width: min(92vw, 900px);
  margin: 12px auto 0;
  font-family: 'GildaDisplay', serif;
  color: #2b2b2b;
  line-height: 1.35;
}

.hospedaje-item{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.hospedaje-nombre{
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: clamp(16px, 2.6vw, 18px);
  margin-bottom: 4px;
}

.hospedaje-dir{
  font-size: clamp(14px, 2.3vw, 16px);
  opacity: 0.95;
}

.hospedaje-tel{
  display: inline-block;
  margin-top: 4px;
  font-size: clamp(14px, 2.3vw, 16px);
  color: inherit;
  text-decoration: none;
  opacity: 0.95;
}

.hospedaje-tel:hover{
  text-decoration: underline;
}

.sector-hospedaje{
  align-items: center;   /* asegura centrado en flex */
}

.hospedaje-block{
  width: min(92vw, 900px);
  margin: 0 auto;        /* centrado real */
  text-align: center;    /* centra texto */
  padding: 0 10px;
}

/* Más legible en móvil */
@media (max-width: 600px){
  .hospedaje-block{
    width: 94vw;
  }
  .hospedaje-item{
    padding: 14px 10px;
  }
}

/* ===== HERO layout: rojo centrado, M&D fijo abajo ===== */
.sector.sector-hero{
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: clamp(16px, 4vw, 40px);
}

.hero-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
  gap: clamp(8px, 2vw, 14px);

  padding-bottom: clamp(90px, 16svh, 150px);
}
.hero-sound{ width: clamp(160px, 45vw, 300px); height:auto; }
.hero-home{  width: clamp(220px, 70vw, 420px); height:auto; }
.hero-des{   width: clamp(120px, 35vw, 160px); height:auto; }

/* M&D abajo fijo */
.hero-bottom{
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(60px, 10svh, 110px); 
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* M&D más pequeño */
.hero-myd{
  width: clamp(120px, 34vw, 220px);
  max-height: 10svh;
  height: auto;
  object-fit: contain;
}

@media (min-width: 900px){
  .hero-bottom{
    bottom: 120px;   
  }

  .hero-myd{
    width: 200px;    
  }
}


/*
@media (max-width: 420px){
  .hero-myd{
    width: clamp(160px, 52vw, 300px);
    max-height: 16svh;
  }
} */


@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}


.sector.sector-fechaylugar{
  min-height: auto;
  padding-top: 24px;
  padding-bottom: 8px;  /* <-- reduce al mínimo el espacio antes de Programa */
  gap: 12px;
}

/* centra el link y la imagen */
.sector-fechaylugar .map-link{
  display: flex;
  justify-content: center;
  width: 100%;
}

.responsive-fechaylu{
  display: block;
  margin: 0 auto;                /* centra */
  width: min(92vw, 720px);       /* responsivo */
  height: auto;
}



.sector.sector-programa{
  min-height: 100svh;              /* NO 150svh */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: clamp(16px, 4vw, 40px);
  padding-bottom: clamp(120px, 18svh, 200px); /* <-- reserva espacio para el M&D */
  gap: 14px;
}

.responsive-programa{
  width: min(92vw, 820px);
  height: auto;
  display: block;
  margin: 0 auto;

  object-fit: contain;
}

.hero-bottom--programa{
  bottom: clamp(10px, 2svh, 18px);
}

.hero-myd--programa{
  width: clamp(120px, 30vw, 220px); /* un poco más discreto en este sector */
  max-height: 10svh;
}


/* ===== Programa: en móvil, NO absoluto para evitar espacio muerto ===== */
@media (max-width: 768px){
  .sector.sector-programa{
    min-height: auto;                 /* que mida lo que necesita */
    padding-bottom: 24px;             /* mucho menos */
  }

  .sector-programa .hero-bottom{
    position: static;                 /* vuelve al flujo normal */
    margin-top: 14px;
    padding-bottom: 0;
  }

  .sector-programa .hero-myd{
    width: clamp(110px, 34vw, 200px);
    max-height: 9svh;
  }

  .sector-programa .responsive-programa{
    max-height: none;                 /* deja que ocupe lo que necesite */
  }
}



.sector-vestimenta{
  min-height: auto;            /* que mida lo que necesita */
  padding-bottom: 24px;
  position: relative;
}

/* En esta sección NO queremos absolute */
.sector-vestimenta .hero-bottom{
  position: static;            /* 🔥 clave */
  margin-top: 24px;
  display: flex;
  justify-content: center;
}


.responsive-image-vestimenta{
  display: block;
  margin: 0 auto;                 /* centra */
  width: 100%;                    /* usa el ancho del contenedor */
  max-width: min(92vw, 900px);    /* límite responsivo */
  height: auto;
}

.responsive-image-regalos{
  display: block;
  margin: 0 auto;                 /* centra */
  width: 100%;                    /* usa el ancho del contenedor */
  max-width: min(92vw, 900px);    /* límite responsivo */
  height: auto;
}

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

.sector-hospedaje .hospedaje-block{
  width: 100%;              /* en vez de vw */
  max-width: 900px;         /* mantiene límite en desktop */
  margin: 0 auto;
}

/* ✅ En móvil: menos padding para que todo quepa centrado */
@media (max-width: 600px){
  .sector{
    padding: 20px 16px;     /* antes era 40px */
  }
}

.title-with-icon{
  display: flex;
  align-items: center;
  justify-content: center;   /* mantiene el bloque centrado */
  gap: 12px;
  position: relative;
}

/* Ajuste del título */
.title-with-icon .title{
  margin: 0;
}

/* Icono pequeño */
.icon-chinchita{
  width: 50px;
  position: relative;
  top: -6px; 
}

/* Tamaño elegante del M&D */
.sector-vestimenta .hero-myd{
  width: clamp(110px, 32vw, 200px);
  max-height: 9svh;
}


.hero-bottom--flow{
  position: static !important;
  margin-top: 22px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.hero-myd--flow{
  width: clamp(110px, 32vw, 200px);
  max-height: 9svh;
  height: auto;
  object-fit: contain;
}



/* ===== FIX myd.png en COUNTDOWN (móvil) ===== */

/* ===== COUNTDOWN: evitar que M&D se encime (forzar en flujo) ===== */
.sector-countdown{
  padding-bottom: 24px; /* ya no necesitamos reservar tanto para absolute */
}

/* En countdown, hero-bottom NO debe ser absolute */
.sector-countdown .hero-bottom{
  position: static !important;
  margin-top: 14px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* Tamaño consistente */
.sector-countdown .hero-myd{
  width: clamp(110px, 32vw, 200px);
  max-height: 9svh;
  height: auto;
  object-fit: contain;
}

/* Cancela tu regla que lo agranda en pantallas muy pequeñas */
@media (max-width: 420px){
  .sector-countdown .hero-myd{
    width: clamp(110px, 32vw, 200px);
    max-height: 9svh;
  }
}

/* ===== REGALOS DECORATIVOS ===== */

.regalos-block{
  width: min(92vw, 700px);
  margin: 0 auto;
  text-align: center;
  font-family: 'GildaDisplay', serif;
  color: #2b2b2b;
  line-height: 1.6;
  position: relative;
}

.regalos-title{
  font-family: 'Amoresa', cursive;
  font-size: clamp(28px, 5vw, 42px);
  margin-bottom: 18px;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.regalos-text{
  font-size: clamp(15px, 3.5vw, 18px);
  margin-bottom: 18px;
}

.regalos-subtitle{
  font-family: 'Amoresa', cursive;
  font-size: clamp(20px, 4vw, 26px);
  color: #d6a3a3;
  margin-top: 25px;
  margin-bottom: 12px;
}

.regalos-bank p{
  margin: 4px 0;
  font-size: clamp(15px, 3.5vw, 17px);
}

/* Línea fina elegante */
.regalos-divider{
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin: 22px auto;
  width: 60%;
}


/* ===== ICONOS EN IMAGEN (avión + sobre) ===== */

.decoracion-avion,
.decoracion-sobre{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 14px 0;
}

.icono-avion{
  width: clamp(18px, 3.8vw, 28px);
  height: auto;
  opacity: 0.85;
  transform: rotate(-10deg);
}

.icono-sobre{
  width: clamp(20px, 4.2vw, 32px);
  height: auto;
  opacity: 0.85;
}

/* En móvil que no se vean gigantes */
@media (max-width: 600px){
  .icono-avion{ width: 22px; }
  .icono-sobre{ width: 26px; }
}

/* ===== Ajuste para que se parezca a la imagen 2 ===== */

.regalos-like-img2{
  width: min(92vw, 720px);
}

/* Texto un poquito más compacto como invitación */
.regalos-like-img2 .regalos-text{
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Contenedor donde vive corazón + trayectoria + avión */
.regalos-copy{
  position: relative;
  max-width: 560px;
  margin: 0 auto 10px;
}

/* Corazón al final del párrafo (como en la imagen 2) */
.regalos-heart{
  display: inline-block;
  margin-left: 6px;
  color: #d6a3a3;
  font-size: 18px;
  transform: translateY(-1px);
}

/* Avión a la derecha, flotando */
.regalos-plane{
  position: absolute;
  right: -18px;
  top: 56px;
  width: clamp(22px, 3.8vw, 30px);
  height: auto;
  opacity: 0.9;
}


/* Quita divisores si los tenías puestos */
.regalos-like-img2 .regalos-divider{
  display: none;
}

/* Datos bancarios: separación más parecida */
.regalos-like-img2 .regalos-subtitle{
  margin-top: 14px;
  margin-bottom: 10px;
}

.regalos-like-img2 .regalos-bank{
  margin-bottom: 12px;
}

/* Lluvia de sobres: icono a la izquierda del título */
.regalos-lluvia-title{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.regalos-envelope{
  width: clamp(18px, 3.2vw, 24px);
  height: auto;
  opacity: 0.9;
  transform: rotate(-8deg);
}

/* Texto lluvia un poco más angosto */
.regalos-lluvia-text{
  max-width: 520px;
}

/* Móvil: evita que el avión se salga demasiado */
@media (max-width: 480px){
  .regalos-plane{
    right: -6px;
    top: 62px;
  }
  .regalos-path{
    right: -2px;
    top: 44px;
    width: 110px;
    height: 65px;
  }
}


/* ===== Regalos: avión arriba (debajo del título) ===== */
.regalos-avion-top{
  display: block;
  margin: 14px auto 18px;
  width: clamp(50px, 6vw, 80px);
  height: auto;
  opacity: 0.9;
  transform: rotate(-10deg);
}

/* ===== Regalos: sobre debajo del título "Lluvia de sobres" ===== */
.regalos-envelope-below{
  display: block;
  margin: 8px auto 14px;
  width: clamp(26px, 5.5vw, 38px);  /* MÁS GRANDE */
  height: auto;
  opacity: 0.95;
  transform: rotate(-8deg);
}

@media (max-width: 600px){
  .regalos-avion-top{
    width: 80px;
  }

  .regalos-envelope-below{
    width: 34px;
  }
}



.hero-myd{
  width: clamp(120px, 30vw, 190px);
  height: auto;
  max-height: 10svh;
  object-fit: contain;
}

/* Evita que alguna media query lo agrande */
@media (max-width: 420px){
  .hero-myd{
    width: clamp(120px, 30vw, 190px);
    max-height: 10svh;
  }
}