/* Definición de variables de color */
:root {
    --color-azulino: #004A99; /* Azul marino/Azulino principal */
    --color-naranja: #FF7F00; /* Naranja de acento */
    --color-blanco: #FFFFFF;
    --color-gris-claro: #F8F9FA; /* Gris claro para fondos secundarios */
}

/* Estilos Generales */
body {
    /* Mantenemos el padding superior por el header fijo, ajustado al nuevo tamaño */
    padding-top: 85px !important; 
    background-color: var(--color-blanco);
    color: #333;
}

/* Encabezado Fijo */
.fixed-top {
    /* Altura media del encabezado (no tan bajo ni tan alto) */
    min-height: 80px; 
    background-color: var(--color-blanco) !important;
    border-bottom: 2px solid var(--color-gris-claro);
}

/* Estilos del Logo */
.navbar-brand img {
    height: 110px !important; /* Tamaño grande solicitado */
    width: auto;
    /* Truco para que no estire el header: márgenes negativos */
    margin-top: -15px; 
    margin-bottom: -15px;
    position: relative;
    z-index: 100; /* Para que quede por encima si se sale un poco */
    transition: transform 0.3s;
}

.navbar-dark-mode .navbar-brand img {
    height: 90px !important; /* 20px menos que el normal para igualar visualmente */
    margin-top: 0; /* Reseteamos márgenes si es necesario */
    margin-bottom: 0;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}

/* 3. CONTENEDOR DEL BUSCADOR (Para posicionar el desplegable) */
.search-container {
    position: relative; /* Vital para que el dropdown se ancle aquí */
}

/* 4. LISTA DESPLEGABLE DE RESULTADOS (Live Search) */
.search-results-dropdown {
    position: absolute;
    top: 100%; /* Justo debajo del input */
    left: 0;
    width: 300px; /* Ancho del desplegable */
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none; /* Oculto por defecto */
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
}

/* Items del resultado */
.search-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s;
    color: #333;
    border-bottom: 1px solid #f8f9fa;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover {
    background-color: #f0f4f8;
    color: var(--color-azulino);
}
.search-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
    border: 1px solid #eee;
}
.search-item-info div {
    line-height: 1.2;
}
.search-item-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.search-item-price {
    color: var(--color-naranja);
    font-weight: 700;
    font-size: 0.85rem;
}



/* Menú de Navegación */
.navbar-nav .nav-link {
    color: var(--color-azulino) !important;
    font-weight: 600;
    margin: 0 10px;
    transition: color 0.3s, border-bottom 0.3s;
}

.navbar-nav .nav-link:hover {
    color: var(--color-naranja) !important;
    /* Línea de acento al pasar el ratón */
    border-bottom: 3px solid var(--color-naranja);
}

/* Buscador */
.search-form {
    /* Clase que usaremos para envolver el buscador en el header.php */
    display: flex;
    align-items: center;
}

.search-form .form-control-sm {
    border-color: var(--color-gris-claro);
    transition: border-color 0.3s;
}

.search-form .form-control-sm:focus {
    border-color: var(--color-azulino);
    box-shadow: 0 0 0 0.1rem rgba(0, 74, 153, 0.25);
}

.search-form .btn-outline-secondary {
    color: var(--color-azulino);
    border-color: var(--color-azulino);
}

.search-form .btn-outline-secondary:hover {
    background-color: var(--color-azulino);
    color: var(--color-blanco);
}

/* Carrito de Compras */
.btn-primary {
    /* Botón con color de marca */
    background-color: var(--color-azulino) !important;
    border-color: var(--color-azulino) !important;
    font-size: 1.1rem;
    padding: 0.375rem 0.75rem; 
}

.btn-primary:hover {
    background-color: var(--color-naranja) !important;
    border-color: var(--color-naranja) !important;
}

/* Badge (contador) del carrito */
.badge.bg-danger {
    background-color: #F90101 !important;
    font-size: 0.65rem;
    padding: 4px 6px;
}

/* Estilo para secciones de fondo gris */
.section-gris {
    padding: 40px 0;
    background-color: var(--color-gris-claro);
    margin-bottom: 20px;
}

/* --- Hero Banner (Paso 8) --- */
.hero-banner {
    width: 100%;
    /* Altura media del banner. Si quieres que sea un poco más alto o bajo, cámbialo aquí. */
    height: 500px; /* Un poco menos alto ya que no hay texto */
    background-size: cover;
    background-position: center center;
    display: flex; /* Mantenemos flex para centrar, aunque no haya contenido */
    align-items: center;
    justify-content: center;
    /* Quitamos text-align y color ya que no hay texto */
    position: relative;
    margin-bottom: 30px; 
}

/* Botón Naranja de Acento */
.btn-naranja {
    background-color: var(--color-naranja);
    border-color: var(--color-naranja);
    color: var(--color-blanco);
    font-weight: 600;
    padding: 12px 25px;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.btn-naranja:hover {
    background-color: #E67300; /* Naranja más oscuro */
    border-color: #E67300;
    color: var(--color-blanco);
    transform: translateY(-2px); /* Pequeño efecto al pasar el mouse */
}

/* --- Sección Métricas (Paso 9) --- */
.metrics-section {
    background-color: var(--color-gris-claro);
    padding: 30px 0; /* Menos padding para que sea más compacto */
    text-align: center;
    /* Eliminamos el margin-bottom si queremos que esté pegado */
    /* margin-top: -30px; */ /* Opcional: para superponerse ligeramente al banner si se desea */
}

.metrics-section .container {
    display: flex; /* Usamos flexbox para centrar y distribuir */
    justify-content: space-around; /* Espacio entre los items */
    align-items: center;
    flex-wrap: wrap; /* Permite que los items se envuelvan en pantallas pequeñas */
}

.metric-item {
    padding: 15px 20px;
    flex: 1; /* Permite que cada item ocupe espacio equitativamente */
    min-width: 280px; /* Ancho mínimo para cada métrica antes de envolver */
    position: relative;
    display: flex;
    flex-direction: column; /* Apila número y texto */
    align-items: center;
    justify-content: center;
}

.metric-item .metric-number {
    font-size: 2.5rem; /* Tamaño más moderado */
    font-weight: 700;
    color: var(--color-naranja);
    display: flex; /* Usamos flex para el número y el icono */
    align-items: center;
    justify-content: center; /* Centrar el número e icono */
    line-height: 1; /* Altura de línea ajustada */
    margin-bottom: 5px; /* Pequeño espacio entre número y texto */
}

.metric-item .metric-number i {
    font-size: 2.2rem; /* Tamaño del icono */
    color: var(--color-azulino); /* Color del icono */
    margin-left: 15px; /* Espacio entre el número y el icono */
}

.metric-item .metric-text {
    font-size: 1rem; /* Texto un poco más pequeño */
    color: var(--color-azulino);
    font-weight: 500;
}

/* Divisores entre las métricas (solo para pantallas grandes) */
.metric-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%; /* Centrar verticalmente */
    height: 50%; /* Altura del divisor */
    width: 2px;
    background-color: var(--color-azulino); /* Color del divisor */
    /* Ocultar en móviles */
    display: none; 
}

@media (min-width: 768px) { /* Mostrar divisor solo en tablets y desktops */
    .metric-item:not(:last-child)::after {
        display: block;
    }
}

/* Para eliminar el espacio entre el banner y las métricas */
.hero-banner {
    margin-bottom: 0px; /* Elimina el margen inferior del banner */
}

/* --- Sección Productos Destacados (Paso 10) --- */
.section-header {
    display: flex;
    justify-content: space-between; /* Título a la izq, botón a la der */
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-gris-claro);
}

.section-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-azulino);
    margin: 0;
}

.section-header .btn-ver-todos {
    background-color: transparent;
    border: 2px solid var(--color-naranja);
    color: var(--color-naranja);
    font-weight: 600;
    transition: all 0.3s;
}

.section-header .btn-ver-todos:hover {
    background-color: var(--color-naranja);
    color: var(--color-blanco);
}

/* Estilo de las tarjetas de producto en el carrusel */
.splide__slide .card {
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
    margin-bottom: 10px;
}

/* Ajuste de flechas de Splide a los colores de la marca */
.splide__arrow {
    background: var(--color-azulino); /* Fondo azulino */
    opacity: 0.8;
    transition: opacity 0.3s;
}

.splide__arrow:hover {
    opacity: 1;
}

.splide__arrow svg {
    fill: var(--color-blanco); /* Flecha blanca */
}

/* --- Sección Categorías (Paso 11 - Mockup) --- */

.category-intro {
    /* Centra el texto verticalmente con las tarjetas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-right: 15px; /* Espacio entre texto y tarjetas */
}

.category-intro h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-azulino);
    margin-bottom: 15px;
}

.category-intro p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 25px;
}

/* Tarjeta de Categoría (mitad imagen, mitad contenido) */
.category-card {
    position: relative;
    height: 380px; /* Altura fija para la tarjeta */
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Oculta lo que se salga del radio */
    margin-bottom: 20px; /* Espacio en móviles */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* La superposición oscura de abajo (como en tu imagen) */
.category-card .card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Usamos un gris oscuro sólido, como en tu imagen */
    background-color: #3a3a3a; 
    padding: 25px;
    color: var(--color-blanco);
}

.category-card h4 {
    font-weight: 600;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.category-card .card-link {
    color: var(--color-blanco);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.category-card .card-link:hover {
    color: var(--color-naranja); /* Acento al pasar el ratón */
}

.category-card .card-link i {
    margin-left: 5px; /* Espacio para la flecha */
}

/* Ajusta las flechas del carrusel de categorías */
#category-slider .splide__arrow {
    background: var(--color-azulino);
}
#category-slider .splide__arrow svg {
    fill: var(--color-blanco);
}

/* Ajusta los puntos (dots) de paginación */
#category-slider .splide__pagination__page {
    background: #ccc; /* Color de punto inactivo (gris) */
    opacity: 1;
    width: 12px;
    height: 12px;
    margin: 0 5px;
}

#category-slider .splide__pagination__page.is-active {
    background: var(--color-naranja); /* Color de punto activo (naranja) */
    transform: scale(1.1); /* Lo hace un poco más grande */
}

/* --- Sección CTA 'Arma tu Consultorio' (Paso 12) --- */
.cta-section {
    background-color: var(--color-azulino);
    padding: 40px 0; /* Espaciado vertical */
    color: var(--color-blanco);
}

.cta-section-text h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase; /* "ARMA TU CONSULTORIO AQUI" */
}

