/* Variables de Color del Sistema LIBRA (Nuevos colores: Celeste y Verde) */
:root {
    --color-smart: #6FC66C;    /* Original Turquesa/Teal */
    --color-info: #696969;      /* Gris original */
    --color-celeste: #87CEEB; /* Celeste claro, como el de los iconos en el PDF */
    --color-verde: #90EE90;    /* Verde claro, presente en las interfaces del PDF */
    
    --color-principal: var(--color-smart); /* Mantenemos el turquesa como primario */
    --color-secundario-bg: #e0f2f7; /* Fondo azul claro muy sutil para secciones */
    --color-terciario-bg: #f9f9f9;    /* Fondo casi blanco para otras secciones */
    --color-texto-oscuro: #2c3e50;    /* Azul oscuro casi negro */
    --color-texto-claro: #ffffff;
    --color-accent: var(--color-verde); /* Usamos el verde para acentos */
    --color-titulos: #000000;
    --padding-section: 80px 5%; /* Más padding para airear las secciones */
}

/* Reset Básico y Estilos Generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}






body {
    line-height: 1.7;
    color: var(--color-titulos);
    background-color: var(--color-texto-claro);
    overflow-x: hidden; /* Previene scroll horizontal indeseado */
}

a {
    text-decoration: none;
    color: var(--color-titulos);
    transition: color 0.3s ease;
}

h1, h2, h3 {
    margin-bottom: 20px;
    color: var(--color-titulos);
    font-weight: 600;
}

h2 {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--color-principal);
    border-radius: 2px;
}
p {
    text-align: justify;
    hyphens: auto;
}

section {
    padding: var(--padding-section);
    position: relative; 
    scroll-margin-top: 70px;
    max-width: 100%; /* Mantenemos este fix agresivo */
    overflow: hidden; /* Agrega overflow: hidden aquí también por si acaso */
}


