:root {
  color-scheme: dark;
  --negro: #000;
  --panel: #03130a;
  --panel-alto: #062013;
  --linea: #123f22;
  --fosforo: #00ff41;
  --texto: #c6f7d2;
  --tenue: #7fc994;
  --lectura: #00ff41;
  --correo: #5cc8ff;
  --cambios: #ffb000;
  --alto: #ff5c5c;
  --display: 'Martian Mono', ui-monospace, Consolas, monospace;
  --cuerpo: 'IBM Plex Sans', system-ui, sans-serif;
  --entrada: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--negro); }
body { margin: 0; background: var(--negro); color: var(--texto); font: 400 1.0625rem/1.6 var(--cuerpo); }
/* Barrido de fósforo: casi imperceptible, da textura sin estorbar la lectura. */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, rgba(0, 255, 65, .022) 0 1px, transparent 1px 3px); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: var(--tenue); }
a:hover { color: var(--fosforo); text-decoration-color: var(--fosforo); }
:focus-visible { outline: 2px solid var(--fosforo); outline-offset: 3px; }
::selection { background: var(--fosforo); color: #000; }
h1, h2, h3 { font-family: var(--display); margin: 0; color: #eafff0; font-stretch: 87%; }
h1 { font-size: clamp(1.75rem, 4.1vw, 3.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
h2 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--display); font-size: .82em; font-stretch: 87%; }
:not(pre) > code { background: var(--panel-alto); color: var(--fosforo); padding: .12em .35em; overflow-wrap: anywhere; }
pre { margin: 0; padding: 1rem; overflow-x: auto; background: var(--panel); border: 1px solid var(--linea); line-height: 1.6; }

.ancho { max-width: 80rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.lectura { max-width: 44rem; }
.ancho.lectura > * { max-width: 44rem; }
.ancho.lectura > .titulo-pagina { max-width: none; }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 1rem; top: 1rem; background: var(--fosforo); color: #000; padding: .5rem 1rem; z-index: 6; }

.cabecera { position: relative; z-index: 2; padding-block: 1rem; border-bottom: 1px solid var(--linea); background: var(--negro); }
.cabecera .ancho { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.marca { font: 700 .95rem/1 var(--display); letter-spacing: -.03em; text-decoration: none; color: var(--fosforo); }
.marca::before { content: '>_ '; }
.cabecera nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; font-size: .9rem; }
.cabecera nav a { text-decoration: none; padding-block: .6rem; color: var(--tenue); transition: color 150ms ease-out; }
.cabecera nav a:hover, .cabecera nav a[aria-current] { color: var(--fosforo); }
.cabecera nav a[aria-current] { box-shadow: inset 0 -1px var(--fosforo); }

/* Portada */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); isolation: isolate; }
.lluvia { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .82) 44%, rgba(0, 0, 0, .1) 100%); }
.hero-rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; padding-block: clamp(3rem, 9vw, 7.5rem) clamp(2.5rem, 6vw, 5rem); }
.hero h1 { max-width: 19ch; }
.hero-entrada { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 36rem; margin-top: 1.5rem; }
.buscador { display: flex; align-items: stretch; margin-top: 2rem; max-width: 38rem; border: 1px solid var(--fosforo); background: #000; transition: box-shadow 200ms ease-out; }
.buscador:focus-within { box-shadow: 0 0 0 1px var(--fosforo), 0 0 28px rgba(0, 255, 65, .3); }
.buscador::before { content: 'PS>'; align-self: center; padding-left: 1rem; color: var(--fosforo); font: 600 .9rem var(--display); }
.buscador input { flex: 1; min-width: 0; border: 0; padding: .95rem .75rem; font: 400 1rem var(--cuerpo); background: transparent; color: #eafff0; border-radius: 0; outline: 0; caret-color: var(--fosforo); }
.buscador input::placeholder { color: var(--tenue); }
.buscador button { border: 0; background: var(--fosforo); color: #000; padding: .9rem 1.4rem; min-height: 44px; font: 700 .9rem var(--display); cursor: pointer; transition: transform 120ms ease-out, background-color 150ms ease-out; }
.buscador button:hover { background: #5cff85; }
.buscador button:active { transform: scale(.97); }

.terminal { background: rgba(3, 19, 10, .92); border: 1px solid var(--linea); min-width: 0; }
.terminal-barra { padding: .55rem 1rem; border-bottom: 1px solid var(--linea); font: 500 .75rem var(--display); color: var(--tenue); }
.terminal pre { background: none; border: 0; padding: 1rem; font-size: .76rem; white-space: pre-wrap; overflow-wrap: anywhere; color: #eafff0; min-height: 7.5rem; }
.terminal pre .cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; background: var(--fosforo); animation: parpadeo 1s steps(2, jump-none) infinite; }
.terminal .nota { font-size: .875rem; margin: 0; padding: 0 1rem 1rem; color: var(--tenue); }
@keyframes parpadeo { 50% { opacity: 0; } }

.seccion { padding-block: clamp(2.5rem, 6vw, 5rem); }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion > .ancho > h2 { margin-bottom: 1.5rem; }

.productos { list-style: none; margin: 0; padding: 0; }
.productos li { border-top: 1px solid var(--linea); }
.productos li:last-child { border-bottom: 1px solid var(--linea); }
.productos a { display: grid; grid-template-columns: minmax(10rem, 3fr) 6.5rem minmax(0, 7fr); gap: 1.5rem; align-items: baseline; padding: 1.2rem .75rem; text-decoration: none; color: inherit; position: relative; transition: background-color 150ms ease-out, transform 200ms var(--entrada); }
.productos a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--fosforo); transform: scaleY(0); transform-origin: top; transition: transform 200ms var(--entrada); }
.productos a:hover { background: var(--panel); }
.productos a:hover::before { transform: scaleY(1); }
.productos strong { font: 600 clamp(1.05rem, 2.2vw, 1.5rem)/1.2 var(--display); font-stretch: 87%; letter-spacing: -.03em; color: #eafff0; }
.productos a:hover strong { color: var(--fosforo); }
.productos span:nth-child(2) { font: 500 .8rem var(--display); color: var(--fosforo); }
.productos.recetas strong { font-size: 1rem; }

.impactos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem 2.5rem; margin: 0; }
.impactos dt { font-weight: 600; }
.impactos dd { margin: .35rem 0 0; color: var(--tenue); font-size: .95rem; }

.impacto { display: inline-flex; align-items: center; gap: .5em; font: 600 .75rem var(--display); font-stretch: 87%; white-space: nowrap; }
.impacto::before { content: ''; width: .6em; height: .6em; background: currentColor; flex: none; }
.i-solo-lectura { color: var(--lectura); }
.i-envia-correo { color: var(--correo); }
.i-cambios { color: var(--cambios); }
.i-alto-impacto { color: var(--alto); }

/* Encabezado interior: la lluvia solo muestra los comandos de esta página. */
.titulo-pagina { position: relative; padding-block: clamp(2rem, 5vw, 4rem) 1.5rem; isolation: isolate; }
.titulo-pagina .lluvia { inset: 0 calc(50% - 50vw); width: 100vw; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 95%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 45%, #000 95%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite: intersect; }
.titulo-pagina p { max-width: 44rem; margin-top: 1rem; font-size: 1.1rem; }
.titulo-pagina .miga { font-size: .9rem; color: var(--tenue); margin: 0 0 1rem; }
.titulo-pagina .entrada { font-size: 1.15rem; }
body > main { overflow-x: clip; }

/* Catálogo */
.catalogo { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.filtros fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.filtros legend { font: 600 .8rem var(--display); color: #eafff0; padding: 0; margin-bottom: .4rem; }
.filtros label { display: flex; gap: .5rem; align-items: baseline; padding-block: .2rem; font-size: .95rem; cursor: pointer; }
.filtros label:hover { color: var(--fosforo); }
.filtros label span { margin-left: auto; color: var(--tenue); font: 400 .75rem var(--display); }
.filtros input[type=checkbox] { accent-color: var(--fosforo); }
.campo-busqueda { width: 100%; border: 1px solid var(--tenue); background: #000; color: #eafff0; padding: .8rem .9rem; font: inherit; border-radius: 0; caret-color: var(--fosforo); transition: border-color 150ms ease-out, box-shadow 200ms ease-out; }
.campo-busqueda:focus { outline: 0; border-color: var(--fosforo); box-shadow: 0 0 22px rgba(0, 255, 65, .25); }
.campo-busqueda::placeholder { color: var(--tenue); }
.conteo { margin: 1rem 0; color: var(--tenue); font: 500 .8rem var(--display); }
.filtros-movil > summary { display: none; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { position: relative; border-top: 1px solid var(--linea); padding: 1.1rem .75rem; transition: background-color 150ms ease-out; }
.lista li[hidden] { display: none; }
.lista li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--fosforo); transform: scaleY(0); transform-origin: top; transition: transform 200ms var(--entrada); }
.lista li:hover { background: var(--panel); }
.lista li:hover::before { transform: scaleY(1); }
.lista .fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; align-items: baseline; }
.lista h3 a { text-decoration: none; }
.lista h3 a::after { content: ''; position: absolute; inset: 0; }
.lista p { margin: .4rem 0; max-width: 46rem; }
.lista small { color: var(--tenue); font-size: .85rem; }
.vacio { padding-block: 2rem; }
.boton-limpio { background: none; border: 0; padding: 0; font: inherit; color: var(--fosforo); text-decoration: underline; cursor: pointer; }

/* Ficha */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem; align-items: start; }
.ficha section { margin-bottom: 2.5rem; }
.ficha section > h2 { margin-bottom: .9rem; font-size: 1.15rem; }
.datos { background: var(--panel); border: 1px solid var(--linea); padding: 1.25rem; position: sticky; top: 1rem; }
.datos dl { margin: 1rem 0 0; }
.datos dt { font: 500 .72rem var(--display); color: var(--tenue); margin-top: 1rem; }
.datos dd { margin: .15rem 0 0; overflow-wrap: anywhere; font-size: .95rem; }
.datos ul { margin: 0; padding: 0; list-style: none; }
.descargar { display: block; text-align: center; background: var(--fosforo); color: #000; padding: .85rem 1rem; font: 700 .78rem/1.4 var(--display); font-stretch: 87%; text-decoration: none; overflow-wrap: anywhere; transition: transform 120ms ease-out, background-color 150ms ease-out; }
.descargar:hover { background: #5cff85; color: #000; }
.descargar:active { transform: scale(.98); }
.cuidado { border: 1px solid var(--alto); border-left-width: 4px; padding: .9rem 1.1rem; background: #190606; }
.cuidado strong { display: block; color: var(--alto); font: 600 .8rem var(--display); margin-bottom: .35rem; }
.caso { background: var(--panel); border: 1px solid var(--linea); padding: 1.25rem; }
.caso h3 { margin-bottom: .5rem; color: var(--fosforo); font-size: .9rem; }
.bloque-codigo { position: relative; margin-block: 1rem; }
.bloque-codigo pre { padding-right: 5.5rem; white-space: pre-wrap; overflow-wrap: anywhere; background: #000; color: #eafff0; }
.copiar { position: absolute; top: .5rem; right: .5rem; min-height: 32px; border: 1px solid var(--fosforo); background: #000; color: var(--fosforo); padding: .2rem .6rem; font: 600 .72rem var(--display); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out; }
.copiar:hover { background: var(--fosforo); color: #000; }
.copiar:active { transform: scale(.96); }
ol.pasos { padding-left: 1.4rem; margin: 0; }
ol.pasos li { margin-bottom: .6rem; padding-left: .25rem; }
ol.pasos li::marker { color: var(--fosforo); font: 600 .85rem var(--display); }
details.fuente > summary { cursor: pointer; font-weight: 600; padding-block: .6rem; }
details.fuente > summary:hover { color: var(--fosforo); }
details.fuente pre { max-height: 36rem; overflow: auto; font-size: .72rem; }

/* Recetas y texto largo */
.receta { padding-block: 2rem; border-top: 1px solid var(--linea); scroll-margin-top: 1rem; }
.receta h2 { margin-bottom: .75rem; }
.receta ol { padding-left: 1.4rem; }
.receta li { margin-bottom: .75rem; }
.receta li::marker { color: var(--fosforo); }
.receta video { display: block; background: #000; border: 1px solid var(--linea); width: 100%; height: auto; }
.prosa h2 { margin: 2.5rem 0 .75rem; }
.prosa ul, .prosa ol { padding-left: 1.4rem; }
.prosa li { margin-bottom: .5rem; }

table { border-collapse: collapse; width: 100%; font-size: .975rem; }
th, td { text-align: left; padding: .7rem .75rem .7rem 0; border-top: 1px solid var(--linea); vertical-align: top; }
th { font: 600 .78rem var(--display); color: #eafff0; }
.tabla { overflow-x: auto; }

.pie { border-top: 1px solid var(--linea); padding-block: 2.5rem; margin-top: 4rem; font-size: .92rem; color: var(--tenue); }
.pie p { max-width: 54rem; }
.pie p:first-child { color: var(--texto); }
.pie a:hover { color: var(--fosforo); }

/* Solo se oculta si app.js pudo marcarlo: sin JavaScript todo queda visible. */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity 420ms ease-out, transform 520ms var(--entrada); }
.revelar.visible { opacity: 1; transform: none; }

@media (max-width: 54rem) {
  .hero-rejilla, .catalogo, .ficha { grid-template-columns: minmax(0, 1fr); }
  .hero::before { background: rgba(0, 0, 0, .82); }
  .ficha { gap: 1rem; }
  .ficha .datos { position: static; grid-row: 2; }
  .productos a { grid-template-columns: 1fr auto; gap: .35rem 1rem; }
  .productos a > span:last-child { grid-column: 1 / -1; }
  .filtros-movil > summary { display: block; font-weight: 600; padding-block: .75rem; cursor: pointer; }
  .catalogo { gap: 1rem; }
  .titulo-pagina .lluvia { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
}
@media print {
  body::after, .cabecera nav, .copiar, .filtros, .pie, .lluvia { display: none; }
  html, body { background: #fff; color: #000; }
  h1, h2, h3 { color: #000; }
}