/* ====================== PROPIEDADES PERSONALIZADAS (VARIABLES) ====================== */
/* Aquí definimos colores y valores reutilizables en todo el sitio */
:root {
    --psi-plastic-primary: #1a73e8;     /* Azul vibrante - Color principal de la marca */
    --psi-plastic-secondary: #f5f6f5;   /* Gris claro - Fondo de tarjetas y secciones */
    --psi-plastic-accent: #34c759;      /* Verde - Color de acento (hover, botones) */
    --psi-plastic-text: #333;           /* Texto oscuro - Color principal del texto */
    --psi-plastic-border: #cadc47ff;    /* Amarillo lima - Bordes y acentos importantes */
    --psi-plastic-bordes-otro-color: #ffffffff; /* Blanco - Bordes secundarios */
    --psi-plastic-animation-duration: 2.5s; /* Duración de animaciones de carga */
}

/* ====================== ESTILOS GENERALES ====================== */
body {
    margin: 0;                          /* Elimina el margen por defecto del navegador */
    font-family: 'Montserrat', sans-serif; /* Fuente principal del sitio */
    font-weight: 400;                   /* Grosor normal del texto */
    color: var(--psi-plastic-text);     /* Color de texto por defecto */
    background-color: #fff;             /* Fondo blanco de toda la página */
}

/* ====================== ENCABEZADO (HEADER) ====================== */
.site-header {
    background: linear-gradient(180deg, #3B3B3B 0%, #000000 100%); /* Degradado oscuro de arriba hacia abajo */
    border-bottom: 4px solid var(--psi-plastic-border); /* Borde inferior amarillo */
    box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.23); /* Sombra suave debajo del header */
    width: 100%;                            /* Ocupa todo el ancho de la pantalla */
    min-height: 80px;                       /* Altura mínima del header */
    padding: 15px 25px;                     /* Espacio interno (arriba/abajo y lados) */
    display: flex;                          /* Activa Flexbox para alinear elementos en fila */
    align-items: center;                    /* Centra verticalmente todos los elementos del header */
    justify-content: space-between;         /* Logo a la izquierda, toggle a la derecha */
    position: sticky;                       /* Se queda pegado arriba cuando haces scroll */
    top: 0;                                 /* Pegado al borde superior de la ventana */
    z-index: 1000;                          /* Siempre aparece por encima de otros elementos */
}

.site-branding {
    display: flex;                          /* Permite centrar el logo verticalmente */
    align-items: center;                    /* Centra verticalmente el logo */
    flex-shrink: 0;                         /* Evita que el logo se encoja */
}

.site-branding .site-logo img {
    max-width: 220px;                       /* Ancho máximo del logo */
    height: auto;                           /* Mantiene la proporción original */
    display: block;                         /* Evita espacio extra debajo de la imagen */
    transition: transform 0.3s ease;        /* Suaviza la animación al hacer hover */
}

.site-branding .site-logo img:hover {
    transform: scale(1.05);                 /* Hace zoom suave al pasar el mouse */
}

/* ====================== NAVEGACIÓN PRINCIPAL (DESKTOP) ====================== */
.site-navigation {
    display: flex;                          /* Activa Flexbox */
    align-items: center;                    /* Centra verticalmente los enlaces */
    justify-content: center;                /* Centra horizontalmente el menú */
    width: auto;
    flex-grow: 1;                           /* Ocupa todo el espacio disponible entre logo y toggle */
}

.site-navigation ul.menu {
    list-style-type: none;                  /* Quita los puntos de la lista */
    padding: 0;                             /* Elimina padding por defecto */
    margin: 0;                              /* Elimina margen por defecto */
    display: flex;                          /* Coloca los items de menú en fila */
    flex-wrap: wrap;                        /* Permite que se salten de línea si es necesario */
    justify-content: space-evenly;          /* Distribuye los enlaces con espacio uniforme */
    width: 100%;
}

.site-navigation ul.menu li {
    position: relative;                     /* Necesario para que el submenú se posicione correctamente */
}

.site-navigation ul.menu li a {
    display: block;                         /* Hace que todo el área del enlace sea clickeable */
    padding: 15px 12px;                     /* Espacio interno alrededor del texto */
    color: #FFFFFF;
    text-decoration: none;                  /* Quita el subrayado típico de los enlaces */
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;              /* Convierte el texto a mayúsculas */
    transition: color 0.3s, background-color 0.3s, transform 0.3s; /* Suaviza los cambios */
}

/* Efecto al pasar el mouse o estar activo */
.site-navigation ul.menu li a:hover,
.site-navigation ul.menu li a:focus,
.site-navigation ul.menu li.current-menu-item a {
    color: var(--psi-plastic-border);
    background-color: rgba(202, 220, 71, 0.1);
    transform: translateY(-2px);            /* Levanta ligeramente el enlace */
}

