:root{
--azul:#03152f;
--azul2:#0a3d62;
--dorado:#c9a227;
--negro:#111827;
--gris:#6b7280;
--fondo:#f8fafc;
--blanco:#ffffff;
--sombra:0 15px 35px rgba(0,0,0,.08);
}

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

.logo-clientes{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
background:var(--azul);
}

.logo-clientes img{
display:block;
width:100%;
max-width:460px;
margin:auto;
}

/* =========================================
BANNER
========================================= */

.banner-clientes{
background:var(--azul);
position:relative;
overflow:hidden;
}

.btn-consulta-banner{
position:absolute;
top:60px;
right:40px;
background:var(--dorado);
color:#fff;
padding:12px 24px;
border-radius:40px;
text-decoration:none;
font-weight:700;
display:flex;
align-items:center;
gap:8px;
box-shadow:var(--sombra);
transition:.3s;
}

.btn-consulta-banner:hover{
background:var(--azul2);
transform:translateY(-2px);
}

/* =========================================
TITULO
========================================= */

.titulo-clientes{
background:linear-gradient(to bottom,#ffffff,#f8fafc);
padding:20px 20px;
text-align:center;
}

.titulo-clientes h1{
color:var(--azul);
font-size:3rem;
font-weight:800;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:20px;
}

.titulo-clientes h1::after{
content:"";
display:block;
width:140px;
height:5px;
margin:18px auto 0;
background:var(--dorado);
border-radius:50px;
}

.titulo-clientes p{
max-width:850px;
margin:auto;
color:var(--negro);
font-size:1.1rem;
line-height:1.9;
}


/* =========================================
SECCIONES
========================================= */

.clientes-seccion{
padding:70px 20px;
}

.fondo{
background:var(--fondo);
}

.clientes-seccion h2{
text-align:center;
color:var(--azul);
font-size:2.2rem;
font-weight:800;
margin-bottom:50px;
text-transform:uppercase;
}

.clientes-seccion h2::after{
content:"";
display:block;
width:120px;
height:4px;
background:var(--dorado);
margin:15px auto 0;
border-radius:50px;
}

/* =========================================
GRID CLIENTES
========================================= */

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

.cliente-card{
background:#fff;
border-radius:18px;
padding:28px 18px;
text-align:center;
font-weight:600;
color:var(--azul);
line-height:1.6;
border-top:5px solid var(--dorado);
box-shadow:var(--sombra);
transition:.35s;
position:relative;
}

.cliente-card::before{
content:"★";
display:block;
color:var(--dorado);
font-size:1.3rem;
margin-bottom:10px;
}

.cliente-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,.12);
}

/* =========================================
CIERRE
========================================= */

.mensaje-final{
background:var(--azul);
padding:90px 20px;
text-align:center;
}

.mensaje-final h2{
color:#fff;
font-size:2.2rem;
margin-bottom:20px;
}

.mensaje-final p{
max-width:850px;
margin:auto;
color:#fff;
font-size:1.1rem;
line-height:2;
}

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

#btn-arriba,
#btn-inicio{
display:block;
position:fixed;
right:20px;
z-index:999;
width:55px;
height:55px;
border:none;
border-radius:50%;
cursor:pointer;
color:#fff;
background:var(--dorado);
box-shadow:0 10px 25px rgba(0,0,0,.20);
transition:.3s;
}

#btn-arriba{
bottom:20px;
}

#btn-inicio{
bottom:85px;
}

#btn-arriba:hover,
#btn-inicio:hover{
background:var(----azul);
}

/* =========================================
TABLET
========================================= */

@media(max-width:991px){

.grid-clientes{
grid-template-columns:repeat(2,1fr);
}

.titulo-clientes h1{
font-size:2.4rem;
}

.clientes-seccion h2{
font-size:1.9rem;
}

.btn-consulta-banner{
top:25px;
right:20px;
}

}

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

@media(max-width:768px){

.btn-consulta-banner{
position:static;
margin:20px auto;
width:max-content;
}

.logo-clientes img{
max-width:320px;
}

.titulo-clientes{
padding:50px 15px;
}

.titulo-clientes h1{
font-size:2rem;
}

.titulo-clientes p{
font-size:1rem;
}

.grid-clientes{
grid-template-columns:1fr;
gap:18px;
}

.cliente-card{
padding:22px 15px;
}

.clientes-seccion h2{
font-size:1.6rem;
}

.mensaje-final h2{
font-size:1.7rem;
}

#btn-arriba,
#btn-inicio{
width:50px;
height:50px;
}

}