.cta-section-logo img {
    height: 60px; /* Tamaño del logo en esta sección */
    
    /* IMPORTANTE: Si tu logo es oscuro (ej. negro),
    descomenta la siguiente línea para hacerlo blanco
    */
    /* filter: brightness(0) invert(1); */
}

.cta-section-button .btn-naranja {
    /* El .btn-naranja ya está definido y es perfecto aquí */
    font-size: 1.2rem;
    padding: 12px 30px;
}

/* Ajustes para móviles (para que no esté todo pegado) */
@media (max-width: 991px) {
    .cta-section-logo,
    .cta-section-button {
        margin-top: 25px;
    }
}

/* --- Sección Marcas (Paso 13) --- */
.logo-carousel-section {
    /* Usamos el fondo gris para separar la sección */
    background-color: var(--color-gris-claro);
    padding: 40px 0;
    overflow: hidden; /* Evita desbordamiento horizontal */
}

.logo-carousel-section h2 {
    text-align: center;
    font-weight: 700;
    color: var(--color-azulino);
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* Estilo para cada logo en el slide */
.brand-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px; /* Altura fija para el contenedor */
}

.brand-logo img {
    max-height: 60px; /* Altura máxima del logo */
    width: auto;
    max-width: 150px;
    /* Efecto profesional: grises por defecto */
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Efecto al pasar el ratón */
.brand-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* Ocultar flechas y paginación en este carrusel */
#brand-logo-slider .splide__arrows,
#brand-logo-slider .splide__pagination {
    display: none;
}

/* --- Sección Nuestra Historia (Paso 14) --- */
.about-section {
    padding: 40px 0; /* Espaciado interno */
}

/* Estilo para la imagen de la izquierda */
.about-image img {
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Sombra suave */
}

/* Estilo para el contenido de la derecha */
.about-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-azulino);
    margin-bottom: 20px;
}

.about-content p {
    font-size: 1.1rem;
    color: #555; /* Un gris oscuro para el texto */
    line-height: 1.7; /* Interlineado para fácil lectura */
    margin-bottom: 25px;
}

/* --- Sección Pasión, Misión y Visión (Paso 15) --- */
.passion-text-section h2 {
    font-size: 3rem; /* Tamaño grande e impactante */
    font-weight: 700;
    color: var(--color-azulino);
    line-height: 1.3;
}

/* Estilo para las tarjetas de Misión/Visión */
.info-card {
    background-color: var(--color-blanco);
    border: 1px solid var(--color-gris-claro); /* Borde sutil */
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px; /* Espacio entre las dos tarjetas */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Sombra ligera */
}

.info-card:hover {
    transform: translateY(-5px); /* Efecto de elevación */
    border-left: 5px solid var(--color-naranja); /* Acento naranja al pasar el mouse */
}

.info-card .info-card-icon {
    font-size: 2.5rem;
    color: var(--color-naranja); /* Icono naranja */
    margin-bottom: 15px;
}

.info-card h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-azulino);
    margin-bottom: 10px;
}

.info-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

/* --- Sección Contacto Homepage (Paso 16) --- */
.contact-section-home {
    /* Usamos el fondo gris que ya tenemos */
    padding: 50px 0;
}

.contact-image img {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 100%; /* Intenta ocupar la altura */
    object-fit: cover; /* Asegura que la imagen cubra el espacio */
}

.contact-form-wrapper h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-azulino);
    margin-bottom: 15px;
}

.contact-form-wrapper p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 25px;
}

/* Estilo para los inputs del formulario */
.form-label {
    font-weight: 600;
    color: var(--color-azulino);
}

.form-control {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 12px 15px;
    transition: all 0.3s;
}

.form-control:focus {
    border-color: var(--color-azulino); /* Borde azul al hacer focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 153, 0.25);
}

/* Ajuste para que el botón use 100% del ancho */
.btn-naranja-full {
    background-color: var(--color-naranja);
    border-color: var(--color-naranja);
    color: var(--color-blanco);
    font-weight: 600;
    padding: 12px 25px;
    font-size: 1.1rem;
    transition: all 0.3s;
    width: 100%; /* Botón al 100% */
}

.btn-naranja-full:hover {
    background-color: #E67300;
    border-color: #E67300;
    color: var(--color-blanco);
}

/* --- Footer (Paso 17 - Estilo GM Dent) --- */
.site-footer {
    background-color: var(--color-azulino);
    color: #E0E0E0; /* Un gris claro, no blanco puro */
    padding: 50px 0 30px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.site-footer .footer-logo img {
    height: 50px;
    margin-bottom: 15px;
    /* Asumimos que usarás un logo en versión blanca */
}

.site-footer p {
    color: #E0E0E0;
}

.site-footer h5 {
    color: var(--color-blanco);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-transform: uppercase; /* Títulos en mayúscula */
}

.footer-links {
    list-style: none;
    padding-left: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #E0E0E0;
    text-decoration: none;
    transition: all 0.3s;
}

.footer-links a:hover {
    color: var(--color-naranja); /* Acento naranja al pasar el mouse */
    padding-left: 5px; /* Pequeño efecto de indentación */
}

/* Iconos sociales */
.social-icons a {
    font-size: 1.5rem;
    color: var(--color-blanco);
    margin-right: 15px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--color-naranja);
}

/* Iconos de pago */
.payment-icons {
    font-size: 2.2rem;
    color: var(--color-blanco);
    margin: 5px;
}

/* Barra de Copyright (inferior) */
.footer-copyright {
    background-color: #003A79; /* Un azulino más oscuro */
    color: #B0B0B0;
    padding: 15px 0;
    text-align: center;
    font-size: 0.9rem;
}

/* --- Ajustes Carrusel Productos (Paso 18) --- */

/* 1. Posicionamiento de Flechas FUERA del carril */
#productos-destacados-slider .splide__arrow {
    /* Moverlas verticalmente al centro */
    top: 40%;
    
    /* Aumentar tamaño y cambiar fondo (aunque ya lo hicimos) */
    background: var(--color-azulino);
    width: 40px;
    height: 40px;
    opacity: 0.9;
}

#productos-destacados-slider .splide__arrow:hover {
    opacity: 1;
}

/* Flecha Izquierda: Moverla fuera del borde izquierdo */
#productos-destacados-slider .splide__arrow--prev {
    left: -20px; /* Ajusta este valor si es necesario */
}

/* Flecha Derecha: Moverla fuera del borde derecho */
#productos-destacados-slider .splide__arrow--next {
    right: -20px; /* Ajusta este valor si es necesario */
}

/* 2. Ajuste del color del precio */
#productos-destacados-slider .card .text-primary {
    /* Forzamos que 'text-primary' use nuestro color de marca */
    color: var(--color-azulino) !important;
    font-weight: 700;
}

/* 3. Opcional: Ocultar flechas en móviles (donde no hay espacio) */
@media (max-width: 576px) {
    #productos-destacados-slider .splide__arrows {
        display: none;
    }
}

/* --- Estilos Modernos para Tarjeta de Producto (Paso 19) --- */

/* 1. La Tarjeta (El "Recuadro") */
/* Seleccionamos las tarjetas en las dos secciones de productos.
   La clase .shadow-sm ya la estamos usando en el HTML, así que vamos a sobreescribirla.
*/
#productos-destacados-slider .card.shadow-sm,
#catalogo .card.shadow-sm {
    border: none; /* ¡Quitamos el borde por defecto! */
    border-radius: 12px; /* Bordes más redondeados y suaves */
    background: #FFFFFF;
    /* Sombra moderna y sutil (en lugar de la sombra 'fea') */
    box-shadow: 0 5px 20px rgba(0, 74, 153, 0.07); /* Sombra ligera con color azulino */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Para que la imagen respete los bordes redondeados */
}

/* 2. Efecto al pasar el mouse (Hover) */
#productos-destacados-slider .card.shadow-sm:hover,
#catalogo .card.shadow-sm:hover {
    transform: translateY(-5px); /* Elevar la tarjeta */
    box-shadow: 0 8px 30px rgba(0, 74, 153, 0.12); /* Sombra más pronunciada */
}

/* 3. Imagen */
.card.shadow-sm .card-img-top {
    /* Línea sutil separando la imagen del contenido */
    border-bottom: 1px solid #f0f0f0; 
}

/* 4. Cuerpo de la tarjeta (espaciado) */
.card.shadow-sm .card-body {
    padding: 1.25rem; /* Espaciado interno generoso */
}

/* 5. Título del producto */
.card.shadow-sm .card-title {
    font-size: 1.15rem; /* Un poco más grande */
    font-weight: 600;
    color: var(--color-azulino); /* Color de marca */
    margin-bottom: 0.5rem;
}

/* 6. Descripción (texto silenciado) */
.card.shadow-sm .card-text.text-muted {
    font-size: 0.85rem; /* Más pequeño para no competir */
    line-height: 1.5;
    margin-bottom: 0.75rem; /* Espacio antes del precio */
}

/* 7. Precio del producto */
.card.shadow-sm .card-text.fs-4.fw-bold.text-primary {
    font-size: 1.4rem !important; /* Más grande y destacado */
    color: var(--color-azulino) !important;
    margin-top: auto; /* Empuja el precio al fondo (ya lo hacía el flex) */
    margin-bottom: 1rem; /* Espacio antes del botón */
}

/* 8. Botón de Añadir */
.card.shadow-sm .btn-primary {
    /* El color azulino ya está definido */
    border-radius: 7px;
    font-weight: 600;
    padding: 0.6rem;
    transition: all 0.3s ease;
}

/* 9. Botón Hover: ¡Lo cambiamos a Naranja! */
.card.shadow-sm .btn-primary:hover {
    background-color: var(--color-naranja) !important;
    border-color: var(--color-naranja) !important;
    transform: scale(1.02); /* Pequeño zoom al botón */
    box-shadow: 0 4px 10px rgba(255, 127, 0, 0.3); /* Sombra naranja */
}

/* --- (Revisión) Estilos Página de Tienda (Paso 21) --- */

/* 1. Banner (Arreglo de altura y centrado) */
.page-banner {
    width: 100%;
    height: 450px; /* Altura más generosa (Estándar moderno) */
    background-size: cover;
    background-position: center center; /* Centra la imagen perfectamente */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-blanco);
    position: relative;
    margin-bottom: 40px; 
}

@media (max-width: 768px) {
    .page-banner {
        height: 250px;
        background-position: center top; /* En móvil, prioriza la parte de arriba */
    }
}

