/* Coworky — base comun a la web y al panel: tokens, tipografia y componentes. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fuentes/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fuentes/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fuentes/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fuentes/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Papel, tinta y los colores de una calle comercial */
  --papel: #f3ede2;
  --papel-claro: #fbf8f2;
  --papel-hundido: #e9e1d2;
  --tinta: #1c1b18;
  --tinta-suave: #3a3731;
  --piedra: #6b6458;
  --regla: #d6ccba;
  --terracota: #b8452a;
  --terracota-hover: #9c3820;
  --verde: #1f5a43;
  --mostaza: #8a6109;
  --sobre-acento: #fbf8f2;

  --f-titular: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-datos: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --t-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --t-xxl: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem);

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --e-9: clamp(4rem, 2rem + 6vw, 8rem);

  --radio: 6px;
  --sombra: 0 1px 0 rgba(28, 27, 24, 0.06), 0 6px 18px -8px rgba(60, 40, 20, 0.28);
  --ancho: 72rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --rapido: 160ms;
  --medio: 480ms;
  --suave: cubic-bezier(0.22, 0.7, 0.2, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #171612;
    --papel-claro: #201e19;
    --papel-hundido: #26231d;
    --tinta: #f1eadb;
    --tinta-suave: #d9d0bf;
    --piedra: #a79e8f;
    --regla: #3a362e;
    --terracota: #e0704f;
    --terracota-hover: #ec8565;
    --verde: #5fb08a;
    --mostaza: #ddb04a;
    --sobre-acento: #171612;
    --sombra: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 22px -10px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #171612;
  --papel-claro: #201e19;
  --papel-hundido: #26231d;
  --tinta: #f1eadb;
  --tinta-suave: #d9d0bf;
  --piedra: #a79e8f;
  --regla: #3a362e;
  --terracota: #e0704f;
  --terracota-hover: #ec8565;
  --verde: #5fb08a;
  --mostaza: #ddb04a;
  --sobre-acento: #171612;
  --sombra: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 22px -10px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* El atributo hidden manda siempre, aunque un componente tenga display propio */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-m)/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--f-titular);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--terracota); }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--terracota); color: var(--sobre-acento); }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: absolute; left: var(--e-4); top: -3rem; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: var(--e-2) var(--e-4); border-radius: var(--radio);
}
.saltar:focus { top: var(--e-4); }

/* Antetitulo con aspecto de dato */
.marca-dato {
  font: 500 var(--t-xs)/1.3 var(--f-datos);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--piedra);
}

/* ---------- Botones ---------- */
.boton {
  --fondo: var(--tinta);
  --texto: var(--papel);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 2.9rem; padding: 0 var(--e-5);
  border: 1px solid var(--fondo); border-radius: var(--radio);
  background: var(--fondo); color: var(--texto);
  font: 600 var(--t-s)/1 var(--f-texto);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--rapido) var(--suave), transform var(--rapido) var(--suave), border-color var(--rapido);
}
.boton:hover { color: var(--texto); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton--acento { --fondo: var(--terracota); --texto: var(--sobre-acento); }
.boton--acento:hover { background: var(--terracota-hover); border-color: var(--terracota-hover); }
.boton--linea { --fondo: transparent; --texto: var(--tinta); border-color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); --texto: var(--papel); }
.boton--peque { min-height: 2.25rem; padding: 0 var(--e-4); font-size: var(--t-xs); }
.boton[disabled], .boton[aria-busy="true"] { opacity: 0.55; cursor: progress; transform: none; }

/* ---------- La etiqueta: el componente de Coworky ----------
   Una etiqueta de cartulina de tienda: esquinas superiores cortadas, ojal e hilo.
   Se usa en la portada (escaparates) y en el panel (puntuacion de cada negocio). */
.etiqueta {
  --tono: var(--piedra);
  position: relative;
  display: inline-grid;
  gap: 0.15rem;
  min-width: 9.5rem;
  padding: 1.35rem 0.85rem 0.7rem;
  background: var(--papel-claro);
  color: var(--tinta);
  font: 400 0.75rem/1.35 var(--f-datos);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
  filter: drop-shadow(0 1px 0 rgba(28, 27, 24, 0.12)) drop-shadow(0 8px 10px rgba(60, 40, 20, 0.18));
}
.etiqueta::before { /* ojal */
  content: ""; position: absolute; top: 0.45rem; left: 50%; width: 0.5rem; height: 0.5rem;
  margin-left: -0.25rem; border-radius: 50%;
  background: var(--papel); box-shadow: inset 0 0 0 1.5px var(--regla);
}
.etiqueta__nivel {
  font: 500 0.7rem/1 var(--f-datos); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tono);
}
.etiqueta__nombre { font: 650 0.95rem/1.15 var(--f-titular); letter-spacing: -0.01em; }
.etiqueta__puntos { font: 500 1.6rem/1 var(--f-titular); color: var(--tono); }
.etiqueta__linea { color: var(--tinta-suave); }
.etiqueta--alta { --tono: var(--terracota); }
.etiqueta--media { --tono: var(--mostaza); }
.etiqueta--baja { --tono: var(--piedra); }
.etiqueta--ok { --tono: var(--verde); }

/* Etiqueta pequena en linea (listas del panel) */
.chapa {
  --tono: var(--piedra);
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--tono) 45%, transparent);
  border-radius: 3px;
  color: var(--tono);
  font: 500 0.72rem/1.2 var(--f-datos); letter-spacing: 0.03em; white-space: nowrap;
}
.chapa--alta { --tono: var(--terracota); }
.chapa--media { --tono: var(--mostaza); }
.chapa--ok { --tono: var(--verde); }

/* Aparicion de secciones ligada al scroll, solo en CSS. Nunca se oculta contenido con
   JavaScript: si el navegador no soporta view(), los bloques simplemente se ven. */
@supports (animation-timeline: view()) {
  .revelar {
    animation: aparecer linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }
}
@keyframes aparecer { from { transform: translateY(18px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .revelar { animation: none !important; }
}