/* ---
   FUENTES Y VARIABLES GLOBALES
--- */
:root {
    --color-primario-vivo: #D90429;
    --color-fondo-oscuro: #212121;
    --color-fondo-claro: #ffffff;
    --color-texto-claro: #FFFFFF;
    --color-texto-oscuro: #333333;
    --fuente-titulos: 'Montserrat', sans-serif;
    --fuente-cuerpo: 'Roboto', sans-serif;
    --ancho-maximo-contenido: 1100px;
}

/* --- ESTILOS GENERALES --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--fuente-cuerpo); line-height: 1.7; color: var(--color-texto-oscuro); background-color: var(--color-fondo-claro); }
img { max-width: 100%; display: block; }

/* --- ESTRUCTURA DE SECCIONES --- */
.section-container { padding: 80px 20px; }
.content-wrapper { max-width: var(--ancho-maximo-contenido); margin: 0 auto; width: 100%; text-align: center; }

/* --- TIPOGRAFÍA --- */
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 800; line-height: 1.2; margin-bottom: 25px; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; font-weight: 700; }
p { max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 20px;}




/* ================================================================ */
/* ===         BANNER DE CTA INTERMEDIO REUTILIZABLE            === */
/* ===         Y ESTILOS DE BOTONES CORREGIDOS                  === */
/* ================================================================ */

/* --- 1. Estilo del Contenedor del Banner --- */
.cta-banner {
    background-color: #f0f0f0; /* Un fondo neutro que se integra bien */
    text-align: center;
    padding: 60px 20px;
    margin-top: 50px; /* Espacio para separarlo de la sección anterior */
}

/* --- 2. Estilo del Texto dentro del Banner --- */
.cta-banner h3 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #2d3748; /* Un color de texto oscuro y sólido */
}

.cta-banner p {
    max-width: 650px;
    margin: 0 auto 30px auto;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #4a5568; /* Un gris ligeramente más suave para el texto */
}

/* --- 3. Estilo del Contenedor de Botones --- */
.cta-banner .banner-buttons-container {
    display: flex;
    width: 500px;
    max-width: 90%;
    margin: 0 auto;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Para que los botones se apilen en pantallas pequeñas */
}

/* --- 4. Estilo General para los Botones del Banner --- */
.cta-banner .banner-buttons-container a {
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* --- 5. Estilo Específico del Botón Primario (Cotizar/Agendar) --- */
.cta-banner .cta-primary {
    background-color: var(--color-primario-vivo); /* Usa tu variable de color principal */
    color: white;
}
.cta-banner .cta-primary:hover {
    background-color: #333; /* Un color de hover oscuro para contraste */
    transform: translateY(-3px);
}

/* --- 6. Estilo Específico del Botón Secundario (WhatsApp) --- */
/* ¡ESTA ES LA PARTE CLAVE QUE FALTABA! */
.cta-banner .cta-secondary {
    background-color: transparent;
    color: #25D366; /* Color oficial de WhatsApp */
    border: solid 1px #25D366;
    display: inline-flex; /* Para alinear ícono y texto correctamente */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre el ícono y el texto */
}

.cta-banner .cta-secondary:hover {
    background-color: #25D366;
    color: white;
    border-color: #25D366;
    transform: translateY(-3px); /* Pequeño efecto de elevación al pasar el mouse */
}

.cta-banner .cta-secondary svg {
    width: 20px;
    height: 20px;
    /* Este truco hace que el ícono herede el color del texto automáticamente */
    fill: currentColor; 
}

/* ================================================================ */
/* ===         SECCIÓN: ARGUMENTOS DE CIERRE Y CONFIANZA          === */
/* ================================================================ */

/* --- Contenedor Principal de la Sección --- */
#closing-arguments {
    background-color: #f9f9f9; /* Un fondo gris muy claro, similar a tu #process */
    padding: 60px 0; /* Espaciado vertical para que la sección respire */
}

/* --- Grid para las 3 Tarjetas de Confianza --- */
.confidence-grid {
    display: grid;
    /* Usa auto-fit para que sea responsive: las tarjetas pasarán a la siguiente línea si no caben */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Espacio entre las tarjetas */
    margin-bottom: 60px; /* Espacio antes del banner de escasez */
}

/* --- Estilo Individual de cada Tarjeta de Confianza --- */
.confidence-card {
    background-color: #ffffff; /* Fondo blanco para que resalten */
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07); /* Sombra sutil como en .process-card */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Transición suave para el hover */
}

/* --- Efecto Hover para las Tarjetas (idéntico al de .process-card) --- */
.confidence-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* --- Contenedor para los Íconos FLAT --- */
.confidence-card .icon-container {
    height: 60px;
    width: 60px;
    margin: 0 auto 20px auto; /* Centrado y con espacio inferior */
    border-radius: 50%; /* Círculo perfecto */
    /*--background-color: #eef4ff; /* Un azul muy claro y suave para el fondo del ícono */
    display: flex;
    align-items: center;
    justify-content: center;
}

.confidence-card .icon-container img {
    height: 32px; /* Tamaño del ícono dentro del círculo */
    width: 32px;
}

