/*==================================================
SUPERGUIAS v1.0
styles.css
==================================================*/

:root{

--azul:#0F4C81;
--azul2:#1B75D0;
--naranja:#FF7A00;
--gris:#666666;
--grisClaro:#F4F7FB;
--blanco:#FFFFFF;
--sombra:0 15px 40px rgba(0,0,0,.08);
--radio:18px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--blanco);
color:#222;
line-height:1.6;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1180px,92%);
margin:auto;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
background:rgba(255,255,255,.96);
backdrop-filter:blur(12px);
box-shadow:0 5px 20px rgba(0,0,0,.05);
z-index:1000;

}

header .container{

display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;

}

.logo img{

height:58px;

}

nav ul{

display:flex;
gap:35px;

}

nav a{

font-weight:600;
transition:.3s;

}

nav a:hover{

color:var(--naranja);

}

.btn-header{

background:var(--naranja);
color:white;
padding:14px 28px;
border-radius:50px;
font-weight:600;
transition:.3s;

}

.btn-header:hover{

transform:translateY(-3px);

}

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

.hero{

padding:170px 0 110px;
background:linear-gradient(
180deg,
#ffffff 0%,
#eef5ff 100%
);

}

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.hero-tag{

display:inline-block;
background:#EAF4FF;
color:var(--azul);
padding:10px 18px;
border-radius:30px;
font-size:.9rem;
font-weight:600;
margin-bottom:25px;

}

.hero h1{

font-size:3.6rem;
line-height:1.15;
color:var(--azul);
margin-bottom:25px;

}

.hero p{

font-size:1.08rem;
color:var(--gris);
margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:20px;
margin-bottom:45px;

}

.btn-primary{

background:var(--naranja);
color:white;
padding:18px 34px;
border-radius:50px;
font-weight:700;
box-shadow:0 15px 35px rgba(255,122,0,.28);
transition:.3s;

}

.btn-primary:hover{

transform:translateY(-5px);

}

.btn-secondary{

border:2px solid var(--azul);
padding:18px 34px;
border-radius:50px;
font-weight:700;
color:var(--azul);
transition:.3s;

}

.btn-secondary:hover{

background:var(--azul);
color:white;

}

.hero-list{

display:grid;
gap:22px;

}

.hero-item{

display:flex;
gap:16px;

}

.hero-check{

width:18px;
height:18px;
background:var(--naranja);
border-radius:50%;
margin-top:8px;
flex-shrink:0;

}

.hero-image{

display:flex;
justify-content:center;

}

.hero-image img{

width:100%;
max-width:500px;
animation:flotar 4s ease-in-out infinite;

}

@keyframes flotar{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0px);

}

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

.benefits{

padding:110px 0;
background:#FFFFFF;

}

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title span{

display:inline-block;
background:#EAF4FF;
color:var(--azul);
padding:10px 20px;
border-radius:50px;
font-size:.9rem;
font-weight:600;
margin-bottom:20px;

}

.section-title h2{

font-size:2.7rem;
color:var(--azul);
margin-bottom:20px;
line-height:1.2;

}

.section-title p{

max-width:720px;
margin:auto;
color:var(--gris);
font-size:1.05rem;

}

.benefits-grid{

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

}

.benefit-card{

background:white;
padding:35px;
border-radius:var(--radio);
box-shadow:var(--sombra);
transition:.35s;
text-align:center;
border:1px solid #EEF2F6;

}

.benefit-card:hover{

transform:translateY(-10px);
box-shadow:0 30px 60px rgba(15,76,129,.12);

}

.benefit-icon{

width:90px;
height:90px;
margin:auto;
margin-bottom:25px;
display:flex;
align-items:center;
justify-content:center;
background:#F4F8FD;
border-radius:22px;

}

.benefit-card h3{

font-size:1.35rem;
color:var(--azul);
margin-bottom:18px;

}

.benefit-card p{

font-size:.97rem;
color:var(--gris);

}

/*==========================
ESTADÍSTICAS
==========================*/

.numbers{

padding:90px 0;
background:linear-gradient(135deg,var(--azul),var(--azul2));

}

.numbers-grid{

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

}

.number-card{

background:rgba(255,255,255,.10);
padding:40px 25px;
border-radius:22px;
text-align:center;
backdrop-filter:blur(10px);

}

.number-card h2{

font-size:3rem;
color:#FFD15D;
margin-bottom:12px;

}

.number-card p{

color:white;
font-size:1rem;

}

/*==========================
FORMULARIO
==========================*/

.quote{

padding:120px 0;
background:#F7FAFD;

}

.quote-grid{

display:grid;
grid-template-columns:2fr 1fr;
gap:35px;
align-items:start;

}

.quote-form{

background:white;
padding:45px;
border-radius:22px;
box-shadow:var(--sombra);

}

.form-row{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}

.form-group{

display:flex;
flex-direction:column;
margin-bottom:22px;

}

.form-group label{

font-weight:600;
margin-bottom:10px;
color:var(--azul);

}

.form-group input,
.form-group textarea{

padding:16px;
border:2px solid #E5EAF0;
border-radius:14px;
font-family:'Poppins',sans-serif;
font-size:1rem;
outline:none;
transition:.3s;
background:white;

}

.form-group input:focus,
.form-group textarea:focus{

border-color:var(--azul);

}

.form-group textarea{

resize:vertical;

}

.btn-whatsapp{

width:100%;
padding:18px;
border:none;
background:#25D366;
color:white;
font-size:1rem;
font-weight:700;
border-radius:14px;
cursor:pointer;
transition:.3s;

}

.btn-whatsapp:hover{

background:#1FB85A;
transform:translateY(-4px);

}

