/* Variables de colores */
:root {
  --azul: #1209ed;          /* Principal */
  --azul-claro: #4c45ff;    /* Secundario */
  --rojo: #de0e0b;          /* Hover botones */
  --amarillo: #e9e812;
  --gris-oscuro: #111;
  --gris-claro: #f4f4f4;
  --blanco: #ffffff;
}

/* ================= HERO ================= */
/* HERO SECTION */

#hero{
    position:relative;
    width:100%;
    min-height:100vh;

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

    text-align:center;

    background:
    linear-gradient(
        90deg,
        rgba(18,9,237,0.75) 0%,
        rgba(18,9,237,0.45) 0%,
        rgba(0,0,0,0.35) 0%
    ),
    url('../images/09.jpeg') center/cover no-repeat;

}

/* overlay oscuro */

.hero-overlay{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.55);

    z-index:1;
}

/* contenedor */
.hero-container{
	position:relative;
    z-index:2;
	
    max-width:1200px;
    width:100%;

    margin:0 auto;
    padding:0 20px;

    color:var(--blanco);
}

/* titulo */

.hero-container h1{
    font-size:3.2rem;
    font-weight:700;
    margin-bottom:20px;
}

/* texto */

.hero-container p{
    font-size:1.2rem;
    margin-bottom:35px;
}

/* botones */

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
}

/* boton principal */

.btn-primary{
    background:var(--azul);
    color:var(--blanco);

    padding:15px 30px;
    border-radius:6px;

    text-decoration:none;
    font-weight:600;

    transition:.3s;
}

.btn-primary:hover{
    background:var(--rojo);
}

/* boton secundario */

.btn-secondary{
    background:transparent;
    color:var(--blanco);

    border:2px solid var(--blanco);

    padding:15px 30px;
    border-radius:6px;

    text-decoration:none;
    font-weight:600;

    transition:.3s;
}

.btn-secondary:hover{
    background:var(--blanco);
    color:var(--gris-oscuro);
}
/*RESPONSIVE DESIGN*/
@media (max-width:1024px){

#hero{
    min-height:75vh;
    padding:160px 0 80px 0; /* quitamos padding lateral */
    background-position:center;
}

/* contenedor */
.hero-container{
    max-width:80%;
    padding:0 20px;
    box-sizing:border-box;
}

/* titulo */
.hero-container h1{
    font-size:1.9rem;
    line-height:1.2;
}

/* texto */
.hero-container p{
    font-size:1rem;
}

/* botones */
.hero-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
	margin-bottom:10px;
}

/* tamaño botones */
.btn-primary,
.btn-secondary{
    width:100%;
    max-width:320px;
    text-align:center;
}
	
/*Background para Mobile*/
#hero{
    background:
    linear-gradient(
        90deg,
        rgba(18,9,237,0.75) 0%,
        rgba(18,9,237,0.45) 0%,
        rgba(0,0,0,0.35) 0%
    ),
    url('../images/cabaña_alejandra03.jpg') center/cover no-repeat;
}
	/* ================= SCROLL INDICATOR ================= */

.scroll-indicator{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);

    width:90px;
    height:90px;

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

    font-size:2.5rem;
    font-weight:bold;

    color:var(--blanco);

    background:rgba(0,0,0,0.80);
    border-radius:50%;

    backdrop-filter:blur(4px);

    animation:scrollBounce 1.5s infinite;
}

/* animación */

@keyframes scrollBounce{

0%{
transform:translate(-50%,0);
}

50%{
transform:translate(-50%,10px);
}

100%{
transform:translate(-50%,0);
}

}
/*OCULTAR FLECHA INDICADOR EN PANTALLAS MUY PEQUEÑAS*/
@media (max-width:480px){
	
   .scroll-indicator{
      display:none;
   }

}