html {
      scroll-behavior: smooth;
    }
/* ==========================================================
       BASE - FONDO CLARO Y ESTILO ELEGANTE
    ========================================================== */
    :root{
      --bg: url(../images/fondo_blanco.jpeg); /* Fondo crema claro con imagen */
      /*--bg:#f6f2eb;*/ /* Fondo crema claro */
      --text:#4b463f;
      --accent:#b59b72; /* dorado suave */
      --muted:#6b645b;
      --card:rgba(255,255,255,0.75);
      --glass:rgba(255,255,255,0.45);
      --maxw:1100px;
    }

    *{box-sizing:border-box;margin:0;padding:0;}
    
    body{
      background:var(--bg);
      color:var(--text);
      font-family:Inter, sans-serif;
      -webkit-font-smoothing:antialiased;
    }

    a{text-decoration:none;color:inherit;}

    
    .libre-baskerville {
      font-family: "Libre Baskerville", serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
    }

    /* ==========================================================
       HEADER
    ========================================================== */
    header{
      position:fixed;
      top:18px; left:0; right:0;
      z-index:100;
      display:flex;
      justify-content:center;
      pointer-events:none;
    }

    .nav{
      background:var(--glass);
      padding:10px 22px;
      border-radius:999px;
      backdrop-filter:blur(8px);
      border:1px solid rgba(0,0,0,0.08);
      pointer-events:auto;
      font-family:'Playfair Display', serif;
      font-size:18px;
      letter-spacing:1px;
      color:var(--text);
    }

    /* ==========================================================
       HERO (SECCIÓN #home) — SOBRE DE CARTA COMO FONDO
    ========================================================== */
    /* --- VARIABLES GLOBALES --- */
        :root {
          --verde-olivo: transparent; /* Ya no usas color solido */
          --img-sobre-cuerpo: url('../images/sobre-cuerpo.png');
          --img-sobre-solapa: url('../images/sobre-solapa.png');
          --img-sello: url('../images/sello-lacre.png');
          --img-papel: url('../images/papel.png');
          --beige-papel: #faf7f2;
          --dorado: #b59b72;
          --verde-oscuro: #4b463f;
          /* etc... */
        }

        /* Contenedor principal para centrar y activar el scroll */
        .trigger-area {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
            z-index: 5;
        }
        .scroll-instruction { 
            margin-bottom: 40px; 
            color: #666; 
            font-size: 14px;
            letter-spacing: 1px;
        }

        /* --- EL CONTENEDOR DEL SOBRE --- */
        .envelope-stage {
            position: relative;
            width: 500px;  /* Ancho del sobre */
            height: 350px; /* Alto del sobre cerrado */
            perspective: 1500px; /* CRUCIAL: Da el efecto 3D para que la solapa se abra realistamente */
            cursor: pointer;
        }

        /* Clase común para todas las capas */
        .layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Curva de animación suave */
        }

        /* --- CAPA 1: EL CUERPO DEL SOBRE (Fondo y bolsillo) --- */
        .layer-body {
            z-index: 10;
            background-image: var(--img-sobre-cuerpo);
            background-size: auto;
            background-position: center;
        }

        /* --- CAPA 2: LA CARTA (El papel interior) --- */
        .layer-letter {
            opacity: 0;
            z-index: 5;
            width: 90%;
            top: 25%;
            left: 5%;
            height: auto;
            background-image: var(--img-papel);
            background-size: cover;
            background-position: center;
            background-color: var(--beige-papel);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            padding: 30px 0px 30px 0px;
            box-sizing: border-box;
            text-align: center;
            color: var(--verde-oscuro);
            overflow: hidden;
            transform: translateY(30px);
        }
        
        /* Estilos del texto de la carta */
        .letter-content h1 {
            font-family: 'Pinyon Script', cursive;
            font-size: 2.5rem;
            margin: 0; color: var(--dorado);
        }
        .letter-content p { margin: 10px 0; font-size: 1rem; }
        .letter-content .details { margin-top: 20px; font-weight: bold; }
        .letter-content small { display: block; margin-top: 20px; color: var(--dorado); }


        /* --- CAPA 3: LA SOLAPA MÓVIL (El triángulo de arriba) --- */
        .layer-flap {
            z-index: 20; /* Encima de todo al principio */
            height: 100%; /* La solapa suele ser la mitad de la altura */
            background-image: var(--img-sobre-solapa);
            background-size: auto;
            background-position: center;
            transform-origin: top; /* Gira desde el borde superior */
        }

        /* --- CAPA 4: EL SELLO DE LACRE --- */
        .layer-seal {
            z-index: 30;
            width: 90px;
            height: 90px;
            top: 35%; /* Posición ajustada a la punta de la solapa */
            left: calc(50% - 45px);
            
            background-image: var(--img-sello);
            background-size: cover;
            background-position: center;
            border-radius: 50%;
            box-shadow: 2px 4px 10px rgba(0,0,0,0.3);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* =========================================
           ESTADOS DE ANIMACIÓN (Cuando se abre)
        ========================================= */
        .envelope-stage.is-open .layer-flap {
            /* Gira 180 grados hacia arriba */
            transform: rotateX(180deg);
            /* Importante: bajamos el z-index para que al abrirse quede "detrás" de la carta que sale */
            z-index: 1;
            transition-duration: 1s;
        }

        .envelope-stage.is-open .layer-seal {
            /* El sello desaparece suavemente */
            opacity: 0;
            transform: scale(0.5) translateY(-50px);
            pointer-events: none;
        }

        .envelope-stage.is-open .layer-letter {
            /* La carta sube y se coloca por delante del cuerpo del sobre */
            z-index: 15;
            opacity: 100;
            transform: translateY(-160px); /* Ajusta este valor para que salga más o menos */
            transition-delay: 0.5s; /* Espera un poco a que la solapa se abra */
            transition-duration: 2.0s;
        }

        /* Responsivo para tabletas (iPad, tablets medianas) */
        @media (max-width: 1800px) and (min-width: 601px) {
            .envelope-stage.is-open .layer-flap {top: 15%;}
            .envelope-stage { width: 420px; height: 300px; }
            .layer-seal { width: 80px; height: 80px; top: 32%; left: calc(50% - 40px); }
            .letter-content h1 { font-size: 2.2rem; }
            .letter-content p { font-size: 0.95rem; }
            .scroll-instruction { font-size: 13px; }
            .envelope-stage.is-open .layer-letter { transform: translateY(-210px); opacity: 100; }
        }

        /* Responsivo para móviles pequeños */
        @media (max-width: 600px) {
            .envelope-stage { width: 320px; height: 220px; }
            .layer-seal { width: 70px; height: 70px; top: 30%; left: calc(50% - 35px); }
            .letter-content h1 { font-size: 1.8rem; }
            .letter-content p { font-size: 0.8rem; }
            .envelope-stage.is-open .layer-letter { transform: translateY(-210px); opacity: 100; }
        }
        
    .hero{
      height:100vh;
      min-height:680px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      text-align:center;
      padding:20px;
      background-image:url('https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&w=1600&q=80');
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
    }

    /* Capita blanca suave sobre el fondo de sobre */
    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(255,255,255,0.65);
      backdrop-filter:blur(2px);
    }

    .hero-content{
      position:relative;
      z-index:10;
      max-width:880px;
    }

    .date{
      font-family:'Inter',sans-serif;
      letter-spacing:2px;
      font-size:14px;
      margin-bottom:16px;
      color:var(--muted);
      text-transform:uppercase;
    }

    .title{
      font-family:'Great Vibes',cursive;
      font-size:84px;
      color:var(--accent);
    }

    .subtitle{
      margin-top:10px;
      font-size:20px;
      font-family:'Playfair Display',serif;
      color:var(--text);
      opacity:0.85;
    }

    .cta-row{
      margin-top:28px;
      display:flex;
      gap:12px;
      justify-content:center;
      flex-wrap:wrap;
    }

    .btn{
      background:white;
      border:1px solid #d7d2ca;
      padding:10px 18px;
      border-radius:10px;
      cursor:pointer;
      font-weight:600;
      color:var(--text);
    }

    .btn.primary{
      border:2px solid var(--accent);
      color:var(--accent);
      background:transparent;
    }

    /* ==========================================================
       SECCIONES
    ========================================================== */

    
    /* ============================================
    Envelope Hero Section
    ============================================= */

    .envelope-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    padding:40px 20px;
    background:var(--bg);
    position:relative;
    overflow: hidden;
    }

    section.story{
      padding:30px 0;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .container{
      max-width:var(--maxw);
      margin:auto;
      padding:0 24px;
    }

    .container-img{
      max-width:var(--maxw);
      margin:auto;
    }

    .row{
      display:block;
      grid-template-columns:1fr 420px;
      gap:40px;
      align-items:center;
    }

    .col-text h2{
      font-family:'Playfair Display',serif;
      font-size:34px;
      margin-bottom:12px;
    }

    .col-text p{
      font-size:16px;
      line-height:1.7;
      color:var(--muted);
    }

    .card{
      background:var(--card);
      padding:18px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,0.08);
    }

    .photo{
      width:100%;
      height:260px;
      object-fit:contain;
      border-radius:10px;
      padding: 2%;
    }

    .photo-full {
      width: 100%;
      object-fit: contain;
      padding: 2% 0 2% 0;
    }

    /* RSVP */
    input,textarea,select{
      padding:10px;
      border-radius:8px;
      border:1px solid #cfcfcf;
      background:white;
      color:var(--text);
      font-size:15px;
    }

    /* ============================================
    SECCIÓN DETALLES — estilo imagen
    ============================================= */

    .detalles-section{
    background: url(../images/fondo_verde.jpeg);
    /*background:#c5c5a5;*/ /* verde pastel arena */
    padding:80px 20px;
    text-align:center;
    font-family:'Playfair Display', serif;
    color:#f5f2e9;
    }

    .detalles-intro{
    font-size:18px;
    margin-bottom:40px;
    opacity:0.95;
    }

    /* Fecha grande */
    .fecha-block .mes{
    font-size:25px;
    letter-spacing:3px;
    margin-bottom:14px;
    }

    .fecha-grid{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    font-size:18px;
    }

    .fecha-lado{
    opacity:0.85;
    border-top: solid;
    border-bottom: solid;
    padding: 0px 20px;
    }

    .fecha-dia{
    font-size:70px;
    font-weight:300;
    font-family:'Playfair Display', serif;
    }

    /* Countdown */
    .faltan{
    margin-top:50px;
    font-size:22px;
    letter-spacing:2px;
    }

    .countdown{
    margin-top:20px;
    display:flex;
    justify-content:center;
    gap:40px;
    font-family:'Playfair Display', serif;
    color:#f0ede4;
    }

    .countdown div{
    text-align:center;
    }

    .countdown span{
    font-size:40px;
    }

    .countdown small{
    display:block;
    margin-top:4px;
    font-size:14px;
    opacity:0.8;
    }

    /* Calendar */
    .calendar-block{
    margin-top:70px;
    }

    .gran-dia{
    font-size:26px;
    margin-bottom:5px;
    }

    .gran-dia-mes{
    letter-spacing:2px;
    font-size:16px;
    margin-bottom:20px;
    }

    .calendar{
    display:flex;
    flex-direction:column;
    align-items:center;
    }

    .calendar .week{
    font-size:14px;
    letter-spacing:4px;
    margin-bottom:10px;
    opacity:0.9;
    }

    .calendar .days{
    display:grid;
    grid-template-columns:repeat(7, 40px);
    justify-content:center;
    gap:12px;
    font-size:18px;
    }

    .calendar .days span{
    opacity:0.85;
    }

    .calendar .days .heart{
    position:relative;
    font-weight:600;
    }

    .calendar .days .heart::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:34px;
    height:30px;
    transform:translate(-50%, -50%);
    background:url('https://cdn-icons-png.flaticon.com/512/833/833472.png') no-repeat center/contain;
    opacity:0.35;
    }


    /* ============================================
   ITINERARIO — TIMELINE ESTILO A
============================================= */

