/* =====================================================
   AMINOVITA - Estilos Globales
   Aplica a todas las páginas del sitio
   ===================================================== */


/* ── BASE ─────────────────────────────────────────── */

html {
    height: 100%;
}

body {
    background-color: #ffffff;
    min-height: 100%;
    margin: 0;
}


/* ── ANIMACIONES ──────────────────────────────────── */

/* Animación "cinematográfica" usada en index.html */
@keyframes cinematicReveal {
    0%   { opacity: 0; transform: scale(1.03); filter: blur(4px); }
    100% { opacity: 1; transform: scale(1);    filter: blur(0);   }
}

.body-animado {
    animation: cinematicReveal 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    width: 100%;
}

/* Animación "suave" usada en páginas internas */
@keyframes softFade {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.body-interno {
    animation: softFade 0.6s ease-out forwards;
    opacity: 0;
    width: 100%;
}


/* ── NAVEGACIÓN ───────────────────────────────────── */

/* Estilos adicionales aplicados vía JS a través de auth.js */


/* ── CARDS ────────────────────────────────────────── */

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}


/* ── FOOTER ───────────────────────────────────────── */

.footer-link {
    text-decoration: none;
    color: #6c757d;
    transition: color 0.2s;
}

.footer-link:hover {
    color: #2c3e50;
}


/* ── RESPONSIVE ───────────────────────────────────── */

@media (max-width: 768px) {
    .carousel-item img {
        height: 300px;
    }
}


/* ── 🛠️ BLINDAJE CONTRA TEXTOS LARGOS EN TARJETAS (NUEVO) ── */

/* Fuerza al contenedor flexible central a contraerse en lugar de expandirse al infinito */
.item-producto .flex-grow-1 {
    min-width: 0 !important;
}

/* Aplica el efecto de recorte y añade los puntos suspensivos (...) a las industrias */
.item-producto small.text-muted {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}