@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ================= VARIABLES DE COLOR ================= */
    --primary-brand: #111111;     
    --secondary-brand: #444444;   
    --accent-brand: #000000;      
    
    /* ================= COLORES ESTRUCTURALES ================= */
    --bg-white: #FFFFFF;
    --bg-light: #F5F5F5; 
    --bg-dark: #1A1A1A; 
    --border-color: #E5E5E5;
    --text-main: #1F1F1F;        
    --text-muted: #555555;
    --text-light: #CCCCCC;
    --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    --wa-green: #25D366; 
    --radius-sm: 6px; 
    --radius-md: 8px;
}

/* ================= RESET Y BASE ================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Inter', sans-serif; 
    color: var(--text-main); 
    background-color: var(--bg-white); 
    line-height: 1.6; 
    overflow-x: hidden; 
}

a { 
    text-decoration: none; 
    transition: all 0.3s ease; 
}

ul { 
    list-style: none; 
}

/* ================= ENCABEZADO Y NAVEGACIÓN ================= */
.header, .encabezado-sitio { 
    background-color: var(--bg-white); 
    border-bottom: 1px solid var(--border-color); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}

.nav-container, .nav-contenedor { 
    max-width: 1300px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    position: relative; 
}

.logo img { 
    height: 45px; 
    object-fit: contain; 
    filter: grayscale(100%); 
}

.nav-menu { 
    display: flex; 
    align-items: center; 
    gap: 35px; 
}

.nav-links, .nav-enlaces { 
    display: flex; 
    gap: 35px; 
    align-items: center; 
}

