/* ---------------------- */
/* Estilos de la fuente */
/* ---------------------- */
@font-face {
  font-family: 'Astralaga';
  src: url('fonts/Astralaga\ Bold.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Trajan';
  src: url('fonts/TrajanPro-Regular.woff') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Battyna';
  src: url('fonts/Soage.woff') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir';
  src: url('fonts/Avenir-LT-Std-55-Roman.woff') format('truetype');
  font-weight:900;
  font-style: normal;
}

 @font-face {
    font-family: 'Autography';
    src: url('fonts/AUTOGRAPHY.woff') format('truetype');
    font-weight:900;
    font-style: normal;
  }

/* --- Nuevas Fuentes para la Sección Historia --- */
@font-face {
    font-family: 'Inkland';
    /* Cambia la extensión (.ttf, .otf) si tu archivo es diferente */
    src: url('fonts/Inkland.ttf') format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Soage';
    src: url('fonts/Soage.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'trirong';
    src: url('fonts/Trirong-Regular.woff') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ---------------------- */
/* General */
/* ---------------------- */
body {
  margin: 0;
  touch-action: pan-y;
  font-family: 'Arial', sans-serif;
  background-color: transparent;
  color: #333;
  text-align: center;
  overflow-x: hidden;
}

h1, h2, p {
  margin: 10px 0;
}

/* ---------------------- */
/* Carta Animada */
/* ---------------------- */

/* PANTALLA DE CARGA */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
  }
  
  /* Animación de la libélula */
  #container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 0;
    padding-bottom: 62.5%;
  }
  
  #animation-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #libelula {
    position: absolute;
    transform-origin: center;
    width: 37.5%;
    height: 60%;
    z-index: 10;
  }
  
  #trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  #logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  }
  
  #logo {
    max-width: 90%;
    max-height: 90%;
    margin-top: 0%;
  }
  
  /* Desvanecer la pantalla de carga */
  .hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  }
  
  @media (max-width: 768px) {
    #container {
        padding-bottom: 100%; /* Aumenta ligeramente la altura en móviles */
    }
  
    #logo-container {
    width: 250px; /* 300px de 800px */
    height: 250px;  /* 300px de 500px */
  }
  }
  /* Media queries para ajustar en pantallas muy pequeñas */
  @media (max-width: 480px) {
    #container {
        padding-bottom: 100%; /* Aumenta ligeramente la altura en móviles */
    }
  
    #logo-container {
    width: 250px; /* 300px de 800px */
    height: 250px;  /* 300px de 500px */
  
  }
  

  }
  

/* ---------------------- */
/* Contenido de Carta */
/* ---------------------- */

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}


.sobre-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* Esto fuerza a que llegue hasta abajo independientemente del cálculo de altura */
  width: 100%;
  height: 100%; /* Fallback para navegadores viejos */
  height: 100dvh; /* LA SOLUCIÓN: Altura dinámica que respeta las barras del iPhone */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* IMPORTANTE: Cambia este color gris (#d6d6d6) por un color oscuro 
     que combine con tu textura negra. Así, si hay un error de carga, 
     se verá negro y no se notará el fondo */
  background-color: #1a1a1a; 
  
  z-index: 9999;
  overscroll-behavior: none; /* Evita el rebote del scroll en Safari */
}

.sobre {
  position: relative;
  width: 100vw; 
  height: 100%;      /* Fallback */
  height: 100dvh;    /* Altura dinámica */
  perspective: 1000px;
  transition: transform 1s ease-in-out;
  overflow: hidden; /* Asegura que nada se salga del contenedor */
}

.capa {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
  backface-visibility: hidden;
  
}

.capa-top {
  background: url('imagenes/top.webp') no-repeat center/cover;
  transform-origin: top center;
  z-index: 2;
}

.capa-medio {
  background: url('imagenes/middle.webp') no-repeat center/cover;
  z-index: 0;
}

.capa-bottom {
  background: url('imagenes/bottom1.webp') no-repeat center/cover;
  z-index: 1;
  
}

.sello {
  position: absolute;
  width: 300px;
  height: 300px;
  background: url('imagenes/Recurso\ 1.png') no-repeat center/contain;
  border-radius: 50%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 3;
  transition: transform 1s ease-in-out, opacity 0.5s ease-in-out;
}

.abierto .capa-top {
  transform: rotateX(180deg);
}

.abierto .sello {
  transform: translate(-50%, -300%) rotateX(180deg);
  opacity: 0;
}

#contenidoPrincipal {
  max-width: 100vw;
  overflow-x: hidden;
}

@media (max-width: 768px) {

  .capa-top {
    transform-origin: top center;
    background-size: 300%;
    background-position:top;
    background-attachment: scroll;
    z-index: 2;
  }
  
  
  .capa-bottom {
    transform-origin: top center;
    background-size: 300%;
    background-position:bottom;
    background-attachment: scroll;
    z-index: 1;
    
  }

  
 
  
}


@media (max-width: 560px) {

  .capa-top {
    background-size: 300%;
    background-position:50% 0%;
    background-attachment: scroll;
    z-index: 2;
    height: 150%;
  }
  
  
  .capa-bottom {
    transform-origin: top center;
    background-size: 300%;
    background-position:bottom;
    background-attachment: scroll;
    z-index: 1;
    
  }
  .sello {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 53%;
  
}
}

@media (max-width: 450px) {

  .capa-top {
    background-size: 325%;
    background-position:50% 0%;
    background-attachment: scroll;
    z-index: 2;
    height: 180%;
  }
  
}



/* ---------------------- */
/* Contenido Nav */
/* ---------------------- */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between; /* Separa los elementos */
  align-items: center;
  background-color: #000000;
  padding: 10px 20px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

.navbar a {
  margin:  20px; /* Espacio entre los botones */
  padding: 0px 20px; /* Agrega más espacio dentro de los botones */
  font-size: 16px; /* Tamaño de la fuente */
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.nav-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1; /* Hace que la lista ocupe el espacio restante */
  justify-content:center ; /* Alinea los botones a la derecha */
  
}

.nav-list li {
  margin: 0 15px;
  font-family: 'Avenir';
}

.nav-list a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  transition: color 0.3s ease;
}

.nav-list a:hover {
  color: #ffffff;
}

/* Estilo específico para el botón "Inicio" con borde */
.btn-outlined {
    border: 1px solid #ffffff;
    padding: 8px 20px;
    border-radius: 2px; /* Bordes ligeramente suaves o 0px si quieres rectos */
    transition: all 0.3s ease;
}

.btn-outlined:hover {
    background-color: #ffffff;
    color: #000000 !important; /* Cambia el texto a negro al pasar el mouse */
}

.logo {
  font-family: 'Soage', cursive;
  font-size: 32px;
  font-weight:normal;
  text-align: center;
  flex-grow: 1; /* Permite que el logo se quede en el centro */
  color: #ffffff;
}

.letra-y {
  font-family: 'Inkland', sans-serif;
  font-size: inherit;
  color: #ffffff;
  display: inline;
}
/* ---------------------- */
/* Menú Hamburguesa */
/* ---------------------- */

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  z-index: 1500;
  position: absolute;
  left: 20px; /* Mantiene el menú en la izquierda */
  top: 15px;
}
.bar {
  background-color: #333;
  height: 2px;
  width: 20px;
  margin: 3px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-list.mobile-menu {
  display: none !important;
}



@media (max-width: 1090px) {
  .nav-list {
    position: fixed;
    top: 0;
    left: -100%; /* ✅ Desliza desde la izquierda */
    width: 80%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1);
    transition: left 0.4s ease-in-out;
    display: flex;
  
  }

  .nav-list.mobile-menu {
    display: flex !important;
  }
  
  .logo {
      font-size: 25px;
  }
  
  .nav-list.active {
    left: 0; /* ✅ Se muestra el menú */
  }
  
  .nav-list li {
    margin: 20px 0;
  }
  
  .nav-list a {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    transition: color 0.3s ease;
  }
  
  .nav-list a:hover {
    color: #b88c6e;
  }

  .menu-toggle {
      display: flex;
  }
}



/* ---------------------- */
/* Sección Portada (Hero) - ACTUALIZADO */
/* ---------------------- */

.hero-section {
    position: relative;
    width: 100%;
    height: calc(100vh - 60px); 
    margin-top: 60px;
    overflow: hidden;
    background-color: transparent;
    z-index: 1; /* Nivel bajo */
}

