/* ============================================================
   estilos.css - Estilos Generales INDESmed
   Mobile-First con media queries
   Unificado de estilos.css + mobile.css
   Solo estilos COMUNES (usados en 3+ tipos de páginas)
   ============================================================ */

/* ===== 1. DESIGN TOKENS (Variables CSS) ===== */
:root {
    /* Colores Principal */
    --color-primary: #02478c;
    --color-primary-light: #0e92c6;
    --color-primary-dark: #023a73;
    
    /* Colores Secundarios */
    --color-accent: #f77f00;
    
    /* Colores de Texto */
    --color-text: #423d3d;
    --color-text-secondary: #736861;
    --color-text-muted: #808080;
    
    /* Colores de Fondo */
    --color-bg: #ffffff;
    --color-bg-light: #dfe1e3;
    
    /* Colores de Borde */
    --color-border: #dfe1e3;
    --color-border-dark: #ccccc5;
    
    /* Tipografía */
    --font-family-primary: 'Ubuntu', 'Verdana', system-ui, sans-serif;
    --font-family-vintlys: 'Vintlys', sans-serif;
    
    /* Tamaños de fuente - Mobile */
    --font-size-base: 14pt;
    --font-size-h1: 18pt;
    --font-size-h2: 16pt;
    --font-size-h3: 15pt;
    --font-size-h4: 16pt;
    --font-size-h5: 12pt;
    --font-size-h6: 9pt;
    --font-size-p: 14pt;
    
    /* Tamaños de fuente - Desktop (se aplicarán en media query) */
    --font-size-base-desktop: 12pt;
    --font-size-h1-desktop: 16pt;
    --font-size-h2-desktop: 13pt;
    --font-size-h3-desktop: 13pt;
    --font-size-h4-desktop: 16pt;
    --font-size-h5-desktop: 11pt;
    --font-size-h6-desktop: 9pt;
    --font-size-p-desktop: 12pt;
    
    /* Espaciado */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    
    /* Breakpoints */
    --breakpoint-mobile: 840px;
    --breakpoint-desktop: 841px;
}

/* ===== 2. FUENTES (@font-face) ===== */
/* Definiciones de fuentes personalizadas - integrado desde fonts.css */

