/*======================================
AVILA WEB DESIGN
======================================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Manrope',sans-serif;

background:#071B33;

color:#ffffff;

overflow-x:hidden;

line-height:1.6;

}
img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:92%;

max-width:1250px;

margin:auto;

}

/*======================================
TOPBAR
======================================*/

.topbar{

height:42px;

background:#2F80ED;

display:flex;

justify-content:center;

align-items:center;

gap:30px;

font-size:14px;

font-weight:600;

}

.topbar i{

margin-right:8px;

}

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

header{

position:fixed;

top:42px;

left:0;

width:100%;

z-index:999;

transition:.35s;

background:rgba(7,27,51,.82);

backdrop-filter:blur(16px);

border-bottom:1px solid rgba(255,255,255,.05);

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 0;

}

.logo{

height:95px;

width:auto;

object-fit:contain;

display:block;

}

.logo:hover{

transform:scale(1.05);

}

nav ul{

display:flex;

gap:38px;

list-style:none;

}

nav ul li{

font-weight:600;

}

nav ul li a{

position:relative;

transition:.3s;

}

nav ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#2F80ED;

transition:.3s;

}

nav ul li a:hover::after{

width:100%;

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background:

radial-gradient(circle at top,#194f92,#071B33);

}

.hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

background:#2F80ED;

opacity:.14;

filter:blur(140px);

border-radius:50%;

top:-220px;

left:-150px;

}

.hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

background:#00D5FF;

opacity:.10;

filter:blur(120px);

border-radius:50%;

bottom:-150px;

right:-100px;

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

padding-top:140px;

}

.badge{

display:inline-block;

padding:10px 22px;

background:rgba(255,255,255,.07);

border:1px solid rgba(255,255,255,.15);

border-radius:40px;

font-size:13px;

letter-spacing:2px;

margin-bottom:25px;

}

.hero h1{

font-size:78px;

line-height:1.05;

margin-bottom:30px;

font-weight:800;

}
.hero p{
    font-size:24px;
    max-width:680px;
    line-height:1.8;
    color:#d9e6f3;
    margin-bottom:45px;
}

.hero-botones{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.boton{

position:relative;

overflow:hidden;

background:#2F80ED;

padding:18px 36px;

border-radius:10px;

font-weight:700;

font-size:17px;

letter-spacing:.4px;

display:inline-block;

transition:.35s;

box-shadow:0 18px 45px rgba(47,128,237,.35);

}

.boton:hover{

transform:translateY(-5px);

}

.secundario{

background:transparent;

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

}

.secundario:hover{

background:white;

color:#071B33;

}

.hero-card{

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.12);

padding:28px;

border-radius:22px;

backdrop-filter:blur(20px);

}

.hero-card h3{

font-size:30px;

margin-bottom:25px;

}

.hero-card ul{

list-style:none;

display:flex;

flex-direction:column;

gap:18px;

font-size:18px;

color:#d9e5f2;

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

.seccion{

padding:70px 0;

}

.seccion h2{

font-size:52px;

text-align:center;

margin-bottom:25px;

font-weight:800;

}

.subtitulo{

max-width:750px;

margin:0 auto 70px;

text-align:center;

font-size:21px;

color:#c8d6e7;

line-height:1.8;

}

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

.estadisticas{

background:#081c35;

padding:70px 0;

}

.stats{

display:grid;

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

gap:30px;

}

.stat{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:45px;

text-align:center;

transition:.35s;

backdrop-filter:blur(10px);

}

.stat:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.08);

}

.stat h2{

font-size:50px;

color:#2F80ED;

margin-bottom:15px;

font-weight:800;

}

.stat p{

color:#d7e1ef;

}

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

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:35px;

}

.card{

background:white;

color:#071B33;

padding:45px;

border-radius:22px;

transition:.35s;

position:relative;

overflow:hidden;

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

}

.card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(47,128,237,.25);

}

.card i{

font-size:55px;

color:#2F80ED;

margin-bottom:30px;

}

.card h3{

font-size:30px;

margin-bottom:18px;

}

.card p{

line-height:1.8;

margin-bottom:25px;

color:#4d5b6d;

}

.card strong{

display:block;

font-size:48px;

color:#2F80ED;

font-weight:800;

margin-top:20px;

}

/*======================================
MÁS VENDIDO
======================================*/

.popular{

position:absolute;

top:20px;

right:20px;

background:#2F80ED;

padding:8px 18px;

border-radius:40px;

font-size:12px;

color:white;

font-weight:700;

letter-spacing:1px;

}

.popular-card{

border:3px solid #2F80ED;

transform:scale(1.03);

}

.popular-card:hover{

transform:translateY(-12px) scale(1.05);

}

/*======================================
PROCESO
======================================*/

.oscuro{

background:#0c2748;

}

.pasos{

display:grid;

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

gap:30px;

margin-top:50px;

}

.paso{

background:white;

color:#071B33;

padding:40px;

border-radius:20px;

text-align:center;

transition:.35s;

}