/* ====================== SUBMENÚ ====================== */
.site-navigation ul.menu li.menu-item-has-children::after {
    content: "▾";                          /* Flecha hacia abajo */
    font-size: 1.2em;
    color: #FFFFFF;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.site-navigation ul.menu li ul.sub-menu {
    display: none;                          /* Oculto por defecto */
    position: absolute;                     /* Se posiciona respecto al elemento padre */
    top: 100%;                              /* Justo debajo del enlace principal */
    left: 0;
    background: #252525;
    min-width: 200px;
    z-index: 1000;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 8px 8px;
}

.site-navigation ul.menu li:hover > ul.sub-menu {
    display: block;                         /* Muestra el submenú al pasar el mouse */
}

/* ====================== TOGGLE / BOTÓN HAMBURGUESA (MÓVIL) ====================== */

/* Contenedor del botón hamburguesa */
.site-navigation-toggle-holder {
    display: none;                          /* Oculto por defecto - Solo se mostrará en móviles mediante media queries */
    align-items: center;                    /* Centra verticalmente el botón dentro del contenedor */
    justify-content: left;                /* Centra horizontalmente el botón dentro del contenedor */
    margin-left: auto;                      /* Empuja el contenedor hacia la derecha usando Flexbox */
    margin-right: 10px;                     /* Añade un pequeño espacio desde el borde derecho del header */
    z-index: 10003;                         /* Muy alta prioridad para que esté por encima del menú desplegable */
}

/* El botón hamburguesa en sí */
.site-navigation-toggle {
    display: flex;                          /* Activa Flexbox para centrar el icono fácilmente */
    align-items: center;                    /* Centra verticalmente el icono dentro del botón */
    justify-content: center;                /* Centra horizontalmente el icono dentro del botón */
    padding: 0.5rem;                        /* Espacio interno alrededor del icono (mejora el área clickeable) */
    cursor: pointer;                        /* Cambia el cursor a mano para indicar que es clickeable */
    border: 0;                              /* Elimina cualquier borde por defecto del botón */
    background-color: transparent;          /* Fondo transparente (sin color) */
    color: var(--psi-plastic-border);       /* Color del icono (amarillo definido en las variables) */
    width: 45px;                            /* Ancho fijo del botón */
    height: 45px;                           /* Alto fijo del botón (cuadrado) */
    z-index: 10003;                         /* Alta prioridad para que esté por encima de otros elementos */
}

/* Efecto al pasar el mouse sobre el botón */
.site-navigation-toggle:hover {
    color: var(--psi-plastic-accent);       /* Cambia el color del icono a verde cuando se pasa el mouse */
}

/* ====================== ICONO HAMBURGUESA (las 3 líneas) ====================== */

/* Línea central del icono hamburguesa */
.site-navigation-toggle-icon {
    display: block;                         /* Hace que la línea sea un bloque */
    width: 25px;                            /* Ancho de la línea central */
    height: 3px;                            /* Grosor de la línea */
    background-color: currentColor;         /* Usa el color actual del padre (hereda el color) */
    position: relative;                     /* Necesario para posicionar las otras dos líneas con ::before y ::after */
    transition: all 0.3s ease-in-out;       /* Suaviza la animación al cambiar de hamburguesa a X */
}

/* Línea superior e inferior del icono hamburguesa */
.site-navigation-toggle-icon::before,
.site-navigation-toggle-icon::after {
    content: "";                            /* Crea un elemento vacío para dibujar las líneas */
    background-color: currentColor;         /* Hereda el color del icono */
    display: block;                         /* Las líneas se comportan como bloques */
    height: 3px;                            /* Grosor de las líneas superior e inferior */
    width: 25px;                            /* Ancho igual al de la línea central */
    position: absolute;                     /* Posiciona las líneas respecto al icono principal */
    left: 0;                                /* Las alinea al borde izquierdo */
    transition: all 0.3s ease-in-out;       /* Suaviza la animación de transformación */
}

/* Posición de la línea superior */
.site-navigation-toggle-icon::before { 
    top: -8px;                              /* Coloca la línea 8px por encima de la línea central */
}

/* Posición de la línea inferior */
.site-navigation-toggle-icon::after  { 
    top: 8px;                               /* Coloca la línea 8px por debajo de la línea central */
}

/* ====================== ESTADO ABIERTO (Conversión a "X") ====================== */

/* Cuando el menú está abierto (aria-expanded="true") */
.site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon {
    background: transparent;                /* Oculta la línea central para formar la "X" */
}

/* Transforma la línea superior en la diagonal de la "X" */
.site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon::before {
    transform: rotate(45deg);               /* Rota 45 grados para formar una diagonal */
    top: 0;                                 /* La mueve al centro */
}

/* Transforma la línea inferior en la otra diagonal de la "X" */
.site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon::after {
    transform: rotate(-45deg);              /* Rota -45 grados (en sentido contrario) */
    top: 0;                                 /* La mueve al centro */
}

/* ====================== MENÚ DESPLEGABLE MÓVIL ====================== */