/* Estilos de Tipografía y Clases Auxiliares */
.smart { color: var(--color-principal); font-weight: bold; }
.info { color: var(--color-info); }
.small-text { font-size: 0.9em; margin-top: 20px; color: var(--color-info); text-align: center;}
.small-text-price { font-size: 0.9em; margin-top: 25px; text-align: center; color: #555;}
.contact-intro { font-weight: 500; color: #444; }


/* 1. Destaque para el PLAN ÉLITE */
.plan-card.elite {
    /* Fondo más oscuro/color de acento para la tarjeta destacada */
    background-color: var(--color-secundario-bg); /* Fondo celeste sutil */
    transform: scale(1.05); /* Ligeramente más grande que los demás */
    z-index: 2; /* Asegura que esté por encima de sus vecinos */
    border: 3px solid var(--color-principal); /* Borde grueso con color principal */
}
/*
.plan-card.advanced {
background-color: var(--color-secundario-bg); 
}*/

/* Ajuste del hover para el plan destacado */
.plan-card.elite:hover {
    transform: scale(1.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* 2. Destaque del Encabezado */
.plan-card.elite h3 {
    /* Color de fondo para el encabezado */
    background-color: var(--color-principal);
    color: var(--color-texto-claro);
    margin: -35px -35px 20px -35px; /* Margen negativo para expandir al padding */
    padding: 15px 35px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 3. Remover la línea de separación del encabezado, si existe */
.plan-card.elite h3::after {
    display: none; 
}


/* Estilo para la etiqueta 'Recomendado' */
.plan-card .tag-recommended {
    position: absolute;
    top: 15px;
    right: -10px;
    padding: 5px 15px;
    background-color: gold; /* Verde claro */
    color: var(--color-texto-oscuro);
    font-size: 0.85em;
    font-weight: 700;
    /*text-transform: uppercase;*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transform: rotate(3deg); /* Le da un toque dinámico */
    z-index: 10;
    border-radius: 5px;
}


.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px; /* Distancia desde abajo */
    right: 40px; /* Distancia desde la derecha */
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 9000; /* Asegura que esté por encima de casi todo */
    
    /* Centrar el icono */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Animación sutil */
    transition: transform 0.3s ease-in-out;
}

.whatsapp-float:hover {
    transform: scale(1.1) rotate(5deg); /* Efecto de acercamiento y giro */
}




/* --- ESTILOS PARA PRECIO ANTIGUO TACHADO --- */
.plan-card .price-old {
    /* CORRECCIÓN CLAVE: Usa margin-top: auto para separar el precio de las características */
    margin-top: auto; 
    
    margin-bottom: 25px; 
    font-size: 1.2em; 
    font-weight: 500;
}

.plan-card .strikethrough-price {
    color: #cc0000; /* Color rojo para el precio tachado */
    text-decoration: line-through; /* Línea de tachado */
    font-size: 1.5em; /* Hace que el número tachado sea grande */
    font-weight: bold;
}

.plan-card .price-period {
    color: var(--color-info);
    font-size: 0.8em;
}

/* Ocultar botones individuales si existen remanentes */
.plan-card .btn-principal,
.plan-card .btn-cta-alt {
    display: none; 
}

/* --- ESTILOS PARA BOTÓN ÚNICO GRANDE --- */
.plan-cta-wrapper {
    text-align: center;
    margin-top: 50px;
}

.plan-cta-wrapper .cta-big {
    font-size: 1.2em; /* Letra más grande para el CTA */
    padding: 18px 40px; /* Más padding para hacerlo más grande */
    border-radius: 40px; /* Más redondeado */
    max-width: 1000px;
    width: 100%; /* Permite que ocupe todo el ancho en móvil */
}

.plan-cta-wrapper .cta-big:hover {
    transform: translateY(-5px);
}



/* Botones y CTA */
.btn-cta, .btn-principal, .btn-cta-alt {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 30px; /* Bordes más redondeados */
    /*text-transform: uppercase;*/
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    letter-spacing: 0.5px;
    font-size: 0.95em;
}

.btn-principal {
    background-color: var(--color-principal);
    color: var(--color-texto-claro);
    box-shadow: 0 8px 15px rgba(0, 128, 128, 0.2);
}

.btn-principal:hover {
    background-color: #26b2d5; /* Tono más oscuro de turquesa */
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(0, 128, 128, 0.3);
}

.btn-cta {
    background-color: var(--color-smart);
    color: var(--color-texto-claro);
    
}

.btn-cta:hover {
    background-color:#26b2d5;
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(105, 105, 105, 0.3);
}

.btn-cta-alt {
    background-color: transparent;
    border: 2px solid var(--color-principal);
    color: var(--color-principal);
    box-shadow: 0 4px 10px rgba(0, 128, 128, 0.1);
}

.btn-cta-alt:hover {
    background-color: var(--color-principal);
    color: var(--color-texto-claro);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 128, 128, 0.2);
}

body.no-scroll {
    overflow: hidden !important;
    position: fixed; /* Asegura que el scroll se detenga inmediatamente */
    width: 100%;
    height: 100vh;
}
/* Header/Navbar */
header {
    background-color: rgba(117, 207, 240, 0.5);
    padding: 18px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    /*position: sticky;*/
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 2em;
    font-weight: bold;
}

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 25px; /* Opcional: mejora el espaciado */
}

.nav-desktop a {
    margin-left: 25px;
    color: var(--color-texto-oscuro);
    font-weight: 700;
    font-size: 0.95em;
    position: relative;
}

.nav-desktop a:hover {
    color: var(--color-titulos);
    font-weight: 1200;
}

.nav-desktop a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--color-principal);
    bottom: -5px;
    left: 0;
    transition: width 0.3s ease-in-out;
}

.nav-desktop a:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none; /* Oculto por defecto en desktop */
    font-size: 1.8em;
    cursor: pointer;
    color: var(--color-principal);
}

/* Mobile Nav (Hamburguer Menu) */
.nav-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;      /* Horizontally centers content */
    padding-top: 2rem;        /* Give some space from the top */
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px); /* Fills the screen below the header */
    background-color: rgb(210, 243, 255); /* Solid background color */
    z-index: 999;
    overflow-y: auto;         /* Allow scrolling if content overflows */
    
    /* Animation properties */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0s 0.4s;
}

/* Find and replace this rule */
.nav-mobile.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}


.nav-mobile a {
    color: var(--color-texto-oscuro);
    font-weight: 700;
    font-size: 1.1em; /* Slightly smaller font for better touch interaction */
    padding: 16px 0;    /* Reduced spacing between links */
    text-align: center;
}

