/* ===================================================================== */
/* -------------- ESTILOS PARA LA BARRA SUPERIOR (HEADER) -------------- */
/* ===================================================================== */

/* Contenedor del lado derecho de la barra superior */
.top-bar-right {
    display: flex;                      /* Usa flexbox para el layout */
    justify-content: flex-end;          /* Alinea los elementos al final (derecha) */
    align-items: center;                /* Centra los elementos verticalmente */
    background-color: #EAEDED;          /* Color de fondo Personalizado - Gris muy Claro similar a un Gris Plateado Suave*/
    padding: 10px 20px;
  }

/* Contenedor del selector de idioma */
.language-selector {
    margin-left: 20px;                  /* Espacio a la izquierda para separar de otros elementos */
  }

/* Estilos para las imágenes del selector de idioma */
.top-bar-right .language-selector img {
    max-width: 40px;                    /* Ancho máximo de las banderas */
    max-height: 40px;                   /* Altura máxima de las banderas */
    margin-left: 5px;                   /* Espacio entre banderas */
    cursor: pointer;                    /* Cambia el cursor a mano al pasar sobre ellas */
    transition: transform 0.3s ease;    /* Efecto suave al hacer hover */
  }


/* =============================================================================================== */
/* =============================================================================================== */
/* ------------------- ESTILOS ESPECÍFICOS PARA LOS 2 CONTENEDORES DE LA PÁGINA ------------------- */
/* =============================================================================================== */
/* =============================================================================================== */

/* Contenedor principal con diseño de dos columnas */
.main-container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
    z-index: 50; /* Valor menor que el del menú (100) */
    gap: 40px; /* Espacio entre las dos columnas */
  } 

.content-area {
    flex: 1;
  }

/* ============================================================================= */
/* ================ CONTENEDOR PRINCIPAL - ESTILOS ACTUALIZADOS ================ */
/* ============================================================================= */

.products-menu {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra exterior suave para efecto de elevación */;
  padding: 20px 15px; /* Relleno interno: 25px arriba/abajo, 20px izquierda/derecha */
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* Evita que el elemento se reduzca cuando no hay espacio suficiente */
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  width: 280px; /* Ancho fijo del contenedor (ajustar valor según necesidad) */
  min-height: fit-content; /* Altura mínima que se ajusta automáticamente al contenido interno */
  max-height: 90vh; /* Altura máxima del 90% del viewport para evitar que ocupe toda la pantalla */
  z-index: 100; /* Asegúrate que este valor sea menor que el del dropdown (1100) */
}

/* Efecto hover sutil para todo el contenedor */
.products-menu:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* ============================================================================== */
/* ===================== ESTILOS DE TÍTULO - ACTUALIZADOS ===================== */
/* ============================================================================== */

.products-menu h3 {
  text-align: center;
  color: white;
  font-size: 1.15rem;
  margin: 0 auto 1.5rem;
  font-weight: 500;
  background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
  letter-spacing: -0.5px;
  position: relative;
  padding: 0.75rem 1.5rem; /* Espaciado interno: 0.75px arriba/abajo, 1.5 izquierda/derecha */
  border-radius: 8px;
  width: fit-content;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
  transition: all 0.3s ease;
  z-index: 1;
  overflow: hidden;
}

/* Efecto de brillo al hover */
.products-menu h3::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(30deg);
  z-index: -1;
  transition: all 0.5s ease;
  opacity: 0;
}

.products-menu h3:hover::before {
  opacity: 1;
  animation: shine 1.5s infinite;
}

.products-menu h3:hover::after {
  width: 80px;
}

.products-menu h3::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0));
  margin: 12px auto 0;
  transition: var(--transition);
  border-radius: 3px;
}

@keyframes shine {
  0% { transform: rotate(30deg) translate(-10%, -10%); }
  100% { transform: rotate(30deg) translate(10%, 10%); }
}

/* =============================================================== */
/* ============= ESTRUCTURA DE LA LISTA DE PRODUCTOS ============= */
/* =============================================================== */

.products-menu ul.sub-menu {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.products-menu ul.sub-menu > li {
  position: relative;
  margin-bottom: 2px; /* Reducir este valor para menos espacio entre items (era 4px) */
  overflow: visible;
  z-index: auto; /* Valor por defecto, no debe interferir */
}

.products-menu ul.sub-menu > li > a {
  display: flex;
  align-items: center;
  padding: 6px 10px; /* Reduce distancie entre nombres de productos - padding vertical (era 12px) y horizontal (era 16px) */
  color: #2d3748;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  background-color: transparent;
  font-size: 0.90rem; /* Reducir tamaño de fuente si es necesario (era 0.95rem) */
  box-sizing: border-box;
  text-decoration: none;
  gap: 8px; /* Reducir espacio entre icono y texto (era 10px) */
}

/* Icono de flecha para items con submenú */
.products-menu ul.sub-menu > li.has-dropdown > a::after {
  content: '→';
  margin-left: auto;
  font-size: 0.9em;
  color: #9CA3AF;
  transition: all 0.2s ease;
}

.products-menu ul.sub-menu > li > a:hover {
  background-color: #f8fafc;
  color: #1E3A8A;
  transform: translateX(4px);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.05);
}

.products-menu ul.sub-menu > li > a:hover::after {
  color: #3B82F6;
  transform: translateX(2px);
}

.products-menu ul.sub-menu > li > a.active {
  background-color: #f0f7ff;
  color: #2563eb;
  font-weight: 500;
  border-left: 3px solid #2563eb;
  padding-left: 13px;
}

/* ======================================================================= */
/* =================== ESTILOS DEL SUBMENÚ DESPLEGABLE =================== */
/* ======================================================================= */

.models-dropdown {
  display: none;
  position: absolute;
  left: calc(100% - 12px);
  top: 0;
  width: 320px;                                 /* Ancho de la Cja del Menu Desplegable */
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 12px 0;
  z-index: 1100;
  max-height: 70vh;
  opacity: 0;
  transform: translate3d(8px, 0, 0);            /* Posición inicial desplazada para animación */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  isolation: isolate;                           /* Crea un nuevo contexto de apilamiento */
  will-change: transform, opacity;              /* Mejora el rendimiento de las animaciones */
  backface-visibility: hidden;                  /* Forzar renderizado en capa GPU */
}

/* Triángulo indicador - Aseguramos que esté detrás del submenú */
.models-dropdown::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #fff;
  filter: drop-shadow(-2px 0 2px rgba(0,0,0,0.05));
  z-index: -1; /* Coloca el triángulo detrás del contenido del dropdown */
}

