/* =========================================================
 * UG – Base: colores, tipografía y botones del rediseño 2026.
 * Todo lo nuevo usa el prefijo "ug-" para no chocar con las páginas
 * antiguas mientras se van reemplazando.
 * ========================================================= */
:root {
  --navy: #071B3F;
  --navy-deep: #04122C;
  --ink: #0B1530;
  --muted: #4A5873;
  --on-dark: #E6EDFA;
  --on-dark-muted: #A9B8D6;
  --blue: #0057E7;
  --blue-hover: #0047C2;
  --blue-bright: #5B9BFF;
  --blue-tint: #EAF1FF;
  --red: #FF4D5A;
  --surface: #F4F8FD;
  --line: #DCE5F2;
  --white: #FFFFFF;
  --font-sans: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ug-header-h: 68px;
  --ug-radius: 14px;
}

/* El tema (Twenty Twenty-Five) dibuja todo con estas dos variables:
 * al cambiarlas aquí, sus bloques nativos (tienda, carrito, formularios)
 * también pasan a Geist sin tocar el panel de Estilos. */
body {
  --wp--preset--font-family--manrope: var(--font-sans);
  --wp--preset--font-family--fira-code: var(--font-mono);
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(0, 87, 231, .18); }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }

.ug-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; box-sizing: border-box; }
@media (max-width: 480px) { .ug-wrap { padding-inline: 16px; } }

.ug-kicker { font: 500 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

/* ---------- Botones: principal siempre azul, secundario siempre con contorno ---------- */
.ug-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 8px; font: 600 15px/1 var(--font-sans); text-decoration: none !important; white-space: nowrap; border: 1px solid transparent; cursor: pointer; box-sizing: border-box; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.ug-btn:hover { transform: translateY(-1px); }
.ug-btn-primary { background: var(--blue); color: var(--white) !important; }
.ug-btn-primary:hover { background: var(--blue-hover); }
.ug-btn-outline { border-color: var(--line); color: var(--ink) !important; background: var(--white); }
.ug-btn-outline:hover { border-color: #B9CDF0; color: var(--blue) !important; }
.ug-btn-outline-dark { border-color: rgba(255, 255, 255, .28); color: var(--white) !important; background: transparent; }
.ug-btn-outline-dark:hover { border-color: rgba(255, 255, 255, .6); }

@media (prefers-reduced-motion: reduce) {
  .ug-btn { transition: none; }
  .ug-btn:hover { transform: none; }
}