/* ---------------------------------------
@@@@ responsive.css
Ajustes de la version movil / tablet.
Se carga al final de cada pagina para que gane
a los estilos en linea y a los <style> de cada vista.

IMPORTANTE: todo esta dentro de media queries de
max-width, el diseno de escritorio (>= 992px) no cambia.

@@@@ indice
............. 1. base y desbordes
............. 2. ancho util del body
............. 3. navbar
............. 4. escala tipografica
............. 5. anchos fijos y texto justificado
............. 6. saltos de linea <br>
............. 7. utilidades de espaciado
............. 8. formularios y botones
............. 9. footer
............. 10. inicio (index.html)
............. 11. nosotros (nosotros.html)
............. 12. productos (productos.html)
............. 13. contacto (contacto.html)
............. 14. formulario (formulario.html)
--------------------------------------- */

/* ---------------------------------------
@@@@ 1. base y desbordes
--------------------------------------- */
@media (max-width: 991.98px) {
    html {
        -webkit-text-size-adjust: 100%;
    }
    body {
        max-width: 100%;
    }
    img, svg, video, iframe, canvas {
        max-width: 100%;
    }
    img {
        height: auto;
    }
    /* Las filas de bootstrap fuera de un .container sacan
       15px por lado y provocan scroll horizontal */
    footer > .row,
    body > section > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* OJO: no angostar aqui la barra de scroll.
       El thumb de style.css lleva border: 3px solid #fff (6px en
       total), asi que con menos de ~10px el verde desaparece y la
       barra se ve blanca. En celular y tablet la barra es flotante
       y no ocupa ancho, asi que no hay nada que recortar. */
}

/* ---------------------------------------
@@@@ 2. ancho util del body
El 0 4rem del escritorio deja solo 247px de 375px.
--------------------------------------- */
/* contacto.html no lleva padding en el body: usa .container
   y su banner va de borde a borde */