/* Estados visibles del dropdown */
.products-menu ul.sub-menu > li:hover > .models-dropdown,
.products-menu ul.sub-menu > li:focus-within > .models-dropdown,
.models-dropdown:hover {
  display: block;
  opacity: 1;
}

/* Items del dropdown */
.models-dropdown a {
  display: flex;
  padding: 10px 20px;
  color: #4b5563;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  align-items: center;
  position: relative;
  margin: 2px 12px;
  border-radius: 6px;
  background-color: transparent; /* Fondo explícito */
}

/* Efecto hover para items */
.models-dropdown a:hover {
  background-color: #f9fafb;
  color: #2563eb;
  padding-left: 22px;
}

/* Indicador de hover */
.models-dropdown a:hover::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #2563eb;
  border-radius: 50%;
}

/* Divisores de sección */
.models-dropdown .dropdown-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.05) 50%, transparent 100%);
  margin: 8px 16px;
}

/* Encabezados de sección */
.models-dropdown .dropdown-header {
  padding: 8px 20px 4px;
  font-weight: 600;
  color: #1E3A8A;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ======================================================= */
/* ============ TITULO PRINCIPAL DEL PRODUCTO ============ */
/* ======================================================= */

.content-area h1 {
    position: relative;
    text-align: center;                             /* Centrado horizontal */
    color: white;                                   /* Texto blanco para máximo contraste */
    font-size: 1.7rem;                              /* Tamaño de fuente */
    margin: 0 auto 2rem;                            /* Centrado con margen inferior aumentado */
    font-weight: 500;                               /* Peso de fuente medio */
    background-color: #1E3A8A;                      /* Fondo azul Oxford corporativo */
    letter-spacing: -0.5px;                         /* Ajuste fino del kerning */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);      /* Sombra sutil para profundidad */
    transition: all 0.3s ease;                      /* Transición suave para efectos hover */
    padding: 1.2rem 1.5rem 1.5rem;                  /* Más padding inferior para el subrayado */
    border-radius: 8px;                             /* Bordes redondeados */
    width: 70%;                                     /* Ancho relativo al contenedor */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);     /* Sombra exterior */
    box-sizing: border-box;                         /* Padding incluido en el ancho total */
    
  }

/* ------------- SUBRAYADO DECORATIVO (DENTRO DEL CONTENEDOR DEL TÍTULO) ------------- */
.content-area h1::after {
    content: '';                                    /* Elemento generado para el efecto */
    position: absolute;                             /* Posicionamiento absoluto relativo al título */
    width: 80px;                                    /* Ancho inicial del subrayado */
    height: 4px;                                    /* Altura del subrayado (más profesional que 5px) */
    background: linear-gradient(
        90deg, 
        rgba(79, 195, 247, 0.8),                    /* Azul claro con transparencia */
        #1976D2 70%,                                /* Azul corporativo */
        rgba(25, 118, 210, 0.6)                     /* Degradado suavizado al final */
    );
    bottom: 15px;                                   /* Mayor separación del texto (15px) */
    left: 50%;                                      /* Centrado horizontal */
    transform: translateX(-50%) scaleX(0.9);        /* Escala ligeramente reducida para efecto */
    border-radius: 3px;                             /* Bordes más redondeados (3px) */
    z-index: 1;                                     /* Se ubica detrás del título */
    opacity: 0.9;                                   /* Opacidad casi completa */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición suave */
    box-shadow: 
        0 2px 8px rgba(25, 118, 210, 0.3),          /* Sombra azul sutil */
        0 0 12px rgba(79, 195, 247, 0.2);           /* Efecto de brillo */
    filter: blur(0.3px);                            /* Suavizado sutil */
}

/* -------------- EFECTOS HOVER (INTERACCIÓN DEL USUARIO) -------------- */
.content-area h1:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);      /* Sombra más pronunciada */
    transform: translateY(-2px);                    /* Efecto de elevación sutil */
}

.content-area h1:hover::after {
    width: 30%;                                     /* El subrayado crece ligeramente */
    height: 4px;                                    /* Aumenta su grosor */
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.9),
        #42A5F5,                                    /* Azul más vibrante */
        rgba(66, 165, 245, 0.9)
    );
    box-shadow: 0 2px 8px rgba(66, 165, 245, 0.4);  /* Sombra azul sutil */
}

/* ------------ EFECTO ACTIVO (AL HACER CLIC) ------------ */
.content-area h1:active {
    transform: translateY(0);                       /* Vuelve a posición original */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);      /* Sombra más suave */
}

.content-area h1:active::after {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.95),
        #2196F3,                                    /* Azul más saturado */
        rgba(33, 150, 243, 0.95)
    );
    transition: all 0.1s ease-out;                  /* Transición más rápida */
}

/* ------------ ANIMACIÓN DE ONDULACIÓN (OPCIONAL) ------------ */

@keyframes wave {
    0% { transform: translateX(-50%) scaleX(1); }
    50% { transform: translateX(-50%) scaleX(1.05); }
    100% { transform: translateX(-50%) scaleX(1); }
}

.content-area h1:hover::after {
    animation: wave 2s ease-in-out infinite;        /* Animación continua sutil */
}

/* =================================================================== */
/* =============== ESTILOS DE DESCRIPCIÓN DEL PRODUCTO =============== */
/* =================================================================== */

.product-description {
    margin-bottom: 40px;                  /* Más espacio entre secciones */
    line-height: 1.4;                     /* Interlineado para lectura */
    color: #333333;                       /* Gris oscuro con buen contraste sobre beige */
    font-size: 0.95rem;                   /* Tamaño de fuente */
    text-align: justify;                  /* Texto justificado profesional */
    hyphens: auto;                        /* Separación silábica automática */
    text-rendering: optimizeLegibility;   /* Mejor renderizado de texto */
}

/* Párrafos con mejor jerarquía visual */
.product-description p {
    margin-bottom: 1.3em;                 /* Espaciado basado en em para proporción */
    text-indent: 2em;                     /* Sangría de primera línea */
    letter-spacing: 0.2px;                /* Espaciado entre letras sutil */
}

/* ======================== */
/* Lista de características */
/* ======================== */

.product-description ul {
    margin: 2em 0;                        /* Espaciado vertical proporcional */
    padding-left: 0;                      /* Eliminar sangría por defecto */
    list-style-type: none;                /* Eliminar viñetas estándar */
}

/* Items de lista con diseño profesional */
.product-description li {
    margin-bottom: 15px;                  /* Más espacio entre items */
    position: relative;
    padding-left: 40px;                   /* Sangria de los vistos buenos */
    font-size: 1rem;                      /* Tamaño ligeramente mayor */
}

