/* ============================================================
   WRD — base.css  ·  Cimientos compartidos por TODAS las páginas
   ============================================================
   LA IDEA (docs/VISUAL-PROMPT.md §2):
     WRD es una calle negra con una sola lámpara encendida sobre la
     vitrina: el naranja no pinta, ILUMINA — y lo que ya comprás se
     queda encendido.

   Tres reglas de construcción que salen de esa frase:
     · Hay UNA sola fuente de luz y está declarada (--luz-x/--luz-y).
       Toda sombra, halo y degradado del sitio deriva de ella. Una
       sombra que apunte al lado contrario es un error, no un detalle.
     · Lo apagado es información: un agotado no se tacha, se le va la
       luz. Un rango bajo no es feo, está a media luz.
     · El reparto del color es 90 / 8 / 2. 90 % superficies negras,
       8 % naranja COMO LUZ (radiales, filos, halos), 2 % naranja
       plano y saturado — y sólo en .btn-domicilio, .btn-naranja, el
       precio y la banda de la fila activa del sistema.

   Qué vive acá:
     1. Tokens (:root)     2. Reset          3. Tipografía
     4. Layout de página   5. Barra superior 6. Hero
     7. Formularios        8. Botones        9. Pie
    10. Utilidades        11. Movimiento reducido

   Qué NO vive acá:
     Nada específico de una página. Eso va en home.css, premium.css,
     intro.css, gate.css, modal.css y rango.css, SIEMPRE construido
     encima de estos tokens. Si necesitás un color o un espacio, usá
     una variable de :root — no escribas hex sueltos en los CSS de
     página.

   Las fuentes ya NO se importan acá: el @import bloqueaba el render y
   retrasaba la intro. Van como <link> en el <head> de cada página.
   ============================================================ */


/* ============================================================
   1 · TOKENS
   Cambiá acá y cambia todo el sitio. Los hex están escritos una
   sola vez en toda la obra: en este bloque.
   ============================================================ */