@media (max-width: 991.98px) {
    body:not(.page-contacto) {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
@media (max-width: 767.98px) {
    body:not(.page-contacto) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
@media (max-width: 400px) {
    body:not(.page-contacto) {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
}

/* ---------------------------------------
@@@@ 3. navbar
--------------------------------------- */
@media (max-width: 991.98px) {
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        padding: .35rem .25rem !important;
        box-shadow: 0 1px 10px rgba(0, 0, 0, .08);
    }
    .navbar .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-brand {
        margin: 0 !important;
    }
    .navbar .navbar-brand img {
        /* web.css lo limita a 7.125rem, aqui se libera */
        width: 150px !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto;
    }
    .navbar-toggler {
        min-width: 46px;
        min-height: 46px;
        padding: .5rem .6rem;
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 10px;
    }
    /* El menu desplegado no debe tapar toda la pantalla */
    .navbar-collapse {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        padding-bottom: .5rem;
    }
    .navbar .navbar-nav {
        width: 100%;
    }
    .navbar .navbar-nav > li {
        width: 100%;
    }
    .navbar .navbar-nav > li > a {
        display: flex;
        align-items: center;
        min-height: 48px;
        margin: 0 !important;
        padding: .25rem 0;
        font-size: 1.0625rem !important;
    }
    .navbar .navbar-nav:first-of-type > li {
        border-bottom: 1px solid rgba(0, 0, 0, .07);
    }
    /* Boton Contactanos a todo lo ancho */
    .navbar .navbar-nav > li > a.btn {
        justify-content: center;
        width: 100%;
        height: auto !important;
        min-height: 50px;
        margin: 1rem 0 .25rem !important;
        font-size: 1.0625rem !important;
    }
    /* Redes sociales centradas */
    .navbar .navbar-nav > li.d-flex {
        justify-content: center;
        gap: 1.5rem !important;
        padding: .5rem 0;
    }
    .navbar .navbar-nav > li.d-flex > a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        min-height: 48px;
    }
}

/* ---------------------------------------
@@@@ 4. escala tipografica
Los tamanos del escritorio (h1 = 2.5rem, display-4 = 3.5rem)
no caben en una columna de 343px.
--------------------------------------- */
@media (max-width: 767.98px) {
    .display-3 {
        font-size: 2.25rem !important;
        line-height: 1.15;
    }
    .display-4 {
        font-size: 2rem !important;
        line-height: 1.15;
    }
    h1, .h1 {
        font-size: 1.875rem !important;
        line-height: 1.2;
    }
    h2, .h2 {
        font-size: 1.5rem !important;
        line-height: 1.25;
    }
    h3, .h3 {
        font-size: 1.3125rem !important;
        line-height: 1.3;
    }
    h4, .h4 {
        font-size: 1.1875rem !important;
        line-height: 1.4;
    }
    h5, .h5 {
        font-size: 1.0625rem !important;
        line-height: 1.5;
    }
    h6, .h6 {
        font-size: 1rem !important;
        line-height: 1.6;
    }
    p, li {
        line-height: 1.6;
    }
}
@media (max-width: 359.98px) {
    .display-3, .display-4 {
        font-size: 1.75rem !important;
    }
    h1, .h1 {
        font-size: 1.625rem !important;
    }
    h2, .h2 {
        font-size: 1.375rem !important;
    }
}
/* Banda de tablet: las col-md-* siguen en fila pero muy angostas,
   asi que la tipografia baja un escalon intermedio */
@media (min-width: 768px) and (max-width: 991.98px) {
    .display-3 {
        font-size: 2.75rem !important;
    }
    .display-4 {
        font-size: 2.5rem !important;
    }
    h1, .h1 {
        font-size: 2.125rem !important;
        line-height: 1.2;
    }
    h2, .h2 {
        font-size: 1.75rem !important;
    }
    h3, .h3 {
        font-size: 1.5rem !important;
    }
    h4, .h4 {
        font-size: 1.3125rem !important;
    }
    h5, .h5 {
        font-size: 1.125rem !important;
    }
    .page-home .e .row > div:nth-child(1) {
        min-height: 560px;
        padding: 3rem 2rem !important;
    }
    .page-home .e p.h1 {
        font-size: 2.25rem !important;
    }
    .page-home .e p.h3 {
        font-size: 1.25rem !important;
    }
    .page-home .e .btn {
        font-size: 1.125rem !important;
    }
    /* El texto sobre el video no cabe en su caja original */
    .page-home .c .div {
        top: 8% !important;
        left: 6% !important;
        max-width: 55%;
        padding: 1.25rem !important;
        background-color: rgba(255, 255, 255, .9);
        border-radius: 10px;
    }
    .page-home .c .div .p {
        padding: 0 !important;
        margin-bottom: .5rem;
        background-color: transparent !important;
    }
}

/* ---------------------------------------
@@@@ 4-bis. hero de inicio: fondo
fondo-index-hero-5.png son dos mitades: la figura (blanco,
naranja y verde con los iconos de canasta) a la izquierda y la
foto de la senora a la derecha. El reparto 4/8 de columnas solo
cuadra a partir de 992px; abajo de eso el recorte parte justo
encima del texto y se ven las dos imagenes empalmadas.
Por eso, fuera del escritorio, se usa nada mas la figura
(recortada aparte) y se oculta la columna vacia.
--------------------------------------- */
@media (max-width: 991.98px) {
    .page-home .e,
    .page-home .e .row {
        height: auto !important;
    }
    .page-home .e .row {
        border-radius: 14px;
        overflow: hidden;
        background-image: url("../img/fondo-index-hero-5-figura.png") !important;
        background-position: center bottom !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }
    .page-home .e .row > div:nth-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
        height: auto !important;
        /* Velo tenue: mantiene vivos el naranja y el verde
           pero asegura que el texto blanco se lea */
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, .28), rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .3));
    }
    .page-home .e .row > div:nth-child(2) {
        display: none !important;
    }
}

