/* ==========================================================================
   TORUMMA — Sistema de marca real
   Verde profundo domina · Crema vieja de fondo · Amarillo mango con verde
   Naranja y azul son acentos excluyentes (uno por pieza)
   Nunito para display · Montserrat para cuerpo
   ========================================================================== */

:root {
  /* Paleta */
  --verde-profundo: #23371F;
  --crema-vieja: #F5EED8;
  --crema-clara: #FAF5E4;
  --crema-oscura: #EBE3C4;
  --amarillo-mango: #F5A623;
  --mango-claro: #FFC434;
  --naranja-papaya: #E8621A;
  --azul-caribe: #2A6EBB;
  --tierra: #8B5E3C;
  --tierra-clara: #B58A6A;
  --negro-calido: #1A1208;
  --verde-claro: #4E6448;

  /* Alpha (para bordes y overlays sin salir de paleta) */
  --tierra-10: rgba(139, 94, 60, 0.10);
  --tierra-20: rgba(139, 94, 60, 0.22);
  --tierra-40: rgba(139, 94, 60, 0.42);
  --verde-alpha-90: rgba(35, 55, 31, 0.90);
  --verde-alpha-70: rgba(35, 55, 31, 0.70);
  --crema-alpha-95: rgba(245, 238, 216, 0.95);

  /* Tipografía */
  --font-display: 'Nunito', 'Nunito Sans', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;

  /* Ritmo espacial (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radios */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Contenedores */
  --max-w: 1280px;
  --max-w-narrow: 880px;
  --pad-mobile: 20px;
  --pad-desktop: 64px;

  /* Sombras (usando negro cálido, no negro puro) */
  --shadow-sm: 0 1px 2px rgba(26, 18, 8, 0.06);
  --shadow-md: 0 6px 20px rgba(26, 18, 8, 0.08);
  --shadow-lg: 0 20px 50px rgba(26, 18, 8, 0.12);
}

/* Reset básico */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--negro-calido);
  background: var(--crema-vieja);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  padding-bottom: 88px; /* espacio para carrito sticky móvil */
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; }

/* ==========================================================================
   TIPOGRAFÍA — según sistema de marca
   ========================================================================== */

.display,
h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--verde-profundo);
}

.titulo-2,
h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--verde-profundo);
}

.titulo-3,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  color: var(--verde-profundo);
}

.cuerpo {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  max-width: 68ch;
}

.cuerpo-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  max-width: 68ch;
}

.etiqueta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tierra);
}

.etiqueta-sobre-verde {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mango-claro);
  opacity: 0.9;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-align: center;
  white-space: nowrap;
  min-height: 48px;
}

.btn-primary {
  background: var(--amarillo-mango);
  color: var(--verde-profundo);
}

.btn-primary:hover {
  background: var(--mango-claro);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-verde {
  background: var(--verde-profundo);
  color: var(--crema-vieja);
}

.btn-verde:hover {
  background: var(--verde-claro);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--verde-profundo);
  border: 1.5px solid var(--verde-profundo);
}

.btn-outline:hover {
  background: var(--verde-profundo);
  color: var(--crema-vieja);
}

.btn-outline-crema {
  background: transparent;
  color: var(--crema-vieja);
  border: 1.5px solid var(--crema-alpha-95);
}

.btn-outline-crema:hover {
  background: var(--crema-vieja);
  color: var(--verde-profundo);
}

.btn-sm {
  font-size: 14px;
  padding: 10px 18px;
  min-height: 40px;
}

.btn-ghost {
  color: var(--verde-profundo);
  padding: 10px 16px;
}

.btn-ghost:hover { color: var(--tierra); }

