/*
 * Ajustes de legibilidad y uso en celular (revisión móvil del 2026-09-26).
 * Se carga después de nissi-styles-v3.css y solo corrige lo necesario.
 */

/* ---- Tamaños usados en atributos style="" del HTML ----
   Un style en línea no se puede pisar desde una hoja de estilos, así que esos
   tamaños leen estas variables: en escritorio valen lo de siempre y en
   celular cambian (ver el bloque de tipografía móvil más abajo). */
:root {
    --fs-intro: 1.25rem;          /* párrafo centrado bajo el título de sección */
    --fs-lead: 1.125rem;          /* párrafo destacado dentro de tarjetas */
    --fs-section-title-xl: 3rem;  /* título de sección grande (cifras de Inicio) */
    --fs-section-title-l: 2.5rem; /* título de cada servicio */
    --fs-page-title: 2.5rem;      /* título de las páginas legales */
    --fs-cta-button: 1.125rem;    /* botón grande de llamada a la acción */
    --lh-loose: 2;                /* interlineado de la historia en Nosotros */
    --pad-cta-button: 1.25rem 3rem; /* relleno del botón grande de llamada a la acción */
    --pad-box: 3rem;              /* relleno del recuadro gris de Portafolio */
}

/* ---- Pie de página: contraste (antes gris #6C757D sobre #343A40, 2,2:1) ---- */
.footer-about {
    color: rgba(255, 255, 255, 0.78);
}

.footer-bottom,
.footer-bottom p {
    color: rgba(255, 255, 255, 0.72);
}

/* El logo tiene texto negro: sobre el fondo oscuro necesita una base clara */
.footer-logo {
    display: inline-block;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.75rem;
}

.footer-logo img {
    width: 180px;
    height: auto;
    display: block;
}

/* ---- Migas de pan: los títulos largos bajan de línea en vez de apretarse ---- */
.breadcrumbs-list {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

/* ---- Menú móvil: fondo oscurecido detrás y botón de WhatsApp oculto ---- */
@media (max-width: 768px) {
    body.menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 10, 0.45);
        z-index: 999;
    }

    body.menu-open .whatsapp-float {
        opacity: 0 !important;
        pointer-events: none;
    }

    /* Enlaces del pie más fáciles de tocar con el dedo (mínimo ~44 px) */
    .footer-links li {
        margin-bottom: 0.25rem;
    }

    .footer-links a {
        padding: 0.6rem 0;
    }

    /* Espacio al final para que el botón flotante no tape las redes sociales */
    .footer-bottom {
        padding-bottom: 5.5rem;
    }

    /* Las figuras decorativas del encabezado quedaban como una mancha gris
       detrás del título; en pantallas pequeñas no aportan nada */
    .floating-shapes {
        display: none;
    }
}

/* ---- Visor de fotos de la Galería abierto: el botón de WhatsApp no debe taparlo.
   El CSS base fija display:flex !important, por eso aquí también hace falta ---- */
body:has(.lightbox.active) .whatsapp-float {
    display: none !important;
}

/* ============= TIPOGRAFÍA MÓVIL =============
   Referencias: texto base de 16–17 px (iOS usa 17 pt y Android/Material 3
   16 sp), títulos de página de 28–36 px, textos secundarios de 14–15 px e
   interlineado de ~1,6. Con estos tamaños entran 35–50 caracteres por línea,
   lo cómodo para leer en un celular.
   Los estilos de cada página se cargan DESPUÉS de este archivo: por eso las
   reglas sobre sus clases llevan el prefijo :root, que les da un punto más de
   especificidad y evita recurrir a !important. */

/* Tablets y celulares grandes en horizontal */
@media (max-width: 768px) {
    :root {
        /* Las portadas interiores fijaban 50–60 % del alto de la pantalla y en
           celular el título quedaba flotando entre mucho blanco: ahora miden lo
           que mida su contenido. --spacing-xl (96 px) es el relleno de todas
           las secciones; aquí se reduce de forma proporcional. */
        --hero-min-h: 0;
        --spacing-xl: 4.5rem;
        --fs-intro: 1.125rem;
        --fs-section-title-xl: 2.25rem;
        --fs-section-title-l: 2rem;
    }

    :root .hero-title-premium {
        font-size: 2.75rem;
    }

    :root .hero-subtitle-premium {
        font-size: 1.25rem;
    }

    :root .stat-number-premium {
        font-size: 3.25rem;
    }
}

