/* ==============================================
   Mobile Optimization Overrides
   Mejoras específicas para dispositivos móviles
   ============================================== */

@media (max-width: 768px) {

    /* Ajustes generales de contenedor */
    .container {
        padding: 0 20px;
    }

    /* Ajustes de tipografía para títulos largos */
    h1 {
        font-size: clamp(2rem, 5vw, 2.5rem);
        word-wrap: break-word;
    }

    /* Ajustes de tarjetas */
    .card,
    .service-card,
    .post-card,
    .testimonial-card {
        min-height: auto !important;
        /* Permitir altura flexible */
        padding: 20px !important;
    }

    /* Ajustes de Hero */
    .hero {
        padding: 40px 0 20px;
        text-align: center;
    }

    .hero-grid {
        gap: 32px;
    }

    .hero-actions {
        justify-content: center;
    }

    /* Ajustes de Navegación */
    .nav-wrap {
        height: 60px;
    }

    /* Ajustes de la página de Servicios */
    .services-hero {
        padding: 40px 0;
    }

    .service-cta {
        padding: 30px 20px;
    }

    /* Ajustes de la página de Contacto */
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-card {
        position: static;
        /* Quitar sticky en móvil */
        margin-top: 30px;
    }

    /* Ajustes de la página Sobre Mí */
    .about-hero .shell {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-actions {
        justify-content: center;
    }

    .about-photo {
        margin: 30px auto 0;
        max-width: 100%;
    }

    .story-timeline {
        padding-left: 0;
    }

    .story-entry {
        padding-left: 20px;
    }

    /* Ajuste de línea de tiempo para que no se corte */
    .story-timeline::before {
        left: 6px;
    }

    .story-entry::before {
        left: 0;
    }
}

@media (max-width: 480px) {
    /* Ajustes para pantallas muy pequeñas */

    /* Botones full width para facilitar el toque */
    .hero-btn,
    .cta-btn,
    .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    /* Ajustes de formulario */
    .form-grid {
        grid-template-columns: 1fr;
    }

    /* Ajustes de Blog */
    .blog-controls {
        flex-direction: column;
        align-items: stretch;
    }

    #blog-search {
        width: 100%;
    }

    .tags {
        justify-content: center;
    }
}