/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* --------------------   ESTILOS GLOBALES    ----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

:root {/* LLAMADAS DE LA WEB */
/* Paleta de colores de esta web */
    --BlancoHueso: #f6f2e5;
    --VerdeOscuro: #547363;
    --VerdeClaro: #c8d7b6;
    --Negro: #20201e;
    --NegroVerdoso: #3d4b44;
/* Tipografias de esta web */
    --fuenteBonita: "MonteCarlo", serif;
    --fuenteBasica: "EB Garamond", serif;
}


body {/*DECORACIÓN BASE*/
    background-color: var(--BlancoHueso);/*color de fondo*/
    line-height: 1.5;/*gran interlineado de los textos en general*/
    }


/* COLOR DE LETRA Y FONDO PA CUANDO SE SEÑALE EL TEXTO*/
::-moz-selection {background: #547363; color: #f6f2e5; text-shadow: none}
::selection {background: #547363; color: #f6f2e5; text-shadow: none}


/*DECORACIÓN BÁSICA DE TEXTOS*/
h1, h2, h3, h4 {font-family: var(--fuenteBonita); letter-spacing: 0.5px;
color: var(--NegroVerdoso); font-size: 3.5rem; font-weight: 600; line-height: 1.2}

p {font-family: var(--fuenteBasica);
color: var(--Negro); font-size: 2rem; font-weight: 500; line-height: 1.2}


/*CLASES PARA RECURRIR EL HTML*/
.contenedor {/*Contenedor de esta web*/
    max-width: 100rem;/*1.000px de ancho*/
    margin: 0 auto;/*centrada*/
    padding: 0 2rem; /*y con padding a los lados pal movil*/
    /*background-color: rgba(0, 111, 255, 0.4);*/
}

.contenedor-interno {padding-right: 10px}/*Un pelín de margen derecho pa no pisar la barra*/

img {width: 100%}

/*BOTONES DE LA WEB*/
.padre-btn-centro {display: flex; justify-content: center}

.boton {text-align: center; padding: 0.3rem 5rem; border-radius: 25px;
background: var(--VerdeOscuro); transition: background 0.3s ease}

.boton:hover {background: var(--NegroVerdoso)}










/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ----------------------- EL SOBRE ANIMADO ------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.padre-sobre {padding: 4rem; /*Margen pa qe siempre se vea el sobre*/
  position: fixed;/*es como Absolute (para que no salte el contenido luego)
  pero fixed para que no salte luego el botón de la canción fixed*/
  width: 100%; display: flex; justify-content: center; /* Centrado horizontal */
}

#sobre-contenedor {width: 40rem; cursor: pointer;
  perspective: 1000px; /* Para el efecto 3D */
  transition: transform 2s ease-in-out, opacity 3s ease-in-out;/*Transición general*/
}

#fondo, #apertura {position: absolute;
  transition: transform 2s ease-out; /*Transición de "apertura"*/
}

#apertura {z-index: 2; /*Que quede por encima de la imagen "fondo"*/
  transform-origin: left center; /*El borde izquierdo será el centro de rotación*/
}

