/* =========================================
   ESTILOS: PÁGINA DE SERVICIOS
   ========================================= */

/* 1. SECCIÓN TÉCNICA (GRID) */
.tech-grid-section {
    padding: 80px 0;
    background-color: #fff;
}
.section-header { text-align: left; margin-bottom: 50px; }
.section-pretitle { color: #EB0A1E; font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; }
.section-title { font-size: 3rem; font-weight: 800; color: #000; line-height: 1.1; margin: 0; max-width: 800px; }

.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 30px;
}
.tech-card {
    background-color: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.tech-card:hover { transform: translateY(-5px); }
.tech-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.tech-content { padding: 25px; }
.tech-content h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 15px 0; line-height: 1.3; min-height: 3em; }
.tech-content p { font-size: 0.95rem; color: #555; line-height: 1.5; margin: 0; }

/* 2. SECCIÓN GARANTÍA (SPLIT) */
.garantia-section { padding: 80px 0; background-color: #fff; }
.split-container { display: flex; align-items: center; gap: 60px; }
.image-col { flex: 1; }
.image-col img { width: 100%; border-radius: 8px; display: block; }

.text-col { flex: 1; }
.text-col .pretitle { color: #EB0A1E; font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; text-transform: uppercase; }
.text-col h2 { font-size: 3rem; font-weight: 800; margin: 0 0 25px 0; line-height: 1.1; color: #000; }
.text-col p { font-size: 1.1rem; color: #555; line-height: 1.6; margin-bottom: 20px; }

/* 3. BANNERS FULL WIDTH (PROTECCIÓN Y COMONUEVOS) */
.extended-protection-banner, .comonuevos-banner {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}
.banner-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
.banner-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
    background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
.banner-overlay.dark { /* Para el banner de Comonuevos que es más oscuro */
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
}

.banner-content { position: relative; z-index: 3; max-width: 600px; padding-left: 20px; }
.banner-content h2 { font-size: 3.5rem; font-weight: 800; margin: 0 0 20px 0; line-height: 1.1; }
.banner-content p { font-size: 1.2rem; line-height: 1.5; margin-bottom: 20px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.pretitle-white { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; opacity: 0.9; }

/* Botón Blanco */
.btn-blanco {
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.9rem;
    margin-top: 20px;
    transition: all 0.3s ease;
}
.btn-blanco:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
    .split-container { flex-direction: column; }
    .text-col h2 { font-size: 2.5rem; }
}

@media (max-width: 768px) {
    .tech-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 2.2rem; }
    .banner-content h2 { font-size: 2.5rem; }
}