/* ============================================================
   Mercamart S.A. — estilos custom
   Tailwind cubre la mayor parte; este archivo agrupa variables,
   animaciones y helpers que no se expresan con utilities.
   ============================================================ */

:root {
    --brand-green: #0c9444;
    --brand-green-dark: #0b7b38;
    --brand-green-light: #0fbf61;
    --brand-amber: #f5a623;
    --brand-amber-dark: #e08a00;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #222;
    background-color: #f7f7f7;
    line-height: 1.6;
}

/* Oculta elementos hasta que GSAP los anime; evita el "flash" inicial */
.gsap-hidden {
    visibility: hidden;
}

/* ============================================================
   NAVBAR
   ============================================================ */

/* Estado del header al hacer scroll: fondo más sólido + sombra */
#site-header.is-scrolled {
    background: #064e3b;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

/* Botón hamburguesa: las 3 líneas forman una X cuando .is-open está activo */
.mobile-menu-btn span {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    transform-origin: center;
}

.mobile-menu-btn.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-btn.is-open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Cada link del nav define una pseudo-línea que crece desde el centro */
.nav-link {
    position: relative;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.1rem;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #fde68a, #ffffff);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.nav-link:hover::after {
    width: 70%;
}

/* Botón de idioma: bandera + texto con flip al cambiar */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 9999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.lang-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* Bandera del toggle: la librería flag-icons usa proporción ~4:3 sobre font-size */
.lang-flag {
    width: 1.25rem;
    height: 0.95rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-toggle.flipping .lang-flag {
    transform: rotateY(180deg) scale(1.1);
}

/* ============================================================
   HERO
   ============================================================ */

/* Blobs de color difuminados detrás del hero para dar profundidad */
.hero-blob {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-blob::before,
.hero-blob::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.5;
}

.hero-blob::before {
    width: 480px;
    height: 480px;
    background: #c4ecd4;
    top: -140px;
    left: -140px;
}

.hero-blob::after {
    width: 420px;
    height: 420px;
    background: #fff1cc;
    bottom: -160px;
    right: -120px;
}

/* ============================================================
   PRODUCTOS — filtros y paginación
   ============================================================ */

/* Botones de filtro: pill con transición de fondo y borde */
.product-filter {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-filter:hover {
    border-color: var(--brand-green);
    color: var(--brand-green-dark);
    transform: translateY(-1px);
}

.product-filter.is-active {
    background: var(--brand-green);
    color: #ffffff;
    border-color: var(--brand-green);
    box-shadow: 0 8px 20px -6px rgba(12, 148, 68, 0.45);
}

/* Paginación: flechas y números */
.page-nav,
.page-num {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 9999px;
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.25s ease;
}

.page-nav {
    font-size: 1.3rem;
    line-height: 1;
}

.page-nav:hover:not([disabled]),
.page-num:hover:not(.is-active) {
    border-color: var(--brand-green);
    color: var(--brand-green-dark);
    transform: translateY(-1px);
}

.page-nav[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-num.is-active {
    background: var(--brand-green);
    color: #ffffff;
    border-color: var(--brand-green);
    box-shadow: 0 8px 20px -6px rgba(12, 148, 68, 0.45);
}

/* Card destacada del hero con borde luminoso y sombra cálida */
.hero-card-glow {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 25px 60px -10px rgba(0, 0, 0, 0.25),
        0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   EXPORT MARKETS — grid responsive de banderas
   2 columnas en móvil, 3 en tablet, 4 en desktop
   ============================================================ */
.markets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .markets-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .markets-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   RESPONSIVE — ajustes para móvil y tablet
   ============================================================ */

/* El fondo fijo del hero provoca saltos y mala escala en iOS/Android;
   en pantallas táctiles usamos scroll normal */
@media (max-width: 1023px) {
    #inicio {
        background-attachment: scroll !important;
    }
}

/* Tablet y móvil: reducir el padding vertical de las secciones */
@media (max-width: 1023px) {
    .py-24 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Móvil: secciones más compactas y barra de navegación más baja */
@media (max-width: 640px) {
    .py-24 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Navbar: altura y logo más compactos */
    #site-header .h-24 {
        height: 4.5rem;
    }

    #site-header img {
        height: 3rem;
    }

    /* Nombre de marca más pequeño para que no compita con el logo */
    #site-header .text-xl {
        font-size: 1.05rem;
    }

    /* Hero: en móvil ajusta el alto al contenido (el div interno ya
       aporta el padding que libra el navbar fijo) */
    #inicio {
        min-height: auto;
    }
}