.nav-links a, .nav-enlaces a { 
    color: var(--text-muted); 
    font-weight: 500; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.nav-links a:hover, 
.nav-links a.active,
.nav-enlaces a:hover,
.nav-enlaces a.active { 
    color: var(--primary-brand); 
    font-weight: 600; 
}

.menu-toggle { 
    display: none; 
    background: none; 
    border: none; 
    font-size: 1.6rem; 
    color: var(--primary-brand); 
    cursor: pointer; 
    transition: color 0.3s; 
}

/* ================= BOTONES CORPORATIVOS ================= */
.btn-cta, .boton-principal { 
    background-color: var(--primary-brand); 
    color: var(--bg-white); 
    padding: 12px 28px; 
    border-radius: var(--radius-sm); 
    font-weight: 600; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    border: 1px solid var(--primary-brand); 
    text-align: center; 
}

.btn-cta:hover, .boton-principal:hover { 
    background-color: transparent; 
    color: var(--primary-brand); 
}

.btn-accent, .boton-acento { 
    background-color: var(--accent-brand); 
    color: var(--bg-white); 
    padding: 16px 36px; 
    font-weight: 600; 
    border-radius: var(--radius-sm); 
    letter-spacing: 0.5px; 
    border: none; 
    display: inline-block; 
    cursor: pointer; 
    transition: background 0.3s ease; 
    text-align: center; 
}

.btn-accent:hover, .boton-acento:hover { 
    background-color: var(--secondary-brand); 
    color: var(--bg-white); 
}

.btn-outline, .boton-contorno { 
    border: 1px solid var(--primary-brand); 
    color: var(--primary-brand); 
    padding: 15px 35px; 
    font-weight: 600; 
    border-radius: var(--radius-sm); 
    display: inline-block; 
    text-align: center; 
}

.btn-outline:hover, .boton-contorno:hover { 
    background: var(--primary-brand); 
    color: var(--bg-white); 
}

.btn-outline-light, .boton-claro { 
    border: 1px solid var(--bg-white); 
    color: var(--bg-white); 
    padding: 15px 35px; 
    font-weight: 600; 
    border-radius: var(--radius-sm); 
    display: inline-block; 
    text-align: center; 
}

.btn-outline-light:hover, .boton-claro:hover { 
    background: var(--bg-white); 
    color: var(--primary-brand); 
}

/* ================= IMÁGENES Y CONTENEDORES ================= */
.img-fluid, .img-fluida { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    border-radius: var(--radius-md); 
    filter: grayscale(100%); 
}

.image-wrapper, .contenedor-imagen { 
    position: relative; 
    overflow: hidden; 
    border-radius: var(--radius-md); 
}

/* ================= HEROS (PORTADAS) ================= */
.hero-adv, .portada-principal { 
    background-color: var(--bg-light); 
    padding: 100px 20px; 
    border-bottom: 1px solid var(--border-color); 
}

.hero-content, .portada-contenido { 
    max-width: 1300px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: center; 
}

.hero-text h1, .portada-texto h1 { 
    font-size: 3.5rem; 
    font-weight: 700; 
    color: var(--primary-brand); 
    line-height: 1.15; 
    margin-bottom: 20px; 
    letter-spacing: -1px; 
}

.hero-text p, .portada-texto p { 
    font-size: 1.1rem; 
    color: var(--text-muted); 
    margin-bottom: 40px; 
    font-weight: 400; 
}

.internal-hero-adv, .portada-interna { 
    background: var(--bg-light); 
    padding: 60px 20px; 
    border-bottom: 1px solid var(--border-color); 
}

.internal-hero-adv h1, .portada-interna h1 { 
    font-size: 2.5rem; 
    font-weight: 700; 
    color: var(--primary-brand); 
    margin-bottom: 10px; 
    letter-spacing: -0.5px; 
}

.breadcrumb-adv, .ruta-paginas { 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    color: var(--text-muted); 
}

.breadcrumb-adv a, .ruta-paginas a { 
    color: var(--primary-brand); 
    font-weight: 600; 
}

/* ================= FRANJA DE ACREDITACIONES ================= */
.banner-strip, .franja-institucional, .franja-logos { 
    background-color: var(--bg-white); 
    padding: 40px 20px; 
    border-bottom: 1px solid var(--border-color); 
    text-align: center; 
}

.banner-strip p, .franja-institucional p, .franja-logos p { 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: var(--text-muted); 
    margin-bottom: 20px; 
    font-weight: 600; 
}

.logos-grid, .rejilla-entidades, .rejilla-logos { 
    display: flex; 
    justify-content: center; 
    gap: 50px; 
    align-items: center; 
    flex-wrap: wrap; 
    opacity: 0.6; 
    filter: grayscale(100%); 
}

.logos-grid img, .rejilla-entidades img, .rejilla-logos img { 
    height: 45px; 
    object-fit: contain; 
}

/* ================= SECCIONES GLOBALES ================= */
.section-adv, .seccion-bloque, .seccion-base { 
    padding: 90px 20px; 
}

.section-bg, .fondo-claro { 
    background: var(--bg-light); 
} 

.section-dark, .fondo-oscuro { 
    background: var(--bg-dark); 
    color: var(--bg-white); 
} 

.section-dark .title-large, .fondo-oscuro .titulo-grande { 
    color: var(--bg-white); 
}

.section-dark .text-lead, 
.section-dark .text-muted,
.fondo-oscuro .texto-destacado, 
.fondo-oscuro .text-muted { 
    color: var(--text-light); 
}

.container-adv, .contenedor-ancho { 
    max-width: 1300px; 
    margin: 0 auto; 
}

.row-split, .fila-dividida { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: flex-start; 
}

.title-badge, .etiqueta-titulo { 
    display: inline-block; 
    padding: 6px 14px; 
    background: var(--bg-white); 
    border: 1px solid var(--border-color); 
    color: var(--text-main); 
    font-weight: 600; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    border-radius: var(--radius-sm); 
    margin-bottom: 20px; 
}

.section-dark .title-badge, 
.section-bg .title-badge,
.fondo-oscuro .etiqueta-titulo, 
.fondo-claro .etiqueta-titulo { 
    background: transparent; 
}

.section-dark .title-badge, .fondo-oscuro .etiqueta-titulo { 
    border-color: var(--text-muted); 
    color: var(--bg-white); 
}

.title-large, .titulo-grande { 
    font-size: 2.2rem; 
    color: var(--primary-brand); 
    font-weight: 700; 
    line-height: 1.2; 
    margin-bottom: 20px; 
    letter-spacing: -0.5px; 
}

.text-lead, .texto-destacado { 
    font-size: 1.05rem; 
    color: var(--text-muted); 
}

/* ================= TARJETAS DE SERVICIOS (UX/UI) ================= */
.showcase-grid, .cuadricula-servicios, .rejilla-tarjetas { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 30px; 
    margin-top: 40px; 
}

.showcase-card, .tarjeta-servicio, .tarjeta-item { 
    background: var(--bg-white); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    transition: all 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}

.showcase-card:hover, .tarjeta-servicio:hover, .tarjeta-item:hover { 
    border-color: var(--primary-brand); 
    box-shadow: var(--shadow-premium); 
    transform: translateY(-5px); 
}

.card-img, .tarjeta-imagen { 
    width: 100%; 
    height: 180px; 
    object-fit: cover; 
    border-bottom: 1px solid var(--border-color); 
    filter: grayscale(100%); 
}

.card-body, .tarjeta-cuerpo { 
    padding: 35px 30px; 
    flex-grow: 1; 
}

.card-tag, .tarjeta-etiqueta { 
    display: inline-block; 
    color: var(--secondary-brand); 
    font-weight: 600; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    margin-bottom: 10px; 
}

.showcase-card h3, .tarjeta-servicio h3, .tarjeta-item h3 { 
    font-size: 1.3rem; 
    color: var(--primary-brand); 
    font-weight: 700; 
    margin-bottom: 15px; 
}

.showcase-card p, .tarjeta-servicio p, .tarjeta-item p { 
    color: var(--text-muted); 
    font-size: 0.95rem; 
}

/* ================= LISTA DINÁMICA (FEATURE LIST) ================= */
.value-feature-list, .lista-atributos { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
    margin-top: 20px; 
}

.value-feature-item, .item-atributo { 
    display: flex; 
    gap: 20px; 
    align-items: flex-start; 
    padding: 25px; 
    background: var(--bg-white); 
    border-radius: var(--radius-md); 
    border: 1px solid var(--border-color); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
    transition: all 0.3s ease; 
}

.value-feature-item:hover, .item-atributo:hover { 
    border-color: var(--primary-brand); 
    box-shadow: var(--shadow-premium); 
    transform: translateX(10px); 
}

.value-icon, .icono-atributo { 
    flex-shrink: 0; 
    width: 50px; 
    height: 50px; 
    background: var(--bg-light); 
    color: var(--primary-brand); 
    border-radius: var(--radius-sm); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.5rem; 
    font-weight: 700; 
}

.value-text h4, .texto-atributo h4 { 
    font-size: 1.15rem; 
    color: var(--primary-brand); 
    margin-bottom: 8px; 
    font-weight: 700; 
}

.value-text p, .texto-atributo p { 
    font-size: 0.95rem; 
    color: var(--text-muted); 
    line-height: 1.6; 
}

/* ================= FORMATOS ANTERIORES CONSERVADOS (Intactos) ================= */
.principles-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 20px; 
    margin-top: 10px; 
}