.timeline-section{
  padding:100px 20px;
  max-width:1000px;
  margin:auto;
  position:relative;
}

.timeline-title{
  text-align:center;
  font-family:'Playfair Display', serif;
  font-size:36px;
  margin-bottom:60px;
  color:var(--text);
}

/* contenedor */
.timeline{
  position:relative;
  margin:0 auto;
  padding-left:40px;
  padding-right:40px;
}

/* línea central */
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:3px;
  height:100%;
  background:#d9c89a; /* dorado suave */
  border-radius:2px;
}

/* item */
.timeline-item{
  position:relative;
  width:100%;
  min-height:120px;
  margin:50px 0;
  display:flex;
  align-items:center;
}

/* círculo dorado */
/* .timeline-icon{
  width:22px;
  height:22px;
  background:radial-gradient(circle, #fff7d0 0%, #e8d08a 50%, #c5a96a 100%);
  border-radius:50%;
  border:2px solid #b79f63;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.1),
    inset 0 0 3px rgba(255,255,255,0.5);
} */

.timeline-icon > img {
    height: 45px;
    margin-left: 10px;
}

/* tarjetas */
.timeline-content{
  width:42%;
  /* background:white; */
  padding:18px 22px;
  border-radius:12px;
  /* border:1px solid #e8e2d8;
  box-shadow:0 4px 14px rgba(0,0,0,0.06); */
  font-size:15px;
  color:var(--text);
  position:relative;
}