.page-banner::before { /* Capa oscura */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 74, 153, 0.4); 
}
.page-banner h1 {
    position: relative; /* Asegura que esté sobre la capa oscura */
    font-size: 3.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
}

/* 2. Sidebar de Filtros (Estilo Moderno) */
.shop-sidebar {
    background-color: transparent; /* Quitamos el fondo gris general */
    padding: 0; /* Sin padding en la columna */
}

/* 3. "Contenedor" para CADA filtro (Esto es lo que pediste) */
.filter-widget {
    background: #FFFFFF; /* Fondo blanco para cada widget */
    border: 1px solid #E0E0E0; /* Borde sutil */
    border-radius: 8px;
    padding: 20px 25px; /* Espaciado interno */
    margin-bottom: 25px; /* Separación entre widgets */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra moderna */
}

.filter-widget h5 {
    font-weight: 600;
    color: var(--color-azulino);
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0; /* Borde más sutil */
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.filter-widget .form-check {
    margin-bottom: 10px;
}
.filter-widget .form-check-label {
    font-size: 0.95rem;
    cursor: pointer;
}

/* 4. Estilo de los Botones de Filtro */
.filter-widget .btn-primary {
    background-color: var(--color-azulino) !important;
    border-color: var(--color-azulino) !important;
    font-weight: 600;
}
.filter-widget .btn-outline-secondary {
    color: var(--color-azulino);
    border-color: #ddd;
    font-weight: 600;
}
.filter-widget .btn-outline-secondary:hover {
    background-color: var(--color-azulino);
    color: var(--color-blanco);
}


/* 5. Barra de Ordenamiento (Sort Dropdown) */
.sort-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
}
.sort-bar .form-select {
    width: auto;
    font-size: 0.9rem;
    font-weight: 500;
}

/* 6. Paginación  */
.pagination .page-link {
    color: var(--color-azulino); /* Color de texto para enlaces NO activos */
    font-weight: 600;
}
.pagination .page-link:hover {
    color: var(--color-naranja); /* Color de texto al pasar el mouse (NO activos) */
}

/* ESTA ES LA REGLA CORREGIDA */
.pagination .page-item.active .page-link {
    background-color: var(--color-azulino);
    border-color: var(--color-azulino);
    color: #FFFFFF; /* ¡LA SOLUCIÓN! Color de texto blanco para el link ACTIVO */
}

/* Y añadimos esta regla para que se mantenga blanco al pasar el mouse */
.pagination .page-item.active .page-link:hover {
    color: #FFFFFF; 
}

/* --- Estilos Página Detalle de Producto (Paso 23) --- */
.product-detail-image img {
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
}

.product-detail-info h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-azulino);
}

.product-detail-info .price {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-naranja);
    margin-bottom: 20px;
}

.product-detail-info .description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

/* Selector de Cantidad */
.quantity-selector {
    display: flex;
    align-items: center;
}
.quantity-selector .form-control {
    width: 80px;
    text-align: center;
    font-weight: 600;
    margin: 0 10px;
}

/* Opciones de Color (Swatches) */
.product-options-label {
    font-weight: 600;
    color: var(--color-azulino);
    margin-bottom: 10px;
}
.color-swatches .form-check {
    display: inline-block;
    margin-right: 10px;
}
.color-swatches .form-check-input {
    display: none; /* Ocultamos el radio button */
}
.color-swatches .form-check-label {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}
/* Estilo cuando el color está seleccionado */
.color-swatches .form-check-input:checked + .form-check-label {
    border-color: var(--color-naranja);
    background-color: var(--color-naranja);
    color: var(--color-blanco);
    box-shadow: 0 2px 8px rgba(255, 127, 0, 0.3);
}

/* Sección Productos Relacionados */
.related-products h3 {
    text-align: center;
    font-weight: 700;
    color: var(--color-azulino);
    margin-bottom: 30px;
    border-bottom: 2px solid var(--color-gris-claro);
    padding-bottom: 15px;
}

/* --- Estilos "Arma tu Consultorio" (Paso 24) --- */

/* Contenedor principal con imagen de fondo */
.builder-wrapper {
    background-image: url('../images/consultorio_fondo.jpg'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax */
    padding: 30px;
    border-radius: 12px;
    position: relative;
}
/* Capa oscura para legibilidad */
.builder-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Fondo oscuro semitransparente */
    border-radius: 12px;
}

/* 1. Columna Izquierda (El Acordeón) */
.wizard-column {
    position: relative;
    z-index: 2;
}
.wizard-column .accordion-item {
    background-color: rgba(255, 255, 255, 0.9); /* Fondo de paso semi-transparente */
    margin-bottom: 15px;
    border: none;
    border-radius: 8px !important;
    overflow: hidden; /* Para los bordes redondeados */
}
.wizard-column .accordion-header .accordion-button {
    background-color: var(--color-azulino);
    color: var(--color-blanco);
    font-weight: 600;
    font-size: 1.2rem;
    box-shadow: none;
}
.wizard-column .accordion-header .accordion-button.collapsed {
    background-color: #f8f9fa;
    color: var(--color-azulino);
}
.wizard-column .accordion-body {
    background-color: #FFFFFF;
}

/* Lista de productos dentro del acordeón */
.builder-product-list {
    max-height: 400px;
    overflow-y: auto;
}
.builder-product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.builder-product-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
}
.builder-product-item-info {
    flex-grow: 1;
}
.builder-product-item-info span {
    font-weight: 600;
    color: #333;
}
.builder-product-item-info small {
    display: block;
    color: var(--color-naranja);
    font-weight: 600;
}


/* 2. Columna Derecha (Resumen/Mini-Carrito) */
.summary-column {
    position: relative;
    z-index: 2;
}
.summary-box {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    /* 'sticky-top' hace que te siga al hacer scroll */
    position: sticky;
    top: 100px; /* Distancia desde el header fijo */
}
.summary-box h4 {
    color: var(--color-azulino);
    font-weight: 700;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 15px;
}
.summary-item-name {
    flex-grow: 1;
    font-weight: 500;
}
.summary-item-price {
    font-weight: 600;
    color: #333;
    margin-right: 10px;
}
.summary-item-remove .btn-danger {
    background: #FF4136;
    border: none;
    font-size: 0.7rem;
    padding: 3px 8px;
    line-height: 1;
}
.summary-total {
    border-top: 2px solid #f0f0f0;
    padding-top: 15px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-naranja);
}

/* --- Estilos "Arma tu Consultorio" (Revisión Paso 25) --- */

/* Imagen en el Resumen */
.summary-box .summary-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #eee;
}

/* Pestañas para el Paso 3 */
.wizard-column .nav-tabs {
    border-bottom: 2px solid var(--color-azulino);
    margin-bottom: 15px;
}
.wizard-column .nav-tabs .nav-link {
    color: var(--color-azulino);
    font-weight: 600;
}
.wizard-column .nav-tabs .nav-link.active {
    background-color: var(--color-azulino);
    color: var(--color-blanco);
    border-color: var(--color-azulino);
}

/* --- Estilos Visualizador 2D (Paso 25) --- */
.visualizer-box {
    position: relative; /* Contenedor principal */
    width: 100%;
    /* La altura se define por la imagen de fondo */
    line-height: 0; /* Evita espacios extra bajo la imagen */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.visualizer-background {
    width: 100%;
    height: auto;
}

.visualizer-layers {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/* --- ESTOS SON LOS SLOTS (LOS MÁS IMPORTANTES) --- */
/* Cada ID necesita posición (top, left) y tamaño (width) */

.visualizer-layers img {
    position: absolute;
    /* Transición suave al aparecer */
    transition: opacity 0.3s ease; 
    opacity: 0; /* Oculto por defecto */
}

/* Slot para la Unidad Dental */
#visual-slot-unit {
    width: 35%; /* 35% del ancho del visualizador */
    top: 40%;   /* 40% desde arriba */
    left: 25%;  /* 25% desde la izquierda */
    opacity: 1; /* Hacemos el slot de la unidad visible por defecto */
}

/* Slot para el Compresor */
#visual-slot-compressor {
    width: 15%;
    top: 60%;
    left: 5%;
}

/* Slot para el Autoclave */
#visual-slot-autoclave {
    width: 18%;
    top: 55%;
    left: 70%;
}

/* --- Estilos Asesoría Técnica y Timeline (Paso 26) --- */
.search-ticket-box {
    background: var(--color-gris-claro);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
}

/* --- CORRECCIÓN TIMELINE VISUAL (Paso 27) --- */

/* El contenedor de la línea vertical */
.timeline-steps {
    position: relative;
    margin-left: 20px;          /* Espacio desde la izquierda */
    padding-left: 40px;         /* Espacio entre la línea y el texto */
    border-left: 4px solid #e9ecef; /* ESTA ES LA LÍNEA GRIS VERTICAL */
    margin-top: 20px;
}

/* Cada paso individual */
.timeline-step {
    position: relative;
    margin-bottom: 30px;        /* Espacio entre pasos */
}

/* EL CÍRCULO (La bolita en la línea) */
.timeline-step::before {
    content: '';
    position: absolute;
    left: -51px;                /* Mueve la bolita hacia la izquierda para que caiga sobre la línea */
    top: 0;
    width: 22px;                /* Ancho de la bolita */
    height: 22px;               /* Alto de la bolita */
    border-radius: 50%;         /* La hace redonda */
    background-color: #fff;     /* Fondo blanco */
    border: 4px solid #e9ecef;  /* Borde gris por defecto */
    z-index: 1;
}

/* ESTILO: Pasos COMPLETADOS (Verde) */
.timeline-step.completed::before {
    background-color: #28a745;  /* Relleno verde */
    border-color: #28a745;      /* Borde verde */
}
.timeline-step.completed h5 {
    color: #28a745;             /* Texto verde */
    font-size: 0.95rem;
}