/* Celulares */
@media (max-width: 576px) {
    :root {
        --fs-intro: 1.0625rem;
        --fs-lead: 1rem;
        --fs-section-title-xl: 1.75rem;
        --fs-section-title-l: 1.625rem;
        --fs-page-title: 2rem;
        --fs-cta-button: 1rem;
        --lh-loose: 1.7;
        --pad-cta-button: 1rem 1.5rem;
        --pad-box: 1.75rem 1.25rem;
        --spacing-xl: 3.5rem;
        --spacing-lg: 2.5rem;
    }

    /* Botones en mayúsculas: menos espaciado entre letras para que quepan en
       una sola línea en 360 px */
    :root .btn-premium {
        letter-spacing: 0.02em;
        text-align: center;
    }

    :root .cta-box .btn-premium,
    :root .cta-box .btn-primary {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Tarjetas: el relleno de escritorio (40–48 px por lado) dejaba el texto
       en 232 px dentro de una tarjeta de 328 px */
    :root .card-premium,
    :root .glass-card,
    :root .service-content-premium {
        padding: 1.75rem 1.5rem;
    }

    :root .blog-card-content,
    :root .portfolio-content,
    :root .contact-box {
        padding: 1.5rem 1.25rem;
    }

    body {
        line-height: 1.65;
    }

    /* Escala base */
    p {
        font-size: 1rem;
        line-height: 1.65;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.625rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.125rem;
    }

    /* Portada de cada página */
    :root .hero-title-premium {
        font-size: 2.125rem;
        line-height: 1.15;
        margin-bottom: 1.25rem;
    }

    :root .hero-subtitle-premium {
        font-size: 1.125rem;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    /* En las portadas interiores el subtítulo es lo último: su margen solo
       sumaba blanco bajo el texto */
    :root .hero-subtitle-premium:last-child {
        margin-bottom: 0;
    }

    /* Botones de portada: con 40 px de relleno lateral el texto se partía en
       dos líneas en celulares de 360 px */
    :root .hero-cta-group {
        gap: 1rem;
    }

    :root .hero-cta-group .btn-premium {
        padding: 1rem 1.25rem;
        text-align: center;
    }

    /* Cifras, testimonios y franjas de llamada a la acción */
    :root .stat-number-premium {
        font-size: 2.75rem;
    }

    :root .stat-label-premium {
        font-size: 1rem;
    }

    :root .testimonial-text,
    :root .cta-premium p {
        font-size: 1.0625rem;
    }

    :root .footer-premium h3 {
        font-size: 1.125rem;
    }

    /* Tarjetas de las páginas interiores */
    :root .faq-category-title {
        font-size: 1.375rem;
    }

    :root .faq-answer p,
    :root .contact-card p,
    :root .service-features span {
        font-size: 1rem;
    }

    :root .contact-card h3,
    :root .blog-card h3,
    :root .portfolio-content h3 {
        font-size: 1.25rem;
    }

    /* Artículos del blog: un punto más que el texto general para lectura larga */
    :root .article-body,
    :root .article-body p,
    :root .article-body li {
        font-size: 1.0625rem;
        line-height: 1.7;
    }

    :root .article-body .lead {
        font-size: 1.1875rem;
    }

    :root .article-body h2,
    :root .legal-content h2 {
        font-size: 1.5rem;
    }

    :root .article-body h3,
    :root .legal-content h3 {
        font-size: 1.25rem;
    }

    :root .article-body h4,
    :root .legal-content h4 {
        font-size: 1.125rem;
    }

    :root .cta-box p {
        font-size: 1rem;
    }
}

/* Celulares angostos (Galaxy A, iPhone SE): botones en mayúsculas a 15 px,
   como las etiquetas de botón de Material 3 (14 sp) */
@media (max-width: 400px) {
    :root .btn-premium {
        font-size: 0.9375rem;
    }

    :root {
        --fs-cta-button: 0.9375rem;
    }
}