/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1764621950
Updated: 2025-12-01 20:45:50

*/

/* ======================================================= */
/* FIX 1: CABECERA Y MENÚ (CRÍTICO) */
/* ======================================================= */

/* Asegurar que la cabecera y el menú tengan colores */
.site-header { background-color: white !important; }
.main-navigation { background-color: #2e3b4e !important; }
.main-navigation a { color: white !important; border-bottom: none !important; }
.main-navigation .main-nav ul li a:hover {
    background-color: #5cb85c !important; color: #ffffff !important;
}
button.menu-toggle, button.menu-toggle:hover { color: #ffffff !important; }


/* ======================================================= */
/* FIX 2: OCULTAR TÍTULOS DE PÁGINAS (CRÍTICO) */
/* ======================================================= */

/* Ocultar el título grande de la página (Ej: "Contacto", "Servicios") */
.page .entry-header { 
    display: none !important; 
}


/* ======================================================= */
/* FIX 3: OCULTAR ATRIBUCIÓN GENERATEPRESS Y PIE DE PÁGINA CLARO */
/* ======================================================= */

/* Ocultar la atribución */
.site-info, .footer-bar { 
    display: none !important;
}

/* Arreglar el color del texto y enlaces del Footer (Fondo oscuro) */
.main-footer-plonyvel { 
    color: #2e3b4e !important;
}
.footer-columna a { 
    color: #2e3b4e !important;
}
.footer-columna a:hover { 
    color: #5cb85c !important;
}

/* ======================================================= */
/* 01. FONDO-GLOBAL: FONDO DE LADRILLO Y CONFIGURACIÓN GLOBAL */
/* ======================================================= */

/* FONDO GLOBAL DEL SITIO (LADRILLO REPETITIVO) */
body {
    /* Asegúrate de que esta URL sea correcta */
    background-image: url('https://emcorp.plonyvel.es//wp-content/uploads/2025/12/textura-ladrillo.webp'); 
    background-repeat: repeat; 
    background-color: #f0f0f0; 
}

/* BOTÓN FLOTANTE DE WHATSAPP */
.whatsapp-flotante {
    position: fixed; bottom: 25px; right: 20px; z-index: 9999; 
    background-color: #25d366; color: white !important; 
    padding: 10px 15px; border-radius: 30px; 
    font-size: 16px; font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); text-decoration: none;
    transition: background-color 0.3s ease;
}
@media (min-width: 1024px) {
    .whatsapp-flotante { display: none !important; }
}
.whatsapp-flotante:hover { 
    background-color: #128c7e; 
    transform: scale(1.05); 
}


#scroll-top-plonyvel:hover { 
    background-color: #5cb85c; 
    opacity: 1; 
}

/* ======================================================= */
/* 02. HERO-HOME: SECCIÓN HERO (ENCABEZADO PRINCIPAL) */
/* ======================================================= */

.hero-plonyvel {
    position: relative; min-height: 450px; display: flex;
    align-items: center; justify-content: center; text-align: center;
    padding: 60px 20px; background-color: #2e3b4e; 
    /* URL de la imagen principal */
    background-image: url("https://emcorp.plonyvel.es//wp-content/uploads/2025/12/maqueta-casa-carpinteria-exterior.webp");
    background-size: cover; background-position: center center; background-repeat: no-repeat;
}

/* Overlay oscuro para que el texto resalte */
.hero-plonyvel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); z-index: 1;
}

.hero-contenido { 
    position: relative; z-index: 2; max-width: 800px; color: white; 
}
.hero-contenido h1 { 
    font-size: 2.8em; margin-bottom: 15px; line-height: 1.2; color: white; 
}
.hero-contenido p { 
    font-size: 1.2em; margin-bottom: 30px; font-weight: 300; opacity: 0.9; 
}
.hero-ctas { 
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; 
}

/* Botón Principal (Verde) */
.cta-principal-verde { 
    padding: 15px 30px; font-weight: bold; border-radius: 4px; text-decoration: none;
    background-color: #5cb85c; color: white !important; border: 2px solid transparent; transition: 0.3s;
}
.cta-principal-verde:hover { 
    background-color: #4cae4c; 
}

/* Botón Secundario (Texto/Borde Blanco) */
.cta-secundario-texto {
    padding: 15px 30px; font-weight: bold; border-radius: 4px; text-decoration: none;
    background-color: transparent; color: white !important; border: 2px solid white; opacity: 0.8; transition: 0.3s;
}
.cta-secundario-texto:hover { 
    opacity: 1; 
    background-color: rgba(255, 255, 255, 0.1); 
}

/* Responsivo para Móvil */
@media (max-width: 768px) {
    .hero-plonyvel { min-height: 400px; padding: 40px 15px; }
    .hero-contenido h1 { font-size: 2em; }
    .hero-ctas { flex-direction: column; }
}

/* ======================================================= */
/* 03. SERV-CARDS: SECCIÓN TARJETAS DE SERVICIOS (HOME) */
/* ======================================================= */