.timeline-content.left{
  margin-right:auto;
  text-align:right;
}

.timeline-content.right{
  margin-left:auto;
  text-align:left;
}

.timeline-content h3{
  color:var(--accent);
  margin-bottom:6px;
  font-size:20px;
  font-family:'Playfair Display', serif;
}

/* ============================================
   EFECTO STORYTELLING — Fade lento + desplazamiento
============================================= */

.reveal-story{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1.4s ease, transform 1.4s ease;
}

.reveal-story.inview{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media(max-width:830px){
  .timeline::before{left:32px;}
  .timeline-icon{left:32px;}
  
  .timeline-content{
    width:calc(100% - 15px);
    margin-left:15px !important;
    text-align:center !important;
  }
}


    /* Footer */
    footer{
      text-align:center;
      padding:40px;
      color:#7d7d7d;
      font-size:14px;
    }

    /* Reveal animations */
    .reveal{
      opacity:0;
      transform:translateY(24px);
      transition:0.8s ease;
    }
    .reveal.inview{
      opacity:1;
      transform:none;
    }

    @media(max-width:920px){
      .row{grid-template-columns:1fr;}
      .title{font-size:64px;}
    }

    @media(max-width:520px){
      .title{font-size:46px;}
      .hero{min-height:560px;}
    }

    /* Audio button */
    .audio-btn{
      position:fixed;
      bottom:20px;
      right:20px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)); /* Glassy gradient */
      backdrop-filter: blur(10px); /* Blur effect for glass style */
      border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle border */
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.5); /* Depth and glow */
      color: var(--text); /* Adjust text color for contrast */
      z-index:90;
      cursor:pointer;
      font-weight:bold;
    }

    /* ==========================================================
       NUESTRA HISTORIA - OUR STORY SECTION
    ========================================================== */
    .our-story-section {
      padding: 80px 20px;
      background: var(--bg);
      text-align: center;
    }

    .our-story-section h2 {
      font-family: 'Playfair Display', serif;
      font-size: 48px;
      color: var(--text);
      margin-bottom: 10px;
      font-weight: 700;
    }

    .story-intro {
      font-size: 16px;
      color: var(--muted);
      margin-bottom: 60px;
      letter-spacing: 0.5px;
    }

    .story-timeline {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
      max-width: var(--maxw);
      margin: 0 auto;
    }

    .story-card {
      background: var(--card);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.6);
    }

    .story-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    .story-image {
      width: 100%;
      height: 250px;
      overflow: hidden;
      background: linear-gradient(135deg, var(--accent) 0%, var(--muted) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
    }

    .story-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .story-card:hover .story-image img {
      transform: scale(1.08);
    }

    .story-content {
      padding: 30px 25px;
    }

    .story-content h3 {
      font-family: 'Playfair Display', serif;
      font-size: 24px;
      color: var(--text);
      margin-bottom: 12px;
      font-weight: 600;
    }

    .story-content p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.8;
      margin: 0;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .our-story-section {
        padding: 60px 15px;
      }

      .our-story-section h2 {
        font-size: 36px;
      }

      .story-timeline {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .story-image {
        height: 200px;
      }
    }


    /* Estilo del Banner iOS */
.ios-prompt {
    position: fixed;
    bottom: 30px; /* Un poco arriba para no tapar el menú de Safari */
    left: 5%;
    width: 90%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: slideUp 0.5s ease-out;
    border: 1px solid #e0e0e0;
}

.ios-prompt-content {
    padding: 15px 20px;
    position: relative;
    color: #333;
}

.ios-prompt p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.4;
}

