/* =========================================================
   Estilos SOLO para móvil (≤ 767px) — ESISDEM
   Desktop no se toca. Ajusta tipografía, banners, logo,
   paddings/margins y tarjetas para una lectura ordenada.
   ========================================================= */

@media only screen and (max-width: 767px) {

    /* ---------- Logo (paralelogramo del tema) ---------- */
    .main-header.header-one .mobile-logo,
    .main-menu .mobile-logo {
        padding: 6px 20px !important;   /* paralelogramo proporcionado */
        max-width: none !important;     /* evita que se corte el texto */
        width: auto !important;
    }
    .main-header.header-one .mobile-logo img,
    .main-header .logo img,
    .main-menu .mobile-logo img {
        max-height: 40px !important;    /* logo más grande y legible */
        width: auto !important;
        max-width: none !important;
    }

    /* Barra del header compacta (mucho menos alto) */
    .main-header .header-upper { padding: 0 !important; }
    .main-header .header-inner { min-height: 0 !important; }
    .main-menu, .main-menu .navbar-header { padding: 0 !important; }
    .main-menu .navbar-header .navbar-toggle { padding: 4px 0 !important; }

    /* Menú cerrado: ocultar del todo (evita "+" sueltos) */
    .main-menu .navbar-collapse.collapse:not(.show) { display: none !important; }

    /* Header FIJO en móvil (para poder navegar al hacer scroll) */
    .main-header .header-upper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1030 !important;
    }
    /* Compensar el alto del header fijo para que no tape el contenido */
    body { padding-top: 58px; }

    /* Contexto de posición para que el menú abra DEBAJO del header (no lo tape) */
    .main-header .header-inner,
    .main-menu .nav-outer,
    .main-menu { position: static !important; }
    .main-menu .navbar-collapse {
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    /* ---------- Banner de página ---------- */
    .page-banner-area {
        padding-top: 70px !important;
        padding-bottom: 55px !important;
    }
    .page-banner-area .page-title,
    .banner-inner h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }
    .page-banner-area .breadcrumb {
        font-size: 13px;
        margin-bottom: 0 !important;
    }

    /* ---------- Hero (inicio) ---------- */
    .hero-area .hero-content h1,
    .hero-content h1 {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }
    .hero-content p { font-size: 15px !important; }
    .hero-area .hero-content { padding-top: 40px !important; padding-bottom: 30px !important; }

    /* ---------- Tipografía de secciones ---------- */
    .section-title h2,
    h2, .h2 { font-size: 25px !important; line-height: 1.3 !important; }
    h3, .h3 { font-size: 20px !important; line-height: 1.35 !important; }
    h4, .h4 { font-size: 18px !important; }
    .section-title .sub-title,
    .sub-title { font-size: 13px !important; letter-spacing: 1px; }

    /* Textos comunes: +1px de tamaño y menos interlineado (solo móvil) */
    p, li, .text-muted, .lead, .list-style-one li, .service-body p, .contact-info-box span {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }
    .lead { font-size: 17px !important; }

    /* ---------- Espaciado de secciones (reducir paddings grandes) ---------- */
    .py-135 { padding-top: 70px !important; padding-bottom: 55px !important; }
    .py-130 { padding-top: 55px !important; padding-bottom: 55px !important; }
    .pt-130, .pt-135 { padding-top: 55px !important; }
    .pb-130, .pb-135 { padding-bottom: 55px !important; }
    .pt-150 { padding-top: 55px !important; }
    .pt-100, .pt-115, .pt-90 { padding-top: 45px !important; }
    .pb-100, .pb-115, .pb-90 { padding-bottom: 45px !important; }
    .pt-80, .pt-60 { padding-top: 40px !important; }
    .pb-80, .pb-70, .pb-65 { padding-bottom: 40px !important; }
    .p-80 { padding: 30px !important; }

    /* ---------- Márgenes utilitarios grandes ---------- */
    .mt-80, .mt-60, .mt-55, .mt-45, .mt-30, .mt-20 { margin-top: 22px !important; }
    .mb-80, .mb-60, .mb-55, .mb-45, .mb-40, .mb-35 { margin-bottom: 22px !important; }
    .mb-30 { margin-bottom: 18px !important; }
    .rmb-65, .rmb-55, .rmb-40 { margin-bottom: 25px !important; }

    /* Gutters de columnas anchos */
    .gap-100, .gap-90, .gap-40 { --bs-gutter-x: 24px; }

    /* ---------- Tarjetas / items: separación uniforme ---------- */
    .service-item-three,
    .service-item-six,
    .feature-item,
    .contact-info-box,
    .pricing-plan-item,
    .why-choose-image { margin-bottom: 22px; }

    /* Cajas de info de contacto: 2 columnas + icono pequeño (solo móvil) */
    .contact-page-info .row.justify-content-center > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
    .contact-info-box {
        padding: 18px 12px !important;
        margin-bottom: 14px !important;
    }
    .contact-info-box .icon {
        font-size: 30px !important;
        margin-bottom: 12px !important;
    }
    .contact-info-box h4 { font-size: 16px !important; margin-bottom: 8px !important; }
    .contact-info-box span,
    .contact-info-box a { font-size: 13px !important; word-break: break-word; }

    /* ---------- Nosotros: imagen y badge ---------- */
    .about-area-five .about-five-images { margin-top: 0 !important; }
    .about-area-five .about-five-images .experience-years {
        position: static !important;
        max-width: none !important;
        margin: 16px 0 0 !important;
        display: inline-block;
    }
    .about-content { margin-top: 28px !important; }

    /* ---------- ¿Por qué elegirnos? (tabs) ---------- */
    .why-choose-tab .nav.nav-pills { flex-wrap: wrap; gap: 6px; }
    .why-choose-tab .nav .nav-link {
        font-size: 15px !important;
        padding: 8px 6px !important;
        justify-content: center;
    }
    .why-choose-tab .nav .nav-link i { font-size: 24px !important; margin-right: 8px; }
    .why-choose-content { margin-top: 22px; }

    /* ---------- Contacto / agenda ---------- */
    .contact-form-wrap { padding: 22px 18px !important; }
    .contact-page-map iframe, .our-location iframe { height: 300px; }

    /* Formulario de agenda (Google Calendar): compactar en móvil */
    #app .header,
    .header { margin: 0 auto 16px !important; }
    #app .header h2,
    .header h2 { font-size: 22px !important; margin-bottom: 8px !important; }
    #app .header p,
    .header p { font-size: 0.9rem !important; }
    #app .form-container,
    .form-container { padding: 14px 14px !important; }
    #app .form-title,
    .form-title { margin-bottom: 12px !important; }
    #app .form-title p,
    .form-title p { font-size: 0.85rem !important; }
    #app .form-grid,
    .form-grid { gap: 8px !important; row-gap: 8px !important; column-gap: 8px !important; }
    #app .form-group,
    .form-group { margin: 0 !important; }
    #app .form-group label,
    .form-group label { margin-bottom: 2px !important; font-size: 0.8rem !important; }
    #app .form-group input,
    #app .form-group select,
    .form-group input,
    .form-group select { padding: 8px 12px !important; font-size: 0.9rem !important; border-radius: 8px !important; }
    #app .form-group .error-message,
    .form-group .error-message { margin-top: 1px !important; font-size: 0.72rem !important; }
    #app .btn-submit,
    .btn-submit { margin-top: 14px !important; padding: 11px !important; }
    #app .card-header,
    .card-header { padding: 14px !important; }
    #app .steps-indicator,
    .steps-indicator { padding: 8px !important; margin-bottom: 4px !important; }

    /* ---------- Detalle de servicio / sidebar ---------- */
    .service-details-area .service-sidebar { margin-top: 30px; }
    .service-sidebar .widget { padding: 25px !important; }

    /* ---------- Botones ---------- */
    .theme-btn { padding: 10px 22px !important; font-size: 14px !important; }

    /* ---------- Footer ---------- */
    .footer-cta-inner { padding: 28px 20px !important; text-align: center; }
    .main-footer .footer-widget { margin-bottom: 22px; }

    /* Logo del footer: mismo tamaño que el del header en móvil */
    .main-footer .footer-logo {
        padding: 6px 20px !important;
        margin-bottom: 16px !important;
    }
    .main-footer .footer-logo img {
        max-height: 40px !important;
        width: auto !important;
    }

    /* Quitar el espacio superior excesivo del área de widgets */
    .main-footer > .container { padding-top: 25px !important; }
    .footer-cta-wrap { margin-bottom: 0 !important; }
    .main-footer { margin-top: 0 !important; padding-top: 0 !important; }
}