/* Archivo (Omnibus-Type, OFL): titulos, cifras y marca. Grotesca de fundicion
   latinoamericana hecha para titulares; recortada a pesos 600-800 y ancho 62-100 %.
   El texto corrido sigue en Inter: esta es la voz, Inter es la lectura. */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2');
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 62% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

/* Valor UMA foundation */
.uma-source-links { display: grid; grid-template-columns: repeat(2, auto); align-items: center; gap: 8px 18px; }
.uma-source-links > span { grid-column: 1 / -1; color: var(--ink-muted); font-size: .8rem; font-weight: 800; }
.uma-source-links a { color: var(--teal); font-weight: 800; }
.footer-nav-grid p { margin: 0; color: var(--ink-muted); font-size: .78rem; line-height: 1.55; }

.uma-kicker { display: inline-flex; width: fit-content; align-items: center; gap: 10px; color: var(--teal); font-size: .86rem; font-weight: 700; line-height: 1.3; }
/* La marca de medida del logo: una rayita vertical con su tope, como en una regla. */
.uma-kicker::before { width: 3px; height: 14px; flex: 0 0 3px; border-radius: 0; background: var(--marigold); content: ""; }

.uma-hero {
  position: relative;
  padding: 22px 0 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.uma-hero-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr); gap: 36px; align-items: start; position: relative; z-index: 1; }
.uma-hero-copy { display: flex; min-width: 0; padding: 0; flex-direction: column; justify-content: flex-start; }
.uma-hero-copy h1, .tool-page-hero h1 {
  margin: 8px 0 0;
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
}
.uma-lead { max-width: 560px; margin: 14px 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; }
.uma-primary-value { margin-top: 24px; }
.uma-primary-header { display: flex; align-items: center; gap: 8px; }
.uma-primary-header > span, .uma-primary-value > small { display: block; color: var(--ink-muted); font-size: .8rem; font-weight: 750; }
.uma-primary-value strong { display: block; margin: 3px 0 2px; color: var(--teal); font-size: clamp(3.2rem, 5.5vw, 5.2rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.uma-primary-value > small { letter-spacing: 0; text-transform: none; }

.uma-validity { display: flex; align-items: center; gap: 14px; margin-top: 18px; color: var(--ink-soft); font-size: .8rem; font-weight: 600; }
.uma-validity span { display: inline-flex; align-items: center; gap: 6px; }
.uma-validity a { color: var(--teal); font-weight: 750; text-decoration: none; }
.uma-validity a:hover { text-decoration: underline; }
.uma-validity .live-dot { width: 7px; height: 7px; margin-right: 0; flex-shrink: 0; }

.speak-icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--canvas); color: var(--ink-soft); cursor: pointer; transition: all 0.2s ease; }
.speak-icon-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--paper); }
.speak-icon-btn.is-speaking { border-color: var(--teal); background: var(--teal); color: var(--on-brand); animation: pulse-speak 1.5s infinite; }
@keyframes pulse-speak { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }

.uma-toast { position: fixed; bottom: 24px; right: 24px; z-index: 1000; padding: 12px 20px; border-radius: var(--radius-lg); background: var(--ink); color: var(--paper); font-size: .84rem; font-weight: 750;  transform: translateY(100px); opacity: 0; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.uma-toast.show { transform: translateY(0); opacity: 1; }

.uma-console { min-width: 0; width: 100%; padding: 26px 0 22px; align-self: center; }
.uma-console-head { display: flex; min-height: 62px; padding-bottom: 14px; align-items: start; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.uma-console-head h2 { margin: 4px 0 0; font-size: 1.55rem; line-height: 1.2; }
.uma-rate-pill { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); color: var(--teal); font-family: var(--font-display); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.uma-calc-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); margin: 14px 0 12px; gap: 0; align-items: end; }
.uma-toolbar-selects { grid-column: 1; display: flex; gap: 8px; width: 100%; }
.uma-toolbar-selects label { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--ink-muted); font-size: .8rem; font-weight: 800; }
.uma-fines-console > header label { display: flex; flex: 0 0 auto; width: 120px; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--ink-muted); font-size: .8rem; font-weight: 800; }
.uma-calc-toolbar select, .uma-fines-console select { width: 100%; height: 42px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-weight: 800; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.uma-calc-toolbar select option, .uma-fines-console select option { background: var(--paper); color: var(--ink); padding: 8px 12px; font-weight: 700; }
.uma-toolbar-actions { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; }
.reset-converter { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: all 0.2s ease; }
.reset-converter:hover { border-color: var(--teal); color: var(--teal); background: var(--canvas); }
.reset-converter.is-past { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.reset-converter.is-past:hover { background: var(--amber); border-color: var(--amber); color: var(--paper); }
.uma-converter-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; }
.uma-input-box { display: flex; min-width: 0; height: 112px; padding: 16px 14px; flex-direction: column; justify-content: space-between; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas); transition: border-color 0.2s, box-shadow 0.2s; }
.uma-input-box:hover, .uma-input-box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-ring); }
.uma-input-box > span { color: var(--ink-muted); font-size: .78rem; }
.uma-input-box > div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 6px; }
.uma-input-box input { min-width: 0; width: 100%; border: 0; border-bottom: 2px solid var(--teal); outline: 0; background: transparent; color: var(--ink); font-size: clamp(1.4rem, 2.3vw, 1.95rem); font-weight: 850; font-variant-numeric: tabular-nums; }
.uma-input-box strong[data-uma-result] { min-width: 0; overflow: hidden; font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-variant-numeric: tabular-nums; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.uma-input-box b { flex: 0 0 auto; color: var(--ink-muted); font-size: .78rem; }
.uma-swap { position: relative; z-index: 1; display: grid; width: 56px; height: 56px; margin-inline: auto; place-items: center; border: 1px solid var(--teal); border-radius: 50%; background: var(--paper); color: var(--teal); }
.uma-swap:hover { background: var(--teal); color: var(--paper); }
.uma-equation { min-height: 24px; margin: 10px 0 8px; overflow: hidden; color: var(--ink-soft); font-size: .82rem; font-weight: 650; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.uma-quick-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; gap: 6px; margin: 12px 0 10px; }
.uma-quick-row button { min-width: 0; min-height: 38px; padding: 6px 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); color: var(--ink-soft); font-size: .78rem; font-weight: 750; cursor: pointer; transition: all .15s ease; text-align: center; }
.uma-quick-row button:hover { border-color: var(--teal); color: var(--teal); background: var(--paper); }

.uma-actions-row { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; margin-top: 10px; }
.uma-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: var(--radius); font-weight: 700; font-size: .84rem; cursor: pointer; transition: all .2s ease; text-decoration: none; white-space: nowrap; }
.uma-act.primary { background: var(--teal); color: var(--on-brand); border: 1.5px solid var(--teal-dark, var(--teal)); }
.uma-act.primary:hover { background: color-mix(in srgb, var(--teal) 85%, #000); }
.uma-act .icon-check { display: none; }
.uma-act.is-copied .icon-copy { display: none; }
.uma-act.is-copied .icon-check { display: inline-block; }
.uma-act.is-copied { background: var(--green) !important; border-color: var(--green) !important; color: var(--paper) !important; }
.uma-act.whatsapp { border: 1.5px solid var(--wa); color: var(--wa); background: var(--paper); }
.uma-act.whatsapp:hover { background: var(--wa); border-color: var(--wa); color: var(--on-brand); }

.uma-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 9px 0 0; color: var(--ink-muted); font-size: .72rem; font-weight: 600; text-align: center; }
.uma-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--marigold); flex-shrink: 0; }

@media (min-width: 901px) {
  .uma-console { align-self: start; padding: 0; transform: none; }
}

.uma-value-band { border-bottom: 1px solid var(--line); background: var(--canvas); }
.uma-value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uma-value-grid article { min-width: 0; padding: 22px 24px; border-right: 1px solid var(--line); }
.uma-value-grid article:first-child { border-left: 1px solid var(--line); }
.uma-value-grid span, .uma-value-grid small { display: block; color: var(--ink-muted); font-size: .78rem; font-weight: 600; }
.uma-value-grid span { color: var(--ink-soft); font-size: .84rem; font-weight: 700; }
.uma-value-grid strong { display: block; margin: 4px 0; overflow-wrap: anywhere; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.uma-section { padding-block: 54px; }
.uma-section-head { margin-bottom: 30px; }
.uma-section-head h2 { margin: 10px 0 0; font-size: clamp(2.05rem, 4.4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.08; }
.uma-section-head.split { display: flex; align-items: end; justify-content: space-between; gap: 36px; }
.uma-section-head.split > p { max-width: 500px; margin: 0; color: var(--ink-muted); font-size: .8rem; line-height: 1.55; text-align: right; }
.uma-section-head.split > a { color: var(--teal); font-size: .8rem; font-weight: 850; white-space: nowrap; }
.uma-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.uma-tool-grid > a { min-width: 0; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.uma-tool-grid > a:nth-child(3n) { border-right: 0; }
.uma-tool-grid > a:last-child { border-right: 0; }
.uma-tool-grid:has(> a:nth-child(3):last-child) > a { border-bottom: 0; }
.uma-tool-grid:has(> a:nth-child(4):last-child) > a:nth-child(n+3),
.uma-tool-grid:has(> a:nth-child(5):last-child) > a:nth-child(n+4) { border-bottom: 0; }
.uma-tool-grid > a > svg { display: block; width: 30px; height: 30px; color: var(--teal); }
.uma-tool-grid > a > svg .acento { color: var(--marigold); }
.uma-tool-grid > a { transition: background-color .15s ease; }
.uma-tool-grid > a:hover { background: var(--mint); }
.uma-tool-grid > a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.uma-tool-grid h3 { margin: 15px 0 7px; font-size: 1.12rem; }
.uma-tool-grid p { min-height: 75px; margin: 0 0 18px; color: var(--ink-soft); font-size: .8rem; line-height: 1.55; }
.uma-tool-grid b { color: var(--teal); font-size: .78rem; }
.uma-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.uma-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.uma-table th { padding: 13px 16px; background: var(--canvas); color: var(--ink-muted); font-size: .8rem; text-align: left; }
.uma-table td { padding: 14px 16px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.uma-table td:first-child a { color: var(--teal); font-weight: 850; }
.uma-faq { padding-block: 72px 86px; }

.uma-page-hero .uma-kicker { margin-bottom: 7px; }
.uma-fines-console { width: 100%; margin-block: 0 32px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.uma-fines-console > header { display: flex; padding: 0 0 18px; align-items: end; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.uma-fines-console h2 { margin: 5px 0 0; font-size: 1.5rem; }
.uma-fines-inputs { display: grid; grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr); padding: 20px 0; align-items: center; }
.uma-fines-inputs > div { color: var(--ink-muted); font-weight: 800; text-align: center; }
.uma-fines-inputs label { display: flex; min-width: 0; min-height: 72px; padding: 12px 18px; align-items: center; justify-content: space-between; gap: 14px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); cursor: text; transition: all 0.2s ease; }
.uma-fines-inputs label:hover, .uma-fines-inputs label:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-ring); }
.uma-fines-inputs input { min-width: 90px; max-width: 200px; height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--canvas); color: var(--teal); font-size: 1.5rem; font-weight: 900; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; outline: 0; transition: all 0.2s ease; }
.uma-fines-inputs label:focus-within input, .uma-fines-inputs input:focus { border-color: var(--teal); background: var(--paper); box-shadow: inset 0 0 0 1px var(--teal); }
.uma-fines-inputs span { color: var(--ink-muted); font-size: .84rem; font-weight: 750; white-space: nowrap; }

.uma-credit-inputs { grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 28px; }
@media (max-width: 600px) { .uma-credit-inputs { grid-template-columns: 1fr !important; gap: 12px; padding: 16px 0 !important; } }

/* Preset chips for quick UMA amounts */
.uma-preset-row { display: flex; align-items: center; gap: 8px; padding: 0 0 18px; flex-wrap: wrap; }
.uma-preset-label { font-size: .8rem; font-weight: 800; color: var(--ink-muted); margin-right: 4px; }
.uma-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink); font-size: .78rem; font-weight: 750; cursor: pointer; transition: all .15s ease; user-select: none; }
.uma-chip:hover { border-color: var(--teal); color: var(--teal); background: var(--mint); }
.uma-chip.is-active { border-color: var(--teal); background: var(--teal); color: var(--on-brand); }
:root[data-theme="dark"] .uma-chip.is-active { color: var(--canvas); }