/* ESTILO: Paso ACTUAL (Naranja y grande) */
.timeline-step.active::before {
    background-color: var(--color-naranja);
    border-color: var(--color-naranja);
    transform: scale(1.3);      /* Hace la bolita más grande */
    box-shadow: 0 0 0 4px rgba(255, 127, 0, 0.2); /* Brillo alrededor */
}
.timeline-step.active h5 {
    color: var(--color-azulino);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Ajuste del texto "Estado Actual" */
.timeline-date {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    display: inline-block;
    background: #e3fcef; /* Fondo verde claro */
    padding: 2px 8px;
    border-radius: 4px;
}

/* --- ESTILOS MODERNOS ASESORÍA TÉCNICA (Paso 28) --- */

/* 1. Contenedor de Búsqueda Moderno */
.tracking-hero {
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 15px 35px rgba(0, 74, 153, 0.08); /* Sombra azulina suave */
    border: 1px solid rgba(0,0,0,0.03);
    text-align: center;
}

.tracking-hero h2 {
    font-weight: 800;
    color: var(--color-azulino);
    letter-spacing: -0.5px;
}

.search-input-modern {
    border: 2px solid #eee;
    border-radius: 50px !important; /* Input redondo */
    padding-left: 25px;
    height: 60px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
}

.search-input-modern:focus {
    border-color: var(--color-naranja);
    box-shadow: 0 0 0 5px rgba(255, 127, 0, 0.1); /* Brillo naranja al escribir */
}

.btn-search-modern {
    border-radius: 50px !important;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. Tarjeta de Resultados (El Ticket) */
.ticket-card-modern {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    background: #fff;
}

.ticket-header-modern {
    background: var(--color-azulino);
    color: #fff;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 3. Timeline Animado */
.timeline-modern {
    position: relative;
    padding: 30px 0 30px 40px;
    border-left: 3px solid #e9ecef;
    margin-left: 20px;
}

.timeline-item-modern {
    position: relative;
    margin-bottom: 35px;
}

/* El punto (Dot) */
.timeline-item-modern::before {
    content: '';
    position: absolute;
    left: -50px; /* Ajustar para centrar en la línea */
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #cbd5e0;
    transition: all 0.4s ease;
    z-index: 2;
}

/* Estado Pasado (Verde) */
.timeline-item-modern.completed::before {
    background: #10b981; /* Verde Esmeralda */
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}
.timeline-item-modern.completed h5 {
    color: #059669;
    text-decoration: line-through; /* Opcional: tachar pasos pasados */
    opacity: 0.7;
}

/* Estado Actual (Naranja + Animación) */
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 127, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 127, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 127, 0, 0); }
}

.timeline-item-modern.active::before {
    background: var(--color-naranja);
    border-color: var(--color-naranja);
    transform: scale(1.3);
    animation: pulse-ring 2s infinite; /* Animación de latido */
}
.timeline-item-modern.active h5 {
    color: var(--color-azulino);
    font-size: 1.2rem;
    font-weight: 800;
}

/* 4. Tarjetas Laterales (Login / Contacto) */
.side-card-modern {
    border: none;
    border-radius: 16px;
    background: #fff;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 5px solid transparent;
}

/* Efecto Hover */
.side-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Variantes de color para el borde superior */
.side-card-blue { border-top-color: var(--color-azulino); }
.side-card-orange { border-top-color: var(--color-naranja); }

.icon-circle {
    width: 60px;
    height: 60px;
    background: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 1.5rem;
}

/* --- ESTILOS MODERNOS DASHBOARD ADMIN (Paso 29) --- */

/* 1. Tarjetas de Estadísticas (KPIs) */
.stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 74, 153, 0.1);
}
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
/* Colores de fondo para iconos */
.bg-icon-blue { background: rgba(0, 74, 153, 0.1); color: var(--color-azulino); }
.bg-icon-orange { background: rgba(255, 127, 0, 0.1); color: var(--color-naranja); }
.bg-icon-green { background: rgba(40, 167, 69, 0.1); color: #28a745; }

/* 2. Tabla Moderna */
.dashboard-table-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 30px;
    border: none;
}
.table-modern {
    border-collapse: separate;
    border-spacing: 0 10px; /* Espacio entre filas */
}
.table-modern thead th {
    border: none;
    color: #a0aec0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    padding-bottom: 15px;
}
.table-modern tbody tr {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: transform 0.2s;
}
.table-modern tbody tr:hover {
    transform: scale(1.01);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    z-index: 2;
    position: relative;
}
.table-modern td {
    border: none;
    padding: 20px;
    vertical-align: middle;
}
.table-modern td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.table-modern td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* 3. Botones de Acción Redondos */
.btn-icon-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border: none;
}
.btn-icon-action:hover {
    transform: rotate(15deg) scale(1.1);
}

/* 4. Sidebar Moderno (Hereda de side-card-modern pero ajustado) */
.admin-sidebar-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden;
}
.admin-sidebar-header {
    background: linear-gradient(135deg, var(--color-azulino) 0%, #003366 100%);
    padding: 30px 20px;
    text-align: center;
    color: white;
}
.admin-menu-item {
    border: none;
    padding: 15px 25px;
    font-weight: 500;
    color: #555;
    transition: all 0.3s;
    border-left: 4px solid transparent;
}
.admin-menu-item:hover, .admin-menu-item.active {
    background-color: #f8f9fa;
    color: var(--color-azulino);
    border-left-color: var(--color-naranja); /* Línea naranja activa */
}
.admin-menu-item i {
    width: 25px;
    text-align: center;
    margin-right: 10px;
}

/* --- ESTILOS ACORDEÓN MODERNO (Paso 30) --- */
.accordion-modern .accordion-item {
    border: none;
    background: #fff;
    border-radius: 16px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    margin-bottom: 20px;
    overflow: hidden;
}
.accordion-modern .accordion-button {
    background: #fff;
    color: #4a5568;
    font-weight: 700;
    padding: 20px 25px;
    box-shadow: none; /* Quitar sombra azul por defecto */
}
.accordion-modern .accordion-button:not(.collapsed) {
    background: rgba(0, 74, 153, 0.05); /* Fondo azulino muy suave al abrir */
    color: var(--color-azulino);
}
.accordion-modern .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23004A99'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-modern .accordion-body {
    padding: 0 20px 20px 20px; /* Padding interno */
}

/* --- ESTILOS MI CUENTA (CLIENTE) --- */

/* 1. Sidebar del Cliente */
.client-profile-card {
    background: #fff;
    border-radius: 20px;
    border: none;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.client-profile-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 40px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.client-avatar {
    width: 80px;
    height: 80px;
    background: var(--color-azulino);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 15px auto;
    box-shadow: 0 5px 15px rgba(0, 74, 153, 0.2);
}
.client-menu-link {
    padding: 15px 25px;
    color: #555;
    font-weight: 500;
    transition: all 0.2s;
    border-left: 4px solid transparent;
    display: flex;
    align-items: center;
}
.client-menu-link:hover, .client-menu-link.active {
    background-color: #f8f9fa;
    color: var(--color-azulino);
    border-left-color: var(--color-naranja);
    text-decoration: none;
}
.client-menu-link i {
    width: 25px;
    text-align: center;
    margin-right: 10px;
}

/* 2. Botón de Acción Principal */
.btn-action-card {
    background: linear-gradient(135deg, var(--color-azulino), #003366);
    color: white;
    border-radius: 16px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 20px rgba(0, 74, 153, 0.2);
    transition: transform 0.3s;
    text-decoration: none;
}
.btn-action-card:hover {
    transform: translateY(-3px);
    color: white;
    box-shadow: 0 15px 30px rgba(0, 74, 153, 0.3);
}

/* --- ESTILOS TIENDA MODERNA (Paso 32) --- */

/* 1. Sidebar de Filtros (Estilo Panel Admin) */
.shop-sidebar-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    position: sticky;
    top: 100px; /* Para que te siga al bajar */
}

.shop-sidebar-header {
    background: linear-gradient(135deg, var(--color-azulino) 0%, #003366 100%);
    padding: 20px 25px;
    color: white;
}

.shop-filter-group {
    padding: 20px 25px;
    border-bottom: 1px solid #f0f0f0;
}

.shop-filter-title {
    font-weight: 700;
    color: var(--color-azulino);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* Checkboxes personalizados */
.shop-filter-group .form-check-input {
    border-color: #cbd5e0;
    cursor: pointer;
}
.shop-filter-group .form-check-input:checked {
    background-color: var(--color-naranja);
    border-color: var(--color-naranja);
}
.shop-filter-group .form-check-label {
    color: #555;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}
.shop-filter-group .form-check-label:hover {
    color: var(--color-azulino);
}

/* 2. Tarjeta de Producto (Estilo Flotante) */
.product-card-modern {
    border: none;
    background: #fff;
    border-radius: 20px; /* Bordes muy redondos */
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03); /* Sombra muy suave inicial */
    overflow: hidden;
    height: 100%;
    position: relative;
}

.product-card-modern:hover {
    transform: translateY(-7px); /* Se eleva más */
    box-shadow: 0 20px 40px rgba(0, 74, 153, 0.15); /* Sombra azulina */
}

.product-card-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 220px; /* Altura fija imagen */
    border-bottom: 1px solid #f8f9fa;
}

.product-card-img-wrapper img {
    width: 100%;
    height: 100%;
    /* ANTES: object-fit: cover; (Esto hacía el zoom/recorte) */
    object-fit: contain; /* AHORA: Se ajusta para verse completa */
    padding: 15px; /* Un poco de espacio para que no toque los bordes */
    background-color: #fff; /* Fondo blanco por si la imagen es png */
    transition: transform 0.5s ease;
}

.product-card-modern:hover .product-card-img-wrapper img {
    transform: scale(1.05); /* Zoom suave a la imagen */
}

.product-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 220px);
}

.product-brand {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #a0aec0;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.product-title a {
    color: var(--color-azulino);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.2s;
}
.product-title a:hover {
    color: var(--color-naranja);
}

.product-price {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-azulino);
    margin-top: auto; /* Empuja al fondo */
    margin-bottom: 15px;
}

/* 3. Barra Superior (Ordenamiento) */
.shop-toolbar {
    background: #fff;
    border-radius: 50px; /* Forma de píldora */
    padding: 10px 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/* --- ENCABEZADO MODERNIZADO (Paso 33) --- */

/* 1. La Barra Principal */
.navbar-modern {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    padding: 10px 0; /* Padding moderado */
    height: 90px; /* Altura fija para evitar que crezca */
    display: flex;
    align-items: center;
}

/* 2. Enlaces de Navegación (Menú Central) */
/* 2. Enlaces de Navegación (Ajustado para que quepan todos) */
.nav-link-modern {
    color: var(--color-azulino) !important;
    font-weight: 700;
    font-size: 0.8rem; /* Reducido de 0.9rem a 0.8rem */
    text-transform: uppercase;
    letter-spacing: 0.3px; /* Reducido ligeramente */
    margin: 0 4px; /* Reducido el margen lateral de 8px a 4px */
    padding: 8px 5px !important; /* Padding lateral reducido */
    position: relative; 
    transition: color 0.3s;
    white-space: nowrap; /* OBLIGATORIO: Evita que el texto se parta en dos líneas */
}

.nav-link-modern:hover, .nav-link-modern.active {
    color: var(--color-naranja) !important;
}

/* Animación de la línea inferior */
.nav-link-modern::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-naranja);
    transition: width 0.3s ease-in-out;
}