.nav-mobile a:last-child {
    border-bottom: none;
    margin-top: 15px;
}

.nav-mobile a.btn-cta {
    /* Re-apply button styling */
    background-color: var(--color-principal);
    color: var(--color-texto-claro);
    border-radius: 30px;
    padding: 14px 28px; /* Consistent padding */
    margin-top: 20px; /* Space above the button */
    width: auto; /* Allow the button to size to its content */
}

/* Sección Alternativa (Ej. Housing o Planes) */
.section-alt {
    background-color: rgba(117, 207, 240, 0.5);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Housing Grid */
.housing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.benefit-card {
    background-color: var(--color-texto-claro);
    padding: 35px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-bottom: 6px solid var(--color-accent); /* Borde con color de acento */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.benefit-card i {
    font-size: 3.5em;
    color: var(--color-principal); /* Usamos el color principal para los iconos */
    margin-bottom: 20px;
}

.benefit-card h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: var(--color-texto-oscuro);
}

.benefit-card p {
    color: #555;
    font-size: 1em;
}

/* Features Grid (Funcionalidades) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}


.feature-item {
    padding: 30px;
    border-left: 6px solid var(--color-celeste); /* Borde distintivo con el celeste */
    background-color: var(--color-terciario-bg);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
}

.feature-item:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.feature-item i {
    font-size: 2.5em;
    color: var(--color-celeste); /* Iconos en celeste */
    margin-bottom: 15px;
}

/* --- Corrección de etiqueta <icons> en HTML --- */
.feature-item img,
.feature-item .feature-icon-container img {
    width: 70px; /* Tamaño fijo para íconos/gifs */
    height: auto;
    margin-bottom: 15px;
    display: block;
    margin-left: 0; /* Asegurar alineación izquierda si es necesario */
    text-align: center;
}
/* ----------------------------------------------- */

.feature-item h3 {
    font-size: 1.3em;
    margin-bottom: 8px;
    color: var(--color-titulos);
}

.feature-item p {
    color: #555;
    font-size: 0.95em;
}


/* --- ESTILOS PARA LA SECCIÓN DE ESTADÍSTICAS --- */

#contador-confianza {
    background-color: white; /* Fondo más claro o el que uses */
    padding: 80px 5%;
    text-align: center;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
}

.stat-item {
    flex: 0 1 600px; /* Controla el ancho de cada tarjeta */
    padding: 30px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.stat-number {
    font-size: 4em;
    font-weight: 700;
    color: var(--color-principal); /* Usando el color verde principal */
    line-height: 1;
    margin-bottom: 10px;
}

.stat-number span {
    display: inline-block;
    min-width: 60px; /* Evita que el texto salte durante el conteo */
}

.stat-description {
    /* 1. Aumento de Tamaño y Peso */
    text-align: center;
    font-size: 1.25em; /* Aumenta el tamaño ligeramente */
    font-weight: 500; /* Le da más cuerpo que el texto normal */
    line-height: 1.4; /* Mejora la legibilidad si el texto es largo */
    
    /* 2. Color */
    color: var(--color-texto-oscuro); /* Usar el color oscuro principal para contraste */
    
    /* 3. Márgenes y Posicionamiento */
    margin-top: 15px; /* Separación del número de arriba */
}

.stat-description b {
    color: var(--color-principal); /* Utiliza el color verde de tu marca */
    font-weight: 700;
}







/* Responsive para móviles */
@media (max-width: 768px) {
    .stats-grid {
        flex-direction: column;
        gap: 30px;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }
    
 .stat-item {
        /* Permite que la tarjeta ocupe el 100% del espacio disponible */
        flex: 1 1 100%; 
        width: 100%; /* Asegura que ocupe todo el espacio */
        /* Reducir el padding interno para hacerlas menos voluminosas */
        padding: 20px; 
    }
}

/* SECCIÓN DE VIDEOS */
.section-videos {
    background-color: var(--color-celeste); /* Fondo oscuro para destacar los videos */
    color: var(--color-texto-claro);
    text-align: center;
}

.section-videos h2 {
    color: var(--color-texto-claro);
}

.section-videos h2::after {
    background-color: var(--color-celeste);
}

.video-intro {
    font-size: 1.1em;
    margin-bottom: 40px;
    color: var(--color-celeste);
}

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

.video-card {
    background-color: #3a4b5c; /* Un gris azulado oscuro para las tarjetas de video */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.video-placeholder {
    width: 100%;
    height: 180px; /* Altura fija para el placeholder de video */
    background-color: #555;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: var(--color-texto-claro);
    font-size: 1.1em;
    font-weight: 500;
}

.video-placeholder i {
    font-size: 3.5em;
    color: var(--color-celeste); /* Icono de play en celeste */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
    opacity: 0.9;
}

.video-placeholder:hover i {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}

.video-placeholder span {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0,0,0,0.6);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9em;
    color: var(--color-texto-claro);
}

