:root{
  --ink:#10242E; --teal:#0B6E6E; --teal-d:#084F50; --pencil:#F2C230;
  --bg:#F5F8FA; --alt:#E6EEF2; --white:#fff; --line:#CBD8DF;
  --head:"Bricolage Grotesque","Bricolage respaldo",system-ui,sans-serif;   /* respaldo calibrado: ver «Tipografía de títulos» al final */
  --body:"Public Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:76px}
body{font:400 1.0625rem/1.6 var(--body);color:var(--ink);background:var(--bg)}
h1,h2,h3,.logo{font-family:var(--head);line-height:1.1}
h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;margin-bottom:1.75rem;max-width:14.74em}
h3{font-size:1.15rem;font-weight:600;margin-bottom:.4rem}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--pencil);outline-offset:2px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.narrow{max-width:760px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:99}

/* Botones */
.btn{display:inline-block;padding:.8rem 1.4rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;transition:background .2s,color .2s}
.btn-main{background:var(--pencil);color:var(--ink)}.btn-main:hover{background:#ffd54f}
.btn-ghost{border-color:var(--ink);color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{border-color:#fff;color:#fff}.btn-light:hover{background:#fff;color:var(--teal-d)}

/* Header */
.header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.logo{font-size:1.4rem;font-weight:800;text-decoration:none;color:var(--ink)}.logo span{color:var(--teal)}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a:not(.btn){text-decoration:none;color:var(--ink);font-weight:500}
.nav a:not(.btn):hover{color:var(--teal)}
.nav .btn{padding:.55rem 1.1rem}
.menu-btn{display:none;background:none;border:2px solid var(--ink);border-radius:8px;padding:.4rem .8rem;font:inherit;font-weight:600;cursor:pointer}

/* Hero */
.hero{padding:clamp(2.5rem,7vw,5.5rem) 0}
.hero-in{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center}
.lead{font-size:1.2rem;margin:1.25rem 0 1.75rem;max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}
.ficha{background:var(--white);border:2px solid var(--ink);border-radius:18px;padding:1.5rem;box-shadow:8px 8px 0 var(--teal)}
.ficha-t{font:800 1.2rem var(--head);margin-bottom:.6rem}
.ficha small{display:block;margin-top:.9rem;color:#4d6470}
/* Hero (paso A): fondo suave, etiqueta, botón principal, atajos reales */
.hero{background:radial-gradient(48rem 24rem at 90% -5%,rgba(11,110,110,.14),transparent 65%),radial-gradient(34rem 18rem at 0% 105%,rgba(242,194,48,.2),transparent 65%)}
.eyebrow{display:inline-block;margin-bottom:1rem;padding:.3rem .8rem;border-radius:999px;background:rgba(11,110,110,.12);color:var(--teal-d);font-weight:600;font-size:.9rem}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:13.4em}
.hero .lead{max-width:44ch}
.hero .actions{align-items:center;gap:1.4rem}
.btn-lg{padding:1rem 1.9rem;font-size:1.1rem}
.link-sec{font-weight:600;color:var(--teal-d);text-underline-offset:4px}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:1.6rem}
.chips li{padding:.3rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:.9rem}
.chips li::before{content:"\2713\00a0";color:var(--teal);font-weight:800}
.try{list-style:none;padding:0;margin:0}
.try li+li{border-top:1px dashed var(--line)}
.try a{display:block;position:relative;padding:.8rem 2rem .8rem .3rem;text-decoration:none;color:var(--ink);border-radius:8px}
.try a::after{content:"\2192";position:absolute;right:.5rem;top:50%;transform:translateY(-50%);color:var(--teal);font-weight:800;transition:transform .2s}
.try a:hover{background:var(--alt)}
.try a:hover::after{transform:translateY(-50%) translateX(3px)}
.try b{display:block}
.try span{display:block;font-size:.92rem;color:#33505e}
@media (max-width:720px){.hero .link-sec{flex:1 1 100%;text-align:center}}
@media (max-width:400px){.hero{padding-top:1.5rem}.hero h1{font-size:2rem}.hero .lead{font-size:1.05rem;margin:1rem 0 1.4rem}}

/* Secciones */
.sec{padding:clamp(3rem,7vw,5rem) 0}.alt{background:var(--alt)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.grid4 article{border-top:4px solid var(--teal);padding-top:1rem}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;counter-reset:s;margin-bottom:2rem}
.steps li{counter-increment:s;background:var(--white);border-radius:14px;padding:1.25rem}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ink);color:#fff;font:700 1rem var(--head);margin-bottom:.8rem}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:1rem 0}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
#preguntas details p{margin-top:.6rem;color:#33505e}

/* CTA y footer */
.cta{background:var(--teal-d);color:#fff;padding:clamp(3rem,7vw,4.5rem) 0}
.cta h2{color:#fff;margin-bottom:1.5rem}.cta .btn{margin:0 .6rem .6rem 0}
.footer{background:var(--ink);color:#d5e1e7;padding-top:3rem}
.footer .logo{color:#fff}.footer .logo span{color:var(--pencil)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.footer h3{color:#fff;font-size:1rem}
.footer a:not(.logo){display:block;color:#d5e1e7;text-decoration:none;margin:.3rem 0}
.footer a:hover{color:var(--pencil)}
.copy{text-align:center;padding:2rem 1rem;font-size:.9rem;opacity:.8}
.stub{padding:5rem 0}.stub .lead{margin-inline:0}

/* Móvil y tablet */
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .grid4,.steps{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:.6rem;background:var(--bg);padding:1rem 1.25rem 1.5rem;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{text-align:center;padding:.4rem}
  .grid4,.steps,.foot-in{grid-template-columns:1fr}
  .actions .btn{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Etapa 2: banner, simulador, formulario ===== */
.demo-banner{background:var(--ink);color:#fff;text-align:center;font-size:.9rem;padding:.45rem 1rem}
.calc{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;background:var(--white);border:2px solid var(--ink);border-radius:18px;padding:1.75rem}
.calc label{display:flex;justify-content:space-between;gap:1rem;font-weight:600;margin:1.1rem 0 .4rem}
.calc label:first-child{margin-top:0}

.calc-note{margin-top:1rem;font-size:.92rem;color:#33505e}
.calc-out{background:var(--alt);border-radius:14px;padding:1.4rem;align-self:start}
.calc-out strong{display:block;font:800 clamp(1.8rem,5vw,2.6rem) var(--head);color:var(--teal-d);margin:.2rem 0 1rem}
.calc-out dl{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;margin:0}
.calc-out dd{margin:0;font-weight:600;text-align:right}
.disclaimer{margin-top:1.1rem;font-size:.92rem;color:#33505e;border-left:4px solid var(--pencil);padding-left:.8rem;max-width:80ch}
.calc-cta{margin-top:1.25rem}
.notice{background:#FFF6D6;border:2px solid var(--pencil);border-radius:12px;padding:.9rem 1rem;margin:1.25rem 0}
.form{background:var(--white);border:2px solid var(--ink);border-radius:18px;padding:1.75rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;margin-bottom:.35rem}
.field input:not([type=checkbox]),.field select{width:100%;padding:.7rem .8rem;border:2px solid var(--line);border-radius:10px;font:inherit;background:var(--white);color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--teal)}
.field [aria-invalid=true]{border-color:#B3261E}
.err{display:block;color:#B3261E;font-size:.9rem}
.field.check label{display:flex;gap:.6rem;font-weight:400}
.field.check input{margin-top:.35rem;accent-color:var(--teal)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.form-actions .btn{cursor:pointer;font:inherit;font-weight:600}
.resultado{background:var(--white);border:2px solid var(--teal);border-radius:18px;padding:1.75rem}
.resultado[hidden],.form[hidden]{display:none}
.resultado strong{display:block;font:800 2.2rem var(--head);color:var(--teal-d);margin:.3rem 0}
.legal h2{font-size:1.3rem;margin:1.8rem 0 .5rem;max-width:none}
@media (max-width:900px){
  .calc,.row2{grid-template-columns:1fr}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:.6rem;background:var(--bg);padding:1rem 1.25rem 1.5rem;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{text-align:center;padding:.4rem}
}
.btn-ghost{background:transparent}
.field input[type=checkbox]{width:1.2rem;height:1.2rem;flex:none}

/* ===== Controles deslizantes fáciles de usar (también con el dedo) ===== */
input[type=range]{--p:50%;-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;touch-action:pan-y;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:10px;background:linear-gradient(to right,var(--teal) var(--p),var(--line) var(--p))}
input[type=range]::-moz-range-track{height:10px;border-radius:10px;background:var(--line)}
input[type=range]::-moz-range-progress{height:10px;border-radius:10px;background:var(--teal)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-11px;border-radius:50%;background:var(--pencil);border:3px solid var(--ink)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--pencil);border:3px solid var(--ink)}
@media (max-width:900px){.nav{max-height:calc(100vh - 68px);overflow-y:auto}}

/* ===== Comparador de plazos ===== */
.comparador{margin-top:1.75rem}
.comparador h3{font-size:1.2rem;margin-bottom:.6rem}
.comp-scroll{overflow-x:auto;border:2px solid var(--ink);border-radius:14px;background:var(--white)}
.comp-table{width:100%;border-collapse:collapse}
.comp-table caption{caption-side:top;text-align:left;padding:.75rem 1rem;font-size:.92rem;color:#33505e}
.comp-table th,.comp-table td{padding:.75rem 1rem;border-top:1px solid var(--line)}
.comp-table thead th{background:var(--alt);font-size:.9rem;text-align:left}
.comp-table thead th:not(:first-child){text-align:right}
.comp-table tbody th{text-align:left;font-weight:600}
.comp-table td{text-align:right;font-variant-numeric:tabular-nums}
.comp-table tr.sel>*{background:#FFF6D6}
.comp-table tr.sel>th{border-left:4px solid var(--teal)}
.comp-tag{display:block;font-size:.78rem;font-weight:600;color:var(--teal-d)}
.comp-note{margin-top:.6rem;font-size:.92rem;color:#33505e}
@media (max-width:480px){.comp-table th,.comp-table td{padding:.65rem .6rem;font-size:.95rem}}
@media (max-width:360px){.comp-table th,.comp-table td{padding:.6rem .4rem;font-size:.86rem}.comp-table caption{padding:.6rem}}
@media (max-width:340px){.comp-table th,.comp-table td{padding-inline:.3rem;font-size:.8rem}}
@media (min-width:361px){.comp-table tbody th{white-space:nowrap}}
@media (min-width:361px) and (max-width:420px){.comp-table th,.comp-table td{padding-inline:.4rem;font-size:.9rem}}

/* ===== Explorador de opciones (datos de demostración) ===== */
.tag-demo{display:inline-block;padding:.2rem .65rem;border-radius:999px;background:#FFF6D6;border:1px solid var(--pencil);color:var(--ink);font-size:.8rem;font-weight:600}
.explorador{margin-top:1.25rem}
.explorador small{display:block;margin-top:.35rem;color:#33505e;font-size:.92rem}
.explorador .err{color:#B3261E}
#exResultados .notice{margin:1.25rem 0 0}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.25rem;margin-top:1.5rem}
.opcion{background:var(--white);border:2px solid var(--ink);border-radius:18px;padding:1.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.opcion h3{margin:0}
.opcion .meta{font-size:.92rem;color:#33505e}
.opcion .comp-scroll{align-self:stretch}
@media (min-width:481px){.opcion .comp-table th,.opcion .comp-table td{padding:.65rem .6rem}}
@media (max-width:480px){.opcion{padding:.9rem}}
.opcion .notice{margin:0}
@media (min-width:361px) and (max-width:420px){.opcion .comp-table th,.opcion .comp-table td{font-size:.85rem}}
@media (max-width:360px){.opcion .comp-table th,.opcion .comp-table td{font-size:.82rem}}
@media (max-width:340px){.opcion .comp-table th,.opcion .comp-table td{font-size:.78rem}}

/* ===== Coherencia: simulador libre plegable ===== */
.libre{margin-top:1.25rem}
.libre>summary{font-size:1.05rem}
.libre[open]>summary{margin-bottom:1.25rem}

/* ===== Rediseño visual: fintech educativa (superficies suaves, jerarquía, tarjetas) ===== */
:root{--shadow:0 1px 2px rgba(16,36,46,.06),0 14px 34px rgba(16,36,46,.09);--shadow-sm:0 1px 2px rgba(16,36,46,.05),0 6px 16px rgba(16,36,46,.06);--radius:20px;--teal-l:#E3F1F0}
body{font-size:1.05rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.015em;max-width:16.08em}
.sec h2{margin-bottom:2rem}
.sec h2::after{content:"";display:block;width:48px;height:5px;border-radius:5px;background:var(--pencil);margin-top:.8rem}
.sec{padding:clamp(3.5rem,8vw,6rem) 0}
.alt{background:linear-gradient(180deg,#EAF1F4,#E2EBEF)}
/* encabezado y botones */
.header{background:rgba(245,248,250,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(203,216,223,.7)}
.logo{letter-spacing:-.02em}
.nav a:not(.btn){padding:.35rem .1rem;border-bottom:2px solid transparent}
.nav a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--pencil)}
.btn{transition:background .2s,color .2s,transform .15s,box-shadow .2s}
.btn-main{box-shadow:0 6px 16px rgba(242,194,48,.35)}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(242,194,48,.45)}
.btn-ghost{border-width:1.5px}
/* hero */
.hero{padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4.5rem);background:radial-gradient(40rem 22rem at 88% 0%,rgba(11,110,110,.13),transparent 70%),radial-gradient(28rem 16rem at 4% 0%,rgba(242,194,48,.16),transparent 70%)}
.hero h1{letter-spacing:-.03em}
.ficha{border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem}
.try a{padding:.9rem 2rem .9rem .5rem}
.try a:hover{background:var(--teal-l)}
.chips li{border-color:transparent;box-shadow:var(--shadow-sm)}
/* explorador: protagonista de la página */
#explorar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.form,.resultado,.calc{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.explorador{padding:clamp(1.25rem,3vw,2rem);background:linear-gradient(180deg,#fff,#F6FAFB)}
.field label{font-size:.95rem}
.field label .n{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;margin-right:.6rem;border-radius:50%;background:var(--teal);color:#fff;font:700 .85rem var(--head)}
.field input:not([type=checkbox]),.field select{min-height:3rem;border-width:1.5px;border-radius:12px;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(11,110,110,.15)}
.field input:disabled,.field select:disabled{background:#F1F5F7;color:#7a8f99;cursor:not-allowed}
.form-actions .btn-main{min-height:3rem}
/* tarjetas de alternativas y tablas */
.opcion{border:1px solid var(--line);border-top:5px solid var(--teal);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;animation:aparece .35s ease both}
.opcion:nth-child(2){border-top-color:var(--pencil)}
.opcion:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.opcion h3{font-size:1.35rem}
.opcion .meta{line-height:1.5}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.comp-scroll{border:1px solid var(--line);border-radius:14px}
.comp-table thead th{background:var(--teal-l);color:var(--teal-d)}
.comp-table td{font-weight:500}
.comp-table tbody tr:nth-child(even) td,.comp-table tbody tr:nth-child(even) th{background:#F8FBFC}
.comp-table tbody tr.sel td,.comp-table tbody tr.sel th{background:#FFF6D6}
.disclaimer{background:#FFFBEA;border-radius:0 12px 12px 0;padding:.9rem 1rem;max-width:none}
.notice{border-width:1px;border-radius:14px}
/* beneficios, pasos, preguntas, simulador libre */
.grid4 article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)}
.ico{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:1rem;border-radius:14px;background:var(--teal-l)}
.ico svg{width:1.5rem;height:1.5rem;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps li{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)}
.steps li::before{width:2.6rem;height:2.6rem;margin-bottom:1rem;font-size:1.1rem;background:linear-gradient(135deg,var(--teal),var(--teal-d))}
#preguntas details,.libre{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.25rem;box-shadow:var(--shadow-sm)}
#preguntas details{margin-bottom:.75rem}
#preguntas details[open],.libre[open]{border-color:var(--teal)}
.calc-out{background:var(--teal-l)}
/* llamado final y páginas internas */
.cta{background:radial-gradient(30rem 16rem at 90% 0,rgba(242,194,48,.25),transparent 70%),linear-gradient(135deg,var(--teal-d),#0B5F60)}
.cta h2{font-size:clamp(1.8rem,4vw,2.8rem);max-width:14.74em}
.footer{padding-top:3.5rem}
.stub{padding:clamp(2.5rem,6vw,4rem) 0 4rem}
.stub h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1rem}
.resultado{border-top:5px solid var(--teal)}
@media (max-width:480px){.opcion{padding:.9rem}.sec{padding:3rem 0}.libre{padding:1rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.opcion{animation:none}.btn-main:hover,.opcion:hover{transform:none}}

/* Explorador: línea resumen de la selección */
.sel-resumen{margin:1.5rem 0 0;font-weight:600}
#exResultados .sel-resumen+.opciones{margin-top:.75rem}

/* Explorador: detalles ampliados de una alternativa */
.opcion .btn,.detalle .btn{cursor:pointer;font:inherit;font-weight:600;padding:.55rem 1.1rem;background:transparent}
#exResultados [hidden]{display:none}
.detalle{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;margin-top:1.5rem;padding:clamp(1.1rem,3vw,1.75rem);background:var(--white);border:1px solid var(--line);border-top:5px solid var(--teal);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.detalle:focus{outline:none}
.detalle h3{margin:0;font-size:1.4rem}
.det-lista{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:.6rem 1.25rem;width:100%;margin:0}
.det-lista dt{color:#33505e;font-size:.95rem}
.det-lista dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.det-lista dd.nd{font-weight:400;font-style:italic;color:#4d6470}
.detalle .disclaimer{margin-top:.4rem}
@media (max-width:560px){.det-lista{grid-template-columns:minmax(0,1fr);gap:.1rem}.det-lista dd{margin-bottom:.7rem}}

/* Comparación: etiqueta de menor total y diferencia frente a la más económica */
.tag-mejor{display:inline-block;padding:.2rem .65rem;border-radius:999px;background:var(--teal-l);border:1px solid var(--teal);color:var(--teal-d);font-size:.8rem;font-weight:600}
.opcion .dif{margin:0;font-size:.92rem;font-weight:600;color:#33505e}

/* Explorador: panel de disponibilidad por universidad */
.disp:empty{display:none}
.disp{margin:.25rem 0 1.25rem}
.disp-t{margin:.6rem 0 .2rem;font-weight:600}
.disp-lista{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.6rem}
.disp-lista li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.75rem .95rem;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.disp-lista li.sel{border-color:var(--teal);background:var(--teal-l)}
.disp-lista li.sin{background:#F6FAFB;color:#4d6470}
.disp-lista .d{font-size:.92rem;color:#33505e;overflow-wrap:anywhere}
.disp-lista .btn{cursor:pointer;font:inherit;font-weight:600;padding:.4rem .95rem;background:transparent}

/* Detalles: continuación hacia el proveedor (solo si hay enlace válido en los datos) */
.det-lista .nota-ext{display:block;margin-top:.3rem;font-weight:400;font-size:.9rem;color:#33505e}

/* ===== Pulido final ===== */
/* Contenido angosto alineado con la cuadrícula (logo, títulos y pie), en lugar de centrado */
.narrow{margin-inline:max(1.25rem,calc((100% - 1120px)/2)) auto}
/* Tarjetas de alternativas: las etiquetas comparten fila y así las tablas quedan alineadas entre tarjetas */
.opcion{flex-direction:row;flex-wrap:wrap;align-items:flex-start;align-content:flex-start}
.opcion>*{flex:0 0 100%}
.opcion>.tag-demo,.opcion>.tag-mejor,.opcion>.btn{flex:0 0 auto}
/* Panel de disponibilidad: el texto ocupa el espacio y el botón «Elegir» queda a la derecha */
.disp-lista li>div{flex:1 1 18rem;min-width:0}
/* Celular: menos relleno en los recuadros anidados para dar ancho al texto */
@media (max-width:480px){.explorador{padding:1rem .85rem}.disp-lista li{padding:.65rem .75rem}}
/* Tarjetas lado a lado solo si caben sus dos etiquetas en una fila (si no, se apilan) */
.opciones{grid-template-columns:repeat(auto-fit,minmax(min(100%,500px),1fr))}

/* Elementos comunes (layout.js): página activa y menú básico cuando JavaScript no carga */
.nav a[aria-current="page"]:not(.btn){color:var(--ink);border-bottom-color:var(--pencil);font-weight:600}
.footer a[aria-current="page"]:not(.logo){color:var(--pencil)}
.nav-basica{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;padding:.8rem 1.25rem;background:var(--bg);border-bottom:1px solid var(--line)}

/* Páginas propias (explorar, simulador, preguntas): el título principal (h1) conserva el aspecto del título de sección */
.sec h1.titulo{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.015em;max-width:16.08em;margin-bottom:2rem}
.sec h1.titulo::after{content:"";display:block;width:48px;height:5px;border-radius:5px;background:var(--pencil);margin-top:.8rem}

/* ===== Directorio de instituciones (instituciones.html y resumen del inicio) ===== */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.inst-intro{max-width:62ch;margin:0 0 1.75rem}
.inst-intro .tag-demo{margin-right:.35rem}
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:start;gap:1.25rem}
.inst-card{position:relative;display:flex;flex-direction:column;gap:.85rem;min-width:0;padding:1.1rem 1.1rem 1.2rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.inst-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.inst-card.abierta{border-color:var(--teal)}
.inst-tags .tag-demo{font-size:.72rem;letter-spacing:.02em;text-transform:uppercase}
/* Recuadro del monograma (en lugar de un logo) */
.inst-media{display:grid;place-items:center;aspect-ratio:16/9;border-radius:16px;background:radial-gradient(14rem 8rem at 80% 0,rgba(11,110,110,.10),transparent 70%),linear-gradient(180deg,#F4F8FA,#EAF1F4)}
.monograma{display:grid;place-items:center;min-width:4.6rem;height:4.6rem;padding:0 .9rem;border-radius:22px;font:800 1.7rem/1 var(--head);letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--teal),var(--teal-d));box-shadow:0 10px 24px rgba(8,79,80,.22)}
.monograma.t1{background:linear-gradient(135deg,#F7D35B,var(--pencil));color:var(--ink);box-shadow:0 10px 24px rgba(242,194,48,.3)}
.monograma.t2{background:linear-gradient(135deg,#21414F,var(--ink));box-shadow:0 10px 24px rgba(16,36,46,.22)}
.monograma.t3{background:#fff;color:var(--teal-d);border:2px solid var(--teal);box-shadow:0 10px 24px rgba(11,110,110,.14)}
.inst-nombre{margin:.15rem 0 0;font-size:1.12rem;line-height:1.3;overflow-wrap:anywhere}
.inst-meta{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.9rem;color:#33505e}
.inst-meta li{display:flex;align-items:flex-start;gap:.5rem;min-width:0}
.inst-meta li>span{min-width:0;overflow-wrap:anywhere}
.inst-meta svg{flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.2rem;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inst-meta li.nd{font-style:italic;color:#5b717c}
.inst-meta li.nd svg{stroke:#8aa0aa}
.inst-fict{font-size:.82rem;color:#5b717c}
/* Acciones: «Ver detalles» a la izquierda y «Explorar financiación» a la derecha, siempre al pie de la tarjeta */
.inst-acciones{margin-top:auto;padding-top:.35rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem .75rem}
.inst-ver{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem 0;background:none;border:0;font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer}
.inst-ver::after{content:"→"/"";transition:transform .2s}
.inst-ver:hover::after{transform:translateX(3px)}
.inst-ver[aria-expanded="true"]::after{content:"↑"/""}
.inst-ver:hover{color:var(--teal-d)}
.inst-ver:focus-visible,.inst-prog-link:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.inst-ir{padding:.6rem 1.05rem;font-size:.92rem;line-height:1.25;text-align:center}
/* Detalles desplegados dentro de la tarjeta */
.inst-det{border-top:1px solid var(--line);padding-top:.85rem}
.inst-det[hidden]{display:none}
.inst-det-t{margin:0 0 .5rem;font-weight:600;font-size:.92rem}
.inst-progs{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.inst-progs li{display:flex;align-items:center;justify-content:space-between;gap:.5rem .75rem;padding:.6rem .75rem;border:1px solid var(--line);border-radius:12px;background:#FBFDFD}
.inst-progs li.sin{background:#F6FAFB;color:#4d6470}
.inst-progs li>div{display:grid;min-width:0}
.inst-progs strong{font-size:.93rem;line-height:1.35}
.inst-progs .d{font-size:.84rem;color:#4d6470}
.inst-prog-link{flex:0 0 auto;font-size:.88rem;font-weight:600;color:var(--teal-d)}
/* Resumen en el inicio */
.inst-todas{margin:1.5rem 0 0}
@media (max-width:560px){
  .inst-media{aspect-ratio:auto;height:7.5rem}
  .monograma{min-width:4rem;height:4rem;font-size:1.45rem;border-radius:18px}
}
@media (max-width:360px){
  .inst-card{padding:.95rem}
  .inst-acciones{flex-direction:column;align-items:stretch}
  .inst-acciones .inst-ver{justify-content:center}
  .inst-progs li{flex-direction:column;align-items:flex-start;gap:.3rem}
}
@media (prefers-reduced-motion:reduce){.inst-card:hover{transform:none}.inst-ver::after{transition:none}}

/* ===== Proveedor y estado de verificación (etapa 5) ===== */
/* Insignia de estado: ficticio (neutro), pendiente (amarillo), parcial y verificado (verde azulado). */
.estado-dato{display:inline-flex;align-items:center;padding:.15rem .6rem;border-radius:999px;border:1px solid var(--line);background:#F1F5F7;color:#33505e;font-size:.78rem;font-weight:600;line-height:1.45}
.estado-dato.e-pendiente{background:#FFF6D6;border-color:var(--pencil);color:var(--ink)}
.estado-dato.e-parcial{background:var(--teal-l);border-color:#8CC3C1;color:var(--teal-d)}
.estado-dato.e-verificado{background:var(--teal-l);border-color:var(--teal);color:var(--teal-d)}
/* Tarjeta de resultados: proveedor e insignia en una línea (se parte en dos si no cabe) */
.opcion .cond{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .65rem;margin:0;font-size:.92rem;color:#33505e}
.opcion .cond-prov{overflow-wrap:anywhere}
/* Detalles: marca de cada dato cuando sus datos no son ficticios */
.marca{display:inline-block;margin-left:.1rem;padding:.05rem .5rem;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.45;vertical-align:.06em}
.marca.si{background:var(--teal-l);border:1px solid var(--teal);color:var(--teal-d)}
.marca.no{background:#FFF6D6;border:1px solid var(--pencil);color:var(--ink)}
/* Directorio: etiqueta de datos ficticios e insignia de estado comparten fila */
.inst-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.inst-tags .estado-dato{font-size:.72rem}
/* ===== Mi espacio: guardar planes y favoritos en este navegador (etapa 6) ===== */
/* Explorador: guardar el plan, debajo de los resultados */
.guardar-zona:empty{display:none}
.guardar-plan{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1.25rem 0 0;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.guardar-plan .btn{cursor:pointer;font:inherit;font-weight:600;padding:.5rem 1.05rem;background:transparent}
.guardar-plan .btn:disabled{opacity:.55;cursor:not-allowed}
.guardar-estado{margin:0;font-size:.92rem;color:#33505e}
.guardar-estado:empty{display:none}
.guardar-estado.ok{color:var(--teal-d);font-weight:600}
.guardar-estado.error,.inst-fav-estado.error,.me-mensaje.error,.me-error{color:#8A2B12;font-weight:600}
/* Directorio: favorito de la universidad (fila de etiquetas) y de cada programa (detalles) */
.inst-fav{cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;line-height:1.3;padding:.3rem .7rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);white-space:nowrap}
.inst-fav:hover{border-color:var(--teal);color:var(--teal-d)}
.inst-fav[aria-pressed="true"]{background:#FFF6D6;border-color:var(--pencil)}
.inst-fav:disabled{opacity:.55;cursor:not-allowed}
.inst-fav:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.inst-tags .inst-fav-uni{margin-left:auto}
.inst-progs .inst-fav-prog{flex:0 0 auto}
.inst-progs li:has(.inst-fav-prog){flex-wrap:wrap}
.inst-progs li:has(.inst-fav-prog)>div{flex:1 1 9rem}
.inst-fav-estado{margin:0 0 1rem;font-size:.92rem;color:#33505e}
.inst-fav-estado:empty{display:none}
/* Página Mi espacio */
.me-intro{max-width:70ch;margin-bottom:1.25rem}
.me-intro p{margin:0 0 .6rem}
.me-mensaje{margin:0 0 1rem;font-weight:600;color:var(--teal-d)}
.me-bloque{margin-top:2.5rem}
.me-bloque>h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-bottom:1.25rem}
.me-bloque>h2::after{width:36px;height:4px;margin-top:.6rem}
.me-vacio{color:#4d6470;font-style:italic;max-width:70ch}
.me-planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));align-items:start;gap:1.25rem}
.me-plan{display:flex;flex-direction:column;gap:.6rem;min-width:0;padding:1.25rem;background:var(--white);border:1px solid var(--line);border-top:5px solid var(--teal);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.me-plan h3{margin:0;font-size:1.15rem;overflow-wrap:anywhere}
.me-fecha,.me-sel{margin:0;font-size:.92rem;color:#33505e;overflow-wrap:anywhere}
.me-sel{font-weight:600;color:var(--ink)}
.me-plan .notice{margin:0}
.me-hist{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:.85rem;border:1px dashed #9DB3BE;border-radius:14px;background:#F8FBFC}
.me-hist-t{margin:0;font-size:.85rem;font-weight:600;color:#33505e;text-transform:uppercase;letter-spacing:.03em}
.me-hist .comp-scroll{align-self:stretch;background:#fff}
.me-tabla th[scope=row]{text-align:left}
.me-extra{display:block;font-size:.8rem;font-weight:400;color:#4d6470}
.me-hist-msg,.me-hist-nota{margin:0;font-size:.86rem;color:#4d6470}
.me-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-top:.25rem}
.me-acciones .btn{cursor:pointer;font:inherit;font-weight:600;padding:.55rem 1.1rem}
.me-acciones button.btn-ghost{background:transparent}
.me-acciones .btn:disabled{opacity:.55;cursor:not-allowed}
.btn.me-peligro{border-color:#8A2B12;color:#8A2B12}
.btn.me-peligro:hover{background:#8A2B12;color:#fff}
.me-renombrar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem;border:1px solid var(--line);border-radius:12px;background:#F8FBFC}
.me-renombrar label{flex:1 1 100%;font-size:.92rem;font-weight:600}
.me-renombrar input{flex:1 1 14rem;min-width:0;min-height:2.6rem;padding:.4rem .7rem;font:inherit;border:1.5px solid var(--line);border-radius:10px}
.me-renombrar .btn{cursor:pointer;font:inherit;font-weight:600;padding:.5rem 1rem}
.me-error{flex:1 1 100%;margin:0}
.me-error:empty{display:none}
.me-fav-t{font-size:1rem;margin:1rem 0 .5rem}
.me-favs{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.me-fav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.75rem .95rem;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.me-fav>div:first-child{display:grid;flex:1 1 16rem;min-width:0;overflow-wrap:anywhere}
.me-nd{font-size:.86rem;font-style:italic;color:#8A2B12}
.me-fav-acc{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;font-size:.92rem;font-weight:600}
.me-fav-acc .btn{cursor:pointer;font:inherit;padding:.35rem .9rem;background:transparent}
.me-fav-acc .btn:disabled{opacity:.55;cursor:not-allowed}
.me-copia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.25rem;align-items:start}
.me-paso{padding:1.25rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.me-paso h3{margin:0 0 .5rem}
.me-paso p{margin:0 0 .85rem;font-size:.95rem}
.me-paso .btn{cursor:pointer;font:inherit;font-weight:600}
.me-paso .btn:disabled{opacity:.55;cursor:not-allowed}
.me-paso input[type=file]{max-width:100%;font:inherit;font-size:.92rem}
.me-resultado{margin:.75rem 0 0;font-size:.92rem;color:var(--teal-d)}
.me-resultado:empty{display:none}
.me-import{margin-top:1rem;padding:1rem;border:2px solid var(--pencil);border-radius:14px;background:#FFFBEA}
.me-import p{margin:0 0 .6rem}
.me-import-t{font-weight:600}
@media (max-width:480px){.me-plan,.me-paso{padding:1rem .9rem}.me-hist{padding:.7rem}}
/* Menú con «Mi espacio» (7 enlaces): en una sola fila cabe desde unos 1200 px. Por debajo se usa el mismo menú
   desplegable que en celular, en lugar de partir el texto de los enlaces en dos líneas. */
.nav a{white-space:nowrap}
@media (min-width:901px) and (max-width:1199px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:.6rem;background:var(--bg);padding:1rem 1.25rem 1.5rem;border-bottom:1px solid var(--line);max-height:calc(100vh - 68px);overflow-y:auto}
  .nav.open{display:flex}
  .nav a{text-align:center;padding:.4rem}
}
@media (min-width:1200px) and (max-width:1399px){.nav{gap:1.1rem}}
/* ===== Cuentas: entrar, crear cuenta, recuperar la contraseña y Mi cuenta (etapa 8; solo con las cuentas activas) ===== */
.acceso{max-width:34rem}
.acceso .lead{margin-bottom:1.25rem}
.acceso-form{margin:1rem 0}
.campo-clave{display:flex;gap:.5rem;align-items:stretch}
.campo-clave input{flex:1;min-width:0}
.campo-ver{flex:none;cursor:pointer;font:inherit;font-weight:600;padding:.5rem .9rem;border-radius:12px;background:transparent}
.field-ayuda{margin:.4rem 0 0;font-size:.9rem;color:#3E5560}
.field-error{margin:.35rem 0 0;font-size:.9rem;font-weight:600;color:#B3261E}
.field-error:empty{display:none}
.acceso-msg{margin:1rem 0;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.acceso-msg.ok{border-color:var(--teal);background:#EAF6F4}
.acceso-msg.error{border-color:#B3261E;background:#FDECEA;color:#7A1C16}
.acceso-zona:empty{display:none}
.acceso-zona .btn{cursor:pointer;font:inherit;font-weight:600}
.acceso-enlaces{margin:1rem 0 0}
.acceso-h{font-size:1.3rem;margin:1.75rem 0 .75rem}
.acceso-datos{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1rem;margin:0 0 1rem}
.acceso-datos dt{font-weight:600}
.acceso-datos dd{margin:0;overflow-wrap:anywhere}
.acceso-seccion .form-actions .btn{cursor:pointer;font:inherit;font-weight:600}
@media (max-width:480px){.acceso-datos{grid-template-columns:1fr;gap:.15rem}.acceso-datos dd{margin-bottom:.6rem}.campo-ver{padding:.5rem .7rem}}
/* Menú con el enlace de la cuenta (8 elementos; solo con las cuentas activas): desde 1200 px el encabezado mide siempre
   1.120 px, así que el menú se compacta un poco para no pegarse al logotipo. Por debajo, el menú desplegable de siempre. */
@media (min-width:1200px){
  .header-in:has(.nav-cuenta){gap:1.5rem}
  .nav:has(.nav-cuenta){gap:.9rem}
  .nav:has(.nav-cuenta) a:not(.btn){font-size:.95rem}
  .nav:has(.nav-cuenta) .btn{padding:.55rem .9rem}
}
/* ===== Tipografía de títulos: respaldo calibrado para que no haya saltos al cargar «Bricolage Grotesque» =====
   Mientras llega la fuente web (o sin conexión), los títulos usan Arial Bold ajustada para ocupar el mismo ancho
   y la misma altura de línea que Bricolage. Así el texto se corta en los mismos puntos y nada se mueve al cambiar.
   Calibrado en Chromium sobre los 42 textos en Bricolage de las 8 páginas (ancho total Bricolage / Arial Bold):
     peso 600 → size-adjust 100.32 %;  peso 800 (y 700) → size-adjust 103.65 %.
   Métricas de Bricolage: ascenso 0.93 em, descenso 0.27 em, sin interlineado extra; los «override» se dividen
   por size-adjust porque el navegador los escala con él. Liberation Sans y Arimo (Linux) tienen las mismas medidas que Arial.
   Los anchos máximos de los títulos van en em y no en ch: 1ch depende del «0» de cada fuente (0,67 em en Bricolage 800),
   y con ch el límite cambiaría al cambiar de fuente. 24ch = 16.08em, 22ch = 14.74em, 20ch = 13.4em (mismo valor final). */
@font-face{font-family:"Bricolage respaldo";font-weight:600;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold");
  size-adjust:100.32%;ascent-override:92.70%;descent-override:26.91%;line-gap-override:0%}
@font-face{font-family:"Bricolage respaldo";font-weight:800;
  src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold");
  size-adjust:103.65%;ascent-override:89.73%;descent-override:26.05%;line-gap-override:0%}