.nav-link-modern:hover::after {
    width: 100%;
}

/* 3. Botones de Acción Circulares (Buscar, Carrito, User) */
.header-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-azulino);
    background-color: #f8f9fa; /* Gris muy claro */
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-left: 8px;
    position: relative;
}

.header-icon-btn:hover {
    background-color: var(--color-azulino);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 74, 153, 0.2);
}

/* Icono de Carrito (Badge) */
.header-cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--color-naranja);
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* 4. Input de Búsqueda (Header) */
.header-search-input {
    border-radius: 50px; /* Píldora completa para coincidir con el botón */
    border: 1px solid #eee;
    background: #f8f9fa;
    padding-left: 20px;
    font-size: 0.9rem;
    height: 42px; /* ¡CLAVE! Misma altura que .header-icon-btn */
    transition: all 0.3s;
}

.header-search-input:focus {
    background: #fff;
    border-color: var(--color-azulino);
    box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.1);
}

/* Ajuste para el body (para que el contenido no se esconda detrás del header fijo) */
body {
    padding-top: 90px !important; /* Un poco más de espacio que antes */
}

/* --- ESTILOS MODERNOS HOMEPAGE (Paso 34) --- */

/* 1. Títulos de Sección */
.section-title-modern {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-azulino);
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}
.section-title-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}
.section-subtitle {
    color: #a0aec0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* 2. Tarjetas de Métricas (Stats) */
.metric-card-modern {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid rgba(0,0,0,0.02);
    height: 100%;
}
.metric-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 74, 153, 0.1);
}
.metric-icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 127, 0, 0.1); /* Naranja suave */
    color: var(--color-naranja);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px auto;
}
.metric-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-azulino);
    line-height: 1;
    margin-bottom: 10px;
}

/* 3. CTA Moderno (Arma tu Consultorio) */
.cta-modern-section {
    background: linear-gradient(135deg, var(--color-azulino) 0%, #002a52 100%);
    border-radius: 30px; /* Bordes muy redondos */
    padding: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 74, 153, 0.3);
    color: white;
}
.cta-deco-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

/* 4. Sobre Nosotros (Imagen moderna) */
.about-img-modern {
    border-radius: 30px;
    box-shadow: 20px 20px 0px rgba(255, 127, 0, 0.1); /* Sombra sólida decorativa */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 5. Formulario Contacto Home */
.contact-home-card {
    background: #fff;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}

.category-card {
    /* Estas propiedades evitan el parpadeo en animaciones */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translate3d(0,0,0);
    /* Asegurar que la imagen cubra todo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 2. Texto más grande para "Nuestra Historia" */
.about-text-content p {
    font-size: 1.15rem; /* Un poco más grande que el estándar (1rem) */
    line-height: 1.8;   /* Más espacio entre líneas para leer mejor */
    color: #555;
    margin-bottom: 1.5rem;
}

/* --- FOOTER PREMIUM (Paso 36) --- */
.footer-modern {
    background-color: #0b1120; /* Azul Noche muy oscuro (casi negro) */
    color: #94a3b8; /* Texto gris azulado suave (muy legible) */
    padding-top: 80px;
    font-size: 0.95rem;
    margin-top: auto; /* Empuja el footer al fondo si hay poco contenido */
}

/* Títulos de Columna */
.footer-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}
/* Pequeña línea decorativa bajo el título */
.footer-title::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background-color: var(--color-naranja);
    bottom: -10px;
    left: 0;
    border-radius: 2px;
}

/* Enlaces */
.footer-link {
    color: #94a3b8;
    text-decoration: none;
    display: block;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}
.footer-link:hover {
    color: #ffffff;
    transform: translateX(5px); /* Se mueve a la derecha */
    text-decoration: none;
}
.footer-link i {
    margin-right: 8px;
    color: var(--color-naranja);
    font-size: 0.8rem;
}

/* Redes Sociales (Círculos) */
.footer-social-link {
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.05);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.footer-social-link:hover {
    background-color: var(--color-naranja);
    color: #fff;
    transform: translateY(-3px);
}

/* Input Newsletter */
.footer-input {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 50px;
    padding: 12px 20px;
}
.footer-input:focus {
    background-color: rgba(255,255,255,0.1);
    border-color: var(--color-azulino);
    color: #fff;
    box-shadow: none;
}

/* Barra Copyright */
.footer-bottom {
    background-color: #020617; /* Aún más oscuro */
    padding: 25px 0;
    margin-top: 60px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
}

/* --- DETALLE DE PRODUCTO MODERNO (Paso 37) --- */

/* Breadcrumbs */
.breadcrumb-modern a {
    color: #a0aec0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.breadcrumb-modern a:hover { color: var(--color-azulino); }
.breadcrumb-modern .active { color: var(--color-azulino); font-weight: 600; }

/* Imagen Principal */
.detail-image-wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    background: #fff;
    padding: 20px;
    /* NUEVO: Centrar la imagen si es más pequeña que el contenedor */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px; /* Altura fija del cuadro contenedor */
}

.detail-image-wrapper img {
    /* NUEVO: Restricciones para que no sea gigante */
    max-width: 100%;      /* No más ancho que el contenedor */
    max-height: 450px;    /* ¡AQUÍ ESTÁ EL TRUCO! Altura máxima controlada */
    width: auto;          /* El ancho se ajusta solo para no deformarse */
    height: auto;
    object-fit: contain;  /* Asegura que se vea completa */
    transition: transform 0.3s ease;
}

.detail-image-wrapper:hover img { transform: scale(1.02); }

/* Info del Producto */
.product-meta-badge {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #a0aec0;
}

/* Selector de Color (CÍRCULOS) */
.color-option-input { display: none; }
.color-option-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 10px;
    transition: all 0.2s;
    border: 2px solid transparent;
    border-radius: 50px;
    padding: 5px 15px 5px 5px; /* Espacio para el texto */
    background: #f8f9fa;
}
.color-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 2px solid #fff;
    margin-right: 8px;
}
/* Estado Seleccionado */
.color-option-input:checked + .color-option-label {
    border-color: var(--color-azulino);
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 74, 153, 0.1);
}
.color-option-input:checked + .color-option-label .color-name {
    color: var(--color-azulino);
    font-weight: 700;
}

/* Tabs de Información */
.nav-tabs-modern {
    border-bottom: 2px solid #f0f0f0;
}
.nav-tabs-modern .nav-link {
    border: none;
    color: #a0aec0;
    font-weight: 600;
    padding: 15px 25px;
    position: relative;
}
.nav-tabs-modern .nav-link.active {
    color: var(--color-azulino);
    background: transparent;
}
.nav-tabs-modern .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-naranja);
}

/* Tabla de Especificaciones Limpia */
.specs-table th { width: 40%; background: #f8f9fa; color: var(--color-azulino); }

/* --- ESTILOS PÁGINA CONTACTO (Paso 38) --- */

.contact-info-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    height: 100%;
    border: 1px solid #f0f0f0;
}
.contact-info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 74, 153, 0.1);
}
.contact-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2ff 0%, #f0f4f8 100%);
    color: var(--color-azulino);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px auto;
    transition: all 0.3s ease;
}
.contact-info-card:hover .contact-icon-wrapper {
    background: var(--color-azulino);
    color: #fff;
    transform: rotate(10deg);
}

/* Mapa Google */
.map-container {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    height: 100%;
    min-height: 450px;
    border: 5px solid #fff;
}

/* --- ARMA TU CONSULTORIO V2 (3 Columnas) --- */

/* 1. Columna Izquierda: Selector de Colores */
.color-sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    position: sticky;
    top: 100px;
    text-align: center;
}
.color-picker-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-block;
}
.color-picker-btn:hover { transform: scale(1.1); }
.color-picker-btn.active {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px var(--color-azulino); /* Anillo de selección */
    border-color: #fff;
}
.color-tooltip {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
    font-weight: 600;
}

/* ============================================= */
/* VISUALIZADOR 2D: POSICIONES Y TAMAÑOS FINALES */
/* (Ajustes de solapamiento y tamaño fino)       */
/* ============================================= */

.visualizer-stage {
    position: relative;
    width: 100%;
    height: 650px; 
    background-color: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.visualizer-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
}

/* --- REGLA BASE --- */
.visualizer-layer {
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    max-height: 150px !important; 
    max-width: 200px !important;  
    width: auto; height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%); /* El centro del elemento es el ancla */
}
.visualizer-layer.visible { opacity: 1; }

/* --- POSICIONES AJUSTADAS POR ID --- */

/* ID 1: UNIDAD DENTAL (Protagonista Central) */
#layer-cat-1 {
    z-index: 20; 
    max-height: 400px !important; 
    max-width: 100% !important;
    top: 60%; 
    left: 45%;  
    transform: translate(-50%, -40%); 
}

/* ID 5: COMPRESORES (Piso - Esquina Inferior Izq, Detrás del sillón) */
#layer-cat-5 { 
    z-index: 8; 
    max-height: 250px !important; 
    top: 80%; 
    left: 10%; 
}

/* ID 6: RAYOS X (Pared - Posición Lógica de uso, altura media) */
#layer-cat-6 { 
    z-index: 5; /* Aseguramos que esté bien al fondo */
    max-height: 250px !important; 
    top: 35%; 
    left: 20%; 
}

/* ID 8: LÁMPARAS DENTALES (Brazo/Techo - Encima de la Unidad) */
#layer-cat-8 { 
    z-index: 25; 
    top: 15%; 
    left: 45%; 
    max-height: 180px !important;
    max-width: 180px !important;
}

/* ID 9: EQUIPOS DE LABORATORIO (Mesa Izquierda - **MÁS PEQUEÑO**, Delante de Rayos X) */
#layer-cat-9 { 
    z-index: 10; /* Delante de Rayos X, pero detrás del sillón */
    max-height: 150px !important; /* REDUCIDO para que no sea tan grande */
    max-width: 180px !important;  /* Capamos también el ancho */
    top: 50%; 
    left: 20%; /* Ajustado para que no tape Rayos X pero se vea como sobre mesa */
}

/* ID 3: ULTRASONIDOS (Mesa Derecha - Adelante, para no chocar con Bioseguridad) */
#layer-cat-3 { 
    z-index: 16; /* Va delante de Bioseguridad */
    top: 55%; 
    left: 70%; 
    max-height: 140px !important; /* Ligeramente más pequeño */
    max-width: 140px !important;
}

