/* =========================
LAYOUT GENERAL
========================= */

body{

background-image:url("../assets/images/fondo.jpeg");

background-size:cover;

background-position:center;

display:flex;

min-height:100vh;

}


/* =========================
SIDEBAR
========================= */

.sidebar{

width:90px;

background:rgba(0,0,0,0.45);

backdrop-filter:blur(10px);

display:flex;

flex-direction:column;

align-items:center;

padding-top:30px;

gap:30px;

}


.sidebar a{

color:white;

text-decoration:none;

font-size:14px;

opacity:0.8;

transition:0.3s;

}


.sidebar a:hover{

opacity:1;

transform:scale(1.05);

}


/* =========================
LOGO
========================= */

.logo img{

width:60px;

display:block;

margin:auto;

}


/* =========================
MAIN
========================= */

.main{

flex:1;

display:flex;

align-items:center;

justify-content:center;

padding:30px;

}


/* =========================
CARD
========================= */

.glass-card{

width:min(850px,100%);

padding:45px;

}


/* =========================
HEADER
========================= */

.header{

margin-bottom:30px;

font-size:18px;

letter-spacing:2px;

text-transform:uppercase;

opacity:0.8;

}


/* =========================
CONTENIDO
========================= */

.content{

display:flex;

gap:50px;

align-items:center;

}


/* =========================
IMAGEN
========================= */

.image-box img{

width:260px;

height:260px;

object-fit:cover;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,0.7);

transition:0.4s;

}


.image-box img:hover{

transform:scale(1.05);

}


/* =========================
TEXTO
========================= */

.text-section{

max-width:450px;

}


.text-section h1{

font-size:42px;

margin-bottom:15px;

}


.text-section h3{

letter-spacing:3px;

margin-bottom:10px;

opacity:0.7;

}


.text-section p{

margin-top:10px;

line-height:1.7;

}


/* =========================
BOTONES
========================= */

.buttons{

margin-top:30px;

display:flex;

gap:18px;

flex-wrap:wrap;

}


/* TODOS LOS BOTONES */

.buttons a{

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

width:180px;

height:58px;

border-radius:18px;

font-size:16px;

font-weight:600;

transition:0.35s ease;

}


/* BOTON UBICACION */

#ubicacion{

background:rgba(255,255,255,0.12);

border:1px solid rgba(255,255,255,0.25);

backdrop-filter:blur(10px);

color:white;

box-shadow:
0 10px 25px rgba(0,0,0,0.25);

}


#ubicacion:hover{

transform:translateY(-4px);

background:rgba(255,255,255,0.18);

}


/* BOTON GALERIA */

#galeria{

background:linear-gradient(
135deg,
#22c55e,
#16a34a
);

color:white;

box-shadow:
0 12px 30px rgba(34,197,94,0.35);

}


#galeria:hover{

transform:translateY(-4px);

box-shadow:
0 20px 40px rgba(34,197,94,0.45);

}


/* CLICK */

#ubicacion:active,
#galeria:active{

transform:scale(0.96);

}


/* =========================
GALERIA PREVIEW
========================= */

.preview-galeria{

display:flex;

gap:10px;

margin-top:20px;

flex-wrap:wrap;

}


.mini-galeria{

width:90px;

height:90px;

object-fit:cover;

border-radius:12px;

border:2px solid rgba(255,255,255,0.2);

transition:0.3s;

}


.mini-galeria:hover{

transform:scale(1.08);

}


/* =========================
LOADER
========================= */

.loader-container{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#071422;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:20px;

z-index:999;

}



/* =========================
RESPONSIVE MOVIL
========================= */

@media(max-width:768px){

body{
padding:15px;
}

.glass-card{
width:100%;
padding:25px;
border-radius:25px;
}

.content{
flex-direction:column;
text-align:center;
gap:25px;
}

.image-box img{
width:220px;
height:220px;
max-width:100%;
}

.text-section{
max-width:100%;
}

.text-section h1{
font-size:30px;
}

.buttons{
flex-direction:column;
width:100%;
}

.btn-filled,
.btn-outline{
width:100%;
text-align:center;
}

.preview-galeria{
justify-content:center;
}

.mini-galeria{
width:75px;
height:75px;
}

}