.plonyvel-servicios-tarjetas {
    padding: 60px 20px; max-width: 1200px; margin: 0 auto; text-align: center;
}
.plonyvel-servicios-tarjetas h2 { 
    font-size: 2em; color: #333; margin-bottom: 40px; 
}
.tarjetas-contenedor { 
    display: flex; gap: 25px; justify-content: center; 
}
.tarjeta-servicio-item {
    flex: 1; max-width: 380px; background-color: white; 
    padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; text-align: left;
}
.tarjeta-servicio-item:hover {
    transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.tarjeta-servicio-item h4 {
    color: #2e3b4e; font-size: 1.3em; margin-top: 0;
    border-bottom: 2px solid #5cb85c; padding-bottom: 10px; margin-bottom: 15px;
}
.cta-tarjeta {
    display: block; width: 100%; margin-top: 20px; background-color: #5cb85c;
    color: white !important; padding: 10px 0; text-align: center;
    text-decoration: none; border-radius: 4px; font-weight: bold;
    font-size: 0.9em; transition: background-color 0.3s;
}
.cta-tarjeta:hover { 
    background-color: #4cae4c; 
}

/* Responsivo para Móvil */
@media (max-width: 900px) {
    .tarjetas-contenedor { 
        flex-direction: column; 
    }
    .tarjeta-servicio-item { 
        max-width: 100%; 
    }
}

/* ======================================================= */
/* 04. CONTACTO-PAGE: PÁGINA DE CONTACTO (USANDO BLOQUES DE COLUMNAS) */
/* ======================================================= */

/* Estilos de Contenedor General (Si es necesario, si no, se usa el espaciado de Gutenberg) */
.wp-block-columns {
    max-width: 1200px; margin: 40px auto; padding: 0 20px;
    align-items: flex-start;
}

/* Columna del Formulario (fondo claro) */
.columna-formulario {
    padding: 30px;
    background-color: white; 
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.columna-formulario h2 {
    color: #2e3b4e; border-bottom: 2px solid #5cb85c; 
    padding-bottom: 10px; margin-bottom: 20px;
}
.columna-formulario label {
    font-weight: bold; color: #444;
}

/* Columna Datos de Contacto (fondo azul oscuro) */
.columna-datos {
    padding: 30px;
    background-color: #2e3b4e; 
    color: white; 
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.columna-datos h2 {
    color: #5cb85c !important; /* Título principal verde */
    border-bottom: 2px solid white; 
    padding-bottom: 10px; margin-bottom: 20px;
}
.columna-datos h3 {
    color: white; margin-top: 20px;
}
.columna-datos a {
    color: #5cb85c !important; /* Links en verde */
    text-decoration: underline;
}

/* Estilos de Iconos */
.columna-datos .dato-item h3 i {
    margin-right: 10px;
}

/* Responsivo: Gutenberg ya maneja la transición a columna única, 
pero aseguramos los paddings */
@media (max-width: 900px) {
    .columna-formulario,
    .columna-datos {
        padding: 20px;
    }
}

/* ======================================================= */
/* 04. CONTACTO (CSS Aislado y Diseño Horizontal/Paralelo) */
/* ======================================================= */

/* 1. Estilos del Contenedor Principal (Centrado y Espaciado) */
.plonyvel-contacto-page {
    max-width: 1000px; /* Ancho máximo para el módulo de contacto */
    margin: 60px auto; /* Espaciado vertical y centrado */
    padding: 0 20px;
}

.titulo-contacto {
    text-align: center;
    margin-bottom: 5px;
}

.subtitulo-contacto {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1em;
    color: #555;
}

/* ----------------------------------------------------------- */
/* 2. CLAVE: DISPOSICIÓN HORIZONTAL Y PARALELA (ESCRITORIO) */
/* ----------------------------------------------------------- */
.contacto-layout-horizontal {
    display: flex; /* Habilita el modo horizontal */
    gap: 40px;     /* Espacio entre las dos columnas */
    align-items: flex-start; /* Alinea las columnas por arriba */
    background-color: #f9f9f9; /* Un fondo suave para diferenciar el módulo */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Las dos columnas deben ocupar espacio equivalente */
.contacto-columna-info, 
.contacto-columna-formulario {
    flex: 1; /* Ocupa el mismo ancho que el otro elemento (50% cada uno) */
}

/* ----------------------------------------------------------- */
/* 3. ADAPTACIÓN A MÓVIL (Pone las columnas verticalmente) */
/* ----------------------------------------------------------- */
@media (max-width: 768px) {
    .contacto-layout-horizontal {
        flex-direction: column; /* Cambia la disposición a vertical */
        gap: 30px; /* Ajusta el espacio vertical entre los dos bloques */
    }
}


/* ----------------------------------------------------------- */
/* 4. Estilos de la Columna de Información */
/* ----------------------------------------------------------- */
.contacto-columna-info h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #2a2a2a;
}

.info-item {
    display: flex; /* Para alinear el icono y el texto */
    margin-bottom: 15px;
    align-items: center;
}

.info-icono {
    font-size: 20px;
    margin-right: 15px;
    line-height: 1;
}

.info-item p {
    margin: 0;
    font-size: 1em;
    color: #444;
}

.info-item a {
    color: #444; /* Asegura que los enlaces de email/teléfono no sean azules */
    text-decoration: none;
}

.info-item a:hover {
    text-decoration: underline;
}

/* ======================================================= */
/* 04. CONTACTO (CSS Aislado: Diseño Original FONDO OSCURO) */
/* ======================================================= */

/* 1. Estilos del Contenedor Principal (Fondo Oscuro y Texto Claro) */
.plonyvel-contacto-page {
    max-width: 1000px;
    margin: 60px auto;
    padding: 40px 20px; /* Padding interno para el fondo oscuro */
    
    /* FONDO Y TEXTO OSCURO/CLARO */
    background-color: #222222; /* Fondo Gris Oscuro / Negro Suave */
    color: #f0f0f0; /* Texto base muy claro */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
}

.titulo-contacto {
    text-align: center;
    color: #ffffff; /* Título en Blanco Puro */
    margin-bottom: 5px;
}

.subtitulo-contacto {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1em;
    color: #cccccc; /* Subtítulo en Gris Claro */
}

/* ----------------------------------------------------------- */
/* 2. CLAVE: DISPOSICIÓN INVERTIDA (Formulario a la Izquierda) */
/* ----------------------------------------------------------- */
.contacto-layout-horizontal {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding-top: 20px;
    
    /* INVERSIÓN: Pone el Formulario (que es el segundo en el HTML) a la izquierda */
    flex-direction: row-reverse; 
}

/* Las dos columnas deben ocupar espacio equivalente */
.contacto-columna-info, 
.contacto-columna-formulario {
    flex: 1; 
}

/* ----------------------------------------------------------- */
/* 3. Estilos de la Columna de Información (Ajuste de Colores) */
/* ----------------------------------------------------------- */
.contacto-columna-info h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #ffffff; /* Títulos en blanco */
    border-bottom: 1px solid #444; /* Separador sutil */
    padding-bottom: 10px;
}

.info-item {
    display: flex; 
    margin-bottom: 15px;
    align-items: center;
}

.info-icono {
    font-size: 20px;
    margin-right: 15px;
    line-height: 1;
}

.info-item p {
    margin: 0;
    font-size: 1em;
    color: #f0f0f0; /* Texto de la información claro */
}

.info-item a {
    color: #f0f0f0; /* Enlaces en el color claro del texto */
    text-decoration: none;
    font-weight: bold;
}

.info-item a:hover {
    color: #8cffff; /* Un color de énfasis claro al pasar el ratón */
}


/* ----------------------------------------------------------- */
/* 4. ADAPTACIÓN A MÓVIL (Sigue siendo vertical en pantallas pequeñas) */
/* ----------------------------------------------------------- */
@media (max-width: 768px) {
    .plonyvel-contacto-page {
        padding: 30px 15px; 
    }
    .contacto-layout-horizontal {
        flex-direction: column; /* Cambia a vertical en móvil */
        gap: 30px; 
    }
    /* Si el formulario es lo primero en móvil, queda como el diseño moderno estándar */
}

/* ----------------------------------------------------------- */
/* 5. Estilos de la Columna de Formulario */
/* ----------------------------------------------------------- */
.contacto-columna-formulario h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #2a2a2a;
}
/* Estilos para el contenedor del shortcode del formulario (si necesita espacio adicional) */
.contenedor-shortcode-formulario {
    padding-top: 5px;
}

/* ======================================================= */
/* 05. PROYECTOS-HOME: SECCIÓN PORTAFOLIO DE PROYECTOS (HOME) */
/* ======================================================= */

.plonyvel-portafolio {
    padding: 80px 20px 60px; max-width: 1200px; margin: 0 auto; text-align: center;
}
.plonyvel-portafolio h2 { 
    font-size: 2.2em; color: #2e3b4e; margin-bottom: 5px; 
}
.portafolio-subtitulo { 
    font-size: 1.1em; color: #666; margin-bottom: 40px; 
}
.proyectos-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; margin-bottom: 40px;
}
.proyecto-card {
    display: block; overflow: hidden; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-decoration: none;
    background-color: white; transition: box-shadow 0.3s, transform 0.3s;
}
.proyecto-card:hover { 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
    transform: translateY(-5px); 
}
.proyecto-card img {
    width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s;
}
.proyecto-card:hover img { 
    transform: scale(1.05); 
}
.proyecto-info { 
    padding: 15px; text-align: left; 
}
.proyecto-info h3 { 
    color: #2e3b4e; font-size: 1.1em; margin: 0; 
}
.proyecto-info span { 
    color: #5cb85c; font-size: 0.9em; font-weight: bold; 
}
.cta-ver-portafolio {
    display: inline-block; padding: 10px 25px; background-color: #2e3b4e;
    color: white !important; border-radius: 4px; font-weight: bold;
    text-decoration: none; transition: background-color 0.3s;
}
.cta-ver-portafolio:hover { 
    background-color: #5cb85c; 
}