:root {
  /* --- Fuentes ------------------------------------------------
     Display: Archivo (grotesca de ancho variable) para marca,
     titulares y cifras. Cuerpo: Nunito — sostiene el voseo sin
     volverse rígida. Kanji: Noto Serif JP; sin él, Windows y
     Android dibujan cada uno de los 7 kanji con una fuente
     distinta y la escalera de rangos se ve rota. */
  --wrd-font-display: 'Archivo', 'Helvetica Neue', Arial, 'Segoe UI', system-ui, sans-serif;
  --wrd-font-cuerpo: 'Nunito', system-ui, 'Segoe UI', Arial, sans-serif;
  --wrd-font-kanji: 'Noto Serif JP', 'Yu Mincho', 'MS PMincho', serif;

  /* --- LA LÁMPARA: origen ÚNICO de toda sombra y todo degradado ---
     Movés --luz-x y el sitio entero se re-ilumina en coherencia. */
  --luz-x: 50%;
  --luz-y: -6%;
  --luz-caida: 340px;
  --luz-nucleo: #FFD8A8;   /* el centro del haz: titulares, cifras grandes */
  --luz-halo: #FF7A1A;     /* el naranja como luz, no como pintura */

  /* --- Superficies --- */
  --noche: #060505;        /* el afuera: body */
  --vitrina: #17110E;      /* lo que la lámpara alcanza: tarjetas, hojas */
  --apagado: #0F0C0B;      /* lo que se quedó sin luz: agotado, bloqueado */

  /* --- El riel: un solo mecanismo para sellos, stock y las 40 noches --- */
  --riel: #17110E;
  --riel-linea: #33291F;

  /* --- Filos: la arista que recibe la luz --- */
  --filo-luz: rgb(255 216 168 / 0.55);
  --filo-frio: #3D312C;
  --borde-obj: 1px solid #241C18;   /* borde estándar de todo objeto */

  --lux: 1;                /* 0.62 → 1.00 · la escalera de rangos */
  --alerta: #E5484D;       /* stock <=2, <=5 noches, error duro. Único no cálido */

  --rejilla: rgb(255 246 238 / 0.035);
  --paso: 24px;

  /* Si un objeto no tiene luz, no tiene sombra. Una sola sombra en
     todo el sitio, y siempre cayendo desde la lámpara. */
  --sombra-proy: 0 18px 28px -14px rgb(0 0 0 / 0.85), 0 2px 0 rgb(0 0 0 / 0.5);
  --glow-sello: 0 0 8px -1px rgb(255 106 0 / 0.80);

  --radio-1: 4px;          /* sellos y chips chicos */
  --radio-2: 10px;         /* tarjetas, campos, fotos */
  --radio-3: 18px;         /* modal y hoja de pedido */
  /* 999px SOLO en .btn-domicilio y #chip-rango (--wrd-radio-pill) */

  --curva-luz: cubic-bezier(0.2, 0.7, 0.3, 1);
  --curva-pop: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ms-luz: 180ms;
  --ms-sello: 220ms;
  --ms-apagar: 260ms;
  --ms-ascenso: 2400ms;

  /* --- Medidas del back-office (acá sólo viven los números) --- */
  --sis-fila: 32px;
  --sis-gap: 8px;
  --sis-sidebar: 216px;

  /* --- Negros y bordes heredados (son del dueño: hex exacto) ---
     --wrd-fondo se conserva por contrato aunque el body use --noche:
     lo leen el theme-color de los <head> y el modo demo. */
  --wrd-fondo: #0A0A0A;
  --wrd-superficie: var(--vitrina);
  --wrd-superficie-alta: #1E1613;
  --wrd-borde: #2A2220;
  --wrd-borde-fuerte: #3D312C;

  /* --- Naranja (el color de la marca) --- */
  --wrd-naranja: #FF6A00;
  --wrd-naranja-claro: #FF8C33;
  --wrd-naranja-hondo: #C24E00;

  /* --- Ámbar (acento cálido, foco y premium) --- */
  --wrd-ambar: #FFB347;

  /* --- Verde hoja (guiño al arbusto del logo). Micro-detalles nada
         más: una chispa, un check. Nunca superficies. --- */
  --wrd-verde: #7BC96F;

  /* --- Texto (los ratios van medidos sobre --noche) --- */
  --wrd-texto: #FFF6EE;         /* 17.5:1 sobre --vitrina */
  --wrd-texto-suave: #C9BDB4;   /* 10.2:1 sobre --vitrina */
  --wrd-texto-tenue: #9C8F86;   /*  6.5:1 — mínimo permitido, sólo apoyos */
  --wrd-sobre-naranja: #1A0D00; /* texto oscuro SOBRE naranja (6.6:1).
                                   Nunca blanco sobre naranja: no pasa AA. */
  --wrd-texto-off: #8A7A70;     /* lo apagado que igual se lee (4.7:1) */

  /* --- Canales RGB sueltos, para tintes a medida --- */
  --wrd-naranja-rgb: 255 106 0;
  --wrd-ambar-rgb: 255 179 71;
  --wrd-verde-rgb: 123 201 111;
  --wrd-texto-rgb: 255 246 238;
  --wrd-fondo-rgb: 6 5 5;
  --wrd-luz-rgb: 255 216 168;

  --wrd-naranja-tinte: rgb(255 106 0 / 0.10);
  --wrd-ambar-tinte: rgb(255 179 71 / 0.10);
  --wrd-verde-tinte: rgb(123 201 111 / 0.12);

  /* --- Escala de espacio (múltiplos de 4px) --- */
  --wrd-esp-1: 4px;
  --wrd-esp-2: 8px;
  --wrd-esp-3: 12px;
  --wrd-esp-4: 16px;
  --wrd-esp-5: 24px;
  --wrd-esp-6: 32px;
  --wrd-esp-7: 48px;
  --wrd-esp-8: 64px;
  --wrd-esp-9: 96px;

  /* --- Radios heredados: apuntan a la escala nueva --- */
  --wrd-radio-1: var(--radio-1);
  --wrd-radio-2: var(--radio-2);
  --wrd-radio-3: var(--radio-3);
  --wrd-radio-pill: 999px;
  /* --wrd-radio-4 murió con el rediseño: no se reintroduce. */

  /* --- Tipografía en px (no rem): la escala de 390 ---
     11 etiqueta · 13 apoyo · 15/1.55 cuerpo · 17 destacado
     20 nombre de producto · 26 precio · 34 h2 · 46 h1/countdown
     64 siglas de la intro. */
  --wrd-txt-xs: 11px;
  --wrd-txt-sm: 13px;
  --wrd-txt-base: 15px;
  --wrd-txt-md: 17px;
  --wrd-txt-lg: 20px;
  --wrd-txt-xl: 26px;
  --wrd-txt-2xl: 34px;
  --wrd-txt-3xl: 46px;
  --wrd-txt-intro: 64px;
  /* 16px es el piso que evita el zoom de iOS al enfocar un campo. */
  --wrd-campo: 16px;

  --wrd-lh-apretada: 1.06;
  --wrd-lh-titulo: 1.18;
  --wrd-lh-base: 1.55;

  /* --- Sombras heredadas: todas caen de la misma lámpara --- */
  --wrd-sombra-1: 0 1px 0 rgb(0 0 0 / 0.5);
  --wrd-sombra-2: var(--sombra-proy);
  --wrd-sombra-3: var(--sombra-proy);
  --wrd-glow-naranja: 0 0 22px -6px rgb(255 122 26 / 0.35);
  --wrd-glow-naranja-fuerte: 0 0 28px -6px rgb(255 122 26 / 0.5);
  --wrd-glow-ambar: 0 0 22px -8px rgb(255 179 71 / 0.35);

  /* --- Movimiento --- */
  --wrd-trans-rapida: 120ms var(--curva-luz);
  --wrd-trans: var(--ms-luz) var(--curva-luz);
  --wrd-trans-lenta: 420ms var(--curva-luz);

  /* --- Medidas de página ---
     1076px de contenido + 2 x 24px de aire = 1124px de caja: a 1280
     eso da 4 columnas de 257px con gap de 16px, exacto. */
  --wrd-ancho: 1076px;
  --wrd-ancho-texto: 560px;
  --wrd-pad-x: 14px;         /* aire lateral en celular: 390 - 28 = 362 */
  --wrd-gap-grid: 10px;      /* 362 - 10 = 352 / 2 = tarjeta de 176px */
  --wrd-alto-top: 50px;

  /* --- Capas --- */
  --wrd-z-top: 50;
  --wrd-z-intro: 100;

  /* Los controles nativos (select, scrollbar, autocompletar) salen oscuros. */
  color-scheme: dark;
}