.hero-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* ELIMINA LAS MÁSCARAS DE AQUÍ (mask-image) */
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; 
    display: block;

    /* CAMBIO CLAVE 3: La máscara va AQUI. 
       Hace que la foto se desvanezca al final. 
       Al ser el fondo transparente, se verá el papel que pondremos debajo. */
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* --- Texto Superior (Fecha y Nombres) --- */
.hero-text-top {
    position: absolute;
    top: 10%; /* Ajusta este porcentaje para subir o bajar el bloque de texto */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    color: #ffffff; /* Texto blanco para que resalte en la foto oscura */
    text-shadow: 0px 2px 4px rgba(0,0,0,0.5); /* Sombra suave para mejorar legibilidad */
}

.hero-date {
    font-family: 'Trajan', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 3px; /* Espaciado entre letras elegante */
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hero-names {
    font-family: 'Soage', serif;
    font-size: 3rem; /* Tamaño grande para los nombres */
    margin: 0;
    font-weight: normal;
    line-height: 1.1;
}

/* Estilo especial para la "y" en el Hero */
.letra-y-hero {
    font-family: 'Inkland', cursive;
    font-size: 4rem; /* La "y" suele ser más grande decorativamente */
    display: inline-block;
    position: relative;
    top: 5px; /* Pequeño ajuste vertical si hace falta */
}


/* --- Texto Inferior (¡Nos casamos!) --- */
.hero-footer-text {
    position: absolute;
    bottom: 20px; /* Distancia desde el borde inferior */
    width: 100%;
    text-align: center;
    font-family: 'trirong', sans-serif; /* O Battyna si prefieres que se vea cursiva */
    font-size: 1.2rem;
    color: #333333; /* Color oscuro porque está sobre el fondo blanco */
    z-index: 15; /* Encima del degradado */
    letter-spacing: 1px;
}

/* ========================================= */
/* AJUSTES PARA PANTALLAS INTERMEDIAS        */
/* (Laptops pequeñas / Tablets Horizontal: Max 1366px) */
/* ========================================= */
@media (max-width: 1366px) {
    /* Ajustamos los textos del Hero para que no se vean gigantes */
    .hero-names {
        font-size: 2.5rem; 
    }
    
    .letra-y-hero {
        font-size: 3.5rem;
    }

    /* Ajustamos el título del papel */
    .paper-title {
        font-size: 2.2rem;
    }

    .letra-y-dark {
        font-size: 3rem;
    }
    
    /* Reducimos un poco la subida del papel para que no se coma tanto la foto */
    .paper-section {
        margin-top: -20vh;
        padding-top: 25vh;
    }
}

/* ---------------------- */
/* Responsive (Móvil) */
/* ---------------------- */

@media (max-width: 768px) {
    .hero-names {
        font-size: 2rem; /* Nombres más pequeños en celular */
    }
    
    .letra-y-hero {
        font-size: 2.5rem;
    }

    .hero-date {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }
    
    .hero-text-top {
        top: 8%; /* Subir un poco el texto en pantallas pequeñas */
    }
}


/* ========================================= */
/* AJUSTES PARA MÓVILES PEQUEÑOS (Max 480px) */
/* (Celulares estándar y pequeños)           */
/* ========================================= */
@media (max-width: 480px) {
    /* --- HERO (PORTADA) --- */
    .hero-text-top {
        top: 20%; /* Bajamos un poco el texto para que no pegue con el navbar móvil */
        padding: 0 0px; /* Margen lateral para seguridad */
    }

    .hero-names {
        font-size: 2.5rem; /* Tamaño seguro para que quepan "Estrella y Ricardo" */
        line-height: 1.2;
    }
    
    .letra-y-hero {
        font-size: 3rem;
        display: block; /* En pantallas muy pequeñas, a veces se ve mejor la "y" en su propia línea */
        margin: -10px 0;
        top: -20px;
    }

    .hero-date {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .hero-footer-text {
        font-size: 1rem;
        bottom: 15px;
     }
     }

     @media (max-width: 390px) {
    /* --- HERO (PORTADA) --- */
    .hero-text-top {
        top: 12%; /* Bajamos un poco el texto para que no pegue con el navbar móvil */
        padding: 0 0px; /* Margen lateral para seguridad */
    }

    .hero-names {
        font-size: 2.2rem; /* Tamaño seguro para que quepan "Estrella y Ricardo" */
        line-height: 1.2;
    }
    
    .letra-y-hero {
        font-size: 3rem;
        display: block; /* En pantallas muy pequeñas, a veces se ve mejor la "y" en su propia línea */
        margin: -10px 0;
        top: -20px;
    }

    .hero-date {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .hero-footer-text {
        font-size: 1rem;
        bottom: 15px;
     }
     }
/* ========================================= */
/* AQUÍ EMPIEZA LA SECCIÓN DEL PAPEL       */
/* ========================================= */

.paper-section {
    position: relative;
    width: 100%;
    
    /* 1. Subimos la sección para que se meta DEBAJO de la foto */
    margin-top: -25vh; 
    
    /* 2. Relleno interno para empujar el texto hacia abajo y que no choque con la foto */
    padding-top: 30vh; 
    padding-bottom: 80px;
    
    /* 3. FONDO DE TEXTURA */
    background-image: url('imagenes/fondoPBlanco.webp'); 
    background-size: contain;      /* O 'contain' si la textura es muy pequeña */
    background-position: center;
    background-repeat: repeat;
    
    /* 4. IMPORTANTE: Z-Index MENOR que el Hero (que tiene z-index: 1 en tu código anterior) */
    /* Pero espera... para asegurar que funcione, vamos a forzar los valores aquí: */
    z-index: 1; 
}

/* CORRECCIÓN DE EMERGENCIA PARA EL HERO (Asegura que esté encima) */
.hero-section {
    z-index: 5 !important; /* Forzamos que la foto esté SIEMPRE arriba */
    background-color: transparent !important; /* Asegura que no tenga fondo blanco */
}

/* CORRECCIÓN PARA EL TEXTO (Asegura que se lea) */
.hero-footer-text {
    z-index: 10 !important; /* El texto flota encima de todo */
    color: #333; /* Color oscuro */
}

/* --- Tipografía y Contenido --- */

.paper-content {
    position: relative;
    z-index: 5;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.paper-title {
    font-family: 'Soage', serif;
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 20px;
    font-weight: normal;
    letter-spacing: 1px;
}

.letra-y-dark {
    font-family: 'Inkland', cursive;
    font-size: 3.5rem;
    color: #000;
    /* Ajuste fino para la posición de la 'y' */
    vertical-align: middle;
    display: inline-block;
    margin-top: 5px; 
}

.paper-intro {
    font-family: 'trirong', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 40px;
    letter-spacing: 0.5px;
}

/* --- Grid de los Padres --- */

.parents-grid {
    display: flex;
    justify-content: space-between; /* Separa las columnas a los extremos */
    align-items: flex-start;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'trirong', sans-serif;
    font-size: 1.1rem;
    color: #000;
}

.parents-col {
    flex: 1; /* Cada columna toma el mismo ancho */
    padding: 0 20px;
}

.parents-col p {
    margin: 5px 0;
}

/* --- Decoración (Ramita) --- */

.deco-branch-container {
    position: absolute;
    top: 25%; /* Ajusta según donde quieras que empiece la rama */
    left: -5%;
    width: 30%; /* Tamaño de la rama */
    z-index: 4;
    pointer-events: none; /* Para que no estorbe al click */
    transform: rotate(-20deg);
}

.deco-branch {
    width: 100%;
    height: auto;
    opacity: 0.6; /* Un poco transparente para que parezca marca de agua */
}

@media (max-width: 1366px) {
/* Ajustamos el título del papel */
    .paper-title {
        font-size: 2.2rem;
    }

    .letra-y-dark {
        font-size: 3rem;
    }
    
    /* Reducimos un poco la subida del papel para que no se coma tanto la foto */
    .paper-section {
        margin-top: -20vh;
        padding-top: 25vh;
    }
}

/* ---------------------- */
/* Responsive (Móvil) */
/* ---------------------- */

@media (max-width: 768px) {
    .paper-section {
        margin-top: -10vh; /* Menos superposición en móvil */
        padding-top: 15vh;
        background-position: top center;
    }

    .paper-title {
        font-size: 1.8rem;
    }

    .letra-y-dark {
        font-size: 2.5rem;
    }

    .paper-intro {
        font-size: 1rem;
        padding: 0 10px;
    }

    .paper-intro br {
        display: none; /* Quita el salto de línea forzado en móvil para que fluya mejor */
    }

    /* En móvil, ponemos los padres uno debajo del otro */
    .parents-grid {
        flex-direction: column;
        gap: 30px; /* Espacio entre la familia de la novia y del novio */
    }

    .parents-col {
        width: 100%;
        padding: 0;
    }

    .deco-branch-container {
        width: 200px; /* Rama más pequeña en móvil */
        top: 25%;
        opacity: 0.8;
    }
}



/* --- PAPEL (INVITACIÓN) --- */
@media (max-width: 480px) {
    .paper-section {
        /* En móvil el efecto de superposición debe ser sutil para no tapar las caras */
        margin-top: -15vh; 
        padding-top: 18vh; 
    }

    .paper-title {
        font-size: 2rem;
        padding: 0 10px; /* Evita que el texto toque los bordes de la pantalla */
    }

    .letra-y-dark {
        font-size: 2rem;
        margin-top: 10px;
    }

    .paper-intro {
        font-size: 0.95rem; /* Texto de lectura un poco más chico pero legible */
        padding: 0 15px;
        text-align: center;
    }

    /* Ajuste de Padres */
    .parents-col p {
        font-size: 0.95rem;
        margin: 3px 0;
    }
    
    .parents-grid {
        gap: 25px; /* Menos espacio entre familias */
    }

    /* Ramita Decorativa */
    .deco-branch-container {
        width: 200px; /* Muy discreta */
        top: 30%; /* Pegada arriba del papel */
        left: -20px;
    }
}



/* ---------------------- */
/* Estilos para la sección del calendario - Completamente Responsivo */
/* ---------------------- */
.date-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 5rem 2rem;
  background-image: url('imagenes/fondoCal.webp');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  position: relative;
  z-index: 0;
}

/* Contenedor para elementos del calendario */
.date-section-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* Texto introductorio */
.text-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  text-align: center;
  margin-top: 5%;
}

.text-container p {
  font-family: 'trirong', sans-serif;
  font-size: clamp(1rem, 3vw, 1.5rem); /* Texto responsivo */
  color: #ffffff;
  text-align: center;
  margin: 0;
  line-height: 1.4;
  margin-bottom: 10%;
}

/* Contenedor para el calendario */
.calendar-container {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 2rem;
  width: 100%;
  max-width: 400px;
  flex-shrink: 0;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
   margin: 0 auto; /* Esto lo centrará */
  justify-content: center;
}

.calendar-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Header del calendario */
.calendar-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.calendar-header h2 {
  font-family: 'Astralaga', cursive;
  color: #000000;
  font-size: clamp(1.5rem, 4vw, 2rem); /* Texto responsivo */
  margin: 0;
  line-height: 1.2;
  font-weight: 100;
}

/* Estructura del calendario */
.calendar {
  width: 100%;
  display: grid;
  gap: 0.5rem;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: 'Avenir', sans-serif;
  font-weight: bold;
  color: #000000;
  margin-bottom: 1rem;
  gap: 5px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  align-items: center;
}

/* Celdas de días */
.days div {
  aspect-ratio: 1/1; /* Mantiene las celdas cuadradas */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Avenir', sans-serif;
  font-size: clamp(0.8rem, 2vw, 1rem); /* Texto responsivo */
  color: #000000;
  position: relative;
}

/* Día resaltado */
.days div.highlight {
  position: relative;
  color: #000000;
  font-weight:bold;
  background: transparent !important;
}

/* Marcador circular */
.circle-marker {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-marker::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  border: 2px solid #ff0000;
  border-radius: 50%;
  z-index: -1;
}

/* Contenedor de texto inferior */
.date-text-container {
  max-width: 450px;
  padding: 2rem;
  position: relative;
}

.date-text-container p {
  font-family: 'Autography', sans-serif;
  font-weight: lighter;
  font-size: clamp(2.5rem, 5vw, 4rem); /* Texto responsivo */
  line-height: 1.1;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

/* Flecha decorativa */
.arrow-container {
  position: absolute;
  width: 200px;
  height: 100px;
  pointer-events: none;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(15px, 20px) rotate(200deg);
  transform-origin: center;
  will-change: transform;
  display: none; /* Oculto por defecto, se muestra en pantallas grandes */
}

.curved-arrow {
  stroke: #000000;
  stroke-width: 3;
  fill: none;
  opacity: 1;
  stroke-dasharray: 5, 5;
  stroke-dashoffset: 500;
  
}



/* Media Queries - Diseño responsivo */
/* Pantallas grandes - Layout horizontal */
@media (min-width: 1080px) {
  .date-section {
    padding: 5rem;
  }
  
  .date-section-wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
  
  .calendar-container {
    margin-right: 2rem;
  }
  
  .date-text-container {
    padding: 3rem;
  }
  
  .date-text-container p {
    text-align: left;
  }
  
  .arrow-container {
    display: block; /* Mostrar flecha en pantallas grandes */
   
  }
}

/* Pantallas medianas */
@media (min-width: 768px) and (max-width: 1023px) {
  .date-section {
    padding: 4rem 2rem;
  }
  
  .calendar-container {
    max-width: 380px;
  }
  
  .circle-marker::before {
    width: 32px;
    height: 32px;
  }
}

/* Tablets y móviles grandes */
@media (min-width: 481px) and (max-width: 767px) {
  .date-section {
    padding: 3rem 1.5rem;
  }
  
  .calendar-container {
    max-width: 340px;
    padding: 1.5rem;
  }
  
  .circle-marker::before {
    width: 30px;
    height: 30px;
  }
}

/* Móviles */
@media (max-width: 480px) {
  .date-section {
    padding: 2rem 1rem;
    min-height: 0vh;
  }
  
  .text-container {
    margin-bottom: 2rem;
  }
  
  .calendar-container {
    max-width: 300px;
    padding: 1rem;
  }
  
  .calendar-header {
    margin-bottom: 1.5rem;
  }
  
  .weekdays, .days {
    gap: 3px;
  }
  
  .circle-marker::before {
    width: 26px;
    height: 26px;
  }
  
  .date-text-container {
    padding: 1.5rem 1rem;
  }
}

/* Móviles pequeños */
@media (max-width: 360px) {
  .date-section {
    padding: 1.5rem 0.5rem;
  }
  
  .calendar-container {
    padding: 0.8rem;
  }
  
  .weekdays div, .days div {
    font-size: 0.7rem;
  }
  
  .circle-marker::before {
    width: 22px;
    height: 22px;
  }
}


/* ========================================= */
/* SECCIÓN CÓDIGO DE VESTIMENTA              */
/* ========================================= */

.dresscode-section {
    position: relative;
    width: 100%;
    padding: 80px 20px;
    
    /* Reusamos el fondo de papel */
    background-image: url('imagenes/fondoPBlanco.webp'); 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    text-align: center;
    color: #000;
    overflow: hidden; /* Para que la ramita no se salga de la pantalla */
}

.section-title {
    font-family: 'Soage', serif;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-weight: normal;
}

/* --- Iconos --- */
.icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; /* Separación entre vestido y traje */
    margin-bottom: 20px;
}

.dress-icon, .suit-icon {
    width: 100px; /* Tamaño base de los iconos */
    height: auto;
    display: block;
}

/* --- Textos de Estilo --- */
.dress-style-script {
    font-family: 'Autography', cursive;
    font-size: 3.5rem;
    margin: 10px 0;
    line-height: 1.2;
}

.dress-style-text {
    font-family: 'trirong', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    font-weight: 500;
}

.dress-note {
    font-family: 'trirong', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 40px;
    line-height: 1.6;
    font-style: italic;
    font-weight:300;
}

/* --- Reglas (Grid Ellas/Ellos) --- */
.dress-rules-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto 50px auto;
    font-family: 'trirong', sans-serif;
    font-weight:100;
}

.rule-box p {
    font-size: 1.1rem;
    line-height: 1.5;
}

.rule-box strong {
    font-weight: 900;
    /* Si quieres subrayar "Ellas" y "Ellos" como en el diseño */
    text-decoration: underline; 
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.dress-final-note {
    font-family: 'trirong', sans-serif;
    font-size: 1rem;
    margin-top: 20px;
    font-style: italic; /* Opcional, para darle énfasis */
}

/* --- Decoración (Ramita derecha) --- */
.dresscode-deco-container {
    position: absolute;
    bottom: -7%;
    right: 5%;
    width: 30%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.dresscode-deco {
    width: 100%;
    height: auto;
    transform: rotate(-120deg);
      
    /* Si necesitas voltear la ramita para que mire al otro lado: */
    /* transform: scaleX(-1); */ 
}

/* El contenido debe estar encima de la decoración */
.dresscode-content {
    position: relative;
    z-index: 2;
}

/* ========================================= */
/* RESPONSIVE (Móvil)                        */
/* ========================================= */

/* ========================================= */
/* AJUSTES VESTIMENTA - INTERMEDIOS (Max 1366px) */
/* ========================================= */
@media (max-width: 1366px) {
    .dresscode-section {
        padding: 60px 20px;
    }

    .section-title {
        font-size: 2.2rem; /* Título un poco más discreto */
        margin-bottom: 30px;
    }

    .dress-style-script {
        font-size: 3rem;
    }

    .icons-container {
        gap: 50px;
        margin-bottom: 15px;
    }

    .dress-icon, .suit-icon {
        width: 70px; /* Iconos ligeramente más chicos */
    }

    /* Reducimos el espacio entre las reglas de Ellos/Ellas */
    .dress-rules-grid {
        gap: 50px;
        margin-bottom: 40px;
    }
}


@media (max-width: 768px) {
    .dresscode-section {
        padding: 50px 20px;
    }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .icons-container {
        gap: 40px;
    }
    
    .dress-icon, .suit-icon {
        width: 60px; /* Iconos más pequeños en celular */
    }

    .dress-style-script {
        font-size: 2.5rem;
    }
    
    .dress-style-text {
        font-size: 1rem;
    }

    .dress-note br {
        display: none; /* Quitamos saltos de línea forzados */
    }

    .dress-rules-grid {
        flex-direction: column; /* Apilamos las reglas verticalmente */
        gap: 30px;
    }
    
    .dresscode-deco-container {
        width: 150px;
        opacity: 0.3;
    }
}


@media (max-width: 480px) {
    .dresscode-section {
        padding: 40px 15px; /* Menos relleno para aprovechar espacio */
    }

    .section-title {
        font-size: 2rem; /* Título compacto */
        letter-spacing: 1px;
        margin-bottom: 25px;
    }

    .icons-container {
        gap: 30px; /* Iconos más juntos */
    }

    .dress-icon, .suit-icon {
        width: 80px; /* Iconos pequeños pero visibles */
    }

    .dress-style-script {
        font-size: 2.2rem; /* "Vestimenta Formal" más chico */
        margin: 5px 0;
    }

    .dress-style-text {
        font-size: 0.9rem; /* "Traje oscuro..." más chico */
        margin-bottom: 25px;
    }

    .dress-note {
        font-size: 0.95rem;
        padding: 0 20px; /* Margen de seguridad lateral */
    }

    /* REGLAS: Aseguramos que se apilen bien */
    .dress-rules-grid {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 30px;
    }

    .rule-box p {
        font-size: 0.95rem;
        margin: 0;
    }

    .dress-final-note {
        font-size: 0.85rem;
        padding: 0 20px;
    }

    /* RAMITA: La hacemos muy transparente y pequeña para que no tape el texto */
    .dresscode-deco-container {
        width: 100px;
        bottom: 10px;
        right: -10px;
        opacity: 0.2; 
    }
}

@media (max-width: 390px) {
    /* 1. Maximizamos el espacio lateral */
    .dresscode-section {
        padding: 30px 1px !important; /* Casi sin relleno a los lados */
        width: 100%;
        overflow-x: hidden; /* Cortamos cualquier cosa que se salga */
    }

    /* 2. El título "CÓDIGO DE VESTIMENTA" se ajusta para no romper la linea */
    .section-title {
        font-size: 1.4rem; 
        margin-bottom: 20px;
        word-wrap: break-word; /* Si es muy largo, que baje de renglón */
        padding: 0 5px;
    }

    /* 3. Iconos más compactos */
    .icons-container {
        gap: 15px; /* Muy juntitos */
        margin-bottom: 15px;
    }
    
    .dress-icon, .suit-icon {
        width: 80px; /* Tamaño mínimo legible */
    }

    /* 4. Tipografía "Script" controlada */
    .dress-style-script {
        font-size: 2rem; /* Reducimos bastante para que quepa "Vestimenta Formal" */
        line-height: 1.1;
    }
    
    .dress-style-text {
        font-size: 0.8rem;
    }

    /* 5. Reglas (Ellas/Ellos) ocupando todo el ancho */
    .dress-rules-grid {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
        gap: 20px;
    }

    .rule-box {
        width: 95%; /* Que ocupe casi toda la pantalla */
        margin: 0 auto; /* Centrado */
    }

    .rule-box p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* 6. La ramita decorativa: mejor ocultarla o hacerla mínima */
    /* En pantallas tan chicas, a veces estorba más de lo que decora */
    .dresscode-deco-container {
        display: none; /* Recomendado: ocultarla para ganar limpieza */
        /* Si FORZOSAMENTE la quieres, usa esto:
        width: 60px;
        opacity: 0.15;
        bottom: 5px;
        right: -5px;
        */
    }
}


/* ========================================= */
/* SECCIÓN LOCACIÓN (LUGAR)                  */
/* ========================================= */

.location-section {
    position: relative;
    width: 100%;
    padding: 80px 20px;
    background-image: url('imagenes/fondoCal.webp');
    background-size:cover ;
    color:#ffffff;
    text-align: center;
}

.location-title {
    font-family: 'Soage', serif;
    font-size: 5rem;
    letter-spacing: 3px;
    margin-bottom: 60px;
    font-weight: normal;
    text-transform: uppercase;
}

/* Contenedor principal flex */
.location-container {
    display: flex;
    /* CAMBIO 1: 'space-between' los empuja a los extremos izquierdo y derecho */
    justify-content: space-between; 
    align-items: flex-start; 
    max-width: 1100px; /* Ancho máximo controlado para que no se separen demasiado en pantallas gigantes */
    margin: 0 auto;
    padding: 0 40px; /* Un poco de aire a los lados */
}

/* Cajas individuales (Ceremonia y Recepción) */
.location-box {
    /* Quitamos flex: 1 para que no se estiren a la fuerza, 
       dejamos que ocupen su espacio natural pero con un ancho mínimo */
    width: 50%; 
    display: flex;
    align-items: flex-start; /* Alineación superior de icono y texto */
    gap: 20px;
}

/* Configuración Específica: CEREMONIA (Alineado a la Izquierda) */
.ceremony-box {
    text-align: left; 
    /* No le ponemos margen, se queda arriba */
}

/* Configuración Específica: RECEPCIÓN (Alineado a la Derecha) */
.reception-box {
    justify-content: flex-end; /* Alinea el contenido interno a la derecha */
    text-align: right; 
    
    /* CAMBIO 2: MARGEN SUPERIOR GRANDE 
       Esto es lo que crea el efecto de "escalera" o diagonal.
       Empuja la recepción hacia abajo. */
    margin-top: 150px; 
}

/* --- Iconos --- */
.loc-icon-wrapper {
    flex-shrink: 0; /* Evita que el icono se aplaste */
    margin-top: 15%;
    
}

.loc-icon {
    width: 150px;
    height: auto;
    opacity: 0.9;
}

/* --- Textos --- */
.loc-subtitle {
    font-family: 'trirong', serif;
    font-weight:normal;
    font-size: 1.8rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.loc-place {
    font-family: 'Avenir', sans-serif;
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 5px;
}

.loc-address {
    font-family: 'Avenir', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0.9;
}

.loc-time {
    font-family: 'trirong', serif; /* O Avenir si prefieres */
    font-size: 2rem;
    margin-top: 15px;
}

/* --- Botón "UBICACIÓN" --- */
.loc-btn {
    display: inline-block;
    font-family: 'Avenir', sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.5);
    padding: 8px 20px;
    border-radius: 2px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.loc-btn:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ========================================= */
/* AJUSTES RESPONSIVOS: SECCIÓN LOCACIÓN     */
/* ========================================= */

/* --- 1. PANTALLAS INTERMEDIAS (Laptops pequeñas / Tablets Horizontal) --- */
/* Mantenemos el diseño diagonal pero con menos espacio */
@media (max-width: 1300px) {
    .location-container {
        max-width: 900px; /* Reducimos el ancho total */
        padding: 0 30px;
    }

    .reception-box {
        margin-top: 100px; /* Reducimos el escalón (antes 150px) */
    }

    .location-title {
        font-size: 2.5rem;
    }

    .loc-icon {
        width: 150px; /* Iconos un poco más chicos */
    }
}

/* --- 2. TABLETS Y MÓVILES (Punto de quiebre principal) --- */
/* AQUÍ ROMPEMOS LA DIAGONAL Y CENTRAMOS TODO */
@media (max-width: 768px) {
    .location-section {
        padding: 60px 20px;
    }

    /* Contenedor: Apilamos uno sobre otro */
    .location-container {
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Espacio uniforme entre Ceremonia y Recepción */
        padding: 0;
    }

    /* Cajas: Ocupan todo el ancho y se centran */
    .location-box {
        width: 100%;
        flex-direction: column; /* Icono arriba, texto abajo */
        justify-content: center;
        text-align: center;
        gap: 15px;
        
    }

    /* RESEATAMOS POSICIONES ESPECÍFICAS */
    
    /* Ceremonia: Quitamos alineación izquierda */
    .ceremony-box {
        text-align: center;
        align-items: center;
    }

    /* Recepción: Quitamos el margen gigante y alineación derecha */
    .reception-box {
        margin-top: 0; /* ¡Adiós escalera! */
        text-align: center;
        align-items: center;
        justify-content: center;
        
        /* Truco visual: En escritorio el texto está a la izq del icono. 
           En móvil queremos Icono Arriba -> Texto Abajo. 
           Usamos column-reverse para invertir el orden natural del HTML */
        flex-direction: column-reverse; 
    }

    .location-title {
        font-size: 4rem;
        
    }

    .loc-icon {
        width: 150px;
        margin-bottom: 10px;
    }

    .loc-subtitle {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .loc-address {
        padding: 0 20px; /* Margen para que el texto no toque los bordes */
    }
}

/* --- 3. MÓVILES ESTÁNDAR (490px) --- */
@media (max-width: 490px) {
.location-section {
        padding: 50px 5px;
    }

    .location-title {
        font-size: 3rem;
        margin-bottom: 10px;
    }

    .loc-icon {
        width: 120px; /* Ajuste de icono */
    }

    .loc-time {
        font-size: 1.5rem; /* Hora más pequeña */
    }
    
    .location-container {
        gap: 10px; /* Acercamos un poco los bloques */
    }

    .loc-subtitle {
        font-size: 1.5rem;
        
    }

    .loc-address {
      font-size: 1rem;
        
    }
}

/* --- 4. MÓVILES PEQUEÑOS (390px) --- */
/* Ajuste fino para que nada se corte */
@media (max-width: 390px) {
    .location-section {
        padding: 40px 1px;
    }
    
    .loc-icon {
        width: 120px; /* Ajuste de icono */
    }

    .location-title {
        font-size: 2.5rem;
    }

    .loc-place {
        font-size: 1rem;
    }

    .loc-address {
        font-size: 0.8rem;
        padding: 0; /* Quitamos padding extra para ganar espacio */
    }

    .loc-btn {
        width: 100%; /* Botón ancho completo para facilitar el clic */
        box-sizing: border-box;
        max-width: 200px;
    }
}

/* ========================================= */
/* SECCIÓN CUENTA REGRESIVA (COUNTDOWN)      */
/* ========================================= */

.countdown-section {
    width: 100%;
    /* Altura mínima para que se vea imponente en escritorio */
    min-height: 80vh; 
    background-color: #fdfcfb; /* Mismo tono hueso que el resto de la web */
    overflow: hidden;
}

/* Contenedor principal: Grid de 2 columnas */
.countdown-grid {
    display: grid;
    /* Divide el espacio en 50% y 50% */
    grid-template-columns: 1fr 1fr;
    height: 100%;
    min-height: 80vh;
}

/* --- Lado Izquierdo (Imagen) --- */
.countdown-image-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.countdown-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto cubra todo el espacio sin deformarse */
    object-position: center;
    display: block;
}

/* --- Lado Derecho (Contenido) --- */
.countdown-content-box {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
    align-items: center; /* Centrado horizontal */
    padding: 60px 40px;
    text-align: center;
    color: #000;
}

.countdown-intro {
    font-family: 'Astralaga', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 3px;
    margin-bottom: 40px;
    font-weight: 100;
}

.countdown-outro {
    font-family: 'Astralaga', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-top: 40px;
    text-transform: uppercase;
    font-weight: 100;
}

/* --- El Reloj (Timer) --- */
.timer-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio entre los bloques de números */
}

.timer-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px; /* Ancho mínimo para que no bailen los números */
}

.timer-value {
    font-family: 'Astralaga', serif; /* Tipografía elegante para los números */
    font-size: 5rem;
    line-height: 1;
    color: #000;
}

.timer-label {
    font-family: 'Astralaga', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-top: 10px;
    color: #666; /* Un gris un poco más suave para las etiquetas */
}

/* ========================================= */
/* RESPONSIVE COUNTDOWN                      */
/* ========================================= */

/* --- PANTALLAS INTERMEDIAS (Max 1300px) --- */
@media (max-width: 1300px) {
    .countdown-section, .countdown-grid {
        min-height: auto; /* Quitamos la altura forzada */
    }
    
    .timer-value {
        font-size: 4rem; /* Números un poco más chicos */
    }
    
    .timer-wrapper {
        gap: 20px;
    }
    
    .countdown-content-box {
        padding: 40px 20px;
    }
}

/* --- TABLETS Y MÓVILES (Punto de quiebre principal: Max 900px) --- */
@media (max-width: 900px) {
    /* Cambiamos el grid a una sola columna */
    .countdown-grid {
        grid-template-columns: 1fr;
    }
    
    /* La imagen va arriba */
    .countdown-image-box {
        height: 50vh; /* Altura fija para la imagen en móvil */
        order: 1; /* Asegura que aparezca primero */
    }
    
    /* El contenido va abajo */
    .countdown-content-box {
        order: 2;
        padding: 60px 20px;
    }
}

/* --- MÓVILES ESTÁNDAR (Max 480px) --- */
@media (max-width: 480px) {
    .countdown-intro {
        font-size: 1.2rem;
        margin-bottom: 30px;
    }
    
    /* Ajuste crítico para que quepan los 4 números en fila */
    .timer-wrapper {
        gap: 30px; /* Menos espacio entre ellos */
    }
    
    .timer-block {
        min-width: auto; /* Quitamos el ancho mínimo */
    }
    
    .timer-value {
        font-size: 2.8rem; /* Números más pequeños */
    }
    
    .timer-label {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }
    
    .countdown-outro {
        font-size: 1rem;
        margin-top: 30px;
    }
}

/* --- MÓVILES PEQUEÑOS (Max 360px) --- */
@media (max-width: 360px) {
    .timer-value {
        font-size: 2.4rem; /* Aún más pequeños para que no se rompa */
    }
    
    .countdown-content-box {
        padding: 40px 15px;
    }
}


/* ========================================= */
/* SECCIÓN HISTORIA (CRONOGRAMA)             */
/* ========================================= */

.story-section {
    position: relative;
    width: 100%;
    padding: 80px 20px 120px 20px; /* Padding extra abajo para las letras grandes */
    
    /* Reusamos la textura de papel */
    background-image: url('imagenes/fondoPBlanco.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    
    text-align: center;
    overflow: hidden; 
}

.story-header {
    font-family: 'trirong', serif; /* O usa Astralaga si prefieres */
    font-size: 2rem;
    color: #000000;
    margin-bottom: 80px;
    letter-spacing: 1px;
    font-weight: normal;
}

/* --- Estructura del Timeline --- */
.timeline-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto 100px auto; /* Margen abajo para separar del texto final */
    padding: 0 20px;
}

/* La línea horizontal negra */
.timeline-line {
    position: absolute;
    top: 130px; /* Ajusta esto para que la línea cruce justo por los puntos */
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: #000;
    z-index: 1; /* Detrás de los puntos */
}

.timeline-item {
    position: relative;
    z-index: 2; /* Encima de la línea */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%; /* Ancho de cada bloque */
}

/* Iconos (Arriba) */
.timeline-icon-box {
    height: 80px; /* Altura fija para alinear */
    display: flex;
    align-items: center; /* Centrar icono verticalmente */
    margin-bottom: 40px;
}

.timeline-icon {
    width: 120px; /* Tamaño de tus iconos */
    height: auto;
    display: block;
}

/* El Punto Negro */
.timeline-dot {
    width: 14px;
    height: 14px;
    background-color: #000;
    border-radius: 50%;
    margin-bottom: 20px;
    /* Borde blanco para que la línea no se vea pegada al punto */
    border: 3px solid #fdfcfb; /* Color del fondo de papel */
}

/* Textos (Abajo) */
.tm-title {
    font-family: 'trirong', serif; 
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tm-subtitle {
    font-family: 'trirong', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    margin: 0 0 5px 0;
    color: #000000;
    text-transform: uppercase;
}

.tm-time {
    font-family: 'trirong', sans-serif;
    font-size: 1.2rem;
    font-weight: 100;
    color: #2c2c2c;
}

/* --- Texto Footer Gigante ("Nuestra BODA") --- */
.story-footer-text {
    position: relative;
    height: 150px; /* Espacio reservado */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.font-nuestra {
    font-family: 'Inkland', cursive; /* Tu fuente script */
    font-size: 8rem;
    color: #000;
    position: absolute;
    z-index: 2;
    transform: rotate(-5deg) translateX(60%) translateY(-20px);
    /* Ajusta translateX/Y para mover "Nuestra" y que encime a "BODA" donde quieras */
}

.font-boda {
    font-family: 'Soage', serif; /* Tu fuente serif */
    font-size: 8rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 20px; /* Mucho espacio entre letras como en el diseño */
    z-index: 1;
    line-height: 1;
    transform:  translateX(100%) translateY(50px);
}

/* ========================================= */
/* RESPONSIVE AVANZADO: HISTORIA (TIMELINE)  */
/* ========================================= */

/* --- 1. Laptops y Pantallas Medianas (Max 1300px) --- */
@media (max-width: 1350px) {
    .timeline-wrapper {
        max-width: 900px;
        padding: 0 10px;
    }
    .tm-title { font-size: 1rem; }
    
    /* Ajuste de línea horizontal */
    .timeline-line { top: 110px; }

    /* Footer Ajustado */
    .font-nuestra {
        font-size: 7rem;
        transform: rotate(-5deg) translateX(50%) translateY(-0%);
    }
    .font-boda { 
      font-size: 7rem; 
      letter-spacing: 10px;
      transform:  translateX(90%) translateY(40%);
     }
}

/* --- 2. Tablets y Móviles (Punto de quiebre a VERTICAL: Max 900px) --- */
@media (max-width: 1000px) {
    .story-section {
        padding: 60px 10px;
    }

    /* CONTENEDOR PRINCIPAL */
    .timeline-wrapper {
        flex-direction: column;
        align-items: center; /* Centramos todo */
        max-width: 600px;
        margin: 0 auto 50px auto;
        padding: 0; /* Sin padding lateral extra */
    }

    /* LA LÍNEA VERTICAL (Centrada Perfectamente) */
    .timeline-line {
        width: 2px;
        height: 100%;
        top: 0;
        left: 50%; /* Al 50% del contenedor */
        transform: translateX(-50%); /* Centrado matemático exacto */
        right: auto;
    }

    /* EL BLOQUE DE CADA EVENTO (Fila Flex: Icono - Punto - Texto) */
    .timeline-item {
        flex-direction: row; /* Elementos lado a lado */
        width: 100%;
        margin-bottom: 40px;
        align-items: center; /* Centrado vertical */
        justify-content: center;
    }

    /* 1. LADO IZQUIERDO: ICONOS */
    .timeline-icon-box {
        flex: 1; /* Ocupa el espacio disponible a la izquierda */
        display: flex;
        justify-content: flex-end; /* Alinea el icono pegado a la línea central */
        padding-right: 20px; /* Espacio entre icono y punto */
        margin-bottom: 0;
        height: auto;
        
        /* SOLICITUD: Fondo transparente */
        background-color: transparent; 
        z-index: 2;
    }

    .timeline-icon {
        width: 120px; /* Tamaño ajustado para móvil */
    }

    /* 2. CENTRO: EL PUNTO NEGRO (Recuperado) */
    .timeline-dot {
        display: block !important; /* Forzamos que aparezca */
        margin: 0; /* Sin márgenes extra */
        flex-shrink: 0; /* Que no se aplaste */
        position: relative;
        z-index: 5; /* Encima de la línea */
        border: 4px solid #fdfcfb; /* Borde del color del papel para limpieza visual */
    }

    /* 3. LADO DERECHO: TEXTO */
    .timeline-text {
        flex: 1; /* Ocupa el espacio disponible a la derecha */
        text-align: left; /* Texto alineado a la izquierda */
        padding-left: 20px; /* Espacio entre punto y texto */
        padding-top: 0;
    }

    /* Ajustes de Texto */
    .tm-title { font-size: 1.2rem; margin: 0; }
    .tm-subtitle { font-size: 0.9rem; }
    .tm-time { font-size: 1rem; margin-top: 5px;}

    /* Footer */
    .story-footer-text { height: 120px; margin-top: 20px; }
    .font-nuestra { 
        font-size: 5rem; 
        transform: rotate(-5deg) translateX(50%x) translateY(-10px); 
    }
    .font-boda { font-size: 6rem; letter-spacing: 5px; }
}

/* --- 2. Tablets y Móviles (Punto de quiebre a VERTICAL: Max 900px) --- */
@media (max-width: 768px) {
  .font-nuestra { 
        font-size: 5rem; 
        transform: rotate(-5deg) translateX(20%) translateY(-10px); 
    }
    .font-boda { font-size: 6rem; letter-spacing: 5px; 
    transform: translateX(40%) translateY(50%); 
    }
    
  }

/* --- 3. Móviles Estándar (Max 480px) --- */
@media (max-width: 500px) {
    /* Ajustamos los espacios laterales para que quepa bien en pantallas angostas */
    .timeline-icon-box {
        padding-right: 15px;
    }
    .timeline-text {
        padding-left: 15px;
    }

    .timeline-icon {
        width: 80px; /* Iconos más chicos */
    }
    
    .timeline-dot {
        width: 12px;
        height: 12px;
        border-width: 3px;
    }

    .tm-title { font-size: 1rem; }
    .tm-subtitle { font-size: 0.8rem; }
    .tm-time { font-size: 0.9rem; }

    /* Footer Compacto */
    .story-footer-text { height: 90px; }
    .font-nuestra { 
        font-size: 4rem; 
        transform: rotate(-5deg) translateX(10%) translateY(-15px); 
    }
    .font-boda { font-size: 4rem; letter-spacing: 2px; transform: translateX(30%) translateY(50%); }
}

/* --- 4. Pantallas Mini (Max 360px) --- */
@media (max-width: 360px) {
    .story-section {
        padding: 50px 0px; /* Aprovechar al máximo el ancho */
    }

    .timeline-icon-box {
        padding-right: 10px;
    }
    .timeline-text {
        padding-left: 10px;
    }
    
    .timeline-icon {
        width: 80px;
    }

    /* Footer Mini */
    .story-footer-text { height: 70px; margin-top: 10px; }
    .font-nuestra { 
        font-size: 3rem; 
        transform: rotate(-5deg) translateX(20%) translateY(-10%); 
    }
    .font-boda { font-size: 3rem; letter-spacing: 1px; }
}



/* ---------------------- */
/* Mesa de Regalos */
/* ---------------------- */
/* Mesa de Regalos */
.gifts-section {
  margin: 20px auto;
  background-image: url(imagenes/fondoCal.webp);
  background-size: cover;
  text-align: center;
  padding: 80px 20px;
  border-radius: 15px; /* Bordes redondeados */
}

/* Estilo del título */
.gifts-section h2 {
  font-size: 3rem;
  color: #ffffff; /* Dorado elegante */
  font-family: 'Soage', cursive;
  font-weight: normal;
  text-align: center;
  padding: 20px;
}

/* Párrafo de indicación */
.gifts-section p {
  font-size: 1.2rem;
  color: #ffffff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 20px;
  max-width: 1000px;
  text-align: center;
  margin: 50px auto 80px auto;
  padding: 0 20px; /* Reduce el espacio lateral */
  font-family: "trirong", sans-serif;
  font-weight: 300;
}

/* Contenedor de enlaces */
.gift-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  flex-wrap: wrap;
}


/* Imágenes de los logos */
.gift-link img {
  width: 400px; /* Tamaño ajustable */
  height: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
  filter: drop-shadow(2px 2px 5px rgba(255, 255, 255, 0.301));
}


/* Efecto hover */
.gift-link img:hover {
  transform: scale(1);
  opacity: 0.1;
}

/* Responsividad */
@media (max-width: 768px) {
  .gifts-section h2 {
    font-size: 3rem;
    padding: 0px;
  }
  
  
  .gifts-section p {
    font-size: 1.2rem;
  }
  .gift-links {
    gap: 40px;
  }

  .gift-link img {
    width: 200px; /* Tamaño ajustable */
    height: auto;
  }
}

@media (max-width: 520px){
  .gifts-section h2 {
    font-size: 2.5rem;
    padding: 0px;
  }
  .gifts-section p {
    font-size: 1rem;
  }
 
}

/* Estilos para los detalles de BBVA */
.bbva-details {
  display: none;
  opacity: 0;
  visibility: hidden;
  width: 90%;
  max-width: 600px;
  margin: 20px auto;
  padding: 30px;
  background-color: #f9f5f0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bbva-details.visible {
  display: block;
  opacity: 1;
  visibility: visible;
}

.bbva-details-content h3 {
  color: #000000;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-family: "trirong", sans-serif;
  
}

.modal-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.modal-info p {
  margin: 5px 0;
  color: #000000;
  font-family: "Avenir";
}

.copy-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  width: 100%;
}

#account-number {
  font-family: "Avenir";
  font-size: 1.5rem;
  font-weight: bold;
  color: #000000;
  margin-bottom: 10px;
}

#copy-button {
  background-color: #000000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1rem;
  min-width: 120px;
  font-family: "Avenir";
}

