/* ====================================
INTERYMEDIOS CARD V1.0
==================================== */

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#f4f6f9;
color:#333;
line-height:1.6;
}

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

.hero{
background:
linear-gradient(
rgba(11,59,96,.80),
rgba(11,59,96,.80)
),
url('../img/portada.png');

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

text-align:center;
color:#fff;

padding:70px 20px;

}

.logo{
width:120px;
margin-bottom:15px;
}

.hero h1{
font-size:2.2rem;
margin-bottom:10px;
}

.slogan{
font-size:1.1rem;
margin-bottom:25px;
opacity:.95;
}

.btn-principal{
display:inline-block;
background:#25D366;
color:#fff;
text-decoration:none;
padding:14px 28px;
border-radius:10px;
font-weight:bold;
transition:.3s;
}

.btn-principal:hover{
transform:translateY(-2px);
}

/* ====================================
ACCIONES RAPIDAS
==================================== */

.acciones{
max-width:900px;
margin:30px auto;
padding:0 20px;

display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;

}

.accion{
background:#fff;
text-decoration:none;
color:#333;
text-align:center;

padding:18px;

border-radius:12px;

box-shadow:0 2px 10px rgba(0,0,0,.08);

transition:.3s;

}

.accion:hover{
transform:translateY(-3px);
}

.accion span{
display:block;
margin-top:8px;
font-size:.9rem;
}

/* ====================================
CONTENEDOR GENERAL
==================================== */

.contenedor{
max-width:1100px;
margin:50px auto;
padding:0 20px;
}

.contenedor h2{
text-align:center;
color:#0b3b60;
margin-bottom:25px;
}

/* ====================================
SERVICIOS
==================================== */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.card{
background:#fff;
padding:25px;

border-radius:12px;

box-shadow:0 2px 10px rgba(0,0,0,.08);

transition:.3s;

}

.card:hover{
transform:translateY(-5px);
}

.card h3{
color:#0b3b60;
margin-bottom:10px;
}

/* ====================================
BENEFICIOS
==================================== */

.beneficios{
list-style:none;
max-width:600px;
margin:auto;
}

.beneficios li{
background:#fff;

padding:15px;

margin-bottom:12px;

border-radius:10px;

box-shadow:0 2px 8px rgba(0,0,0,.06);

}

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

.galeria{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:15px;
}

.galeria img{
width:100%;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* ==========================
PROMOCION
========================== */

.promo{
    padding:40px 20px;
}

.promo-card{
    max-width:700px;
    margin:0 auto;
    background:#ffffff;
    border-radius:15px;
    padding:30px;
    text-align:center;
    box-shadow:0 4px 15px rgba(0,0,0,.10);
}

.promo-card h2{
    color:#0b3b60;
    margin-bottom:15px;
}

.promo-card p{
    white-space:pre-line;
    margin:15px 0;
    line-height:1.7;
}

#promo-boton{
    display:inline-block;
    background:#25D366;
    color:#fff;
    text-decoration:none;
    padding:12px 25px;
    border-radius:8px;
    font-weight:bold;
    transition:.3s;
}

#promo-boton:hover{
    transform:translateY(-2px);
}

/* ====================================
COTIZACIONES
==================================== */

.cotizaciones{
display:flex;
flex-direction:column;
gap:15px;

max-width:600px;
margin:auto;

}

.btn-cotizacion{
background:#0b3b60;
color:#fff;

text-decoration:none;

text-align:center;

padding:16px;

border-radius:10px;

font-weight:bold;

transition:.3s;

margin-top:15px;

}

.btn-cotizacion:hover{
transform:translateY(-3px);
}

/* ==========================
UBICACION
========================== */

.ubicacion-box{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    text-align:center;
}

.ubicacion-box p{
    margin-bottom:20px;
    line-height:1.8;
}

/* ====================================
QR
==================================== */

.qr{
display:block;

width:120px;

height:auto;

margin:20px auto;

background:#fff;

padding:8px;

border-radius:12px;

box-shadow:0 2px 8px rgba(0,0,0,.10);

}

/* ====================================
FOOTER
==================================== */

footer{
background:#0b3b60;

color:#fff;

text-align:center;

padding:30px 20px;

margin-top:50px;

}

footer p{
margin-bottom:8px;
}

/* ====================================
WHATSAPP FLOTANTE
==================================== */

.whatsapp-float{
position:fixed;

right:20px;
bottom:20px;

width:60px;
height:60px;

background:#25D366;

color:#fff;

border-radius:50%;

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

text-decoration:none;

font-size:28px;

box-shadow:0 4px 12px rgba(0,0,0,.25);

z-index:9999;

}

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

@media(max-width:768px){

.acciones{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
padding:20px;
max-width:1100px;
margin:0 auto;
}

.hero h1{
    font-size:1.8rem;
}

.logo{
    width:100px;
}

}

/* ====================================
INTERYMEDIOS CARD V1.1 PREMIUM
==================================== */

/* HERO PREMIUM */

.hero{

padding:90px 20px;

}

.hero h1{

font-size:2.8rem;

font-weight:700;

letter-spacing:.5px;

}

.slogan{

font-size:1.2rem;

max-width:700px;

margin:0 auto 25px;

}

/* TARJETAS PREMIUM */

.card{

border-radius:18px;

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

}

.card:hover{

transform:translateY(-6px);

}

/* PROMOCION PREMIUM */

.promo-card{

border-radius:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.12);

}

/* BOTONES PREMIUM */

.btn-principal,
.btn-cotizacion,
#promo-boton{

box-shadow:
0 6px 18px rgba(0,0,0,.15);

}

.btn-principal:hover,
.btn-cotizacion:hover,
#promo-boton:hover{

transform:translateY(-3px);

}

/* GALERIA PREMIUM */

.galeria img{

border-radius:16px;

transition:.3s;

}

.galeria img:hover{

transform:scale(1.03);

}

/* UBICACION PREMIUM */

.ubicacion-box{

border-radius:18px;

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

}

/* QR PREMIUM */

.qr{

width:140px;

}

/* WHATSAPP FLOTANTE */

.whatsapp-float:hover{

transform:scale(1.08);

}

/* FOOTER */

footer{

box-shadow:
0 -4px 20px rgba(0,0,0,.08);

}