/* A partir de 900px la escala sube un escalón y el aire se abre.
   11 · 13 · 16/1.6 · 18 · 20 · 26 · 40 · 56 · 80 */
@media (min-width: 56.25em) {
  :root {
    --wrd-txt-base: 16px;
    --wrd-txt-md: 18px;
    --wrd-txt-2xl: 40px;
    --wrd-txt-3xl: 56px;
    --wrd-txt-intro: 80px;
    --wrd-lh-base: 1.6;
    --wrd-pad-x: 24px;
    --wrd-gap-grid: 16px;
    /* --wrd-alto-top NO crece: la barra la mide el chip de rango
       (43px), y eso es igual en celular que en escritorio. */
  }
}


/* ============================================================
   2 · RESET
   Lo mínimo indispensable, sin librerías.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* El atributo [hidden] SIEMPRE gana. Sin esto, cualquier regla de autor
   que fije un `display` explícito (inputs, tarjetas, paneles) empata en
   especificidad con la regla del navegador y deja ver elementos que el
   JS marcó como ocultos (p. ej. el campo de referido del gate). El
   !important cierra ese hueco de una vez. */
[hidden] {
  display: none !important;
}

html {
  /* clip (no hidden): corta cualquier desborde lateral SIN romper
     position: sticky de la barra superior. */
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Que los anclas (#catalogo) no queden tapadas por la barra pegada. */
  scroll-padding-top: calc(var(--wrd-alto-top) + var(--wrd-esp-5));
  -webkit-text-size-adjust: 100%;
}

/* EL FONDO DE DOS CAPAS: el cono de la lámpara entrando por arriba y
   la rejilla del asfalto. Todo pintado, cero imágenes. El color final
   es --noche: ninguna regla de la hoja pinta un fondo más claro. */
body {
  overflow-x: clip;
  min-height: 100vh;
  /* Columna: así el pie se apoya abajo aunque la página sea cortita. */
  display: flex;
  flex-direction: column;
  font-family: var(--wrd-font-cuerpo);
  font-size: var(--wrd-txt-base);
  line-height: var(--wrd-lh-base);
  color: var(--wrd-texto);
  background:
    radial-gradient(120% var(--luz-caida) at var(--luz-x) var(--luz-y),
      rgb(255 122 26 / 0.16), transparent 68%),
    repeating-linear-gradient(0deg, var(--rejilla) 0 1px, transparent 1px var(--paso)),
    var(--noche);
  background-attachment: fixed, fixed, scroll;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* La respiración de la lámpara: una segunda capa del MISMO cono, con
   el mismo origen, que sube y baja de intensidad. Es la única
   animación de fondo del sitio. Congelada (movimiento reducido) queda
   en su valor estático y el cono sigue estando. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% var(--luz-caida) at var(--luz-x) var(--luz-y),
    rgb(255 122 26 / 0.09), transparent 68%);
  opacity: 0.62;
  animation: wrd-respirar 7.2s ease-in-out infinite;
}

