@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  
  /* SaaS Premium Military/Solid Color Palette */
  --ink: #0f172a;
  --ink-soft: #334155;
  --ink-muted: #64748b;
  
  --teal: #0369a1;
  --teal-dark: #075985;
  --mint: #f0f9ff;
  
  --paper: #ffffff;
  --canvas: #f8fafc;
  --line: #cbd5e1; /* Much crisper slate-300 solid border */
  
  --red: #be123c;
  --red-glow: rgba(190, 18, 60, 0.05);
  --green: #0369a1;
  --green-glow: rgba(3, 105, 161, 0.05);
  --amber: #b45309;
  
  --shadow: none;
  --radius: 4px;
  --radius-lg: 6px;
  --shell: 1120px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f8fafc;
  --ink-soft: #cbd5e1;
  --ink-muted: #64748b;
  
  --teal: #38bdf8;
  --teal-dark: #0ea5e9;
  --mint: rgba(56, 189, 248, 0.1);
  
  --paper: #0f172a; /* Solid slate-900 instead of muddy dark */
  --canvas: #020617; /* Solid slate-950 */
  --line: #334155; /* Solid slate-700 border */
  
  --red: #f43f5e;
  --red-glow: rgba(244, 63, 94, 0.1);
  --green: #38bdf8;
  --green-glow: rgba(56, 189, 248, 0.1);
  --amber: #fbbf24;
  
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

html { overflow-x: clip; scroll-behavior: smooth; background: var(--canvas); font-size: 16px; font-family: var(--font-sans); }
html[data-text-size="large"] { font-size: 18px; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; border: 0; background: transparent; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Hide native number inputs spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
@media (min-width: 768px) {
  .shell { width: min(calc(100% - 64px), var(--shell)); }
}
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--paper); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.skip-link:focus { top: 16px; }

/* MARKET TOP STRIP (Always dark and elegant) */
.market-strip { position: relative; background: #070a13; color: #94a3b8; font-size: 0.8125rem; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.market-strip-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; }
.market-strip-note { display: inline-flex; align-items: center; gap: 7px; color: #64748b; }
.sync-glyph { width: 12px; height: 12px; border: 1.5px solid currentColor; border-left-color: transparent; border-radius: 50%; display: inline-block; }
.market-sync-line { position: absolute; inset: auto 0 0; height: 2px; overflow: hidden; }

.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15); }
.is-market-closed .live-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); }

/* SITE HEADER */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 85%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-symbol {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
}
.brand-symbol-icon { display: block; width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.brand-wordmark { display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink); font-size: 19px; letter-spacing: -0.03em; white-space: nowrap; }
.brand-wordmark > span { font-weight: 800; }
.brand-wordmark strong { color: var(--teal); font: inherit; font-weight: 900; }

.desktop-nav { display: flex; align-items: stretch; gap: 28px; align-self: stretch; }
.desktop-nav a { position: relative; display: grid; place-items: center; color: var(--ink-soft); font-size: 0.875rem; font-weight: 600; transition: color 0.2s; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--ink); }
.desktop-nav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--teal); }

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; color: var(--ink-soft); transition: all 0.2s; }
.icon-button:hover { border-color: var(--teal); color: var(--teal); background: var(--canvas); }

/* Sun/Moon Toggle Visibility */
#theme-toggle .icon-sun { display: none; }
#theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] #theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: none; }

.text-size-control { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.text-size-control button { min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; font-size: .8125rem; font-weight: 800; transition: background-color 0.2s; }
.text-size-control button:last-child { border-right: 0; }
.text-size-control button:hover { background: var(--canvas); }

.mobile-menu-button { display: none; }
.mobile-nav { padding: 0 20px 18px; border-top: 1px solid var(--line); background: var(--paper); display: none; }
.mobile-nav a { display: block; padding: 12px 0; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-weight: 600; }
.mobile-nav a[aria-current="page"] { color: var(--teal); }

/* HERO SECTIONS (Clean Grid Dotted Pattern + Gradient Overlay) */
.hero-band {
  padding: 48px 0 40px;
  background: var(--paper);
  border-bottom: 1.5px solid var(--line);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
}
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(3, 105, 161, 0.03) 0%, transparent 50%, rgba(3, 105, 161, 0.02) 100%);
  pointer-events: none;
}
:root[data-theme="dark"] .hero-band::before {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.04) 0%, transparent 50%, rgba(56, 189, 248, 0.02) 100%);
}
.hero-grid {
  display: grid;
  grid-template-areas:
    "header"
    "converter"
    "details";
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

@media (min-width: 850px) {
  .hero-grid {
    grid-template-areas:
      "header converter"
      "details converter";
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: start;
  }
}

.price-hero-header {
  grid-area: header;
  display: flex;
  flex-direction: column;
}
.price-hero-details {
  grid-area: details;
  display: flex;
  flex-direction: column;
}
.converter-card {
  grid-area: converter;
}
@media (min-width: 850px) {
  .converter-card {
    align-self: center;
  }
}
.hero-band h1 {
  margin: 0;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--ink) 40%, var(--teal-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-intro { color: var(--ink-soft); font-size: 1rem; margin: 8px 0 16px; font-weight: 500; }

.current-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px 0 20px; border-block: 1px solid var(--line); }
.price-label { display: block; color: var(--ink-muted); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.price-unit { display: inline-block; color: var(--ink-soft); font-size: 1.25rem; font-weight: 800; margin-left: 4px; }
.current-price {
  display: block;
  margin: 0;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.1;
  font-weight: 900;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.price-display-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.price-change-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-change-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.change-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
}
.change-badge.up { background: var(--green-glow); color: var(--green); }
.change-badge.down { background: var(--red-glow); color: var(--red); }
.change-badge.neutral { background: var(--line); color: var(--ink-soft); }

.price-meta { display: flex; justify-content: space-between; gap: 18px; margin-top: 14px; color: var(--ink-soft); font-size: 0.8125rem; }
.price-meta a { color: var(--teal); font-weight: 700; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 20px;
}
.listen-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-soft); cursor: pointer; font-size: 0.8125rem; font-weight: 700; transition: all 0.2s; }
.listen-button svg { width: 14px; height: 14px; }
.listen-button:hover { border-color: var(--teal); color: var(--teal); background: var(--canvas); }

/* TRUST BADGES (Credibility markers) */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.trust-badge svg {
  color: var(--teal);
  flex-shrink: 0;
}

/* HORIZONTAL SAAS CONVERTER DESIGN */
.converter-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.converter-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.converter-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.converter-badge {
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--mint);
  color: var(--teal-dark);
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
}
:root[data-theme="dark"] .converter-badge {
  color: var(--teal);
  background: rgba(56, 189, 248, 0.05);
  border-color: var(--line);
}

.converter-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  position: relative;
}

@media (min-width: 600px) {
  .converter-row {
    flex-direction: row;
    align-items: flex-end; /* Align inputs to the bottom so swap sits inline */
    gap: 12px;
  }
}

.calc-field-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}
.calc-input-wrapper, .calc-body {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  overflow: hidden;
  transition: all 0.15s ease;
}
.calc-input-wrapper:focus-within, .calc-body:focus-within {
  border-color: var(--teal);
  background: var(--paper);
  box-shadow: 0 0 0 2px rgba(3, 105, 161, 0.15);
}
:root[data-theme="dark"] .calc-input-wrapper:focus-within,
:root[data-theme="dark"] .calc-body:focus-within {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
}
.calc-input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 54px 10px 12px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  outline: none;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.calc-currency-tag {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink-muted);
}

/* KEY INTERACTIVE SWAP BUTTON REDESIGN (MATCHES VALOR-UF) */
.btn-swap-horizontal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px;
  margin: 0;
  align-self: center;
  flex-shrink: 0;
  z-index: 6;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 600px) {
  .btn-swap-horizontal {
    align-self: flex-end;
    margin-bottom: 4px;
  }
}
.btn-swap-horizontal .swap-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}
.btn-swap-horizontal:hover .swap-circle,
.btn-swap-horizontal:focus-visible .swap-circle {
  border-color: var(--teal);
  color: var(--teal);
  transform: rotate(180deg) scale(1.05);
}
:root[data-theme="dark"] .btn-swap-horizontal .swap-circle {
  background: #0f172a;
  border-color: var(--teal);
  color: var(--teal);
}
:root[data-theme="dark"] .btn-swap-horizontal:hover .swap-circle {
  background: var(--teal);
  color: #080b0f;
}

.btn-swap-horizontal .swap-direction-text {
  display: none;
}

@media (max-width: 600px) {
  .btn-swap-horizontal {
    margin: 8px auto;
    padding: 2px;
  }
  .btn-swap-horizontal .swap-circle svg {
    transform: rotate(90deg);
    transition: transform 0.25s ease;
  }
  .btn-swap-horizontal:hover .swap-circle svg {
    transform: rotate(270deg);
  }
  .btn-swap-horizontal:hover .swap-circle {
    transform: scale(1.05);
  }
}

.converter-actions-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 480px) {
  .converter-actions-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

.action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* El icono quedaba pegado al texto ("[]Copiar"): faltaba separacion. */
  gap: 7px;
  min-height: 40px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.primary-action {
  background: var(--teal);
  color: #ffffff;
  border: 1.5px solid var(--teal-dark);
}
.primary-action:hover {
  background: var(--teal-dark);
}
.secondary-action {
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
}
.secondary-action:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--canvas);
}

.converter-helper {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
  margin: 0;
}

/* SECTIONS AND INNER PAGES */
.main-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 56px 0; }
@media (min-width: 1025px) {
  .main-grid { grid-template-columns: minmax(0, 1.3fr) 0.7fr; gap: 64px; }
}

.section-block { margin-bottom: 56px; }
.section-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 24px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-title::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 3px;
  height: 1.1em;
  background: linear-gradient(180deg, var(--teal), var(--teal-dark));
  border-radius: 2px;
}

/* SCROLL FADE-IN ANIMATION */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  animation: fadeUp 0.5s ease-out both;
}

/* CHARTS CARD */
.chart-card { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.chart-wrapper { position: relative; height: 260px; width: 100%; }

.chart-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--line);
}
.chart-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.chart-stat-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}
.chart-stat-val {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 850;
  color: var(--ink);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

/* SIDEBAR STYLINGS */
.sidebar { display: flex; flex-direction: column; gap: 32px; }
.widget-card { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.widget-title {
  margin: 0 0 20px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.widget-title::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 3px;
  height: 1em;
  background: linear-gradient(180deg, var(--teal), var(--teal-dark));
  border-radius: 2px;
}

.variation-list { display: flex; flex-direction: column; gap: 12px; }
.var-item { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.var-item:last-child { border-bottom: 0; padding-bottom: 0; }
.var-label { font-size: 0.875rem; color: var(--ink-soft); font-weight: 500; }
.var-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

/* TOOLS CARDS */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.tool-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tool-card:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(3, 105, 161, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}
.tool-card-title { margin: 0; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--ink); letter-spacing: -0.01em; }
.tool-card-title .icon-glyph { color: var(--teal); }
.tool-card p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.6; }
.tool-card-link { font-size: 0.8125rem; font-weight: 700; color: var(--teal); align-self: start; margin-top: auto; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s; }
.tool-card-link::after { content: "→"; }
.tool-card:hover .tool-card-link { gap: 6px; }
 
/* FAQ AND ACCORDIONS */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.faq-item[open] {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.faq-item:hover { border-color: var(--teal); }
.faq-question {
  margin: 0;
  padding: 20px 24px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
  transition: color 0.15s;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; content: ""; }
.faq-question::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-question::after {
  transform: rotate(180deg);
}
.faq-item[open] .faq-question {
  color: var(--teal);
}
.faq-answer {
  margin: 0;
  padding: 0 24px 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* TABLES AND LISTS */
.table-wrapper { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
th, td { padding: 14px 20px; border-bottom: 1px solid var(--line); }
th { background: var(--canvas); font-weight: 800; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--ink-muted); }
td { color: var(--ink); }
tr:last-child td { border-bottom: 0; }
tr:nth-child(even) td { background: color-mix(in srgb, var(--canvas) 50%, var(--paper)); }
tr:hover td { background: var(--mint); transition: background 0.15s ease; }

/* FOOTER STYLINGS */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-top: 64px;
  padding-bottom: 40px;
  color: var(--ink-soft);
  font-size: 0.875rem;
  margin-top: 80px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 50%, transparent 100%);
  opacity: 0.4;
}
.footer-intro { display: flex; justify-content: space-between; align-items: start; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.footer-brand { max-width: 480px; }
.footer-brand p { margin: 8px 0 0; color: var(--ink-muted); line-height: 1.5; }
.footer-socials { display: flex; gap: 12px; margin-top: 16px; }
.social-icon { display: flex; width: 36px; height: 36px; border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink-soft); align-items: center; justify-content: center; background: var(--paper); transition: all 0.2s; }
.social-icon:hover { border-color: var(--teal); color: var(--teal); background: var(--canvas); transform: translateY(-2px); }

.footer-nav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.footer-nav-grid h2 { margin: 0 0 16px; font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; color: var(--ink); letter-spacing: 0.08em; }
.footer-nav-grid a { display: block; padding: 6px 0; color: var(--ink-muted); transition: color 0.2s; }
.footer-nav-grid a:hover { color: var(--teal); }

.footer-bottom { display: flex; justify-content: space-between; gap: 24px; font-size: 0.75rem; color: var(--ink-muted); padding-top: 24px; }

/* PREMIUM EYEBROW TAG */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  background: var(--mint);
  border: 1px solid rgba(2, 132, 199, 0.1);
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 16px;
}
:root[data-theme="dark"] .eyebrow {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.15);
}

/* LIVE DOT PULSE ANIMATION */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(2, 132, 199, 0); }
}
.live-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* PREMIUM INFO BLOCKS (Text sections with left accent) */
.info-block {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 28px 28px 28px 24px;
  box-shadow: var(--shadow);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.info-block p { margin: 0; }
.info-block ul {
  margin: 0;
  padding-left: 18px;
  list-style-type: disc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-block li { line-height: 1.6; }
.info-block strong { color: var(--ink); font-weight: 700; }

/* HERO CONVERTER UPGRADE */
.hero-band .converter-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
}
:root[data-theme="dark"] .hero-band .converter-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
}

/* STATS ROW (Compact KPI display) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.stat-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all 0.25s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(2, 132, 199, 0.2);
}
.stat-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.stat-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* MARKET SYNC LINE GRADIENT ANIMATION */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.market-sync-line::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 50%, transparent 100%);
  animation: shimmer 3s ease-in-out infinite;
}

/* NEW PREMIUM SAAS LAYOUT SECTIONS */
.comparison-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}
.comparison-intro {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 1.6;
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .comparison-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.comp-col {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s;
}
.comp-col:hover {
  border-color: var(--teal);
}
.comp-header {
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 12px;
}
.comp-header h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink);
}
.comp-header span {
  font-size: 0.725rem;
  color: var(--ink-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-top: 4px;
}
.comp-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.comp-features li {
  line-height: 1.6;
}
.comp-features li strong {
  color: var(--ink);
}

.tools-band {
  background: var(--canvas);
  padding: 64px 0;
  border-top: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
}
.tools-promo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (min-width: 768px) {
  .tools-promo-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.tool-promo-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  gap: 20px;
  box-shadow: var(--shadow);
  transition: all 0.25s ease;
}
.tool-promo-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}
.tool-promo-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--mint);
  color: var(--teal);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tool-promo-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-promo-content h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 850;
  color: var(--ink);
}
.tool-promo-content p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.promo-btn {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  text-decoration: none;
}
.promo-btn:hover {
  text-decoration: underline;
}

.faq-band {
  padding: 64px 0;
}
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

/* MOBILE RESPONSIVE ADAPTATIONS */
@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .mobile-menu-button { display: grid; }
  .footer-intro { flex-direction: column; gap: 24px; }
  .footer-nav-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .stats-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .text-size-control { display: none; }
  .header-inner { min-height: 56px; }
  .brand-symbol { width: 30px; height: 30px; }
  .brand-wordmark { font-size: 16px; }
  
  .hero-band { padding: 24px 0 16px; background-size: 16px 16px; }
  .hero-intro { margin: 8px 0 12px; font-size: 0.875rem; line-height: 1.5; }
  .current-price { font-size: clamp(26px, 6vw, 34px); }
  .price-unit { font-size: 1.1rem; }
  .price-display-row { margin-top: 8px; margin-bottom: 8px; gap: 12px; }
  .price-change-col { gap: 2px; }
  .change-badge { padding: 3px 6px; font-size: 10px; }
  .price-change-label { font-size: 0.65rem; }
  .hero-ctas { margin-top: 8px; margin-bottom: 12px; gap: 8px; }
  .listen-button { min-height: 36px; font-size: 0.75rem; padding: 4px 10px; }
  .trust-badges { gap: 6px 10px; margin-top: 10px; padding-top: 10px; justify-content: start; }
  .trust-badge { font-size: 0.65rem; }
  
  .converter-card { padding: 16px; gap: 12px; border-radius: var(--radius); }
  .converter-header-row { padding-bottom: 8px; }
  .converter-title { font-size: 0.95rem; }
  .converter-badge { font-size: 0.7rem; padding: 2px 8px; }
  .converter-row { gap: 12px; }
  .calc-label { font-size: 0.65rem; margin-bottom: 4px; }
  .calc-input { font-size: 1.15rem; padding: 8px 48px 8px 10px; }
  .calc-currency-tag { font-size: 0.75rem; right: 10px; }
  .btn-swap-horizontal { margin: 4px auto; }
  .btn-swap-horizontal .swap-circle { width: 36px; height: 36px; }
  .btn-swap-horizontal .swap-direction-text { display: none; }
  .action-btn { min-height: 36px; font-size: 0.75rem; }
  .converter-actions-row { gap: 8px; }
  .converter-helper-text { font-size: 0.7rem; margin-top: 4px; }
  
  .main-grid { padding: 20px 0; gap: 20px; }
  .section-block { margin-bottom: 24px; }
  .section-title { font-size: 1.05rem; margin-bottom: 12px; }
  .chart-card { padding: 12px; }
  .chart-wrapper { height: 180px; }
  .chart-stats-row { margin-bottom: 12px; padding-bottom: 8px; gap: 8px; }
  .chart-stat-val { font-size: 0.95rem; }
  .chart-stat-lbl { font-size: 0.6rem; }
  
  .table-wrapper table th, .table-wrapper table td { padding: 6px 8px; font-size: 0.75rem; }
  .info-block { padding: 16px; font-size: 0.85rem; }
  .sidebar { gap: 20px; }
  .widget-card { padding: 16px; }
  
  .tools-band { padding: 36px 0; }
  .tools-promo-grid { gap: 16px; }
  .tool-promo-card { padding: 16px; gap: 12px; flex-direction: column; text-align: center; align-items: center; }
  .tool-promo-icon { width: 40px; height: 40px; }
  .tool-promo-content h3 { font-size: 1.05rem; }
  .tool-promo-content p { font-size: 0.8rem; }
  .promo-btn { font-size: 0.75rem; margin-top: 4px; }
  
  .comparison-card { padding: 16px; }
  .comparison-intro { font-size: 0.85rem; margin-bottom: 16px; }
  .comp-col { padding: 16px; gap: 10px; }
  .comp-header h3 { font-size: 1.15rem; }
  .comp-header span { font-size: 0.65rem; }
  .comp-features { font-size: 0.8rem; gap: 8px; }
  
  .faq-band { padding: 36px 0; }
  .faq-question { padding: 12px 14px; font-size: 0.85rem; }
  .faq-answer { padding: 0 14px 12px; font-size: 0.8rem; }
  
  .footer-nav-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Product system: Valor UDI */