/* Contenedor principal del menú que se despliega en móviles */
.site-navigation-dropdown {
    position: fixed;                        /* Fija el menú respecto a la ventana del navegador (no se mueve al hacer scroll) */
    top: 100px;                              /* Lo posiciona justo debajo del header (80px es la altura aproximada del header) */
    left: 0;                                /* Lo alinea al borde izquierdo de la pantalla */
    width: 100%;                            /* Ocupa el 100% del ancho de la pantalla */
    background: #252525;                    /* Color de fondo oscuro del menú desplegable */
    z-index: 10001;                         /* Controla la capa (está por encima de casi todo el contenido) */
    max-height: 0;                          /* Altura máxima inicial = 0 (el menú está cerrado y oculto) */
    overflow: hidden;                       /* Oculta cualquier contenido que se salga del contenedor (importante para la animación) */
    transition: max-height 0.4s ease;       /* Suaviza la animación al abrir/cerrar el menú (duración 0.4 segundos) */
}

/* Regla que se activa cuando se pulsa el botón hamburguesa */
.site-navigation-toggle-holder.elementor-active ~ .site-navigation-dropdown {
    display: block !important;              /* Fuerza que el menú sea visible */
    transform: scaleY(1) !important;        /* Evita que se escale de forma extraña */
    max-height: 100vh !important;           /* Abre el menú ocupando casi toda la altura de la pantalla */
}

/* Estilos para la lista principal del menú dentro del dropdown */
.site-navigation-dropdown ul.menu {
    flex-direction: column;                 /* Coloca los elementos del menú uno debajo del otro (vertical) */
    width: 100%;                            /* Ocupa todo el ancho disponible */
    background: #252525;                    /* Fondo oscuro (igual que el contenedor) */
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /* Añade una sombra suave debajo del menú */
    padding: 10px 0;                        /* Espacio arriba y abajo del menú (10px) */
}

/* Estilos para cada enlace del menú móvil */
.site-navigation-dropdown ul.menu li a {
    padding: 18px 25px;                     /* Espacio interno grande para facilitar el toque con el dedo */
    color: #FFFFFF;                         /* Color del texto blanco */
    font-weight: 700;                       /* Texto en negrita */
    font-size: 16px;                        /* Tamaño de letra */
    text-transform: uppercase;              /* Convierte el texto a mayúsculas */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Sombra suave al texto para mejor legibilidad */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Línea separadora delgada debajo de cada enlace */
    display: block;                         /* Hace que todo el área del enlace sea clickeable */
    transition: all 0.3s ease;              /* Suaviza cualquier cambio (color, fondo, etc.) */
}

/* Efecto al pasar el mouse o cuando el enlace está activo */
.site-navigation-dropdown ul.menu li a:hover,
.site-navigation-dropdown ul.menu li.current-menu-item a {
    color: var(--psi-plastic-accent);       /* Cambia el color del texto al verde (acento) */
    background: rgba(52, 199, 89, 0.1);     /* Fondo verde muy suave */
}

/* Flecha que indica que el elemento tiene submenú */
.site-navigation-dropdown ul.menu li.menu-item-has-children::after {
    content: "▾";                          /* Inserta el símbolo de flecha hacia abajo */
    font-size: 1.2em;                       /* Tamaño de la flecha */
    color: #FFFFFF;                         /* Color blanco de la flecha */
    position: absolute;                     /* Posiciona la flecha de forma absoluta dentro del <li> */
    right: 25px;                            /* La coloca 25px desde el borde derecho */
    top: 50%;                               /* La alinea verticalmente en el centro */
    transform: translateY(-50%);            /* Ajuste fino para centrar perfectamente la flecha */
    pointer-events: none;                   /* Evita que la flecha capture clics (el clic va al enlace) */
}

/* Estilos para el submenú (los enlaces que están dentro de "Productos") */
.site-navigation-dropdown ul.menu li ul.sub-menu {
    background: #1e1e1e;                    /* Fondo más oscuro para diferenciar el submenú */
    padding-left: 20px;                     /* Indentación a la izquierda para mostrar jerarquía */
    
}

/* Estilos para cada enlace dentro del submenú */
.site-navigation-dropdown ul.menu li ul.sub-menu li a {
    padding: 15px 20px 15px 30px;           /* Más padding a la izquierda para mayor indentación */
    color: rgba(255, 255, 255, 0.9);        /* Texto blanco pero un poco más transparente */
    font-weight: 600;                       /* Texto semi-negrita */
    font-size: 14px;                        /* Texto más pequeño que los enlaces principales */
    text-transform: none;                   /* No convierte a mayúsculas (texto normal) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Línea separadora más sutil */
    
}

/* Efecto hover en los enlaces del submenú */
.site-navigation-dropdown ul.menu li ul.sub-menu li a:hover,
.site-navigation-dropdown ul.menu li ul.sub-menu li a:focus {
    color: var(--psi-plastic-accent);       /* Cambia a color verde al pasar el mouse */
    background: rgba(52, 199, 89, 0.1);     /* Fondo verde suave */
    transform: scale(1.05);                 /* Hace un pequeño zoom al enlace */
    
}