@keyframes wrd-respirar {
  0%,
  100% { opacity: 0.42; }
  50% { opacity: 1; }
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: var(--luz-halo);
  text-decoration: none;
  transition: color var(--wrd-trans);
}

a:hover {
  color: var(--luz-nucleo);
}

/* Un solo estilo de foco para todo el sitio: ámbar, imposible de no
   ver. Con :focus-visible no molesta al que usa el mouse. */
:focus-visible {
  outline: 2px solid var(--wrd-ambar);
  outline-offset: 2px;
  border-radius: var(--radio-1);
}

::selection {
  background: var(--wrd-naranja);
  color: var(--wrd-sobre-naranja);
}

/* ============================================================
   CLOAK DE ARRANQUE  ·  .wrd-cargando
   El <head> de cada página pone esta clase en <html> ANTES de
   pintar. Mientras está, el contenido de la tienda no se muestra:
   así el visitante no ve un fogonazo del catálogo antes de que el
   JS decida si le toca la puerta (gate) o la página. Sólo #intro y
   #gate quedan visibles — son los que SÍ deben verse en el arranque.
   Lo quita el montador del gate, y hay un failsafe de 6 s en el
   <head> por si el JS no llega a cargar.
   ============================================================ */
.wrd-cargando .top,
.wrd-cargando #countdown,
.wrd-cargando main,
.wrd-cargando .pie {
  visibility: hidden;
}


/* ============================================================
   3 · TIPOGRAFÍA
   Los titulares son Archivo con el ancho al máximo (wdth 112): la
   marca es ancha, no estrecha. Si la fuente no carga, wdth no
   aplica y Arial entra ~6 % más ancha — por eso ningún título
   depende de caber en una línea.
   ============================================================ */

h1,
h2,
h3 {
  font-family: var(--wrd-font-display);
  line-height: var(--wrd-lh-titulo);
  color: var(--wrd-texto);
  text-wrap: balance;
}

h1 {
  font-size: var(--wrd-txt-3xl);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  line-height: var(--wrd-lh-apretada);
}

