/*******************************/
/********* General CSS *********/
/*******************************/
body {
    color: #777777;
    font-weight: 500;
    background: #ffffff;
    font-family: 'Quicksand', sans-serif;
}

/* Fondo naranja muy claro, casi blanco (portada, productos de una marca…) */
body.fondo-naranja-claro,
body.fondo-naranja-claro #loader {
    background: #fff8f1;
}

h1,
h2, 
h3, 
h4,
h5, 
h6 {
    color: #4a4c70;
}

a {
    color: #4a4c70;
    transition: .3s;
}

a:hover,
a:active,
a:focus {
    color: #ff7300;
    outline: none;
    text-decoration: none;
}

.btn.btn-custom {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 12px 20px;
    text-align: center;
   font-size: 16px;
    font-weight: 500;
    color: #777777;
    border-radius: 10px;
    border: 2px solid #ff7300;
    box-shadow: 0 0 0 rgba(11, 29, 141, 0);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, background-color .28s ease,
                color .28s ease, border-color .28s ease, filter .28s ease;
}

/* Brillo que recorre el botón al pasar el ratón */
.btn.btn-custom::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 55%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: left .65s cubic-bezier(.2, .7, .3, 1);
    pointer-events: none;
    z-index: 1;
}

/* Al pasar el ratón: se eleva con una sombra suave y lo cruza el brillo. Los botones con color propio
   (azul marino, verde WhatsApp…) lo conservan; los de solo contorno se rellenan de naranja. */
.btn.btn-custom:hover {
    color: #ffffff;
    background-color: #ff7300;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(11, 29, 141, .2);
    filter: brightness(1.07);
}

.btn.btn-custom:hover::after {
    left: 130%;
}

/* Campos de formulario con aspecto de botón (cantidad, desplegables de color): sin efecto de botón */
input.btn.btn-custom:hover, select.btn.btn-custom:hover, textarea.btn.btn-custom:hover {
    color: inherit;
    background-color: transparent;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* Al pulsar: se «hunde» */
.btn.btn-custom:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 4px 10px rgba(11, 29, 141, .18);
    transition-duration: .08s;
}

/* Con teclado: anillo de foco visible */
.btn.btn-custom:focus-visible {
    outline: 3px solid rgba(255, 115, 0, .5);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .btn.btn-custom, .btn.btn-custom::after { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
    .btn.btn-custom:hover, .btn.btn-custom:active { transform: none; }
    .btn.btn-custom::after { display: none; }
}

.btn:focus,
.form-control:focus {
    box-shadow: none;
}

.container-fluid {
    max-width: 1366px;
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-size: inherit;
    margin-left: 0;
}


/**********************************/
/****** Loader & Back to Top ******/
/**********************************/
#loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s ease-out, visibility 0s linear .3s;
    -o-transition: opacity .3s ease-out, visibility 0s linear .3s;
    transition: opacity .3s ease-out, visibility 0s linear .3s;
    z-index: 999;
}

#loader.show {
    -webkit-transition: opacity .6s ease-out, visibility 0s linear 0s;
    -o-transition: opacity .6s ease-out, visibility 0s linear 0s;
    transition: opacity .6s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

#loader .loader {
    position: relative;
    width: 45px;
    height: 45px;
    border: 5px solid #dddddd;
    border-top: 5px solid #ff7300;
    border-radius: 50%;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.back-to-top {
    position: fixed;
    display: none;
    background: #ff7300;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 22px;
    right: 15px;
    bottom: 15px;
    transition: background 0.5s;
    z-index: 9;
}

.back-to-top i {
    color: #4a4c70;
    padding-top: 10px;
}

.back-to-top:hover {
    background: #4a4c70;
}

.back-to-top:hover i {
    color: #ff7300;
}


/**********************************/
/********** Top Bar CSS ***********/
/**********************************/
.top-bar {
    position: absolute;
    height: 46px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    background: #0b1d8d;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.top-bar .top-bar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.top-bar .top-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.top-bar .text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 46px;
    padding: 0 14px;
    text-align: center;
}

.top-bar .text:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.top-bar .text i {
    font-size: 14px;
    color: #ff7300;
    margin-right: 6px;
}

.top-bar .text p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
    margin: 0;
}

.top-bar .text p a {
    color: #ffffff;
}

.top-bar .text p a:hover {
    color: #ff7300;
}

/* Botón claro / oscuro */
.top-bar .theme-toggle-cell {
    padding: 0 10px;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .06);
    transition: background .25s ease, border-color .25s ease, transform .3s ease;
}

.theme-toggle-btn:hover {
    background: #ff7300;
    border-color: #ff7300;
    transform: rotate(25deg);
}

.top-bar .theme-toggle-cell .theme-toggle-btn i {
    font-size: 13px;
    margin-right: 0;
    color: #ffffff !important;
}

.top-bar .social {
    display: flex;
    height: 46px;
    align-items: center;
    font-size: 0;
    justify-content: flex-end;
    gap: 8px;
}

.top-bar .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    transition: all .25s ease;
}

.top-bar .social a:hover {
    color: #ffffff;
    background: #ff7300;
    border-color: #ff7300;
    transform: translateY(-2px);
}

@media (min-width: 992px) {
    .top-bar {
        padding: 0 60px;
    }
}


/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.navbar {
    position: relative;
    transition: .35s ease;
    z-index: 999;
}

.navbar .container-fluid {
    background: #ffffff;
}

.navbar.nav-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 8px 24px rgba(11, 29, 141, .12);
    transition: .35s ease;
}

.navbar .navbar-brand {
    margin: 0;
    display: flex;
    align-items: center;
}

.navbar-brand-logo {
    max-width: 100%;
    max-height: 40px;
}

.navbar-brand-logo-dark {
    display: none;
}

.navbar-nav .nav-item {
    position: relative;
}

.navbar .nav-link,
.navbar .nav-link:focus {
    padding: 10px 16px 8px 16px !important;
    color: #1b1d3a;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;
    position: relative;
}

.navbar .nav-link::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 3px;
    height: 2px;
    background: #ff7300;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #ff7300 !important;
    transition: color .2s ease;
}

.navbar .nav-link:hover::before,
.navbar .nav-link.active::before {
    transform: scaleX(1);
}

.navbar .dropdown-toggle::after {
    margin-left: 5px;
    vertical-align: 2px;
    transition: transform .25s ease;
}

.navbar .dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
}

.navbar .dropdown-menu {
    margin-top: 0;
    border: 0;
    border-radius: 10px;
    padding: 8px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(11, 29, 141, .16);
    opacity: 0;
    display: block;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.navbar .dropdown-item {
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #4a4c70;
    transition: background .2s ease, color .2s ease;
}

.navbar .dropdown-item.marca-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar .dropdown-item.marca-item .marca-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
}

.navbar .dropdown-item.categoria-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar .dropdown-item.categoria-item .categoria-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 4px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: #fff2e6;
    color: #ff7300;
}

.navbar .dropdown-menu hr {
    margin: 6px 4px;
    border-color: rgba(11, 29, 141, .1);
}

/* Franja con el título de la página: a todo el ancho, justo debajo del menú y con su mismo alto
   (77 px en escritorio, 50 px en tablet, 44 px en móvil) */
.franja-titulo {
    display: flex;
    align-items: center;
    min-height: 77px;
    background: #ff7300;
    color: #ffffff;
    text-align: center;
}
/* La franja se queda fija al hacer scroll, pegada bajo el menú (--ks-nav-alto lo mide js/main.js) */
.franja-titulo { position: sticky; top: var(--ks-nav-alto, 44px); z-index: 8; transition: box-shadow .25s ease; }
.franja-titulo.franja-pegada { box-shadow: 0 8px 20px rgba(11, 29, 141, .18); }
/* Alto del menú fijo por si js/main.js aún no lo ha medido (o el navegador tiene una copia antigua): así la franja nunca queda tapada */
@media (min-width: 576px) { .franja-titulo { top: var(--ks-nav-alto, 50px); } }
@media (min-width: 992px) { .franja-titulo { top: var(--ks-nav-alto, 66px); } }
/* En escritorio, al quedar fija se estrecha (77 → 46 px); js/main.js compensa la diferencia con margin-bottom
   para que el contenido no dé un salto */