.video-card h3 {
    font-size: 1.25em;
    color: var(--color-celeste);
    margin-bottom: 10px;
}

.video-card p {
    font-size: 0.95em;
    color: #ccc;
}


/* Tabla de Precios */
.plan-note {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1em;
    color: #444;
}

.price-table {
    display: flex;
    /*flex-wrap: wrap;*/
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
}

.plan-card {
    background-color: var(--color-texto-claro);
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    /*width: 600px;
    max-width: 300px;*/
    flex: 1;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    position: relative; 
    cursor: pointer;
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.plan-card:hover {
    transform: translateY(-8px); /* Ya tenías este hover en el original, lo reafirmo */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Asegura que el enlace está sobre el contenido de la tarjeta */
}

.plan-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.plan-card h3 {
    color: var(--color-principal);
    font-size: 1.8em;
    margin-bottom: 20px;
    position: relative;
}

.plan-card h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--color-verde); /* Línea verde para destacar */
    border-radius: 2px;
}

.plan-card h3 span {
    display: block;
}

.plan-card .price {
    font-size: 3em;
    font-weight: bold;
    color: var(--color-texto-oscuro);
    margin-bottom: 25px;
}

.plan-card .price .period {
    font-size: 0.5em;
    font-weight: normal;
    color: var(--color-info);
}

.plan-card .features {
    text-align: left;
    margin-bottom: 30px;
    /* Corrección para que los <p> reemplacen a <c> y se muestren como lista */
    display: flex; 
    flex-direction: column;
    flex-grow: 1; /* Este elemento crece y empuja el precio */
}

.plan-card .features p { /* Se reemplazó el selector .plan-card .features c */
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Asegura que el contenido está a la izquierda */
}

.plan-card .features p:last-child {
    border-bottom: none;
}

.plan-card .features i {
    margin-right: 12px;
}

.fa-check-circle { color: var(--color-verde); } /* Checks en verde */
.fa-times-circle { color: #ccc; } /* Tachas en gris claro */

/* Propiedad de Datos */
.data-info {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--color-terciario-bg);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-left: 8px solid var(--color-celeste); /* Borde distintivo en celeste */
}

.data-info p {
    margin-bottom: 18px;
    font-size: 1.05em;
    color: #444;
}

.data-info i {
    margin-right: 15px;
    color: var(--color-principal);
    font-size: 1.3em;
}

/* Contacto / Formulario */
.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto 50px auto;
    align-items: flex-start;
}

.contact-info, .contact-form {
    flex: 1;
    /*min-width: 320px;*/
}

.contact-info p {
    font-size: 1.15em;
    margin-bottom: 18px;
    color: #333;
    overflow-wrap: break-word;
    word-break: break-word;
}

.contact-info i {
    margin-right: 15px;
    color: var(--color-principal);
    font-size: 1.3em;
}

.contact-form {
    background-color: var(--color-texto-claro);
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fdfdfd;
    color: #333;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--color-principal);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form button {
    width: 100%;
}

footer {
    background-color: rgba(117, 207, 240, 0.5);
    padding: 30px 5%; 
    display: block; 
    box-shadow: 0 -3px 8px rgba(0,0,0,0.05); 
}

.footer-container {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
    color: var(--color-texto-oscuro);
}

.footer-logos {
    flex: 1.5; 
    min-width: 250px;
    text-align: left;
}

