/* =============================================================
   Traceab.ai — Hoja de mejoras (animaciones + estilo empresarial)
   Cárgala SIEMPRE después de templatemo-nomad-force.css para que
   estos estilos tengan prioridad.
   ============================================================= */

/* ---------- 1. Tokens de diseño (variables) ----------
   Centraliza color, espaciado y tiempos. Cambia aquí una vez
   y se actualiza en todo el sitio. */
:root {
    --tc-brand:        #FFC107;   /* amarillo Traceability */
    --tc-brand-dark:   #FFA000;   /* hover del amarillo     */
    --tc-ink:          #1a1a1a;   /* texto principal        */
    --tc-muted:        #5a6470;   /* texto secundario       */
    --tc-bg-dark:      #16191d;   /* secciones oscuras      */
    --tc-surface:      #ffffff;
    --tc-radius:       10px;
    --tc-shadow:       0 4px 18px rgba(0, 0, 0, .08);
    --tc-shadow-hover: 0 12px 30px rgba(0, 0, 0, .16);

    /* Tiempos y curvas de animación unificados */
    --tc-ease:   cubic-bezier(.22, .61, .36, 1); /* "ease-out" suave */
    --tc-fast:   .2s;
    --tc-medium: .35s;
}

/* ---------- 2. Base ---------- */
html {
    scroll-behavior: smooth;   /* scroll de anclas nativo y fluido */
    scroll-padding-top: 90px;  /* compensa el navbar fijo          */
}

body {
    color: var(--tc-ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 3. Botón empresarial reutilizable ----------
   Reemplaza los estilos inline duplicados de los botones amarillos.
   Uso:  <a href="..." class="btn-trace">More Info</a>            */
.btn-trace {
    display: inline-block;
    background-color: var(--tc-brand);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 12px 28px;
    border: 0;
    border-radius: var(--tc-radius);
    text-decoration: none;
    box-shadow: var(--tc-shadow);
    cursor: pointer;
    transition: background-color var(--tc-fast) var(--tc-ease),
                transform     var(--tc-fast) var(--tc-ease),
                box-shadow    var(--tc-fast) var(--tc-ease);
}
.btn-trace:hover,
.btn-trace:focus-visible {
    background-color: var(--tc-brand-dark);
    transform: translateY(-3px);
    box-shadow: var(--tc-shadow-hover);
    color: #fff;
}
.btn-trace:active { transform: translateY(-1px); }

/* ---------- 4. Micro-interacciones en tarjetas ----------
   Da sensación de fluidez al pasar el cursor por portfolio y news. */
.portfolio-thumb,
.news-thumb,
.about-image,
.team-image {
    transition: transform var(--tc-medium) var(--tc-ease),
                box-shadow var(--tc-medium) var(--tc-ease);
    will-change: transform;
}
.portfolio-thumb:hover,
.news-thumb:hover {
    transform: translateY(-6px);
    box-shadow: var(--tc-shadow-hover);
}

/* Zoom suave de la imagen dentro de su contenedor (sin desbordar) */
.portfolio-thumb,
.news-image-hover { overflow: hidden; border-radius: var(--tc-radius); }
.portfolio-image,
.news-image {
    transition: transform .6s var(--tc-ease);
}
.portfolio-thumb:hover .portfolio-image,
.news-image-hover:hover .news-image {
    transform: scale(1.05);
}

/* ---------- 5. Navbar con transición suave ---------- */
.navbar {
    transition: background-color var(--tc-medium) var(--tc-ease),
                box-shadow var(--tc-medium) var(--tc-ease);
}
.nav-link {
    position: relative;
    transition: color var(--tc-fast) var(--tc-ease);
}
/* Subrayado animado que crece desde el centro */
.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    background: var(--tc-brand);
    transform: translateX(-50%);
    transition: width var(--tc-medium) var(--tc-ease);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { width: 70%; }

/* ---------- 6. Hero: imagen/título sin "salto" ---------- */
.hero .custom-video { will-change: transform; }

/* ---------- 7. Foco visible (accesibilidad) ---------- */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
    outline: 3px solid rgba(255, 193, 7, .6);
    outline-offset: 2px;
}

/* ---------- 8. Utilidad de centrado de contenido ancho ---------- */
.tc-prose {
    margin: 0 auto;
    max-width: 800px;
    text-align: justify;
}
.tc-center { text-align: center; }

/* ---------- 9. Carrito de compras (orden) ---------- */
#cart-container { color: #fff; }
.product {
    cursor: pointer;
    border-radius: var(--tc-radius);
    transition: transform var(--tc-fast) var(--tc-ease),
                box-shadow var(--tc-fast) var(--tc-ease),
                outline-color var(--tc-fast) var(--tc-ease);
    outline: 2px solid transparent;
}
.product:hover { transform: translateY(-4px); box-shadow: var(--tc-shadow-hover); }
.product.selected { outline-color: var(--tc-brand); }

/* =============================================================
   10. RESPETAR "reducir movimiento"
   Si el usuario activó esta preferencia en su sistema operativo,
   desactivamos animaciones para evitar mareos. Buena práctica de
   accesibilidad y rendimiento.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}