@font-face {
    font-family: "Lovelace";
    src: url("../fonts/lovelace/Lovelace-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Above The Beyond";
    src: url("../fonts/Above-the-Beyond-Script.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("../fonts/lato-thin.ttf") format("ttf");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lato";
    src: url("../fonts/lato.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   01. VARIABLES Y CONFIGURACIÓN GENERAL
========================================= */

:root {
    --font-principal: "Lato", sans-serif;
    --font-titulos: "Lovelace", serif;
    --font-script: "Above The Beyond", cursive;

    --color-fondo: #f6f2e7;
    --color-burdeos: #7f2936; /*subtitulos*/
    --color-parrafos: #8c3e53; /*parrafos*/
    --color-terracota: #dc4f00; /*titulos*/
    --color-naranja: #ff914d;
    --color-texto: #8c3e53;
    --color-texto-claro: #f6f2e7; /*botones txt*/
    --color-fondo-cafe: #c9b096;

    --container-mobile: 100%;
    --container-tablet: 720px;
    --container-desktop: 960px;

    --section-padding: 10% 0 ;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 20px;
}

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--font-principal);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
}
section {
    padding: var(--section-padding);
}
h2 {
    font-family: var(--font-titulos);
    font-size: 2.0rem;
    color: var(--color-terracota);
    text-align: center;
    margin: 1rem 0;
    text-align: center;
    text-transform: uppercase;
}
.text-justify {
    text-align: justify;
}
.texto-thin {
    font-family: var(--font-principal);
    font-weight: 100 !important;
}

.texto-regular {
    font-family: var(--font-principal);
    font-weight: 400 !important;
}
.hidden {
    display: none !important;
}
/* =========================================
   SOBRE
   Se eleva sobre la sección superior
========================================= */
#envelopeWrapper h2{
    font-size: 3rem;
    font-family: var(--font-titulos);
    color: var(--color-terracota);
    font-style: normal;
    margin: 0;
    padding: 0;
}
#envelopeWrapper p{
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
    font-family: var(--font-principal);
    color: var(--color-texto);
}
.menu-envelope {
    position: absolute;
    z-index: 2;
    left: 78px;
    top: -139px;
    width: 64%;
}

.envelope-image {
    display: block;
    width: 100%;
    height: auto;
}
/* =========================================
   02. HEADER
========================================= */
#primer{
    background-image: url(../img/byc_intro_m.png);
    background-size: cover;
    background-position: center top;
    height: 100vh;

}
.titulo_primer, .titulo_amp{
    padding-top: 45%;
    font-size: 3rem;
    font-family: var(--font-titulos);
    color: var(--color-texto-claro);
}

.titulo_amp{
    margin-top: -56%;
    font-size: 3rem;
    font-family: var(--font-titulos);
    color: var(--color-texto-claro);
}
.right{
    margin-left: 7%;
}
.primer_fecha{
    font-family: var(--font-principal);
    font-weight: 10 !important;
    margin: 0 auto;
    font-size: 1.5rem;
    color: var(--color-texto-claro);
}
.primer_subtitulo{
    width: 100%;
    text-align: center;
    font-family: var(--font-script);
    font-size: 1.3rem;
    color: var(--color-terracota);
}
.scroll-indicator {
    position: absolute;
    bottom: 55px;
    left: 50%;
    display: block;
    width: 22px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    transform: translateX(-50%);
}

.scroll-indicator span {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 3px;
    height: 7px;
    border-radius: 4px;
    background: #fff;
    transform: translateX(-50%);
}
/*animation scroll https://codepen.io/nelledejones/pen/gOOPWrK*/
.bounce2 {
    animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

/* =========================================
   03. HISTORIA
========================================= */

#historia {
  position: relative; /* Necesario para posicionar el fondo dentro */
  overflow: hidden; /* Evita que elementos internos sobresalgan */
}

/* Capa independiente solo para el fondo y su opacidad */
#historia::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/ramo_blur.png);
  background-size: cover;
  background-position: top;
  opacity: 0.3;  /* La opacidad se aplica SOLO a la imagen de fondo */
  z-index: 1;  /* Coloca la imagen detrás del contenido */
}

/* el contenido interno tiene un z-index superior para que esté por encima del fondo */
#historia > * {
    position: relative;
    z-index: 2;
}
/*collage*/
.collage {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    gap: 0;
}

.collage-item {
    width: 100%;
    aspect-ratio: 1 / 1;

    margin: 0;
    padding: 0;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* =========================================
   04. TIMER
========================================= */
#countdown img{
    width: 20%;
    margin-top: 6%;
} 

