/* =====================================================================
   Busca Tu Carrera · hoja de estilos del sitio
   Idea visual: la marca va en blanco y negro y el color lo ponen los datos.
   Cada color es una universidad. Lo que es de quien responde (su nota, lo
   que elige) va en una ficha de tinta. Una sola familia tipográfica: Gabarito.
   Generada a partir de propuesta/referencia/estilos.css y del bloque de la
   fase 2 (docs/superpowers/plans/2026-10-14-fase-2-enfoque-diseno.md).
   ===================================================================== */

@font-face {
  font-family: 'Gabarito';
  src: url('../fonts/gabarito-latin-var.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #111111;
  --ink-2: #5D5D5A;
  --ink-3: #6E6E6A;
  --paper: #FFFFFF;
  --fog: #F4F3EF;
  --fog-2: #E6E5E0;
  --fog-3: #D2D1CB;

  --plus: #178A4C; --minus: #C2410C;

  --r-s: 14px; --r-m: 20px; --r-l: 28px; --r-pill: 999px;
  --gut: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --snap: cubic-bezier(.34, 1.56, .64, 1);
  --font: 'Gabarito', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.5 var(--font); }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: .09em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .16em; }
p { margin: 0 0 1em; max-width: 68ch; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.375rem); }
h3 { font-size: 1.375rem; line-height: 1.1; letter-spacing: -.02em; }
h4 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible { outline-color: #fff; }
h1:focus, h2:focus { outline: none; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-2); }
.small { font-size: .9375rem; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: clamp(44px, 7vw, 88px); }
.band-fog { background: var(--fog); }
.lead { font-size: clamp(1.125rem, 1.7vw, 1.3125rem); line-height: 1.4; color: var(--ink-2); max-width: 60ch; }

