/* ==========================================================================
   Ajustes mobile — corrige superposición de textos reportada por el cliente.
   Se carga al final (después de style.css y coloring.css) para poder
   pisar las reglas del template sin tocarlo directamente.
   ========================================================================== */

/* Tamaño general de títulos en escritorio. Los del template (h1 96px,
   h2 48px) quedaban demasiado grandes con los textos del sitio (ej.
   "Comprometidos con la calidad en cada entrega"). En mobile siguen
   mandando las reglas del @media de más abajo. */
:root {
    --h1-font-size: 64px;
    --h2-font-size: 38px;
}

/* Título de portada ("Alimentos de calidad desde 1989"). Con el tamaño
   general de los <h1> (96px) este texto, mucho más largo que el anterior
   "Un Mundo", ocupaba casi todo el ancho. Se escala con el ancho de la
   pantalla: 72px como máximo en escritorio y 34px como mínimo en celular. */
#section-intro h1.hero-titulo {
    font-size: clamp(34px, 5vw, 72px);
    line-height: 1;
}

@media only screen and (max-width: 992px) {

    /* 1) Menú "INICIO / EMPRESA / PRODUCTOS / ..." quedaba siempre visible
          y superpuesto sobre el contenido de cada página (el bug de
          "INICIO" tapando los títulos en todas las capturas). El template
          nunca lo ocultaba por defecto: solo se mostraba/escondía la altura
          del header por JS, pero el listado de links seguía ahí, flotando
          encima. Lo ocultamos por defecto y lo mostramos solo cuando el
          usuario abre el menú (header recibe la clase "menu-open"). */
    header.header-mobile #mainmenu {
        display: none;
    }
    header.header-mobile.menu-open #mainmenu {
        display: block;
    }

    /* 2) Títulos y textos largos se cortaban en el borde derecho de la
          pantalla ("COMPROMETIDOS", "PRODUCTOS", "ELABORADOS", los datos
          de conservación/presentación en la ficha de producto). Pasaba
          porque el sitio tiene "overflow-x: hidden" en <html> para evitar
          scroll horizontal, y eso recorta en seco cualquier texto que no
          entre en el ancho disponible en vez de bajar de línea. Forzamos
          el salto de línea dentro del contenido de cada página.

          "word-break: break-word" se saca: corta la palabra apenas no
          entra en el espacio que queda en la línea, en vez de probar
          primero a bajarla entera a la línea siguiente. Con el tamaño de
          letra grande que usa el cliente eso partía palabras cortas que
          de sobra entraban solas en una línea ("CONSULTA" -> "CONSU" /
          "LTA"). "overflow-wrap: break-word" solo alcanza para evitar el
          desborde y respeta la palabra completa siempre que pueda. */
    .container * {
        overflow-wrap: break-word;
    }

    /* 3) Los títulos <h2> del contenido (ej. "Trayectoria y Confianza en
          la Mesa de los Uruguayos" en Empresa, "Comprometidos con la
          Calidad en Cada Entrega" en Home) usan un tamaño fijo de 48px
          en mayúsculas para todas las pantallas, sin adaptarse a mobile.
          Con letra grande cada palabra deja de entrar en el ancho del
          celular y el título se corta palabra por palabra. Los bajamos
          por debajo de lo que el sitio usa para subtítulos (".fs-30")
          para dejar margen. Los títulos que ya traían su propio tamaño
          (".fs-30", ".fs-36", ".hs-4", etc.) no se tocan por ser más
          específicos. */
    h2, .h2, .hs-2 {
        font-size: 22px;
    }

    /* 4) Los títulos <h1> de cabecera de página ("Productos", "Empresa",
           "Contacto"...) usan un tamaño fijo de 96px, más grande todavía
           que el de los <h2>, y tampoco se adaptaba a mobile. Con ese
           tamaño la palabra no entra ni sola en una línea del celular,
           así que aunque el texto respete "no cortar si entra bajando de
           línea" (ver punto 2), acá no hay línea en la que entre: se
           corta sí o sí ("PRODUCTOS" -> "PRODUC"/"TOS"). Lo bajamos para
           que estas palabras (cortas, una o dos) entren solas. */
    h1, .h1, .hs-1 {
        font-size: 32px;
    }

    /* 5) El banner de cada sección (Productos, Empresa, ficha de producto...)
          arrancaba tapado por el header, que en mobile queda fijo arriba
          de todo ("position: fixed"). El margen que el template le daba
          (110px) se quedaba corto para el alto real del logo + header en
          un celular, así que el título quedaba parcialmente escondido
          detrás del header. Le damos más aire. */
    .pagina-hero {
        padding-top: 150px;
    }
}