#timer {
    font-family: var(--font-principal);
    font-size: 1.5rem;
    background-color: var(--color-fondo-cafe);
    width: 100%;
    padding: 10% 50px !important;
    box-sizing: border-box;
}

#timer h3 {
    font-size: 1.2rem;
    color: var(--color-texto-claro);
    margin: 1rem 0;
    font-weight: light;
}

#timer > .row {
    width: min(1100px, 100%);
    margin: 0 auto;
}
#countdown{
    font-size: 1.3rem;

}
.numeros {
    display: block;
    line-height: 1;
}

.etiqueta-contador {
    display: block;
    margin-top: 2px;
    line-height: 1;
}
/* =========================================
   05. ITINERARIO
========================================= */
#itinerario h3 {
    font-family: var(--font-principal);
    font-size: 1.2rem;
    color: var(--color-terracota);
    margin: 0;
    font-weight: 300 !important;
}
.sub_cursiva {
    text-align: center;
    font-family: var(--font-script);
    font-size: 1.3rem;
    color: var(--color-naranja);
    font-weight: 400;
}
.itinerario_titulo {
    font-family: var(--font-principal);
    font-size: 1.2rem;
    color: var(--color-terracota);
    margin: 0;
    margin-bottom: 0.5rem;
}
.itinerario_titulo p{ 
    color: var(--color-texto);
    font-family: var(--font-principal);
    margin: 0;
}
#timeline{
    color: var(--color-parrafos) !important;
    font-size: 2rem;
}
.itinerario_subtitulo{
    line-height: 0%;
}
.button_example{
    border:0px solid #fe8c38;
    -webkit-box-shadow: #B4B5B5 3px 3px 3px  ;
    -moz-box-shadow: #B4B5B5 3px 3px 3px ; 
    box-shadow: #B4B5B5 3px 3px 3px  ; -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    font-size:12px;
    font-family:arial, helvetica, sans-serif; 
    padding: 5px 10px 5px 10px; 
    text-decoration:none; 
    display:inline-block;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; 
    color: #FFFFFF;
    background-color: #FEAC70; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FEAC70), to(#88574D));
    background-image: -webkit-linear-gradient(top, #FEAC70, #88574D);
    background-image: -moz-linear-gradient(top, #FEAC70, #88574D);
    background-image: -ms-linear-gradient(top, #FEAC70, #88574D);
    background-image: -o-linear-gradient(top, #FEAC70, #88574D);
    background-image: linear-gradient(to bottom, #FEAC70, #88574D);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FEAC70, endColorstr=#88574D);
}

.button_example:hover{
    border:0px solid #fd710b;
    background-color: #fe8f3d; background-image: -webkit-gradient(linear, left top, left bottom, from(#fe8f3d), to(#67423b));
    background-image: -webkit-linear-gradient(top, #fe8f3d, #67423b);
    background-image: -moz-linear-gradient(top, #fe8f3d, #67423b);
    background-image: -ms-linear-gradient(top, #fe8f3d, #67423b);
    background-image: -o-linear-gradient(top, #fe8f3d, #67423b);
    background-image: linear-gradient(to bottom, #fe8f3d, #67423b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fe8f3d, endColorstr=#67423b);
}
.separador{
    width: 28%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
}

/* =========================================
   05. CODIGO DE VESTIMENTA
========================================= */

#codigo {
  position: relative; /* Necesario para posicionar el fondo dentro */
  overflow: hidden; /* Evita que elementos internos sobresalgan */
}

/* Capa independiente solo para el fondo y su opacidad */
#codigo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/vestimenta-img.png);
  background-size: cover;
  background-position: center center;
  opacity: 0.7;  /* La opacidad se aplica SOLO a la imagen de fondo */
  z-index: 1;  /* Coloca la imagen detrás del contenido */
}
#codigo h3{
    color: var(--color-terracota);
    text-transform: uppercase;
}
#codigo button{
    z-index: 2; /* Asegura que el botón esté por encima del fondo */
    width: 30%;
    margin: 0 auto;
}
.danger{
    background-color: rgba(255, 255, 255, 0.966); 
    padding-top: 5%;
    
}
.text-danger{
    color: var(--color-parrafos) !important;
}

/* =========================================
   05. CONFIRMAR ASISTENCIA
========================================= */
#confirmarasistencia {
  background-color: var(--color-fondo-cafe);
  color: var(--color-texto-claro);
}
#confirmarasistencia h2{
    font-family: var(--font-script);
    font-size: 1.7rem;
    line-height: 2.5;
    text-transform: none;
}
#confirmarasistencia img{
    width: 20%;
}
.asistencia-alt{
    color: var(--color-parrafos) !important;
    font-weight: bold;
}

/* =========================================
   06. REGALOS
========================================= */
#regalos p, h4{
    color: var(--color-texto);
}
#regalos h4, h2{
    margin: 0;
}

.texto-con-imagen {
    position: relative;
    margin-top: 7%;
}
.texto-con-imagen p {
    margin-top: 1%;
    line-height: 1.8;
}

.img_overlay {
  position: absolute;
  top: 53%;
  left: 56%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 90%;
  /*opacity: 0.35;*/
  pointer-events: none;
}

.img_overlay img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================
   06.01 MUSIC PLAYER
========================================= */

.music-player {
  width: 100%;
  padding: 25px;
  border-radius: 18px;
  background: #f5f0eb;
  color: #43352f;
  box-sizing: border-box;
}

.track-title {
  text-align: center;
  font-weight: 600;
  margin-bottom: 25px;
}

/* Onda de audio */
.wave-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  color: #85756b;
  font-size: 12px;
}

