/* ================================================================
   mejorhosting.cl — Unificación visual tablas de ranking
   Scope estricto: Home (.elementor-element-34f573b) y /hosting (.mh-ranking)
   NO toca tipografía global del sitio
   ================================================================ */


/* ----------------------------------------------------------------
   HOME — Tabla JetEngine (widget #34f573b, template 4761)
   ---------------------------------------------------------------- */

/* --- 1a. Expandir el widget contenedor del logo --- */
.elementor-element-34f573b .elementor-element-b79745d,
.elementor-element-34f573b .elementor-element-b79745d .elementor-widget-container {
    width:  200px !important;
    height: 100px !important;
}

/* --- 1b. Expandir el link-contenedor --- */
.elementor-element-34f573b .jet-listing-dynamic-image__link {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:     200px !important;
    height:    100px !important;
    max-width: 200px !important;
}

/* --- 1c. La imagen en sí — 200px ancho, 100px alto máx, ratio preservado --- */
.elementor-element-34f573b .jet-listing-dynamic-image__img,
.elementor-element-34f573b img.jet-listing-dynamic-image__img {
    width:      auto    !important;
    height:     auto    !important;
    max-width:  200px   !important;
    max-height: 100px   !important;
    min-width:  unset   !important;
    min-height: unset   !important;
    object-fit: contain !important;
    display:    block   !important;
}

/* --- 1d. Nombre del proveedor c2df68c: de 44.8px → 24px --- */
.elementor-element-34f573b .elementor-element-c2df68c .jet-listing-dynamic-field__content {
    font-size:   24px !important;
    font-weight: 700  !important;
    line-height: 1.2  !important;
}

/* --- Campo grande 731239d: de 3.5em (56px) → 1.375em (22px) --- */
.elementor-element-34f573b .elementor-element-731239d .jet-listing-dynamic-field__content {
    font-size:   1.375em !important;   /* ~22px */
    font-weight: 800     !important;
    line-height: 1.2     !important;
}

/* --- Nombre del proveedor c180ae4: de 0.78em (~12px) → 1em (16px) --- */
.elementor-element-34f573b .elementor-element-c180ae4 .elementor-heading-title {
    font-size:   1em  !important;   /* 16px */
    font-weight: 700  !important;
    line-height: 1.35 !important;
}

/* --- Precio 67a2c2d: de 1.15em → 1.375em (22px) --- */
.elementor-element-34f573b .elementor-element-67a2c2d .jet-listing-dynamic-field__content {
    font-size:   1.375em !important;
    font-weight: 800     !important;
    line-height: 1.2     !important;
}

/* --- Estrellas / rating 6654612 --- */
.elementor-element-34f573b .elementor-element-6654612 .elementor-star-rating__star {
    font-size: 14px !important;
}

/* --- Botón Ver Planes cb6adb0 --- */
.elementor-element-34f573b .elementor-element-cb6adb0 .jet-listing-dynamic-link__link {
    font-size:   14px !important;
    font-weight: 700  !important;
    padding: 8px 16px !important;
}

/* --- 1e. Alto de fila aumentado para acomodar logo más grande --- */
.elementor-element-34f573b .jet-listing-grid__item {
    height:     auto   !important;
    min-height: 180px  !important;
}


/* ----------------------------------------------------------------
   /HOSTING — Tabla shortcode (.mh-ranking)
   ---------------------------------------------------------------- */

/* --- 2a. Grid: ampliar columna logo de 160px → 220px --- */
.mh-card > div {
    grid-template-columns: 220px 279px 279px 120px 130px !important;
    column-gap:   12px !important;
    padding:      14px 20px 14px 0px !important;
    align-items:  center !important;
}

/* Alinear header con las nuevas columnas */
.mh-ranking__header {
    grid-template-columns: 220px 279px 279px 120px 130px !important;
    font-size:      13px !important;
    letter-spacing: 0.5px !important;
}
.mh-ranking__header-logo,
.mh-ranking__header-features,
.mh-ranking__header-specs,
.mh-ranking__header-rating,
.mh-ranking__header-price {
    font-size:      13px !important;
    font-weight:    700  !important;
    letter-spacing: 0.5px !important;
}

/* --- 2b. Contenedor del logo --- */
.mh-card__logo {
    width:     220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height:        auto   !important;
    min-height:    unset  !important;
    display:       flex   !important;
    flex-direction: column !important;
    align-items:   center !important;
    justify-content: center !important;
    padding:    10px 12px !important;
    box-sizing: border-box !important;
}

/* --- 2c. Imagen del logo — mismas dimensiones que home --- */
.mh-card__logo img {
    width:      auto    !important;
    height:     auto    !important;
    max-width:  200px   !important;
    max-height: 100px   !important;
    min-width:  unset   !important;
    min-height: unset   !important;
    object-fit: contain !important;
    display:    block   !important;
}