.paso:hover{

transform:translateY(-10px);

}

.numero{

width:70px;

height:70px;

margin:auto;

margin-bottom:25px;

background:#2F80ED;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

font-weight:800;

color:white;

}

.paso h3{

font-size:26px;

margin-bottom:18px;

}

.paso p{

line-height:1.8;

color:#4d5b6d;

}
/*======================================
PORTFOLIO
======================================*/

.portfolio{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:35px;

margin-top:50px;

}

.trabajo{
    background:white;
    border-radius:22px;
    overflow:hidden;
    transition:.35s;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
    display:flex;
    flex-direction:column;
}

.trabajo:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(47,128,237,.25);

}

.imagen{
    width:100%;
    aspect-ratio:16/9;
    min-height:220px;

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

    border-radius:22px 22px 0 0;
}

.trabajo h3{

padding:25px 25px 10px;

font-size:28px;

color:#071B33;

}

.trabajo p{
min-height:70px;

padding:0 25px 30px;

color:#4d5b6d;

line-height:1.8;

}

/*======================================
LISTA
======================================*/

.lista{

max-width:900px;

margin:auto;

display:grid;

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

gap:20px;

}

.lista p{

background:rgba(255,255,255,.06);

padding:20px;

border-radius:14px;

border:1px solid rgba(255,255,255,.08);

font-size:18px;

}

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

.contacto{

max-width:850px;

}

.formulario{

display:flex;

flex-direction:column;

gap:20px;

margin-top:40px;

}

.formulario input,
.formulario textarea{

padding:18px;

border-radius:12px;

border:none;

font-size:17px;

font-family:inherit;

background:#ffffff;

color:#071B33;

}

.formulario textarea{

resize:vertical;

min-height:170px;

}

.formulario button{

cursor:pointer;

border:none;

font-size:18px;

}

.datos-contacto{

margin-top:40px;

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

font-size:18px;

}

.datos-contacto i{

color:#2F80ED;

margin-right:8px;

}

/*======================================
CTA
======================================*/

.cta{

padding:120px 0;

text-align:center;

background:linear-gradient(135deg,#0B2342,#123B70);

}

.cta h2{

font-size:56px;

max-width:850px;

margin:auto;

margin-bottom:25px;

}

.cta p{

font-size:22px;

color:#d7e1ef;

margin-bottom:40px;

}

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

footer{

background:#051221;

padding:90px 0 40px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

margin-bottom:50px;

}

.logo-footer{

height:120px;

width:auto;

display:block;

margin-bottom:20px;

}

footer h3{

margin-bottom:18px;

}

footer p{

color:#c5d2e3;

margin-bottom:12px;

line-height:1.8;

}

.copyright{

border-top:1px solid rgba(255,255,255,.08);

padding-top:25px;

text-align:center;

color:#b8c8da;

}

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

.whatsapp{

position:fixed;

right:25px;

bottom:110px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:white;

text-decoration:none;

box-shadow:0 15px 35px rgba(0,0,0,.28);

z-index:9999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.12);

}

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

@media(max-width:1000px){

.hero-grid,
.footer-grid,
.stats,
.pasos,
.cards,
.portfolio{

grid-template-columns:1fr;

}

.hero{

text-align:center;

}

.hero h1{

font-size:52px;

}

.hero p{

font-size:20px;
margin:auto auto 40px;

}

.hero-botones{

justify-content:center;
flex-wrap:wrap;

}

nav{

flex-direction:column;
gap:25px;

}

nav ul{

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

}

.lista{

grid-template-columns:1fr;

}

.container{

padding:0 20px;

}

}