/* Fuente Vintlys - Decorativa usada en títulos y elementos especiales */
@font-face {
    font-family: 'Vintlys';
    src: url('https://www.indesmed.com/fonts/vintlys_hand-webfont.eot');
    src: url('https://www.indesmed.com/fonts/vintlys_hand-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.indesmed.com/fonts/vintlys_hand-webfont.woff') format('woff'),
         url('https://www.indesmed.com/fonts/vintlys_hand-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra fallback mientras carga - mejora performance */
}

/* Fuente Ubuntu - Principal del sitio, usada en body y elementos de texto */
@font-face {
    font-family: 'Ubuntu';
    src: url('https://www.indesmed.com/fonts/Ubuntu.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Muestra fallback mientras carga - mejora performance */
}

/* ===== 3. RESET/NORMALIZE ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===== 4. BASE (Estilos HTML base - Mobile First) ===== */

/* Body - Mobile First */
body {
    height: auto;
    width: 100%;
    overflow-x: hidden;
    padding: 0px;
    margin: 0px;
    background-color: var(--color-bg);
    text-align: center;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

/* Headings - Mobile First */
h1 {
    font-family: var(--font-family-primary);
    margin: 5px;
    font-weight: normal;
    font-size: var(--font-size-h1);
}

h2 {
    font-family: var(--font-family-primary);
    margin: 5px;
    font-weight: normal;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
}

h3 {
    font-family: var(--font-family-primary);
    font-weight: normal;
    margin: 5px;
    font-size: var(--font-size-h3);
}

h4 {
    font-family: var(--font-family-primary);
    font-weight: normal;
    margin: 2px;
    font-size: var(--font-size-h4);
}

h5 {
    font-family: var(--font-family-primary);
    margin: 5px;
    font-weight: normal;
    font-size: var(--font-size-h5);
    text-transform: uppercase;
}

h6 {
    font-family: var(--font-family-primary);
    margin: 0px;
    font-weight: normal;
    font-size: var(--font-size-h6);
}

/* Párrafos - Mobile First */
p {
    font-family: var(--font-family-primary);
    margin: 5px;
    font-weight: normal;
    font-size: var(--font-size-p);
    text-align: justify;
    color: var(--color-text);
}

/* Enlaces - Mobile First */
a.two:link {
    color: black;
    height: auto;
    text-decoration: none;
    font-weight: normal;
}

a.two:visited {
    color: black;
    text-decoration: none;
    font-weight: normal;
}

a.two:hover {
    text-decoration: none;
    font-weight: bolder;
    color: orange;
}

a.gris_negro:link {
    text-decoration: none;
    color: var(--color-text-secondary);
}

a.gris_negro:visited {
    text-decoration: none;
    color: var(--color-text-secondary);
}

a.gris_negro:hover {
    text-decoration: none;
    color: var(--color-primary);
    text-decoration: overline;
}

a.gris_blanco:link {
    text-decoration: none;
    color: #d4d4d4;
}

a.gris_blanco:visited {
    text-decoration: none;
    color: #d4d4d4;
}

a.gris_blanco:hover {
    text-decoration: none;
    color: orange;
}

a.gris_gris:link {
    text-decoration: none;
    color: grey;
}

a.gris_gris:visited {
    text-decoration: none;
    color: grey;
}

a.gris_gris:hover {
    text-decoration: none;
    color: var(--color-primary-dark);
}

a.one:link {
    text-decoration: none;
    color: orange;
}

a.one:visited {
    text-decoration: none;
    color: orange;
}

a.one:hover {
    text-decoration: none;
    color: white;
}

a.menu:link,
a.menu:visited,
a.menu:hover {
    text-decoration: none;
}

a.review:link {
    text-decoration: none;
    color: orange;
}

a.review:visited {
    text-decoration: none;
    color: orange;
}

a.review:hover {
    text-decoration: none;
    color: grey;
}

a.submenu:link {
    text-decoration: none;
    font-weight: normal;
    color: grey;
}

a.submenu:visited {
    text-decoration: none;
    font-weight: normal;
    color: var(--color-text);
}

a.submenu:hover {
    text-decoration: none;
    font-weight: bolder;
    color: black;
}

/* HR - Mobile First */
hr {
    display: none;
}

/* Strong - Mobile First */
strong {
    font-weight: bolder;
}

/* ===== 4. LAYOUT (Mobile First) ===== */

/* Contenedor Principal - Mobile First */
#todo {
    color: var(--color-text);
    background-color: transparent;
    display: inline-block;
    position: relative;
    top: 0px;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

#todo.size_fit {
    height: auto;
    width: 100% !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: clip;
}

/* Header - Mobile First */
#arriba {
    background-color: var(--color-bg);
    position: relative;
    display: inline-block;
    top: 0px;
    height: auto;
    width: 100%;
    margin: 0px;
    padding: 0px;
    color: white;
    border-bottom: 1px solid var(--color-border);
}

#arriba_home {
    position: relative;
    top: 0px;
    height: auto;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    background: transparent;
    display: inline-block;
    border-bottom: 1px solid var(--color-border);
}

/* Menú Navegación - Mobile First */
#menus_div {
    top: 0px;
    border-bottom: 0px solid var(--color-border-dark);
    border-top: 0px solid var(--color-border-dark);
    display: inline-block;
}

#menus-bloque1 {
    top: 0px;
    padding-top: 0px;
    margin-left: 0;
    margin-right: 0;
}

#menus-bloque2 {
    margin-left: 0;
    top: 0px;
    height: auto;
    width: 100%;
    border-bottom: 0px solid var(--color-border-dark);
}

.menu-item-bloque0 {
    padding-left: 10px;
    float: left;
    top: 0px;
    height: 40px;
    margin: 5px;
}

.menu-item-bloque1 {
    left: 0px;
    height: auto;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0px;
}

.menu-item.con_solapa {
    border-bottom: 4px solid #a2a2a2;
}

.menu-item-bloque2 {
    position: relative;
    left: 0px;
    top: 0px;
    height: auto;
    width: 100%;
    text-align: center;
    margin: 0px;
    padding: 5px 0px;
    margin-bottom: 5px;
}

.menuDesktop {
    display: none;
}

/* Breadcrumbs - Mobile First */
#breadcrumbs {
    position: absolute;
    left: 0px;
    top: 110px;
    height: 20px;
    width: 100%;
    text-align: left;
    display: none;
}

#breadcrumbs ol {
    position: absolute;
    left: 0px;
    top: 110px;
    height: 20px;
    width: 100%;
    text-align: left;
    list-style-type: none;
    margin: 0;
    padding: 5px;
}

#breadcrumbs ol li {
    float: left;
}

/* Footer - Mobile First */
#pie {
    display: block;
    background-color: var(--color-bg-light);
    position: relative;
    top: 0px;
    height: auto;
    width: 100%;
    max-width: 100%;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    clear: both;
}

