/* app/static/css/style.css */

/* 1. IMPORTACIÓN DE FUENTES LOCALES */
@font-face {
    font-family: 'Rainesta Black';
    /* Asegúrate de que el nombre del archivo aquí coincida EXACTAMENTE con el de tu carpeta */
    src: url('../fonts/Digitype Studio - Rainesta-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Now Regular';
    /* Asumiendo que nombraste tu archivo de esta manera: */
    src: url('../fonts/Now-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. VARIABLES GLOBALES PLANTAE */
:root {
    /* Paleta Principal Plantae Foods */
    --plantae-verde-oscuro: #00571f;
    --plantae-verde-medio: #177333;
    --plantae-oliva: #828b37;
    --plantae-lima: #c2d18a;

    /* Paleta Complementaria */
    --plantae-rosa-claro: #f5adab;
    --plantae-rosa-fuerte: #ee7180;
    --plantae-mostaza: #e5ab4a;
    --plantae-naranja: #df6647;
    --plantae-terracota: #8c351e;

    /* Tipografías Oficiales */
    --font-principal: 'Rainesta Black', 'Playfair Display', serif;
    --font-secundaria: 'Now Regular', 'Inter', sans-serif;
}

/* 3. ESTILOS BASE */
body {
    font-family: var(--font-secundaria);
    background-color: #fdfdfc; 
    color: #333;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--font-principal);
    font-weight: 900;
}

/* 4. UTILIDADES DE COLOR (Pisan Bootstrap) */
.bg-plantae-primary { 
    background-color: var(--plantae-verde-oscuro) !important; 
    color: white; 
}
.text-plantae-primary { 
    color: var(--plantae-verde-oscuro) !important; 
}
.text-plantae-accent { 
    color: var(--plantae-naranja) !important; 
}

/* 5. BOTONES MODERNOS PLANTAE */
.btn-plantae {
    background-color: var(--plantae-verde-medio);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
}

.btn-plantae:hover {
    background-color: var(--plantae-verde-oscuro);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 87, 31, 0.2);
}

/* 6. TRANSICIONES MODERNAS */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

.hover-zoom {
    transition: transform 0.4s ease;
}
.hover-zoom:hover {
    transform: scale(1.03);
}

@keyframes fadeInUp {
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}


/* 7. SMART SCROLL NAVBAR */
.smart-scroll {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    transition: transform 0.3s ease-in-out;
}
.scrolled-down {
    transform: translateY(-100%);
}
.scrolled-up {
    transform: translateY(0);
}
/* Evita que el contenido principal quede escondido debajo de la barra fija */
body {
    padding-top: 70px; 
}



/* 8. AJUSTES FINOS DE NAVEGACIÓN */
.plantae-link {
    font-family: var(--font-secundaria) !important; /* Fuerza Now Regular */
    font-size: 1.15rem !important; /* Aumenta el tamaño de la letra */
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.plantae-link:hover {
    color: var(--plantae-lima) !important; /* Verde claro al pasar el mouse */
    transform: translateY(-1px);
}