/* ======================================================= */
/* 06. TESTIMONIOS-HOME: SECCIÓN TESTIMONIOS Y CONFIANZA */
/* ======================================================= */

.plonyvel-testimonios {
    background-color: #eef4f7; /* Fondo gris muy claro para diferenciar */
    padding: 80px 20px;
    text-align: center;
}
.testimonios-contenedor { 
    max-width: 1200px; margin: 0 auto; 
}
.plonyvel-testimonios h2 { 
    font-size: 2em; color: #2e3b4e; margin-bottom: 50px; 
}

.grid-testimonios {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; margin-bottom: 40px;
}
.testimonio-card {
    background-color: white; padding: 30px; border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); text-align: left;
    border-top: 5px solid #5cb85c; /* Borde superior verde */
}
.testimonio-card p { 
    font-style: italic; color: #444; line-height: 1.6; margin-bottom: 20px; 
}
.testimonio-card .autor { 
    display: block; font-weight: bold; color: #2e3b4e; font-size: 1.1em; 
}
.testimonio-card .ubicacion { 
    display: block; color: #777; font-size: 0.9em; 
}

/* Botón CTA de confianza */
.cta-confianza-verde {
    display: inline-block; padding: 15px 35px; background-color: #5cb85c;
    color: white !important; border-radius: 4px; font-weight: bold;
    text-decoration: none; font-size: 1.1em; transition: background-color 0.3s;
}
.cta-confianza-verde:hover { 
    background-color: #4cae4c; 
}