/* Icono Decorativo para items de lista - Visto Bueno*/
.product-description li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: -1px;                                        /* Ajuste fino de alineación vertical */
    color: #2ecc71;
    font-weight: bold;
    font-size: 1.rem;                                 /* Tamaño del Icono */
    background: rgba(46, 204, 113, 0.15);             /* Fondo sutil */
    width: 30px;                                      /* Ancho fijo */
    height: 30px;                                     /* Alto fijo */
    border-radius: 50%;                               /* Forma circular */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(46, 204, 113, 0.2);    /* Sombra más pronunciada */
    transition: all 0.3s ease;                        /* Transición suave para hover */
}

/* Efecto hover para ítems de lista */
.product-description li:hover::before {
    background: rgba(46, 204, 113, 0.3);              /* Fondo más visible */
    transform: translateY(-50%) scale(1.1);           /* Efecto de zoom sutil */
}

/* ============================================== */
/* ============ GALERÍA DE PRODUCTOS ============ */
/* ============================================== */

.product-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* Tarjeta de producto */
.product-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

/* Efecto hover para tarjetas */
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Contenedor de imagen - igual que css.productos*/
.product-img-container {
    background-color: #D8D8D8;      /* Fondo gris como css.productos */
    width: 100%;
    height: 230px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;             /* Para efecto de overlay */
}

/* Imagen del producto - igual que css.productos */
.product-img-container img {
    width: auto;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: all 0.4s ease;
    filter: brightness(0.95); /* Ligero oscurecimiento inicial */
}

/* Efecto hover para la imagen - igual que css.productos */
.product-card:hover .product-img-container img {
    transform: scale(1.08); /* Zoom más sutil */
    filter: brightness(1); /* Vuelve al brillo normal */
}

/* Efecto hover para la imagen - igual que en productos */
.product-card:hover .product-img-container img {
    transform: scale(1.08); /* Zoom más sutil */
    filter: brightness(1); /* Vuelve al brillo normal */
}

/* Efecto hover para el contenedor - igual que en productos */
.product-card:hover .product-img-container {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Pseudo-elemento para overlay como en css.productos */
.product-card:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,123,255,0.05), rgba(0,123,255,0.15));
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
}

/* Información del producto */
.product-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Título del producto - como en css.productos*/
.product-info h3 {
    margin: 0;
    color: #222222;           /* Casi negro para mejor legibilidad */
    font-size: 17px;
    height: 30px;
    padding: 3px 0;
    font-weight: 600;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Modelo del producto */
.product-info p {
    margin: 0 0 10px 0;
    color: #555555;             /* Gris medio (mejor que #7f8c8d) */
    font-size: 0.9rem;
    text-align: center;
}

/* Precio del producto */
.product-info .price {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 10px 0 0 0;
}

/* ========================================================================== */
/* ========================================================================== */
/* ========== MODAL DE DETALLES DEL PRODUCTO - VERSIÓN PROFESIONAL ========== */
/* ========================================================================== */
/* ========================================================================== */

/* ============ ESTILOS PRINCIPALES ============ */
.modal {
    position: fixed;        /* Posicionamiento Fijo: Hace que el modal permanezca en su lugar incluso al hacer scroll */
    top: 0;                 /* Ubicación: Lo coloca en la esquina superior izquierda de la pantalla */
    left: 0;
    z-index: 1000;          /* Nivel de Apilamiento: Asegura que el modal aparezca por encima de otros elementos */
    
    /* Dimensiones completas */
    width: 100vw;           /* Ancho: Ocupa el 100% del ancho visible de la pantalla (viewport width) */
    height: 100vh;          /* Alto: Ocupa el 100% del alto visible de la pantalla (viewport height) */
    max-height: 100%;       /* Altura Máxima: Previene que exceda la altura del viewport */
    
    /* Estilo visual */
    background-color: rgba(0, 0, 0, 0.8);    /* Fondo Oscuro */
    backdrop-filter: blur(5px);              /* Efecto más sutil */
    
    /* Comportamiento */
    display: none;          /* Visibilidad Inicial: Oculta el modal por defecto (se muestra con JavaScript) */
    overflow-y: auto;       /* Scroll Vertical: Permite desplazamiento si el contenido es muy largo */ 
    
    /* Transiciones y optimización */
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);   /* Transición: Animación suave de 0.4 segundos con curva de aceleración personalizada */
    will-change: opacity;   /* Optimización: Ayuda al navegador a renderizar mejor las animaciones de opacidad */
    contain: strict;        /* Aislamiento: Mejora el rendimiento evitando que afecte elementos externos */
}

/* ============ CONTENEDOR DE CONTENIDO PRINCIPAL ============ */
.modal-content {
    width: 90%;           /* ANCHO: Ocupa el 90% del contenedor padre (modal) */
    max-width: 1200px;    /* ANCHO MÁXIMO: Nunca superará los 1200px (ideal para pantallas grandes) */
    padding: 1.5rem;      /* ESPACIADO INTERNO: 1.5rem (30px) en todos los lados del contenido */
    margin: 3vh auto;     /* MARGEN EXTERNO: 3% del alto de pantalla (vh) arriba/abajo y auto en lados (centrado) */
    
    /* Estilo visual */
    background: #FDFDFA;  /* FONDO: Color blanco ligeramente cálido (#FDFDFA) */
    border-radius: 12px;  /* BORDES REDONDEADOS: Radio de 12px para esquinas suaves */
    border: 1px solid rgba(180, 180, 170, 1);     /* BORDE: Línea sutil grisácea con 100% de opacidad */
    
    /* Efectos */
    box-shadow: 
        0 10px 30px -10px rgba(0, 0, 0, 0.15),      /* Sombra Externa: Sombra difuminada hacia abajo (profundidad sutil) */
        inset 0 1px 0 rgba(255, 255, 255, 0.9);     /* Sombra Interna: Brillo superior para efecto "elevado" */
    
    /* Optimización */
    position: relative;                 /* POSICIONAMIENTO: Relativo para contener elementos hijos absolutos */
    transform: translateZ(0);           /* ACELERACIÓN GPU: Fuerza renderizado por hardware (mejor rendimiento) */
    will-change: transform, opacity;    /* ADVERTENCIA DE CAMBIO: Optimiza animaciones de transform/opacidad */
}

/* ------------------------------------------- */
/* ------------ COMPONENTES MODAL ------------ */
/* ------------------------------------------- */


