/* El Puente — hoja de estilo compartida de las paginas de contenido.
   Fraunces para titulares, Space Grotesk para texto. Sin build, sin dependencias.

   El criterio: esto habla del dinero de alguien para los proximos treinta anios,
   asi que tiene que parecer un documento y no una campania. Por eso no hay
   degradados ni sombras de color, y el color se reserva para lo que significa
   algo: el verde azulado es lo que esta cubierto, el rosa es el hueco que hay
   que cruzar. Son los mismos colores que usa la grafica de la calculadora. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600&display=swap');
* { box-sizing: border-box; }
/* PALETA COMPARTIDA con app/index.html. Los dos archivos tienen que
   tener este bloque identico: lo comprueba verificar-sitio.mjs. El gris
   apagado era #6B7290, que daba 4,38:1 sobre el fondo — por debajo del
   minimo. Ahora 5,24:1. */
:root {
  --bg: #FBFBFD;
  --surface: #FFFFFF;
  --surface-alt: #F1F3FA;
  --border: #E3E8F4;
  --text: #1B1F3B;
  --text-muted: #5F6682;
  --primary: #4F52DC;
  --primary-dark: #3B3EB0;
  --teal: #0FBFA8;
  --teal-dark: #0A8F7E;
  --rose: #F0436A;
  --rose-dark: #C22E52;
  --amber: #F5A524;
  --canal: 1.1rem;
  --muted: var(--text-muted);   /* nombre antiguo, para las reglas de abajo */
}
html,body { margin:0; background:var(--bg); color:var(--text);
  font-family:'Space Grotesk',sans-serif; line-height:1.65; -webkit-text-size-adjust:100%; }
