/*
 * BoxMine — tema para Lagom 2 (estilo "depth")
 * --------------------------------------------
 * Ruta: templates/lagom2/core/styles/depth/assets/css/custom.css
 *
 * Lagom carga este fichero el ultimo y esta construido entero sobre variables
 * CSS, asi que el grueso del rediseño se hace redefiniendolas: no hay que tocar
 * ni una plantilla .tpl, y deshacerlo es borrar este fichero.
 *
 * El objetivo es que el billing se parezca a boxmineworld.com, de donde salen
 * los valores medidos en la propia web:
 *   fondo #36393E · texto #FAFAFA · nav translucida con blur(12px)
 *   titulares de 48px y peso 700 · botones tipo pastilla · tarjetas que se
 *   levantan al pasar por encima
 *
 * Paleta de la hoja de estilo de BoxMine:
 *   #0065FF azul · #FFD76B arena · #B59D12 oro · #36393E pizarra · #3F497A indigo
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Bebas+Neue&display=swap');

/* ==========================================================================
   1. Paleta
   ========================================================================== */

:root {
    /* Marca */
    --bm-blue: #0065FF;
    --bm-blue-dark: #0048B8;
    --bm-blue-light: #3D8BFF;
    --bm-sand: #FFD76B;
    --bm-gold: #B59D12;
    --bm-indigo: #3F497A;

    /* Superficies, medidas en boxmineworld.com */
    --bm-bg: #36393E;          /* fondo de pagina */
    --bm-surface: #3C4046;     /* tarjetas y bloques */
    --bm-surface-2: #43474E;   /* bloques elevados, cabeceras de tabla */
    --bm-line: #4C515A;        /* separadores */
    --bm-text: #FAFAFA;
    --bm-text-soft: #B9BFC9;
    --bm-text-faded: #8B92A0;

    --brand-primary: var(--bm-blue);
    --brand-primary-lighter: var(--bm-blue-light);
    --brand-primary-lighter-2: #2F6BD8;
    --brand-primary-lighter-3: #22335A;   /* fondos tenues sobre oscuro */
    --brand-primary-lighter-4: #1B2740;
    --brand-primary-darker: var(--bm-blue-dark);
    --brand-primary-gradient-start: var(--bm-indigo);
    --brand-primary-gradient-end: var(--bm-blue);

    --brand-secondary: var(--bm-indigo);
    --brand-secondary-lighter: #5B67A0;
    --brand-secondary-darker: #2B3358;
    --brand-secondary-gradient-start: #2B3358;
    --brand-secondary-gradient-end: var(--bm-indigo);

    /*
     * La escala de grises se invierte. Lagom la usa dando por hecho que el
     * fondo es blanco: `--gray-darker` para titulares y `--gray-faded` para
     * fondos suaves. Invirtiendola, todo el tema pasa a oscuro de golpe sin
     * tener que perseguir cada regla.
     */
    --gray-base: var(--bm-text-soft);
    --gray-lighter: var(--bm-text-faded);
    --gray-lighter-2: #6E7684;
    --gray-lighter-3: var(--bm-line);
    --gray-lighter-4: var(--bm-surface-2);
    --gray-faded: var(--bm-surface-2);
    --gray-darker: var(--bm-text);
    --gray-gradient-start: var(--bm-surface);
    --gray-gradient-end: var(--bm-surface-2);

    --brand-warning: var(--bm-sand);
    --brand-warning-lighter: #FFE49A;
    --brand-warning-lighter-3: #4A3F1C;
    --brand-warning-lighter-4: #3A3318;
    --brand-warning-darker: var(--bm-gold);

    --brand-success: #3ECF8E;
    --brand-success-lighter: #6BDCA8;
    --brand-success-lighter-3: #1D3B31;
    --brand-success-lighter-4: #18302A;

    --brand-danger: #F26D6D;
    --brand-danger-lighter: #F79A9A;
    --brand-danger-lighter-3: #47262A;
    --brand-danger-lighter-4: #3A2024;

    /* Superficies de Lagom */
    /* La barra superior tiene su propia variable; sin esto se queda blanca,
       que en movil es lo unico claro de toda la pantalla. */
    --app-nav-top-bg: rgba(54, 57, 62, .82);
    --app-nav-navbar-bg: var(--app-nav-top-bg);
    --body-bg: var(--bm-bg);
    --ui-block-bg: var(--bm-surface);
    --ui-block-bg-form: var(--bm-surface);
    --ui-block-header-bg: var(--bm-surface);
    --ui-block-overlay-bg: rgba(54, 57, 62, .82);
    --ui-block-border-color: var(--bm-line);
    --ui-block-divider-color: var(--bm-line);
    --main-body-sidebar-content-bg: var(--bm-surface);
    --table-container-header-bg: var(--bm-surface-2);
    --popover-bg: var(--bm-surface-2);
    --jumbotron-bg: var(--bm-surface-2);

    /* Texto */
    --text-body-color: var(--bm-text-soft);
    --text-lighter-color: var(--bm-text-faded);
    --text-heading-color: var(--bm-text);
    --link-color: var(--bm-blue-light);
    --link-hover-color: var(--bm-sand);
    --ui-nav-link-color: var(--bm-text-soft);
    --ui-nav-link-hover-color: var(--bm-text);

    /* Tipografia */
    --font-family-base: 'Poppins';
    --font-family-custom: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Forma */
    --border-radius-base: 12px;
    --border-radius-lg: 16px;
    --border-radius-xlg: 22px;

    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .24), 0 2px 10px rgba(0, 0, 0, .16);
    --box-shadow-base: 0 2px 6px rgba(0, 0, 0, .26), 0 8px 26px rgba(0, 0, 0, .22);
    --box-shadow-lg: 0 4px 10px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .3);

    /* Ilustraciones SVG de Lagom */
    --svg-illustration-color-1: var(--bm-blue);
    --svg-illustration-color-2: var(--bm-indigo);
    --svg-illustration-color-3: var(--bm-blue-light);
    --svg-illustration-color-4: var(--bm-sand);
    --svg-illustration-color-5: var(--bm-gold);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
    font-family: var(--font-family-custom);
    background-color: var(--bm-bg);
    color: var(--bm-text-soft);
    -webkit-font-smoothing: antialiased;
}

/* Lagom pinta varios contenedores en blanco duro; se llevan al fondo oscuro. */
.main-body,
.main-content,
.content-wrapper,
.page-content,
.container-fluid > .row > [class*='col-'] > .white-bg {
    background-color: transparent;
}

/* Titulares grandes y con cuerpo, como en la web. */
h1, .h1, .main-header-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bm-text);
}

h2, .h2 { font-weight: 700; letter-spacing: -0.015em; color: var(--bm-text); }
h3, .h3, h4, .h4 { font-weight: 600; color: var(--bm-text); }

/* La display de la marca, solo en los titulares grandes. */
.banner-title,
.jumbotron h1,
.site-header h1 {
    font-family: 'Bebas Neue', var(--font-family-custom);
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    line-height: 1.05;
}

