:root {
    --section-padding-y: 3rem;
    --section-padding-x: 0;

    /** Colors */
    // Marca
    --color-primary: #1A144B;                /* Marca base / header */
    --color-primary-rgb: 26, 20, 75;
    --color-primary-darker: #000000;         /* Hover fuerte, foco */
    --color-primary-medium: #000000;         /* Versión equilibrada para UI (botones/enlaces) */
    --color-primary-light: #3b6bb8;          /* Hover/acento */
    --color-primary-lighter: #9b9b9b;        /* Fondos suaves / resaltados */

    // Destacados
    --color-secondary: #000000;             /* Acento cálido / CTA secundarios */
    --color-secondary-darker: #dfa01e;       /* Hover cálido */
    --color-tertiary: #ef7563;               

    // Neutros
    --color-body: #ffffff;                   /* Fondo principal */
    --color-featured: #efefef;               /* Fondo alterno / secciones */
    --color-surface: #ffffff;                /* Tarjetas, modales */
    --color-border: #f0f0f0;                 /* Bordes suaves / divisores */
    --color-border-hover: #e4e6eb;

    // Texto
    --color-text: #333;                   /* Texto principal */
    --color-text-medium: #696969;            /* Secundario / subtítulos */
    --color-text-light: #666666;             /* Placeholder / meta info */
    --color-text-title: var(--color-primary);

    // Elementos UI
    --color-btn: var(--color-primary-medium);                    /* Botones primarios */
    --color-btn-hover: #00235d;              /* Hover botón */
    --color-scrollbar: #cdcdcd;            /* Scroll */          

    // Estado
    --color-success: #2e8b57;
    --color-warning: #ffb458;
    --color-error: #d9534f;

    // Transparecias
    --color-primary-transparent: color-mix(in srgb, var(--color-primary) 95%, transparent);
    --color-secondary-transparent: color-mix(in srgb, var(--color-secondary) 95%, transparent);
    --color-header-sticky-transparent: color-mix(in srgb, #fff 95%, transparent);

    // Headers 
    // Fallbacks de variables ANTIGUAS (obsoletas)
    --color-header-top-1: #f8f8f8;
    --color-header-top-3: var(--color-primary-medium);
    --color-header-middle-2: var(--color-primary-medium);
    --color-header-nav-1: var(--color-primary-medium);
    --color-header-nav-2: #fff;
    --color-header-nav-3: #fff;

    --color-header-top: #f1f1f1;
    --color-header-middle: #fff;
    --color-text-header-nav: #fff;
    --color-input-search: #f1f1f1;    

    /** Fonts */
    --font-primary: 'Nunito Sans', sans-serif;
    --font-heading: "Ubuntu", sans-serif;
    --font-size-html: 16px;
    --font-weight-body: 400;
    --line-height-body: 1.5;
    --font-size-heading: 2.441rem;
    --font-weight-heading: 700;
    --type-scale: 1.25; // Escala Major Third;

    /** Radius/Shadows */
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
    --card-shadow: 0px 0px 38.5663px rgba(172, 163, 163, 0.15);
    --card-shadow-hover: 0 10px 30px -10px rgba(0,0,0,0.20);

    /** Cards */
    --num-product-list: var(--num-product-list-base);

    // Otros
    --color-swiper-button-bg: #fff;
    --color-swiper-button: var(--color-primary);
    --bs-backdrop-opacity: 1;

    /** Mapping to Bootstrap 5.3 (CSS vars) */    
    --bs-body-bg: var(--color-body);
    --bs-body-color: var(--color-text);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-border-color-translucent: var(--color-primary);
    --bs-secondary: var(--color-secondary);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--color-primary) 80%, black);
    --bs-border-color: #e5e7eb;
    --bs-border-radius: var(--radius-md);
    --bs-btn-border-radius: var(--radius-md);
    --bs-font-sans-serif: var(--font-primary);
    --bs-body-font-family: var(--font-primary);
    --bs-heading-color: var(--color-text);
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
    --bs-focus-ring: 0 0 0 0.25rem var(--bs-focus-ring-color);

    /* Visible global focus status */
    --focus-ring: 2px solid var(--color-primary);
}