@media only screen and (max-width: 767px) {

    /* 6) Título de categoría en las tarjetas del carrusel de la home
          ("Pollo y Elaborados", "Carnes y Hamburguesas", "Pastas
          Congeladas", etc.) vive en una caja de ancho fijo al 50%
          ("w-50") pensada para pantallas anchas; en mobile ese 50% es
          muy angosto para el texto y se corta. Le damos casi todo el
          ancho de la tarjeta y bajamos bastante el tamaño de letra:
          estos títulos son los que más se siguieron cortando con el
          tamaño de letra grande del cliente, así que les dejamos más
          margen que al resto. */
    #projects-carousel .item .abs.w-50 {
        width: 96% !important;
    }
    #projects-carousel .item h2.fs-36 {
        font-size: 16px;
    }

    /* 7) "Conservación" y "Preparación" en la ficha de producto quedaban
          apretados uno contra el otro (dos columnas al 50% son muy
          angostas en un celular). Se apilan en una sola columna. */
    .ficha-conservacion > .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .ficha-conservacion > .col-6:first-child {
        margin-bottom: 12px;
    }

    /* 8) Los 4 pasos de la home ("Consulta", "Selección", "Logística",
          "Entrega") están en col-6 (2 por fila), pensado para pantallas
          más anchas. En un celular chico esa mitad de ancho ya casi no
          alcanza para la palabra completa, y con letra grande directamente
          no entra y se corta a la mitad. Los apilamos en una columna para
          darle a cada palabra todo el ancho de la pantalla. */
    .de-step {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* 9) Migas de pan de ficha/listado ("Productos › Vegetales congelados ›
          Individuales › Acelga"): en celular bajaban a dos o tres renglones.
          Quedan en una sola línea que se desliza con el dedo, sin barra de
          scroll visible. El último nivel (en negrita, 20px en escritorio) se
          achica para que entre más del recorrido en pantalla. */
    .ficha-breadcrumb {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ficha-breadcrumb::-webkit-scrollbar {
        display: none;
    }
    .ficha-breadcrumb li {
        flex-shrink: 0;
    }
    .ficha-breadcrumb li.active {
        font-size: 16px;
    }
}

@media only screen and (max-width: 992px) {

    /* 10) Botones cómodos para el dedo: en pantallas táctiles todo botón
           debe medir al menos 48px de alto (recomendación de Google).
           - .btn-main ("Descargar Catálogo", "Enviar mensaje"...): se sube
             el padding vertical del template (4px), sin cambiar su
             display para no romper el efecto de hover "fx-slide".
           - "Ver Más" / "Conocé más sobre Cramon" (.btn-ver-mas, ~26px),
             "Volver a productos", el botón de categorías del listado y la
             paginación: alto mínimo de 48px con el texto centrado. */
    :root {
        --btn-padding: 12px 30px;
    }
    .btn-ver-mas,
    .btn-volver {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 48px;
    }
    .btn-categoria {
        min-height: 48px;
    }
    .pagination .page-link {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .producto-cat-link {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .producto-cat-toggle {
        min-width: 48px;
        min-height: 48px;
    }
}