/* ═══════════════════════════════════════════════════════════════════
   MEGA-MENÚ — Réplica exacta de tomahost.com
   Colores verificados con computed styles en producción:
     Left col bg:    rgb(2, 158, 245)   = #029EF5
     Center links:   rgb(34, 133, 189)  = #2285BD
     Right labels:   rgb(24, 24, 24)    = #181818
     Nav bg:         rgb(15, 37, 114)   = #0F2572
═══════════════════════════════════════════════════════════════════ */

/* ─── ANIMACIÓN ──────────────────────────────────────────────────── */
@keyframes mm-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Los items con WIDE mega-menú son position:static para que el
       containing block sea el header (sticky), no el li item.
       Así left:50% del header centra el menú en pantalla.
       Los items con simple dropdown mantienen position:relative (default) ─── */
.th-nav-wide {
    position: static !important;
}

/* ─── MEGA-MENÚ WIDE — 3 columnas (Hosting/VPS/Dedicados/Elearning/Ciberseguridad) ─── */
.th-megamenu--wide {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1050px;
    max-width: calc(100vw - 20px);
    display: none;
    grid-template-columns: 280px 1fr 260px;
    background: #fff;
    box-shadow: 0 6px 28px rgba(0,0,0,0.15);
    border-radius: 0 0 6px 6px;
    z-index: 9999;
    animation: mm-fadein 0.15s ease;
    overflow: visible;
}
/* removed - JS controls */

/* ─── COLUMNA IZQUIERDA — fondo azul #029EF5 ─────────────────────── */
.th-mm-col--left {
    background: #029EF5;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.th-mm-cat {
    border-bottom: 1px solid rgba(255,255,255,0.22);
    padding: 11px 6px;
}
.th-mm-cat:first-child { padding-top: 4px; }
.th-mm-cat:last-child  { border-bottom: none; padding-bottom: 4px; }

.th-mm-cat-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
}
.th-mm-cat-link:hover .th-mm-cat-title { opacity: 0.85; }

.th-mm-cat-title {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
.th-mm-cat-desc {
    color: rgba(255,255,255,0.82);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

/* ─── COLUMNA CENTRAL — fondo blanco, links #2285BD ─────────────── */
.th-mm-col--center {
    background: #fff;
    padding: 20px 22px;
    border-left: 1px solid #e4eaf0;
}

/* Ocultar el título "CARACTERÍSTICAS" — no existe en el original */
.th-mm-features-title {
    display: none;
}

.th-mm-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.th-mm-features li {
    display: flex;
    flex-direction: column;
}

.th-mm-features li a {
    color: #2285BD;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: color 0.12s;
    line-height: 1.3;
}
.th-mm-features li a:hover { color: #029EF5; }

/* Sub-descripción gris bajo el link (Dedicados) */
.th-mm-feat-subdesc {
    display: block;
    color: #7a8594;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    padding-bottom: 6px;
}

/* Separador de sección en centro (Dedicados entre grupos) */
.th-mm-feat-sep {
    height: 1px;
    background: #e4eaf0;
    margin: 8px 0;
}

/* ─── COLUMNA DERECHA — fondo blanco, labels oscuros ────────────── */
.th-mm-col--right {
    background: #fff;
    padding: 18px 16px;
    border-left: 1px solid #e4eaf0;
}

/* Grid de iconos / logos de apps — 3×2 */
.th-mm-icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 4px;
}

.th-mm-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.12s;
    text-align: center;
}
.th-mm-icon-item:hover { background: rgba(2,158,245,0.08); }

.th-mm-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.th-mm-icon-item span {
    color: #181818;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    line-height: 1.3;
}

/* ─── "LO MÁS BUSCADO" — columna derecha VPS y Ciberseguridad ───── */
.th-mm-popular-title {
    color: #0F2572;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-align: center;
    margin-bottom: 6px;
    line-height: 1.3;
}

.th-mm-popular-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.th-mm-popular-divider::before,
.th-mm-popular-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e4eaf0;
}
.th-mm-popular-divider-icon {
    color: #2285BD;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.th-mm-popular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
}
.th-mm-popular-grid a {
    color: #2285BD;
    font-size: 12.5px;
    font-weight: 400;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.12s;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}
.th-mm-popular-grid a:hover { color: #029EF5; }

/* ─── MEGA-MENÚ SIMPLE — Dominios y Webinar ─────────────────────── */
.th-megamenu--simple {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    display: none;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    border-radius: 0 0 6px 6px;
    border-top: 2px solid #029EF5;
    z-index: 9999;
    padding: 6px 0;
    animation: mm-fadein 0.15s ease;
}
/* removed - JS controls */

.th-mm-simple-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.th-mm-simple-links li a {
    display: block;
    padding: 10px 18px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.th-mm-simple-links li a:hover {
    background: #f0f8ff;
    color: #029EF5;
}

/* ─── Eliminar .th-megamenu--narrow (ya no se usa) ───────────────── */
.th-megamenu--narrow { display: none !important; }

/* Ensure megamenu doesn't overflow viewport */
.th-megamenu--wide {
    right: auto;
}

.th-megamenu--wide { max-width: calc(100vw - 40px) !important; }