/* FIX 04.02 V6: Inversión de Colores (Fondo Verde Fijo) */

.contenedor-boton-whatsapp .cta-secundario-texto {
    /* 1. ESTADO FIJO (DEFAULT): FONDO VERDE, TEXTO BLANCO */
    
    /* Fondo: Verde Corporativo */
    background-color: #5cb85c !important; 
    
    /* Texto: Blanco */
    color: white !important; 
    
    /* Borde: Sólido Verde Corporativo (opcional, pero ayuda a la coherencia) */
    border: 2px solid #5cb85c !important; 
    
    /* Aseguramos que el botón se vea como tal */
    text-decoration: none !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

/* FIX: Estilo Hover (al pasar el ratón: Fondo Transparente) */
.contenedor-boton-whatsapp .cta-secundario-texto:hover {
    /* Fondo: Transparente */
    background-color: transparent !important; 
    
    /* Texto: Verde Corporativo (para que se distinga sobre el fondo de ladrillos) */
    color: #5cb85c !important; 
}

/* ===================================== */
/* BLOQUE 07: PROYECTOS / PORTAFOLIO CSS */
/* ===================================== */

/* Contenedor Principal de cada Proyecto (Separación vertical) */
.proyecto-item {
    padding: 60px 0;
    margin: 40px auto;
    max-width: 1200px;
    border-bottom: 1px solid #eee; /* Línea de separación sutil entre proyectos */
}
.proyecto-item:last-child {
    border-bottom: none; /* Elimina la línea en el último proyecto */
}

/* Contenido del Proyecto: Estructura de Flexbox (dos columnas) */
.proyecto-contenido {
    display: flex;
    gap: 40px; /* Espacio entre las columnas */
    align-items: center; /* Centra verticalmente texto e imagen */
}

/* Columna de Imagen */
.proyecto-imagen {
    flex: 1; /* Ocupa 50% del espacio */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* Asegura que la imagen no sobresalga del borde redondeado */
}
.proyecto-imagen img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.proyecto-imagen img:hover {
    transform: scale(1.03); /* Efecto al pasar el ratón */
}

/* Columna de Texto / Información */
.proyecto-info {
    flex: 1; /* Ocupa 50% del espacio */
    padding: 0 20px;
}
.proyecto-info h2 {
    color: #2e3b4e; /* Azul Oscuro Corporativo */
    margin-top: 0;
    font-size: 2em;
}
.proyecto-info .proyecto-tipo {
    color: #5cb85c; /* Verde Corporativo */
    font-style: italic;
    font-weight: 600;
    margin-bottom: 20px;
}

/* --- ORDEN INVERSO (Alternancia: Imagen Derecha) --- */
.proyecto-item.proyecto-inverso .proyecto-contenido {
    flex-direction: row-reverse; /* Invierte el orden de las columnas */
}

/* --- RESPONSIVIDAD: Teléfonos y Tabletas Pequeñas --- */
@media (max-width: 768px) {
    .proyecto-contenido {
        flex-direction: column; /* Apila las columnas verticalmente */
        gap: 20px;
    }
    
    /* En vista móvil, el orden inverso ya no se aplica, todo se apila normalmente */
    .proyecto-item.proyecto-inverso .proyecto-contenido {
        flex-direction: column;
    }

    .proyecto-item {
        padding: 30px 0;
        margin: 20px auto;
    }
}

/* ==================================================== */
/* FIX V22: SOLUCIÓN FINAL (V17 con Z-Index y Sombra Verde) */
/* ==================================================== */

/* --- BLOQUE 06.01: HERO SERVICIOS (Fondo, Altura, Z-Index Corregido) --- */

.hero-servicios {
    height: 450px; /* Altura original (distribución correcta) */
    min-height: 350px;
    position: relative; 
    padding: 60px 20px;
    
    background-color: #2e3b4e;
    background-image: url("https://emcorp.plonyvel.es//wp-content/uploads/2025/12/maqueta-casa-carpinteria-exterior.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 10;
}

/* 1. CORRECCIÓN DEFINITIVA DEL VELO (Z-INDEX BAJO y POSITION) */
.hero-servicios::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.18);
    z-index: 1; /* ¡Z-INDEX BAJO! El velo va detrás. */
}