/* --- Tipografía dentro de las Tarjetas --- */
.confidence-card h4 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #333;
}

.confidence-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
}

/* --- Banner de Escasez/Urgencia --- */
.scarcity-banner {
    background-color: #2d3748; /* Un color oscuro y elegante (azul-grisáceo) */
    color: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    border-left: 5px solid #c59d5f; /* Acento de color premium (dorado) */
    text-align: center;
    max-width: 800px;
    margin: 0 auto; /* Centrar el banner */
}

.scarcity-banner h4 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
}

.scarcity-banner p {
    margin: 0;
    opacity: 0.9;
}

/* --- Responsividad para Dispositivos Móviles --- */
@media (max-width: 992px) {
    .confidence-grid {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #closing-arguments {
        padding: 50px 0;

    }

    #closing-arguments .content-wrapper h2 {
        text-align: center;
        margin: 0 auto;
    }


    .confidence-grid {
        /* En móvil, las tarjetas se apilan una sobre otra */
        grid-template-columns: 1fr;
    }

    .scarcity-banner {
        /* Aseguramos que el banner no toque los bordes en pantallas pequeñas */
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* --- SECCIÓN BENEFICIOS MODERNOS (CON COLORES DE PROCESS.CSS) --- */

/* Asegúrate de que estas variables estén definidas en tu CSS global o en un :root{} */
/* Ejemplo:
:root {
    --color-fondo-claro: #ffffff;
    --color-texto-oscuro: #333333;
    --color-texto-claro: #ffffff;
    --color-primario-vivo: #007bff; 
}
*/

#comparison{
    background-color: #f0f0f0; /* Color de fondo de la sección, como en process.css */
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 50px 20px;
    font-family: sans-serif; /* Asegurar una fuente base si no está definida */
}

.benefit-card {
    position: relative;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinea contenido abajo */
    min-height: 330px; /* Altura mínima consistente */
    overflow: hidden; /* Evita cualquier desbordamiento */
}

.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* El número de fondo: ajustado para que no cause scroll */
.benefit-number {
    position: absolute;
    top: 20px;      
    left: 20px;
    font-size: 6rem; /* Tamaño optimizado */
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 0, 0, 0.1); /* Color por defecto, como en process.css */
    z-index: 1;
    user-select: none; /* Evita selección de texto */
}

.benefit-content {
    position: relative;
    z-index: 2; /* Por encima del número */
    text-align: left;
}

.benefit-content h3 {
    font-size: 1.8rem; /* Título más grande */
    margin-top: 0;
    margin-bottom: 10px;
}

.benefit-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* === Colores Específicos EXACTOS de process.css === */
#benefit1 { 
    background-color: var(--color-fondo-claro); 
    color: var(--color-texto-oscuro); 
}
#benefit2 { 
    background-color: #4a4a4a; 
    color: var(--color-texto-claro); 
}
#benefit3 { 
    background-color: var(--color-primario-vivo); 
    color: var(--color-texto-claro); 
}

/* Ajuste de color del número en las tarjetas oscuras para que contraste (valor de process.css) */
#benefit2 .benefit-number,
#benefit3 .benefit-number {
    color: rgba(255, 255, 255, 0.15); /* Valor EXACTO de process.css */
}
/* Ajuste de color del h3 para que contraste en tarjetas oscuras (si --color-texto-claro es blanco) */
#benefit2 .benefit-content h3, 
#benefit3 .benefit-content h3 {
    color: var(--color-texto-claro); /* Usa la variable de texto claro para consistencia */
}

/* --- SECCIÓN 8: CONTACTO Y UBICACIÓN (DISEÑO FLEXBOX A PRUEBA DE FALLOS) --- */
.section-container-flush {
    padding: 0;
    margin: 0;
    width: 100%;
}

.contact-grid-5050 {
    display: flex; /* Usamos Flexbox para un control robusto */
    flex-wrap: wrap; /* Permitimos que se apile en móvil */
    width: 100%;
    background-color: var(--color-primario-vivo); /* Fondo de seguridad */
}

/* === LADO IZQUIERDO Y DERECHO === */
.form-side, .map-side {
    flex: 1 1 50%; /* Cada lado es flexible, crece y su base es 50% */
    min-width: 350px; /* Ancho mínimo antes de que se apilen */
}