/* --- NUEVAS REGLAS PARA AGRUPAR Y ALINEAR LOS LOGOS --- */
.logo-group {
    display: flex;
    align-items: center; /* Alinea logos verticalmente */
    gap: 15px; /* Espacio entre los dos logos */
    margin-bottom: 5px;
}
/* -------------------------------------------------------- */

.logo-libra {
    max-width: 100px; /* Tamaño del logo LIBRA */
    height: auto;
    display: block;
}

.logo-smartinfo {
    max-width: 120px; /* Tamaño del logo SMARTINFO (GIF) */
    height: auto;
    display: block;
}

.footer-logos p {
    font-size: 0.9em;
    color: var(--color-info);
    margin-top: 15px; /* Espacio debajo de los logos */
    text-align: left;
}

.footer-info {
    flex: 1;
    text-align: right;
    font-size: 1em;
}

.footer-info p {
    margin: 5px 0;
    text-align: right;
}

.footer-info i {
    margin-right: 8px;
    color: var(--color-principal); 
}



/* === TRANSICIONES (Animations/Visibility) === */

/* Clases de Observador de Intersección */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out; }
.slide-up { opacity: 0; transform: translateY(60px); transition: opacity 1s ease-out, transform 1s ease-out; }
.slide-in-left { opacity: 0; transform: translateX(-80px); transition: opacity 1s ease-out, transform 1s ease-out; }
.slide-in-right { opacity: 0; transform: translateX(80px); transition: opacity 1s ease-out, transform 1s ease-out; }
.is-visible { opacity: 1; transform: none; }


/* === MEDIA QUERIES (Responsiveness) === */

