/* EL CARTEL DEL PIE: el frente del local de noche.
   Cartel negro con tiras LED amarillas (como el de la fachada), letras de acrílico que se prenden,
   el alero blanco con sus dos focos y el reflejo del cartel en la vereda.
   Sin JS o con "reducir movimiento" se ve prendido y quieto: el estado por defecto es el final. */

.letrero {
  --fs: 17.4vw;                          /* tamaño de "Alejandro": js/pie.js lo ajusta al ancho exacto */
  --panel: #0E0E0C;
  --led-apagado: #23221E;
  --led: #FFE27E;
  --luz: #FFFCF2;
  --apagada: #34332D;
  --alero: #2B2B27;
  --alero-borde: #3C3B36;
  --vereda: #181816;
  --junta: rgba(243, 243, 239, .05);
  --reflejo: .5;
  --alto-alero: clamp(10px, 1.3vw, 18px);
  position: relative;
  margin-top: clamp(24px, 3vw, 40px);
}
:root[data-tema="claro"] .letrero {
  --alero: #F3F3EF;
  --alero-borde: #D6D6D0;
  --vereda: #DCDCD6;
  --junta: rgba(21, 21, 19, .07);
  --reflejo: .5;
}

/* ---------- el cartel ---------- */
.letrero-panel {
  position: relative; overflow: hidden;
  display: grid; justify-items: center;
  padding: calc(var(--fs) * .1) var(--gut) calc(var(--fs) * .12);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .6);
  color: var(--luz);
  font-family: "Archivo", sans-serif;
  user-select: none;
}

/* tiras LED horizontales, de borde a borde, detrás de las letras */
.letrero-leds {
  position: absolute; inset: 7% 0 6%;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.letrero-leds i { position: relative; display: block; height: 2px; background: var(--led-apagado); }
.letrero-leds b {
  position: absolute; inset: 0;
  background: var(--led);
  box-shadow: 0 0 3px rgba(255, 226, 126, .9), 0 0 10px 1px rgba(230, 182, 46, .55);
}

.letrero-rubro, .letrero-nombre, .letrero-coiffeur { position: relative; white-space: nowrap; }

.letrero-rubro {
  font-weight: 800; font-stretch: 112%; text-transform: uppercase;
  font-size: max(11px, calc(var(--fs) * .15)); letter-spacing: .14em; margin-right: -.14em;
  line-height: 1;
}
.letrero-nombre {
  justify-self: stretch; text-align: center;
  font-style: italic; font-weight: 800; font-stretch: 108%;
  font-size: var(--fs); line-height: 1.04; letter-spacing: -.012em;
  margin-top: calc(var(--fs) * .03);
  padding-bottom: calc(var(--fs) * .04);      /* la j no se corta */
}
.letrero-coiffeur {
  justify-self: end;
  font-weight: 800; font-stretch: 125%; text-transform: uppercase;
  font-size: max(12px, calc(var(--fs) * .13)); letter-spacing: .42em; margin-right: -.42em;
  line-height: 1; color: var(--amarillo);
  margin-top: calc(var(--fs) * -.06);
}

/* sin partir (sin JS): prendido */
.letrero-panel p { text-shadow: 0 0 .03em #fff, 0 0 .14em rgba(255, 214, 110, .55); }
.letrero-coiffeur { text-shadow: 0 0 .1em rgba(230, 182, 46, .8); }

/* partido en letras: base apagada + luz (con su halo), las dos del mismo glifo */
.letrero-panel .lt { position: relative; display: inline-block; }
.letrero-panel .lt > span { display: block; }
.letrero-panel .lt-base { color: var(--apagada); text-shadow: 0 -.01em 0 rgba(255, 255, 255, .07); }
.letrero-panel .lt-luz { position: absolute; inset: 0; }
.letrero-panel .lt-luz { color: var(--luz); text-shadow: 0 0 .015em #fff, 0 0 .07em rgba(255, 226, 150, .6), 0 0 .2em rgba(230, 182, 46, .4); }
.letrero-coiffeur .lt-base { color: #3A3420; }
.letrero-coiffeur .lt-luz { color: var(--amarillo); text-shadow: 0 0 .1em rgba(230, 182, 46, .85), 0 0 .35em rgba(230, 182, 46, .5); }
.letrero-panel .partido { text-shadow: none; }

/* cada luz en su capa (solo opacidad), preparada antes de que el cartel entre en pantalla */
.letrero--vivo :is(.lt-luz, .letrero-leds b, .foco, .cono, .letrero-derrame) { will-change: opacity; }

/* ---------- el alero blanco con sus dos focos ---------- */
.letrero-alero {
  position: relative; height: var(--alto-alero);
  background: linear-gradient(var(--alero), color-mix(in srgb, var(--alero) 88%, #000));
  box-shadow: inset 0 -1px 0 var(--alero-borde);
  z-index: 2;
}
.foco {
  position: absolute; top: 55%; left: 22%;
  width: clamp(16px, 2vw, 28px); height: clamp(4px, .45vw, 6px); margin-left: calc(clamp(16px, 2vw, 28px) / -2);
  border-radius: 50%;
  background: #FFFBEA;
  box-shadow: 0 0 6px 2px rgba(255, 246, 214, .9), 0 0 18px 4px rgba(255, 236, 180, .35);
}
.foco + .foco { left: 78%; }

/* ---------- la vereda: el reflejo del cartel y la luz de los focos ---------- */
.letrero-vereda {
  position: relative; overflow: hidden;
  height: calc(var(--fs) * .62);
  background:
    linear-gradient(90deg, transparent calc(33.3% - 1px), var(--junta) 0 calc(33.3% + 1px), transparent 0 calc(66.6% - 1px), var(--junta) 0 calc(66.6% + 1px), transparent 0),
    var(--vereda);
}
/* el reflejo: el cartel copiado, dado vuelta y aplastado como en un piso lustrado.
   Sin máscara: una capa del color de la vereda lo va tapando hacia abajo (más barato de pintar). */
.letrero-reflejo { position: absolute; inset: 0 0 auto; opacity: var(--reflejo); pointer-events: none; }
.letrero-reflejo .letrero-panel { transform-origin: 0 0; transform: scaleY(-.62) translateY(-100%); box-shadow: none; }
.letrero-reflejo .lt-luz { text-shadow: none; }
.letrero-reflejo .letrero-leds b { box-shadow: none; }
.letrero-vereda::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--vereda) 70%, transparent) 40%, var(--vereda) 85%);
}
.letrero-derrame, .cono { z-index: 2; }

.letrero-derrame {
  position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 50% 0%, rgba(230, 182, 46, .16), transparent 70%);
}
.cono {
  position: absolute; top: 0; left: 22%; width: clamp(120px, 22vw, 340px); height: 100%;
  transform: translateX(-50%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(255, 244, 210, .32), rgba(255, 244, 210, .06) 70%, transparent);
  pointer-events: none;
}
.cono + .cono { left: 78%; }
:root[data-tema="claro"] .cono { background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .12) 70%, transparent); }