#copy-button:hover {
  background-color: #b6b6b6;
}

#copy-message {
  display: none;
  color: green;
  margin-top: 10px;
  font-size: 0.9rem;
  font-family: "Avenir";
}

@media (max-width: 520px){
 .bbva-details {
  
  width: 60%;
  
}
 
}


/* ---------------------- */
/* confirmacion */
/* ---------------------- */
.confirmacion-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120vh;
  background-image: url('imagenes/fondoPBlanco.webp');
  background-repeat: repeat; /* Mantiene el tamaño original de la imagen */
  background-position: center;
  background-attachment: scroll; /* Mantiene tu configuración original */
  overflow:  auto;
  min-height:  700px;
  z-index: 0;
}

.confirmation-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 60px; /* Espacio para el mensaje inferior */
}

/* Contenedor principal */
.container {
  position: relative;
  width: 400px;
  max-width: 90%;
}

/* Cuadro principal más alargado */
.codigo-box {
  position: relative;
  width: 350px;
  height: 600px;
  background: white;
  left: -180px;
  padding: 2em;
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 2;
}


.codigo-box.hidden {
  opacity: 0;
  transform: translateY(20px);
}

.codigo-box.visible {
  opacity: 1;
  transform: translateY(0);
}

.codigo-box h2 {
  font-size: 1.5em;
  color: #000000;
  margin-bottom: 3em;
  margin-top: 4em;
}