.ios-prompt .steps {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid #007AFF; /* Azul Apple */
}

.close-prompt {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
}

/* Triángulo/Flecha señalando hacia abajo */
.ios-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.95);
}

@keyframes slideUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Sección General */
.our-story-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

/* Configuración del Swiper */
.swiper {
    width: 100%;
    max-width: 800px; /* Ancho máximo elegante */
    height: 500px; /* Altura fija */
    padding-bottom: 40px; /* Espacio para los puntitos */
}

.swiper-slide {
    background: #fff;
    border-radius: 15px;
    overflow: hidden; /* Para que la imagen no se salga de las esquinas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    /* Centrar contenido */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Diseño Interno de la Tarjeta */
.story-card-modern {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.story-card-modern img {
    width: 100%;
    height: 60%; /* La foto ocupa el 60% */
    object-fit: cover;
}

.story-text {
    height: 40%;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.story-text h3 {
    font-family: 'Pinyon Script', cursive;
    font-size: 2.2rem;
    color: #3e4e22; /* Verde Olivo */
    margin: 0 0 10px 0;
}

.story-text p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: #666;
    line-height: 1.5;
}

/* --- PERSONALIZACIÓN DE COLORES SWIPER (Boda) --- */

/* Color de las flechas y puntitos */
:root {
    --swiper-theme-color: #cda45e !important; /* Tu Dorado */
    --swiper-navigation-size: 25px; /* Flechas más discretas */
}

/* Flechas */
.swiper-button-next, .swiper-button-prev {
    color: #cda45e;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px !important;
    font-weight: bold;
}

/* Puntitos */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #3e4e22 !important; /* Verde Olivo para el activo */
    width: 10px;
    height: 10px;
}

.invitation-text {
    height: 100vh;
    position: relative;
    z-index: 1;
    background-image: url(../images/2-fondo.jpeg);
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    text-align: center;
    -webkit-user-modify: read-write-plaintext-only;
}

.invitation-text p {
    font-family: 'Libre Baskerville', cursive;
    font-size: 14px;
    margin: 0;
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
}