/* ==========================================================================
   CONTENEDORES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
}

.container-narrow {
  width: 100%;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 var(--pad-mobile);
}

@media (min-width: 900px) {
  .container, .container-narrow { padding: 0 var(--pad-desktop); }
}

.section { padding: var(--sp-8) 0; }
.section-lg { padding: var(--sp-9) 0; }

@media (min-width: 900px) {
  .section { padding: var(--sp-9) 0; }
  .section-lg { padding: var(--sp-10) 0; }
}

/* ==========================================================================
   HEADER / NAVEGACIÓN
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--crema-alpha-95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tierra-10);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--sp-4);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--verde-profundo);
  letter-spacing: -0.02em;
}

.nav-logo svg { flex-shrink: 0; }

.nav-links {
  display: none;
  gap: var(--sp-5);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
}

.nav-links a {
  color: var(--verde-profundo);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active { border-color: var(--amarillo-mango); }

@media (min-width: 900px) {
  .nav-links { display: flex; }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--verde-profundo);
  transition: background 0.15s ease;
}

.nav-cart:hover { background: var(--tierra-10); }

.nav-cart-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  background: var(--amarillo-mango);
  color: var(--verde-profundo);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-family: var(--font-body);
}

.nav-cart-count[data-count="0"] { display: none; }

.nav-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--verde-profundo);
}

@media (min-width: 900px) {
  .nav-menu-btn { display: none; }
}

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

.hero {
  position: relative;
  padding: var(--sp-7) 0 var(--sp-8);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  gap: var(--sp-5);
  position: relative;
  z-index: 2;
}

.hero-etiqueta {
  color: var(--tierra);
  margin-bottom: var(--sp-2);
}

.hero-title { max-width: 15ch; }
.hero-title .amarillo { color: var(--amarillo-mango); }

.hero-copy {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--negro-calido);
  max-width: 46ch;
  margin-top: var(--sp-3);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.hero-decor {
  position: absolute;
  z-index: 1;
  opacity: 0.55;
  pointer-events: none;
}

.hero-decor-1 {
  top: -20px;
  right: -60px;
  width: 260px;
  transform: rotate(15deg);
}

.hero-decor-2 {
  bottom: -80px;
  right: 10%;
  width: 180px;
  transform: rotate(-20deg);
  opacity: 0.3;
}

@media (min-width: 900px) {
  .hero {
    padding: var(--sp-9) 0 var(--sp-10);
    min-height: 78vh;
    display: flex;
    align-items: center;
  }
  .hero-inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--sp-8);
  }
  .hero-decor-1 {
    width: 420px;
    top: -60px;
    right: -80px;
  }
}

/* ==========================================================================
   COMPONENTE: CARD DE PRODUCTO
   ========================================================================== */

.productos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 700px) {
  .productos-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

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

.card-producto {
  background: var(--crema-clara);
  border-radius: var(--r-lg);
  border: 1px solid var(--tierra-10);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-producto:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card-producto-imagen {
  aspect-ratio: 1;
  background: var(--crema-oscura);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-producto-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-producto-imagen-placeholder {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  color: var(--tierra);
  opacity: 0.4;
}

.card-producto-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 2;
}

.badge-temporada { background: var(--naranja-papaya); color: white; }
.badge-premium { background: var(--azul-caribe); color: white; }
.badge-excedente { background: var(--azul-caribe); color: white; }

.card-producto-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.card-producto-nombre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--verde-profundo);
}

.card-producto-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--tierra);
  margin-bottom: var(--sp-3);
}

.card-producto-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--sp-3);
  gap: var(--sp-2);
}

.card-producto-precio {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--verde-profundo);
}

.btn-anadir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--amarillo-mango);
  color: var(--verde-profundo);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-anadir:hover { background: var(--mango-claro); }
.btn-anadir:active { transform: scale(0.95); }
.btn-anadir.added { background: var(--verde-profundo); color: var(--crema-vieja); }

/* ==========================================================================
   FILTROS DE CATÁLOGO
   ========================================================================== */

.filtros {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-3) 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: var(--sp-4);
}

.filtros::-webkit-scrollbar { display: none; }

.filtro-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--tierra);
  background: var(--crema-clara);
  border: 1px solid var(--tierra-10);
  transition: all 0.15s ease;
}

.filtro-btn:hover { border-color: var(--tierra-20); }
.filtro-btn.active {
  background: var(--verde-profundo);
  color: var(--crema-vieja);
  border-color: var(--verde-profundo);
}

/* ==========================================================================
   CARRITO STICKY (Misfits style)
   ========================================================================== */

.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--verde-profundo);
  color: var(--crema-vieja);
  padding: var(--sp-3) var(--pad-mobile);
  z-index: 90;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 -8px 30px rgba(26, 18, 8, 0.15);
}

.cart-bar.visible { transform: translateY(0); }

.cart-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cart-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cart-bar-count {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mango-claro);
  font-weight: 500;
}

.cart-bar-total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
}

.cart-bar-progress {
  height: 4px;
  background: var(--verde-alpha-70);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
  width: 100%;
  max-width: 200px;
}

.cart-bar-progress-fill {
  height: 100%;
  background: var(--amarillo-mango);
  transition: width 0.4s ease;
  width: 0%;
}