/* ============ BOTÓN DE CERRAR (X) ============ */
.close {
    /* POSICIONAMIENTO ABSOLUTO */
    position: absolute;   /* Libera el botón del flujo normal del documento */
    top: 20px;            /* Distancia desde el borde superior del contenedor padre */
    right: 20px;          /* Distancia desde el borde derecho */
    z-index: 10;          /* Asegura que esté por encima del contenido del modal */

    /* ESTILO TIPOGRÁFICO */
    /* 1. SVG inline como fondo (X delgada centrada) */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath stroke='%23555555' stroke-width='1.5' stroke-linecap='round' d='M1 1l12 12M13 1L1 13'/%3E%3C/svg%3E") no-repeat center center;
    /* 2. Oculta el texto "X" que podría estar en el HTML */
    text-indent: -9999px;
    overflow: hidden;

    /* DISEÑO DEL CONTENEDOR */
    width: 40px;          /* Diámetro del círculo */
    height: 40px;         /* Mismo valor que width para forma perfectamente circular */
    background: rgba(245, 242, 238, 0.9);         /* Fondo beige claro semitransparente */
    border: 1px solid rgba(100, 100, 100, 0.2);   /* Borde sutil */
    border-radius: 50%;                           /* Crea la forma circular */

    /* CENTRADO DEL ICONO */
    display: flex;            /* Habilita flexbox para centrado */
    align-items: center;      /* Centrado vertical */
    justify-content: center;  /* Centrado horizontal */

    /* INTERACTIVIDAD */
    cursor: pointer;                /* Cambia el cursor a mano al pasar sobre el botón */
    transition: all 0.3s ease-out;  /* Transición suave para efectos hover/focus */
    outline: none;                  /* Elimina el outline por defecto (se añadirá en :focus) */
}

/* ESTADOS INTERACTIVOS */
.close:hover,
.close:focus {
    color: #C77A4D;                         /* Color terracota/anaranjado al interactuar */
    background: rgba(230, 230, 225, 0.95);  /* Fondo ligeramente más oscuro */
    transform: rotate(90deg);               /* Efecto de rotación (puede ser scale(1.1) para alternativa) */
    opacity: 0.9;                           /* Ligera reducción de opacidad para feedback visual */
    outline: 2px solid #8AA8B1;             /* Outline accesible para teclado */
    outline-offset: 2px;                    /* Espacio entre el outline y el elemento */
}

/* ---------------------------------------------- */
/* ------------ DISPOSICIÓN PRODUCTO ------------ */
/* ---------------------------------------------- */

/* CONTENEDOR PRINCIPAL
 * - Organiza imagen y especificaciones
 * - Layout flexible responsive */
.product-display {
    display: flex;
    flex-direction: row;            /* Explícito para claridad */
    gap: clamp(15px, 2vw, 30px);    /* Espaciado adaptable */
    margin-top: 1.5rem;             /* Usar unidades relativas (rem) */
  }

/* ---------------------------------------------- */
/* ------------- SECCIÓN MULTIMEDIA ------------- */
/* ---------------------------------------------- */

.product-media {
    /* --- LAYOUT FLEXIBLE --- */
    flex: 1 1 50%;                  /* Ocupa 50% del espacio pero puede crecer/encoger */
    min-width: min(100%, 550px);    /* Ancho mínimo: el menor entre 100% del contenedor o 550px */
    aspect-ratio: 16/9;             /* Relación cuadrada (cambiar a 4/3 para productos) */

    /* --- ESTILO VISUAL --- */
    background-color: #FFFFFF;                    /* Color de fondo (cambiar de #F8F8F5 a #FFFFFF para pureza) */
    border-radius: 12px;                          /* Bordes redondeados (14px para más suavidad) */
    padding: 1.75rem;                             /* Espacio interno (2rem para más respiración) */
    margin-bottom: 1.5rem;                        /* Separación inferior (2rem para jerarquía) */
    border: 1px solid rgba(220, 220, 215, 0.6);   /* Borde sutil (0.8 para más contraste) */

    /* --- EFECTOS DE PROFUNDIDAD --- */
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.9), /* Brillo superior interno */
        inset 0 -1px 4px rgba(0, 0, 0, 0.03),     /* Sombra inferior interna */
        0 4px 20px -4px rgba(0, 0, 0, 0.05);      /* Sombra externa difuminada */

    /* --- ANIMACIONES --- */
    transition: 
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), /* Efecto "levitar" */
        box-shadow 0.35s ease;                         /* Transición sombra */

    /* --- OPTIMIZACIÓN --- */
    position: relative;     /* Contexto para elementos hijos absolutos */
    overflow: hidden;       /* Recorta contenido que sobresale */
    contain: layout paint;  /* Mejora rendimiento (quitar si causa problemas) */
}

/* --- EFECTO HOVER MEJORADO ---  */
.product-media:hover {
    transform: translateY(-8px) scale(1.02); /* Combina elevación y zoom */
    box-shadow: 
        0 15px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.03); /* Borde sutil adicional */
}

/* --- CONTENEDOR INTERNO (PARA MEDIA) ---  */
.product-media__container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;        /* Centrado vertical */
    justify-content: center;    /* Centrado horizontal */
    position: relative;
    border-radius: 8px;         /* Bordes ligeramente redondeados */
    overflow: hidden;           /* Esencial para imágenes/videos */
    background: linear-gradient(135deg, #F5F5F0 0%, #F0F0EB 100%);  /* Degradado sutil */
}

.product-media__container video {
    object-fit: cover;          /* Ajuste para videos */
    mix-blend-mode: multiply;   /* Efecto profesional */
}

/* ----------------------------------------------- */
/* ------------- IMAGEN DEL PRODUCTO ------------- */
/* ----------------------------------------------- */
/* - Ajuste perfecto al contenedor
 * - Efectos hover y transiciones
 * - Estados de carga --*/

#modalProductImage {
    /* DIMENSIONES BÁSICAS */
    width: 100%;          /* Ocupa todo el ancho disponible */
    max-height: 80vh;     /* Altura máxima del 80% del viewport */
    display: block;       /* Elimina espacio fantasma debajo de la imagen */
    margin: 0 auto;       /* Centrado horizontal */
    
    /* COMPORTAMIENTO DE LA IMAGEN */
    object-fit: contain;              /* Mantiene proporciones sin recortar */
    object-position: center center;   /* Enfoque al centro */
    aspect-ratio: 1/1;                /* Relación cuadrada por defecto */

    /* ESTILO VISUAL */
    border-radius: 8px;         /* Esquinas redondeadas sutiles */
    background-color: #F9F9F7;  /* Color de carga/fallback */

    /* MEJORAS DE IMAGEN */
    filter: 
        brightness(1.01)        /* Refuerzo lumínico mínimo */
        contrast(1.03)          /* Acentuación de detalles */
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));   /* Sombra sutil */

    /* ANIMACIONES */
    transition: 
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),  /* Zoom suave */
        filter 0.45s ease-out,                          /* Transición de efectos */
        opacity 0.35s ease;                             /* Fade para carga */

    /* OPTIMIZACIONES AVANZADAS */
    will-change: transform, filter;               /* Prepara GPU */
    backface-visibility: hidden;                  /* Elimina flickering */
    image-rendering: -webkit-optimize-contrast;   /* Mejor render en Safari */
}

