/* =============================================================================
 * Bahía Home — capa de marca sobre los tokens del tasador.
 * Se carga DESPUÉS de tokens.css y styles.css: solo redefine variables y los
 * pocos elementos con identidad propia (logo, pie). No duplica layout.
 *
 * Paleta de marca (tomada de la web de Bahía Home):
 *   turquesa vivo   #009AA0   → gráficos, bordes, realces (3,4:1 sobre blanco:
 *                               válido para UI/gráficos, NO para texto)
 *   turquesa oscuro #00767B   → botones y texto sobre color (5,4:1 con blanco)
 *   turquesa claro  #4FD3D8   → fondos suaves y series secundarias
 *   negro           #0B0B0B   → tinta
 * ========================================================================== */

/* ---------- Poppins (subset latin, self-hosted) ---------- */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/img/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/img/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/img/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/img/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens de marca ---------- */
:root {
  --ink:           #0B0B0B;
  --ink-2:         #2B2B2B;
  --muted:         #6B6B6B;
  --faint:         #9A9A9A;

  --bg-2:          #FAFAF8;
  --surface-2:     #F6F5F2;   /* crema de marca */
  --surface-3:     #EAE8E2;
  --line:          #D8D5D0;
  --line-2:        #EAE8E2;

  /* acento = turquesa oscuro: es el que lleva texto blanco encima */
  --accent:        #00767B;
  --accent-2:      #009AA0;
  --accent-press:  #005A5E;
  --accent-weak:   #E4F2F2;
  --accent-soft:   #F1F9F9;
  --accent-ink:    #FFFFFF;

  --primary:       #00767B;
  --primary-ink:   #FFFFFF;
  --primary-press: #005A5E;

  --focus:         #00767B;

  /* gráficos: turquesa de marca + neutros, sin competir con el dato principal */
  --chart-1:       #009AA0;
  --chart-2:       #B9DEDF;
  --chart-3:       #EAE8E2;
  --chart-grid:    #E6E4DE;
  --chart-fill:    #E9F6F6;
  --spark-fill:    rgba(0, 154, 160, .12);

  --font:          "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display:  "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Logo de Bahía Home en la barra ---------- */
.hm-logo {
  gap: 0;
  font-size: 0;            /* oculta el texto de respaldo sin quitarlo del DOM */
  line-height: 0;
}
.hm-logo .bh-mark {
  display: block;
  height: 26px;
  width: auto;
  max-width: 190px;
}
.hm-logo .brand-mark { display: none; }

/* ---------- Pie ---------- */
.site-footer__brand {
  font-size: 0;
  line-height: 0;
  margin-bottom: 6px;
}
.site-footer__brand .bh-mark {
  display: inline-block;
  height: 30px;
  width: auto;
}

/* ---------- Realces de marca ---------- */
.hm-bar { border-bottom: 1px solid var(--line-2); }
.pro-cta { background: var(--accent-weak); border-color: #C9E6E7; }
.wiz__progress-bar > i { background: var(--accent-2); }

/* Franja de contacto del cliente */
.bh-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 18px 20px;
  margin: 0;
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-align: center;
}
.bh-contact a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 118, 123, .35);
}
.bh-contact a:hover { border-bottom-color: var(--accent); }

/* -----------------------------------------------------------------------------
 * Superficies de accion.
 *
 * El diseno base es monocromo: usa --ink (negro) tanto para el texto como para
 * el color de accion. Aqui se separan las dos cosas: el texto sigue en negro
 * de marca y todo lo que es accion o dato destacado pasa a turquesa.
 *   fondos con texto blanco  -> #00767B  (5,4:1)
 *   barras, rellenos y trazo -> #009AA0  (grafico, >=3:1)
 * -------------------------------------------------------------------------- */
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-press); }
.btn--primary:hover { box-shadow: 0 12px 32px -12px rgba(0, 118, 123, .45); }

.chip[aria-checked="true"] { background: var(--accent); color: #fff; box-shadow: 0 8px 22px -10px rgba(0, 118, 123, .45); }
.compass__btn[aria-checked="true"], .compass__center[aria-checked="true"] { background: var(--accent); color: #fff; }
.combobox__opt.is-selected { background: var(--accent); color: #fff; }

.range { background: linear-gradient(90deg, var(--accent-2), var(--accent-2)) no-repeat, var(--surface-3); }
.range::-webkit-slider-thumb { border-color: var(--accent); }
.range::-moz-range-thumb { border-color: var(--accent); }
.bubble { background: var(--accent); }
.bubble::after { border-top-color: var(--accent); }

.wiz__progress-bar i { background: var(--accent-2); }
.market-bar__track i { background: var(--accent-2); }
.num-acc::after { background: var(--accent-2); }

/* Banda final: el turquesa oscuro es el momento de marca mas visible */
.cta-band { background: var(--accent); }
.cta-band__btn { background: #fff; color: var(--accent); }
.cta-band__btn:hover { background: #fff; color: var(--accent-press); }

/* La franja vive dentro del grid de la landing: ocupa todas las columnas */
.bh-contact { grid-column: 1 / -1; border-radius: 14px; border: 1px solid var(--line-2); margin-top: var(--space-lg); }