/* BASE
   Reset, variables de marca, tipografia y elementos de formulario.
   El chino lleva su propia escala: la latina apelmaza los ideogramas. */

/* TEMA
   Cada color se declara una sola vez con light-dark(): primero el valor claro,
   después el oscuro. Sin data-theme manda color-scheme:light dark, es decir la
   preferencia del sistema; en cuanto alguien pulsa el interruptor, data-theme
   fija el esquema y gana. Como es color-scheme nativo, los controles del
   navegador (selects, barras de scroll) se adaptan solos.

   --acento-solido es fondo y --acento-texto es texto: en oscuro esos dos papeles
   se separan, por eso son variables distintas. */
:root{
  color-scheme: light dark;

  /* Marca */
  --acento:              light-dark(#5e7041, #93ac6c);
  --acento-solido:       light-dark(#39462b, #5c7040);
  --acento-texto:        light-dark(#39462b, #bcd394);
  --acento-suave:        light-dark(#e8eddf, #2b3324);
  --tierra:              light-dark(#8b684b, #a37f5e);
  --crema:               light-dark(#f7f2e9, #232a1d);
  --arena:               light-dark(#ead8b5, #3d4430);
  --sobre-acento:        light-dark(#fffdfa, #f3f6ea);
  --sobre-acento-suave:  light-dark(#dbe5ca, #cfdcb4);

  /* Superficies y texto */
  --fondo:               light-dark(#f5f1e7, #12140e);
  --fondo-alt:           light-dark(#ece6d7, #171a12);
  --superficie:          light-dark(#ffffff, #1e2218);
  --barra:               light-dark(rgba(245,241,231,.93), rgba(18,20,14,.92));
  --texto:               light-dark(#211f1b, #edf0e3);
  --texto-medio:         light-dark(#57554f, #c3c8b6);
  --texto-suave:         light-dark(#706b63, #a0a495);
  --borde:               light-dark(rgba(57,70,43,.20), rgba(220,229,202,.18));
  --borde-suave:         light-dark(rgba(57,70,43,.13), rgba(220,229,202,.10));
  --tarjeta-1:           light-dark(#fffdf8, #21261b);
  --tarjeta-2:           light-dark(#f3ecdc, #1a1e14);
  --calido-1:            light-dark(#f8f4ea, #1c2016);
  --calido-2:            light-dark(#eee5d6, #171a11);
  --hero-1:              light-dark(#fffaf4, #171a12);
  --hero-2:              light-dark(#f7f0e6, #12140e);

  /* Panel oscuro: el carrito y los avisos ya eran oscuros en tema claro */
  --panel:               light-dark(#1e211a, #0b0d07);
  --panel-texto:         light-dark(#ffffff, #f1f4e8);
  --panel-suave:         light-dark(#cdd3c4, #b4baa8);
  --panel-acento:        light-dark(#dbe5ca, #bcd394);

  /* Estados */
  --ok:                  light-dark(#41693a, #8fc07f);
  --error:               light-dark(#9d4530, #e08a72);
  --espera:              light-dark(#8a6a3d, #d0a663);

  /* Los dibujos CSS están pensados para fondo claro: en oscuro llevan un velo. */
  --velo-dibujo:         light-dark(transparent, rgba(8,10,6,.30));
  /* Grado de color de las fotos: baja el frío y las lleva al tono cálido de marca. */
  --grado-foto:          saturate(.90) sepia(.12) contrast(1.03);
  --tinte-foto:          light-dark(rgba(94,112,65,.18), rgba(94,112,65,.26));
  --velo-cereal:         light-dark(rgba(245,241,231,.86), rgba(18,20,14,.86));

  --sombra:              light-dark(0 18px 50px rgba(45,52,32,.12), 0 18px 50px rgba(0,0,0,.5));
  --radio:24px;
  /* Compensa la barra sticky al abrir hashes o desplazar el carrito. */
  --desfase-barra:96px;
}

/* La elección manual pisa la del sistema: sólo hay que cambiar el esquema. */
:root[data-theme="light"]{ color-scheme: light }
:root[data-theme="dark"]{ color-scheme: dark }
*{box-sizing:border-box}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--texto);
  background:var(--fondo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
/* Chino simplificado: la escala latina (serif estrecha, tracking negativo,
   interlineado ajustado) apelmaza los ideogramas. Aqui se relaja todo. */
:lang(zh) body,:lang(zh) input,:lang(zh) select,:lang(zh) textarea{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif
}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,
:lang(zh) .olivecard strong{
  font-family:Georgia,"Times New Roman","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",sans-serif;
  letter-spacing:.01em
}
:lang(zh) h1{font-size:clamp(2.25rem,4.4vw,3.9rem);line-height:1.3}
:lang(zh) h2{font-size:clamp(1.6rem,2.7vw,2.4rem);line-height:1.34}
:lang(zh) h3{line-height:1.5}
:lang(zh) p,:lang(zh) .lead{line-height:1.8}
:lang(zh) .lead{max-width:38em}
:lang(zh) .eyebrow{letter-spacing:.05em}
h1,h2{font-family:Georgia,"Times New Roman",serif;color:var(--acento-texto)}
h1,h2,h3{text-wrap:balance}
/* Interlineado por encima de 1: con .91 los trazos descendentes chocaban con la
   linea siguiente y en chino los ideogramas se solapaban. */
h1{font-size:clamp(2.8rem,5.3vw,4.9rem);line-height:1.04;letter-spacing:-.035em;margin:14px 0 20px}
h2{font-size:clamp(1.95rem,3.5vw,3.1rem);line-height:1.11;letter-spacing:-.028em;margin:10px 0 16px}
h3{font-size:1.16rem;line-height:1.35;letter-spacing:-.012em;margin:0 0 9px}
p{text-wrap:pretty}
.lead{font-size:clamp(1.04rem,.5vw + .92rem,1.18rem);line-height:1.62;color:var(--texto-medio);max-width:65ch}
section{padding:88px 0}
.alt{background:var(--fondo-alt)}
label{font-size:.82rem;font-weight:900;color:var(--texto-medio)}
input,select,textarea{width:100%;padding:14px 15px;border:1px solid var(--borde);border-radius:14px;background:var(--superficie);color:var(--texto);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acento);box-shadow:0 0 0 4px rgba(94,112,65,.10)}
textarea{min-height:112px;resize:vertical}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .view.is-active{animation:none}
}