/* === LADO IZQUIERDO: EL FORMULARIO === */
.form-side {
    background-color: var(--color-primario-vivo);
    color: var(--color-texto-claro);
    padding: clamp(30px, 5vw, 60px); /* Padding adaptable */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-content-wrapper {
    max-width: 480px;
    width: 100%;
}

.form-side h2 { color: white; font-size: 2.8rem; line-height: 1.1; text-align: left; }
.form-side p { text-align: left; margin-left: 0; margin-bottom: 20px; font-weight: bold; }
.form-side .showroom-text { font-weight: 500; font-size: 1.1rem; border-left: 3px solid rgba(255,255,255,0.5); padding-left: 15px; }

.form-side form { display: grid; gap: 15px; width: 100%; }
.form-side input, .form-side textarea { width: 100%; padding: 15px; border: 1px solid transparent; border-radius: 5px; background-color: rgba(255, 255, 255, 0.95); color: var(--color-texto-oscuro); font-family: var(--fuente-cuerpo); font-size: 1rem; }
.form-side input::placeholder, .form-side textarea::placeholder { color: #555; }
.form-side textarea { resize: vertical; }

.form-side button { background-color: var(--color-fondo-oscuro); color: var(--color-texto-claro); padding: 15px; border-radius: 5px; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1rem; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; }
.form-side button:hover { background-color: #000; transform: scale(1.02); }

#form-status { margin-top: 15px; text-align: center; font-weight: bold; min-height: 20px; }

/* === LADO DERECHO: EL MAPA === */
.map-side {
    min-height: 500px; /* Altura mínima para asegurar visibilidad */
    width: 100%;
}
.map-side iframe { width: 100%; height: 100%; border: 0; }

/* =============================================== */
/* === ESTILOS PARA EL ACORDEÓN DE PREGUNTAS (FAQ) === */
/* =============================================== */

/* Contenedor principal del acordeón */
.accordion {
    max-width: 800px; /* Ancho máximo para mejor legibilidad */
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden; /* Para que los bordes redondeados se apliquen a los items */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Cada item individual (pregunta + respuesta) */
.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

.accordion-item:last-child {
    border-bottom: none; /* Elimina el borde del último item */
}

/* El botón que contiene la pregunta (el "trigger") */
.accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    background-color: #ffffff;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 18px; /* Tamaño de la pregunta */
    font-weight: 600;
    color: #333;
    transition: background-color 0.3s ease;
}

.accordion-trigger:hover {
    background-color: #f9f9f9;
}

/* El ícono de "+" y "-" */
.accordion-icon {
    position: relative;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease-out;
}

.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: #333;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Animación del ícono cuando está abierto */
.accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
    transform: translate(-50%, -50%) rotate(180deg);
    opacity: 0;
}


/* El panel que contiene la respuesta */
.accordion-panel {
    overflow: hidden;
    max-height: 0; /* Empieza cerrado */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    background-color: #fdfdfd;
}

/* Estilo del texto de la respuesta */
.accordion-panel p {
    padding: 0 20px 20px;
    margin: 0;
    line-height: 1.6;
    color: #555;
    font-size: 16px;
}

/* === ESTILOS PARA CARRUSEL CON EFECTO DE ELEVACIÓN === */

#panelesgal {
    background-color: var(--color-fondo-claro);
    padding-top: 80px;
    padding-bottom: 80px;
}

.paneles-container {
    position: relative;
    width: 100%;
    margin-top: 30px;
}

.paneles-carousel .swiper-slide {
    width: 350px;
    height: 400px;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.6;
    transform: scale(0.85);
}

.paneles-carousel .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

/* --- LA MAGIA DEL EFECTO DE CAPAS --- */

/* 1. La tarjeta base (la de atrás) */
.feature-card-v2 {
    position: relative; /* Contexto para posicionar las capas */
    width: 90%;
    height: 90%;
    padding: 3px;
    background-color: #4a4a4a; /* Un fondo oscuro para que el texto resalte */
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* ¡SÚPER IMPORTANTE! Esconde la parte de la imagen que se sale por arriba */
    cursor: grab;
}

/* 2. El texto (capa de atrás) */
.card-title-behind {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
    z-index: 1; /* Se queda en el fondo */
}

.card-title-behind p {
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
}

/* 3. La imagen (capa de adelante) */
.feature-card-v2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 101;
    object-fit: cover;
    border-radius: 20px; /* Redondeado igual que la base */
    z-index: 2; /* Se pone por encima del texto */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), 
                box-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 4. LA ANIMACIÓN: Cuando el slide está activo, la imagen se eleva */
.swiper-slide-active .feature-card-v2 img {
    transform: translateY(-80px); /* Ajusta este valor para elevarla más o menos */
    box-shadow: 0 30px 40px rgba(0, 0, 0, 0.35); /* Una sombra más pronunciada al elevarse */
}

/* Botones (sin cambios) */
.paneles-container .swiper-button-next,
.paneles-container .swiper-button-prev {
    color: var(--color-primario-vivo, #007bff);
}

/* Efecto de bordes difuminados para AMBOS carruseles */
.swiper-containerp::before,
.swiper-containerp::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 60px; /* Ancho del difuminado */
    z-index: 2;
    pointer-events: none;
}
.swiper-containerp::before {
    left: -20px;
    background: linear-gradient(to right, var(--color-fondo-claro) 20%, transparent 100%);
}
.swiper-containerp::after {
    right: -20px;
    background: linear-gradient(to left, var(--color-fondo-claro) 20%, transparent 100%);
}

#panelesgal h3{
    margin: 0 auto;
    text-align: center;
}

/* --- ESTILOS DEL FOOTER Y BOTÓN FLOTANTE --- */

/* --- 1. Estilos del Footer --- */
#footer { 
    background-color: #111; 
    color: #aaa; 
    padding: 30px 20px; 
    text-align: center;
}