/* Input de código */
.input-codigo {
  width: 100%;
  padding: 0.8em;
  border: none;
  border-bottom: 2px solid black;
  font-size: 1em;
  outline: none;
  background: transparent;
  text-align: center;
  color: #333;
  margin-top: 1em;
  
}

/* Botón de verificación */
.btn-verificar {
  margin-top: 30px;
  width: 100%;
  padding: 1em;
  border: 2px solid #000000;
  border-radius: 10px;
  background:#000000;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.btn-verificar:hover {
  background: white;
  color: #31332A;
}

/* Cuadro secundario (fondo negro con imagen) */
.cuadro-secundario {
  position: absolute;
  background-image: url("imagenes/fondoCal.webp");
  background-size: cover;
  max-width:700px;
  height: 500px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items:end;
  justify-content:start;
  padding: 2em;
  z-index: 1;
}

/* Imagen de fondo */
.imagen-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.cuadro-secundario h2 {
  font-family: "Astralaga", sans-serif;
  font-size: 2em;
  padding: 0;
  text-align: center; /* Centra el texto */
  max-width: 100%;
  line-height: 1.4; /* Ajusta el espacio entre líneas */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra las palabras dentro del contenedor */
  margin-top: 4em;
  margin-bottom: 1em;
  max-width: 45%; /* Limita el ancho del texto dentro del cuadro */
  text-align: center;
}