#pie-centro {
    height: 100px;
    width: 100%;
    margin: 10px 0px 0px 0px;
}

#logo_div_pie {
    width: 100%;
}

.pie-copyright {
    color: white;
    font-size: small;
}

.pie-columna {
    width: 100%;
    margin: 0;
    padding: 5% 0% 5% 0%;
}

.pie-columna-titulo {
    color: var(--color-text-secondary);
}

.pie-menu {
    top: 0px;
    height: 20px;
    width: 100%;
    text-align: center;
}

.pie-menu-texto {
    color: #928566;
    font-size: smaller;
}

.pie-menu-texto:hover {
    color: var(--color-primary);
}

.pie-logo {
    display: flex;
    float: left;
    width: 100%;
    margin: 0% 0 4% 0;
}

/* ===== 5. HEADER/NAVEGACIÓN (Mobile First) ===== */

/* Logo - Mobile First */
#contenedor_logo_div {
    position: relative;
    display: inline-block;
    left: 0px;
    top: 0px;
    width: 320px;
    height: 100px;
    padding-bottom: 20px;
}

#posicion_logo {
    position: absolute;
    left: 0px;
    top: 0px;
}

#logo_div {
    position: relative;
    float: left;
    top: -25px;
    width: auto;
    height: 40px;
    background: transparent;
    margin: 15px;
}

#texto_logo {
    position: relative;
    left: 10px;
    top: 60px;
    color: white;
    font-family: "VERDANA";
    margin: 5px;
    font-weight: normal;
}

/* Idioma y Moneda - Mobile First */
#idioma_div {
    position: relative;
    float: left;
    top: -3px;
    height: 40px;
    width: auto;
    background-color: transparent;
    margin: 10px;
}

#idioma_bandera_div {
    position: relative;
    float: left;
    top: 0px;
    height: 40px;
    width: auto;
    background-color: transparent;
    display: none;
}

#currency_div {
    position: relative;
    float: left;
    top: -3px;
    height: 40px;
    width: auto;
    margin: 10px;
}

#currency_text_div {
    display: none;
}

/* Teléfono Pedidos - Mobile First */
#pedidos_tlf_div {
    position: relative;
    float: left;
    top: 0px;
    width: auto;
    height: 40px;
    display: none;
}

#pedidos_tlf_div_mobile {
    position: relative;
    float: right;
    top: 0px;
    width: auto;
    height: 50px;
    display: block;
}

/* Cesta - Mobile First */
#basket_button_div {
    position: relative;
    float: left;
    top: 0px;
    height: 40px;
    width: auto;
    background-color: transparent;
    margin: 5px;
}

/* Mi Cuenta - Mobile First */
#miCuenta_div {
    position: relative;
    padding-right: 15px;
    width: 100%;
    height: 45px;
    display: inline-block;
    padding-top: 5px;
    padding-right: 0px;
    margin-bottom: 1%;
    background-color: var(--color-bg-light);
    font-weight: 100;
    float: left;
}

#text_loggedAs_div {
    position: absolute;
    left: 600px;
    top: 75px;
    color: green;
}

/* Menú Móvil - Mobile First */
#abreMenu {
    position: relative;
    float: left;
    top: 0px;
    height: 40px;
    width: auto;
    text-align: center;
    display: block;
    margin: 10px;
}

#menu0 {
    position: relative;
    left: 0px;
    top: 150px;
    height: auto;
    width: 200px;
    text-align: left;
    padding: 2px;
    display: none;
}

#pos_solapa {
    position: absolute;
    left: 310px;
    top: 73px;
    visibility: hidden;
}

#linea_bajomenu {
    position: absolute;
    left: 0px;
    top: 55px;
    width: 310px;
    height: 1px;
    background-color: var(--color-border-dark);
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    display: none;
}

#linea_banners {
    position: absolute;
    left: 10px;
    top: 395px;
    width: 300px;
    height: 1px;
    background-color: var(--color-border-dark);
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    display: none;
}

/* Enlaces Profesionales - Mobile First */
a.profesionales {
    text-decoration: none;
    color: var(--color-accent);
}

a.profesionales:hover {
    text-decoration: none;
    color: var(--color-primary-light);
}

a.profesionales h5 {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}

a.gris_negro h5 {
    margin: 10px 5px 5px 5px;
    font-size: 10pt;
}

/* Cambio Menú Scroll - Mobile First */
.cambioMenuScroll {
    background-color: white;
    position: fixed;
    z-index: 100;
    top: -1px;
}