.uma-fines-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); padding: 8px 0; }
.uma-fines-results article { padding: 18px 20px 18px 0; border-right: 1px solid var(--line); }
.uma-fines-results article:last-child { border-right: 0; padding-left: 20px; }
.uma-fines-results span { display: block; color: var(--ink-muted); font-size: .8rem; font-weight: 800; }
.uma-fines-results strong { display: block; margin-top: 5px; color: var(--teal); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.uma-fines-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 20px 0 0; }
.uma-fines-actions .uma-act { flex: 0 0 auto; min-width: 140px; padding: 0 22px; }

/* Traffic fine — discount toggle */
.traffic-discount-row { padding: 0 0 20px; }
.discount-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .84rem; font-weight: 650; color: var(--ink-soft); user-select: none; }
.discount-toggle input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--teal); cursor: pointer; flex-shrink: 0; }
.discount-toggle:hover { color: var(--teal); }
.uma-fines-results small { display: block; margin-top: 4px; font-size: .75rem; font-weight: 650; color: var(--teal); opacity: .8; }

/* IMSS cap gauge */
.cap-gauge-wrap { padding: 4px 0 8px; }
.cap-gauge-labels { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: .78rem; color: var(--ink-soft); flex-wrap: wrap; }
.cap-gauge-labels strong { color: var(--ink); font-weight: 800; }
.cap-bar-outer { position: relative; height: 16px; background: var(--canvas); border-radius: 8px; border: 1px solid var(--line); overflow: visible; }
.cap-bar-fill { height: 100%; border-radius: 8px; max-width: 100%; transition: width .45s ease, background .3s ease; }
.cap-verdict { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-radius: var(--radius-lg); margin: 16px 0 4px; border: 1px solid; }
.cap-verdict strong { display: block; font-size: .95rem; margin-bottom: 3px; }
.cap-verdict p { margin: 0; font-size: .82rem; font-weight: 500; }
.cap-verdict svg { flex-shrink: 0; margin-top: 2px; }
.cap-verdict.ok { background: var(--green-glow); color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.cap-verdict.vacio { background: var(--paper); color: var(--ink-soft); border-color: var(--line); }
.cap-verdict.over { background: var(--amber-soft); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.uma-formula-pill { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; padding: 13px 18px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--canvas) 60%, transparent); border: 1px solid var(--line); color: var(--ink-soft); font-size: .83rem; font-weight: 600; }
.uma-formula-pill svg { color: var(--teal); flex-shrink: 0; }
.uma-formula-pill strong { color: var(--ink); font-weight: 800; }
.uma-reading { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 56px; }
.uma-reading article { padding: 8px 30px 18px; border-right: 1px solid var(--line); }
.uma-reading article:first-child { padding-left: 0; }
.uma-reading article:last-child { padding-right: 0; border-right: 0; }
.uma-reading h2 { margin: 8px 0 12px; font-size: 1.3rem; }
.uma-reading p { margin: 0; color: var(--ink-soft); font-size: .85rem; line-height: 1.7; }
.uma-year-hero { padding-block: 58px; border-bottom: 1px solid var(--line); background: var(--paper); }
.uma-year-hero h1 { margin: 8px 0 4px; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: 0; line-height: 1; }
.uma-year-hero > .shell > p { color: var(--ink-soft); }
.uma-year-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 34px; border-block: 1px solid var(--line); }
.uma-year-values article { padding: 20px 24px; border-right: 1px solid var(--line); }
.uma-year-values article:last-child { border-right: 0; }
.uma-year-values span { display: block; color: var(--ink-muted); font-size: .8rem; font-weight: 800; }
.uma-year-values strong { display: block; margin-top: 3px; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.uma-empty { min-height: 60vh; padding: 90px 0; text-align: center; }
.uma-empty h1 { margin: 8px 0; font-size: 2.5rem; }
.uma-empty p { margin-bottom: 24px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .uma-hero-grid { grid-template-columns: 1fr; }
  .uma-hero-copy { padding: 38px 0 34px; border-right: 0; border-bottom: 1px solid var(--line); }
  .uma-console { padding: 34px 0 38px; }
  .uma-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uma-value-grid article:nth-child(2) { border-right: 0; }
  .uma-value-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .uma-tool-grid { grid-template-columns: 1fr; }
  .uma-tool-grid > a { border-right: 0; border-bottom: 1px solid var(--line); }
  .uma-tool-grid > a:last-child { border-bottom: 0; }
  .uma-tool-grid p { min-height: 0; }
  .uma-reading { grid-template-columns: 1fr; }
  .uma-reading article, .uma-reading article:first-child, .uma-reading article:last-child { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .uma-reading article:last-child { border-bottom: 0; }
}

@media (max-width: 600px) {
  .uma-hero-grid { min-height: 0; }
  .uma-hero-copy h1 { font-size: 2.4rem; }
  .uma-primary-value { margin-top: 22px; }
  .uma-primary-value strong { font-size: 3rem; }
  .uma-validity { align-items: flex-start; flex-direction: column; gap: 8px; }
  .uma-console-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .uma-rate-pill { white-space: normal; }
  .uma-converter-row { display: flex; flex-direction: column; gap: 8px; position: relative; }
  .uma-calc-toolbar { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .uma-input-box { width: 100%; height: 82px; padding: 12px 14px; }
  .uma-input-box input, .uma-input-box strong[data-uma-result] { font-size: 1.45rem; }
  .uma-input-box > div { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
  .uma-swap { margin: -6px auto; width: 42px; height: 42px; z-index: 2; }
  .uma-swap svg { transform: rotate(90deg); width: 22px; height: 22px; }
  .uma-quick-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; gap: 5px; }
  .uma-quick-row button { min-width: 0; min-height: 34px; padding: 4px 2px; font-size: .72rem; }
  .uma-actions-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .uma-act { min-height: 40px; padding: 0 8px; font-size: .78rem; }
  .uma-section-head.split { align-items: flex-start; flex-direction: column; gap: 12px; }
  .uma-section-head.split > p { text-align: left; }
  .uma-value-grid { grid-template-columns: 1fr; }
  .uma-value-grid article, .uma-value-grid article:first-child { border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .uma-value-grid article:last-child { border-bottom: 0; }
  .uma-fines-console > header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .uma-fines-inputs { grid-template-columns: 1fr !important; gap: 12px; padding: 16px 0; }
  .uma-fines-inputs > div { font-size: .74rem; font-weight: 750; }
  .uma-fines-inputs label { flex-direction: column; align-items: stretch; gap: 8px; height: auto; min-height: 0; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
  .uma-fines-inputs input { min-width: 0; max-width: none; width: 100%; height: 44px; padding: 0 12px; font-size: 1.25rem; font-weight: 850; font-family: var(--font-mono); border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--canvas); color: var(--teal); text-align: left; box-sizing: border-box; }
  .uma-fines-inputs span { display: none; }
  .uma-fines-results { grid-template-columns: 1fr; }
  .uma-fines-results article { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .uma-fines-results article:last-child { border-bottom: 0; padding-left: 0; }
  .uma-fines-actions { margin-inline: 0; justify-content: stretch; }
  .uma-fines-actions .uma-act { flex: 1; min-width: 0; }
  .uma-preset-row { flex-wrap: wrap; gap: 6px; }
  .uma-chip { padding: 5px 10px; font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .uma-formula-pill { padding: 11px 14px; font-size: .78rem; }
  .uma-year-values { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
  .uma-year-values article { padding: 14px 16px; }
  .uma-year-values article:nth-child(2n) { border-right: 0; }
  .uma-year-values article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .uma-year-values strong { font-size: 1.25rem; }
  .uma-year-hero { padding-block: 36px; }
  .uma-year-hero h1 { font-size: 2.2rem; }
  .uma-table { min-width: 680px; }
  /* Tablas de tres columnas cortas (24-10-2026): caben enteras en 320 px; con
     680 px las cifras, que son lo que se viene a ver, quedaban fuera. */
  .uma-table.uma-table-compacta { min-width: 0; }
  .uma-table-compacta th, .uma-table-compacta td { padding: 12px 8px; }
}

@media (max-width: 360px) {
  .shell { width: calc(100% - 24px); }
  .site-header { position: static; }
  .text-size-control { display: none; }
  .header-inner { min-height: 56px; gap: 10px; }
  .uma-console { padding-block: 20px; }
  .uma-calc-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .uma-calc-toolbar label { align-items: flex-start; flex-direction: column; }
  .uma-calc-toolbar select { width: 100%; }
  .uma-input-box { height: 78px; padding: 10px 12px; }
  .uma-input-box input, .uma-input-box strong[data-uma-result] { font-size: 1.25rem; }
  .uma-input-box > span { font-size: .72rem; }
  .uma-swap { width: 38px; height: 38px; }
  .uma-swap svg { width: 18px; height: 18px; }
  .uma-equation { font-size: .74rem; }
  .uma-quick-row button { height: 34px; font-size: .72rem; }
  .uma-fines-inputs label { padding: 10px 12px; gap: 6px; }
  .uma-fines-inputs input { height: 40px; padding: 0 10px; font-size: 1.15rem; }
  .uma-fines-console h2 { font-size: 1.2rem; }
  .uma-preset-row { gap: 5px; }
  .uma-chip { padding: 4px 8px; font-size: .72rem; }
  .cap-verdict { padding: 12px 14px; gap: 8px; }
  .cap-verdict strong { font-size: .85rem; }
  .cap-verdict p { font-size: .76rem; }
}

@media (max-width: 320px) {
  .shell { width: calc(100% - 16px); }
  .uma-hero-copy h1 { font-size: 2.1rem; }
  .uma-primary-value strong { font-size: 2.5rem; }
  .uma-console { padding-block: 16px; }
  .uma-input-box { height: 74px; padding: 8px 10px; }
  .uma-input-box input, .uma-input-box strong[data-uma-result] { font-size: 1.15rem; }
  .uma-swap { width: 34px; height: 34px; }
  .uma-swap svg { width: 16px; height: 16px; }
  .uma-fines-console > header { gap: 10px; }
  .uma-fines-inputs label { padding: 8px 10px; border-radius: var(--radius); }
  .uma-fines-inputs input { height: 38px; padding: 0 8px; font-size: 1.05rem; border-radius: var(--radius); }
  .uma-fines-results strong { font-size: 1.35rem; }
  .uma-preset-row { gap: 4px; }
  .uma-chip { padding: 3px 6px; font-size: .72rem; }
  .uma-formula-pill { padding: 10px 12px; font-size: .72rem; gap: 8px; }
  .tool-page-hero h1 { font-size: 1.55rem; }
  .tool-rate-context strong { font-size: 1.25rem; }
  .uma-year-hero { padding-block: 24px; }
  .uma-year-hero h1 { font-size: 1.8rem; }
  .uma-year-values { grid-template-columns: 1fr; margin-top: 16px; }
  .uma-year-values article { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .uma-year-values article:last-child { border-bottom: 0; }
  .uma-year-values article:nth-child(2n) { border-right: 0; }
  .uma-year-values strong { font-size: 1.15rem; }
  .uma-reading h2 { font-size: 1.1rem; }
  .uma-reading p { font-size: .8rem; }
}

:root {
  color-scheme: light;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Archivo', 'Inter', -apple-system, "Segoe UI", sans-serif;
  /* Las cifras que antes iban en monoespaciada (formulas, resultados) van en
     la letra de marca con numeros tabulares: se alinean sin parecer codigo. */
  --font-mono: var(--font-display);

  /* Identidad Valor UMA (29-09-2026). Nada de la paleta de Tailwind:
     - tinta azul petroleo en vez del gris pizarra,
     - azul UMA como color de marca: el de INEGI, que publica la UMA
       (enlaces #00518b; el icono oficial de la UMA es #003050),
     - papel calido de fondo en vez de blanco azulado,
     - cempasuchil como unico realce (logo, marcas de medida, punto de vigencia). */
  --ink: #13222f;
  --ink-soft: #384654;
  --ink-muted: #56626e;

  --teal: #00518b;       /* azul UMA: marca, enlaces, cifras */
  --teal-dark: #003a63;
  --mint: #e4edf4;       /* tinte de marca para fondos suaves */
  --gold: #8a5200;       /* ocre legible como texto */
  --marigold: #e39412;   /* cempasuchil: solo adorno, nunca texto sobre papel */

  --paper: #fffdf9;
  --canvas: #f5f3ee;
  --line: #d9d4c8;

  --strip-bg: #003050;
  --strip-ink: #cfe0ee;

  --red: #a8261d;
  --red-glow: rgba(168, 38, 29, 0.06);
  --green: #1d6b45;
  --green-glow: rgba(29, 107, 69, 0.06);
  --amber: #8a5200;
  --amber-soft: #fbf0dc;

  --on-brand: #fffdf9;  /* texto sobre el azul de marca o el verde */
  --wa: #16803f;
  --focus-ring: rgba(0, 81, 139, 0.16);
  --shadow: none;
  --radius: 4px;
  --radius-lg: 6px;
  --shell: 1120px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef1f3;
  --ink-soft: #c8cfd5;
  --ink-muted: #98a3ad;

  --teal: #7cc1f2;
  --teal-dark: #58a6de;
  --mint: rgba(124, 193, 242, 0.1);
  --gold: #f2b54a;
  --marigold: #f2a531;

  --paper: #131c26;
  --canvas: #0c1219;
  --line: #263340;

  --brand-mark-bg: #0a62a3;
  --strip-bg: #07111b;
  --strip-ink: #b9bccb;

  --red: #ff9a8f;
  --red-glow: rgba(255, 154, 143, 0.1);
  --green: #74d3a2;
  --green-glow: rgba(116, 211, 162, 0.1);
  --amber: #f2b54a;
  --amber-soft: rgba(242, 181, 74, 0.12);

  --on-brand: #0f111a;
  --wa: #5fd08c;
  --focus-ring: rgba(124, 193, 242, 0.22);
  --shadow: none;
}

* { 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; }

/* Base 17 px en vez de 16: el sitio arranca con la letra mas grande porque
   a mucha gente le cuesta leer, y el control A+/A- queda como refuerzo, no
   como requisito. A+ sube a 20 px. Todo el CSS esta en rem, asi que estas
   dos lineas mueven la escala entera. */
html { overflow-x: clip; scroll-behavior: smooth; background: var(--canvas); font-size: 17px; font-family: var(--font-sans); }
html[data-text-size="large"] { font-size: 20px; }

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

a { color: inherit; text-decoration: none; }
h1, h2, h3, .faq-question, .uma-console-head h2 { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.015em; }
h1 { font-weight: 800; }
/* Cifras protagonistas: misma voz que los titulos */
.uma-primary-value strong, .uma-value-grid strong, .uma-input-box input, .uma-input-box strong[data-uma-result],
.uma-cifra > strong, .uma-paso::before, .uma-fines-results strong, .tool-rate-context strong, .year-context-stats strong,
.curso-hero-datos > div > strong, .uma-table td:first-child a { font-family: var(--font-display); }
button, input, select { font: inherit; }
button { color: inherit; border: 0; background: transparent; cursor: pointer; transition: all 0.2s; }
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: var(--strip-bg); color: var(--strip-ink); font-size: 0.8125rem; overflow: hidden; }
.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: var(--strip-ink); }

.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--marigold); }

/* SITE HEADER */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow: hidden; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); flex-shrink: 0; }
.brand-symbol {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}
.brand-symbol svg { display: block; width: 100%; height: 100%; }
.brand-wordmark { display: inline-flex; align-items: baseline; gap: .28em; color: var(--ink); font-family: var(--font-display); font-size: 20px; letter-spacing: -0.015em; white-space: nowrap; }
.brand-wordmark > span { font-weight: 600; }
.brand-wordmark strong { color: var(--teal); font-weight: 800; letter-spacing: .01em; }

.desktop-nav { display: flex; align-items: stretch; gap: 26px; align-self: stretch; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.desktop-nav::-webkit-scrollbar { display: none; }
.desktop-nav a { position: relative; display: grid; place-items: center; color: var(--ink-soft); font-size: 0.85rem; font-weight: 700; white-space: nowrap; 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; flex-shrink: 0; }
.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); }

/* Drawer Side Panel Overlay */
.uma-drawer-overlay { position: fixed; inset: 0; z-index: 998; background: rgba(23, 27, 46, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.uma-drawer-overlay.is-active { opacity: 1; visibility: visible; }

.uma-drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 999; width: min(100vw, 380px); background: var(--paper); border-left: 1px solid var(--line);  display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.uma-drawer-panel.is-active { transform: translateX(0); }

.uma-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.uma-drawer-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-soft); transition: all 0.2s ease; cursor: pointer; background: var(--paper); }
.uma-drawer-close:hover { border-color: var(--teal); color: var(--teal); background: var(--canvas); transform: rotate(90deg); }

.uma-drawer-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 28px; }
.uma-drawer-section { display: flex; flex-direction: column; gap: 12px; }
.uma-drawer-kicker { font-size: .8rem; font-weight: 850; color: var(--ink-muted); }