/* --- 2. Estilos EXCLUSIVOS para el Botón Flotante de WhatsApp --- */
/* Al usar el ID, nos aseguramos que estos estilos NO afecten a otros botones */
#whatsapp-float { 
    position: fixed; 
    bottom: 45px; 
    right: 25px; 
    background-color: #25D366; 
    color: white; 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    z-index: 1000; 
    transition: transform 0.3s ease; 
}

#whatsapp-float:hover { 
    transform: scale(1.1); 
}

#whatsapp-float svg { 
    width: 32px; 
    height: 32px; 
    fill: currentColor; /* Asegura que el ícono herede el color blanco */
}

/* --- SECCIÓN 4: GALERÍAS (DOS CARRUSELES) --- */
#gallery-proyectos {
    background-color: var(--color-fondo-oscuro);
    padding-top: 80px;
    padding-bottom: 80px;
}
.content-wrapper-full-width {
    width: 65%;
    max-width: 100%;
    padding: 0;
    margin: 0 auto 0 auto;
    overflow-x: hidden;
    height: auto;
}
.carousel-block {
    margin-bottom: 80px; /* Espacio entre los dos carruseles */
}
.carousel-block:last-child {
    margin-bottom: 0;
}
.carousel-title {
    max-width: var(--ancho-maximo-contenido);
    margin: 0 auto 50px auto;
    text-align: center;
    padding: 0 20px;
}
.carousel-title h2 {
    color: var(--color-primario-vivo);
    padding-top: 80px;
}
.carousel-title p {
    color: #ddd;
}
.swiper-container {
    width: 100%;
    position: relative;
    padding: 10px 0;
}

/* Efecto de bordes difuminados para AMBOS carruseles */
.swiper-container::before,
.swiper-container::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 200px; /* Ancho del difuminado */
    z-index: 2;
    pointer-events: none;
}
.swiper-container::before {
    left: -20px;
    background: linear-gradient(to right, var(--color-fondo-oscuro) 20%, transparent 100%);
}
.swiper-container::after {
    right: -20px;
    background: linear-gradient(to left, var(--color-fondo-oscuro) 20%, transparent 100%);
}

.swiper-slide {
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    cursor: pointer;
}

/* Estilos específicos para el carrusel de PUERTAS (Coverflow) */
.puertas-carousel .swiper-slide {
    width: 350px;
    height: 450px;
}
.puertas-carousel .swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.7);
    opacity: 0.7;
}

/* Estilos específicos para el carrusel de DETALLES */
.detalles-carousel .swiper-slide {
    width: 400px;
    height: 400px;
    opacity: 0.6;
    margin-top: 30px;
}
.detalles-carousel .swiper-slide-active,
.detalles-carousel .swiper-slide-next,
.detalles-carousel .swiper-slide-prev {
    opacity: 1;
}

/* Estilos de navegación para AMBOS carruseles */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-primario-vivo);
    transform: scale(0.8);
    right: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.swiper-button-prev {
    left: 10px;
}

.swiper-button-next {
    right: 10px;
}

.swiper-pagination-bullet-active {
    background: var(--color-primario-vivo);
}

/* --- SECCIÓN 1: HÉROE --- */
/* === MODIFICACIÓN CLAVE: NUEVA IMAGEN DE FONDO === */
#hero { 
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('img/puertas-principales-modernas-acabado-madera.webp'); 
    background-size: cover; 
    background-position: center; 
    min-height: 100vh; 
    color: var(--color-texto-claro); 
    display: flex; align-items: center; 
}


#hero .content-wrapper { margin: 0; padding-left: 8%; text-align: left; max-width: 50%; }
.hero-logo {
    width: 45%; /* O el tamaño que consideres adecuado */
    margin-bottom: 20px; /* Espacio entre el logo y el título */
    margin-left: 0; /* Para alinear con el texto del hero */
    padding: 50px 0 50px 0;
}
#hero h1 { font-size: 2.7rem; font-weight: 800; text-transform: none; line-height: 1.3; margin-bottom: 20px;}
#hero p { max-width: 500px; margin: 0 0 35px 0; font-size: 1.1rem; }
#hero a[role="button"] { display: inline-block; background-color: var(--color-primario-vivo); color: var(--color-texto-claro); padding: 15px 40px; font-family: var(--fuente-titulos); font-weight: 700; text-decoration: none; text-transform: lowercase; border-radius: 4px; transition: background-color 0.3s ease, transform 0.3s ease; }
#hero a[role="button"]:hover { background-color: #ff0834; transform: translateY(-3px); }


.banner-buttons-container {
    display: flex;
    width: 100%;
    flex-direction: column; /* Apila los botones uno encima del otro */
    align-items: left;   /* Centra los botones horizontalmente */
    gap: 25px;             /* Crea un espacio vertical de 15px entre los botones */
    margin-top: 25px;      /* Espacio sobre el primer botón (ajusta si es necesario) */
}

#hero a[role="button"] {
    display: flex;
    width: 38%;
    min-width: 300px;
    align-items: center;
    text-align: center;
    justify-content: center;
}