::selection { background: var(--bm-blue); color: #fff; }

/* ==========================================================================
   3. Navegacion
   ========================================================================== */

/* Barra superior translucida con desenfoque, igual que boxmineworld.com.
   `.app-nav-header` es la cabecera que se ve en movil: sin ella se queda
   blanca y es lo unico claro de toda la pantalla. */
.app-nav-top,
.app-nav-header,
.navbar-top,
.main-top {
    background-color: rgba(54, 57, 62, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bm-line);
    box-shadow: none;
}

/* Barra lateral: degradado indigo -> azul en vez del naranja de serie. */
.app-nav.app-nav-primary {
    background-image: linear-gradient(165deg, #262B3F 0%, var(--bm-indigo) 48%, var(--bm-blue-dark) 100%);
}

.app-nav.app-nav-primary .nav-link {
    transition: color .16s ease, transform .16s ease;
}

.app-nav.app-nav-primary .nav-link:hover {
    color: var(--bm-sand);
    transform: translateX(2px);
}

.app-nav.app-nav-primary .nav-link.active { color: var(--bm-sand); }

/* El indicador de activo se despliega en vez de aparecer de golpe. */
.app-nav.app-nav-primary .nav-link.active::before {
    background-color: var(--bm-sand);
    animation: bm-crece .22s ease-out;
}

@keyframes bm-crece {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* Menus desplegables: entran deslizando en lugar de saltar. */
.dropdown-menu,
.sf-menu ul,
.top-nav .dropdown-menu {
    background-color: var(--bm-surface-2);
    border: 1px solid var(--bm-line);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
    animation: bm-desplegable .18s ease-out;
}

@keyframes bm-desplegable {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu a,
.dropdown-menu .dropdown-item {
    color: var(--bm-text-soft);
    border-radius: 8px;
    transition: background-color .14s ease, color .14s ease;
}

.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 101, 255, .16);
    color: var(--bm-text);
}

/* ==========================================================================
   4. Botones
   ========================================================================== */

/* Pastillas, como en la web. */
.btn {
    font-weight: 500;
    border-radius: 999px;
    padding-left: 1.4em;
    padding-right: 1.4em;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .1s ease;
}

.btn-primary {
    box-shadow: 0 4px 14px rgba(0, 101, 255, .3);
}

.btn-primary:hover {
    box-shadow: 0 8px 22px rgba(0, 101, 255, .4);
    transform: translateY(-1px);
}

.btn:active { transform: translateY(1px); }

/* La accion de compra en oro, para separarla de "navegar". */
.btn-warning,
.btn-cta {
    color: #2A2D33;
    font-weight: 600;
}

/* ==========================================================================
   5. Tarjetas y bloques
   ========================================================================== */

.tile,
.card,
.panel,
.ui-block,
.pricing-item,
.package-card,
[class*='product-card'] {
    background-color: var(--bm-surface);
    border: 1px solid var(--bm-line);
    border-radius: var(--border-radius-lg);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s cubic-bezier(.2, .7, .3, 1);
}

a.tile:hover,
a.tile:focus-visible,
a > .card:hover,
a > .panel:hover,
.pricing-item:hover,
.package-card:hover,
[class*='product-card']:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .32), 0 0 0 1px rgba(0, 101, 255, .3);
    transform: translateY(-4px);
}

/* El icono acompana al movimiento. */
.tile .tile-icon,
.pricing-item img,
.pricing-item svg,
[class*='product-card'] img {
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

a.tile:hover .tile-icon,
.pricing-item:hover img,
.pricing-item:hover svg,
[class*='product-card']:hover img {
    transform: scale(1.07);
}

/*
 * Entrada escalonada de las tarjetas al cargar. Se limita a las 8 primeras:
 * mas alla el retardo se nota como lentitud en vez de como fluidez.
 */
@media (prefers-reduced-motion: no-preference) {
    .tile,
    .pricing-item,
    .package-card {
        animation: bm-entrada .42s cubic-bezier(.2, .7, .3, 1) both;
    }

    .tile:nth-child(1), .pricing-item:nth-child(1) { animation-delay: .02s; }
    .tile:nth-child(2), .pricing-item:nth-child(2) { animation-delay: .07s; }
    .tile:nth-child(3), .pricing-item:nth-child(3) { animation-delay: .12s; }
    .tile:nth-child(4), .pricing-item:nth-child(4) { animation-delay: .17s; }
    .tile:nth-child(5), .pricing-item:nth-child(5) { animation-delay: .22s; }
    .tile:nth-child(6), .pricing-item:nth-child(6) { animation-delay: .27s; }
    .tile:nth-child(7), .pricing-item:nth-child(7) { animation-delay: .32s; }
    .tile:nth-child(8), .pricing-item:nth-child(8) { animation-delay: .37s; }
}

@keyframes bm-entrada {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Quien pide menos movimiento no lo tiene: ni entradas ni desplazamientos. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   6. Productos y precios
   ========================================================================== */

.pricing-item .price,
.package-card .price,
[class*='product-card'] .price,
.product-price,
.price-value {
    font-family: 'Bebas Neue', var(--font-family-custom);
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--bm-text);
}

.pricing-item .price-currency,
.pricing-item .price-period,
[class*='product-card'] .price-currency,
[class*='product-card'] .price-period {
    font-family: var(--font-family-custom);
    font-size: .82rem;
    font-weight: 500;
    color: var(--bm-text-faded);
}

/* Estados de servicio, legibles sobre fondo oscuro. */
.label-active, .status-active, .badge-active {
    background-color: rgba(62, 207, 142, .16);
    color: #7BE3B4;
}

.label-suspended, .status-suspended {
    background-color: rgba(255, 215, 107, .16);
    color: var(--bm-sand);
}

.label-terminated, .status-terminated {
    background-color: rgba(242, 109, 109, .16);
    color: #F79A9A;
}

/* ==========================================================================
   7. Formularios y tablas
   ========================================================================== */

.form-control,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
select,
textarea {
    background-color: var(--bm-surface-2);
    border: 1px solid var(--bm-line);
    color: var(--bm-text);
    border-radius: var(--border-radius-base);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: var(--bm-surface-2);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 101, 255, .18);
    color: var(--bm-text);
}

::placeholder { color: var(--bm-text-faded); opacity: 1; }

.table { color: var(--bm-text-soft); }

.table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .07em;
    font-weight: 600;
    color: var(--bm-text-faded);
    border-bottom-color: var(--bm-line);
    background-color: transparent;
}

.table td, .table th { border-color: var(--bm-line); }

.table tbody tr { transition: background-color .14s ease; }
.table tbody tr:hover { background-color: rgba(255, 255, 255, .035); }

/* ==========================================================================
   8. Accesibilidad y responsive
   ========================================================================== */

a:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* En movil el contenido respira menos por los lados y los titulares bajan. */
@media (max-width: 767px) {
    :root {
        --main-body-padding-v: var(--spacing-4x);
        --main-header-padding-v: var(--spacing-4x);
    }

    .main-body,
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1, .h1, .main-header-title { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.3rem; }

    /* Las tarjetas de producto a una columna y sin levantarse: en tactil el
       hover se queda pegado y molesta. */
    .pricing-item,
    .package-card,
    [class*='product-card'] { width: 100%; }

    .pricing-item:hover,
    .package-card:hover,
    [class*='product-card']:hover { transform: none; }

    /* Las tablas anchas se desplazan solas en vez de romper el ancho. */
    .table-responsive,
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .btn { padding-left: 1.1em; padding-right: 1.1em; }
}

/* En pantallas tactiles no se aplican los efectos de hover. */
@media (hover: none) {
    a.tile:hover,
    .pricing-item:hover,
    [class*='product-card']:hover { transform: none; box-shadow: var(--box-shadow-sm); }
}