/* ID 11: ENDODONCIA (Mesa Derecha - Ligeramente delante y a la izq de Ultrasonidos) */
#layer-cat-11 { 
    z-index: 17; 
    top: 60%; 
    left: 60%; 
    max-height: 110px !important; /* Un poco más pequeño */
    max-width: 110px !important;
}

/* ID 2: BIOSEGURIDAD (Mesa Derecha - Atrás, pegado a la pared, NO solapa Ultrasonidos) */
#layer-cat-2 { 
    z-index: 12; /* Queda detrás de Ultrasonidos */
    top: 45%; 
    left: 85%; 
    max-height: 160px !important;
    max-width: 160px !important;
}

/* ID 4: PIEZA DE MANO (Sobre el panel de la unidad, pequeña) */
#layer-cat-4 { 
    z-index: 30; 
    top: 40%; 
    left: 60%; 
    max-height: 80px !important; 
}

/* ID 10: ACCESORIOS (Mesa Auxiliar - Centro Derecho, NO solapa Ultrasonidos) */
#layer-cat-10 { 
    z-index: 18; /* Delante de Endodoncia, detrás de Ultrasonidos si es necesario */
    top: 65%; /* Movido más abajo para despejar Ultrasonidos */
    left: 75%; 
    max-height: 90px !important; /* Ligeramente más pequeño */
    max-width: 90px !important;
}

/* ID 7: CAJA ACÚSTICA (Suele ser un accesorio pequeño de piso/mesa) */
#layer-cat-7 { 
    z-index: 15; 
    top: 85%; 
    left: 85%; 
    max-height: 150px !important;
    max-width: 150px !important;
}

/* --- MÓVIL (Ajustes para pantallas pequeñas) --- */
@media (max-width: 991px) {
    .visualizer-stage { height: 400px; }
    
    .visualizer-layer { max-height: 70px !important; max-width: 90px !important; } /* General más pequeño */

    #layer-cat-1 { top: 60%; left: 50%; max-height: 250px !important; max-width: 300px !important; }
    #layer-cat-5 { top: 80%; left: 10%; max-height: 150px !important; } 
    #layer-cat-6 { top: 30%; left: 20%; max-height: 120px !important; } 
    #layer-cat-9 { top: 45%; left: 20%; max-height: 100px !important; max-width: 120px !important; } /* Laboratorio móvil */
    #layer-cat-3 { top: 55%; left: 70%; max-height: 90px !important; }
    #layer-cat-11 { top: 60%; left: 60%; max-height: 80px !important; }
    #layer-cat-2 { top: 45%; left: 85%; max-height: 100px !important; }
    #layer-cat-4 { top: 40%; left: 60%; max-height: 50px !important; }
    #layer-cat-10 { top: 65%; left: 75%; max-height: 60px !important; }
    #layer-cat-7 { top: 85%; left: 85%; max-height: 100px !important; }
}


/* 3. Acordeones de Productos (Debajo de la imagen) */
.builder-accordion .accordion-item {
    border: none;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    overflow: hidden;
}
.builder-accordion .accordion-button {
    font-weight: 700;
    color: var(--color-azulino);
    background: #fff;
}
.builder-accordion .accordion-button:not(.collapsed) {
    background: rgba(0, 74, 153, 0.05);
}

/* Item de producto pequeño */
.mini-product-card {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.2s;
    cursor: pointer;
}
.mini-product-card:hover { border-color: var(--color-azulino); background: #fcfcfc; }
.mini-product-card.selected { 
    border-color: var(--color-naranja); 
    background: rgba(255, 127, 0, 0.05); 
}
.mini-product-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 15px;
}

/* --- ESTILOS CARRITO MODERNO (Paso 39) --- */

/* 1. Tarjeta de Producto en el Carrito */
.cart-item-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Para móviles */
}

.cart-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 74, 153, 0.08);
}

.cart-item-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    margin-right: 20px;
}

.cart-item-details {
    flex-grow: 1;
    min-width: 200px;
}

/* 2. Selector de Cantidad Estilizado */
.qty-selector-modern {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 50px;
    padding: 5px;
    border: 1px solid #eee;
    width: fit-content;
}
.qty-input-modern {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    color: var(--color-azulino);
}
.qty-btn-update {
    border: none;
    background: #fff;
    color: var(--color-azulino);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: all 0.2s;
}
.qty-btn-update:hover {
    background: var(--color-naranja);
    color: #fff;
}

/* 3. Panel de Resumen (Derecha) */
.cart-summary-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    position: sticky;
    top: 100px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #555;
    font-size: 0.95rem;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-azulino);
}

/* Badge para Paquetes */
.badge-bundle {
    background: linear-gradient(45deg, var(--color-naranja), #ff9f43);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Asegurar también para tarjetas antiguas o estándar */
.card-img-top {
    object-fit: contain !important;
    padding: 10px;
    height: 220px; /* Forzar altura uniforme */
    background-color: #fff;
}

/* --- BLACK FRIDAY COUNTDOWN --- */
.bf-banner {
    background: var(--color-naranja);
    color: #fff;
    padding: 40px 0;
    text-align: center;
    border-bottom: 5px solid var(--color-azulino);
    margin-bottom: 0; /* Pegado a las métricas */
    position: relative;
    overflow: hidden;
}

.bf-title {
    font-weight: 900;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.bf-timer-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.bf-time-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px 20px;
    min-width: 100px;
    backdrop-filter: blur(5px);
}

.bf-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-azulino);
    display: block;
    line-height: 1;
}

.bf-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Responsivo */
@media (max-width: 768px) {
    .bf-timer-wrapper { gap: 10px; }
    .bf-time-box { min-width: 70px; padding: 10px; }
    .bf-number { font-size: 1.5rem; }
    .bf-title { font-size: 1.5rem; }
}

/* ============================================= */
/* VISTA MÓVIL (RESPONSIVE DESIGN)            */
/* ============================================= */

@media (max-width: 991px) { /* Tablets y Celulares */

    /* --- 1. ENCABEZADO Y LOGO --- */
    .navbar-modern {
        padding: 10px 0;
        height: auto; /* Permitir que crezca si se abre el menú */
    }
    .navbar-brand img {
        height: 60px !important; /* Logo más pequeño */
        margin: 0;
    }
    /* Buscador en móvil: Ancho completo y margen */
    .search-container {
        display: block !important; /* Forzar visibilidad */
        width: 100%;
        margin: 15px 0;
    }
    .header-search-input {
        width: 100% !important;
    }
    /* Menú de navegación centrado */
    .navbar-collapse {
        background: #fff;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        margin-top: 15px;
    }

    /* --- 2. BANNERS --- */
    .page-banner {
        height: 200px !important; /* Banner más bajito */
    }
    .page-banner h1 {
        font-size: 2rem; /* Título más pequeño */
    }

    /* --- 3. HOME: CTA Y MÉTRICAS --- */
    .cta-modern-section {
        padding: 30px 20px;
        text-align: center;
    }
    /* Ajustar imagen del CTA horizontal para que no se vea gigante */
    .cta-modern-section img {
        height: 80px !important;
        margin: 20px 0;
    }
    
    /* Métricas: Quitar margen negativo en móvil para que no se monten */
    .container[style*="margin-top: -100px"] {
        margin-top: 0 !important;
    }
    
    /* --- 4. TIENDA: SIDEBAR --- */
    /* El sidebar de filtros deja de ser sticky y se pone normal */
    .shop-sidebar-card {
        position: static; 
        margin-bottom: 30px;
    }
    
    /* --- 5. ARMA TU CONSULTORIO (El más difícil) --- */
    /* En móvil, queremos ver: Visualizador -> Acordeón -> Resumen */
    .visualizer-stage {
        height: 250px; /* Altura reducida para móvil */
    }
    
    /* Sidebar de Colores: Lo convertimos en una barra horizontal scrolleable */
    .color-sidebar-card {
        position: static;
        overflow-x: auto;
        white-space: nowrap;
        padding: 10px;
        margin-bottom: 20px;
    }
    #color-palette-container {
        display: flex;
        gap: 10px;
    }
    .color-picker-btn {
        margin: 0;
        flex-shrink: 0; /* Evita que se aplasten */
    }
    
    /* Resumen: Ya no es sticky */
    .summary-box {
        position: static;
        margin-top: 30px;
    }

    /* --- 6. ADMIN / DASHBOARD --- */
    /* Hacer que las tablas tengan scroll horizontal si son muy anchas */
    .table-responsive {
        overflow-x: auto;
    }
    
    /* Sidebar Admin: Oculto por defecto, mostraremos un botón para abrirlo */
    .admin-sidebar-card.sticky-top {
        position: static; /* Ya no flota */
        margin-bottom: 20px;
    }
    /* En pantallas muy pequeñas, quizás ocultarlo y usar offcanvas (ver Paso 3) */
}

/* Ajustes específicos para celulares muy pequeños */
@media (max-width: 576px) {
    .product-card-img-wrapper {
        height: 180px; /* Imagen de producto más baja */
    }
    .bf-title {
        font-size: 1.5rem; /* Título Black Friday */
    }
    .bf-time-box {
        min-width: 60px;
        padding: 10px 5px;
    }
    .bf-number { font-size: 1.5rem; }
    .bf-label { font-size: 0.6rem; }
}


/* ============================================= */
/* CORRECCIÓN DE BANNERS EN MÓVIL (Anti-Zoom)   */
/* ============================================= */

/* Regla maestra para todos los banners con fondo */
.hero-banner, .page-banner, .bf-banner {
    /* Asegura que el centro de la imagen sea siempre el foco */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* 'cover' intenta llenar todo, pero si el cuadro es más bajo, recorta menos */
    background-size: cover !important; 
}

/* --- VISTA DE CELULARES (Pantallas menores a 768px) --- */
@media (max-width: 768px) {

    /* 1. Banner Principal del Home y Banners de Páginas Internas */
    .hero-banner, .page-banner {
        /* FUERZA una altura mucho menor en celulares. 
           Al ser más "chato", se ve más a lo ancho. */
        height: 220px !important; 
        min-height: 220px !important;
    }
    
    /* 2. Ajustar textos para que quepan en el banner más pequeño */
    .hero-banner h1, .page-banner h1 {
        font-size: 1.8rem !important; /* Título más chico */
        margin-bottom: 10px !important;
    }
    
    /* Opcional: Ocultar el párrafo de subtítulo en el home si sientes que estorba */
    /* .hero-banner p { display: none !important; } */

    /* 3. Caso Especial: Black Friday Banner (Si está pegado) */
    .bf-banner[style*="margin-top: 0"] {
       /* Si está pegado al principal, que no sea tan alto */
       padding: 20px 0 !important;
    }
}