.cambioMenuScroll-2 {
    /* Estilos adicionales si se necesitan */
}

/* ===== 6. COMPONENTES REUTILIZABLES (Mobile First) ===== */

/* Banner Promoción - Mobile First */
.banner {
    width: 80%;
    height: auto;
    margin-top: -70px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
    background-image: url(/images/bannerNavidad.jpg);
    border-style: solid;
}

.enlaceBanner {
    text-decoration: none;
}

.tituloBanner {
    text-align: center;
    line-height: 1;
    font-weight: 700;
    font-size: x-large;
    color: #000;
    word-spacing: 7px;
    letter-spacing: 2px;
    margin: 15px;
    letter-spacing: 0;
}

.textoBanner {
    font-family: ubuntu;
    font-size: small;
    color: #000;
    word-spacing: 7px;
    text-align: center;
    margin: 0;
}

.centradoTextoCabecera {
    position: relative;
    margin: 0px;
    padding: 5%;
    background-color: var(--color-bg-light);
    width: 100%;
}

.desc-oferta {
    color: #ffffff;
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 1.1;
    word-spacing: 1;
    margin-top: 5px;
    margin-left: 30px;
    margin-right: 30px;
    height: 40px;
    text-align: center;
}

h2.aclaracion-oferta {
    color: #ffffff;
    text-align: center;
    margin-top: 70px;
}

.seguimos_operativos {
    width: 100%;
    left: 0;
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: auto;
    position: relative;
    display: flex;
    float: left;
    background: var(--color-bg-light) url(images/info-01.png) center no-repeat;
    background-position: 15px 50%;
    text-align: right;
    padding: 8px 20px 8px 45px;
    border-top: 2px solid var(--color-primary-light);
    border-bottom: 2px solid var(--color-primary-light);
    color: #000000;
    height: auto;
}

.infoDescuento {
    width: 100%;
    left: 0;
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: auto;
    position: relative;
    display: flex;
    float: left;
    background: #fdbe7c url(images/discount-01.png) center no-repeat;
    background-position: 15px 50%;
    text-align: right;
    padding: 8px 20px 8px 45px;
    border-top: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    color: #000000;
    height: auto;
    margin-left: 200px;
}

.descuentoCategoria {
    background: #fdbe7c url(images/discount-01.png) center no-repeat;
    background-position: 15px 50%;
    padding: 8px 20px 8px 45px;
    border-top: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    width: auto;
    height: auto;
    left: 80px;
}

.boton3 {
    color: var(--color-bg-light);
    font-size: 20px;
    padding: 0.5em 1.2em;
    background: #fff;
    position: relative;
    margin-left: 370px;
    top: 20px;
}

.boton3:hover {
    background: #fff;
    color: #928566;
    font-weight: 500;
}

/* Utilities - Mobile First */
.oculto {
    display: none;
}

.visible {
    display: inline-block;
}

.negritaSEO {
    font-weight: 100;
}

/* Spans de Colores - Mobile First */
span.rojo {
    color: red;
}

span.naranja {
    color: orange;
}

span.azul {
    color: var(--color-primary);
}

span.morado {
    color: #800080;
}

span.verde {
    color: #33cc33;
}

/* ===== 7. IMÁGENES (Mobile First) ===== */

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

img.center:hover {
    border-color: grey;
}

img.center2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    width: 100%;
}

img.left {
    display: block;
    float: none;
    margin: 0 auto;
    height: 275px;
}

img.right {
    margin-right: 20px;
    margin-left: 20px;
}

img.p_left {
    float: left;
    margin-left: 5px;
    margin-right: 20px;
}

img.p_right {
    float: right;
    margin-right: 5px;
    margin-left: 20px;
}

img.icon {
    float: right;
    margin-left: 5px;
    margin-right: 45px;
    width: 35px;
    height: 25px;
    margin-right: 0px;
}

img.iconFreeShipping {
    width: 27%;
    float: left;
    margin-left: 25%;
}

img.selloMedico {
    height: auto;
    width: 50px;
}

img.selloPat {
    height: 70px;
    width: auto;
}

img.selloNew {
    float: left;
    margin-left: 0px;
    margin-right: 50px;
    margin-bottom: 20px;
    margin-top: 20px;
    width: auto;
}

img.teleOperadora {
    width: 13%;
    margin-left: 13%;
    margin-right: 0%;
}

img.bordergrey {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-border-dark);
    width: 100%;
}

img.bordergrey:hover {
    border-color: black;
}

img.banderas {
    border-style: none;
}

img.banderas:hover {
    padding-left: 10px;
    padding-right: 10px;
}