.principle-card { 
    border-left: 3px solid var(--primary-brand); 
    padding: 25px 30px; 
    background: var(--bg-light); 
    border-radius: 0 var(--radius-md) var(--radius-md) 0; 
}

.principle-card h4 { 
    font-size: 1.1rem; 
    color: var(--primary-brand); 
    margin-bottom: 10px; 
    font-weight: 600; 
}

.principle-card p { 
    font-size: 0.9rem; 
    color: var(--text-muted); 
}

.value-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 30px; 
    margin-top: 40px; 
}

.value-card { 
    background: var(--bg-white); 
    padding: 40px 30px; 
    border-radius: var(--radius-md); 
    border: 1px solid var(--border-color); 
    border-top: 4px solid var(--primary-brand); 
    box-shadow: var(--shadow-premium); 
    transition: transform 0.3s ease; 
}

.value-card:hover { 
    transform: translateY(-5px); 
}

.value-card h4 { 
    font-size: 1.15rem; 
    color: var(--primary-brand); 
    margin-bottom: 15px; 
    font-weight: 700; 
    line-height: 1.3; 
}

.value-card p { 
    font-size: 0.95rem; 
    color: var(--text-muted); 
}

.metrics-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 30px; 
    border-top: 1px solid var(--border-color); 
    padding-top: 40px; 
    margin-top: 40px; 
}