#contenido-web {display: none;/*Empieza sin verse el contenido*/
  animation: fadeIn 1s ease-in-out forwards/*El contenido aparece poco a poco*/
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*Centrado Vertical Forzado (x la dificultad de centrar 2 img de la animacion)*/
#sobre-contenedor {margin-top: 4%}
@media (max-width: 1000px) {#sobre-contenedor {margin-top: 9%}}
@media (max-width: 600px) {#sobre-contenedor {margin-top: 12%}}
@media (max-width: 600px) {#sobre-contenedor {margin-top: 16%}}
@media (max-width: 380px) {#sobre-contenedor {margin-top: 20%}}











/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ----------------------- CANCION SONANDO -------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

#boton-audio {position: fixed; bottom: 10px; left: 10px; z-index: 200;
width: 42px; height: 42px; background: var(--VerdeOscuro); color: white; border-radius: 50px;
cursor: pointer; display: flex; justify-content: center; align-items: center}
  
#boton-audio:hover {background: var(--VerdeClaro)}
  
/*Animación de ondas*/
#boton-audio::before, #boton-audio::after {content: ''; position: absolute;
width: 50px; height: 50px; border-radius: 50%;
background: rgb(123 131 96 / 50%);
pointer-events: none;/*Las ondas no son clicables*/
animation: wave 3.5s infinite;/*DURACIÓN DE LA ONDA*/
}
  
#boton-audio::after {animation-delay: 1.5s}/*RETRASO PA 2ª ONDA*/
  
/*COLOR DE ONDAS AL HACER HOVER*/
#boton-audio:hover::before, #boton-audio:hover::after {
background: rgb(209 214 189 / 50%)}
  
@keyframes wave {
  0% {transform: scale(1); opacity: 1}
  100% {opacity: 0; transform: scale(1.9);/*TAMAÑO FINAL DE LA ONDA*/}
}
  
.play {margin-left: -3px}/* Ajustes del SVG dentro del botón */
  










/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* ----------------- BARRA DE NAVEGACION DERECHA ---------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

#contenido-web {text-align: justify;}

/* --------------- ASPECTO VISUAL GENERAL*/

/*barras de desplazamiento invisibles*/
body::-webkit-scrollbar {width: 0;}
body::-webkit-scrollbar-thumb {width: 0;}
body::-webkit-scrollbar-thumb:hover {width: 0;}

.barra-scroll {position: fixed; right: 0; top: 0; width: 50px; height: 100%;
display: flex; flex-direction: column; justify-content: space-between; z-index: 50;
padding: 7px 0; margin-right: 4px; /*background: #dedee380*/}

.barra-scroll a {width: 50px; height: 50px; border-radius: 50px; display: block;
background: var(--VerdeClaro); z-index: 10; transition: background 0.3s ease}

.icono svg {max-width: 50px; fill: white}

.icono:hover {background: var(--VerdeOscuro)}/*Color de hover*/

@media (pointer: coarse) {/*Desactiva hover en Móviles*/
.icono:hover {background: var(--VerdeClaro)}/*Color del fondo*/
}

.barra-scroll .active {background: var(--VerdeOscuro) !important}

/*Centrar cada icono*/
.icono1 svg {margin-top: 7px; margin-left: 6px; max-width: 39px;}
.icono2 svg {margin-top: 5.5px; margin-left: 12px; max-width: 26.5px;}
.icono3 svg {margin-top: 8px; margin-left: 5.5px; max-width: 39px;}
.icono4 svg {margin-top: 6.5px; margin-left: 10px; max-width: 30px}
.icono5 svg {margin-top: 6px; margin-left: 8.5px; max-width: 35px}
.icono6 svg {margin-top: 9px; margin-left: 8px; max-width: 32px}

@media (max-width: 1050px) {
    .barra-scroll {width: 42px}
    .barra-scroll a {width: 42px; height: 42px;}
    .contenedor {padding-left: 14px; padding-right: 24px}
    /*Centrar cada icono*/
    .icono1 svg {margin-top: 6px; margin-left: 5px; max-width: 32px}
    .icono2 svg {margin-top: 4px; margin-left: 10px; max-width: 22px}
    .icono3 svg {margin-top: 7px; margin-left: 5px; max-width: 32.5px}
    .icono4 svg {margin-top: 5.5px; margin-left: 9px; max-width: 24px}
    .icono5 svg {margin-top: 5px; margin-left: 7px; max-width: 29.5px}
    .icono6 svg {margin-top: 7px; margin-left: 6.5px; max-width: 28px}
}


/* --------------- MECANISMO JS DE LAS BARRAS QUE SE LLENAN / VACÍAN*/

.progreso {position: absolute; left: 50%; transform: translateX(-50%); 
z-index: 5; width: 5px; background-color: var(--VerdeClaro);
height: 15% /*Altura de cada barra (100% entre 4 iconos - los iconos)*/}

/*las barras se llenan poco a poco (con color red)*/
.progreso div {width: 100%; height: 0; background-color: var(--VerdeOscuro)}

/*posición de cada barra*/
.progreso1 {top: 5.4%}
.progreso2 {top: 24%}
.progreso3 {top: 42.8%}
.progreso4 {top: 61.2%}
.progreso5 {top: 80%}

/*Corte Responsive: nueva altura de las barras */
@media (max-width: 1050px) {
  .progreso {height: 15.5%}
  .progreso1 {top: 4.8%}
  .progreso2 {top: 23.6%}
  .progreso3 {top: 42.3%}
  .progreso4 {top: 61%}
  .progreso5 {top: 80%}
}








/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* ---------------------- 1. PORTADA Y FRASE A -----------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

html, body {overflow-x: hidden}/*Pa qe las Plantas de la derecha no empujen "barra-scroll"*/

/* ---------------------------- PORTADA ------------------------------*/

/* --------------- ESTILO BÁSICO DEL CONTENIDO*/
#div-uno-primer {margin-bottom: 3rem; position: relative; /*background: red*/}

.planta1 {position: absolute; max-width: 450px; width: 100%; left: 0;
margin-left: -57px; margin-top: -25px; z-index: 2}
.planta2 {position: absolute; max-width: 450px; width: 100%; bottom:0; right: 0;
  margin-right: -70px; margin-bottom: -30px; z-index: 2}

.seccion1 {position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; height: 100%;
overflow: hidden/*Importante: hace qe no interfiera con "barra-scroll, y ésta aparezca desde el principio*/}

.marco {text-align: center; border: 5px solid var(--VerdeClaro); border-radius: 60px; padding: 10rem 1.5rem;
position: relative; z-index: 1}

.seccion1 h1 {font-size: 3rem}
.seccion1 h1 span {letter-spacing: -3px}
.seccion1 h2 {font-size: 6rem}
.seccion1 .h2y {font-size: 5rem; padding: 0.5rem 0}
.seccion1 .h2primer {margin-bottom: -2rem; margin-top: 1.5rem}
.seccion1 .h2primer span {letter-spacing: 3px}
.seccion1 .h2segun {padding-bottom: 2rem}

.marco h2 {background: linear-gradient(150deg, rgb(68 95 76 / 90%) 45%, rgb(0 0 0) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent}





/* -------------------------- FRASE A --------------------------------*/

.texto-color {padding: 10rem 4rem; padding-right: 5.5rem; padding-top: 11rem;
background: linear-gradient(150deg, rgb(68 95 76 / 70%) 45%, rgb(235 253 205 / 70%) 100%), url(../img/madera.jpg);
background-position: center; background-repeat: no-repeat; background-size: cover}

.texto-color p {text-align: center; line-height: 1.4; color: var(--BlancoHueso)}

/*Icono Corazón*/
.texto-color svg {display: block; width: 45px; margin: 0 auto; margin-top: 2rem;
fill: var(--BlancoHueso)}


/*Corazón que late infinitamente*/
.late {animation: heartbeat 1.5s infinite ease-in-out}

@keyframes heartbeat {0%, 100% {transform: scale(1);} 50% {transform: scale(1.2);}}








/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------- 2. CUENTA ATRÁS ------------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

#div-dos {margin-top: 3rem; position: relative; /*background: green*/}

.seccion2 {position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; height: 100%}

.planta3 {position: absolute; max-width: 450px; width: 100%; right: 0;
margin-right: -50px; margin-top: -25px}
.planta4 {position: absolute; max-width: 450px; width: 100%; bottom: 0; left: 0;
margin-left: -50px; margin-bottom: -30px}


#contador {display: flex; justify-content: center; gap: 20px; margin-top: 2rem;
margin-bottom: 1.8rem;}
.tiempo {display: flex; flex-direction: column; align-items: center}

.seccion2 span {font-family: var(--fuenteBasica); font-size: 2.2rem; font-weight: 600; margin-bottom: -2px}








/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* --------------------- 3. LUGAR DE CELEBRACIÓN ---------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

#div-tres {margin-top: 5rem; text-align: center; /*background: yellow*/}

#div-tres h1 {margin-bottom: 3rem; padding-top: 1rem}

.cuadro {margin-bottom: 6rem; margin-right: 5px; margin-left: 5px;/*más margen corregido*/
box-shadow: 0px 0px 30px 9px #5a816d8f;
border-radius: 25px}

.cuadro img {border-radius: 25px 25px 0 0}

.cuadro .texto {padding: 3.5rem 1rem}

.cuadro h3 {margin-bottom: 0.3rem; margin-top: -1.5rem;}
.cuadro p {line-height: 1.5}
.cuadro-uno .cuadro h3 {margin-bottom: 1rem;}

.mapa {width: 100%; margin-top: -1.5rem; height: 600px; /*padding: 1.5rem; padding-bottom: 0.7rem;*/
border-radius: 0 0 25px 25px; margin-bottom: -7px}
@media (max-width: 700px) {.mapa {height: 430px}}
@media (max-width: 500px) {.mapa {height: 300px}}




    




/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* --------------------------- 4. RESUMEN ----------------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

#div-cuatro {margin-top: 6rem; position: relative; /*background: purple*/}

.seccion4 {position: relative; padding: 5rem 0;}

.planta5 {position: absolute; max-width: 310px; width: 65%; left: 0; margin-left: -70px; margin-top: -25px}
.planta6 {position: absolute; max-width: 310px; width: 65%; bottom: 0; right: 0; margin-right: -70px; margin-bottom: -35px}

.seccion4 div {text-align: center; margin-bottom: 3.5rem}
.seccion4 div:last-child {margin-bottom: 0}

.seccion4 svg {fill: var(--NegroVerdoso); width: 45px; margin-top: 0.4rem}
.seccion4 .resumen3 svg {width: 55px}
.seccion4 .resumen4 svg {width: 50px; margin-left: -5px}








/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* ------------------- 5. GALERÍA Y SUBIR FOTOS ----------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

#div-cinco {margin-top: 2rem; padding-top: 2rem; /*background: gray*/}
.contenedor-especial {max-width: 100rem; margin: 0 auto}

/* ----------------------------- GALERÍA -------------------------------*/
.contenedor-slideshow {position: relative; width: 100%; max-width: 100%}

.contenedor-slideshow img {width: 100%; height: auto; display: block;}

.slide {position: absolute; top: 0; left: 0; width: 100%; opacity: 0; z-index: 1;
transition: opacity 1s ease-in-out; /*Transición entre las Imágenes*/}

.slide.active {opacity: 1; z-index: 2}

.hueco-pc, .hueco-movil {opacity: 0}/*Truco: el Slide tendrá la altura de las img*/

/* --- ESTILO DE LAS FLECHAS */
.flecha {display: inline-block; width: 40px; height: 40px; z-index: 150; top: 48%;
position: absolute; cursor: pointer; opacity: 0; border-radius: 50px;
background: rgba(255, 255, 255, 0.4); transition: opacity 0.3s}

.span-flecha {position: relative; width: 100%; height: 100%}

.flecha span {display: block; width: 20px; height: 5px; position: absolute;
border-radius: 10px; transition: all 0.4s ease}

/* Flecha izquierda */
.flecha.izquierda {left: 15px; transform: rotate(-90deg)}

.flecha.izquierda span:nth-child(1) {transform: rotate(-45deg);
top: 15px; left: 4px}

.flecha.izquierda span:nth-child(2) {transform: rotate(45deg);
top: 15px; left: 15px}

/* Flecha derecha */
.flecha.derecha {right: 15px; transform: rotate(-90deg)}

.flecha.derecha span:nth-child(1) {transform: rotate(45deg);
top: 18px; left: 4px}

.flecha.derecha span:nth-child(2) {transform: rotate(-45deg);
top: 18px; left: 15px}

/* --- ESTILO DE LA CAJITA Y SUS CÍRCULOS */
.cajita {text-align: center; margin: 0 auto; position: relative; z-index: 150;
width:200px; padding: 5px; padding-top: 7px; border-radius:50px; margin-top: -50px;
background: rgba(255, 255, 255, 0.5);
opacity: 0; transition: opacity 0.3s, box-shadow 0.3s}

.circulo {display: inline-block; width: 15px; height: 15px; border-radius: 50%;
margin: 0 5px; cursor: pointer}

/* -------- HOVER Y COLORES (modificar) --------- */
.contenedor-slideshow:hover .flecha {opacity: 1}
.contenedor-slideshow:hover .cajita {opacity: 1}

.flecha span {background: var(--BlancoHueso)}
.span-flecha {opacity: 0.5; transition: opacity 0.3s}
.span-flecha:hover {opacity: 1}

.contenedor-slideshow .cajita:hover {box-shadow: 0px 0px 20px 5px var(--BlancoHueso)}
.circulo {background: var(--BlancoHueso); opacity: 0.5; transition: opacity 0.3s;}
.circulo:hover {opacity: 1}
.circulo.active {background-color: var(--Negro); opacity: 1;}

.contenedor-slideshow .cajita {cursor: url(https://slide-jose.netlify.app/img/stop.png) 5 0, none}

/* --- Responsive --- */
img.hueco-movil {display: none}

@media (max-width: 700px) {
    img.hueco-movil {display: block}
    img.hueco-pc {display: none}
    .contenedor-slideshow:hover .flecha {opacity: 0}
    .contenedor-slideshow .cajita {opacity: 1; margin-top: 15px;}
    .contenedor-slideshow .cajita:hover {box-shadow: 0px 0px 20px 5px var(--VerdeOscuro)}
    .circulo {background: var(--NegroVerdoso)}
    .cajita {background: var(--VerdeClaro)}
}





/* ----------------------------- SUBIR FOTOS -------------------------------*/
.texto-con-boton {margin-top: 8rem; margin-bottom: 8rem; text-align: center}
.texto-con-boton h3 {margin-bottom: 0.5rem}
.texto-con-boton p {line-height: 1.3}
.texto-con-boton .padre-btn-centro {margin-top: 1.3rem}
.texto-con-boton svg {width: 34px; fill: var(--BlancoHueso)}

.album .boton {padding: 0.5rem 5rem 0.1rem 5rem}









/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/
/* --------------------- 6. CONTACTO Y FRASE B -----------------------*/
/* -------------------------------------------------------------------*/
/* -------------------------------------------------------------------*/

/* -------------------------- CONTACTO --------------------------------*/
/*Es el mismo estilo exacto de "SUBIR FOTOS"*/
.texto-con-boton.contacto svg {width: 28px}
.contacto .boton {padding: 0.7rem 5rem 0.1rem 5rem}


#div-seis-primer {margin-bottom: 3rem; position: relative; /*background: red*/}

#div-seis-primer .planta1 {position: absolute; max-width: 400px; width: 100%; left: 0;
margin-left: -57px; margin-top: -30px; z-index: 2}
#div-seis-primer .planta2 {position: absolute; max-width: 400px; width: 100%; bottom:0; right: 0;
  margin-right: -70px; margin-bottom: -75px; z-index: 2}

.seccion6 {position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; height: 100%;
overflow: hidden;/*Importante: hace qe no interfiera con "barra-scroll, y ésta aparezca desde el principio*/
padding: 15rem 0; padding-top: 18rem;}




/* -------------------------- FRASE B --------------------------------*/
.texto-color.txtfin {padding: 11rem 4rem; padding-right: 5.5rem; padding-top: 12rem;
margin-top: 12rem}

@media (max-width: 600px) {
  .texto-color.txtfin {margin-top: 0}
}

/* "textoycorazon-b" tiene el mismo estilo que la frase A... */










/* ------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------*/
/* ------------- ANIMACIONES DE CÓMO ENTRA CADA CAJA EN LA WEB ------------*/
/* ------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------*/

/*-Hacer Invisible la Barra de desplazamiento Horizontal-*/
html {overflow-x: hidden; overflow-y: auto; width: 100%}
body {min-width: 100%}/*Pone ancho min al contenido pa evitar desborda horizontal*/

/*-Quel Usuario no pueda desplazarse con dedo a los lados de la web (en movil)-*/
body {overflow-x: hidden; overflow-y: auto}

/*TODAS LAS ANIMACIONES*/
.entra-izquierda {animation: entrando-izquierda 1.8s ease-in forwards}
@keyframes entrando-izquierda {
    0% { transform: translateX(-90%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}

.entra-derecha {animation: entrando-derecha 1.8s ease-in forwards}
@keyframes entrando-derecha {
    0% { transform: translateX(90%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}

.entra-arriba {animation: entrando-arriba 1s ease-in forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.aparece {animation: apareciendo 1.8s ease-in forwards}
@keyframes apareciendo {
    0% { opacity: 0}
    100% { opacity: 1}
}

.aparece-contacto {animation: apareciendo-contacto 1s ease-in forwards}
@keyframes apareciendo-contacto {
    0% { opacity: 0}
    100% { opacity: 1}
}

.crece {animation: creciendo 1s ease-in forwards}
@keyframes creciendo {
    0% { transform: scale(0); opacity: 0}
    100% { transform: scale(1); opacity: 1}
}

.voltea-vertical {animation: flip-vertical 1s ease-in-out forwards}
@keyframes flip-vertical {
    0% { transform: perspective(1500px) rotateY(90deg) scaleX(1.4); opacity: 0}
    100% { transform: perspective(1500px) rotateY(0deg) scaleX(1); opacity: 1}
}

.voltea-horizontal {animation: flip-horizontal 1s ease-in-out forwards}
@keyframes flip-horizontal {
    0% { transform: perspective(1000px) rotateX(90deg) scaleY(1.4); opacity: 0}
    100% { transform: perspective(1000px) rotateX(0deg) scaleY(1); opacity: 1}
}


/*ESTADO BASE DE CADA CAJA "ANIM"*/

/*Pa aplicarle "crece"*/
.anim4 {transform: scale(0); opacity: 0}

/*Pa aplicarle "entra-arriba"*/
.anim5 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "voltea-vertical"*/
.anim6, .anim7, .anim8 {transform: perspective(1500px) rotateY(90deg) scaleX(1.4); opacity: 0;
transform-origin: center center; backface-visibility: hidden}

/*Pa aplicarle "entra-arriba"*/
.anim9, .anim10, .anim11, .anim12 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "voltea-horizontal"*/
.anim13 {transform: perspective(1000px) rotateX(90deg) scaleY(1.4); opacity: 0;
transform-origin: center center; backface-visibility: hidden}

/*Pa aplicarle "aparece"*/
.anim14 {opacity: 0}

/*Pa aplicarle "crece"*/
.anim15 {transform: scale(0); opacity: 0}