/* ===================================================================
   bicons · Liquid Glass + Dark Mode  (capa sobre el tema "axil")
   - Claro por defecto. Oscuro con html[data-theme="dark"].
   - No modifica web_bicons.css; solo lo recubre.
   =================================================================== */

/* -------- Tokens -------- */
:root {
    --glass-bg:        rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.72);
    --glass-menu:      rgba(255, 255, 255, 0.94);
    --glass-border:    rgba(255, 255, 255, 0.65);
    --glass-shadow:    0 10px 30px rgba(20, 30, 60, 0.10);
    --glass-shadow-lg: 0 18px 45px rgba(20, 30, 60, 0.16);
    --glass-sheen:     inset 0 1px 0 rgba(255, 255, 255, 0.60);
    --glass-blur:      14px;

    --page-bg:
        radial-gradient(1200px 600px at 8% -8%,  rgba(200, 16, 46, 0.06), transparent 60%),
        radial-gradient(1000px 700px at 108% 6%, rgba(104, 101, 255, 0.07), transparent 55%),
        linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
}

html[data-theme="dark"] {
    /* Remapeo de variables del propio tema → texto/superficies claras */
    --color-body:      #b9bdcc;
    --color-text-dark: #f1f3f8;
    --color-light:     #1b1d27;
    --color-gray-1:    #a7abbb;
    --color-gray-2:    #9296a6;

    --glass-bg:        rgba(30, 33, 46, 0.50);
    --glass-bg-strong: rgba(26, 28, 40, 0.66);
    --glass-menu:      rgba(22, 24, 34, 0.95);
    --glass-border:    rgba(255, 255, 255, 0.10);
    --glass-shadow:    0 10px 30px rgba(0, 0, 0, 0.45);
    --glass-shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.55);
    --glass-sheen:     inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --page-bg:
        radial-gradient(1200px 600px at 8% -8%,  rgba(200, 16, 46, 0.16), transparent 60%),
        radial-gradient(1000px 700px at 108% 6%, rgba(90, 100, 210, 0.14), transparent 55%),
        linear-gradient(180deg, #1c1f29 0%, #15171f 100%);
}

/* -------- Fondo de página (el "lienzo" que el cristal difumina) -------- */
/* El tema pinta .main-wrapper de blanco; lo sustituimos por el degradado. */
body,
.main-wrapper {
    background: var(--page-bg) !important;
    background-attachment: fixed !important;
    transition: background-color .4s ease, color .4s ease;
}

/* Secciones translúcidas para que el cristal deje ver el fondo */
.bg-color-light,
.section.bg-color-light,
.section.call-to-action-area {
    background-color: transparent !important;
}

/* El breadcrumb trae un degradado claro de fondo (background shorthand);
   lo limpiamos del todo para que muestre el fondo de la página (clave en oscuro). */
.breadcrum-area { background: transparent !important; }

/* El banner de la home trae un degradado gris claro a la izquierda; en oscuro
   lo quitamos para que quede uniforme como las páginas de detalle. */
html[data-theme="dark"] .banner.banner-style-4 { background: transparent !important; }

/* El banner aplica un text-shadow blanco al título/subtítulo (para legibilidad
   en claro); sobre fondo oscuro se ve como un glow raro. Lo quitamos en oscuro. */
html[data-theme="dark"] .banner .banner-content .title,
html[data-theme="dark"] .banner.banner-style-4 .banner-content p {
    text-shadow: none;
}

/* Enlaces del menú más nítidos en oscuro (sobre todo el header no fijo) */
html[data-theme="dark"] .mainmenu > li > a { color: #e6e8f0; }

/* Color de texto en oscuro (titulares / utilidades del tema) */
html[data-theme="dark"] .color-dark,
html[data-theme="dark"] .breadcrumb .title.color-dark {
    color: var(--color-text-dark) !important;
}
html[data-theme="dark"] .text-muted { color: var(--color-gray-2) !important; }

/* =====================  GLASS: tarjetas de soluciones  ===================== */
.services-grid.service-style-2 {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-image: none !important;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    box-shadow: var(--glass-shadow), var(--glass-sheen);
    transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease;
}
.services-grid.service-style-2:hover,
.services-grid.service-style-2.active {
    background: var(--glass-bg-strong) !important;
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-lg), var(--glass-sheen);
}

/* Tarjetas a igual altura/distribución dentro de cada fila */
.row.row-eq-height { display: flex; flex-wrap: wrap; }
.row.row-eq-height > [class*="col-"] { display: flex; }
.row.row-eq-height .services-grid.service-style-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.row.row-eq-height .services-grid.service-style-2 .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.row.row-eq-height .services-grid.service-style-2 .content .more-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* =====================  GLASS: cabecera fija  ===================== */
.axil-mainmenu.axil-sticky {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--glass-shadow), var(--glass-sheen);
    border-bottom: 1px solid var(--glass-border);
}

/* Submenú desplegable acristalado (más opaco para que se lea sobre las tarjetas) */
.mainmenu > .menu-item-has-children .axil-submenu {
    background: var(--glass-menu) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--glass-shadow);
}
html[data-theme="dark"] .mainmenu .menu-item-has-children .axil-submenu li a { color: var(--color-body); }
html[data-theme="dark"] .mainmenu .menu-item-has-children .axil-submenu li a:hover { color: var(--color-primary); }