.metric-box h3 { 
    font-size: 2.5rem; 
    color: var(--primary-brand); 
    font-weight: 700; 
    line-height: 1; 
    margin-bottom: 5px; 
}

.section-dark .metric-box h3 { 
    color: var(--bg-white); 
}

.metric-box p { 
    font-size: 0.85rem; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    font-weight: 500; 
}

.process-flow { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 30px; 
    margin-top: 50px; 
}

.process-step { 
    border-top: 2px solid var(--border-color); 
    padding-top: 20px; 
    position: relative; 
}

.step-huge-num { 
    font-size: 1.5rem; 
    font-weight: 700; 
    color: var(--secondary-brand); 
    margin-bottom: 15px; 
}

.process-step h4 { 
    font-size: 1.1rem; 
    color: var(--primary-brand); 
    font-weight: 600; 
    margin-bottom: 10px; 
}

.process-step p { 
    font-size: 0.9rem; 
    color: var(--text-muted); 
}

/* ================= TESTIMONIOS ================= */
.testimonial-grid, .rejilla-experiencias, .rejilla-testimonios { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    margin-top: 50px; 
}

.testimonial-card, .tarjeta-experiencia, .tarjeta-testimonio { 
    background: var(--bg-white); 
    border: 1px solid var(--border-color); 
    padding: 40px 30px; 
    border-radius: var(--radius-md); 
    position: relative; 
}

.testimonial-card::before, .tarjeta-experiencia::before, .tarjeta-testimonio::before { 
    content: '\201C'; 
    font-size: 4rem; 
    color: var(--bg-light); 
    position: absolute; 
    top: 10px; 
    left: 20px; 
    font-family: serif; 
    line-height: 1; 
}

.testimonial-text, .texto-experiencia, .texto-testimonio { 
    font-size: 1rem; 
    color: var(--text-muted); 
    font-style: italic; 
    margin-bottom: 25px; 
    position: relative; 
    z-index: 2; 
    line-height: 1.7; 
}

.testimonial-author, .autor-experiencia, .autor-testimonio { 
    font-weight: 700; 
    color: var(--primary-brand); 
    font-size: 0.95rem; 
}

.testimonial-role, .cargo-experiencia, .cargo-testimonio { 
    font-size: 0.85rem; 
    color: var(--text-muted); 
}

/* ================= ACORDEÓN DE PREGUNTAS FRECUENTES ================= */
.faq-container, .contenedor-faq { 
    max-width: 900px; 
    margin: 40px auto 0; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.faq-item, .item-faq { 
    background: var(--bg-white); 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    overflow: hidden; 
    transition: all 0.3s ease; 
}

.faq-item summary, .item-faq summary { 
    padding: 25px 30px; 
    font-weight: 600; 
    font-size: 1.05rem; 
    color: var(--primary-brand); 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    list-style: none; 
    user-select: none; 
}

.faq-item summary::-webkit-details-marker, .item-faq summary::-webkit-details-marker { 
    display: none; 
}

.faq-item summary::after, .item-faq summary::after { 
    content: '\f067'; 
    font-family: 'Font Awesome 6 Free'; 
    font-weight: 900; 
    color: var(--secondary-brand); 
    transition: transform 0.3s ease; 
}

.faq-item[open] summary::after, .item-faq[open] summary::after { 
    transform: rotate(45deg); 
}

.faq-item[open], .item-faq[open] { 
    border-color: var(--primary-brand); 
    box-shadow: var(--shadow-premium); 
}

.faq-content, .contenido-faq { 
    padding: 0 30px 25px; 
    color: var(--text-muted); 
    font-size: 0.95rem; 
    line-height: 1.7; 
    border-top: 1px solid transparent; 
}

/* ================= LLAMADAS A LA ACCIÓN (CTA 1) ================= */
.cta-section, .bloque-contacto, .bloque-informativo { 
    background-color: var(--primary-brand); 
    color: var(--bg-white); 
    padding: 80px 20px; 
    text-align: center; 
}

.cta-section h2, .bloque-contacto h2, .bloque-informativo h2 { 
    font-size: 2.2rem; 
    font-weight: 700; 
    margin-bottom: 20px; 
    letter-spacing: -0.5px; 
}

.cta-section p, .bloque-contacto p, .bloque-informativo p { 
    font-size: 1.1rem; 
    color: var(--text-light); 
    margin-bottom: 35px; 
    max-width: 600px; 
    margin-inline: auto; 
}

/* ================= FORMULARIO ANTIGUO HORIZONTAL (No borrar) ================= */
.cta-form { 
    display: flex; 
    gap: 15px; 
    max-width: 550px; 
    margin: 0 auto; 
    justify-content: center; 
}

.cta-input { 
    flex: 1; 
    padding: 15px 20px; 
    border: none; 
    border-radius: var(--radius-sm); 
    font-size: 0.95rem; 
    font-family: inherit; 
    outline: none; 
}

.cta-input:focus { 
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); 
}