/* --- VISTA DE CELULARES MUY PEQUEÑOS (Menores a 480px) --- */
@media (max-width: 480px) {
    /* Ser aún más agresivos con la altura si el celular es muy angosto */
    .hero-banner, .page-banner {
        height: 180px !important;
        min-height: 180px !important;
    }
}

/* --- ESTILOS POP-UP ANUNCIOS (Paso 37) --- */

/* 1. El Marco del Modal */
.promo-modal-content {
    /* CLAVE: Hacemos que el contenedor principal del modal sea transparente */
    background-color: transparent !important; 
    border: none; /* Elimina todos los bordes */
    box-shadow: none; /* Elimina la sombra de la caja blanca */
    overflow: visible; /* Permitir que el botón de cerrar salga */
}

.promo-modal-body {
    background-color: #000000; 
    /* Eliminamos el borde blanco que agregué antes que ahora es redundante */
    border: none; 
}

/* 2. Contenedor de la Diapositiva (Define el tamaño fijo) */
.promo-slide-box {
    width: 100%;
    height: 500px; /* ALTURA FIJA en PC */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000; /* Asegura fondo negro si la imagen es chica */
}

/* 3. La Imagen (Se ajusta sin cortarse) */
.promo-img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain; /* LA CLAVE: Muestra la imagen completa */
    display: block;
}

/* 4. Botón Cerrar (Súper Visible) */
.btn-close-promo {
    /* Reposicionamos la X ligeramente */
    top: 0px; 
    right: 0px; 
    /* Mantenemos el estilo de Botón Rojo Flotante */
}
.btn-close-promo:hover {
    transform: scale(1.1);
    background-color: #cc0000;
}
.btn-close-promo::before {
    content: '✕'; /* La X explícita */
}

/* 5. Flechas del Carrusel (Más visibles) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0,0,0,0.5); /* Fondo oscuro tras la flecha */
    border-radius: 50%;
    padding: 25px;
    background-size: 50%, 50%;
}

/* --- AJUSTE PARA CELULARES --- */
@media (max-width: 768px) {
    .promo-slide-box {
        height: 350px; /* Altura más pequeña en celular */
    }
    .btn-close-promo {
        top: 10px;  /* En celular, lo metemos dentro para que no se salga de pantalla */
        right: 10px;
        background-color: rgba(0,0,0,0.6); /* Negro semi-transparente */
        color: white;
    }
}

/* Estilos para Variantes de Precio (Radio Buttons) */
.price-variant-selector .option-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    transition: all 0.2s;
    border: 1px solid #ddd;
    box-shadow: none;
    cursor: pointer;
}
.price-variant-selector .option-card.selected {
    background-color: var(--color-azulino);
    color: white !important;
    border-color: var(--color-azulino);
    box-shadow: 0 4px 8px rgba(0, 74, 153, 0.2);
}
.price-variant-selector .price-tag {
    font-weight: 700;
    color: var(--color-naranja); /* Resaltar precio */
}
.price-variant-selector .option-card.selected .price-tag {
    color: white; /* Resaltar en blanco si está seleccionado */
}


/* ============================================= */
/* ESTILOS POP-UP DE ANUNCIOS (MODAL - FINAL)   */
/* ============================================= */

/* Contenedor principal del modal */
.promo-modal-content {
    border-radius: 1.5rem; /* Bordes redondeados para toda la tarjeta */
    border: none; /* Elimina cualquier borde extra */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra sutil para la tarjeta */
    background-color: white; /* Fondo blanco para la tarjeta */
    overflow: hidden; /* **CLAVE:** Asegura que todo el contenido (imagen) se adapte a los bordes redondeados */
}

/* El botón de cerrar (la 'X') */
.btn-close-promo {
    position: absolute; /* Para posicionarla libremente */
    top: 15px; /* Margen desde arriba */
    right: 15px; /* Margen desde la derecha */
    z-index: 1060; /* Asegura que la 'X' esté por encima de la imagen */
    background-color: #dc3545; /* Fondo rojo para el círculo de la 'X' */
    opacity: 1; /* Asegura que sea completamente visible */
    border-radius: 50%; /* Hace el botón circular */
    width: 35px; /* Tamaño del círculo */
    height: 35px; /* Tamaño del círculo */
    display: flex; /* Para centrar la 'X' */
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Muestra que es clicable */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra para el botón */
}

/* La 'X' en sí, dentro del botón */
.btn-close-promo::before {
    content: "\2715"; /* Símbolo de "X" */
    font-size: 1.2rem;
    color: white; /* Color blanco para la 'X' */
    line-height: 1; /* Ajuste para centrar el símbolo */
}

/* Cuerpo del modal (donde está la imagen) */
.promo-modal-body {
    padding: 0; /* Elimina cualquier padding para que la imagen ocupe todo */
    background-color: white; /* Asegura un fondo blanco debajo de la imagen si hay espacio */
}

/* Contenedor de la imagen dentro del carrusel */
.promo-slide-box {
    width: 100%;
    height: auto; /* Ajuste para mantener la proporción */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white; /* Fondo blanco si la imagen no cubre todo */
}

/* Imagen dentro del anuncio */
.promo-img-contain {
    width: 100%; /* La imagen ocupa todo el ancho */
    height: auto; /* Mantiene la proporción */
    display: block; /* Elimina cualquier espacio extra */
    object-fit: cover; /* **CLAVE:** Cubre el área manteniendo proporción, recortando si es necesario */
    border-radius: 1.5rem; /* La imagen también tendrá bordes redondeados si la imagen lo permite */
}

/* Carrusel y sus controles (flechas y puntos) */
#carouselAds {
    border-radius: 1.5rem; /* El carrusel también se redondea */
}

/* Flechas de navegación del carrusel */
.carousel-control-prev,
.carousel-control-next {
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.5); /* Flechas semi-transparentes */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-control-prev { left: 10px; }
.carousel-control-next { right: 10px; }

.carousel-control-prev-icon,
.carousel-control-next-icon {
    font-size: 1.5rem; /* Tamaño de la flecha */
}

/* Indicadores (los puntitos de abajo) */
.carousel-indicators button {
    background-color: #6c757d; /* Color de los puntos inactivos */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.5;
}

.carousel-indicators button.active {
    background-color: #212529; /* Color del punto activo */
    opacity: 1;
}


/* --- TEMA ESPECIAL RADIOLOGÍA (Fondo Negro Puro) --- */
body.theme-dark {
    background-color: #000000 !important; /* Negro puro */
    color: #ffffff !important; /* Texto blanco */
}

/* Eliminar fondos blancos de cualquier tarjeta en este modo */
.theme-dark .card,
.theme-dark .bg-light,
.theme-dark .shadow-lg,
.theme-dark .rounded-4 {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Tipografía Hero */
.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -1px;
}
.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    color: #cccccc; /* Gris claro para subtítulos */
}

/* Botones de Navegación (Pills) */
.nav-pills-dark .btn {
    border: 2px solid #444; /* Borde gris para los no activos */
    color: #fff;
    padding: 15px 30px; /* Más grandes */
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.nav-pills-dark .btn:hover {
    border-color: #fff;
}
.nav-pills-dark .btn.btn-naranja {
    background-color: var(--color-naranja);
    border-color: var(--color-naranja);
    color: #fff;
}

/* Carrusel de Videos Cinemático (Full Width) */
.video-cinematic-container {
    background-color: #080808; /* Un negro apenas más claro para separar */
    padding: 80px 0;
    margin-top: 80px;
}
.video-frame-wrapper-large {
    position: relative;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}
.video-frame-wrapper-large iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.video-caption-large {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 20px;
    text-align: left;
}

/* --- ENCABEZADO MODO OSCURO (Solo para Radiología) --- */

.navbar-dark-mode {
    background-color: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: none !important; /* Eliminamos la línea */
    box-shadow: none !important;    /* Eliminamos cualquier sombra blanca */
    padding: 10px 0;
    height: 90px;
    display: flex;
    align-items: center;
}

/* Enlaces en blanco */
.navbar-dark-mode .nav-link-modern {
    color: #ffffff !important;
}
.navbar-dark-mode .nav-link-modern:hover,
.navbar-dark-mode .nav-link-modern.active {
    color: var(--color-naranja) !important; /* Naranja al pasar el mouse */
}
.navbar-dark-mode .nav-link-modern::after {
    background-color: var(--color-naranja);
}

/* Botones circulares oscuros */
.navbar-dark-mode .header-icon-btn {
    background-color: #222; /* Fondo gris oscuro */
    color: #fff;
    border: 1px solid #444;
}
.navbar-dark-mode .header-icon-btn:hover {
    background-color: var(--color-naranja);
    border-color: var(--color-naranja);
    color: #fff;
}

/* Input de búsqueda oscuro */
.navbar-dark-mode .header-search-input {
    background-color: #222;
    border: 1px solid #444;
    color: #fff;
}
.navbar-dark-mode .header-search-input::placeholder {
    color: #888;
}
.navbar-dark-mode .header-search-input:focus {
    background-color: #000;
    border-color: var(--color-naranja);
}

/* Botón menú móvil (Hamburguesa) en blanco */
.navbar-dark-mode .navbar-toggler-icon {
    filter: invert(1); /* Invierte el color negro a blanco */
}


/* --- RADIOLOGÍA MEJORADA (Paso 45) --- */

/* 1. Pestañas de Navegación (Estilo Apple Dark) */
.nav-pills-radiologia {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 5px;
    display: inline-flex;
}

.nav-pills-radiologia .nav-link {
    border-radius: 50px;
    color: #ccc;
    font-weight: 600;
    padding: 12px 30px;
    transition: all 0.3s ease;
}

.nav-pills-radiologia .nav-link.active {
    background-color: var(--color-azulino); /* Usamos el AZULINO aquí */
    color: white;
    box-shadow: 0 5px 15px rgba(0, 74, 153, 0.4);
}
.nav-pills-radiologia .nav-link:hover:not(.active) {
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
}

/* 2. Reproductor de Video Local */
.local-video-wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    background: #000;
    position: relative;
}
.local-video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Sección Galería/Casos */
.gallery-grid-item {
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    height: 250px;
    border: 1px solid #333;
    transition: transform 0.3s;
}
.gallery-grid-item:hover {
    transform: scale(1.02);
    border-color: var(--color-naranja); /* Toque naranja */
}
.gallery-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-caption {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: white;
    padding: 20px;
    font-size: 0.9rem;
}



