/* Web pública de CORZA: oscura primero, con los tokens de la app (apps/movil/src/tema.ts).
   Una sola columna de lectura; la portada abre con el semáforo, que es lo que solo CORZA hace. */
:root {
  --noche: #0C1412; --superficie: #14201D; --linea: #24332F; --hueso: #F2EDE4; --texto2: #9BA8A3;
  --pelaje: #E2692E; --verde: #2F8F7E; --ambar: #E9B949; --rojo: #D9534F;
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --cuerpo: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --noche: #F6F3EE; --superficie: #FFFFFF; --linea: #E3DDD3; --hueso: #142420; --texto2: #56645F; --pelaje: #C4561F; color-scheme: light; }
}
:root[data-theme="light"] { --noche: #F6F3EE; --superficie: #FFFFFF; --linea: #E3DDD3; --hueso: #142420; --texto2: #56645F; --pelaje: #C4561F; color-scheme: light; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--noche); color: var(--hueso); font: 400 17px/1.6 var(--cuerpo); }
.envoltura { max-width: 760px; margin: 0 auto; padding-block: 28px 64px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
a { color: var(--pelaje); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pelaje); outline-offset: 3px; }

.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.marca { font: 800 22px/1 var(--display); letter-spacing: .14em; color: var(--hueso); text-decoration: none; }
.nav { display: flex; gap: 18px; font-size: 15px; }
.nav a { color: var(--texto2); text-decoration: none; }
.nav a[aria-current="page"], .nav a:hover { color: var(--hueso); }

h1, h2, h3 { font-family: var(--display); text-wrap: balance; line-height: 1.12; }
h1 { font-size: clamp(34px, 7vw, 58px); font-weight: 800; margin: 48px 0 16px; letter-spacing: -.01em; }
h2 { font-size: 24px; font-weight: 700; margin: 40px 0 10px; }
h3 { font-size: 18px; margin: 24px 0 6px; }
p, li { max-width: 65ch; }
.bajada { font-size: 20px; color: var(--texto2); margin: 0 0 28px; }
.etiqueta { font: 600 12px/1 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto2); }

/* el semáforo del día: el momento que define el producto */
.dia { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 20px; display: grid; gap: 14px; max-width: 520px; }
.dia-fila { display: flex; align-items: center; gap: 12px; }
.punto { width: 16px; height: 16px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ambar) 18%, transparent); flex: none; }
.dia-titulo { font: 700 20px/1.2 var(--display); }
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dato b { display: block; font: 700 22px/1.1 var(--dato); font-variant-numeric: tabular-nums; }
.dato span { font-size: 13px; color: var(--texto2); }
.ajuste { font-size: 15px; border-top: 1px solid var(--linea); padding-top: 12px; }
.ajuste s { color: var(--texto2); }

.lista { display: grid; gap: 18px; padding: 0; list-style: none; margin: 24px 0 0; }
.lista li { display: grid; gap: 2px; }
.lista strong { font-family: var(--display); font-size: 18px; }
.legal h2 { font-size: 20px; }
.legal li { margin-bottom: 6px; }
.nota { font-size: 14px; color: var(--texto2); border-left: 3px solid var(--linea); padding-left: 12px; }
.pie { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto2); display: flex; flex-wrap: wrap; gap: 8px 20px; }
code { font-family: var(--dato); font-size: .92em; }
@media (prefers-reduced-motion: no-preference) { .punto { animation: latido 2.4s ease-in-out infinite; } }
@keyframes latido { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ambar) 8%, transparent); } }