/* ================= FORMULARIO VERTICAL DE CONTACTO (CTA 2) ================= */
.contact-section-wrapper, .contenedor-contacto { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    align-items: center; 
    max-width: 1100px; 
    margin: 0 auto; 
}

.contact-form-vertical, .formulario-contacto { 
    background: var(--bg-white); 
    padding: 40px; 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow-premium); 
    border: 1px solid var(--border-color); 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.contact-form-vertical label, .formulario-contacto label { 
    font-size: 0.85rem; 
    font-weight: 600; 
    color: var(--text-muted); 
    margin-bottom: 5px; 
    display: block; 
}

.form-input-vert, .entrada-form { 
    width: 100%; 
    padding: 15px 20px; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-sm); 
    font-size: 0.95rem; 
    font-family: inherit; 
    background: var(--bg-light); 
    transition: all 0.3s ease; 
}

.form-input-vert:focus, .entrada-form:focus { 
    outline: none; 
    border-color: var(--primary-brand); 
    background: var(--bg-white); 
}

/* ================= FORMULARIO VALIDADOR EXPRESS ================= */
.validator-express, .validador-caja, .caja-validador { 
    background: var(--bg-white); 
    border: 1px solid var(--border-color); 
    padding: 40px; 
    border-radius: var(--radius-md); 
    margin-top: 30px; 
    box-shadow: var(--shadow-premium); 
}

.search-group-adv, .grupo-busqueda, .grupo-buscador { 
    display: flex; 
    gap: 15px; 
}

.search-input-adv, .entrada-busqueda, .entrada-buscador { 
    flex: 1; 
    padding: 15px 20px; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-sm); 
    font-size: 0.95rem; 
    font-family: inherit; 
    background: var(--bg-light); 
    transition: border 0.3s; 
}

.search-input-adv:focus, .entrada-busqueda:focus, .entrada-buscador:focus { 
    outline: none; 
    border-color: var(--primary-brand); 
    background: var(--bg-white); 
}

/* ================= FOOTER CORPORATIVO ================= */
.footer-adv, .pie-pagina-sitio { 
    background-color: var(--bg-dark); 
    color: var(--text-light); 
    padding: 70px 20px 30px; 
    font-size: 0.9rem; 
    border-top: 4px solid var(--primary-brand); 
}

.footer-wrapper, .pie-contenedor { 
    max-width: 1300px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 1.5fr; 
    gap: 50px; 
    padding-bottom: 40px; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
}

.footer-brand p, .marca-pie p { 
    color: var(--text-muted); 
    margin-top: 15px; 
    max-width: 320px; 
    font-size: 0.85rem; 
}

.footer-title, .titulo-pie { 
    color: var(--bg-white); 
    font-weight: 600; 
    font-size: 0.95rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    margin-bottom: 20px; 
}

.footer-links li, .enlaces-pie li { 
    margin-bottom: 10px; 
}

.footer-links a, .enlaces-pie a { 
    color: var(--text-muted); 
    font-weight: 400; 
    font-size: 0.85rem; 
}

.footer-links a:hover, .enlaces-pie a:hover { 
    color: var(--bg-white); 
}