.uma-drawer-nav { display: flex; flex-direction: column; gap: 6px; }
.uma-drawer-nav a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid transparent; color: var(--ink); text-decoration: none; transition: all 0.18s ease; }
.uma-drawer-nav a:hover { border-color: var(--line); background: var(--canvas); color: var(--teal); transform: translateX(3px); }
.uma-drawer-nav a.active { border-color: color-mix(in srgb, var(--teal) 30%, transparent); background: color-mix(in srgb, var(--teal) 8%, var(--paper)); color: var(--teal); font-weight: 750; }
.uma-drawer-nav a svg { color: var(--teal); flex-shrink: 0; }
.uma-drawer-nav a strong { display: block; font-size: .88rem; line-height: 1.2; }
.uma-drawer-nav a div > span:not(.uma-badge-new) { display: block; font-size: .74rem; color: var(--ink-muted); font-weight: 500; margin-top: 2px; }

.uma-badge-new { display: inline-block !important; padding: 1px 7px !important; border: 1px solid var(--marigold) !important; border-radius: 4px !important; background: transparent !important; color: var(--gold) !important; font-size: .74rem !important; font-weight: 700 !important; margin-left: 6px !important; vertical-align: middle !important; line-height: 1.3 !important; white-space: nowrap !important; }

.uma-drawer-footer { padding: 20px 24px; border-top: 1px solid var(--line); background: var(--canvas); }
.uma-rate-badge { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); font-size: .82rem; }
.uma-rate-badge span { color: var(--ink-muted); font-weight: 700; }
.uma-rate-badge strong { color: var(--teal); font-weight: 850; font-family: var(--font-mono); }

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
}
.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;
  }
}

.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;
  }
}

/* SCROLL FADE-IN ANIMATION */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SIDEBAR STYLINGS */
.sidebar { display: flex; flex-direction: column; gap: 32px; }
 
/* 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);
}
.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;
}
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: 700; font-size: .8rem; 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: var(--line);
}
.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-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; color: var(--ink); }
.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; }
/* Responsable: una línea chica al final del pie, sin tarjeta ni negrita (ORDEN-20261018-AUTORIA-DISCRETA). */
.footer-autoria { margin-top: 12px; margin-bottom: 0; font-size: .82rem; line-height: 1.6; color: var(--ink-muted); }
.footer-autoria a { color: inherit; }

/* LIVE DOT PULSE ANIMATION */



/* MOBILE RESPONSIVE ADAPTATIONS */
@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .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; }
  .footer-autoria { text-align: center; }
}

@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; }
  .converter-row { gap: 12px; }
  .sidebar { gap: 20px; }
  .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; }
}
.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;
}
.reset-converter:hover { border-color: var(--teal); color: var(--teal); }
.reset-converter { gap: 6px; }
.faq-item { border-width: 1px; }

@media (max-width: 600px) {
  .shell { width: calc(100% - 24px); }
  .market-strip-inner { min-height: 30px; }
  .market-strip-note { display: none; }
  .reset-converter { width: 100%; }
}
.site-footer { margin-top: 0; }

/* Unified product pages: mortgage, Infonavit and historical search */
.tool-page { background: var(--canvas); }
.tool-page-hero {
  position: relative;
  padding: 22px 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.tool-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr); align-items: center; gap: 40px; position: relative; z-index: 1; }
.tool-page-hero p { max-width: 760px; margin: 12px 0 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; }
.tool-rate-context { min-width: 0; padding: 4px 0 4px 28px; border-left: 1.5px solid var(--line); }
.tool-rate-context span,
.tool-rate-context small { display: block; color: var(--ink-muted); font-size: .8rem; font-weight: 750; }
.tool-rate-context strong { display: block; margin: 4px 0; overflow-wrap: anywhere; color: var(--teal); font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-variant-numeric: tabular-nums; line-height: 1.15; }

.tool-guidance-band { padding: 36px 0 0; border-top: 0; background: transparent; }
.tool-guidance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border: 0; border-radius: 0; }
.tool-guidance-grid > div { min-width: 0; padding: 0 20px 0 0; border-right: 1px solid var(--line); }
.tool-guidance-grid > div:last-child { border-right: 0; padding-right: 0; }
.tool-guidance-grid > div > span { display: grid; width: 30px; height: 30px; margin-bottom: 14px; place-items: center; border: 1.5px solid var(--teal); border-radius: 50%; color: var(--teal); font-size: .75rem; font-weight: 850; }
.tool-guidance-grid h2 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.tool-guidance-grid p { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }

@media (max-width: 900px) {
  .tool-page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, .48fr); gap: 28px; }
}

@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-guidance-band { padding: 30px 0; }
  .tool-guidance-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; }
}

@media (max-width: 360px) {
  .site-header {
    position: static;
  }
}

/* -------------------------------------------------------------------------- */
/* GOOGLE ADSENSE 2-COLUMN PORTAL ARCHITECTURE                                */
/* -------------------------------------------------------------------------- */

/* Fix header overflow */
.site-header, .market-strip { max-width: 100vw; }
main { overflow-x: clip; }

.uma-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-block: 24px 48px;
  align-items: start;
}

@media (min-width: 992px) {
  .uma-layout-grid {
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 36px;
  }
}

.uma-main-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.uma-sidebar-col {
  min-width: 0;
}

.uma-sticky-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.uma-lead {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}

/* Sidebar Navigation Widget — completely flat, box-less design */
.uma-sidebar-widget {
  padding: 0;
  border: 0;
  background: transparent;
}

.uma-widget-kicker {
  display: block;
  margin-bottom: 12px;
  font-size: .8rem;
  font-weight: 850;
  color: var(--teal);
}

.uma-widget-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.uma-widget-nav a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  transition: all .18s ease;
}

.uma-widget-nav a:last-child {
  border-bottom: 0;
}

.uma-widget-nav a:hover {
  color: var(--teal);
  padding-left: 6px;
  background: transparent;
}

.uma-widget-nav a strong {
  font-size: .86rem;
  font-weight: 750;
}

.uma-widget-nav a small {
  color: var(--ink-muted);
  font-size: .73rem;
}

/* Ad Slots — integrated, no heavy dashed border */
.uma-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--canvas) 50%, transparent);
  overflow: hidden;
}

.uma-ad-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.uma-ad-label {
  display: block;
  font-size: .8rem;
  font-weight: 850;
  color: var(--ink-muted);
  margin-bottom: 6px;
  opacity: .6;
}

.uma-ad-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  width: 100%;
  color: var(--ink-muted);
  font-size: .72rem;
  font-weight: 700;
  opacity: .5;
}

.ad-format-leaderboard {
  min-height: 100px;
  max-width: 100%;
}

.ad-format-sidebar {
  min-height: 280px;
  width: 100%;
}

.ad-format-rectangle {
  min-height: 260px;
  margin-block: 16px;
}

.ad-format-native {
  min-height: 140px;
  margin-block: 22px;
}

/* YEAR PAGES — IMPACT CARDS & CONTENT STYLING */
.year-impact-section { margin-block: 10px 32px; }
.year-section-head { margin-bottom: 24px; }
.year-section-head h2 { margin: 6px 0 8px; font-size: 1.5rem; letter-spacing: -.02em; }
.year-section-head p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }

.year-impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 992px) { .year-impact-grid { grid-template-columns: 1fr; gap: 16px; } }

.year-impact-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); transition: border-color .2s; }
.year-impact-card:hover { border-color: var(--teal); }