@media (max-width: 1024px) {
    .carousel-slide .slide-content {
        max-width: 90%;
        margin: 0 auto;
        padding-right: 0;
        padding-left: 20px; 
    }
    .hero {
        gap: 40px;
        flex-direction: column-reverse; /* Imagen arriba en tablets */
        text-align: center;
    }
    .hero-content {
        max-width: 800px;
    }
    .hero-content h1 {
        font-size: 2.5em;
    }
    .hero-image {
        max-width: 800px;
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    h1 { font-size: 2em; }
    h2 { font-size: 2em; margin-bottom: 30px;}
    h2::after { width: 60px; height: 3px; }

    .logo { font-size: 1.8em; }

    /* Ocultar menú desktop y mostrar toggle */
    .nav-desktop { display: none; }
    .menu-toggle { display: block; }
    .nav-mobile {
        top: 65px;
        height: calc(100vh - 65px); /* Adjust height for smaller header */
    } 

    .hero-content p {
        font-size: 1.05em;
    }
    



    /* AJUSTES PARA GRIDS: 2 COLUMNAS */
    .housing-grid, .features-grid, .video-grid {
        grid-template-columns: repeat(1, 1fr); 
        gap: 15px; /* Reduje el gap */
        padding: 0 5px; /* Añade un pequeño padding */
    }

    /* LIMPIEZA DE MARGEN Y ANCHO PARA ITEMS DE GRID EN 2 COLUMNAS */
    .benefit-card, .feature-item, .video-card {
        max-width: none; 
        margin: 0; /* Limpieza agresiva de márgenes */
        padding: 20px; /* Reduje el padding interno para dar más espacio */
    }

    /* Contacto */
    .contact-container {
        flex-direction: column;
        gap: 30px;
    }

    .contact-info {
        text-align: center;
    }
    
    /* Precios */
    .price-table {
        
        flex-direction: column;
        align-items: center;
        width: 100%; /* Aseguramos que la tabla solo tome el ancho disponible */
        max-width: 400px; /* Limitamos el ancho para centrarlo y evitar desbordamiento */
        margin-left: auto;
        margin-right: auto;
    }

    .plan-card {
        max-width: 100%;
        width: 100%;
        padding: 25px;

    }

    .video-placeholder {
        height: 200px; /* Reducir altura de videos */
    }

    /* FLECHAS OCULTAS */
    .carousel-arrow {
        display: none !important; 
    }
    
    .carousel-dots {
        bottom: 15px; /* Más cerca del final de la sección */
    }

    .footer-container {
        flex-direction: column; 
        align-items: center;
    }

    .footer-logos {
        text-align: center !important;
        width: 100%;
        margin-bottom: 25px; /* Espacio entre el bloque superior y el de info */
    }
    
    /* CENTRADO DE LOS LOGOS EN MÓVIL */
    .logo-group {
        justify-content: center; /* Centra el grupo de logos horizontalmente */
    }

    .footer-logos p {
        text-align: center !important; /* Centra el texto de copyright */
    }

    .footer-info {
        text-align: center !important;
        width: 100%;
    }

    .footer-info p {
        text-align: center;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .carousel-slide .slide-content h1 {
        font-size: 1.8em;
    }
    .carousel-slide .slide-content p {
        font-size: 0.95em;
    }
    .elegant-btn {
        width: 100%;
    }
}

.fix {
    min-height: initial; /* Resets the minimum height */
    display: block;      /* Overrides flexbox behavior */
}

/* Ensures the image inside the modified container scales correctly */
.fix img {
    height: auto;        /* Allows image height to adjust based on its width */
}

/* ================================================== */
/* === CARRUSEL DE VIDEOS ELEGANTE (MODIFICADO PARA VIDEO FIJO) === */
/* ================================================== */

/* Ajustes de variables para el carrusel elegante */
:root {
    --elegant-bg-color: #ffffff; /* Fondo blanco */
    --elegant-text-color: var(--color-titulos); /* Usamos su color de títulos para contraste */
    --elegant-accent-color: var(--color-principal); /* Su color principal para acentos */
    --elegant-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Sombra sutil */
    --dot-inactive-color-light: #cccccc;
}

.elegant-video-carousel {
    background-color: var(--elegant-bg-color); /* Fondo blanco */
    padding: 0; /* Quitamos el padding de la sección general */
    min-height: 90vh; /* Un poco más de altura */
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: var(--elegant-shadow);
}

/* --- REGLA CLAVE: Video fijo de fondo --- */
.slide-video.fixed-video {
    position: absolute; 
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; /* Bajo, para estar detrás del contenido */
    transform: translate(-50%, -50%);
    background-size: cover;
    filter: brightness(0.7) grayscale(0.2); 
    object-fit: cover;
}


/* Reglas Generales del Carrusel (se aplican por defecto en escritorio) */
/* (Reemplaza las reglas de .slide-video.fixed-video que tenías antes por estas) */

.slide-video {
    /* Estilos base para posicionamiento y tamaño */
    position: absolute; 
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(0.7) grayscale(0.2); 
}

.desktop-video {
    display: block; /* Visible por defecto en escritorio */
}

.mobile-video {
    display: none; /* Oculto por defecto en escritorio */
}
/* --- REGLA CLAVE: Overlay fijo de fondo --- */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.0) 100%);
    z-index: 2; /* Sobre el video (1) */
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1);
    position: relative; /* Esencial para el z-index */
    z-index: 3; /* Sobre el overlay (2) */
}

/* CAMBIO CLAVE: Usa 100vw para el ancho del slide */
.carousel-slide {
    flex-shrink: 0;
    width: 100vw; /* Asegura que toma el ancho exacto del viewport */
    min-height: 90vh; /* Se mantiene para que el track mantenga la altura */
    display: flex;
    align-items: center;
    justify-content: left;
    position: relative;
    padding: var(--padding-section);
    box-sizing: border-box; /* Asegura que el padding se incluye en el 100vw */
}

/* Contenido del Slide sobre el video */
.carousel-slide .slide-content {
    position: relative;
    z-index: 4; /* Sobre el track (3) */
    flex: 1;
    max-width: 650px; /* Un poco más de espacio para el texto */
    text-align: left;
    padding-right: 50px; /* Separación del video */
}

.carousel-slide .slide-content h1 {
    font-size: 3em; /* Título más grande */
    line-height: 1.1;
    color: var(--elegant-text-color);
    margin-bottom: 25px;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.1); /* Sombra sutil para legibilidad */
    /* Animación de texto más elegante */
    animation: text-appear 1s ease-out forwards;
}

.carousel-slide .slide-content p {
    font-size: 1.4em; /* Párrafo más grande */
    margin-bottom: 40px;
    color: #444;
    text-align: left;
    animation: text-appear 1.2s ease-out 0.2s forwards;
    opacity: 0; /* Inicialmente oculto para la animación */
}