/* La barra de desplazamiento, a juego. */
* { scrollbar-color: var(--bm-line) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--bm-line); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--bm-text-faded); }
/* ==========================================================================
   BoxMine — rediseño estructural
   ==========================================================================
   Esto va despues de la paleta. Aqui NO se cambian colores: se cambia la forma.

   Se escribio contra la estructura real del DOM, no adivinando clases:

     .app-nav.app-nav-primary            barra lateral, 140px, iconos apilados
       .app-nav-header > .container > a.logo
       .app-nav-menu > .container > ul.menu.menu-primary
         li.dropdown > a.dropdown-toggle > svg + span.item-text + b.ls-caret
         li.dropdown > ul.dropdown-menu

     .section.products > .row.row-eq-height > .col > .package
       .package-side-left
         .package-header > h3.package-title + .package-price
         .package-body   > .package-content   (specs en un solo nodo de texto
                                               separado por saltos de linea)
       .package-footer.package-side-right
         .package-price > .price > .price-amount + .price-cycle
         a.btn.btn-order-now
   ========================================================================== */

/* ==========================================================================
   1. Barra lateral retractil
   ==========================================================================
   Antes era una columna fija de 140px con el icono encima del texto: ni se leia
   bien ni se aprovechaba. Ensancharla a 248px fue peor — se comia el ancho util
   en todas las paginas.

   Lo que se hace es un rail estrecho de 76px que se despliega a 244px al pasar
   por encima, montandose SOBRE el contenido en vez de empujarlo. Asi se lee la
   etiqueta cuando hace falta y no se pierde ancho el resto del tiempo.

   El margen del contenido NO se toca a mano: Lagom lo calcula desde
   `--app-nav-left-wide-width`, y sus reglas
   (`.lagom-layout-left-wide .app-main`) ganan por especificidad a cualquier
   `.app-main` suelto. Redefiniendo la variable, el layout entero se recoloca.
   ========================================================================== */

/* 992px es el punto en el que Lagom pasa a nav lateral; por debajo tiene su
   propio menu movil, que no se toca. */
@media (min-width: 992px) {
    :root {
        --app-nav-left-width: 76px;
        --app-nav-left-wide-width: 76px;
    }

    .app-nav.app-nav-primary {
        width: var(--app-nav-left-wide-width);
        padding: 0 10px 16px;
        z-index: 1040;
        transition: width .22s cubic-bezier(.2, .7, .3, 1);
    }

    .app-nav.app-nav-primary:hover,
    .app-nav.app-nav-primary:focus-within {
        width: 244px;
        box-shadow: 12px 0 32px rgba(0, 0, 0, .28);
    }

    /* Cabecera: solo el logo; el nombre aparece al desplegar. */
    .app-nav.app-nav-primary .app-nav-header {
        height: auto;
        padding: 18px 0 14px;
    }

    .app-nav.app-nav-primary .app-nav-header .container {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 8px;
    }

    .app-nav.app-nav-primary .logo {
        width: 36px;
        height: 36px;
        flex: none;
        margin: 0;
    }

    .app-nav.app-nav-primary .app-nav-header .container::after {
        content: 'BoxMine';
        font-family: 'Bebas Neue', var(--font-family-custom);
        font-size: 1.45rem;
        letter-spacing: .04em;
        color: #fff;
        line-height: 1;
        white-space: nowrap;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width .22s ease, opacity .16s ease;
    }

    /* Fila: icono fijo a la izquierda, etiqueta que se despliega. */
    .app-nav.app-nav-primary .menu-primary > li > a {
        display: flex;
        /*
         * Lagom apila icono sobre texto y lo hace con `!important` desde una
         * hoja servida en otro origen (el navegador no deja leer sus reglas,
         * asi que no hay selector al que subirle especificidad). Del resto de
         * esta regla si toma `display` y `gap`: es solo la direccion la que
         * necesita forzarse.
         */
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding: 12px 15px;
        margin: 4px 0;
        border-radius: 12px;
        text-align: left;
        font-size: .93rem;
        font-weight: 500;
        white-space: nowrap;
        position: relative;
        transition: background-color .16s ease, color .16s ease;
    }

    /* Los iconos vienen con width/height 64 en el propio SVG. */
    .app-nav.app-nav-primary .menu-primary > li > a > svg {
        width: 22px;
        height: 22px;
        flex: none;
        margin: 0;
        transition: transform .18s cubic-bezier(.2, .7, .3, 1);
    }

    /*
     * La etiqueta se colapsa a ancho cero en vez de ocultarse: asi la anchura
     * anima de verdad y el texto no asoma fuera del rail mientras esta cerrado.
     */
    .app-nav.app-nav-primary .menu-primary > li > a .item-text,
    .app-nav.app-nav-primary .menu-primary > li > a .ls-caret {
        display: block;
        font-size: inherit;
        margin: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width .22s ease, opacity .16s ease;
    }

    .app-nav.app-nav-primary .menu-primary > li > a .ls-caret {
        margin-left: auto;
    }

    .app-nav.app-nav-primary:hover .app-nav-header .container::after,
    .app-nav.app-nav-primary:focus-within .app-nav-header .container::after {
        max-width: 160px;
        opacity: 1;
    }

    .app-nav.app-nav-primary:hover .menu-primary > li > a .item-text,
    .app-nav.app-nav-primary:focus-within .menu-primary > li > a .item-text {
        max-width: 150px;
        opacity: 1;
    }

    .app-nav.app-nav-primary:hover .menu-primary > li > a .ls-caret,
    .app-nav.app-nav-primary:focus-within .menu-primary > li > a .ls-caret {
        max-width: 20px;
        opacity: .55;
    }

    .app-nav.app-nav-primary .menu-primary > li:hover > a {
        background-color: rgba(255, 255, 255, .09);
    }

    .app-nav.app-nav-primary .menu-primary > li:hover > a > svg {
        transform: scale(1.1);
    }

    /* Activo: pastilla llena, con una marca en el canto que se ve tambien
       con el rail cerrado. */
    .app-nav.app-nav-primary .menu-primary > li.active > a {
        background-color: rgba(255, 255, 255, .13);
        color: #fff;
    }

    .app-nav.app-nav-primary .menu-primary > li.active > a::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 22px;
        border-radius: 0 3px 3px 0;
        background: var(--bm-sand);
    }
}

/*
 * Los submenus, como tarjetas flotantes.
 *
 * Lagom los pinta en blanco (da por hecho panel claro sobre nav oscuro), asi
 * que sobre el tema oscuro salian como un folio. Se repintan aqui — incluido
 * el selector de moneda, que es el mismo componente fuera del nav.
 */
.app-nav.app-nav-primary .dropdown-menu,
.app-nav-top .dropdown-menu {
    background-color: #43474E;
    border: 1px solid var(--bm-line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    color: var(--bm-text-soft);
    padding: 8px;
    min-width: 210px;
    /*
     * El panel se estiraba a 504px con 211px de enlaces dentro. No era la
     * altura: Lagom lo ancla con `top: 0` Y `bottom: 0`, y un absoluto con las
     * dos aristas fijadas ignora `height`. Soltando `bottom` mide lo que ocupa.
     */
    bottom: auto !important;
    height: auto !important;
    max-height: 70vh;
    overflow-y: auto;
}

.app-nav.app-nav-primary .dropdown-menu a,
.app-nav-top .dropdown-menu a {
    color: var(--bm-text-soft);
}

.app-nav.app-nav-primary .dropdown-menu a:hover,
.app-nav-top .dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}

