/* ===================================================================
   WebToken Micro-CMS · Estilos públicos base con modo claro / oscuro
   Las variables --brand-1/2/3 y --accent se inyectan desde los ajustes;
   cada tema (themes/<slug>/theme.css) ajusta paleta, formas y decoración.
   =================================================================== */

:root {
  --brand-1: #2563EB;
  --brand-2: #4F46E5;
  --brand-3: #4F46E5;
  --accent: #2563EB;

  --bg: #FFFFFF;
  --bg-alt: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.18);
  --text: #0F172A;
  --text-2: #475569;
  --muted: #64748B;
  --shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --hero-grad-text: linear-gradient(135deg, var(--brand-1), var(--brand-3));

  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Formas: los temas las ajustan (theme.json "radius" define --radius) */
  --radius: 20px;
  --radius-btn: 14px;
  --radius-sm: 12px;
}

[data-theme="dark"] {
  --bg: #090814;
  --bg-alt: #0D0C1D;
  --surface: rgba(24, 22, 49, 0.75);
  --surface-2: #1B1938;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #F8FAFC;
  --text-2: #CBD5E1;
  --muted: #94A3B8;
  --shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5);
  --hero-grad-text: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 40%, #FF6596 100%);
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body.wt-body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.wt-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.wt-mono { font-family: var(--font-mono); }
.wt-text { color: var(--text); }
.wt-text-2 { color: var(--text-2); }
.wt-muted { color: var(--muted); }
.wt-brand { color: var(--brand-1); }
.wt-accent { color: var(--accent); }
.wt-bg-alt { background: var(--bg-alt); }
.wt-border { border-color: var(--border); }

.wt-grad-bg { background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 50%, var(--brand-3) 100%); }
.wt-grad-text {
  background: var(--hero-grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wt-grad-brand-text {
  background: linear-gradient(135deg, var(--brand-1), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Superficies */
.wt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  transition: transform .25s ease, border-color .25s ease;
}
.wt-card:hover { border-color: var(--border-strong); }
.wt-card-lift:hover { transform: translateY(-3px); }
.wt-card-highlight { border-color: color-mix(in srgb, var(--brand-1) 45%, transparent); }
.wt-surface-2 { background: var(--surface-2); border: 1px solid var(--border); }

/* Encabezados de sección */
.wt-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.wt-tag-brand {
  color: var(--brand-1);
  background: color-mix(in srgb, var(--brand-1) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-1) 30%, transparent);
}

/* Botones */
.wt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; border-radius: var(--radius-btn); padding: .85rem 1.4rem;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.wt-btn:hover { transform: translateY(-1px); }
.wt-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 60%, var(--brand-3) 100%);
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--brand-1) 55%, transparent);
}
.wt-btn-secondary {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
}
.wt-btn-sm { padding: .55rem 1rem; font-size: .85rem; border-radius: var(--radius-sm); }