/* Animación para el texto que aparece */
@keyframes text-appear {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Botón con estilo elegante */
.elegant-btn {
    background-color: var(--elegant-accent-color);
    color: var(--color-texto-claro);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: none;
    padding: 16px 32px;
    font-size: 1.05em;
    font-weight: 600;
    letter-spacing: 0.8px;
    animation: btn-appear 1.4s ease-out 0.4s forwards;
    opacity: 0;
}

.elegant-btn:hover {
    background-color:#26b2d5; /* Un tono más oscuro de su color principal */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-5px);
}

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

/* Flechas de Navegación */
.carousel-arrow {
    display: none !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7); /* Fondo semi-transparente blanco */
    border: 1px solid rgba(0,0,0,0.1);
    color: var(--elegant-accent-color); /* Color de su marca para las flechas */
    padding: 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.8em; /* Flechas un poco más grandes */
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.carousel-arrow:hover {
    background-color: var(--elegant-accent-color);
    color: var(--color-texto-claro);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.prev { left: 30px; }
.next { right: 30px; }

/* Puntos de Navegación */
.carousel-dots {
    position: absolute;
    bottom: 40px; /* Un poco más arriba */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px; /* Más espacio entre puntos */
    z-index: 10;
}

.dot {
    height: 14px; /* Puntos un poco más grandes */
    width: 14px;
    background-color: var(--dot-inactive-color-light);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    border: 1px solid rgba(0,0,0,0.1);
}

.dot.active {
    background-color: var(--elegant-accent-color); /* Punto activo con su color principal */
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0,128,128,0.5); /* Brillo sutil */
}


/* Media Queries para el Carrusel de Videos */
@media (max-width: 1024px) {
    .carousel-slide {
        flex-direction: column-reverse; /* Contenido arriba, video abajo */
        text-align: center;
        gap: 30px;
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 80px;
    }
    .carousel-slide .slide-content {
        max-width: 90%;
        margin: 0 auto;
        padding-right: 0;
    }
 
    .carousel-slide .slide-content p {
        text-align: center;
        font-size: 1.2em;
    }
    .slide-overlay {
        /* Degradado en vertical para móvil */
        background: linear-gradient(to top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.0) 100%);
    }
    .carousel-arrow {
        padding: 12px;
        font-size: 1.5em;
    }
    .desktop-video {
        display: none !important; /* Oculta el video de escritorio */
    }

    .mobile-video {
        display: block !important; /* Muestra el video móvil */
        
        /* Ajuste de posición del video móvil para que ocupe todo el fondo */
        position: absolute;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%) scale(0.95);
        object-fit: contain;
   
     
    }
}
@media (max-width: 768px) {
    .carousel-slide .slide-content h1 {
        font-size: 2.2em;
    }
    .carousel-slide .slide-content p {
        font-size: 1.05em;
    }
    .elegant-btn {
        padding: 12px 25px;
        font-size: 0.95em;
    }
    
    .carousel-dots {
        bottom: 15px; /* Más cerca del final de la sección */
    }
    
    h1 { font-size: 2em; }
    h2 { font-size: 2em; margin-bottom: 30px;}
}
@media (max-width: 480px) {
    .carousel-slide .slide-content h1 {
        font-size: 1.8em;
    }
    .carousel-slide .slide-content p {
        font-size: 0.95em;
    }
    .elegant-btn {
        width: 100%;
    }
}

.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.video-modal-content {
    background: #111;
    padding: 10px;
    border-radius: 10px;
    max-width: 90%;
    width: 1100px;
    position: relative;
    animation: fadeIn 0.3s ease;
}

#videoPlayer {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.close-modal {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #fff;
    color: #000;
    width: 30px;
    height: 30px;
    display: flex;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}




@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.video-placeholder {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
}

.thumb-video {
    width: 100%;
    height: 200px;
    object-fit: cover;
    pointer-events: none;
    border-radius: 10px;
}
.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    transition: .2s;
}
.play-overlay i {
    font-size: 50px;
    color: #88c8e8;
}
.play-overlay span {
    margin-top: 10px;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
}
.video-placeholder:hover .play-overlay {
    background: rgba(0,0,0,0.35);
}