.app-nav.app-nav-primary .dropdown-menu li.active > a {
    background-color: var(--bm-blue);
    color: #fff;
}

.app-nav.app-nav-primary .dropdown-menu .dropdown-header {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bm-text-faded);
    padding: 6px 10px 4px;
}

.app-nav.app-nav-primary .dropdown-menu li > a {
    padding: 9px 10px;
    border-radius: 9px;
    font-size: .9rem;
}

.app-nav.app-nav-primary .dropdown-menu .nav-divider {
    height: 1px;
    background: var(--bm-line);
    margin: 6px 8px;
    font-size: 0;
    overflow: hidden;
}

/* ==========================================================================
   2. Cabecera de seccion
   ==========================================================================
   La tienda entraba directa a la rejilla, sin presentacion. Se le pone aire y
   un titulo con peso, como en boxmineworld.com.
   ========================================================================== */

.section.products {
    padding-top: 8px;
}

.main-header-title,
.section.products h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    line-height: 1.1;
}

/* Una linea de acento bajo el titulo de la pagina. */
.main-header .main-header-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bm-blue), var(--bm-sand));
}

/* ==========================================================================
   3. Tarjetas de producto
   ==========================================================================
   Lagom las monta en dos mitades (izquierda con nombre y specs, derecha con
   precio y boton). Se apilan en vertical con la jerarquia de una tienda:
   nombre -> precio -> lo que incluye -> comprar.
   ========================================================================== */

.section.products .row-eq-height {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 0;
}

.section.products .row-eq-height > .col {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
}

.package {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 22px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--bm-surface) 0%, #383C43 100%);
    border: 1px solid var(--bm-line);
    position: relative;
    overflow: hidden;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s cubic-bezier(.2, .7, .3, 1);
}

/* Un brillo sutil arriba, que se enciende al pasar por encima. */
.package::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bm-blue), transparent);
    opacity: 0;
    transition: opacity .25s ease;
}

.package:hover {
    border-color: rgba(0, 101, 255, .55);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 101, 255, .25);
    transform: translateY(-6px);
}

.package:hover::before { opacity: 1; }

.package-side-left,
.package-footer {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    display: block;
}

.package-side-left { flex: 1; }

.package-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--bm-text);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

/*
 * El precio viene DUPLICADO en el marcado: uno en `.package-header` y otro en
 * `.package-footer`. Lagom enseña solo uno segun la maqueta, y en escritorio el
 * que se ve es el de la cabecera — el del pie lo oculta el.
 *
 * De ahi dos trampas que ya costaron una pasada cada una: ocultar el de la
 * cabecera por parecer vacio deja la tarjeta SIN precio, y estilar solo
 * `.package-footer .price-amount` no pinta nada. Por eso estas reglas no se
 * acotan a ninguna de las dos mitades: valen para la que toque mostrar.
 */
.package .package-price {
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bm-line);
}

/* El precio manda: grande, en la display de la marca. */
.package .price-amount {
    font-family: 'Bebas Neue', var(--font-family-custom);
    font-size: 2.9rem;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--bm-text);
    display: block;
}

.package .price-cycle {
    font-size: .78rem;
    font-weight: 500;
    color: var(--bm-text-faded);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
}

.package-body {
    margin: 0;
}

.package-footer {
    display: flex;
    flex-direction: column;
}

/*
 * Las specs vienen en un unico nodo de texto separado por saltos de linea
 * ("-RAM:32gb\n-CPU: 600%\n..."). Con pre-line cada una cae en su renglon y
 * queda como una lista sin tocar la plantilla.
 */
.package-content {
    white-space: pre-line;
    font-size: .875rem;
    line-height: 2;
    color: var(--bm-text-soft);
    margin: 0 0 20px;
}

/* El boton, a lo ancho y con peso: es la accion de la tarjeta. */
.package .btn-order-now {
    width: 100%;
    margin-top: auto;
    padding-top: 13px;
    padding-bottom: 13px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    position: relative;
    overflow: hidden;
}

/* Reflejo que cruza el boton al pasar por encima. */
.package .btn-order-now::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transition: left .55s ease;
}

.package:hover .btn-order-now::after { left: 130%; }

/* ==========================================================================
   4. Barra lateral de categorias
   ========================================================================== */

.main-body-sidebar h3,
.sidebar h3 {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--bm-text-faded);
    font-weight: 600;
    margin-bottom: 10px;
}

.main-body-sidebar .list-group-item,
.sidebar .list-group-item,
.main-body-sidebar li > a {
    border-radius: 10px;
    padding: 9px 12px;
    border: 0;
    transition: background-color .15s ease, transform .15s ease;
}

.main-body-sidebar li > a:hover,
.sidebar .list-group-item:hover {
    background-color: rgba(255, 255, 255, .05);
    transform: translateX(2px);
}

/* ==========================================================================
   5. Entrada de las tarjetas
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .section.products .row-eq-height > .col {
        animation: bm-sube .5s cubic-bezier(.2, .7, .3, 1) both;
    }

    .section.products .row-eq-height > .col:nth-child(1) { animation-delay: .03s; }
    .section.products .row-eq-height > .col:nth-child(2) { animation-delay: .09s; }
    .section.products .row-eq-height > .col:nth-child(3) { animation-delay: .15s; }
    .section.products .row-eq-height > .col:nth-child(4) { animation-delay: .21s; }
    .section.products .row-eq-height > .col:nth-child(5) { animation-delay: .27s; }
    .section.products .row-eq-height > .col:nth-child(6) { animation-delay: .33s; }
}

@keyframes bm-sube {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   6. Movil
   ========================================================================== */

