/* =========================================================
   ZENHAI
   Responsive global
   ========================================================= */


/* =========================================================
   NOTEBOOK Y TABLET HORIZONTAL
   ========================================================= */

@media (max-width: 1199.98px) {
    :root {
        --zh-container: 960px;
        --zh-section-space: 5.5rem;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {
    :root {
        --zh-container: 720px;
        --zh-header-height: 74px;
        --zh-section-space: 5rem;
        --zh-section-space-sm: 3.75rem;
    }

    .zh-section-header {
        margin-bottom: 2.75rem;
    }

    .zh-card:hover {
        box-shadow: none;
        transform: none;
    }
}


/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 767.98px) {
    :root {
        --zh-container: 540px;
        --zh-section-space: 4.25rem;
        --zh-section-space-sm: 3.25rem;
    }

    body {
        line-height: 1.6;
    }

    h1,
    h2,
    h3,
    .zh-display {
        letter-spacing: -0.04em;
    }

    .zh-section-header {
        margin-bottom: 2.25rem;
    }

    .zh-lead {
        font-size: 1rem;
    }

    .zh-panel {
        border-radius: var(--zh-radius-md);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {
    :root {
        --zh-section-space: 3.75rem;
        --zh-section-space-sm: 2.75rem;
    }

    .container,
    .container-fluid {
        --bs-gutter-x: 2.5rem;
    }

    .zh-section-label {
        margin-bottom: 0.75rem;
        font-size: 0.65rem;
    }

    .zh-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        margin-top: 1.5rem;
    }

    .zh-actions .zh-btn {
        width: 100%;
    }

    .zh-btn {
        min-height: 48px;
    }

    .zh-card {
        padding: 1.25rem;
    }

    .zh-card__icon {
        margin-bottom: 0.75rem;
    }

    .zh-section-header--center {
        text-align: left;
    }

    .zh-section-header--center .zh-lead {
        margin-left: 0;
    }
}

/* =========================================================
   01. HEADER RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-header__logo {
        width: 150px;
    }

    .zh-header .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        padding: 1rem var(--bs-gutter-x);
        border-bottom: 1px solid var(--zh-border);
        background: rgba(250, 247, 241, .98);
        box-shadow: 0 16px 28px rgba(43, 30, 23, .08);
    }

    .zh-header__link {
        padding: .8rem 0 !important;
        border-bottom: 1px solid var(--zh-border);
        font-size: .9rem;
    }

    .zh-header__link::after {
        display: none;
    }

    .zh-header .zh-btn {
        width: 100%;
    }
}

/* =========================================================
   02. HERO PRINCIPAL RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-hero {
        min-height: auto;
    }

    .zh-hero__title {
        max-width: 700px;
        font-size: clamp(2.5rem, 7vw, 4rem);
    }

    .zh-hero__text {
        max-width: 620px;
    }

    .zh-hero__image {
        max-width: 680px;
        margin-top: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .zh-hero__title {
        font-size: clamp(2rem, 10vw, 2.75rem);
        text-wrap: initial;
    }

    .zh-hero__image {
        margin-top: 1rem;
    }
}

/* =========================================================
   03. INDICADORES Y DIFERENCIALES RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-stats-box {
        padding: 0 1rem;
    }

    .zh-stat {
        min-height: 115px;
    }

    .zh-stat:nth-child(3) {
        border-left: 0;
    }

    .zh-stat:nth-child(n + 3) {
        border-top: 1px solid var(--zh-border);
    }
}

@media (max-width: 575.98px) {
    .zh-stats-box {
        padding: 0 1.25rem;
    }

    .zh-stat {
        min-height: 105px;
        padding: 1.25rem 0;
    }

    .zh-stat:not(:first-child) {
        border-top: 1px solid var(--zh-border);
        border-left: 0;
    }

    .zh-stat__icon {
        width: 55px;
        font-size: 3rem;
        text-align: center;
    }
}

/* =========================================================
   04. DESTACADOS INSTITUCIONALES RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {
    .zh-highlights-box {
        padding: 1rem;
    }

    .zh-highlight-card:hover {
        transform: none;
    }

    .zh-highlight-card__body {
        padding: 1.1rem;
    }
}

@media (max-width: 575.98px) {
    .zh-highlights-box {
        padding: 0.75rem;
    }

    .zh-highlight-card__image {
        aspect-ratio: 3 / 2;
    }
}

/* =========================================================
   05. SERVICIOS
   ========================================================= */
.zh-service-card {
    min-height: 220px;
    border: 1px solid var(--zh-border);
    border-radius: var(--zh-radius-md);
    background-color: var(--zh-surface);
    transition: border-color var(--zh-transition), transform var(--zh-transition);
}

.zh-service-card:hover {
    border-color: var(--zh-border-dark);
    transform: translateY(-3px);
}

.zh-service-card__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 0.8rem;
    object-fit: contain;
    object-position: left center;
}

.zh-service-card__title {
    margin-bottom: 0.75rem;
    font-family: var(--zh-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.zh-service-card__text {
    max-width: 220px;
    color: var(--zh-text-secondary);
    font-size: 0.8rem;
    line-height: 1.55;
}

/* =========================================================
   06. HERRAMIENTAS RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-tool-card:hover {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .zh-tools-box {
        padding: 1rem;
    }
    
    .zh-tool-card {
        min-height: 100px;
    }

    .zh-tool-card__icon {
        width: 42px;
        height: 42px;
    }

    .zh-tool-card__title {
        font-size: 0.9rem;
    }

    .zh-tool-card__text {
        font-size: 0.78rem;
    }
}

/* =========================================================
   07. QUÉ HACEMOS RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-what-box {
        padding: 1.75rem 0;
    }

    .zh-what__illustration {
        max-width: 280px;
    }

    .zh-what__title {
        font-size: clamp(1.7rem, 4.8vw, 2.1rem);
    }
}

@media (max-width: 575.98px) {
    .zh-what-box {
        padding: 1.5rem 0;
    }

    .zh-what__illustration {
        max-width: 240px;
    }

    .zh-what__text {
        font-size: .95rem;
    }

    .zh-what-item__icon {
        margin-bottom: .75rem;
        font-size: 2.6rem;
    }

    .zh-what-item__title {
        font-size: .9rem;
    }
}

/* =========================================================
   08. CÓMO TRABAJAMOS RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .zh-method-card {
        min-height: 235px;
    }
}

@media (max-width: 991.98px) {
    .zh-method-card {
        min-height: 205px;
    }

    .zh-method-card:hover {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .zh-method-card {
        min-height: auto;
    }

    .zh-method-card__text {
        font-size: .8rem;
    }
}

/* =========================================================
   09. MULTIRED INTELIGENTE RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-ai-diagram {
        max-width: 540px;
        margin-top: 1rem;
    }
}

@media (max-width: 767.98px) {
    .zh-multired__title {
        font-size: clamp(1.8rem, 6vw, 2.3rem);
    }

    .zh-multired__text {
        font-size: .95rem;
    }

    .zh-channel i {
        font-size: 2.1rem;
    }

    .zh-channel span {
        font-size: .7rem;
    }
}

@media (max-width: 575.98px) {
    .zh-multired__title {
        font-size: 2rem;
    }

    .zh-channel i {
        margin-bottom: .45rem;
        font-size: 2rem;
    }

    .zh-channel span {
        font-size: .68rem;
    }

    .zh-ai-node {
        gap: .35rem;
        padding: .4rem .45rem;
        border-radius: 8px;
    }

    .zh-ai-node i {
        font-size: clamp(1.15rem, 6vw, 1.65rem);
    }

    .zh-ai-node span {
        font-size: clamp(.52rem, 2.7vw, .68rem);
    }

    .zh-ai-core span {
        font-size: clamp(1.2rem, 7vw, 1.8rem);
    }
}

@media (max-width: 399.98px) {
    .zh-ai-node {
        gap: .2rem;
        padding: .3rem;
    }

    .zh-ai-node i {
        font-size: 1.1rem;
    }

    .zh-ai-node span {
        font-size: .5rem;
    }
}

/* =========================================================
   10. CENTRO DE ESTUDIOS RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-studies__cta {
        min-width: 150px;
    }

    .zh-study-card {
        flex-basis: 50%;
    }
}

@media (max-width: 767.98px) {
    .zh-studies-box {
        padding: 1.5rem;
    }

    .zh-studies__cta {
        width: 100%;
    }

    .zh-studies-slider {
        padding: 0 1.25rem 1.75rem;
    }

    .zh-studies-slider__arrow--prev {
        left: -1.1rem;
    }

    .zh-studies-slider__arrow--next {
        right: -1.1rem;
    }
}

@media (max-width: 575.98px) {
    .zh-studies-box {
        padding: 1.25rem;
    }

    .zh-study-card {
        flex-basis: 100%;
    }

    .zh-study-card__body {
        padding: 1rem .25rem 0;
    }

    .zh-study-card__title {
        font-size: 1rem;
    }

    .zh-study-card__text {
        font-size: .82rem;
    }

    .zh-studies-slider__arrow {
        top: 35%;
        font-size: 2.2rem;
    }
}

/* =========================================================
   11. CTA FINAL Y CONTACTO RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-final-cta__title,
    .zh-final-cta__text {
        max-width: 680px;
    }

    .zh-final-cta__benefits {
        justify-content: flex-start !important;
    }

    .zh-final-cta .align-items-lg-center {
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .zh-final-cta__button {
        width: 100%;
    }

    .zh-final-cta__benefits {
        align-items: flex-start;
        flex-direction: column;
        gap: .75rem !important;
    }

    .zh-final-cta__benefits span {
        font-size: .78rem;
    }

    .zh-contact-box {
        padding: 1.25rem;
    }

    .zh-contact-box .zh-btn {
        width: 100%;
    }
}/* =========================================================
   12. FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .zh-footer__brand {
        width: 210px;
    }
}

@media (max-width: 575.98px) {
    .zh-footer__brand {
        width: 190px;
    }

    .zh-footer__description {
        font-size: .9rem;
    }

    .zh-footer__contact a,
    .zh-footer__contact > span {
        font-size: .85rem;
    }

    .zh-footer__bottom {
        font-size: .72rem;
    }
}