/* Frase inspiradora */
.frase {
  font-family: "Avenir";
  font-size: .9em;
  color: #ffffff;
  margin-left: auto;  /* Mueve la frase a la derecha */
  text-align: center;  /* Alinea el texto a la derecha */
  max-width: 45%; /* Limita el ancho del texto dentro del cuadro */

}

/* Nombre de la familia y mensaje */
.nombre-familia, .mensaje-personalizado {
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 1em;
}

.mensaje-fecha-confirmacion {
  position: absolute;
  bottom: 15%; /* En lugar de usar 'top', usamos 'bottom' con porcentaje */
  left: 0;
  right: 0;
  text-align: center;
  color: #000000;
  font-family: "Avenir", sans-serif;
  font-size: 1.3em;
  padding: 1px;
  margin: 0 auto;
  max-width: 80%;
  z-index: 5; /* Aseguramos que esté por encima de otros elementos */
}


@media (max-height: 800px) {
  .confirmacion-section {
    height: auto; /* Cambia a altura automática */
    min-height: 700px; /* Altura mínima */
    padding: 150px 0; /* Añade algo de padding arriba y abajo */
  }
  
}
/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
  .confirmacion-section {
    height: 100vh; /* Eliminar altura fija */
    padding: 20px 0; /* Agregar espacio vertical */
    position: relative; /* Permite posicionar elementos relativos */
    display: flex;
    flex-direction: row; /* Colocar los cuadros uno al lado del otro */
    align-items: center;
  }
  
  .mensaje-fecha-confirmacion {
    font-size: 1em;
    bottom: 10%; /* Ajuste para pantallas medianas */
    position: absolute;
  }
  .cuadro-secundario {
    position: static; /* Eliminar posicionamiento absoluto */
    width: 40%; /* Ocupa el 40% del ancho */
    height: 400px; /* Altura dinámica */
    z-index: 1; /* Asegura que esté detrás del cuadro principal */
    border-radius: 0; /* Elimina bordes redondeados */
    padding: 1em; /* Reduce padding */
    opacity: 0.8; /* Reduce la opacidad para que sea un fondo */
    order: 1; /* Colocar a la izquierda */
    border-radius:3px;
  }

  .container {
    position: static; /* Eliminar posicionamiento relativo */
    width: 60%; /* Ocupa el 60% del ancho */
    max-width: 100%;
    z-index: 2; /* Asegura que esté encima del cuadro secundario */
    order: 2; /* Colocar a la derecha */
  }

  .codigo-box {
    position: static; /* Eliminar posicionamiento absoluto */
    width:50%; /* Ocupar todo el ancho del contenedor */
    height: 450px; /* Altura dinámica */
    left: 0; /* Resetear posición */
    margin-bottom: 20px; /* Espacio entre los cuadros */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius:15px;
    background: rgba(252, 252, 252, 0.9); /* Fondo semi-transparente */
  }

  .codigo-box h2 {
    font-size: 1em;
    color: #000000;
    margin-bottom: 3em;
    margin-top: 5em;
  }

  .cuadro-secundario h2 {
    font-family: "Astralaga", sans-serif;
    font-size: 1.3em;
    max-width: 100%;
    margin-top: 4em;
    margin-bottom: 3em;
  }
  .frase {
    font-family: "Avenir";
    font-size: .9em;
    color: #ffffff;
    margin-left: auto;  /* Mueve la frase a la derecha */
    text-align: center;  /* Alinea el texto a la derecha */
    max-width: 100%; /* Limita el ancho del texto dentro del cuadro */
  
  }
 
}