@media (max-width: 767px) {
    .section.products .row-eq-height {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .package {
        padding: 22px 18px 18px;
    }

    .package .price-amount { font-size: 2.4rem; }

    /* En tactil el hover se queda pegado: nada de levantar ni de reflejos. */
    .package:hover {
        transform: none;
        box-shadow: var(--box-shadow-sm);
    }

    .package:hover::before { opacity: 0; }
    .package:hover .btn-order-now::after { left: -120%; }
}
/* ==========================================================================
   BoxMine — sistema de diseño
   ==========================================================================
   Tercera capa, y la ultima: custom.css pone la paleta, estructura.css cambia
   la forma, y esto sube el acabado — tokens de estado, iconos, tiles, foco y
   movimiento.

   Sobre Radix: sus componentes son React y esto es Smarty + jQuery, asi que no
   se pueden montar. Lo que si se aprovecha es **Radix Colors**, y no copiando
   su paleta (su escala `slate` es mas fria y nos alejaria del gris de
   boxmineworld.com, que es justo lo que hay que igualar) sino su **metodo**:
   una escala con roles semanticos en vez de colores sueltos. De ahi salen los
   pasos que faltaban — hover, activo, borde interactivo y fondo tenue de
   acento — que son los que permiten estados coherentes en todo el tema.
   ========================================================================== */

:root {
    /*
     * Escala de superficie, con el gris de marca (#36393E) como paso 3.
     * Cada paso tiene un papel, no es "un gris mas claro":
     *   1-2  fondos hundidos (rail, pie)
     *   3    fondo de pagina
     *   4    elemento (tarjeta, bloque)
     *   5    elemento en hover
     *   6    elemento pulsado / cabecera de tabla
     */
    --bm-s1: #26282C;
    --bm-s2: #2E3136;
    --bm-s3: #36393E;
    --bm-s4: #3C4046;
    --bm-s5: #43474E;
    --bm-s6: #4A4F57;

    /* Bordes: uno para separar, otro para elementos con los que se interactua. */
    --bm-line: #4A4F57;
    --bm-line-strong: #5C636E;

    /* Acento tenue: el azul de marca al 10-16%, para fondos de icono y avisos.
       Va en rgba y no en un hex mezclado para que funcione sobre cualquier paso. */
    --bm-blue-subtle: rgba(0, 101, 255, .12);
    --bm-blue-subtle-strong: rgba(0, 101, 255, .20);
    --bm-blue-border: rgba(0, 101, 255, .32);

    /* Un solo easing para todo el tema: la coherencia del movimiento se nota
       tanto como la del color. */
    --bm-ease: cubic-bezier(.2, .7, .3, 1);
    --bm-rapido: .16s;
    --bm-medio: .24s;

    /*
     * Los SVG de Lagom pintan con estas variables. Sin definirlas salen en su
     * amarillo y azul de fabrica, que es lo que hacia que los iconos
     * pareciesen de otra web. Con dos tonos de azul quedan como un juego.
     */
    --svg-icon-color-1: var(--bm-blue);
    --svg-icon-color-2: var(--bm-blue-light);
    --svg-icon-color-3: rgba(255, 255, 255, .55);

    /* Superficies de Lagom, re-apuntadas a la escala nueva. */
    --ui-block-bg: var(--bm-s4);
    --ui-block-bg-form: var(--bm-s4);
    --ui-block-header-bg: var(--bm-s4);
    --table-container-header-bg: var(--bm-s5);
    --popover-bg: var(--bm-s5);
}

/* ==========================================================================
   1. Foco visible
   ==========================================================================
   Lo primero que se pierde al repintar un tema y lo que mas se nota si
   navegas con teclado. Anillo de acento con separacion, al estilo Radix.
   `:focus-visible` y no `:focus`: no aparece al hacer clic con el raton.
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--bm-blue-light);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ==========================================================================
   2. Barra lateral
   ========================================================================== */

@media (min-width: 992px) {
    /* El rail va un paso por debajo del fondo: separa sin necesitar borde. */
    .app-nav.app-nav-primary {
        background: linear-gradient(180deg, var(--bm-s2) 0%, var(--bm-s1) 100%);
        border-right: 1px solid var(--bm-line);
    }

    /*
     * El logo salia descentrado: el ancla mide 36x36 pero la imagen dentro
     * se calculaba a 36x42 (el PNG es cuadrado, 500x500), asi que sobresalia
     * 3px por arriba y por abajo. Se dimensiona la imagen, no el ancla.
     */
    .app-nav.app-nav-primary .logo img {
        width: 36px;
        height: 36px;
        object-fit: contain;
        display: block;
    }

    /* Cada icono en su cajita: es lo que separa un rail de una lista de SVG. */
    .app-nav.app-nav-primary .menu-primary > li > a > svg {
        width: 20px;
        height: 20px;
        padding: 7px;
        box-sizing: content-box;
        border-radius: 10px;
        background: rgba(255, 255, 255, .06);
        transition:
            background-color var(--bm-rapido) ease,
            transform var(--bm-medio) var(--bm-ease);
    }

    .app-nav.app-nav-primary .menu-primary > li:hover > a > svg {
        background: var(--bm-blue-subtle-strong);
        transform: translateY(-1px) scale(1.04);
    }

    .app-nav.app-nav-primary .menu-primary > li.active > a > svg {
        background: var(--bm-blue);
    }

    /* Con la cajita puesta, el relleno del enlace sobra. */
    .app-nav.app-nav-primary .menu-primary > li > a {
        padding: 6px 10px;
        gap: 12px;
    }

    .app-nav.app-nav-primary .menu-primary > li.active > a::before {
        left: -10px;
    }
}

/* ==========================================================================
   3. Tiles de la home
   ==========================================================================
   Venian en `.col-md-3` dentro de `.tiles.row`: tres columnas del 25% que
   dejaban un cuarto vacio y no llenaban la fila. Se pasa la fila a rejilla y
   la tarjeta a algo con jerarquia — icono enmarcado, titulo y una flecha que
   indica que se puede pulsar.
   ========================================================================== */

.tiles.row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 0;
}

.tiles.row > [class*='col-'] {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
}

.tile.tile-home {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 28px 24px 26px;
    background: var(--bm-s4);
    border: 1px solid var(--bm-line);
    border-radius: 18px;
    overflow: hidden;
    transition:
        background-color var(--bm-rapido) ease,
        border-color var(--bm-rapido) ease,
        box-shadow var(--bm-medio) ease,
        transform var(--bm-medio) var(--bm-ease);
}

.tile.tile-home:hover {
    background: var(--bm-s5);
    border-color: var(--bm-blue-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .34);
    transform: translateY(-4px);
}

/* El icono, enmarcado en un cuadro tenue del color de acento. */
.tile.tile-home .tile-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 0 18px;
    border-radius: 18px;
    background: var(--bm-blue-subtle);
    border: 1px solid var(--bm-blue-border);
    transition: background-color var(--bm-rapido) ease, transform var(--bm-medio) var(--bm-ease);
}

.tile.tile-home .tile-icon svg {
    width: 34px;
    height: 34px;
}

.tile.tile-home:hover .tile-icon {
    background: var(--bm-blue-subtle-strong);
    transform: scale(1.06);
}

.tile.tile-home {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--bm-text);
}

/* Flecha de "esto lleva a algun sitio". Aparece al acercarse. */
.tile.tile-home::after {
    content: '→';
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 1.1rem;
    color: var(--bm-blue-light);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--bm-rapido) ease, transform var(--bm-medio) var(--bm-ease);
}

.tile.tile-home:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   4. Botones
   ==========================================================================
   Les faltaba respuesta al pulsar: sin el hundido, un boton en pantalla tactil
   no confirma que se ha registrado el toque.
   ========================================================================== */

.btn {
    transition:
        background-color var(--bm-rapido) ease,
        border-color var(--bm-rapido) ease,
        box-shadow var(--bm-rapido) ease,
        transform var(--bm-rapido) var(--bm-ease);
}

.btn-primary {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 4px 14px rgba(0, 101, 255, .28);
}

.btn-primary:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 6px 20px rgba(0, 101, 255, .38);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(1px);
}

/* ==========================================================================
   5. Bloques, tablas y formularios
   ==========================================================================
   El mismo tratamiento de tarjeta en todas partes, para que el area de cliente
   no parezca otra web distinta de la tienda.
   ========================================================================== */

.ui-block,
.panel,
.card {
    border-radius: 16px;
    border: 1px solid var(--bm-line);
}

.table > tbody > tr {
    transition: background-color var(--bm-rapido) ease;
}

.table > tbody > tr:hover {
    background-color: rgba(255, 255, 255, .04);
}

.form-control,
.form-select {
    background-color: var(--bm-s3);
    border: 1px solid var(--bm-line);
    border-radius: 10px;
    transition: border-color var(--bm-rapido) ease, box-shadow var(--bm-rapido) ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bm-blue);
    box-shadow: 0 0 0 3px var(--bm-blue-subtle-strong);
    outline: none;
}

