/* ============================================================
   Veta 83 — Tema verde
   ------------------------------------------------------------
   Se carga DESPUÉS de estilos.css (en index, catalogo, contacto y
   testimonio) y solo cambia lo indicado aquí: los fondos oscuros pasan
   de negro a verde bosque, y unos pocos detalles pequeños (etiquetas
   de las fotos, filtro activo, íconos, viñetas) usan el verde.

   Para cambiar el tono, editar las variables de :root.
   Para quitarlo: borrar la línea <link ... tema-verde.css> de esas
   cuatro páginas. Si se edita este archivo, subir el número de
   ?v=1 en esas páginas para que los navegadores lo recarguen.
   ============================================================ */

:root {
  --verde:       #2f4a3a;   /* verde bosque: insignias, filtro activo, íconos */
  --verde-hondo: #1c2a21;   /* fondos oscuros (reemplaza al negro) */
  --verde-medio: #3f6650;   /* detalles pequeños */
  --verde-vivo:  rgba(84, 130, 102, .22);   /* resplandor suave */
}

/* Portada: un toque de verde en la esquina inferior izquierda, junto al resplandor dorado */
.portada {
  background:
    radial-gradient(1100px 620px at 78% 12%, rgba(201, 160, 99, .20), transparent 62%),
    radial-gradient(820px 520px at 0% 100%, rgba(63, 102, 80, .11), transparent 60%),
    linear-gradient(180deg, var(--arena) 0%, var(--marfil) 68%);
}

/* Superficies oscuras: verde bosque muy oscuro en vez de negro */
.promo,
.oscuro,
.pie {
  background: var(--verde-hondo);
}

.oscuro::before {
  background:
    radial-gradient(760px 420px at 20% 0%, rgba(201, 160, 99, .15), transparent 65%),
    radial-gradient(640px 400px at 92% 100%, var(--verde-vivo), transparent 70%);
}

/* Detalles pequeños en verde */
.producto__insignia { background: var(--verde); }
.filtro.activo { background: var(--verde); border-color: var(--verde); }
.valor__icono { color: var(--verde); }
.lista-marcas li::before {
  border-color: var(--verde-medio);
  background: radial-gradient(circle, var(--verde-medio) 0 3px, transparent 3px);
}