/* ==========================================================================
   STARSOFT — Responsive
   Breakpoints: escritorio grande >=1440 | laptop 1024-1439 | tablet 768-1023
   | móvil <=767 | móvil pequeño <=480
   ========================================================================== */

/* ---- Escritorio grande ---- */
@media (min-width: 1440px) {
    :root {
        --container-max: 1400px;
    }

    .producto-portales-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ---- Tablet (768–1023) ---- */
@media (max-width: 1023px) {
    :root {
        --section-padding-y: 3.6rem;
    }

    .portales__text {
        text-align: center;
    }
    .portales__text p {
        margin-inline: auto;
    }

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

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

    .nosotros-hero__media {
        height: 420px;
    }
    .nosotros-hero__content {
        width: 60%;
    }

    /* Página Productos: grillas de características más angostas */
    .producto-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .producto-flujo__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .producto-portales-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .producto-benefits--4col .producto-benefit-card {
        padding: 1.2rem 0.9rem;
    }
    .producto-benefits--4col .producto-benefit-card img {
        width: 3.6rem;
        height: 3.6rem;
        margin-bottom: 0.6rem;
    }
    .producto-benefits--4col .producto-benefit-card h3 {
        font-size: 0.95rem;
    }
    .producto-benefits--4col .producto-benefit-card p {
        font-size: 0.8rem;
    }
    .producto-steps {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }
}

/* ---- Móvil (<=767) ---- */
@media (max-width: 767px) {
    :root {
        --container-padding: 6vw;
        --section-padding-y: 3rem;
    }

    /* Header / menú hamburguesa */

    /* ".site-header" usa "position: sticky" en escritorio, pero en Safari/Chrome
       de iOS ese sticky deja de funcionar en cuanto CUALQUIER ancestro (aquí
       "html", por el "overflow-x: hidden" de global.css que evita el scroll
       horizontal) tiene un overflow distinto de "visible" — es un bug conocido
       de motores WebKit. El resultado: al hacer scroll con el menú móvil
       abierto, el header (con el logo y la "X" para cerrar) se desplazaba
       junto con el resto de la página en vez de quedarse fijo arriba,
       dejando un hueco por el que se veía el contenido de la página por
       detrás del panel del menú. Se fuerza "fixed" solo en este breakpoint
       para no depender de ese sticky, y se compensa con "padding-top" en
       "body" (ver más abajo) para que el contenido no quede tapado. */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 500;
    }
    body {
        /* Alto real del header: barra dorada (3px) + fila de contenido
           (78px) + borde inferior (1px). Debe coincidir con el "top" del
           "inset" de ".main-nav" más abajo. */
        padding-top: 82px;
    }

    .nav-toggle {
        display: inline-flex;
    }
    /* El ícono circular "Cotiza Ahora" del header se saca por completo en
       móvil (en todas las secciones/páginas): se veía recargado junto al
       logo y el botón de menú. El CTA "Cotiza Ahora" vive ahora dentro del
       propio panel del menú (.main-nav__cta), bien visible y con el mismo
       rojo llamativo, así no se pierde la llamada a cotizar. */
    .header-cta {
        display: none;
    }

    .main-nav {
        display: flex;
        flex-direction: column;
        /* ".main-nav" hereda "justify-content: center" de la regla de
           escritorio (centra los links horizontalmente en la fila del
           header) — hay que anularlo aquí: con "flex-direction: column" y
           contenido más alto que el panel (botón "Cotiza Ahora" + lista de
           enlaces), heredar "center" corta el principio del menú por
           arriba en vez de arrancar desde el tope. */
        justify-content: flex-start;
        position: fixed;
        inset: 82px 0 0 0;
        background: var(--starsoft-white);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-medium), transform var(--transition-medium), visibility var(--transition-medium);
        overflow-y: auto;
        z-index: 400;
        border-top: 1px solid var(--starsoft-border);
    }
    .main-nav.is-open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }
    .main-nav a.main-nav__cta {
        display: flex;
        width: auto;
        align-self: center;
        margin: 1.1rem auto 0;
        padding: 0.45rem 1.1rem;
        border-bottom: none;
        /* ".main-nav a" (más abajo) pisa el "color: white" de ".btn-red" por
           tener más especificidad (clase + etiqueta) — se repite aquí para
           que el texto del botón no salga oscuro sobre el fondo rojo. */
        color: var(--starsoft-white);
        font-size: 0.8rem;
        gap: 0.4rem;
    }
    .main-nav__cta svg {
        width: 13px;
        height: 13px;
    }
    .main-nav__cta span {
        flex: none;
        text-align: center;
    }
    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 6vw 2rem;
        gap: 0;
    }
    .main-nav a {
        padding: 1rem 0;
        border-bottom: 1px solid var(--starsoft-border);
        width: 100%;
    }
    .main-nav a::after {
        display: none;
    }
    body.nav-open {
        overflow: hidden;
    }

    /* Desplegable "Productos": lista anidada siempre visible (sin hover en táctil).
       Estas reglas solo deben regir cuando el menú móvil (.main-nav) está abierto:
       si se aplican siempre, "visibility: visible" y "pointer-events: auto" del
       submenú anulan el "visibility: hidden" / "pointer-events: none" que
       .main-nav hereda cuando está cerrado (un descendiente puede reactivar su
       propia visibilidad/eventos aunque el ancestro esté oculto), dejando los
       enlaces del submenú ("Planillas", "Contabilidad", etc.) clicables e
       invisibles superpuestos sobre el resto de la página — p. ej. sobre el
       formulario de "Cotiza ahora" — incluso con el menú cerrado. */
    .has-dropdown__chevron {
        display: none;
    }
    .main-nav.is-open .nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        display: block;
        margin-top: 0;
        padding: 0 0 0.5rem 1.1rem;
        background: transparent;
        max-width: none;
        width: auto;
    }
    .nav-submenu a {
        padding: 0.7rem 0 !important;
        border-bottom: 1px dashed var(--starsoft-border);
        color: var(--starsoft-gray);
        font-size: 0.82rem;
        white-space: normal;
    }
    .nav-submenu li:last-child a {
        border-bottom: none;
    }

    /* Hero */
    .hero-slider__stage {
        aspect-ratio: 1122 / 1402;
    }
    .hero-slider__arrow {
        width: 2rem;
        height: 2rem;
    }

    .mira-cards-grid {
        grid-template-columns: 1fr;
    }

    .clientes-trust__grid {
        grid-template-columns: 1fr;
    }

    .productividad__intro {
        text-align: center;
    }
    .productividad__highlight {
        border-left: none;
        border-top: 3px solid var(--starsoft-gold);
        padding-left: 0;
        padding-top: 0.6rem;
    }
    .productividad__highlight::after {
        content: "\2193";
        animation-name: productividadArrowDown;
    }
    @keyframes productividadArrowDown {
        0%, 100% {
            transform: translateY(0);
            opacity: 1;
        }
        50% {
            transform: translateY(6px);
            opacity: 0.6;
        }
    }

    .tabs-list {
        flex-direction: column;
        border-radius: var(--radius-sm);
    }
    .tabs-list__btn {
        border-right: none;
        border-bottom: 1px solid var(--starsoft-border);
    }
    .tabs-list__btn:last-child {
        border-bottom: none;
    }

    /* Nosotros: paneles "Por lo que somos", "Por lo que ofrecemos" y
       "Nuestra misión y visión" → carrusel horizontal deslizable en móvil,
       mismo patrón que .modulos/.socio-negocios, para no obligar a
       scrollear todo el texto de una tarjeta para llegar a la siguiente. */
    #panel-somos .row,
    #panel-ofrecemos .row,
    .mision-list {
        flex-wrap: nowrap;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: var(--container-padding);
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        padding-bottom: 0.9rem;
        scrollbar-width: none;
    }
    #panel-somos .row::-webkit-scrollbar,
    #panel-ofrecemos .row::-webkit-scrollbar,
    .mision-list::-webkit-scrollbar {
        display: none;
    }
    #panel-somos .row > [class*="col-"],
    #panel-ofrecemos .row > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }
    #panel-somos .row > [class*="col-"]:last-child,
    #panel-ofrecemos .row > [class*="col-"]:last-child {
        margin-right: calc(var(--container-padding) - 0.75rem);
    }
    .mision-row {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: start;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .clientes__track {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.5rem;
        scroll-snap-type: x proximity;
    }
    .clientes__logo {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding-inline: 0.4rem;
    }

    /* Selector de rubros (página Clientes): con 15 categorías, envolverlas
       en columna las apilaba en una lista vertical enorme que había que
       recorrer entera con scroll antes de llegar a los logos y nombres del
       rubro seleccionado (parecía que esa parte de la página no cargaba).
       Se convierte en una tira horizontal con scroll, como un selector de
       categorías de app, así el contenido del rubro queda visible apenas
       debajo. */
    .rubros-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.6rem;
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .rubros-tabs__btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .cta-cotizacion__inner {
        flex-direction: column;
        text-align: center;
    }
    .cta-cotizacion__text p {
        margin-inline: auto;
    }

    /* Página Productos: apilar grillas a una sola columna */

    /* Portales Web: son 18 tarjetas (la grilla más larga del sitio); apiladas
       en una sola columna en móvil sumaban un scroll vertical enorme antes de
       llegar al resto de la página. Mismo carrusel horizontal deslizable con
       scroll-snap que ya usan .modulos/.servicios-lista/.producto-extras. */
    .producto-portales-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: var(--container-padding);
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        padding-bottom: 0.9rem;
        scrollbar-width: none;
    }
    .producto-portales-grid::-webkit-scrollbar {
        display: none;
    }
    .producto-portales-grid__item {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }
    .producto-portales-grid__item:last-child {
        margin-right: calc(var(--container-padding) - 0.75rem);
    }

    /* E-Commerce / Portales Web / Controles Digitales, los 13 módulos,
       "¿Por qué elegir STARSOFT?" y las funcionalidades de cada producto
       (Contabilidad, Ventas, Planillas, Costos, Factron: hasta 15 tarjetas):
       en vez de apilar cada tarjeta en su propia fila (sumaba mucho scroll
       vertical antes de llegar al resto de la página), se listan en un
       carrusel horizontal deslizable con scroll-snap, igual que "Módulos
       especializados" / "Más que un software" en Inicio. */
    .producto-extras,
    .producto-accordion,
    .producto-feature-grid,
    .producto-flujo__list,
    .productos-why .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: var(--container-padding);
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        padding-bottom: 0.9rem;
        scrollbar-width: none;
    }
    .producto-extras::-webkit-scrollbar,
    .producto-accordion::-webkit-scrollbar,
    .producto-feature-grid::-webkit-scrollbar,
    .producto-flujo__list::-webkit-scrollbar,
    .productos-why .row::-webkit-scrollbar {
        display: none;
    }
    .producto-extras {
        display: flex;
    }
    .producto-accordion {
        display: flex;
    }
    .producto-feature-grid {
        display: flex;
        margin-top: 1.8rem;
    }
    .producto-flujo__list {
        display: flex;
    }
    .producto-extras__item,
    .producto-accordion__item,
    .producto-feature-card,
    .producto-flujo__list li,
    .productos-why .row > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }
    .producto-extras__item:last-child,
    .producto-accordion__item:last-child,
    .producto-feature-card:last-child,
    .producto-flujo__list li:last-child,
    .productos-why .row > [class*="col-"]:last-child {
        margin-right: calc(var(--container-padding) - 0.75rem);
    }
    /* En escritorio ".producto-extras__item .producto-accordion__video" usa
       "margin-top: auto" para pegar el botón "Ver video" al piso de la
       tarjeta (misma altura de fila en el grid de 3 columnas). En móvil cada
       tarjeta del carrusel mide solo su propio contenido, así que "auto" no
       tiene espacio que repartir y el botón queda pegado al párrafo. Se fija
       un margen fijo para que respire igual en las 3 tarjetas (E-Commerce,
       Portales Web, Controles Digitales). */
    .producto-extras__item .producto-accordion__video {
        margin-top: 1.1rem;
    }
    .producto-benefits--4col {
        grid-template-columns: 1fr 1fr;
    }
    /* Dentro de cada tarjeta del carrusel, ícono + título quedan en su
       propia línea centrada (el botón "Ver video" baja a la siguiente,
       ver regla de más abajo). */
    .producto-accordion__item {
        flex-wrap: wrap;
        row-gap: 0.6rem;
        justify-content: center;
        text-align: center;
    }
    /* El título usa "flex: 1" en escritorio para empujar el botón "Ver
       video" a la derecha de la fila. En móvil el botón ya bajó a su propia
       línea (ver regla siguiente), así que "flex: 1" solo hacía que el
       ícono y el título quedaran pegados al borde izquierdo de la tarjeta
       en vez de centrados como grupo. */
    .producto-accordion__item span {
        flex: none;
    }
    /* Antes, el botón "Ver video" solo pasaba a su propia línea cuando el
       título era largo (p.ej. Contabilidad, Cuentas por Cobrar), quedando
       descuadrado frente a las tarjetas con títulos cortos. Se fuerza a que
       siempre ocupe su propia línea, centrado, para que todas las tarjetas
       se vean igual en móvil. Se limita a ">" (hijo directo) de
       ".producto-accordion__item" para no afectar al mismo botón dentro de
       ".producto-extras__item" (tarjetas de E-Commerce/Portales Web/
       Controles Digitales), que usa un layout en columna distinto. */
    .producto-accordion__item > .producto-accordion__video {
        flex-basis: 100%;
        justify-content: center;
        margin-top: 0.2rem;
    }
    .producto-iso {
        flex-direction: column;
        text-align: center;
    }

    /* El botón "Ir a la Consulta Móvil de FACTRON" tiene texto largo y el
       ".btn" base usa "white-space: nowrap": en móvil el pill terminaba
       más ancho que la pantalla y se cortaba. Se permite que el texto
       pase a dos líneas sin salirse del contenedor de la tarjeta. */
    .producto-transformacion .btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        padding-inline: var(--container-padding);
    }

    /* El sello ISO y su descripción se apilan y centran en móvil, en vez de
       quedar pegados a la izquierda como en el layout de escritorio. */
    .footer-cert-banner {
        flex-direction: column;
        text-align: center;
    }
    .footer-cert-banner .footer-cert {
        margin-inline: auto;
    }
    .footer-cert-banner p {
        min-width: 0;
    }

    /* En móvil las columnas del footer se apilan (col-12) y el gutter
       vertical de Bootstrap (g-4 = 1.5rem, aplicado como margin-top a cada
       columna vía ".row > *") se suma al padding-top propio de
       ".footer-main" y al margin-top de ".footer-contact", dejando un
       bloque en blanco enorme entre el mini-nav (Inicio/Nosotros/Clientes)
       y la dirección. Se reduce el padding del contenedor y se anula el
       margin-top solo en la primera columna (".footer-brand"): las demás
       columnas ("Productos", "Para Clientes", "Conéctate") sí necesitan su
       gutter para separarse entre sí al apilarse, pero la primera no debe
       sumarlo sobre el padding que ya pone ".footer-main" tras el divisor. */
    .footer-main {
        padding-top: 0.5rem;
    }
    .footer-brand {
        margin-top: 0;
    }
    .footer-contact {
        margin-top: 0;
    }

    /* Capacitación hero: reubicar el enlace invisible sobre "Ver cronograma"
       para que coincida con el botón dibujado en la imagen móvil dedicada */
    .capacitacion-hero__cta {
        left: 32%;
        top: 50.5%;
        width: 35%;
        height: 7%;
    }

    /* Contáctenos hero: reubicar el enlace invisible sobre "Ver ejecutivos"
       para que coincida con el botón dibujado en la imagen móvil dedicada */
    .contactenos-hero__cta {
        left: 31.6%;
        top: 39.7%;
        width: 34.3%;
        height: 6.2%;
    }

    /* Nosotros hero: imagen dedicada para móvil (texto ya integrado en el arte) */
    .nosotros-hero__media {
        height: auto;
        aspect-ratio: 1122 / 1402;
    }

    /* Clientes hero: imagen dedicada para móvil (texto ya integrado en el arte) */
    .clientes-hero__media {
        aspect-ratio: 1122 / 1402;
    }
    .nosotros-hero__media::before {
        background: linear-gradient(180deg, rgba(255,255,255,0) 55%, var(--starsoft-white) 100%);
    }
    .nosotros-hero__content {
        position: static;
        width: 100%;
        height: auto;
        padding: 2rem 6vw;
        text-align: center;
    }
    .nosotros-hero__content p {
        margin-inline: auto;
    }
    .nosotros-hero__decor-lines,
    .nosotros-hero__decor-wave {
        display: none;
    }

    .mira-compact-list {
        justify-content: center;
    }

    /* Módulos especializados / Más que un software: carrusel horizontal deslizable en móvil */
    .modulos .row,
    .socio-negocios .row,
    .capacitacion-features .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: var(--container-padding);
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        padding-bottom: 0.9rem;
        scrollbar-width: none;
    }
    .modulos .row::-webkit-scrollbar,
    .socio-negocios .row::-webkit-scrollbar,
    .capacitacion-features .row::-webkit-scrollbar {
        display: none;
    }
    .modulos .row > [class*="col-"],
    .socio-negocios .row > [class*="col-"],
    .capacitacion-features .row > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }
    .modulos .row > [class*="col-"]:last-child,
    .socio-negocios .row > [class*="col-"]:last-child,
    .capacitacion-features .row > [class*="col-"]:last-child {
        margin-right: calc(var(--container-padding) - 0.75rem);
    }

    /* Servicios: "Nuestros servicios" → mismo carrusel horizontal deslizable
       que .modulos/.socio-negocios, para no apilar las 4 tarjetas en una
       columna larga. */
    .servicios-lista .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: var(--container-padding);
        margin-inline: calc(-1 * var(--container-padding));
        padding-inline: var(--container-padding);
        padding-bottom: 0.9rem;
        scrollbar-width: none;
    }
    .servicios-lista .row::-webkit-scrollbar {
        display: none;
    }
    .servicios-lista .row > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }
    .servicios-lista .row > [class*="col-"]:last-child {
        margin-right: calc(var(--container-padding) - 0.75rem);
    }

    /* Portales STARSOFT: al recortar el margen transparente de la imagen
       (ver .cloud-graphic en inicio.css), queda muy pegada al botón
       "Obtenlo Gratis" apilado arriba en móvil; se le da aire aparte. */
    .cloud-graphic {
        margin-top: 2rem;
    }
}

/* ---- Móvil pequeño (<=480) ---- */
@media (max-width: 480px) {
    .site-header .container {
        height: 66px;
    }
    body {
        /* Header más bajo en este breakpoint: barra dorada (3px) + fila de
           contenido (66px) + borde inferior (1px). Debe coincidir con el
           "padding-top" general de más arriba y con el "inset" de abajo. */
        padding-top: 70px;
    }
    .main-nav {
        inset: 70px 0 0 0;
    }
    .brand-logo-img {
        height: 20px;
    }

    .somos-card,
    .ofrecemos-card,
    .mision-card,
    .socio-card,
    .modulo-card {
        padding: 1.6rem 1.2rem;
    }

    .clientes__logo span {
        font-size: 0.92rem;
    }
}