/* EFECTO HOVER PROFESIONAL */
.product-media:hover #modalProductImage {
    transform: scale(1.02) translateZ(0);           /* Zoom casi imperceptible */
    filter: 
        brightness(1.02) 
        contrast(1.05)
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08)); /* Sombra más pronunciada */
}

/* ESTADOS DE CARGA */
#modalProductImage.is-loading {
    opacity: 0.8;                         /* Transparencia durante carga */
    filter: blur(4px) brightness(0.98);   /* Efecto de carga */
}

#modalProductImage.is-loaded {
    animation: fadeInScale 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ANIMACIÓN DE ENTRADA */
@keyframes fadeInScale {
    0% { 
        opacity: 0; 
        transform: scale(0.98);   /* Comienza ligeramente pequeño */
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
    }
}

/* ADAPTACIONES DE FORMATO */
#modalProductImage.is-portrait { 
    aspect-ratio: 3/4;            /* Ratio vertical (retratos) */
}

#modalProductImage.is-landscape { 
    aspect-ratio: 16/9;           /* Ratio horizontal (mejor que 4/3 para pantallas modernas) */
}

/* ----------------------------------------------- */
/* -------------- REPRODUCTOR VIDEO -------------- */
/* ----------------------------------------------- */

.video-container {
    /* POSICIONAMIENTO */
    position: relative;     /* Necesario para posicionar elementos hijos absolutos */
    
    /* DIMENSIONES (Modificar según necesidades) */
    width: 100%;            /* Ocupa todo el ancho disponible */
    min-height: 240px;      /* Altura mínima en móviles (aumentar a 320px si muestra controles) */
    max-height: 60vh;       /* Cambiado de 80vh a 60vh para mejor proporción */
    padding-bottom: 30px;   /* Espacio para controles (ajustar a 60px si se superponen) */
    
    /* ESTILO VISUAL (Personalizable) */
    bbackground: #0a0a0a;   /* Fondo negro sólido para mejor contraste */
    border-radius: 10px;    /* Bordes redondeados (12px para más suavidad) */
    overflow: hidden;       /* Oculta desbordamientos */
    margin-top: 2rem 0;       /* Separación superior (3rem para más espacio) */
    
    /* EFECTOS (Ajustar sombras para profundidad) */
    box-shadow: 
        0 12px 32px -8px rgba(0, 0, 0, 0.25),         /* Sombra exterior */
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);    /* Borde interior sutil */
    
    /* ANIMACIONES (Personalizar curva y duración) */
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
     /* NUEVO: Aspect ratio para prevenir saltos de layout */
    aspect-ratio: 16/9;

    /* OPTIMIZACIÓN (Cambiar a 'content' si hay problemas) */
    contain: strict;
}

/* ELEMENTO DE VIDEO (Ajustes clave para calidad) */
.video-container video {
    /* POSICIONAMIENTO */
    position: absolute;
    top: 0;
    left: 0;
    
    /* DIMENSIONES */
    width: 100%;
    height: 100%;               /* Cambiado para ocupar todo el contenedor */
    
    /* COMPORTAMIENTO (Cambiar object-fit según necesidad) */
    object-fit: contain;        /* 'cover' para llenar contenedor, 'contain' para ver completo */
    object-position: center;    /* Enfoque al centro (ajustar para videos verticales) */
    
    /* OPTIMIZACIÓN (No modificar a menos que haya problemas) */
    transform: translateZ(0);           /* Aceleración GPU */
    will-change: transform, opacity;    /* Preparar para animaciones */
    opacity: 0;                         /* Inicialmente oculto */
    transition: opacity 0.6s ease;      /* Fade-in al cargar */
     z-index: 2;
}

/* EFECTO HOVER (Intensificar para más impacto) */
.video-container:hover {
    box-shadow: 
        0 16px 40px -12px rgba(0, 0, 0, 0.35),      /* Sombra más pronunciada */
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);  /* Borde interior */
    transform: translateY(-2px);                    /* Efecto levitación */
}

/* CONTROLES DE VIDEO (Mejoras profesionales) */
.video-controls {
    /* POSICIONAMIENTO */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    /* ESTILO (Degradado más profesional) */
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.85) 0%,   /* Opacidad aumentada para mejor legibilidad */
        rgba(0, 0, 0, 0.4) 80%, 
        transparent 100%);
    padding: 1.25rem;             /* Aumentar a 1.5rem para más espacio */
    
    /* DISPOSICIÓN (Centrado mejorado) */
    display: flex;
    justify-content: center;
    gap: 1rem;                /* Separación entre botones (1.25rem para más aire) */
    
    /* ESTADO INICIAL */
    opacity: 0;             /* Visible pero discreto (cambiar a 1 para siempre visible) */
    transform: none;          /* Elimina transformación inicial */
    
    /* EFECTOS AVANZADOS */
    z-index: 20;                                /* Asegura visibilidad */
    backdrop-filter: blur(4px);                 /* Efecto vidrio (aumentar a 6px para más difuminado) */
    -webkit-backdrop-filter: blur(4px);         /* Soporte Safari */
    
    /* TRANSICIONES (Suavizar aparición) */
    transition: opacity 0.3s ease;
}

.video-container.paused .video-controls,
.video-container:hover .video-controls {
    opacity: 1;
}

/* HOVER CONTROLES (Feedback visual) */
.video-container:hover .video-controls {
    opacity: 1;         /* Totalmente visible al interactuar */
}

/* BOTONES (Diseño profesional) */
.video-controls button {
    /* ESPACIADO */
    padding: 0.75rem 1.5rem;                  /* Aumentar a 1rem 2rem para botones más grandes */
    
    /* ESTILO (Color corporativo) */
    background: rgba(70, 150, 230, 0.95);     /* Azul profesional (usar #1a73e8 para Google) */
    color: white;
    border: none;
    border-radius: 50px;    /* Forma "pastilla" */
    
    /* INTERACTIVIDAD */
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);   /* Animación premium */
    
    /* TIPOGRAFÍA */
    font-weight: 500;           /* Semibold para mejor legibilidad */
    font-size: 0.875rem;        /* Aumentar a 1rem si es necesario */
    
    /* DISPOSICIÓN */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;                      /* Espacio icono/texto */
    min-width: 140px;                 /* Ancho mínimo (160px para textos largos) */
    
    /* EFECTOS 3D */
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.15),              /* Sombra exterior */
        0 1px 0 rgba(255, 255, 255, 0.1) inset;     /* Brillo interior */
}