.year-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.year-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius); background: var(--canvas); flex-shrink: 0; }
.year-card-header h3 { margin: 0 0 2px; font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.year-card-header span { font-size: .74rem; color: var(--ink-muted); font-weight: 600; display: block; }

.year-metric-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.year-metric-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .84rem; }
.year-metric-list li span { color: var(--ink-soft); font-weight: 600; }
.year-metric-list li strong { color: var(--ink); font-weight: 850; font-family: var(--font-mono); font-size: .95rem; }

.year-context-card { padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); margin-block: 28px; }
.year-context-card h2 { margin: 6px 0 10px; font-size: 1.35rem; }
.year-context-card p { margin: 0 0 20px; color: var(--ink-soft); font-size: .94rem; line-height: 1.7; }
.year-context-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .year-context-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.year-context-stats span { display: block; font-size: .8rem; font-weight: 800; color: var(--ink-muted); }
.year-context-stats strong { display: block; margin-top: 2px; font-size: 1.2rem; color: var(--teal); font-family: var(--font-mono); }

.year-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.year-nav-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-soft); font-size: .82rem; font-weight: 750; transition: all .2s ease; text-decoration: none; }
.year-nav-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--canvas); }
.year-nav-btn.center { color: var(--teal); font-weight: 800; }
@media (max-width: 600px) {
  .year-nav-row { flex-direction: column; align-items: stretch; }
  .year-nav-btn { width: 100%; text-align: center; }
}

.uma-steps{margin:0;padding-left:22px;display:grid;gap:12px;max-width:70ch}
.uma-steps li{line-height:1.6}
.uma-steps li strong{color:var(--ink,inherit)}

/* ==================== FOOTER SOCIAL SHARE ==================== */
.footer-share-bar {
  padding: 16px 20px;
  margin-bottom: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-share-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-share-header strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}

.footer-share-header span {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.footer-share-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-share-social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 38px;
}

.btn-share-social svg {
  flex-shrink: 0;
}

.btn-share-social:hover {
  transform: none;
}

.btn-share-wa:hover {
  background: #25D366;
  color: #ffffff;
  border-color: #25D366;
}

.btn-share-fb:hover {
  background: #1877F2;
  color: #ffffff;
  border-color: #1877F2;
}

.btn-share-x:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

.btn-share-in:hover {
  background: #0A66C2;
  color: #ffffff;
  border-color: #0A66C2;
}

.btn-share-copy:hover {
  background: var(--teal);
  color: #ffffff;
  border-color: var(--teal);
}

/* ==================== SISTEMA EDITORIAL (contenido largo) ====================
   Bloques de prosa, autoria y fuentes. Nacen de la remediacion del rechazo de
   AdSense por "contenido de poco valor" (12-09-2026): el sitio tenia 367
   palabras de media dentro de <main> y cero autoria en un nicho YMYL.
   Todo mide max 72ch para que la linea siga siendo legible en escritorio. */
.uma-prose { max-width: 68ch; }
.uma-prose h2 { margin: 0 0 18px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -0.015em; line-height: 1.14; }
.uma-prose h3 { margin: 44px 0 14px; font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.01em; line-height: 1.3; }
.uma-prose p { margin: 0 0 20px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.78; }
.uma-prose p:last-child { margin-bottom: 0; }
.uma-prose strong { color: var(--ink); font-weight: 800; }
.uma-prose a { color: var(--teal); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.uma-prose ul, .uma-prose ol { margin: 0 0 24px; padding-left: 22px; display: grid; gap: 13px; }
.uma-prose li { color: var(--ink-soft); font-size: 1.03rem; line-height: 1.72; }
.uma-prose li strong { color: var(--ink); }
.uma-prose li::marker { color: var(--teal); font-weight: 800; }

/* Dato resaltado dentro de la prosa: formula, tope legal o cifra que se cita */
.uma-callout { margin: 0 0 26px; padding: 22px 26px; border-left: 3px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0;
  /* Tinte sobre el lienzo en vez de --canvas a secas: en tema oscuro
     --canvas coincide con el fondo del body y el bloque se perdia. */
  background: color-mix(in srgb, var(--teal) 8%, var(--canvas)); }
.uma-callout > span { display: block; margin-bottom: 5px; color: var(--teal); font-size: .8rem; font-weight: 850; }
.uma-callout p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.68; }
.uma-callout p + p { margin-top: 9px; }
.uma-callout strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.uma-callout.warn { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber) 9%, var(--canvas)); }
.uma-callout.warn > span { color: var(--amber); }

/* Ficha de dato legal: articulo + ley que respalda cada regla */
.uma-legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); overflow: hidden; }
.uma-legal-grid > div { padding: 22px 24px; background: var(--paper); }
.uma-legal-grid dt { margin-bottom: 4px; color: var(--ink-muted); font-size: .8rem; font-weight: 850; }
.uma-legal-grid dd { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 750; line-height: 1.5; }
.uma-legal-grid dd small { display: block; margin-top: 6px; color: var(--ink-muted); font-size: .87rem; font-weight: 500; line-height: 1.5; }

/* Firma proporcional: método y credenciales completos viven en /quienes-somos/. */
.uma-fuente-pagina { max-width: 70ch; margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: .88rem; line-height: 1.6; }
.uma-fuente-pagina a { color: var(--teal); }

@media (max-width: 600px) {
  .uma-legal-grid { grid-template-columns: 1fr; }
  .uma-prose p { font-size: 1rem; }
  .uma-prose h3 { margin-top: 34px; }
  .uma-callout { padding: 18px 18px; }
  .uma-legal-grid > div { padding: 18px 18px; }
  .uma-versus-lado { padding: 24px 20px; }
  .uma-elige { padding: 22px 18px; }
  .uma-elige-salida { padding: 18px 18px; }
  .uma-detalle > summary { padding: 18px 18px; font-size: 1.02rem; }
  .uma-detalle-cuerpo { padding: 0 18px 20px; }
  .uma-cifra { padding: 22px 20px; }
}

/* ==================== BANNER DE CONSENTIMIENTO ====================
   Consent Mode v2. El estado por defecto se declara en el <head> ANTES de
   gtag.js y AdSense; este banner solo propaga la decision. Se oculta con el
   atributo `hidden`, y el reset global trae [hidden]{display:none} -- no se
   toca `style.display` para que el enlace del pie pueda reabrirlo. */
.uma-cookie-banner { position: fixed; right: 0; bottom: 0; left: 0; z-index: 60; padding: 16px 0; border-top: 1.5px solid var(--line); background: var(--paper); 
  /* Techo para pantallas bajas: en un movil de 568 px de alto el aviso se
     comia mas de la mitad de la pantalla. Nunca pasa del 60 % y, si no
     cabe, hace scroll dentro de si mismo. */
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.uma-cookie-inner { display: flex; max-width: var(--shell); margin: 0 auto; padding: 0 20px; align-items: center; justify-content: space-between; gap: 24px; }
.uma-cookie-text p { margin: 0; max-width: 78ch; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }
.uma-cookie-text strong { color: var(--ink); }
.uma-cookie-text a { color: var(--teal); font-weight: 800; }
.uma-cookie-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.uma-cookie-btn { padding: 11px 20px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: .82rem; font-weight: 800; font-family: inherit; cursor: pointer; transition: all .15s ease; }
.uma-cookie-btn:hover { border-color: var(--teal); color: var(--teal); }
.uma-cookie-btn.accept { border-color: var(--teal); background: var(--teal); color: var(--on-brand); }
.uma-cookie-btn.accept:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--on-brand); }
.uma-cookie-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 860px) {
  /* En movil el aviso se come la pantalla. Se queda lo que el visitante
     necesita para decidir; el detalle sigue en la politica de privacidad. */
  .uma-cookie-extra { display: none; }
  .uma-cookie-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .uma-cookie-actions { flex-direction: column; }
  .uma-cookie-btn { width: 100%; }
  .uma-cookie-text p { font-size: .78rem; }
}

/* ==================== COMPONENTES VISUALES ====================
   12-09-2026. El contenido largo que se agrego para remediar el rechazo de
   AdSense quedo correcto pero se leia como un muro de texto de los anos 90.
   Estos componentes presentan EL MISMO contenido -- no se borra una palabra,
   se sigue necesitando para la revision -- con forma de producto: pasos,
   cifras grandes, comparativas enfrentadas y bloques donde el visitante
   elige en vez de leer. Se usan en la portada y en el curso /aprende/. */

/* --- Secuencia de pasos: sustituye a los parrafos "primero..., luego..." --- */
.uma-pasos { display: grid; gap: 0; margin: 0 0 30px; counter-reset: paso; }
.uma-paso { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); }
.uma-paso:last-child { border-bottom: 1px solid var(--line); }
.uma-paso::before { grid-column: 1; grid-row: 1 / -1; color: var(--teal); font-size: 2.4rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.04em; counter-increment: paso; content: counter(paso); }
.uma-paso h4 { grid-column: 2; margin: 0 0 8px; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.25; }
.uma-paso p { grid-column: 2; margin: 0; max-width: 60ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.68; }
.uma-paso-formula { grid-column: 2; display: block; width: fit-content; max-width: 100%; margin-top: 16px; padding: 11px 16px; border-radius: var(--radius); background: var(--canvas); color: var(--ink); font-family: var(--font-mono); font-size: .95rem; font-variant-numeric: tabular-nums; overflow-x: auto; }

/* --- Cifras destacadas: lo que antes era una lista de ejemplos --- */
.uma-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1px; margin: 0 0 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); overflow: hidden; }
.uma-cifra { padding: 28px 26px; background: var(--paper); }
.uma-cifra > span { display: block; color: var(--ink-muted); font-size: .8rem; font-weight: 850; }
.uma-cifra > strong { display: block; margin: 12px 0 8px; color: var(--teal); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.05; }
.uma-cifra > small { display: block; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.uma-cifra a { color: var(--teal); font-weight: 800; }

/* --- Comparativa enfrentada: dos conceptos que la gente confunde --- */
.uma-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0; margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
.uma-versus-lado { padding: 32px 30px; }
.uma-versus-lado + .uma-versus-lado { border-left: 1px solid var(--line); }
.uma-versus-eje { display: grid; place-items: center; padding: 0 6px; background: var(--canvas); border-inline: 1px solid var(--line); color: var(--ink-muted); font-family: var(--font-display); font-size: .8rem; font-weight: 700; }
.uma-versus h4 { margin: 0 0 6px; font-size: 1.55rem; letter-spacing: -0.015em; }
.uma-versus-sub { margin: 0 0 24px; color: var(--teal); font-size: .92rem; font-weight: 800; }
.uma-versus dl { display: grid; gap: 18px; margin: 0; }
.uma-versus dt { color: var(--ink-muted); font-size: .8rem; font-weight: 850; }
.uma-versus dd { margin: 5px 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }

/* --- Bloque donde el visitante elige en vez de leer --- */
.uma-elige { margin: 0 0 30px; padding: 32px 30px; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.uma-elige-cabeza { margin-bottom: 16px; }
.uma-elige-cabeza h4 { margin: 10px 0 6px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.015em; }
.uma-elige-cabeza p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.uma-elige-opciones { display: flex; flex-wrap: wrap; gap: 9px; }
.uma-elige-op { padding: 13px 22px; border: 1.5px solid var(--line); border-radius: 26px; background: var(--paper); color: var(--ink); font-size: .98rem; font-weight: 780; font-family: inherit; text-align: left; cursor: pointer; transition: all .15s ease; }
.uma-elige-op:hover { border-color: var(--teal); color: var(--teal); background: color-mix(in srgb, var(--teal) 7%, var(--paper)); }
.uma-elige-op.is-active { border-color: var(--teal); background: var(--teal); color: var(--on-brand); }
.uma-elige-op:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.uma-elige-salida { margin-top: 24px; padding: 24px 26px; border-left: 3px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--teal) 8%, var(--canvas)); }
.uma-elige-salida[hidden] { display: none !important; }
.uma-elige-salida > span { display: block; margin-bottom: 5px; color: var(--teal); font-size: .8rem; font-weight: 850; }
.uma-elige-salida strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.uma-elige-salida p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.68; }
.uma-elige-salida p + p { margin-top: 8px; }