/* ====================== SECCIONES GENERALES ====================== */
.section {
    padding: 60px 30px;                     /* Espacio arriba/abajo y lados */
    max-width: 1200px;                      /* Ancho máximo del contenido */
    margin: 0 auto;                         /* Centra la sección horizontalmente */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); } /* Animación de entrada suave */
}

.section h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--psi-plastic-primary);
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--psi-plastic-text);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 20px;
}

/* Banner de inicio */
/* ====================== HERO BANNER ====================== */
.hero-banner {
    position: relative;
    width: 100%;
    height: 500px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj7vdrMMeW6RaK4O2Cqo_SkKVhKxlR8gRv_Q&s') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-banner h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
}

.hero-banner p {
    font-size: 18px;
    max-width: 600px;
}

.hero-banner a {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--psi-plastic-border);
    color: var(--psi-plastic-text);
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    margin-top: 20px;
    transition: transform 0.3s, background-color 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.hero-banner a:hover {
    background-color: var(--psi-plastic-accent);
    color: #fff;
    transform: scale(1.05);
}

/* ====================== PRODUCTOS - CUADRÍCULA ====================== */
.product-grid {
    display: grid;                          /* Activa el sistema de Grid */
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px)); 
    /* Crea columnas automáticas, cada una con mínimo 280px y máximo 320px */
    justify-content: center;                /* Centra toda la cuadrícula horizontalmente */
    gap: 20px;                              /* Espacio entre las tarjetas */
}

/* ====================== TARJETA DE PRODUCTO ====================== */

/* Estilos generales de la tarjeta de producto */
.product-card {
    background-color: var(--psi-plastic-secondary); /* Fondo gris claro definido en las variables */
    border: 2px solid var(--psi-plastic-bordes-otro-color); /* Borde blanco de 2px de grosor */
    border-radius: 8px;                     /* Redondea las esquinas de la tarjeta */
    padding: 15px;                          /* Espacio interno entre el borde y el contenido */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave debajo de la tarjeta */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación suave al hacer hover */
    text-align: center;                     /* Centra todo el texto y elementos dentro de la tarjeta */
}

/* Efecto cuando el usuario pasa el mouse sobre la tarjeta */
.product-card:hover {
    transform: translateY(-15px);            /* Levanta la tarjeta 5 píxeles hacia arriba */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Hace la sombra más grande y visible */
}

/* ====================== IMAGEN DENTRO DE LA TARJETA ====================== */

/* Estilos para la imagen principal del producto */
.product-card img {
    width: 100%;                            /* Ocupa todo el ancho disponible de la tarjeta */
    height: 200px;                          /* Altura fija de 200 píxeles */
    object-fit: cover;                      /* La imagen cubre todo el espacio (puede recortar partes) */
    border-radius: 6px;                     /* Redondea las esquinas de la imagen */
    margin-bottom: 10px;                    /* Espacio de 10px debajo de la imagen */
}

/* Título del producto */
.product-card h3 {
    font-size: 18px;                        /* Tamaño del título */
    font-weight: 600;                       /* Texto semi-negrita */
    color: var(--psi-plastic-primary);      /* Color azul principal de la marca */
    margin: 10px 0;                         /* Espacio arriba y abajo del título */
}

/* Descripción del producto */
.product-card p {
    font-size: 14px;                        /* Tamaño de letra más pequeño */
    color: var(--psi-plastic-text);         /* Color gris oscuro definido en variables */
    line-height: 1.5;                       /* Espaciado entre líneas (1.5 veces el tamaño de letra) */
}

/* ====================== CONTENEDOR DE IMAGEN CON NAVEGACIÓN ====================== */

/* Contenedor que envuelve la imagen y las flechas de navegación */
.product-card .image-container {
    position: relative;                     /* Importante: permite posicionar las flechas dentro de él */
    width: 100%;                            /* Ocupa todo el ancho de la tarjeta */
    height: 220px;                          /* Altura fija del contenedor de imagen */
    margin-bottom: 10px;                    /* Espacio debajo del contenedor */
}

/* Imagen principal dentro del contenedor */
.product-card .product-main-image {
    width: 100%;                            /* Ocupa todo el ancho del contenedor */
    height: 100%;                           /* Ocupa toda la altura del contenedor */
    object-fit: cover;                      /* La imagen llena el contenedor (puede recortar) */
    border-radius: 6px;                     /* Bordes redondeados de la imagen */
}

/* Contenedor de las flechas de navegación (izquierda y derecha) */
.product-card .image-nav {
    position: absolute;                     /* Se posiciona respecto al .image-container */
    top: 50%;                               /* Coloca las flechas en el centro vertical */
    width: 100%;                            /* Ocupa todo el ancho del contenedor */
    display: none;                          /* Oculto por defecto (solo aparece al hacer hover) */
    justify-content: space-between;         /* Coloca una flecha a la izquierda y otra a la derecha */
    transform: translateY(-50%);            /* Ajuste fino para centrarlas perfectamente */
    padding: 0 10px;                        /* Espacio a los lados para que no peguen en los bordes */
    box-sizing: border-box;                 /* Incluye el padding dentro del ancho total */
    z-index: 10;                            /* Asegura que las flechas estén por encima de la imagen */
}

