/* ══════════════════════════════════════════════════════════════════════════
   SITIOS RAPIDITOS — PLATAFORMA AUTOMATIZADA
   TOKENS DE DISEÑO Y RETÍCULA V3 (OKLCH)
   Coherencia absoluta con index.html (retícula tipográfica y lámina técnica)
   ══════════════════════════════════════════════════════════════════════════ */

@property --bg {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(97% 0.012 85);
}
@property --ink {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(18% 0.015 85);
}
@property --maiz {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(80% 0.152 82);
}
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: oklch(55% 0.22 255);
}

:root {
  /* Paleta OKLCH de alto croma y papel cálido */
  --bg: oklch(97% 0.012 85);
  --ink: oklch(18% 0.015 85);
  --ink-muted: oklch(42% 0.015 85);
  --ink-dim: oklch(62% 0.010 85);
  --maiz: oklch(80% 0.152 82);           /* ~#F5B81C superficie */
  --maiz-text: oklch(48% 0.11 70);       /* Texto legible sobre fondo claro */
  --accent: oklch(55% 0.22 255);         /* Azul eléctrico técnico */
  --accent-contrast: oklch(98% 0.005 85);
  --line: oklch(18% 0.015 85 / 0.14);    /* Filete reticular */
  --line-strong: oklch(18% 0.015 85 / 0.4);
  --status-green: oklch(65% 0.2 142);

  /* Colores oficiales de WhatsApp (no mezclar con marca) */
  --wa-green: #25d366;
  --wa-black: #111b21;
  --wa-white: #ffffff;

  /* Tipografía */
  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', monospace;

  /* Esquinas vivas y deliberadas */
  --radius-zero: 0px;
  --radius-sm: 2px;
  --radius-base: 4px;

  /* Estructura */
  --container-max: 1380px;
  --transition-instant: 0.2s cubic-bezier(0.2, 0.9, 0.1, 1);
  --shadow-hard: 0 3px 0 var(--ink);
}

/* Reseteo mecánico */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--ink);
  background-image: 
    linear-gradient(to right, oklch(18% 0.015 85 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(18% 0.015 85 / 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Tipografía mono para etiquetas técnicas */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.mono-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-strong);
  background-color: var(--bg);
  border-radius: var(--radius-sm);
}

.mono-chip.accent {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.mono-chip.maiz {
  background-color: var(--maiz);
  color: var(--ink);
  border-color: var(--ink);
}

/* Indicador de disponibilidad / estado */
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--status-green);
  display: inline-block;
  box-shadow: 0 0 0 2px var(--bg);
}

/* Retícula de 12 columnas rigurosa */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
}

/* Botones con inversión mecánica en hover */
.btn-workshop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.4rem;
  min-height: 48px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-instant), color var(--transition-instant), transform 0.05s ease;
  user-select: none;
}

.btn-workshop:active {
  transform: translateY(1px);
}

.btn-workshop.primary {
  background-color: var(--maiz);
  color: var(--ink);
}

.btn-workshop.primary:hover {
  background-color: var(--ink);
  color: var(--bg);
}

.btn-workshop.secondary {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--ink);
}

.btn-workshop.secondary:hover {
  background-color: var(--ink);
  color: var(--bg);
}

.btn-workshop.outline {
  background-color: transparent;
  color: var(--ink);
}

.btn-workshop.outline:hover {
  background-color: var(--ink);
  color: var(--bg);
}

.btn-workshop.whatsapp {
  background-color: var(--wa-green);
  color: var(--wa-black);
  border-color: var(--ink);
}

.btn-workshop.whatsapp:hover {
  background-color: var(--ink);
  color: var(--bg);
}

.btn-workshop.whatsapp:hover svg path {
  fill: var(--bg);
}

/* Líneas y divisores */
.border-b-line { border-bottom: 1px solid var(--line); }
.border-t-line { border-top: 1px solid var(--line); }
.border-r-line { border-right: 1px solid var(--line); }
.border-l-line { border-left: 1px solid var(--line); }