/* --- ESTILOS PARA EL LIGHTBOX --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 3000; /* Superior a otros elementos */
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.lightbox-content {
    max-width: 90%;
    max-height: 80vh; /* Usar vh para asegurar que quepa en la pantalla */
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.lightbox-close:hover {
    color: #ddd;
    transform: scale(1.1);
}

#lightbox-caption {
    margin-top: 15px;
    color: #ccc;
    font-size: 1.1rem;
    text-align: center;
    max-width: 70%;
    animation: slideUp 0.3s ease;
}

/* Animaciones para el Lightbox */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- ESTILOS DEL MODAL DE NOTIFICACIÓN --- */
#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Asegura que esté por encima de todo */
    opacity: 0;
    pointer-events: none; /* No se puede hacer clic cuando está oculto */
    transition: opacity 0.3s ease;
}

#modal-overlay:not(.modal-hidden) {
    opacity: 1;
    pointer-events: auto; /* Se puede hacer clic cuando está visible */
}

#modal-card {
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#modal-overlay:not(.modal-hidden) #modal-card {
    transform: scale(1);
}

#modal-icon svg {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

/* Estilos de los íconos (el color se define en el SVG) */
.icon-success .circle { stroke: #28a745; }
.icon-success .check { stroke: #28a745; }
.icon-error .circle { stroke: #dc3545; }
.icon-error .line { stroke: #dc3545; }


#modal-title {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--color-texto-oscuro);
}

#modal-message {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

#modal-close-btn {
    background-color: var(--color-fondo-oscuro);
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--fuente-titulos);
}

/* --- ESTILOS DEL MODAL DE WHATSAPP --- */
/* El overlay es el mismo, pero usamos un ID diferente por si queremos cambiarlo a futuro */
#whatsapp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#whatsapp-modal-overlay:not(.modal-hidden) {
    opacity: 1;
    pointer-events: auto;
}

#whatsapp-modal-card {
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 450px; /* Un poco más ancho para el formulario */
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#whatsapp-modal-overlay:not(.modal-hidden) #whatsapp-modal-card {
    transform: scale(1);
}

#whatsapp-modal-card h3 {
    font-size: 1.8rem;
    color: var(--color-texto-oscuro);
    margin-bottom: 10px;
}

#whatsapp-modal-card p {
    color: #555;
    margin-bottom: 30px;
}

/* Estilos para el nuevo formulario dentro del modal */
#whatsapp-form {
    display: grid;
    gap: 15px;
    text-align: left;
}

#whatsapp-form input,
#whatsapp-form select {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: var(--fuente-cuerpo);
    background-color: #f9f9f9;
}

#whatsapp-form select {
    color: #555; /* Color del texto cuando se selecciona una opción */
}

/* Botón principal del formulario */
#whatsapp-form button[type="submit"] {
    background-color: #25D366; /* Color verde de WhatsApp */
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

#whatsapp-form button[type="submit"]:hover {
    background-color: #1EAE54; /* Verde más oscuro al pasar el mouse */
}

/* Botón secundario para cancelar/cerrar */
.modal-close-secondary {
    background: none;
    border: none;
    color: #777;
    margin-top: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
}


/* --- ESTILOS PARA LA TRANSFORMACIÓN DEL MODAL DE WHATSAPP --- */
.view-hidden {
    display: none;
}

/* Estilo para el botón de redirección final a WhatsApp */
.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366; /* Color verde de WhatsApp */
    color: white !important;
    border: none;
    padding: 15px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--fuente-titulos);
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
    background-color: #1EAE54;
}

/* === ESTILOS PARA LA SECCIÓN DE PANELES DE ALTO RENDIMIENTO === */

/* --- 1. Contenedor Principal de la Sección --- */
#panels-section {
    background-color: #f9f9f9; /* Color de fondo que especificaste */
    padding: 100px 0; /* Espacio vertical generoso */
    font-family: sans-serif; /* Fuente base */
}

/* --- 2. Contenedor del Layout (La Clave de la Estructura) --- */
.panels-layout-grid {
    display: flex; /* ¡Activamos Flexbox! */
    align-items: center; /* Centra verticalmente los elementos (imagen y texto) */
    gap: 60px; /* Espacio horizontal entre la imagen y el texto */
    
    /* Usamos el .content-wrapper que ya tenías para centrar el contenido */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Padding lateral para que no se pegue a los bordes */
}

/* --- 3. Columnas de Imagen y Texto --- */
.panel-image-column,
.panel-text-column {
    flex: 1; /* Ambas columnas ocupan el 50% del espacio disponible */
}

/* --- 4. Estilos para la Columna de Texto (Derecha) --- */
.panel-text-column h3 {
    font-size: 2rem; /* Título más grande e impactante */
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 20px;
    color: #222;
}

.panel-text-column p {
    font-size: 1.1rem; /* Texto más legible */
    line-height: 1.7;
    color: #555;
    margin-bottom: 0;
}

/* --- 5. Estilos para la Columna de Imagen (Izquierda) --- */
.panel-image-column img {
    width: 100%; /* La imagen ocupa todo el ancho de su columna */
    height: auto; /* Mantiene la proporción */
    display: block; /* Evita espacios extra debajo de la imagen */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); /* Sombra más sutil */
}