/* la barra de turno se esconde al llegar al pie: la vereda es el final de la página */
@media (max-width: 767px) {
  .pie { padding-bottom: 0; }
  /* más angosta para que, a todo el ancho, la palabra gane alto */
  .letrero-nombre { font-stretch: 80%; }
  .letrero-panel { padding: 18px 14px 16px; }
  .letrero-leds { inset: 5% 0; }
  .letrero-coiffeur { margin-top: 2px; }
  .letrero-vereda { height: calc(var(--fs) * .9 + env(safe-area-inset-bottom)); }
}

/* con "reducir movimiento", base.css deja una transición de .01 ms en todo (transition-property: all):
   el tamaño de la letra se mediría a mitad de esa transición. Acá no hay nada que transicionar. */
@media (prefers-reduced-motion: reduce) {
  .letrero, .letrero * { transition-property: none !important; }
}

/* en la B: el cartel cierra el pie, sin el aire de abajo (la barra del celular se esconde al llegar al final) */
.pie { padding-bottom: 0; }
.pie .letrero { margin-top: clamp(32px, 4vw, 56px); }
/* lo que falta cargar solo se ve si se prende en Panel, Ajustes */
:root:not(.ver-faltantes) :is(.pendiente, .pendiente-linea, .obra:has(> .pendiente), .faltan:not(:has(> :not(.pendiente)))) { display: none !important; }

/* precios "desde" (el final depende del largo) */
.fila-desde { display: block; font-family: var(--f-tx); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); line-height: 1.1; }

/* ---------- ajustes 23/10: COIFFEUR con más contraste y vereda sin reflejo de letras ---------- */
/* COIFFEUR va en su propia placa oscura: las tiras LED no le pasan por encima y se lee en celular */
.letrero-coiffeur {
  position: relative; z-index: 1;
  font-weight: 900; font-size: max(15px, calc(var(--fs) * .15));
  padding: .32em .2em .32em .62em; margin-right: -.2em;
  background: var(--panel);
  box-shadow: 0 0 0 1px rgba(230, 182, 46, .22);
}
.letrero-coiffeur .lt-base { color: #4A4128; }
.letrero-coiffeur .lt-luz { color: #F5C842; text-shadow: 0 0 .06em rgba(255, 220, 120, .9), 0 0 .3em rgba(230, 182, 46, .55); }
/* el piso: solo la luz del cartel y de los focos (el reflejo de las letras se veía raro) */
.letrero-reflejo { display: none; }
.letrero-vereda { height: calc(var(--fs) * .34); }
.letrero-derrame { background: radial-gradient(70% 120% at 50% 0%, rgba(230, 182, 46, .24), transparent 72%); }
@media (max-width: 767px) {
  .letrero-coiffeur { font-size: 16px; letter-spacing: .3em; margin-top: 8px; }
  .letrero-vereda { height: calc(var(--fs) * .5 + env(safe-area-inset-bottom)); }
}