.waveform {
  flex: 1;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  overflow: hidden;
}

.waveform span {
  display: block;
  flex: 1;
  min-width: 2px;
  max-width: 5px;
  border-radius: 5px;
  height: var(--bar-height, 30%);
  background: var(--color-terracota);
  transition: background 0.15s;
}

.waveform span:nth-child(5n + 1) {
  --bar-height: 40%;
}

.waveform span:nth-child(5n + 2) {
  --bar-height: 70%;
}

.waveform span:nth-child(5n + 3) {
  --bar-height: 100%;
}

.waveform span:nth-child(5n + 4) {
  --bar-height: 55%;
}

.waveform span:nth-child(5n) {
  --bar-height: 30%;
}

/* Botones */
.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 25px);
}

.control-btn,
.play-btn {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.control-btn {
  background: transparent;
  color: var(--color-terracota);
  font-size: 22px;
  padding: 5px;
}

.play-btn {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffffff00;
  color: var(--color-terracota);
  font-size: 32px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.play-btn:hover {
  background: #594337;
  transform: scale(1.05);
}

.play-btn:focus-visible {
  outline: 2px solid #70574a;
  outline-offset: 4px;
}

@media (max-width: 360px) {
  .music-player {
    padding: 18px 12px;
  }

  .player-controls {
    gap: 12px;
  }

  .control-btn {
    font-size: 19px;
  }
}
.img-end img{
  width: 100%;
}
/* =========================================
   07 RECOMENDACIONES
========================================= */
#recomendaciones {
  position: relative; /* Necesario para posicionar el fondo dentro */
  overflow: hidden; /* Evita que elementos internos sobresalgan */
}

/* Capa independiente solo para el fondo y su opacidad */
#recomendaciones::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/ramo_blur.png);
  background-size: cover;
  background-position: top;
  opacity: 0.3;  /* La opacidad se aplica SOLO a la imagen de fondo */
  z-index: 1;  /* Coloca la imagen detrás del contenido */
}

/* el contenido interno tiene un z-index superior para que esté por encima del fondo */
#recomendaciones > * {
    position: relative;
    z-index: 2;
}

#recomendaciones li{
  margin: 5% auto !important;
}
.list-centered li::marker {
    font-weight: bold;
}
.list-centered {
    list-style-position: inside;
    padding-left: 0;
}
.hashtag {
  color: var(--color-terracota);
  font-family: var(--font-titulos);
  font-size: 3.5rem;
  font-weight: 700;
  font-weight: bold;
}
/* =========================================
   08 Collage2
========================================= */

#collagedos h3{
  font-family: var(--font-principal);
  font-weight: 400;
  color: var(--color-texto);
  font-style: italic;
  font-size: 1rem;
}
.cita{
  color: var(--color-naranja);
  margin-bottom: 5%;
}

/* =========================================
   09. MEDIA QUERIES RESPONSIVE
   Se conservan los estilos móviles existentes
========================================= */