h2 {
  font-size: var(--wrd-txt-2xl);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--wrd-txt-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

strong,
b {
  font-weight: 700;
  color: var(--wrd-texto);
}

/* Toda cifra vive con espacio de tabla: así el precio no baila
   cuando cambia de $8.000 a $12.000. */
.cifra {
  font-family: var(--wrd-font-display);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1;
}


/* ============================================================
   4 · LAYOUT DE PÁGINA
   ============================================================ */

main {
  display: block;
  width: 100%;
  max-width: calc(var(--wrd-ancho) + var(--wrd-pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--wrd-pad-x);
  padding-bottom: var(--wrd-esp-8);
}

/* Para envoltorios extra que creen los otros builders. */
.contenedor {
  width: 100%;
  max-width: var(--wrd-ancho);
  margin-inline: auto;
}

main > section {
  scroll-margin-top: calc(var(--wrd-alto-top) + var(--wrd-esp-5));
}


/* ============================================================
   5 · BARRA SUPERIOR  ·  .top
   Aparece en las dos páginas con DOS órdenes distintos:
     index    → .top-brand  +  .premium-link   (marca a la izquierda)
     premium  → .volver-link + .top-brand      (marca al centro)
   La grilla de 3 columnas resuelve los dos casos sin tocar el HTML.
   Alto máximo: 52px. El chip de rango (43px) es lo que la dimensiona.
   ============================================================ */

.top {
  position: sticky;
  top: 0;
  z-index: var(--wrd-z-top);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--wrd-esp-2);
  min-height: var(--wrd-alto-top);
  padding-block: 3px;
  /* El fondo va de borde a borde, pero el contenido respeta el contenedor. */
  padding-inline: max(var(--wrd-pad-x), (100% - var(--wrd-ancho)) / 2);
  background: rgb(6 5 5 / 0.82);
  border-bottom: 1px solid var(--wrd-borde);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .top {
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}

/* Lo primero de la barra abre a la izquierda, lo último cierra a la derecha. */
.top > :first-child {
  grid-column: 1;
  justify-self: start;
}

.top > :last-child {
  grid-column: 3;
  justify-self: end;
}

/* --- La marca: el único texto del sitio con la luz adentro --- */
.top-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--wrd-esp-2);
  font-family: var(--wrd-font-display);
  font-size: var(--wrd-txt-md);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--wrd-texto);
  /* Blanco cálido → núcleo → halo. Si el motor no soporta
     background-clip: text, queda el color sólido de arriba. */
  background-image: linear-gradient(100deg, var(--wrd-texto) 8%, var(--luz-nucleo) 55%, var(--luz-halo) 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cuando la marca NO abre la barra (premium), se centra de verdad. */
.top-brand:not(:first-child) {
  grid-column: 2;
  justify-self: center;
}

/* Pastilla "Premium" pegada a la marca. Recupera color propio: el
   text-fill transparente del padre se hereda. */
.top-premium-tag {
  -webkit-text-fill-color: currentColor;
  color: var(--wrd-ambar);
  font-family: var(--wrd-font-display);
  font-size: var(--wrd-txt-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 6px 3px 8px;
  border: 1px solid rgb(255 179 71 / 0.35);
  border-radius: var(--radio-1);
  background: none;
}

/* --- Acceso a Premium (index) ---
   Sin relleno: es un filo encendido. Cuando el rango no alcanza,
   rango.css lo apaga con .bloqueado. */
.premium-link {
  font-family: var(--wrd-font-display);
  font-size: var(--wrd-txt-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--luz-nucleo);
  padding: 8px 12px;
  border: 1px solid var(--luz-halo);
  border-radius: var(--radio-1);
  background: none;
  transition: color var(--wrd-trans), background-color var(--wrd-trans),
    border-color var(--wrd-trans), box-shadow var(--wrd-trans);
}

.premium-link:hover {
  color: var(--wrd-texto);
  border-color: var(--luz-nucleo);
  box-shadow: var(--wrd-glow-naranja);
}

/* --- Volver (premium) --- */
.volver-link {
  display: inline-block;
  font-size: var(--wrd-txt-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--wrd-texto-suave);
  padding: 8px 2px;
  transition: color var(--wrd-trans);
}

.volver-link:hover {
  color: var(--luz-nucleo);
}


/* ============================================================
   6 · HERO  ·  .hero / .hero-logo / .tagline
   Base común. home.css y premium.css lo estiran a su gusto.
   A 390 el hero entero mide 420px o menos: el catálogo tiene que
   asomar sin scroll.
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wrd-esp-3);
  text-align: center;
  padding-block: 18px var(--wrd-esp-3);
}

/* Red de seguridad: aunque home.css no lo tocara, el logo nunca
   desborda ni se pasa de 260px. */
.hero-logo {
  width: 100%;
  max-width: min(100%, 260px);
  height: auto;
  margin-inline: auto;
}

/* Con pantalla de sobra el letrero puede crecer; en celular el tope
   de 260px es lo que deja al catálogo asomar sin scroll. */
@media (min-width: 56.25em) {
  .hero-logo {
    max-width: min(100%, 340px);
  }
}

.tagline {
  max-width: var(--wrd-ancho-texto);
  margin-inline: auto;
  font-size: var(--wrd-txt-md);
  color: var(--wrd-texto-suave);
  text-wrap: balance;
}


/* ============================================================
   7 · FORMULARIOS
   Los formularios del sitio usan label + campo como hermanos
   directos, sin envoltorios. El ritmo vertical lo dan los
   márgenes de la etiqueta.
   ============================================================ */

form {
  width: 100%;
  max-width: var(--wrd-ancho-texto);
  margin-inline: auto;
  text-align: left;
}

form label {
  display: block;
  margin-block: var(--wrd-esp-4) 6px;
  font-family: var(--wrd-font-display);
  font-size: var(--wrd-txt-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wrd-texto-suave);
}

form label:first-of-type {
  margin-block-start: 0;
}

/* "(opcional)" al lado de una etiqueta: presente pero sin gritar. */
.opcional {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--wrd-texto-tenue);
}

/* --- Campos ---
   Listados por tipo a propósito: así los checkbox y radio que
   aparezcan más adelante no heredan estilo de caja de texto.
   .campo es un alias por si un builder genera un campo desde JS.
   48px de alto y el canal del riel de fondo: son objetos hundidos
   en la vitrina, no cajas flotando. */
input[type='text'],
input[type='tel'],
input[type='url'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='password'],
textarea,
select,
.campo {
  display: block;
  width: 100%;
  min-height: 48px;
  /* 16px: menos que eso y iOS hace zoom al enfocar. */
  font-size: var(--wrd-campo);
  font-family: inherit;
  line-height: 1.4;
  color: var(--wrd-texto);
  padding: 12px 14px;
  background: var(--riel);
  border: var(--borde-obj);
  border-top-color: rgb(255 216 168 / 0.14);
  border-radius: var(--radio-2);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.45);
  transition: border-color var(--wrd-trans), background-color var(--wrd-trans),
    box-shadow var(--wrd-trans);
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--wrd-texto-tenue);
  opacity: 1;
}