.envoltorio { max-width:720px; margin:0 auto; padding:0 var(--canal); }
h1,h2,h3,.num { font-family:'Fraunces',serif; font-weight:600; line-height:1.2; }
h1 { font-size:clamp(30px,6vw,46px); margin:0 0 1rem; letter-spacing:-0.015em; text-wrap:balance; }
h2 { font-size:clamp(21px,4.5vw,28px); margin:2.6rem 0 0.8rem; letter-spacing:-0.01em; }
h3 { font-size:17px; margin:1.6rem 0 0.5rem; }
p,li { font-size:16.5px; color:#2A2F52; }
a { color:var(--primary-dark); text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover { color:var(--primary); }
.sub { font-size:18.5px; color:var(--muted); margin:0 0 1.8rem; line-height:1.55; }
strong,b { font-weight:600; }

nav.barra { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
nav.barra .envoltorio { display:flex; align-items:center; justify-content:space-between; height:56px; gap:0.8rem; }
/* Objetivos tactiles: la misma vara que la app. Un enlace de 22 px de alto en
   la barra de navegacion se falla con el dedo; la norma pide 40 y lo comprueba
   verificar-sitio.mjs. Los enlaces DENTRO de un parrafo quedan fuera: no se
   pueden engordar sin romper el texto, y la propia norma los excluye. */
nav.barra .marca { font-family:'Fraunces',serif; font-weight:700; font-size:18px; color:var(--text);
  text-decoration:none; white-space:nowrap; display:flex; align-items:center; min-height:44px; }
nav.barra .enlaces { display:flex; gap:0.4rem; align-items:center; }
nav.barra .enlaces a { font-size:13.5px; color:var(--muted); text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; min-height:44px; padding:0 0.5rem; }
nav.barra .enlaces a:hover { color:var(--primary); }

/* ---- portada: un titular en tipografia, no una caja de color ---- */
.heroe { background:var(--surface); border-bottom:1px solid var(--border); padding:3.4rem 0 2.6rem; }
.heroe h1 { max-width:18ch; }
.heroe .sub { max-width:55ch; color:#434A72; margin-bottom:0.8rem; }
.sobrelinea { margin:0 0 0.55rem; color:var(--primary-dark); font-size:12.5px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.ejemplo { max-width:58ch; margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; }
.cta { display:inline-block; background:var(--primary); color:#fff; text-decoration:none;
  font-weight:600; font-size:16px; padding:14px 26px; border-radius:10px; border:1.5px solid var(--primary); }
.cta:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; }
.cta.secundario { background:transparent; color:var(--primary-dark); border-color:var(--border); }
.cta.secundario:hover { background:var(--surface-alt); color:var(--primary-dark); border-color:var(--border); }
.cta-linea { margin:1.6rem 0 .8rem; display:flex; flex-wrap:wrap; gap:0.7rem; }
/* Una lista de fuentes es una fila de objetivos tactiles, no enlaces dentro de una
   frase: los cortos caben en un renglon y se quedaban en 18 px de alto, la mitad
   del minimo que el propio proyecto se puso. */
.lista-enlaces a { display:inline-block; padding:12px 0; line-height:1.45; }
.bajo-cta { font-size:13px; color:var(--muted); margin:0; }

/* ---- el puente, dibujado: es la categoria que el producto quiere poseer ---- */
.puente-visual { display:flex; margin:2.2rem 0 0; border:1px solid var(--border);
  border-radius:12px; overflow:hidden; background:var(--surface); }
.puente-visual .tramo { flex:1 1 0; padding:0.85rem 0.9rem; border-right:1px solid var(--border); min-width:0; }
.puente-visual .tramo:last-child { border-right:none; }
.puente-visual .tramo.hueco { flex:1.3 1 0; background:rgba(240,67,106,.07); }
.puente-visual .etq { display:block; font-family:'Fraunces',serif; font-weight:600; font-size:14.5px; line-height:1.25; }
.puente-visual .tramo.hueco .etq { color:var(--rose-dark); }
.puente-visual .tramo.pension .etq { color:var(--teal-dark); }
.puente-visual .dato { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.puente-pie { font-size:13px; color:var(--muted); margin:0.6rem 0 0; }

.como-empezar { background:var(--surface-alt); }
.como-empezar h2 { max-width:24ch; margin-top:0; }
.pasos { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; margin-top:1.5rem; }
.paso { position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:1.1rem 1rem 1rem; }
.paso-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; background:var(--surface-alt); color:var(--primary-dark); font-size:13px;
  font-weight:600; border:1px solid var(--border); }
.paso h3 { margin:0.75rem 0 0.35rem; font-size:16px; }
.paso p { margin:0; font-size:14px; line-height:1.55; color:var(--muted); }
.cta-centrada { margin-bottom:0; }

section { padding:2.8rem 0; }
section + section { border-top:1px solid var(--border); }
.tarjetas { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.tarjeta { background:var(--surface); padding:1.15rem 1.2rem; }
.tarjeta h3 { margin:0 0 .35rem; font-size:16px; }
.tarjeta h3 a { text-decoration:none; color:var(--text); display:block; min-height:40px;
  display:flex; align-items:center; }
.tarjeta h3 a:hover { color:var(--primary); text-decoration:underline; }
.tarjeta p { margin:0; font-size:14.5px; color:var(--muted); line-height:1.55; }

.destacado { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--teal);
  border-radius:0 10px 10px 0; padding:1rem 1.2rem; margin:1.8rem 0; }
.aviso { background:#FFF4F7; border:1px solid #F5C2CF; color:#8E1D3A; border-radius:10px;
  padding:1rem 1.2rem; margin:1.8rem 0; font-size:15px; }
.aviso b { color:#7A1631; }

table { width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:15px; }
th,td { text-align:left; padding:10px 11px; border-bottom:1px solid var(--border); vertical-align:top; }
thead th, tr:first-child th { border-bottom:1.5px solid var(--border); }
th { color:var(--muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; }
tbody tr:last-child td { border-bottom:none; }
code { background:var(--surface-alt); padding:2px 6px; border-radius:5px; font-size:14px; }
hr { border:none; border-top:1px solid var(--border); margin:2.4rem 0; }

footer { border-top:1px solid var(--border); margin-top:3.4rem; padding:1.8rem 0 2.6rem;
  font-size:13px; color:var(--muted); background:var(--surface); }
footer a { color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; min-height:40px; padding:0 0.7rem 0 0; margin-right:0.4rem; }
footer a:hover { color:var(--primary); text-decoration:underline; }
.meta { font-size:13px; color:var(--muted); margin:0 0 2rem; }

@media (max-width:520px){
  /* Con tres enlaces la barra se sale de la pantalla a 390px. El que sobra es el
     que ademas esta enlazado desde el propio titular. */
  nav.barra .enlaces { gap:0.85rem; }
  nav.barra .enlaces a.opcional { display:none; }
  /* En movil los tres tramos en fila se quedan sin sitio y se parten las palabras. */
  .puente-visual { flex-direction:column; }
  .puente-visual .tramo { border-right:none; border-bottom:1px solid var(--border); }
  .puente-visual .tramo:last-child { border-bottom:none; }
  .cta { display:block; text-align:center; }
  .cta-linea { flex-direction:column; }
  .pasos { grid-template-columns:1fr; }
  .paso { padding-left:3.5rem; }
  .paso-num { position:absolute; left:1rem; top:1rem; }
  .paso h3 { margin-top:0; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg:#101327; --surface:#191D38; --surface-alt:#232748; --border:#2E3358;
    --text:#EDEFF8; --muted:#9298BC; --primary:#8A8DFF; --primary-dark:#A9ABFF;
    --teal:#25D6BE; --teal-dark:#3FE0CA; --rose:#FF6F90; --rose-dark:#FF93AB;
  }
  :root:not([data-tema="claro"]) p,
  :root:not([data-tema="claro"]) li { color:#D6D9EC; }
  :root:not([data-tema="claro"]) .heroe .sub { color:#C3C8E4; }
  :root:not([data-tema="claro"]) .cta { background:var(--primary); border-color:var(--primary); color:#12152B; }
  :root:not([data-tema="claro"]) .cta:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:#12152B; }
  :root:not([data-tema="claro"]) .cta.secundario { background:transparent; color:var(--primary-dark); border-color:var(--border); }
  :root:not([data-tema="claro"]) .aviso { background:#3A1424; border-color:#6B2440; color:#FFC9D6; }
  :root:not([data-tema="claro"]) .aviso b { color:#FFE1E8; }
  :root:not([data-tema="claro"]) .puente-visual .tramo.hueco { background:rgba(255,111,144,.10); }
  :root:not([data-tema="claro"]) .tarjeta h3 a { color:var(--text); }
}