/* Las etiquetas en el mismo registro que el resto de rotulos del tema. */
.control-label,
.form-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bm-text-faded);
}

/* ==========================================================================
   6. Movimiento
   ==========================================================================
   Todo dentro de `prefers-reduced-motion: no-preference`. Quien haya pedido al
   sistema que reduzca el movimiento no ve nada de esto — y la pagina sigue
   funcionando igual, porque son animaciones de entrada, no de estado.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .main-header,
    .section {
        animation: bm-entra .38s var(--bm-ease) both;
    }

    .tiles.row > [class*='col-'] {
        animation: bm-sube .5s var(--bm-ease) both;
    }

    .tiles.row > [class*='col-']:nth-child(1) { animation-delay: .04s; }
    .tiles.row > [class*='col-']:nth-child(2) { animation-delay: .11s; }
    .tiles.row > [class*='col-']:nth-child(3) { animation-delay: .18s; }
    .tiles.row > [class*='col-']:nth-child(4) { animation-delay: .25s; }
}

@keyframes bm-entra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   7. Movil
   ========================================================================== */

@media (max-width: 991.98px) {
    .tiles.row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* En tactil el hover se queda pegado tras el toque. */
    .tile.tile-home:hover {
        transform: none;
        box-shadow: none;
    }

    .tile.tile-home:hover::after {
        opacity: 0;
    }

    .btn-primary:hover {
        transform: none;
    }
}

/* ==========================================================================
   8. Centrado del rail y tono de las ilustraciones
   ==========================================================================
   Dos cosas que solo se ven midiendo o mirando la pagina entera.
   ========================================================================== */

@media (min-width: 992px) {
    /*
     * Los iconos quedaban 15px a la derecha del eje del rail: aunque la
     * etiqueta este colapsada a ancho cero, sigue siendo un item de flex y el
     * `gap` reserva su hueco, asi que el conjunto se corria. Con el rail
     * cerrado se ocultan de verdad y la fila se centra; al desplegarse vuelven
     * y la fila pasa a alinearse a la izquierda.
     */
    .app-nav.app-nav-primary .menu-primary > li > a {
        justify-content: center;
        gap: 0;
        padding: 6px;
    }

    .app-nav.app-nav-primary .menu-primary > li > a .item-text,
    .app-nav.app-nav-primary .menu-primary > li > a .ls-caret {
        display: none;
    }

    .app-nav.app-nav-primary:hover .menu-primary > li > a,
    .app-nav.app-nav-primary:focus-within .menu-primary > li > a {
        justify-content: flex-start;
        gap: 12px;
        padding: 6px 10px;
    }

    .app-nav.app-nav-primary:hover .menu-primary > li > a .item-text,
    .app-nav.app-nav-primary:focus-within .menu-primary > li > a .item-text {
        display: block;
        max-width: none;
        animation: bm-entra-etiqueta var(--bm-medio) var(--bm-ease) both;
    }

    .app-nav.app-nav-primary:hover .menu-primary > li > a .ls-caret,
    .app-nav.app-nav-primary:focus-within .menu-primary > li > a .ls-caret {
        display: block;
        max-width: none;
        opacity: .55;
    }
}

@keyframes bm-entra-etiqueta {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

/*
 * El banner de la home salia con el portatil y el monitor en amarillo: es el
 * color 4/5 de las ilustraciones de Lagom, y siendo las formas mas grandes de
 * la pagina se comian el resto. El arena y el oro de la marca se quedan para
 * detalles (avisos, el subrayado del titular), no para masas de ese tamaño.
 */
:root {
    --svg-illustration-color-4: var(--bm-s6);
    --svg-illustration-color-5: var(--bm-s5);
}

/*
 * El rotulo "BoxMine" del rail desplegado no llegaba a pintarse pese a tener
 * `content` y `opacity: 1`: Bootstrap ya usa `.container::after` como clearfix
 * (`display: table; clear: both`), y sobre esa caja el ancho y el recorte no se
 * comportan como en un bloque. Declararlo bloque es lo que lo hace aparecer.
 */
@media (min-width: 992px) {
    .app-nav.app-nav-primary .app-nav-header .container::after {
        display: block;
        clear: none;
        flex: none;
    }
}

/*
 * En movil Lagom cambia el tile a fila (icono a la izquierda, texto al lado).
 * El margen inferior del icono, pensado para la version en columna, dejaba
 * unos 130px de hueco muerto bajo el texto. Aqui el margen va al lado.
 */
@media (max-width: 991.98px) {
    .tile.tile-home {
        padding: 16px;
    }

    .tile.tile-home .tile-icon {
        width: 52px;
        height: 52px;
        margin: 0 14px 0 0;
        border-radius: 14px;
    }

    .tile.tile-home .tile-icon svg {
        width: 28px;
        height: 28px;
    }

    /* La flecha se solapaba con el texto al pasar a fila. */
    .tile.tile-home::after {
        display: none;
    }
}
/* ==========================================================================
   BoxMine — acabado
   ==========================================================================
   Cuarta capa. Las tres anteriores dejan el tema coherente; esta es la que
   hace que no parezca una plantilla: ambiente de fondo, heroe, escala
   tipografica fluida y los detalles que casi nadie mira pero que se notan
   (barra de desplazamiento, seleccion de texto, subrayados).

   Nota sobre "librerias": aqui no se puede cargar ninguna de componentes —
   Lagom pinta con Smarty y jQuery, no hay React donde montarlas, y meter JS
   obligaria a tocar las plantillas. Lo que si se usa es CSS moderno de verdad
   (`clamp()`, `color-mix()`, `:has()`) y Google Fonts, que es lo que aqui hace
   el mismo trabajo.
   ========================================================================== */

/* ==========================================================================
   1. Ambiente
   ==========================================================================
   El fondo era un gris plano. Dos halos muy tenues, fijos al viewport, le dan
   profundidad sin robar contraste al texto: se notan al hacer scroll porque el
   contenido se mueve y el fondo no.
   ========================================================================== */

body {
    background-color: var(--bm-s3);
    background-image:
        radial-gradient(900px 600px at 12% -10%, rgba(0, 101, 255, .10), transparent 60%),
        radial-gradient(700px 500px at 100% 8%, rgba(63, 73, 122, .16), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Seleccion de texto en el color de marca, no en el azul del sistema. */
::selection {
    background: var(--bm-blue);
    color: #fff;
}

/* ==========================================================================
   2. Barra de desplazamiento
   ==========================================================================
   En un tema oscuro la barra clara del sistema canta muchisimo. Firefox usa la
   propiedad estandar; el resto, el pseudoelemento de WebKit.
   ========================================================================== */

html {
    scrollbar-color: var(--bm-s6) var(--bm-s2);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: var(--bm-s2);
}

::-webkit-scrollbar-thumb {
    background: var(--bm-s6);
    border: 3px solid var(--bm-s2);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bm-line-strong);
}

/* ==========================================================================
   3. Escala tipografica fluida
   ==========================================================================
   Los tamaños eran fijos, y por eso el titular del heroe ocupaba dos lineas en
   movil y disparaba la altura del bloque. Con `clamp()` el tamaño se interpola
   con el ancho y deja de haber saltos entre breakpoints.
   ========================================================================== */

h1, .h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.08; letter-spacing: -.02em; }
h2, .h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); line-height: 1.16; letter-spacing: -.015em; }
h3, .h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); line-height: 1.25; letter-spacing: -.01em; }