/* TABLETS: desde 768px */
@media (min-width: 768px) {

    :root {
        --section-padding: 35px 0;
    }

    body {
        font-size: 16px;
    }

    h2 {
        font-size: 2.4rem;
        margin: 1.5rem 0;
    }

    /* PORTADA */
    #primer {
        background-image: url(../img/byc_intro.png);
        min-height: 700px;
        height: 100vh;
        background-position: center center;

    }

    .titulo_primer {
        width: 100%;
        padding: 50% 5%;
        font-size: 3.5rem;
        text-align: center;
    }

    .titulo_amp {
        margin-top: -100%;
        width: 100%;
        font-size: 3.5rem;
        text-align: center;
    }

    .primer_fecha {
        margin: 0;
        width: 100%;
        font-size: 1.7rem;
    }

    .primer_subtitulo {
        top: 53vh;
        width: 100%;
        font-size: 1.6rem;
    }

    /* TEMPORIZADOR */
    #timer {
        padding: 20px 24px !important;
    }

    #timer h3 {
        font-size: 1.6rem;
    }
    #countdown img{
      width: 30%;
      margin: 5% 0;
    }
    #timer img {
        width: 25%;
    }
    #countdown{
        width: 65%;
        margin: 0 auto;
    }
    /* CÓDIGO DE VESTIMENTA */
    #codigo button {
        width: 60%;
        max-width: 350px;
    }

    .danger {
        padding: 30px;
    }
    #codigo button{
        width: 17%;
    }
    /* ITINERARIO */

    .separador{
      width: 14%;
    }

    /* RECOMENDACIONES */
    #recomendaciones ol {
        font-size: 1.15rem;
    }

    #recomendaciones li {
        margin: 25px auto !important;
    }

    .hashtag {
        font-size: 3.5rem;
    }

    /* regalos */

    #regalos h2{
        margin: 0;
    }
    .texto-con-imagen {
        padding-top: 5%;
      position: relative;
      width: 60%;
      margin: 0 auto;
    }
    .img_overlay {
        width: 100%;
        left: 54%;
    }

    .img_overlay img {
        width: 100%;
        margin: 0 auto;
    }

    /* REPRODUCTOR */
    .music-player {
        max-width: 650px;
        margin: 0 auto;
    }

}


/* LAPTOPS Y ESCRITORIOS: desde 992px */
@media (min-width: 992px) {

    :root {
        --section-padding: 50px 0;
    }

    body {
        font-size: 16px;
        line-height: 1.8;
    }

    h2 {
        font-size: 2.8rem;
    }

    /* PORTADA */
    #primer {
        min-height: 700px;
        height: 100vh;
        background-position: center center;
    }

    .titulo_primer {
        padding-top: 10%;
        font-size: 4.5rem;
    }

    .titulo_amp {
        top: 30vh;
        font-size: 4.5rem;
    }

    .primer_fecha {
        top: 45vh;
        font-size: 2rem;
    }

    .primer_subtitulo {
        top: 54vh;
        font-size: 1.8rem;
    }

    /* HISTORIA Y COLLAGES */
    .collage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* TEMPORIZADOR */
    #countdown{
        margin: 0 auto ;
        width: 50%;
    }
    
    #timer {
        padding: 25px 35px !important;
    }

    #timer h3 {
        font-size: 1.8rem;
    }

    #timer > .row {
        width: min(1100px, 100%);
    }
    /*ITINERARIO*/
    .separador{
        width: 8%;
    }
    #itinerario_info{
        margin-top: 4%;
    }
    /* CÓDIGO DE VESTIMENTA */
    #codigo button {
        width: auto;
        min-width: 130px;
        max-width: 350px;
    }

    .danger {
        padding: 40px;
        width: 55%;
        margin: 0 auto;
    }
     
    /* REGALOS */
    .texto-con-imagen {
        width: 50%;
    }
    .img_overlay {
        top: 55%;
        width: 70%;
    }

    .img_overlay img {
        width: 80%;
    }

    /* RECOMENDACIONES */
    #recomendaciones ol {
        font-size: 1.2rem;
    }

    .hashtag {
        font-size: 4.5rem;
    }

    /* REPRODUCTOR */
    .music-player {
        max-width: 700px;
        padding: 30px;
    }
}


/* ESCRITORIOS GRANDES: desde 1200px */
@media (min-width: 1200px) {

    :root {
        --section-padding: 60px 0;
    }

    h2 {
        font-size: 3rem;
    }

    /* PORTADA */
    .titulo_primer {
        font-size: 5rem;
    }

    .titulo_amp {
        font-size: 5rem;
    }

    .primer_fecha {
        font-size: 2.2rem;
    }

    .primer_subtitulo {
        font-size: 2rem;
    }

    /* CONTENIDO GENERAL */
    #historia,
    #itinerario,
    #recomendaciones,
    #collagedos {
        scroll-margin-top: 30px;
    }

    /* REGALOS */
    .img_overlay {
        width: 60%;
    }

    /* RECOMENDACIONES */
    .hashtag {
        font-size: 5rem;
    }
}