/* ============================================================
   Lumina Dental — custom.css
   Tema turquesa clínico: claro, luminoso y prolijo.
   Apoyado en las variables del sistema:
     --color-primario  = #0D9488 (turquesa)
     --color-secundario = #134E4A (petrol oscuro)
   ============================================================ */

:root {
    --lumina-teal: #0D9488;
    --lumina-teal-light: #5EEAD4;
    --lumina-petrol: #134E4A;
    --lumina-bg-soft: #F4FAF9;
    --lumina-border: #D8EAE7;
    --lumina-text: #1E2B2A;
    --lumina-muted: #6B8280;
    --lumina-grad: linear-gradient(100deg, #0D9488 0%, #2DD4BF 100%);
    --lumina-grad-soft: linear-gradient(100deg, rgba(13,148,136,.12) 0%, rgba(45,212,191,.12) 100%);
}

/* ---------- Tipografía ---------- */
body {
    background-color: #ffffff;
    color: var(--lumina-text);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.navbar-nav .nav-link,
.titulo-seccion, .section-title {
    font-family: "Poppins", "Manrope", sans-serif;
    letter-spacing: 0;
}

h1, h2, .display-1, .display-2, .display-3 {
    font-weight: 600;
}

/* ---------- Barra superior ---------- */
#divBarraSuperior {
    background: var(--lumina-teal) !important;
}
#divBarraSuperior .container {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}
#divBarraSuperior .p-seguinos,
#divBarraSuperior .follow-link {
    color: #ffffff;
}
#divBarraSuperior a:hover,
#divBarraSuperior a:hover i,
#divBarraSuperior a:hover p,
#divBarraSuperior .follow-link:hover {
    color: var(--lumina-petrol) !important;
}

/* ---------- Navbar ---------- */
.navbar.navbar-bg-color-secundario,
#mobileMenu {
    background: #ffffff !important;
}
.navbar-brand img {
    width: 170px;
    margin: 14px 0;
}
.navbar-dark .navbar-nav .nav-link {
    color: var(--color-primario);
    position: relative;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.dropdown:hover > .nav-link {
    color: var(--lumina-petrol) !important;
}
/* hamburguesa (mobile): style.css la pinta blanca en navbar-dark */
.navbar.navbar-dark .hamburger {
    color: var(--color-primario);
}
.navbar.navbar-dark .hamburger:hover {
    color: var(--lumina-petrol);
}
.badge-cart, .badge-login {
    line-height: 0px;
}

.navbar-dark .navbar-nav .nav-link, .dropdown-item {
    font-size: 16px;
}

.logo-menu-mobile {
    width: 160px;
}

@media (max-width: 991.98px) {
    #mobileMenu .mobile-menu-panel {
        background: #ffffff;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.swiper-hero-con-barra, .swiper-hero-con-barra .swiper-slide {
    height: calc(100vw / 2.55);
}

/* ---------- Botones ---------- */
.btn-primary,
.btn-buy,
.boton-agregar-carrito,
.btn-comprar {
    background: var(--lumina-grad) !important;
    border: none !important;
    color: #fff !important;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: 10px;
    box-shadow: 0 6px 20px -8px rgba(13, 148, 136, .55);
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-primary:hover,
.btn-buy:hover,
.boton-agregar-carrito:hover,
.btn-comprar:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 26px -6px rgba(13, 148, 136, .5);
    transform: translateY(-1px);
}
.btn-primary {
    border: 2px solid #33d0bd !important;
    background: linear-gradient(to left, var(--color-secundario) 18%, #33d0bd 69%) !important;
    padding: 6px 12px !important;
}
.btn-outline-primary {
    border: 1px solid var(--color-primario) !important;
    color: var(--color-primario) !important;
    border-radius: 10px;
}
.btn-outline-primary:hover {
    background: var(--lumina-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ---------- Links ---------- */
a { color: var(--color-primario); }
a:hover { color: var(--lumina-petrol); }

/* ---------- Tarjetas de producto ---------- */
.card,
.producto-card,
.card-producto,
.item-producto {
    border-radius: 14px;
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover,
.producto-card:hover,
.card-producto:hover,
.item-producto:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 148, 136, .55);
    box-shadow: 0 14px 36px -16px rgba(19, 78, 74, .35);
}
.producto-card img,
.card-producto img {
    background: #fff;
    border-radius: 10px;
}

/* badges de oferta / nuevo */
.badge-oferta, .badge-nuevo, .etiqueta-producto, .producto-etiqueta {
    background: var(--lumina-grad) !important;
    color: #fff !important;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    letter-spacing: .02em;
}

/* precio */
.precio, .producto-precio, .precio-producto {
    color: var(--lumina-teal);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}
.precio-anterior, .precio-tachado {
    color: var(--lumina-muted);
}

/* ---------- Footer / pie de página ---------- */
footer,
.pie-pagina,
.footer {
    background: var(--lumina-petrol) !important;
    color: #BFE0DB;
}
footer a, .pie-pagina a { color: #BFE0DB; }
footer a:hover, .pie-pagina a:hover { color: var(--lumina-teal-light); }

/* ---------- Botones flotantes ---------- */
.boton-whatsapp, .boton-scroll-top {
    box-shadow: 0 6px 18px -4px rgba(19, 78, 74, .45) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lumina-bg-soft); }
::-webkit-scrollbar-thumb {
    background: var(--lumina-teal);
    border-radius: 8px;
}

/* ---------- Selección de texto ---------- */
::selection { background: rgba(13, 148, 136, .3); color: var(--lumina-text); }

/* ---------- Newsletter ---------- */
#divBloqueNewsletter .card {
    background-image: var(--lumina-grad) !important;
}

.footer-logo {
    width: 200px;
}

/* ============================================================
   Contraste en paneles oscuros (carrito + autocomplete de búsqueda)
   Patrón tomado de 3dproductos (mismos componentes, fondo secundario oscuro).
   ============================================================ */

/* ---- Modal/offcanvas del carrito ---- */
#carritoMenu .text-white,
#carritoMenu p {
    color: #ffffff !important;
}
#carritoMenu h1, #carritoMenu h2, #carritoMenu h3,
#carritoMenu .link-light,
#carritoMenu .variante-light {
    color: #ffffff !important;
}
#carritoMenu i, #favoritosMenu i {
    color: #ffffff;
}
#carritoMenu .amount, #carritoMenu ins {
    color: var(--lumina-teal-light) !important;
}
#carritoMenu del, #carritoMenu del span {
    color: #9DBBB7 !important;
}
.number-picker-cart .input-group input {
    color: #ffffff !important;
}

/* ---- Autocomplete del buscador (div-buscar-header / divSugerenciasBuscar) ---- */
.div-buscar-header .link-dark {
    color: #ffffff !important;
}
.div-buscar-header .text-muted,
#divSugerenciasBuscar .text-muted {
    color: #9DBBB7 !important;
}
/* pickers de variante (texto) — no seleccionadas */
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]) {
    border-color: #ffffff;
    background-color: var(--color-secundario);
    color: #ffffff;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover {
    border-color: var(--lumina-teal-light) !important;
    color: var(--lumina-teal-light) !important;
}
/* picker de variante seleccionada */
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
    border-color: var(--color-primario) !important;
    background-color: var(--color-primario) !important;
    color: #ffffff !important;
}
.div-buscar-header .picker label[for*=radVariante] > span {
    color: #ffffff;
    padding: .3rem;
}
.div-buscar-header .picker label[for*=radVariante] > input:checked ~ span {
    background-color: var(--color-primario);
    color: #ffffff;
}

.img-logo-nosotros, .img-logo-contacto {
    width: 250px;
}