/* El tema dibuja una línea a media altura (top:50%) que parece "tachado".
   La quitamos y usamos un resaltado limpio al pasar el ratón. */
.mainmenu > .menu-item-has-children .axil-submenu li a::after { display: none !important; }
.mainmenu > .menu-item-has-children .axil-submenu li a {
    border-radius: 8px;
    transition: background-color .25s ease, color .25s ease;
}
.mainmenu > .menu-item-has-children .axil-submenu li a:hover,
.mainmenu > .menu-item-has-children .axil-submenu li a.active {
    background: rgba(200, 16, 46, 0.08);
    color: var(--color-primary);
}
html[data-theme="dark"] .mainmenu > .menu-item-has-children .axil-submenu li a:hover,
html[data-theme="dark"] .mainmenu > .menu-item-has-children .axil-submenu li a.active {
    background: rgba(255, 255, 255, 0.07);
}

/* =====================  CTA: panel limpio (sin la franja roja gigante) ===================== */
.call-to-action-area { padding: 50px 0; }
.call-to-action-area:before { display: none !important; }
.call-to-action {
    background: linear-gradient(135deg, var(--color-primary) 0%, #9d0c24 100%);
    border-radius: 26px;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(200, 16, 46, 0.30), var(--glass-sheen);
}
.call-to-action:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 200px at 80% -20%, rgba(255, 255, 255, 0.22), transparent 60%);
    pointer-events: none;
}
.call-to-action .section-heading {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.call-to-action .section-heading .title { color: #fff; }

/* Botones del CTA: más contenidos y con jerarquía (2º como contorno) */
.call-to-action .axil-btn {
    padding: 11px 26px;
    font-size: 15px;
    margin: 8px 5px 0;
}
.call-to-action .axil-btn.btn-fill-white + .axil-btn.btn-fill-white {
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.75);
}
.call-to-action .axil-btn.btn-fill-white + .axil-btn.btn-fill-white::after { display: none; }
.call-to-action .axil-btn.btn-fill-white + .axil-btn.btn-fill-white:hover {
    background-color: #fff;
    color: var(--color-primary);
}

/* =====================  Footer  ===================== */
.footer-area {
    border-top: 1px solid var(--glass-border);
    background: transparent;
}

/* =====================  Formulario de contacto (iframe) ===================== */
#contacto iframe {
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--glass-shadow);
}

/* =====================  Modales y offcanvas en oscuro  ===================== */
html[data-theme="dark"] .modal-content {
    background-color: #1b1d27;
    color: var(--color-body);
    border: 1px solid var(--glass-border);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .modal-title { color: var(--color-text-dark); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }

html[data-theme="dark"] .offcanvas {
    background-color: rgba(20, 21, 28, 0.92) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    color: var(--color-body);
}
html[data-theme="dark"] .offcanvas .main-navigation li a,
html[data-theme="dark"] .offcanvas .contact-info-wrap .title,
html[data-theme="dark"] .offcanvas address,
html[data-theme="dark"] .offcanvas .contact-inner h5 { color: var(--color-text-dark); }

/* =====================  Páginas de detalle en oscuro (acordeones, precios)  ===================== */
html[data-theme="dark"] .pricing-table,
html[data-theme="dark"] .pricing-borderd,
html[data-theme="dark"] .shadow-box,
html[data-theme="dark"] .contact-form-box {
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--glass-border);
    color: var(--color-body);
}
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .accordion-item {
    background-color: transparent !important;
    border-color: var(--glass-border) !important;
}
html[data-theme="dark"] .accordion-button {
    color: var(--color-text-dark) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .accordion-button.collapsed { background-color: transparent !important; }
html[data-theme="dark"] .accordion-body { background-color: transparent !important; color: var(--color-body) !important; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); }

/* =====================  Logo en modo oscuro  ===================== */
/* El wordmark "bicons" es granate; en oscuro lo pasamos a blanco para que contraste. */
html[data-theme="dark"] .header-logo img,
html[data-theme="dark"] .mobile-nav-logo img {
    filter: brightness(0) invert(1);
}

/* =====================  Botón de cambio de tema  ===================== */
.theme-toggle-item { display: flex; align-items: center; margin-right: 6px; }
.theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    box-shadow: var(--glass-shadow), var(--glass-sheen);
    color: var(--color-text-dark);
    font-size: 16px;
    cursor: pointer;
    transition: color .3s ease, transform .3s ease, background-color .3s ease;
}
.theme-toggle:hover { color: var(--color-primary); transform: translateY(-2px); }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { line-height: 1; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun,
html:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }

/* Animación suave de entrada del header fijo ya existe en el tema; respetamos. */

/* Transiciones globales suaves al cambiar de tema (sin tocar blur para evitar jank) */
.services-grid.service-style-2,
.axil-mainmenu.axil-sticky,
.mainmenu > li > a,
.footer-area,
.modal-content,
.theme-toggle {
    transition-property: background-color, color, border-color, box-shadow, transform;
    transition-duration: .35s;
    transition-timing-function: ease;
}