* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #526f9f;
  font-family: Georgia, serif;
  overflow: hidden;
}

#intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #526f9f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.intro-fondo {
  position: absolute;
  inset: 0;
  background-image: url("assets/sobre_2.webp");
  background-size: cover;
  background-position: center;
  filter: blur(26px);
  transform: scale(1.25);
  opacity: .28;
}

.sobre-wrapper {
  position: relative;
  height: 92vh;
  width: auto;
  animation: entradaSobre 1s ease forwards;
}

#sobre {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 35px 60px rgba(0,0,0,.32));
}

@keyframes entradaSobre {
  from {
    opacity: 0;
    transform: translateY(25px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ZONA CLICABLE INVISIBLE DEL SELLO */
#selloClick {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);

  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
  z-index: 20;
  border-radius: 50%;
}

/* efecto muy sutil, no cuadrado */
#selloClick::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;

    background: rgba(255,255,255,.10);

    box-shadow:
        0 0 18px rgba(255,255,255,.35),
        0 0 45px rgba(255,255,255,.25);

    animation: latidoSello 1.8s ease-in-out infinite;
}

@keyframes latidoSello {

    0%,100%{
        transform: scale(1);
        opacity:.45;
    }

    50%{
        transform: scale(1.25);
        opacity:1;
    }

}

#intro.abriendo #selloClick {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

#intro.abriendo .sobre-wrapper {
  animation: zoomSobre 2.1s ease forwards;
}

@keyframes zoomSobre {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }

  45% {
    transform: scale(1.08);
    filter: brightness(1.08);
  }

  100% {
    transform: scale(1.45);
    opacity: 0;
    filter: brightness(1.18);
  }
}

.hidden {
  display: none;
}

#web {
  min-height: 100vh;
  background: #fff9ef;
  animation: aparecerWeb 1s ease forwards;
}

@keyframes aparecerWeb {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background: #faf4e8;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
}

.esquina {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.superior{
    position: absolute;
    top: -10px;
    left: -10px;

    width: 760px;
    height: 760px;

    object-fit: contain;
    object-position: top left;
}

.inferior{
    position: absolute;
    right: 0;
    bottom: 0;

    width: 700px;
}

.hero-contenido {
  text-align: center;
  z-index: 5;
}

.hero-subtitulo {
  font-family: Georgia, serif;
  font-size: 58px;
  font-style: italic;
  margin-bottom: 40px;
  color: #111;
}

.hero h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .95;
  color: #4b91e2;
  font-weight: 300;
  letter-spacing: 2px;
  font-size: 96px;
}

.ampersand {
  font-size: .8em;
}

.fecha {
  margin-top: 45px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #8d8d8d;
  font-size: 18px;
}

@media(max-width:900px) {
  .hero h1 {
    font-size: 64px;
  }

  .hero-subtitulo {
    font-size: 40px;
  }

  .superior {
    width: 400px;
  }

  .inferior {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .sobre-wrapper {
    height: 88vh;
  }

  #selloClick {
    top: 48%;
    width: 115px;
    height: 115px;
  }

   .superior{
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;

        width: 78vw;
        max-width: 320px;
        height: auto;

        object-fit: contain;
        object-position: top left;
    }

    .inferior{
        right: 0;
        bottom: 0;
        left: auto;
        top: auto;

        width: 78vw;
        max-width: 320px;
        height: auto;

        object-fit: contain;
        object-position: bottom right;
    }

}   

.music-toggle{

    position:fixed;

    right:24px;
    bottom:24px;

    width:58px;
    height:58px;

    border-radius:50%;

    background:#1f1f1f;

    border:2px solid #d8b56a;

    color:#d8b56a;

    font-size:24px;

    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(0,0,0,.35);

    transition:.35s;

    z-index:9999;

}
.music-toggle:hover{

    transform:scale(1.08);

    background:#2c2c2c;

    box-shadow:
        0 0 18px rgba(216,181,106,.45);

}

#web.animar .hero h1 span{
    opacity: 0;
    transform: translateY(18px);
    animation: aparecerNombre 1.2s ease forwards;
}

#web.animar .hero h1 span:nth-child(1){
    animation-delay: .3s;
}

#web.animar .hero h1 span:nth-child(2){
    animation-delay: .6s;
}

#web.animar .hero h1 span:nth-child(3){
    animation-delay: .9s;
}