/* Muestra las flechas cuando el usuario pasa el mouse sobre la tarjeta */
.product-card:hover .image-nav {
    display: flex;                          /* Cambia de none a flex para mostrar las flechas */
}

/* Estilos para las flechas (anterior y siguiente) */
.product-card .image-nav-prev,
.product-card .image-nav-next {
    width: 40px;                            /* Ancho del botón de flecha */
    height: 40px;                           /* Alto del botón de flecha (cuadrado) */
    background: var(--psi-plastic-primary); /* Fondo azul principal */
    color: #fff;                            /* Color del texto (la flecha) en blanco */
    border-radius: 50%;                     /* Hace el botón completamente circular */
    display: flex;                          /* Centra el contenido (la flecha) */
    align-items: center;                    /* Centra verticalmente */
    justify-content: center;                /* Centra horizontalmente */
    cursor: pointer;                        /* Cursor de mano al pasar sobre la flecha */
    font-size: 20px;                        /* Tamaño de la flecha */
    font-weight: 600;                       /* Hace la flecha más gruesa */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave del botón */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Animaciones suaves */
}

/* Efecto al pasar el mouse sobre las flechas */
.product-card .image-nav-prev:hover,
.product-card .image-nav-next:hover {
    background: var(--psi-plastic-accent);  /* Cambia el fondo a verde */
    transform: scale(1.1);                  /* Hace la flecha un 10% más grande */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más fuerte */
}

/* Margen adicional para la flecha izquierda */
.product-card .image-nav-prev {
    margin-left: 10px;                      /* Evita que la flecha izquierda pegue demasiado al borde */
}

/* Margen adicional para la flecha derecha */
.product-card .image-nav-next {
    margin-right: 10px;                     /* Evita que la flecha derecha pegue demasiado al borde */
}


/* Reglas generales de contenedores de imagen (usadas en otros lugares) */
.image-container {
    position: relative;
    width: 450px;
    height: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    overflow: hidden;                       /* Oculta lo que se salga del contenedor */
}

.product-video {
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1;
}

/* Regla general para .image-nav (usada en otros componentes) */
.image-nav {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: none;
    justify-content: space-between;
    z-index: 2;
    pointer-events: none;                   /* Permite hacer clic en la imagen debajo */
}

.image-nav-prev,
.image-nav-next {
    pointer-events: auto;                   /* Permite hacer clic en las flechas */
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    user-select: none;                      /* Evita que se seleccione el texto */
}

/* ====================== CARRUSEL DE CATEGORÍAS ====================== */
.swiper-container {
    width: 100%;
    padding: 20px 0;
}

.swiper-slide .ecs-loop-preview {
    margin: 0 auto;
    max-width: 300px;
}

.ecs-post-loop {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.ecs-post-loop .ast-article-single {
    background-color: var(--psi-plastic-secondary);
    border: 2px solid var(--psi-plastic-bordes-otro-color);
    border-radius: 8px;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ecs-loop-preview {
    height: 100%;
    width: 100%;
    background: var(--psi-plastic-secondary);
    border-radius: 6px;
    padding: 8px;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ecs-loop-preview:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.ecs-loop-preview h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--psi-plastic-primary);
    margin: 10px 0;
}

.ecs-loop-preview span {
    font-size: 14px;
    color: var(--psi-plastic-text);
    display: block;
    margin-bottom: 10px;
}

.ecs-loop-preview .ecs-image-holder {
    width: 100%;
    height: 150px;
    background-color: var(--psi-plastic-primary);
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.ecs-loop-preview:hover .ecs-image-holder {
    transform: scale(1.03);
}

.ecs-link-wrapper {
    cursor: pointer;
    display: block;
    text-align: center;
    padding: 10px;
    background-color: var(--psi-plastic-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.ecs-link-wrapper:hover {
    background-color: var(--psi-plastic-accent);
}



/* ====================== ESTILOS PARA CARGA DIFERIDA ====================== */
.elementor-editor-active .ecs-lazyload a,
.elementor-editor-preview .ecs-lazyload a {
    display: none;
}

.animation-hidden .ecs-lazy-load-animation {
    height: 0;
    visibility: hidden;
}


/* ====================== BARRA DE PROGRESO ====================== */
.barload-wrapper {
    width: 180px;
    height: 1em;
    position: relative;
    display: inline-block;
    font-size: 14px;
    padding: 8px;
    box-sizing: border-box;
    background-color: var(--psi-plastic-secondary);
    margin: 20px auto;
    border-radius: 4px;
}

.barload-border {
    border: 2px solid var(--psi-plastic-primary);
    height: 100%;
    width: 100%;
    position: relative;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 4px;
}

.barload-whitespace {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.barload-line {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--psi-plastic-accent);
    animation: barload-slide var(--psi-plastic-animation-duration) steps(40) infinite;
}

@keyframes barload-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ====================== ANIMACIÓN DE CUATRO BOLAS ====================== */
.ballsload-container {
    font-size: 14px;
    padding: 8px;
    position: relative;
    background-color: var(--psi-plastic-secondary);
    margin: 20px auto;
    border-radius: 4px;
}

.ballsload-container div {
    width: 1em;
    height: 1em;
    position: absolute;
    background-color: var(--psi-plastic-primary);
    top: 0;
    border-radius: 50%;
    animation: ballsload-move var(--psi-plastic-animation-duration) infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}

.ballsload-container div:nth-child(1) { animation-delay: 0ms; }
.ballsload-container div:nth-child(2) { animation-delay: 150ms; }
.ballsload-container div:nth-child(3) { animation-delay: 300ms; }
.ballsload-container div:nth-child(4) { animation-delay: 450ms; }

@keyframes ballsload-move {
    0% { left: 0; }
    100% { left: 100%; }
}

/* ====================== VIDEO CORPORATIVO ====================== */
.video-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: var(--psi-plastic-secondary);
    border: 2px solid var(--psi-plastic-border);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease forwards;
    animation-delay: 0.2s;
}

.video-container iframe {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.video-container:hover iframe {
    transform: scale(1.02);
}

.video-container h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--psi-plastic-primary);
    margin-bottom: 15px;
}

/* ====================== FORMULARIO DE CONTACTO ====================== */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: var(--psi-plastic-secondary);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--psi-plastic-primary);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 2px solid var(--psi-plastic-border);
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--psi-plastic-accent);
    outline: none;
}