:root[data-theme="dark"] {
    --section-padding-y: 3rem;
    --section-padding-x: 0;

    /** Colors */
    // Marca
    --color-primary: #1A144B;                /* Marca base / header */
    --color-primary-rgb: 0, 35, 93;
    --color-primary-darker: #000000;         /* Hover fuerte, foco */
    --color-primary-medium: #000000;         /* Versión equilibrada para UI (botones/enlaces) */
    --color-primary-light: #3b6bb8;          /* Hover/acento */
    --color-primary-lighter: #9b9b9b;        /* Fondos suaves / resaltados */

    // Destacados
    --color-secondary: #000000;             /* Acento cálido / CTA secundarios */
    --color-secondary-darker: #dfa01e;       /* Hover cálido */
    --color-tertiary: #ef7563;               

    // Neutros
    --color-body: #ffffff;                   /* Fondo principal */
    --color-featured: #efefef;               /* Fondo alterno / secciones */
    --color-surface: #ffffff;                /* Tarjetas, modales */
    --color-border: #f0f0f0;                 /* Bordes suaves / divisores */
    --color-border-hover: #e4e6eb;

    // Texto
    --color-text: #333;                   /* Texto principal */
    --color-text-medium: #696969;            /* Secundario / subtítulos */
    --color-text-light: #666666;             /* Placeholder / meta info */
    --color-text-title: var(--color-primary);

    // Elementos UI
    --color-btn: var(--color-primary-medium);                    /* Botones primarios */
    --color-btn-hover: #00235d;              /* Hover botón */
    --color-scrollbar: #cdcdcd;            /* Scroll */          

    // Estado
    --color-success: #2e8b57;
    --color-warning: #ffb458;
    --color-error: #d9534f;

    // Transparecias
    --color-primary-transparent: color-mix(in srgb, var(--color-primary) 95%, transparent);
    --color-secondary-transparent: color-mix(in srgb, var(--color-secondary) 95%, transparent);
    --color-header-sticky-transparent: color-mix(in srgb, #fff 95%, transparent);

    // Headers 
    // Fallbacks de variables ANTIGUAS (obsoletas)
    --color-header-top-1: #f8f8f8;
    --color-header-top-3: var(--color-primary-medium);
    --color-header-middle-2: var(--color-primary-medium);
    --color-header-nav-1: var(--color-primary-medium);
    --color-header-nav-2: #fff;
    --color-header-nav-3: #fff;

    --color-header-top: #f1f1f1;
    --color-header-middle: #fff;
    --color-text-header-nav: #fff;
    --color-input-search: #f1f1f1;    

    /** Fonts */
    --font-primary: 'Nunito Sans', sans-serif;
    --font-heading: "Ubuntu", sans-serif;
    --font-size-html: 16px;
    --font-weight-body: 400;
    --line-height-body: 1.5;
    --font-size-heading: 2.441rem;
    --font-weight-heading: 700;
    --type-scale: 1.25; // Escala Major Third;

    /** Radius/Shadows */
    --radius-sm: .25rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
    --card-shadow: 0px 0px 38.5663px rgba(172, 163, 163, 0.15);
    --card-shadow-hover: 0 10px 30px -10px rgba(0,0,0,0.20);

    /** Cards */
    --num-product-list: var(--num-product-list-base);

    // Otros
    --color-swiper-button-bg: #fff;
    --color-swiper-button: var(--color-primary);
    --bs-backdrop-opacity: 1;

    /** Mapping to Bootstrap 5.3 (CSS vars) */    
    --bs-body-bg: var(--color-body);
    --bs-body-color: var(--color-text);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-border-color-translucent: var(--color-primary);
    --bs-secondary: var(--color-secondary);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--color-primary) 80%, black);
    --bs-border-color: #e5e7eb;
    --bs-border-radius: var(--radius-md);
    --bs-btn-border-radius: var(--radius-md);
    --bs-font-sans-serif: var(--font-primary);
    --bs-body-font-family: var(--font-primary);
    --bs-heading-color: var(--color-text);
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
    --bs-focus-ring: 0 0 0 0.25rem var(--bs-focus-ring-color);

    /* Visible global focus status */
    --focus-ring: 2px solid var(--color-primary);
}

footer .footer-bottom .footer-info .social-networks li .icon {
    color: #ffffff;
}
header.header-1 .header-middle {
    padding: 0;
}
footer .footer-bottom .footer-menu li a {
    color: #b9b9b9;
}
footer .footer-bottom .footer-menu li a:hover {
    color: #ffffff;
}
footer .footer-bottom .footer-menu .icon {
    color: var(--color-primary-light);
}
.contact-page:before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85));
}
.contact-page .contact-info ul li .icon,
header.sticky .header-middle #header-actions .header-action-item .icon,
header.sticky .header-middle #header-actions .header-action-item>a div span {
    color: #fff;
}
#logotipo a { display: flex; align-items: center; }
#logotipo img { display: block; max-height: 60px; width: auto; }
#logotipo .logo-default { display: block; }
#logotipo .logo-sticky { display: none; }
header.sticky #logotipo .logo-default { display: none; }
header.sticky #logotipo .logo-sticky { display: block; }
@media (max-width: 991.98px) {
    #logotipo .logo-default { display: none; }
    #logotipo .logo-sticky { display: block; }
    header.header-1 .header-middle {
        background-color: var(--color-header-nav);
    }
    header .header-middle #header-actions .header-action-item .icon {
        color: #fff;
    }
}
header.header-1.sticky .header-middle #search #search-form .input-search {
    border-right: 0px;
}
.section-cards .card .card-img img {
    height: 225px;
}
.page-noticias .section-cards .card .card-img img {
    height: 160px;
}
header .header-middle #header-actions .header-action-item>a:hover, 
header .header-middle #header-actions .header-action-item>a.show, 
header .header-middle #header-actions .header-action-item.navbar-toggler:hover, 
header .header-middle #header-actions .header-action-item.navbar-toggler.show {
    background-color: #f1f1f1;
}
header.sticky .header-middle #header-actions .header-action-item>a:hover, 
header.sticky .header-middle #header-actions .header-action-item>a.show, 
header.sticky .header-middle #header-actions .header-action-item.navbar-toggler:hover, 
header.sticky .header-middle #header-actions .header-action-item.navbar-toggler.show {
    background-color: #181818;
}
.lsp-hero-eyebrow,
.lsp-hero-addr iconify-icon,
footer .footer-bottom .footer-menu-title {
    color: #fff;
}
.lsp-hero-eyebrow::before {
    background: #fff;
}
.contact-page .contact-info-value a:hover {
    color: #bebebe;
}
.contact-info-row:last-child .contact-info-value a {
    font-size: 0.8rem;
}