/* ============================================================================
   MyRentalHost · base.css
   FUENTE ÚNICA de tokens + sistema de botones + iconos lineales.
   Cargar en <head> ANTES de los <style> inline de cada página.
   Reemplaza las :root duplicadas de head / servicios / servicios-huespedes.
   ----------------------------------------------------------------------------
   Cambiar el botón primario de TODO el sitio = una sola línea (--btn-primary-bg).
   ========================================================================== */
:root{
  /* ── Tinta / fondo ── */
  --ink:#1A1E2C;  --ink-2:#252938;  --ink-3:#363B4C;  --ink-4:#565C70;
  --bg:#F4F1EC;   --bg-2:#EDE9E2;   --bg-3:#E3DED5;
  /* ── Azul de marca (star) ── */
  --star:#5B9CC8; --star-l:#7DB4D8; --star-d:#4A84B0; --star-dim:rgba(91,156,200,.08);
  /* ── Texto secundario / semánticos ── */
  --muted:#5D6373;            /* AA sobre crema — única fuente de verdad */
  --muted-2:#8A8F9D;
  --green:#2D8A5A; --green-dim:rgba(45,138,90,.08);
  --warn:#C47B18;  --warn-dim:rgba(196,123,24,.08);
  /* ── Bordes / foco ── */
  --border:rgba(26,30,44,.10);  --border-strong:rgba(26,30,44,.16);
  --ring:0 0 0 3px rgba(91,156,200,.35);
  /* ── Tipografía ── */
  --serif:'Fraunces',Georgia,serif;  --sans:'Epilogue',system-ui,sans-serif;
  /* ── Layout ── */
  --max:1080px;  --pad:clamp(20px,4vw,48px);
  /* ── Radios / sombras / motion ── */
  --r-sm:8px; --r-md:12px; --r-lg:18px;
  --sh-1:0 2px 8px rgba(26,30,44,.06);
  --sh-2:0 6px 22px rgba(26,30,44,.12);
  --ease:cubic-bezier(.4,0,.2,1); --tx:.22s var(--ease); --tx-fast:.15s var(--ease);
  /* ── ALIASES retro-compat (nomenclatura de páginas viejas; no romper su CSS) ── */
  --ink2:var(--ink-2); --ink3:var(--ink-3); --ink4:var(--ink-4);
  --bg2:var(--bg-2);   --bg3:var(--bg-3);
  --star2:#4A8DB8;     --warm:var(--warn); --warm-dim:var(--warn-dim);
  --rad:var(--r-sm); --rad-sm:var(--r-sm); --rad-md:var(--r-md); --rad-lg:var(--r-lg);
  /* ── Botón primario del sitio (cambiá ESTA línea y cambia todo) ── */
  /* OPCIÓN A · navy editorial:
  --btn-primary-bg:var(--ink); --btn-primary-bg-h:var(--ink-3); */
  --btn-primary-bg:var(--star-d);     /* OPCIÓN B · azul refinado (ACTIVA) */
  --btn-primary-bg-h:var(--star);
}
/* ===== BOTONES ===== */
.btn{
  --_py:14px; --_px:28px; --_fs:.92rem;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:var(--_fs); line-height:1;
  letter-spacing:.005em; text-decoration:none; white-space:nowrap; cursor:pointer;
  padding:var(--_py) var(--_px); border-radius:var(--r-sm);
  border:1.5px solid transparent; background:none; color:var(--ink);
  transition:background var(--tx),color var(--tx),border-color var(--tx),transform var(--tx-fast),box-shadow var(--tx);
  -webkit-tap-highlight-color:transparent;
}
.btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.btn__chev{ width:1.05em; height:1.05em; flex:none; transition:transform var(--tx); }
.btn:hover .btn__chev{ transform:translateX(3px); }
.btn--primary{ background:var(--btn-primary-bg); color:#fff; box-shadow:var(--sh-1); }
.btn--primary:hover{ background:var(--btn-primary-bg-h); transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn--secondary{ background:transparent; color:var(--ink); border-color:var(--border-strong); }
.btn--secondary:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-1px); }
.btn--accent{ background:var(--warn); color:#fff; box-shadow:var(--sh-1); }
.btn--accent:hover{ background:#A9670F; transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn--ghost{
  padding:6px 0; border:0; border-radius:0; color:var(--star-d);
  background:linear-gradient(currentColor,currentColor) left bottom / 0% 1.5px no-repeat;
  transition:background-size var(--tx),color var(--tx);
}
.btn--ghost:hover{ color:var(--ink); background-size:100% 1.5px; transform:none; box-shadow:none; }
.btn--sm{ --_py:9px;  --_px:18px; --_fs:.78rem; }
.btn--lg{ --_py:17px; --_px:34px; --_fs:1rem; }
.btn--block{ width:100%; }
/* ===== ICONOS (lineales) ===== */
.ico{
  width:1.25em; height:1.25em; display:inline-block; vertical-align:-.18em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.ico--lg{ width:1.6em; height:1.6em; }
.ico--star-fill{ fill:currentColor; stroke:none; }