.contact-form button {
    padding: 15px 30px;
    background-color: var(--psi-plastic-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-form button:hover {
    background-color: var(--psi-plastic-accent);
    transform: scale(1.05);
}

/* ====================== PIE DE PÁGINA ====================== */
.site-footer {
    background: #111;
    color: #fff;
    text-align: center;
    padding: 30px 20px;
    font-size: 14px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.social-links a {
    position: relative;
    font-size: 28px;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-links a::before,
.social-links a::after {
    content: none !important;
}

.social-links a[aria-label="Facebook"]:hover {
    color: #1877F2;
}

.social-links a[aria-label="WhatsApp"]:hover {
    color: #25D366;
}

.social-links a[aria-label="YouTube"]:hover {
    color: #FF0000;
}

/* ====================== COMPONENTES ADICIONALES ====================== */
/* Contenedor de imagen informativa */
.image-info-container {
    max-width: 800px;
    margin: 50px auto;
    background: var(--psi-plastic-secondary);
    border: 3px solid transparent;
    border-image: linear-gradient(to right, var(--psi-plastic-primary), var(--psi-plastic-accent)) 1;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-info-container:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.image-info-container img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* ====================== LISTA DE BENEFICIOS ====================== */
.benefits-list {
    display: grid;                          /* Activa el sistema de Grid Layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    /* Crea columnas automáticas: mínimo 300px por columna, y se ajusta según el espacio disponible */
    gap: 30px;                              /* Espacio entre cada tarjeta de beneficio */
    max-width: 1200px;                      /* Ancho máximo de la sección */
    margin: 50px auto;                      /* Centra la sección horizontalmente con margen superior */
}

.benefit-item {
    background: var(--psi-plastic-secondary);   /* Fondo gris claro */
    border: 2px solid var(--psi-plastic-bordes-otro-color); /* Borde blanco */
    border-radius: 12px;                    /* Bordes redondeados */
    padding: 30px;                          /* Espacio interno grande */
    text-align: center;                     /* Centra todo el contenido */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación suave al hover */
    opacity: 0;                             /* Inicialmente invisible */
    transform: translateY(20px);            /* Empieza 20px más abajo */
    animation: fadeIn 0.6s ease forwards;   /* Animación de entrada */
}

/* Retraso de animación para cada tarjeta (efecto escalonado) */
.benefit-item:nth-child(1) { animation-delay: 0.1s; }
.benefit-item:nth-child(2) { animation-delay: 0.2s; }
.benefit-item:nth-child(3) { animation-delay: 0.3s; }
.benefit-item:nth-child(4) { animation-delay: 0.4s; }


.benefit-item:hover {
    transform: translateY(-5px);            /* Levanta la tarjeta al pasar el mouse */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra más fuerte */
}

.benefit-item .icon {
    font-size: 50px;                        /* Tamaño grande del ícono */
    color: var(--psi-plastic-primary);      /* Color azul principal */
    margin-bottom: 20px;                    /* Espacio debajo del ícono */
}

.benefit-item h3 {
    font-size: 22px;
    font-weight: 700;                       /* Texto en negrita */
    color: var(--psi-plastic-primary);
    margin: 15px 0;
}

.benefit-item p {
    font-size: 16px;
    color: var(--psi-plastic-text);
    line-height: 1.6;                       /* Espaciado cómodo entre líneas */
}

/* ====================== LISTA DE PROCESO ====================== */
.process-list {
    max-width: 900px;                       /* Ancho máximo del contenedor */
    margin: 50px auto;                      /* Centrado horizontalmente */
}

.process-list ol {
    list-style: none;                       /* Quita los números por defecto */
    counter-reset: process-counter;         /* Reinicia el contador para numeración personalizada */
    padding: 0;                             /* Elimina padding por defecto */
}

.process-list li {
    counter-increment: process-counter;     /* Aumenta el número del contador */
    position: relative;                     /* Necesario para posicionar el número circular */
    padding-left: 70px;                     /* Espacio para el número a la izquierda */
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease forwards;
}

/* Retraso de animación para cada paso */
.process-list li:nth-child(1) { animation-delay: 0.1s; }
.process-list li:nth-child(2) { animation-delay: 0.2s; }
.process-list li:nth-child(3) { animation-delay: 0.3s; }

.process-list li::before {
    content: counter(process-counter);      /* Muestra el número del contador */
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: var(--psi-plastic-primary); /* Fondo azul */
    color: #fff;
    border-radius: 50%;                     /* Círculo perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
}

.process-list h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--psi-plastic-primary);
    margin: 0 0 12px;
}

.process-list p {
    font-size: 16px;
    color: var(--psi-plastic-text);
    line-height: 1.6;
}

/* ====================== BOTÓN CTA (LLAMADA A LA ACCIÓN) ====================== */
.cta-button {
    display: inline-block;                  /* Permite usar padding y márgenes como bloque */
    padding: 20px 40px;                     /* Espacio interno grande */
    background-color: var(--psi-plastic-border); /* Color amarillo de fondo */
    color: var(--psi-plastic-text);
    text-decoration: none;                  /* Sin subrayado */
    font-weight: 700;
    font-size: 18px;
    border-radius: 10px;                    /* Bordes redondeados */
    margin: 40px auto;                      /* Centrado con margen superior */
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

.cta-button:hover {
    background-color: var(--psi-plastic-accent); /* Cambia a verde al pasar el mouse */
    color: #fff;
    transform: scale(1.1);                      /* Hace el botón un poco más grande */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ====================== TABLA DE CAPACIDADES DE MÁQUINAS ====================== */
.machines-table-container {
    max-width: 1000px;
    margin: 50px auto;
    overflow-x: auto;                       /* Permite scroll horizontal si la tabla es muy ancha */
}

.machines-table {
    width: 100%;
    border-collapse: collapse;              /* Une las celdas de la tabla */
    background: var(--psi-plastic-secondary);
    border: 3px solid transparent;
    border-image: linear-gradient(to right, var(--psi-plastic-primary), var(--psi-plastic-accent)) 1;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.machines-table th,
.machines-table td {
    padding: 18px;
    text-align: center;
    font-size: 16px;
    color: var(--psi-plastic-text);
    border-bottom: 1px solid var(--psi-plastic-bordes-otro-color);
}

.machines-table th {
    background: linear-gradient(135deg, var(--psi-plastic-primary), var(--psi-plastic-accent));
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.machines-table tr {
    transition: background 0.3s ease, transform 0.3s ease;
}

.machines-table tr:nth-child(even) {
    background: rgba(var(--psi-plastic-secondary-rgb), 0.8); /* Filas alternas más claras */
}

.machines-table tr:hover {
    background: rgba(var(--psi-plastic-accent-rgb), 0.15);
    transform: scale(1.01);
}

.machines-table tr:last-child td {
    border-bottom: none;                    /* Quita el borde de la última fila */
}

/* ====================== AJUSTES RESPONSIVOS ====================== */
/* Reglas que cambian según el tamaño de la pantalla */
/* ====================== TABLET (hasta 1024px) ====================== */
@media (max-width: 1024px) {
    
    .site-header {
        padding: 15px 20px;                 /* Reduce el padding del header en tablets */
    }

    .site-navigation ul.menu li ul.sub-menu {
        margin-top: 30px;                   /* Añade espacio superior al submenú en tablet */
    }

    .site-navigation ul.menu li a {
        padding: 12px 10px;                 /* Reduce el padding de los enlaces */
        font-size: 14px;                    /* Reduce el tamaño de letra */
    }

    .hero-banner {
        height: 400px;                      /* Reduce la altura del banner principal */
    }

    .hero-banner h1 {
        font-size: 36px;                    /* Reduce el tamaño del título principal */
    }

    .section {
        padding: 40px 20px;                 /* Reduce el padding vertical y horizontal de las secciones */
    }

    .video-container iframe {
        height: 350px;                      /* Reduce la altura del video en tablet */
    }
}

/* ====================== MÓVIL (hasta 767px) ====================== */
@media (max-width: 767px) {
    
    .site-header {
        padding: 10px 15px;                 /* Aún más padding reducido en móviles */
    }

    .site-branding .site-logo img {
        max-width: 180px;                   /* Hace el logo más pequeño en móviles */
    }

    .site-navigation {
        display: none;                      /* Oculta completamente el menú de escritorio */
    }

    .site-navigation-toggle-holder {
        display: flex;                      /* Muestra el botón hamburguesa */
        width: auto;
    }

    .site-navigation-toggle-holder.elementor-active + .site-navigation {
        display: none;                      /* Oculta el menú normal cuando el toggle está activo */
    }

    .site-navigation ul.menu {
        flex-direction: column;             /* Convierte el menú en vertical (columna) */
    }

    .site-navigation ul.menu li ul.sub-menu {
        position: static;                   /* El submenú ya no es flotante */
        box-shadow: none;                   /* Quita la sombra del submenú */
        margin-top: 0;                      /* Elimina margen superior */
    }

    .site-navigation ul.menu li.menu-item-has-children::after {
        display: none;                      /* Oculta la flecha del submenú en móvil */
    }

    .site-navigation-dropdown ul.menu li a {
        font-size: 15px;                    /* Tamaño de letra para enlaces del menú móvil */
        padding: 18px;                      /* Más padding vertical para facilitar el toque */
        
    }

    .site-navigation-dropdown ul.menu li ul.sub-menu li a {
        font-size: 13px;                    /* Texto más pequeño en submenús */
        padding: 12px 18px 12px 28px;       /* Más indentación a la izquierda */
        
    }

    .product-grid {
        grid-template-columns: 1fr;         /* Una sola columna en móviles */
        padding: 15px;                      /* Espacio lateral en móviles */
    }

    .product-card img {
        height: 250px;                      /* Reduce altura de imágenes en móvil */
    }

    .product-card .image-container {
        height: 550px;                      /* Reduce altura del contenedor de imagen */
    }


    .product-card .image-nav-prev,
    .product-card .image-nav-next {
        width: 32px;                        /* Botones más pequeños en móvil */
        height: 32px;
        font-size: 16px;
    }


    .image-container {
        width: 300px;                       /* Limita el ancho máximo del contenedor */
        height: 200px;
        
    }

    .image-info-container {
        max-width: 100%;                    /* Ocupa todo el ancho disponible */
        margin: 30px auto;
    }

    .image-info-container img {
        height: 300px;                      /* Reduce altura de imágenes informativas */
    }

    .benefits-list {
        grid-template-columns: 1fr;         /* Una sola columna para beneficios */
        padding: 0 20px;
    }

    .process-list {
        padding: 0 20px;                    /* Añade padding lateral */
    }

    .process-list li {
        padding-left: 60px;                 /* Espacio para el número circular */
    }

    .process-list li::before {
        width: 40px;                        /* Número más pequeño en móvil */
        height: 40px;
        font-size: 18px;
    }

    .cta-button {
        padding: 15px 30px;                 /* Botón más pequeño */
        font-size: 16px;
    }

    .barload-wrapper,
    .ballsload-container {
        font-size: 12px;                    /* Texto más pequeño en animaciones de carga */
        padding: 6px;
    }

    .ecs-post-loop .ast-article-single {
        padding: 8px;                       /* Reduce padding interno */
    }

    .ecs-loop-preview {
        padding: 6px;
    }

    .ecs-loop-preview .ecs-image-holder {
        height: 120px;                      /* Imágenes más pequeñas en el carrusel */
    }

    .hero-banner {
        height: 300px;                      /* Banner más corto en móvil */
    }

    .hero-banner h1 {
        font-size: 28px;                    /* Título más pequeño */
    }

    .hero-banner p {
        font-size: 16px;
    }

    .section h2 {
        font-size: 24px;                    /* Títulos de sección más pequeños */
    }

    .section {
        padding: 30px 15px;                 /* Menos padding en secciones */
    }

    .contact-form {
        padding: 15px;                      /* Formulario más compacto */
    }

    .video-container iframe {
        height: 200px;                      /* Video más pequeño */
    }

    .social-links {
        gap: 15px;                          /* Menos espacio entre iconos sociales */
    }

    .social-links a {
        width: 35px;                        /* Iconos más pequeños */
        height: 35px;
    }

    .machines-table-container {
        margin: 30px 20px;                  /* Márgenes laterales en tabla */
    }

    .machines-table th,
    .machines-table td {
        padding: 12px;                      /* Reduce padding de celdas */
        font-size: 14px;
    }

    .machines-table th {
        font-size: 16px;
    }

    .machines-table {
        min-width: 600px;                   /* Ancho mínimo para que no se rompa */
    }
}


/* ====================== DESKTOP (a partir de 768px) ====================== */
@media (min-width: 768px) {
    .site-navigation-toggle-holder {
        display: none;                      /* Oculta el botón hamburguesa en desktop */
    }

    .site-navigation {
        display: flex;                      /* Muestra el menú horizontal normal */
    }
}

/* ====================== MENSAJES DEL FORMULARIO ====================== */
.contact-form .form-message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
}

.contact-form .form-message.success {
    background-color: rgba(52, 199, 89, 0.1);   /* Fondo verde suave */
    color: var(--psi-plastic-accent);
    border: 1px solid var(--psi-plastic-accent);
}

.contact-form .form-message.error {
    background-color: rgba(255, 0, 0, 0.1);     /* Fondo rojo suave */
    color: #d32f2f;
    border: 1px solid #d32f2f;
}

.contact-form .honeypot {
    display: none;                          /* Campo oculto anti-spam (honeypot) */
}