.cart-bar-progress.complete .cart-bar-progress-fill { background: var(--mango-claro); }

.cart-bar-msg {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--crema-vieja);
  opacity: 0.75;
  margin-top: 4px;
}

/* ==========================================================================
   SECCIONES REUTILIZABLES
   ========================================================================== */

.seccion-verde {
  background: var(--verde-profundo);
  color: var(--crema-vieja);
}

.seccion-verde h2, .seccion-verde h3 { color: var(--mango-claro); }
.seccion-verde .cuerpo { color: var(--crema-vieja); opacity: 0.9; }

.seccion-cita {
  padding: var(--sp-9) 0;
  text-align: center;
}

.seccion-cita blockquote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.5vw, 40px);
  line-height: 1.2;
  color: var(--verde-profundo);
  max-width: 22ch;
  margin: 0 auto;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   CÓMO FUNCIONA
   ========================================================================== */

.pasos {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .pasos { grid-template-columns: repeat(3, 1fr); }
}

.paso {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.paso-numero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  color: var(--amarillo-mango);
  letter-spacing: -0.04em;
}

.paso h3 { color: inherit; }

/* ==========================================================================
   IMPACTO / MÉTRICAS
   ========================================================================== */

.impacto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
}

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

.impacto-cifra {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  color: var(--amarillo-mango);
  letter-spacing: -0.03em;
}

.impacto-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--crema-vieja);
  opacity: 0.85;
  margin-top: 8px;
  max-width: 20ch;
}

/* ==========================================================================
   PRODUCTORES
   ========================================================================== */

.productores-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .productores-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}

.productor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.productor-foto {
  aspect-ratio: 4 / 5;
  background: var(--verde-claro);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}

.productor-foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 80px;
  color: var(--crema-vieja);
  opacity: 0.4;
  background: linear-gradient(135deg, var(--verde-profundo) 0%, var(--verde-claro) 100%);
}

.productor-nombre {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--mango-claro);
  margin-top: var(--sp-2);
}

.productor-lugar {
  color: var(--crema-vieja);
  opacity: 0.8;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.productor-quote {
  color: var(--crema-vieja);
  opacity: 0.9;
  font-size: 15px;
  line-height: 1.55;
  margin-top: 8px;
  font-style: italic;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--verde-profundo);
  color: var(--crema-vieja);
  padding: var(--sp-8) 0 var(--sp-6);
  margin-top: var(--sp-8);
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-7); }
}

.footer h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mango-claro);
  margin-bottom: var(--sp-3);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-links a {
  color: var(--crema-vieja);
  opacity: 0.85;
  font-size: 15px;
  transition: opacity 0.15s ease;
}

.footer-links a:hover { opacity: 1; color: var(--mango-claro); }

.newsletter-form {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  max-width: 400px;
}

.newsletter-form input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  background: var(--verde-alpha-90);
  border: 1px solid rgba(245, 238, 216, 0.2);
  color: var(--crema-vieja);
  font-size: 15px;
}

.newsletter-form input::placeholder { color: var(--crema-vieja); opacity: 0.6; }
.newsletter-form input:focus { outline: none; border-color: var(--mango-claro); }

.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(245, 238, 216, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  opacity: 0.7;
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.text-center { text-align: center; }
.text-tierra { color: var(--tierra); }
.mt-2 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-5); }

/* Zona indicator */
.zona-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--crema-clara);
  border: 1px solid var(--tierra-10);
  font-size: 13px;
  color: var(--tierra);
  font-weight: 500;
}

.zona-indicator.dentro {
  background: rgba(35, 55, 31, 0.08);
  color: var(--verde-profundo);
  border-color: rgba(35, 55, 31, 0.2);
}

.zona-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amarillo-mango);
}

.zona-indicator.dentro .dot { background: var(--verde-profundo); }

/* Cards para panel admin / cliente */
.panel-card {
  background: var(--crema-clara);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  border: 1px solid var(--tierra-10);
}

.panel-card h3 { margin-bottom: var(--sp-3); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

.kpi {
  background: var(--crema-clara);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  border: 1px solid var(--tierra-10);
}

.kpi-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tierra);
  margin-bottom: 6px;
}

.kpi-valor {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--verde-profundo);
  line-height: 1;
}

.kpi-delta {
  font-family: var(--font-body);
  font-size: 13px;
  margin-top: 6px;
  color: var(--tierra);
}
.kpi-delta.positivo { color: #2d6a1e; }
.kpi-delta.negativo { color: #a43e00; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}