@keyframes aparecerNombre{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/*==================================================
    SECCIÓN 2 - PRESENTACIÓN
==================================================*/
.intro-boda{
    min-height:100vh;
    background:#faf4e8;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:20px 24px 70px;
    overflow:hidden;
}

.marco-foto{
    width:420px;
    padding:10px;

    background:#fffdf8;
    border:1px solid #d7b36b;

    box-shadow:
        0 20px 40px rgba(0,0,0,.10);
}

.marco-foto img{
    width:100%;
    display:block;
}

.texto-intro{
    text-align:center;
    margin-top:30px;
}


.frase-script{
    font-family:Georgia, serif;
    font-style:italic;
    font-size:26px;
    line-height:1.6;
    color:#111;
}

.frase-normal{
    margin-top:28px;
    font-size:17px;
    line-height:1.7;
    color:#333;
}

.separador{
    margin-top:38px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#c58b2b;
    font-size:22px;
}

.separador span{
    width:150px;
    height:1px;
    background:#c58b2b;
}

.flor-suave{
    position:absolute;
    width:70px;      /* antes seguramente 120-180px */
    height:auto;
    opacity:0.75;
}

.flor-izq{
    top:20px;
    left:20px;
}

@media(max-width:768px){
    .marco-foto{
        width:240px;
    }

    .frase-script{
        font-size:21px;
    }

    .frase-normal{
        font-size:15px;
    }

    .separador span{
        width:90px;
    }
}

/*========================================
    SECCIÓN 3 FECHA BODA
========================================*/

.fecha-boda{

    position:relative;

    min-height:100vh;

    background:#faf4e8;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding:80px 20px;

}

.fecha-contenido{

    text-align:center;

    z-index:5;

}

.dia{
    position: relative;
    top: -100px;

    font-size:210px;
    color:#4b91e2;
    font-weight:300;
    line-height:.8;

    margin-bottom:-60px;
}

.mes{

    margin-top:50px;

    font-size:72px;

    font-weight:300;

    letter-spacing:4px;

    color:#111;

}

.hora{

    margin-top:30px;

    font-size:64px;

    font-style:italic;

    color:#111;

}

.jarron-izq{

    position:absolute;

    left:35px;

    bottom:35px;

    width:800px;

}

.flor-der{

    position:absolute;

    right:25px;

    bottom:20px;

    width:1400px;

}

@media(max-width:768px){

    .intro-boda{
        min-height:auto;
        padding-bottom:20px;
    }

    .fecha-boda{
        min-height:430px;
        padding:10px 20px 0;

        display:flex;
        align-items:flex-start;
        justify-content:center;

        box-sizing:border-box;
    }

    .fecha-contenido{
        width:100%;
        transform:translateY(0px);
    }


    .dia{
        position:relative;
        top:0;
        font-size: 110px;
        line-height: 1;
        margin-bottom: 14px;
    }

    .mes{
        margin-top: 0;
        font-size: 42px;
        line-height: 1.05;
    }

    .hora{
        margin-top: 24px;
        font-size: 38px;
    }

    .jarron-izq{
        width:500px;
        left:10px;
        bottom:0px;
    }

    .flor-der{
        width:600px;
        right:5px;
        bottom:0px;
    }

}

/*========================================
    ANIMACIÓN FECHA
========================================*/

.reveal .dia,
.reveal .mes,
.reveal .hora{
    opacity:0;
}

.reveal.visible .dia{
    animation: zoomFade .8s ease forwards;
}

.reveal.visible .mes{
    animation: subir .8s ease forwards;
    animation-delay:.35s;
}

.reveal.visible .hora{
    animation: subir .8s ease forwards;
    animation-delay:.7s;
}

@keyframes zoomFade{
    from{
        opacity:0;
        transform:scale(.7);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes subir{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/*========================================
    SECCIÓN 5 CUENTA ATRÁS
========================================*/

.cuenta-atras{
    position:relative;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:80px 30px;
    overflow:hidden;
    background:#5f8ec7;
}

/* Fondo de mosaico */
.cuenta-atras::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("assets/mosaico.webp");
    background-size:420px;
    background-repeat:repeat;
    opacity:.18;
}

/* Capa azul para unificar el fondo */
.cuenta-atras::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(67, 119, 180, .55);
}

.contador-contenido{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1100px;
    text-align:center;
}

.titulo-contador{
    color:#fff;
    font-size:38px;
    font-weight:600;
    letter-spacing:5px;
    margin-bottom:55px;
}

.contador{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
}

.bloque-contador{
    min-height:185px;
    padding:25px 15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.38);
    border-radius:20px;

    box-shadow:0 18px 45px rgba(0,0,0,.13);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.bloque-contador span{
    display:block;
    color:#fff;
    font-size:76px;
    font-weight:300;
    line-height:1;
    letter-spacing:2px;
}

.bloque-contador p{
    margin-top:18px;
    color:#fff;
    font-size:15px;
    letter-spacing:3px;
}

/* Animación al cambiar el número */
.numero-cambia{
    animation:cambioNumero .35s ease;
}

@keyframes cambioNumero{
    0%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.12);
        opacity:.65;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

/*========================================
    ENREDADERA CUENTA ATRÁS
========================================*/

.contador-enredadera{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;

    width:min(100%, 900px);

    margin:70px auto 0;

    gap:25px;
}

.contador-enredadera img{

    display:block;

    width:520px;
    max-width:75%;

    height:auto;

    opacity:.95;

    filter:
        drop-shadow(0 8px 18px rgba(25,55,90,.10));

    transition:.4s;
}

.contador-enredadera-linea{
    width:170px;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(244,221,166,.9),
            transparent
        );
}

/* Tablet */
@media(max-width:900px){

    .contador{
        grid-template-columns:repeat(2, 1fr);
        max-width:650px;
        margin:0 auto;
    }

}

/* Móvil */
@media(max-width:600px){

    .cuenta-atras{
        min-height:auto;
        padding:70px 12px;
    }

    .titulo-contador{
        font-size:26px;
        letter-spacing:2px;
        margin-bottom:35px;
    }

    .contador{
        grid-template-columns:repeat(4, 1fr);
        gap:6px;
        width:100%;
    }

    .bloque-contador{
        min-height:105px;
        padding:12px 3px;
        border-radius:12px;
    }

    .bloque-contador span{
        font-size:34px;
        letter-spacing:0;
    }

    .bloque-contador p{
        font-size:7px;
        letter-spacing:.7px;
        margin-top:10px;
    }

    .contador-enredadera{
        margin-top:34px;
        gap:10px;
    }

    .contador-enredadera img{
        width:180px;
        max-width:58vw;
    }

    .contador-enredadera-linea{
        width:45px;
    }
}


/*====================================
        SECCION 6 - LUGARES
====================================*/

.lugares{
    position:relative;
    min-height:100vh;
    background:#faf4e8;
    padding:90px 70px;
    overflow:hidden;
}

.decoracion-lugares{
    position:absolute;
    z-index:1;
    pointer-events:none;
    user-select:none;
}

.flor-lugares-superior{
    top:0;
    left:0;
    width:800px;
    height:auto;
}

.flor-lugares-inferior{
    right:0;
    bottom:0;
    width:1000px;
    height:auto;
}

.lugares-encabezado{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    text-align:center;
    margin-bottom:60px;
}

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

.mosaico-lugares{
    width:320px;
    height:auto;
    display:block;
    flex-shrink:0;
}

.lugares-frase{
    font-size:34px;
    font-style:italic;
    color:#111;
}

.lugares-linea{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    color:#d39d39;
    margin-top:18px;
}

.lugares-linea span{
    width:120px;
    height:1px;
    background:#d39d39;
}

.lugares-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:45px;

    width:100%;
    max-width:1500px;

    margin:0 auto;
    align-items:start;
}