/* --- 6. Media Query para Responsividad (Móviles) --- */
@media (max-width: 992px) {
    .panels-layout-grid {
        flex-direction: column; /* Apila los elementos verticalmente */
        text-align: center; /* Centra el texto en móvil */
    }

    .panel-text-column {
        /* Ordenamos los elementos: 1 para el texto, -1 para la imagen */
        order: 1; /* El texto va después de la imagen */
    }

    .panel-image-column {
        order: -1; /* La imagen va primero */
        margin-bottom: 40px; /* Espacio entre la imagen y el texto */
    }

    .panel-text-column h3 {
        font-size: 1.8rem; /* Ajustamos el tamaño del título para móvil */
    }
}

/* --- SECCIÓN 2: PROBLEMA VS SOLUCIÓN (AHORA CON FONDO CLARO) --- */
#problem-solution {
    background-color: var(--color-fondo-claro);
    color: var(--color-texto-oscuro);
}
#problem-solution h2, #problem-solution h3 {
    color: var(--color-primario-vivo);
}
#video-section { 
    margin: 40px auto 60px auto; 
    max-width: 800px; 
    width: 100%; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); 
    border-radius: 8px; 
    overflow: hidden; 
    background-color: #000; }

#video-section iframe { 
    width: 100%; height: 100%; 
    aspect-ratio: 16/9; 
    border: none; 
    display: block; }

.two-columns-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    margin-top: 30px;
    text-align: center; 
    align-items: start; }

article{
    width: 100%;
    text-align: center;
    text-justify: auto;

}

/* --- SECCIÓN 6: PROCESO (NÚMERO DENTRO DEL CARD) --- */
#process { 
    background-color: #f0f0f0; 
}
.process-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 50px;
    margin-top: 50px;
    padding: 0 20px;
}
.process-card {
    position: relative; /* Sigue siendo el padre para el número */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    min-height: 250px; /* Ajustamos la altura mínima */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alineamos el contenido al final */
    padding: 40px; /* Padding general */
}

/* Efecto de Escala y Sombra al pasar el mouse */
.process-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* === AQUÍ ESTÁ EL CAMBIO PRINCIPAL === */
.step-number {
    position: relative;
    text-align: start;
    top: 0px;       /* CAMBIO: Lo bajamos para que esté dentro de la tarjeta */
    left: 0px;
    font-size: 7rem;   /* CAMBIO: Reducimos un poco el tamaño para que quepa mejor */
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 0, 0, 0.1);
    z-index: 1;
    margin-bottom: 0px; /* Reseteamos por si acaso */
}

.card-content {
    position: relative;
    z-index: 1;
    text-align: left;
    /* CAMBIO: El espacio se crea por el justify-content del padre y el padding */
}

/* El h3 necesita un margen superior para asegurar el espacio con el número */
.card-content h3 {
    position: relative;
}


/* Colores específicos para cada tarjeta */
#step1 { background-color: var(--color-fondo-claro); color: var(--color-texto-oscuro); }
#step2 { background-color: #4a4a4a; color: var(--color-texto-claro); }
#step3 { background-color: var(--color-primario-vivo); color: var(--color-texto-claro); }

/* Ajustamos el color del número en las tarjetas oscuras para que contraste */
#step2 .step-number,
#step3 .step-number {
    color: rgba(255, 255, 255, 0.15);
}


/* Estilo para botón de galería en la página principal */
.btn-outline-red {
  display: inline-block;
  width: 40%;
  margin: 0 auto;
  padding: 15px 30px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  color: var(--color-primario-vivo);
  border: 2px solid var(--color-primario-vivo);
  background-color: transparent;
  transition: all 0.3s ease;
}

.btn-outline-red:hover {
  background-color: var(--color-primario-vivo);
  color: var(--color-texto-claro);
}

/*
==========================================================================
   ARCHIVO DE ESTILOS RESPONSIVOS
   - Contiene todos los @media queries del sitio.
   - Organizado por breakpoints (puntos de quiebre).
==========================================================================
*/