/* 2. Contenido de Texto (Z-INDEX ALTO) */
.hero-contenido-servicios {

    max-width: 900px;
    text-align: center;
    z-index: 5; /* Z-INDEX ALTO! El texto va encima del velo (1). */
    margin: 0 auto;
    padding-top: 50px;
}
.hero-servicios h1,
.hero-servicios p,
.hero-servicios .texto-central-hero {
    /* Ajuste de sombra de texto para asegurar visibilidad */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); 
}

/* 3. Estructura de Botones (3 Columnas, Pegadas Abajo) */
.hero-ctas-servicios.nuevo-flex-fix {
    position: absolute; 
    bottom: 30px; 
    left: 0; right: 0;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    z-index: 5; /* Z-INDEX ALTO! */
    
    display: flex;
    justify-content: space-between; 
    align-items: center;
}
/* Estilos de columnas, responsividad, etc. (El resto del bloque 06.01, se queda como estaba) */

.cta-columna-izq, .cta-columna-der { flex: 0 1 200px; text-align: left; }
.cta-columna-der { text-align: right; }
.cta-columna-central { flex: 1; text-align: center; }

@media (max-width: 768px) {
    .hero-ctas-servicios.nuevo-flex-fix { flex-direction: column; gap: 15px; }
    .cta-columna-izq, .cta-columna-der, .cta-columna-central { text-align: center; width: 100%; }
}


/* --- BLOQUE 06.02: TARJETAS DE SERVICIOS (Sombra Verde Potenciada) --- */

.servicios-container { padding: 60px 20px; text-align: center; }
.seccion-titulo-servicios { font-size: 2.5em; margin-bottom: 10px; color: #333; }
.seccion-subtitulo-servicios { font-size: 1.2em; margin-bottom: 40px; color: #666; }

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    max-width: 1200px;
    margin: 0 auto;
}

.servicio-card {
    background-color: #fff;
    border: 1px solid #eee; 
    border-radius: 8px;
    padding: 30px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
    transition: all 0.3s ease;
}

/* 4. SOMBRA VERDE RECUPERADA Y POTENCIADA */
.servicio-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(92, 184, 92, 0.6) !important; 
    border-bottom: 3px solid #5cb85c; 
}