input[type='text']:hover,
input[type='tel']:hover,
input[type='url']:hover,
input[type='password']:hover,
textarea:hover,
select:hover,
.campo:hover {
  border-color: var(--wrd-borde-fuerte);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.campo:focus-visible {
  outline: 2px solid var(--wrd-ambar);
  outline-offset: 2px;
  border-color: var(--wrd-naranja);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.45), var(--wrd-glow-naranja);
}

textarea {
  min-height: 88px;
  resize: vertical;
}

/* Flecha propia para los select. */
select {
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23FF7A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px auto;
  cursor: pointer;
}

/* El autocompletar de Chrome pinta los campos de blanco. Acá no. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--wrd-texto);
  caret-color: var(--wrd-texto);
  box-shadow: 0 0 0 100rem var(--riel) inset;
  transition: background-color 100000s ease 0s;
}

/* Campo marcado como inválido por JS (los formularios son novalidate). */
input[aria-invalid='true'],
textarea[aria-invalid='true'],
.campo[aria-invalid='true'] {
  border-color: var(--alerta);
  border-top-color: var(--alerta);
}


/* ============================================================
   8 · BOTONES
   Base común para .btn-domicilio y .btn-enviar.
   .btn / .btn-naranja / .btn-borde quedan disponibles para los
   botones que los builders generen desde JS.
   Ningún botón se mueve al pasar el mouse: le sube la luz. El
   translateY del diseño viejo murió con el rediseño.
   ============================================================ */

.btn,
.btn-domicilio,
.btn-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wrd-esp-2);
  font-family: var(--wrd-font-display);
  font-size: var(--wrd-txt-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radio-2);
  /* 48px: el mínimo para que un dedo no falle. */
  min-height: 48px;
  padding: 12px 20px;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--wrd-trans), background-color var(--wrd-trans),
    border-color var(--wrd-trans), color var(--wrd-trans), opacity var(--wrd-trans);
}