/* --- 2d. Link "Ver sitio" --- */
.mh-card__visit {
    font-size:   11px    !important;
    margin-top:  6px     !important;
    display:     block   !important;
    text-align:  center  !important;
    white-space: nowrap  !important;
}

/* --- 2e. Columna Destacados: corregir overflow --- */
.mh-card__features {
    overflow:   visible    !important;
    padding:    4px 8px    !important;
    box-sizing: border-box !important;
}

/* --- 2f. Nombre empresa --- */
.mh-card__name {
    font-size:     15px   !important;
    font-weight:   700    !important;
    line-height:   1.3    !important;
    margin-bottom: 6px    !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
}

/* --- 2g. Badges de características --- */
.mh-tag {
    font-size:    12px         !important;
    padding:      4px 10px     !important;
    margin:       3px 3px 3px 0 !important;
    display:      inline-flex  !important;
    align-items:  center       !important;
    gap:          4px          !important;
    white-space:  nowrap       !important;
    border-radius: 20px        !important;
}

/* --- 2h. Specs: evitar desbordamiento --- */
.mh-spec {
    display:       flex      !important;
    align-items:   baseline  !important;
    gap:           4px       !important;
    margin-bottom: 4px       !important;
}
.mh-spec__label {
    font-size:      11px    !important;
    font-weight:    700     !important;
    letter-spacing: 0.3px   !important;
    text-transform: uppercase !important;
    white-space:    nowrap  !important;
    flex-shrink:    0       !important;
}
.mh-spec__value {
    font-size:     12px     !important;
    font-weight:   500      !important;
    line-height:   1.4      !important;
    overflow:      hidden   !important;
    text-overflow: ellipsis !important;
    white-space:   nowrap   !important;
}

/* --- Precio --- */
.mh-price__amount {
    font-size:   22px !important;
    font-weight: 800  !important;
    line-height: 1.2  !important;
}
.mh-price__from {
    font-size:      11px  !important;
    font-weight:    700   !important;
    letter-spacing: 0.5px !important;
}
.mh-price__period {
    font-size: 12px !important;
}

/* --- Rating número --- */
.mh-rating-num {
    font-size:   22px !important;
    font-weight: 800  !important;
    line-height: 1.2  !important;
}
.mh-star {
    font-size: 15px !important;
}
.mh-rating-cnt {
    font-size: 11px !important;
}

/* --- Botón Ver Planes --- */
.mh-price__cta {
    font-size:   14px !important;
    font-weight: 700  !important;
    padding: 9px 18px !important;
}

/* --- 2i. Alto de fila --- */
.mh-card {
    min-height:    180px !important;
    margin-bottom: 8px   !important;
}
.mh-card > div[itemscope] {
    min-height: 180px !important;
}

/* --- 2j. Badge de posición: esquina superior sin tapar logo --- */
.mh-card__badge {
    position:    absolute !important;
    top:         0        !important;
    left:        0        !important;
    font-size:   11px     !important;
    font-weight: 700      !important;
    padding:     4px 10px !important;
    z-index:     5        !important;
}

/* --- Ocultar listado JetEngine antiguo en /hosting/ (reemplazado por shortcode) --- */
.elementor-element-aba1004 {
    display: none !important;
}


/* ----------------------------------------------------------------
   RESPONSIVE — /hosting tabla mobile
   Resetear overrides de desktop para que style.css pueda actuar
   ---------------------------------------------------------------- */

@media (max-width: 900px) {
    /* Dejar que style.css maneje el grid en tablet */
    .mh-card > div {
        grid-template-columns: 140px 1fr 1fr !important;
        padding: 14px 16px 14px 0 !important;
    }
    .mh-ranking__header {
        grid-template-columns: 140px 1fr 1fr !important;
    }
    /* Logo: volver a tamaño tablet */
    .mh-card__logo {
        width:     140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
    }
    .mh-card__logo img {
        max-width:  120px !important;
        max-height:  70px !important;
    }
}