.video-lugar{
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.16);
}

.video-lugar video{
    width:100%;
    height:100%;
    display:block;

    object-fit:cover;
    object-position:center;
}

.lugar-info{
    width:100%;
    text-align:center;
    margin-top:55px;   /* antes 28px */
}

.lugar-info h2{

    font-size:50px;
    font-weight:300;

    margin-bottom:18px;

}

.lugar-info p{

    margin-top:0;

    font-size:28px;
    font-style:italic;
    line-height:1.45;

}

.boton-ubicacion{

    display:inline-block;

    margin-top:55px;

    padding:12px 28px;

    background:#8eb3df;

    color:white;

    text-decoration:none;

    font-size:14px;

    letter-spacing:1px;

    transition:.3s;

}

.boton-ubicacion:hover{

    background:#6c99cf;

    transform:translateY(-3px);

}

.lugar-card{
    width:100%;
    display:flex;
    flex-direction:column;
}

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

.mosaico-lugares{
    width:auto;
    height:160px;
    display:block;
    flex-shrink:0;
}

@media (max-width:768px){

    .lugares{
        padding:60px 10px;
    }

    .lugares-encabezado{
        display:grid;
        grid-template-columns:78px minmax(0, 1fr) 78px;
        align-items:center;
        justify-content:center;
        column-gap:12px;

        width:100%;
        margin-bottom:40px;
        text-align:center;
    }

    .mosaico-lugares{
        width:78px;
        height:auto;
        max-width:100%;
        flex-shrink:0;
    }

    .titulo-lugares{
        min-width:0;
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .lugares-frase{
        margin:0;
        font-size:20px;
        line-height:1.15;
        white-space:normal;
    }

    .lugares-linea{
        width:100%;
        gap:7px;
        margin-top:12px;
    }

    .lugares-linea span{
        width:38px;
    }

    .lugares-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .lugar-info{
        margin-top:30px;
    }

    .lugar-info h2{
        font-size:32px;
    }

    .lugar-info p{
        font-size:21px;
    }

    .boton-ubicacion{
        margin-top:35px;
    }

    .flor-lugares-superior{
        width:280px;
    }

    .flor-lugares-inferior{
        width:400px;
    }
}

/*====================================
        SECCIÓN 7 - NUESTRA HISTORIA
====================================*/

.historia{
    position:relative;
    min-height:100vh;
    background:#faf4e8;
    padding:90px 20px 100px;
    overflow:hidden;
}

.historia-contenido{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.historia-titulo{
    margin-bottom:70px;

    text-align:center;

    font-family:"Great Vibes", cursive;
    font-size:100px;
    font-weight:400;
    line-height:1.05;
    letter-spacing:0;

    color:#c9782b;

    text-shadow:
        0 3px 14px rgba(201,120,43,.14);
}

.historia-carrusel{
    display:grid;
    grid-template-columns:60px minmax(0, 430px) 60px;

    justify-content:center;
    align-items:center;

    gap:28px;
}

.historia-ventana{
    width:100%;
    overflow:hidden;

    touch-action:pan-y;
}

.historia-pista{
    display:flex;

    transition:
        transform .75s cubic-bezier(.22, 1, .36, 1);

    will-change:transform;
}

/*====================================
        TARJETAS DE LOS CAPÍTULOS
====================================*/

.capitulo{
    min-width:100%;
    flex-shrink:0;
    padding:4px;
}

.capitulo-tarjeta{
    position:relative;

    width:100%;
    aspect-ratio:2 / 3;

    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;

    overflow:hidden;

    filter:
        drop-shadow(0 18px 30px rgba(73,49,25,.08));
}

.capitulo-1 .capitulo-tarjeta{
    background-image:url("assets/capitulo-1.webp");
}

.capitulo-2 .capitulo-tarjeta{
    background-image:url("assets/capitulo-2.webp");
}

.capitulo-3 .capitulo-tarjeta{
    background-image:url("assets/capitulo-3.webp");
}

.capitulo-4 .capitulo-tarjeta{
    background-image:url("assets/capitulo-4.webp");
}

.capitulo-5 .capitulo-tarjeta{
    background-image:url("assets/capitulo-5.webp");
}

.capitulo-contenido{
    position:absolute;

    left:13%;
    right:13%;
    bottom:9%;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    color:#352e29;
}

.capitulo-romano{
    margin:0 0 7%;

    font-size:clamp(16px, 1.6vw, 22px);
    font-weight:300;

    color:#77695f;
}

.capitulo-titulo{
    margin:0 0 5%;

    font-size:clamp(22px, 2.2vw, 31px);
    font-weight:300;
    line-height:1.1;

    color:#15120f;
}

.capitulo-texto{
    width:100%;

    font-size:clamp(15px, 1.45vw, 19px);
    line-height:1.48;

    color:#3b342f;
}

.capitulo-texto p{
    margin-bottom:4%;
}

.capitulo-texto p:last-child{
    margin-bottom:0;
}

.capitulo-fecha{
    letter-spacing:3px;
}

.capitulo-pagina{
    position:absolute;

    left:50%;
    bottom:3.8%;

    margin:0;

    transform:translateX(-50%);

    font-family:Arial, sans-serif;
    font-size:11px;
    line-height:1;
    letter-spacing:1px;

    color:#6f6259;

    white-space:nowrap;
}

.capitulo-2 .capitulo-pagina{
    bottom:6%;
}

.capitulo-1 .capitulo-pagina,
.capitulo-3 .capitulo-pagina,
.capitulo-4 .capitulo-pagina,
.capitulo-5 .capitulo-pagina{
    bottom:3.8%;
}

/*====================================
    POSICIÓN INDIVIDUAL DE CADA CAPÍTULO
====================================*/

/* CAPÍTULO I */

.capitulo-1 .capitulo-contenido{
    top:31%;
    left:13%;
    right:13%;
    bottom:9%;
}


/* CAPÍTULO II */

.capitulo-2 .capitulo-contenido{
    top:35%;
    left:15%;
    right:15%;
    bottom:11%;
}


/* CAPÍTULO III */

.capitulo-3 .capitulo-contenido{
    top:31%;
    left:13%;
    right:13%;
    bottom:9%;
}


/* CAPÍTULO IV */

.capitulo-4 .capitulo-contenido{
    top:30%;
    left:16%;
    right:16%;
    bottom:9%;
}


/* CAPÍTULO V */

.capitulo-5 .capitulo-contenido{
    top:30%;
    left:15%;
    right:15%;
    bottom:9%;
}

/*====================================
        NAVEGACIÓN DEL CARRUSEL
====================================*/

.historia-flecha{
    width:50px;
    height:50px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:1px solid #c58b2b;
    border-radius:50%;

    background:transparent;

    color:#c58b2b;

    font-size:24px;

    cursor:pointer;

    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.historia-flecha:hover{
    background:#c58b2b;
    color:#faf4e8;

    transform:scale(1.06);
}

.historia-flecha:focus-visible,
.historia-punto:focus-visible{
    outline:2px solid #4b91e2;
    outline-offset:4px;
}

.historia-indicadores{
    margin-top:35px;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:12px;
}

.historia-punto{
    width:9px;
    height:9px;

    padding:0;

    border:1px solid #c58b2b;
    border-radius:50%;

    background:transparent;

    cursor:pointer;

    transition:
        width .3s ease,
        border-radius .3s ease,
        background-color .3s ease;
}

.historia-punto.activo{
    width:26px;

    border-radius:20px;

    background:#c58b2b;
}

/*====================================
        RESPONSIVE NUESTRA HISTORIA
====================================*/

@media(max-width:768px){

    .historia{
        min-height:auto;
        padding:70px 14px 80px;
    }

    .historia-titulo{
        margin-bottom:50px;
        font-size:68px;
        line-height:1;
    }

    .historia-carrusel{
        position:relative;
        display:block;
    }

    .historia-ventana{
        width:min(100%, 360px);
        margin:0 auto;
    }

    .capitulo{
        padding:3px;
    }

    .capitulo-tarjeta{
        aspect-ratio:2 / 3;
    }

    .capitulo-romano{
        margin-bottom:10px;
        font-size:15px;
    }

    .capitulo-titulo{
        margin-bottom:10px;
        font-size:22px;
    }

    .capitulo-texto{
        width:100%;
        font-size:14px;
        line-height:1.35;
    }

    .capitulo-pagina{
        bottom:3.8%;
        font-size:10px;
    }

    .capitulo-2 .capitulo-pagina{
        bottom:3.8%;
    }

    /*====================================
    POSICIÓN INDIVIDUAL DE CADA CAPÍTULO
====================================*/

.capitulo-1 .capitulo-contenido{
    top:31%;
    left:10%;
    right:10%;
    bottom:11%;
}

.capitulo-2 .capitulo-contenido{
    top:34%;
    left:10%;
    right:10%;
    bottom:14%;
}

.capitulo-3 .capitulo-contenido{
    top:31%;
    left:10%;
    right:10%;
    bottom:11%;
}

.capitulo-4 .capitulo-contenido{
    top:30%;
    left:10%;
    right:10%;
    bottom:11%;
}

.capitulo-5 .capitulo-contenido{
    top:30%;
    left:10%;
    right:10%;
    bottom:11%;
}

    .historia-flecha{
        position:absolute;
        top:50%;
        z-index:5;

        width:42px;
        height:42px;

        transform:translateY(-50%);

        background:rgba(250,244,232,.95);
    }

    .historia-flecha:hover{
        transform:translateY(-50%);
    }

    .historia-flecha-izquierda{
        left:0;
    }

    .historia-flecha-derecha{
        right:0;
    }

    .historia-indicadores{
        margin-top:28px;
    }

}

@media(max-width:420px){

    .historia-titulo{
        font-size:60px;
    }

    .historia-ventana{
        width:min(100%, 330px);
    }

    .capitulo-romano{
        font-size:15px;
    }

    .capitulo-titulo{
        font-size:21px;
    }

    .capitulo-texto{
        font-size:14px;
    }

    .historia-flecha{
        width:38px;
        height:38px;
        font-size:20px;
    }

}

/*====================================
        SECCIÓN 8 - ITINERARIO
====================================*/

.itinerario{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    padding:90px 20px 100px;

    background:#faf4e8;

    overflow:hidden;
}

.itinerario-contenido{
    width:100%;
    max-width:1200px;

    margin:0 auto;
}

.itinerario-encabezado{
    margin-bottom:55px;

    text-align:center;
}

.itinerario-titulo{
    margin:0;

    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:72px;
    font-weight:300;
    line-height:1;
    letter-spacing:3px;

    color:#25211e;
}

.itinerario-frase{
    margin-top:14px;

    font-family:"Great Vibes", cursive;
    font-size:32px;
    line-height:1.2;

    color:#8b6b42;
}


/*====================================
        CARRUSEL ITINERARIO
====================================*/

.itinerario-carrusel{
    display:grid;
    grid-template-columns:60px minmax(0,330px) 60px;

    justify-content:center;
    align-items:center;

    gap:28px;
}

.itinerario-ventana{
    width:100%;

    overflow:hidden;

    touch-action:pan-y;
}

.itinerario-pista{
    display:flex;
    width:100%;

    transition:
        transform .75s cubic-bezier(.22, 1, .36, 1);

    will-change:transform;
}

.itinerario-tarjeta{
    width:100%;
    min-width:100%;
    flex:0 0 100%;

    display:flex;
    flex-direction:column;

    padding:10px;

    background:rgba(255,255,255,.62);

    border:1px solid rgba(211,157,57,.28);
    border-radius:24px;

    box-shadow:
        0 22px 55px rgba(73,49,25,.10);

    overflow:hidden;
}

.itinerario-imagen{

    display:block;

    width:100%;
    height:440px;

    object-fit:cover;
    object-position:center;

    border-radius:18px;
}

.itinerario-info{

    min-height:110px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:18px 12px 12px;

    text-align:center;
}

.itinerario-hora{
    margin:0;

    font-family:"Great Vibes", cursive;
    font-size:42px;
    line-height:1;

    color:#4a4038;
}

.itinerario-separador{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    margin:10px 0 7px;

    color:#c58b2b;

    font-size:12px;
}

.itinerario-separador span{
    width:52px;
    height:1px;

    background:#d9b875;
}

.itinerario-evento{
    margin:0;

    font-family:"Great Vibes", cursive;
    font-size:34px;
    font-weight:400;
    line-height:1.1;

    color:#302923;
}


/*====================================
        FLECHAS ITINERARIO
====================================*/

.itinerario-flecha{
    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid #c58b2b;
    border-radius:50%;

    background:transparent;

    color:#c58b2b;

    font-size:24px;

    cursor:pointer;

    transition:
        color .3s ease,
        background-color .3s ease,
        transform .3s ease;
}

.itinerario-flecha:hover{
    color:#faf4e8;
    background:#c58b2b;

    transform:scale(1.06);
}

.itinerario-flecha:focus-visible,
.itinerario-punto:focus-visible{
    outline:2px solid #4b91e2;
    outline-offset:4px;
}


/*====================================
        INDICADORES ITINERARIO
====================================*/

.itinerario-indicadores{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:11px;

    margin-top:32px;
}

.itinerario-punto{
    width:9px;
    height:9px;

    padding:0;

    border:1px solid #c58b2b;
    border-radius:50%;

    background:transparent;

    cursor:pointer;

    transition:
        width .3s ease,
        border-radius .3s ease,
        background-color .3s ease;
}

.itinerario-punto.activo{
    width:26px;

    border-radius:20px;

    background:#c58b2b;
}


/*====================================
        ANIMACIÓN ITINERARIO
====================================*/

.itinerario-tarjeta .itinerario-imagen{
    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

.itinerario-tarjeta:hover .itinerario-imagen{
    transform:scale(1.025);
}


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

@media(max-width:768px){

    .itinerario{
        min-height:auto;

        padding:72px 14px 82px;
    }

    .itinerario-encabezado{
        margin-bottom:42px;
    }

    .itinerario-titulo{
        font-size:48px;
        letter-spacing:2px;
    }

    .itinerario-frase{
        max-width:330px;

        margin:12px auto 0;

        font-size:25px;
    }

    .itinerario-carrusel{
        position:relative;

        display:block;
    }

    .itinerario-ventana{
        width:min(100%, 355px);

        margin:0 auto;
    }

    .itinerario-tarjeta{
        padding:9px;

        border-radius:21px;
    }

    .itinerario-imagen{
        height:360px;
    }

    .itinerario-info{
        min-height:110px;

        padding:18px 12px 12px;
    }

    .itinerario-hora{
        font-size:32px;
    }

    .itinerario-evento{
        font-size:29px;
    }

    .itinerario-flecha{
        position:absolute;
        top:45%;
        z-index:5;

        width:42px;
        height:42px;

        background:rgba(250,244,232,.95);

        transform:translateY(-50%);
    }

    .itinerario-flecha:hover{
        transform:translateY(-50%);
    }

    .itinerario-flecha-izquierda{
        left:0;
    }

    .itinerario-flecha-derecha{
        right:0;
    }

    .itinerario-indicadores{
        margin-top:28px;
    }

}

@media(max-width:420px){

    .itinerario-titulo{
        font-size:43px;
    }

    .itinerario-frase{
        font-size:23px;
    }

    .itinerario-ventana{
        width:min(100%, 325px);
    }

    .itinerario-imagen{
        height:330px;
    }

    .itinerario-flecha{
        width:38px;
        height:38px;

        font-size:20px;
    }

}

/*====================================
        SECCIÓN 9 - AUTOBUSES
====================================*/

.autobuses{
    position:relative;

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:90px 20px 100px;

    background:#faf4e8;

    overflow:hidden;
}

.autobuses-contenido{
    width:100%;
    max-width:850px;

    margin:0 auto;

    text-align:center;
}

.autobuses-titulo{
    margin:0;

    font-family:"Cormorant Garamond", Georgia, serif;
    font-size:64px;
    font-weight:300;
    line-height:1;
    letter-spacing:2px;

    color:#29231f;
}

.autobuses-frase{
    max-width:720px;

    margin:26px auto 0;

    font-family:"Great Vibes", cursive;
    font-size:30px;
    line-height:1.45;

    color:#51453c;
}

.autobuses-ilustracion{
    width:min(100%, 520px);

    margin:48px auto 0;
}

.autobuses-ilustracion img{
    display:block;

    width:100%;
    height:auto;

    filter:
        drop-shadow(0 20px 30px rgba(75,53,28,.10));
}

.autobuses-nota{
    max-width:560px;

    margin:30px auto 0;

    font-size:15px;
    font-style:italic;
    line-height:1.6;

    color:#766a61;
}


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

@media(max-width:768px){

    .autobuses{
        min-height:auto;

        padding:75px 18px 82px;
    }

    .autobuses-titulo{
        font-size:43px;
        line-height:1.05;
    }

    .autobuses-frase{
        max-width:340px;

        margin-top:22px;

        font-size:25px;
        line-height:1.4;
    }

    .autobuses-ilustracion{
        width:min(100%, 340px);

        margin-top:38px;
    }

    .autobuses-nota{
        max-width:320px;

        margin-top:24px;

        font-size:13px;
    }

}

/*====================================
    SECCIÓN 10 - CONFIRMACIÓN
====================================*/

.confirmacion{

    position:relative;

    overflow:hidden;

    padding:130px 20px;

    background:#6f8fc4;

}

.confirmacion-fondo{

    position:absolute;

    inset:0;

    background:url("assets/mosaico-fondo-azul.webp")
               center/700px repeat;

    opacity:.12;

}

.confirmacion-contenido{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

    text-align:center;

}

.confirmacion-titulo{

    margin:0;

    font-family:"Cormorant Garamond", serif;

    font-size:64px;

    font-weight:300;

    letter-spacing:2px;

    color:white;

}

.confirmacion-frase{

    margin-top:30px;

    font-family:"Great Vibes", cursive;

    font-size:38px;

    color:white;

    line-height:1.35;

}

.confirmacion-separador{

    margin:34px 0;

    font-size:26px;

    color:#f2d08d;

}

.confirmacion-texto{

    max-width:600px;

    margin:auto;

    font-size:22px;

    line-height:1.9;

    color:white;

}

.confirmacion-boton{

    display:inline-block;

    margin-top:55px;

    padding:18px 48px;

    border-radius:50px;

    background:#d6a14b;

    color:white;

    text-decoration:none;

    font-size:15px;

    letter-spacing:2px;

    transition:.35s;

    box-shadow:
        0 12px 28px rgba(0,0,0,.18);

}

.confirmacion-boton:hover{

    transform:translateY(-5px);

    background:#bf8b34;

}

.confirmacion-fecha{

    margin-top:55px;

    font-size:18px;

    letter-spacing:6px;

    color:#f7e7c3;

}

@media(max-width:768px){

.confirmacion{

    padding:90px 24px;

}

.confirmacion-titulo{

    font-size:42px;

}

.confirmacion-frase{

    font-size:29px;

}

.confirmacion-texto{

    font-size:19px;

    line-height:1.8;

}

.confirmacion-boton{

    width:100%;

    max-width:320px;

}

}

/*====================================
    SECCIÓN 11 - REGALO
====================================*/

.regalo{

    position:relative;

    overflow:hidden;

    background:#faf4e8;

    padding:120px 20px 70px;

}

.regalo-contenido{

    position:relative;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.regalo-titulo{

    font-family:"Cormorant Garamond", serif;

    font-size:72px;

    font-weight:300;

    color:#24211d;

}

.regalo-frase{

    margin-top:55px;

    font-family:"Great Vibes", cursive;

    font-size:46px;

    color:#2f2b28;

}

.regalo-texto{

    max-width:650px;

    margin:35px auto 0;

    font-size:22px;

    line-height:1.8;

    color:#5d534b;

}

.iban{

    margin:55px auto;

    max-width:620px;

    padding:28px;

    background:white;

    border-radius:24px;

    border:1px solid rgba(203,163,73,.35);

    box-shadow:

        0 18px 40px rgba(0,0,0,.08);

}

#numeroCuenta{

    display:block;

    font-size:30px;

    letter-spacing:3px;

}

.copiar-iban{

    margin-top:22px;

    border:none;

    background:#d8a14b;

    color:white;

    padding:14px 34px;

    border-radius:40px;

    cursor:pointer;

    transition:.35s;

}

.copiar-iban:hover{

    transform:translateY(-3px);

}

.telefonos{

    display:flex;

    justify-content:center;

    gap:120px;

    margin-top:45px;

}

.telefonos h4{

    font-family:"Great Vibes";

    font-size:42px;

}

.telefonos p{

    margin-top:8px;

    font-size:24px;

}

.jarron-regalo{

    position:absolute;

    right:-10px;

    bottom:180px;

    width:220px;

}

.despedida{

    margin-top:130px;

}

.estrella{

    color:#d39a37;

    font-size:28px;

}

.os-esperamos{

    margin-top:18px;

    font-family:"Great Vibes";

    font-size:52px;

}

.fecha-final{

    margin-top:12px;

    letter-spacing:6px;

    font-size:22px;

}

.firma{

    margin-top:18px;

    font-family:"Cormorant Garamond";

    font-size:48px;

}

@media(max-width:768px){

    .regalo{
        padding:70px 18px 60px;
    }

    .regalo-contenido{
        max-width:100%;
    }

    .regalo-titulo{
        font-size:48px;
        line-height:1.05;
        margin:0;
    }

    .regalo-frase{
        margin-top:32px;
        font-size:32px;
        line-height:1.35;
    }

    .regalo-texto{
        max-width:320px;
        margin:28px auto 0;
        font-size:17px;
        line-height:1.65;
    }

    .iban{
        width:100%;
        max-width:360px;
        margin:38px auto;
        padding:24px 10px;
        box-sizing:border-box;
        border-radius:18px;
    }

    #numeroCuenta{
        display:block;
        width:100%;

        font-size:17px;
        line-height:1.3;
        letter-spacing:0;

        white-space:nowrap;
        overflow-wrap:normal;
        word-break:normal;
    }

    .copiar-iban{
        margin-top:18px;
        padding:12px 26px;
    }

    .telefonos{
        display:flex;
        justify-content:center;
        align-items:flex-start;
        gap:35px;
        margin-top:36px;
    }

    .telefonos > div{
        width:130px;
        text-align:center;
    }

    .telefonos h4{
        margin:0 0 8px;
        font-family:"Great Vibes", cursive;
        font-size:30px;
        line-height:1;
    }

    .telefonos p{
        margin:0;
        font-size:18px;
        line-height:1.4;
    }

    .jarron-regalo{
        width:140px;
        right:-30px;
        bottom:120px;
    }

    .despedida{
        margin-top:85px;
    }

    .os-esperamos{
        font-size:38px;
    }

    .fecha-final{
        font-size:17px;
        letter-spacing:4px;
    }

    .firma{
        font-size:38px;
    }
}

@media(max-width:380px){

    #numeroCuenta{
        font-size:15px;
    }

    .iban{
        padding-left:6px;
        padding-right:6px;
    }
}