/* ==========================================================================
   4. Heroe
   ==========================================================================
   Era un degradado indigo plano con 64px de relleno fijo — de ahi los ~500px
   de alto en movil para una sola frase. Ahora el relleno es fluido, el
   degradado lleva la marca y un halo le da centro.
   ========================================================================== */

.main-banner {
    position: relative;
    padding: clamp(34px, 6.5vw, 68px) 0;
    background-image: linear-gradient(120deg, #232A4A 0%, var(--bm-indigo) 52%, #2B4C9E 100%);
    border-bottom: 1px solid var(--bm-line);
    overflow: hidden;
}

/* Halo detras del titular. `pointer-events: none` para no comerse los clics
   de nada que se ponga encima mas adelante. */
.main-banner::before {
    content: '';
    position: absolute;
    inset: -40% 0 auto 0;
    height: 180%;
    background: radial-gradient(520px 260px at 50% 38%, rgba(0, 101, 255, .38), transparent 70%);
    pointer-events: none;
}

.main-banner .container {
    position: relative;
}

.banner-title {
    font-family: 'Bebas Neue', var(--font-family-custom);
    letter-spacing: .015em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    margin: 0;
}

/* ==========================================================================
   5. Enlaces
   ==========================================================================
   Subrayado que se despliega desde la izquierda en vez de aparecer de golpe.
   Va en `background-size` y no en `border-bottom` para que no descoloque la
   linea base del texto.
   ========================================================================== */

.main-body a:not(.btn):not(.tile):not([class*='package']):not(.list-group-item) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size var(--bm-medio) var(--bm-ease);
    text-decoration: none;
}

.main-body a:not(.btn):not(.tile):not([class*='package']):not(.list-group-item):hover {
    background-size: 100% 1px;
}

/* ==========================================================================
   6. Tarjetas de producto: el ultimo repaso
   ==========================================================================
   `color-mix()` permite derivar el borde del propio color de marca en vez de
   dejar un rgba a mano suelto: si cambia el azul, el borde cambia con el.
   ========================================================================== */

.package {
    /* Filo superior claro: simula luz cayendo sobre la tarjeta y es lo que
       separa una tarjeta "plana" de una con volumen. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.package:hover {
    border-color: color-mix(in srgb, var(--bm-blue) 55%, transparent);
}

/*
 * `:has()` permite marcar la tarjeta que lleve una insignia de destacado sin
 * tocar la plantilla. Si WHMCS no pinta ninguna, esta regla simplemente no se
 * aplica — no estorba.
 */
.package:has(.package-badge, .badge, .ribbon) {
    border-color: color-mix(in srgb, var(--bm-blue) 60%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 0 1px color-mix(in srgb, var(--bm-blue) 30%, transparent),
        0 16px 44px rgba(0, 0, 0, .34);
}

/* ==========================================================================
   7. Ritmo vertical
   ==========================================================================
   Cada bloque traia su propio margen y el conjunto iba a saltos. Una sola
   medida para todos.
   ========================================================================== */

.section {
    padding-block: clamp(28px, 3.5vw, 48px);
}

.main-header {
    padding-block: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 24px);
}

/* ==========================================================================
   8. Avisos
   ========================================================================== */

.alert {
    border-radius: 14px;
    border: 1px solid var(--bm-line);
    background: var(--bm-s4);
}

.alert-success { border-color: color-mix(in srgb, var(--brand-success) 40%, transparent); }
.alert-danger  { border-color: color-mix(in srgb, var(--brand-danger) 40%, transparent); }
.alert-warning { border-color: color-mix(in srgb, var(--bm-sand) 40%, transparent); }
.alert-info    { border-color: color-mix(in srgb, var(--bm-blue) 40%, transparent); }

/* ==========================================================================
   9. Pie
   ========================================================================== */

.app-footer,
footer {
    border-top: 1px solid var(--bm-line);
    background: var(--bm-s2);
}

/* ==========================================================================
   10. Movil
   ========================================================================== */

@media (max-width: 767px) {
    /* Los halos fijos cuestan repintado en moviles y apenas se ven: fuera. */
    body {
        background-image: none;
    }

    .main-banner::before {
        display: none;
    }
}

/*
 * El titular del heroe arrastra `margin-bottom: 32px` para separarse del
 * subtitulo. En las paginas que no traen subtitulo — la home, sin ir mas
 * lejos — eso son 32px de hueco muerto dentro del bloque de color.
 */
.banner-content > .banner-title:last-child {
    margin-bottom: 0;
}
/* ==========================================================================
   BoxMine — home propia y tienda reordenada
   ==========================================================================
   Quinta capa, y la primera que acompaña a un cambio de plantilla.

   Las cuatro anteriores solo podian repintar y recolocar lo que Lagom escribia.
   El limite se noto: por muchos colores que se cambien, con banner + tres tiles
   la pagina sigue siendo la de la plantilla. Asi que `homepage.tpl` se
   reescribio (con copia en `homepage.tpl.bak-boxmine-*`) y aqui se le da forma
   a lo nuevo: heroe con llamada a la accion, cifras, accesos en fila, motivos y
   novedades en rejilla.

   Lo de la tienda si es CSS puro: las categorias estaban en una columna a la
   izquierda que se comia un cuarto del ancho para dos enlaces. Pasan a ser una
   barra de filtros arriba y los productos se quedan con la pagina entera.
   ========================================================================== */

/* ==========================================================================
   1. Heroe
   ========================================================================== */

.bm-hero-contenido {
    max-width: 720px;
    margin: 0 auto;
}

/* Rotulo pequeño sobre el titular: situa de que va la pagina antes de leerlo. */
.bm-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    backdrop-filter: blur(6px);
}

.bm-hero-sub {
    margin: 16px auto 0;
    max-width: 560px;
    font-size: clamp(.95rem, .88rem + .3vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.bm-hero-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.bm-hero-acciones .btn {
    min-width: 168px;
}

/* ==========================================================================
   2. Cifras
   ==========================================================================
   Franja entre el heroe y el cuerpo. Da un dato concreto justo cuando alguien
   acaba de leer la promesa, que es cuando duda.
   ========================================================================== */

.bm-datos {
    background: var(--bm-s2);
    border-bottom: 1px solid var(--bm-line);
}

.bm-datos-rejilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--bm-line);
    border-inline: 1px solid var(--bm-line);
}

.bm-dato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 12px;
    background: var(--bm-s2);
}

.bm-dato-cifra {
    font-family: 'Bebas Neue', var(--font-family-custom);
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--bm-text);
}

.bm-dato-texto {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bm-text-faded);
}

/* ==========================================================================
   3. Cabeceras de seccion
   ==========================================================================
   Titulo, una linea de contexto y, si hace falta, un enlace a la derecha.
   ========================================================================== */

.bm-seccion-cabecera {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 6px 20px;
    margin-bottom: 22px;
}

.bm-seccion-cabecera .section-title {
    grid-column: 1;
    margin: 0;
}

.bm-seccion-sub {
    grid-column: 1;
    margin: 0;
    font-size: .92rem;
    color: var(--bm-text-faded);
}

.bm-seccion-enlace {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: .88rem;
    font-weight: 600;
    color: var(--bm-blue-light);
    white-space: nowrap;
}

