/* Janus — mundo compartido: «La vidriera de la noche» (pasillo en grafito, luz interior, vinilo sobre vidrio) */
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 800;font-stretch:62% 125%;font-display:optional;src:url(./assets/fonts/Archivo-300-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo Respaldo Titular';src:local('Helvetica Neue'),local('Helvetica'),local('Arial');size-adjust:108%;ascent-override:95%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:'Archivo Respaldo Cuerpo';src:local('Helvetica Neue'),local('Helvetica'),local('Arial');size-adjust:98.5%;ascent-override:95%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(./assets/fonts/DMMono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(./assets/fonts/DMMono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {
  /* ===== Pasillo: grafito, el mismo de los paneles del producto ===== */
  --graphite-900: #070A0F;
  --graphite-800: #0D1117;
  --graphite-700: #131A24;
  --graphite-600: #1B2330;
  --graphite-500: #26313F;
  --graphite-400: #38465A;

  /* ===== Luz interior ===== */
  --ivory-100: #FFF9ED;
  --ivory-200: #F4EEE2;
  --ivory-300: #DCD4C5;
  --slate-300: #A8B2BE;
  --slate-400: #7C8794;

  /* ===== Azul sistema: el único acento encendido ===== */
  --blue-200: #8FBBFF;
  --blue-300: #6FA5FF;
  --blue-400: #4D8DFF;
  --blue-500: #2979FF;
  --blue-600: #1B5FD9;
  --navy-500: #1F4192;
  --grey-logo: #8A9096;

  /* ===== Superficie clara: sólo la lista nativa del desplegable ===== */
  --paper: #F2F4F7;
  --ink: #2E3438;

  --alert: #FF6B4A;
  --ok: #3FB984;

  --font-sans: 'Archivo', 'Archivo Respaldo Cuerpo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-titular: 'Archivo', 'Archivo Respaldo Titular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms;
  --dur: 300ms;
  --dur-light: 900ms;

  --measure: 68ch;
  --container: 1280px;
  --gutter: clamp(20px, 4.4vw, 60px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  font-variation-settings: 'wdth' 100;
  color: var(--ivory-200);
  background: var(--graphite-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-titular); margin: 0; font-weight: 700; line-height: 1.08; text-wrap: balance; font-variation-settings: 'wdth' 112; letter-spacing: -0.012em; }

a { color: var(--blue-300); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--blue-300) 45%, transparent); transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); }
a:hover { color: var(--blue-200); text-decoration-color: currentColor; }

/* superficies del navegador */
::selection { background: var(--blue-500); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--graphite-400) var(--graphite-900); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--graphite-900); }
::-webkit-scrollbar-thumb { background: var(--graphite-400); border: 3px solid var(--graphite-900); border-radius: 4px; }
input, textarea, select { caret-color: var(--blue-400); accent-color: var(--blue-500); }

/* el logo sobre fondo oscuro trae lienzo de sobra: se recorta a la marca sin tocar el archivo */
.logo-crop { display: block; width: 96px; aspect-ratio: 520 / 480; overflow: hidden; }
.logo-crop img { width: 181%; max-width: none; height: auto; }

.skip { position: absolute; left: 12px; top: -70px; z-index: 100; background: var(--navy-500); color: #fff; padding: 12px 16px; border-radius: 3px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.skip:hover { color: #fff; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ===== vinilo: letras aplicadas sobre el vidrio ===== */
.vinyl {
  font-variation-settings: 'wdth' 120;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--slate-300);
}
.vinyl-blue { color: var(--blue-300); }
/* rotulo largo: mismo vinilo, sin versales, porque una linea de 50 caracteres en mayusculas no se lee */
.vinyl-long { text-transform: none; letter-spacing: .05em; font-size: 13.5px; font-variation-settings: 'wdth' 112; }

