/* ============================================================
   VARIABLES Y RESET
   ============================================================ */
:root {
  --cafe: #57260e;
  --crema: #f5f0e8;
  --rojo: #c40c0c;
  --titulo-hero: #f2f1e4;
  --cafe-claro: #7a3a1a;
  --cafe-oscuro: #3d1a08;
  --crema-oscuro: #e8e0d5;
   --blanco:#fff;
  --sombra: 0 8px 30px rgba(87, 38, 14, 0.10);
  --menu-height: 64px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@font-face {font-family: 'Degular';src: url('font/degular.otf') format('otf');}
* {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;-webkit-tap-highlight-color: transparent;overflow-x: hidden;}
body {background-color: var(--crema);color: var(--cafe);line-height: 1.7;padding-top: var(--menu-height);min-height: 100vh;}
img {max-width: 100%;height: auto;display: block;}
.text-center{text-align: center !important;}
.d-none{display: none !important;}
strong,b {font-weight: bold;}
h1,h2,h3,h4,h5{font-family: 'Uchen', sans-serif !important;line-height:1.3 !important;}
p,a,span{font-family: 'Degular', sans-serif !important;}
/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
.script {font-family: 'Great Vibes', cursive;font-weight: 400;color: var(--cafe);letter-spacing: 1px;}
.ampersand {font-family: 'Great Vibes', cursive;color: var(--rojo);}

/* ============================================================
   MENÚ FIJO
   ============================================================ */
.menu-fijo {position: fixed;top: 0;left: 0;right: 0;height: var(--menu-height);background: rgba(245, 240, 232, 0.95);backdrop-filter: blur(16px);box-shadow: 0 2px 20px rgba(87, 38, 14, 0.06);z-index: 1000;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;border-bottom: 1px solid rgba(87, 38, 14, 0.06);}
.menu-logo {font-size: 1.3rem;flex-shrink: 0;}
.menu-logo  img{height: 20px;object-fit: contain;}
.menu-logo .script {font-size: 1.5rem;}
.menu-links {display: flex;gap: 4px;list-style: none;align-items: center;}
.menu-links a {text-decoration: none;font-size: 1rem;font-weight: 600;color: var(--cafe);padding: 3px 16px;border-radius: 30px;transition: all var(--transition);letter-spacing: 0.5px;text-transform: uppercase;white-space: nowrap;}
.menu-links a:hover {background: rgba(87, 38, 14, 0.08);}
.menu-links a.active {background: var(--cafe);color: white;}
.menu-hamburguesa {display: none;background: none;border: none;cursor: pointer;padding: 8px;border-radius: 8px;}
.menu-hamburguesa:hover {background: rgba(87, 38, 14, 0.06);}

/* ============================================================
   HERO
   ============================================================ */
.hero {position: relative;min-height: 70vh;display: flex;align-items: center;justify-content: center;padding: 60px 24px;overflow: hidden;}
.hero-background {position: absolute;inset: 0;background-image: url('img/imelda-y-carlos-herov2.webp');background-size: cover;background-position: top;opacity: 1;z-index: 0;}
.hero-overlay {position: absolute;inset: 0;background: rgba(0,0,0,.2);z-index: 1;}
.hero-content {position: relative;z-index: 2;text-align: center;}

.hero-content h1{color: var(--blanco);font-size: 6vw;line-height: 1;text-align: left;}
.hero-content h1 span.subtitulo{display: block;}
.hero-content img{}
span.hero-ubicacion-texto {font-size: 3rem;font-weight: 500;color: var(--blanco);opacity: 1;position: absolute;right: -27%;bottom: 35px;}
section.date-section {position: relative;text-align: center;/}
.paper-divider{position: relative;padding: 15px 0;}
.paper-divider img{position: absolute;top: 0;z-index: 0;width: 100%;object-fit: cover;opacity: .65;}
section.date-section h2{font-size: 4rem;line-height: 1;z-index: 2;position: relative;}
section.date-section p{margin-top: 20px;font-size: 2rem;line-height: 1;font-style: italic;position: relative;}


section#regalos,section#vestimenta,section#historia,section#ceremonia,section#rsvp,div#countdownDesktop{z-index: 2;position: relative;}

/* ============================================================
   CONTENEDOR
   ============================================================ */
.container {max-width: 1100px;width: 100%;padding: 0 20px;margin: 0 auto;}

/* ============================================================
   SECCIONES (sin cards)
   ============================================================ */
.seccion {padding: 48px 0;border-bottom: 1px solid rgba(87, 38, 14, 0.06);}
.seccion:last-of-type {border-bottom: none;}
.seccion-titulo {font-family: 'Uchen', sans-serif;font-size: 3rem;font-weight: 700;color: var(--cafe);text-align: center;letter-spacing: 4px;text-transform: uppercase;margin-bottom: 32px;}
.seccion-cafe {background-color: var(--cafe);padding: 48px 0;padding-left: 20px;padding-right: 20px;}
.titulo-claro {color: var(--titulo-hero);}
.titulo-rojo{color: var(--rojo);line-height: 1;}
/* ============================================================
   CUENTA REGRESIVA
   ============================================================ */
.countdown-desktop {padding: 16px 0 32px;display: block;margin-top: 350px;}
.countdown-title {text-align: center;margin-bottom: 16px;}
.countdown-grid {display: flex;justify-content: center;gap: 8px;flex-wrap: wrap;}
.countdown-item {background: var(--crema);padding: 12px 16px;border-radius: 8px;min-width: 72px;text-align: center;}
.countdown-number {font-size:3rem;font-weight: 700;color: var(--cafe);line-height: 1.2;font-variant-numeric: tabular-nums;display: block;}
.countdown-label {font-size: 1rem;font-weight: 600;letter-spacing: 2px;color: var(--cafe);opacity: 0.5;display: block;margin-top: 2px;}
.countdown-separator {color: var(--rojo);font-size: 2rem;align-self: center;padding: 0 2px;}

/* ============================================================
   HISTORIA
   ============================================================ */
.historia-contenido {display: grid;grid-template-columns: 1fr 1fr;gap: 48px;align-items: center;}
.historia-texto {font-size: 16px;line-height: 1.9;color: #57260e; }
.historia-texto p{font-weight: 600;margin-bottom: 16px;}
.historia-texto p:last-child {margin-bottom: 0;}
.historia-destacado {font-size: 1.05rem;font-weight: 400;border-left: 3px solid var(--rojo);padding-left: 16px;}
.historia-imagen-wrapper {position: relative;}

/* ============================================================
   CAPÍTULO
   ============================================================ */
section#ceremonia {margin-top: 300px;z-index: 2;position: relative;}
.capitulo-grid {display: grid;grid-template-columns: 1fr;gap: 100px;margin-top: 30px;}
.capitulo-item {display: grid;grid-template-columns: repeat(2, 1fr);gap: 50px;}
.capitulo-imagen {position: relative;border-radius: 12px;overflow: hidden;aspect-ratio: 16/10;}
.capitulo-imagen img {width: 100%;height: 100%;object-fit: cover;}
.capitulo-info {color: var(--cafe);margin-top: 25px;}
.capitulo-sub {font-size: 1rem;font-weight: 600;color:var(--cafe-oscuro);text-transform: uppercase;margin-bottom: 2px;}
.capitulo-nombre {font-size: 2rem;font-weight: 600;color: var(--cafe);margin-bottom: 15px;line-height: 1.3;}
.capitulo-hora {font-size: 16px;display: flex;align-items: center;gap: 8px;color: var(--cafe);margin: 2px 0;font-weight: 600;}
.capitulo-hora img {width: 16px;height: 16px;filter: brightness(0) invert(1);opacity: 0.7;}
.capitulo-direccion {font-size: 16px;color: var(--cafe);display: flex;align-items: flex-start;gap: 8px;line-height: 1.4;font-weight: 600;}
.capitulo-direccion img {width: 14px;height: 14px;filter: brightness(0) invert(1);opacity: 0.5;margin-top: 3px;flex-shrink: 0;}
.btn-mapa {display: inline-flex;align-items: center;gap: 8px;margin-top: 20px;padding: 10px 40px;background: var(--cafe);color: white;border: none;border-radius: 20px;font-size: 1rem;font-weight: 600;font-family: 'Uchen', sans-serif;text-decoration: none;transition: all var(--transition);width: fit-content;}
.btn-mapa img {width: 16px;height: 16px;filter: brightness(0) invert(1);}
.btn-mapa:hover {background: var(--cafe-oscuro);transform: translateY(-2px);}

/* ============================================================
   VESTIMENTA
   ============================================================ */
section#llegar h2{color: var(--blanco);text-align: center;}
.grid-vestimenta {display: grid;grid-template-columns: repeat(2,1fr);gap: 30px;align-items: center;}
.titulovestimenta {display: grid;grid-template-columns: 20% 80%;align-items: center;gap: 50px;position: relative;}
.titulovestimenta::after{content: "";position: absolute;height: 100%;width: 2px;background: var(--rojo);right: -20px;}
.titulovestimenta img{max-width: 100%;height: 100px;object-fit: contain;}
.titulovestimenta h2{margin-bottom: 0;text-align: left;line-height: 1.2;letter-spacing: initial;}
.vestimenta-texto {max-width: 600px;margin: 0 auto;text-align: left;font-size: 1rem;color: var(--cafe);line-height: 1.2;font-weight: 600;}
.vestimenta-texto p {margin-bottom: 20px;}
.vestimenta-texto strong {font-weight: 700;display: block;}
.vestimenta-restriccion {color: var(--cafe);font-weight: 600;margin-bottom: 0 !important;}

/* ============================================================
   CÓMO LLEGAR
   ============================================================ */
.grid-camino{display: grid;grid-template-columns: repeat(3,1fr);gap: 50px;margin-top: 50px;}
.llegar-item {display: flex;gap: 20px;margin-bottom: 16px;align-items: flex-start;padding: 14px 18px;background: transparent;border-radius: 12px;height: 100%;flex-direction: column;}
.llegar-item:last-child {margin-bottom: 0;}
.llegar-icon {text-align: center;width: 100%;padding: 10px;}
.llegar-icon img{height: 50px;margin: 0 auto;object-fit: contain;}
.llegar-texto h4 {font-weight: 700;color: var(--blanco);font-size: 1.3rem;line-height: 1.2;margin-bottom: 15px;font-family: 'Degular', sans-serif !important;}
.llegar-texto p {color: var(--blanco);text-align: justify;}
/* ============================================================
   RSVP
   ============================================================ */
.seccion-rsvp {background: var(--crema, #f5f0e8);padding: 60px 0;margin: 16px 0;overflow: hidden;position: relative;}
.rsvp-container {display: flex;align-items: center;justify-content: flex-start;max-width: 100%;margin: 0;padding: 0;gap: 0;position: relative;min-height: 70vh;}
.rsvp-imagen-wrapper {flex: 0 0 60%;max-width: 60%;position: relative;height: 70vh;min-height: 400px;overflow: hidden;border-radius: 0;}
.rsvp-imagen-principal {width: 100%;height: 100%;object-fit: cover;display: block;}
.rsvp-caja-flotante {position: absolute;right: 17%;top: 40%;transform: translateY(-50%);z-index: 10;width: 45%;max-width: 520px;}
.rsvp-caja-contenido {background: var(--cafe, #57260e);padding: 48px 40px;border-radius: 16px;color: white;width: 100%;box-shadow: 0 12px 48px rgba(87, 38, 14, 0.30);position: relative;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.rsvp-caja-contenido:hover {transform: translateY(-4px);box-shadow: 0 16px 56px rgba(87, 38, 14, 0.40);}
.rsvp-imagen-flotante {position: absolute;bottom: -30px;left: -40px;width: 140px;height: auto;object-fit: contain;z-index: 15;filter: drop-shadow(0 8px 24px rgba(87, 38, 14, 0.25));pointer-events: none;}
.rsvp-titulo {font-family: 'Uchen', sans-serif;font-size: 2.2rem;font-weight: 700;color: white;text-align: center;letter-spacing: 4px;text-transform: uppercase;margin-bottom: 16px;}
.rsvp-texto {text-align: center;font-weight: 300;font-size: 0.95rem;line-height: 1.8;color: rgba(255, 255, 255, 0.85);margin-bottom: 12px;}
.rsvp-agradecimiento {text-align: center;font-weight: 400;font-size: 0.95rem;color: rgba(255, 255, 255, 0.9);margin-bottom: 28px;}
.rsvp-boton-wrapper {text-align: center;}
.btn-rsvp {display: inline-flex;align-items: center;gap: 10px;background: white;color: var(--cafe, #57260e);border: none;padding: 16px 44px;border-radius: 50px;font-size: 1rem;font-weight: 600;font-family: 'Uchen', sans-serif;letter-spacing: 2px;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 4px 18px rgba(255, 255, 255, 0.25);text-transform: uppercase;text-decoration: none;}
.btn-rsvp i {font-size: 1.1rem;}
.btn-rsvp:hover {background: #f0ece6;transform: translateY(-3px);box-shadow: 0 8px 32px rgba(255, 255, 255, 0.35);}
.btn-rsvp:active {transform: scale(0.96);}
@media (max-width: 1023px) {.seccion-rsvp {padding: 40px 0;}.rsvp-container {min-height: 60vh;}.rsvp-imagen-wrapper {height: 60vh;min-height: 340px;}.rsvp-caja-flotante {right: 3%;width: 50%;max-width: 420px;}.rsvp-caja-contenido {padding: 36px 28px;}.rsvp-titulo {font-size: 1.8rem;}.rsvp-imagen-flotante {width: 110px;bottom: -25px;left: -30px;}.btn-rsvp {padding: 14px 36px;font-size: 0.9rem;}}
@media (max-width: 767px) {.seccion-rsvp {padding: 0;margin: 0;background: var(--crema, #f5f0e8);}.rsvp-container {flex-direction: column;justify-content: center;min-height: auto;}.rsvp-imagen-wrapper {flex: 0 0 100%;max-width: 100%;height: 45vh;min-height: 280px;border-radius: 0;width: 100%;}.rsvp-imagen-principal {width: 100%;height: 100%;object-fit: cover;}.rsvp-caja-flotante {position: relative;right: auto;top: auto;transform: none;width: 100%;max-width: 100%;padding: 0 16px;margin-top: -30px;}.rsvp-caja-contenido {padding: 32px 24px;border-radius: 16px;box-shadow: 0 8px 32px rgba(87, 38, 14, 0.20);}.rsvp-caja-contenido:hover {transform: translateY(-2px);}.rsvp-imagen-flotante {width: 90px;bottom: -20px;left: -20px;filter: drop-shadow(0 4px 16px rgba(87, 38, 14, 0.25));}.rsvp-titulo {font-size: 1.6rem;letter-spacing: 3px;margin-bottom: 12px;}.rsvp-texto {font-size: 0.85rem;line-height: 1.7;margin-bottom: 8px;}.rsvp-agradecimiento {font-size: 0.85rem;margin-bottom: 20px;}.btn-rsvp {padding: 14px 32px;font-size: 0.9rem;width: 100%;max-width: 280px;justify-content: center;}.rsvp-boton-wrapper {width: 100%;}}
@media (max-width: 400px) {.rsvp-imagen-wrapper {height: 35vh;min-height: 220px;}.rsvp-caja-flotante {padding: 0 12px;margin-top: -20px;}.rsvp-caja-contenido {padding: 24px 16px;}.rsvp-imagen-flotante {width: 70px;bottom: -15px;left: -15px;}.rsvp-titulo {font-size: 1.3rem;letter-spacing: 2px;}.rsvp-texto {font-size: 0.8rem;}.rsvp-agradecimiento {font-size: 0.8rem;}.btn-rsvp {padding: 12px 24px;font-size: 0.8rem;max-width: 220px;}}
@media (min-width: 1200px) {.rsvp-container {min-height: 80vh;}.rsvp-imagen-wrapper {height: 80vh;}.rsvp-caja-flotante {max-width: 560px;}.rsvp-caja-contenido {padding: 56px 48px;}.rsvp-titulo {font-size: 2.6rem;}.rsvp-imagen-flotante {width: 170px;bottom: -35px;left: -50px;}}
@keyframes slideInRight {from {opacity: 0;transform: translateX(40px);}to {opacity: 1;transform: translateX(0);}}
.rsvp-caja-contenido {animation: slideInRight 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;}
@media (prefers-reduced-motion: reduce) {.rsvp-caja-contenido {animation: none;opacity: 1;}}



section#regalos {margin-top: 350px;}

/* ============================================================
   REGALOS
   ============================================================ */
.regalos-texto {text-align: center;font-weight: 600;color: var(--cafe);margin-bottom: 16px;max-width: 500px;margin-left: auto;margin-right: auto;line-height: 1.2;}
.banco-info {text-align: center;font-size: 0.95rem;font-weight: 600;color: var(--texto-oscuro);margin: 8px 0 6px;}

/* ============================================================
   CLABE CON COPIA
   ============================================================ */
.clabe-wrapper {position: relative;margin: 12px auto 4px;max-width: 520px;}
.clabe-box {background: var(--crema);padding: 5px 10px;border-radius: 14px;font-family: 'Courier New', monospace;font-size: 1.15rem;letter-spacing: 2px;text-align: center;border: 2px dashed var(--cafe-claro);word-break: break-all;cursor: pointer;transition: all var(--transition);user-select: all;-webkit-user-select: all;font-weight: 600;color: var(--cafe-oscuro);text-decoration: none;}
.clabe-box:hover {border-color: var(--dorado);background: var(--crema-oscuro);}
.clabe-box:active {transform: scale(0.97);background: var(--dorado-suave);border-color: var(--dorado);}
.clabe-box:focus-visible {outline: 2px solid var(--dorado);outline-offset: 2px;}
.clabe-hint {font-size: 15px;color: var(--cafe-oscuro);opacity: .8;text-align: center;margin-top: 8px;font-weight: 300;}
.clabe-hint i {margin-right: 4px;}
.clabe-toast {position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%) translateY(80px);background: var(--texto-oscuro);color: white;padding: 14px 32px;border-radius: 30px;font-size: 0.95rem;font-weight: 500;opacity: 0;transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);z-index: 2000;pointer-events: none;box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);}
.clabe-toast.show {opacity: 1;transform: translateX(-50%) translateY(0);}

/* ============================================================
   TOAST
   ============================================================ */
.clabe-toast {position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%) translateY(80px);background: var(--cafe);color: white;padding: 14px 32px;border-radius: 30px;font-size: 0.95rem;font-weight: 500;opacity: 0;transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);z-index: 2000;pointer-events: none;box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);}
.clabe-toast.show {opacity: 1;transform: translateX(-50%) translateY(0);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {text-align: center;font-size: 0.8rem;color: var(--cafe);opacity: 0.5;padding: 32px 0 40px;letter-spacing: 0.5px;border-top: 1px solid rgba(87, 38, 14, 0.08);margin-top: 16px;}

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

/* Tablet */
@media (max-width: 1023px) {
  .hero-fecha {font-size: 3.5rem;}
  .historia-contenido {gap: 32px;}
  .capitulo-grid {gap: 24px;}
  .grid-camino{grid-template-columns: repeat(1,1fr);gap: 50px;margin-top: 50px;}
}

   @media only screen and (max-width: 991px) and (orientation: landscape) {
      section#regalos,.countdown-desktop,section#ceremonia {margin-top: 150px;}
      section.date-section h2{font-size: 8vw;}
      .seccion-titulo{font-size: 2rem;}
      .grid-camino {gap: 5px;}
      .capitulo-nombre{font-size: 1.3rem;}
   }



@media(max-width:850px){
  section#ceremonia {margin-top: 150px;}
  .capitulo-item {display: grid;grid-template-columns: repeat(1, 1fr);gap: 25px;}
  .capitulo-info{margin-top: 0;}
  .grid-vestimenta{grid-template-columns: repeat(1, 1fr);}
  .titulovestimenta::after{content: "";position: absolute;height: 2px;width: 100%;background: var(--rojo);left: 0;bottom: -15px;}
  section#regalos,.countdown-desktop {margin-top: 50px;}

  .titulovestimenta {display: grid;grid-template-columns: repeat(2,1fr);align-items: center;gap: 0;position: relative;}
  .titulovestimenta img{max-width: 100%;height: auto;object-fit: contain;}

  .hero-content img{width: 80%;margin: auto;}
  .container{max-width: 85%;}
  .rsvp-container{max-width: 85%;margin: auto;}

  .llegar-item{padding: 0;}
   p,a,span{font-size: 15px !important;font-weight: 600 !important;}

   div#countdownDesktop .container{max-width: 100%;}
   div#countdownDesktop .countdown-number{font-size: 2rem !important;}

   .paper-divider img{height: 14vh;opacity: .85;}

   .grid-camino{gap: 10px;margin-top: 10px;}
   section#ceremonia h2 br{display: none;}
   .llegar-texto h4{font-size: 1.1rem;}
}

/* Móvil */
@media (max-width: 767px) {
  .menu-hamburguesa {display: block;  }
  .menu-links {position: fixed;top: 0;left: 0;right: 0;background: rgba(245, 240, 232, 1);backdrop-filter: blur(12px);flex-direction: column;padding: 16px 20px;gap: 4px;box-shadow: 0 8px 30px rgba(87, 38, 14, 0.10);transform: translateY(-120%);transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);align-items: stretch;  }
  .menu-links.open {transform: translateY(0);top: var(--menu-height);  }
  .menu-links a {font-size: 0.85rem;padding: 3px 16px;text-align: center;border-radius: 10px;  }
  .hero {min-height: 50vh;padding: 40px 16px;  }
  .hero-content h1{font-size: 4rem;}
  span.hero-ubicacion-texto {font-size: 2rem;position: relative;right: initial;bottom: initial;text-align: center;display: block;margin-top: 20px;}
  .seccion {padding: 32px 0;}
  section.date-section h2{font-size: 8vw;}
  section.date-section p{margin-top: 10px;font-size: 1.5rem;}
  .seccion-titulo {font-size: 2rem;letter-spacing: 1px;margin-bottom: 24px;  }
  .seccion-cafe {padding: 32px 16px;  }

  section#ceremonia {margin-top: 50px;}

  /* Countdown móvil visible */
  .countdown-item {min-width: 56px;padding: 8px 10px;  }
  .countdown-number {font-size: 1.8rem;  }
  .countdown-separator {font-size: 1.4rem;  }
  .countdown-label {font-size: 0.5rem;  }

  /* Historia móvil - una columna */
  .historia-contenido {grid-template-columns: 1fr;gap: 24px;  }
  .historia-texto {font-size: 0.9rem;  }
  .historia-destacado {font-size: 0.95rem;padding-left: 12px;  }
  .historia-imagen {aspect-ratio: 4/3;  }
  .icon-overlay.icon-sm {width: 38px;height: 38px;top: 6px;right: 6px;display: none !important;  }
  .icon-overlay.icon-sm img {width: 18px;height: 18px;  }

  /* Capítulo móvil - una columna */
  .capitulo-grid {grid-template-columns: 1fr;gap: 24px;  }
  .capitulo-nombre {font-size: 22px;}
  .capitulo-sub { }
  .btn-mapa {padding: 8px 18px;font-size: 0.8rem;  }
  .btn-mapa img {width: 14px;height: 14px;  }

  .titulovestimenta::after{bottom: -5px;}

  /* Vestimenta móvil */


  /* Cómo llegar móvil */
  .llegar-item {padding: 0;gap: 10px;}


  /* RSVP móvil */
  .seccion-rsvp {padding: 28px 16px;margin: 0;border-radius: 0;border-left: none;border-right: none;}
  .btn-rsvp {padding: 14px 36px;font-size: 1rem;width: 100%;max-width: 280px;}
  .rsvp-texto {font-size: 0.9rem;}
  .footer {font-size: 0.7rem;padding: 24px 0 32px;}
}

/* Móvil pequeño */
@media (max-width: 400px) {
  .hero-fecha {font-size: 2.2rem;}
  .hero-ubicacion-texto {font-size: 0.75rem;letter-spacing: 4px;}
  .seccion-titulo {font-size: 1.1rem;letter-spacing: 1.5px;}
  .countdown-item {min-width: 48px;padding: 6px 8px;}
  .countdown-number {font-size: 1.5rem;}
  .countdown-separator {font-size: 1.2rem;}
}



/* ============================================================
   SECCIÓN HISTORIA - 2 FILAS × 2 COLUMNAS
   ============================================================ */

/* Contenedor principal de la sección */
#historia {padding: 60px 0;background: #f5f0e8;margin-top: 150px;}

/* Grid de la historia - 2 columnas */
.historia-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 48px;align-items: center;margin-bottom: 48px;}

/* La segunda fila invierte el orden (texto a la derecha, imágenes a la izquierda) */
.historia-grid-reverse {direction: rtl;margin-bottom: 0;}
.historia-grid-reverse > * {direction: ltr;}

/* ===== COLUMNA DE TEXTO ===== */
.historia-texto {font-size: 0.95rem;line-height: 1.9;color: #57260e; }
.historia-texto p {margin-bottom: 16px;}
.historia-texto p:last-child {margin-bottom: 0;}

/* Título de la sección */
.section-title {font-family: 'Uchen', sans-serif;font-size: 3rem;font-weight: 700;color: var(--rojo);text-transform: uppercase;margin-bottom: 20px;text-align: left;}

/* Texto destacado con borde rojo */
.historia-destacado {font-size: 1.05rem;font-weight: 400;border-left: 3px solid #c40c0c;padding-left: 16px;}

/* Cita de amor con icono */
.historia-cita-amor {font-size: 1.05rem;font-weight: 400;color: #57260e;}
.historia-cita-amor i {color: #c40c0c;margin-right: 8px;font-size: 1.2rem;}

/* ===== COLUMNA DE IMAGEN SIMPLE ===== */
.historia-imagen {position: relative;border-radius: 12px;box-shadow: 0 8px 30px rgba(87, 38, 14, 0.10);aspect-ratio: 4/3;}
.historia-imagen img {width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 10px;object-position: top;}

/* ===== ICONO FLOTANTE (corazón) ===== */
.icon-overlay {position: absolute;bottom: -50px;right: -25px;display: flex;align-items: center;justify-content: center;z-index: 7;}
.icon-overlay img{object-fit: contain;height: 140px;}
.icon-overlay.icon-sm {width: 44px;height: 44px;font-size: 1.1rem;top: 8px;right: 8px;}

/* ===== FOTOS ENCIMADAS (2 imágenes una sobre otra) ===== */
.fotos-encimadas {position: relative;min-height: 380px;}
.foto-encimada {position: absolute;border-radius: 12px;overflow: hidden;box-shadow: 0 8px 30px rgba(87, 38, 14, 0.10);}
.foto-encimada img {width: 100%;height: 100%;object-fit: cover;display: block;}

/* Imagen principal (adelante, más grande) */
.foto-encimada.principal {width: 78%;height: 340px;z-index: 2;top: 0;left: 0;}

/* Imagen de fondo (detrás, más pequeña y desplazada) */
.foto-encimada.fondo {width: 75%;height: 300px;z-index: 2;bottom: -30px;right: 0;}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */
@media (max-width: 1023px) {
  #historia {padding: 40px 0;margin-top: 20px;}
  .historia-grid {gap: 32px;margin-bottom: 36px;}
  .section-title {font-size: 1.5rem;letter-spacing: 2px;}
  .fotos-encimadas {min-height: 320px;}
  .foto-encimada.principal {height: 280px;width: 80%;}
  .foto-encimada.fondo {height: 210px;width: 70%;bottom: -25px;}
  .historia-imagen {aspect-ratio: 4/3;}
}

/* ============================================================
   RESPONSIVE - MÓVIL (1 columna)
   ============================================================ */
@media (max-width: 767px) {
  #historia {padding: 32px 0;}
  .historia-grid {grid-template-columns: 1fr;gap: 24px;margin-bottom: 32px;}
  .historia-grid-reverse {direction: ltr;}
  .historia-grid-reverse > * {direction: ltr;}
  .section-title {font-size: 1.3rem;letter-spacing: 2px;text-align: center;}
  .historia-texto {font-size: 0.9rem;}
  .historia-destacado {font-size: 0.95rem;padding-left: 12px;}
  .historia-cita-amor {font-size: 0.95rem;}

  /* Imagen simple */
  .historia-imagen {aspect-ratio: 4/3;}
  .icon-overlay {right: 0;bottom: 0;}
  .icon-overlay img{object-fit: contain;height: 90px;}
  .icon-overlay.icon-sm {width: 38px;height: 38px;font-size: 1rem;top: 6px;right: 6px;}

  /* Fotos encimadas en móvil */
.fotos-encimadas {min-height: 300px;margin-top: 8px;}
  .foto-encimada.principal {height: 300px;width: 82%;}
  .foto-encimada.fondo {height: 200px;width: 72%;bottom: -15px;right: 0;}
}

/* ============================================================
   RESPONSIVE - MÓVIL PEQUEÑO
   ============================================================ */
@media (max-width: 400px) {
  .section-title {font-size: 1.1rem;}
  .fotos-encimadas {min-height: 180px;}
  .foto-encimada.principal {height: 160px;width: 85%;}
  .foto-encimada.fondo {height: 120px;width: 75%;bottom: -12px;}
  .icon-overlay {}
  .icon-overlay.icon-sm {width: 32px;height: 32px;font-size: 0.85rem;top: 4px;right: 4px;}
}


/* ============================================================
   CONTROL DE MÚSICA - MP3 LOCAL
   ============================================================ */
.musica-control {position: fixed;bottom: 30px;right: 30px;z-index: 9999;display: flex;align-items: center;gap: 10px;}
.btn-musica {background: var(--cafe, #57260e);color: white;border: none;border-radius: 50px;padding: 12px 20px;font-family: 'Quicksand', sans-serif;font-weight: 600;font-size: 0.9rem;cursor: pointer;box-shadow: 0 4px 15px rgba(87, 38, 14, 0.3);transition: all 0.3s ease;display: flex;align-items: center;gap: 8px;}
.btn-musica:hover {transform: scale(1.05);background: var(--cafe-oscuro, #3d1a08);}
.btn-musica i {font-size: 1rem;}
.btn-musica.reproduciendo {background: var(--rojo, #c40c0c);}
.btn-musica:disabled {opacity: 0.6;cursor: not-allowed;transform: none;}
.musica-loading {color: var(--cafe);font-size: 0.7rem;font-weight: 300;}
@media (max-width: 767px) {.musica-control {bottom: 20px;right: 20px;}.btn-musica {padding: 10px 16px;font-size: 0.8rem;}}