/* ---------- Cabecera ---------- */
.site-head .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding-block: 14px; }
.brand { display: block; flex: none; }
.brand img { display: block; width: auto; height: 36px; }
/* a 320 px, el logo cabe en la fila con el botón más largo de la cabecera («Continuar el quiz») */
@media (max-width: 339px) { .site-head .brand img { height: 32px; } }
.head-cta { margin-left: auto; }
.site-nav { display: flex; gap: 6px; order: 3; width: 100%; }
.site-nav a { flex: 1 1 auto; padding: 9px 8px; border-radius: var(--r-pill); background: var(--fog); font-size: .9375rem; font-weight: 600; text-align: center; text-decoration: none; transition: background-color .12s; }
.site-nav a:hover { background: var(--fog-2); }
.site-nav a[aria-current=page], .site-nav a[aria-current=page]:hover { background: var(--ink); color: #fff; }
@media (min-width: 720px) {
  .site-head .wrap { flex-wrap: nowrap; padding-block: 18px; }
  .brand img { height: 44px; }
  .site-nav { order: 0; width: auto; margin-left: auto; gap: 2px; }
  .site-nav a { flex: none; background: none; padding: 9px 15px; font-size: 1.0625rem; }
  .site-nav a:hover { background: var(--fog); }
  .head-cta { margin-left: 6px; }
}

/* ---------- Pie ---------- */
.site-foot { background: var(--ink); color: #C9C8C3; margin-top: clamp(48px, 8vw, 96px); border-radius: var(--r-l) var(--r-l) 0 0; font-size: .9375rem; }
.site-foot a { color: #fff; }
.site-foot .wrap { display: grid; gap: 28px 48px; padding-block: clamp(32px, 5vw, 52px); }
.site-foot .brand img { height: 52px; }
.site-foot h2 { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: #fff; margin-bottom: 10px; }
.site-foot ul { list-style: none; display: grid; gap: 6px; }
.site-foot .avisos li { position: relative; padding-left: 16px; }
.site-foot .avisos li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #6E6E6A; }
.site-foot summary { cursor: pointer; font-weight: 700; color: #fff; }
.site-foot p { max-width: 46ch; }
@media (min-width: 860px) { .site-foot .wrap { grid-template-columns: 1.1fr .6fr 1.6fr; } }
/* Última línea: titular y páginas legales, de lado a lado bajo una raya */
.foot-legal { display: grid; gap: 8px 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .875rem; }
.foot-legal p { margin: 0; max-width: none; }
.site-foot .foot-legal ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-legal a, .foot-legal .btn-text { display: inline-flex; align-items: center; min-height: 36px; }
.foot-legal .btn-text { padding: 0; color: #fff; font-weight: 400; }
@media (min-width: 860px) {
  .foot-legal { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .site-foot .foot-legal ul { justify-content: flex-end; }
}

/* ---------- Botones, distintivos, etiquetas ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 24px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .12s, transform .12s var(--ease); }
.btn:hover { background: #333333; }
.btn:active { transform: scale(.97); }
.btn-ghost { background: var(--fog); color: var(--ink); }
.btn-ghost:hover { background: var(--fog-2); }
.band-fog .btn-ghost, .panel .btn-ghost { background: var(--paper); }
.btn-invert { background: #fff; color: var(--ink); }
.btn-invert:hover { background: var(--fog); }
.btn-sm { min-height: 40px; padding: 6px 18px; font-size: .9375rem; }
.btn-lg { min-height: 56px; padding: 12px 30px; font-size: 1.1875rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-text { background: none; border: 0; padding: 6px 0; font-weight: 700; text-decoration: underline; text-decoration-thickness: .09em; text-underline-offset: .2em; cursor: pointer; }

.uni { display: inline-flex; align-items: center; justify-content: center; min-width: 3.3em; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c, var(--ink)); color: var(--t, var(--ink)); font-size: .8125rem; font-weight: 800; letter-spacing: .01em; line-height: 1.35; text-decoration: none; vertical-align: .1em; }
a.uni:hover { box-shadow: 0 0 0 2px var(--ink); }
.uni-lg { font-size: 1.5rem; padding: 5px 18px; }

.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill { display: inline-block; padding: 2px 12px; border-radius: var(--r-pill); background: var(--fog); font-size: .8125rem; font-weight: 700; white-space: nowrap; }

/* ---------- Controles ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--track, var(--fog-3)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--track, var(--fog-3)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border: 0; border-radius: 50%; background: var(--thumb, var(--ink)); box-shadow: 0 0 0 5px var(--halo, rgba(17, 17, 17, .12)); transition: box-shadow .15s; }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--thumb, var(--ink)); box-shadow: 0 0 0 5px var(--halo, rgba(17, 17, 17, .12)); }
input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 9px var(--halo, rgba(17, 17, 17, .12)); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ring-gap, var(--paper)), 0 0 0 6px var(--thumb, var(--ink)); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ring-gap, var(--paper)), 0 0 0 6px var(--thumb, var(--ink)); }
.field { display: block; width: 100%; min-height: 48px; padding: 8px 16px; border: 0; border-radius: var(--r-s); background: var(--fog); }
.band-fog .field, .panel .field, .tune .field { background: var(--paper); }
.field:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
select.field { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper .btn { flex: none; width: 48px; padding: 0; font-size: 1.4rem; line-height: 1; }
.stepper input { flex: 1; min-width: 0; }

/* ---------- Escala 5-14 (notas de corte frente a tu nota) ---------- */
.strip { position: relative; height: 54px; margin: 8px 0 0; }
.strip-track { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: rgba(17, 17, 17, .18); }
.strip-tick { position: absolute; top: 12px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: color-mix(in srgb, var(--c, var(--ink)) 62%, #111); }
.strip-me { position: absolute; top: 0; z-index: 1; width: 0; height: 40px; border-left: 2px solid var(--ink); }
.strip-me b { position: absolute; top: -3px; left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.strip-me.flip b { left: auto; right: 6px; }
.strip-axis { position: absolute; left: 0; right: 0; top: 36px; height: 18px; font-size: .75rem; color: var(--ink-2); }
.strip-axis span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.strip-axis span:first-child { transform: none; }
.strip-axis span:last-child { transform: translateX(-100%); }

/* ---------- Portada ---------- */
.hero-grade { display: inline-block; min-width: 2.5em; padding: .02em .24em .06em; border-radius: var(--r-pill); background: var(--ink); color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.tablon { margin-top: clamp(22px, 3vw, 34px); padding: clamp(16px, 2.6vw, 28px) clamp(16px, 2.6vw, 30px) 10px; border-radius: clamp(20px, 2.6vw, 28px); background: var(--ink); color: #fff; --track: rgba(255, 255, 255, .28); --thumb: #fff; --halo: rgba(255, 255, 255, .18); --ring-gap: var(--ink); }
.tablon-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 6px; font-size: .875rem; }
.tablon-top p { margin: 0; max-width: none; opacity: .7; }
.hero-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.hero-legend .uni b { margin-left: .45em; font-weight: 600; font-variant-numeric: tabular-nums; }
.cutplot { position: relative; }
.cutplot svg { display: block; width: 100%; height: auto; overflow: visible; }
.cutplot text { fill: #fff; opacity: .62; font-size: 13px; font-variant-numeric: tabular-nums; }
.cutplot .col circle { fill: #333338; transition: fill .22s; }
.cutplot .col.on circle { fill: var(--c); }
.cutplot .axl, .cutplot .top { stroke: #fff; opacity: .3; }
.cutplot .top { stroke-dasharray: 2 6; stroke-linecap: round; }
.cutplot .me line { stroke: #fff; stroke-width: 2; }
.cutplot .me circle { fill: none; stroke: #fff; stroke-width: 2; }
.peak { position: absolute; transform: translate(-50%, calc(-100% - 16px)); padding: 7px 12px 8px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-size: .9375rem; font-weight: 800; line-height: 1; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.plot-tip { position: absolute; z-index: 3; max-width: 240px; padding: 9px 13px; border-radius: var(--r-s); background: #fff; color: var(--ink); font-size: .875rem; line-height: 1.35; pointer-events: none; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.plot-tip b { display: block; }


.example-note { margin: 10px 0 0; font-size: .875rem; color: var(--ink-2); }

.dir { list-style: none; margin-top: 14px; }
.dir li { border-bottom: 1px solid var(--fog-2); }
.dir a { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-inline: -12px; padding: 10px 12px; border-radius: var(--r-s); font-weight: 700; text-decoration: none; transition: background-color .12s; }
.dir a:hover { background: var(--fog); }
.dir a .n { margin-left: auto; font-size: .9375rem; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.uni-tiles { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.uni-tiles a { display: grid; align-content: space-between; gap: 18px; height: 100%; min-height: 132px; padding: 16px 18px; border-radius: var(--r-m); background: var(--c); color: var(--ink); text-decoration: none; transition: transform .18s var(--ease); }
.uni-tiles a:hover { transform: translateY(-3px); }
.uni-tiles b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.uni-tiles span { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.uni-tiles small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; }
@media (min-width: 640px) { .uni-tiles { grid-template-columns: repeat(3, 1fr); } }


/* ---------- Cabeceras de página interior ---------- */
.page-head { padding-block: clamp(22px, 4vw, 48px) clamp(18px, 3vw, 30px); }
.page-head h1 + .lead { margin-top: 14px; }

/* ---------- Quiz ---------- */
.quiz { display: grid; gap: 24px 56px; align-items: start; padding-block: clamp(14px, 3vw, 40px); }
.quiz-rail { display: none; }
.quiz-top { display: grid; gap: 10px; margin-bottom: 22px; }
.quiz-meta { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; color: var(--ink-2); }
.quiz-meta b { color: var(--ink); }
.qm-block { display: none; }
.segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.segs i { height: 8px; border-radius: var(--r-pill); background: var(--fog-2); overflow: hidden; }
.segs i b { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ink); transition: width .3s var(--ease); }
.q-card { max-width: 700px; }
.q-stem { margin: 0 0 4px; font-size: 1.125rem; color: var(--ink-2); }
.q-card h1 { font-size: clamp(1.6rem, 4vw, 2.375rem); line-height: 1.04; max-width: 22ch; }
.opts { display: grid; gap: 8px; margin-top: 24px; }
.opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px; border: 0; border-radius: var(--r-m); background: var(--fog); font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color .12s, color .12s; }
.opt .k { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.opt .ot { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 519px) { .opts.two .opt { gap: 10px; padding: 10px 12px; } .opts.two .opt .ot { overflow-wrap: break-word; hyphens: auto; } }
@media (hover: hover) { .opt:hover { background: var(--fog-2); } }
.opt[aria-pressed=true] { background: var(--ink); color: #fff; animation: elegir .22s var(--snap); }
.opt[aria-pressed=true] .k { color: var(--ink); }
@keyframes elegir { from { transform: scale(.97); } to { transform: scale(1); } }
.opts.multi .opt[aria-pressed=true] .k { font-size: 0; }
.opts.multi .opt[aria-pressed=true] .k::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg) translate(1px, -1px); }
/* escala de cinco pasos: el punto crece con la intensidad */
.opts.likert .opt .k { width: var(--s, 20px); height: var(--s, 20px); margin: calc((32px - var(--s, 20px)) / 2); background: var(--fog-3); font-size: 0; }
.opts.likert .opt[aria-pressed=true] .k { background: #fff; }
.opts.likert .opt:nth-child(1) { --s: 10px; }
.opts.likert .opt:nth-child(2) { --s: 15px; }
.opts.likert .opt:nth-child(3) { --s: 20px; }
.opts.likert .opt:nth-child(4) { --s: 26px; }
.opts.likert .opt:nth-child(5) { --s: 32px; }
@media (min-width: 640px) {
  .opts.likert { grid-template-columns: repeat(5, 1fr); }
  .opts.likert .opt { flex-direction: column; justify-content: center; gap: 8px; min-height: 104px; padding: 14px 6px; text-align: center; }
}
.q-nav { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; max-width: 700px; margin-top: 24px; }
.q-nav .btn { padding-inline: 8px; }
.q-hint { margin: 14px 0 0; font-size: .875rem; color: var(--ink-2); }
@media (hover: none) { .q-hint.keys { display: none; } }
.q-extra { display: flex; flex-wrap: wrap; gap: 4px 28px; max-width: 700px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--fog-2); font-size: .9375rem; }
@media (min-width: 1000px) {
  .quiz { grid-template-columns: 290px minmax(0, 1fr); }
  .quiz-rail { display: block; position: sticky; top: 24px; }
  .quiz-top .field { display: none; }
  .qm-block { display: inline; }
  .rail-list { list-style: none; display: grid; gap: 2px; }
  .rail-list button { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 12px 8px 8px; border: 0; border-radius: var(--r-s); background: none; font-size: .9375rem; text-align: left; cursor: pointer; transition: background-color .12s; }
  .rail-list button:hover { background: var(--fog); }
  .rail-list .rn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fog); font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
  .rail-list .rc { font-size: .8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .rail-list [aria-current=step], .rail-list [aria-current=step]:hover { background: var(--ink); color: #fff; font-weight: 700; }
  .rail-list [aria-current=step] .rn { background: #fff; color: var(--ink); }
  .rail-list [aria-current=step] .rc { color: #fff; }
  .rail-list .full .rn { background: var(--ink); color: #fff; }
  .rail-list .full[aria-current=step] .rn { background: #fff; color: var(--ink); }
}

/* ---------- Resultados ---------- */
.res { display: grid; gap: 24px 48px; align-items: start; }
.res-main { min-width: 0; }
.whatif { padding: 20px 22px 12px; border-radius: var(--r-l); background: var(--ink); color: #fff; --track: rgba(255, 255, 255, .28); --thumb: #fff; --halo: rgba(255, 255, 255, .18); --ring-gap: var(--ink); }
.whatif-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.whatif-top label { font-weight: 700; }
.whatif output { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.whatif .stepper { margin-top: 6px; }
.whatif .btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; }
.whatif .btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.whatif .btn-text { font-size: .9375rem; }
.res-index { display: none; list-style: none; margin-top: 16px; counter-reset: idx; }
.res-index a { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 8px 10px; border-radius: var(--r-s); font-size: .9375rem; line-height: 1.3; text-decoration: none; counter-increment: idx; }
.res-index a::before { content: counter(idx); font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.res-index a:hover { background: var(--fog); }
.res-index .p { font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) {
  .res { grid-template-columns: minmax(0, 1fr) 330px; }
  .res-side { position: sticky; top: 20px; order: 2; max-height: calc(100vh - 40px); overflow: auto; }
  .res-index { display: block; }
}
.notice { margin-bottom: 20px; padding: 14px 18px; border-radius: var(--r-m); background: var(--fog); }
.notice p { margin: 0; }
.tune { margin-bottom: 24px; padding: 20px 22px 16px; border-radius: var(--r-l); background: var(--fog); }
.tune h2 { margin-bottom: 6px; font-size: 1.375rem; letter-spacing: -.02em; }
.tune > p { margin: 0 0 12px; max-width: 64ch; }
.tune-form { display: flex; flex-wrap: wrap; gap: 8px; }
.tune-form .field { flex: 1 1 240px; width: auto; }
.tune-form .btn { flex: none; }

.ficha { margin-bottom: 16px; padding: clamp(18px, 2.6vw, 28px); border: 1.5px solid var(--fog-2); border-radius: var(--r-l); background: var(--paper); scroll-margin-top: 16px; }
.band-fog .ficha { border-color: transparent; }
.ficha-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.rank { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ficha-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.02; overflow-wrap: anywhere; }
.ficha-head .cat { display: block; margin-top: 6px; font-size: .9375rem; color: var(--ink-2); }
.pct { text-align: right; line-height: 1; }
.pct b { display: block; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pct span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--ink-2); }
.best { margin-top: 18px; padding: 16px 18px 12px; border-radius: var(--r-m); background: color-mix(in srgb, var(--c, var(--fog-3)) 22%, #fff); }
.best-lbl { margin: 0 0 6px; font-size: .875rem; color: rgba(17, 17, 17, .72); }
.best-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.best-top .where { font-size: 1.125rem; font-weight: 700; }
.best-top .tag { margin-left: auto; }
@media (max-width: 479px) { .best-top .where { flex-basis: calc(100% - 5em); } .best-top .tag { margin-left: 0; } }
.best-what { margin: 4px 0 0; max-width: none; font-size: .9375rem; color: rgba(17, 17, 17, .72); }
.figs { display: flex; flex-wrap: wrap; gap: 6px 36px; margin: 12px 0 0; }
.figs div { display: flex; flex-direction: column; }
.figs dt { font-size: .8125rem; color: rgba(17, 17, 17, .72); }
.figs dd { margin: 0; font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.best .strip-axis { color: rgba(17, 17, 17, .72); }
.cols2 { display: grid; gap: 4px 32px; margin-top: 18px; }
@media (min-width: 700px) { .cols2 { grid-template-columns: 1fr 1fr; } }
.cols2 h3, .ficha h3 { margin: 10px 0 6px; font-size: 1.0625rem; letter-spacing: -.01em; }
ul.pm { list-style: none; }
ul.pm li { position: relative; margin: .3em 0; padding-left: 1.4em; }
ul.pm li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
ul.plus li::before { content: "+"; color: var(--plus); }
ul.minus li::before { content: "–"; color: var(--minus); }
.kv { margin: 14px 0 0; max-width: none; font-size: .9375rem; }
.kv b { font-weight: 700; }
.ficha-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- Varios ---------- */
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; }
.skip:focus { left: 8px; }
.wrap-narrow { max-width: 820px; }
.crumbs { margin: 0 0 14px; font-size: .9375rem; color: var(--ink-2); }
.crumbs a { color: var(--ink-2); }
.crumbs span { margin: 0 6px; }
summary { padding: 8px 0; font-weight: 700; cursor: pointer; }
input[type=checkbox] { width: 1.15em; height: 1.15em; margin: 0 .4em 0 0; vertical-align: -.15em; accent-color: var(--ink); }

/* ---------- Medidores de la ficha de carrera ---------- */
.meter { display: grid; grid-template-columns: minmax(0, 1fr) 84px 5.2em; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(17, 17, 17, .1); font-size: .9375rem; }
.meter:first-child { border-top: 0; }
.meter-b { height: 8px; border-radius: var(--r-pill); background: rgba(17, 17, 17, .12); overflow: hidden; }
.meter-b i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ink); }
.meter-v { font-weight: 700; text-align: right; }
@media (max-width: 519px) { .meter { grid-template-columns: minmax(0, 1fr) 5.2em; row-gap: 4px; } .meter > span:first-child { grid-column: 1 / -1; } }

/* ---------- Tablas de ofertas ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tbl th { padding: 8px 12px 8px 0; border-bottom: 1.5px solid var(--fog-3); font-size: .8125rem; font-weight: 600; color: var(--ink-2); text-align: left; vertical-align: bottom; }
.tbl td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--fog-2); vertical-align: top; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl .t-name { display: block; font-weight: 700; }
.tbl .t-sub { display: block; font-size: .875rem; color: var(--ink-2); }
.tbl tr.ex td { color: var(--ink-3); }
.tbl tr.ex .uni { filter: grayscale(1); opacity: .7; }
.tbl td.r, .tbl th.r { text-align: right; }
@media (max-width: 700px) {
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--fog-2); }
  .tbl td { padding: 0; border: 0; }
  .tbl td.c-main, .tbl td.c-wide { grid-column: 1 / -1; }
  .tbl td.r { text-align: left; }
  .tbl td[data-l]::before { content: attr(data-l) " "; font-size: .8125rem; color: var(--ink-2); }
}

/* ---------- Quiz: nota, calculadora, confirmación y cambio de pregunta ---------- */
.btn-ghost[aria-pressed=true], .btn-ghost[aria-pressed=true]:hover { background: var(--ink); color: #fff; }
.calc { margin-top: 18px; padding: 6px 18px 16px; border-radius: var(--r-m); background: var(--fog); }
.calc label { display: block; margin-top: 12px; font-size: .9375rem; font-weight: 600; }
.calc .field { max-width: 220px; margin-top: 6px; background: var(--paper); font-weight: 400; }
.calc-out { margin: 14px 0 10px; font-weight: 700; }
.confirm { max-width: 520px; margin-top: 12px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: var(--r-m); }
.confirm .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.q-card.de-next { animation: entra-next .2s var(--ease); }
.q-card.de-prev { animation: entra-prev .2s var(--ease); }
@keyframes entra-next { from { opacity: 0; transform: translateX(14px); } }
@keyframes entra-prev { from { opacity: 0; transform: translateX(-14px); } }

/* ---------- Resultados: afinar, desempate y secciones ---------- */
#tuneMsg { margin: 10px 0 0; min-height: 1.4em; }
.tune-on { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tune-on:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.chip:hover { background: #333333; }
.chip span { font-size: 1.1rem; line-height: 1; }
.tune-all { margin-top: 6px; }
.tune-all h3 { margin: 14px 0 4px; font-size: .875rem; font-weight: 700; letter-spacing: 0; color: var(--ink-2); }
.tune-rows { list-style: none; border-top: 1px solid var(--fog-2); }
.tune-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px 44px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--fog-2); }
.tune-rows .tv { font-size: .875rem; font-weight: 700; white-space: nowrap; }
.tune-rows .btn { width: 44px; min-height: 40px; padding: 0; font-size: 1.3rem; line-height: 1; }
.duel-hint { margin: 0 0 18px; font-weight: 700; }
.duels { list-style: none; display: grid; gap: 18px; margin-top: 14px; }
.duel-opts { display: grid; gap: 8px; }
@media (min-width: 640px) { .duel-opts { grid-template-columns: 1fr 1fr; } }
.duel .opt { align-items: flex-start; }
.duel-sub { display: block; margin-top: 2px; font-size: .875rem; font-weight: 400; opacity: .75; }
.duel .btn-text[aria-pressed=true] { font-weight: 800; text-decoration: none; }
.where-panel { margin-top: 16px; }
.sec { margin-top: 44px; }
.sec > h2 { margin-bottom: 14px; font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.crit { list-style: none; border-top: 1px solid var(--fog-2); }
.crit li { position: relative; max-width: 72ch; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--fog-2); }
.crit li::before { content: ""; position: absolute; left: 2px; top: 1.2em; width: 12px; height: 3px; border-radius: 2px; background: var(--ink); }
.mini { list-style: none; border-top: 1px solid var(--fog-2); }
.mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--fog-2); }
.mini .mn { font-weight: 700; }
.mini .mp { font-weight: 800; font-variant-numeric: tabular-nums; }
.mini .mx { grid-column: 1 / -1; font-size: .9375rem; color: var(--ink-2); }
.prof { display: grid; gap: 4px 40px; }
@media (min-width: 760px) { .prof { grid-template-columns: 1fr 1fr; } }
.prof h3 { margin: 10px 0 6px; font-size: 1.0625rem; letter-spacing: -.01em; }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) 96px 3.4em; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--fog-2); font-size: .9375rem; }
.pb { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--fog-2); overflow: hidden; }
.pb::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink-3); }
.pb i { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.pb i.neg { background: var(--minus); }
.pv { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.legend { list-style: none; display: grid; gap: 8px; margin-top: 8px; font-size: .9375rem; }
#copyBox { width: 100%; min-height: 180px; margin-top: 10px; font-size: .875rem; }

/* ---------- Ficha de carrera y de universidad ---------- */
.sheet { display: grid; gap: 36px 56px; align-items: start; padding-bottom: 24px; }
.sheet-main { min-width: 0; }
.sheet-main > section { margin-top: 44px; }
.sheet-main > section:first-child { margin-top: 0; }
.sheet-main h2 { margin-bottom: 12px; font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.sheet-side { display: grid; gap: 16px; }
@media (min-width: 1000px) { .sheet { grid-template-columns: minmax(0, 1fr) 350px; } .sheet-side { position: sticky; top: 20px; } }
.panel { padding: 20px 22px; border-radius: var(--r-l); background: var(--fog); }
.panel h2, .panel h3 { margin-bottom: 8px; font-size: 1.125rem; letter-spacing: -.01em; }
.panel p:last-child { margin-bottom: 0; }
.panel .big { margin-bottom: 8px; font-size: 3.25rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.panel-ink { background: var(--ink); color: #fff; }
.panel-ink .muted { color: #C9C8C3; }
.panel-ink ul.plus li::before { color: #5BE39B; }
.panel-ink ul.minus li::before { color: #FF9A6B; }
.ojo { max-width: 72ch; margin-top: 22px; padding: 14px 18px 16px; border-radius: var(--r-m); background: var(--fog); }
.ojo b { display: table; margin-bottom: 6px; padding: 1px 11px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: .8125rem; }
.taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.taglist li { padding: 7px 14px; border-radius: var(--r-pill); background: var(--fog); font-size: .9375rem; font-weight: 600; }
.outs { list-style: none; border-top: 1px solid var(--fog-2); }
.outs li { padding: 11px 0; border-bottom: 1px solid var(--fog-2); }
.linkgrid { list-style: none; display: grid; gap: 0 32px; border-top: 1px solid var(--fog-2); }
.linkgrid li { display: flex; }
.linkgrid a { flex: 1; display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fog-2); font-weight: 700; text-decoration: none; }
.linkgrid a:hover { text-decoration: underline; }
.linkgrid a span { font-size: .9375rem; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
@media (min-width: 700px) { .linkgrid { grid-template-columns: 1fr 1fr; } }
.video a.vid { display: grid; gap: 2px; margin-bottom: 10px; padding: 12px 16px; border-radius: var(--r-s); background: var(--paper); text-decoration: none; }
.video a.vid:hover { box-shadow: 0 0 0 2px var(--ink); }
.video a.vid b { font-weight: 700; }
.video a.vid span { font-size: .875rem; color: var(--ink-2); }
.facts { display: grid; margin: 0; }
.facts div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid rgba(17, 17, 17, .1); font-size: .9375rem; }
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.facts .t-sub { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 400; color: var(--ink-2); }
.uni-band { margin-bottom: clamp(24px, 4vw, 40px); background: var(--c); }
.uni-band .crumbs, .uni-band .crumbs a, .uni-band .lead { color: var(--ink); }
.uni-band .uni { background: var(--ink); color: #fff; }
.uni-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.uni-head + .lead { margin-top: 14px; }
.campus { list-style: none; border-top: 1px solid var(--fog-2); }
.campus li { display: grid; gap: 2px 20px; padding: 13px 0; border-bottom: 1px solid var(--fog-2); }
.campus b { font-weight: 700; }
.campus .cz { font-size: .875rem; color: var(--ink-2); }
@media (min-width: 700px) { .campus li { grid-template-columns: 15em minmax(0, 1fr); } .campus .cd { grid-row: span 2; } }
details.grp { border-bottom: 1px solid var(--fog-2); }
details.grp:first-of-type { border-top: 1px solid var(--fog-2); }
details.grp > summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; font-size: 1.125rem; list-style: none; }
details.grp > summary::-webkit-details-marker { display: none; }
details.grp > summary span { margin-left: auto; font-size: .9375rem; font-weight: 400; color: var(--ink-2); }
details.grp > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 4px 0 2px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); transition: transform .18s var(--ease); }
details.grp[open] > summary::after { margin-top: 5px; transform: rotate(-135deg); }
details.grp .tbl { margin-bottom: 18px; }

/* ---------- Catálogos ---------- */
.filters { display: grid; gap: 12px 16px; margin-bottom: 16px; }
@media (min-width: 800px) { .filters { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.filters label { display: block; margin-bottom: 4px; font-size: .875rem; font-weight: 700; }
.cat-list { list-style: none; border-top: 1px solid var(--fog-2); }
.cat-list li { border-bottom: 1px solid var(--fog-2); }
.cat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; margin-inline: -12px; padding: 14px 12px; border-radius: var(--r-s); text-decoration: none; transition: background-color .12s; }
.cat-row:hover { background: var(--fog); }
.cat-row .cn { font-size: 1.125rem; font-weight: 700; }
.cat-row .cc { display: block; font-size: .875rem; color: var(--ink-2); }
.cat-row .cu { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / -1; }
.cat-row .cu-more { align-self: center; padding: 0 4px; font-size: .8125rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cat-row .cr { font-size: .9375rem; color: var(--ink-2); text-align: right; white-space: nowrap; }
.cat-row .cr b { display: block; color: var(--ink); font-variant-numeric: tabular-nums; }
.cat-row .cm { display: block; color: var(--ink-2); }
.cat-row .cm b { display: inline; font-size: 1.25rem; font-weight: 800; }
@media (min-width: 800px) { .cat-row { grid-template-columns: minmax(0, 1fr) 250px 150px; } .cat-row .cu { grid-column: auto; } }
.empty { padding: 28px 0; color: var(--ink-2); }
.uni-cards { list-style: none; display: grid; gap: 14px; }
@media (min-width: 760px) { .uni-cards { grid-template-columns: 1fr 1fr; } }
.uni-card { display: grid; align-content: start; gap: 10px; height: 100%; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-l); background: var(--c); color: var(--ink); text-decoration: none; transition: transform .18s var(--ease); }
.uni-card:hover { transform: translateY(-3px); }
.uni-card .uni { justify-content: flex-start; min-width: 0; padding: 0; background: none; font-size: 2.75rem; letter-spacing: -.035em; line-height: 1; }
.uni-card h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.uni-card p { margin: 0; font-size: .9375rem; }
.uni-card .st { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; font-size: .9375rem; }
.uni-card .st b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Fase 2: lo que cuenta la web ahora
   Piezas que no tenía la maqueta de referencia: los estados de la nota
   objetivo, el panel «Tu nota (opcional)», «Salidas de tus carreras», la
   portada y la cuesta en «Carreras». El color sigue siendo solo de las
   universidades: los estados se distinguen por la forma.
   ===================================================================== */

/* ---------- Estados de la nota objetivo ----------
   Ya la tienes: ficha de tinta, porque ya es tuya. Te faltan: contorno y un punto que se llena según lo
   recorrido de 5 a la nota objetivo (--p, de 0 a 100); es una meta, no un aviso. El resto, en gris. */
.tag { gap: 7px; padding: 4px 12px 4px 10px; }
.tag::before { width: 10px; height: 10px; }
.tag.seg { background: var(--ink); color: #fff; }
.tag.seg::before { background: #fff; }
.tag.aju { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tag.aju::before { width: 11px; height: 11px; background: conic-gradient(var(--ink) calc(var(--p, 50) * 1%), transparent 0); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tag.sin, .tag.nd, .tag.ex { padding-left: 12px; background: var(--fog); color: var(--ink-2); }
.tag.sin::before, .tag.nd::before, .tag.ex::before { display: none; }
.best .tag.sin, .best .tag.nd { background: rgba(255, 255, 255, .62); color: rgba(17, 17, 17, .78); }
.best .tag.aju { background: rgba(255, 255, 255, .62); }
/* sobre tinta (panel de la ficha de carrera) se invierten */
.on-ink .tag.seg { background: #fff; color: var(--ink); }
.on-ink .tag.seg::before { background: var(--ink); }
.on-ink .tag.aju { background: none; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.on-ink .tag.aju::before { background: conic-gradient(#fff calc(var(--p, 50) * 1%), transparent 0); box-shadow: inset 0 0 0 1.5px #fff; }
.on-ink .tag.sin, .on-ink .tag.nd { background: rgba(255, 255, 255, .14); color: #C9C8C3; }

/* ---------- Ficha: la nota objetivo es la cifra que manda; su estado va pegado a ella ---------- */
.figs { align-items: flex-end; gap: 10px 36px; margin-top: 14px; }
.figs .goal { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 4px 14px; }
.figs .goal dt { grid-column: 1 / -1; }
.figs .goal dd { font-size: clamp(2.125rem, 4.4vw, 2.75rem); letter-spacing: -.035em; line-height: 1; }
.figs .goal.txt dd { font-size: clamp(1.5rem, 3vw, 1.875rem); letter-spacing: -.02em; }
.figs .goal dd.state { font-size: 1rem; letter-spacing: 0; line-height: 1.2; }
.figs .range dd { font-size: 1.125rem; font-weight: 700; letter-spacing: 0; line-height: 1.5; }
@media (max-width: 479px) { .figs .goal { grid-template-columns: auto; justify-items: start; } }

/* ---------- Escala de 5 a 14: tu nota, la meta y lo que las separa ---------- */
.strip { height: 58px; margin-top: 14px; }
.strip-track { top: 26px; }
.strip-tick { top: 16px; }
.strip-goal { position: absolute; top: 19px; z-index: 1; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--fog-3)) 22%, #fff); }
.strip-gap { position: absolute; top: 24px; height: 6px; background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px) 0 0 / 9px 6px repeat-x; }
.strip-me { top: 4px; height: 40px; }
.strip-axis { top: 40px; }

/* ---------- Panel «Tu nota (opcional)» ----------
   Sin nota es un panel discreto en niebla; con nota pasa a ser una ficha de tinta. Por debajo de 1000 px
   queda plegado en una fila que lo abre y lo cierra: la nota no es lo primero que se ve. */
.whatif.off { background: var(--fog); color: var(--ink); --track: var(--fog-3); --thumb: var(--ink); --halo: rgba(17, 17, 17, .12); --ring-gap: var(--fog); }
.whatif.off .btn-ghost { background: var(--paper); color: var(--ink); }
.whatif.off .btn-ghost:hover { background: var(--fog-2); }
.whatif.off output { color: var(--ink-3); }
.whatif-top label { font-size: 1.0625rem; }
.whatif-top label span { font-weight: 400; }
.whatif-why { margin: 8px 0; max-width: none; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.reach { display: grid; gap: 6px; margin: 14px 0 6px; }
.reach-dots { display: flex; gap: 6px; }
.reach-dots i { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#fff calc(var(--p, 0) * 1%), transparent 0); box-shadow: inset 0 0 0 1.5px #fff; }
.reach p { margin: 0; max-width: none; font-size: .9375rem; }
.reach p b { font-variant-numeric: tabular-nums; }
.whatif .calc { margin: 8px -6px 0; padding: 0 14px 4px; background: rgba(255, 255, 255, .1); }
.whatif.off .calc { background: var(--paper); }
.whatif .calc summary { font-size: .9375rem; }
.whatif .calc .field { max-width: none; background: #fff; color: var(--ink); }
.whatif.off .calc .field { background: var(--fog); }
.whatif .calc .btn { background: #fff; color: var(--ink); }
.whatif.off .calc .btn { background: var(--ink); color: #fff; }
.whatif .calc-note { margin: 10px 0; font-size: .8125rem; color: #C9C8C3; }
.whatif.off .calc-note { color: var(--ink-2); }
.whatif .btn-text { color: inherit; }
.whatif-row { display: none; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 10px 8px 22px; border: 0; border-radius: var(--r-pill); background: var(--fog); color: var(--ink); font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; }
.whatif-row .wr-t { min-width: 0; }
.whatif-row .wr-t > span { font-weight: 400; color: var(--ink-2); }
.whatif-row small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; }
.whatif-row .btn { flex: none; margin-left: auto; background: var(--paper); color: var(--ink); pointer-events: none; }
.whatif-row.on { background: var(--ink); color: #fff; }
.whatif-row.on small { color: #C9C8C3; }
.whatif-row.on .n { margin-left: 4px; font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.whatif-row.on .btn { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 999px) {
  .whatif-row { display: flex; }
  .res-side .whatif { display: none; margin-top: 10px; }
  .res-side.open .whatif { display: block; }
}

/* ---------- Salidas de tus carreras ---------- */
.salidas > p { max-width: 64ch; }
.sal-open { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 20px; border: 0; border-radius: var(--r-m); background: var(--fog); color: var(--ink); font-weight: 700; text-align: left; cursor: pointer; }
.sal-open:hover { background: var(--fog-2); }
.sal-open::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 4px 0 auto; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); transition: transform .18s var(--ease); }
.sal-open[aria-expanded=true]::after { margin-top: 5px; transform: rotate(-135deg); }
.sal-lead { margin: 20px 0 6px; max-width: 60ch; font-size: clamp(1.125rem, 1.7vw, 1.3125rem); line-height: 1.35; }
.sal-lead b { font-weight: 800; }
.sal-sub { margin: 0 0 16px; color: var(--ink-2); }
.sal { width: 100%; border-collapse: collapse; }
.sal th { padding: 8px 12px 8px 0; border-bottom: 1.5px solid var(--fog-3); font-size: .8125rem; font-weight: 600; color: var(--ink-2); text-align: left; }
.sal td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--fog-2); vertical-align: middle; }
.sal .s-pos { width: 44px; }
.sal .s-pos span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fog); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sal .s-name a { font-weight: 700; }
.sal .s-est { display: block; margin-top: 2px; font-size: .75rem; color: var(--ink-2); }
.sal .s-pct { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sal tr.first .s-pos span { background: var(--ink); color: #fff; }
.dots { display: inline-flex; gap: 4px; vertical-align: -1px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--fog-2); }
.dots i.on { background: var(--ink); }
.dots-v { display: inline-block; min-width: 5em; margin-left: 10px; font-size: .9375rem; }
.sal-note { margin: 12px 0 0; font-size: .875rem; color: var(--ink-2); }
@media (max-width: 760px) {
  .sal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sal tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--fog-2); }
  .sal td { padding: 0; border: 0; }
  .sal .s-pos { width: auto; grid-row: span 3; }
  .sal .s-m { grid-column: 2 / -1; display: flex; align-items: center; font-size: .9375rem; }
  .sal .s-m::before { content: attr(data-l); width: 7.2em; color: var(--ink-2); }
}

/* ---------- Cómo leer la nota objetivo ---------- */
.legend { gap: 0; }
.legend li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--fog-2); }
.legend li:first-child { border-top: 1px solid var(--fog-2); }

/* ---------- Portada ----------
   Las piezas son las mismas en todos los tamaños y cambian de sitio:
   móvil (hasta 639 px): titular, entradilla, botón y, debajo, las seis universidades;
   tableta (640 a 999 px): titular muy grande con una raya de tinta debajo, y las universidades;
   PC (desde 1000 px): el texto a la izquierda y la lista de ejemplo a la derecha. */
.solo-pc { display: none; }
@media (min-width: 1000px) { .solo-pc { display: block; } .no-pc { display: none; } }
.home-hero { padding-block: 24px 0; }
.home-hero-grid { display: grid; gap: 36px 72px; }
.home-hero h1 { max-width: 11em; font-size: clamp(2.75rem, 12vw, 3.5rem); line-height: 1; letter-spacing: -.04em; }
/* «contigo» en una ficha de tinta, como el «tu» del logo: lo que es tuyo va en tinta */
.tu-pill { display: inline-block; padding: 0 .22em .07em; border-radius: var(--r-pill); background: var(--ink); color: #fff; line-height: 1.02; }
.eyebrow { margin: 0 0 14px; font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.home-lead { margin: 22px 0 0; max-width: 46ch; font-size: clamp(1.125rem, 1.7vw, 1.3125rem); line-height: 1.45; color: var(--ink-2); }
.home-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin-top: 26px; }
.home-cta .btn { width: 100%; }
.home-cta a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.home-meta { margin: 14px 0 0; font-size: .875rem; color: var(--ink-2); }
@media (min-width: 520px) { .home-cta .btn { width: auto; } }
@media (min-width: 640px) and (max-width: 999px) {
  .home-hero { padding-top: 32px; }
  .home-hero h1 { max-width: none; padding-bottom: 26px; border-bottom: 2px solid var(--ink); font-size: 13vw; line-height: .94; letter-spacing: -.045em; }
}
@media (min-width: 1000px) {
  .home-hero { padding-block: 56px 8px; }
  .home-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .home-hero h1 { font-size: 5.25rem; line-height: .98; }
}

/* Lista de ejemplo (solo en PC): tus carreras tal como las verás, con la primera abierta */
.home-list { margin: 0; }
.home-list figcaption { margin: 10px 4px 0; font-size: .8125rem; color: var(--ink-2); }
.home-list-box { padding: 12px; border-radius: var(--r-l); background: var(--fog); }
.home-list-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 4px 6px 12px; max-width: none; font-size: .9375rem; }
.home-list-h span { color: var(--ink-2); }
.home-card { padding: 16px; border-radius: var(--r-m); background: var(--paper); }
.home-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.home-card .rank { width: 36px; height: 36px; font-size: 1.125rem; }
.home-card-name b { display: block; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.home-card-name small { display: block; margin-top: 4px; font-size: .875rem; color: var(--ink-2); }
.home-card .pct b { font-size: 1.75rem; }
.home-card .best { margin-top: 14px; padding: 14px 16px 16px; }
.home-card .figs { margin-top: 10px; gap: 8px 32px; }
.home-card .figs .goal dd { font-size: 2.25rem; }
.home-list-rest { list-style: none; margin-top: 4px; }
.home-list-rest li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--fog-2); }
.home-list-rest .rank { width: 28px; height: 28px; background: var(--paper); color: var(--ink); font-size: .875rem; }
.hl-name > b { display: block; font-weight: 700; line-height: 1.2; }
.hl-name small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; font-size: .8125rem; color: var(--ink-2); }
.hl-name small b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hl-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.home-list-more { margin: 12px 6px 4px; font-size: .875rem; color: var(--ink-2); }

/* Las seis universidades (móvil y tableta) */
.home-unis { padding-top: clamp(32px, 5vw, 56px); }
.home-unis h2 { font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.35; color: var(--ink-2); }
.home-unis ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.home-unis a { display: grid; align-content: start; gap: 2px; height: 100%; padding: 12px 14px 14px; border-radius: var(--r-m); background: var(--fog); text-decoration: none; transition: background-color .12s; }
.home-unis a:hover { background: var(--fog-2); }
.home-unis-more { margin: 12px 0 0; font-size: .9375rem; font-weight: 700; }
.home-unis b { justify-self: start; margin-bottom: 8px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c); font-size: .875rem; font-weight: 800; }
.home-unis span { font-size: .9375rem; font-weight: 700; line-height: 1.2; }
.home-unis small { font-size: .8125rem; color: var(--ink-2); }
@media (min-width: 640px) { .home-unis ul { grid-template-columns: repeat(3, 1fr); } }

/* Secciones de la portada */
.home-sec h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.home-sec-lead { margin: 12px 0 0; max-width: 40ch; font-size: 1.0625rem; color: var(--ink-2); }
.home-split { display: grid; gap: 28px 72px; align-items: start; }
@media (min-width: 1000px) { .home-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
/* Cómo funciona: pasos separados por rayas; en PC, tres columnas bajo una raya de tinta */
.pasos { list-style: none; margin-top: 22px; border-top: 1px solid var(--fog-2); }
.pasos li { padding: 20px 0 22px; border-bottom: 1px solid var(--fog-2); }
.paso-n { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.pasos h3 { font-size: 1.375rem; }
.pasos p { margin: 8px 0 0; color: var(--ink-2); }
@media (min-width: 860px) {
  .pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 32px; border-top: 0; }
  .pasos li { padding: 18px 0 0; border-top: 2px solid var(--ink); border-bottom: 0; }
}
/* Qué verás de cada carrera */
.defs { margin: 20px 0 0; border-top: 1px solid var(--fog-3); }
.defs div { padding: 14px 0; border-bottom: 1px solid var(--fog-3); }
.defs dt { font-weight: 800; }
.defs dd { margin: 4px 0 0; max-width: 60ch; color: var(--ink-2); }
.explora { margin-top: 26px; }
/* Antes de fiarte: desplegables, para que en el móvil no sea un muro de texto */
.faq { border-top: 1px solid var(--fog-3); }
.faq details { border-bottom: 1px solid var(--fog-3); }
.faq summary { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 4px 0 auto; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); transition: transform .18s var(--ease); }
.faq details[open] summary::after { margin-top: 5px; transform: rotate(-135deg); }
.faq p { margin: 0 0 18px; max-width: 60ch; color: var(--ink-2); }
/* Cierre: en papel, bajo una raya de tinta; el pie ya es el bloque negro */
.cierre { display: grid; gap: 22px 40px; padding-top: 22px; border-top: 2px solid var(--ink); }
.cierre h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.cierre p { margin: 10px 0 0; max-width: 50ch; color: var(--ink-2); }
.cierre .btn { width: 100%; }
@media (min-width: 520px) { .cierre .btn { justify-self: start; width: auto; } }
@media (min-width: 760px) { .cierre { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.home-sec:last-child { padding-bottom: 0; }

/* ---------- La cuesta, en «Carreras» ----------
   La de la portada anterior, con su tablón de tinta; aquí es un dato de referencia del catálogo. */
.cuesta-sec { margin-bottom: clamp(28px, 4vw, 44px); }
.cuesta-sec h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.cuesta-sec > p { margin: 8px 0 0; color: var(--ink-2); }
.tablon-top .cuesta-dato { opacity: 1; font-size: clamp(1.0625rem, 2vw, 1.375rem); font-weight: 700; }
.tablon .hero-grade { background: #fff; color: var(--ink); }
.tablon-note { margin: 10px 0 0; max-width: 74ch; font-size: .8125rem; line-height: 1.45; color: #A9A8A3; }

/* ---------- Ventana de privacidad (consent.js) ----------
   No bloquea la página: se puede seguir usando sin contestar. Móvil: franja abajo, de lado a lado;
   tableta y PC (desde 640 px): tarjeta en la esquina inferior izquierda. Es una elección de quien
   visita la web, así que va en tinta. Mientras está abierta, el pie se alarga lo que mide (--consent-h),
   para que al final de la página la ventana quede sobre tinta y no tape nada. */
.site-foot { padding-bottom: var(--consent-h, 0px); }
#main:focus { outline: none; }
.consent { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 18px var(--gut) max(18px, env(safe-area-inset-bottom)); border-radius: var(--r-l) var(--r-l) 0 0; background: var(--ink); color: #C9C8C3; font-size: .9375rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 -12px 40px rgba(17, 17, 17, .22); animation: consent-in .3s var(--ease); }
.consent-t { margin-bottom: 6px; font-size: 1.125rem; letter-spacing: -.01em; color: #fff; }
.consent p { margin: 0; max-width: 62ch; line-height: 1.45; }
.consent a { color: #fff; font-weight: 700; }
.consent :focus-visible { outline-color: #fff; }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@keyframes consent-in { from { transform: translateY(18px); opacity: 0; } }
@media (min-width: 640px) {
  /* la tarjeta flota 20 px por encima del borde: sin ventana, -20 + 20 = 0 */
  .site-foot { padding-bottom: calc(var(--consent-h, -20px) + 20px); }
  .consent { left: 20px; right: auto; bottom: 20px; width: min(440px, calc(100% - 40px)); padding: 20px 22px 22px; border-radius: var(--r-l); }
}

/* ---------- Páginas legales ----------
   Una columna de lectura. Las cuatro páginas, en píldoras encima del texto; en PC, en una columna
   a la izquierda que acompaña al bajar. */
.legal-grid { display: grid; gap: 8px 64px; align-items: start; }
.legal-date { margin: 14px 0 0; font-size: .875rem; color: var(--ink-2); }
.legal-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--fog); font-size: .9375rem; font-weight: 600; text-decoration: none; transition: background-color .12s; }
.legal-nav a:hover { background: var(--fog-2); }
.legal-nav a[aria-current=page], .legal-nav a[aria-current=page]:hover { background: var(--ink); color: #fff; }
.legal .legal-body { min-width: 0; max-width: 72ch; padding-top: 18px; }
.legal-body > section { margin-top: 40px; }
.legal-body > section:first-child { margin-top: 0; }
.legal-body h2 { margin-bottom: 12px; font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.legal-body h3 { margin: 22px 0 8px; font-size: 1.125rem; }
.legal-body ul:not([class]), .legal-body ol { margin: 0 0 1em; padding-left: 1.3em; }
.legal-body ul:not([class]) li, .legal-body ol li { margin-bottom: 6px; padding-left: 2px; }
.legal-body a { overflow-wrap: anywhere; }
.legal-body .panel { margin: 0 0 8px; }
.legal-body .panel h2 { margin-bottom: 8px; font-size: 1.25rem; letter-spacing: -.01em; }
.legal-body .panel ul { margin-bottom: 0; }
.legal-body code { padding: 1px 6px; border-radius: 6px; background: var(--fog-2); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .875em; overflow-wrap: anywhere; }
/* Datos en filas (titular, lo que se guarda en el navegador): etiqueta y valor; en móvil, uno debajo de otro */
.ldata { display: grid; margin: 0 0 1em; border-top: 1px solid var(--fog-2); }
.ldata div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--fog-2); }
.ldata dt { color: var(--ink-2); }
.ldata dd { margin: 0; }
.store { list-style: none; display: grid; gap: 12px; margin: 0 0 1em; }
.store > li { padding: 16px 18px 6px; border-radius: var(--r-m); background: var(--fog); }
.store h3 { margin: 0 0 8px; font-size: 1.0625rem; letter-spacing: 0; }
.store .ldata { border-top: 0; font-size: .9375rem; }
.store .ldata div { border-color: var(--fog-3); }
.store .ldata div:last-child { border-bottom: 0; }
@media (max-width: 519px) { .ldata div { grid-template-columns: minmax(0, 1fr); } .ldata dt { font-size: .875rem; } }
/* El interruptor de cookies.html: el botón de lo elegido va en tinta */
.consent-panel .consent-btns { max-width: 380px; }
.consent-panel [aria-pressed=true], .consent-panel [aria-pressed=true]:hover { background: var(--ink); color: #fff; }
@media (min-width: 1000px) {
  .legal-grid { grid-template-columns: 210px minmax(0, 1fr); }
  .legal-nav { position: sticky; top: 20px; padding-top: 18px; }
  .legal-nav ul { flex-direction: column; gap: 2px; }
  .legal-nav a { display: flex; border-radius: var(--r-s); background: none; }
  .legal-nav a:hover { background: var(--fog); }
}

/* =====================================================================
   Universidades privadas: sin color, en blanco con borde de tinta
   ===================================================================== */
.uni.priv { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
a.uni.priv:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 2px var(--ink); }
.best.priv { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.uni-card.priv { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.uni-card .uni.priv { box-shadow: none; }
.uni-band.priv { background: #fff; border-bottom: 1.5px solid var(--ink); }
.uni-band .uni.priv { background: var(--ink); color: #fff; box-shadow: none; }
/* Pestañas de «Universidades»: públicas y privadas. En el móvil, media anchura cada una */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 420px; margin-bottom: 22px; padding: 5px; border-radius: var(--r-pill); background: var(--fog); }
.tabs [role=tab] { min-height: 44px; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .12s; }
.tabs [role=tab]:hover { background: var(--fog-2); }
.tabs [role=tab] span { font-weight: 400; color: var(--ink-2); }
.tabs [role=tab][aria-selected=true] { background: var(--ink); color: #fff; }
.tabs [role=tab][aria-selected=true] span { color: rgba(255, 255, 255, .78); }
@media (max-width: 639px) { .tabs { max-width: none; } }