/*
Theme Name: invitea
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Jorge Luis Martinez de Alegría
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.3.0.1741294686
Updated: 2025-03-06 20:58:06

*/

/* Estilos para navegadores basados en WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 10px; /* Ancho de la barra */
}

::-webkit-scrollbar-track {
    background: #FFE3DC; /* Color de fondo de la pista */
}

::-webkit-scrollbar-thumb {
    background: #E6AA9C; /* Color del "pulgar" de la barra */
    border-radius: 5px; /* Bordes redondeados */
}

::-webkit-scrollbar-thumb:hover {
    background: #34312E; /* Color al pasar el mouse */
}

/* Cambiar el color de las flechas en la barra de desplazamiento */
::-webkit-scrollbar-button {
    background-color: #E6AA9C; /* Color del botón de las flechas */
    border-radius: 5px;
}

/* Cambiar el color al pasar el mouse */
::-webkit-scrollbar-button:hover {
    background-color: #34312E;
}

/* Para Firefox */
html {
    scrollbar-color: #E6AA9C #FFE3DC; /* Color del "pulgar" y de la pista */
    scrollbar-width: thin; /* Ancho más delgado */
}

/* Cuadro comparativo de planes */
/* Contenedor de la tabla */
.table-container {
    width: 100%;
    overflow-x: auto; /* Permite desplazamiento horizontal en móviles */
}

/* Estilos de la tabla */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px; /* Evita que la tabla se achique demasiado */
}

/* Encabezado de la tabla */
.custom-table thead {
    background-color: #9982B7;
    color: #FFFFFF; /* Color blanco para los títulos */
}

/* Estilo de las celdas */
.custom-table th, 
.custom-table td {
    border: 1px solid #9982B7; /* Filete color #9982B7 */
    padding: 10px;
    text-align: center;
    color: #34312E; /* Color del texto en la tabla */
}

/* Estilo de la primera columna (Características) */
.custom-table tbody td:first-child {
    text-align: left; /* Alineado a la izquierda */
    font-weight: bold;
    padding-left: 15px;
    background-color: #FFFAF9;
}

/* Encabezados fijos en la parte superior */
.custom-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    color: #FFFFFF; /* Asegura que los títulos sean blancos */
}

/* Fijar la primera columna en móviles */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        position: relative;
    }

    .custom-table thead th:first-child,
    .custom-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 20;
        background-color: #FFFAF9; /* Asegura que no se superponga */
        border-right: 1px solid #9982B7; /* Mantiene el filete separador */
    }

    /* Ajuste para mejorar la experiencia en móviles */
    .custom-table tbody td:first-child {
        min-width: 150px;
    }
}