/* Colores del logo de AgendaViva.
   Se carga después del estilo de cada página, así que lo que está aquí gana.

   Regla de uso del Sol (#faa726): va de RELLENO con texto verde oscuro, o de TEXTO sobre fondo
   verde oscuro. Nunca como texto sobre blanco: da 1.98:1 y no se lee. */

:root{
  --hoja-profunda:#132312;   /* la palabra del logo y su hoja central */
  --hoja:#5b713f;            /* las hojas laterales. Reemplaza al Moss anterior (#5a6b41) */
  --sol:#faa726;             /* el gajo amarillo */
  --sol-claro:#ffc766;       /* hover del sol */
  --sol-tinte:#fff6e6;       /* fondo muy claro cálido */
  --moss:#5b713f;
  --ok:#5b713f;
}

/* Encabezado: del verde bosque a la hoja profunda, con un resplandor de sol arriba a la derecha */
header{
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(250,167,38,.14), transparent 55%),
    linear-gradient(160deg,var(--forest) 0%, var(--hoja-profunda) 100%);
}
header h1 em{color:var(--sol)}
nav a.hl{background:var(--sol);color:var(--hoja-profunda)}
nav a.hl:hover{background:var(--sol-claro)}

/* Botón de acción: sol con texto verde oscuro (8.3:1) */
.btn-terra{background:var(--sol);color:var(--hoja-profunda)}
.btn-terra:hover{background:var(--sol-claro)}

/* Una barrita de sol delante de cada etiqueta de sección */
.lbl::before{
  content:"";display:inline-block;width:18px;height:3px;border-radius:2px;
  background:var(--sol);margin-right:9px;vertical-align:middle;position:relative;top:-1px;
}

/* Capacidades */
.cap .ic{background:#e9efdd;color:var(--hoja)}
.cap.wide{background:linear-gradient(135deg,#fff 0,var(--sol-tinte) 100%);border-color:var(--sol)}
.cap.wide .ic{background:var(--sol);color:var(--hoja-profunda)}
.cap .tag{color:var(--hoja);background:rgba(91,113,63,.12)}

/* Cómo funciona: círculos verdes, y el último, el resultado, en sol */
.step .n{background:var(--hoja);color:#fff}
.step:last-child .n{background:var(--sol);color:var(--hoja-profunda)}

/* Bloques oscuros */
.demo-card,.math{background:linear-gradient(150deg,var(--forest) 0%,var(--hoja-profunda) 100%)}
.demo-card::after{background:radial-gradient(circle,rgba(250,167,38,.30),transparent 65%)}
.demo-card .lbl,.math .lbl{color:var(--sol)}
.row.total{border-top-color:var(--sol)}
.row.total .v{color:var(--sol)}

/* Calculadora: lo recuperado va en verde hoja, lo perdido sigue en rojo */
#recupera{color:var(--hoja)}
.stepper button:hover{background:#ffe9c2}

/* Comparación: la columna de AgendaViva resalta */
.vs th:nth-child(3){background:var(--sol);color:var(--hoja-profunda)}
.vs td:nth-child(3){background:var(--sol-tinte)}

/* Palomitas de las listas en verde hoja */
.pack li::before,.trust li::before{color:var(--hoja)}

/* Etiqueta pequeña del encabezado: el terracota se perdía sobre el verde oscuro */
header .eyebrow{color:#b9c7a0}

/* Paquetes: el recomendado en sol */
.pack.hl{border-color:var(--sol);box-shadow:0 20px 40px -28px rgba(250,167,38,.55)}
.pack .rib{background:var(--sol);color:var(--hoja-profunda)}

/* Pie: la franja de los tres colores del logo */
footer.wrap{position:relative;padding-top:30px}
footer.wrap::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--hoja-profunda) 0 34%,var(--hoja) 34% 67%,var(--sol) 67% 100%);
}