/* PIEL-NEGRA.CSS · la piel negro y rojo de /oferta/. Es la UNICA hoja de la
   pagina que escribe colores: las variables de abajo son las de
   docs/programa/programa.css (mismos nombres y mismos valores) mas cuatro
   extras que la maqueta pide y programa.css no tiene. Todo lo demas de
   /oferta/ (venta-vsl.css) pide su color a una variable y no lleva ni un hex.
   No se toca programa.css ni tokens.css: esta hoja es su propia copia, igual
   que pasillo.css. La compuerta que la vigila es pruebas/oferta-piel.mjs.
   Esquinas rectas, sin emoji. Bebas Neue, DM Sans y Permanent Marker, locales. */
:root {
  --negro: #0c0c0c;
  --franja: #161616;
  --rojo: #e5483b;
  --crema: #ffffff;
  --texto-85: color-mix(in srgb, var(--crema) 85%, transparent);
  --texto-80: color-mix(in srgb, var(--crema) 80%, transparent);
  --texto-75: color-mix(in srgb, var(--crema) 75%, transparent);
  --texto-70: color-mix(in srgb, var(--crema) 70%, transparent);
  --texto-55: color-mix(in srgb, var(--crema) 55%, transparent);
  --texto-50: color-mix(in srgb, var(--crema) 50%, transparent);
  --texto-40: color-mix(in srgb, var(--crema) 40%, transparent);
  --texto-30: color-mix(in srgb, var(--crema) 30%, transparent);
  --linea: color-mix(in srgb, var(--crema) 10%, transparent);
  --linea-fuerte: color-mix(in srgb, var(--crema) 35%, transparent);
  --velo: color-mix(in srgb, var(--negro) 80%, transparent);
  --bebas: 'Bebas Neue', Impact, sans-serif;
  --lateral: 20px;
  /* Extras de la maqueta negra (no estan en programa.css). */
  --barra: #111111;
  --vacio: #262626;
  --ama: #e0c48a;
  --rojo-vivo: #ff5a4c;
  --marcador: 'Permanent Marker', 'Bebas Neue', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); }
html { color-scheme: dark; background: var(--negro); }
body {
  margin: 0;
  background: var(--negro);
  color: var(--crema);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; }
[hidden] { display: none !important; }

/* LA HOJA DE DATOS EN NEGRO (prueba de punta a punta de Carlos, 2026-10-13: "el
   first step del checkout sigue siendo el anterior"). hoja.css la pinta blanca,
   azul y oro, y en /oferta/ era lo unico de la compra que seguia en la piel
   vieja. Mismo look que la hoja del rechazo de /pack/ en la piel negra aprobada
   (pasillo.css, body.neg .hoja): fondo #161616, filete rojo arriba, letra blanca
   y boton rojo en Bebas. Cada regla lleva `body` delante para ganarle a
   hoja.css, que carga despues. Sin `display` en nodos que nacen hidden. */
body .velo:not([hidden]) { background: var(--velo); }
body .hoja:not([hidden]) { background: var(--franja); color: var(--crema); box-shadow: none; border-top: 4px solid var(--rojo); font-family: 'DM Sans', system-ui, sans-serif; }
body .hoja .boton { font-family: var(--bebas); font-weight: 400; font-size: 30px; letter-spacing: .06em; text-transform: uppercase; padding: .62em 1em; background: var(--rojo); color: var(--crema); }
body .hoja .boton:hover { background: var(--rojo-vivo); color: var(--crema); }
body .hoja .boton[aria-busy="true"] { background: var(--rojo); color: var(--texto-70); }
body .hoja .boton:focus-visible { box-shadow: 0 0 0 2px var(--negro), 0 0 0 4px var(--rojo); }
body .hoja .filete-corto { background: var(--rojo); }
body .hoja .aviso-error { background: color-mix(in srgb, var(--rojo) 16%, transparent); border-left-color: var(--rojo); color: var(--rojo-vivo); }
body .hoja .paso-pago { color: var(--rojo); }
body .hoja-cerrar { color: var(--texto-70); }
body .hoja-cerrar:hover { color: var(--crema); }
body .hoja-avance span { background: var(--linea); }
body .hoja-avance span:first-child, body .hoja-avance.en-dos span { background: var(--rojo); }
body .hoja .campo label { color: var(--texto-70); }
body .hoja .campo:focus-within label { color: var(--crema); }
body .hoja .entrada { font-family: 'DM Sans', system-ui, sans-serif; font-size: 20px; color: var(--crema); border-bottom-color: var(--linea-fuerte); }
body .hoja .entrada:focus { border-bottom-color: var(--rojo); }
body .hoja .entrada[aria-invalid="true"] { border-bottom-color: var(--rojo-vivo); }
body .hoja .campo .nota, body .hoja .terminos-pago, body .hoja-sellos ul { color: var(--texto-55); }
body .hoja .error-campo { color: var(--rojo-vivo); }
body .hoja .rechazo-calma { font-family: var(--bebas); font-weight: 400; font-size: 22px; letter-spacing: .18em; color: var(--rojo); }
body .hoja .rechazo-titulo { font-family: var(--bebas); font-weight: 400; color: var(--crema); }
body .hoja .rechazo-sub { color: var(--texto-80); }
body .hoja .rechazo-whatsapp, body .hoja .rechazo-whatsapp:hover { color: var(--crema); }
body .hoja .reloj-caja:not([hidden]) { background: var(--vacio); }
body .hoja .reloj-fila > span:first-child { color: var(--texto-80); }
body .hoja .reloj-cifra { font-family: var(--bebas); font-weight: 400; color: var(--crema); }
body .hoja .cupo-lugar { border-top-color: var(--linea); color: var(--crema); }

/* EL PIE CON CORREO (2026-10-23): las mismas medidas que .mn-pie de menu.css, para las paginas negras sin pie propio. */
.pie-negro { padding: 24px 16px 32px; font-size: 12px; line-height: 1.5; color: var(--texto-50); text-align: center; }
.pie-negro p { margin: 4px 0; }
.pie-negro a { color: var(--texto-55); }