/* ======== VARIABLES Y BASE ======== */
:root {
    --palm-dark: #F77A3D;
    --palm-primary: #006837;
    --palm-accent: #ff7a3d;
    --palm-light: #e8f5e9;
    --bg-soft: #f4f7f6;
    --text-dark: #2c3e50;
    --text-muted: #6c757d;
    --white: #ffffff;
    --shadow-md: 0 10px 30px -10px rgba(0, 60, 30, 0.15);
    --shadow-lg: 0 20px 40px -15px rgba(0, 60, 30, 0.2);
    --font-heading: 'Roboto Slab', serif;
    --font-body: 'Inter', sans-serif;
    --font-ui: 'Poppins', sans-serif;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body { font-family: var(--font-body); color: var(--text-dark); background-color: var(--white); overflow-x: hidden; line-height: 1.7; }

/* OJO: Cambié el color base de los H1-H5 a oscuro por defecto, para que se vean en fondo blanco */
h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; color: var(--palm-dark); }

.text-gold { color: var(--palm-accent) !important; }
.text-palm-dark { color: var(--palm-dark) !important; }
.text-palm-primary { color: var(--palm-primary) !important; }
.bg-soft { background-color: var(--bg-soft) !important; }
.bg-palm-primary { background-color: var(--palm-primary) !important; }

/* ======== NUEVA CABECERA LIMPIA (PRECIO FRUTA) ======== */
.price-header-clean {
    padding: 80px 0 50px 0; /* Más espacio arriba para que no se vea pegado al menú */
    background-color: var(--white);
    position: relative;
}

.badge-clean {
    background-color: var(--palm-dark); /* Verde corporativo */
    color: var(--white);
    padding: 10px 25px;
    border-radius: 50px;
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 2px; /* Letras más separadas para elegancia */
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 104, 55, 0.2); /* Sombra suave verde */
}

.title-clean {
    font-size: 3.5rem; /* Grande pero controlado */
    color: var(--text-dark);
    font-family: var(--font-heading);
    font-weight: 800; /* Letra bien gruesa */
    margin-bottom: 20px; /* Separación con el texto de abajo */
    line-height: 1.1;
    letter-spacing: -1px; /* Un poco más pegadito para estilo moderno */
}

.desc-clean {
    font-size: 1.25rem;
    color: var(--text-muted);
    font-weight: 400;
    max-width: 700px; /* Limitamos el ancho para que sea fácil de leer */
    margin: 0 auto; /* Centrado */
    line-height: 1.6;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .price-header-clean { padding: 50px 0 30px 0; }
    .title-clean { font-size: 2.5rem; }
    .desc-clean { font-size: 1rem; padding: 0 15px; }
}

/* ======== SECCIÓN GRÁFICA Y ANÁLISIS ======== */
/* Quitamos el margin-top negativo porque ya no hay banner que solapar */
.chart-section { padding-bottom: 80px; margin-top: 0; position: relative; z-index: 10; }

.chart-card-wrapper {
    background: #fff; border-radius: 25px; padding: 40px;
    box-shadow: var(--shadow-md); border-top: 6px solid var(--palm-primary);
    transition: all 0.3s ease; height: 100%;
}

.market-analysis-card {
    background: #fff; border-radius: 25px; padding: 40px;
    box-shadow: var(--shadow-md); border-top: 6px solid var(--palm-accent);
    height: 100%; display: flex; flex-direction: column;
}
.analysis-content { flex-grow: 1; font-size: 0.95rem; color: #555; }
.bg-soft-gold { background-color: #fffdf5; }
.border-gold { border: 1px solid rgba(184, 131, 23, 0.2); }

.chart-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; border-bottom: 2px solid var(--bg-soft); padding-bottom: 20px; }
.chart-title { font-size: 1.8rem; margin-bottom: 5px; color: var(--palm-dark); }
.chart-subtitle { color: var(--text-muted); font-family: var(--font-body); font-size: 1rem; margin: 0; }

.form-select-custom {
    padding: 10px 35px 10px 18px; border-radius: 50px; border: 2px solid var(--palm-light);
    font-family: var(--font-ui); font-weight: 700; color: var(--palm-dark); cursor: pointer;
    background-color: #fff; outline: none; transition: 0.3s; box-shadow: var(--shadow-sm);
}
.form-select-custom:hover, .form-select-custom:focus { border-color: var(--palm-primary); box-shadow: 0 0 0 3px rgba(0, 104, 55, 0.1); }

.chart-canvas-container { position: relative; height: 450px; width: 100%; }

/* ======== TABLA HISTÓRICA ======== */
.table-responsive { border-radius: 20px; box-shadow: var(--shadow-sm); }
.table thead th { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.85rem; border: none; color: var(--text-dark); }
.table tbody td { font-family: var(--font-body); font-size: 0.95rem; color: #555; padding: 15px 20px; border-bottom-color: var(--bg-soft); }
.table-hover tbody tr:hover { background-color: var(--bg-soft); }
.price-cell { font-family: var(--font-ui); font-weight: 700; color: var(--palm-dark); }

/* ======== SECCIÓN GLOSARIO ======== */
.section-title { font-size: 2.5rem; color: var(--palm-dark); margin-bottom: 10px; }
.section-desc { color: var(--text-muted); font-size: 1.1rem; max-width: 600px; margin: 0 auto;}
.line-gold { width: 80px; height: 4px; background: var(--palm-accent); border-radius: 2px; }

.glossary-card {
    background: #fff; padding: 35px 25px; border-radius: 20px; text-align: center;
    transition: 0.3s; height: 100%; border: 1px solid transparent;
    box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.glossary-card:hover { transform: translateY(-7px); border-color: var(--palm-light); box-shadow: var(--shadow-md); }

.glossary-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--palm-primary); transform: scaleX(0); transition: 0.3s; }
.glossary-card:hover::before { transform: scaleX(1); }

.glossary-icon {
    width: 70px; height: 70px; background: var(--bg-soft); color: var(--palm-accent);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; margin: 0 auto 25px; transition: 0.3s;
}
.glossary-card:hover .glossary-icon { background: var(--palm-accent); color: #fff; }

.glossary-card h5 { font-size: 1.25rem; color: var(--palm-dark); margin-bottom: 15px; }
.glossary-card p { font-size: 0.95rem; color: #666; margin: 0; line-height: 1.6; }

/* Responsive */
@media (max-width: 992px) { .chart-section { margin-top: 0; } .chart-header { flex-direction: column; align-items: flex-start; gap: 15px; } .year-filter { width: 100%; } .form-select-custom { width: 100%; } }
@media (max-width: 768px) { .hero-price h1 { font-size: 2.8rem; } .chart-canvas-container { height: 350px; } }

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