.btn:disabled,
.btn-enviar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Relleno naranja: acá SÍ el naranja es pintura, y es el 2 % del
       sitio que tiene permiso de serlo. Plano y saturado, con un filo
       ámbar arriba que dice de dónde viene la luz. --- */
.btn-naranja,
.btn-domicilio,
.btn-enviar {
  color: var(--wrd-sobre-naranja);
  background-color: var(--wrd-naranja);
  box-shadow: inset 0 1px 0 rgb(255 179 71 / 0.45);
}

.btn-naranja:hover,
.btn-domicilio:hover,
.btn-enviar:hover {
  color: var(--wrd-sobre-naranja);
  box-shadow: inset 0 1px 0 rgb(255 179 71 / 0.6), var(--wrd-glow-naranja-fuerte);
}

/* --- Contorno (acciones secundarias / herramientas) --- */
.btn-borde {
  color: var(--wrd-ambar);
  background: none;
  border-color: rgb(255 179 71 / 0.4);
}

.btn-borde:hover {
  color: var(--luz-nucleo);
  border-color: var(--wrd-ambar);
  box-shadow: var(--wrd-glow-ambar);
}

/* --- EL botón. El héroe de la página de inicio. ---
   Es lo único que le pedimos al visitante que haga; late despacio
   como la lámpara. Es el único radio de 999px del cuerpo del sitio. */
.btn-domicilio {
  width: min(100%, 320px);
  min-height: 56px;
  padding: 14px 28px;
  font-size: var(--wrd-txt-lg);
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: var(--wrd-radio-pill);
  animation: wrd-pulso 3.4s ease-in-out infinite;
}

@keyframes wrd-pulso {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgb(255 179 71 / 0.45), 0 0 0 0 rgb(255 106 0 / 0.4);
  }
  55% {
    box-shadow: inset 0 1px 0 rgb(255 179 71 / 0.6), 0 0 0 14px rgb(255 106 0 / 0);
  }
}

/* --- Botones de envío dentro de un formulario --- */
.btn-enviar {
  width: 100%;
  margin-block-start: var(--wrd-esp-5);
  font-size: var(--wrd-txt-md);
}


/* ============================================================
   9 · PIE  ·  .pie
   El final de la calle: ya no llega luz.
   ============================================================ */

.pie {
  margin-top: auto;
  padding: var(--wrd-esp-6) var(--wrd-pad-x) var(--wrd-esp-6);
  text-align: center;
  border-top: 1px solid var(--wrd-borde);
  background: var(--apagado);
}

.pie p {
  max-width: var(--wrd-ancho-texto);
  margin-inline: auto;
  font-size: var(--wrd-txt-sm);
  color: var(--wrd-texto-suave);
}

.pie strong {
  font-family: var(--wrd-font-display);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--wrd-texto);
}

.pie-sub {
  margin-top: 6px;
  font-size: var(--wrd-txt-xs);
  color: var(--wrd-texto-tenue);
}

/* El body es columna (ver el reset): main empuja y el pie queda abajo. */
body > main {
  flex: 1 0 auto;
}

body > .pie {
  flex-shrink: 0;
}


/* ============================================================
   10 · UTILIDADES
   Piezas compartidas para los CSS de página. Usalas antes de
   inventar una nueva.
   ============================================================ */

/* Visible para lectores de pantalla, invisible en pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Superficie base de tarjeta. El objeto que la lámpara alcanza: filo
   encendido arriba, un bisel de luz por dentro (inset superior) que
   hunde el fondo un pelín (inset inferior) para que --vitrina tenga
   volumen y no sea un plano liso, y sombra proyectada abajo. Cada
   página le pone su propio relleno y su propia grilla. */