.quote-info{

display:grid;
gap:25px;

}

.info-box{

background:white;
padding:30px;
border-radius:22px;
box-shadow:var(--sombra);

}

.info-box h3{

color:var(--azul);
margin-bottom:20px;

}

.info-box ol,
.info-box ul{

padding-left:20px;

}

.info-box li{

margin-bottom:14px;
color:var(--gris);

}
/*==========================
PREGUNTAS FRECUENTES
==========================*/

.faq{

padding:120px 0;
background:#FFFFFF;

}

.faq-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.faq-item{

background:#F8FAFD;
padding:30px;
border-radius:20px;
border:1px solid #E8EEF5;
transition:.35s;

}

.faq-item:hover{

transform:translateY(-8px);
box-shadow:var(--sombra);

}

.faq-item h3{

color:var(--azul);
margin-bottom:15px;
font-size:1.2rem;

}

.faq-item p{

color:var(--gris);
line-height:1.8;

}

/*==========================
CONTACTO
==========================*/

.contact{

padding:120px 0;
background:#F7FAFD;

}

.contact-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.contact-card{

background:white;
padding:40px 30px;
text-align:center;
border-radius:22px;
box-shadow:var(--sombra);
transition:.35s;

}

.contact-card:hover{

transform:translateY(-10px);

}

.contact-icon{

width:90px;
height:90px;
margin:auto;
margin-bottom:25px;
background:linear-gradient(
135deg,
var(--azul),
var(--azul2)
);

border-radius:22px;

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

font-size:40px;
color:white;

}

.contact-card h3{

color:var(--azul);
margin-bottom:15px;

}

.contact-card p{

color:var(--gris);
margin-bottom:8px;

}

.btn-contact{

display:inline-block;
margin-top:20px;
background:var(--naranja);
color:white;
padding:14px 28px;
border-radius:50px;
font-weight:600;
transition:.3s;

}

.btn-contact:hover{

transform:translateY(-4px);

}

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

footer{

background:#0F4C81;
padding:80px 0 30px;
color:white;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:60px;
margin-bottom:50px;

}

.footer-logo{

width:220px;
margin-bottom:25px;

}

.footer-grid h3{

margin-bottom:20px;
font-size:1.3rem;

}

.footer-grid p{

color:#D8E5F3;
line-height:1.8;

}

.footer-grid ul{

display:grid;
gap:14px;

}

.footer-grid a{

transition:.3s;

}

.footer-grid a:hover{

color:#FFD15D;

}

.footer-bottom{

padding-top:25px;
border-top:1px solid rgba(255,255,255,.15);
text-align:center;
color:#C6D5E6;
font-size:.95rem;

}

/*==========================
BOTÓN WHATSAPP
==========================*/

.floating-whatsapp{

position:fixed;
right:25px;
bottom:25px;

width:70px;
height:70px;

background:#25D366;

border-radius:50%;

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

box-shadow:
0 20px 45px rgba(37,211,102,.35);

transition:.35s;

z-index:999;

}

.floating-whatsapp::before{

content:"";

width:34px;
height:34px;

background:url("https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg");

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

display:block;

}

.floating-whatsapp:hover{

transform:scale(1.12);

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

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;
text-align:center;
gap:60px;

}

.hero-buttons{

justify-content:center;

}

.hero-list{

max-width:600px;
margin:auto;
text-align:left;

}

.hero-image{

order:-1;

}

.benefits-grid{

grid-template-columns:repeat(2,1fr);

}

.numbers-grid{

grid-template-columns:repeat(2,1fr);

}

.quote-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:1fr;
text-align:center;

}

.footer-logo{

margin:auto;
margin-bottom:25px;

}

}

@media(max-width:768px){

header .container{

flex-direction:column;
gap:18px;

}

nav ul{

flex-wrap:wrap;
justify-content:center;
gap:18px;

}

.hero{

padding-top:230px;

}

.hero h1{

font-size:2.6rem;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;
text-align:center;

}

.benefits-grid{

grid-template-columns:1fr;

}

.numbers-grid{

grid-template-columns:1fr;

}

.form-row{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.faq-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:2rem;

}

.quote-form{

padding:30px;

}

.info-box{

padding:25px;

}

}

@media(max-width:480px){

.container{

width:94%;

}

.hero{

padding-top:260px;

}

.hero h1{

font-size:2rem;

}

.hero p{

font-size:1rem;

}

.logo img{

height:48px;

}

.btn-header{

display:none;

}

.floating-whatsapp{

width:60px;
height:60px;
right:18px;
bottom:18px;

}

}

/*==========================
ANIMACIONES
==========================*/

.fade-up{

opacity:0;
transform:translateY(50px);
transition:all .8s ease;

}

.fade-up.show{

opacity:1;
transform:translateY(0);

}

/*==========================
SCROLLBAR
==========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EEF3F8;

}

::-webkit-scrollbar-thumb{

background:var(--azul);
border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--naranja);

}

/*==========================
SELECCIÓN
==========================*/

::selection{

background:var(--naranja);
color:white;

}

/*==========================
EFECTOS
==========================*/

.benefit-card,
.contact-card,
.info-box,
.quote-form,
.faq-item{

transition:

transform .35s ease,

box-shadow .35s ease;

}

input,
textarea{

transition:

border-color .30s,

box-shadow .30s;

}

input:focus,
textarea:focus{

box-shadow:

0 0 0 5px rgba(15,76,129,.10);

}

.hero-image img{

filter:

drop-shadow(0 25px 45px rgba(15,76,129,.18));

}

.btn-primary,
.btn-secondary,
.btn-contact,
.btn-whatsapp,
.btn-header{

cursor:pointer;

}