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

.impacto-hero{

padding:200px 0 80px;

background:
linear-gradient(
rgba(0,31,77,.82),
rgba(0,31,77,.82)
),
url('../img/productos/defensa_dos_crestas/defensa_dos_crestas_1.png');

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

color:#fff;

text-align:center;

}

.impacto-tag{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:#1f6bff;

font-size:14px;

font-weight:700;

margin-bottom:25px;

}

.impacto-hero h1{

max-width:1000px;

margin:0 auto 25px;

font-size:64px;

line-height:1.1;

font-weight:800;

}

.impacto-hero p{

max-width:900px;

margin:0 auto;

font-size:22px;

line-height:1.8;

opacity:.95;

}

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

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

/* ======================================== */
/* STATS */
/* ======================================== */

.stats-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.stat-card{

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

backdrop-filter:blur(10px);

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

border-radius:20px;

padding:25px;

}

.stat-card h3{

color:#fff;

font-size:38px;

margin-bottom:10px;

}

.stat-card p{

color:#fff;

margin:0;

}

/* ======================================== */
/* CONTENT */
/* ======================================== */

.impacto-content{

padding:70px 0;

}

.impacto-image{

width:100%;

border-radius:20px;

display:block;

margin:0 auto 60px;

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

}

.impacto-content h2{

color:#001f4d;

font-size:40px;

margin-bottom:20px;

margin-top:50px;

}

.impacto-content p{

color:#555;

line-height:1.9;

font-size:18px;

}

/* ======================================== */
/* APLICACIONES */
/* ======================================== */

.impacto-grid{

display:grid;

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

gap:25px;

margin:40px 0;

}

.impacto-card{

background:#fff;

border-radius:18px;

padding:30px;

text-align:center;

font-weight:600;

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

transition:.3s;

}

.impacto-card:hover{

transform:translateY(-8px);

}

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

.benefits-grid{

display:grid;

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

gap:30px;

margin:40px 0;

}

.benefit-card{

background:#fff;

border-radius:20px;

padding:35px;

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

}

.benefit-card h3{

color:#001f4d;

margin-bottom:15px;

}

/* ======================================== */
/* GALERÍA */
/* ======================================== */

.gallery-grid{

display:grid;

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

gap:20px;

margin:40px 0;

}

.gallery-grid img{

width:100%;

height:280px;

object-fit:cover;

border-radius:20px;

transition:.3s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.03);

}

/* ======================================== */
/* FAQ */
/* ======================================== */

.faq-item{

background:#fff;

border-radius:18px;

padding:25px;

margin-bottom:20px;

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

}

.faq-item h3{

color:#001f4d;

margin-bottom:10px;

}

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

.cta{

margin-top:80px;

}

/* ======================================== */
/* MOBILE */
/* ======================================== */

@media(max-width:768px){

.impacto-hero{


padding:120px 0 70px;


}

.impacto-hero h1{


font-size:40px;


}

.impacto-hero p{


font-size:18px;


}

.stats-grid{


grid-template-columns:1fr;


}

.impacto-content h2{


font-size:30px;


}

}


/* ======================================== */
/* SEO CONTENT */
/* ======================================== */

.impacto-content h2{

font-size:42px;

font-weight:800;

color:#001f4d;

margin-top:70px;

margin-bottom:25px;

position:relative;

}

.impacto-content h2::after{

content:"";

width:80px;

height:4px;

background:#1f6bff;

display:block;

margin-top:12px;

border-radius:10px;

}

.impacto-content p{

font-size:18px;

line-height:1.9;

color:#555;

margin-bottom:25px;

}

.impacto-content ul{

margin:30px 0;

padding-left:25px;

}

.impacto-content ul li{

font-size:18px;

line-height:1.8;

color:#444;

margin-bottom:15px;

}

.impacto-content ul li::marker{

color:#1f6bff;

}

.impacto-content strong{

color:#001f4d;

font-weight:700;

}

/* ======================================== */
/* SECTION SPACING */
/* ======================================== */

.impacto-content h2 + p{

margin-top:15px;

}

.impacto-content p + p{

margin-top:15px;

}

/* ======================================== */
/* FAQ */
/* ======================================== */

.faq-item{

background:#ffffff;

border-radius:20px;

padding:30px;

margin-bottom:20px;

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

border-left:5px solid #1f6bff;

}

.faq-item h3{

color:#001f4d;

margin-bottom:15px;

font-size:22px;

}

.faq-item p{

margin:0;

}

/* ======================================== */
/* MOBILE */
/* ======================================== */

@media(max-width:768px){

.impacto-content h2{


font-size:30px;


}

.impacto-content p{


font-size:16px;


}

.impacto-content ul li{


font-size:16px;


}

}