@media (min-width: 992px) {
    .franja-titulo.franja-pegada { min-height: 46px; }
    .franja-titulo.franja-pegada .container { padding-top: 4px; padding-bottom: 4px; gap: 10px; }
    .franja-titulo.franja-pegada h1 { font-size: 19px; }
    .franja-titulo.franja-pegada .franja-titulo-icono { width: 34px; height: 34px; border-radius: 7px; }
}
.franja-titulo .container { padding-top: 6px; padding-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.franja-titulo-icono { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; }
.franja-titulo-logo { object-fit: contain; background: #ffffff; }   /* logotipos de marca: sobre blanco y sin recortar */
/* Categoría principal dentro del título de una subcategoría: «Maquinaria / Plate Loaded - Superior» */
.franja-titulo-enlace { color: #202020 !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(32, 32, 32, .5); transition: text-decoration-color .2s ease; }
.franja-titulo-enlace:hover, .franja-titulo-enlace:focus { color: #202020 !important; text-decoration-color: #202020; }
.franja-titulo-sep { opacity: .7; font-weight: 400; margin: 0 .15em; }
/* Número de artículos junto al título: «Pilates (25)» */
.franja-titulo-total { font-weight: 400; opacity: .85; white-space: nowrap; }
/* Texto buscado en el título del buscador: «Buscador: vitality», el texto buscado en blanco */
.franja-titulo-busqueda { color: #ffffff; overflow-wrap: anywhere; }   /* el título es oscuro (#202020): el texto buscado, en blanco, para que siga distinguiéndose */
.franja-titulo h1 {
    margin: 0;
    color: #202020 !important;   /* gris casi negro sobre el naranja (más contraste que el blanco); también en modo oscuro, que fuerza el color de los títulos */
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .5px;
}
/* Bloque de cabecera antiguo bajo la franja (título y buscador ya no van ahí): sin saltos ni huecos vacíos */
.section-header.cabecera-compacta { margin: 0 auto; padding: 0 15px; }
.section-header.cabecera-compacta br { display: none; }
.section-header.cabecera-compacta h3:empty { display: none; }
.section-header.cabecera-compacta .sidebar-widget { margin: 0; }
.section-header.cabecera-compacta .sidebar-widget > a:first-child { display: block; margin-bottom: 10px; }   /* «Productos», en su propia línea */
.section-header.cabecera-compacta .sidebar-widget:not(:empty) { padding: 16px 0 0; }
.section-header.cabecera-compacta .cabecera-migas { padding-top: 16px; font-size: 14px; text-align: center; max-width: none; width: 100%; flex: none; margin: 0 auto; }
/* «← Todas las marcas» y, a su derecha, el selector de categorías de la marca */
.section-header.cabecera-compacta .cabecera-migas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
/* Con dos desplegables (categorías y series), el enlace de vuelta va en su propia línea y los dos quedan juntos debajo */
.cabecera-migas .migas-fila-propia { flex-basis: 100%; }
.filtro-categoria { margin: 0; }
.filtro-categoria select {
    min-width: 280px;
    max-width: 100%;
    padding: 10px 42px 10px 16px;
    border: 1px solid #ff7300;
    border-radius: 10px;
    /* Flecha blanca propia (la del navegador no se puede colorear) */
    -webkit-appearance: none;
    appearance: none;
    background: #ff7300 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.filtro-categoria select:hover { background-color: #e86800; border-color: #e86800; }
.filtro-categoria select:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 115, 0, .3); }
/* Desplegables en azul marino: el de series de una marca (para distinguirlo del de categorías) y el de subcategorías */
.filtro-categoria.filtro-serie select,
.filtro-categoria.filtro-subcategoria select { background-color: #0b1d8d; border-color: #0b1d8d; }
.filtro-categoria.filtro-serie select:hover,
.filtro-categoria.filtro-subcategoria select:hover { background-color: #142bb8; border-color: #142bb8; }
.filtro-categoria.filtro-serie select:focus,
.filtro-categoria.filtro-subcategoria select:focus { box-shadow: 0 0 0 3px rgba(11, 29, 141, .3); }
[data-theme="dark"] .filtro-categoria.filtro-serie select,
[data-theme="dark"] .filtro-categoria.filtro-subcategoria select { border-color: rgba(255, 255, 255, .3); }
.filtro-categoria select option { background: #ffffff; color: #4a4c70; font-weight: 400; }   /* la lista desplegada, legible */
/* (El bloque conserva su ancho máximo de 700 px, centrado: buscador y botones no se estiran a toda la pantalla) */
.section-header.cabecera-compacta + .blog { padding-top: 30px; }
.franja-titulo + .blog { padding-top: 30px; }   /* las fichas empiezan justo bajo la franja */

/* Títulos largos (nombre de un producto): letra algo menor; si ocupa dos líneas, la franja crece */
.franja-titulo-larga h1 { font-size: 22px; }
@media (max-width: 991.98px) { .franja-titulo-larga h1 { font-size: 18px; } }
@media (max-width: 575.98px) { .franja-titulo-larga h1 { font-size: 16px; } }
.franja-titulo + .single { padding-top: 30px; }

/* En escritorio la cabecera flota (46 + 77 = 123 px) y el contenido se baja con 7 saltos de línea
   (168 px, #SpanID1 en clase.Principal.php): la franja sube esos 45 px para quedar pegada al menú */
@media (min-width: 992px) {
    .franja-titulo { margin-top: -45px; }
}
@media (max-width: 991.98px) {
    .franja-titulo { min-height: 50px; }
    .franja-titulo h1 { font-size: 20px; }
    .franja-titulo-icono { width: 38px; height: 38px; border-radius: 8px; }
}
@media (max-width: 575.98px) {
    .franja-titulo { min-height: 44px; }
    .franja-titulo h1 { font-size: 18px; }
    .franja-titulo-icono { width: 32px; height: 32px; border-radius: 7px; }
    .franja-titulo .container { gap: 10px; }
}

/* Fila de iconos de categorías bajo la franja del título (productos.php): filtran el listado */
.cat-iconos { padding: 22px 0 0; }
.cat-iconos .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; }
.cat-icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 88px;   /* 11 categorías en una fila en escritorio (contenedor de 1110 px) */
    color: #4a4c70;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
.cat-icono img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 14px;
    border: 3px solid transparent;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cat-icono:hover { color: #ff7300; text-decoration: none; }
.cat-icono:hover img { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(255, 115, 0, .28); }
.cat-icono.activa { color: #0b1d8d; font-weight: 700; }
.cat-icono.activa img { border-color: #0b1d8d; box-shadow: 0 6px 16px rgba(11, 29, 141, .22); }
.cat-iconos + .blog { padding-top: 30px; }

/* Selector de marcas (productos-marca.php, encima de CATEGORÍAS): mismos iconos, con el logotipo sobre blanco */
.selector-marcas { padding: 10px 0 30px; }
.selector-marcas .section-header { margin-bottom: 0; }
.selector-marcas .cat-iconos { padding-top: 10px; }
.marca-iconos .cat-icono img { object-fit: contain; background: #ffffff; border: 1px solid rgba(11, 29, 141, .15); }
/* Iconos grandes en dos filas (bloques MARCAS y CATEGORÍAS de productos-marca.php) */
.iconos-grandes .cat-icono { width: 124px; font-size: 14px; }
.iconos-grandes .cat-icono img { width: 96px; height: 96px; border-radius: 16px; }
/* En escritorio/tablet, dos filas equilibradas: el ancho se ajusta a «--por-fila» iconos (124 px + 10 px de hueco) */
@media (min-width: 768px) {
    .iconos-grandes .container { max-width: calc(var(--por-fila, 7) * 134px + 20px); }
}
@media (max-width: 575.98px) {
    .iconos-grandes .cat-icono { width: 80px; font-size: 12px; }
    .iconos-grandes .cat-icono img { width: 64px; height: 64px; border-radius: 12px; }
}
.selector-categorias { padding-bottom: 45px; }
.marca-iconos .cat-icono.activa img { border: 3px solid #0b1d8d; }
.marca-iconos .cat-icono:hover img { border-color: #ff7300; }
[data-theme="dark"] .marca-iconos .cat-icono.activa img { border-color: #ff7300; }
[data-theme="dark"] .cat-icono { color: #c7c9d6; }
[data-theme="dark"] .cat-icono.activa { color: #ffffff; }
[data-theme="dark"] .cat-icono.activa img { border-color: #ffffff; }
@media (max-width: 575.98px) {
    .cat-iconos { padding-top: 16px; }
    .cat-iconos .container { gap: 12px 4px; }
    .cat-icono { width: 76px; font-size: 12px; }
    .cat-icono img { width: 52px; height: 52px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cat-icono img { transition: none; } .cat-icono:hover img { transform: none; } }

/* Indicador «Buscando…» en el centro de la pantalla mientras carga la página de resultados */
.buscando-velo {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(2px);
    animation: buscando-aparecer .15s ease;
}
.buscando-velo[hidden] { display: none; }
.buscando-giro {
    width: 58px;
    height: 58px;
    border: 5px solid rgba(255, 115, 0, .22);
    border-top-color: #ff7300;
    border-radius: 50%;
    animation: buscando-girar .8s linear infinite;
}
.buscando-texto { color: #0b1d8d; font-size: 17px; font-weight: 700; letter-spacing: .3px; }
@keyframes buscando-girar { to { transform: rotate(360deg); } }
@keyframes buscando-aparecer { from { opacity: 0; } to { opacity: 1; } }
[data-theme="dark"] .buscando-velo { background: rgba(20, 21, 28, .78); }
[data-theme="dark"] .buscando-texto { color: #ffffff; }
@media (prefers-reduced-motion: reduce) { .buscando-giro { animation-duration: 2.4s; } }

/* Página «Categorías» (categorias-de-productos.php): rejilla de fichas al 80 % del ancho de la pantalla */
.categorias-pagina { width: 80%; margin: 0 auto; padding: 30px 0 60px; }
.categorias-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; align-items: stretch; }
.categoria-ficha.destacado-card { margin: 0; flex: none; }
.categoria-ficha-cabecera { display: flex; align-items: center; gap: 16px; padding: 18px 18px 12px; color: inherit; text-decoration: none; }
.categoria-ficha-cabecera:hover { text-decoration: none; }
.categoria-ficha-cabecera img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; flex: none; transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.categoria-ficha:hover .categoria-ficha-cabecera img { transform: scale(1.06); }
.categoria-ficha-cabecera h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; color: #0b1d8d; transition: color .25s ease; }
.categoria-ficha:hover .categoria-ficha-cabecera h2 { color: #ff7300 !important; }
.categoria-ficha-total { font-weight: 500; color: #6b6d8a; white-space: nowrap; }   /* nº de artículos, junto al nombre */
[data-theme="dark"] .categoria-ficha-total { color: #a9abc0; }
.categoria-ficha-subs { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 18px 10px; }
.categoria-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(11, 29, 141, .2); border-radius: 99px; background: #ffffff; color: #0b1d8d; font-size: 13.5px; line-height: 1.3; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
/* Icono de la subcategoría (azul marino) dentro del botón */
.categoria-chip img { flex: none; width: 30px; height: 30px; margin: -2px 2px -2px -8px; border-radius: 50%; object-fit: cover; }
.categoria-chip span { font-size: 11.5px; font-weight: 700; color: #6b6d8a; transition: color .2s ease; }
.categoria-chip:hover { background: #ff7300; border-color: #ff7300; color: #ffffff; text-decoration: none; }
.categoria-chip:hover span { color: #ffffff; }
.categoria-ficha .destacado-marca { margin-top: auto; padding: 8px 18px 16px; }
.categoria-ficha:hover .destacado-marca { color: #ff7300; }
[data-theme="dark"] .categoria-ficha-cabecera h2 { color: #eceefb; }
[data-theme="dark"] .categoria-chip { background: transparent; color: #c7c9d6; border-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .categoria-chip span { color: #a9abc0; }
@media (max-width: 991.98px) { .categorias-pagina { width: 88%; } }
@media (max-width: 575.98px) {
    .categorias-pagina { width: 92%; padding-top: 22px; }
    .categorias-rejilla { grid-template-columns: 1fr; gap: 16px; }
    .categoria-ficha-cabecera img { width: 64px; height: 64px; border-radius: 12px; }
    .categoria-ficha-cabecera h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .categoria-ficha-cabecera img { transition: none; } .categoria-ficha:hover .categoria-ficha-cabecera img { transform: none; } }

/* Caja destacada azul marino (quienes-somos.php): texto blanco y esquinas redondeadas */
.caja-azul {
    display: inline-block;
    max-width: 100%;
    padding: 20px 34px;
    border-radius: 12px;
    background: #0b1d8d;
    color: #ffffff;
    text-align: center;
    font-size: 17px;
    line-height: 1.5;
    box-shadow: 0 10px 24px rgba(11, 29, 141, .18);
}
.caja-azul p, .section-header .caja-azul p { margin: 0; color: #ffffff !important; font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; }   /* anula el estilo de «.section-header p» */
@media (max-width: 575.98px) { .caja-azul { padding: 16px 20px; font-size: 16px; } }
.caja-azul b { color: #ffffff; }

/* Contador de visitas en la ficha de producto */
.producto-visitas { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: #6b6d8a; }
.producto-visitas i { color: #ff7300; }
.producto-visitas b { color: #0b1d8d; }
[data-theme="dark"] .producto-visitas b { color: #eceefb; }

/* Lupa del menú: abre el buscador desplegable */
.navbar .buscador-btn {
    background: none;
    border: 0;
    cursor: pointer;
    line-height: inherit;
}
.navbar .buscador-btn:focus { outline: none; }
.navbar .buscador-btn:focus-visible { outline: 2px solid #ff7300; outline-offset: 2px; border-radius: 6px; }
.navbar .buscador-btn[aria-expanded="true"] { color: #ff7300 !important; }

/* Lupa de la barra en móvil/tablet: círculo como el botón de tema, a su izquierda */
.navbar .buscador-movil {
    margin-left: auto;
    margin-right: 6px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(11, 29, 141, .2);
    border-radius: 50%;
    color: #0b1d8d;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.navbar .buscador-movil:not(.d-none) { display: flex; }
.navbar .buscador-movil:hover,
.navbar .buscador-movil[aria-expanded="true"] { background: #ff7300; border-color: #ff7300; color: #ffffff !important; }
.navbar .buscador-movil + .theme-toggle-movil { margin-left: 0; }   /* el hueco flexible queda antes de la lupa */
[data-theme="dark"] .navbar .buscador-movil { color: #ffffff; border-color: rgba(255, 255, 255, .3); }
@media (min-width: 992px) { .navbar .buscador-movil { display: none !important; } }
/* La lupa destaca: círculo naranja relleno con el icono en blanco (escritorio y móvil); al pasar el ratón, azul marino y algo mayor */
.navbar .navbar-nav #abrir-buscador {
    align-self: center;
    width: 38px; height: 38px; padding: 0 !important; margin: 0 6px 0 10px;
    border-radius: 50%;
    background: #ff7300; color: #ffffff !important;
    font-size: 15px; line-height: 1;
    box-shadow: 0 4px 10px rgba(255, 115, 0, .35);
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.navbar .navbar-nav #abrir-buscador::before { display: none; }   /* sin el subrayado de las opciones del menú */
.navbar .navbar-nav #abrir-buscador:hover,
.navbar .navbar-nav #abrir-buscador[aria-expanded="true"] { background: #0b1d8d; color: #ffffff !important; transform: scale(1.1); box-shadow: 0 6px 14px rgba(11, 29, 141, .35); }
.navbar .buscador-movil { background: #ff7300; border-color: #ff7300; color: #ffffff !important; box-shadow: 0 3px 8px rgba(255, 115, 0, .35); }
.navbar .buscador-movil:hover,
.navbar .buscador-movil[aria-expanded="true"] { background: #0b1d8d; border-color: #0b1d8d; }
[data-theme="dark"] .navbar .buscador-movil { color: #ffffff; border-color: #ff7300; }
@media (prefers-reduced-motion: reduce) { .navbar .navbar-nav #abrir-buscador { transition: none; } .navbar .navbar-nav #abrir-buscador:hover { transform: none; } }

/* Carrito de la barra en móvil/tablet: mismo círculo que la lupa, con el número de artículos */
.navbar .carrito-movil {
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(11, 29, 141, .2);
    border-radius: 50%;
    color: #0b1d8d;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.navbar .carrito-movil:not(.d-none) { display: flex; }
.navbar .carrito-movil:hover { background: #ff7300; border-color: #ff7300; color: #ffffff; }
.navbar .carrito-movil-num {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 99px;
    background: #ff7300;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.navbar .carrito-movil-num:empty { display: none; }
[data-theme="dark"] .navbar .carrito-movil { color: #ffffff; border-color: rgba(255, 255, 255, .3); }
@media (min-width: 992px) { .navbar .carrito-movil { display: none !important; } }

/* Móvil/tablet: lupa · carrito · tema · hamburguesa, con 18 px entre ellos */
@media (max-width: 991.98px) {
    .navbar .container-fluid > .theme-toggle-movil { margin-left: 0; }   /* el hueco flexible queda solo antes de la lupa */
    .navbar .cart-btn.d-none { display: none !important; }               /* el carrito del menú solo en escritorio */
    .navbar .container-fluid > .buscador-movil,
    .navbar .container-fluid > .carrito-movil,
    .navbar .container-fluid > .theme-toggle-movil { margin-right: 18px; }
    .navbar .navbar-brand { flex: 0 1 auto; min-width: 0; }
    .navbar .navbar-toggler { flex: none; }
}

/* Móviles: logotipo y botones algo menores para que quepan los cuatro con ese aire */
@media (max-width: 575.98px) {
    .navbar .navbar-brand .navbar-brand-logo { max-height: 24px; }
    .navbar .container-fluid > .buscador-movil,
    .navbar .container-fluid > .carrito-movil,
    .navbar .container-fluid > .theme-toggle-movil { width: 32px; height: 32px; font-size: 13px; }
}

/* Móviles muy estrechos (menos de 360 px): todo sigue en una línea */
@media (max-width: 359.98px) {
    .navbar .navbar-brand .navbar-brand-logo { max-height: 20px; }
    .navbar .container-fluid > .buscador-movil,
    .navbar .container-fluid > .carrito-movil,
    .navbar .container-fluid > .theme-toggle-movil { margin-right: 10px; }
}

/* Franja del buscador: a todo el ancho, justo debajo de la barra del menú (también cuando la barra queda fija) */
.franja-buscador {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 998;
    background: #ffffff;
    border-top: 1px solid rgba(11, 29, 141, .08);
    box-shadow: 0 14px 28px rgba(11, 29, 141, .14);
    padding: 16px 0;
    animation: franja-buscador-abrir .22s ease;
}
.franja-buscador[hidden] { display: none; }
@keyframes franja-buscador-abrir { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.franja-buscador .container { position: relative; }
.franja-buscador .sidebar { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 44px 0 0; }
.franja-buscador .sidebar .sidebar-widget { margin: 0; }
.franja-buscador-cerrar {
    position: absolute;
    top: 0;
    right: 15px;
    width: 40px;
    height: 46px;
    border: 0;
    background: none;
    color: #4a4c70;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.franja-buscador-cerrar:hover { color: #ff7300; }
.franja-buscador-sugerencias { max-width: 760px; margin: 0 auto; max-height: min(60vh, 520px); overflow-y: auto; }
.franja-buscador-sugerencias:empty { display: none; }
.franja-buscador-sugerencias table { width: 100%; margin-top: 10px; }
.franja-buscador-sugerencias td:first-child { display: none; }   /* celda vacía de sangrado de la portada */
.franja-buscador-sugerencias td { padding: 3px 0; }
.franja-buscador-sugerencias a { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; color: #4a4c70; text-decoration: none; }
.franja-buscador-sugerencias a:hover { background: #fff2e6; color: #ff7300; }
.franja-buscador-sugerencias img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 6px; flex: none; }
.franja-buscador-sugerencias hr { display: none; }
[data-theme="dark"] .franja-buscador { background: #1a1b23; border-top-color: rgba(255, 255, 255, .1); box-shadow: 0 14px 28px rgba(0, 0, 0, .45); }
[data-theme="dark"] .franja-buscador-cerrar { color: #c7c9d6; }
[data-theme="dark"] .franja-buscador-sugerencias a { color: #c7c9d6; }
[data-theme="dark"] .franja-buscador-sugerencias a:hover { background: #262836; color: #ff7300; }
@media (prefers-reduced-motion: reduce) { .franja-buscador { animation: none; } }
/* Franja del buscador en naranja (también en modo oscuro): campo blanco, aspa blanca y sugerencias en una caja blanca */
.franja-buscador,
[data-theme="dark"] .franja-buscador { background: #ff7300; border-top-color: #ff7300; box-shadow: 0 14px 28px rgba(255, 115, 0, .28); }
.franja-buscador .search-widget input,
.franja-buscador .search-widget:hover input,
.franja-buscador .search-widget input:focus { background: #ffffff; border-color: #ffffff; color: #4a4c70; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.franja-buscador-cerrar,
[data-theme="dark"] .franja-buscador-cerrar { color: #ffffff; }
.franja-buscador-cerrar:hover { color: #0b1d8d; }
.franja-buscador-sugerencias { margin-top: 10px; padding: 0 10px; background: #ffffff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.franja-buscador-sugerencias table { margin: 6px 0; }
[data-theme="dark"] .franja-buscador-sugerencias { background: #1a1b23; }

/* Botón claro / oscuro en la barra del menú (solo móvil): a la derecha, pegado a la hamburguesa */
.navbar .theme-toggle-movil {
    margin-left: auto;
    margin-right: 6px;
    width: 38px;
    height: 38px;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(11, 29, 141, .2);
    background: transparent;
    color: #0b1d8d;
    font-size: 15px;
}
.navbar .theme-toggle-movil:hover { color: #fff; }
.navbar .theme-toggle-movil:focus { outline: none; }
.navbar .theme-toggle-movil:focus-visible { outline: 2px solid #ff7300; outline-offset: 2px; }
[data-theme="dark"] .navbar .theme-toggle-movil { color: #ffffff; border-color: rgba(255, 255, 255, .3); }

/* Botón hamburguesa (móvil) */
.navbar-toggler {
    border: 0;
    padding: 6px;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    background: #0b1d8d;
    transition: background .2s ease;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: #0b1d8d;
    transition: top .2s ease, transform .2s ease;
}

.navbar-toggler-icon::before {
    top: -7px;
}

.navbar-toggler-icon::after {
    top: 7px;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Botón de carrito */
.cart-btn {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 14px !important;
}

.cart-btn .fa-shopping-cart {
    font-size: 18px;
    color: #0b1d8d;
    transition: color .2s ease;
}

.cart-btn:hover .fa-shopping-cart {
    color: #ff7300;
}

#total_articulos:empty {
    display: none;
}

#total_articulos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #ff7300;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 992px) {
    .navbar {
        position: absolute;
        width: 100%;
        top: 46px;
        padding: 14px 60px;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(11, 29, 141, .08);
        z-index: 9;
    }

    .navbar.nav-sticky {
        padding: 8px 60px;
        background: #ffffff !important;
        border-bottom: none;
    }

    .page .navbar {
        background: #ffffff !important;
    }

    /* El logotipo nunca se encoge: si falta sitio, lo ceden los márgenes y el relleno del menú (ver abajo) */
    .navbar .navbar-brand { flex: none; min-height: 49px; }   /* 49 + 14 + 14 = 77 px de barra, aunque el logotipo sea menor */
    .navbar.nav-sticky .navbar-brand { min-height: 0; }
}

/* Escritorio mediano (portátiles pequeños, ventanas sin maximizar): antes el menú no cabía y el logotipo
   se quedaba minúsculo o desaparecía. Menos margen lateral y menos relleno entre opciones. */
@media (min-width: 1100px) and (max-width: 1299.98px) {
    .navbar, .navbar.nav-sticky { padding-left: 24px; padding-right: 24px; }
    .top-bar { padding: 0 24px; }
    .navbar .nav-link, .navbar .nav-link:focus { padding: 10px 10px 8px 10px !important; font-size: 14.5px; }
    .navbar .nav-link::before { left: 10px; right: 10px; }
    .navbar .cart-btn { padding: 8px 10px !important; }
    .navbar-brand-logo { max-height: 36px; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
    .navbar, .navbar.nav-sticky { padding-left: 16px; padding-right: 16px; }
    .top-bar { padding: 0 16px; }
    .navbar .nav-link, .navbar .nav-link:focus { padding: 10px 7px 8px 7px !important; font-size: 13.5px; letter-spacing: 0; }
    .navbar .nav-link::before { left: 7px; right: 7px; }
    .navbar .cart-btn { padding: 8px 7px !important; }
    .navbar-brand-logo { max-height: 30px; }
}

@media (max-width: 991.98px) {
    /* Barra más baja en móvil/tablet: de 74 px a unos 50 px (logo 32 px + 6 px arriba y abajo) */
    .navbar {
        padding: 6px 15px;
        background: #ffffff !important;
    }

    .navbar .navbar-brand {
        padding: 3px 0;
    }

    .navbar-brand-logo {
        max-height: 32px;
    }

    .navbar .theme-toggle-movil {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .navbar-collapse {
        margin-top: 10px;
        border-top: 1px solid rgba(11, 29, 141, .08);
    }

    .navbar .nav-link {
        padding: 12px 4px !important;
    }

    .navbar .nav-link::before {
        display: none;
    }

    .navbar .dropdown-menu {
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        background: #f8f9fb;
        margin: 4px 0 8px;
    }

    .navbar .dropdown-menu.show {
        display: block;
    }

    .cart-btn {
        padding: 12px 4px !important;
    }
}


/*******************************/
/********** Hero CSS ***********/
/*******************************/
.carousel {
    position: relative;
    width: 100%;
    min-height: 300px;
    background: #ffffff;
    margin-bottom: 45px;
}

.carousel .container-fluid {
    padding: 0;
}

.carousel .carousel-item {
    position: relative;
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.carousel .carousel-img {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    text-align: right;
    overflow: hidden;
}

.carousel .carousel-img::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1;
}

.carousel .carousel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel .carousel-text {
    position: absolute;
    max-width: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2;
}

.carousel .carousel-text h1 {
    text-align: center;
    color: #ffffff;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 20px;
}

.carousel .carousel-text p {
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    margin-bottom: 25px;
}

.carousel .carousel-btn .btn.btn-custom {
    color: #ffffff;
}

.carousel .carousel-btn .btn.btn-custom:hover {
    color: #20212B;
}

.carousel .carousel-btn .btn:first-child {
    margin-right: 15px;
}

.carousel .owl-nav {
    position: absolute;
    width: 100%;
    height: 60px;
    top: calc(50% - 30px);
    left: 0;
    display: flex;
    justify-content: space-between;
    z-index: 9;
}

.carousel .owl-nav .owl-prev,
.carousel .owl-nav .owl-next {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff7300;
    background: rgba(256, 256, 256, .2);
    font-size: 22px;
    transition: .3s;
}

.carousel .owl-nav .owl-prev:hover,
.carousel .owl-nav .owl-next:hover {
    color: #ffffff;
    background: #ff7300;
}

.carousel .owl-nav .owl-prev {
    margin-right: 2px;
}

.carousel .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

#videoModal .modal-body {
    position: relative;
    padding: 0px;
}

#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #ffffff;
    background: #000000;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .carousel .carousel-text h1 {
        font-size: 35px;
    }
    
    .carousel .carousel-text p {
        font-size: 16px;
    }
    
    .carousel .carousel-text .btn {
        padding: 12px 30px;
        font-size: 15px;
        letter-spacing: 0;
    }
}

@media (max-width: 767.98px) {
    .carousel .carousel-text h1 {
        font-size: 30px;
    }
    
    .carousel .carousel-text .btn {
        padding: 10px 25px;
        font-size: 15px;
        letter-spacing: 0;
    }
}

@media (max-width: 575.98px) {
    .carousel .carousel-text h1 {
        font-size: 25px;
    }
    
    .carousel .carousel-text .btn {
        padding: 8px 20px;
        font-size: 14px;
        letter-spacing: 0;
    }
}


/*******************************/
/******* Page Header CSS *******/
/*******************************/
.page-header {
    position: relative;
    margin-bottom: 45px;
    padding: 210px 0 90px 0;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/page-header.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header h2 {
    position: relative;
    color: #ff7300;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

.page-header h2::after {
    position: absolute;
    content: "";
    width: 100px;
    height: 2px;
    left: calc(50% - 50px);
    bottom: 0;
    background: #ff7300;
}

.page-header a {
    position: relative;
    padding: 0 12px;
    font-size: 22px;
    color: #ffffff;
}

.page-header a:hover {
    color: #ff7300;
}

.page-header a::after {
    position: absolute;
    content: "/";
    width: 8px;
    height: 8px;
    top: -2px;
    right: -7px;
    text-align: center;
    color: #ffffff;
}

.page-header a:last-child::after {
    display: none;
}

@media (max-width: 991.98px) {
    .page-header {
        padding: 60px 0;
    }
    
    .page-header h2 {
        font-size: 45px;
    }
    
    .page-header a {
        font-size: 20px;
    }
}

@media (max-width: 767.98px) {
    .page-header {
        padding: 45px 0;
    }
    
    .page-header h2 {
        font-size: 35px;
    }
    
    .page-header a {
        font-size: 18px;
    }
}


/*******************************/
/******* Section Header ********/
/*******************************/
.section-header {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto 15px auto;
}

.section-header p {
    margin-bottom: 5px;
    position: relative;
    font-size: 22px;
    font-weight: 600;
    text-transform: capitalize;
    color: #ff7300;
}

.section-header h2 {
    margin: 0;
    font-size: 45px;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .section-header h2 {
        font-size: 45px;
    }
}

@media (max-width: 767.98px) {
    .section-header h2 {
        font-size: 40px;
    }
}

@media (max-width: 575.98px) {
    .section-header h2 {
        font-size: 35px;
    }
}


/*******************************/
/********** About CSS **********/
/*******************************/
.about {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.about .section-header {
    margin-bottom: 30px;
    margin-left: 0;
}

.about .about-img {
    width: 100%;
    height: 100vh;
}

.about .about-tab {
    width: 100%;
}

.about .about-tab .nav.nav-pills .nav-link {
    padding: 8px;
    font-weight: 600;
    background: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    transition: none;
}

.about .about-tab .nav.nav-pills .nav-link:hover,
.about .about-tab .nav.nav-pills .nav-link.active {
    color: #ff7300;
    padding-bottom: 7px;
    border-bottom: 3px solid #ff7300;
}

.about .about-tab .tab-content {
    padding: 15px 0 0 0;
    background: transparent;
}

.about .about-tab .tab-content .container {
    padding: 0;
}

@media (max-width: 991.98px) {
    .about .section-header {
        margin-top: 30px;
    }
}


/*******************************/
/********* Service CSS *********/
/*******************************/
.service {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.service .service-item {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 45px;
    transition: .3s;
}

.service .service-icon {
    position: relative;
    width: 60px;
}

.service .service-icon i {
    position: relative;
    display: block;
    color: #ff7300;
    font-size: 60px;
    line-height: 60px;
    margin-top: 5px;
}

.service .service-text {
    position: relative;
    margin-left: 20px;
    padding-left: 20px;
}

.service .service-text::before {
    position: absolute;
    content: "";
    width: 1px;
    height: calc(100% - 10px);
    top: 5px;
    left: 0;
    background: rgba(0, 0, 0, .1);
}

.service .service-text::after {
    position: absolute;
    content: "";
    width: 3px;
    height: 40px;
    top: calc(50% - 20px);
    left: -1px;
    background: #ff7300;
}

.service .service-text h3 {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}

.service .service-text p {
    margin: 0;
}


/*******************************/
/********* Donate CSS **********/
/*******************************/
.donate {
    position: relative;
    width: 100%;
    margin: 45px 0;
    background: rgba(0, 0, 0, .5);
}

.donate .donate-content {
    padding: 45px 0 15px 0;
}

.container .donate {
    margin: 90px 0;
}

.container .donate .donate-content {
    padding: 45px 30px 15px 30px;
}

.donate .donate-content .section-header {
    margin-bottom: 30px;
}

.donate .donate-content .section-header h2 {
    color: #ffffff;
}

.donate .donate-text p {
    color: #ffffff;
    font-size: 18px;
}

.donate .donate-form {
    padding: 90px 30px;
    background: #ff7300;
}

.donate .donate-form .control-group {
    margin-bottom: 15px;
}

.donate .donate-form .form-control {
    height: 60px;
    color: #ffffff;
    padding: 0 15px;
    border-radius: 0;
    border: 1px solid #ffffff;
    background: transparent;
}

.donate .donate-form .form-control::placeholder {
    color: #ffffff;
    opacity: 1;
}

.donate .donate-form .form-control:-ms-input-placeholder,
.donate .donate-form .form-control::-ms-input-placeholder {
    color: #ffffff;
}

.donate .donate-form .btn-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.donate .donate-form .btn.btn-custom {
    padding: 15px 0;
    width: 100%;
    height: 60px;
    color: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: inset 0 0 0 0 #ffffff;
}

.donate .donate-form .btn.btn-custom:hover,
.donate .donate-form .btn.btn-custom.active {
    color: #ff7300;
    border: 1px solid #ffffff;
    box-shadow: inset 0 0 0 30px #ffffff;
}



/*******************************/
/********** Causes CSS *********/
/*******************************/
.causes {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.causes .causes-carousel {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
}

.causes .causes-item {
    margin: 0 15px;
    overflow: hidden;
    background: #f3f6ff;
}

.causes .causes-img {
    overflow: hidden;
}

.causes .causes-img img {
    width: 100%;
    transition: .3s;
}

.causes .causes-item:hover img {
    transform: scale(1.1);
    filter: brightness(1.2);
}


.causes .causes-progress {
    width: 100%;
    margin-top: 32px;
    padding: 30px 30px 20px 30px;
}

.causes .progress {
    height: 10px;
    border-radius: 0;
    background: #dddddd;
    overflow: visible;
}

.causes .progress .progress-bar {
    position: relative;
    width: 0px;
    background: #ff7300;
    overflow: visible;
    transition: 2s;
}

.causes .progress-bar span {
    position: absolute;
    top: -32px;
    right: 0;
    height: 23px;
    display: inline-block;
    padding: 2px 6px;
    background: #ff7300;
    color: #20212B;
}

.causes .progress-bar span::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 23px;
    left: calc(50% - 6px);
    border: 6px solid;
    border-color: #ff7300 transparent transparent transparent;
}

.causes .progress-text {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
}

.causes .progress-text p {
    margin: 0;
}

.causes .causes-text {
    padding: 0 30px;
}

.causes .causes-text h3 {
    font-size: 22px;
    font-weight: 700;
}

.causes .causes-text p {
    margin: 0;
}

.causes .causes-btn {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

.causes .causes-btn .btn {
    padding: 10px 0;
    width: 50%;
}

.causes .causes-btn .btn:last-child {
    color: #20212B;
    background: #ff7300;
}

.causes .causes-btn .btn:last-child:hover {
    color: #ffffff;
}



/*******************************/
/********** Facts CSS **********/
/*******************************/
.facts {
    position: relative;
    width: 100%;
    min-height: 400px;
    margin: 45px 0;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, .5);
}

.facts .facts-item {
    display: flex;
    flex-direction: row;
    margin: 25px 0;
}

.facts .facts-item i {
    margin-top: 10px;
    font-size: 60px;
    line-height: 60px;
    color: #ff7300;
}

.facts .facts-text {
    padding-left: 20px;
}

.facts .facts-text h3 {
    position: relative;
    display: inline-block;
    color: #ffffff;
    font-size: 45px;
    font-weight: 700;
}

.facts .facts-text h3::after {
    position: absolute;
    top: 0px;
    color: #ffffff;
    font-size: 25px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.facts .facts-text h3.facts-plus::after {
    content: "\f067";
    right: -25px;
}

.facts .facts-text h3.facts-dollar::after {
    content: "\f155";
    right: -18px;
}

.facts .facts-text p {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}


/*******************************/
/*********** Team CSS **********/
/*******************************/
.team {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

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

.team .team-img {
    position: relative;
    overflow: hidden;
}

.team .team-img img {
    width: 100%;
    transform: scale(1.1);
    margin-bottom: -15px;
    transition: .3s;
}

.team .team-item:hover img {
    margin: -15px 0 0 0;
}

.team .team-text {
    position: absolute;
    width: calc(100% - 40px);
    height: 96px;
    bottom: 0;
    left: 20px;
    padding: 22px 0;
    text-align: center;
    background: #ffffff;
    transition: .3s;
    overflow: hidden;
}

.team .team-text h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.team .team-text p {
    margin-bottom: 20px;
}

.team .team-social {
    position: relative;
    font-size: 0;
}

.team .team-social a {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 0 3px;
    padding: 5px 0;
    text-align: center;
    font-size: 14px;
    color: #4a4c70;
    border: 2px solid #ff7300;
    transition: .3s;
}

.team .team-social a:hover {
    color: #20212B;
    background: #ff7300;
}

.team .team-item:hover .team-text {
    height: 160px;
}


/*******************************/
/******* Testimonial CSS *******/
/*******************************/
.testimonial {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.testimonial .testimonials-carousel {
    position: relative;
    width: calc(100% + 30px);
    margin: 0 -15px;
}

.testimonial .testimonial-item {
    position: relative;
    width: 100%;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.testimonial .testimonial-profile {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.testimonial .testimonial-profile img {
    width: 80px;
    margin-bottom: -1px;
    border-radius: 10px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.testimonial .testimonial-profile img:hover {
    transform: scale(1.06);
    filter: brightness(0.85);
}

.testimonial .testimonial-name {
    padding-left: 15px;
    width: calc(100% - 95px);
}

.testimonial .testimonial-name h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.testimonial .testimonial-name p {
    margin: 0;
    font-style: italic;
}

.testimonial .testimonial-text p {
    margin: 0;
}

/* CATEGORÍAS (carrusel reutilizado como listado de categorías) como tarjeta/botón */
.testimonial .categoria-card-carousel {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(11, 29, 141, .15);
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.testimonial .categoria-card-carousel:hover {
    background: #fff2e6;
    border-color: #ff7300;
    box-shadow: 0 10px 24px rgba(255, 115, 0, .18);
}

/* Logotipos de MARCAS en la portada: mismas esquinas, borde y separación que las categorías */
.marca-logo-carousel {
    display: block;
    margin: 2px 15px 4px;   /* aire para que el carrusel no recorte el borde inferior */
    border: 1px solid rgba(11, 29, 141, .15);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.marca-logo-carousel:hover {
    border-color: #ff7300;
    box-shadow: 0 10px 24px rgba(255, 115, 0, .18);
}

/* Logotipos de MARCAS en cuadrícula (inicio.php): la columna ya da el hueco lateral */
.marca-logo-grid .marca-logo-carousel {
    margin: 0 0 30px;
}

.marca-logo-grid .marca-logo-carousel img {
    display: block;
    width: 100%;
}

/* Zoom suave del logotipo al pasar el ratón (misma animación que los productos destacados) */
.marca-logo-carousel img {
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.marca-logo-carousel:hover img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .marca-logo-carousel img { transition: none; }
    .marca-logo-carousel:hover img { transform: none; }
}

.testimonial .categoria-card-carousel .testimonial-profile {
    margin-bottom: 0;
    border-bottom: none;
    overflow: hidden;
}

.testimonial .categoria-card-carousel .testimonial-profile img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 0;
}

.testimonial .categoria-card-carousel:hover .testimonial-profile img {
    transform: scale(1.08);
    filter: brightness(1.03);
}

.testimonial .categoria-card-carousel .testimonial-name {
    width: 100%;
    padding: 12px 15px 15px;
}

.testimonial .categoria-card-carousel .testimonial-name h3 {
    color: #4a4c70;
    transition: color .25s ease;
}

.testimonial .categoria-card-carousel:hover .testimonial-name h3 {
    color: #ff7300;
}

.testimonial .owl-dots {
    margin-top: 15px;
    text-align: center;
}

.testimonial .owl-dot {
    display: inline-block;
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border-radius: 0;
    background: #ff7300;
}

.testimonial .owl-dot.active {
    background: #20212B;
}


/*******************************/
/******** Volunteer CSS ********/
/*******************************/
.volunteer {
    position: relative;
    width: 100%;
    margin: 45px 0;
    background: rgba(0, 0, 0, .5);
}

.volunteer .volunteer-content {
    padding: 30px 0 45px 0;
}

.container .volunteer {
    margin: 90px 0;
}

.container .volunteer .volunteer-content {
    padding: 45px 30px 15px 30px;
}

.volunteer .volunteer-content .section-header {
    margin-bottom: 30px;
}

.volunteer .volunteer-content .section-header h2 {
    color: #ffffff;
}

.volunteer .volunteer-text p {
    color: #ffffff;
    font-size: 18px;
}

.volunteer .volunteer-form {
    padding: 90px 30px;
    background: #ff7300;
}

.volunteer .volunteer-form .control-group {
    margin-bottom: 15px;
}

.volunteer .volunteer-form .form-control {
    height: 60px;
    color: #ffffff;
    padding: 0 15px;
    border-radius: 0;
    border: 1px solid #ffffff;
    background: transparent;
}

.volunteer .volunteer-form textarea.form-control {
    height: 120px;
    padding: 15px;
}

.volunteer .volunteer-form .form-control::placeholder {
    color: #ffffff;
    opacity: 1;
}

.volunteer .volunteer-form .form-control:-ms-input-placeholder,
.volunteer .volunteer-form .form-control::-ms-input-placeholder {
    color: #ffffff;
}

.volunteer .volunteer-form .btn.btn-custom {
    padding: 15px 0;
    width: 100%;
    height: 60px;
    color: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: inset 0 0 0 0 #ffffff;
}

.volunteer .volunteer-form .btn.btn-custom:hover {
    color: #ff7300;
    border: 1px solid #ffffff;
    box-shadow: inset 0 0 0 30px #ffffff;
}


/*******************************/
/********** Event CSS **********/
/*******************************/
.event {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.event .event-item {
    margin-bottom: 30px;
    background: #f3f6ff;
}

.event .event-item img {
    width: 100%;
}

.event .event-content {
    padding: 30px;
    display: flex;
}

.event .event-meta {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.event .event-meta p {
    position: relative;
    margin-bottom: 8px;
    padding-bottom: 8px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.event .event-meta p:last-child {
    border-bottom: none;
}

.event .event-meta i {
    color: #4a4c70;
    width: 25px;
}

.event .event-text {
    position: relative;
    margin-left: 20px;
    padding-left: 20px;
}

.event .event-text::before {
    position: absolute;
    content: "";
    width: 1px;
    height: calc(100% - 5px);
    top: 6px;
    left: 0;
    background: rgba(0, 0, 0, .15);
}

.event .event-text::after {
    position: absolute;
    content: "";
    width: 3px;
    height: 40px;
    top: calc(50% - 20px);
    left: -1px;
    background: #ff7300;
}

.event .event-text h3 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
}

.event .event-text p {
    margin: 0;
}

.event .btn.btn-custom {
    margin-top: 20px;
    padding: 8px 30px;
}

@media (max-width: 575.98px) {
    .event .event-content {
        flex-direction: column;
    }
    
    .event .event-meta {
        flex-direction: row;
    }
    
    .event .event-meta p {
        font-size: 14px;
        padding-right: 7px;
    }
    
    .event .event-meta p:last-child {
        border-bottom: 1px solid rgba(0, 0, 0, .15);
    }
    
    .event .event-meta i {
        width: 18px;
    }
    
    .event .event-text {
        margin: 0;
        padding: 0;
    }
    
    .event .event-text::before,
    .event .event-text::after {
        display: none;
    }
}



/*******************************/
/*********** Blog CSS **********/
/*******************************/
.blog {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.blog .blog-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    background: #f3f6ff;
}

.blog .blog-img {
    width: 100%;
}

.blog .blog-img img {
    width: 100%;
}

.blog .blog-text {
    padding: 30px 30px 15px 30px;
}

.blog .blog-text h3 {
    font-size: 22px;
    font-weight: 700;
}

.blog .blog-text h3 a {
    color: #4a4c70;
}

.blog .blog-text h3 a:hover {
    color: #ff7300;
}

.blog .blog-text p {
    margin: 0;
}

.blog .blog-meta {
    margin: 0 30px;
    padding-top: 15px;
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, .15);
}

.blog .blog-meta p {
    margin: 0;
    color: #777777;
    padding: 0 30px;
    border-right: 1px solid rgba(0, 0, 0, .15);
}

.blog .blog-meta p:first-child {
    padding-left: 0;
}

.blog .blog-meta p:last-child {
    padding-right: 0;
    border: none;
}

.blog .blog-meta i {
    color: #4a4c70;
    margin-right: 8px
}

.blog .pagination {
    margin-bottom: 15px;
}

.blog .pagination .page-link {
    color: #4a4c70;
    border-radius: 0;
    border-color: #4a4c70;
}

.blog .pagination .page-link:hover,
.blog .pagination .page-item.active .page-link {
    color: #ff7300;
    background: #4a4c70;
}

.blog .pagination .disabled .page-link {
    color: #999999;
}


/*******************************/
/********* Contact CSS *********/
/*******************************/
.contact {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.contact .contact-img {
    position: relative;
    width: 100%;
}

.contact .contact-img img {
    width: 100%;
    height: 440px;
    object-fit: cover;
}

.contact .contact-form {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    margin-top: -220px;
    padding: 30px;
    background: #f3f6ff;
}

@media (max-width: 991.98px) {
    .contact .contact-form {
        max-width: 600px;
    }
}

@media (max-width: 767.98px) {
    .contact .contact-form {
        max-width: 400px;
    }
}

@media (max-width: 575.98px) {
    .contact .contact-form {
        max-width: 300px;
    }
}

.contact .contact-form input {
    padding: 15px;
    background: none;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, .1);
}

.contact .contact-form textarea {
    height: 150px;
    padding: 8px 15px;
    background: none;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, .1);
}

.contact .contact-form .btn.btn-custom {
    width: 100%;
}

.contact .help-block ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}


/*******************************/
/******* Single Post CSS *******/
/*******************************/
.single {
    position: relative;
    padding: 45px 0;
}

.single .single-content {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.single .single-content img {
    margin-bottom: 20px;
    width: 100%;
}

.single .single-tags {
    margin: -5px -5px 41px -5px;
    font-size: 0;
}

.single .single-tags a {
    margin: 5px;
    display: inline-block;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 500;
    color: #4a4c70;
    border: 1px solid #4a4c70;
}

.single .single-tags a:hover {
    color: #ffffff;
    background: #ff7300;
    border-color: #ff7300;
}

.single .single-bio {
    margin-bottom: 45px;
    padding: 30px;
    background: #f3f6ff;
    display: flex;
}

.single .single-bio-img {
    width: 100%;
    max-width: 100px;
}

.single .single-bio-img img {
    width: 100%;
    border: 15px solid #ffffff;
}

.single .single-bio-text {
    padding-left: 30px;
}

.single .single-bio-text h3 {
    font-size: 20px;
    font-weight: 700;
}

.single .single-bio-text p {
    margin: 0;
}

.single .single-related {
    margin-bottom: 45px;
}

.single .single-related h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
}

.single .related-slider {
    position: relative;
    margin: 0 -15px;
    width: calc(100% + 30px);
}

.single .related-slider .post-item {
    margin: 0 15px;
}

.single .post-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.single .post-item .post-img {
    width: 100%;
    max-width: 80px;
}

.single .post-item .post-img img {
    width: 100%;
}

.single .post-item .post-text {
    padding-left: 15px;
}

.single .post-item .post-text a {
    font-size: 16px;
    font-weight: 600;
}

.single .post-item .post-text a:hover {
    color: #ff7300;
}

.single .post-item .post-meta {
    display: flex;
    margin-top: 8px;
}

.single .post-item .post-meta p {
    display: inline-block;
    margin: 0;
    padding: 0 3px;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
}

.single .post-item .post-meta p a {
    margin-left: 5px;
    color: #999999;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
}

.single .related-slider .owl-nav {
    position: absolute;
    width: 90px;
    top: -55px;
    right: 15px;
    display: flex;
}

.single .related-slider .owl-nav .owl-prev,
.single .related-slider .owl-nav .owl-next {
    margin-left: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a4c70;
    background: #ff7300;
    font-size: 16px;
    transition: .3s;
}

.single .related-slider .owl-nav .owl-prev:hover,
.single .related-slider .owl-nav .owl-next:hover {
    color: #ff7300;
    background: #4a4c70;
}

.single .single-comment {
    position: relative;
    margin-bottom: 45px;
}

.single .single-comment h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
}

.single .comment-list {
    list-style: none;
    padding: 0;
}

.single .comment-child {
    list-style: none;
}

.single .comment-body {
    display: flex;
    margin-bottom: 30px;
}

.single .comment-img {
    width: 60px;
}

.single .comment-img img {
    width: 100%;
    border-radius: 0;
}

.single .comment-text {
    padding-left: 15px;
    width: calc(100% - 60px);
}

.single .comment-text h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 3px;
}

.single .comment-text span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.single .comment-text .btn {
    padding: 3px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #4a4c70;
    background: #dddddd;
    border-radius: 0;
}

.single .comment-text .btn:hover {
    background: #ff7300;
}

.single .comment-form {
    position: relative;
}

.single .comment-form h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
}

.single .comment-form form {
    padding: 30px;
    background: #f3f6ff;
}

.single .comment-form form .form-group:last-child {
    margin: 0;
}

.single .comment-form input,
.single .comment-form textarea {
    border-radius: 0;
}

.single .comment-form input:focus,
.single .comment-form textarea:focus {
    border-color: #ff7300;
}


/**********************************/
/*********** Sidebar CSS **********/
/**********************************/
.sidebar {
    position: relative;
    width: 100%;
}

@media(max-width: 991.98px) {
    .sidebar {
        margin-top: 15px;
    }
}

.sidebar .sidebar-widget {
    position: relative;
    margin-bottom: 15px;
}

.sidebar .sidebar-widget .widget-title {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 5px;
    font-size: 25px;
    font-weight: 700;
}

.sidebar .sidebar-widget .widget-title::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #ff7300;
}

.sidebar .sidebar-widget .search-widget {
    position: relative;
}

.sidebar .search-widget input {
    height: 50px;
    border: 1px solid #dddddd;
    border-radius: 0;
}

.sidebar .search-widget input:focus {
    box-shadow: none;
    border-color: #ff7300;
}

.sidebar .search-widget .btn {
    position: absolute;
    top: 6px;
    right: 15px;
    height: 40px;
    padding: 0;
    font-size: 25px;
    color: #ff7300;
    background: none;
    border-radius: 0;
    border: none;
    transition: .3s;
}

.sidebar .search-widget .btn:hover {
    color: #4a4c70;
}

.sidebar .sidebar-widget .recent-post {
    position: relative;
}

.sidebar .sidebar-widget .tab-post {
    position: relative;
}

.sidebar .tab-post .nav.nav-pills .nav-link {
    color: #4a4c70;
    background: #ff7300;
    border-radius: 0;
}

.sidebar .tab-post .nav.nav-pills .nav-link:hover,
.sidebar .tab-post .nav.nav-pills .nav-link.active {
    color: #ff7300;
    background: #4a4c70;
}

/* Etiqueta «Destacados» de la columna lateral: azul marino con el texto en blanco y la estrella de las fichas */
.sidebar .destacados-widget .tab-post .nav.nav-pills .nav-link,
.sidebar .destacados-widget .tab-post .nav.nav-pills .nav-link:hover,
.sidebar .destacados-widget .tab-post .nav.nav-pills .nav-link.active { background: #0b1d8d; color: #ffffff; border-radius: 10px; font-weight: 700; letter-spacing: .3px; }
.sidebar .destacados-widget .tab-post .nav-link i { color: #ffb347; font-size: 13px; margin-right: 4px; }
/* …y cada ficha del bloque lleva la estrella arriba a la izquierda, como en los listados */
/* Foto de las fichas del bloque Destacados más grande (antes 60 px) */
.sidebar .sidebar-widget.destacados-widget #featured .post-img { width: 120px; max-width: 120px; height: 120px; }
.sidebar .sidebar-widget.destacados-widget #featured .post-img img { object-fit: contain; }
/* Las fichas 6.ª a 10.ª solo se ven si la ficha del producto es larga (clase con-extras, la pone el script de la ficha) */
.sidebar .destacados-widget .destacado-extra { display: none; }
.sidebar .destacados-widget.con-extras .destacado-extra { display: flex; }
.sidebar .sidebar-widget.destacados-widget:not(.con-extras) #featured .post-item:nth-child(5) { margin-bottom: 0; }
/* Menos separación entre las fichas del bloque (antes 32 px: se sumaban los márgenes de la ficha y de su contenedor) */
.sidebar .sidebar-widget.destacados-widget #featured .post-item { margin-bottom: 8px; }
.sidebar .sidebar-widget.destacados-widget #featured .post-item:last-child { margin-bottom: 0; }
.sidebar .sidebar-widget.destacados-widget .destacado-card { margin: 0; }
.sidebar .sidebar-widget.destacados-widget .destacado-card { position: relative; border-color: #0b1d8d; }   /* borde azul marino; naranja al pasar el ratón */
.sidebar .sidebar-widget.destacados-widget .destacado-card:hover { border-color: #ff7300; }
/* …y el nombre del producto, también en azul marino (naranja al pasar el ratón) */
.sidebar .sidebar-widget.destacados-widget #featured .post-text { color: #0b1d8d; }
.sidebar .sidebar-widget.destacados-widget #featured .destacado-card:hover .post-text { color: #ff7300; }
[data-theme="dark"] .sidebar .sidebar-widget.destacados-widget #featured .post-text { color: #8fa0ff; }
[data-theme="dark"] .sidebar .sidebar-widget.destacados-widget #featured .destacado-card:hover .post-text { color: #ff7300; }
[data-theme="dark"] .sidebar .sidebar-widget.destacados-widget .destacado-card { border-color: #8fa0ff; }
[data-theme="dark"] .sidebar .sidebar-widget.destacados-widget .destacado-card:hover { border-color: #ff7300; }

.sidebar .tab-post .tab-content {
    padding: 15px 0 0 0;
    background: transparent;
}

.sidebar .tab-post .tab-content .container {
    padding: 0;
}

/* Categorías (sidebar) como tarjetas/botón con hover */
.sidebar .categorias-widget .post-item {
    margin-bottom: 12px;
}

.sidebar .categorias-widget .post-item:last-child {
    margin-bottom: 0;
}

.sidebar .categorias-widget .categoria-card {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 8px;
    border: 1px solid rgba(11, 29, 141, .15);
    border-radius: 12px;
    background: transparent;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.sidebar .categorias-widget .categoria-card:hover {
    background: #fff2e6;
    border-color: #ff7300;
    box-shadow: 0 6px 16px rgba(255, 115, 0, .18);
}

.sidebar .categorias-widget .post-img {
    flex: 0 0 auto;
    width: 60px;
    max-width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
}

.sidebar .categorias-widget .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform .3s ease, filter .3s ease;
}

.sidebar .categorias-widget .categoria-card:hover .post-img img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

.sidebar .categorias-widget .post-text {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 15px;
    color: #4a4c70;
    transition: color .25s ease;
}

.sidebar .categorias-widget .categoria-card:hover .post-text {
    color: #ff7300;
}

/* Bloque «Categorías» de la columna lateral más corto: dos columnas, iconos pequeños y menos aire (antes una por fila, con icono de 60 px) */
.sidebar .categorias-widget .recent-post { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sidebar .categorias-widget .post-item,
.sidebar .categorias-widget .post-item:last-child { margin: 0; display: flex; }
.sidebar .categorias-widget .categoria-card { gap: 8px; padding: 5px 8px 5px 5px; border-radius: 10px; height: 100%; }
.sidebar .categorias-widget .post-img { width: 36px; max-width: 36px; height: 36px; border-radius: 7px; }
.sidebar .categorias-widget .post-img img { border-radius: 7px; }
.sidebar .categorias-widget .post-text { font-size: 13.5px; line-height: 1.2; padding-left: 0; }
/* Escritorio estrecho (columna lateral de ~290 px): icono y letra algo menores para que «Equipamiento» quepa en una línea */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidebar .categorias-widget .recent-post { gap: 6px; }
    .sidebar .categorias-widget .categoria-card { gap: 6px; padding: 5px 6px 5px 5px; }
    .sidebar .categorias-widget .post-img { width: 28px; max-width: 28px; height: 28px; }
    .sidebar .categorias-widget .post-text { font-size: 12.5px; }
}

/* Destacados (sidebar) con el mismo estilo de tarjeta/botón */
.sidebar .destacados-widget #featured .post-item {
    margin-bottom: 12px;
}

.sidebar .destacados-widget #featured .post-item:last-child {
    margin-bottom: 0;
}

.sidebar .destacados-widget .destacado-card {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 8px;
    border: 1px solid rgba(11, 29, 141, .15);
    border-radius: 12px;
    background: transparent;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.sidebar .destacados-widget .destacado-card:hover {
    background: #fff2e6;
    border-color: #ff7300;
    box-shadow: 0 6px 16px rgba(255, 115, 0, .18);
}

.sidebar .destacados-widget #featured .post-img {
    flex: 0 0 auto;
    width: 60px;
    max-width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
}

.sidebar .destacados-widget #featured .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform .3s ease, filter .3s ease;
}

.sidebar .destacados-widget .destacado-card:hover .post-img img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

.sidebar .destacados-widget #featured .post-text {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 15px;
    color: #4a4c70;
    transition: color .25s ease;
}

.sidebar .destacados-widget .destacado-card:hover .post-text {
    color: #ff7300;
}

/* Productos relacionados (carrusel) con el mismo estilo de tarjeta/botón */
.single .single-related .relacionado-card {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    padding: 8px;
    border: 1px solid rgba(11, 29, 141, .15);
    border-radius: 12px;
    background: transparent;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* «Productos relacionados» a todo el ancho, debajo de las dos columnas de la ficha */
.single .single-related-ancho { margin-top: 30px; }
/* Foto de las fichas de «Productos relacionados» más grande (antes 60 px) */
.single .single-related.single-related-ancho .post-item .post-img { width: 100px; max-width: 100px; height: 100px; }
.single .single-related.single-related-ancho .post-item .post-img img { object-fit: contain; }
/* Móvil: los relacionados van de dos en dos, así que la ficha se pone en vertical (foto arriba, nombre debajo) */
@media (max-width: 575.98px) {
    .single .single-related-ancho h4 { font-size: 19px; padding-right: 84px; }   /* que el título no se meta bajo las flechas */
    .single .related-slider { margin: 0 -6px; width: calc(100% + 12px); }
    .single .related-slider .post-item { margin: 0 6px; }
    .single .single-related.single-related-ancho .relacionado-card { flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; text-align: center; }
    .single .single-related.single-related-ancho .post-item .post-img { width: 96px; max-width: 96px; height: 96px; }
    .single .single-related.single-related-ancho .post-item .post-text { flex: 0 0 auto; font-size: 12.5px; line-height: 1.25; padding: 0; }
}
/* Todas las fichas de «Productos relacionados» con la misma altura: la de la más alta (nombres de una, dos o tres líneas) */
.single .related-slider .owl-stage { display: flex; }
.single .related-slider .owl-item { display: flex; float: none; flex: none; }
.single .related-slider .post-item { align-items: stretch; width: 100%; margin-bottom: 0; }
.single .single-related .relacionado-card { height: 100%; }

.single .single-related .relacionado-card:hover {
    background: #fff2e6;
    border-color: #ff7300;
    box-shadow: 0 6px 16px rgba(255, 115, 0, .18);
}

.single .single-related .post-item .post-img {
    flex: 0 0 auto;
    width: 60px;
    max-width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
}

.single .single-related .post-item .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform .3s ease, filter .3s ease;
}

.single .single-related .relacionado-card:hover .post-img img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

.single .single-related .post-item .post-text {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 15px;
    color: #4a4c70;
    transition: color .25s ease;
    padding-left: 0;
}

.single .single-related .relacionado-card:hover .post-text {
    color: #ff7300;
}

.sidebar .sidebar-widget .category-widget {
    position: relative;
}

.sidebar .category-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar .category-widget ul li {
    margin: 0 0 12px 22px; 
}

.sidebar .category-widget ul li:last-child {
    margin-bottom: 0; 
}

.sidebar .category-widget ul li a {
    display: inline-block;
    line-height: 23px;
}

.sidebar .category-widget ul li::before {
    position: absolute;
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #ff7300;
    left: 1px;
}

.sidebar .category-widget ul li span {
    display: inline-block;
    float: right;
}

.sidebar .sidebar-widget .tag-widget {
    position: relative;
    margin: -5px -5px;
}

.single .tag-widget a {
    margin: 5px;
    display: inline-block;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 500;
    color: #4a4c70;
    border: 1px solid #4a4c70;
    border-radius: 0;
}

.single .tag-widget a:hover {
    color: #ffffff;
    background: #ff7300;
    border-color: #ff7300;
}

.sidebar .image-widget {
    display: block;
    width: 100%;
    overflow: hidden;
}

.sidebar .image-widget img {
    max-width: 100%;
    transition: .3s;
}

.sidebar .image-widget img:hover {
    transform: scale(1.1);
}


/*******************************/
/********* Footer CSS **********/
/*******************************/
.footer {
    position: relative;
    margin-top: 45px;
    padding-top: 90px;
    background: #20212B;
}

.footer .footer-contact,
.footer .footer-link,
.footer .footer-newsletter {
    position: relative;
    margin-bottom: 45px;
    color: #ffffff;
}

.footer .footer-contact h2,
.footer .footer-link h2,
.footer .footer-newsletter h2 {
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: 700;
    color: #ff7300;
}

.footer .footer-link a {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    transition: .3s;
}

.footer .footer-link a::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .footer-link a:hover {
    color: #ff7300;
    letter-spacing: 1px;
}

.footer .footer-contact p i {
    width: 25px;
}

.footer .footer-social {
    position: relative;
    margin-top: 20px;
}

.footer .footer-social a {
    width: 40px;
    height: 40px;
    padding: 6px 0;
}

.footer .footer-social a {
    margin-top: 5px;
}

.footer .footer-newsletter form {
    position: relative;
    width: 100%;
}

.footer .footer-newsletter input {
    margin-bottom: 15px;
    height: 60px;
    border: none;
    border-radius: 0;
}

.footer .footer-newsletter label {
    margin-top: 5px;
    color: #777777;
    font-size: 14px;
    letter-spacing: 1px;
}

.footer .footer-newsletter .btn.btn-custom {
    width: 100%;
    padding: 15px 0;
}

.footer .copyright {
    padding: 0 30px;
}

.footer .copyright .row {
    padding-top: 25px;
    padding-bottom: 25px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright p {
    margin: 0;
    color: #999999;
}

.footer .copyright .col-md-6:last-child p {
    text-align: right;
}

.footer .copyright p a {
    color: #ffffff;
}

.footer .copyright p a:hover {
    color: #ff7300;
}

@media (max-width: 767.98px) {
    .footer .copyright p,
    .footer .copyright .col-md-6:last-child p {
        margin: 5px 0;
        text-align: center;
    }
}


/*******************************/
/******** Modo Oscuro **********/
/*******************************/
/* Se activa poniendo data-theme="dark" en <html> (botón claro/oscuro del menú superior) */

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background: #14151c !important;
    color: #c7c9d6 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #eceefb !important;
}

[data-theme="dark"] a {
    color: #b9bce0;
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:active,
[data-theme="dark"] a:focus {
    color: #ff7300 !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] label {
    color: #c7c9d6;
}

/* Textos con color fijo heredado de <font color> u otros estilos antiguos:
   se dejan tal cual (rojo/verde/naranja siguen siendo legibles en fondo oscuro),
   pero se evita el negro/gris oscuro sobre fondo oscuro. */
[data-theme="dark"] font[color="#111"],
[data-theme="dark"] font[color="#333"],
[data-theme="dark"] font[color="black"],
[data-theme="dark"] font[color="#000"],
[data-theme="dark"] font[color="grey"] {
    color: #c7c9d6 !important;
}

/* Barra superior y menú */
[data-theme="dark"] .top-bar {
    background: #14151c !important;
    border-bottom-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar.nav-sticky,
[data-theme="dark"] .page .navbar {
    background: #1a1b23 !important;
}

[data-theme="dark"] .navbar .container-fluid {
    background: #1a1b23 !important;
}

[data-theme="dark"] .navbar .dropdown-menu {
    background: #1e2029 !important;
    border: 1px solid rgba(255, 255, 255, .08);
}

[data-theme="dark"] .dropdown-item {
    color: #c7c9d6 !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: #262836 !important;
    color: #ff7300 !important;
}

/* Logo, enlaces, hamburguesa y carrito del menú en modo oscuro */
[data-theme="dark"] .navbar-brand-logo-light {
    display: none;
}

[data-theme="dark"] .navbar-brand-logo-dark {
    display: inline-block;
}

[data-theme="dark"] .navbar .nav-link {
    color: #c7c9d6;
}

[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .nav-link.active {
    color: #ff7300 !important;
}

[data-theme="dark"] .navbar-toggler-icon,
[data-theme="dark"] .navbar-toggler-icon::before,
[data-theme="dark"] .navbar-toggler-icon::after {
    background: #eceefb;
}

[data-theme="dark"] .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
}

[data-theme="dark"] .navbar-collapse {
    border-top-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .cart-btn .fa-shopping-cart {
    color: #c7c9d6;
}

[data-theme="dark"] .cart-btn:hover .fa-shopping-cart {
    color: #ff7300;
}

[data-theme="dark"] #theme-toggle-btn:hover i {
    color: #ffffff !important;
}

/* Tarjetas y bloques de contenido */
[data-theme="dark"] .blog .blog-item,
[data-theme="dark"] .causes .causes-item,
[data-theme="dark"] .contact .contact-form,
[data-theme="dark"] .testimonial .testimonial-item .testimonial-text,
[data-theme="dark"] .single .comment-body,
[data-theme="dark"] .modal-content {
    background: #1e2029 !important;
    color: #c7c9d6;
}

[data-theme="dark"] .blog .blog-meta,
[data-theme="dark"] .testimonial .testimonial-profile {
    border-color: rgba(255, 255, 255, .1) !important;
}

[data-theme="dark"] .marca-logo-carousel {
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .testimonial .categoria-card-carousel {
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .testimonial .categoria-card-carousel:hover {
    background: #262836;
    border-color: #ff7300;
}

[data-theme="dark"] .testimonial .categoria-card-carousel .testimonial-name h3 {
    color: #eceefb;
}

[data-theme="dark"] .testimonial .categoria-card-carousel:hover .testimonial-name h3 {
    color: #ff7300;
}

[data-theme="dark"] .sidebar .sidebar-widget,
[data-theme="dark"] .single .comment-body {
    color: #c7c9d6;
}

[data-theme="dark"] .categorias-widget .categoria-card {
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .categorias-widget .categoria-card:hover {
    background: #262836;
    border-color: #ff7300;
}

[data-theme="dark"] .categorias-widget .post-text {
    color: #c7c9d6;
}

[data-theme="dark"] .categorias-widget .categoria-card:hover .post-text {
    color: #ff7300;
}

[data-theme="dark"] .destacados-widget .destacado-card {
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .destacados-widget .destacado-card:hover {
    background: #262836;
    border-color: #ff7300;
}

[data-theme="dark"] .destacados-widget #featured .post-text {
    color: #c7c9d6;
}

[data-theme="dark"] .destacados-widget .destacado-card:hover .post-text {
    color: #ff7300;
}

[data-theme="dark"] .single-related .relacionado-card {
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .single-related .relacionado-card:hover {
    background: #262836;
    border-color: #ff7300;
}

[data-theme="dark"] .single-related .post-item .post-text {
    color: #c7c9d6;
}

[data-theme="dark"] .single-related .relacionado-card:hover .post-text {
    color: #ff7300;
}

/* Formularios */
[data-theme="dark"] .form-control,
[data-theme="dark"] .contact .contact-form input,
[data-theme="dark"] .contact .contact-form textarea,
[data-theme="dark"] .sidebar .search-widget input,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #1e2029 !important;
    color: #eceefb !important;
    border-color: rgba(255, 255, 255, .15) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #8b8da3 !important;
}

/* Paginación */
[data-theme="dark"] .blog .pagination .page-link {
    background: #1e2029 !important;
    color: #c7c9d6 !important;
    border-color: rgba(255, 255, 255, .15) !important;
}

[data-theme="dark"] .blog .pagination .page-link:hover,
[data-theme="dark"] .blog .pagination .page-item.active .page-link {
    background: #ff7300 !important;
    color: #14151c !important;
}

/* Tablas (por si algún listado usa <table> simple) */
[data-theme="dark"] table {
    color: #c7c9d6;
}

[data-theme="dark"] table[bgcolor],
[data-theme="dark"] [bgcolor="#fff"],
[data-theme="dark"] [bgcolor="#ffffff"],
[data-theme="dark"] [bgcolor="white"],
[data-theme="dark"] [bgcolor="#eee"] {
    background-color: #1e2029 !important;
}

/* Fondos claros puestos con style="" en línea en algunas páginas */
[data-theme="dark"] [style*="background-color:#eee"],
[data-theme="dark"] [style*="background-color: #eee"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#ddd"],
[data-theme="dark"] [style*="background-color: #ddd"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background-color: white"] {
    background-color: #1e2029 !important;
}

/* Botón claro/oscuro del menú superior */
[data-theme="dark"] #theme-toggle-btn i {
    color: #ff7300 !important;
}

#theme-toggle-btn {
    cursor: pointer;
}


/* Ficha de producto: foto principal con esquinas redondeadas */
#Img_principal img {
    border-radius: 18px;
    border: 1px solid #e6e9ee;
    box-shadow: 0 8px 24px rgba(7, 35, 56, .08);
}

/* Portada · Productos destacados: tarjeta con línea fina y esquinas redondeadas (estilo de CATEGORÍAS) */
.causes-carousel .owl-stage { display: flex; }
.causes-carousel .owl-item { display: flex; }
.destacado-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    margin: 6px 8px 14px;   /* 16 px entre ficha y ficha */
    border: 1px solid rgba(11, 29, 141, .15);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.causes .destacado-card { background: #ffffff; }   /* inicio.php: gana a ".causes .causes-item" de la plantilla */
.destacado-card:hover {
    background: #fff2e6;
    border-color: #ff7300;
    box-shadow: 0 0 0 2px #ff7300, 0 10px 24px rgba(255, 115, 0, .18);   /* borde de 3 px (1 + 2) sin mover el contenido */
}
/* Variante con la foto a todo el ancho de la ficha, sin margen interior (pavimentos: fotos de ambiente) */
.destacado-card.foto-completa .destacado-img { padding: 0; }
.destacado-card.foto-completa .destacado-img img { object-fit: cover; }
.destacado-card.foto-completa:hover .destacado-img img { transform: scale(1.05); }   /* sin subirla: dejaría un hueco abajo */

/* Variante para fotos apaisadas (instalaciones, noticias): foto 2:1 a todo el ancho, recortada */
.destacado-card.ficha-foto .destacado-img { aspect-ratio: 2 / 1; padding: 0; }
.destacado-card.ficha-foto .destacado-img img { object-fit: cover; }
.destacado-card.ficha-foto .destacado-texto { flex: 1; }
.destacado-card.ficha-foto .destacado-enlace > .destacado-marca { margin-top: auto; }
.destacado-card.ficha-foto:hover .destacado-marca { color: #ff7300; }
/* Móvil: las fichas de producto un 20 % más estrechas y centradas, con más margen a ambos lados.
   (No afecta a instalaciones/noticias —.ficha-foto— ni a la rejilla de marcas, que va de dos en dos.) */
@media (max-width: 575.98px) {
    .destacado-col:not(.col-6) > .destacado-card:not(.ficha-foto) { width: 80%; flex: 0 0 80%; margin-left: auto; margin-right: auto; }
    .causes-carousel .destacado-card { margin-left: 10%; margin-right: 10%; }
}
/* Portada en escritorio: «Destacados» de 8 en 8 (4 columnas × 2 filas). js/main.js agrupa las fichas en .destacados-grupo */
.causes-carousel.destacados-de-seis .destacados-grupo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; width: 100%; padding: 4px 4px 14px; }
.causes-carousel.destacados-de-seis .destacado-card { margin: 0; min-width: 0; }
/* Fichas más bajas para que las dos filas se vean enteras en la pantalla de un portátil: foto apaisada y nombre en dos líneas como mucho */
.causes-carousel.destacados-de-seis .destacados-grupo { max-width: none; margin: 0 auto; gap: 14px 16px; }
/* El bloque ocupa el mismo ancho que el de subcategorías (94 % de la pantalla, 1400 px como máximo) */
@media (min-width: 992px) { .container.destacados-ancho { width: calc(94% + 8px); max-width: 1408px; padding-left: 0; padding-right: 0; }   /* +8 px: el margen interior de las fichas dentro del carrusel */ }
.causes-carousel.destacados-de-seis .destacado-img { aspect-ratio: 16 / 9; padding: 8px; }
.causes-carousel.destacados-de-seis .destacado-texto { padding: 8px 12px 2px; }
.causes-carousel.destacados-de-seis .destacado-nombre { font-size: 14px; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.causes-carousel.destacados-de-seis .destacado-codigo { font-size: 12px; }
.causes-carousel.destacados-de-seis .destacado-marca { padding: 2px 12px 8px; font-size: 12px; }
/* Último grupo incompleto (p. ej. una sola ficha): las filas no se estiran para llenar el alto de los grupos de dos filas */
.causes-carousel .destacados-grupo { align-content: start; align-self: flex-start; }
/* Portada en móvil: «Productos destacados» de 4 en 4 (2 columnas × 2 filas), con fichas compactas */
.causes-carousel.destacados-de-cuatro .destacados-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; padding: 2px 2px 8px; }
.causes-carousel.destacados-de-cuatro .destacado-card { margin: 0; min-width: 0; }
.causes-carousel.destacados-de-cuatro .destacado-img { padding: 8px; }
.causes-carousel.destacados-de-cuatro .destacado-texto { padding: 8px 10px 2px; }
.causes-carousel.destacados-de-cuatro .destacado-nombre { font-size: 12.5px; line-height: 1.25; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.causes-carousel.destacados-de-cuatro .destacado-codigo { font-size: 11px; overflow-wrap: anywhere; }
.causes-carousel.destacados-de-cuatro .destacado-marca { padding: 2px 10px 8px; font-size: 11px; }

/* Paginación de los listados: si no cabe en una línea (móvil, muchas páginas) salta de renglón
   en vez de ensanchar la página */
.blog .pagination { flex-wrap: wrap; row-gap: 6px; }
.blog .pagination .page-item { height: auto !important; }

/* Las mismas fichas en rejilla (productos-marca.php): misma altura por fila */
.destacado-col { display: flex; margin-bottom: 30px; }   /* mismo hueco que entre columnas */
.destacado-col .destacado-card { margin: 0; }

.destacado-card .destacado-enlace { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.destacado-card .destacado-img {
    background: #fff;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    overflow: hidden;
}
.destacado-card .destacado-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.destacado-card:hover .destacado-img img { transform: translateY(-5px) scale(1.04); }
/* Sello «Destacado»: una estrella en un círculo pequeño, en la esquina superior izquierda de la foto, para no
   tapar los logotipos que traen las fotos; al pasar el ratón por la estrella se despliega el texto DESTACADO.
   Lo llevan los productos marcados «Portada» en el panel. */
.destacado-card .destacado-img { position: relative; }
.destacado-sello {
    position: absolute; top: 7px; left: 7px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 4px;
    background: #0b1d8d; color: #ffffff;
    border: 2px solid #ffffff; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(11, 29, 141, .3);
    font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
.destacado-sello i { color: #ffb347; font-size: 10px; line-height: 1; }
.destacado-sello span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .25s ease, opacity .2s ease, margin .25s ease; }
.destacado-sello:hover span { max-width: 90px; opacity: 1; margin: 0 3px 0 5px; }
@media (prefers-reduced-motion: reduce) { .destacado-sello span { transition: none; } }
[data-theme="dark"] .destacado-sello { box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
/* Ficha de un producto destacado: borde azul marino (al pasar el ratón sigue poniéndose naranja, como las demás) */
.destacado-card.es-destacado { border-color: #0b1d8d; }
.destacado-card.es-destacado:hover { border-color: #ff7300; }
[data-theme="dark"] .destacado-card.es-destacado { border-color: #8fa0ff; }
[data-theme="dark"] .destacado-card.es-destacado:hover { border-color: #ff7300; }
/* …y el nombre del producto también en azul marino (naranja al pasar el ratón, como en las demás fichas) */
.destacado-card.es-destacado .destacado-nombre { color: #0b1d8d; }
.destacado-card.es-destacado:hover .destacado-nombre { color: #ff7300 !important; }
[data-theme="dark"] .destacado-card.es-destacado .destacado-nombre { color: #8fa0ff; }
.destacado-card .destacado-texto { padding: 12px 15px 4px; }
.destacado-card .destacado-nombre {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #4a4c70;
    transition: color .25s ease;
}
.destacado-card .destacado-codigo { font-size: 13px; margin: 0; color: #6b6d8a; transition: color .25s ease; }
.destacado-card .destacado-marca {
    display: block;
    padding: 4px 15px 14px;
    font-size: 13px;
    color: #6b6d8a;
    text-decoration: none;
    transition: color .25s ease;
}
/* Línea «Serie:» bajo «Categoría:» (productos-marca): pegada a la anterior */
.destacado-card .destacado-marca + .destacado-serie { margin-top: -14px; }
.destacado-card:hover .destacado-nombre,
.destacado-card:hover .destacado-codigo b { color: #ff7300 !important; }   /* !important: el modo oscuro fuerza el color de los h3 */
.destacado-card:hover .destacado-codigo,
.destacado-card:hover .destacado-marca { color: #4a4c70; }
.destacado-card .destacado-marca:hover { color: #ff7300; }
[data-theme="dark"] .destacado-card { background: transparent; border-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .destacado-card:hover { background: #262836; border-color: #ff7300; }
[data-theme="dark"] .destacado-card .destacado-nombre { color: #eceefb; }
[data-theme="dark"] .destacado-card .destacado-codigo,
[data-theme="dark"] .destacado-card .destacado-marca { color: #a9abc0; }
[data-theme="dark"] .destacado-card:hover .destacado-codigo,
[data-theme="dark"] .destacado-card:hover .destacado-marca { color: #eceefb; }
[data-theme="dark"] .destacado-card:hover .destacado-nombre,
[data-theme="dark"] .destacado-card:hover .destacado-codigo b { color: #ff7300 !important; }
@media (prefers-reduced-motion: reduce) { .destacado-card .destacado-img img { transition: none; } .destacado-card:hover .destacado-img img { transform: none; } }

/* Ficha de producto: movimiento ligero de la foto principal y ventana modal con la foto en grande */
#Img_principal { overflow: visible; padding: 18px 0 24px; text-align: center; }
#Img_principal img {
    display: block;
    margin: 0 auto;      /* foto principal centrada */
    width: 76%;          /* más pequeña que el 85% del atributo: al crecer no choca con los márgenes */
    cursor: zoom-in;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
}
#Img_principal img:hover,
#Img_principal img:focus-visible {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 16px 34px rgba(7, 35, 56, .16);
}
#Img_principal img:focus-visible { outline: 3px solid #ff7300; outline-offset: 4px; }
.foto-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 12, 24, .82);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    cursor: zoom-out;
}
.foto-modal.abierta { opacity: 1; visibility: visible; }
.foto-modal-marco {
    margin: 0;
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    max-width: min(92vw, 1100px);
    max-height: 90vh;
    transform: scale(.94);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    cursor: default;
}
.foto-modal.abierta .foto-modal-marco { transform: scale(1); }
.foto-modal-marco img { display: block; max-width: 100%; max-height: calc(90vh - 36px); width: auto; height: auto; object-fit: contain; }
.foto-modal-cerrar {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}
.foto-modal-cerrar:hover { background: #ff7300; }
.foto-modal-cerrar:focus-visible { outline: 3px solid #ff7300; outline-offset: 2px; }
html.foto-modal-activa { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    #Img_principal img, .foto-modal, .foto-modal-marco { transition: none; }
    #Img_principal img:hover { transform: none; }
}

/* Buscadores: resaltado al pasar el ratón (todas las páginas) */
.search-widget input,
input[name="buscar"] {
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.search-widget:hover input,
input[name="buscar"]:hover {
    border-color: #ff7300 !important;
    box-shadow: 0 0 0 4px rgba(255, 115, 0, .18), 0 8px 20px rgba(255, 115, 0, .12) !important;
    background-color: #fffaf5;
}
.search-widget input:focus,
input[name="buscar"]:focus {
    border-color: #ff7300 !important;
    box-shadow: 0 0 0 4px rgba(255, 115, 0, .28) !important;
}
.search-widget .btn { transition: color .25s ease, transform .25s ease; }
.search-widget:hover .btn { color: #ff5a00; transform: scale(1.12); }
[data-theme="dark"] .search-widget:hover input,
[data-theme="dark"] input[name="buscar"]:hover { background-color: #262836 !important; }
@media (prefers-reduced-motion: reduce) { .search-widget:hover .btn { transform: none; } }

/* CATEGORÍAS en móvil y tableta: imagen cuadrada completa (la altura fija de 140px la recortaba) */
@media (max-width: 991.98px) {
    .testimonial .categoria-card-carousel .testimonial-profile img {
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .testimonial .categoria-card-carousel .testimonial-name { padding: 10px 12px 12px; }
    .testimonial .categoria-card-carousel .testimonial-name h3 { font-size: 16px; }
}

/* Barra fija inferior de la ficha de producto, en tres partes iguales: Compartir · Consultar (WhatsApp) · Añadir (al carrito) */
.barra-producto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; display: flex; box-shadow: 0 -6px 20px rgba(11, 29, 141, .18); }
.barra-producto-btn {
    flex: 1 1 0; min-width: 0; min-height: 54px; padding: 10px 8px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .3px;
    transition: background .2s ease, color .2s ease;
}
.barra-producto-btn i { font-size: 18px; }
.barra-producto-compartir { background: #0b1d8d; color: #ffffff; }
.barra-producto-compartir:hover, .barra-producto-compartir[aria-expanded="true"] { background: #142bb8; }
.barra-producto-carrito { background: #ff7300; color: #ffffff; }
.barra-producto-carrito:hover { background: #e86800; }
/* Botón central: consulta por WhatsApp (mismo enlace que «Consulta por WhatsApp» de la ficha) */
.barra-producto-whatsapp { background: #25a244; color: #ffffff !important; text-decoration: none !important; }
.barra-producto-whatsapp:hover { background: #1e8a39; color: #ffffff; }
.barra-producto-whatsapp i { font-size: 21px; }
.barra-producto-btn:focus { outline: none; }
.barra-producto-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: -5px; }
.barra-producto-menu {
    position: absolute; left: 10px; bottom: calc(100% + 8px); min-width: 220px; padding: 6px;
    background: #ffffff; border: 1px solid rgba(11, 29, 141, .15); border-radius: 12px; box-shadow: 0 10px 28px rgba(11, 29, 141, .22);
}
.barra-producto-menu[hidden] { display: none; }
.barra-producto-menu a, .barra-producto-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
    border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
    font: inherit; font-size: 15px; font-weight: 600; color: #4a4c70; text-decoration: none;
}
.barra-producto-menu a:hover, .barra-producto-menu button:hover { background: #fff2e6; color: #ff7300; }
.barra-producto-menu i { width: 20px; text-align: center; color: #0b1d8d; }
.barra-producto-menu .fa-whatsapp { color: #25d366; }
.barra-producto-menu .fa-facebook-f { color: #1877f2; }
[data-theme="dark"] .barra-producto-menu { background: #1a1b23; border-color: rgba(255, 255, 255, .15); }
[data-theme="dark"] .barra-producto-menu a, [data-theme="dark"] .barra-producto-menu button { color: #c7c9d6; }
[data-theme="dark"] .barra-producto-menu a:hover, [data-theme="dark"] .barra-producto-menu button:hover { background: #262836; }
[data-theme="dark"] .barra-producto-menu .fa-link, [data-theme="dark"] .barra-producto-menu .fa-envelope { color: #8fa0ff; }
/* La página deja sitio a la barra, y el botón de subir se coloca encima de ella */
body.con-barra-producto { padding-bottom: 54px; }
body.con-barra-producto .back-to-top { bottom: 69px; }
body.con-barra-producto .cookie-banner { bottom: calc(54px + 1rem); }   /* el aviso de cookies, por encima de la barra, sin taparla */
@media (max-width: 575.98px) {
    .barra-producto-btn { font-size: 14px; gap: 6px; padding: 8px 4px; }
}

/* ───── Presupuesto (presupuesto-p1 y presupuesto-p2): pasos, lista de artículos y formulario ───── */
.presu { padding: 26px 0 60px; }
.presu-pasos { display: flex; justify-content: center; gap: 8px 28px; flex-wrap: wrap; list-style: none; margin: 0 0 24px; padding: 0; }
.presu-pasos li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #8b8da6; }
.presu-pasos li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e3e5f0; color: #6b6d8a; font-size: 14px; font-weight: 700; }
.presu-pasos li.activo { color: #0b1d8d; }
.presu-pasos li.activo span { background: #ff7300; color: #ffffff; }
.presu-pasos li.hecho { color: #4a4c70; }
.presu-pasos li.hecho span { background: #0b1d8d; color: #ffffff; }
.presu-caja { background: #ffffff; border: 1px solid rgba(11, 29, 141, .15); border-radius: 12px; padding: 22px 24px; max-width: 860px; margin: 0 auto; }
.presu-dos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.presu-dos .presu-caja { max-width: none; margin: 0; }
.presu-titulo { margin: 0 0 14px; font-size: 22px; font-weight: 700; color: #0b1d8d !important; }
.presu-titulo i { color: #ff7300; margin-right: 6px; }
.presu-titulo span { font-weight: 400; color: #6b6d8a; }
.presu-ayuda { margin: -6px 0 18px; font-size: 14px; color: #6b6d8a; }
.presu-cargando { margin: 0; color: #6b6d8a; }
/* Lista de artículos */
.presu-lista { list-style: none; margin: 0; padding: 0; }
.presu-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(11, 29, 141, .1); }
.presu-item:first-child { border-top: 0; }
.presu-item-foto { flex: none; width: 76px; height: 76px; border: 1px solid rgba(11, 29, 141, .12); border-radius: 10px; background: #ffffff; overflow: hidden; display: grid; place-items: center; }
.presu-item-foto img { width: 100%; height: 100%; object-fit: contain; }
.presu-item-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.presu-item-nombre { font-size: 15px; font-weight: 700; line-height: 1.3; color: #4a4c70; text-decoration: none; }
a.presu-item-nombre:hover { color: #ff7300; }
.presu-item-detalle { font-size: 13px; color: #6b6d8a; }
.presu-item-uds { flex: none; min-width: 64px; text-align: center; padding: 6px 10px; border-radius: 999px; background: #fff2e6; color: #4a4c70; font-size: 13px; white-space: nowrap; }
.presu-item-uds b { font-size: 16px; color: #0b1d8d; }
/* Unidades con botones − y + (paso 1) */
.presu-item-contador { display: inline-flex; align-items: center; gap: 4px; padding: 4px; min-width: 0; }
.presu-item-contador span { min-width: 52px; text-align: center; }
.presu-item-contador button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(11, 29, 141, .25); background: #ffffff; color: #0b1d8d; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.presu-item-contador button:hover:not(:disabled), .presu-item-contador button:focus-visible { background: #ff7300; border-color: #ff7300; color: #ffffff; outline: none; }
.presu-item-contador button:disabled { opacity: .35; cursor: default; }
[data-theme="dark"] .presu-item-contador button { background: #14151c; color: #8fa0ff; border-color: rgba(255, 255, 255, .25); }
.presu-item-quitar { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(11, 29, 141, .2); background: #ffffff; color: #6b6d8a; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.presu-item-quitar:hover, .presu-item-quitar:focus-visible { background: #d93025; border-color: #d93025; color: #ffffff; outline: none; }
.presu-lista-resumen .presu-item-foto { width: 56px; height: 56px; }
.presu-lista-resumen .presu-item-nombre { font-size: 14px; }
.presu-resumen { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(11, 29, 141, .1); font-size: 14px; color: #6b6d8a; }
.presu-resumen a { color: #0b1d8d; font-weight: 600; }
/* Botones */
.presu-acciones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 20px; }
.presu-vacio .presu-acciones, .presu-enviado .presu-acciones { justify-content: center; }
.btn.btn-custom.presu-btn-principal { background-color: #ff7300; border-color: #ff7300; color: #ffffff; font-weight: 700; padding: 12px 26px; }
.btn.btn-custom.presu-btn-sec { background-color: #ffffff; border-color: rgba(11, 29, 141, .3); color: #0b1d8d; }
.presu-acciones .btn i { margin: 0 4px; }
/* Carrito vacío y presupuesto enviado */
.presu-vacio, .presu-enviado { text-align: center; padding: 18px 0 6px; }
.presu-vacio > i { font-size: 44px; color: #c9cbe0; }
.presu-enviado > i { font-size: 54px; color: #25a244; }
.presu-vacio h2, .presu-enviado h2 { margin: 12px 0 6px; font-size: 22px; font-weight: 700; color: #0b1d8d !important; }
.presu-vacio p, .presu-enviado p { margin: 0 auto; max-width: 460px; color: #6b6d8a; }
.presu-enviado[hidden], .presu-form[hidden] { display: none; }
/* Formulario */
.presu-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.presu-ancho { grid-column: 1 / -1; }
.presu-campo { margin: 0; min-width: 0; }
.presu-campo label, .presu-entrega legend { display: block; margin: 0 0 5px; font-size: 14px; font-weight: 600; color: #4a4c70; }
.presu-campo .form-control { height: auto; padding: 10px 12px; border: 1px solid rgba(11, 29, 141, .25); border-radius: 8px; font-size: 16px; color: #2b2c35; background: #ffffff; }
.presu-campo .form-control:focus { border-color: #ff7300; box-shadow: 0 0 0 3px rgba(255, 115, 0, .2); }
.presu-campo textarea.form-control { resize: vertical; min-height: 96px; }
.presu-corto { max-width: 170px; }
.presu-aviso { margin: 4px 0 0; min-height: 0; font-size: 13px; font-weight: 600; color: #d93025; }
.presu-aviso:empty { display: none; }
.presu-entrega { border: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.presu-entrega legend, .presu-entrega .presu-aviso { grid-column: 1 / -1; width: auto; }
.presu-opcion { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.presu-opcion input { position: absolute; opacity: 0; }
.presu-opcion span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(11, 29, 141, .25); border-radius: 10px; font-size: 15px; font-weight: 600; color: #4a4c70; background: #ffffff; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.presu-opcion span i { color: #0b1d8d; }
.presu-opcion:hover span { border-color: #ff7300; }
.presu-opcion input:checked + span { border-color: #ff7300; background: #fff2e6; color: #0b1d8d; box-shadow: 0 0 0 2px rgba(255, 115, 0, .25); }
.presu-opcion input:focus-visible + span { outline: 3px solid rgba(255, 115, 0, .4); outline-offset: 2px; }
.presu-solo-envio { visibility: hidden; }
.presu-con-envio .presu-solo-envio { visibility: visible; }
[data-theme="dark"] .presu-caja { background: #1a1b23; border-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .presu-titulo, [data-theme="dark"] .presu-vacio h2, [data-theme="dark"] .presu-enviado h2 { color: #eceefb !important; }
[data-theme="dark"] .presu-item-nombre, [data-theme="dark"] .presu-campo label, [data-theme="dark"] .presu-entrega legend, [data-theme="dark"] .presu-pasos li.hecho { color: #c7c9d6; }
[data-theme="dark"] .presu-pasos li.activo, [data-theme="dark"] .presu-resumen a { color: #8fa0ff; }
[data-theme="dark"] .presu-item-foto { border-color: rgba(255, 255, 255, .15); }
[data-theme="dark"] .presu-campo .form-control, [data-theme="dark"] .presu-opcion span { background: #14151c; color: #eceefb; border-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .presu-item-uds { background: #262836; color: #c7c9d6; }
[data-theme="dark"] .presu-item-uds b { color: #8fa0ff; }
@media (max-width: 991.98px) {
    .presu-dos { grid-template-columns: 1fr; }
    .presu-dos .presu-lateral { order: -1; }
}
@media (max-width: 575.98px) {
    .presu { padding-top: 18px; }
    .presu-caja { padding: 16px 14px; }
    .presu-pasos { gap: 6px 14px; }
    .presu-pasos li { font-size: 13px; }
    .presu-form, .presu-entrega { grid-template-columns: 1fr; }
    .presu-corto { max-width: none; }
    .presu-item { gap: 10px; }
    .presu-item-foto { width: 60px; height: 60px; }
    .presu-acciones { flex-direction: column-reverse; }
    .presu-acciones .btn { width: 100%; }
}

/* ───── Pie de página: franja con el logotipo + 4 columnas (Contacto y redes · Dirección · Categorías · Políticas) ───── */
.footer.pie { padding-top: 0; border-top: 4px solid #ff7300; color: #c9cbd6; }
.pie-marca {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px;
    padding: 30px 0 24px; margin-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pie-logo img { display: block; width: 240px; max-width: 100%; height: auto; }
.pie-lema { margin: 0; font-size: 15px; color: #c9cbd6; }

.footer.pie .pie-col { position: relative; margin-bottom: 36px; color: #c9cbd6; }
.footer.pie .pie-col h2 {
    margin-bottom: 20px; padding-bottom: 10px; position: relative;
    font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ff7300;
}
.footer.pie .pie-col h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: #ff7300; }

/* Contacto: tres enlaces con icono y, debajo, las redes sociales */
.pie-contacto a { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #fff; font-size: 15px; transition: color .2s ease; }
.pie-contacto a i {
    flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 16px; transition: background .2s ease;
}
.pie-contacto a span { min-width: 0; overflow-wrap: anywhere; }
.pie-contacto a:hover { color: #ff7300; text-decoration: none; }
.pie-contacto a:hover i { background: #ff7300; color: #fff; }
.pie-contacto a.pie-whatsapp i { background: #25d366; color: #fff; font-size: 20px; }
.pie-contacto a.pie-whatsapp:hover i { background: #1eb956; }
/* Botón «Contacto» (lleva al formulario), entre los datos de contacto y las redes */
.footer.pie a.pie-boton-contacto { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin-top: 16px; padding: 8px 26px; border-radius: 8px; background: #ff7300; color: #ffffff; font-size: 16px; font-weight: 700; transition: background .2s ease, color .2s ease, transform .15s ease; }
.footer.pie a.pie-boton-contacto:hover { background: #ffffff; color: #0b1d8d; text-decoration: none; transform: translateY(-1px); }
.pie-redes { display: flex; gap: 10px; margin-top: 16px; }
.pie-redes a {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; font-size: 16px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pie-redes a:hover { background: #ff7300; border-color: #ff7300; color: #fff; text-decoration: none; transform: translateY(-2px); }

/* Dirección (dentro de Contacto, debajo del correo) y la imagen de valoraciones de Google */
.pie-contacto a.pie-direccion { align-items: flex-start; }
.pie-contacto a.pie-direccion span { padding-top: 6px; line-height: 1.45; }
.pie-contacto a.pie-valoraciones { display: block; margin: 4px 0 0 48px; }
.pie-contacto a.pie-valoraciones img { display: block; width: 100%; max-width: 220px; height: auto; border-radius: 6px; }

/* Categorías: el nombre y, debajo y más pequeñas, sus subcategorías */
.pie-categorias { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
.pie-categorias li { margin-bottom: 11px; break-inside: avoid; }
@media (min-width: 992px) { .pie-categorias { columns: 3; } }   /* la columna ocupa la mitad del pie: caben tres */
.footer.pie a.pie-categoria { display: block; color: #fff; font-size: 15px; font-weight: 600; transition: color .2s ease; }
.footer.pie a.pie-categoria:hover { color: #ff7300; text-decoration: none; }
.pie-subcategorias { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; }
.pie-subcategorias a { color: #a9acbb; transition: color .2s ease; }
.pie-subcategorias a:hover { color: #ff7300; text-decoration: none; }
.pie-subcategorias a:not(:last-child)::after { content: "·"; margin: 0 1px 0 6px; color: #6d7083; }

/* Políticas */
.footer.pie .footer-link a, .footer.pie .footer-link .ck-enlace { font-size: 15px; color: #fff; }
.footer.pie .footer-link a:hover, .footer.pie .footer-link .ck-enlace:hover { color: #ff7300; letter-spacing: 0; text-decoration: none; }
.footer.pie .footer-link .ck-enlace::before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; }

@media (max-width: 767.98px) {
    .pie-marca { justify-content: center; text-align: center; padding: 24px 0 20px; margin-bottom: 26px; }
    .pie-logo img { width: 200px; }
    .footer.pie .pie-col { margin-bottom: 30px; }
}

/* Portada: el título «Productos destacados», en azul marino */
.section-header p.titulo-destacados { color: #0b1d8d; }
[data-theme="dark"] .section-header p.titulo-destacados { color: #8fa0ff; }

/* ───── Ficha de producto (columna izquierda): tarjeta con migas, foto, resumen, datos y compra; debajo, descripción, vídeo y PDF ───── */
.single .single-content.ficha-producto { padding: 16px 20px 20px; margin-bottom: 26px; overflow: visible; background: #ffffff; border: 1px solid rgba(11, 29, 141, .15); border-radius: 12px; }
/* Producto destacado (marcado «Portada»): mismo diseño que su ficha del inicio, con borde azul marino y estrella */
.single .single-content.ficha-producto.es-destacado { border-color: #0b1d8d; }
.ficha-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: #8a8ca3; }
.ficha-migas a { color: #6b6d8a; }
.ficha-migas a b { color: #0b1d8d; font-weight: 600; }
.ficha-migas a:hover, .ficha-migas a:hover b { color: #ff7300; text-decoration: none; }
.ficha-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.ficha-cabecera .ficha-visitas { margin: 0 0 0 auto; white-space: nowrap; }
.ficha-foto { position: relative; }
.ficha-foto .destacado-sello { top: 12px; left: 0; min-width: 34px; height: 34px; padding: 0 7px; font-size: 12px; }
.ficha-foto .destacado-sello i { font-size: 15px; }
.ficha-foto .destacado-sello:hover span { max-width: 110px; }
.single .ficha-producto #Img_principal img { margin-bottom: 0; }
.ficha-resumen { margin: 0 0 16px; font-size: 17px; font-weight: 600; line-height: 1.45; color: #202020; }

/* Datos: marca, categoría, código, serie y visitas, en casillas */
.ficha-datos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ficha-dato { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 9px 12px; background: #fff8f1; border: 1px solid rgba(255, 115, 0, .22); border-radius: 10px; color: #202020; line-height: 1.25; transition: border-color .2s ease, background .2s ease; }
.ficha-dato-etiqueta { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8ca3; }
.ficha-dato b { font-size: 15px; font-weight: 700; color: #0b1d8d; overflow-wrap: anywhere; }
.ficha-dato b i { color: #ff7300; font-size: 13px; }
a.ficha-dato:hover { border-color: #ff7300; background: #fff2e6; text-decoration: none; }
a.ficha-dato:hover b { color: #ff7300; }
.single .ficha-producto .ficha-dato-marca img { flex: 0 1 auto; width: auto; max-width: calc(100% - 70px); height: 60px; margin: 0; object-fit: contain; object-position: left center; }
.ficha-dato.ficha-dato-marca { flex: 1.6 1 200px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }   /* el logotipo, a la derecha de la palabra MARCA */

/* Casilla Categoría: el icono de la categoría a la izquierda del nombre */
.ficha-dato.ficha-dato-categoria { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.single .ficha-producto .ficha-dato-categoria img { flex: none; width: 56px; height: 56px; margin: 0; border-radius: 10px; object-fit: cover; }
.ficha-dato-texto { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 575.98px) { .single .ficha-producto .ficha-dato-categoria img { width: 44px; height: 44px; } }
/* Anchos de las casillas (de tableta en adelante): Marca 25 %, Categoría 50 %, Código 25 %; la Serie, si la hay, va debajo */
@media (min-width: 576px) {
    .ficha-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ficha-dato-categoria { grid-column: span 2; }
    .ficha-dato.ficha-dato-marca { gap: 8px; }
    .single .ficha-producto .ficha-dato-marca img { max-width: calc(100% - 58px); }
}

/* Compra: modelo, cantidad y botones */
.ficha-compra { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; padding-top: 16px; border-top: 1px solid rgba(11, 29, 141, .12); }
.ficha-compra > [id^="Info_"] { flex: 1 0 100%; }
.ficha-compra > [id^="Info_"]:empty { display: none; }
.ficha-select { flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 12px; font: inherit; font-size: 15px; color: #202020; background: #ffffff; border: 2px solid #ff7300; border-radius: 8px; cursor: pointer; }
.ficha-cantidad { display: flex; align-items: center; gap: 8px; margin: 0; height: 48px; padding: 0 6px 0 12px; border: 1px solid rgba(11, 29, 141, .3); border-radius: 8px; background: #ffffff; font-size: 14px; color: #6b6d8a; }
.ficha-cantidad input { width: 62px; height: 36px; border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 700; color: #0b1d8d; text-align: center; }
.ficha-cantidad:focus-within, .ficha-select:focus { outline: 3px solid rgba(255, 115, 0, .35); outline-offset: 1px; }
.ficha-cantidad input:focus { outline: 0; }
.ficha-boton { flex: 1 1 210px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 16px; border: 0; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; color: #ffffff; cursor: pointer; text-align: center; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.ficha-boton:hover { color: #ffffff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 29, 141, .18); }
.ficha-boton i { font-size: 18px; }
.ficha-anadir { background: #0b1d8d; }
.ficha-anadir:hover { background: #ff7300; }
.ficha-anadir font { font-size: inherit; }                      /* el texto «Añadido» que pone js/funciones.js, sin agrandar el botón */
.ficha-anadir .material-icons { font-size: 20px; vertical-align: middle; }
.ficha-whatsapp { background: #25a84a; }
.ficha-whatsapp:hover { background: #1e8f3e; }
.ficha-ver-presupuesto { flex: 1 0 100%; text-align: right; }
.ficha-ver-presupuesto a { font-size: 15px; font-weight: 600; color: #0b1d8d; }
.ficha-ver-presupuesto a:hover { color: #ff7300; text-decoration: none; }

/* Bloques de debajo: descripción, vídeo y documentación */
.ficha-bloque { margin-bottom: 26px; }
.ficha-bloque h2 { position: relative; margin: 0 0 14px; padding-bottom: 8px; font-size: 20px; font-weight: 700; color: #0b1d8d; }
.ficha-bloque h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: #ff7300; }
.ficha-descripcion { font-size: 16px; line-height: 1.65; color: #202020; overflow-wrap: anywhere; }
.ficha-descripcion img, .ficha-descripcion iframe, .ficha-descripcion table { max-width: 100%; }
.ficha-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; }
.ficha-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ficha-pdf { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 16px; border: 1px solid rgba(11, 29, 141, .3); border-radius: 8px; background: #ffffff; color: #0b1d8d; font-weight: 600; transition: border-color .2s ease, color .2s ease; }
.ficha-pdf i { font-size: 22px; color: #c0392b; }
.ficha-pdf span { min-width: 0; overflow-wrap: anywhere; }
.ficha-pdf:hover { border-color: #ff7300; color: #ff7300; text-decoration: none; }

@media (max-width: 575.98px) {
    .single .single-content.ficha-producto { padding: 12px 14px 16px; }
    .ficha-resumen { font-size: 16px; }
    .ficha-dato { flex-basis: calc(50% - 5px); }
    .ficha-cantidad { flex: 1 1 auto; justify-content: space-between; }
    .ficha-boton { flex-basis: 100%; }
    .ficha-ver-presupuesto { text-align: center; }
}

[data-theme="dark"] .single .single-content.ficha-producto { background: transparent; border-color: rgba(255, 255, 255, .18); }
[data-theme="dark"] .single .single-content.ficha-producto.es-destacado { border-color: #8fa0ff; }
[data-theme="dark"] .ficha-migas a b, [data-theme="dark"] .ficha-dato b, [data-theme="dark"] .ficha-bloque h2, [data-theme="dark"] .ficha-ver-presupuesto a { color: #8fa0ff; }
[data-theme="dark"] .ficha-resumen, [data-theme="dark"] .ficha-descripcion { color: #eceefb; }
[data-theme="dark"] .ficha-dato { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); }
[data-theme="dark"] .ficha-select, [data-theme="dark"] .ficha-cantidad, [data-theme="dark"] .ficha-pdf { background: #1c1d29; color: #eceefb; }
[data-theme="dark"] .ficha-cantidad input, [data-theme="dark"] .ficha-pdf { color: #eceefb; }

/* Portada: entrada animada de los bloques al aparecer en pantalla (js/main.js pone las clases y --orden). Cada bloque, un efecto. */
.animar-pendiente:not(.animar-ya) .animar-item { opacity: 0; }
.animar-ya .animar-item { animation-duration: .6s; animation-fill-mode: backwards; animation-delay: calc(var(--orden, 0) * 80ms); }
/* Categorías: salto desde abajo con rebote */
.animar-ya[data-animacion="salto"] .animar-item { animation-name: anim-salto; animation-timing-function: cubic-bezier(.2, .8, .3, 1.25); }
@keyframes anim-salto { from { opacity: 0; transform: translateY(26px) scale(.82); } to { opacity: 1; transform: none; } }
/* Productos destacados: la ficha se levanta girando, como una carta */
.animar-ya[data-animacion="volteo"] .animar-item { animation-name: anim-volteo; animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 100%; }
@keyframes anim-volteo { from { opacity: 0; transform: perspective(900px) rotateX(-55deg) translateY(30px); } to { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); } }
/* Subcategorías: las fichas entran desde los lados, alternando izquierda y derecha */
.animar-ya[data-animacion="lados"] .animar-item { animation-name: anim-desde-izquierda; animation-timing-function: cubic-bezier(.2, .7, .2, 1); animation-delay: calc(var(--orden, 0) * 110ms); }
.animar-ya[data-animacion="lados"] .animar-item:nth-child(even) { animation-name: anim-desde-derecha; }
@keyframes anim-desde-izquierda { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes anim-desde-derecha { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
/* Marcas: los logotipos caen desde arriba, girando un poco, y rebotan */
.animar-ya[data-animacion="caida"] .animar-item { animation-name: anim-caida; animation-duration: .7s; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); animation-delay: calc(var(--orden, 0) * 60ms); }
@keyframes anim-caida { from { opacity: 0; transform: translateY(-40px) rotate(-8deg) scale(.85); } to { opacity: 1; transform: none; } }

/* ───── Páginas de políticas (devoluciones…): texto en columna centrada, con márgenes laterales también en móvil ───── */
.pagina-legal { padding: 30px 0 50px; }
.pagina-legal .container { max-width: 860px; padding-left: 20px; padding-right: 20px; }
.legal-entrada { margin: 0 0 22px; font-size: 18px; font-weight: 600; line-height: 1.5; color: #202020; text-align: center; }
.legal-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.legal-dato { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; text-align: center; background: #fff8f1; border: 1px solid rgba(255, 115, 0, .25); border-radius: 12px; }
.legal-dato i { font-size: 24px; color: #ff7300; margin-bottom: 4px; }
.legal-dato b { font-size: 17px; color: #0b1d8d; line-height: 1.2; }
.legal-dato span { font-size: 13px; line-height: 1.35; color: #6b6d8a; }
.legal-bloque { margin-bottom: 16px; padding: 20px 22px; background: #ffffff; border: 1px solid rgba(11, 29, 141, .15); border-radius: 12px; }
.legal-bloque h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; font-weight: 700; line-height: 1.3; color: #0b1d8d; }
.legal-bloque h2 i { flex: 0 0 auto; font-size: 18px; color: #ff7300; }
.legal-bloque p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: #202020; overflow-wrap: anywhere; }
.legal-bloque p:last-child { margin-bottom: 0; }
.legal-bloque a { color: #0b1d8d; font-weight: 600; text-decoration: underline; }
.legal-bloque a:hover { color: #ff7300; }
.legal-contacto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 26px; padding: 20px; background: #0b1d8d; border-radius: 12px; }
.legal-contacto p { flex: 1 0 100%; margin: 0 0 4px; font-size: 17px; font-weight: 600; color: #ffffff; text-align: center; }
.legal-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 8px; background: #ffffff; color: #0b1d8d; font-weight: 700; transition: background .2s ease, color .2s ease; }
.legal-boton:hover { background: #ff7300; color: #ffffff; text-decoration: none; }
.legal-boton-whatsapp { background: #25a84a; color: #ffffff; }
.legal-boton-whatsapp:hover { background: #1e8f3e; }
/* Tabla de cookies y botón «Configuración de cookies» dentro de un bloque */
.legal-bloque .ck-tabla { margin: 0 0 14px; }
.legal-bloque .ck-tabla code { color: #0b1d8d; overflow-wrap: anywhere; }
.legal-bloque .ck-enlace { color: #0b1d8d; font-weight: 600; }
.legal-bloque .ck-enlace:hover { color: #ff7300; }
[data-theme="dark"] .legal-bloque .ck-tabla code, [data-theme="dark"] .legal-bloque .ck-enlace { color: #8fa0ff; }
/* En móvil la tabla de cookies pasa a fichas: una por cookie, con el nombre de cada dato delante */
@media (max-width: 575.98px) {
    .legal-bloque .ck-tabla thead { display: none; }
    .legal-bloque .ck-tabla, .legal-bloque .ck-tabla tbody, .legal-bloque .ck-tabla tr, .legal-bloque .ck-tabla td { display: block; width: 100%; }
    .legal-bloque .ck-tabla tr { padding: 10px 0; border-bottom: 1px solid rgba(11, 29, 141, .15); }
    .legal-bloque .ck-tabla tr:first-child { padding-top: 0; }
    .legal-bloque .ck-tabla td { padding: 2px 0; border: 0; font-size: 14.5px; line-height: 1.5; }
    .legal-bloque .ck-tabla td:first-child { font-size: 16px; font-weight: 700; }
    .legal-bloque .ck-tabla td:nth-child(2) { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: #8a8ca3; }
    .legal-bloque .ck-tabla td:nth-child(4)::before { content: "Duración: "; font-weight: 600; }
}
@media (max-width: 575.98px) {
    .pagina-legal { padding: 22px 0 36px; }
    .legal-entrada { font-size: 16px; text-align: left; }
    .legal-resumen { grid-template-columns: 1fr; gap: 8px; }
    .legal-dato { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; padding: 12px 14px; text-align: left; }
    .legal-dato i { margin: 0; font-size: 20px; }
    .legal-dato span { flex: 1 0 100%; }
    .legal-bloque { padding: 16px; }
    .legal-bloque h2 { font-size: 17px; }
    .legal-boton { flex: 1 1 100%; }
}
[data-theme="dark"] .legal-entrada, [data-theme="dark"] .legal-bloque p { color: #eceefb; }
[data-theme="dark"] .legal-bloque, [data-theme="dark"] .legal-dato { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); }
[data-theme="dark"] .legal-bloque h2, [data-theme="dark"] .legal-dato b, [data-theme="dark"] .legal-bloque a { color: #8fa0ff; }
[data-theme="dark"] .legal-dato span { color: #b9bcd3; }

/* ───── Contacto: datos de contacto a la izquierda (tarjeta azul marino) y formulario a la derecha ───── */
.pagina-contacto { padding: 30px 0 50px; }
.pagina-contacto .container { padding-left: 20px; padding-right: 20px; }
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; max-width: 1040px; margin: 0 auto; }
.contacto-datos { padding: 26px 24px; background: #0b1d8d; border-radius: 14px; color: #ffffff; }
.contacto-datos h2 { margin: 0 0 8px; font-size: 26px; font-weight: 700; color: #ffffff; }
.contacto-entrada { margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.contacto-via { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 11px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #ffffff; transition: background .2s ease, transform .15s ease; }
.contacto-via:hover { background: rgba(255, 255, 255, .18); color: #ffffff; text-decoration: none; transform: translateX(3px); }
.contacto-via i { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #ff7300; color: #ffffff; font-size: 18px; }
.contacto-via-whatsapp i { background: #25d366; font-size: 22px; }
.contacto-via span { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.contacto-via small { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.contacto-via b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.contacto-redes { display: flex; gap: 10px; margin-top: 18px; }
.contacto-redes a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: #ffffff; transition: background .2s ease, border-color .2s ease; }
.contacto-redes a:hover { background: #ff7300; border-color: #ff7300; color: #ffffff; text-decoration: none; }

.contacto-formulario { padding: 26px 24px; background: #ffffff; border: 1px solid rgba(11, 29, 141, .15); border-radius: 14px; }
.contacto-formulario h2 { position: relative; margin: 0 0 20px; padding-bottom: 10px; font-size: 22px; font-weight: 700; color: #0b1d8d; }
.contacto-formulario h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: #ff7300; }
.contacto-campo { margin-bottom: 14px; }
.contacto-campo label { display: block; margin: 0 0 5px; font-size: 14px; font-weight: 600; color: #202020; }
.contacto-campo label span { color: #ff7300; }
.contacto-campo input, .contacto-campo textarea { display: block; width: 100%; padding: 11px 13px; font: inherit; font-size: 16px; color: #202020; background: #fffdfb; border: 1px solid rgba(11, 29, 141, .28); border-radius: 8px; transition: border-color .2s ease, box-shadow .2s ease; }
.contacto-campo textarea { min-height: 140px; resize: vertical; }
.contacto-campo input:focus, .contacto-campo textarea:focus { outline: 0; border-color: #ff7300; box-shadow: 0 0 0 3px rgba(255, 115, 0, .2); }
.contacto-aviso { margin: 5px 0 0; font-size: 13.5px; font-weight: 600; color: #c0392b; }
.contacto-aviso:empty { display: none; }
/* Campo trampa contra robots: fuera de la vista (no con display:none, que algunos robots detectan) */
.contacto-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Casilla de aceptación de la política de privacidad */
.contacto-acepto { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 6px; font-size: 15px; line-height: 1.45; color: #202020; cursor: pointer; }
.contacto-acepto input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #ff7300; cursor: pointer; }
.contacto-acepto a { color: #0b1d8d; font-weight: 600; text-decoration: underline; }
.contacto-obligatorio { color: #ff7300; }
.contacto-enviar:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.contacto-resultado { padding: 18px 20px; background: #eaf7ee; border: 1px solid #25a84a; border-radius: 10px; font-weight: 600; }
[data-theme="dark"] .contacto-acepto { color: #eceefb; }
[data-theme="dark"] .contacto-acepto a { color: #8fa0ff; }
[data-theme="dark"] .contacto-resultado { background: rgba(37, 168, 74, .15); }
.contacto-nota { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: #6b6d8a; }
.contacto-nota a { color: #0b1d8d; text-decoration: underline; }
.contacto-enviar { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 10px 28px; border: 0; border-radius: 8px; background: #ff7300; color: #ffffff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.contacto-enviar:hover { background: #0b1d8d; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 29, 141, .2); }
.contacto-resultado:empty { display: none; }
.contacto-resultado { font-size: 17px; line-height: 1.55; color: #202020; }

@media (max-width: 991.98px) {
    .contacto-rejilla { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 575.98px) {
    .pagina-contacto { padding: 22px 0 36px; }
    .contacto-datos, .contacto-formulario { padding: 20px 16px; }
    .contacto-datos h2 { font-size: 23px; }
    .contacto-enviar { width: 100%; }
}
[data-theme="dark"] .contacto-formulario { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); }
[data-theme="dark"] .contacto-formulario h2, [data-theme="dark"] .contacto-nota a { color: #8fa0ff; }
[data-theme="dark"] .contacto-campo label, [data-theme="dark"] .contacto-resultado { color: #eceefb; }
[data-theme="dark"] .contacto-campo input, [data-theme="dark"] .contacto-campo textarea { background: #1c1d29; color: #eceefb; border-color: rgba(255, 255, 255, .25); }
[data-theme="dark"] .contacto-nota { color: #b9bcd3; }

/* Página de una categoría: botones azul marino de sus subcategorías, con el icono de cada una */
.sub-boton { display: inline-flex; align-items: center; gap: 8px; min-width: 170px; min-height: 48px; margin: 3px; padding: 5px 14px 5px 6px; vertical-align: middle; border: 1px solid #0b1d8d; border-radius: 10px; background: #0b1d8d; color: #ffffff; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.sub-boton img { flex: none; width: 38px; height: 38px; border-radius: 8px; object-fit: cover; transition: filter .2s ease; }
.sub-boton span { min-width: 0; }
.sub-boton:hover { background: #ff7300; border-color: #ff7300; color: #ffffff; text-decoration: none; transform: translateY(-1px); }
@media (max-width: 575.98px) { .sub-boton { min-width: calc(50% - 8px); font-size: 13px; padding-right: 8px; } .sub-boton img { width: 32px; height: 32px; } }

/* Portada y página de marca: las fichas de categorías con subcategorías, centradas (son pocas y no llenan la fila) */
@media (min-width: 576px) {
    .categorias-pagina.categorias-portada { width: 94%; max-width: 1400px; }
    .categorias-portada .categorias-rejilla { display: flex; flex-wrap: wrap; justify-content: center; }   /* la última fila también queda centrada */
    .categorias-portada .categorias-rejilla > .categoria-ficha { flex: 1 1 270px; max-width: 340px; margin: 0; }
}

/* Ficha de producto, columna lateral: bloque «Subcategorías» (mismo diseño que «Categorías», iconos azul marino) */
.sidebar .subcategorias-widget .categoria-card.es-actual { border-color: #0b1d8d; background: #eef0fb; font-weight: 700; }   /* la subcategoría del producto que se está viendo */
[data-theme="dark"] .sidebar .subcategorias-widget .categoria-card.es-actual { background: rgba(143, 160, 255, .15); border-color: #8fa0ff; }

/* Escritorio: las fichas de categorías con subcategorías, siempre en 4 columnas */
@media (min-width: 992px) {
    .categorias-portada .categorias-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .categorias-portada .categorias-rejilla > .categoria-ficha { max-width: none; }
    /* Con 4 columnas la ficha es estrecha: icono naranja y título más pequeños para que el nombre no se salga */
    .categorias-portada .categoria-ficha-cabecera { gap: 12px; padding: 14px 14px 10px; }
    .categorias-portada .categoria-ficha-cabecera img { width: clamp(46px, 4.4vw, 64px); height: clamp(46px, 4.4vw, 64px); border-radius: 11px; }
    .categorias-portada .categoria-ficha-cabecera h2 { min-width: 0; font-size: clamp(15px, 1.35vw, 19px); overflow-wrap: anywhere; }
    .categorias-portada .categoria-ficha-subs { padding-left: 14px; padding-right: 14px; }
}

/* ───── Ficha de producto: animaciones al cargar la página ───── */
@media (prefers-reduced-motion: no-preference) {
    /* Franja naranja: la miniatura entra girando y el título se desliza desde la izquierda */
    .franja-titulo-larga .franja-titulo-icono { animation: ficha-icono-entra .7s cubic-bezier(.2, .8, .3, 1.3) .1s backwards; }
    .franja-titulo-larga h1 { animation: ficha-titulo-entra .7s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
    /* Foto principal: aparece creciendo, con un pequeño rebote */
    .ficha-producto #Img_principal { animation: ficha-foto-entra .9s cubic-bezier(.2, .8, .3, 1.15) .25s backwards; }
    .ficha-foto .destacado-sello { animation: ficha-icono-entra .6s cubic-bezier(.2, .8, .3, 1.4) 1s backwards; }
    /* Columna izquierda: la tarjeta y sus partes suben una tras otra; después, los bloques de debajo */
    .single .single-content.ficha-producto { animation: ficha-sube .6s cubic-bezier(.2, .7, .2, 1) backwards; }
    .ficha-producto .ficha-cabecera { animation: ficha-sube .5s ease .2s backwards; }
    .ficha-producto .ficha-resumen { animation: ficha-sube .6s cubic-bezier(.2, .7, .2, 1) .65s backwards; }
    .ficha-producto .ficha-dato { animation: ficha-sube .55s cubic-bezier(.2, .7, .2, 1) backwards; }
    .ficha-producto .ficha-dato:nth-child(1) { animation-delay: .8s; }
    .ficha-producto .ficha-dato:nth-child(2) { animation-delay: .9s; }
    .ficha-producto .ficha-dato:nth-child(3) { animation-delay: 1s; }
    .ficha-producto .ficha-dato:nth-child(4) { animation-delay: 1.1s; }
    .ficha-producto .ficha-compra { animation: ficha-sube .6s cubic-bezier(.2, .7, .2, 1) 1.15s backwards; }
    .single .ficha-bloque { animation: ficha-sube .7s cubic-bezier(.2, .7, .2, 1) 1.3s backwards; }
    .single .ficha-bloque + .ficha-bloque { animation-delay: 1.45s; }
    .single .ficha-bloque + .ficha-bloque + .ficha-bloque { animation-delay: 1.6s; }
    /* «Añadir al presupuesto»: entra con rebote y luego late con un halo naranja y un brillo que lo cruza, para que destaque */
    .ficha-anadir { position: relative; overflow: hidden; animation: ficha-boton-entra .7s cubic-bezier(.2, .8, .3, 1.4) 1.35s backwards, ficha-boton-late 2.6s ease-in-out 2.4s infinite; }
    .ficha-anadir::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); animation: ficha-boton-brillo 2.6s ease-in-out 2.4s infinite; pointer-events: none; }
    .ficha-anadir:hover, .ficha-anadir:disabled { animation: none; }
    .ficha-anadir:hover::after { animation: none; opacity: 0; }
}
@keyframes ficha-titulo-entra { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes ficha-icono-entra { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes ficha-foto-entra { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes ficha-sube { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ficha-boton-entra { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ficha-boton-late { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 115, 0, 0); transform: scale(1); } 12% { box-shadow: 0 0 0 0 rgba(255, 115, 0, .55); transform: scale(1.04); } 45% { box-shadow: 0 0 0 14px rgba(255, 115, 0, 0); transform: scale(1); } }
@keyframes ficha-boton-brillo { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

/* ───── Entrada animada en todas las páginas (js/main.js pone las clases anim-espera / anim-vista) ───── */
/* Bloques de contenido y fichas: ocultos hasta que entran en pantalla; entonces suben, uno tras otro */
.anim-espera:not(.anim-vista) { opacity: 0; }
.anim-vista { animation: ficha-sube .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--orden, 0) * 80ms); }
@media (prefers-reduced-motion: no-preference) {
    /* Franja naranja de todas las páginas: el logotipo o icono entra girando y el título se desliza desde la izquierda */
    .franja-titulo .franja-titulo-icono { animation: ficha-icono-entra .7s cubic-bezier(.2, .8, .3, 1.3) .1s backwards; }
    .franja-titulo h1 { animation: ficha-titulo-entra .7s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
    /* Desplegable de series de la marca */
    .filtro-serie { animation: ficha-sube .6s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
    /* Página de categoría: el desplegable de subcategorías y los botones azules de subcategoría, uno tras otro */
    .filtro-subcategoria { animation: ficha-sube .6s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
    .sub-boton { animation: ficha-boton-entra .5s cubic-bezier(.2, .8, .3, 1.3) backwards; }
    .sub-boton:nth-of-type(1) { animation-delay: 0.37s; }
    .sub-boton:nth-of-type(2) { animation-delay: 0.44s; }
    .sub-boton:nth-of-type(3) { animation-delay: 0.51s; }
    .sub-boton:nth-of-type(4) { animation-delay: 0.58s; }
    .sub-boton:nth-of-type(5) { animation-delay: 0.65s; }
    .sub-boton:nth-of-type(6) { animation-delay: 0.72s; }
    .sub-boton:nth-of-type(7) { animation-delay: 0.79s; }
    .sub-boton:nth-of-type(8) { animation-delay: 0.86s; }
    .sub-boton:nth-of-type(9) { animation-delay: 0.93s; }
    .sub-boton:nth-of-type(10) { animation-delay: 1.00s; }
    .sub-boton:nth-of-type(11) { animation-delay: 1.07s; }
    .sub-boton:nth-of-type(12) { animation-delay: 1.14s; }
}