/* HOVER BOTONES (Efecto premium) */
.video-controls button:hover {
    background: rgba(80, 160, 240, 1);              /* Color más vibrante */
    transform: translateY(-1px);                    /* Efecto levitación */
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),              /* Sombra más intensa */
        0 2px 0 rgba(255, 255, 255, 0.15) inset;    /* Más brillo */
}

/* CLICK BOTONES (Feedback táctil) */
.video-controls button:active {
    transform: translateY(0);       /* Efecto "presionado" */
}

/* ANIMACIÓN DE CARGA (Mejorar experiencia) */
.video-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);                  /* Ajustar a espacio de controles */
    background: linear-gradient(-45deg, #0a0a0a, #1a1a1a, #0a0a0a);
    background-size: 400% 400%;
    animation: loadingPulse 1.5s ease infinite;
    z-index: 1;                                /* Debajo del video pero sobre el fondo */
}

/* Clase CSS para modo teatro */
.video-container.theater-mode {
    max-height: 90vh;
    border-radius: 0;
}

.video-progress {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,0.2);
}

/* ANIMACIÓN (Personalizar para branding) */
@keyframes loadingPulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ------------------------------------------------------ */
/* -------------- SECCIÓN ESPECIFICACIONES -------------- */
/* ------------------------------------------------------ */

.product-specs {
    /* LAYOUT FLEXIBLE */
    flex: 1 1 100%;               /* Ocupa 50% del espacio pero puede ajustarse */
    width: 100%;                  /* Responsive: mínimo entre 100% o 620px */
    padding: 0 1.5rem;            /* Espaciado horizontal (aumentar a 2rem para más aire) */
    
    /* MEJORA PROFESIONAL: */
    /* Añadir para scroll interno en móviles */
    overflow-y: auto;
    scrollbar-width: thin;
}

/* TÍTULO PRINCIPAL - Jerarquía visual */
#modalProductTitle {
    width: 100%;                  /* Aseguramos que el título use todo el ancho disponible */
    color: #2C5282;               /* Azul corporativo (cambiar de #3A6B8C a #2C5282 para más contraste) */
    margin: 0 0 0.75rem 0;        /* Espaciado inferior (1rem para más separación) */
    font-size: 1.5rem;            /* Tamaño (1.75rem para más jerarquía) */
    font-weight: 600;             /* Grosor (700 para más énfasis) */
    letter-spacing: -0.015em;     /* Kerning negativo para títulos largos */
    line-height: 1.2;             /* Interlineado (1.2 para estilos condensados) */
    
    /* MEJORA: */
    text-shadow: 0 1px 1px rgba(0,0,0,0.05);    /* Sutil profundidad */
}

/* SUBTÍTULO MODELO - Jerarquía secundaria */
#modalProductModel {
    color: #718096 ;              /* Gris medio (usar de #5E5E5E a #718096 para accesibilidad) */
    margin: 2rem 0;               /* Espaciado inferior (2rem para productos complejos) */
    font-size: 1.15rem;           /* Tamaño relativo al título */
    font-weight: 400;             /* Peso normal */
    display: block;               /* Asegura comportamiento de bloque */
    padding-bottom: 1rem;         /* Espacio antes del borde */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);    /* Divisor sutil (aumentar a 0.1 para más visibilidad) */
}