.tarjeta {
  position: relative;
  background-color: var(--vitrina);
  border: var(--borde-obj);
  border-top-color: var(--filo-luz);
  border-radius: var(--radio-2);
  box-shadow:
    var(--sombra-proy),
    inset 0 1px 0 rgb(var(--wrd-luz-rgb) / 0.16),
    inset 0 -14px 22px -16px rgb(0 0 0 / 0.55);
  transition: border-color var(--ms-luz) var(--curva-luz),
    box-shadow var(--ms-luz) var(--curva-luz),
    background-color var(--ms-apagar) var(--curva-luz),
    transform var(--ms-luz) var(--curva-luz);
}

/* No se mueve: se enciende. El filo sube de brillo y un halo naranja
   se despierta alrededor, sin mover un píxel el objeto. */
.tarjeta:hover,
.tarjeta:focus-visible {
  border-top-color: rgb(var(--wrd-luz-rgb) / 0.95);
  box-shadow:
    var(--sombra-proy),
    inset 0 1px 0 rgb(var(--wrd-luz-rgb) / 0.3),
    inset 0 -14px 22px -16px rgb(0 0 0 / 0.55),
    0 0 26px -6px rgb(var(--wrd-naranja-rgb) / 0.45);
}

/* Al tacto SÍ responde (lo pidió el dueño: "interactivo") — un
   hundimiento breve, como un objeto real que cede bajo el dedo.
   Distinto del hover a propósito: el hover no mueve nada, el toque
   sí, porque es una presión física, no un simple pasar por encima. */
.tarjeta:active {
  transform: scale(0.985);
  box-shadow:
    var(--sombra-proy),
    inset 0 1px 0 rgb(var(--wrd-luz-rgb) / 0.34),
    inset 0 -10px 18px -14px rgb(0 0 0 / 0.6),
    0 0 16px -4px rgb(var(--wrd-naranja-rgb) / 0.55);
}

/* Etiquetita ("2x1", "nuevo", "se agota"): una ficha de vitrina con
   su propio tinte cálido, no una palabra flotando sin caja. */
.etiqueta {
  display: inline-block;
  font-family: var(--wrd-font-display);
  font-size: var(--wrd-txt-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--wrd-ambar);
  padding: 4px 6px;
  border: 1px solid rgb(var(--wrd-ambar-rgb) / 0.45);
  border-radius: var(--radio-1);
  background: var(--wrd-ambar-tinte);
}

.etiqueta-verde {
  color: var(--wrd-verde);
  border-color: rgb(var(--wrd-verde-rgb) / 0.45);
  background: var(--wrd-verde-tinte);
}

.texto-suave {
  color: var(--wrd-texto-suave);
}

.texto-tenue {
  color: var(--wrd-texto-tenue);
}

.centrado {
  text-align: center;
}

.medida {
  max-width: var(--wrd-ancho-texto);
  margin-inline: auto;
}


/* ============================================================
   11 · MOVIMIENTO REDUCIDO
   Si el sistema pide menos movimiento, se lo damos: nada de pulso,
   nada de desplazamientos, nada de parpadeos. El sitio sigue siendo
   el mismo, quieto — porque cada pieza tiene escrito su ESTADO
   CONGELADO como valor estático, y la animación sólo la lleva
   desde otro lado hasta ahí.

   Va último para ganarle a cualquier CSS de página. Cubre, además
   de lo de siempre: la respiración de la lámpara, el parpadeo del
   ':' del countdown, el flicker de la intro y el pulso del riel de
   stock.

   La ÚNICA que sobrevive es la salida del telón (.intro): es el
   reloj que saca la intro de la pantalla aunque el JS no cargue.
   Su nodo lo borra js/intro.js a los 2,2 s, así que en el home
   quieto no queda ninguna animación viva.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Apagar de verdad: con la duración en 0,01 ms la animación sigue
     existiendo (y sigue contando en document.getAnimations()). */
  *:not(.intro),
  *::before,
  *::after {
    animation-name: none !important;
  }

  .intro {
    animation-duration: 1.6s !important;
  }

  .btn-domicilio:hover,
  .btn-naranja:hover,
  .btn-enviar:hover,
  .btn-borde:hover,
  .premium-link:hover,
  .volver-link:hover,
  .tarjeta:hover,
  .tarjeta:active {
    transform: none;
  }
}