/* Reset básico y tipografía general */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f0f0f0, #ffffff); /* Fondo claro con degradado sutil */
    color: #000000; /* Negro Profundo */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
/* --- Estilos para el encabezado (Inicio) - Vertical con armonía --- */
#header-inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: #f0f0f0; /* Fondo claro */
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}
/* --- Estilos para el logo grande --- */
/*.logo-grande-container {
    Asegúrate de que el contenedor sea flexible
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem; Espacio debajo del logo
}*/
.logo-grande {
    /* Ajusta el tamaño del logo grande */
    height: 120px; /* Ejemplo de altura */
    width: auto; /* Mantiene la proporción */
    max-width: 100%; /* Asegura que no se desborde */
    margin: 0; /* Elimina cualquier margen extra */
}
/* --- Estilos para el slogan (igual que el CTA) --- */
#header-inicio h1 {
    font-size: 1rem;
    color: #000000; /* Negro Profundo */
    margin: 0 0 0.5rem 0; /* Espacio arriba y abajo */
    font-style: italic;
    font-family: 'Georgia', serif;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 1.5;
    text-align: center;
}
/* --- Estilos para la barra de navegación (Mundialista) --- */
.navbar {
    display: flex;
    /* Fondo con degradado tricolor */
    background: linear-gradient(to bottom, #006337, #FFFFFF, #C00000); /* Verde (arriba) -> Blanco (centro) -> Rojo (abajo) */
    padding: 0.7rem 0; /* Aumenta ligeramente el padding vertical */
    justify-content: center; /* Centra los botones horizontalmente */
    /* Sombra para destacar */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    width: 100%;
    position: relative; /* Necesario para el efecto del borde activo */
    z-index: 999; /* Asegura que esté por encima de otros elementos */
}
/* --- Estilos para los botones de la barra de navegación --- */
.nav-btn {
    flex: 1;
    background-color: transparent; /* Fondo transparente por defecto */
    border: none;
    color: #000000; /* Negro Profundo */
    font-size: 0.8rem;
    padding: 0.6rem 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Transición más suave */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem; /* Aumenta ligeramente el espacio entre icono y texto */
    font-weight: 500;
    border-radius: 8px; /* Bordes más redondeados */
    margin: 0 0.1rem;
    font-family: inherit;
    position: relative; /* Para el efecto del borde activo */
    overflow: hidden; /* Oculta el desbordamiento del efecto hover */
}
/* Efecto hover para los botones */
.nav-btn:hover {
    /* Cambia el color de fondo a blanco con transparencia */
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px); /* Levanta ligeramente el botón */
    /* Añade una sombra al pasar el mouse */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Efecto focus para accesibilidad */
.nav-btn:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: -2px;
}
/* Efecto para el botón de la sección activa */
.nav-btn.active {
    background-color: rgba(255, 255, 255, 0.2); /* Fondo blanco más claro */
    font-weight: bold;
    /* Añade un borde inferior tricolor */
    border-bottom: 3px solid #006337; /* Verde */
    border-top: 1px solid #C00000; /* Rojo */
    /* Opcional: Añade una sombra interna para resaltar el borde */
    box-shadow: inset 0 -2px 4px rgba(0, 99, 55, 0.3), inset 0 1px 2px rgba(192, 0, 0, 0.3);
}
/* Aumenta el tamaño de los iconos */
/*.nav-btn::before {
    font-size: 1.4rem; Ajusta el tamaño del icono
}*/
/* Opcional: Efecto de "pulsación" sutil en el botón activo */
/*@keyframes pulseActive {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.nav-btn.active {
    animation: pulseActive 2s infinite; Repite la animación indefinidamente
}*/
/* --- Estilos para el título de categorías (Negro, Grueso y Destacado) --- */
.titulo-categorias {
    margin-bottom: 1rem;
    text-align: center;
    color: #000000; /* Negro Profundo */
    font-size: 1.3rem; /* Ligeramente más grande */
    font-weight: bold; /* Fuente gruesa */
    text-transform: uppercase; /* Mayúsculas para más impacto */
    letter-spacing: 0.5px; /* Espaciado entre letras para más claridad */
}
/* Header simplificado (para otras secciones) */
.header--simple {
    text-align: center;
    padding: 0.75rem 1rem;
    background-color: #f0f0f0; /* Fondo claro */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: linear-gradient(to bottom, #f0f0f0, #e0e0e0); /* Degradado sutil */
    position: relative;
    border-bottom: 1px solid #dcdde1;
}
.header--simple h1 {
    font-size: 1.1rem;
    color: #C00000; /* Rojo Pasión */
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* --- Estilo para el botón flotante "Atrás" (Rojo Pasión) --- */
/* Animación de flotación */
@keyframes float {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-2px) scale(1.02); }
    100% { transform: translateY(0px) scale(1); }
}
.btn-flotante-atras {
    position: fixed;
    top: 0.5rem;
    left: 0.75rem;
    background-color: #C00000; /* Rojo Pasión */
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: inherit;
    /* Añadimos la animación */
    animation: float 3s ease-in-out infinite;
}
/* --- Ajuste específico para móviles: Mover el botón "Atrás" más abajo --- */
@media (max-width: 768px) {
    .btn-flotante-atras {
        top: 6.0rem; /* Aumenta el margen superior para que no se empalme con el logo */
        left: 0.75rem; /* Mantiene la misma posición horizontal */
    }
}
/* Efecto hover opcional */
.btn-flotante-atras:hover {
    background-color: #000000; /* Negro Profundo */
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* --- Estilos para el contenido principal --- */
.contenido {
    padding: 1rem;
    flex: 1;
}
.pagina h1 {
    margin-bottom: 0.75rem;
    color: #C00000; /* Rojo Pasión */
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
}
.pagina h2 {
    margin: 1rem 0 0.5rem;
    color: #000000; /* Negro Profundo */
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
}
.pagina ul {
    margin-left: 1rem;
    margin-bottom: 1rem;
}
.pagina p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
/* --- Estilos para la cuadrícula de categorías (usado en la vista de Inicio) --- */
.categorias-grid {
    display: flex; /*<-- Cambiado a Flexbox */
    flex-wrap: wrap; /*<-- Permite que las tarjetas se envuelvan */
    justify-content: center; /*<-- Centra las tarjetas horizontalmente */
    gap: 1rem; /*<-- Mantiene el espacio entre tarjetas */
    padding: 1rem; /*<-- Añade padding al contenedor */
    margin-top: 1rem; /*<-- Mantiene el margen superior */
}
.categoria-card {
    flex-basis: calc(50% - 0.5rem); /* <-- Ancho de cada tarjeta: 50% menos la mitad del gap */
    box-sizing: border-box; /* <-- Asegura que padding y border estén incluidos en el ancho */
    /* --- Mantiene tus estilos actuales de diseño --- */
    background: linear-gradient(145deg, #f0f0f0, #fafafa); /* Degradado suave dentro de la tarjeta */
    padding: 0.75rem;
    border-radius: 16px; /* Bordes más redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra más suave pero más grande */
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 220px;
    border: 1px solid #e0e0e0; /* Borde más claro */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animación al pasar el mouse */
}
/* --- Efecto hover para las tarjetas de categoría (mantenido) --- */
.categoria-card:hover {
    transform: translateY(-4px); /* Levanta ligeramente la tarjeta */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* Sombra más pronunciada al pasar el mouse */
    background: linear-gradient(145deg, #f0f0f0, #f0f0f0); /* Cambia el degradado al hacer hover */
}
.categoria-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px; /* Bordes más redondeados */
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Sombra sutil para separarla del fondo */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Efecto hover para la imagen */
.categoria-card:hover img {
    transform: scale(1.02); /* Aumenta ligeramente el tamaño */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
}
.categoria-card h3 {
    margin-top: 0.25rem;
    font-size: 0.95rem;
    color: #006337; /* Verde */
    font-weight: 600; /* Más grueso */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: none; /* Elimina la mayúscula si no la quieres */
    transition: color 0.2s ease; /* Transición suave del color */
}
/* Efecto hover para el título */
.categoria-card:hover h3 {
    color: #000000; /* Negro Profundo al hacer hover */
}
/* --- Estilos para la cuadrícula de productos (usado en las vistas de categoría) --- */
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
/* Tarjeta flexible de producto - CORREGIDO */
.producto-card {
  background: #F8F8F8; /* Blanco Neutro */
  padding: 0.75rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px; /* <-- AUMENTADO de 350px a 400px */
  border: 1px solid #EEE8DD;
  transition: transform 0.2s ease;
  overflow: hidden;
}
.producto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.producto-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    object-position: center;
    border-radius: block;
    box-shadow: none;
    background: transparent;
    border-radius: 8px
}
.nombre-producto {
    font-size: 1rem; /* <-- AUMENTADO de 0.9rem a 1rem */
    color: #C00000; /* Rojo Pasión */
    font-weight: bold;
    margin: 0.25rem 0;
    text-transform: none; /*<-- Eliminado el uppercase para un aspecto más moderno */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2; /* Ajusta el espaciado entre líneas */
}
.descripcion {
    color: #000000; /* Negro Profundo */
    font-size: 0.75rem;
    margin: 0.25rem 0;
    flex-grow: 1; /* Empuja otros elementos hacia arriba y abajo */
    display: flex;
    align-items: center;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
.precio-volumen {
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0;
    width: 100%;
    flex-shrink: 0; /* No se encoge para dejar espacio a botones */
}
.precio {
    font-size: 1rem;
    color: #C00000; /* Rojo Pasión */
    font-weight: bold;
}
.volumen {
    font-size: 0.8rem;
    color: #888;
}
/* Botón "Añadir" dentro de la tarjeta - CORREGIDO */
.btn-agregar-fijo {
    background-color: #C00000; /* Rojo */
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 0.5rem; /* Espacio arriba del botón */
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: inherit;
    flex-shrink: 0; /*<-- CORREGIDO: Impide que el botón se encogo */
}
.btn-agregar-fijo:hover {
    background-color: #000000; /* Negro Profundo */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btn-agregar-fijo:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: 2px;
}
.btn-agregar-fijo:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Feedback de éxito para botón de agregar */
.btn-exito {
    background-color: #006337 !important; /* Verde */
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}
/* --- Estilos para el carrito (Tricolor) --- */
.carrito {
    background: #f0f0f0; /* Fondo claro */
    margin: 1rem;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
    border-top: 4px solid #006337; /* Verde */
    border: 1px solid #EEE8DD;
    transition: all 0.3s ease-in-out; /* Transición suave */
}
.carrito:hover {
    box-shadow: 0 -6px 20px rgba(0,0,0,0.15);
    transform: translateY(-2px); /* Levantar ligeramente al pasar el mouse */
}
/* --- Encabezado del carrito --- */
.carrito h2 {
    margin-bottom: 0.75rem;
    color: #C00000; /* Rojo Pasión */
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar horizontalmente */
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}
/* --- Emoji de carrito --- */
/*.carrito h2 .emoji-carrito {
    font-size: 1.2rem;
}*/
.carrito ul {
    list-style: none;
    margin-bottom: 0.75rem;
    padding-left: 0;
    max-height: 200px; /* Altura máxima para scroll */
    overflow-y: auto; /* Scroll si hay muchos items */
    border: 1px solid #EEE8DD;
    border-radius: 8px;
    padding: 0.5rem;
    background-color: #f9f9f9;
}
.carrito ul li {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px dashed #EEE8DD;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
.carrito ul li:hover {
    background-color: #e9ecef;
}
.carrito ul li:last-child {
    border-bottom: none;
}
/* --- Estilo para el total del carrito --- */
#carrito-total {
    font-weight: bold;
    font-size: 1.2rem;
    color: #C00000; /* Rojo Pasión */
    margin: 0.5rem 0;
    text-align: center;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #C00000; /* Rojo Pasión */
}
#carrito-total strong {
    color: #000000; /* Negro Profundo */
    font-size: 1.3rem;
}
.mensaje-minimo {
    font-size: 0.8rem;
    margin: 0.5rem 0;
    color: #C00000; /* Rojo Pasión para alertas */
    font-weight: 500;
    text-align: center;
    padding: 0.5rem;
    background-color: #e9ecef;
    border-radius: 6px;
    border-left: 4px solid #C00000; /* Rojo Pasión */
}
/* Botón "Finalizar Pedido" - Verde */
.btn-principal {
    background-color: #C00000; /* Verde */
    color: white;
    border: none;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
    margin-top: 0.5rem;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-principal:hover {
    background-color: #000000; /* Negro Profundo */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btn-principal:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: 2px;
}
.btn-principal:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* --- Estilos para los botones de tipo de envío en el carrito --- */
.opciones-envio-carrito {
    margin: 1rem 0;
    padding: 0.5rem 0;
    border-top: 1px dashed #EEE8DD;
    border-bottom: 1px dashed #EEE8DD;
}
.opciones-envio-carrito h3 {
    font-size: 0.9rem;
    color: #000000; /* Negro Profundo */
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-align: center;
}
.botones-envio-carrito {
    display: flex;
    flex-direction: column; /* Apilados verticalmente */
    gap: 0.5rem; /* Espacio entre botones */
}
.btn-envio-carrito {
    background-color: #f8f9fa; /* Color neutro */
    color: #000000; /* Negro Profundo */
    border: 1px solid #dcdde1;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease-in-out;
    text-align: center;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-envio-carrito:hover {
    background-color: #e9ecef; /* Color al pasar el mouse */
    color: #000000;
    border-color: #bdc3c7;
    transform: scale(1.02); /* Ligeramente más grande */
}
.btn-envio-carrito.activo {
    background-color: #006337; /* Verde */
    color: white;
    border-color: #006337;
    font-weight: 500;
    transform: scale(1.02);
}
.btn-envio-carrito:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: 2px;
}
/* --- Mensaje de envío seleccionado --- */
.mensaje-envio-seleccionado {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: rgba(0, 99, 55, 0.15); /* Verde con transparencia */
    border-radius: 6px;
    border-left: 4px solid #006337; /* Verde */
    font-size: 0.8rem;
    text-align: center;
    font-weight: 500;
}
/* --- Estilos para el peso total en el carrito --- */
.peso-total {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: rgba(0, 99, 55, 0.15); /* Verde con transparencia */
    border-radius: 6px;
    border-left: 4px solid #006337; /* Verde */
    font-size: 0.8rem;
    text-align: center;
    font-weight: 500;
}
/* --- Estilos para el costo de envío y total con envío en el carrito --- */
.costo-envio,
.total-con-envio {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: rgba(0, 99, 55, 0.15); /* Verde con transparencia */
    border-radius: 6px;
    border-left: 4px solid #006337; /* Verde */
    font-size: 0.9rem;
    text-align: center;
    font-weight: 600; /* Negrita */
    color: #000000; /* Negro Profundo */
}
/* --- Estilos para controles de cantidad y eliminar en la lista del carrito --- */
.controles-cantidad-carrito {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* Espacio entre botones */
    margin-left: 0.5rem; /* Espacio desde el texto */
    /* Cambiamos justify-content para alinear los botones a la derecha */
    justify-content: flex-end;
}
.btn-cantidad-carrito {
    background-color: #006337; /* Verde */
    color: white;
    border: none;
    width: 1.8rem; /*<-- AUMENTADO de 1.5rem a 1.8rem */
    height: 1.8rem; /*<-- AUMENTADO de 1.5rem a 1.8rem */
    border-radius: 50%; /* Forma circular */
    cursor: pointer;
    font-size: 1rem; /*<-- AUMENTADO de 0.9rem a 1rem */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0; /* No se encoge */
}
.btn-cantidad-carrito:hover {
    background-color: #000000; /* Negro Profundo */
    transform: scale(1.1);
}
.btn-cantidad-carrito:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: 2px;
}
.cantidad-carrito {
    font-weight: bold;
    min-width: 1.5rem; /* Ancho mínimo para alineación */
    text-align: center;
}
.btn-eliminar-carrito {
    background-color: #000000; /* Negro Profundo para eliminar */
    color: white;
    border: none;
    width: 1.8rem; /*<-- AUMENTADO de 1.5rem a 1.8rem */
    height: 1.8rem; /*<-- AUMENTADO de 1.5rem a 1.8rem */
    border-radius: 50%; /* Forma circular */
    cursor: pointer;
    font-size: 1rem; /*<-- AUMENTADO de 0.9rem a 1rem */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0; /* No se encoge */
}
.btn-eliminar-carrito:hover {
    background-color: #333333; /* Gris oscuro */
    transform: scale(1.1);
}
.btn-eliminar-carrito:focus {
    outline: 2px dashed #000000;
    outline-offset: 2px;
}
/* --- Pie de página del carrito --- */
.footer-carrito {
    text-align: center;
    padding: 0.5rem;
    background-color: #006337; /* Verde */
    color: white;
    margin-top: 1rem;
    border-top: 2px solid #C00000; /* Rojo */
    font-size: 0.7rem;
    border-radius: 0 0 12px 12px;
    font-weight: 400;
}
/* --- Estilos para el Modal --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}
.modal-contenido {
    background-color: #f0f0f0; /* Fondo claro */
    margin: 10% auto;
    padding: 1rem;
    border-radius: 12px;
    width: 85%;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: center;
    border: 1px solid #EEE8DD;
    max-height: 80vh; /* Limita la altura del modal al 80% de la ventana */
    overflow-y: auto; /* Añade scroll vertical al modal si el contenido es muy largo */
}
.cerrar-modal {
    color: #AAA;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.cerrar-modal:hover,
.cerrar-modal:focus {
    color: #000;
    background-color: #F5F5F5;
}
.modal-contenido h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #C00000; /* Rojo Pasión */
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center; /* Centrado */
}
.modal-contenido p {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center; /* Centrado */
}
/* Selector de cantidad en modal */
.selector-modal {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado */
    margin: 1rem 0;
    gap: 0.5rem;
}
.btn-cantidad-modal {
    background-color: #006337; /* Verde */
    color: white;
    border: none;
    width: 2.5rem; /* Botón más grande */
    height: 2.5rem; /* Botón más grande */
    border-radius: 50%; /* Forma circular */
    cursor: pointer;
    font-size: 1.2rem; /* Texto más grande */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: inherit;
}
.btn-cantidad-modal:hover {
    background-color: #000000; /* Negro Profundo */
    transform: scale(1.1); /* Ligeramente más grande al pasar el mouse */
}
.btn-cantidad-modal:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: 2px;
}
.cantidad-input-modal {
    width: 50px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 0.5rem;
    outline: none;
    font-family: inherit;
}
.cantidad-input-modal:focus {
    border-color: #006337; /* Verde */
    box-shadow: 0 0 0 2px rgba(0, 99, 55, 0.2);
}
.acciones-modal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    gap: 0.5rem;
}
/* Botón "Agregar al Carrito" -  */
.btn-agregar-modal {
    background-color: #C00000; /* Verde */
    color: white;
    border: none;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
    margin: 0.5rem;
    width: calc(100% - 1rem);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: inherit;
    flex: 1; /* Para que ocupe todo el espacio disponible */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
/* --- Animación de "Borde Brillante" inspirada en Star Border --- */
.btn-agregar-modal:active {
    animation: starBorder 0.5s ease-out;
}
@keyframes starBorder {
    0% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 2px rgba(0, 99, 55, 0.5);
    }
    50% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 4px rgba(0, 99, 55, 0.8);
    }
    100% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 2px rgba(0, 99, 55, 0.5);
    }
}
.btn-agregar-modal:hover {
    background-color: #000000; /* Negro Profundo */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btn-agregar-modal:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: 2px;
}
.btn-agregar-modal:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Botón "Cancelar" - Gris Tenue (Casi Invisible) */
.btn-cancelar-modal {
    background-color: transparent; /* Fondo transparente */
    color: #95A5A6; /* Gris claro */
    border: 1px solid #dcdde1; /* Borde sutil */
    padding: 0.7rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
    margin: 0.5rem;
    width: calc(100% - 1rem);
    box-shadow: none; /* Sin sombra */
    font-family: inherit;
    flex: 1; /* Para que ocupe todo el espacio disponible */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-cancelar-modal:hover {
    background-color: #f8f9fa; /* Fondo muy claro al pasar el mouse */
    color: #000000; /* Negro Profundo */
    border-color: #bdc3c7; /* Borde más oscuro */
    transform: translateY(-2px);
}
.btn-cancelar-modal:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: 2px;
}
.btn-cancelar-modal:active {
    transform: translateY(0);
}
/* --- Estilos para el pie de página (Tricolor) --- */
.footer {
    text-align: center;
    padding: 1rem;
    background: linear-gradient(to bottom, #006337, #FFFFFF, #C00000); /* Verde (arriba) -> Blanco (centro) -> Rojo (abajo) */
    color: white;
    margin-top: auto;
    /* border-top: 3px solid #000000; Negro Profundo - Removido para usar gradiente */
}
.copyright {
    font-size: 0.65rem;
    margin: 0;
    font-weight: 400;
}
/* --- Responsive --- */
@media (max-width: 768px) {
    .categorias-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
    .productos-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Ajuste para móviles */
    }
    /* --- CORRECCIÓN RESPONSIVE PARA TARJETAS --- */
    .producto-card {
        min-height: 280px; /* Altura mínima más pequeña en móviles */
    }
    .header--completo h1 {
        font-size: 0.9rem;
    }
    .header--simple {
        padding: 0.5rem 1rem;
    }
    .header--simple h1 {
        font-size: 1rem;
    }
    .nav-btn {
        font-size: 0.7rem;
        padding: 0.5rem 0.1rem;
    }
    .btn-flotante-atras {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    .contenido {
        padding: 0.75rem;
    }
    .pagina h1 {
        font-size: 1.1rem;
    }
    .pagina h2 {
        font-size: 1rem;
    }
    .titulo-categorias {
        font-size: 1.0rem; /* Más pequeño */
    }
    .carrito {
        margin: 0.75rem;
        padding: 0.75rem;
    }
    .carrito h2 {
        font-size: 1rem;
    }
    .footer {
        padding: 0.75rem;
    }
    .copyright {
        font-size: 0.6rem;
    }
    .modal-contenido {
        width: 90%;
        padding: 0.75rem;
    }
    .selector-modal {
        gap: 0.5rem;
    }
    .btn-cantidad-modal {
        width: 2.2rem; /* Botón más pequeño en móviles */
        height: 2.2rem; /* Botón más pequeño en móviles */
        font-size: 1.1rem; /* Texto más pequeño en móviles */
    }
    .cantidad-input-modal {
        width: 40px;
        font-size: 1rem;
        margin: 0 0.5rem;
    }
    .acciones-modal {
        gap: 0.5rem;
    }
    .btn-agregar-modal, .btn-cancelar-modal {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }
    /* --- CORRECCIÓN RESPONSIVE PARA CONTROLES DE CANTIDAD EN CARRITO --- */
    .btn-cantidad-carrito, .btn-eliminar-carrito {
        width: 1.3rem; /* Botón más pequeño en móviles */
        height: 1.3rem; /* Botón más pequeño en móviles */
        font-size: 0.8rem; /* Texto más pequeño en móviles */
    }
    .cantidad-carrito {
        min-width: 1.3rem; /* Ancho mínimo más pequeño en móviles */
        font-size: 0.85rem; /* Fuente más pequeña en móviles */
    }
    .controles-cantidad-carrito {
        gap: 0.2rem; /* Menos espacio entre botones en móviles */
        margin-left: 0.3rem; /* Menos margen izquierdo en móviles */
    }
}
/* Estilo específico para el botón "Ver Catálogo" dentro de las tarjetas de categoría */
.categoria-card button {
    background-color: #C00000; /* ROJO */
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.75rem;
    transition: all 0.2s ease-in-out;
    margin-top: 0.5rem;
    width: auto; /* Para que el ancho se ajuste al contenido */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.categoria-card button:hover {
    background-color: #000000; /* Negro Profundo */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.categoria-card button:focus {
    outline: 2px dashed #006337; /* Verde */
    outline-offset: 2px;
}
/* --- Estilos para centrar el contenido de la pestaña Contacto --- */
/*.pagina h1 {
    text-align: center; Centra el título principal  "Contacto "
}*/
.contacto-info,
.contacto-accion,
.faq-section {
    text-align: center; /* Centra el texto dentro de estos contenedores */
    max-width: 800px; /* Opcional: Limita el ancho máximo para mejor legibilidad en pantallas grandes */
    margin: 0 auto; /* Centra horizontalmente los contenedores */
    padding: 0 1rem; /* Añade un poco de espacio a los lados */
}
.contacto-item,
.faq-item {
    text-align: left; /* Asegura que el texto dentro de los items esté alineado a la izquierda */
    display: inline-block; /* Hace que los items se comporten como bloques centrados */
    width: 100%; /* Ocupa todo el ancho disponible dentro del contenedor centrado */
    max-width: 600px; /* Opcional: Limita el ancho máximo de cada item */
    margin-bottom: 1rem; /* Espacio entre items */
}
/*.btn-contacto-whatsapp {
    display: inline-block; Centra el botón
    width: auto; Permite que el botón tenga su ancho natural
    max-width: 300px; Opcional: Limita el ancho máximo del botón
    margin: 1rem auto 0; Centra el botón y añade espacio arriba
}*/
/* --- Estilos para la sección de Contacto (existente) --- */
.contacto-info {
    margin-bottom: 1.5rem;
}
.contacto-item {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-left: 3px solid #e0e0e0; /* Línea decorativa */
    padding-left: 1rem;
}
.contacto-item h3 {
    margin-top: 0;
    margin-bottom: 0.25rem;
    color: #000000; /* Negro Profundo */
}
.contacto-item p {
    margin: 0.25rem 0;
}
.btn-contacto-whatsapp {
    /*  display: block; Quitado para permitir centrado con inline-block  */
    /*  width: 100%; Quitado para permitir centrado con inline-block  */
    padding: 0.75rem;
    background-color: #006337; /* Verde */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    /*  text-align: center; Quitado porque el contenedor padre lo centra  */
    text-decoration: none; /* En caso de que se convierta en enlace */
}
.btn-contacto-whatsapp:hover {
    background-color: #000000; /* Negro Profundo */
}
/* --- Estilos para la sección de Preguntas Frecuentes (FAQ) (existente) --- */
.faq-section {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0; /* Línea divisoria */
}
.faq-section h2 {
    color: #000000; /* Negro Profundo */
    margin-bottom: 1rem;
}
.faq-item {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #f9f9f9;
    border-radius: 5px;
    border-left: 4px solid #3498db; /* Color distintivo para cada item */
}
.faq-item h3 {
    margin: 0 0 0.5rem 0;
    color: #2980b9;
    font-size: 1rem;
}
.faq-item p {
    margin: 0;
    color: #555;
    line-height: 1.5;
}
.texto-oferta {
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0.5rem 0;
    color: #000000; /* Negro Profundo */
    display: block;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* --- Responsive --- */
@media (max-width: 768px) {
    /* Ajustes específicos para móviles */
    #header-inicio {
        padding: 0.3rem 0.5rem; /* Aún más compacto en móviles */
        margin-bottom: 0.3rem; /* Aún menos espacio abajo */
    }
    #header-inicio .logo {
        max-width: 90%; /* Aumenta ligeramente el tamaño del logo en móviles */
        margin: 0 auto 0.1rem; /* Menos espacio debajo del logo */
    }
    #header-inicio h1 {
        font-size: 0.85rem; /* Texto aún más pequeño en móviles */
    }
    .navbar {
        padding: 0.2rem 0; /* Barra de navegación aún más compacta en móviles */
    }
    .nav-btn {
        font-size: 0.6rem; /* Más pequeño */
        padding: 0.4rem 0.1rem; /* Menos padding vertical */
    }
}
/* --- ORDEN DE ELEMENTOS EN EL CARRITO (Solución Final) --- */
/* Asegura que el contenedor padre de los elementos sea un contenedor flex con dirección de columna */
/* Esta regla debe aplicarse al contenedor principal del carrito */
#carrito {
    display: flex;
    flex-direction: column;
}
/* Forzar el orden visual de los elementos hijos */
#carrito .mensaje-envio-seleccionado {
    order: 1; /* El mensaje del tipo de envío va primero */
}
#carrito .costo-envio {
    order: 2; /* El costo de envío va segundo */
}
#carrito .total-con-envio {
    order: 3; /* El total a pagar va tercero */
}
/* Asegura que btnComprar (Finalizar Pedido) vaya al final */
#carrito button.btn-principal {
    order: 4; /* El botón va al final */
}
/* --- ESTILOS ESPECÍFICOS PARA TÍTULOS DE OPCIONES Y TOTAL EN EL CARRITO (Añadido por soporte) --- */
/* Estilo para el total del carrito */
.total-carrito {
    font-weight: bold;
    text-align: center; /* Centrado */
    font-size: 1.2rem; /* Ajusta el tamaño si es necesario */
    margin: 0.5rem 0;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #C00000; /* Rojo Pasión */
}
/* Estilo para los títulos de opciones (Empaque y Envío) */
.titulo-opciones-carrito {
    text-align: center; /* Centrado */
    font-weight: bold; /* Negrita */
    font-size: 1rem; /* Tamaño de fuente uniforme */
    margin: 0.5rem 0; /* Espacio arriba y abajo */
    padding: 0.25rem 0; /* Relleno arriba y abajo */
    color: #000000; /* Color del texto */
    /* Asegura que se comporten como bloques y se centren */
    display: block;
    width: 100%;
}
/* Opcional: Si quieres que los títulos tengan un fondo sutil como el total */
/*.titulo-opciones-carrito {
    ... las reglas anteriores ...
    background-color: #f1f2f6; Fondo más claro
    border-radius: 6px; Bordes ligeramente redondeados
    margin: 0.5rem 0; Espacio arriba y abajo
    padding: 0.5rem 0; Relleno interno
}*/
/* --- Estilos para el título dentro de la sección destacada de Mayoreo (CORREGIDO) --- */
.seccion-mayoreo-destacada h1 {
    /* Tus estilos existentes anteriores... */
    color: #C00000; /* Rojo Pasión */
    margin: 0 0 0.5rem 0;
    font-weight: bold;
    /* --- Nuevas reglas para centrar, mantener en una línea y ajustar tamaño más grande --- */
    text-align: center; /* Centra el texto */
    white-space: normal; /* Permite que el texto se envuelva en múltiples líneas si es necesario */
    overflow: hidden; /* Oculta el texto que no quepa */
    text-overflow: ellipsis; /* Añade puntos suspensivos (...) si se corta */
    width: 100%; /* Ocupa todo el ancho del contenedor padre */
    box-sizing: border-box; /* Incluye padding/border en el ancho */
    /* Tamaño de fuente adaptable y más grande que se ajusta al ancho de la pantalla */
    /* clamp(valor_minimo, tamaño_fluido, valor_maximo) */
    /* Aumentado: Mínimo 1.5rem, preferentemente 6vw, máximo 2.5rem para móviles */
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    /* Asegura que el color y el peso se mantengan */
    color: #C00000;
    font-weight: bold;
    /* Opcional: Ajusta el padding superior si el texto parece pegado al borde superior */
    /* padding-top: 0.2rem; */
}
.seccion-mayoreo-destacada .minimo-compra {
    font-size: 1.2rem;
    color: #000000; /* Negro Profundo */
    margin: 0.5rem 0;
}
.seccion-mayoreo-destacada .minimo-compra span {
    font-weight: bold;
    color: #C00000; /* Rojo Pasión */
    font-size: 1.3rem;
}
.seccion-mayoreo-destacada .linea-separadora {
    width: 50px;
    height: 4px;
    background: #C00000; /* Rojo Pasión */
    margin: 1rem auto;
    border-radius: 2px;
}
.seccion-mayoreo-destacada .mensaje-bienvenida {
    font-size: 0.9rem; /* Ligeramente más pequeño */
    color: #000000; /* Negro Profundo */
    margin: 0;
    font-style: italic;
    /* --- Añade estas líneas para emular el estilo del encabezado --- */
    font-family: 'Georgia', serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
/* --- Animación de entrada para la sección destacada --- */
.seccion-mayoreo-destacada {
    animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- ESTILOS PARA EL MODAL DE AROMAS --- */
/* Eliminar el scroll de las categorías de aromas */
.grupo-aromas {
    display: flex;
    flex-direction: column; /* Coloca los botones uno debajo del otro */
    align-items: center; /* Centra los botones horizontalmente */
    margin-bottom: 0.75rem; /* Espacio entre categorías */
    /* max-height: 150px; */ /* Comentado para eliminar el scroll */
    /* overflow-y: auto; */ /* Comentado para eliminar el scroll */
    /* Asegura que no haya scroll interno */
    max-height: none !important; /* !important para forzar la sobreescritura */
    overflow-y: visible !important; /* !important para forzar la sobreescritura */
}
/* Opcional: Estilo para el scroll en Webkit (Chrome, Safari, Edge) - Eliminado */
/*.grupo-aromas::-webkit-scrollbar {
    width: 6px;
}
.grupo-aromas::-webkit-scrollbar-track {
    background: #f1f2f6;
    border-radius: 3px;
}
.grupo-aromas::-webkit-scrollbar-thumb {
    background-color: #C00000;
    border-radius: 3px;
}*/
/* Estilos para los controles de aroma que aparecen debajo de cada botón */
.controles-aroma-modal {
    margin-top: 0.5rem; /* Espacio entre el botón y los controles */
    display: flex;
    justify-content: center; /* Centra los controles horizontalmente */
    align-items: center;
    gap: 0.25rem; /* Espacio entre los elementos dentro de los controles */
}
.controles-aroma-modal .btn-cantidad-modal {
    width: 2rem; /* Botones más pequeños */
    height: 2rem;
    font-size: 0.9rem;
}
.controles-aroma-modal .cantidad-input-aroma-modal {
    width: 40px;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.25rem;
}
.controles-aroma-modal .btn-eliminar-aroma-modal {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
    background-color: #000000; /* Negro Profundo para eliminar */
    color: white;
    border-radius: 50%; /* Forma circular */
    border: none; /* Eliminar borde si es necesario */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Efecto hover para el botón de eliminar */
.controles-aroma-modal .btn-eliminar-aroma-modal:hover {
    background-color: #333333; /* Gris oscuro */
    transform: scale(1.1);
}
/* Efecto active para el botón de eliminar */
.controles-aroma-modal .btn-eliminar-aroma-modal:active {
    background-color: #111111; /* Negro más oscuro */
    transform: scale(0.98);
}
/* Estilos para los botones de aroma */
.btn-aroma {
    /* Tamaño fijo */
    width: 200px; /* Ancho fijo */
    height: 40px; /* Altura fija */
    /* Espaciado */
    margin: 0.5rem 0; /* Espacio vertical entre botones, sin margen horizontal */
    /* Apariencia */
    padding: 0.5rem 1rem; /* Relleno interno */
    border: 1px solid #ccc; /* Borde */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    background-color: #f9f9f9; /* Color de fondo */
    cursor: pointer; /* Cursor de mano al pasar el mouse */
    text-align: center; /* Centrar el texto */
    font-size: 0.9rem; /* Tamaño de fuente */
    font-weight: 500; /* Peso de la fuente */
    transition: all 0.2s ease-in-out; /* Transición suave para hover y focus */
    box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho/alto */
    display: flex; /* Usar flexbox para centrar el texto */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    /* Opcional: Evitar selección de texto */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Estándar */
}
/* Efecto hover para los botones de aroma */
.btn-aroma:hover {
    background-color: #e0e0e0; /* Color de fondo al pasar el mouse */
    border-color: #bbb; /* Cambiar color del borde */
    transform: scale(1.02); /* Ligeramente más grande */
}
/* Efecto focus para accesibilidad */
.btn-aroma:focus {
    outline: 2px dashed #006337; /* Contorno de enfoque Verde */
    outline-offset: 2px; /* Espacio entre el botón y el contorno */
    border-color: #006337; /* Asegurar color del borde en foco */
}
/* Efecto al hacer clic en el botón de aroma */
.btn-aroma:active {
    background-color: #006337; /* Verde */
    color: white;
    border-color: #006337;
    transform: scale(0.98); /* Ligeramente más pequeño al presionar */
}
/* Estilos para los botones de aroma cuando están seleccionados */
.btn-aroma.seleccionado {
    background-color: #006337; /* Verde */
    color: white;
    border-color: #006337;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Opcional: Cambiar el borde a punteado cuando está seleccionado */
.btn-aroma.seleccionado {
    border-style: dashed;
    border-width: 2px;
}
/* Efecto hover para los botones seleccionados */
.btn-aroma.seleccionado:hover {
    background-color: #000000; /* Negro Profundo */
    border-color: #000000;
    transform: scale(1.02);
}
/* Efecto active para los botones seleccionados */
.btn-aroma.seleccionado:active {
    background-color: #333333; /* Gris oscuro */
    border-color: #333333;
    transform: scale(0.98);
}
.texto-centrado {
    text-align: center;
}
/* Asegurar que el modal tenga scroll si es necesario */
/* Ya está definido en .modal-contenido arriba */
/* --- ESTILOS ESPECÍFICOS PARA LA SECCIÓN DE VIDEOS --- */
/* Texto introductorio */
.videos-intro-text {
    text-align: center;
    color: #555;
    font-style: italic;
    margin-bottom: 1.5rem;
}
/* Contenedor de la cuadrícula de videos */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Ajusta el ancho mínimo según prefieras */
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px; /* Ancho máximo opcional */
    margin: 0 auto;
    padding: 0 1rem; /* Espacio lateral */
    box-sizing: border-box;
}
/* Tarjeta de video */
.video-card {
    background: #f0f0f0; /* Fondo claro */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden; /* Asegura que la miniatura no sobresalga */
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.video-card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Contenedor del enlace y la miniatura */
.video-card a {
    display: block; /* Hace que el enlace ocupe todo el espacio de la miniatura */
    position: relative; /* Para posicionar el botón de reproducción */
}
/* Miniatura del video */
.video-thumbnail {
    width: 100%;
    height: auto; /* Mantiene la proporción */
    display: block;
    object-fit: cover; /* Recorta la imagen si es necesario para cubrir el contenedor */
}
/* Botón de reproducción superpuesto */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #000000; /* Negro Profundo */
    cursor: pointer;
    transition: background-color 0.2s ease;
    opacity: 0; /* Oculto por defecto */
    pointer-events: none; /* No interfiere con el clic en la imagen */
}
.video-card:hover .play-button-overlay {
    opacity: 1; /* Visible al hacer hover en la tarjeta */
}
.play-button-overlay:hover {
    background-color: rgba(255, 255, 255, 1);
}
/* Información del video (título, descripción, botón) */
.video-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Hace que esta parte ocupe el espacio restante */
}
/* Título del video */
.video-title {
    font-size: 1rem;
    font-weight: bold;
    color: #000000; /* Negro Profundo */
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}
/* Descripción del video */
.video-description {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
    flex-grow: 1; /* Empuja el botón hacia abajo */
}
/* Botón "Mirar en YouTube" */
.watch-on-youtube-btn {
    display: inline-block;
    background-color: #FF0000; /* Rojo de YouTube */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s ease;
    align-self: flex-start; /* Alinea el botón a la izquierda */
}
.watch-on-youtube-btn:hover {
    background-color: #CC0000; /* Rojo más oscuro al hacer hover */
}
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .videos-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
        gap: 1rem;
        padding: 0 0.5rem;
    }
    .video-title {
        font-size: 0.9rem;
    }
    .video-description {
        font-size: 0.8rem;
    }
    .watch-on-youtube-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
}
/* Centrar automáticamente una única tarjeta en .productos-grid (solo para sección "gratis") */
.categorias-grid + .pagina .productos-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}
.categorias-grid + .pagina .producto-card {
    width: 320px;
    margin: 0 auto; /* Fuerza el centro incluso si hay solo una */
}
/* Centrar la única tarjeta en la sección "gratis" */
.categorias-grid + .pagina .productos-grid {
    justify-content: center;
}
.productos-grid--single {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}
.productos-grid--single > .producto-card {
    width: 320px;
}
/* === BORDE LÁSER FINO PARA LA TARJETA "GRATIS" (versión móvil, permanente) === */
.categoria-card[data-key="gratis"] {
    position: relative;
    overflow: hidden;
}
/* Borde principal (verde) */
.categoria-card[data-key="gratis"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid #006337; /* Verde */
    border-radius: 16px;
    z-index: 1;
}
/* Capa de luz láser (blanca, con animación de chispas) */
.categoria-card[data-key="gratis"]::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(
        90deg,
        transparent 48%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 52%
    );
    background-size: 200% 100%;
    border-radius: 16px;
    z-index: 2;
    animation: laserPulse 1.8s ease-in-out infinite;
}
@keyframes laserPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}