/* ==========================================================
 * THEME.CSS — Villa & Asociados · Sistema de diseño compartido
 * Una sola fuente de verdad para las 10 páginas del sitio.
 * Se linkea DESPUÉS del <style> local de cada página para que
 * estos tokens ganen la cascada.
 * ========================================================== */

:root {
  /* --- Paleta base (idéntica a la histórica del sitio) --- */
  --bg: #F5F1EA;            /* crema de fondo */
  --surface: #FFFFFF;       /* superficies claras */
  --ink: #141414;           /* tinta / carbón base */
  --inkSoft: #44403C;       /* texto secundario sobre claro */
  --line: #E7DFD3;          /* filetes sobre claro */
  --hero: #141414;          /* fondo oscuro de secciones */
  --heroInk: #F5F1EA;       /* texto sobre oscuro */
  --inputBg: #FAF6EE;

  /* --- Correcciones de contraste --- */
  --muted: #6B645D;         /* antes #78716C (4.26:1, fallaba AA) → 5.17:1 sobre crema */

  /* --- Los 3 dorados canónicos (reemplazan 16 valores + 52 filters) --- */
  --accent: #8B6F3E;        /* dorado profundo: texto/acentos sobre fondos CLAROS */
  --accent-bright: #C9A055; /* dorado claro: texto/acentos sobre fondos OSCUROS */
  --accent-deep: #6F5528;   /* hover de botones dorados */

  /* --- Texto sobre carbón con piso de legibilidad garantizado --- */
  --heroInk-soft: rgba(245, 241, 234, .8);  /* cuerpo secundario ~9:1 */
  --heroInk-dim: rgba(245, 241, 234, .62);  /* metadatos ~6.3:1 (piso) */

  /* --- Semánticos cálidos (reemplazan verdes/ámbar Tailwind) --- */
  --danger: #8B2B2B;
  --danger-bright: #E08A8A;
  --ok-bg: rgba(201, 160, 85, .12);
  --ok-border: rgba(201, 160, 85, .4);
  --ok-ink: #E6C789;        /* éxito sobre oscuro, en la propia paleta */
  --wa-green: #128C4A;      /* verde WhatsApp accesible (blanco encima: 4.6:1) */

  /* --- Motion --- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Foco visible (le gana al outline:none de cada página) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-bright) !important;
  outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Scrollbar fina en paleta ---------- */
* { scrollbar-width: thin; scrollbar-color: #B7AA95 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #B7AA95; border-radius: 9px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Selección de texto ---------- */
::selection { background: rgba(201, 160, 85, .32); color: var(--ink); }

/* ---------- Botones canónicos ---------- */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--heroInk);
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 26px; border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.btn-gold:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(111, 85, 40, .28); }
.btn-gold:active { transform: translateY(0); box-shadow: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 25px; border: 1px solid var(--accent); border-radius: 0; cursor: pointer; text-decoration: none;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.btn-ghost:hover { border-color: var(--accent-bright); background: rgba(201, 160, 85, .08); }

/* ---------- Link editorial: subrayado dorado que crece ---------- */
.link-grow { position: relative; text-decoration: none; }
.link-grow::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: var(--accent-bright); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease);
}
.link-grow:hover::after, .link-grow:focus-visible::after { transform: scaleX(1); }

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

/* ---------- Textos justificados (pedido del estudio) ----------
   En columnas anchas el justificado queda prolijo; en columnas angostas
   (celular, tarjetas chicas) abre huecos entre palabras -> alineado natural. */
p { text-align: justify; hyphens: auto; }
.footer-cta p, .res-ctas p, nav p { text-align: center; hyphens: none; }
@media (max-width: 640px) {
  p { text-align: left; }
  .footer-cta p { text-align: center; }
}