@media(max-width:700px){

.topbar{

display:none;

}

header{

top:0;

}

.hero{

padding-top:120px;
padding-bottom:80px;

}

.hero h1{

font-size:38px;
line-height:1.2;

}

.hero p{

font-size:18px;

}

.seccion{

padding:70px 0;

}

.seccion h2{

font-size:34px;

}

.subtitulo{

font-size:18px;

}

.card{

padding:30px 20px;

}

.trabajo{

margin-bottom:25px;

}

.imagen{

aspect-ratio:16/9;
min-height:200px;

}

.cta h2{

font-size:34px;

}

.cta p{

font-size:18px;

}

.boton{

width:100%;
text-align:center;

}

.hero-botones{

flex-direction:column;
gap:15px;

}

.whatsapp{

width:60px;
height:60px;
font-size:30px;
right:20px;
bottom:20px;

}

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

@keyframes aparecer{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.hero-texto{

animation:aparecer .9s ease;

}

.hero-card{

animation:aparecer 1.2s ease;

}

.card,
.trabajo,
.paso,
.stat{

transition:
transform .35s,
box-shadow .35s,
background .35s;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#071B33;

}

::-webkit-scrollbar-thumb{

background:#2F80ED;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#4b98ff;

}

/*======================================
SELECCIÓN DE TEXTO
======================================*/

::selection{

background:#2F80ED;

color:white;

}

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

.formulario input:focus,
.formulario textarea:focus{

outline:none;

border:2px solid #2F80ED;

box-shadow:0 0 20px rgba(47,128,237,.25);

}

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

button,
.boton{

cursor:pointer;

}

button:hover,
.boton:hover{

filter:brightness(1.05);

}

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

.logo-footer{

transition:.3s;

}

.logo-footer:hover{

transform:scale(1.05);

}

/*======================================
ICONOS
======================================*/

.card i,
.datos-contacto i{

transition:.3s;

}

.card:hover i{

transform:scale(1.15);

}

/*======================================
SUAVIZADO
======================================*/

body{

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

/*======================================
ESPACIADOS
======================================*/

section{

position:relative;

z-index:1;

}

/*======================================
FIN CSS
======================================*/
@keyframes ripple{

from{

transform:scale(0);

opacity:.6;

}

to{

transform:scale(4);

opacity:0;

}

}
.lista-servicio{

list-style:none;

padding:20px 0;

text-align:left;

display:flex;

flex-direction:column;

gap:10px;

}

.lista-servicio li{

font-size:.95rem;

opacity:.95;

}
/*==========================
PORTFOLIO
==========================*/

.trabajo:hover .imagen{

transform:scale(1.02);

}
.restaurante{

background-image:
linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
url("img/restaurant.jpg");

}

.peluqueria{

background-image:
linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
url("img/hair.jpg");

}

.clinica{

background-image:
linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
url("img/clinic.jpg");

}

.abogado{

background-image:
linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
url("img/lawyer.jpg");

}
.ventajas .card{

text-align:center;

padding:40px 30px;

}

.ventajas i{

color:#2F80ED;

margin-bottom:20px;

}

.ventajas h3{

margin-bottom:15px;

}
/*=========================
DEMO WEB
=========================*/

.demo-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:30px;

margin-top:60px;

}

.demo-item{

background:#0d2747;

padding:40px;

border-radius:18px;

text-align:center;

transition:.35s;

border:1px solid rgba(255,255,255,.06);

}

.demo-item:hover{

transform:translateY(-10px);

}

.demo-item i{

color:#2F80ED;

margin-bottom:20px;

}

.demo-item h3{

margin-bottom:15px;

color:white;

}

.demo-item p{

color:#d5dbe7;

line-height:1.7;

}
/*=========================
COMPROMISO
=========================*/

.compromiso .card{

text-align:center;

padding:40px 30px;

}

.compromiso i{

color:#2F80ED;

margin-bottom:20px;

}

.compromiso h3{

margin-bottom:15px;
}
/*=========================
BOTÓN DEL MENÚ
=========================*/

.menu-boton{

background:#2F80ED;

padding:12px 22px;

border-radius:8px;

color:#fff;

font-weight:700;

transition:.3s;

box-shadow:0 10px 25px rgba(47,128,237,.30);

}

.menu-boton:hover{

background:#4b98ff;

transform:translateY(-2px);

}

.menu-boton::after{

display:none;

}
/*=========================
HERO INFO
=========================*/

.hero-info{

display:flex;

gap:25px;

flex-wrap:wrap;

margin:35px 0;

}

.hero-info span{

display:flex;

align-items:center;

gap:10px;

background:rgba(255,255,255,.08);

padding:12px 18px;

border-radius:40px;

font-size:15px;

border:1px solid rgba(255,255,255,.08);

}

.hero-info i{

color:#2F80ED;

}
/*=========================
BOTÓN PORTFOLIO
=========================*/

.mini-boton{

display:inline-block;

margin:0 25px 30px;

padding:12px 20px;

background:#2F80ED;

color:#fff;

border-radius:8px;

font-weight:700;

transition:.3s;

}

.mini-boton:hover{

background:#4b98ff;

transform:translateY(-2px);

}
/*=========================================
POR QUÉ ELEGIRNOS
=========================================*/

.porque-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:50px;

}

.porque-item{

background:#0d2747;

padding:35px;

border-radius:18px;

transition:.35s;

border:1px solid rgba(255,255,255,.08);

}

.porque-item:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.porque-item i{

font-size:34px;

color:#2F80ED;

margin-bottom:20px;

}

.porque-item h3{

margin-bottom:12px;

}

.porque-item p{

color:#d7e0ea;

line-height:1.7;

}
.recomendada{
    border:3px solid #2F80ED;
    transform:scale(1.04);
    box-shadow:0 20px 45px rgba(47,128,237,.25);
}

.recomendada:hover{
    transform:translateY(-10px) scale(1.04);
}


}

/*==================================================
MÓVILES PEQUEÑOS
==================================================*/

@media (max-width:480px){

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

    h2{
        font-size:1.7rem;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .boton{
        width:100%;
        text-align:center;
    }

}


}

@media (max-width:480px){

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

    h2{
        font-size:1.6rem;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .boton{
        width:100%;
        text-align:center;
    }

}