@media (max-width: 480px) {
  
  .codigo-box {
    padding: 1em; /* Reducir padding aún más */
  }

  .cuadro-secundario {
    padding: 1em; /* Reducir padding */
  }

  .cuadro-secundario h2,
  .cuadro-secundario .frase {
    font-size: 0.9rem; /* Reducir tamaño de fuente */
  }
  .mensaje-fecha-confirmacion {
    font-size: 0.9em;
    bottom: 8%; /* Aún más cerca del borde para pantallas muy pequeñas */
    max-width: 90%; /* Un poco más ancho para que se ajuste mejor */
  }

}

@media (max-height: 800px) {
  .confirmacion-section {
    height: auto;
    min-height: 600px;
    padding: 170px 0
  }
  
  .cuadro-secundario {
    min-height: 300px;
    margin-bottom: 10px;
  }
  
  .codigo-box {
    min-height: 400px;
  }
  
  .mensaje-fecha-confirmacion {
    margin-top: 350px;
  }
}


/* ================================
   Estilos Mejorados para el Modal de Confirmación
   ================================ */

/* Overlay del modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    animation: modalFadeIn 0.4s ease-out;
}

.modal-overlay.active {
    display: flex;
}

@keyframes modalFadeIn {
    from { 
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to { 
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

/* Contenedor principal del modal */
.modal-container {
    position: relative;
    width: 900px;
    max-width: 95%;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(50px) scale(0.95);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

/* Cuadro secundario (fondo oscuro - SANTY) */
.modal-box.secondary {
    position: absolute;
    width: 700px;
    height: 500px;
    background: linear-gradient(135deg, #2b2b2b 0%, #000000 100%);
    border-radius: 20px;
    display: flex;
    left: 15%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 2em;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 1;
}

/* Efecto decorativo en el fondo */
.modal-box.secondary::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.modal-content-secondary {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 50%;
    font-size: .8rem;
}

/* Cuadro principal (blanco - CECY) */
.modal-box.primary {
    position: relative;
    width: 300px;
    height: 520px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 3em 2.5em;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    text-align: center;
    z-index: 10;
    top: -20px;
    left: -150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Efecto decorativo en el cuadro principal */
.modal-box.primary::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(49,51,42,0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.modal-content-primary {
    position: relative;
    z-index: 2;
}

/* Títulos mejorados */
.modal-title {
    font-family: "Astralaga", sans-serif;
    font-size: 2.8em;
    font-weight: 700;
    margin-bottom: 0.3em;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.modal-box.secondary .modal-title {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.modal-box.primary .modal-title {
    color: #31332A;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Mensajes mejorados */
.modal-message {
    font-family: "Avenir", sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 2.5em;
    opacity: 0.9;
}

.modal-box.secondary .modal-message {
    color: #e0e0e0;
}

.modal-box.primary .modal-message {
    color: #555;
}

/* Botones mejorados */
.btn-confirmar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    margin-bottom: 15px;
    border-radius: 50px;
    font-family: "Avenir", sans-serif;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
}


/* Botón WhatsApp del cuadro principal */
.modal-box.primary .btn-confirmar {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
    width: 84%;
}

.modal-box.primary .btn-confirmar:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
}

/* Botón cerrar */
.btn-secundario {
    background: transparent;
    border: 2px solid;
    padding: 12px 24px;
    border-radius: 50px;
    font-family: "Avenir", sans-serif;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.modal-box.secondary .btn-secundario {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.modal-box.secondary .btn-secundario:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.modal-box.primary .btn-secundario {
    color: #31332A;
    border-color: rgba(49, 51, 42, 0.3);
}

.modal-box.primary .btn-secundario:hover {
    background: rgba(49, 51, 42, 0.05);
    border-color: rgba(49, 51, 42, 0.6);
}

/* Icono WhatsApp */
.whatsapp-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    filter: brightness(0) invert(1);
}

/* Botón de cierre del modal (X) */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Animación de pulso para los botones de WhatsApp */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.btn-confirmar:hover {
    animation: pulse 1.5s infinite;
}

/* ========================================= */
/* AJUSTE RESPONSIVO MODAL (CORREGIDO)       */
/* ========================================= */

/* Tabletas y pantallas medianas (Stack vertical empieza antes para evitar apretarse) */
@media (max-width: 890px) {
    .modal-container {
        height: auto;
        /* Quitamos altura fija para que crezca según el contenido */
        min-height: auto; 
        flex-direction: column; /* APILAR VERTICALMENTE */
        align-items: center;
        justify-content: center;
        padding: 20px;
        margin-top: 5vh; /* Un poco de aire arriba */
    }
    
    /* Caja Oscura (Información) */
    .modal-box.secondary {
        position: static; /* Ya no flota */
        width: 100%;
        max-width: 400px; /* Ancho máximo controlado */
        height: auto;
        min-height: 200px;
        padding: 2em 1.5em;
        border-radius: 15px 15px 0 0; /* Redondear solo arriba */
        z-index: 1;
        align-items: center;
        text-align: center;
        margin: 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    }
    
    .modal-content-secondary {
        text-align: center;
        max-width: 100%;
    }
    
    /* Caja Blanca (Acción/WhatsApp) */
    .modal-box.primary {
        position: static; /* Ya no flota */
        width: 100%;
        max-width: 400px; /* Ancho máximo controlado */
        height: auto;
        padding: 2.5em 1.5em;
        border-radius: 0 0 15px 15px; /* Redondear solo abajo */
        z-index: 2;
        margin-left: 0;
        left: 0;
        top: 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    /* Ajuste de textos para que no se vean gigantes */
    .modal-title {
        font-size: 1.8em; /* Reducido de 2.8em */
        margin-bottom: 0.5em;
    }
    
    .modal-message {
        font-size: 1em;
        margin-bottom: 1.5em;
    }

    /* Ajuste botón cerrar */
    .modal-close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5); /* Más visible en móvil */
    }
}

/* Celulares (Ajuste fino) */
@media (max-width: 480px) {
    .modal-container {
        width: 95%;
        padding: 10px;
        margin-top: 10vh;
    }
    
    .modal-box.secondary,
    .modal-box.primary {
        width: 100%;
        padding: 2em 1.2em;
    }
    
    .modal-title {
        font-size: 1.5em; /* Aún más pequeño para móvil */
    }
    
    .modal-message {
        font-size: 0.9em;
    }
    
    .btn-confirmar {
        width: 100%; /* Botón ancho completo */
        padding: 14px 10px;
        font-size: 0.9em;
    }
    
    .whatsapp-icon {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
}

/* Celulares muy pequeños (iPhone SE, etc) */
@media (max-width: 360px) {
    .modal-title {
        font-size: 1.3em;
    }
    .modal-message {
        font-size: 0.85em;
    }
}

/* ---------------------- */
/* footer */
/* ---------------------- */
.footer {
  background: #000000;
  color: #ffffff;
  padding: 10px 0px;
  text-align: center;
  font-family: 'Avenir', sans-serif;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.footer-logo-image{
  width: 200px;
  height: auto;
}

/* Enlaces de redes sociales */
.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icon {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1); /* Iconos en blanco */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* Derechos reservados */
.footer-copyright {
  font-size: 0.9rem;
  color: #ffffff;
  margin-top: 10px;
}

/* 📌 Responsividad */
@media (max-width: 768px) {
  .footer-signature {
    font-size: 1.5rem;
  }

  .social-icon {
    width: 25px;
    height: 25px;
  }

  .footer-copyright {
    font-size: 0.8rem;
  }

  .footer-logo-image{
    width: 200px;
    height: auto;
  }
}

@media (max-width: 480px) {
  .footer-signature {
    font-size: 1.3rem;
  }

  .footer-logo-image{
    width: 200px;
    height: auto;
  }

  .social-icon {
    width: 20px;
    height: 20px;
  }

  .footer-copyright {
    font-size: 0.7rem;
  }
}

/* ========================================= */
/* BOTÓN DE MÚSICA FLOTANTE (FIXED)          */
/* ========================================= */

#mute-button {
    /* POSICIÓN FLOTANTE */
    position: fixed;
    bottom: 30px;  /* Distancia desde abajo */
    right: 30px;   /* Distancia desde la derecha */
    z-index: 9999; /* ¡Encima de todo! (incluso del menú o modales) */
    
    /* ESTILO VISUAL (Círculo elegante) */
    width: 50px;
    height: 50px;
    background-color: #000000; /* Fondo blanco para que resalte sobre fotos oscuras */
    border-radius: 50%; /* Lo hace perfectamente redondo */
    border: 1px solid #ddd; /* Borde sutil */
    opacity: .5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra para que parezca que flota */
    
    /* ALINEACIÓN DEL ICONO */
    display: flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0; /* Reseteo de padding */
}

/* Efecto al pasar el mouse */
#mute-button:hover {
    transform: scale(1.1); /* Crece un poquito */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Ajuste del tamaño del icono dentro del botón */
#mute-icon {
    width: 20px; /* Tamaño del dibujo */
    height: 20px;
    display: block;
}

/* ========================================= */
/* AJUSTE PARA MÓVILES                       */
/* ========================================= */
@media (max-width: 480px) {
    #mute-button {
        bottom: 20px; /* Más pegadito al borde en celular */
        right: 20px;
        width: 45px; /* Un poco más pequeño */
        height: 45px;
    }
    
    #mute-icon {
        width: 18px;
    }
}