.footer-info p, .info-pie p { 
    margin-bottom: 10px; 
    color: var(--text-muted); 
    font-size: 0.85rem; 
}

.footer-info strong, .info-pie strong { 
    color: var(--text-light); 
}

.footer-copyright, .copyright-pie { 
    text-align: center; 
    padding-top: 25px; 
    color: var(--text-muted); 
    font-size: 0.8rem; 
}

/* ================= WHATSAPP FLOTANTE ================= */
.wa-sticky, .flotante-wsp { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    background-color: var(--wa-green); 
    color: white; 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    z-index: 999; 
    transition: all 0.3s ease; 
}

.wa-sticky i, .flotante-wsp i { 
    font-size: 2rem; 
    margin: 0; 
    padding: 0; 
}

.wa-sticky:hover, .flotante-wsp:hover { 
    transform: scale(1.08); 
    box-shadow: 0 6px 20px rgba(0,0,0,0.3); 
}

/* ================= RESPONSIVE DESIGN (TABLETS Y MÓVILES) ================= */

@media (max-width: 992px) {
    .nav-menu { 
        gap: 20px; 
    }
    .nav-links, .nav-enlaces { 
        gap: 15px; 
    }
    .hero-content, 
    .portada-contenido,
    .row-split, 
    .fila-dividida,
    .contact-section-wrapper,
    .contenedor-contacto { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
    .hero-text h1, .portada-texto h1 { 
        font-size: 3rem; 
    }
    .hero-image, 
    .portada-imagen,
    .image-wrapper, 
    .contenedor-imagen { 
        margin-top: 10px; 
    }
    .footer-wrapper, .pie-contenedor { 
        grid-template-columns: 1fr 1fr; 
    }
}

@media (max-width: 850px) {
    .menu-toggle { 
        display: block; 
    }
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--bg-white);
        flex-direction: column;
        padding: 20px 0 30px;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        gap: 15px;
    }
    .nav-menu.active { 
        display: flex; 
    }
    .nav-links, .nav-enlaces { 
        flex-direction: column; 
        width: 100%; 
        gap: 0; 
    }
    .nav-links a, .nav-enlaces a { 
        display: block; 
        padding: 15px 20px; 
        text-align: center; 
        border-bottom: 1px solid var(--bg-light); 
        font-size: 0.95rem; 
    }
    .nav-menu .btn-cta, .nav-menu .boton-principal { 
        width: calc(100% - 40px); 
        margin: 10px auto 0; 
        display: block; 
        text-align: center; 
    }
    
    .hero-text h1, .portada-texto h1 { 
        font-size: 2.2rem; 
    }
    .title-large, 
    .titulo-grande,
    .cta-section h2, 
    .bloque-contacto h2,
    .bloque-informativo h2 { 
        font-size: 1.8rem; 
    }
    .section-adv, 
    .seccion-bloque,
    .seccion-base,
    .hero-adv, 
    .portada-principal,
    .cta-section, 
    .bloque-contacto,
    .bloque-informativo,
    .footer-adv,
    .pie-pagina-sitio { 
        padding: 60px 20px; 
    }
    
    .search-group-adv, 
    .grupo-busqueda,
    .grupo-buscador,
    .hero-text div, 
    .portada-texto div,
    .contact-form-vertical,
    .formulario-contacto { 
        flex-direction: column; 
    }
    
    .btn-cta, 
    .boton-principal,
    .btn-accent, 
    .boton-acento,
    .btn-outline, 
    .boton-contorno,
    .btn-outline-light, 
    .boton-claro { 
        width: 100%; 
    }
    
    .value-feature-item, .item-atributo { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
    }
    
    .footer-wrapper, .pie-contenedor { 
        grid-template-columns: 1fr; 
        text-align: center; 
        gap: 35px; 
    }
    
    .footer-brand p, .marca-pie p { 
        margin: 15px auto 0; 
    }
    
    .logos-grid, .rejilla-entidades, .rejilla-logos { 
        gap: 30px; 
    }
    
    .cta-form { 
        flex-direction: column; 
    }
    
    .cta-form .btn-accent { 
        width: 100%; 
    }
}