@charset "utf-8";

/* ================= VARIABLES ================= */

:root{
    --color-principal:#e20404;
    --color-secundario:#ff0000;
    --texto:#4d4c4c;
    --blanco:#fff;
    --gris:#f5f5f5;

    --text-sm: clamp(14px,1vw,18px);
    --text: clamp(15px,1.3vw,20px);
    --text-lg: clamp(18px,2vw,28px);
    --h3: clamp(24px,3vw,42px);
    --h2: clamp(35px,4vw,96px);
    --hero: clamp(40px,5vw,160px);
}

/* =========================
   FONTS
========================= */
@font-face{font-family:"font1";src:url("/fuentes/font1.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font2";src:url("/fuentes/font2.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font3";src:url("/fuentes/font3.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font4";src:url("/fuentes/font4.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font5";src:url("/fuentes/font5.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font6";src:url("/fuentes/font6.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font7";src:url("/fuentes/font7.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font8";src:url("/fuentes/font8.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"font9";src:url("/fuentes/font9.ttf") format("truetype");font-display:swap;}





/* ================= RESET ================= */

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

/* ================= CONTAINER ================= */

.container{
width:min(1200px,90%);
margin:auto;
}

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

.header{
background:#fff;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,.08);
height: 70px;
}

.header-flex{
display:flex;
justify-content:space-between;
align-items:center;
padding:clamp(10px,1.5vw,10px) 0;
}

.logo{
height:clamp(40px,3vw,60px);
}

.menu a{
margin-left:clamp(15px,2vw,30px);
text-decoration:none;
color:#000;
font-family:font4;
font-size:clamp(14px,1vw,18px);
transition:.3s;
}

.menu a{
position:relative;
text-decoration:none;
}

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0;
height:2px;
background:var(--color-principal);
transition:0.3s;
}

.menu a:hover{
color:var(--color-principal);
}

.menu a:hover::after{
width:100%;
}

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

.hero{
background:url("../img/baner-persianas.webp") center/cover no-repeat;
color:#fff;
padding:clamp(50px,4vw,120px) 0;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(20px,4vw,50px);
align-items:center;

}

.hero p{
font-size:var(--texto);
font-family:font4;
margin-bottom:clamp(10px,2vw,20px);
line-height: 120%;
text-shadow: -1px 1px #000;
}

#persianas p{
font-size:var(--texto);
font-family:font2;
margin-bottom:clamp(10px,2vw,20px);
line-height: 200%;
}


.hero h1{
font-size:var(--hero);
font-family:font5;
margin-bottom:clamp(10px,2vw,20px);
line-height: 120%;
}

.hero-list{
margin-top:clamp(10px,2vw,20px);
list-style:none;
text-shadow: -1px 1px #000;
}

.hero-list li{
margin-bottom:clamp(6px,1vw,12px);
font-size:clamp(14px,1vw,18px);
font-family: font2;
text-shadow: -1px 1px #000;
}

.hero-form{

padding:clamp(20px,3vw,35px);
border-radius:12px;
width:clamp(260px,70%,420px);
margin-left:auto;
margin-top:-80px; /* ← margen superior */
}

.hero-form h2{
margin-bottom:clamp(10px,2vw,20px);
font-size:clamp(18px,2vw,24px);
font-family: font3;
}

.hero-form input,
.hero-form textarea{
width:100%;
padding:clamp(10px,1.2vw,16px);
margin-bottom:clamp(10px,1.5vw,16px);
border:none;
border-radius:8px;
font-family:font4;
font-size:clamp(14px,1vw,16px);
}

.hero-form button{
width:80%;
padding:clamp(12px,1.2vw,16px);
background:var(--color-principal);
color:#fff;
border:none;
border-radius:8px;
font-size:clamp(14px,1.1vw,18px);
cursor:pointer;
transition:.3s;
}

.hero-form button:hover{
background:var(--color-secundario);
}



/* ================= tipos ================= */



.modulo-beneficios{
padding:70px 20px;
background:#f5f5f5;
}

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

.beneficio{
background:#fff;
padding:35px;
text-align:center;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.beneficio:hover{
transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.beneficio img{
width:100%;
margin-bottom:15px;
}

.beneficio h3{
margin-bottom:10px;
font-size:20px;
font-family: font5;
color: #e20404;
}

.beneficio p{
font-size:15px;
color:#555;
font-family: font3;
}

/* Tablet */

@media (max-width:900px){

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

}

/* Celular */

@media (max-width:600px){

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

}

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

.modulo-horizontal{
padding:80px 20px;
}

.horizontal-grid{
display:grid;
grid-template-columns:40% 60%;
align-items:center;
gap:50px;
}

.col-izquierda img{
width:100%;
border-radius:10px;
}

.col-derecha h2{
font-size:42px;
margin-bottom:20px;
font-family: font5;
color: #a8092b
}

.col-derecha p{
font-size:16px;
line-height:1.6;
margin-bottom:20px;
color:#555;
font-family: font3;
}

.lista-beneficios{
list-style:none;
padding:0;
margin-bottom:25px;
}

.lista-beneficios li{
margin-bottom:10px;
font-size:16px;
}

.boton-modulo{
background:#a8092b;
color:#fff;
padding:12px 25px;
border-radius:8px;
text-decoration:none;
display:inline-block;
font-weight:600;
font-family: font3;
}

.boton-modulo:hover{
background:#870722;
}

/* Tablet */

@media (max-width:900px){

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

}



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

.footer h3{
color: #fff;
margin-bottom:clamp(8px,1vw,14px);
font-family:font3;
font-size:var(--text-lg);
}
.footer p{
color:#fff;
margin-bottom:clamp(8px,1vw,14px);
font-family:font3;
font-size:var(--text);
}

.footer{
background:#666;
color:#ccc;
padding:clamp(30px,5vw,60px) 0;
text-align:center;
}

.footer-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
margin-bottom:clamp(10px,2vw,20px);
}

.footer-logo{
height:clamp(80px,5vw,70px);
}

.copy{
font-size:clamp(12px,.9vw,15px);
opacity:.7;
}

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

.whatsapp{
position:fixed;
bottom:clamp(15px,2vw,25px);
right:clamp(15px,2vw,25px);
z-index:999;
}

.whatsapp img{
width:clamp(45px,5vw,70px);
}

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



@media(max-width:900px){

.hero-grid,
.servicio,
.footer-grid{
grid-template-columns:1fr;
text-align:center;
}

.menu{
display:none;
}

.hero-form{
margin:auto;
width:100%;
max-width:420px;
}

.hero-form button{
width:100%;
}

.hero{
background:url("../img/baner-persianas.webp") center/cover no-repeat;
color:#fff;
padding:clamp(50px,4vw,120px) 0;
}


}