/* --- Detalle plegable para lo secundario. El texto sigue en el HTML. --- */
.uma-detalle { margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
.uma-detalle > summary { padding: 22px 26px; color: var(--ink); font-size: 1.1rem; font-weight: 800; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.uma-detalle > summary::-webkit-details-marker { display: none; }
.uma-detalle > summary::after { flex: 0 0 auto; color: var(--teal); font-size: 1.2rem; font-weight: 700; content: "+"; transition: transform .2s ease; }
.uma-detalle[open] > summary::after { content: "\2212"; }
.uma-detalle > summary:hover { color: var(--teal); }
.uma-detalle-cuerpo { padding: 0 26px 26px; }
.uma-detalle-cuerpo p { margin: 0 0 16px; max-width: 66ch; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; }
.uma-detalle-cuerpo p:last-child { margin-bottom: 0; }
.uma-detalle-cuerpo strong { color: var(--ink); }
.uma-detalle-cuerpo a { color: var(--teal); font-weight: 750; }

/* --- Entradilla: la frase que resume la seccion antes de los componentes --- */
.uma-entradilla { max-width: 62ch; margin: 0 0 34px; color: var(--ink-soft); font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 450; line-height: 1.62; }
.uma-entradilla strong { color: var(--ink); font-weight: 800; }

@media (max-width: 760px) {
  .uma-versus { grid-template-columns: 1fr; }
  .uma-versus-lado + .uma-versus-lado { border-left: 0; border-top: 1px solid var(--line); }
  .uma-versus-eje { padding: 7px; border-inline: 0; border-block: 1px solid var(--line); }
  .uma-cifras { grid-template-columns: 1fr; }
  .uma-paso { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 15px 16px; }
  .uma-paso::before { width: 30px; height: 30px; font-size: .85rem; }
  .uma-elige { padding: 17px; }
  .uma-elige-op { width: 100%; }
}

/* El control de tamano marca cual esta aplicado, para que se vea que hizo algo */
.text-size-control [aria-pressed="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--paper)); color: var(--teal); }

/* ==================== CURSO INTERACTIVO /aprende/ ====================
   Mismo lenguaje visual que el resto: escala grande, mucho aire y ninguna
   caja de mas. El color solo aparece para dar informacion -- acierto, fallo,
   progreso -- nunca de adorno. */

.curso-hero { padding-block: 44px 40px; border-bottom: 1px solid var(--line); background: var(--paper); }
.curso-hero.portada { padding-block: 64px 56px; }
.curso-migaja { display: inline-block; margin-bottom: 14px; color: var(--teal); font-size: .88rem; font-weight: 800; }
.curso-paso-de { display: block; margin-bottom: 10px; color: var(--ink-muted); font-size: .84rem; font-weight: 750; }
.curso-hero h1 { margin: 0 0 16px; font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -0.025em; line-height: 1.06; }
.curso-objetivo { max-width: 60ch; margin: 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; }
.curso-intro { max-width: 62ch; margin: 0 0 32px; color: var(--ink-soft); font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.65; }
.curso-ya-vista { margin: 18px 0 0; padding: 11px 16px; width: fit-content; border-radius: var(--radius); background: color-mix(in srgb, var(--green) 12%, var(--paper)); color: var(--green); font-size: .9rem; font-weight: 750; }

.curso-hero-datos { display: flex; flex-wrap: wrap; gap: 36px; margin-bottom: 30px; }
.curso-hero-datos > div > strong { display: block; color: var(--teal); font-size: 2.1rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.curso-hero-datos > div > span { color: var(--ink-muted); font-size: .84rem; font-weight: 750; }

.curso-barra { height: 8px; margin-bottom: 12px; border-radius: 4px; background: var(--canvas); overflow: hidden; }
.curso-barra.grande { height: 12px; max-width: 520px; border-radius: 6px; }
.curso-barra > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--teal); transition: width .35s ease; }
.curso-progreso-texto { margin: 0 0 26px; color: var(--ink-soft); font-size: .95rem; }
.curso-hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.curso-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border: 1.5px solid var(--teal); border-radius: var(--radius); background: var(--teal); color: var(--on-brand); font-size: 1rem; font-weight: 800; font-family: inherit; cursor: pointer; transition: all .15s ease; }
.curso-btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--on-brand); }
.curso-btn:disabled { border-color: var(--line); background: var(--canvas); color: var(--ink-muted); cursor: not-allowed; }
.curso-btn.grande { padding: 16px 32px; font-size: 1.08rem; }
.curso-btn.secundario { border-color: var(--line); background: var(--paper); color: var(--ink-soft); }
.curso-btn.secundario:hover { border-color: var(--teal); background: var(--paper); color: var(--teal); }
.curso-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* --- Lectura de la leccion: hereda la escala de la prosa --- */
.curso-lectura { max-width: 68ch; margin-bottom: 40px; }
.curso-lectura p { margin: 0 0 20px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.78; }
.curso-lectura strong { color: var(--ink); font-weight: 800; }
.curso-lectura em { color: var(--ink-soft); }
.curso-lectura a { color: var(--teal); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }

/* --- Practica --- */
.curso-practica { max-width: 68ch; padding-top: 38px; border-top: 1px solid var(--line); }
.curso-practica-cabeza { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.curso-practica-cabeza h2 { margin: 8px 0 0; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.015em; }
.curso-contador { flex: 0 0 auto; color: var(--ink-muted); font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.curso-aviso { margin: 0 0 30px; color: var(--ink-muted); font-size: .92rem; line-height: 1.6; }

.curso-ej { margin: 0 0 20px; padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.curso-ej[data-resuelto] { border-color: color-mix(in srgb, var(--teal) 30%, var(--line)); }
.curso-ej-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.curso-ej-num { color: var(--ink-muted); font-size: .8rem; font-weight: 850; }
.curso-ej-tipo { padding: 4px 12px; border-radius: 12px; background: var(--canvas); color: var(--teal); font-size: .8rem; font-weight: 850; }
.curso-ej-pregunta { margin: 0 0 22px; color: var(--ink); font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.curso-hueco { display: inline-block; min-width: 96px; border-bottom: 2px solid var(--teal); vertical-align: baseline; }

.curso-opciones { display: grid; gap: 10px; margin-bottom: 20px; }
.curso-op { padding: 15px 20px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 1rem; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; transition: all .15s ease; }
.curso-op:hover:not(:disabled) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--paper)); }
.curso-op.es-elegida { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--paper)); font-weight: 750; }
.curso-op.es-correcta { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--paper)); color: var(--ink); font-weight: 750; }
.curso-op.es-fallada { border-color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--paper)); }
.curso-op:disabled { cursor: default; }
.curso-op:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.curso-campo { display: flex; align-items: center; gap: 2px; max-width: 340px; margin-bottom: 16px; padding: 4px 16px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--canvas); transition: all .15s ease; }
.curso-campo:focus-within { border-color: var(--teal); background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); }
.curso-campo-prefijo { color: var(--ink-muted); font-size: 1.3rem; font-weight: 800; }
.curso-campo input { flex: 1; min-width: 0; padding: 14px 6px; border: 0; background: transparent; color: var(--ink); font-size: 1.3rem; font-weight: 800; font-family: var(--font-mono); font-variant-numeric: tabular-nums; outline: 0; }
.curso-pista-btn { margin-bottom: 16px; padding: 0; border: 0; background: none; color: var(--teal); font-size: .92rem; font-weight: 750; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.curso-pista { margin: 0 0 16px; padding: 13px 18px; border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; background: var(--canvas); color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

.curso-emparejar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.curso-emparejar-col { display: grid; gap: 10px; align-content: start; }
.curso-par-a { display: grid; gap: 7px; padding: 15px 18px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); text-align: left; font-family: inherit; cursor: pointer; transition: all .15s ease; }
.curso-par-a.es-activa { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent); }
.curso-par-a.es-correcta { border-color: var(--green); background: color-mix(in srgb, var(--green) 9%, var(--paper)); }
.curso-par-a.es-fallada { border-color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--paper)); }
.curso-par-concepto { color: var(--ink); font-size: 1rem; font-weight: 800; }
.curso-par-hueco { color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.curso-par-hueco.esta-vacio { color: var(--ink-muted); font-style: italic; }
.curso-par-b { padding: 13px 17px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--canvas); color: var(--ink-soft); font-size: .94rem; font-family: inherit; text-align: left; line-height: 1.45; cursor: pointer; transition: all .15s ease; }
.curso-par-b:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.curso-par-b.es-usada { opacity: .38; }

.curso-orden { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: orden; }
.curso-orden li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.curso-orden li::before { flex: 0 0 auto; color: var(--teal); font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; counter-increment: orden; content: counter(orden); }
.curso-orden li.es-correcta { border-color: var(--green); background: color-mix(in srgb, var(--green) 9%, var(--paper)); }
.curso-orden li.es-fallada { border-color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--paper)); }
.curso-orden-texto { flex: 1; min-width: 0; color: var(--ink); font-size: .98rem; line-height: 1.5; }
.curso-orden-botones { display: flex; flex: 0 0 auto; gap: 5px; }
.curso-orden-botones button { width: 34px; height: 34px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-soft); font-size: .95rem; cursor: pointer; transition: all .15s ease; }
.curso-orden-botones button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }

.curso-ej-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.curso-porque-fuente { display: none; }
.curso-resultado { margin-top: 20px; padding: 20px 24px; border-left: 3px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; background: var(--canvas); }
.curso-resultado.es-acierto { border-left-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--canvas)); }
.curso-resultado.es-fallo { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--canvas)); }
.curso-veredicto { margin: 0 0 8px; font-size: .8rem; font-weight: 900; }
.curso-resultado.es-acierto .curso-veredicto { color: var(--green); }
.curso-resultado.es-fallo .curso-veredicto { color: var(--amber); }
.curso-porque { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.curso-porque strong { color: var(--ink); }

.curso-cierre { max-width: 68ch; margin-top: 34px; padding: 34px 32px; border: 1.5px solid var(--teal); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--teal) 6%, var(--paper)); }
.curso-cierre h2 { margin: 0 0 10px; font-size: 1.7rem; letter-spacing: -0.015em; }
.curso-cierre p { margin: 0 0 22px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; }

.curso-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 68ch; margin-top: 40px; }
.curso-nav-btn { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.curso-nav-btn span { color: var(--ink-muted); font-size: .8rem; font-weight: 850; }
.curso-nav-btn strong { color: var(--ink); font-size: .95rem; font-weight: 750; line-height: 1.4; }
.curso-nav-btn:hover { border-color: var(--teal); }
.curso-nav-btn:hover strong { color: var(--teal); }
.curso-nav-btn.centro { display: grid; place-items: center; color: var(--teal); font-size: .92rem; font-weight: 800; }
.curso-nav-btn.siguiente { text-align: right; }

/* --- Mapa del curso --- */
.curso-unidad { margin-bottom: 44px; }
.curso-unidad-cabeza { margin-bottom: 18px; }
.curso-unidad-num { color: var(--teal); font-size: .8rem; font-weight: 850; }
.curso-unidad-cabeza h2 { margin: 8px 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.015em; }
.curso-unidad-cabeza p { max-width: 62ch; margin: 0 0 6px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; }
.curso-unidad-objetivo { color: var(--ink-muted) !important; font-size: .93rem !important; }
.curso-lecciones { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); overflow: hidden; }
.curso-leccion-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 24px; background: var(--paper); transition: background .15s ease; }
.curso-leccion-item:hover { background: color-mix(in srgb, var(--teal) 5%, var(--paper)); }
.curso-leccion-item.esta-hecha { background: color-mix(in srgb, var(--green) 6%, var(--paper)); }
.curso-check { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--green); color: var(--on-brand); font-size: .85rem; font-weight: 900; }
/* display:grid le ganaba al atributo hidden: todas las lecciones y casos se veian
   como resueltos para quien nunca entro (visto en fotos el 17-10-2026). Se oculta
   con visibility y NO con display:none: la tarjeta es un grid y sin la marca el
   texto caia en la columna de 26 px, una palabra por linea. */
.curso-check[hidden] { visibility: hidden; }
.curso-leccion-texto strong { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 750; line-height: 1.35; }
.curso-leccion-texto small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: .89rem; line-height: 1.5; }
.curso-leccion-ejs { flex: 0 0 auto; color: var(--ink-muted); font-size: .82rem; font-weight: 750; white-space: nowrap; }

