/* =============================================================================
   Base responsive común del sitio público (WebSite.master).

   Se carga DESPUÉS del CSS propio de cada página, para que estas reglas sean las mismas en todo
   el sitio. Aquí solo van criterios comunes; lo específico de cada página sigue en publico/*.css.
   ============================================================================= */

/* ---------- 1. Imágenes de tarjetas: proporción única 4:3 ----------
   Productos, servicios, cursos, portafolio y relacionados. Sustituye las alturas fijas
   (100, 120, 140, 180, 200, 240, 260, 280 px...) repartidas y duplicadas entre style.css y el
   CSS de cada página: ahora todas las tarjetas muestran la imagen del mismo tamaño, sin
   deformarla (object-fit: cover) y reservando su espacio aunque la imagen no cargue. */
.product-card img,
.product-img,
.course-card img,
.course-img,
.portfolio-card img,
.portfolio-img,
.card-rel img,
.product-card-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    background-color: #eef1f7; /* visible mientras carga o si la imagen falla */
}

.product-card-image {
    height: auto !important;
}

/* ---------- 2. Rejilla: sin desbordes laterales ----------
   Una .row puesta directamente dentro de otra .row (sin su columna) suma dos veces el margen
   negativo de Bootstrap y desplaza las tarjetas a la izquierda. */
.row > .row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 576px) {
    /* En móvil varias páginas reducen el relleno del .container a 8-10 px, pero las filas
       g-4 / g-5 mantenían márgenes de -12 / -24 px y la página se movía de lado.
       Con 16 px entre columnas el margen (-8 px) siempre cabe en el contenedor. */
    .row {
        --bs-gutter-x: 1rem;
    }
}

/* ---------- 3. Botón flotante de WhatsApp ---------- */
@media (max-width: 576px) {
    .whatsapp-btn {
        width: 50px !important;
        height: 50px !important;
        right: 14px !important;
        bottom: 14px !important;
        font-size: 26px !important;
    }
}

/* Se oculta mientras el botón de WhatsApp propio de la página (p. ej. "Solicitar Cotización")
   está a la vista, para no taparlo ni duplicarlo (clase aplicada desde website.js). */
.whatsapp-btn {
    transition: opacity .25s ease, transform .25s ease;
}

.whatsapp-btn.oculto-por-cta {
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
}

/* ---------- 4. Legibilidad y tamaño táctil en móvil ----------
   Textos que bajaban a 8-11 px y botones de menos de 44 px de alto (mínimo recomendado para el dedo). */
@media (max-width: 576px) {
    .product-excerpt,
    .product-card-description,
    .feature-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .product-category-badge,
    .badge-portfolio,
    .badge-category {
        font-size: 11px !important;
        letter-spacing: .3px;
    }

    .category-circle-name {
        font-size: 12px !important;
    }

    .btn-industrial,
    .btn-product-card {
        font-size: 13px !important;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}