/* El resto de estilos de tarjetas... */
.icon-placeholder { font-size: 3em; margin-bottom: 15px; color: #5cb85c; }
.servicio-card h3 { font-size: 1.5em; margin-bottom: 10px; color: #333; }
.servicio-card p { font-size: 1em; color: #666; line-height: 1.5; }

@media (max-width: 992px) { .servicios-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .servicios-grid { grid-template-columns: 1fr; } }


/* ==================================================== */
/* FIX V27.1: Color del Botón de WhatsApp a Verde Corporativo */
/* ==================================================== */

/* Asumo la clase usada en el Hero de Contacto para el botón de WhatsApp */
.whatsapp-hero-btn {
    /* Fondo: Transparente (si solo queremos borde y texto) */
    background-color: transparent !important;
    
    /* Borde: Verde corporativo */
    border: 2px solid #5cb85c !important; 
    
    /* Color del Texto/Icono: Verde corporativo */
    color: #5cb85c !important;
}

/* Efecto al pasar el ratón (Hover) */
.whatsapp-hero-btn:hover {
    /* Rellenar el fondo con el verde */
    background-color: #5cb85c !important;
    /* Cambiar el texto a blanco */
    color: white !important;
}


/* ======================================================= */
/* 08. DESTACADOS COMPACTOS VERTICALES (CSS Aislado y Compacto) */
/* ======================================================= */

/* Estilos para el Contenedor Principal */
.plonyvel-destacado-compacto {
    max-width: 800px; /* Ajuste el ancho máximo del módulo en la página */
    margin: 40px auto; /* Centrado y espaciado vertical */
    text-align: center;
}

/* Contenedor de Listado Vertical */
.listado-compacto-vertical {
    margin-top: 30px; 
}

/* ------------------------------------------------------------------- */
/* ESTILO DE LA TARJETA COMPACTA (La clave para reducir la altura) */
/* ------------------------------------------------------------------- */
.tarjeta-compacta-unica {
    display: block; 
    
    /* Apariencia base */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    
    /* CLAVE PARA LA COMPACIDAD DE ALTURA */
    padding: 15px 25px; /* ¡Padding Vertical reducido (15px)! */
    margin-bottom: 20px; /* Separación entre tarjetas */
    
    text-align: left; 
    transition: transform 0.2s ease-in-out;
}

.tarjeta-compacta-unica:hover {
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


/* ------------------------------------------------------------------- */
/* ESTILOS DE CONTENIDO INTERNO (Ajuste de márgenes para compactar) */
/* ------------------------------------------------------------------- */

.icono-compacto {
    font-size: 28px;
    margin-bottom: 5px; 
    line-height: 1; 
}

.tarjeta-compacta-unica h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 3px; /* Espacio mínimo */
    line-height: 1.3;
    color: #333;
}

.tarjeta-compacta-unica p {
    font-size: 0.95em;
    margin-bottom: 0; /* ¡Cero margen inferior para reducir altura! */
    line-height: 1.5;
    color: #666;
}

/* ------------------------------------------------------------------- */
/* FIX CSS V2: Estilos para Tarjetas Enlazadas (Máxima Especificidad) */
/* ------------------------------------------------------------------- */

/* 1. Asegura que el contenedor principal del enlace no tenga subrayado ni color de enlace */
.tarjeta-enlazada {
    text-decoration: none !important; /* FORZAR eliminación de subrayado */
    color: inherit !important;        /* Forzar herencia de color */
}

/* 2. Asegura que el título H3 no se vea como un enlace */
.tarjeta-enlazada h3 {
    text-decoration: none !important; /* DOBLE CHECK: Eliminar subrayado en el título */
    color: #333 !important;           /* FORZAR el color oscuro original del título */
}

/* 3. Asegura que el párrafo P no se vea como un enlace */
.tarjeta-enlazada p {
    text-decoration: none !important; /* Eliminar subrayado en el párrafo */
    color: #666 !important;           /* FORZAR el color gris original del párrafo */
}

/* Opcional: Esto sigue siendo un buen efecto visual */
.tarjeta-enlazada:hover {
    cursor: pointer; 
}


/* ======================================================= */
/* 10. SERVICIOS CLAVE (4 TARJETAS) - REVISADO Y CORREGIDO */
/* ======================================================= */

.plonyvel-servicios-mod-4 {
    padding: 60px 20px;
    background-color: #f9f9f9; 
}

.servicios-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.seccion-titulo-servicios {
    color: #333;
    margin-bottom: 10px;
}

.seccion-subtitulo-servicios {
    color: #666;
    margin-bottom: 40px;
    font-size: 1.1em;
}

/* CLAVE: Diseño de 4 Columnas (GRID) */
.servicios-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
    margin-top: 20px;
}

/* ----------------------------------------------------------- */
/* Estilo de la Tarjeta (Card) */
/* ----------------------------------------------------------- */
.servicio-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    /* PROPIEDAD CLAVE 1: Sombra inicial para efecto de tarjeta */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    /* Borde superior con color corporativo */
    border-top: 4px solid #198754; 
}

.servicio-card:hover {
    /* PROPIEDAD CLAVE 2: Efecto de levantamiento al pasar el ratón */
    transform: translateY(-5px); 
    /* PROPIEDAD CLAVE 3: Sombra más fuerte al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.icon-placeholder {
    font-size: 2.5em;
    margin-bottom: 15px;
    line-height: 1;
}

.servicio-card h3 {
    font-size: 1.3em;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

.servicio-card p {
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
}

/* ----------------------------------------------------------- */
/* ADAPTACIÓN A MÓVIL Y TABLET */
/* ----------------------------------------------------------- */
@media (max-width: 1024px) {
    .servicios-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .servicios-grid-4 {
        grid-template-columns: 1fr;
    }
    .plonyvel-servicios-mod-4 {
        padding: 40px 15px;
    }
}

/* ======================================================= */
/* 11. CIFRAS DESTACADAS / STATS BAR (FONDO SÓLIDO) */
/* ======================================================= */

.plonyvel-cifras-destacadas {
    padding: 70px 20px;
    background-color: #333333; /* Fondo Gris Oscuro / Negro suave */
    color: #ffffff; /* Aseguramos que todo el texto es blanco */
}

.cifras-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.cifras-titulo-principal {
    margin-bottom: 50px;
    color: #ffffff;
    font-weight: 700;
}

/* ======================================================= */
/* 11. CIFRAS DESTACADAS / STATS BAR (COLORES CORPORATIVOS FINALES) */
/* ======================================================= */

/* --- Colores Corporativos Finales ---
   ACENTO (Números): #198754 (Verde/Esmeralda)
   FONDO SÓLIDO: #2e3b4e (Gris Azulado Oscuro)
   TEXTO: #ffffff (Blanco Puro)
---------------------------------------------------------------------*/

.plonyvel-cifras-destacadas {
    padding: 70px 20px;
    background-color: #2e3b4e; /* FONDO SÓLIDO CONFIRMADO */
    color: #ffffff; 
}

.cifras-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.cifras-titulo-principal {
    margin-bottom: 50px;
    color: #ffffff;
    font-weight: 700;
}

/* ----------------------------------------------------------- */
/* Diseño de Cuatro Columnas (Grid) */
/* ----------------------------------------------------------- */
.cifras-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
}

.cifra-item {
    text-align: center;
    padding: 15px 0;
}

/* Estilo del Número (La cifra grande) */
.cifra-numero {
    font-size: 3.5em; 
    font-weight: 800; 
    color: #198754; /* ACENTO: Verde Esmeralda */
    margin-bottom: 5px;
    line-height: 1.1;
}

/* Estilo de la Descripción */
.cifra-descripcion {
    font-size: 1.1em;
    color: #ffffff; 
    margin-top: 0;
    font-weight: 600;
    text-transform: uppercase;
}

/* ----------------------------------------------------------- */
/* ADAPTACIÓN A MÓVIL Y TABLET */
/* ----------------------------------------------------------- */
@media (max-width: 900px) {
    .cifras-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .cifras-grid {
        grid-template-columns: 1fr;
    }
    .cifra-numero {
        font-size: 3em;
    }
}

/* ======================================================= */
/* 12. MAPA DE UBICACIÓN */
/* ======================================================= */

.plonyvel-mapa-ubicacion {
    /* Remueve el padding vertical si se quiere que el mapa toque el borde */
    padding: 0; 
    background-color: #f9f9f9;
}

.mapa-container {
    max-width: 1200px; 
    margin: 0 auto;
    text-align: center;
    /* Padding para el texto y título */
    padding: 40px 20px 0; 
}

.mapa-titulo {
    color: #333;
    margin-bottom: 10px;
}

.mapa-subtitulo {
    color: #666;
    margin-bottom: 30px;
}

/* ----------------------------------------------------------- */
/* Estilos para el Mapa (Contenedor que envuelve el IFRAME) */
/* ----------------------------------------------------------- */
.mapa-wrapper {
    /* Contenedor que da la sombra y el aspecto visual al mapa */
    width: 100%; 
    height: 400px; /* Altura estándar para escritorio */
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
    /* Aseguramos que el mapa se alinee al borde del contenedor de 1200px */
    margin-bottom: 0;
}

/* IMPORTANTE: Este estilo asegura que el IFRAME de Google Maps sea responsive */
.mapa-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ----------------------------------------------------------- */
/* Estilos del Placeholder de desarrollo (se elimina al usar el iframe real) */
.mapa-placeholder-desarrollo {
    width: 100%;
    height: 100%;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #777;
    font-size: 1.1em;
    line-height: 1.5;
}

/* ----------------------------------------------------------- */
/* ADAPTACIÓN A MÓVIL */
/* ----------------------------------------------------------- */
@media (max-width: 768px) {
    .mapa-wrapper {
        /* Reduce la altura en móvil para un mejor scrolling */
        height: 300px;
    }
}


/*
 * =====================================
 * CORRECCIONES Y ESTILOS GLOBALES
 * =====================================
 */

body {
    background-color: #f7f7f7;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.plonyvel-blog-archivo,
.plonyvel-blog-entrada {
    padding: 40px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* LAYOUT CORREGIDO */
.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px; 
}

/*
 * =====================================
 * ESTILOS DE BOTONES/CTA
 * =====================================
 */
.button-cta {
    display: inline-block;
    padding: 10px 20px;
    background-color: #5cb85c; /* Verde Principal */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-align: center;
    font-weight: bold;
}

.button-cta:hover {
    background-color: #2e3b4e; /* Gris Pizarra Oscuro para el hover */
}

/* TÍTULOS PRINCIPALES */
.plonyvel-blog-archivo h1,
.plonyvel-blog-entrada h1 {
    color: #2e3b4e; /* Gris Pizarra Oscuro */
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5em;
    width: 100%; 
}

/* REGLA DE OCULTACIÓN FORZADA FINAL: Oculta títulos y metadatos redundantes de WP */
.plonyvel-blog-entrada .page-title,
.plonyvel-blog-entrada .entry-title,
.site-main .entry-title:not(.main-post h1),
.site-main .entry-meta,
.site-main .post-meta,
.posted-on, 
.byline 
 {
    display: none !important;
}


/*
 * =====================================
 * MÓDULO 13: PÁGINA DE ARCHIVO/BLOG
 * =====================================
 */
.plonyvel-blog-archivo .main-content { width: 68%; }
.plonyvel-blog-archivo .sidebar { width: 28%; min-width: 250px; }
.article-card { 
    background-color: #fff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}
.article-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    object-position: center;
    transition: transform 0.3s;
}
.article-card:hover .article-thumbnail img { transform: scale(1.03); }
.article-card h2 a { color: #2e3b4e; text-decoration: none; transition: color 0.3s; }
.article-card h2 a:hover { color: #5cb85c; }
.sidebar h3 {
    border-bottom: 2px solid #5cb85c;
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: #2e3b4e;
}
.sidebar ul { list-style: none; padding: 0; }
.sidebar a { color: #096638; }
.sidebar a:hover { color: #5cb85c; }

/*
 * =====================================
 * MÓDULO 13b: ENTRADA ÚNICA
 * =====================================
 */

.plonyvel-blog-entrada .main-post {
    width: 68%;
    background-color: rgba(255, 255, 255, 0.9); /* Transparencia */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.plonyvel-blog-entrada .sidebar { 
    width: 28%; 
    min-width: 250px; 
    /* Sidebar de Entrada Única: Fondo Blanco */
    background-color: #fff; 
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Títulos H2 y H3 de Contenido (Punto 9) */
.post-content h2, .post-content h3 {
    color: #2e3b4e;
    margin-top: 30px;
    margin-bottom: 15px;
    border-left: 4px solid #5cb85c;
    padding-left: 10px;
}

/* Estilo para el bloque de código/frase destacada (Punto 6) */
.post-content blockquote {
    border-left: 5px solid #5cb85c;
    padding: 10px 20px;
    margin: 20px 0;
    background-color: #f0f8ff;
    font-style: italic;
}

/* Línea de separación interna con gradiente (Punto 8) */
.post-content hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(46, 59, 78, 0), rgba(46, 59, 78, 0.75), rgba(46, 59, 78, 0));
    margin: 30px 0;
}

/* 🟢 ESTILOS: TABLA DE CONTENIDO (TOC) / ÍNDICE */
.table-of-contents {
    background-color: #f8f9fa;
    border-left: 4px solid #5cb85c;
    padding: 20px;
    margin: 30px 0;
    border-radius: 4px;
}
.table-of-contents h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3em;
    color: #2e3b4e;
}
.table-of-contents ul {
    list-style-type: none;
    padding-left: 0;
}
.table-of-contents li a {
    display: block;
    padding: 5px 0;
    color: #096638; /* ⬅️ Color del texto del TOC actualizado a #096638 */
    text-decoration: none;
    font-weight: 500;
}
.table-of-contents li a:hover {
    text-decoration: underline;
    color: #5cb85c;
}

/*
 * =====================================
 * RESPONSIVE (Móviles)
 * =====================================
 */

@media (max-width: 768px) {
    .row { flex-direction: column; gap: 0; }
    .plonyvel-blog-archivo .main-content,
    .plonyvel-blog-archivo .sidebar,
    .plonyvel-blog-entrada .main-post,
    .plonyvel-blog-entrada .sidebar {
        width: 100%; 
        min-width: 100%;
        padding: 20px;
    }
    .plonyvel-blog-entrada .sidebar {
        background-color: transparent;
        box-shadow: none;
    }
}

/*
 * =====================================
 * NUEVO MÓDULO: ARTÍCULOS DESTACADOS (3 COLUMNAS)
 * =====================================
 */

.destacados-modulo {
    /* Contenedor principal para darle espacio y un fondo claro */
    margin: 50px 0;
    padding: 30px 0;
    background-color: #f0f8ff; 
    border-top: 2px solid #5cb85c;
    border-bottom: 2px solid #5cb85c;
}

.destacados-modulo h2 {
    color: #2e3b4e;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
}

.destacados-grid {
    display: grid;
    /* ⚠️ CAMBIO CLAVE: Cambiamos el tamaño mínimo para favorecer 3 columnas grandes */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    justify-content: center; /* Centra las tarjetas si solo hay 1 o 2 en una fila */
}

/* Estilo de cada tarjeta */
.destacado-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%; 
    display: flex;
    flex-direction: column;
}

.destacado-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.destacado-card img {
    width: 100%;
    height: 200px; /* Altura de la imagen aumentada ligeramente */
    object-fit: cover;
}

.destacado-content {
    padding: 15px;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.destacado-content h3 {
    margin-top: 0;
    font-size: 1.2em; /* Título ligeramente más grande */
    color: #2e3b4e;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Estilo para el botón "Leer más" con el color #096638 */
.destacado-link {
    display: block;
    text-align: right;
    color: #096638; 
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    transition: color 0.3s;
}

.destacado-link:hover {
    color: #5cb85c; 
}

/* MÓVILES: Se adapta automáticamente a una columna en pantallas muy pequeñas. */
@media (max-width: 600px) {
    .destacados-grid {
        grid-template-columns: 1fr; 
    }
}

/*
 * =====================================
 * NUEVO MÓDULO: TESTIMONIOS
 * =====================================
 */

.modulo-testimonios {
    margin: 50px 0;
    padding: 40px 0;
    background-color: #fff; /* Fondo blanco para destacarlo si el cuerpo es gris */
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.modulo-testimonios h2 {
    color: #2e3b4e;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    font-weight: 700;
}

.testimonios-grid {
    display: grid;
    /* 3 columnas fijas en escritorio */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonio-card {
    background-color: #f8f9fa; /* Fondo muy claro para el testimonio */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #5cb85c; /* Borde de acento verde */
    display: flex;
    flex-direction: column;
}

.testimonio-card p.quote {
    font-style: italic;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Permite que la cita ocupe el espacio */
}

.testimonio-info {
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.testimonio-info p.client-name {
    font-weight: bold;
    color: #2e3b4e;
    margin: 0;
}

.testimonio-info p.client-project {
    color: #5cb85c; /* Proyecto/Ubicación en color de acento */
    font-size: 0.9em;
    margin: 5px 0 0 0;
}

/* RESPONSIVE: En pantallas pequeñas se apilan */
@media (max-width: 768px) {
    .testimonios-grid {
        grid-template-columns: 1fr;
    }
}

/*
 * =====================================
 * NUEVO MÓDULO: FORMULARIO DE SUSCRIPCIÓN
 * =====================================
 */

.modulo-suscripcion {
    background-color: #096638; /* Verde Oscuro Principal */
    color: #fff;
    padding: 30px;
    border-radius: 8px;
    margin: 30px 0; /* Espacio para que respire */
    text-align: center;
}

.modulo-suscripcion h3 {
    color: #fff;
    margin-top: 0;
    font-size: 1.5em;
}

.modulo-suscripcion p {
    font-size: 1em;
    opacity: 0.9;
    margin-bottom: 20px;
}

/* Estilos de los campos del formulario */
.suscripcion-form input[type="email"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    box-sizing: border-box; /* Asegura que el padding no cambie el ancho */
}

/* Estilo del botón de envío */
.suscripcion-form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #5cb85c; /* Verde Brillante (CTA) */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.suscripcion-form button[type="submit"]:hover {
    background-color: #2e3b4e; /* Gris Pizarra Oscuro en hover */
}