@media (max-width: 600px) {

    /* === HEADER: oculto en mobile === */
    .mh-ranking__header { display: none !important; }

    /* === CARD: mismo estilo visual que desktop === */
    .mh-card {
        border-radius: 12px !important;
        box-shadow: rgba(30, 45, 74, 0.08) 0px 2px 16px 0px !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
        position: relative !important;
        min-height: unset !important;
    }
    .mh-card > div[itemscope] {
        min-height: unset !important;
    }

    /* === INNER GRID: 2 columnas, sin gap (el logo maneja su ancho) === */
    .mh-card > div {
        grid-template-columns: 130px 1fr !important;
        column-gap: 0px !important;
        row-gap: 0px !important;
        padding: 0px !important;
        align-items: start !important;
    }

    /* === COLUMNA LOGO: fondo gris igual que desktop === */
    .mh-card__logo {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        width:     130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
        height: 100% !important;
        min-height: 160px !important;
        margin: 0 !important;
        padding: 14px 12px 10px !important;
        background-color: rgb(248, 250, 252) !important;
        border-radius: 12px 0px 0px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .mh-card__logo img {
        max-width:  110px !important;
        max-height:  65px !important;
        width:  auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    .mh-card__visit {
        font-size:  11px   !important;
        margin-top: 8px    !important;
        display:    block  !important;
        text-align: center !important;
    }

    /* === FILA 1: Nombre + Badges === */
    .mh-card__features {
        grid-column: 2 !important;
        grid-row: 1 !important;
        padding: 14px 12px 8px 14px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    .mh-card__name {
        font-size:     15px   !important;
        font-weight:   700    !important;
        line-height:   1.3    !important;
        margin-bottom: 8px    !important;
        white-space:   normal !important;
        display: block !important;
        color: rgb(27, 35, 54) !important;
    }
    .mh-tag {
        font-size:     11px        !important;
        padding:       3px 9px     !important;
        margin:        2px 3px 2px 0 !important;
        border-radius: 20px        !important;
        display:       inline-flex !important;
        align-items:   center      !important;
        gap:           3px         !important;
        white-space:   nowrap      !important;
    }

    /* === FILA 2: Rating === */
    .mh-card__rating {
        grid-column: 2 !important;
        grid-row: 2 !important;
        padding: 0px 12px 12px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        box-sizing: border-box !important;
    }
    .mh-rating-num {
        font-size:   20px !important;
        font-weight: 800  !important;
        line-height: 1    !important;
    }
    .mh-star {
        font-size: 13px !important;
    }
    .mh-rating-cnt {
        font-size: 11px   !important;
        width:     100%   !important;
    }

    /* === FILA 3: Specs (full width) === */
    .mh-card__specs {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;
        padding:    10px 12px 10px 16px !important;
        border-top: 1px solid rgb(240, 240, 240) !important;
        box-sizing: border-box !important;
    }
    .mh-spec {
        display:       flex    !important;
        align-items:   center  !important;
        gap:           6px     !important;
        margin-bottom: 6px     !important;
    }
    .mh-spec:last-child { margin-bottom: 0 !important; }
    .mh-spec > i, .mh-spec svg {
        width:      16px   !important;
        flex-shrink: 0     !important;
        font-size:   12px  !important;
        text-align:  center !important;
    }
    .mh-spec__label {
        font-size:      11px      !important;
        font-weight:    700       !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px    !important;
        white-space:    nowrap   !important;
        flex-shrink:    0        !important;
        color: rgb(27, 35, 54)   !important;
    }
    .mh-spec__value {
        font-size:   12px             !important;
        font-weight: 400              !important;
        white-space: normal           !important;
        line-height: 1.4              !important;
        color: rgb(65, 86, 116)       !important;
    }

    /* === FILA 4: Precio + Botón (misma fila) === */
    .mh-card__price {
        grid-column: 1 / 3 !important;
        grid-row: 4 !important;
        display:         flex          !important;
        align-items:     center        !important;
        justify-content: space-between !important;
        flex-wrap:       nowrap        !important;
        padding:    10px 12px 12px 16px !important;
        border-top: 1px solid rgb(240, 240, 240) !important;
        gap:        10px !important;
        box-sizing: border-box !important;
    }
    .mh-price__from {
        font-size:      10px      !important;
        font-weight:    700       !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px    !important;
        display:        block     !important;
        margin-bottom:  1px       !important;
        color: rgb(65, 86, 116)  !important;
    }
    .mh-price__amount {
        font-size:   20px !important;
        font-weight: 800  !important;
        line-height: 1.1  !important;
        display:     inline !important;
    }
    .mh-price__period {
        font-size:   11px  !important;
        display:     inline !important;
        margin-left: 2px   !important;
    }
    .mh-price__cta {
        font-size:     13px         !important;
        font-weight:   700          !important;
        padding:       9px 14px     !important;
        border-radius: 8px          !important;
        white-space:   nowrap       !important;
        display:       inline-block !important;
        flex-shrink:   0            !important;
        text-align:    center       !important;
        width:         auto         !important;
    }

    /* === BADGE DE POSICIÓN === */
    .mh-card__badge {
        position:      absolute  !important;
        top:           0         !important;
        left:          4px       !important;
        z-index:       10        !important;
        font-size:     10px      !important;
        font-weight:   700       !important;
        padding:       4px 10px  !important;
        border-radius: 0 0 8px 0 !important;
        line-height:   1.4       !important;
    }

} /* fin @media 600px */

/* Tablet: fondo gris en logo + padding consistente */
@media (min-width: 601px) and (max-width: 900px) {
    .mh-card__logo {
        background-color: rgb(248, 250, 252) !important;
        border-radius: 12px 0 0 12px !important;
    }
    .mh-card__specs {
        padding-left: 16px !important;
    }
    .mh-card__price {
        padding-left: 16px !important;
    }
}