.home-quote-stage,
.hero-band:not(.home-quote-stage) {
  background: var(--paper);
  background-image: none;
}
.home-quote-stage::before,
.hero-band:not(.home-quote-stage)::before { display: none; }
.home-quote-stage { padding: 32px 0 0; }
.home-quote-stage .hero-grid {
  display: grid;
  grid-template-areas:
    "header converter"
    "details converter"
    "trust trust";
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 0;
  align-items: stretch;
}
.home-quote-stage .price-hero-header {
  grid-area: header;
  padding: 12px 36px 14px 0;
}
.home-quote-stage .price-hero-details {
  grid-area: details;
  padding: 0 36px 24px 0;
}
.hero-kicker,
.rate-label {
  display: block;
  color: var(--teal);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rate-label { margin-top: 22px; color: var(--ink-muted); letter-spacing: .04em; }
.home-quote-stage .hero-band h1,
.home-quote-stage h1 {
  margin-top: 3px;
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  font-size: 2rem;
  letter-spacing: 0;
}
.home-quote-stage .price-display-row { display: block; margin: 5px 0 4px; }
.home-quote-stage .current-price {
  font-family: var(--font-sans);
  font-size: clamp(3.2rem, 5.2vw, 4.15rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: .98;
  white-space: nowrap;
}
.home-quote-stage .price-unit { margin-left: 8px; font-size: .95rem; letter-spacing: 0; }
.home-quote-stage .quote-date { display: block; color: var(--ink-muted); font-size: .78rem; font-weight: 650; }
.home-quote-stage .price-change-col { flex-direction: row; align-items: center; margin-top: 12px; padding-bottom: 4px; }
.home-quote-stage .hero-intro { max-width: 520px; margin: 10px 0 0; line-height: 1.55; }
.home-quote-stage .hero-ctas { margin: 16px 0 0; }
.home-quote-stage .price-hero-details > .trust-badges { display: none; }

.home-quote-stage .hero-converter {
  grid-area: converter;
  justify-content: center;
  min-width: 0;
  padding: 14px 0 26px 36px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
:root[data-theme="dark"] .home-quote-stage .hero-converter {
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
}
.home-quote-stage .converter-header-row { align-items: flex-start; gap: 16px; padding-bottom: 15px; }
.home-quote-stage .converter-title { margin-top: 3px; font-size: 1.35rem; }
.home-quote-stage .converter-badge { flex: 0 0 auto; margin: 2px 14px 0 0; background: transparent; }
.home-quote-stage .converter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}
.home-quote-stage .udi-field { order: 1; }
.home-quote-stage .btn-swap-horizontal { order: 2; }
.home-quote-stage .mxn-field { order: 3; }
.home-quote-stage .converter-row.is-reversed .udi-field { order: 3; }
.home-quote-stage .converter-row.is-reversed .mxn-field { order: 1; }
.home-quote-stage .calc-input-wrapper { height: 72px; background: var(--canvas); }
.home-quote-stage .calc-input { min-width: 0; padding: 15px 64px 15px 14px; font-family: var(--font-sans); font-size: 1.25rem; letter-spacing: 0; }
.home-quote-stage .calc-currency-tag { right: 18px; }
.home-quote-stage .calc-input[readonly] { color: var(--ink); cursor: default; }
.home-quote-stage .btn-swap-horizontal { align-self: end; margin: 0 0 7px; padding: 0; }
.home-quote-stage .btn-swap-horizontal .swap-circle {
  width: 50px;
  height: 50px;
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}
.home-quote-stage .btn-swap-horizontal:hover .swap-circle { background: var(--teal-dark); color: #fff; transform: none; }
.home-quote-stage .conversion-statement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: .84rem;
  white-space: nowrap;
}
.home-quote-stage .conversion-statement > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.home-quote-stage .conversion-statement strong { color: var(--ink); }
.converter-quick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quick-amounts { display: flex; align-items: center; gap: 7px; }
.quick-amounts button,
.reset-converter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  font-size: .76rem;
  font-weight: 750;
}
.quick-amounts button:hover,
.reset-converter:hover { border-color: var(--teal); color: var(--teal); }
.reset-converter { gap: 6px; }
.home-quote-stage .converter-actions-row { flex-direction: row; }
.home-quote-stage .action-btn { min-height: 44px; }
.home-quote-stage .secondary-action { border-color: #16803f; color: #16803f; }
.home-quote-stage .secondary-action:hover { background: #16803f; border-color: #16803f; color: #fff; }
.hero-trust-bar {
  grid-area: trust;
  display: grid;
  grid-template-columns: .72fr .64fr .64fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.hero-trust-bar .trust-badge { min-height: 52px; padding: 0 18px; border-right: 1px solid var(--line); }
.hero-trust-bar .trust-badge:first-child { padding-left: 0; }
.hero-trust-bar .trust-badge:last-child { justify-content: flex-end; border-right: 0; }
.hero-trust-bar a { color: var(--teal); }

.hero-band:not(.home-quote-stage) { padding: 38px 0; }
.hero-band:not(.home-quote-stage) h1 { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; letter-spacing: 0; }
.hero-band:not(.home-quote-stage) .eyebrow { margin-bottom: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.main-grid { gap: 36px; padding: 42px 0; }
.section-block { margin-bottom: 44px; }
.section-title { margin-bottom: 16px; font-size: 1.22rem; letter-spacing: 0; }
.section-title::before,
.widget-title::before { display: none; }
.chart-card,
.widget-card,
.comparison-card,
.tool-promo-card,
.table-wrapper,
.faq-item { border-width: 1px; }
.chart-card,
.widget-card { padding: 20px; }
.stat-card { padding: 15px; border-width: 1px; }
.tools-band { padding: 48px 0; }
.tool-promo-card:hover,
.stat-card:hover { transform: none; }

@media (max-width: 849px) {
  .home-quote-stage { padding-top: 22px; }
  .home-quote-stage .hero-grid {
    grid-template-areas:
      "header"
      "details"
      "converter"
      "trust";
    grid-template-columns: 1fr;
  }
  .home-quote-stage .price-hero-header,
  .home-quote-stage .price-hero-details { padding-right: 0; }
  .home-quote-stage .hero-converter { padding: 20px 0 22px; border-left: 0; border-top: 1px solid var(--line); }
  .hero-trust-bar { grid-template-columns: 1fr; }
  .hero-trust-bar .trust-badge,
  .hero-trust-bar .trust-badge:first-child,
  .hero-trust-bar .trust-badge:last-child { justify-content: flex-start; min-height: 40px; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-trust-bar .trust-badge:last-child { border-bottom: 0; }
}

@media (max-width: 600px) {
  .shell { width: calc(100% - 24px); }
  .market-strip-inner { min-height: 30px; }
  .market-strip-note { display: none; }
  .home-quote-stage h1 { font-size: 1.55rem; }
  .rate-label { margin-top: 16px; }
  .home-quote-stage .current-price { font-size: clamp(2.55rem, 14vw, 3.2rem); }
  .home-quote-stage .price-display-row { display: block; }
  .home-quote-stage .price-unit { display: block; margin: 5px 0 0; font-size: .72rem; }
  .home-quote-stage .price-change-col { margin-top: 9px; }
  .home-quote-stage .hero-intro { font-size: .84rem; }
  .home-quote-stage .converter-header-row { display: block; }
  .home-quote-stage .converter-badge { display: inline-flex; margin-top: 8px; }
  .home-quote-stage .converter-row { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 6px; }
  .home-quote-stage .calc-field-group { min-width: 0; }
  .home-quote-stage .calc-label { min-height: 31px; line-height: 1.35; }
  .home-quote-stage .calc-input-wrapper { display: block; height: 92px; padding: 8px; }
  .home-quote-stage .calc-currency-tag { inset: 9px auto auto 9px; transform: none; }
  .home-quote-stage .calc-input { position: absolute; inset: auto 8px 8px; width: calc(100% - 16px); height: 38px; padding: 0; line-height: 38px; text-align: center; }
  .home-quote-stage .btn-swap-horizontal { align-self: end; margin-bottom: 17px; }
  .home-quote-stage .btn-swap-horizontal .swap-circle { width: 48px; height: 48px; }
  .home-quote-stage .btn-swap-horizontal .swap-circle svg { transform: none; }
  .home-quote-stage .conversion-statement { font-size: .74rem; }
  .converter-quick-row { display: block; }
  .quick-amounts { justify-content: center; margin-bottom: 9px; }
  .reset-converter { width: 100%; }
  .home-quote-stage .converter-actions-row { display: grid; grid-template-columns: 1fr 1fr; }
  .home-quote-stage .action-btn { min-width: 0; padding-inline: 8px; }
  .main-grid [style*="grid-template-columns:1fr 1fr"],
  .main-grid [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
  .main-grid { gap: 24px; padding: 24px 0; }
  .main-grid strong[id^="res-"] { max-width: 100%; overflow-wrap: anywhere; }
  .hero-band:not(.home-quote-stage) { padding: 26px 0; }
}

/* Full-width information system */
.home-quote-stage .current-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 100%;
  font-size: clamp(3rem, 4.7vw, 3.55rem);
}
.home-quote-stage .price-unit { flex: 0 0 auto; margin-left: 0; padding-right: 10px; }

.market-overview-band {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.market-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-heading-row .section-title { margin: 3px 0 0; }
.section-link { color: var(--teal); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.market-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}
.market-kpi { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--line); }
.market-kpi:last-child { border-right: 0; }
.market-kpi span,
.uma-strip span { display: block; color: var(--ink-muted); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.market-kpi strong { display: block; margin-top: 5px; overflow: hidden; color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.market-chart-panel { padding: 20px 22px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.chart-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.chart-panel-head strong { font-size: .9rem; }
.chart-panel-head span { color: var(--ink-muted); font-size: .72rem; font-weight: 650; }
.market-chart-panel .chart-wrapper { height: 300px; margin-top: 12px; }
.uma-strip {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, .6fr));
  border-block: 1px solid var(--line);
  background: var(--paper);
}
.uma-strip > div { display: flex; min-width: 0; min-height: 78px; padding: 13px 18px; border-right: 1px solid var(--line); flex-direction: column; justify-content: center; }
.uma-strip > div:first-child { padding-left: 18px; }
.uma-strip > div:last-child { border-right: 0; }
.uma-strip strong { margin-top: 4px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.uma-strip-intro strong { font-size: 1.12rem; }
.uma-strip-intro small { margin-top: 2px; color: var(--ink-muted); font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; }

.conversion-section,
.comparison-section { width: min(calc(100% - 64px), var(--shell)); margin-block: 0; margin-inline: auto; padding: 44px 0; }
.conversion-table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.conversion-table-grid .table-wrapper { border-radius: var(--radius-lg); }
.product-tools-band { padding: 44px 0; background: var(--paper); }
.product-tools-band .section-title,
.comparison-section .section-title { margin-top: 3px; }
.product-tools-band .tools-promo-grid { gap: 0; border-block: 1px solid var(--line); }
.product-tools-band .tool-promo-card { padding: 26px 28px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.product-tools-band .tool-promo-card:last-child { border-right: 0; }
.comparison-section .comparison-card { padding: 0; border: 0; background: transparent; }
.comparison-section .comparison-intro { max-width: 760px; }
.comparison-section .comparison-grid { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.comparison-section .comp-col { padding: 24px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.comparison-section .comp-col:last-child { border-right: 0; }
.knowledge-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 40px; padding: 44px 0; }
.knowledge-grid .section-block { align-self: start; height: auto; margin: 0; }
.knowledge-grid .info-block { min-height: 0; padding: 10px 0 10px 24px; border: 0; border-left: 2px solid var(--teal); border-radius: 0; background: transparent; }
.knowledge-grid .widget-card { height: auto; padding: 16px; }
.uma-history-panel,
.uma-history-panel .section-block { align-self: start; height: auto; }
.faq-band { padding: 48px 0; border-top: 1px solid var(--line); background: var(--paper); }
.site-footer { margin-top: 0; }

@media (max-width: 760px) {
  .home-quote-stage .current-price { display: block; font-size: clamp(2.55rem, 14vw, 3.2rem); }
  .home-quote-stage .price-unit { display: block; padding-right: 0; }
  .market-overview-band { padding: 34px 0; }
  .section-heading-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .market-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-kpi { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .market-kpi:nth-child(2n) { border-right: 0; }
  .market-kpi:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .market-chart-panel { padding: 16px 10px 10px; }
  .market-chart-panel .chart-wrapper { height: 220px; }
  .chart-panel-head { padding-inline: 4px; }
  .uma-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uma-strip > div { min-height: 68px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
  .uma-strip > div:nth-child(2n) { border-right: 0; }
  .uma-strip-intro { grid-column: 1 / -1; padding-left: 12px !important; }
  .uma-strip > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .conversion-section,
  .comparison-section { width: calc(100% - 24px); padding: 32px 0; }
  .conversion-table-grid { grid-template-columns: 1fr; gap: 14px; }
  .product-tools-band .tools-promo-grid { grid-template-columns: 1fr; }
  .product-tools-band .tool-promo-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .product-tools-band .tool-promo-card:last-child { border-bottom: 0; }
  .comparison-section .comparison-grid { grid-template-columns: 1fr; }
  .comparison-section .comp-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .comparison-section .comp-col:last-child { border-bottom: 0; }
  .knowledge-grid { grid-template-columns: 1fr; gap: 30px; padding: 32px 0; }
}

/* Unified product pages: mortgage, Infonavit and historical search */
.tool-page { background: var(--canvas); }
.tool-page .eyebrow,
:root[data-theme="dark"] .tool-page .eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 0;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.25;
}
.tool-page .eyebrow::before {
  width: 16px;
  height: 2px;
  flex: 0 0 16px;
  border-radius: 1px;
  background: var(--teal);
  content: "";
}
.tool-page-hero { padding: 42px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.tool-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); align-items: end; gap: 48px; }
.tool-page-hero .eyebrow { margin-bottom: 7px; }
.tool-page-hero h1 { margin: 0; color: var(--ink); font-size: clamp(2.1rem, 4vw, 3.25rem); font-weight: 900; line-height: 1.06; letter-spacing: 0; }
.tool-page-hero p { max-width: 760px; margin: 14px 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
.tool-rate-context { min-width: 0; padding: 4px 0 4px 28px; border-left: 1px solid var(--line); }
.tool-rate-context span,
.tool-rate-context small { display: block; color: var(--ink-muted); font-size: .72rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.tool-rate-context strong { display: block; margin: 4px 0; overflow-wrap: anywhere; color: var(--teal); font-size: clamp(1.5rem, 2.5vw, 2.05rem); font-variant-numeric: tabular-nums; line-height: 1.15; }

.tool-workspace,
.history-workspace { margin-block: 36px 48px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.tool-workspace-header { display: flex; min-height: 94px; padding: 22px 28px; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--line); }
.tool-workspace-header .eyebrow { margin-bottom: 4px; }
.tool-workspace-header h2 { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.tool-workspace-header > p { max-width: 430px; margin: 0; color: var(--ink-muted); font-size: .82rem; font-weight: 600; line-height: 1.5; text-align: right; }

.mortgage-workbench { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); }
.tool-input-panel { min-width: 0; padding: 28px; }
.tool-input-panel--flat { border-bottom: 1px solid var(--line); }
.tool-input-panel h3,
.capacity-panel h3,
.tool-results-panel h3,
.comparison-results h3 { margin: 0; font-size: 1.05rem; }
.tool-input-panel > h3 { margin-bottom: 18px; }
.tool-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tool-field-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-field-grid--three .tool-field-wide { grid-column: span 2; }
.tool-field-grid--five { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tool-field-grid--five .tool-field-wide { grid-column: span 2; }
.tool-page .calc-column { min-width: 0; }
.tool-page .calc-header { display: block; margin-bottom: 7px; color: var(--ink-muted); font-size: .7rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.tool-page .calc-body { min-width: 0; height: 58px; border-width: 1px; border-radius: var(--radius); background: var(--canvas); }
.tool-page .calc-input { min-width: 0; height: 100%; padding: 10px 14px; color: var(--ink); font-size: 1rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.tool-page select.calc-input { padding-right: 34px; cursor: pointer; }
.tool-input-with-unit { display: flex; padding-inline: 14px; gap: 9px; }
.tool-input-with-unit .calc-input { flex: 1 1 auto; width: 1px; padding-inline: 0; }
.tool-input-with-unit > span { flex: 0 0 auto; color: var(--ink-muted); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.tool-input-with-unit > .tool-prefix { color: var(--ink); font-size: 1rem; }
.loan-summary-line { display: flex; min-height: 66px; margin-top: 22px; padding-top: 18px; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.loan-summary-line span { color: var(--ink-soft); font-size: .82rem; font-weight: 650; }
.loan-summary-line strong { max-width: 58%; overflow-wrap: anywhere; color: var(--teal); font-size: 1.35rem; font-variant-numeric: tabular-nums; text-align: right; }

.capacity-panel { min-width: 0; padding: 28px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 58%, var(--paper)); }
.capacity-panel-heading { margin-bottom: 18px; }
.capacity-panel-heading .eyebrow { margin-bottom: 4px; }
.capacity-panel .tool-field-grid { grid-template-columns: 1fr; }
.risk-meter { margin-top: 20px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: border-color .2s; }
.risk-meter > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.risk-meter span { color: var(--ink-soft); font-size: .76rem; font-weight: 750; }
.risk-meter strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.risk-meter p { margin: 6px 0 0; color: var(--ink-muted); font-size: .75rem; font-weight: 600; line-height: 1.45; }

.tool-results-panel { padding: 28px; border-top: 1px solid var(--line); }
.tool-results-panel > header { margin-bottom: 18px; }
.tool-results-panel .eyebrow { margin-bottom: 4px; }
.primary-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.primary-result { min-width: 0; padding: 22px; border-right: 1px solid var(--line); background: var(--canvas); }
.primary-result:last-child { border-right: 0; }
.primary-result > span { display: block; color: var(--ink-muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.primary-result > strong { display: block; margin: 8px 0 4px; overflow-wrap: anywhere; color: var(--ink); font-size: clamp(1.65rem, 3.2vw, 2.45rem); font-variant-numeric: tabular-nums; line-height: 1.12; }
.primary-result > small { color: var(--ink-soft); font-size: .8rem; font-weight: 600; }
.primary-result--warning { background: var(--red-glow); }
.primary-result--warning > strong { color: var(--red); }
.secondary-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; border-block: 1px solid var(--line); }
.secondary-metrics-grid > div { min-width: 0; padding: 15px 18px; border-right: 1px solid var(--line); }
.secondary-metrics-grid > div:last-child { border-right: 0; }
.secondary-metrics-grid span { display: block; color: var(--ink-muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.secondary-metrics-grid strong { display: block; margin-top: 4px; overflow-wrap: anywhere; font-size: .95rem; font-variant-numeric: tabular-nums; }

.comparison-results { padding: 28px; }
.comparison-results > header { display: flex; margin-bottom: 20px; align-items: end; justify-content: space-between; gap: 32px; }
.comparison-results .eyebrow { margin-bottom: 4px; }
.comparison-results > header p { max-width: 520px; margin: 0; color: var(--ink-muted); font-size: .78rem; font-weight: 600; text-align: right; }
.comparison-result-grid { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; }
.comparison-result { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.comparison-result > span { color: var(--ink-muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.comparison-result > strong { display: block; margin: 9px 0; overflow-wrap: anywhere; font-size: clamp(1.65rem, 3vw, 2.3rem); font-variant-numeric: tabular-nums; line-height: 1.12; }
.comparison-result > p { margin: 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.comparison-result--indexed > strong { color: var(--red); }
.comparison-result--fixed > strong { color: var(--green); }
.comparison-divider { position: relative; display: grid; place-items: center; }
.comparison-divider::before { position: absolute; inset: 0 50%; width: 1px; background: var(--line); content: ""; }
.comparison-divider span { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-muted); font-size: .72rem; font-weight: 900; }

.history-search-console { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); min-height: 260px; }
.history-date-control { padding: 34px 28px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 58%, var(--paper)); }
.history-date-control .calc-body { height: 64px; margin-top: 8px; }
.history-date-control .calc-input { font-size: 1.05rem; }
.history-date-control > p { margin: 12px 0 0; color: var(--ink-muted); font-size: .76rem; line-height: 1.5; }
.history-result { display: none; min-width: 0; padding: 34px 38px; flex-direction: column; justify-content: center; background: var(--paper); }
.history-result > span { color: var(--ink-muted); font-size: .72rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.history-result > strong { margin: 7px 0; overflow-wrap: anywhere; color: var(--teal); font-size: clamp(2.1rem, 5vw, 3.6rem); font-variant-numeric: tabular-nums; line-height: 1.08; }
.history-result > p { margin: 0; color: var(--ink-soft); font-size: .86rem; font-weight: 650; }
.history-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.history-facts-grid > div { min-width: 0; padding: 18px 22px; border-right: 1px solid var(--line); }
.history-facts-grid > div:last-child { border-right: 0; }
.history-facts-grid span,
.history-facts-grid small { display: block; color: var(--ink-muted); font-size: .66rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.history-facts-grid strong { display: block; margin: 4px 0; font-size: 1rem; }
.history-facts-grid small { letter-spacing: 0; line-height: 1.4; text-transform: none; }

.tool-guidance-band { padding: 44px 0; border-top: 1px solid var(--line); background: var(--paper); }
.tool-guidance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.tool-guidance-grid > div { min-width: 0; padding: 24px; border-right: 1px solid var(--line); }
.tool-guidance-grid > div:last-child { border-right: 0; }
.tool-guidance-grid > div > span { display: grid; width: 30px; height: 30px; margin-bottom: 17px; place-items: center; border: 1px solid var(--teal); border-radius: 50%; color: var(--teal); font-size: .75rem; font-weight: 850; }
.tool-guidance-grid h2 { margin: 0 0 7px; font-size: 1rem; }
.tool-guidance-grid p { margin: 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.55; }
.tool-disclaimer { margin-top: 16px; color: var(--ink-muted); font-size: .72rem; text-align: center; }
.indexed-explainer,
.history-guide-grid { display: grid; grid-template-columns: minmax(240px, .7fr) repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
.indexed-explainer .eyebrow,
.history-guide-grid .eyebrow { margin-bottom: 6px; }
.indexed-explainer h2,
.history-guide-grid h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.indexed-explainer > p,
.history-guide-grid > p { margin: 0; padding-left: 24px; border-left: 1px solid var(--line); color: var(--ink-soft); font-size: .82rem; line-height: 1.65; }

@media (max-width: 900px) {
  .tool-page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, .48fr); gap: 28px; }
  .mortgage-workbench { grid-template-columns: 1fr; }
  .capacity-panel { border-top: 1px solid var(--line); border-left: 0; }
  .capacity-panel .tool-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-field-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-field-grid--five .tool-field-wide { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .tool-page-hero { padding: 28px 0; }
  .tool-page-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .tool-page-hero h1 { font-size: 2rem; }
  .tool-page-hero p { margin-top: 10px; font-size: .88rem; }
  .tool-rate-context { padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .tool-rate-context strong { font-size: 1.5rem; }
  .tool-workspace,
  .history-workspace { width: calc(100% - 24px); margin-block: 20px 28px; }
  .tool-workspace-header { min-height: 0; padding: 18px; align-items: flex-start; flex-direction: column; gap: 7px; }
  .tool-workspace-header h2 { font-size: 1.2rem; }
  .tool-workspace-header > p { text-align: left; }
  .tool-input-panel,
  .capacity-panel,
  .tool-results-panel,
  .comparison-results { padding: 18px; }
  .tool-field-grid,
  .tool-field-grid--three,
  .tool-field-grid--five,
  .capacity-panel .tool-field-grid { grid-template-columns: 1fr; gap: 13px; }
  .tool-field-grid--three .tool-field-wide,
  .tool-field-grid--five .tool-field-wide { grid-column: auto; }
  .tool-page .calc-body { height: 54px; }
  .loan-summary-line { align-items: flex-start; flex-direction: column; gap: 5px; }
  .loan-summary-line strong { max-width: 100%; font-size: 1.15rem; text-align: left; }
  .primary-results-grid,
  .secondary-metrics-grid,
  .history-facts-grid { grid-template-columns: 1fr; }
  .primary-result,
  .secondary-metrics-grid > div,
  .history-facts-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .primary-result:last-child,
  .secondary-metrics-grid > div:last-child,
  .history-facts-grid > div:last-child { border-bottom: 0; }
  .primary-result > strong { font-size: 1.7rem; }
  .comparison-results > header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .comparison-results > header p { text-align: left; }
  .comparison-result-grid { grid-template-columns: 1fr; }
  .comparison-divider { height: 52px; }
  .comparison-divider::before { inset: 0 auto; top: 50%; width: 100%; height: 1px; }
  .comparison-result > strong { font-size: 1.65rem; }
  .history-search-console { grid-template-columns: 1fr; min-height: 0; }
  .history-date-control { padding: 22px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .history-result { min-height: 190px; padding: 24px 18px; }
  .history-result > strong { font-size: 2rem; }
  .tool-guidance-band { padding: 30px 0; }
  .tool-guidance-grid,
  .indexed-explainer,
  .history-guide-grid { grid-template-columns: 1fr; gap: 0; }
  .tool-guidance-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .tool-guidance-grid > div:last-child { border-bottom: 0; }
  .indexed-explainer h2,
  .history-guide-grid h2 { margin-bottom: 18px; }
  .indexed-explainer > p,
  .history-guide-grid > p { padding: 16px 0; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 360px) {
  .site-header {
    position: static;
  }
  :root[data-theme="dark"] .home-quote-stage .hero-converter {
    border-left: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
  }
  .home-quote-stage .converter-header-row,
  .home-quote-stage .converter-header-row > div {
    text-align: center;
  }
  .home-quote-stage .converter-badge {
    margin-inline: auto;
  }
  .home-quote-stage .converter-row {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    gap: 4px;
  }
  .home-quote-stage .calc-label {
    min-height: 27px;
    font-size: .61rem;
    letter-spacing: .025em;
    text-align: center;
  }
  .home-quote-stage .calc-input-wrapper {
    height: 88px;
    padding: 7px;
  }
  .home-quote-stage .calc-currency-tag {
    inset: 9px 0 auto;
    width: 100%;
    text-align: center;
  }
  .home-quote-stage .btn-swap-horizontal {
    align-self: end;
    margin: 0 0 15px;
  }
  .home-quote-stage .btn-swap-horizontal .swap-circle {
    width: 42px;
    height: 42px;
  }
  .home-quote-stage .btn-swap-horizontal .swap-direction-text {
    display: none;
  }
  .home-quote-stage .conversion-statement {
    flex-wrap: nowrap;
    font-size: .68rem;
    white-space: nowrap;
  }
}


/* === Valor UF next: componentes propios ================================= */

/* Ejemplos basados en búsquedas GSC: lista de cotizaciones con puntos guía */
.examples-intro { max-width: 720px; color: var(--ink-soft); margin: 0 0 20px; }
.quote-list {
  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: 2px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 22px;
}
.quote-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 9px 2px; text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.quote-row:nth-last-child(-n+2) { border-bottom: 0; }
.quote-q { font-size: 0.86rem; color: var(--ink-soft); white-space: nowrap; }
.quote-leader { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--ink-muted) 40%, transparent); transform: translateY(-4px); min-width: 16px; }
.quote-r { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); transition: color 0.15s; white-space: nowrap; }
.quote-row:hover .quote-r, .quote-row:hover .quote-q { color: var(--teal); }
@media (max-width: 720px) {
  .quote-list { grid-template-columns: 1fr; column-gap: 0; padding: 8px 16px; }
  .quote-row:nth-last-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
  .quote-row:last-child { border-bottom: 0; }
}

/* Grid de seis calculadoras */
.tools-band-intro { max-width: 760px; color: var(--ink-soft); margin: 0 0 24px; }
.tools-promo-grid--seven { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .tools-promo-grid--seven { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tools-promo-grid--seven { grid-template-columns: 1fr; } }

/* Pasos de cálculo de la UF */
.calc-steps-card { padding: 20px; }
.calc-steps { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 14px; }
.calc-steps li { counter-increment: paso; position: relative; padding-left: 40px; display: grid; gap: 2px; }
.calc-steps li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 2px;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--mint); color: var(--teal); font-weight: 800; font-size: 0.8rem;
  border: 1px solid var(--teal); border-radius: 50%;
}
.calc-steps li strong { font-size: 0.9rem; }
.calc-steps li span { font-size: 0.84rem; color: var(--ink-muted); }
.calc-steps-note { margin: 16px 0 0; font-size: 0.84rem; color: var(--ink-muted); }
.calc-steps-note a { color: var(--teal); font-weight: 600; }

/* Caja de autor (E-E-A-T) */
.author-section { margin-top: 8px; }
.author-box {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.author-avatar {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--mint); color: var(--teal); border: 1px solid var(--teal); border-radius: 50%;
}
.author-info { display: grid; gap: 2px; }
.author-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.author-info strong { font-size: 1rem; }
.author-role { font-size: 0.82rem; color: var(--teal); font-weight: 600; }
.author-info p { margin: 8px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
@media (max-width: 520px) { .author-box { flex-direction: column; } }


/* === Valor UF next: capa de identidad (terminal financiero) ============= */

/* Header oscuro permanente (en ambos temas) */
.site-header { background: #0b1524; border-bottom: 1px solid #1d2b40; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header .brand-wordmark { color: #f8fafc; }
.site-header .brand-wordmark strong { color: #38bdf8; }
.desktop-nav a { color: #94a3b8; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: #f8fafc; }
.desktop-nav a[aria-current="page"]::after { background: #38bdf8; }
.site-header .icon-button { background: transparent; border-color: #24344d; color: #cbd5e1; }
.site-header .icon-button:hover { border-color: #38bdf8; color: #f8fafc; }
.site-header .text-size-control { background: transparent; border-color: #24344d; }
.site-header .text-size-control button { color: #cbd5e1; }
.mobile-nav { background: #0b1524; border-top-color: #1d2b40; }
.mobile-nav a { color: #cbd5e1; border-bottom-color: #1d2b40; }
.mobile-nav a[aria-current="page"] { color: #38bdf8; }
.market-strip { border-bottom-color: #1d2b40; }

/* Consola hero oscura — valor a la izquierda, conversor a la derecha */
.uf-console { background: #0b1524; color: #e2e8f0; padding: 36px 0 44px; }
.console-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 44px; align-items: start; }
.console-lede { min-width: 0; align-self: center; }
.console-kicker { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #7dd3fc; }
.uf-console h1 { color: #f8fafc; font-size: clamp(1.45rem, 3.2vw, 2.05rem); line-height: 1.2; letter-spacing: -0.02em; margin: 8px 0 12px; }
.console-value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; }
.console-value { font-size: clamp(2.5rem, 7vw, 3.8rem); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #f8fafc; line-height: 1; }
.console-unit { font-size: 0.9rem; font-weight: 700; color: #64748b; margin-left: 8px; letter-spacing: 0.04em; }
.console-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.console-chip.up { color: #34d399; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.28); }
.console-chip.down { color: #fb7185; background: rgba(251, 113, 133, 0.1); border: 1px solid rgba(251, 113, 133, 0.28); }
.console-chip.neutral { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.28); }
.console-sub { max-width: 520px; color: #94a3b8; font-size: 0.92rem; margin: 14px 0 18px; }
.console-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.console-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1px solid #2c405e; border-radius: var(--radius); color: #e2e8f0; font-size: 0.84rem; font-weight: 700; text-decoration: none; transition: all 0.15s; background: transparent; }
.console-btn:hover { border-color: #38bdf8; color: #ffffff; background: rgba(56, 189, 248, 0.08); }
.console-badges { display: flex; flex-wrap: wrap; gap: 0; margin-top: 22px; }
.console-badges span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #64748b; padding: 0 14px; border-left: 1px solid #24344d; }
.console-badges span:first-child { padding-left: 0; border-left: 0; }

/* Franja de trayectoria bajo el valor (firma propia, no la tiene valor-utm) */
.console-spark-strip { margin-top: 24px; padding-top: 20px; border-top: 1px solid #1d2b40; max-width: 440px; }
.console-spark-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.76rem; color: #94a3b8; margin-bottom: 8px; }
.console-spark-head strong { font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.console-spark-head .is-up { color: #34d399; }
.console-spark-head .is-down { color: #fb7185; }
.spark-svg { width: 100%; height: 52px; display: block; }
.spark-svg .chart-line { stroke: #38bdf8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark-svg .chart-area { fill: rgba(56, 189, 248, 0.14); }
.spark-svg .chart-dot { fill: #38bdf8; }
.console-spark-range { display: flex; justify-content: space-between; font-size: 0.7rem; color: #64748b; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* Conversor: tarjeta blanca nítida que resalta sobre la consola oscura
   (distinto a valor-utm, que lo funde en oscuro) */
.console-converter {
  grid-area: auto;
  align-self: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.30);
}

/* Gráfico SVG de 30 días (build-time, sin CDN) */
.chart-svg-wrap { height: 230px; }
.main-chart-svg { width: 100%; height: 100%; display: block; }
.main-chart-svg .chart-line { stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.main-chart-svg .chart-area { fill: color-mix(in srgb, var(--teal) 7%, transparent); }
.main-chart-svg .chart-dot { fill: var(--teal); }
.main-chart-svg .chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0.7; }
.chart-axis-row { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ink-muted); padding-top: 8px; }

/* KPIs con dirección */
.market-kpi .kpi-up { color: #059669; }
.market-kpi .kpi-down { color: var(--red); }
:root[data-theme="dark"] .market-kpi .kpi-up { color: #34d399; }

/* Tarjetas de calculadoras: acento lateral propio */
.tool-promo-card { border-left: 3px solid var(--teal); }

/* === Conversor pro: campos grandes, marcados y legibles ================= */
.console-converter { padding: 28px 30px 26px; }
.console-converter .converter-header-row { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.console-converter .converter-title { font-size: 1.5rem; letter-spacing: -0.01em; }
.console-converter .converter-badge { font-size: 0.82rem; padding: 6px 12px; }

.console-converter .calc-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 9px;
}
.console-converter .calc-input {
  font-family: var(--font-sans);
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 0 66px 0 18px;
}
.console-converter .calc-currency-tag {
  right: 18px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
  /* La etiqueta manda: el parlante va justo debajo, centrado con ella. Antes
     solo coincidían los bordes derechos y, como el botón (38px) es más ancho
     que el texto (CLP mide ~32px), su centro quedaba 3px a la izquierda y se
     veía corrido. Igualando el ancho, los centros calzan solos con UF y CLP. */
  --tag-ancho: 38px;
  min-width: var(--tag-ancho);
  text-align: center;
}

/* Campo editable: acento marcado. Campo resultado: tinte suave que lo distingue.
   Se marca con clases desde JS (determinista al invertir la dirección). */
.console-converter .calc-input-wrapper.is-editable {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
  background: var(--paper);
}
.console-converter .calc-input-wrapper.is-result {
  background: color-mix(in srgb, var(--teal) 5%, var(--canvas));
  border-color: color-mix(in srgb, var(--teal) 20%, var(--line));
}

/* Línea de equivalencia clara, sin recortes por cifras largas */
.console-converter .conversion-statement {
  flex-wrap: wrap;
  justify-content: flex-start;
  white-space: normal;
  gap: 6px 10px;
  margin: 20px 0 4px;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--canvas);
  font-size: 0.98rem;
}
.console-converter .conversion-statement > * { overflow: visible; text-overflow: clip; }
.console-converter .conversion-statement strong { color: var(--ink); font-weight: 800; }
.console-converter .conversion-statement #conversion-result { color: var(--teal); font-weight: 850; font-variant-numeric: tabular-nums; }

/* Botones de montos rápidos y reinicio: área táctil cómoda para adultos */
.console-converter .quick-amounts button,
.console-converter .reset-converter {
  min-width: 46px;
  min-height: 46px;
  font-size: 0.9rem;
  border-width: 1.5px;
  border-radius: var(--radius-lg);
}
.console-converter .converter-quick-row { margin-top: 22px; }

@media (min-width: 721px) {
  .console-converter .calc-input-wrapper { height: 94px; border-width: 2px; border-radius: var(--radius-lg); }
  .console-converter .btn-swap-horizontal .swap-circle { width: 58px; height: 58px; }
}

@media (max-width: 980px) {
  .console-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .console-lede { align-self: start; }
  .console-spark-strip { max-width: 100%; }
  .uf-console { padding: 26px 0 32px; }
}
@media (max-width: 600px) {
  .console-converter { padding: 20px 16px 20px; border-radius: 12px; }
  .console-converter .conversion-statement { font-size: 0.9rem; padding: 11px 12px; }
}
@media (max-width: 480px) {
  .console-badges span { padding: 0 9px; }
}

/* === Valor UF v2 next6: sistema hermano de Valor UTM =================== */

.site-header {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header .brand-wordmark { color: var(--ink); }
.site-header .brand-wordmark strong { color: var(--teal); }
.desktop-nav a { color: var(--ink-muted); }
.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] { color: var(--ink); }
.desktop-nav a[aria-current="page"]::after { background: var(--teal); }
.site-header .icon-button,
.site-header .text-size-control { background: var(--canvas); border-color: var(--line); color: var(--ink-soft); }
.site-header .text-size-control button { color: var(--ink-soft); }
/* El hover faltaba en esta capa. Una capa anterior (del header oscuro
   permanente) dejaba color:#f8fafc, asi que al pasar el puntero en tema claro
   la luna quedaba BLANCA sobre fondo claro: desaparecia. Ahora el hover sigue
   el tema, y el blanco se reserva al modo oscuro. */
.site-header .icon-button:hover,
.site-header .icon-button:focus-visible { border-color: var(--teal); color: var(--teal-dark); background: var(--mint); }
.site-header .text-size-control button:hover { color: var(--teal-dark); background: var(--mint); }
:root[data-theme="dark"] .site-header .icon-button:hover,
:root[data-theme="dark"] .site-header .icon-button:focus-visible { border-color: #38bdf8; color: #f8fafc; background: rgba(56, 189, 248, .14); }
:root[data-theme="dark"] .site-header .text-size-control button:hover { color: #f8fafc; background: rgba(56, 189, 248, .14); }
.mobile-nav { background: var(--paper); border-top-color: var(--line); }
.mobile-nav a { color: var(--ink-soft); border-bottom-color: var(--line); }
.mobile-nav a[aria-current="page"] { color: var(--teal); }
.market-strip { background: #071426; border-bottom-color: #15304f; }

.uf-console.home-quote-stage {
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.console-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: 0;
  align-items: stretch;
}
.console-lede {
  min-width: 0;
  align-self: stretch;
  padding: 42px 40px 38px 0;
  border-right: 1px solid var(--line);
}
.console-kicker {
  display: inline-block;
  color: var(--teal-dark);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.uf-console h1 {
  margin: 8px 0 14px;
  color: var(--ink);
  font-size: clamp(1.85rem, 3.3vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.console-value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.console-value {
  color: var(--teal);
  font-size: clamp(2.7rem, 6.5vw, 4rem);
  font-weight: 900;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.console-unit { margin-left: 8px; color: var(--ink-muted); font-size: .82rem; font-weight: 800; letter-spacing: .05em; }
.console-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--radius); font-size: .75rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.console-chip.up { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.console-chip.down { color: #be123c; background: #fff1f2; border: 1px solid #fecdd3; }
.console-chip.neutral { color: var(--ink-muted); background: var(--canvas); border: 1px solid var(--line); }
:root[data-theme="dark"] .console-chip.up { color: #6ee7b7; background: rgba(16, 185, 129, .12); border-color: rgba(110, 231, 183, .25); }
:root[data-theme="dark"] .console-chip.down { color: #fda4af; background: rgba(244, 63, 94, .1); border-color: rgba(253, 164, 175, .24); }
.console-sub { max-width: 500px; margin: 14px 0 18px; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.console-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.console-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); background: var(--paper); font-size: .82rem; font-weight: 750; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.console-btn:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--mint); }
.console-badges { display: flex; flex-wrap: wrap; gap: 0; margin-top: 20px; }
.console-badges span { padding: 0 12px; border-left: 1px solid var(--line); color: var(--ink-muted); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.console-badges span:first-child { padding-left: 0; border-left: 0; }

.console-spark-strip { max-width: 440px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.console-spark-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; color: var(--ink-muted); font-size: .74rem; }
.console-spark-head strong { color: var(--teal-dark); font-size: .8rem; font-variant-numeric: tabular-nums; }
.console-spark-head .is-up { color: #047857; }
.console-spark-head .is-down { color: var(--red); }
.spark-svg { display: block; width: 100%; height: 52px; }
.spark-svg .chart-line { stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark-svg .chart-area { fill: color-mix(in srgb, var(--teal) 10%, transparent); }
.spark-svg .chart-dot { fill: var(--teal); }
.console-spark-range { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ink-muted); font-size: .68rem; font-variant-numeric: tabular-nums; }

.console-converter {
  grid-area: auto;
  align-self: stretch;
  margin: 28px 0 28px 36px;
  padding: 28px 30px 26px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}
.console-converter .converter-header-row { margin-bottom: 16px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.console-converter .converter-title { font-size: 1.45rem; letter-spacing: -.02em; }
.console-converter .converter-badge { padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line)); background: var(--paper); color: var(--teal-dark); font-size: .76rem; }

.converter-period-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}
.converter-period-row label,
.converter-period-status {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.converter-period-row label > span,
.converter-period-status strong,
.converter-period-status span { display: block; }
.converter-period-row label > span,
.converter-period-status strong {
  margin-bottom: 5px;
  color: var(--ink-muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.converter-period-row input {
  width: 100%;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  outline: none;
}
.converter-period-row label:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent); }
.converter-period-status { display: flex; flex-direction: column; justify-content: center; }
.converter-period-status span { overflow: hidden; color: var(--ink); font-size: .8rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.converter-period-status.is-error { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); background: color-mix(in srgb, var(--red) 6%, var(--paper)); }
.converter-period-status.is-error strong { color: var(--red); }

.output-currency-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.output-currency-row > span { color: var(--ink-muted); font-size: .74rem; font-weight: 750; }
.output-currency-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.output-currency-switch button { min-width: 48px; min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--ink-muted); font-size: .76rem; font-weight: 800; }
.output-currency-switch button:hover { color: var(--teal-dark); }
.output-currency-switch button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.output-currency-switch button:disabled { color: var(--ink-muted); cursor: not-allowed; opacity: .42; }
.converter-currency-note { margin: -8px 0 14px; color: var(--ink-muted); font-size: .68rem; line-height: 1.45; }

.console-converter .converter-quick-row { margin-top: 18px; }
.reset-converter.is-historical { border-color: var(--teal); background: var(--mint); color: var(--teal-dark); }

@media (max-width: 980px) {
  .console-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .console-lede { align-self: start; padding: 30px 0 0; border-right: 0; }
  .console-spark-strip { max-width: 100%; }
  .uf-console.home-quote-stage { padding-bottom: 30px; }
  .console-converter { margin: 0; }
}
@media (max-width: 600px) {
  .console-lede { padding-top: 24px; }
  .uf-console h1 { font-size: 1.85rem; }
  .console-value { font-size: clamp(2.45rem, 13vw, 3.15rem); }
  .console-converter { padding: 20px 16px; border-radius: 8px; }
  .converter-period-row { grid-template-columns: 1fr; }
  .output-currency-row { align-items: flex-start; flex-direction: column; }
  .console-converter .conversion-statement { padding: 11px 12px; font-size: .9rem; }
}
@media (max-width: 480px) {
  .console-badges span { padding: 0 9px; }
  .output-currency-switch { width: 100%; }
  .output-currency-switch button { flex: 1; }
}

/* === next8: primer viewport compacto, accesorios progresivos ============ */
.market-strip { font-size: .7rem; }
.market-strip-inner { min-height: 28px; }
.header-inner { min-height: 58px; }
.brand-symbol { width: 31px; height: 31px; }
.brand-symbol-icon { width: 15px; height: 15px; }
.brand-wordmark { font-size: 17px; }
.desktop-nav { gap: 22px; }
.desktop-nav a { font-size: .8rem; }
.icon-button { width: 32px; height: 32px; }
.icon-button svg { width: 17px; height: 17px; }
.text-size-control button { min-width: 31px; height: 31px; padding: 0 6px; font-size: .72rem; }

.console-hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.console-lede { padding: 28px 32px 24px 0; }
.uf-console h1 { margin: 6px 0 10px; font-size: clamp(1.7rem, 3vw, 2.25rem); }
.console-value { font-size: clamp(2.55rem, 5.6vw, 3.35rem); }
.console-chip { padding: 3px 8px; font-size: .7rem; }
.console-sub { margin: 10px 0 12px; font-size: .82rem; line-height: 1.5; }
.console-btn { min-height: 34px; padding: 6px 11px; font-size: .74rem; }
.console-btn svg { width: 12px; height: 12px; }
.console-spark-strip { margin-top: 15px; padding-top: 12px; }
.console-spark-head { margin-bottom: 5px; font-size: .68rem; }
.spark-svg { height: 40px; }
.console-spark-range { margin-top: 3px; font-size: .62rem; }
.console-badges { margin-top: 13px; }
.console-badges span { padding: 0 10px; font-size: .6rem; }

.console-converter {
  position: relative;
  margin: 14px 0 14px 24px;
  padding: 16px 18px;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--ink-muted) 22%, var(--line));
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .11), 0 2px 8px rgba(15, 23, 42, .05);
}
.console-converter .converter-header-row { margin-bottom: 9px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 20%, var(--line)); }
.console-converter .hero-kicker { display: inline-flex; align-items: center; gap: 7px; }
.console-converter .hero-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 11%, transparent); }
.console-converter .converter-title { font-size: 1.18rem; }
.console-converter .converter-badge { min-width: 118px; padding: 5px 10px; border-color: color-mix(in srgb, var(--teal) 25%, var(--line)); border-radius: 4px; background: var(--mint); font-size: .68rem; text-align: center; }
.converter-period-row { grid-template-columns: minmax(155px, .8fr) minmax(0, 1.2fr) 40px; gap: 7px; margin-bottom: 8px; }
.converter-period-row label,
.converter-period-status { height: 52px; padding: 7px 10px; border-color: color-mix(in srgb, var(--ink-muted) 22%, var(--line)); border-radius: 5px; background: var(--canvas); }
.converter-period-row label > span,
.converter-period-status strong { margin-bottom: 2px; font-size: .6rem; letter-spacing: 0; text-transform: none; }
.converter-period-row input { min-height: 25px; font-size: .72rem; }
.converter-period-status span { font-size: .7rem; }
.converter-period-row .reset-converter { align-self: stretch; width: 40px; min-width: 40px; max-width: 40px; min-height: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius: 5px; background: var(--canvas); color: var(--teal-dark); font-size: .66rem; }
.converter-period-row .reset-converter span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.converter-period-row .reset-converter.is-historical { width: 40px; min-width: 40px; max-width: 40px; border-color: var(--teal); background: var(--teal); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--teal) 22%, transparent); }
.converter-period-row .reset-converter:hover { border-color: var(--teal-dark); background: var(--teal-dark); color: #fff; }

.output-currency-row { margin-bottom: 9px; }
.output-currency-row > span { font-size: .66rem; }
.output-currency-switch { border-width: 1px; background: var(--canvas); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04); }
.output-currency-switch button { min-width: 42px; min-height: 28px; padding: 0 9px; font-size: .68rem; }
.output-currency-switch button[aria-pressed="true"] { box-shadow: 0 2px 7px color-mix(in srgb, var(--teal) 24%, transparent); }
.converter-currency-note { min-height: 14px; margin: -3px 0 5px; overflow: hidden; font-size: .62rem; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; visibility: hidden; opacity: 0; }
.converter-currency-note.is-visible { visibility: visible; opacity: 1; }
.console-converter .calc-label { margin-bottom: 4px; color: var(--ink-soft); font-size: .7rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.console-converter .calc-input-wrapper { height: 72px; border-width: 1px; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .035); }
.console-converter .calc-input-wrapper.is-editable { border-width: 1.5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 8%, transparent); }
.console-converter .calc-input-wrapper.is-result { background: color-mix(in srgb, var(--teal) 6%, var(--paper)); }
.console-converter .calc-input { padding: 0 52px 0 13px; }
.console-converter .calc-currency-tag { right: 13px; font-size: .8rem; }
.console-converter .btn-swap-horizontal { align-self: end; margin-bottom: 11px; padding: 0; }
.console-converter .btn-swap-horizontal .swap-circle { width: 50px; height: 50px; border: 1px solid color-mix(in srgb, var(--teal-dark) 60%, var(--teal)); background: linear-gradient(145deg, var(--teal) 0%, var(--teal-dark) 100%); color: #fff; box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px color-mix(in srgb, var(--teal-dark) 28%, var(--line)), 0 10px 24px color-mix(in srgb, var(--teal) 30%, transparent); transition: transform .18s ease, box-shadow .18s ease; }
.console-converter .btn-swap-horizontal .swap-circle svg { width: 22px; height: 22px; transition: transform .22s ease; }
.console-converter .btn-swap-horizontal:hover .swap-circle { border-color: var(--teal-dark); background: linear-gradient(145deg, var(--teal-dark) 0%, var(--teal) 100%); color: #fff; box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px color-mix(in srgb, var(--teal-dark) 36%, var(--line)), 0 13px 30px color-mix(in srgb, var(--teal) 38%, transparent); transform: translateY(-2px); }
.console-converter .btn-swap-horizontal:hover .swap-circle svg { transform: rotate(180deg); }
.console-converter .conversion-statement { margin: 9px 0 0; padding: 8px 11px; border-radius: 4px; background: color-mix(in srgb, var(--ink-muted) 6%, var(--canvas)); font-size: .78rem; }

.converter-tools { margin-top: 8px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--ink-muted) 22%, var(--line)); border-radius: 4px; background: var(--canvas); }
.converter-tools[open] { border-color: color-mix(in srgb, var(--teal) 32%, var(--line)); background: var(--paper); }
.converter-tools summary { display: flex; align-items: center; gap: 9px; min-height: 36px; color: var(--ink-soft); cursor: pointer; list-style: none; font-size: .72rem; font-weight: 800; }
.converter-tools summary::-webkit-details-marker { display: none; }
.converter-tools summary small { flex: 1; overflow: hidden; color: var(--ink-muted); font-size: .58rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.converter-tools summary::after { content: '+'; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; color: var(--teal-dark); font-size: .9rem; line-height: 1; }
.converter-tools[open] summary::after { content: '−'; }
.converter-tools-panel { padding: 4px 0 10px; }
.converter-tools .converter-quick-row { display: flex; margin: 0 0 7px; }
.converter-tools .converter-quick-row > span { color: var(--ink-muted); font-size: .62rem; font-weight: 750; }
.converter-tools .quick-amounts { margin: 0; }
.converter-tools .quick-amounts button { min-width: 34px; min-height: 32px; padding: 4px 7px; border-radius: var(--radius); font-size: .7rem; }
.console-converter .converter-actions-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px 42px; gap: 6px; }
.console-converter .action-btn { min-width: 0; min-height: 34px; padding: 0 8px; font-size: .68rem; }
.console-converter .compact-action { padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); }
.console-converter .compact-action:last-child { font-size: .56rem; letter-spacing: -.02em; }
.converter-helper { margin-top: 6px; font-size: .6rem; }
:root[data-theme="dark"] .console-converter { box-shadow: 0 18px 42px rgba(0, 0, 0, .32); }

@media (max-width: 980px) {
  .console-lede { padding: 24px 0 0; }
  .console-converter { margin: 0; }
}
@media (max-width: 600px) {
  .header-inner { min-height: 54px; }
  .converter-period-row { grid-template-columns: minmax(0, 1fr) auto; }
  .converter-period-status { grid-column: 1 / -1; grid-row: 2; }
  .console-converter .btn-swap-horizontal { align-self: center; margin: 6px auto; }
  .console-converter .btn-swap-horizontal .swap-circle { width: 46px; height: 46px; }
  .converter-tools .converter-quick-row { align-items: flex-start; flex-direction: column; }
  .converter-tools .quick-amounts { width: 100%; }
  .converter-tools .quick-amounts button { flex: 1; }
  .console-converter .converter-actions-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px 40px; }
}


/* === v0.4.0: cockpit UF amplio, accesible y centrado en la tarea ======= */
:root { --shell: 1440px; }

.market-strip-inner { min-height: 30px; }
.header-inner { min-height: 66px; }
.uf-console.home-quote-stage { background: linear-gradient(90deg, var(--paper) 0 42%, var(--canvas) 42% 100%); }
.console-hero-grid {
  grid-template-columns: minmax(430px, .82fr) minmax(650px, 1.18fr);
  min-height: 558px;
  align-items: stretch;
}
.console-lede {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 48px 34px 4px;
}
.console-kicker { font-size: .82rem; letter-spacing: .08em; }
.uf-console h1 { max-width: 610px; margin: 10px 0 18px; font-size: clamp(2.45rem, 3.55vw, 3.45rem); line-height: 1.03; }
.console-value { font-size: clamp(3.65rem, 5.5vw, 5rem); }
.console-unit { font-size: 1rem; }
.console-chip { padding: 7px 10px; font-size: .84rem; }
.console-sub { max-width: 600px; margin: 18px 0 20px; font-size: 1rem; line-height: 1.65; }
.console-btn { min-height: 46px; padding: 10px 16px; font-size: .9rem; }
.console-spark-strip { max-width: 560px; margin-top: 26px; padding-top: 20px; }
.console-spark-head { font-size: .82rem; }
.console-spark-head strong { font-size: .9rem; }
.spark-svg { height: 58px; }
.console-spark-range { font-size: .76rem; }
.console-badges { margin-top: 18px; }
.console-badges span { font-size: .7rem; }

.console-converter {
  align-self: stretch;
  margin: 24px 0 24px 32px;
  padding: 26px 28px 24px;
  border: 1px solid color-mix(in srgb, var(--ink-muted) 34%, var(--line));
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .1), 0 2px 6px rgba(15, 23, 42, .04);
}
.console-converter .converter-header-row { margin-bottom: 18px; padding-bottom: 18px; }
.console-converter .hero-kicker { font-size: .78rem; }
.console-converter .converter-title { margin-top: 3px; font-size: 1.55rem; }
.console-converter .converter-badge { padding: 8px 12px; font-size: .88rem; font-weight: 850; }

.converter-period-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 10px;
  margin-bottom: 18px;
}
.converter-date-group {
  display: grid;
  grid-template-columns: 92px minmax(150px, 1fr) 120px;
  gap: 10px;
  min-width: 0;
}
.converter-date-group label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 70px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--canvas);
}
.converter-date-group label > span {
  margin: 0 0 3px;
  color: var(--ink-muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.converter-date-group select {
  width: 100%;
  min-height: 32px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 850;
  cursor: pointer;
}
.converter-date-group label:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 13%, transparent); }
.converter-period-row .reset-converter,
.converter-period-row .reset-converter.is-historical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 86px;
  min-width: 86px;
  max-width: 86px;
  min-height: 70px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--teal) 42%, var(--line));
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 800;
}
.converter-period-row .reset-converter span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.converter-period-row .reset-converter svg { width: 18px; height: 18px; }
.converter-period-status {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 13px;
  border: 0;
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  background: var(--mint);
}
.converter-period-status strong { margin: 0; color: var(--teal-dark); font-size: .78rem; letter-spacing: 0; text-transform: none; }
.converter-period-status span { color: var(--ink); font-size: .9rem; font-weight: 750; }

.console-converter .converter-row { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); gap: 14px; }
.console-converter .calc-label { min-height: auto; margin-bottom: 7px; font-size: .82rem; font-weight: 800; }
.console-converter .calc-input-wrapper { height: 92px; border-radius: 5px; }
.console-converter .calc-input { padding: 0 66px 0 18px; font-size: clamp(1.75rem, 2.35vw, 2.25rem); }
.console-converter .calc-currency-tag { right: 18px; font-size: .9rem; }
.console-converter .btn-swap-horizontal { margin-bottom: 17px; }
.console-converter .btn-swap-horizontal .swap-circle { width: 58px; height: 58px; }
.console-converter .btn-swap-horizontal .swap-circle svg { width: 25px; height: 25px; }
.console-converter .conversion-statement { min-height: 44px; margin-top: 12px; padding: 10px 14px; font-size: .9rem; }
.converter-tools { margin-top: 12px; padding-inline: 13px; }
.converter-tools summary { min-height: 46px; font-size: .86rem; }
.converter-tools summary small { font-size: .72rem; }
.converter-helper { margin-top: 10px; font-size: .7rem; }

@media (max-width: 1100px) {
  .uf-console.home-quote-stage { background: var(--paper); }
  .console-hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .console-lede { padding: 34px 0 30px; border-right: 0; }
  .console-converter { margin: 0 0 30px; }
  .console-spark-strip { max-width: 100%; }
}

@media (max-width: 720px) {
  .converter-date-group { grid-template-columns: 78px minmax(0, 1fr) 104px; gap: 8px; }
  .console-converter { padding: 22px 18px; }
}

@media (max-width: 600px) {
  :root { --shell: 100%; }
  .uf-console h1 { font-size: 2rem; }
  .console-value { font-size: clamp(3rem, 15vw, 4rem); }
  .console-sub { font-size: .96rem; }
  .converter-period-row { grid-template-columns: 1fr; }
  .converter-date-group { grid-template-columns: 72px minmax(0, 1fr) 88px; }
  .converter-date-group label { min-height: 66px; padding-inline: 9px; }
  .converter-date-group select { font-size: .96rem; }
  .converter-period-row .reset-converter,
  .converter-period-row .reset-converter.is-historical {
    grid-column: 1;
    flex-direction: row;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 48px;
  }
  .converter-period-status { grid-row: auto; }
  .console-converter .converter-row,
  .console-converter .converter-row.is-reversed { grid-template-columns: 1fr; gap: 8px; }
  .console-converter .calc-input-wrapper { height: 76px; }
  .console-converter .btn-swap-horizontal { margin: 2px auto; }
  .console-converter .btn-swap-horizontal .swap-circle { width: 50px; height: 50px; }
  .console-converter .calc-input { font-size: 1.7rem; text-align: left; }
}
/* === v0.4.0 final: amplitud selectiva, controles adultos y fecha robusta === */
:root {
  --shell: 1120px;
  --shell-wide: 1440px;
  --control-line: #64748b;
}
:root[data-theme="dark"] {
  --ink-muted: #94a3b8;
  --control-line: #94a3b8;
}

.market-strip-inner,
.header-inner,
.console-hero-grid {
  width: min(calc(100% - 64px), var(--shell-wide));
}

.uf-console.home-quote-stage {
  overflow: visible;
  background: var(--paper);
}
.console-hero-grid {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
  min-height: 558px;
}
.console-hero-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 calc(50% - 50vw) 0 41%;
  background: var(--canvas);
  pointer-events: none;
}
.console-lede,
.console-converter {
  position: relative;
  z-index: 1;
}
.console-converter {
  overflow: visible;
  margin: 24px 0 24px 32px;
}

.site-header .icon-button {
  width: 46px;
  height: 46px;
}
.site-header .text-size-control button {
  min-width: 46px;
  height: 46px;
  font-size: .82rem;
}
.site-header .text-size-control button[aria-pressed="true"] {
  background: var(--mint);
  color: var(--teal-dark);
}

.converter-period-row {
  grid-template-columns: minmax(0, 1fr) 118px 86px;
  align-items: end;
  gap: 10px;
  margin-bottom: 18px;
}
.converter-date-group {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.converter-date-group legend {
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  color: var(--ink-soft);
  font-size: .88rem;
  font-weight: 850;
}
.converter-date-fields {
  display: grid;
  grid-template-columns: 92px minmax(150px, 1fr) 120px;
  gap: 10px;
  min-width: 0;
}
.converter-date-group label {
  min-height: 70px;
  height: auto !important;
  padding: 9px 12px;
  border-color: var(--control-line);
  background: var(--paper);
}
.converter-date-group label > span {
  font-size: .84rem;
  letter-spacing: .025em;
}
.converter-date-group select {
  min-height: 34px;
  font-size: 1.05rem;
}
.converter-date-group select:disabled {
  cursor: wait;
  opacity: .72;
}
.apply-date-button,
.converter-period-row .reset-converter,
.converter-period-row .reset-converter.is-historical {
  align-self: end;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 70px;
  margin: 0;
  border-radius: 4px;
  font-size: .86rem;
  font-weight: 850;
}
.apply-date-button {
  border: 1px solid var(--teal-dark);
  background: var(--teal);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--teal) 22%, transparent);
}
.apply-date-button:hover:not(:disabled),
.apply-date-button:focus-visible {
  background: var(--teal-dark);
}
.apply-date-button:disabled {
  border-color: var(--line);
  background: var(--canvas);
  color: var(--ink-muted);
  box-shadow: none;
  cursor: default;
  opacity: .82;
}
.converter-period-row .reset-converter,
.converter-period-row .reset-converter.is-historical {
  border-color: var(--control-line);
  background: var(--paper);
  color: var(--teal-dark);
}
.converter-period-status {
  grid-column: 1 / -1;
  height: auto !important;
  min-height: 52px;
  align-self: stretch;
  flex-wrap: wrap;
  border-left-width: 4px;
}
.converter-period-status strong {
  font-size: .86rem;
}
.converter-period-status span {
  overflow: visible;
  font-size: 1rem;
  text-overflow: clip;
  white-space: normal;
}

.console-converter .converter-row {
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  gap: 18px;
  overflow: visible;
}
.console-converter .calc-label {
  font-size: .88rem;
}
.console-converter .calc-input-wrapper {
  height: 94px;
  overflow: hidden;
  border-color: var(--control-line);
}
.console-converter .calc-input-wrapper.is-editable {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 13%, transparent);
}
.console-converter .btn-swap-horizontal {
  z-index: 2;
  min-width: 76px;
  overflow: visible;
  margin-bottom: 16px;
}
.console-converter .btn-swap-horizontal .swap-circle {
  width: 62px;
  height: 62px;
  border: 1px solid var(--teal-dark);
  background: linear-gradient(145deg, var(--teal), var(--teal-dark));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent), 0 12px 26px color-mix(in srgb, var(--teal) 30%, transparent);
}
.console-converter .btn-swap-horizontal:hover .swap-circle,
.console-converter .btn-swap-horizontal:focus-visible .swap-circle {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 24%, transparent), 0 15px 30px color-mix(in srgb, var(--teal) 36%, transparent);
}
.console-converter .conversion-statement {
  min-height: 48px;
  font-size: .96rem;
}

.converter-tools summary {
  min-height: 48px;
  font-size: .9rem;
}
.converter-tools summary small {
  font-size: .76rem;
}
.converter-tools .converter-quick-row > span {
  font-size: .8rem;
}
.converter-tools .quick-amounts button,
.console-converter .action-btn {
  min-height: 44px;
  font-size: .78rem;
}
.converter-tools .quick-amounts button {
  min-width: 44px;
}
.console-converter .compact-action {
  min-width: 44px;
}
.converter-helper {
  font-size: .76rem;
}

.apply-date-button:focus-visible,
.converter-date-group select:focus-visible,
.converter-period-row .reset-converter:focus-visible,
.console-converter .action-btn:focus-visible,
.converter-tools summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 42%, transparent);
  outline-offset: 3px;
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .console-hero-grid {
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
    min-height: 500px;
  }
  .console-hero-grid::before {
    inset: 0 calc(50% - 50vw) 0 36%;
  }
  .console-lede {
    min-width: 0;
    padding: 24px 28px 20px 0;
  }
  .uf-console h1 {
    max-width: 100%;
    font-size: clamp(2.15rem, 3vw, 2.75rem);
  }
  .console-value {
    font-size: clamp(3.35rem, 5vw, 4.25rem);
  }
  .console-converter {
    min-width: 0;
    margin: 12px 0 12px 20px;
    padding: 16px 20px 14px;
  }
  .console-converter .converter-header-row {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .console-converter .converter-title {
    font-size: 1.35rem;
  }
  .console-converter .converter-badge {
    padding: 6px 10px;
    font-size: .78rem;
  }
  .converter-period-row {
    grid-template-columns: minmax(0, 1fr) 104px 78px;
    gap: 7px 8px;
    margin-bottom: 10px;
  }
  .converter-date-group legend {
    margin-bottom: 3px;
    font-size: .78rem;
  }
  .converter-date-fields {
    grid-template-columns: 72px minmax(0, 1fr) 96px;
    gap: 8px;
  }
  .converter-date-group label {
    min-height: 56px;
    padding: 4px 8px;
  }
  .converter-date-group label > span {
    font-size: .76rem;
  }
  .converter-date-group select {
    min-height: 32px;
    font-size: 1rem;
  }
  .apply-date-button,
  .converter-period-row .reset-converter,
  .converter-period-row .reset-converter.is-historical {
    min-height: 56px;
    font-size: .76rem;
  }
  .converter-period-status {
    min-height: 40px;
    padding: 6px 10px;
  }
  .converter-period-status strong {
    font-size: .76rem;
  }
  .converter-period-status span {
    font-size: .88rem;
  }
  .console-converter .converter-row {
    grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
    gap: 12px;
  }
  .console-converter .calc-label {
    margin-bottom: 4px;
    font-size: .8rem;
  }
  .console-converter .calc-input-wrapper {
    height: 76px;
  }
  .console-converter .btn-swap-horizontal {
    min-width: 66px;
    margin-bottom: 11px;
  }
  .console-converter .btn-swap-horizontal .swap-circle {
    width: 54px;
    height: 54px;
  }
  .console-converter .conversion-statement {
    min-height: 38px;
    margin-top: 8px;
    padding: 6px 10px;
    font-size: .84rem;
  }
  .converter-tools {
    margin-top: 8px;
  }
  .converter-tools summary {
    min-height: 44px;
  }
  .converter-helper {
    display: none;
  }
}

@media (max-width: 1100px) {
  .uf-console.home-quote-stage {
    background: var(--paper);
  }
  .console-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .console-hero-grid::before {
    display: none;
  }
  .console-lede {
    padding: 34px 0 30px;
  }
  .console-converter {
    margin: 0 0 32px;
  }
  .console-spark-strip {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .market-strip-inner,
  .header-inner,
  .console-hero-grid {
    width: min(calc(100% - 40px), var(--shell-wide));
  }
  .converter-period-row {
    grid-template-columns: minmax(0, 1fr) 112px 86px;
  }
  .converter-date-fields {
    grid-template-columns: 78px minmax(0, 1fr) 104px;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .converter-period-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .converter-date-group,
  .converter-period-status {
    grid-column: 1 / -1;
  }
  .converter-date-fields {
    grid-template-columns: 72px minmax(0, 1fr) 96px;
  }
  .apply-date-button,
  .converter-period-row .reset-converter,
  .converter-period-row .reset-converter.is-historical {
    grid-column: auto;
    min-height: 52px;
  }
  .converter-period-status {
    grid-row: auto;
  }
  .console-converter .converter-row,
  .console-converter .converter-row.is-reversed {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .console-converter .btn-swap-horizontal {
    min-width: 64px;
    margin: 4px auto;
  }
  .console-converter .btn-swap-horizontal .swap-circle {
    width: 54px;
    height: 54px;
  }
  .console-converter .converter-actions-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .converter-date-fields {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .converter-date-fields label:last-child {
    grid-column: 1 / -1;
  }
  .converter-date-group select {
    font-size: 1rem;
  }
}

/* === v0.5.0: consola Lambo, jerarquía nítida y respuesta inmediata ===== */
.console-converter {
  border: 1px solid color-mix(in srgb, var(--teal) 20%, var(--line));
  border-top: 4px solid var(--teal);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}
.console-converter .converter-header-row {
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom-color: color-mix(in srgb, var(--ink-muted) 18%, var(--line));
}
.console-converter .converter-badge {
  border-color: color-mix(in srgb, var(--teal) 38%, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--teal) 6%, var(--paper));
  box-shadow: none;
}

.converter-period-row {
  grid-template-columns: minmax(0, 1fr) 224px;
  align-items: end;
  gap: 10px 12px;
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--ink-muted) 20%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--canvas) 76%, var(--paper));
}
.converter-date-group legend {
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.2;
}
.converter-date-fields {
  grid-template-columns: 92px minmax(140px, 1fr) 118px;
  gap: 8px;
}
.converter-date-group label {
  box-sizing: border-box;
  height: 72px !important;
  min-height: 72px;
  justify-content: center;
  padding: 8px 11px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ink-muted) 36%, var(--line));
  border-radius: 5px;
  background: var(--paper);
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.converter-date-group label:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 15%, transparent);
}
.converter-date-group label > span {
  margin-bottom: 1px;
  color: var(--ink-muted);
  font-size: .7rem;
  line-height: 1;
}
.converter-date-group select {
  min-height: 36px;
  line-height: 1.1;
}
.converter-date-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(84px, .75fr);
  gap: 8px;
  height: 72px;
}
.converter-date-actions .apply-date-button,
.converter-date-actions .reset-converter,
.converter-date-actions .reset-converter.is-historical {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 72px;
  min-height: 72px;
  align-self: stretch;
  margin: 0;
  border-radius: 5px;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
.converter-date-actions .apply-date-button:not(:disabled) {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
}
.converter-date-actions .apply-date-button:not(:disabled):hover {
  background: var(--teal);
  transform: translateY(-1px);
}
.converter-date-actions .reset-converter,
.converter-date-actions .reset-converter.is-historical {
  flex-direction: row;
  gap: 7px;
  padding: 8px;
  border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
  background: var(--paper);
}
.converter-date-actions .reset-converter:hover {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, var(--paper));
  color: var(--teal-dark);
}
.converter-period-status {
  grid-column: 1 / -1;
  min-height: 44px;
  padding: 8px 12px;
  border-left-width: 3px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--teal) 7%, var(--paper));
}
.converter-period-status strong {
  color: var(--teal-dark);
}

.console-converter .converter-row {
  align-items: end;
  gap: 14px;
}
.console-converter .calc-input-wrapper {
  border: 1px solid color-mix(in srgb, var(--ink-muted) 38%, var(--line));
  border-radius: 6px;
  background: var(--paper);
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.console-converter .calc-input-wrapper.is-editable {
  border: 2px solid var(--teal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 10%, transparent);
}
.console-converter .calc-input-wrapper.is-result {
  background: color-mix(in srgb, var(--teal) 5%, var(--paper));
}
.console-converter .btn-swap-horizontal {
  margin-bottom: 15px;
  transition: transform .12s ease;
}
.console-converter .btn-swap-horizontal .swap-circle {
  border: 0;
  background: var(--teal-dark);
  box-shadow: 0 6px 14px rgba(7, 89, 133, .22);
  transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.console-converter .btn-swap-horizontal:hover .swap-circle,
.console-converter .btn-swap-horizontal:focus-visible .swap-circle {
  background: var(--teal);
  box-shadow: 0 8px 18px rgba(7, 89, 133, .26);
  transform: translateY(-1px);
}
.console-converter .btn-swap-horizontal .swap-circle svg,
.console-converter .btn-swap-horizontal:hover .swap-circle svg,
.console-converter .btn-swap-horizontal.swapped .swap-circle svg {
  transform: none;
  transition: none;
}
.console-converter .conversion-statement {
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink-muted) 7%, var(--paper));
}
.converter-tools {
  border-color: color-mix(in srgb, var(--ink-muted) 24%, var(--line));
  border-radius: 6px;
  background: var(--paper);
  box-shadow: none;
}
.converter-tools summary,
.converter-tools .quick-amounts button,
.console-converter .action-btn {
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .console-converter {
    padding: 15px 18px 13px;
  }
  .console-converter .converter-header-row {
    margin-bottom: 9px;
    padding-bottom: 9px;
  }
  .converter-period-row {
    grid-template-columns: minmax(0, 1fr) 196px;
    gap: 7px 9px;
    margin-bottom: 9px;
    padding: 9px;
  }
  .converter-date-group legend {
    margin-bottom: 4px;
  }
  .converter-date-fields {
    grid-template-columns: 72px minmax(0, 1fr) 94px;
    gap: 7px;
  }
  .converter-date-group label,
  .converter-date-actions,
  .converter-date-actions .apply-date-button,
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    height: 62px !important;
    min-height: 62px;
  }
  .converter-date-group label {
    padding: 6px 8px;
  }
  .converter-date-actions {
    grid-template-columns: minmax(0, 1.15fr) minmax(76px, .85fr);
    gap: 7px;
  }
  .converter-period-status {
    min-height: 38px;
    padding-block: 5px;
  }
  .console-converter .calc-input-wrapper {
    height: 74px;
  }
  .console-converter .btn-swap-horizontal {
    margin-bottom: 10px;
  }
}

@media (max-width: 720px) {
  .converter-period-row {
    grid-template-columns: 1fr;
  }
  .converter-date-fields {
    grid-template-columns: 78px minmax(0, 1fr) 104px;
  }
  .converter-date-actions {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .converter-period-row {
    padding: 10px;
  }
  .converter-date-fields {
    grid-template-columns: 68px minmax(0, 1fr) 90px;
    gap: 6px;
  }
  .converter-date-actions {
    grid-template-columns: minmax(0, 1fr) minmax(112px, .72fr);
    height: 54px;
  }
  .converter-date-actions .apply-date-button,
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    height: 54px;
    min-height: 54px;
  }
}

@media (max-width: 380px) {
  .converter-date-fields {
    grid-template-columns: 78px minmax(0, 1fr);
  }
  .converter-date-fields label:last-child {
    grid-column: 1 / -1;
  }
}

/* === v0.6.0: Valor UF y Valor UTM, hermanos de producto ================ */
:root {
  --uf-gold: #d1a62c;
  --uf-console-surface: #f4f8fb;
}
:root[data-theme="dark"] {
  --uf-gold: #d7ad47;
  --uf-console-surface: #111d2e;
}
.console-converter {
  gap: 0;
  overflow: visible;
  padding: 24px 26px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--uf-console-surface);
  box-shadow: none;
}
.console-converter .converter-header-row {
  align-items: flex-start;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.console-converter .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--teal-dark);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.console-converter .hero-kicker::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 0;
  box-shadow: none;
  background: var(--uf-gold);
}
.console-converter .converter-title {
  margin-top: 7px;
  font-size: 1.72rem;
}
.console-converter .converter-badge {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--teal-dark);
  font-size: .86rem;
  font-weight: 850;
}

.converter-period-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: end;
  gap: 12px;
  margin: 16px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.converter-date-group legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.converter-date-fields {
  display: grid;
  grid-template-columns: 92px minmax(140px, 1fr) 112px;
  gap: 8px;
  max-width: 460px;
}
.converter-date-group label {
  display: grid;
  gap: 6px;
  height: auto !important;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.converter-date-group label > span {
  margin: 0;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.converter-date-group select {
  width: 100%;
  height: 54px;
  min-height: 54px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.converter-date-group label:focus-within {
  box-shadow: none;
}
.converter-date-group select:focus-visible {
  border-color: var(--teal);
  outline: 3px solid color-mix(in srgb, var(--teal) 18%, transparent);
  outline-offset: 1px;
}
.converter-date-actions {
  display: grid;
  width: 54px;
  height: 54px;
}
.converter-date-actions .reset-converter,
.converter-date-actions .reset-converter.is-historical {
  display: grid;
  place-items: center;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: none;
}
.converter-date-actions .reset-converter svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}
.converter-date-actions .reset-converter:hover,
.converter-date-actions .reset-converter:focus-visible {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, var(--paper));
  color: var(--teal-dark);
  outline: 0;
}
.converter-date-actions .reset-converter.is-historical {
  border-color: var(--uf-gold);
  background: var(--uf-gold);
  color: #07111f;
}
.converter-period-status {
  position: absolute;
  width: 1px;
  height: 1px !important;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.console-converter .converter-row,
.console-converter .converter-row.is-reversed {
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  overflow: visible;
}
.console-converter .calc-field-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  height: 124px;
  padding: 17px 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.console-converter .calc-label {
  min-height: 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.console-converter .calc-input-wrapper,
.console-converter .calc-input-wrapper.is-editable,
.console-converter .calc-input-wrapper.is-result {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 56px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.console-converter .calc-input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 54px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 850;
  line-height: 1;
  text-align: left;
}
.console-converter .calc-input:not([readonly]) {
  border-bottom-color: var(--teal);
}
.console-converter .calc-input:focus-visible {
  outline: 0;
}
.console-converter .calc-currency-tag,
.console-converter .calc-prefix {
  position: static;
  flex: 0 0 auto;
  margin-bottom: 10px;
  transform: none;
  color: var(--ink-soft);
  font-size: .92rem;
  font-weight: 850;
}
.console-converter .calc-prefix {
  margin-right: 2px;
  margin-bottom: 0;
  align-self: center;
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
}
.console-converter .btn-swap-horizontal {
  align-self: center;
  min-width: 58px;
  margin: 0;
  padding: 0;
}
.console-converter .btn-swap-horizontal .swap-circle {
  width: 58px;
  height: 58px;
  border: 2px solid var(--paper);
  outline: 1px solid color-mix(in srgb, var(--teal) 58%, var(--line));
  background: var(--teal-dark);
  color: #fff;
  box-shadow: 0 8px 20px rgba(7, 17, 31, .16), 0 0 0 5px var(--uf-console-surface);
}
.console-converter .btn-swap-horizontal:hover .swap-circle,
.console-converter .btn-swap-horizontal:focus-visible .swap-circle {
  background: var(--teal);
  box-shadow: 0 10px 24px rgba(7, 17, 31, .2), 0 0 0 5px color-mix(in srgb, var(--teal) 8%, var(--uf-console-surface));
  transform: none;
}
.console-converter .swap-direction-text {
  display: none;
}
.console-converter .conversion-statement {
  display: flex;
  justify-content: center;
  gap: .35em;
  min-height: 0;
  margin: 16px 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: .92rem;
  font-weight: 500;
}
.console-converter .conversion-statement strong,
.console-converter .conversion-statement span:last-child {
  color: inherit;
  font-weight: 500;
}

.converter-calm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.converter-calm-utilities {
  grid-column: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.converter-calm-utilities > span {
  color: var(--ink-soft);
  font-size: .82rem;
}
.converter-calm-row .quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.converter-calm-row .quick-amounts button {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 850;
}
.converter-calm-row .quick-amounts button:hover,
.converter-calm-row .quick-amounts button:focus-visible {
  border-color: var(--teal);
  color: var(--teal-dark);
}
.converter-calm-row .converter-actions-row {
  grid-column: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
}
.converter-calm-row .action-btn {
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: .86rem;
  font-weight: 850;
}
.converter-calm-row .primary-action {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
  color: #fff;
}
.converter-calm-row .whatsapp-action {
  gap: 7px;
  border: 1px solid #148943;
  background: transparent;
  color: #148943;
}
.converter-calm-row .whatsapp-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.console-converter .converter-helper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: .72rem;
}
.converter-live-dot {
  position: relative;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #51d6a4;
}
.converter-live-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: rgba(81, 214, 164, .2);
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .console-converter {
    padding: 18px 20px 16px;
  }
  .console-converter .converter-title {
    font-size: 1.42rem;
  }
  .converter-period-row {
    margin: 12px 0;
  }
  .converter-date-fields {
    grid-template-columns: 72px minmax(120px, 1fr) 96px;
  }
  .converter-date-group select,
  .converter-date-actions,
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    height: 50px;
    min-height: 50px;
  }
  .converter-date-actions,
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
  }
  .console-converter .calc-field-group {
    height: 108px;
    padding: 14px 16px;
  }
  .console-converter .calc-input-wrapper,
  .console-converter .calc-input-wrapper.is-editable,
  .console-converter .calc-input-wrapper.is-result {
    height: 48px;
  }
  .console-converter .calc-input {
    height: 48px;
    font-size: 1.7rem;
  }
  .console-converter .calc-currency-tag,
  .console-converter .calc-prefix {
    margin-bottom: 8px;
  }
  .console-converter .conversion-statement {
    margin: 11px 0 13px;
  }
  .converter-calm-row .quick-amounts button {
    height: 40px;
    min-height: 40px;
  }
  .converter-calm-row .action-btn {
    min-height: 42px;
  }
  .console-converter .converter-helper {
    margin-top: 7px;
  }
}

@media (max-width: 720px) {
  .converter-period-row {
    grid-template-columns: minmax(0, 1fr) 50px;
  }
  .converter-date-fields {
    grid-template-columns: 68px minmax(0, 1fr) 88px;
  }
  .converter-date-group select,
  .converter-date-actions,
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    height: 50px;
    min-height: 50px;
  }
  .converter-date-actions,
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
  }
  .console-converter .converter-row,
  .console-converter .converter-row.is-reversed {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .console-converter .btn-swap-horizontal {
    margin: -2px auto;
  }
  .console-converter .btn-swap-horizontal .swap-circle svg {
    transform: rotate(90deg);
  }
  .converter-calm-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .converter-calm-utilities,
  .converter-calm-row .converter-actions-row {
    grid-column: 1;
  }
}

@media (max-width: 430px) {
  .console-converter {
    padding: 18px 14px 16px;
  }
  .console-converter .converter-header-row {
    display: block;
  }
  .console-converter .converter-badge {
    display: inline-block;
    margin-top: 10px;
  }
  .converter-period-row {
    grid-template-columns: 1fr;
  }
  .converter-date-fields {
    grid-template-columns: 64px minmax(0, 1fr) 82px;
  }
  .converter-date-actions {
    justify-self: end;
  }
  .converter-calm-utilities {
    grid-template-columns: 1fr;
  }
  .converter-calm-row .converter-actions-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* === v0.6.1: bloque de fecha compacto y cierre real en 320 px ========== */
.converter-date-fields {
  width: 470px;
  max-width: 100%;
  grid-template-columns: 100px 220px 130px;
  justify-content: start;
  gap: 10px;
}
.converter-date-group select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 1101px) and (max-width: 1300px) {
  .converter-date-fields {
    width: 394px;
    grid-template-columns: 82px 190px 106px;
    gap: 8px;
  }
}

@media (max-width: 720px) {
  .converter-date-fields {
    width: 100%;
    grid-template-columns: 70px minmax(0, 1fr) 92px;
    gap: 7px;
  }
}

@media (max-width: 430px) {
  .converter-date-fields {
    grid-template-columns: 50px minmax(0, 1fr) 68px;
    gap: 6px;
  }
  .converter-date-fields label:last-child {
    grid-column: auto;
  }
  .converter-date-group label > span {
    font-size: .66rem;
  }
  .converter-date-group select {
    padding-inline: 5px;
    font-size: .82rem;
  }
  .converter-date-actions,
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .converter-date-actions {
    grid-template-columns: 1fr;
  }
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .converter-date-actions .reset-converter .sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    font-size: .82rem;
    font-weight: 800;
  }
  .home-quote-stage .console-converter .calc-currency-tag {
    position: static;
    inset: auto;
    width: auto !important;
    text-align: right;
    transform: none;
  }
  .home-quote-stage .console-converter .calc-input-wrapper {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
  }
  .home-quote-stage .console-converter .calc-input {
    position: static;
    inset: auto;
    flex: 1 1 0;
    width: 0;
    height: 54px;
    padding: 0 4px;
    line-height: 1;
    text-align: left;
  }
}

/* === v0.6.2: header amplio con colapso progresivo ====================== */
.desktop-nav a { white-space: nowrap; }

@media (min-width: 769px) {
  .header-inner {
    min-height: 76px;
  }
  .brand {
    gap: 12px;
  }
  .brand-symbol {
    width: 44px;
    height: 44px;
  }
  .brand-symbol-icon {
    width: 22px;
    height: 22px;
  }
  .brand-wordmark {
    font-size: 24px;
  }
  .desktop-nav {
    gap: 20px;
  }
  .desktop-nav a {
    font-size: .92rem;
    font-weight: 700;
  }
}

@media (min-width: 1200px) {
  .desktop-nav {
    gap: 30px;
  }
  .desktop-nav a {
    font-size: 1rem;
  }
}

/* La hamburguesa toma el control antes de que el nav se quede sin aire. */
@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .mobile-menu-button { display: grid; }
}

/* "1 UF = $X": misma jerarquía que el rate-pill de Valor UTM. */
.console-converter .converter-badge {
  padding: 10px 14px;
  color: var(--teal-dark);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .console-converter .converter-badge {
    padding: 7px 10px;
    font-size: .9rem;
  }
}

/* Feedback de "copiado": el texto debe contrastar en cualquier botón. */
.is-copied { color: var(--green); }
.primary-action.is-copied {
  color: #ffffff;
  background: var(--teal-dark);
}

/* === v0.6.4: silo de pilares y datos clave de la UF ==================== */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(2, 32, 61, 0.05);
}
.pillar-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pillar-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-radius: 6px;
  background: var(--mint);
  color: var(--teal-dark);
}
.pillar-head h3 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}
.pillar-head h3 a { color: var(--ink); }
.pillar-head h3 a:hover { color: var(--teal-dark); }
.pillar-card > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
}
.pillar-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.pillar-list a {
  display: block;
  padding: 7px 2px;
  border-bottom: 1px dashed var(--line);
  color: var(--teal-dark);
  font-size: .9rem;
  font-weight: 650;
}
.pillar-list li:last-child a { border-bottom: 0; }
.pillar-list a:hover { color: var(--ink); }
.year-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.year-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--canvas);
  color: var(--teal-dark);
  font-size: .82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.year-chips a:hover {
  border-color: var(--teal);
  background: var(--mint);
}
.pillar-more {
  margin-top: auto;
  color: var(--teal-dark);
  font-size: .88rem;
  font-weight: 800;
}
.pillar-more:hover { color: var(--ink); }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.fact-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  background: var(--paper);
}
.fact-card strong {
  color: var(--teal-dark);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fact-card span {
  color: var(--ink-soft);
  font-size: .86rem;
  line-height: 1.5;
}

:root[data-theme="dark"] .pillar-card,
:root[data-theme="dark"] .fact-card { background: var(--paper); box-shadow: none; }
:root[data-theme="dark"] .pillar-icon { background: rgba(56, 189, 248, 0.08); }
:root[data-theme="dark"] .year-chips a { background: rgba(56, 189, 248, 0.05); }
:root[data-theme="dark"] .year-chips a:hover { background: rgba(56, 189, 248, 0.12); }

@media (max-width: 1024px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .fact-grid { grid-template-columns: 1fr; gap: 12px; }
  .pillar-card { padding: 18px 16px; }
}

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

/* === v0.6.5: fecha en la misma grilla que el conversor =================== */
/* La fila de fecha replica las columnas de .converter-row (1fr / swap / 1fr):
   Día-Mes-Año caen sobre el input de UF y el reset cierra en el borde
   derecho del input de pesos. Mismo patrón que .period-row de Valor UTM.
   Bajo 721px el conversor apila en una columna y esta grilla no aplica.

   OJO: la v0.6.2 ponía el reset en la columna 2, centrado sobre el botón de
   intercambio, y así quedó descrito en el Panel Maestro. Pablo decidió el
   2026-07-17 copiar a Valor UTM: el reset va a la derecha. No revertir a la
   v0.6.2 por seguir la ficha del panel; la ficha se actualizó a esta decisión. */
@media (min-width: 721px) {
  .converter-period-row {
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    gap: 14px;
    align-items: end;
  }
  .converter-date-group {
    grid-column: 1;
  }
  .converter-date-fields {
    width: 100%;
    grid-template-columns: 68px minmax(0, 1fr) 86px;
    gap: 8px;
    justify-content: stretch;
  }
  .converter-date-actions {
    grid-column: 3;
    justify-self: end;
  }
}

/* Cada <label> de fecha es un grid que apila su rotulo y su <select>, pero su
   columna implicita es `auto`: se dimensiona al contenido y, como el width:100%
   del select es un porcentaje, el navegador lo ignora al calcular ese tamano
   intrinseco. La columna colapsaba al max-content del select y el 100% resolvia
   contra eso, no contra la celda. A 375px "Mes" quedaba en 99px dentro de una
   celda de 150 y a 1440px "Dia" en 65 dentro de 68. Con minmax(0,1fr) la
   columna llena la celda y los selects calzan con la grilla del conversor. */
.converter-date-group label {
  grid-template-columns: minmax(0, 1fr);
}

/* === v0.6.6: a 320px el reset sube a la fila de la fecha ================= */
/* Iba a ancho completo bajo los selectores y se veia mal. Pablo pidio el
   2026-07-17 subirlo junto a Dia/Mes/Ano, como hace Valor UTM.

   NO se copia el resto de UTM a proposito: alla los inputs van lado a lado
   porque sus valores tienen 7 caracteres ("$71.649") y usan fuente de 15px.
   Aca el valor llega a 14 ("59.388.324,66") y se muestra a 34px, que es el
   dato al que la gente viene; lado a lado dejaria 42px utiles por campo y
   obligaria a bajar la fuente a 8px. Por eso los inputs siguen apilados.

   Cabe justo en los 251px utiles: 39 + 6 + Mes + 6 + 53 | 7 | 44.
   La fuente baja a .75rem porque "Septiembre" mide 76px a .82rem y el select
   nativo gasta ~15px mas en su flecha. Verificar con Septiembre elegido. */
@media (max-width: 430px) {
  .converter-period-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 7px;
    align-items: end;
  }
  .converter-date-group {
    grid-column: 1;
  }
  .converter-date-fields {
    /* Reparto ajustado a 320px: Día (2 díg.) el más angosto, Año (4 díg.) con
       lo justo, y el resto para el Mes, que llega a "Septiembre". Medido: los
       tres quedan con 4-8px de holgura real. */
    grid-template-columns: 32px minmax(0, 1fr) 54px;
    gap: 6px;
  }
  .converter-date-group select {
    padding-inline: 4px;
    font-size: .75rem;
  }
  .converter-date-actions {
    grid-column: 2;
    display: grid;
    grid-template-columns: 44px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 50px;
  }
  .converter-date-actions .reset-converter,
  .converter-date-actions .reset-converter.is-historical {
    display: grid;
    place-items: center;
    width: 44px !important;
    min-width: 44px;
    max-width: 44px;
    height: 50px;
    min-height: 50px;
    padding: 0;
    gap: 0;
  }
  .converter-date-actions .reset-converter svg {
    width: 20px;
    height: 20px;
  }
  /* La etiqueta vuelve a ser solo para lectores de pantalla: el layer previo
     la hacia visible porque el boton ocupaba todo el ancho. */
  .converter-date-actions .reset-converter .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
}

/* === v0.6.7: selectores de fecha con desplegable propio (estilo Valor UTM) ===
   El componente vive en app.js (enhanceDateSelect): oculta el <select> nativo
   y lo reemplaza por este trigger + menú (año y día en grilla, mes en lista;
   en móvil, modal centrado con backdrop). Capa final a proposito: gana por
   orden a las multiples reglas .converter-date-group select acumuladas por las
   versiones anteriores. Colores adaptados de --green/--gold de UTM a la
   identidad azul de UF (--teal/--uf-gold/--mint/--canvas). */
.converter-date-group .custom-select { position: relative; width: 100%; min-width: 0; }
.converter-date-group .native-period-select {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.converter-date-group .custom-select-trigger {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 54px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 4px;
  background-color: var(--paper); background-image: none; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 3px;
  font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums;
  cursor: pointer; text-align: left;
}
.converter-date-group .custom-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.converter-date-group .custom-select-trigger:hover { border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); }
.converter-date-group .custom-select-trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--teal) 30%, transparent); outline-offset: 1px; }
.converter-date-group .custom-select-trigger svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.converter-date-group .custom-select.open .custom-select-trigger { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent); }
.converter-date-group .custom-select.open .custom-select-trigger svg { transform: rotate(180deg); }

.converter-date-group .custom-select-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 90;
  width: 220px; max-width: min(300px, calc(100vw - 24px));
  max-height: min(340px, calc(100vh - 24px)); padding: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: 0 18px 44px rgba(7, 17, 31, .18);
  overflow: auto; overscroll-behavior: contain;
}
.converter-date-group .custom-select.is-year .custom-select-menu { width: 250px; }
.converter-date-group .custom-select.is-day .custom-select-menu { width: 236px; }
.converter-date-group .custom-select.drop-up .custom-select-menu { top: auto; bottom: calc(100% + 7px); }
.converter-date-group .custom-select-menu-head { display: none; }
.converter-date-group .custom-select-options { display: grid; gap: 3px; }
.converter-date-group .custom-select.is-year .custom-select-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.converter-date-group .custom-select.is-day .custom-select-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.converter-date-group .custom-select-option {
  min-width: 0; min-height: 44px; padding: 9px 10px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; cursor: pointer; text-align: left;
}
.converter-date-group .custom-select.is-day .custom-select-option,
.converter-date-group .custom-select.is-year .custom-select-option { justify-content: center; padding-inline: 6px; }
.converter-date-group .custom-select.is-day .custom-select-option svg,
.converter-date-group .custom-select.is-year .custom-select-option svg { display: none; }
.converter-date-group .custom-select-option svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.converter-date-group .custom-select-option:hover,
.converter-date-group .custom-select-option:focus-visible { background: var(--canvas); color: var(--ink); outline: 0; }
.converter-date-group .custom-select-option.selected { background: var(--mint); color: var(--teal); font-weight: 850; }
.converter-date-group .custom-select-option.selected svg { opacity: 1; }
.converter-date-group .custom-select-option:disabled { display: none; }

/* La altura del trigger sigue a la del <select> nativo en cada breakpoint. */
@media (min-width: 1101px) and (max-width: 1300px) { .converter-date-group .custom-select-trigger { height: 50px; } }
@media (max-width: 720px) { .converter-date-group .custom-select-trigger { height: 50px; } }

/* Móvil: el menú pasa a modal centrado con backdrop, como en Valor UTM. */
@media (max-width: 640px) {
  html.period-select-open, html.period-select-open body { overflow: hidden; }
  .converter-date-group .custom-select-trigger { height: 50px; padding-inline: 10px; font-size: .95rem; }
  .converter-date-group .custom-select.open::before { content: ""; position: fixed; inset: 0; z-index: 89; background: rgba(7, 17, 31, .46); backdrop-filter: blur(2px); }
  .converter-date-group .custom-select-menu,
  .converter-date-group .custom-select.is-year .custom-select-menu,
  .converter-date-group .custom-select.is-day .custom-select-menu,
  .converter-date-group .custom-select.drop-up .custom-select-menu {
    position: fixed; inset: auto 12px; top: 50%; bottom: auto; z-index: 90;
    width: auto; max-width: none; max-height: min(76vh, 560px); padding: 10px;
    border-radius: 6px; box-shadow: 0 24px 60px rgba(7, 17, 31, .35); transform: translateY(-50%);
  }
  .converter-date-group .custom-select-menu-head {
    min-height: 48px; padding: 2px 4px 10px 8px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1rem;
  }
  .converter-date-group .custom-select-menu-head button {
    width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius);
    background: transparent; color: var(--ink); font-size: 1.55rem; line-height: 1; cursor: pointer;
  }
  .converter-date-group .custom-select-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding-top: 8px; }
  .converter-date-group .custom-select.is-year .custom-select-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .converter-date-group .custom-select.is-day .custom-select-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .converter-date-group .custom-select-option { min-height: 46px; padding: 9px; font-size: 15px; }
  .converter-date-group .custom-select.is-month .custom-select-option { justify-content: flex-start; }
}

/* 320px: hay 3 selectores + reset en una fila de 251px, asi que los triggers
   ocultan el chevron (a esta densidad ya se leen como controles y al tocarlos
   abren el modal). Sin el chevron "Septiembre" entra sin cortarse. */
@media (max-width: 430px) {
  .converter-date-group .custom-select-trigger { font-size: .82rem; padding-inline: 6px; gap: 0; justify-content: flex-start; }
  .converter-date-group .custom-select-trigger svg { display: none; }
  .converter-date-group .custom-select.is-day .custom-select-trigger { padding-inline: 4px; justify-content: center; }
}

/* === v0.6.9 (2026-07-17) — apilado compacto en movil: swap cosido a la costura ===
   En vertical las dos tarjetas quedaban separadas por un hueco con el circulo de
   intercambio flotando solo ("3 cajas sueltas"). Aca las tarjetas se tocan y el
   circulo se monta sobre la costura (patron de conversor: un solo bloque), con su
   halo del color del papel recortandolo. NO se copia el lado-a-lado de Valor UTM
   porque el valor UF es la cifra grande (hasta 14 digitos) y no cabe en 2 columnas
   a 320px. El conversor se apila desde <=720px (ver capas previas), asi que la
   costura cubre todo ese rango. */
@media (max-width: 720px) {
  .home-quote-stage .console-converter .converter-row,
  .home-quote-stage .console-converter .converter-row.is-reversed {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: stretch;
  }
  /* respiro en la cara que da a la costura (la tarjeta de arriba abajo, la de
     abajo arriba). El swap va en order:2, asi que al invertir cambian de posicion
     y el respiro debe seguir a la posicion real, no al campo. 42px = el circulo
     sobresale 27px + su aro de 5px + ~10px de aire, para que la linea del campo
     UF y la etiqueta de pesos NO toquen el aro del boton. */
  .home-quote-stage .console-converter .udi-field { padding-bottom: 42px; }
  .home-quote-stage .console-converter .mxn-field { padding-top: 42px; }
  .home-quote-stage .console-converter .converter-row.is-reversed .mxn-field { padding-top: 17px; padding-bottom: 42px; }
  .home-quote-stage .console-converter .converter-row.is-reversed .udi-field { padding-top: 42px; padding-bottom: 17px; }
  /* el swap sale del flujo del hueco y se centra sobre la union de ambas tarjetas */
  .home-quote-stage .console-converter .btn-swap-horizontal {
    align-self: center;
    justify-self: center;
    position: relative;
    z-index: 3;
    margin: -27px auto;
    padding: 0;
  }
  /* el anillo debe ser del color de las TARJETAS (var(--paper): #fff claro /
     #0f172a oscuro) para que recorte el circulo. Se fuerza con el id #conversor
     porque una regla con :root[data-theme] pisaba el var y en oscuro salia un
     halo blanco. El id gana a cualquier combinacion de clases/atributos. */
  #conversor .btn-swap-horizontal .swap-circle {
    width: 54px;
    height: 54px;
    box-shadow: 0 0 0 5px var(--paper),
                0 0 0 6px color-mix(in srgb, var(--teal-dark) 22%, var(--line)),
                0 8px 20px color-mix(in srgb, var(--teal) 28%, transparent);
  }
}

/* === v0.7.0 (2026-07-17) — movil: conversor pegado al valor (SEO intacto) ===
   En telefono (<=600px) el conversor sube justo debajo del valor. El texto NO se
   esconde: sigue en el DOM (Googlebot lo lee server-side) y solo BAJA en pantalla
   via order. display:contents aplana el .console-lede para poder intercalar el
   conversor entre la descripcion y el resto, sin tocar el HTML. La descripcion
   queda ARRIBA como puente entre el valor y el conversor (si no, el conversor
   aparecia "de la nada"). En tablet (>600px) el orden queda como estaba. */
@media (max-width: 600px) {
  .uf-console .console-hero-grid { display: flex; flex-direction: column; gap: 0; padding-top: 6px; }
  .uf-console .console-hero-grid > .console-lede { display: contents; }
  .uf-console .console-hero-grid > .console-lede > .console-kicker { order: 1; }
  .uf-console .console-hero-grid > .console-lede > h1 { order: 2; }
  .uf-console .console-hero-grid > .console-lede > .console-value-row { order: 3; }
  .uf-console .console-hero-grid > .console-lede > .console-sub { order: 4; }
  /* En movil el conversor pierde su caja exterior y se integra al fondo: sin borde
     ni sombra, fondo transparente y sin padding lateral (el contenido se alinea
     con el texto de arriba). Las tarjetas internas conservan su propio borde. */
  .uf-console .console-hero-grid > .console-lede > .console-rate-actions { order: 5; margin-top: 18px; }
  /* El conversor ya no es hijo directo de la grilla (va dentro de
     .console-task-column), así que el order lo lleva la columna. */
  .uf-console .console-task-column > .console-converter {
    z-index: 1;
    margin: 4px 0 10px;
    padding-left: 0;
    padding-right: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  .uf-console .console-hero-grid > .console-lede > .console-spark-strip { order: 7; }
  .uf-console .console-hero-grid > .console-lede > .console-badges { order: 8; }
}

/* === v0.7.1 (2026-07-17) — costura: cantos rectos + linea divisoria =============
   Las esquinas redondeadas de UF y Pesos se topaban en la costura sin fundirse
   (un pellizco, como dos pastillas). Ahora las caras que dan a la costura pierden
   el RADIO (cantos izq/der bajan rectos y continuos) pero se conserva UNA linea
   divisoria (el borde de la tarjeta de arriba) para que se sigan leyendo como dos
   inputs. Del otro lado se quita el borde para no duplicar la linea. Se maneja el
   estado invertido. Aplica donde se apilan (<=720px). */
@media (max-width: 720px) {
  /* NORMAL: UF arriba (su borde inferior = divisor) / Pesos abajo (sin borde superior) */
  .home-quote-stage .console-converter .udi-field {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .home-quote-stage .console-converter .mxn-field {
    border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0;
  }
  /* INVERTIDO: Pesos arriba (su borde inferior = divisor) / UF abajo (sin borde superior) */
  .home-quote-stage .console-converter .converter-row.is-reversed .mxn-field {
    border-radius: 6px 6px 0 0; border-top: 1px solid var(--line);
  }
  .home-quote-stage .console-converter .converter-row.is-reversed .udi-field {
    border-radius: 0 0 6px 6px; border-top: 0;
  }
}
/* === v0.7.0: cierre de portada, histórico y calculadoras ================== */
.console-utility-actions {
  display: inline-grid;
  grid-template-columns: repeat(2, 48px);
  gap: 0;
  width: max-content;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.console-rate-actions { display: flex; align-items: center; gap: 12px; }
.console-rate-actions > span { color: var(--ink-soft); font-size: .82rem; font-weight: 850; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.console-utility-actions .console-icon-btn {
  display: grid;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
}
.console-utility-actions .console-icon-btn + .console-icon-btn { border-left: 1px solid var(--line); }
.console-utility-actions .console-icon-btn svg { width: 22px; height: 22px; }
.console-utility-actions .console-icon-btn:hover,
.console-utility-actions .console-icon-btn:focus-visible { background: var(--mint); color: var(--teal-dark); }
.mobile-text-size { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; color: var(--ink-soft); font-weight: 750; }
.mobile-text-size > div { display: grid; grid-template-columns: repeat(2, 48px); overflow: hidden; border: 1px solid var(--line); border-radius: 4px; }
.mobile-text-size button { min-height: 46px; border: 0; border-right: 1px solid var(--line); background: var(--canvas); color: var(--ink); font: inherit; font-weight: 850; }
.mobile-text-size button:last-child { border-right: 0; }
.mobile-text-size button[aria-pressed="true"] { background: var(--mint); color: var(--teal-dark); }

/* La portada inferior usa bloques completos, no texto suelto. */
.examples-section,
.conversion-section,
.pillar-section,
.comparison-section,
.uf-facts-section,
.author-section { padding-top: clamp(42px, 5vw, 72px); padding-bottom: clamp(42px, 5vw, 72px); }
.examples-section .section-heading-row,
.conversion-section .section-heading-row,
.pillar-section .section-heading-row,
.uf-facts-section .section-heading-row { margin-bottom: 24px; }
.examples-section .section-heading-row > div,
.conversion-section .section-heading-row > div,
.pillar-section .section-heading-row > div,
.uf-facts-section .section-heading-row > div { max-width: 760px; }
.examples-section .section-link { align-self: end; min-height: 44px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.examples-section .quote-list { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.examples-section .quote-row { min-height: 66px; padding: 16px 20px; transition: background-color .14s, color .14s; }
.examples-section .quote-row:hover,
.examples-section .quote-row:focus-visible { background: var(--mint); color: var(--teal-dark); }
.conversion-table-grid .table-wrapper { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.product-tools-band { padding: clamp(48px, 6vw, 80px) 0; border-block: 1px solid var(--line); background: var(--surface); }
.tools-promo-grid--seven { gap: 16px; }
.tool-promo-card { min-height: 260px; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 6px; background: var(--paper); transition: translate .14s, border-color .14s; }
.tool-promo-card:hover { translate: 0 -2px; border-color: color-mix(in srgb, var(--teal) 55%, var(--line)); }
.tool-promo-card .promo-btn { min-height: 44px; display: inline-flex; align-items: center; }
.pillar-grid { gap: 16px; }
.pillar-card { border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 6px; background: var(--paper); }
.pillar-list a { min-height: 40px; display: inline-flex; align-items: center; }
.faq-band { padding: clamp(48px, 6vw, 80px) 0; border-block: 1px solid var(--line); background: var(--surface); }
.faq-container .section-block { padding: 0; }
.faq-item { border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.faq-question { min-height: 58px; display: flex; align-items: center; }

/* Páginas interiores. */
.inner-page { padding: 0 0 80px; background: var(--canvas); color: var(--ink); }
.inner-shell { max-width: 1240px; }
.inner-breadcrumb { min-height: 54px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-muted); font-size: .82rem; }
.inner-breadcrumb a { color: var(--teal-dark); font-weight: 750; text-decoration: none; }
.inner-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 42px; align-items: end; padding: 48px 0 42px; border-bottom: 1px solid var(--line); }
.inner-hero h1,.editorial-hero h1 { max-width: 880px; margin: 10px 0 14px; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
.inner-hero p,.editorial-hero p { max-width: 760px; margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.65; }
.rate-reference { min-height: 150px; padding: 24px; display: grid; align-content: center; gap: 8px; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 6px; background: var(--paper); }
.rate-reference span,.rate-reference small { color: var(--ink-muted); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.rate-reference strong { color: var(--teal-dark); font-size: 1.45rem; }

.specialized-workspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); margin: 40px 0 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.tool-form-panel,.tool-result-panel { min-width: 0; padding: clamp(24px, 4vw, 42px); }
.tool-form-panel { border-right: 1px solid var(--line); }
.workspace-kicker { color: var(--teal-dark); font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.tool-form-panel h2 { margin: 7px 0 24px; font-size: 1.7rem; }
.tool-field { display: grid; gap: 8px; margin-top: 16px; color: var(--ink-soft); font-size: .82rem; font-weight: 800; }
.tool-field > div { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 18px; border: 2px solid var(--line); border-radius: 4px; background: var(--canvas); }
.tool-field:focus-within > div { border-color: var(--teal); }
/* Campo con el monto recortado a su tope: se avisa en vez de calcular un absurdo. */
.tool-field input[data-tool-state="limited"] { color: var(--red); }
.tool-field:has(input[data-tool-state="limited"]) > div { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent); }
.tool-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 800 1.8rem/1 var(--font, Inter, sans-serif); font-variant-numeric: tabular-nums; }
.tool-field b { color: var(--ink-soft); }
.tool-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.tool-presets button { min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font-weight: 800; cursor: pointer; }
.tool-presets button:hover,.tool-presets button:focus-visible { border-color: var(--teal); background: var(--mint); color: var(--teal-dark); }
.tool-result-panel { display: grid; align-content: center; gap: 14px; background: var(--surface); }
.tool-result-panel > span { color: var(--ink-muted); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.tool-result-panel > strong { display: block; width: 100%; max-width: 100%; overflow: hidden; white-space: nowrap; color: var(--teal-dark); font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.tool-result-panel p { min-height: 48px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.table-scroll-hint { display: none; }
.tool-copy { min-height: 48px; width: fit-content; padding: 0 20px; border: 1px solid var(--teal-dark); border-radius: 4px; background: var(--teal-dark); color: #fff; font-weight: 850; cursor: pointer; }
.tool-copy.is-copied { background: #166534; border-color: #166534; color: #fff; }
.tool-guidance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 48px; border: 0; border-radius: 0; }
.tool-guidance-grid article { padding: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.tool-guidance-grid article > span { color: var(--teal); font-weight: 900; }
.tool-guidance-grid h2 { margin: 8px 0 12px; font-size: 1.18rem; }
.tool-guidance-grid p,.tool-guidance-grid li { color: var(--ink-soft); line-height: 1.6; }
.tool-guidance-grid ol { margin: 0; padding-left: 20px; }
.related-tools { padding-top: 20px; border-top: 0; }
.related-tools h2 { margin: 0 0 16px; }
.related-tools > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.related-tools a { min-height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font-weight: 800; text-decoration: none; }
.related-tools a:hover { border-color: var(--teal); color: var(--teal-dark); }

.history-search-card { margin: 36px 0 46px; padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.history-search-card > label { display: block; margin-bottom: 10px; font-weight: 850; }
.history-search-card > div { display: grid; grid-template-columns: minmax(0, 340px) 130px; gap: 10px; }
.history-search-card input,.history-search-card button { min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); color: var(--ink); font: inherit; font-weight: 750; }
.history-search-card button { border-color: var(--teal-dark); background: var(--teal-dark); color: #fff; cursor: pointer; }
.history-search-card p { min-height: 24px; margin: 12px 0 0; color: var(--ink-soft); }
.history-search-card p strong { color: var(--teal-dark); }
.history-year-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.history-year-card { min-height: 132px; padding: 22px; display: grid; align-content: center; gap: 7px; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 6px; background: var(--paper); color: var(--ink); text-decoration: none; }
.history-year-card:hover { border-color: var(--teal); background: var(--mint); }
.history-year-card > span { color: var(--teal-dark); font-weight: 900; }
.history-year-card > strong { font-size: 1.35rem; }
.history-year-card > small { color: var(--ink-muted); line-height: 1.4; }
.history-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 34px 0; }
.history-kpis article { min-height: 112px; padding: 20px; display: grid; align-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.history-kpis span { color: var(--ink-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.history-kpis strong { font-size: 1.2rem; }
.history-kpis .is-up { color: #047857; }.history-kpis .is-down { color: var(--red); }
.history-table-card { padding: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.history-table-card .table-wrapper { max-height: 720px; overflow: auto; border: 1px solid var(--line); }
.history-table-card table { width: 100%; border-collapse: collapse; }
.history-table-card th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.history-table-card th,.history-table-card td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.year-navigation { padding-top: 24px; }.year-navigation a { color: var(--teal-dark); font-weight: 800; }

/* Fichas mensuales /uf-historico/AAAA/MES/ y su navegación. */
.history-note { margin: 30px 0; max-width: 78ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }
.history-note p { margin: 0 0 14px; }
.history-note p:last-child { margin-bottom: 0; }
.history-note a { color: var(--teal-dark); font-weight: 750; }
.history-months-section { margin: 34px 0; }
.history-month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.history-month-card { min-height: 96px; padding: 16px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 6px; background: var(--paper); color: var(--ink); text-decoration: none; }
.history-month-card:hover { border-color: var(--teal); background: var(--mint); }
.history-month-card > span { color: var(--teal-dark); font-size: .82rem; font-weight: 900; }
.history-month-card > strong { font-size: 1.08rem; }
.history-month-card > small { color: var(--ink-muted); font-size: .74rem; }
.month-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--line); }
.month-navigation a { color: var(--teal-dark); font-weight: 800; text-decoration: none; }
.month-navigation a:hover { text-decoration: underline; }
@media (max-width: 860px) { .history-month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .history-month-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .month-navigation { flex-direction: column; align-items: flex-start; gap: 10px; } }

.editorial-shell { max-width: 1000px; }
.editorial-hero { padding: 54px 0 40px; border-bottom: 1px solid var(--line); }
.editorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 34px; }
.editorial-grid section { padding: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.editorial-grid h2 { margin: 0 0 12px; }.editorial-grid p { color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 800px) {
  .inner-hero { grid-template-columns: 1fr; gap: 22px; padding: 34px 0 30px; }
  .rate-reference { min-height: 0; }
  .specialized-workspace { grid-template-columns: 1fr; }
  .tool-form-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .tool-guidance-grid,.history-year-grid { grid-template-columns: 1fr 1fr; }
  .history-kpis { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .console-rate-actions { justify-content: space-between; }
  .console-rate-actions > span { font-size: .72rem; line-height: 1.3; }
  .console-utility-actions { grid-template-columns: repeat(2, 46px); }
  .console-utility-actions .console-icon-btn { width: 46px; height: 46px; min-height: 46px; }
  .examples-section,.conversion-section,.pillar-section,.comparison-section,.uf-facts-section,.author-section { padding-top: 38px; padding-bottom: 38px; }
  .section-heading-row { align-items: flex-start; }
  .examples-section .section-heading-row { display: grid; gap: 14px; }
  .examples-section .section-link { width: fit-content; order: 2; }
  .examples-section .quote-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 72px; padding: 14px; }
  .examples-section .quote-leader { display: none; }
  .examples-section .quote-r { text-align: right; }
  .tool-promo-card { min-height: 0; }
  .inner-page { padding-bottom: 56px; }
  .inner-hero h1,.editorial-hero h1 { font-size: clamp(2rem, 12vw, 2.75rem); }
  .tool-form-panel,.tool-result-panel { padding: 22px 18px; }
  .tool-field > div { min-height: 72px; }
  .tool-field input { font-size: 1.55rem; }
  .tool-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-result-panel > strong { font-size: clamp(2.2rem, 13vw, 3.35rem); }
  .tool-copy { width: 100%; }
  .tool-guidance-grid,.history-year-grid,.history-kpis,.editorial-grid,.related-tools > div { grid-template-columns: 1fr; }
  .history-search-card { padding: 18px; }
  .history-search-card > div { grid-template-columns: 1fr; }
  .history-table-card { padding: 18px 0; border-inline: 0; }
  .history-table-card .section-heading-row { padding-inline: 16px; }
  .history-table-card th,.history-table-card td { min-width: 145px; padding: 12px; }
}

/* === v0.7.1 (2026-07-18) — portada inferior ligera y con lenguaje de app ===
   La información sigue completa en el HTML, pero la primera lectura privilegia
   decisiones y herramientas. Las referencias extensas se abren bajo demanda. */
.market-overview-band .section-title,
.examples-section .section-title,
.conversion-section .section-title,
.product-tools-band .section-title,
.pillar-section .section-title,
.faq-band .section-title {
  max-width: 920px;
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.examples-intro,
.tools-band-intro {
  max-width: 820px;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.65;
}
.market-kpi-grid,
.uma-strip,
.examples-section .quote-list,
.reference-tables,
.tool-promo-card,
.pillar-card,
.home-learning,
.faq-item {
  box-shadow: none !important;
}
.market-kpi { min-height: 104px; padding: 22px; }
.market-kpi span,
.uma-strip span { font-size: .72rem; }
.market-kpi strong,
.uma-strip strong { font-size: clamp(1.15rem, 1.55vw, 1.45rem); }

/* Ocho respuestas resuelven la lectura habitual; las restantes aparecen al pedirlas. */
.examples-section .quote-row:nth-child(n+9) { display: none; }
.examples-section.is-expanded .quote-row { display: grid; }
.home-expand-button {
  min-height: 52px;
  margin-top: 16px;
  padding: 0 22px;
  border: 1px solid var(--teal-dark);
  border-radius: 4px;
  background: var(--paper);
  color: var(--teal-dark);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.home-expand-button:hover,
.home-expand-button:focus-visible { background: var(--mint); }

/* Tablas extensas: una sola puerta grande en lugar de dos cajas siempre abiertas. */
.reference-tables,
.home-learning {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.reference-tables > summary,
.home-learning > summary {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 5px 22px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.reference-tables > summary::-webkit-details-marker,
.home-learning > summary::-webkit-details-marker { display: none; }
.reference-tables > summary::after,
.home-learning > summary::after {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  content: '+';
  color: var(--teal-dark);
  font-size: 2rem;
  font-weight: 500;
}
.reference-tables[open] > summary::after,
.home-learning[open] > summary::after { content: '−'; }
.reference-tables > summary span { color: var(--ink); font-size: 1.25rem; font-weight: 850; }
.reference-tables > summary small,
.home-learning > summary small { color: var(--ink-muted); font-size: .92rem; }
.reference-tables[open] > summary,
.home-learning[open] > summary { border-bottom: 1px solid var(--line); }
.reference-tables .conversion-table-grid { margin: 0; padding: 22px; }

/* Un único portal editorial reemplaza la sucesión de pequeñas cajas educativas. */
.home-learning { margin-top: clamp(48px, 6vw, 88px); margin-bottom: clamp(48px, 6vw, 88px); }
.home-learning > summary { min-height: 116px; padding: 26px 30px; }
.home-learning > summary .hero-kicker { grid-column: 1; }
.home-learning > summary strong {
  grid-column: 1;
  color: var(--ink);
  font-size: clamp(1.55rem, 3vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.home-learning > summary small { grid-column: 1; }
.home-learning-body { padding-bottom: 34px; }
.home-learning-body > .shell,
.home-learning-body .comparison-section { width: auto; max-width: none; margin-inline: 30px; padding-inline: 0; }

/* Las herramientas se sienten como destinos grandes, no como un directorio denso. */
.tool-promo-card { min-height: 280px; padding: 28px; }
.tool-promo-card h3 { font-size: 1.35rem; line-height: 1.12; }
.tool-promo-card p { font-size: 1rem; line-height: 1.6; }
.pillar-card { padding: 30px; }
.pillar-card h3 { font-size: 1.4rem; line-height: 1.15; }
.pillar-card p,
.pillar-list { font-size: 1rem; line-height: 1.6; }

@media (max-width: 720px) {
  html { scroll-behavior: auto; }
  .site-header { backdrop-filter: none; }
  .market-overview-band .section-title,
  .examples-section .section-title,
  .conversion-section .section-title,
  .product-tools-band .section-title,
  .pillar-section .section-title,
  .faq-band .section-title { font-size: clamp(1.9rem, 9vw, 2.7rem); }

  /* Carriles táctiles: menos altura de página y tarjetas mayores, sin perder opciones. */
  .market-kpi-grid,
  .uma-strip,
  .tools-promo-grid--seven,
  .pillar-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(258px, 86vw);
    gap: 12px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    border: 0;
  }
  .market-kpi-grid { grid-template-columns: repeat(5, minmax(258px, 86vw)) !important; }
  .uma-strip { grid-template-columns: repeat(6, minmax(258px, 86vw)) !important; }
  .tools-promo-grid--seven { grid-template-columns: repeat(7, minmax(258px, 86vw)) !important; }
  .pillar-grid { grid-template-columns: repeat(3, minmax(258px, 86vw)) !important; }
  .market-kpi-grid::-webkit-scrollbar,
  .uma-strip::-webkit-scrollbar,
  .tools-promo-grid--seven::-webkit-scrollbar,
  .pillar-grid::-webkit-scrollbar { display: none; }
  .market-kpi,
  .uma-strip > div,
  .tool-promo-card,
  .pillar-card {
    grid-column: auto !important;
    min-height: 150px;
    border: 1px solid var(--line) !important;
    border-radius: 6px;
    scroll-snap-align: start;
  }
  .uma-strip > div { padding: 20px !important; }
  .uma-strip-intro { min-height: 150px; }
  .tool-promo-card { min-height: 320px; }
  .pillar-card { min-height: 380px; }

  .examples-section .quote-row:nth-child(n+6) { display: none; }
  .examples-section.is-expanded .quote-row { display: grid; }
  .examples-intro { font-size: 1.02rem; }
  .reference-tables > summary,
  .home-learning > summary { padding: 18px; }
  .reference-tables .conversion-table-grid { padding: 14px; }
  .home-learning { margin-inline: 16px; }
  .home-learning > summary { min-height: 108px; }
  .home-learning-body > .shell,
  .home-learning-body .comparison-section { margin-inline: 16px; }
}

@media (max-width: 360px) {
  .market-kpi-grid { grid-template-columns: repeat(5, minmax(248px, calc(100vw - 48px))) !important; }
  .uma-strip { grid-template-columns: repeat(6, minmax(248px, calc(100vw - 48px))) !important; }
  .tools-promo-grid--seven { grid-template-columns: repeat(7, minmax(248px, calc(100vw - 48px))) !important; }
  .pillar-grid { grid-template-columns: repeat(3, minmax(248px, calc(100vw - 48px))) !important; }
  .reference-tables > summary span { font-size: 1.08rem; }
  .home-expand-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .market-kpi-grid,
  .uma-strip,
  .tools-promo-grid--seven,
  .pillar-grid { scroll-behavior: auto; }
}

/* === v0.7.2 (2026-07-18) — amplitud del cockpit y estados completos ===== */
/* Las áreas útiles ya no se angostan a 1120 px después de un hero de 1440 px. */
.market-overview-band > .shell,
.examples-section,
.conversion-section,
.product-tools-band > .shell,
.pillar-section,
.home-learning,
.faq-container {
  width: min(calc(100% - 64px), var(--shell-wide));
  max-width: var(--shell-wide);
}
.faq-container { max-width: 1180px; }

/* El marco exterior conserva solidez, pero ocupa mejor el panel y pierde peso. */
@media (min-width: 1101px) {
  .console-converter {
    margin-left: 24px;
    padding-inline: 30px;
    border-radius: 4px;
  }
}

/* Cada calculadora es ahora un destino completo y no una caja con un link suelto. */
.product-tools-band .tools-promo-grid {
  gap: 16px !important;
  border: 0;
}
.tool-promo-card {
  position: relative;
  background: var(--paper) !important;
  color: var(--ink);
  text-decoration: none;
  outline: 0;
}
.tool-promo-card:hover,
.tool-promo-card:focus-visible {
  border-color: var(--teal) !important;
  box-shadow: inset 0 0 0 1px var(--teal) !important;
  background: color-mix(in srgb, var(--mint) 38%, var(--paper));
  translate: 0 -2px;
}
.tool-promo-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--teal) 35%, transparent); outline-offset: 3px; }
.tool-promo-card .tool-promo-content { min-width: 0; }
.tool-promo-card .promo-btn {
  min-height: 44px;
  margin-top: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: .86rem;
}
.tool-promo-card:hover .promo-btn,
.tool-promo-card:focus-visible .promo-btn { color: var(--teal); }

/* Selección inequívoca: fondo + contorno cuadrado completo. */
.examples-section .quote-row {
  position: relative;
  border: 1px solid transparent;
  border-bottom-color: var(--line);
}
.examples-section .quote-row:hover,
.examples-section .quote-row:focus-visible,
.examples-section .quote-row.is-selected,
.examples-section .quote-row[aria-pressed="true"] {
  z-index: 1;
  border-color: var(--teal);
  background: var(--mint);
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.examples-section .quote-row.is-selected .quote-q,
.examples-section .quote-row.is-selected .quote-r,
.examples-section .quote-row[aria-pressed="true"] .quote-q,
.examples-section .quote-row[aria-pressed="true"] .quote-r { color: var(--teal-dark); }

@media (max-width: 720px) {
  .market-overview-band > .shell,
  .examples-section,
  .conversion-section,
  .product-tools-band > .shell,
  .pillar-section,
  .faq-container { width: min(calc(100% - 32px), var(--shell-wide)); }
  .home-learning { width: auto; max-width: none; }
  .tool-promo-card:hover { translate: none; }
}

/* === v0.7.3 (2026-07-18) — consulta histórica para personas mayores ===== */
.history-search-card {
  margin: 42px 0 56px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: 6px;
  background: var(--paper);
}
.history-search-head { max-width: 850px; }
.history-search-head h2 {
  margin: 8px 0 10px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.history-search-head p { margin: 0; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; }
.history-search-card > .history-search-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-top: 28px;
}
.history-date-selector { min-width: 0; margin: 0; padding: 0; border: 0; }
.history-date-selector legend { margin-bottom: 10px; padding: 0; color: var(--ink); font-size: 1rem; font-weight: 850; }
.history-date-fields { display: grid; grid-template-columns: minmax(100px, .75fr) minmax(180px, 1.4fr) minmax(130px, 1fr); gap: 10px; }
.history-date-fields label { min-width: 0; display: grid; gap: 7px; color: var(--ink-soft); font-size: .82rem; font-weight: 850; text-transform: uppercase; letter-spacing: .045em; }
.history-date-fields select {
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 0 18px;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: var(--canvas);
  color: var(--ink);
  font-size: 1.22rem;
  font-weight: 850;
  cursor: pointer;
}
.history-date-fields select:hover,
.history-date-fields select:focus-visible { border-color: var(--teal); outline: 0; }
.history-search-actions { display: grid; grid-template-columns: 190px 150px; gap: 10px; }
.history-search-actions button { min-height: 76px; padding: 0 18px; border: 2px solid var(--teal-dark); border-radius: 4px; font-size: 1rem; font-weight: 900; }
.history-search-actions .history-search-submit { background: var(--teal-dark); color: #fff; }
.history-search-submit:hover,
.history-search-submit:focus-visible { background: var(--teal); border-color: var(--teal); }
.history-search-submit:disabled { opacity: .65; cursor: wait; }
.history-search-actions .history-search-today { background: var(--paper); color: var(--teal-dark); }
.history-search-today:hover,
.history-search-today:focus-visible { background: var(--mint); border-color: var(--teal); }
.history-search-card > .history-search-result {
  min-height: 138px;
  margin-top: 22px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 4px 20px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--teal);
  border-radius: 4px;
  background: var(--canvas);
}
.history-search-result > span { color: var(--ink-muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.history-search-result > strong { grid-column: 1; color: var(--teal-dark); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.history-search-result > p { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; color: var(--ink-soft); font-size: 1rem; }
.history-search-result a { color: var(--teal-dark); font-weight: 850; text-decoration: underline; text-underline-offset: 4px; }
.history-search-result[data-state="pending"] { border-left-color: var(--uf-gold); }
.history-search-result[data-state="loading"] { border-left-color: var(--ink-muted); }
.history-search-result[data-state="error"] { border-left-color: var(--red); }
.history-search-result[data-state="error"] > strong { color: var(--red); }

@media (max-width: 900px) {
  .history-search-card > .history-search-workspace { grid-template-columns: 1fr; }
  .history-search-actions { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
}
@media (max-width: 520px) {
  .history-search-card { margin-top: 26px; padding: 20px 16px; }
  .history-search-head h2 { font-size: clamp(1.9rem, 10vw, 2.45rem); }
  .history-search-head p { font-size: 1rem; }
  .history-date-fields { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); }
  .history-date-fields label:last-child { grid-column: 1 / -1; }
  .history-date-fields select { min-height: 70px; padding-inline: 12px; font-size: 1.12rem; }
  .history-search-actions { grid-template-columns: 1fr; }
  .history-search-actions button { min-height: 64px; }
  .history-search-card > .history-search-result { min-height: 170px; padding: 20px 16px; grid-template-columns: 1fr; }
  .history-search-result > strong { font-size: clamp(1.9rem, 10vw, 2.5rem); overflow-wrap: anywhere; }
  .history-search-result > p { grid-column: 1; grid-row: auto; margin-top: 8px; }
}

/* === v0.7.4 (2026-07-18) — auditoría Kaizen de herramientas e histórico == */
.tool-page .inner-shell,
.history-page .inner-shell { width: min(calc(100% - 64px), var(--shell-wide)); max-width: var(--shell-wide); }
.tool-page .inner-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, 310px); gap: 30px; padding: 32px 0 28px; }
.tool-page .inner-hero h1 { max-width: 980px; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.tool-page .inner-hero p { font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.55; }
.tool-page .rate-reference { min-height: 120px; padding: 20px; }
.tool-page .specialized-workspace { margin-top: 28px; }
.tool-page .tool-guidance-grid { margin-top: 20px; }
.tools-carousel-hint,
.history-years-hint { display: none; }
@media (min-width: 981px) {
  .tools-promo-grid--seven .tool-promo-card:last-child { grid-column: 2; }
}

.history-years-section { padding-bottom: 64px; }
.history-archive { margin-top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.history-archive > summary {
  min-height: 76px;
  padding: 16px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 18px;
  list-style: none;
  cursor: pointer;
}
.history-archive > summary::-webkit-details-marker { display: none; }
.history-archive > summary span { color: var(--ink); font-size: 1.15rem; font-weight: 900; }
.history-archive > summary small { color: var(--ink-muted); font-size: .9rem; }
.history-archive > summary::after { content: '+'; color: var(--teal-dark); font-size: 1.8rem; }
.history-archive[open] > summary { border-bottom: 1px solid var(--line); }
.history-archive[open] > summary::after { content: '−'; }
.history-year-grid--archive { padding: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.history-year-grid--archive .history-year-card { min-height: 112px; padding: 18px; }

@media (max-width: 800px) {
  .tool-page .inner-shell,
  .history-page .inner-shell { width: min(calc(100% - 40px), var(--shell-wide)); }
  .tool-page .inner-hero { grid-template-columns: 1fr; gap: 14px; padding: 24px 0 20px; }
  .tool-page .inner-hero h1 { margin-block: 8px 10px; font-size: clamp(2rem, 9vw, 2.7rem); }
  .tool-page .inner-hero p { font-size: 1rem; line-height: 1.5; }
  .tool-page .rate-reference { min-height: 0; padding: 14px 16px; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; }
  .tool-page .rate-reference strong { text-align: right; font-size: 1.18rem; }
  .tool-page .rate-reference small { grid-column: 1 / -1; }
  .tool-page .specialized-workspace { margin-top: 18px; }
  .history-year-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .tools-carousel-hint,
  .history-years-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; color: var(--teal-dark); font-size: .86rem; font-weight: 850; }
  .tool-page .tool-guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(258px, 86vw));
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .tool-page .tool-guidance-grid::-webkit-scrollbar { display: none; }
  .tool-page .tool-guidance-grid article { min-height: 290px; scroll-snap-align: start; }
}

@media (max-width: 520px) {
  .tool-page .inner-shell,
  .history-page .inner-shell { width: min(calc(100% - 24px), var(--shell-wide)); }
  .tool-page .inner-breadcrumb { min-height: 46px; font-size: .72rem; }
  .tool-page .inner-hero h1 { font-size: clamp(1.9rem, 9.5vw, 2.35rem); }
  .tool-page .rate-reference { padding: 12px; }
  .tool-page .specialized-workspace { margin-bottom: 16px; }
  .tool-page .tool-result-panel { min-height: 250px; align-content: center; }
  .tool-page .tool-result-panel > strong { min-height: 52px; display: flex; align-items: center; }
  .tool-page .tool-guidance-grid { grid-template-columns: repeat(3, minmax(248px, calc(100vw - 48px))); }
  .history-years-section > .history-year-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(248px, calc(100vw - 48px)));
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .history-years-section > .history-year-grid::-webkit-scrollbar { display: none; }
  .history-years-section > .history-year-grid .history-year-card { min-height: 148px; scroll-snap-align: start; }
  .history-archive > summary { min-height: 72px; padding: 14px; grid-template-columns: minmax(0, 1fr) auto; }
  .history-archive > summary small { grid-column: 1; }
  .history-archive > summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .history-year-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 8px; }
  .history-year-grid--archive .history-year-card { min-height: 100px; padding: 12px; }
  .history-year-grid--archive .history-year-card > strong { font-size: .98rem; overflow-wrap: anywhere; }
  .history-year-grid--archive .history-year-card > small { display: none; }
  .history-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .history-kpis article { min-height: 106px; padding: 14px; }
  .history-kpis strong { font-size: 1.05rem; overflow-wrap: anywhere; }
  .table-scroll-hint { display: block; margin: -4px 0 12px; color: var(--teal-dark); font-size: .84rem; font-weight: 850; }
}

/* === v0.8.0 — simuladores de decisión y navegación móvil profesional ===== */
.tool-page .specialized-workspace {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  align-items: stretch;
}
.tool-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tool-fields-grid .tool-field { min-width: 0; margin-top: 0; }
.tool-fields-grid .tool-field:first-child { grid-column: 1 / -1; }
.tool-field select {
  min-width: 0;
  width: 100%;
  height: 72px;
  padding: 0 34px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 800 1.05rem/1.2 var(--font, Inter, sans-serif);
  cursor: pointer;
}
.tool-form-note { margin: 16px 0 0; color: var(--ink-muted); font-size: .84rem; line-height: 1.5; }
.tool-result-panel { align-content: start; }
.tool-result-panel > strong { min-height: 68px; display: flex; align-items: center; }
.tool-result-meter { height: 10px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--line) 72%, transparent); }
.tool-result-meter i { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal-dark), var(--cyan)); transition: width .18s ease-out; }
.tool-result-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tool-result-kpis article { min-width: 0; min-height: 104px; padding: 15px; display: grid; align-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.tool-result-kpis span { color: var(--ink-muted); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.tool-result-kpis strong { overflow-wrap: anywhere; color: var(--ink); font-size: clamp(.98rem, 1.6vw, 1.22rem); line-height: 1.18; font-variant-numeric: tabular-nums; }
.tool-result-actions { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; }
.tool-result-actions button { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 4px; font: inherit; font-weight: 850; cursor: pointer; }
.tool-report { border: 1px solid var(--teal-dark); background: var(--paper); color: var(--teal-dark); }
.tool-report:hover,.tool-report:focus-visible { background: var(--mint); }
.tool-source-links { display: grid; gap: 8px; margin-top: 14px; }
.tool-source-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; color: var(--teal-dark); font-size: .83rem; font-weight: 800; line-height: 1.35; text-decoration: none; }
.tool-source-links a:hover,.tool-source-links a:focus-visible { border-color: var(--teal); background: var(--mint); }

/* Drawer: estructura, jerarquía y cierre inequívoco, no una lista improvisada. */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 78;
  display: block;
  border: 0;
  background: rgba(4, 15, 30, .58);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s;
}
.mobile-nav-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 80;
  width: min(90vw, 370px);
  height: 100vh;
  height: 100dvh;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--paper);
  box-shadow: -24px 0 70px rgba(4, 21, 40, .24);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .22s cubic-bezier(.2,.75,.25,1), visibility .22s;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu-open { overflow: hidden; }
.mobile-nav-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mobile-nav-head > div { display: grid; gap: 3px; }
.mobile-nav-head span { color: var(--teal-dark); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.mobile-nav-head strong { color: var(--ink); font-size: 1.35rem; }
.mobile-nav-head button { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); color: var(--ink); line-height: 1; cursor: pointer; }
.mobile-nav-head button svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.mobile-nav-intro { margin: 16px 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.mobile-nav-links { display: grid; border-top: 1px solid var(--line); }
.mobile-nav .mobile-nav-links > a {
  min-height: 74px;
  padding: 12px 4px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.mobile-nav-links > a > span:first-child { color: var(--teal); font-size: .72rem; font-weight: 900; }
.mobile-nav-links > a > span:nth-child(2) { display: grid; gap: 3px; }
.mobile-nav-links strong { font-size: 1rem; }
.mobile-nav-links small { color: var(--ink-muted); font-size: .76rem; line-height: 1.3; }
.mobile-nav-links i,.mobile-tools-link i { color: var(--teal); font-style: normal; font-size: 1.2rem; }
.mobile-nav-links > a:hover,.mobile-nav-links > a:focus-visible,.mobile-nav-links > a[aria-current="page"] { margin-inline: -10px; padding-inline: 14px; background: var(--mint); color: var(--teal-dark); }
.mobile-tools-link { min-height: 70px; margin-top: 16px; padding: 12px 14px !important; display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--teal) !important; border-radius: 4px; background: var(--mint); color: var(--teal-dark) !important; text-decoration: none; }
.mobile-tools-link > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-dark); color: #fff; font-weight: 900; }
.mobile-nav .mobile-text-size { margin-top: auto; padding-top: 18px; }

@media (min-width: 1101px) {
  .mobile-nav,.mobile-nav-backdrop { display: none !important; }
}
@media (max-width: 1100px) {
  .tool-page .specialized-workspace { grid-template-columns: 1fr; }
  .tool-form-panel { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .tool-fields-grid { grid-template-columns: 1fr; }
  .tool-fields-grid .tool-field:first-child { grid-column: auto; }
  .tool-page .tool-result-panel { min-height: 0; }
  .tool-result-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-result-kpis article { min-height: 108px; padding: 12px; }
  .tool-result-actions { grid-template-columns: 1fr; }
  .tool-presets button { font-size: .86rem; }
}
@media (max-width: 340px) {
  .mobile-nav { width: 100vw; padding: 18px 16px; }
  .tool-result-kpis strong { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,.mobile-nav-backdrop,.tool-result-meter i { transition: none; }
}

/* === v0.8.2 — menú de herramientas y cierre responsivo real a 320 px === */
.site-header .header-inner { position: relative; }
.desktop-tools-menu {
  position: static;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}
.desktop-tools-trigger {
  min-height: 100%;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.desktop-tools-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: rotate .16s ease; }
.desktop-tools-menu.is-current .desktop-tools-trigger { border-bottom-color: var(--teal); color: var(--ink); }
.desktop-tools-menu.is-open .desktop-tools-trigger svg { rotate: 180deg; }
.desktop-tools-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% - 1px);
  left: 50%;
  width: min(760px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 0 0 6px 6px;
  background: var(--paper);
  box-shadow: 0 22px 48px rgba(4, 21, 40, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: -50% -8px;
  transition: opacity .16s ease, translate .16s ease, visibility .16s;
}
.desktop-tools-menu.is-open .desktop-tools-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: -50% 0;
}
.desktop-tools-panel > header { min-height: 36px; margin-bottom: 7px; padding: 0 3px 7px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.desktop-tools-panel > header strong { color: var(--ink); font-size: .92rem; letter-spacing: .02em; }
.desktop-tools-panel > header > a { padding: 4px 0; border: 0; color: var(--teal-dark); font-size: .82rem; text-decoration: none; }
.desktop-tools-panel > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.desktop-tools-panel .header-tool-card { min-height: 64px; padding: 9px 11px; grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 9px; }
.desktop-tools-panel .header-tool-icon { width: 32px; height: 32px; }
.desktop-tools-panel .header-tool-icon svg { width: 17px; height: 17px; }
.desktop-tools-panel .header-tool-card strong { font-size: .86rem; }
.desktop-tools-panel .header-tool-card small { font-size: .7rem; line-height: 1.3; overflow-wrap: anywhere; }
.desktop-tools-panel .header-tool-card:last-child:nth-child(odd) { width: calc(50% - 4px); grid-column: 1 / -1; justify-self: center; }
.header-tool-card {
  min-width: 0;
  min-height: 60px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  /* Sin esto hereda justify-items:center y cada bloque de texto queda centrado
     en su columna: los titulos cortos arrancaban mas a la derecha que los
     largos (Dividendos en x=544 vs Pension de alimentos en x=500). */
  justify-items: start;
  gap: 9px;
  border: 1px solid var(--line) !important;
  border-radius: 4px;
  color: var(--ink) !important;
  text-decoration: none;
}
.header-tool-card > span:nth-child(2) { justify-self: stretch; }
.header-tool-card > i { justify-self: end; }
.header-tool-card:hover,.header-tool-card:focus-visible { border-color: var(--teal) !important; background: var(--mint); }
.header-tool-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; background: var(--canvas); color: var(--teal-dark); }
.header-tool-icon svg { width: 17px; height: 17px; }
.header-tool-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.header-tool-card strong { font-size: .86rem; line-height: 1.2; }
.header-tool-card small { color: var(--ink-muted); font-size: .7rem; line-height: 1.3; }
.header-tool-card i { color: var(--teal); font-style: normal; }

/* Menú Herramientas en modo oscuro — colores FIJOS, no variables.
   Al cambiar de tema con el botón (sin recargar), el texto de estas tarjetas se
   quedaba con el color del tema claro (#0f172a) sobre el panel oscuro, que es
   exactamente el mismo tono: el texto desaparecía por completo, sobre todo al
   pasar el puntero. Con valores fijos dentro del ámbito oscuro el resultado no
   depende de cómo se resuelvan las variables en ese momento. */
:root[data-theme="dark"] .desktop-tools-panel { background: #0f172a; border-color: #24344d; }
:root[data-theme="dark"] .header-tool-card,
:root[data-theme="dark"] .header-tool-card:hover,
:root[data-theme="dark"] .header-tool-card:focus-visible { color: #f8fafc !important; border-color: #24344d !important; }
:root[data-theme="dark"] .header-tool-card:hover,
:root[data-theme="dark"] .header-tool-card:focus-visible { border-color: #38bdf8 !important; background: rgba(56, 189, 248, .12); }
:root[data-theme="dark"] .header-tool-card strong { color: #f8fafc; }
:root[data-theme="dark"] .header-tool-card small { color: #94a3b8; }
:root[data-theme="dark"] .header-tool-icon { background: #0b1524; color: #38bdf8; }
:root[data-theme="dark"] .desktop-tools-panel > header strong { color: #f8fafc; }
:root[data-theme="dark"] .desktop-tools-panel > header > a { color: #38bdf8; }
/* Mismo problema en el menú móvil, que reutiliza estas tarjetas. */
:root[data-theme="dark"] .mobile-tools-menu .header-tool-card { color: #f8fafc !important; }

.mobile-tools-menu { border-bottom: 1px solid var(--line); }
.mobile-tools-menu > summary {
  min-height: 74px;
  padding: 12px 4px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  list-style: none;
  color: var(--ink);
  cursor: pointer;
}
.mobile-tools-menu > summary::-webkit-details-marker { display: none; }
.mobile-tools-menu > summary > span:first-child { color: var(--teal); font-size: .72rem; font-weight: 900; }
.mobile-tools-menu > summary > span:nth-child(2) { display: grid; gap: 3px; }
.mobile-tools-menu > summary strong { font-size: 1rem; }
.mobile-tools-menu > summary small { color: var(--ink-muted); font-size: .76rem; line-height: 1.3; }
.mobile-tools-menu > summary i { color: var(--teal); font-style: normal; font-size: 1.2rem; transition: rotate .16s ease; }
.mobile-tools-menu[open] > summary { margin-inline: -10px; padding-inline: 14px; background: var(--mint); color: var(--teal-dark); }
.mobile-tools-menu[open] > summary i { rotate: 180deg; }
.mobile-tools-menu > div { padding: 10px 0; display: grid; gap: 8px; }
.mobile-tools-menu .header-tool-card {
  min-height: 72px;
  padding: 10px;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 18px !important;
  grid-template-rows: auto !important;
  align-items: center;
  gap: 10px;
}
.mobile-tools-menu .header-tool-card > .header-tool-icon { grid-column: 1; grid-row: 1; }
.mobile-tools-menu .header-tool-card > span:nth-child(2) { grid-column: 2; grid-row: 1; }
.mobile-tools-menu .header-tool-card > i { grid-column: 3; grid-row: 1; }
.mobile-tools-menu .header-tool-card strong,
.mobile-tools-menu .header-tool-card small { overflow-wrap: anywhere; }
.mobile-tools-all { min-height: 52px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; color: var(--teal-dark); font-size: .84rem; font-weight: 850; text-decoration: none; }

.tools-directory-page .inner-shell { width: min(calc(100% - 64px), var(--shell-wide)); max-width: var(--shell-wide); }
.tools-directory-intro { margin: 8px 0 18px; padding: 22px 24px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr); align-items: end; gap: 30px; border-block: 1px solid var(--line); }
.tools-directory-intro > div { display: grid; gap: 4px; }
.tools-directory-intro span,.tools-directory-method > span { color: var(--teal-dark); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tools-directory-intro h2 { margin: 0; color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.45rem); }
.tools-directory-intro p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.tools-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.tools-directory-card { min-width: 0; min-height: 205px; padding: 26px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tools-directory-card:nth-child(2n) { border-right: 0; }
.tools-directory-card:nth-last-child(-n+2) { border-bottom: 0; }
.tools-directory-card:last-child { border-right: 1px solid var(--line); }
.tools-directory-card:hover,.tools-directory-card:focus-visible { background: var(--mint); box-shadow: inset 4px 0 var(--teal); }
.tools-directory-number { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--teal); border-radius: 4px; color: var(--teal-dark); font-size: .78rem; font-weight: 900; }
.tools-directory-card > div { min-width: 0; display: grid; align-content: start; gap: 8px; }
.tools-directory-card small { color: var(--teal-dark); font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.tools-directory-card h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.15; overflow-wrap: anywhere; }
.tools-directory-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.tools-directory-card strong { margin-top: 4px; color: var(--teal-dark); font-size: .88rem; }
.tools-directory-method { margin: 28px 0 54px; padding: 28px; border-left: 4px solid var(--teal); background: var(--paper); }
.tools-directory-method h2 { margin: 6px 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.tools-directory-method p { max-width: 850px; margin: 0; color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .mobile-menu-button { display: grid; }
  .desktop-tools-menu { display: none; }
  .tools-directory-page .inner-shell { width: min(calc(100% - 40px), var(--shell-wide)); }
}

@media (max-width: 720px) {
  /* Las guías son contenido secuencial, no un carrusel cortado. */
  .tool-page .tool-guidance-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .tool-page .tool-guidance-grid article {
    min-width: 0;
    min-height: 0;
    padding: 20px;
    scroll-snap-align: none;
  }
  .tool-page .tool-guidance-grid h2 { font-size: 1.15rem; }
  .tool-page .tool-guidance-grid p,
  .tool-page .tool-guidance-grid li { overflow-wrap: anywhere; font-size: .96rem; line-height: 1.55; }
  .tools-directory-intro { grid-template-columns: 1fr; gap: 10px; }
  .tools-directory-grid { grid-template-columns: 1fr; }
  .tools-directory-card,
  .tools-directory-card:nth-child(2n),
  .tools-directory-card:nth-last-child(-n+2),
  .tools-directory-card:last-child { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .tools-directory-card:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
  .tools-directory-page .inner-shell { width: min(calc(100% - 24px), var(--shell-wide)); }
  .tools-directory-intro { padding: 18px 14px; }
  .tools-directory-card { padding: 20px 16px; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .tools-directory-number { width: 36px; height: 36px; }
  .tools-directory-method { margin-bottom: 34px; padding: 22px 18px; }
  .tool-page .related-tools > div { grid-template-columns: minmax(0, 1fr); }
  .tool-page .related-tools a,
  .tool-page .tool-source-links a,
  .tool-page .tool-result-actions button { min-width: 0; overflow-wrap: anywhere; }
  .tool-page .tool-guidance-grid { width: 100%; }
}

@media (max-width: 360px) {
  .tool-page .inner-shell,
  .history-page .inner-shell,
  .tools-directory-page .inner-shell { width: min(calc(100% - 20px), var(--shell-wide)); }
  .mobile-nav { left: 0; right: 0; width: auto; max-width: none; padding: 16px 14px; }
  .mobile-tools-menu .header-tool-card { grid-template-columns: 34px minmax(0, 1fr) auto; padding-inline: 8px; }
  .mobile-tools-menu .header-tool-icon { width: 34px; height: 34px; }
  .tool-page .tool-guidance-grid article { padding: 18px 16px; }
  .tool-result-kpis { grid-template-columns: minmax(0, 1fr); }
  .tool-result-kpis article { min-height: 88px; }
  .tool-page .tool-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-page .tool-presets button { min-width: 0; }
  .history-kpis { grid-template-columns: minmax(0, 1fr) !important; }
}

/* === v0.9.0 (2026-07-18) — /noticias/: 17 guías editoriales de producción ======
   Los artículos vienen de posts.json (fuente curada de valor-uf, se importa en
   cada release) y su HTML usa las variables de PRODUCCION. Este scope las
   traduce a la paleta del lab: el contenido no se toca, solo se re-mapea. Las
   mejoras editoriales propias (FAQ por búsquedas reales) viven en
   src/posts-extras.mjs. */
.post-lead,
.post-body {
  --primary: var(--teal);
  --primary-hover: var(--teal-dark);
  --text-main: var(--ink);
  --text-muted: var(--ink-soft);
  --border-color: var(--line);
  --border-light: var(--line);
  --bg-surface: var(--paper);
  --bg-surface-alt: var(--canvas);
  --success: #15803d;
  --danger: #b91c1c;
}
:root[data-theme="dark"] .post-lead,
:root[data-theme="dark"] .post-body { --success: #4ade80; --danger: #f87171; }

/* Cuerpo del artículo: prosa cómoda, ancho de lectura */
.post-article { max-width: 860px; margin: 26px 0 8px; }
.post-article .post-body { color: var(--ink); font-size: 1.02rem; line-height: 1.7; }
.post-article .post-body h2 { margin: 34px 0 12px; font-size: 1.45rem; line-height: 1.25; }
.post-article .post-body h3 { margin: 26px 0 10px; font-size: 1.15rem; }
.post-article .post-body h4 { margin: 20px 0 8px; }
.post-article .post-body p { margin: 0 0 14px; }
.post-article .post-body ul, .post-article .post-body ol { margin: 0 0 14px; padding-left: 22px; }
.post-article .post-body li { margin-bottom: 6px; }
.post-article .post-body a { color: var(--teal-dark); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.post-article .post-body table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: .92rem; }
.post-article .post-body th, .post-article .post-body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.post-article .post-body th { background: var(--canvas); }
.post-article .post-body details.uf-faq-item { padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); }
.post-article .post-body details.uf-faq-item summary { font-weight: 750; cursor: pointer; }
.post-article .post-body details.uf-faq-item[open] summary { margin-bottom: 8px; }

/* Caja "UF hoy" del lead (el CSS de producción no viaja con el JSON) */
.post-lead .uf-sii-current { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 26px; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius: 6px; background: var(--mint); }
.post-lead .uf-sii-current-kicker { display: block; margin-bottom: 4px; color: var(--teal-dark); font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.post-lead .uf-sii-current h2 { margin: 0 0 6px; font-size: 1.1rem; }
.post-lead .uf-sii-current-value { display: block; color: var(--teal-dark); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.post-lead .uf-sii-current p { margin: 4px 0 0; color: var(--ink-soft); font-size: .85rem; }
.post-lead .uf-sii-current-actions { display: flex; flex-direction: column; gap: 10px; min-width: 210px; }
.post-lead .uf-sii-current-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 6px; font-weight: 800; }
.post-lead .uf-sii-primary { background: var(--teal-dark); color: #fff; }
.post-lead .uf-sii-secondary { border: 1px solid var(--teal-dark); color: var(--teal-dark); }

/* FAQ del lab (overlay editorial) */
.post-faq { max-width: 860px; margin: 34px 0 0; }
.post-faq h2 { margin: 0 0 14px; font-size: 1.45rem; }
.post-faq-item { margin: 0 0 10px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.post-faq-item summary { color: var(--ink); font-weight: 800; cursor: pointer; }
.post-faq-item[open] summary { margin-bottom: 8px; }
.post-faq-item p { margin: 0; color: var(--ink); line-height: 1.65; }

/* CTA a la calculadora relacionada */
.post-tool-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; max-width: 860px; margin: 30px 0 0; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line)); border-left: 4px solid var(--teal-dark); border-radius: 6px; background: var(--canvas); }
.post-tool-cta span { display: block; margin-bottom: 4px; color: var(--teal-dark); font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.post-tool-cta h2 { margin: 0 0 6px; font-size: 1.2rem; }
.post-tool-cta p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.post-tool-cta > a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 6px; background: var(--teal-dark); color: #fff; font-weight: 800; white-space: nowrap; }

/* Autor (E-E-A-T) y guías relacionadas */
.post-author-box { max-width: 860px; margin: 26px 0 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); }
.post-author-box strong { display: block; margin-bottom: 4px; }
.post-author-box p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.post-related { margin: 38px 0 10px; }
.post-related h2 { margin: 0 0 14px; font-size: 1.3rem; }
.post-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.post-related a { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.post-related a:hover { border-color: var(--teal); }
.post-related small { color: var(--teal-dark); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.post-related span { color: var(--ink); font-weight: 750; line-height: 1.35; }
.post-related b { margin-top: auto; color: var(--teal-dark); font-size: .85rem; }

/* Hub /noticias/ */
.news-featured { margin: 30px 0 0; }
.news-featured h2, .news-grid-section h2 { margin: 0 0 14px; font-size: 1.45rem; }
.news-featured > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.news-featured a { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-top: 4px solid var(--teal-dark); border-radius: 6px; background: var(--paper); }
.news-featured a:hover { border-color: var(--teal-dark); }
.news-grid-section { margin: 38px 0 10px; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.news-grid a { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.news-grid a:hover { border-color: var(--teal); }
.news-featured small, .news-grid small { color: var(--teal-dark); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.news-featured h3, .news-grid h3 { margin: 0; color: var(--ink); font-size: 1.12rem; line-height: 1.3; }
.news-grid h3 { font-size: 1.02rem; }
.news-featured p, .news-grid p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.news-featured b, .news-grid b { margin-top: auto; color: var(--teal-dark); font-size: .85rem; }

@media (max-width: 860px) {
  .post-related > div, .news-grid { grid-template-columns: 1fr 1fr; }
  .news-featured > div { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .post-related > div, .news-grid { grid-template-columns: 1fr; }
  .post-tool-cta > a { width: 100%; justify-content: center; }
  .post-lead .uf-sii-current-actions { width: 100%; min-width: 0; }
}

/* Portadas editoriales de noticias (SVG del build, serie src/post-covers.mjs).
   En las tarjetas sangran hasta el borde; dentro del artículo funcionan como
   una figura editorial enmarcada después del primer párrafo. */
.news-cover { display: block; overflow: hidden; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 9; }
.news-cover svg { display: block; width: 100%; height: 100%; }
.news-featured a .news-cover { margin: -24px -24px 6px; }
.news-grid a .news-cover { margin: -20px -20px 6px; }
.news-featured a, .news-grid a { overflow: hidden; }
.post-cover { width: min(100%, 820px); margin: 28px auto 34px; padding: 9px 9px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: 0 14px 34px rgba(15, 23, 42, .07); }
.post-cover-art { overflow: hidden; border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line)); border-radius: 3px; aspect-ratio: 16 / 9; background: var(--canvas); }
.post-cover-art svg { display: block; width: 100%; height: 100%; }
.post-cover figcaption { min-height: 42px; padding: 0 5px; display: flex; align-items: center; gap: 9px; color: var(--ink-muted); font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.post-cover figcaption i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
@media (max-width: 560px) {
  .post-cover { margin: 20px 0 26px; padding: 6px 6px 0; box-shadow: 0 10px 24px rgba(15, 23, 42, .06); }
  .post-cover figcaption { min-height: 36px; font-size: .64rem; }
}

/* Hub de noticias v2: carrusel de destacadas + sidebar de indicadores */
.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; margin-top: 26px; }
.news-carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.news-carousel-head h2 { margin: 0; font-size: 1.45rem; }
.news-carousel-nav { display: flex; gap: 8px; }
.news-carousel-nav button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--teal-dark); font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.news-carousel-nav button:hover { border-color: var(--teal-dark); background: var(--mint); }
.news-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(400px, 88%); gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.news-carousel a { display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 22px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-top: 4px solid var(--teal-dark); border-radius: 6px; background: var(--paper); scroll-snap-align: start; }
.news-carousel a:hover { border-color: var(--teal-dark); }
.news-carousel a .news-cover { margin: -22px -22px 6px; }
.news-carousel small { color: var(--teal-dark); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.news-carousel h3 { margin: 0; color: var(--ink); font-size: 1.12rem; line-height: 1.3; }
.news-carousel p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.news-carousel b { margin-top: auto; color: var(--teal-dark); font-size: .85rem; }
.news-main .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-side { position: sticky; top: 18px; display: grid; gap: 16px; }
.news-side-block { padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.news-side-block h2 { margin: 0 0 12px; font-size: 1.05rem; }
.news-side-block ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.news-side-block li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.news-side-block li:last-child { border-bottom: 0; }
.news-side-block li > span { color: var(--ink-soft); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.news-side-block li strong { display: block; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.news-side-block li small { display: block; color: var(--ink-muted); font-size: .7rem; text-align: right; }
.news-side-source { display: block; margin-top: 10px; color: var(--ink-muted); font-size: .72rem; }
.news-side-links { display: grid; gap: 8px; }
.news-side-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-size: .9rem; font-weight: 750; }
.news-side-links a:hover { border-color: var(--teal-dark); color: var(--teal-dark); }
@media (max-width: 1020px) {
  .news-layout { grid-template-columns: 1fr; }
  .news-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .news-side { grid-template-columns: 1fr; }
  .news-main .news-grid { grid-template-columns: 1fr; }
  .news-carousel { grid-auto-columns: 88%; }
  .news-carousel-nav { display: none; }
}

/* === Monetización (patrón valor-utm): zonas con espacio SIEMPRE reservado ====
   El placeholder solo se ve en previews; en valor-uf.cl la unidad real ocupa
   exactamente la reserva (CLS 0). portada-principal reserva 96px; la
   contextual 280px para dejar competir al billboard 970x250. */
.ad-zone { margin-top: 34px; margin-bottom: 34px; }
.ad-reserved { display: grid; place-content: center; gap: 2px; height: 96px; padding: 14px; border: 1px dashed var(--line); border-radius: 6px; background: var(--canvas); color: var(--ink-soft); text-align: center; }
.ad-reserved b { font-size: .82rem; }
.ad-reserved small { font-size: .7rem; }
.ad-reserved[data-ad-state="mounted"] { display: block; padding: 0; border: 0; background: transparent; }
.ad-reserved[data-ad-state="mounted"] > .adsbygoogle { display: block !important; width: 100% !important; min-width: 120px; min-height: 90px; }
.ad-zone[data-ad-position="portada-contextual"] .ad-reserved { height: 280px; min-height: 280px; }
.ad-zone[data-ad-position="portada-contextual"] .ad-reserved[data-ad-state="mounted"] > .adsbygoogle { min-height: 280px; }
@media (max-width: 600px) {
  .ad-zone { margin-top: 24px; margin-bottom: 24px; }
  .ad-reserved { height: 100px; }
  .ad-reserved[data-ad-state="mounted"] > .adsbygoogle { min-height: 100px; }
}

/* === Boletín (home) y formulario de contacto (Functions de producción) ====== */
.newsletter-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; align-items: center; margin-top: 34px; padding: 30px 34px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-left: 4px solid var(--teal-dark); border-radius: 6px; background: var(--canvas); }
.newsletter-copy h2 { margin: 8px 0 10px; font-size: 1.55rem; }
.newsletter-copy p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.newsletter-form label[for="newsletter-email"] { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.newsletter-control { display: flex; gap: 10px; }
.newsletter-control input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: 1rem; }
.newsletter-control input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.newsletter-control button { flex: 0 0 auto; height: 52px; padding: 0 22px; border: 0; border-radius: 6px; background: var(--teal-dark); color: #fff; font-weight: 800; cursor: pointer; }
.newsletter-control button:hover { background: var(--teal); }
.newsletter-control button:disabled { opacity: .6; cursor: wait; }
.newsletter-status { min-height: 20px; margin: 8px 0 4px; color: var(--teal-dark); font-size: .88rem; font-weight: 700; }
.newsletter-form small { color: var(--ink-muted); font-size: .74rem; }
.newsletter-form small a { text-decoration: underline; }
@media (max-width: 860px) {
  .newsletter-band { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
  .newsletter-control { flex-direction: column; }
  .newsletter-control button { width: 100%; }
}

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 28px; align-items: start; margin-top: 26px; }
/* Contacto por correo directo, sin formulario (decisión de Pablo 18-07-2026). */
.contact-direct { display: grid; gap: 16px; justify-items: start; padding: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.contact-direct-kicker { color: var(--teal-dark); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.contact-direct-lead { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.contact-mail { display: inline-flex; align-items: center; gap: 15px; max-width: 100%; padding: 16px 22px 16px 18px; border: 1.5px solid color-mix(in srgb, var(--teal) 42%, var(--line)); border-radius: 8px; background: var(--mint); color: var(--ink) !important; text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.contact-mail:hover { border-color: var(--teal); transform: translateY(-1px); }
.contact-mail:focus-visible { outline: 3px solid color-mix(in srgb, var(--teal) 32%, transparent); outline-offset: 2px; }
.contact-mail-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--paper); color: var(--teal-dark); }
.contact-mail-icon svg { width: 22px; height: 22px; }
.contact-mail-text { min-width: 0; display: grid; gap: 2px; }
.contact-mail-text small { color: var(--ink-muted); font-size: .72rem; font-weight: 750; }
.contact-mail-text strong { overflow-wrap: anywhere; color: var(--teal-dark); font-size: 1.24rem; line-height: 1.25; letter-spacing: -.01em; }
.contact-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink-soft); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; transition: border-color .16s ease, color .16s ease; }
.contact-copy:hover { border-color: var(--teal); color: var(--teal-dark); }
.contact-copy.is-copied { border-color: var(--teal); background: var(--mint); color: var(--teal-dark); }
@media (max-width: 520px) {
  .contact-direct { padding: 22px 18px; }
  .contact-mail { gap: 12px; padding: 14px 16px; }
  .contact-mail-icon { width: 38px; height: 38px; }
  .contact-mail-text strong { font-size: 1.02rem; }
}
.contact-note { margin: 0; color: var(--ink-muted); font-size: .8rem; }
.contact-aside { display: grid; gap: 16px; }
.contact-tips { margin: 0; padding-left: 18px; color: var(--ink); line-height: 1.6; }
.contact-tips li { margin-bottom: 6px; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

/* Anuncio principal DENTRO del hero, PEGADO bajo el conversor (patrón de
   valor-utm: .hero-task-column). Antes el aviso era hijo directo de la grilla y
   caía en la FILA 2, cuya altura la manda la columna izquierda: el conversor se
   estiraba (160px de hueco muerto) y el anuncio terminaba 204px más abajo de
   donde acababa el contenido. Metiendo conversor + anuncio en una sola columna
   que se ajusta a su contenido (align-self:start), el aviso queda inmediatamente
   debajo, sin importar cuánto mida la columna de la izquierda. */
.uf-console .console-task-column {
  grid-column: 2;
  align-self: start;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* El mismo desplazamiento de 24px que lleva el conversor, para que ambos
   compartan bordes izquierdo y derecho. */
.uf-console .hero-ad-zone { margin: 18px 0 0 24px; position: relative; z-index: 1; }
@media (max-width: 1100px) {
  .uf-console .console-task-column { grid-column: auto; }
  .uf-console .hero-ad-zone { margin: 10px 0 20px; }
}
@media (max-width: 600px) {
  /* La columna toma el order que antes tenía el conversor; el aviso va dentro,
     así que queda debajo de él automáticamente. */
  /* align-self:start viene de la grilla de escritorio, donde alinea la columna
     arriba. Aqui la cabecera es flex-column y ese mismo valor le dice "no te
     estires": el conversor tomaba su ancho natural de 300px dentro de un
     contenedor de 280 y se salia por la derecha, dejando el bloque descuadrado
     en 320px. stretch lo devuelve al ancho del contenedor. */
  .uf-console .console-hero-grid > .console-task-column { order: 6; align-self: stretch; width: 100%; }
  .uf-console .hero-ad-zone { margin: 0 0 12px; }
}

/* === v0.9.0: lectura en voz alta (parlante dentro del resultado) ======= */
/* Hay un botón por campo pero solo se muestra el del campo marcado
   .is-result (lo pone markFields al invertir la dirección). En el conversor
   de la home la etiqueta CLP/UF es un elemento en flujo (v0.6), así que el
   orden natural queda: número · etiqueta · parlante. */
.calc-speak-btn {
  display: none;
  flex: 0 0 auto;
  place-items: center;
  /* Si cambias este tamaño, cambia también --tag-ancho en .console-converter
     .calc-currency-tag: la etiqueta CLP/UF se centra sobre el parlante y si los
     anchos no coinciden, el botón se ve corrido aunque los bordes calcen. */
  width: 38px;
  height: 38px;
  margin-left: 8px;
  border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
  border-radius: 50%;
  background: var(--paper);
  color: var(--teal-dark);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.calc-input-wrapper.is-result .calc-speak-btn { display: inline-grid; }
.calc-speak-btn svg { width: 18px; height: 18px; }
.calc-speak-btn:hover,
.calc-speak-btn:focus-visible {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, var(--paper));
  color: var(--teal);
}
:root[data-theme="dark"] .calc-speak-btn { background: transparent; }
.calc-speak-btn.is-speaking,
.console-btn.is-speaking {
  border-color: var(--teal);
  color: var(--teal);
}
/* Mientras habla, las onditas del parlante se encienden en secuencia.
   Solo cambia la opacidad: la geometría queda fija y el botón se ve firme
   (el pulso de escala anterior hacía "flotar" el icono). */
.is-speaking .speak-wave { animation: speak-wave 1.1s ease-in-out infinite; }
.is-speaking .speak-wave-2 { animation-delay: .28s; }
@keyframes speak-wave { 0%, 100% { opacity: .2; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-speaking .speak-wave { animation: none; } }
@media (max-width: 430px) {
  .calc-speak-btn { width: 34px; height: 34px; margin-left: 6px; }
}

/* === v0.9.1: moneda en la fila del título (pulido de Pablo, 20-07) ===== */
/* La etiqueta CLP/UF deja la fila del número (competía en ancho con la
   cifra y el parlante) y vive en el DOM junto al título de la tarjeta:
   así se alinea sola en todos los breakpoints, incluso con la costura del
   swap (padding 42px que cambia de tarjeta al invertir). El número queda
   con todo el ancho y el parlante se centra en su fila. */
.calc-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.console-converter .calc-label-row .calc-currency-tag {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 850;
  letter-spacing: .04em;
}
.console-converter .calc-speak-btn { align-self: center; }

/* Carrusel de las 7 calculadoras en móvil angosto: una tarjeta por pantalla.
   Antes la tarjeta medía 248px y dejaba asomar ~40px de la siguiente, que se
   veía como una franja vertical rara (solo el borde redondeado, sin contenido).
   A tarjeta completa se lee como un slider limpio; el texto "Desliza para ver
   las 7" y el scroll-snap ya indican que hay más. Solo afecta a las
   calculadoras, no a los otros carriles (KPI, pilares). */
@media (max-width: 640px) {
  .tools-promo-grid--seven { grid-auto-columns: 100% !important; grid-template-columns: none !important; }
}