/* ==========================================================================
   4. Accesos rapidos
   ==========================================================================
   Antes eran tres tiles cuadradas enormes con un icono gigante. Ahora son
   filas: icono pequeño, que es, y para que sirve. Cabe mas y se lee antes.
   ========================================================================== */

.bm-acciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.bm-accion {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--bm-s4);
    border: 1px solid var(--bm-line);
    position: relative;
    transition:
        background-color var(--bm-rapido) ease,
        border-color var(--bm-rapido) ease,
        transform var(--bm-medio) var(--bm-ease);
}

.bm-accion:hover {
    background: var(--bm-s5);
    border-color: var(--bm-blue-border);
    transform: translateX(3px);
}

.bm-accion-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--bm-blue-subtle);
    border: 1px solid var(--bm-blue-border);
}

.bm-accion-icono svg {
    width: 26px;
    height: 26px;
}

.bm-accion-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bm-accion-titulo {
    font-weight: 600;
    font-size: 1rem;
    color: var(--bm-text);
}

.bm-accion-desc {
    font-size: .84rem;
    line-height: 1.45;
    color: var(--bm-text-faded);
}

/* ==========================================================================
   5. Motivos
   ========================================================================== */

.bm-ventajas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.bm-ventaja {
    padding: 24px 22px;
    border-radius: 16px;
    background: var(--bm-s4);
    border: 1px solid var(--bm-line);
    transition: border-color var(--bm-rapido) ease, transform var(--bm-medio) var(--bm-ease);
}

.bm-ventaja:hover {
    border-color: var(--bm-blue-border);
    transform: translateY(-3px);
}

.bm-ventaja-icono {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 15px;
    background: var(--bm-blue-subtle);
    border: 1px solid var(--bm-blue-border);
}

.bm-ventaja-icono svg {
    width: 30px;
    height: 30px;
}

.bm-ventaja-titulo {
    margin: 0 0 7px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bm-text);
}

.bm-ventaja-texto {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--bm-text-soft);
}

/* ==========================================================================
   6. Novedades
   ==========================================================================
   Eran dos elementos de lista a lo ancho. Ahora tres tarjetas: se ven de un
   vistazo y no obligan a bajar.
   ========================================================================== */

.bm-noticias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.bm-noticia {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 16px;
    background: var(--bm-s4);
    border: 1px solid var(--bm-line);
    transition: border-color var(--bm-rapido) ease, transform var(--bm-medio) var(--bm-ease);
}

.bm-noticia:hover {
    border-color: var(--bm-blue-border);
    transform: translateY(-3px);
}

.bm-noticia-fecha {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bm-blue-light);
}

.bm-noticia-titulo {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bm-text);
}

.bm-noticia-texto {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--bm-text-faded);
}

/* ==========================================================================
   7. Tienda: las categorias, arriba y en pastillas
   ==========================================================================
   `.main-sidebar` esta oculta por debajo de `lg` — ahi Lagom ya pone su propio
   desplegable, que se deja como esta. Solo se reordena donde la columna existe.
   ========================================================================== */

@media (min-width: 1200px) {
    /*
     * El contenedor que agrupa la columna y el contenido se selecciona por lo
     * que contiene, no por su clase: asi no hay que averiguar como la llama
     * Lagom en cada pagina.
     */
    .main-body *:has(> .main-sidebar) {
        display: block;
    }

    /*
     * El envoltorio real es `.main-grid`. Y `.main-content` trae de Lagom
     * `max-width: calc(100% - 320px)`: sigue reservando el hueco de la columna
     * aunque la columna ya no este ahi, y la rejilla se quedaba en 914px de los
     * 1234 disponibles. Hay que nombrar al padre para ganarle la especificidad.
     */
    .main-grid > .main-sidebar,
    .main-grid > .main-content {
        width: 100%;
        /* El `max-width` de Lagom lleva `!important`: comprobado en la pagina,
           sin forzarlo la rejilla se queda en 914px de los 1234 que hay. */
        max-width: none !important;
        flex-basis: auto;
        float: none;
    }

    /* La columna pasa a ser una barra: los paneles, en fila. */
    .main-sidebar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 28px;
        margin-bottom: 26px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--bm-line);
    }

    .main-sidebar .panel-sidebar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .main-sidebar .panel-heading {
        padding: 0;
        margin: 0;
        background: none;
        border: 0;
    }

    .main-sidebar .panel-title {
        margin: 0;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--bm-text-faded);
        white-space: nowrap;
    }

    /* La flecha de plegar no tiene sentido en una barra horizontal. */
    .main-sidebar .panel-minimise {
        display: none;
    }

    /* Tres clases para ganarle a Lagom, que las deja en `display: block` y por
       eso las categorias caian una debajo de otra. */
    .main-grid .main-sidebar .panel-sidebar .list-group {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        border: 0;
        background: none;
    }

    /* Cada categoria, una pastilla. */
    .main-grid .main-sidebar .panel-sidebar .list-group > .list-group-item {
        display: inline-flex;
        align-items: center;
        width: auto;
        margin: 0;
        padding: 8px 16px;
        border: 1px solid var(--bm-line);
        border-radius: 999px;
        background: var(--bm-s4);
        font-size: .89rem;
        font-weight: 500;
        color: var(--bm-text-soft);
        white-space: nowrap;
        transition:
            background-color var(--bm-rapido) ease,
            border-color var(--bm-rapido) ease,
            color var(--bm-rapido) ease;
    }

    .main-grid .main-sidebar .panel-sidebar .list-group > .list-group-item:hover {
        background: var(--bm-s5);
        border-color: var(--bm-line-strong);
        color: var(--bm-text);
        transform: none;
    }

    .main-grid .main-sidebar .panel-sidebar .list-group > .list-group-item.active {
        background: var(--bm-blue);
        border-color: var(--bm-blue);
        color: #fff;
    }

    .main-grid .main-sidebar .panel-sidebar .list-group > .list-group-item i {
        margin-right: 6px;
        opacity: .75;
    }
}

/* ==========================================================================
   8. Movil
   ========================================================================== */

@media (max-width: 767px) {
    .bm-datos-rejilla {
        grid-template-columns: repeat(2, 1fr);
    }

    .bm-hero-acciones .btn {
        width: 100%;
    }

    .bm-seccion-cabecera {
        grid-template-columns: 1fr;
    }

    .bm-seccion-enlace {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    /* En tactil el hover se queda pegado tras el toque. */
    .bm-accion:hover,
    .bm-ventaja:hover,
    .bm-noticia:hover {
        transform: none;
    }
}

/* ==========================================================================
   9. Entrada
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .bm-acciones > *,
    .bm-ventajas > *,
    .bm-noticias > * {
        animation: bm-sube .5s var(--bm-ease) both;
    }

    .bm-acciones > :nth-child(1),
    .bm-ventajas > :nth-child(1),
    .bm-noticias > :nth-child(1) { animation-delay: .04s; }

    .bm-acciones > :nth-child(2),
    .bm-ventajas > :nth-child(2),
    .bm-noticias > :nth-child(2) { animation-delay: .10s; }

    .bm-acciones > :nth-child(3),
    .bm-ventajas > :nth-child(3),
    .bm-noticias > :nth-child(3) { animation-delay: .16s; }

    .bm-acciones > :nth-child(4),
    .bm-ventajas > :nth-child(4) { animation-delay: .22s; }
}