/* ===================================
   MOBILE OPTIMIZATIONS
   Mejoras específicas para dispositivos móviles
   =================================== */

/* Optimizaciones generales para móviles (hasta 768px) */
@media (max-width: 768px) {

    /* Ajustar tamaño de fuente base para móviles */
    html {
        font-size: 15px;
    }

    /* Reducir espaciado en secciones para móviles */
    section {
        padding: var(--spacing-2xl) 0;
    }

    /* Mejorar padding del container en móviles */
    .container {
        padding: 0 var(--spacing-md);
    }

    /* ===================================
       HERO SECTION - MOBILE
       =================================== */
    .hero {
        padding: calc(80px + var(--spacing-lg)) 0 var(--spacing-lg);
        min-height: auto;
    }

    .hero__title {
        font-size: var(--fs-3xl);
        line-height: 1.3;
    }

    .hero__subtitle {
        font-size: var(--fs-lg);
    }

    .hero__description {
        font-size: var(--fs-xl);
    }

    .hero__text {
        font-size: var(--fs-base);
        padding: 0 var(--spacing-sm);
    }

    .hero__buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-sm);
    }

    .hero__buttons .btn {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--fs-lg);
    }

    .hero__image-wrapper {
        width: 250px;
        height: 250px;
    }

    /* ===================================
       SECTION HEADERS - MOBILE
       =================================== */
    .section__title {
        font-size: var(--fs-3xl);
        padding: 0 var(--spacing-sm);
    }

    .section__subtitle {
        font-size: var(--fs-base);
        padding: 0 var(--spacing-sm);
    }

    /* ===================================
       CARDS - MOBILE
       =================================== */
    .service-card,
    .value-card,
    .pricing-card {
        padding: var(--spacing-lg);
    }

    .service-card__title,
    .value-card__title {
        font-size: var(--fs-lg);
    }

    .service-card__description,
    .value-card__text {
        font-size: var(--fs-sm);
        line-height: 1.7;
    }

    /* ===================================
       PRICING CARDS - MOBILE
       =================================== */
    .pricing-card__price {
        font-size: var(--fs-3xl);
    }

    .pricing-card__features {
        font-size: var(--fs-sm);
    }

    .pricing-card__features li {
        padding: var(--spacing-xs) 0;
    }

    /* ===================================
       SCROLL TO TOP BUTTON - MOBILE
       =================================== */
    .scroll-top {
        width: 45px;
        height: 45px;
        bottom: 30px;
        right: auto;
        /* Quitar posición derecha */
        left: var(--spacing-md);
        /* Mover a la izquierda */
        font-size: var(--fs-lg);
    }

    /* ===================================
       FORMS - MOBILE
       =================================== */
    .form__input,
    .form__textarea {
        font-size: var(--fs-base);
        padding: var(--spacing-md);
    }

    .form__button {
        width: 100%;
        padding: var(--spacing-md);
        font-size: var(--fs-lg);
    }

    /* ===================================
       CONTACT SECTION - MOBILE
       =================================== */
    .contact-info__item {
        font-size: var(--fs-sm);
    }

    .contact-info__icon {
        font-size: var(--fs-xl);
    }

    /* ===================================
       FOOTER - MOBILE
       =================================== */
    .footer__title {
        font-size: var(--fs-xl);
    }

    .footer__text,
    .footer__link {
        font-size: var(--fs-sm);
    }

    /* ===================================
       NAVIGATION - MOBILE IMPROVEMENTS
       =================================== */
    .nav__menu {
        width: 85%;
    }

    .nav__link {
        font-size: var(--fs-lg);
        padding: var(--spacing-md) var(--spacing-sm);
    }

    /* ===================================
       EXPERIENCE SECTION - MOBILE
       =================================== */
    .timeline {
        padding-left: var(--spacing-lg);
    }

    .timeline__title {
        font-size: var(--fs-base);
    }

    .timeline__description {
        font-size: var(--fs-sm);
    }

    /* ===================================
       BOOKING SECTION - MOBILE
       =================================== */
    .calendly-inline-widget {
        min-height: 500px !important;
    }
}

/* Optimizaciones para móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .hero__title {
        font-size: var(--fs-2xl);
    }

    .section__title {
        font-size: var(--fs-2xl);
    }

    .hero__image-wrapper {
        width: 200px;
        height: 200px;
    }

    /* Botones más grandes para facilitar el toque */
    .btn {
        min-height: 48px;
        font-size: var(--fs-base);
    }

    /* Cards con menos padding en pantallas muy pequeñas */
    .service-card,
    .value-card,
    .pricing-card {
        padding: var(--spacing-md);
    }
}

/* Optimizaciones para tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-xl);
    }

    .hero__title {
        font-size: var(--fs-4xl);
    }

    .section__title {
        font-size: var(--fs-3xl);
    }

    /* Ajustar grid de servicios para tablets */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .value-proposition__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mejoras de accesibilidad táctil */
@media (hover: none) and (pointer: coarse) {

    /* Aumentar área de toque para enlaces y botones */
    .nav__link,
    .btn,
    .social-link,
    .footer__link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Mejorar feedback visual en dispositivos táctiles */
    .btn:active {
        transform: scale(0.98);
    }

    .service-card:active,
    .value-card:active,
    .pricing-card:active {
        transform: scale(0.99);
    }
}

/* Optimización para modo landscape en móviles */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: calc(80px + var(--spacing-md)) 0 var(--spacing-md);
    }

    .hero__container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }

    .hero__image-wrapper {
        width: 200px;
        height: 200px;
    }
}

/* Prevenir zoom en inputs en iOS */
@media (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
}