/* Chips / etiquetas */
.wt-chip {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 8px;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
}
.wt-badge {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
  color: var(--brand-1);
  background: color-mix(in srgb, var(--brand-1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-1) 40%, transparent);
}
.wt-icon-box {
  width: 3rem; height: 3rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: color-mix(in srgb, var(--brand-1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-1) 30%, transparent);
  color: var(--brand-1); font-weight: 800;
}
.wt-icon-box.alt {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
.wt-check { color: #10B981; font-weight: 800; }
.wt-solution {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0 12px 12px 0;
}

/* Barra de anuncio y header */
.wt-topbar { background: linear-gradient(90deg, var(--brand-1), var(--brand-3)); color: #fff; }
.wt-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  transition: box-shadow .2s ease;
}
.wt-header.scrolled { box-shadow: var(--shadow); }
.wt-nav-link { color: var(--text-2); font-weight: 600; font-size: .9rem; }
.wt-nav-link:hover { color: var(--text); }

/* Drawer móvil */
.wt-drawer { background: var(--bg-alt); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .3s ease; }
.wt-drawer.open { transform: translateX(0); }
.wt-overlay { background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.wt-overlay.open { opacity: 1; pointer-events: auto; }

/* Hero */
.wt-status-dot {
  width: .55rem; height: .55rem; border-radius: 999px; background: #10B981;
  box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: wt-pulse 2s infinite;
}
@keyframes wt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.wt-terminal { background: #0B0A18; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; color: #E2E8F0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.wt-terminal-head { border-bottom: 1px solid rgba(255,255,255,.08); }
.wt-term-prompt { color: #FF6596; }
.wt-term-cmd { color: #93C5FD; }
.wt-term-box { background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.25); border-radius: 12px; }
.wt-term-badge { color: #10B981; font-weight: 800; font-size: .72rem; letter-spacing: .06em; }

/* Casos (tabs) */
.wt-tab {
  padding: .7rem 1.1rem; border-radius: 12px; font-weight: 700; font-size: .88rem;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
}
.wt-tab.active { color: #fff; background: linear-gradient(135deg, var(--brand-1), var(--brand-3)); border-color: transparent; }
.wt-case-panel { display: none; }
.wt-case-panel.active { display: block; animation: wt-fade .35s ease; }
@keyframes wt-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wt-metric-val { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; }

/* FAQ */
.wt-faq-body { display: none; }
.wt-faq-item.open .wt-faq-body { display: block; }
.wt-faq-icon { transition: transform .25s ease; }
.wt-faq-item.open .wt-faq-icon { transform: rotate(45deg); }

/* Diagnóstico */
.wt-calc-option { cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); border-radius: 14px; transition: border-color .2s ease, background .2s ease; }
.wt-calc-option.selected {
  border-color: color-mix(in srgb, var(--brand-1) 55%, transparent);
  background: color-mix(in srgb, var(--brand-1) 9%, var(--surface-2));
}
.wt-calc-option input { accent-color: var(--brand-1); }

/* Formularios */
.wt-input {
  width: 100%; border-radius: 12px; padding: .8rem 1rem; font-size: .92rem;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
}
.wt-input::placeholder { color: var(--muted); }
.wt-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.wt-label { display: block; font-size: .78rem; font-weight: 700; color: var(--text-2); margin-bottom: .35rem; }

/* Footer */
.wt-footer { background: var(--bg-alt); border-top: 1px solid var(--border); }
.wt-footer a:hover { color: var(--text); }

/* WhatsApp flotante */
.wt-wa-float { background: #25D366; color: #fff; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); }
.wt-wa-float:hover { transform: scale(1.08); }
.wt-wa-tooltip { opacity: 0; transform: translateX(8px); transition: all .2s ease; pointer-events: none; }
.wt-wa-float:hover .wt-wa-tooltip { opacity: 1; transform: none; }

/* ===================================================================
   Bloques de comercio local
   =================================================================== */
.wt-divide > * + * { border-top: 1px solid var(--border); }

/* Lista de precios: pestañas en móvil, todas las categorías en escritorio */
.wt-pl-dots { border-bottom: 1px dotted var(--border-strong); transform: translateY(-.3rem); min-width: 1rem; }
@media (max-width: 767px) {
  .wt-pl-tabs ~ .grid .wt-pl-panel { display: none; }
  .wt-pl-tabs ~ .grid .wt-pl-panel.active { display: block; animation: wt-fade .3s ease; }
}

/* Comparador antes / después */
.wt-ba { overflow: hidden; touch-action: pan-y; }
.wt-ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.wt-ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none;
}
.wt-ba-handle::after {
  content: '⇆'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: #111; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.wt-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.wt-ba-range:focus-visible ~ .wt-ba-handle, .wt-ba:focus-within .wt-ba-handle::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.wt-ba-label {
  position: absolute; bottom: .75rem; z-index: 1; pointer-events: none;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff;
}

/* Lightbox */
.wt-lightbox {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
  background: rgba(0,0,0,.88); padding: 1.5rem;
}
.wt-lightbox[hidden] { display: none; }
.wt-lightbox img { max-width: 100%; max-height: 80vh; border-radius: var(--radius-sm); object-fit: contain; }
.wt-lightbox p { color: #fff; font-size: .9rem; text-align: center; }
.wt-lightbox button {
  position: absolute; color: #fff; background: rgba(255,255,255,.12); border-radius: 999px;
  width: 2.75rem; height: 2.75rem; font-size: 1.4rem; font-weight: 700;
}
.wt-lightbox button:hover, .wt-lightbox button:focus-visible { background: rgba(255,255,255,.25); }

/* Horarios */
.wt-hours-status { display: flex; align-items: center; gap: .5rem; }
.wt-hours-status.hidden { display: none; }
.wt-hours-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--muted); }
.wt-hours-status.is-open .wt-hours-dot { background: #10B981; box-shadow: 0 0 0 4px rgba(16,185,129,.2); }
.wt-hours-status.is-open .wt-hours-text { color: #059669; }
[data-theme="dark"] .wt-hours-status.is-open .wt-hours-text { color: #34D399; }
[data-day].is-today dt, [data-day].is-today dd { color: var(--brand-ink, var(--brand-1)); font-weight: 700; }

/* Reseñas */
.wt-stars { color: #F59E0B; letter-spacing: .1em; font-size: 1.05rem; }
.wt-stars-off { color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}