img.logo {
    display: block;
    max-width: 100%;
    margin: 5px;
    height: 55px;
    margin: 0%;
    padding-left: 30%;
}

img.logo_mobile {
    display: none;
}

img.mapa {
    width: 100%;
    display: block;
    margin: auto;
    padding: 2em;
}

.sello {
    display: block;
    width: 40%;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
}

/* ===== 8. VIDEOS (Mobile First) ===== */

video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

iframe.video {
    width: 100%;
    height: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid white;
}

.div_videoFichas {
    display: block;
    max-width: 980px;
    margin: 0 auto;
    top: 150px;
}

.div_videoCategorias {
    --sicon: "\f28b";
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

.div_videoCategorias:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font: 5em "Font Awesome 6 Free";
    font-weight: 900;
    content: var(--sicon);
    opacity: 0;
    color: #fffd;
}

.div_videoCategorias.play {
    --sicon: "\f144";
}

.div_videoCategorias.playpause:before {
    animation: video-show-playstate 0.3s ease;
}

.div_videoCategorias > .videoCategorias {
    object-fit: cover;
    max-width: 980px !important;
    margin: 0;
}

@keyframes video-show-playstate {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* ===== 9. TIPOGRAFÍA BASE (Mobile First) ===== */

h1.Blue {
    color: var(--color-primary);
}

h1.Small {
    font-size: 14pt;
}

h2.Blue {
    margin: -30px 40px 10px 40px;
    font-size: 13pt;
    line-height: 1.5;
    font-weight: 600;
    font-family: var(--font-family-primary);
    color: var(--color-primary);
    text-align: center;
    text-transform: uppercase;
}

h2.Vintlys {
    font-family: var(--font-family-vintlys);
    font-weight: normal;
    margin: 5px;
    color: var(--color-primary);
    text-align: center;
    font-size: 22pt;
}

h2.menus {
    text-transform: uppercase;
    font-family: var(--font-family-primary);
    margin: 5px;
    font-size: 12pt;
    font-weight: normal;
}

h2.menus:hover {
    color: var(--color-accent);
    text-decoration: overline;
}

h2.encabezados {
    font-family: 'Ubuntu';
    font-size: 12pt;
    color: var(--color-primary);
    font-weight: normal;
}

h2.siguiente {
    font-family: var(--font-family-primary);
    font-weight: normal;
    margin: 5px;
    color: grey;
    font-size: 16pt;
}

h2.Menu {
    font-family: 'Verdana', 'VERDANA';
    font-weight: normal;
    margin: 5px;
    color: var(--color-primary);
    font-size: 12pt;
    text-align: left;
}

h3.Blue {
    color: var(--color-primary);
}

h3.Vintlys {
    font-family: var(--font-family-vintlys);
    font-weight: normal;
    font-size: 15pt;
}

h3.VintlysWhite {
    font-family: var(--font-family-vintlys);
    font-weight: normal;
    font-size: 15pt;
    color: white;
}

h3.pedidosTlf {
    font-family: var(--font-family-primary);
    font-weight: normal;
    margin: 5px;
    color: var(--color-primary);
    font-size: 12pt;
    text-align: center;
}

h3.abremenu {
    font-size: 30pt;
    color: black;
    margin: 0px 10px 0px 10px;
}

h4.Vintlys {
    font-family: var(--font-family-vintlys);
    font-weight: normal;
    margin: 5px;
    color: var(--color-primary);
    text-align: center;
    font-size: 16pt;
}

h5.Blue {
    color: var(--color-primary);
}

h5.green {
    color: green;
}

h5.grey {
    color: grey;
    font-size: 10pt;
}

h5.menus {
    font-size: 12pt;
    color: grey;
}

h5.precio {
    font-size: 12pt;
}

h5.PuntoVenta {
    display: none;
}

table tbody tr td h5 {
    font-size: 10pt;
}

h6.submenu {
    font-size: 9pt;
}

.precioTachado {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.precioPromo {
    color: #84216b;
    font-weight: 600;
}

p.text2 {
    width: 75%;
    text-align: center;
    margin: 0 10%;
    letter-spacing: 1px;
    color: #908090;
    font-family: var(--font-family-vintlys);
    line-height: 30px;
    font-size: larger;
}

p.home {
    margin: 5px 20px 0px 0px;
}

p.textoFreeShipping {
    width: 30%;
    float: right;
    margin-right: 15%;
    font-size: 9pt;
    color: var(--color-text-muted);
    text-align: left;
}

/* Breadcrumb Component - Mobile First */
.breadcrumb,
.breadcrumb * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.breadcrumb {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 8px 5px;
    gap: 8px;
    font-family: "Ubuntu", sans-serif;
    border-bottom: 1px solid #0003;
    align-items: center;
    overflow-x: auto;
    margin-bottom: 10px;
}

.breadcrumb > .breadcrumb-item {
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
}

.breadcrumb > .breadcrumb-item + .breadcrumb-item:before {
    color: var(--dark);
    content: "\003e";
}

.breadcrumb > .breadcrumb-item > .breadcrumb-link {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}

.breadcrumb > .breadcrumb-item:last-child > .breadcrumb-link {
    color: #fffd;
    padding: 2px 5px;
    background-color: #01447e;
    border-radius: 3px;
}

/* ===== 10. MEDIA QUERIES (Desktop - min-width: 841px) ===== */
@media (min-width: 841px) {
    
    /* Base - Desktop Overrides */
    body {
        background-color: var(--color-bg);
        text-align: center;
        font-size: var(--font-size-base-desktop);
    }
    
    /* Headings - Desktop Overrides */
    h1 {
        font-family: var(--font-family-primary);
        margin: 5px;
        font-weight: normal;
        font-size: var(--font-size-h1-desktop);
    }
    
    h2 {
        font-family: var(--font-family-primary);
        margin: 5px;
        font-weight: normal;
        font-size: var(--font-size-h2-desktop);
    }
    
    h3 {
        font-family: var(--font-family-primary);
        font-weight: normal;
        margin: 5px;
    }
    
    h4 {
        font-family: var(--font-family-primary);
        font-weight: normal;
        margin: 2px;
    }
    
    h5 {
        font-family: var(--font-family-primary);
        margin: 5px;
        font-weight: normal;
        font-size: var(--font-size-h5-desktop);
    }
    
    h6 {
        font-family: var(--font-family-primary);
        margin: 5px;
        font-weight: normal;
    }
    
    p {
        font-family: var(--font-family-primary);
        margin: 5px;
        font-weight: normal;
        font-size: var(--font-size-p-desktop);
        text-align: justify;
        color: var(--color-text);
    }
    
    /* Layout - Desktop Overrides */
    #arriba {
        background-color: var(--color-bg);
        position: relative;
        display: inline-block;
        top: 0px;
        height: auto;
        width: 100%;
        margin: 0px;
        padding: 0px;
        color: white;
        border-bottom: none; /* Desktop: sin border-bottom */
    }
    
    #arriba_home {
        background: var(--color-bg);
    }
    
    #menus_div {
        float: right;
        height: auto;
        width: 100%;
    }
    
    #menus-bloque1 {
        position: relative;
        text-align: center;
        top: 28px;
        width: 100%;
        height: auto;
        margin-right: auto;
    }
    
    #menus-bloque2 {
        position: relative;
        float: left;
        top: -70px;
        padding-top: 10px;
        width: 40%;
        height: 35px;
        margin-left: 60%;
    }
    
    .menu-item-bloque0 {
        position: relative;
        float: right;
        top: -6px;
        height: 50px;
        width: auto;
        background-color: transparent;
        padding-left: 10px;
    }
    
    .menu-item-bloque1 {
        float: inherit;
        position: relative;
        display: inline-block;
        top: 0px;
        width: auto;
        height: 32px;
        font-family: var(--font-family-primary);
        background: var(--color-bg);
        margin: 5px;
        padding: 5px 0px 5px 0px;
    }
    
    .menu-item-bloque2 {
        float: left;
        position: relative;
        top: 0px;
        width: auto;
        height: 32px;
        display: block;
        margin-right: 5px;
    }
    
    .menuDesktop {
        display: block;
    }
    
    /* Breadcrumbs - Desktop Overrides */
    #breadcrumbs {
        position: relative;
        display: block;
        height: 40px;
        width: 94%;
        margin-left: 6%;
    }
    
    #breadcrumbs ol {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 20px;
        width: 600px;
        text-align: left;
    }
    
    /* Header/Navegación - Desktop Overrides */
    #contenedor_logo_div {
        display: inline-block;
        position: relative;
        top: 0px;
        padding-top: 10px;
        width: 80%;
        height: 60px;
    }
    
    #logo_div {
        position: relative;
        float: left;
        width: 200px;
        height: 50px;
    }
    
    #posicion_logo {
        position: absolute;
        left: 10px;
        top: 10px;
    }
    
    #texto_logo {
        position: relative;
        left: 10px;
        top: 60px;
        color: white;
        font-family: "VERDANA";
        margin: 5px;
        font-weight: normal;
    }
    
    #pedidos_tlf_div {
        position: relative;
        float: right;
        top: 0px;
        width: auto;
        height: 50px;
        display: block;
    }
    
    #pedidos_tlf_div_mobile {
        position: relative;
        float: right;
        top: 0px;
        width: auto;
        height: 50px;
        display: none;
    }
    
    #basket_button_div {
        position: relative;
        float: right;
        top: -2px;
        height: 50px;
        width: auto;
        background-color: transparent;
        padding-left: 10px;
    }
    
    #idioma_div {
        position: relative;
        float: right;
        top: 0px;
        height: auto;
        width: auto;
        background-color: transparent;
        padding-left: 10px;
    }
    
    #idioma_bandera_div {
        position: relative;
        float: right;
        top: 5px;
        height: auto;
        width: auto;
        background-color: transparent;
        padding-left: 10px;
    }
    
    #currency_div {
        position: relative;
        float: right;
        top: 0px;
        color: grey;
        width: auto;
        padding-left: 10px;
    }
    
    #currency_text_div {
        display: none;
        position: relative;
        float: left;
        top: 0px;
        width: auto;
    }
    
    #miCuenta_div {
        display: inline-block;
        padding-top: 5px;
        padding-right: 0px;
        margin-bottom: 1%;
        width: 100%;
        height: 25px;
        background-color: var(--color-bg-light);
        font-weight: 100;
        position: relative;
        float: left;
    }
    
    #text_loggedAs_div {
        position: absolute;
        left: 600px;
        top: 75px;
        color: green;
    }
    
    #abreMenu {
        position: absolute;
        right: 0px;
        top: 0px;
        height: auto;
        width: 100px;
        text-align: right;
        padding: 2px;
        display: none;
    }
    
    #menu0 {
        position: relative;
        left: 0px;
        top: 150px;
        height: auto;
        width: 200px;
        text-align: left;
        padding: 2px;
        display: none;
    }
    
    #pos_solapa {
        position: absolute;
        left: 310px;
        top: 73px;
    }
    
    #linea_banners {
        position: absolute;
        left: 10px;
        top: 395px;
        width: 955px;
        height: 1px;
        background-color: var(--color-border-dark);
        font-size: 0;
        line-height: 0;
        overflow: hidden;
    }
    
    #linea_bajomenu {
        /* Desktop: puede tener diferentes estilos */
    }
    
    a.profesionales h5 {
        margin: 7px 5px 5px 55px;
        font-size: 11pt;
        font-weight: 600;
    }
    
    a.gris_negro h5 {
        margin: 10px 5px 5px 5px;
        font-size: 10pt;
    }
    
    /* Footer - Desktop Overrides */
    #pie-centro {
        background-color: var(--color-bg-light);
        position: relative;
        top: 0px;
        height: 120px;
        width: 75%;
        margin: auto;
        margin-left: 25%;
        text-align: center;
    }
    
    .pie-logo {
        display: flex;
        float: left;
        width: 100%;
        margin: 0% 0 4% 0;
    }
    
    #logo_div_pie {
        width: 18%;
    }
    
    .pie-menu {
        position: relative;
        float: left;
        height: auto;
        text-align: center;
        top: -1%;
    }
    
    .pie-columna {
        float: left;
        width: 20%;
        margin: 1%;
        padding: 3% 0% 3% 0%;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
    
    .pie-columna-titulo {
        font-weight: 600;
        color: #33302f;
        font-size: smaller;
        text-transform: uppercase;
    }
    
    /* Componentes - Desktop Overrides */
    .banner {
        width: 95%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 35px;
        padding-bottom: 10px;
        background-image: url(/images/bannerNavidad.jpg);
        border-style: solid;
    }
    
    .tituloBanner {
        text-align: center;
        line-height: 1;
        font-weight: 700;
        font-size: x-large;
        color: #000;
        word-spacing: 7px;
        letter-spacing: 2px;
        margin: 15px;
    }
    
    .textoBanner {
        font-family: ubuntu;
        font-size: small;
        color: #000;
        word-spacing: 7px;
        text-align: center;
        margin: 0;
    }
    
    .desc-oferta {
        color: #ffffff;
        font-size: 30px;
        line-height: 30px;
        letter-spacing: 1.1;
        margin-top: 5px;
        margin-left: 30px;
        margin-right: 30px;
        height: 40px;
        text-align: center;
    }
    
    h2.aclaracion-oferta {
        color: #ffffff;
        text-align: center;
        margin-top: 100px;
    }
    
    .seguimos_operativos {
        position: relative;
        display: flex;
        float: left;
        background: var(--color-bg-light) url(images/info-01.png) center no-repeat;
        background-position: 15px 50%;
        text-align: right;
        padding: 8px 20px 8px 45px;
        border-top: 2px solid var(--color-primary-light);
        border-bottom: 2px solid var(--color-primary-light);
        color: #000000;
        width: auto;
        height: auto;
        left: 80px;
        margin-bottom: 25px;
    }
    
    .infoDescuento {
        position: relative;
        display: flex;
        float: left;
        background: #fdbe7c url(images/discount-01.png) center no-repeat;
        background-position: 15px 50%;
        text-align: right;
        padding: 8px 20px 8px 45px;
        border-top: 2px solid var(--color-accent);
        border-bottom: 2px solid var(--color-accent);
        color: #000000;
        width: auto;
        height: auto;
        left: 80px;
        margin-bottom: 25px;
        margin-left: 200px;
    }
    
    /* Imágenes - Desktop Overrides */
    img.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    
    img.center2 {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
    
    img.left {
        float: left;
        padding-right: 40px;
        height: 400px;
        width: auto;
    }
    
    div#bloque1.visible img.left {
        float: left;
        margin-left: 0px;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-top: 0px;
        height: 60px;
        width: auto;
    }
    
    img.right {
        float: right;
        margin-left: 50px;
        margin-right: 0px;
        margin-bottom: 20px;
        margin-top: 20px;
        height: 400px;
        width: auto;
    }
    
    img.icon {
        float: right;
        margin-left: 5px;
        margin-right: 45px;
        width: 35px;
        height: 25px;
    }
    
    img.iconFreeShipping {
        width: 27%;
        float: left;
        margin-left: 25%;
    }
    
    img.teleOperadora {
        width: 10%;
        float: left;
        margin-left: 25%;
        margin-right: 2%;
    }
    
    img.bordergrey {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid var(--color-border-dark);
    }
    
    img.logo {
        height: 55px;
        margin: 0%;
        padding-left: 30%;
    }
    
    img.logo_mobile {
        display: none;
    }
    
    img.mapa {
        width: 75%;
        display: block;
        margin-left: 5em;
        padding: 4em;
    }
    
    /* Videos - Desktop Overrides */
    iframe.video {
        width: 560px;
        height: 300px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid white;
    }
    
    video {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
    /* Tipografía - Desktop Overrides */
    h2.Blue {
        font-family: var(--font-family-primary);
        font-weight: normal;
        margin: 0 20px 0 20px;
        color: var(--color-primary);
        font-size: 12pt;
        text-align: center;
        text-transform: uppercase;
    }
    
    h2.Vintlys {
        font-family: var(--font-family-vintlys);
        font-weight: normal;
        margin: 5px;
        color: var(--color-primary);
        text-align: center;
        font-size: 13pt;
    }
    
    h2.menus {
        text-transform: uppercase;
        font-family: var(--font-family-primary);
        margin: 5px;
        font-size: 12pt;
        font-weight: normal;
    }
    
    h2.encabezados {
        font-family: 'Ubuntu';
        font-size: 12pt;
        color: var(--color-primary);
        font-weight: normal;
    }
    
    h2.siguiente {
        font-family: var(--font-family-primary);
        font-weight: normal;
        margin: 5px;
        color: grey;
        font-size: 16pt;
    }
    
    h3.Vintlys {
        font-family: var(--font-family-vintlys);
        font-weight: normal;
        font-size: 15pt;
    }
    
    h3.pedidosTlf {
        font-family: var(--font-family-primary);
        font-weight: normal;
        margin: 5px;
        color: var(--color-primary);
        font-size: 10pt;
        text-align: center;
    }
    
    h4.Vintlys {
        font-family: var(--font-family-vintlys);
        font-weight: normal;
        margin: 5px;
        color: var(--color-primary);
        text-align: center;
        font-size: 16pt;
    }
    
    h5.menus {
        font-size: 12pt;
        color: grey;
    }
    
    h5.precio {
        font-size: 12pt;
    }
    
    p.text2 {
        width: 75%;
        text-align: center;
        margin: 0 10%;
        letter-spacing: 1px;
        color: #908090;
    }
    
    p.textoFreeShipping {
        width: 30%;
        float: right;
        margin-right: 15%;
        font-size: 9pt;
        color: var(--color-text-muted);
        text-align: left;
    }
    
    hr {
        height: 1px;
        margin-left: 0%;
        margin-right: 50%;
        background-color: #024793;
    }
}