@media (max-width: 760px) {
  .curso-emparejar { grid-template-columns: 1fr; }
  .curso-nav { grid-template-columns: 1fr; }
  .curso-nav-btn.siguiente { text-align: left; }
  .curso-hero-datos { gap: 24px; }
  .curso-practica-cabeza { flex-direction: column; align-items: start; gap: 8px; }
}

@media (max-width: 600px) {
  .curso-ej { padding: 22px 18px; }
  .curso-ej-pregunta { font-size: 1.08rem; }
  .curso-op { padding: 14px 16px; font-size: .98rem; }
  .curso-cierre { padding: 26px 20px; }
  .curso-leccion-item { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 17px 16px; }
  .curso-leccion-ejs { grid-column: 2; }
  .curso-check { width: 22px; height: 22px; font-size: .75rem; }
  .curso-orden li { flex-wrap: wrap; }
  .curso-btn.grande { width: 100%; }
  .curso-hero-acciones { flex-direction: column; }
  .curso-hero-acciones .curso-btn { width: 100%; }
}

/* --- Documento simulado de los casos practicos --- */
.caso-documento { margin: 0 0 30px; padding: 0; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
.caso-documento figcaption { padding: 16px 24px; border-bottom: 1.5px solid var(--line); background: var(--canvas); color: var(--ink); font-size: .8rem; font-weight: 900; }
.caso-campos { display: grid; gap: 1px; margin: 0; background: var(--line); }
.caso-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 18px; padding: 15px 24px; background: var(--paper); }
.caso-campo dt { color: var(--ink-muted); font-size: .92rem; }
.caso-campo dd { margin: 0; color: var(--ink); font-size: 1.08rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.caso-campo.es-alerta { background: color-mix(in srgb, var(--amber) 9%, var(--paper)); }
.caso-campo.es-alerta dd { color: var(--amber); }
.caso-nota { margin: 0; padding: 14px 24px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: .9rem; line-height: 1.55; }
.caso-desenlace-cuerpo p { margin: 0 0 16px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; }
.caso-desenlace-cuerpo strong { color: var(--ink); }
@media (max-width: 600px) {
  .caso-campo { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
  .caso-campo dd { text-align: left; }
  .caso-documento figcaption { padding: 14px 18px; }
  .caso-nota { padding: 13px 18px; }
}

/* El curso en el menu principal. Destacado pero sobrio: una pastilla, no un
   boton de colores. Estaba solo en el pie y en el lateral, y no se encontraba. */
/* OJO: el .desktop-nav tiene align-items:stretch, asi que cada enlace ocupa los
   70 px de alto del header. En los demas no se nota porque no tienen fondo; en
   este si, y salia un bloque de 119x70 px con esquinas redondeadas, feo y
   desproporcionado. El align-self:center es lo que lo convierte en pastilla. */
.desktop-nav a.es-destacado { align-self: center; padding: 9px 18px; border-radius: 999px; background: var(--teal); color: var(--on-brand); font-weight: 850; line-height: 1.2; transition: background .15s ease; }
.desktop-nav a.es-destacado:hover { background: var(--teal-dark); color: var(--on-brand); }
.desktop-nav a.es-destacado[aria-current="page"] { background: var(--teal-dark); color: var(--on-brand); }
/* El subrayado de pagina activa es para los enlaces de texto. Sobre la
   pastilla quedaba una linea azul colgando debajo del boton. */
.desktop-nav a.es-destacado[aria-current="page"]::after { display: none; }

/* ==================== CARRIL DE PASOS DEL CURSO ====================
   Pablo: "no se entiende cuando comenzar [...] para que no tenga que adivinar
   donde hacer scroll para llegar al curso o a las preguntas [...] si tienes
   que ocupar toda la pantalla ocupala".

   Sin JavaScript los pasos se apilan y la leccion se lee entera (es lo que ve
   Google). Con JavaScript se muestra uno a la vez y estas reglas le dan aire y
   un boton que siempre esta en el mismo lugar. */

/* Arranque: el boton que faltaba. Va oculto en el HTML y lo muestra el JS,
   porque sin JS no haria nada. */
.curso-arranque { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.curso-arranque-nota { color: var(--ink-muted); font-size: .95rem; font-weight: 700; }
.curso-btn.enorme { padding: 20px 46px; border-radius: 999px; font-size: 1.2rem; letter-spacing: -0.01em; }
.curso-btn.enorme:disabled { box-shadow: none; }
.curso-btn.fantasma { border-color: transparent; background: transparent; color: var(--ink-muted); font-weight: 750; }
.curso-btn.fantasma:hover { border-color: var(--line); background: var(--paper); color: var(--ink); }

/* Barra de avance pegada arriba: siempre se ve cuanto falta. */
.curso-avance { position: sticky; top: 0; z-index: 40; padding: 14px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.curso-avance[hidden] { display: none !important; }
.curso-avance-inner { display: flex; align-items: center; gap: 20px; }
.curso-avance-texto { flex: 0 0 auto; color: var(--ink-muted); font-size: .95rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.curso-avance-texto strong { color: var(--teal); font-size: 1.2rem; font-weight: 900; }
.curso-avance .curso-barra { flex: 1; min-width: 0; height: 10px; margin: 0; border-radius: 5px; }
.curso-avance-salir { flex: 0 0 auto; color: var(--ink-muted); font-size: .92rem; font-weight: 750; }
.curso-avance-salir:hover { color: var(--teal); }

/* El paso ocupa la pantalla: el contenido centrado, con aire, sin nada mas que
   compita por la atencion. */
.curso-carril-shell { padding-block: 0; }
.curso-carril { max-width: 760px; margin: 0 auto; }
.curso-paso { padding-block: 52px 30px; }
.curso-paso[hidden] { display: none !important; }
[data-carril-activo] .curso-paso { min-height: 46vh; display: flex; align-items: center; }
[data-carril-activo] .curso-paso-cuerpo { width: 100%; }
.curso-paso-cuerpo > .curso-ej { margin-bottom: 0; }
.curso-paso[data-tipo-paso="lectura"] .curso-paso-cuerpo { max-width: 66ch; }
.curso-paso[data-tipo-paso="lectura"] h3 { margin: 0 0 18px; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.015em; line-height: 1.2; }
.curso-paso[data-tipo-paso="lectura"] p { font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.8; }

/* Sin JS los pasos se apilan; una linea fina los separa para que se lea como
   un articulo ordenado en vez de un bloque continuo. */
.curso-paso + .curso-paso { border-top: 1px solid var(--line); }
[data-carril-activo] .curso-paso + .curso-paso { border-top: 0; }

/* El boton de avance, siempre en el mismo sitio. En movil se ancla abajo para
   que quede bajo el pulgar y no haya que buscarlo. */
.curso-pie-accion { padding-block: 10px 46px; }
.curso-pie-accion[hidden] { display: none !important; }
.curso-pie-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 760px; margin: 0 auto; }
.curso-pie-inner .curso-btn.enorme { margin-left: auto; }

.curso-cierre-paso .curso-cierre { margin-top: 0; }
.curso-cierre-mapa { display: inline-block; margin-top: 16px; color: var(--teal); font-size: .95rem; font-weight: 750; }

@media (max-width: 760px) {
  .curso-avance-inner { gap: 12px; }
  .curso-avance-texto { font-size: .85rem; }
  .curso-avance-salir { font-size: .85rem; }
  .curso-paso { padding-block: 34px 22px; }
  [data-carril-activo] .curso-paso { min-height: 40vh; }
  .curso-arranque { gap: 12px; }
  .curso-arranque .curso-btn.enorme { width: 100%; }
  .curso-arranque-nota { width: 100%; }

  /* Anclado abajo: el boton queda bajo el pulgar y no se busca. */
  [data-carril-activo] .curso-pie-accion { position: sticky; bottom: 0; z-index: 35; padding: 14px 0 16px; border-top: 1px solid var(--line); background: var(--paper); }
  .curso-pie-inner .curso-btn.enorme { flex: 1; padding: 18px 22px; font-size: 1.08rem; }
  .curso-btn.fantasma { padding: 18px 16px; }
}

.curso-hero-ayuda { max-width: 56ch; margin: 18px 0 0; color: var(--ink-muted); font-size: .98rem; line-height: 1.6; }

/* Nota del selector VSM/UMA. Existe porque los dos modos dan el mismo numero
   -- el periodo correcto es el mensual en ambos -- y hacia falta que mover el
   control tuviera una respuesta visible, ademas de explicar el porque. */
.uma-credit-nota { max-width: 62ch; margin: 4px 0 18px; color: var(--ink-muted); font-size: .92rem; line-height: 1.6; }

/* ==================== DIPLOMA DEL CURSO ====================
   Aparece en /aprende/ solo cuando estan las 21 lecciones. Se descarga con la
   hoja de impresion del navegador ("Guardar como PDF"): sin libreria externa,
   sin tocar la CSP y sin sumar peso a la pagina.
   El nombre se escribe en el navegador y no se envia a ningun lado. */

.curso-diploma { margin: 0 0 48px; padding: 34px 0 0; border-top: 1px solid var(--line); }
.curso-diploma[hidden] { display: none !important; }
.curso-diploma-intro { max-width: 62ch; margin-bottom: 30px; }
.curso-diploma-intro h2 { margin: 10px 0 10px; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.015em; }
.curso-diploma-intro > p { margin: 0 0 20px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
.curso-diploma-campo { display: grid; gap: 7px; max-width: 420px; margin-bottom: 12px; }
.curso-diploma-campo > span { color: var(--ink-muted); font-size: .85rem; font-weight: 800; }
.curso-diploma-campo input { padding: 14px 18px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 1.05rem; font-family: inherit; }
.curso-diploma-campo input:focus { border-color: var(--teal); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); }
.curso-diploma-privacidad { max-width: 56ch; margin: 0 0 22px; color: var(--ink-muted); font-size: .88rem; line-height: 1.6; }

/* La hoja. En pantalla se ve como una vista previa del documento. */
.curso-diploma-hoja { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas); }
.curso-diploma-marco { padding: 46px 44px; border: 2px solid var(--teal); border-radius: var(--radius); background: var(--paper); text-align: center; }
.curso-diploma-emisor { margin: 0 0 26px; color: var(--teal); font-size: 1.05rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.curso-diploma-kicker { margin: 0 0 22px; color: var(--ink-muted); font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.curso-diploma-nombre { min-height: 1.3em; margin: 0 auto 8px; padding-bottom: 12px; max-width: 26ch; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; }
.curso-diploma.tiene-nombre .curso-diploma-nombre { border-bottom-color: transparent; }
.curso-diploma-texto { max-width: 52ch; margin: 20px auto 28px; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.curso-diploma-texto strong { color: var(--ink); }
.curso-diploma-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 26px; border: 1px solid var(--line); background: var(--line); text-align: left; }
.curso-diploma-datos > div { padding: 13px 14px; background: var(--paper); }
.curso-diploma-datos dt { color: var(--ink-muted); font-size: .8rem; font-weight: 850; }
.curso-diploma-datos dd { margin: 4px 0 0; color: var(--teal); font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.curso-diploma-fecha { margin: 0 0 18px; color: var(--ink-muted); font-size: .9rem; font-weight: 750; }
.curso-diploma-aviso { max-width: 62ch; margin: 0 auto; color: var(--ink-muted); font-size: .78rem; line-height: 1.55; }
.curso-diploma-aviso strong { color: var(--ink-soft); }

@media (max-width: 700px) {
  .curso-diploma-marco { padding: 30px 20px; }
  .curso-diploma-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curso-diploma-acciones .curso-btn { width: 100%; }
}

/* ---- Impresion: solo sale el diploma ---- */
@media print {
  body.imprimiendo-diploma > *:not(#main-content) { display: none !important; }
  body.imprimiendo-diploma #main-content > main > *:not(.uma-layout-grid) { display: none !important; }
  body.imprimiendo-diploma .uma-layout-grid { display: block !important; margin: 0 !important; }
  body.imprimiendo-diploma .uma-main-col > *:not(.curso-diploma) { display: none !important; }
  body.imprimiendo-diploma .uma-sidebar-col { display: none !important; }
  body.imprimiendo-diploma .curso-diploma { margin: 0; padding: 0; border: 0; }
  body.imprimiendo-diploma .curso-diploma-intro { display: none !important; }
  body.imprimiendo-diploma .curso-diploma-hoja { padding: 0; border: 0; background: #fff; }
  body.imprimiendo-diploma .curso-diploma-marco { padding: 34px 30px; border-color: #00518b; background: #fff; }
  body.imprimiendo-diploma .curso-diploma-emisor { color: #00518b; }
  body.imprimiendo-diploma .curso-diploma-nombre { color: #13222f; }
  body.imprimiendo-diploma .curso-diploma-datos dd { color: #00518b; }
  body.imprimiendo-diploma .curso-diploma-texto,
  body.imprimiendo-diploma .curso-diploma-fecha,
  body.imprimiendo-diploma .curso-diploma-aviso,
  body.imprimiendo-diploma .curso-diploma-kicker { color: #384654; }
  body.imprimiendo-diploma .curso-diploma-datos { border-color: #d9d4c8; background: #d9d4c8; }
  body.imprimiendo-diploma .curso-diploma-datos > div { background: #fff; }
  @page { margin: 14mm; }
}

/* Aviso del modo ?demo=diploma. Se ve en pantalla y NO se imprime: el papel
   sale limpio, pero en el navegador queda claro que es una muestra. */
.curso-diploma-demo { margin: 0 0 24px; padding: 14px 20px; border-left: 3px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--amber) 10%, var(--canvas)); color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
.curso-diploma-demo[hidden] { display: none !important; }
.curso-diploma-demo code { padding: 2px 6px; border-radius: 4px; background: var(--paper); font-family: var(--font-mono); font-size: .88em; }
@media print { body.imprimiendo-diploma .curso-diploma-demo { display: none !important; } }

/* ==================== ANO POR ANO (tabla historica) ====================
   Reemplaza las 11 fichas /valor-uma-AAAA/ retiradas el 14-09-2026. Cada ano
   es un bloque con ancla propia, asi que las URLs viejas siguen llevando al
   sitio exacto. Va en una sola pagina a proposito: separados eran la misma
   plantilla once veces. */
.uma-anios { display: grid; gap: 14px; margin-top: 8px; }
.uma-anio { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); scroll-margin-top: 90px; }
.uma-anio > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.uma-anio > header h3 { margin: 0; font-size: 1.35rem; letter-spacing: -0.015em; }
.uma-anio > header p { margin: 0; color: var(--ink-muted); font-size: .92rem; }
.uma-anio-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 16px; border: 1px solid var(--line); background: var(--line); }
.uma-anio-cifras > div { padding: 11px 13px; background: var(--canvas); }
.uma-anio-cifras dt { color: var(--ink-muted); font-size: .8rem; font-weight: 850; }
.uma-anio-cifras dd { margin: 3px 0 0; color: var(--ink); font-size: 1.02rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.uma-anio-nota, .uma-anio-topes { max-width: 68ch; margin: 0 0 10px; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.uma-anio-topes { margin-bottom: 0; color: var(--ink-muted); }
.uma-anio-topes strong { color: var(--ink); }
@media (max-width: 640px) {
  .uma-anio { padding: 18px 16px; }
  .uma-anio-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Barra Año/Periodo del conversor (09-10-2026). La rejilla repartia
   1fr | 70px | 1fr y dejaba los dos select en la primera mitad: a 320 px
   cada uno medía 57 px y se leía «2» y «D» en vez de «2026» y «Diario».
   Los select ocupan todo el ancho y el boton de reinicio solo el suyo. */
.uma-calc-toolbar, .uma-console .uma-calc-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.uma-calc-toolbar .uma-toolbar-actions { grid-column: 2; align-self: end; }

/* =========================================================================
   Lectura comoda (09-10-2026). Pablo: «es gente anciana la que visita la
   pagina; mas facil de entender, mas rapida, textos mas grandes, que todo
   encaje en pantalla». Va al final para ganarle a lo anterior sin reescribir
   las 1.600 lineas. Reglas:
   - texto corrido 18 px en el celular y 19 px en escritorio (A+ = 22 px);
   - ninguna etiqueta bajo ~15 px: las de .78-.8rem pasan a .88rem;
   - todo lo que se toca mide al menos 48 px de alto;
   - en el celular, el valor de hoy y el conversor van en la primera pantalla.
   ========================================================================= */
:root { --ink-soft: #2c3a47; --ink-muted: #46525e; }
:root[data-theme="dark"] { --ink-soft: #d5dbe0; --ink-muted: #b0bac3; }

html { font-size: 18px; }
html[data-text-size="large"] { font-size: 21px; }
@media (min-width: 768px) {
  html { font-size: 19px; }
  html[data-text-size="large"] { font-size: 22px; }
}
body { font-size: 1rem; line-height: 1.65; }
.uma-prose p, .uma-prose li, .uma-section p, .faq-answer { font-size: 1rem; line-height: 1.7; }
.uma-prose, .uma-section > .shell > p { max-width: 68ch; }

/* Etiquetas pequenas: minimo legible. */
.uma-kicker { font-size: .9rem; }
.uma-primary-header > span, .uma-primary-value > small,
.uma-validity, .uma-toolbar-selects label, .uma-fines-console > header label,
.uma-input-box > span, .uma-input-box b, .uma-equation, .uma-rate-pill,
.uma-value-grid small, .uma-value-grid span, .uma-note,
.footer-nav-grid a, .footer-nav-grid p, .footer-bottom, .uma-source-links > span,
.market-strip, .uma-preset-label, .uma-widget-nav small, .uma-drawer-nav span { font-size: .88rem; }
.uma-input-box > span, .uma-toolbar-selects label { color: var(--ink-soft); font-weight: 750; }

/* Objetivos tactiles de 48 px. */
.uma-calc-toolbar select, .uma-fines-console select, .reset-converter { height: 52px; }
.reset-converter { width: 52px; }
.uma-quick-row button, .uma-chip, .uma-act, .uma-cookie-btn, .btn-share-social,
.icon-button, .text-size-control button, .faq-question, .uma-elige-op { min-height: 48px; }
.icon-button { min-width: 48px; }
.uma-quick-row button { font-size: .95rem; color: var(--ink); }
.uma-act { font-size: .95rem; padding: 0 18px; }
.faq-question { display: flex; align-items: center; font-size: 1.02rem; }
.uma-quick-label { margin: 6px 0 6px; color: var(--ink-soft); font-size: .88rem; font-weight: 750; }

/* Botón de voz con palabra, no solo icono. */
.speak-icon-btn { width: auto; height: 40px; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--teal); font-weight: 750; font-size: .88rem; }
.speak-label { line-height: 1; }

/* Conversor: cifras grandes y claras. */
.uma-input-box input { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.uma-input-box strong[data-uma-result] { font-size: clamp(1.55rem, 2.5vw, 2rem); color: var(--teal); }
.uma-equation { font-size: .95rem; color: var(--ink); white-space: normal; }

/* El control A- / A+ se ve tambien en el celular: es la ayuda que mas sirve. */
@media (max-width: 1080px) { .text-size-control { display: flex; } }
.text-size-control button { min-width: 44px; font-size: .9rem; }

/* Celular: primera pantalla = valor + conversor. */
@media (max-width: 760px) {
  .market-strip { display: none; }
  .uma-hero { padding: 14px 0 18px; }
  .uma-hero-grid { gap: 8px; }
  .uma-hero-copy h1, .tool-page-hero h1 { font-size: 1.85rem; line-height: 1.12; letter-spacing: -0.02em; }
  .uma-hero-copy .uma-kicker { display: none; }
  .uma-lead { margin-top: 8px; font-size: .95rem; }
  .uma-primary-value { margin-top: 12px; }
  .uma-primary-value strong { font-size: 3rem; }
  .uma-validity { margin-top: 8px; flex-wrap: wrap; gap: 4px 12px; }
  .uma-console { padding-top: 10px; }
  .uma-console-head { min-height: 0; padding-bottom: 8px; flex-wrap: wrap; gap: 8px; }
  .uma-console-head .uma-kicker { display: none; }
  .uma-console-head h2 { font-size: 1.2rem; margin: 0; }
  .uma-converter-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .uma-input-box { height: auto; min-height: 96px; gap: 6px; }
  .uma-input-box input, .uma-input-box strong[data-uma-result] { font-size: 1.6rem; }
  .uma-input-box > span, .uma-input-box b { font-size: .88rem; }
  .uma-swap { width: 48px; height: 48px; margin: -4px auto; }
  .uma-quick-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uma-actions-row { grid-template-columns: 1fr 1fr; }
  .header-inner { gap: 8px; }
  .uma-hero-copy { padding-top: 0; }
  .uma-console-head .uma-rate-pill { display: none; }
  /* Primero lo que se escribe y lo que sale; el año y el periodo despues,
     ya con 2026 y Diario puestos, que es lo que busca casi todo el mundo. */
  .uma-console { display: flex; flex-direction: column; }
  .uma-console > .uma-console-head { order: 0; }
  .uma-console > .uma-converter-row { order: 1; }
  .uma-console > .uma-equation { order: 2; }
  .uma-console > .uma-calc-toolbar { order: 3; }
  .uma-console > .uma-quick-label { order: 4; }
  .uma-console > .uma-quick-row { order: 5; }
  .uma-console > .uma-actions-row { order: 6; }
  .uma-console > .uma-note { order: 7; }
}
.uma-validity { flex-direction: column; align-items: flex-start; gap: 4px; }
@media (max-width: 360px) {
  .uma-hero-copy h1, .tool-page-hero h1 { font-size: 1.65rem; }
  .uma-input-box { height: auto; min-height: 92px; padding: 10px 12px; }
  .uma-input-box input, .uma-input-box strong[data-uma-result] { font-size: 1.45rem; }
  .uma-input-box > span, .uma-input-box b { font-size: .85rem; }
  .uma-swap { width: 44px; height: 44px; }
  .uma-primary-value strong { font-size: 2.6rem; }
  .text-size-control button { min-width: 40px; padding: 0 6px; }
}

.uma-tool-grid p { font-size: .95rem; }
.uma-tool-grid b { font-size: .92rem; }
.uma-value-grid strong { font-size: 1.4rem; }
@media (max-width: 760px) {
  /* Botones de accion uno debajo del otro: lado a lado WhatsApp se cortaba. */
  .uma-console .uma-actions-row { grid-template-columns: 1fr; display: grid; gap: 8px; }
  .uma-console .uma-actions-row > * { width: 100%; }
  .uma-console > .uma-note { justify-content: flex-start; text-align: left; }
  /* Los cuatro valores en 2 x 2, no cuatro bloques altos uno tras otro. */
  .uma-value-grid { grid-template-columns: 1fr 1fr; }
  .uma-value-grid article { padding: 14px 12px; border-left: 0 !important; border-right: 0; border-bottom: 1px solid var(--line); }
  .uma-value-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
  .uma-value-grid strong { font-size: 1.2rem; }
  /* Calculadoras como lista: icono a la izquierda, todo el renglon se toca. */
  .uma-tool-grid > a { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
  .uma-tool-grid > a > svg { grid-row: 1 / span 3; margin-top: 2px; }
  .uma-tool-grid h3 { margin: 0 0 4px; font-size: 1.08rem; }
  .uma-tool-grid p { margin: 0 0 6px; }
}
@media (max-width: 760px) {
  .uma-section { padding-block: 30px; }
  .uma-section-head h2 { font-size: 1.6rem; line-height: 1.15; }
  .uma-prose h2 { font-size: 1.45rem; line-height: 1.2; }
  .uma-prose h3 { font-size: 1.15rem; }
  .uma-value-grid small { display: none; }
}
.uma-chip { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.tool-guidance-grid p { font-size: .95rem; }
.tool-guidance-grid h2 { font-size: 1.08rem; }
.tool-rate-context span, .tool-rate-context small { font-size: .88rem; }
@media (max-width: 760px) {
  .uma-chip { padding: 8px 12px; font-size: .88rem; max-width: none; white-space: normal; }
  /* Calculadoras: titulo, una linea de contexto y el valor en un renglon. */
  .tool-page-hero { padding: 14px 0 16px; }
  .tool-page-hero-grid { gap: 10px; }
  .tool-page-hero p { margin-top: 8px; font-size: .95rem; }
  .tool-rate-context { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-top: 10px; }
  .tool-rate-context strong { margin: 0; font-size: 1.35rem; }
  .tool-rate-context small { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .uma-layout-grid { margin-block-start: 14px !important; }
  /* En las calculadoras, la casilla donde se escribe va antes que los
     ejemplos: se ve sin bajar. Los ejemplos quedan justo debajo. */
  .uma-fines-console { display: flex; flex-direction: column; }
  .uma-fines-console > * { order: 3; }
  .uma-fines-console > header { order: 0; }
  .uma-fines-console > .uma-fines-inputs, .uma-fines-console > .uma-credit-inputs { order: 1; }
  .uma-fines-console > .uma-preset-row { order: 2; }
}
@media (max-width: 760px) {
  .tool-page-hero .uma-kicker { display: none; }
  .uma-fines-console > header { display: flex !important; flex-direction: row !important; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
  .uma-fines-console > header .uma-kicker { display: none; }
  .uma-fines-console > header h2 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
  .uma-fines-console > header label { width: 112px !important; flex: 0 0 112px; }
}
.uma-widget-nav a small, .uma-fines-inputs > div, .uma-fines-results small, .uma-fines-results article > span,
.cap-verdict p, .curso-check, .tool-guidance-grid > div > span { font-size: .88rem !important; }
.uma-fines-inputs input, .uma-credit-inputs input, .uma-credit-inputs select { min-height: 48px; font-size: 1.15rem; }
.uma-formula-pill, .uma-formula-pill span { font-size: .88rem !important; }
.uma-fines-inputs input, .uma-credit-inputs input, .uma-credit-inputs select, .uma-calc-toolbar select, .uma-input-box input { min-height: 48px !important; }
/* La columna lateral se estira a la altura del contenido para que el menu
   lateral acompane al bajar (sin esto, quedaba un vacio enorme a la derecha). */
@media (min-width: 992px) {
  .uma-sidebar-col { align-self: stretch; }
  .uma-sticky-sidebar { max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .uma-widget-nav a { padding: 8px 0; }
}
/* Menos aire entre secciones: antes sumaban 136 px (54 + 54 + 28). */
.uma-main-col > .uma-section { padding-block: 36px; }
.uma-main-col > .uma-section:first-child { padding-top: 0; }
.uma-main-col { gap: 0; }

/* Formulario de contacto con Turnstile (11-10-2026). */
.suggest-card { margin: 24px 0; padding: clamp(18px, 4vw, 26px); background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius-lg); }
.suggest-card h2 { margin: 0 0 6px; font-size: 1.3rem; }
.suggest-card > p { margin: 0 0 14px; color: var(--ink-soft); }
.suggest-form { display: grid; gap: 10px; max-width: 640px; margin: 0 0 14px; }
.suggest-form label { font-weight: 700; color: var(--ink); }
.suggest-optional { font-weight: 400; color: var(--ink-soft); }
.suggest-form textarea, .suggest-form input[type="email"] { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; }
.suggest-form textarea { min-height: 140px; resize: vertical; }
.suggest-form textarea:focus-visible, .suggest-form input[type="email"]:focus-visible { border-color: var(--teal); outline: 3px solid color-mix(in srgb, var(--teal) 30%, transparent); outline-offset: 1px; }
.suggest-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.suggest-form .suggest-send { justify-self: start; margin-top: 4px; }
.suggest-form .suggest-send:disabled { opacity: 0.7; cursor: progress; }
.suggest-status { --suggest-error: var(--red); min-height: 1.4em; margin: 0; color: var(--ink-soft); }
.suggest-done { max-width: 640px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); color: var(--ink); font-weight: 600; }
.suggest-card .suggest-nota { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.aviso-oficial { margin: 0 0 24px; padding: clamp(18px, 4vw, 24px); background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--realce, var(--marigold, var(--teal))); border-radius: var(--radius-lg); }
.aviso-oficial h2 { margin: 0 0 8px; font-size: 1.2rem; }
.suggest-form button.suggest-send { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 2px solid var(--teal); border-radius: var(--radius-lg); background: var(--teal); color: var(--on-brand); font-size: 1rem; font-weight: 700; }
.suggest-form button.suggest-send:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

/* Montos mas buscados arriba de /umas-a-pesos/ (16-10-2026): la respuesta a
   «30 umas a pesos» tiene que verse antes del conversor, tambien en celular. */
.uma-montos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
.uma-montos > div { min-width: 0; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.uma-montos dt { margin: 0; color: var(--ink-muted); font-size: .88rem; font-weight: 750; }
.uma-montos dt a { display: inline-block; min-height: 24px; color: var(--teal); line-height: 24px; text-decoration: underline; text-underline-offset: 3px; }
.uma-montos dd { margin: 2px 0 0; color: var(--ink); font-family: var(--font-display, inherit); font-size: 1.12rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1080px) and (min-width: 761px), (max-width: 400px) { .uma-montos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tabla de multas de la LFT en /50-umas-a-pesos/: en celular cada fila es una
   ficha, para que la cifra en pesos no quede escondida a la derecha. */
@media (max-width: 760px) {
  .uma-table.uma-table-lft { min-width: 0; }
  .uma-table-lft thead { display: none; }
  .uma-table-lft tr { display: block; padding: 12px 14px; border-top: 1px solid var(--line); }
  .uma-table-lft tr:first-child { border-top: 0; }
  .uma-table-lft td { display: block; padding: 2px 0; border-top: 0; }
  .uma-table-lft td:first-child { color: var(--ink-muted); font-size: .88rem; font-weight: 750; }
  .uma-table-lft td:last-child { font-weight: 800; }
}

/* Tarjetas «Según tu trámite» (.uma-link-grid). Estaban sin estilo: en tablet
   eran enlaces de 23 px de alto pegados entre sí (medir-formatos, 16-10-2026). */
.uma-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.uma-link-card { display: flex; min-height: 64px; padding: 12px 14px; flex-direction: column; justify-content: center; gap: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.uma-link-card strong { color: var(--teal); }
.uma-link-card span { color: var(--ink-soft); font-size: .9rem; }
.uma-link-card:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* Fuente y fecha bajo una tabla. No reusar .uma-note: es flex (para el punto
   del conversor) y pone cada enlace del texto como columna aparte. */
.uma-nota-tabla { margin: 10px 0 0; color: var(--ink-muted); font-size: .9rem; line-height: 1.55; }
.uma-nota-tabla a { color: var(--teal); }
.uma-hero-note a { color: var(--teal); }
.footer-bottom > span:first-child { flex-shrink: 0; white-space: nowrap; }

/* ==================== FACIL PARA EL PUBLICO (06-11-2026) ====================
   Orden «sitios mas faciles»: la herramienta sube junto a la respuesta sin
   achicar el H1 (a Pablo le gustan las letras grandes de este sitio), y lo poco
   usado se abre al pedirlo. Solo disposicion: no cambia colores ni letra. */
.uma-hero-herramienta .uma-fines-console { min-width: 0; padding-top: 0; }
.uma-hero-herramienta .uma-fines-console > header { padding-bottom: 10px; }
.uma-hero-herramienta .cap-verdict { margin-top: 0; }
.uma-campo-solo { grid-template-columns: 1fr; padding: 12px 0; }
.uma-campo-solo label { min-height: 0; padding: 10px 16px; }
.uma-abrir { margin-top: 12px; border-top: 1px solid var(--line); }
.uma-abrir > summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; color: var(--teal); font-weight: 750; cursor: pointer; list-style: none; }
.uma-abrir > summary::-webkit-details-marker { display: none; }
.uma-abrir > summary::after { flex: 0 0 auto; font-size: 1.3rem; line-height: 1; content: "+"; }
.uma-abrir[open] > summary::after { content: "\2212"; }
.uma-abrir > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.uma-abrir > p { margin: 0 0 12px; color: var(--ink-soft); line-height: 1.6; }
.uma-abrir-dato { margin: 4px 0 12px; }
.uma-abrir-anio { padding-bottom: 12px; }
.uma-abrir-anio label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); font-weight: 750; }
.uma-abrir-anio select { min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-weight: 800; }
.uma-abrir .uma-fines-actions { margin-bottom: 12px; }
.uma-tres-valores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uma-tres-valores article, .uma-tres-valores article:last-child { padding: 10px 12px 10px 0; }
.uma-tres-valores strong { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.footer-fuente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; padding-block: 12px; color: var(--ink-soft); font-size: .88rem; }
.footer-fuente .live-dot { margin-right: 6px; }
.uma-cookie-banner { padding: 10px 0; }
.uma-cookie-text p { max-width: none; line-height: 1.45; }
@media (max-width: 860px) {
  .uma-cookie-inner { gap: 8px; }
  .uma-cookie-actions { flex-direction: row; }
  .uma-cookie-btn { flex: 1 1 0; width: auto; min-height: 44px; padding: 8px 6px; }
  .uma-hero-herramienta .uma-hero-copy { padding-bottom: 6px; border-bottom: 0; }
}
@media (max-width: 600px) {
  .uma-dos-campos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; padding: 12px 0 !important; }
  .uma-dos-campos label { padding: 10px; }
  .uma-dos-campos input { min-width: 0; width: 100%; max-width: none; }
  .uma-tres-valores { grid-template-columns: 1fr; }
  .uma-tres-valores article, .uma-tres-valores article:last-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding: 6px 0; border-right: 0; }
  .uma-tres-valores strong { margin-top: 0; }
  .footer-fuente { justify-content: flex-start; }
}
.uma-lead-extra { margin-top: 8px; }
/* En una columna: titulo, respuesta, herramienta y despues lo demas. Sin esto,
   a 320 px el parrafo dejaba el campo debajo del aviso de cookies. */
@media (max-width: 900px) {
  .uma-hero-herramienta .uma-hero-grid, .uma-hero-portada .uma-hero-grid { display: flex; flex-direction: column; gap: 8px; }
  .uma-hero-herramienta .uma-hero-copy, .uma-hero-portada .uma-hero-copy { display: contents; }
  .uma-hero-herramienta .uma-fines-console, .uma-hero-portada .uma-console { order: 3; width: 100%; }
  .uma-lead-extra, .uma-hero-herramienta .uma-hero-note, .uma-hero-portada .uma-validity, .uma-hero-portada .uma-abrir, .uma-hero-portada .uma-hero-copy > p:not(.uma-lead) { order: 4; }
  .uma-hero-herramienta h1, .uma-hero-portada h1 { margin-bottom: 0; }
  .uma-hero-portada .uma-primary-value { margin-top: 4px; }
  .uma-hero-portada .uma-lead { margin-top: 0; }
  .uma-hero-portada .uma-abrir { width: 100%; }
}
/* El boton de intercambio ya no separa el campo del resultado: con el teclado
   abierto hay que ver los dos. */
@media (max-width: 760px) {
  .uma-converter-row { position: relative; gap: 6px; }
  .uma-converter-row .uma-swap { position: absolute; top: 50%; right: 10px; width: 44px; height: 44px; margin: 0; transform: translateY(-50%); }
  #salario-diario-integrado .uma-fines-results article { padding-block: 8px; }
}
.cap-verdict p strong { display: inline; margin: 0; font-size: inherit; }
.uma-console-head + .uma-converter-row { margin-top: 12px; }
@media (max-width: 760px) {
  .uma-fines-console > .uma-tres-valores { order: 1; }
  .uma-fines-console > .uma-preset-row { order: 2; }
  #salario-diario-integrado .uma-dos-campos { padding-bottom: 4px !important; }
  #salario-diario-integrado .uma-fines-results article { padding-block: 4px; }
  .uma-cookie-text p { line-height: 1.35; }
  .uma-cookie-banner { padding: 8px 0; }
}
/* A 320 px el boton de menu quedaba cortado: se queda el simbolo del logo. */
@media (max-width: 360px) {
  .brand-wordmark { display: none; }
  /* Sin esto el aviso de cookies tapa el campo en la primera visita a 320 px. */
  .uma-lead-bajar { order: 4; }
}
.uma-ejemplo { margin: 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink-soft); }
.uma-ejemplo strong { color: var(--ink); }
.uma-fines-results[hidden], .uma-formula-pill[hidden], .uma-ejemplo[hidden] { display: none; }
.uma-hoy-detalle { grid-column: 2; max-width: none; margin-top: -24px; }
@media (max-width: 900px) {
  .uma-hoy-detalle { order: 4; margin-top: 0; }
}
.uma-fines-inputs input::placeholder { color: var(--ink-muted); font-family: var(--font-body, inherit); font-size: 1rem; font-weight: 600; opacity: 1; }