/* 
==========================================================================
   Breakpoint para Tablets y Laptops Pequeñas (hasta 992px)
==========================================================================
*/
@media (max-width: 992px) {

    /* --- TIPOGRAFÍA (TABLET) --- */
    /* Modifique estos valores para ajustar los tamaños de fuente en este breakpoint */
    h1 { font-size: 2.2rem; }
    h2 { font-size: 2.0rem; }
    h3 { font-size: 1.4rem; }
    p  { font-size: 1.0rem; }

    /* --- ESTRUCTURA --- */
    .process-grid { 
        grid-template-columns: 1fr; 
    }

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

/* 
==========================================================================
   Breakpoint para Móviles (hasta 768px)
==========================================================================
*/
@media (max-width: 768px) {

    /* 
    --- AJUSTES DE TIPOGRAFÍA GLOBALES PARA MÓVIL --- 
    Edite los siguientes valores para cambiar el tamaño de los textos
    en la versión móvil del sitio.
    */
    h1, #hero h1 { font-size: 1.6rem; } /* Unificado para consistencia */
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    p  { font-size: 1rem; }
    /* --- FIN DE AJUSTES DE TIPOGRAFÍA --- */


    /* --- ESTRUCTURA Y SECCIONES --- */
    .section-container { 
        padding: 60px 15px; 
    }

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

    .content-wrapper-full-width {
        width: 100%;
    }

    .content-wrapper h2{
        width: 90%;
    }

    .content-wrapper p{
        width: 90%;
    }

    /* --- HERO --- */
    #hero {
        background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/puerta-exterior-moderna-acabado-cedro-natural.webp'); 
        background-position: center;
    }

    #hero .content-wrapper { 
        padding-left: 5%; 
        max-width: 90%; 
        justify-content: center; 
        align-items: center; 
        text-align: center; 
    }

    .hero-logo {
        width: 60%;
        margin-bottom: 20px;
        margin: 0 auto 0 auto;
    }

    #hero .banner-buttons-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    #hero .banner-buttons-container a {
        width: 90%;
    }

    /* --- CARRUSELES --- */
    .swiper-container::before,
    .swiper-container::after {
        width: 90px;
    }

    /* --- TESTIMONIOS --- */
    #testimonials {
        padding: 80px 0;
    }

    .testimonial-swiper .swiper-slide {
        width: 70%;
        max-width: 280px;
    }

    .testimonial-swiper .swiper-button-next,
    .testimonial-swiper .swiper-button-prev {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .testimonial-swiper .swiper-button-prev {
        left: 5px;
    }
    
    .testimonial-swiper .swiper-button-next {
        right: 5px;
    }


    #process h2{
        text-align: center;
        margin: 0 auto;
    }

    .process-card h3{
        font-size: 1.5rem;
    }



    /* Estilo para botón de galería en la página principal */
.btn-outline-red {
  width: 70%;
}




    /* --- CONTACTO --- */
    .contact-grid-5050 {
        grid-template-columns: 1fr;
    }

    .form-side {
        padding: 60px 30px;
        min-height: 70vh;
    }

    .map-side {
        min-height: 450px;
        position: relative;
    }
}

/*
==========================================================================
    SECCIÓN 5: TESTIMONIALES - DISEÑO UNIFICADO Y CORREGIDO
==========================================================================
*/

/* --- 1. CONTENEDOR GENERAL (Sin cambios) --- */
#testimonials {
    background: #f5f5f5;
    padding: 120px 0;
    color: #1D1E22;
    overflow: hidden; 
}

#testimonials h2 {
    color: #1D1E22;
    text-align: center;
    margin: 0 auto 20px auto;
    font-weight: 600;
}

#testimonials .content-wrapper > div[style] {
    text-align: center;
    margin-bottom: 70px !important;
    font-size: 1rem !important;
    color: #555555;
}

/* --- 2. ESTRUCTURA DEL CARRUSEL (Ajustes para consistencia) --- */
.testimonial-swiper {
    width: 100%;
    max-width: 1400px; 
    margin: 0 auto;
    position: relative;
}

.testimonial-swiper .swiper-slide {
    width: 320px; /* Ancho unificado para todas las tarjetas */
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.5;
    transform: scale(0.85);
    height: auto; /* Permite que la altura se ajuste al contenido */
    display: flex; /* Clave para que la tarjeta interna se estire */
    align-items: stretch; /* Estira la tarjeta para que ocupe toda la altura del slide */
}

.testimonial-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

/*
--- 3. ESTILO DE TARJETA UNIFICADO (LA MEJORA PRINCIPAL) ---
*/
.testimonial-video-card,
.testimonial-text-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- 3.1 TARJETA DE VIDEO (Ajustes menores) --- */
.testimonial-video-card {
    cursor: pointer;
    padding: 12px;
    justify-content: space-between; /* Mantenemos space-between aquí porque funciona bien para la estructura video + texto corto */
}

.video-placeholder {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.video-placeholder img,
.video-placeholder iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    display: block;
    border: none;
    object-fit: cover;
}

.testimonial-video-card p {
    font-style: italic;
    margin-top: 15px; /* Espacio reducido */
    font-size: 0.9rem;
    color: #333333;
    padding: 0 10px 10px 10px;
}

/* --- 3.2 TARJETA DE TEXTO (CORRECCIÓN DE ESPACIADO) --- */
.testimonial-text-card {
    padding: 30px 25px;
    justify-content: center; /* <<< CORRECCIÓN CLAVE: Agrupa los elementos en el centro vertical */
    gap: 12px; /* <<< CORRECCIÓN CLAVE: Añade un espacio uniforme entre elementos */
}

.testimonial-text-card .stars {
    font-size: 1.1rem;
    color: #FFC107;
    margin: 0; /* Reseteamos márgenes para que 'gap' controle el espacio */
}

.testimonial-text-card blockquote {
    font-style: italic;
    font-size: 0.95rem;
    color: #333333;
    line-height: 1.5;
    border: none;
    padding: 0;
    margin: 0; /* Reseteamos márgenes */
}