/* TABLA DE ESPECIFICACIONES - Estructura de datos */
.specs-table {
    width: 100%;                  /* Ocupa todo el ancho */
    border-collapse: separate;    /* Necesario para bordes redondeados */
    border-spacing: 0 0.3rem;     /* Espacio vertical entre filas (aumentar a 0.75rem) */
    margin: 1.3rem 0;             /* Espaciado vertical (2rem para más separación) */
    background: transparent;      /* Fondo transparente */
    
    /* MEJORA: */
    /* Efecto hover para filas */
    tr { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    tr:hover {
        transform: translateX(4px);
        box-shadow: 2px 0 0 0 rgba(74, 123, 157, 0.5) inset;
    }
}

/* CELDAS COMUNES - Estilos base */
.specs-table th, 
.specs-table td {
    padding: 1rem 1.5rem;                     /* Espaciado interno (1rem 1.5rem para más espacio) */
    text-align: left;                         /* Alineación izquierda (justify para textos largos) */
    vertical-align: center;                   /* Alineación superior */
    transition: background-color 0.2s ease;   /* Transición suave para hover */
    /* MEJORA: */
    hyphens: auto;                            /* Corte de palabras responsivo */
}

/* ENCABEZADOS - Estilo diferenciado */
.specs-table th {
    color: #1A202C ;                          /* Gris oscuro (usar de #2D3748 a #1A202C para más contraste) */
    font-weight: 500;                         /* Peso medio (600 para más énfasis) */
    width: 35%;                               /* Ancho de columna (35% para datos largos) */
    background-color: rgba(74, 123, 157, 0.1);   /* Fondo azul claro */
    border-radius: 10px;                      /* Bordes redondeados izquierdos */
    font-size: 0.8rem;                        /* Tamaño de Fuente de Descricpion */
    text-transform: uppercase;                /* Mayúsculas estilísticas */
    letter-spacing: 0.05em;                   /* Espaciado entre letras */
    /* MEJORA: */
    position: sticky;
    left: 0;                                  /* Fija encabezados en scroll horizontal */
}

/* CELDAS DE DATOS - Contenido principal */
.specs-table td {
    width: 65%;                               /* Complementario al 35% del th para total 100% */
    color: #4A5568;                           /* Gris oscuro (usar #2D3748 para modo claro) */
    font-weight: 400;                         /* Peso normal */
    font-size: 0.8rem;                        /* Tamaño de fuente de las descripcione (1rem para accesibilidad) */
    line-height: 1.5;                         /* Interlineado amplio (1.6 para textos largos) */
    border-radius: 10px;                      /* Bordes redondeados derechos */
    background-color: rgba(255, 255, 255, 0.7); /* Fondo semi-transparente */
    
    /* MEJORA: */
    /* Destacar valores importantes */
    &[data-important="true"] {
        font-weight: 600;
        color: #2B6CB0;
        background-color: rgba(43, 108, 176, 0.08);
    }
}

/* ---------------------------------------------------------- */
/* -------------- SECCIÓN DE DESCARGA MEJORADA -------------- */
/* ---------------------------------------------------------- */

/**
 * CONTENEDOR PRINCIPAL DE DESCARGA
 * - Agrupa botón y documento técnico
 * - Espaciado consistente
 * - Alineación centralizada
 */
/* ============================================== */
/* ========== SECCIÓN DE DESCARGA =============== */
/* ============================================== */

/* CONTENEDOR PRINCIPAL DE DESCARGA */
.download-section {
    width: 75%;                      /* Ancho reducido al 90% del contenedor padre */
    max-width: 600px;                /* Ancho máximo más pequeño (antes sin límite) */
    margin: 1.5rem auto 0;           /* Margen superior reducido a 1.5rem (24px) */
    padding: 1rem;                   /* Padding interno reducido (antes 1.5rem) */
    border-top: 1px solid rgba(0, 0, 0, 0.08); /* Línea divisoria sutil con transparencia */
    text-align: center;                 /* Centrado de elementos hijos */
    display: flex;                      /* Flexbox para mejor control de layout */
    flex-direction: column;             /* Dirección vertical */
    gap: 1.5rem;                        /* Espacio uniforme entre elementos hijos */
    
    /* MEJORA PROFESIONAL: */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente */
    backdrop-filter: blur(2px);         /* Efecto de desenfoque sutil */
    border-radius: 12px;                /* Bordes más redondeados */
    padding: 1.5rem;                    /* Más espacio interno */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Sombra más profesional */
}

/* BOTÓN PRINCIPAL DE DESCARGA (AHORA EN ROJO PROFESIONAL) */
.download-btn {
    /* DISEÑO Y ESPACIO */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.7rem 1.5rem;             /* Padding reducido (antes 0.9rem 2.2rem) */
    min-width: 100px;                   /* Ancho mínimo aumentado */

    /* COLORES ROJO PROFESIONAL (PALETA MEJORADA) */
    background-color: #D32F2F;          /* Rojo primario material design */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    /* TIPOGRAFÍA MEJORADA */
    font-weight: 600;                   /* Más peso para mejor legibilidad */
    font-size: 0.8rem;                  /* Reducido de 0.9rem a 0.8rem (~13px) */
    letter-spacing: 0.03em;             /* Más espaciado entre letras */
    text-transform: uppercase;          /* Texto en mayúsculas para énfasis */
    
    /* EFECTOS VISUALES MEJORADOS */
    box-shadow: 
        0 4px 8px rgba(211, 47, 47, 0.3), /* Sombra con color coordinado */
        0 2px 4px rgba(0, 0, 0, 0.1);
    
    /* TRANSICIONES MEJORADAS */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* EFECTO HOVER PROFESIONAL */
    &:hover {
        background-color: #B71C1C;      /* Rojo más oscuro al hover */
        transform: translateY(-2px);    /* Efecto de elevación */
        box-shadow: 0 6px 12px rgba(211, 47, 47, 0.4);
    }
    
    /* EFECTO ACTIVE */
    &:active {
        transform: translateY(0);
        box-shadow: 0 3px 6px rgba(211, 47, 47, 0.3);
    }
    
    /* MEJORA: PSEUDOELEMENTO PARA EFECTO DE RIPPLE */
    position: relative;
    overflow: hidden;
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }
    &:focus:not(:active)::after {
        animation: ripple 1s ease-out;
    }
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* CONTENEDOR DE DOCUMENTO TÉCNICO (MEJORADO) */
.download-document {
    margin-top: 1rem;
    ppadding: 1rem;                     /* Reducido de 1.75rem a 1rem (16px)
    background-color: #FFF5F5;          /* Fondo rojo muy claro para armonía */
    border-radius: 10px;                /* Bordes más redondeados */
    text-align: left;
    box-shadow: 
        inset 0 0 0 1px rgba(211, 47, 47, 0.1), /* Borde interno sutil en rojo */
        0 3px 12px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada */
    
    /* MEJORA: TRANSICIÓN PARA HOVER */
    transition: box-shadow 0.3s ease;
    &:hover {
        box-shadow: 
            inset 0 0 0 1px rgba(211, 47, 47, 0.2),
            0 5px 15px rgba(0, 0, 0, 0.1);
    }
}

/* TEXTO DEL DOCUMENTO (MEJORADO) */
.document-text {
    font-size: 0.5rem;                  /* Reducido de 0.9rem a 0.8rem (~13px) */
    line-height: 1.5;                   /* Interlineado reducido de 1.7 */
    color: #5E5E5E;                     /* Color más profesional */
    margin: 0;
    
    /* MEJORA: DESTACADO PARA TÉRMINOS IMPORTANTES */
    strong {
        color: #D32F2F;                /* Rojo coordinado */
        font-weight: 600;
    }
}

/* TEXTO INFORMATIVO (MEJORADO) */
.download-info {
    display: block;
    margin-top: 0.5rem;                 /* Margen superior reducido de 1rem */
    color: #757575;                     /* Gris más profesional */
    font-size: 0.5rem;                  /* Reducido de 0.8rem a 0.75rem (~12px) */
    line-height: 1.6;
    max-width: 400px;                   /* Ancho máximo reducido de 480px */
    margin-left: auto;
    margin-right: auto;
    
    /* MEJORA: ICONO INTEGRADO */
    &::before {
        content: "ⓘ";
        margin-right: 6px;
        color: #D32F2F;                /* Rojo coordinado */
        font-size: 0.9em;
    }
}

/* ============================================= */
/* ============ ESTADOS INTERACTIVOS =========== */
/* ============================================= */

/* EFECTO HOVER PARA EL BOTÓN */
.download-btn:hover {
    background-color: #2E5A7A;           /* COLOR DE FONDO MÁS OSCURO */
    transform: translateY(-2px);         /* LEVANTAMIENTO SUTIL */
    box-shadow: 
        0 7px 14px rgba(58, 107, 140, 0.25), /* SOMBRA MÁS PRONUNCIADA */
        0 3px 6px rgba(0, 0, 0, 0.12);
}

/* EFECTO ACTIVE (CLIC) */
.download-btn:active {
    transform: translateY(0);            /* VUELVE A POSICIÓN ORIGINAL */
    box-shadow: 
        0 4px 6px rgba(58, 107, 140, 0.2), /* SOMBRA ORIGINAL */
        0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ESTADO FOCUS PARA ACCESIBILIDAD */
.download-btn:focus {
    outline: none;                       /* ELIMINA OUTLINE POR DEFECTO */
    box-shadow: 
        0 0 0 3px rgba(58, 107, 140, 0.4), /* SOMBRA QUE SIMULA FOCO */
        0 4px 6px rgba(58, 107, 140, 0.2);
}

/* ============================================= */
/* ============ VERSIÓN RESPONSIVE ============= */
/* ============================================= */

@media (max-width: 768px) {
    .download-section {
        margin-top: 2rem;                /* REDUCE ESPACIO SUPERIOR EN MÓVILES */
        padding-top: 1.5rem;             /* AJUSTE DE PADDING */
        gap: 1rem;                       /* MENOS ESPACIO ENTRE ELEMENTOS */
    }
    
    .download-btn {
        min-width: 200px;                /* ANCHO MÍNIMO REDUCIDO */
        padding: 0.875rem 1.5rem;        /* PADDING MÁS COMPACTO */
        font-size: 0.875rem;             /* TEXTO UN POCO MÁS PEQUEÑO */
    }
    
    .download-document {
        padding: 1rem;                   /* MENOS PADDING INTERNO */
    }
    
    .document-text {
        font-size: 0.8125rem;            /* TEXTO MÁS PEQUEÑO EN MÓVILES */
    }
    
    .download-info {
        font-size: 0.75rem;              /* TEXTO INFORMATIVO MÁS PEQUEÑO */
        padding: 0 1rem;                 /* PADDING LATERAL */
    }
}

/* =========================================================== */
/* --------- MEDIA QUERIES PARA DISPOSITIVOS MÓVILES --------- */
/* =========================================================== */
/* Estilos base mejorados para el video */
.video-container {
  position: relative;
  width: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16/9; /* Ratio más apropiado para video */
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Modal mejorado para móviles */
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Mejor scrolling en iOS */
}

@media screen and (max-width: 1200px) {
  .main-container {
    flex-direction: column;
    gap: 30px;
  }
  
  .products-menu {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
}

@media screen and (max-width: 992px) {
  .models-dropdown {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.05);
    display: none;
  }
  
  .models-dropdown::before {
    display: none;
  }
  
  .products-menu ul.sub-menu > li:hover > .models-dropdown,
  .products-menu ul.sub-menu > li:focus-within > .models-dropdown {
    display: block;
  }
  
  .product-display {
    flex-direction: column;
  }
  
  .product-media {
    min-width: 100%;
  }
  
  .specs-table th, 
  .specs-table td {
    display: block;
    width: 100%;
  }
  
  .specs-table th {
    position: static;
    border-radius: 8px 8px 0 0;
  }
  
  .specs-table td {
    border-radius: 0 0 8px 8px;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 768px) {
  .top-bar-right {
    justify-content: center;
    padding: 8px 15px;
  }
  
  .language-selector {
    margin-left: 15px;
  }
  
  .top-bar-right .language-selector img {
    max-width: 35px;
    max-height: 35px;
  }
  
  .main-container {
    padding: 20px 15px;
    gap: 20px;
  }
  
  .content-area h1 {
    font-size: 1.4rem;
    width: 90%;
    padding: 1rem 1.2rem 1.3rem;
  }
  
  .content-area h1::after {
    width: 60px;
    height: 3px;
    bottom: 12px;
  }
  
  .product-gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .product-card {
    height: auto;
  }
  
  .product-img-container {
    height: 180px;
  }
  
  .modal-content {
    width: 95%;
    padding: 1rem;
    margin: 2vh auto;
  }
  
  .close {
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    z-index: 1001; /* Aseguramos que esté por encima del video */
  }
  
  /* CORRECCIÓN PRINCIPAL: Contenedor de video mejorado */
  .video-container {
    min-height: 200px;
    max-height: 50vh; /* Aumentamos la altura máxima */
    aspect-ratio: 16/9; /* Ratio estándar para video */
  }
  
  .video-controls {
    padding: 0.75rem;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  
  .video-controls button {
    padding: 0.6rem 1rem;
    min-width: 120px;
    font-size: 0.8rem;
  }
  
  .download-section {
    width: 90%;
    padding: 1rem;
    gap: 1rem;
  }
  
  .download-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.75rem;
    min-width: 140px;
  }
  
  .document-text, 
  .download-info {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 480px) {
  .products-menu {
    padding: 15px 10px;
  }
  
  .products-menu h3 {
    font-size: 1rem;
    padding: 0.6rem 1rem;
  }
  
  .products-menu ul.sub-menu > li > a {
    padding: 5px 8px;
    font-size: 0.85rem;
  }
  
  .content-area h1 {
    font-size: 1.2rem;
    width: 95%;
    padding: 0.8rem 1rem 1.1rem;
  }
  
  .product-gallery {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .product-img-container {
    height: 160px;
  }
  
  .product-info h3 {
    font-size: 15px;
    height: auto;
    white-space: normal;
  }
  
  .modal-content {
    padding: 0.8rem;
    width: 98%;
    margin: 1vh auto;
  }
  
  .product-media {
    padding: 0.5rem;
  }
  
  /* CORRECCIÓN: Aseguramos que el video ocupe todo el ancho disponible */
  .video-container {
    min-height: 180px;
    max-height: 40vh;
    aspect-ratio: 16/9;
  }
  
  .specs-table th, 
  .specs-table td {
    padding: 0.8rem;
  }
  
  .download-section {
    width: 100%;
  }
  
  /* Mejora para controles de video en móviles muy pequeños */
  .video-controls {
    flex-direction: column;
  }
  
  .video-controls button {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Mejoras de usabilidad para dispositivos táctiles */
@media (hover: none) {
  .products-menu ul.sub-menu > li > a:hover {
    transform: none;
    background-color: transparent;
  }
  
  .product-card:hover {
    transform: none;
  }
  
  .product-card:hover .product-img-container img {
    transform: none;
  }
  
  .content-area h1:hover {
    transform: none;
  }
  
  .content-area h1:hover::after {
    animation: none;
  }
  
  /* Mejora para controles táctiles de video */
  .video-controls button {
    min-height: 44px; /* Tamaño mínimo para touch */
  }
}

/* Prevenir zoom en inputs en iOS */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Mejoras de accesibilidad para modo de alto contraste */
@media (prefers-contrast: high) {
  .products-menu {
    border: 2px solid #000;
  }
  
  .product-card {
    border: 1px solid #000;
  }
  
  .specs-table th {
    background-color: #000;
    color: #fff;
  }
  
  /* Mejora para controles de video en alto contraste */
  .video-controls button {
    border: 2px solid currentColor;
  }
}

/* Soporte para navegadores que no admiten grid */
@supports not (display: grid) {
  .product-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .product-card {
    flex: 0 0 calc(50% - 20px);
    margin: 10px;
  }
  
  @media screen and (max-width: 768px) {
    .product-card {
      flex: 0 0 100%;
    }
  }
}

/* Corrección específica para iOS y Safari */
@supports (-webkit-touch-callout: none) {
  .video-container {
    /* Corrección específica para Safari */
    overflow: visible;
  }
  
  .video-container video {
    /* Mejor rendimiento de video en iOS */
    -webkit-transform: translateZ(0);
  }
}