/* ---------------------------------------
@@@@ 5. anchos fijos y texto justificado
Los width en pixeles de los style="" desbordan
o dejan la columna demasiado angosta.
--------------------------------------- */
@media (max-width: 991.98px) {
    [style*="width: 250px"],
    [style*="width: 270px"],
    [style*="width: 300px"],
    [style*="width: 50%"],
    [style*="width: 70%"],
    [style*="width: 80%"],
    [style*="width: fit-content"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* El texto justificado en columnas angostas abre
   huecos enormes entre palabras */
@media (max-width: 767.98px) {
    [style*="text-align: justify"],
    [style*="text-align:justify"] {
        text-align: left !important;
    }
}

/* ---------------------------------------
@@@@ 6. saltos de linea <br>
Los <br> estan puestos para el ancho de escritorio.
En movil parten las frases a la mitad.
--------------------------------------- */
@media (max-width: 767.98px) {
    section p br,
    section li br,
    section h1 br, section h2 br, section h3 br,
    footer p br {
        display: none;
    }
    /* Menos en las respuestas del acordeon, ahi separan parrafos */
    .card-body br {
        display: inline !important;
    }
}

/* ---------------------------------------
@@@@ 7. utilidades de espaciado
3rem de padding sobre 343px de ancho no deja nada.
--------------------------------------- */
@media (max-width: 767.98px) {
    .p-5 {
        padding: 1.5rem !important;
    }
    .px-5 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .mx-5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    .ml-5 {
        margin-left: 0 !important;
    }
    .mt-5 {
        margin-top: 1.5rem !important;
    }
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
}

/* ---------------------------------------
@@@@ 8. formularios y botones
--------------------------------------- */
@media (max-width: 767.98px) {
    /* 16px evita que iOS haga zoom al enfocar un campo */
    input, textarea, select, .form-control {
        font-size: 16px !important;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100% !important;
    }
    input.p-2 {
        min-height: 48px;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    /* Area tactil minima comoda */
    .btn:not([data-toggle="collapse"]) {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------------------------------------
@@@@ 9. footer
--------------------------------------- */
@media (max-width: 767.98px) {
    .footer .row {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .footer img {
        max-width: 175px;
        height: auto;
        margin-bottom: 0;
    }
    .footer ul {
        flex-direction: column !important;
        gap: 0 !important;
        margin: 1rem 0 !important;
        padding-left: 0;
    }
    .footer ul li {
        width: 100%;
    }
    .footer ul li a {
        display: block;
        min-height: 48px;
        line-height: 48px;
        margin: 0 !important;
        text-align: center;
        font-size: 1.0625rem !important;
    }
    .footer .col-md-12.my-5 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important;
    }
    .footer .fa {
        font-size: 1.85rem !important;
    }
}

/* ---------------------------------------
@@@@ 10. inicio (index.html)
--------------------------------------- */
@media (max-width: 767.98px) {
    /* @@@@ - Hero - @@@@ */
    /* El fondo y la columna vacia se resuelven en la seccion 4-bis */
    .page-home .e .row > div:nth-child(1) {
        min-height: 470px;
        padding: 3rem 1.25rem !important;
    }
    .page-home .e p.h1 {
        font-size: 2rem !important;
        text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
    }
    .page-home .e p.h3 {
        /* 19px en negrita cuenta como "texto grande" para contraste */
        font-size: 1.1875rem !important;
        margin: 1rem 0 2rem !important;
        text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
    }
    .page-home .e .btn {
        width: 100%;
        max-width: 18rem;
        height: 54px !important;
        font-size: 1.125rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* @@@@ - Un minimarket dentro de tu empresa - @@@@ */
    .page-home .a .row.w-100 {
        margin-left: 0;
        margin-right: 0;
    }
    .page-home .a .col-md-12 {
        padding: 2.5rem 1rem !important;
    }
    .page-home .a .row.mt-5 > div {
        margin-bottom: 2.5rem;
    }
    .page-home .a .row.mt-5 > div:last-child {
        margin-bottom: 0;
    }
    .page-home .a .row.mt-5 img {
        width: 92px !important;
    }
    .page-home .a p.h5 {
        max-width: 26rem;
        font-size: 1rem !important;
        margin-top: 1rem !important;
    }

    /* @@@@ - Conoce nuestra app - @@@@ */
    .page-home .b .row {
        border-radius: 14px;
    }
    .page-home .b .col-md-9 {
        padding: 2.25rem 1.25rem 1rem !important;
    }
    .page-home .b p.display-4 {
        font-size: 1.875rem !important;
    }
    .page-home .b ul {
        margin: 1.5rem 0 !important;
        padding-left: 1.15rem;
    }
    .page-home .b li.h4 {
        font-size: 1rem !important;
        margin-bottom: .75rem;
    }
    .page-home .b .col-md-9 a {
        display: inline-block;
    }
    .page-home .b .col-md-9 a img {
        width: 145px !important;
        margin: 0 .5rem .5rem 0;
    }
    .page-home .b .col-md-3 {
        height: auto !important;
        justify-content: center !important;
        padding-bottom: 0 !important;
    }
    .page-home .b .col-md-3 img {
        width: 100% !important;
        max-width: 270px;
        height: auto !important;
    }

    /* @@@@ - Video: el texto sobrepuesto quedaba en 6px - @@@@ */
    .page-home .c .col-md-12 {
        flex-direction: column;
        padding: 1rem !important;
    }
    .page-home .c video {
        width: 100% !important;
        height: auto !important;
        border-radius: 10px;
    }
    .page-home .c .div {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        margin-bottom: 1rem;
        padding: 1.25rem !important;
        background-color: rgba(255, 255, 255, .92);
        border-radius: 12px;
    }
    .page-home .c .div .p {
        width: 100% !important;
        margin-bottom: 0;
        padding: 0 !important;
        text-align: left !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    .page-home .c .div .p:first-child {
        font-size: 1.5rem !important;
        margin-bottom: .65rem;
    }
    .page-home .c .div .p:last-child {
        font-size: 1rem !important;
        font-weight: 400 !important;
    }

    /* @@@@ - Espacios a la medida (rejilla de 4 tarjetas) - @@@@ */
    .page-home .f-1,
    .page-home .f {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .page-home .f-1 > div {
        padding: 2rem 1.25rem !important;
    }
    .page-home .f .row {
        height: auto !important;
        margin-left: 0;
        margin-right: 0;
    }
    .page-home .f .row > div {
        height: auto !important;
        margin-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
    }
    .page-home .f .row > div > div {
        height: auto !important;
        padding: 1.75rem 1.25rem !important;
    }
    .page-home .f ul {
        padding-left: 1.15rem;
    }

    /* @@@@ - Preguntas frecuentes - @@@@ */
    .page-home .faq .col-12.py-5 {
        padding: 1rem !important;
    }
    .page-home .faq .row.w-100 {
        margin-left: 0;
        margin-right: 0;
    }
    .page-home .faq .col-12[style*="background-color: white"] {
        padding: 1.5rem 1.25rem !important;
    }
    .page-home .faq .accordion .btn[data-toggle="collapse"] {
        font-size: 1rem !important;
        padding: 1rem 2rem 1rem 0 !important;
        line-height: 1.4;
    }
    .page-home .faq .card-body {
        padding: .25rem 0 1.25rem;
        font-size: .9375rem;
        line-height: 1.65;
    }

    /* @@@@ - Formulario de contacto - @@@@ */
    .page-home .d .col-md-6 {
        padding: 2rem 1rem !important;
    }
    .page-home .d .col-md-6:first-child img {
        width: 175px !important;
    }
    .page-home .d input {
        margin-bottom: 1rem !important;
    }
    .page-home .d button {
        width: 100% !important;
        max-width: 22rem;
        min-height: 50px;
        font-size: 1.0625rem !important;
    }
}

/* @@@@ - Inicio en telefonos chicos (<= 360px) - @@@@ */
@media (max-width: 359.98px) {
    .page-home .e .row > div:nth-child(1) {
        min-height: 430px;
        padding: 2.5rem 1rem !important;
    }
    .page-home .e p.h1 {
        font-size: 1.6875rem !important;
    }
    .page-home .b p.display-4 {
        font-size: 1.625rem !important;
    }
    .page-home .b .col-md-9 a img {
        width: 132px !important;
    }
    .page-home .c .div .p:first-child {
        font-size: 1.3125rem !important;
    }
}

/* ---------------------------------------
@@@@ 11. nosotros (nosotros.html)
--------------------------------------- */
@media (max-width: 767.98px) {
    /* @@@@ - Hero - @@@@ */
    .page-nosotros .d .col-md-4 {
        padding: 2rem 1.25rem !important;
    }
    .page-nosotros .d .col-md-4 img {
        width: 175px !important;
        max-width: 100%;
    }

    /* @@@@ - Quienes somos - @@@@ */
    .page-nosotros section:nth-of-type(2) .col-md-5 {
        padding: 2.5rem .25rem !important;
    }

    /* @@@@ - Personal capacitado - @@@@ */
    .page-nosotros .g .col-md-6 {
        padding: 2rem .25rem !important;
    }
    .page-nosotros .g p.h5 {
        margin: 1.25rem 0 !important;
    }
    .page-nosotros .g ul {
        padding-left: 1.15rem;
    }
    .page-nosotros .g li.h6 {
        margin-bottom: .5rem;
    }

    /* @@@@ - Diseñamos la tienda - @@@@ */
    .page-nosotros .b {
        height: auto !important;
    }
    .page-nosotros .b > div > div {
        min-height: 400px;
        border-radius: 12px;
        overflow: hidden;
    }
    .page-nosotros .b > div > div > p {
        width: calc(100% - 2rem) !important;
        padding: .85rem 1rem;
        border-radius: 10px;
        line-height: 1.4;
    }

    /* @@@@ - Ciclo de compra: el diagrama quedaba en 198px - @@@@ */
    .page-nosotros .c {
        height: auto !important;
    }
    .page-nosotros .c .col-md-12 {
        padding: 2.5rem 1rem !important;
    }
    .page-nosotros .c img {
        width: 100% !important;
        max-width: 520px;
        height: auto;
    }
}

/* ---------------------------------------
@@@@ 12. productos (productos.html)
--------------------------------------- */
@media (max-width: 767.98px) {
    /* @@@@ - Hero - @@@@ */
    .page-productos .c .col-md-4 {
        padding: 2rem 1.25rem !important;
    }
    .page-productos .c .col-md-4 img {
        max-width: 100%;
    }

    /* @@@@ - Tarjetas - @@@@ */
    .page-productos .a {
        padding: 1.75rem 1.25rem !important;
    }
    .page-productos .a p.h5 {
        margin-bottom: .75rem;
    }

    /* @@@@ - Marcas + footer - @@@@ */
    .page-productos footer .row:first-child {
        flex-direction: column;
        padding: 2rem 0 !important;
    }
    .page-productos footer .row:first-child > div {
        width: 100% !important;
        margin: 0 0 1rem !important;
        padding: 1.25rem !important;
    }
    .page-productos footer .row:first-child img[src*="logotipo"] {
        display: block;
        width: 170px;
        margin: 0 auto;
    }
    .page-productos footer .b img {
        width: 100% !important;
        max-width: 320px;
        margin: 0 auto !important;
    }
    .page-productos footer .row:nth-child(2) {
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .page-productos footer .row:nth-child(2) ul {
        flex-direction: column !important;
    }
}

/* ---------------------------------------
@@@@ 13. contacto (contacto.html)
--------------------------------------- */
@media (max-width: 991.98px) {
    /* La imagen tenia 700px de alto fijos */
    .page-contacto .banner-mini img {
        height: 300px !important;
        object-fit: cover;
        object-position: center;
    }
}
@media (max-width: 767.98px) {
    .page-contacto .banner-mini img {
        height: 240px !important;
    }
    .page-contacto .contacto {
        padding: 2.5rem .25rem !important;
    }
    .page-contacto .contacto .bg-white {
        border-radius: 12px;
    }
    .page-contacto .contacto .bg-white p {
        word-break: break-word;
    }
    /* Pestañas ¡Hazlo real! / Unete al equipo */
    .page-contacto .contacto .list-group.flex-row {
        flex-wrap: wrap;
        gap: .75rem !important;
    }
    .page-contacto .contacto .list-group a {
        flex: 1 1 45%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: .5rem 1rem !important;
        text-align: center;
        line-height: 1.25;
    }
    .page-contacto .contacto .row.p-0 {
        margin-left: -.5rem;
        margin-right: -.5rem;
    }
    .page-contacto .contacto .form-group[class*="col-"] {
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .page-contacto .contacto input.form-control {
        height: 3.25rem !important;
    }
    .page-contacto .contacto .form-control {
        padding: .85rem 1.125rem;
        border-radius: 1rem;
    }
    .page-contacto .contacto .button-secondary {
        width: 100%;
        max-width: 22rem;
        min-height: 50px;
    }
}

/* ---------------------------------------
@@@@ 14. formulario (formulario.html)
--------------------------------------- */
@media (max-width: 767.98px) {
    .page-formulario section {
        height: auto !important;
    }
    .page-formulario section .col-md-6 {
        padding: 2rem 1rem !important;
    }
    .page-formulario section .col-md-6:first-child img {
        width: 175px !important;
    }
    .page-formulario section input {
        margin-bottom: 1rem !important;
    }
    .page-formulario section button {
        width: 100% !important;
        max-width: 22rem;
        min-height: 50px;
        font-size: 1.0625rem !important;
    }
}