.testimonial-text-card cite {
    font-style: normal;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1D1E22;
    display: block;
    margin: 0; /* Reseteamos márgenes */
}

/*
--- 4. ETIQUETA DE FUENTE (FACEBOOK) REDISEÑADA ---
*/
.testimonial-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    color: #555;
    font-weight: 500;
    border: 1px solid #e0e0e0;
    margin: 0; /* Reseteamos márgenes */
}

.facebook-icon {
    width: 16px;
    height: 16px;
    color: #1877F2; /* Color oficial de Facebook */
}


/* --- 5. BOTÓN DE PLAY Y NAVEGACIÓN (Sin cambios) --- */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent white;
}

.swiper-slide-active .testimonial-video-card:hover .play-button {
    background-color: #ff0000;
    transform: translate(-50%, -50%) scale(1.1);
}

.testimonial-swiper .swiper-button-next,
.testimonial-swiper .swiper-button-prev {
    color: #ff0000;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #e0e0e0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.testimonial-swiper .swiper-button-next:hover,
.testimonial-swiper .swiper-button-prev:hover {
    background-color: #ff0000;
    color: #ffffff;
    border-color: #ff0000;
}

.testimonial-swiper .swiper-button-next::after,
.testimonial-swiper .swiper-button-prev::after {
    font-size: 20px;
    font-weight: 900;
}

.testimonial-swiper .swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f0f0f0 !important;
    color: #aaaaaa !important;
    box-shadow: none;
}

/* ================================================================ */
/* ===         NUEVA SECCIÓN: ANÁLISIS EN VIDEO                 === */
/* ================================================================ */

/* --- 1. Contenedor Principal de la Sección --- */
#video-analysis {
    background-color: #ffffff; /* Fondo blanco para que destaque entre las grises */
    padding-top: 60px; /* Menos padding superior para que fluya mejor */
}

/* --- 2. Contenedor del Video --- */
.video-container {
    position: relative; /* Clave para posicionar la etiqueta de IA */
    max-width: 900px;
    margin: 40px auto 60px auto;
    border-radius: 12px; /* Coincide con .confidence-card */
    overflow: hidden; /* Asegura que el video adopte los bordes redondeados */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* Sombra sutil pero notoria */
}

.video-container video {
    width: 100%;
    height: auto;
    display: block; /* Elimina espacio extra debajo del video */
}

/* --- 3. Etiqueta de Transparencia "Generado por IA" --- */
.ai-disclaimer {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 1.2rem;
    font-family: var(--fuente-cuerpo);
    z-index: 10;
    pointer-events: none; /* Para que no interfiera con los controles del video */
    transition: opacity 0.5s ease-out;
}

.ai-disclaimer.fade-out {
    opacity: 0;
    pointer-events: none; /* Asegura que no se pueda hacer clic en el elemento aunque sea invisible */
}

/* --- 4. Grid para los Datos Clave (Reutilizando estilos) --- */
.video-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* --- 5. Estilo de Tarjeta para Datos Clave (Clon de .confidence-card) --- */
.data-card {
    background-color: #ffffff;
    border: 1px solid #f0f0f0; /* Un borde sutil para definirla sobre el fondo blanco */
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.data-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* Reutilizamos los mismos estilos de íconos y texto de .confidence-card */
.data-card .icon-container {
    height: 60px;
    width: 60px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.data-card .icon-container img {
    height: 32px;
    width: 32px;
}

.data-card h4 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #333;
}

.data-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
}


/* --- 8. ESTILO PARA EL ENLACE AL BLOG POST --- */

.blog-link-container {
    margin-top: 50px;
    text-align: center;
    border-top: 1px solid #f0f0f0; /* Una línea sutil para separar la sección */
    padding-top: 30px;
}

.blog-link-container p {
    font-size: 1rem;
    color: #555; /* Un gris suave, menos agresivo que el negro */
}

/* Estilo del enlace en sí */
.text-link-to-blog {
    color: var(--color-primario-vivo); /* Usa tu color principal para consistencia */
    font-weight: 500; /* Un poco más de peso para que destaque */
    text-decoration: none; /* Quitamos el subrayado por defecto */
    background-image: linear-gradient(currentColor, currentColor); /* Preparamos la línea para el hover */
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px; /* La línea está oculta inicialmente */
    transition: background-size 0.3s ease; /* Animación suave */
}

/* Efecto al pasar el mouse */
.text-link-to-blog:hover {
    background-size: 100% 1px; /* La línea aparece de izquierda a derecha */
}

/* --- 6. Responsividad para Móviles --- */
@media (max-width: 768px) {
    #video-analysis {
        padding: 50px 0;
    }
    .video-data-grid {
        grid-template-columns: 1fr;
    }


    .ai-disclaimer {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 1.2rem;
    font-family: var(--fuente-cuerpo);
    z-index: 10;
    pointer-events: none; /* Para que no interfiera con los controles del video */
    transition: opacity 0.5s ease-out;
    }

    .video-container {
    border-radius: 0px; /* Coincide con .confidence-card */
}

}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}