/* cifras: la misma cara que usan los paneles del producto */
.figure { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ===== la reja: divisor del pasillo ===== */
.grille { height: 12px; border: 0; margin: 0; background: repeating-linear-gradient(90deg, var(--graphite-500) 0 1px, transparent 1px 9px); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* ===== el cartel encendido: acción principal ===== */
.sign {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 4px;
  font-weight: 700; font-size: 17px; font-variation-settings: 'wdth' 108;
  letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  color: var(--graphite-900);
  background: linear-gradient(180deg, var(--blue-400), var(--blue-500));
  box-shadow: 0 0 0 1px var(--blue-300) inset, 0 8px 34px -10px rgba(41,121,255,.85);
  transition: box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sign:hover { background: linear-gradient(180deg, var(--blue-300), var(--blue-400)); box-shadow: 0 0 0 1px var(--blue-200) inset, 0 10px 46px -8px rgba(41,121,255,1); color: var(--graphite-900); }
.sign:active { transform: translateY(1px); }
.sign svg { width: 20px; height: 20px; flex: none; }

/* cartel apagado: acción secundaria, sólo el borde de vinilo */
.sign-off {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 1px solid var(--graphite-400); border-radius: 4px;
  font-weight: 600; font-size: 17px; font-variation-settings: 'wdth' 108;
  color: var(--ivory-200); background: transparent; text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.sign-off:hover { border-color: var(--slate-400); background: var(--graphite-700); color: var(--ivory-100); }
.sign-off svg { width: 20px; height: 20px; flex: none; }

.sign-wa { color: #fff; background: linear-gradient(180deg, #2BB673, #1E9459); box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 8px 30px -12px rgba(43,182,115,.9); }
.sign-wa:hover { background: linear-gradient(180deg, #34CE83, #23A566); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 10px 38px -10px rgba(43,182,115,1); }

/* ===== la vidriera ===== */
.pane {
  position: relative;
  background: linear-gradient(180deg, var(--graphite-700), var(--graphite-800));
  border: 1px solid var(--graphite-500);
  border-radius: 3px;
  overflow: hidden;
  transition: box-shadow var(--dur-light) var(--ease), border-color var(--dur-light) var(--ease);
}
/* el brillo diagonal del vidrio */
.pane::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(var(--sheen, 104deg), transparent 34%, rgba(244,238,226,.07) 46%, rgba(244,238,226,.12) 50%, rgba(244,238,226,.05) 55%, transparent 66%);
}
.pane.is-lit { border-color: var(--graphite-400); box-shadow: 0 0 0 1px rgba(143,187,255,.12), 0 24px 70px -34px rgba(41,121,255,.5); }

/* el derrame: la luz que cae al piso bajo una vidriera encendida */
.spill { position: relative; }
.spill::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 190px; pointer-events: none;
  background: radial-gradient(78% 100% at 72% 0%, rgba(244,238,226,.30), rgba(244,238,226,.13) 42%, transparent 82%);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent);
  opacity: 0; transition: opacity var(--dur-light) var(--ease);
}
.spill.is-lit::before { opacity: 1; }

/* el punto vivo */
.live { display: inline-flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-400); box-shadow: 0 0 0 0 rgba(77,141,255,.6); }
@keyframes pulse { to { box-shadow: 0 0 0 9px rgba(77,141,255,0); } }
.js .live-dot { animation: pulse 2.4s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .js .live-dot { animation: none; } }

/* ===== formulario: campos de vidrio ===== */
.field { display: grid; gap: 7px; }
.field label { font-size: 15px; font-weight: 500; color: var(--slate-300); }
.field .opt { color: var(--slate-400); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ivory-100);
  background: var(--graphite-900);
  border: 1px solid var(--graphite-500); border-radius: 3px;
  padding: 13px 14px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 100px; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238FBBFF' stroke-width='1.6'><path d='M3 6l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
.field select option { color: var(--ink); background: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(41,121,255,.18); }
.field input::placeholder, .field textarea::placeholder { color: transparent; }


/* ===== navegación del pie =====
   Las páginas por tema no se alcanzaban entre sí: cada una quedaba con dos o
   tres destinos. Esta fila está en las seis y las conecta a todas. */
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-block: 22px;
  border-bottom: 1px solid var(--graphite-600); }
.foot-nav a { color: var(--slate-300); text-decoration: none; font-size: 15px; }
.foot-nav a:hover { color: var(--ivory-100); text-decoration: underline; text-underline-offset: 3px; }
.foot-nav a[aria-current="page"] { color: var(--ivory-100); }


/* Etiqueta de ubicación en la barra superior de una página interna.
   El vinilo rotula objetos; no es un sombrero sobre un titular. */
.pagina-donde { margin-right: auto; color: var(--slate-400); }
@media (max-width: 560px) { .pagina-donde { display: none; } }