/* --- RADIOLOGÍA FINAL (Paso 46) --- */

/* 1. Corrección de Videos (Proporción Cine 16:9) */
.video-aspect-box {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 16px; /* Bordes redondeados */
    background: #000;
    border: 1px solid #333;
}

/* Esta regla aplica tanto a YouTube como a MP4 local */
.video-aspect-box iframe,
.video-aspect-box video {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover; /* Asegura que el video llene el cuadro sin deformarse */
}

/* 2. Sección de Características (Grid) */
.feature-box-dark {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    transition: transform 0.3s ease;
    height: 100%;
}
.feature-box-dark:hover {
    transform: translateY(-5px);
    border-color: var(--color-naranja);
    background: rgba(255, 255, 255, 0.08);
}

/* 3. Galería de Resultados Clínicos */
.clinical-img-card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #333;
    transition: all 0.3s ease;
}
.clinical-img-card:hover {
    border-color: var(--color-azulino);
    box-shadow: 0 0 20px rgba(0, 74, 153, 0.3);
}
.clinical-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- BOTÓN DE ACCIÓN RADIOLOGÍA (Corrección) --- */
.btn-radiologia-action {
    background-color: var(--color-naranja) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important; /* Píldora perfecta */
    padding: 15px 40px;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 25px rgba(255, 127, 0, 0.4); /* Sombra naranja brillante */
    transition: all 0.3s ease; /* Suavidad */
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

/* Efecto al pasar el mouse */
.btn-radiologia-action:hover {
    background-color: #ff9933 !important; /* Un poco más claro para brillar */
    transform: translateY(-5px); /* Se eleva */
    box-shadow: 0 20px 40px rgba(255, 127, 0, 0.6); /* Sombra más grande */
    color: #fff !important;
}


/* --- NAVEGACIÓN ESTILO DARK APPLE (FINAL) --- */

/* 1. El Contenedor (La Cápsula) */
.apple-glass-nav {
    position: relative;
    display: inline-flex; /* Se ajusta al contenido */
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.8); /* Casi negro, muy translúcido */
    backdrop-filter: blur(25px);       /* Vidrio fuerte */
    -webkit-backdrop-filter: blur(25px);
    padding: 6px;                      /* Espacio interno */
    border-radius: 100px;              /* Redondo perfecto */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borde de luz sutil */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5); /* Sombra profunda */
    margin: 0 auto; /* Centrado horizontal */
}

/* 2. La Burbuja Móvil (El fondo azul) */
.liquid-slider {
    position: absolute;
    top: 6px; 
    bottom: 6px;
    left: 6px; /* JS lo mueve */
    width: 100px; /* JS lo ajusta */
    background: var(--color-azulino); /* Tu azul corporativo */
    /* Opcional: un degradado sutil para más volumen */
    background: linear-gradient(145deg, var(--color-azulino) 0%, #003f88 100%);
    border-radius: 100px;
    z-index: 1; /* Detrás del texto */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Movimiento "Apple" */
    box-shadow: 0 2px 8px rgba(0, 50, 120, 0.4);
}

/* 3. Los Botones (Texto) */
.glass-nav-item {
    position: relative;
    z-index: 2; /* Delante de la burbuja */
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55); /* Texto inactivo gris claro */
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 32px; /* Tamaño del botón */
    cursor: pointer;
    transition: color 0.3s ease;
    border-radius: 100px;
    outline: none !important;
    white-space: nowrap;
}

.glass-nav-item:hover {
    color: rgba(255, 255, 255, 0.9);
}

.glass-nav-item.active {
    color: #fff; /* Blanco puro al estar activo */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* --- TRANSICIONES SUAVES DE PESTAÑAS (Radiología) --- */

/* Sobrescribimos la clase .fade de Bootstrap solo en esta página */


.tab-content > .tab-pane.active {
    display: block; /* Ocupa espacio */
    /* Aún invisible hasta que tenga 'show' */
}

.tab-content > .tab-pane.show {
    opacity: 1;
    transform: translateY(0); /* Sube a su posición original */
}



/* ============================================= */
/* AJUSTES MÓVILES RADIOLOGÍA (RESPONSIVE)      */
/* ============================================= */

@media (max-width: 768px) {
    
    /* 1. Navegación Flotante (Apple Nav) */
    .apple-glass-nav {
        width: 95%; /* Ocupa casi todo el ancho */
        padding: 4px;
        justify-content: space-between; /* Distribuye los botones */
    }
    
    .glass-nav-item {
        padding: 10px 15px; /* Menos relleno lateral */
        font-size: 0.75rem; /* Texto más pequeño */
        flex-grow: 1; /* Que ocupen espacio igual */
        text-align: center;
    }

    /* 2. Títulos Hero */
    .display-4 {
        font-size: 2.5rem !important; /* Reducir título gigante */
    }
    
    /* 3. Imágenes de Producto */
    .col-lg-7 img {
        max-height: 300px !important; /* Que no sean tan altas en celular */
    }

    /* 4. Ajustes de Espaciado */
    .container.pt-5 {
        padding-top: 2rem !important; /* Menos aire arriba */
    }
    
    /* 5. Videos */
    .video-aspect-box {
        border-radius: 8px; /* Bordes menos redondos en móvil */
    }
}

/* ============================================= */
/* REGLAS CINEMÁTICAS - SOLO PÁGINA RADIOLOGÍA  */
/* (El selector .theme-dark lo restringe)        */
/* ============================================= */

/* Estilos para slides NO activos (laterales) */
.theme-dark #video-slider-tomo .splide__slide,
.theme-dark #video-slider-cefa .splide__slide {
    opacity: 0.4;
    /* CORRECCIÓN: Usamos 0.85 para que no se solapen y se vean pequeños */
    transform: scale(1.00); 
    transform-origin: center center;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

/* Estilos para slides ACTIVO (el del centro) */
.theme-dark #video-slider-tomo .splide__slide.is-active,
.theme-dark #video-slider-cefa .splide__slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 3;
    box-shadow: 0 20px 20px rgba(0,0,0,0.8);
}

/* El CSS del iframe también debe ser específico si está rompiendo */
.theme-dark .video-aspect-box iframe {
    border-radius: 12px;
}

/* --- ESTILOS BLACK FRIDAY (OFERTA) --- */
.product-card-modern { position: relative; } /* Necesario para etiquetas */

.badge-bf-left {
    position: absolute; top: 15px; left: 15px; background: #000; color: #FFD700; 
    padding: 6px 12px; border-radius: 6px; font-size: 0.7rem; font-weight: 800; z-index: 10; 
    border: 1px solid #FFD700; text-transform: uppercase;
}
.badge-discount-right {
    position: absolute; top: 15px; right: 15px; background-color: #dc3545; color: white; 
    width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; 
    justify-content: center; font-size: 0.85rem; font-weight: 800; z-index: 10; border: 2px solid #fff; 
}

.price-container-bf { display: flex; flex-direction: column; align-items: flex-start; }
.price-old-bf { text-decoration: line-through; color: #aaa; font-size: 0.9rem; margin-bottom: -4px; }
.price-new-bf { color: #dc3545; font-weight: 900; font-size: 1.4rem; }







/* --- VIDEO FACADE (PORTADA DE VIDEO) --- */
.video-facade {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* El botón de Play superpuesto */
.play-icon-overlay {
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.play-icon-overlay i {
    color: white;
    font-size: 2rem;
    margin-left: 5px; /* Ajuste óptico */
}

/* Efecto al pasar el mouse */
.video-facade:hover .play-icon-overlay {
    background-color: var(--color-naranja); /* Se pone naranja */
    border-color: var(--color-naranja);
    transform: scale(1.1);
}


/* BORRAR DESPUES DE NAVIDAD 2025 */
/* ============================================= */
/* 🎄 NAVIDAD WOW: MUÉRDAGO Y ORNAMENTOS 🎄      */
/* ============================================= */

/* 1. LA TARJETA BASE */
.christmas-wow {
    position: relative;
    background: #fff;
    border-radius: 16px;
    /* Borde sutil gris por defecto */
    border: 2px solid #f0f0f0; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
    z-index: 1;
}

/* 2. EFECTO HOVER: MARCO DE BASTÓN DE CARAMELO */
.christmas-wow:hover {
    transform: translateY(-8px); /* Se eleva */
    box-shadow: 0 20px 40px rgba(220, 53, 69, 0.25) !important; /* Resplandor rojo */
    /* Truco para borde de caramelo */
    border-color: transparent;
    background-image: linear-gradient(#fff, #fff), 
                      repeating-linear-gradient(45deg, #dc3545, #dc3545 10px, #ffffff 10px, #ffffff 20px);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-width: 4px; /* El borde se engrosa */
}

/* 3. MUÉRDAGO / GUIRNALDA (ESQUINA IZQUIERDA) */
.deco-muerdago {
    position: absolute;
    top: -25px; /* Que sobresalga hacia arriba */
    left: -20px; /* Que sobresalga a la izquierda */
    width: 100px;
    height: 100px;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3)); /* Sombra realista 3D */
    transition: transform 0.3s ease;
}
/* Animación suave al pasar el mouse */
.christmas-wow:hover .deco-muerdago {
    transform: rotate(-5deg) scale(1.1);
}

/* 4. BOLA DE NAVIDAD (OFERTA COLGANTE) */
.deco-hanging-ball {
    position: absolute;
    top: -10px; /* Inicio del hilo */
    right: 20px;
    width: 60px;
    height: 80px; /* Alto incluyendo hilo */
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: swing 3s infinite ease-in-out; /* Movimiento de péndulo suave */
}

/* El Hilo */
.deco-hanging-ball::before {
    content: '';
    width: 2px;
    height: 20px; /* Largo del hilo */
    background-color: #b20a2c; /* Hilo rojo */
}

/* La Bola (Contenedor de la imagen y texto) */
.ball-body {
    width: 55px;
    height: 55px;
    background-image: url('../images/decor/bola_roja.png'); /* TU IMAGEN AQUÍ */
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 0.8rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    padding-top: 10px; /* Ajuste para centrar texto en la bola */
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
}

/* Animación de Péndulo */
@keyframes swing {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

/* 5. NIEVE EN EL PIE (Footer Frost) */
.christmas-wow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to top, rgba(220, 53, 69, 0.05), transparent);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    pointer-events: none;
    z-index: 0;
}