/* =========================================================
   Ayearofgrief — Cursos de educación financiera
   Paleta «Tinta fucsia»: papel frío, grafito y fucsia de imprenta
   ========================================================= */

:root {
  --papel: #F7F6F9;
  --blanco: #FFFFFF;
  --tinte: #FBEAF2;
  --frio: #EEF0F4;
  --tinta: #1B1E26;
  --gris: #4D5361;
  --fucsia: #B0155F;
  --fucsia-osc: #86104A;
  --fucsia-suave: #F3C7DA;
  --grafito: #3A4150;
  --panel: #20232C;
  --panel-2: #2A2E39;
  --rosa: #F7A8CB;
  --claro-panel: #C9CDD7;
  --linea: #DDDAE3;
  --linea-ruta: #E7B5CB;
  --error: #B42318;
  --error-fondo: #FDECEA;

  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-cifra: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radio: 16px;
  --radio-s: 10px;
  --sombra: 0 1px 2px rgba(27, 30, 38, .06), 0 10px 30px rgba(27, 30, 38, .07);
  --sombra-fuerte: 0 2px 4px rgba(27, 30, 38, .08), 0 24px 60px rgba(27, 30, 38, .18);
  --ancho: 1200px;
  --gutter: 20px;
  --ruta-x: 22px;
  --ruta-sangria: 64px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  color: var(--tinta);
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.4rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .45vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: .35em; }

a {
  color: var(--fucsia);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--fucsia-osc); text-decoration-thickness: 2px; }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--fucsia);
  outline-offset: 3px;
  border-radius: 4px;
}

.cifra, .tabla-numeros td, .tabla-numeros th, .resultado__valor, .formula code {
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--f-cifra);
  font-size: .92em;
  background: var(--frio);
  padding: .1em .4em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--tinta);
  color: var(--blanco);
  padding: 10px 16px;
  border-radius: var(--radio-s);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; color: var(--blanco); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Franja informativa ---------- */
.franja {
  background: var(--panel);
  color: var(--claro-panel);
  font-size: .8125rem;
  line-height: 1.4;
}
.franja__interior {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 7px;
}
.franja__dato { display: inline-flex; align-items: center; gap: 8px; }
.franja__dato::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rosa);
  flex: none;
}
.franja a { color: var(--blanco); text-decoration: none; }
.franja a:hover { text-decoration: underline; color: var(--blanco); }
.franja a:focus-visible { outline-color: var(--rosa); }
.franja__secundario { display: none; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .25s ease;
}
@supports (backdrop-filter: blur(8px)) {
  .cabecera { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(10px); }
}
.cabecera.con-sombra { box-shadow: 0 6px 24px rgba(27, 30, 38, .09); }

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
  flex: none;
}
.marca:hover { color: var(--tinta); }
.marca__signo { width: 38px; height: 38px; flex: none; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__nombre {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}
.marca__bajada {
  font-size: .72rem;
  color: var(--gris);
  letter-spacing: .02em;
  margin-top: 3px;
}

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--tinta);
  font: 600 .95rem var(--f-texto);
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.menu-boton__icono { width: 18px; height: 12px; position: relative; }
.menu-boton__icono span {
  position: absolute; left: 0; right: 0;
  height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.menu-boton__icono span:nth-child(1) { top: 0; }
.menu-boton__icono span:nth-child(2) { top: 5px; }
.menu-boton__icono span:nth-child(3) { top: 10px; }
.menu-boton[aria-expanded="true"] .menu-boton__icono span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] .menu-boton__icono span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.navegacion {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 18px 40px rgba(27, 30, 38, .12);
  padding: 8px var(--gutter) 20px;
  display: none;
}
.navegacion.abierta { display: block; }
.navegacion__lista { list-style: none; margin: 0; padding: 0; }
.navegacion__lista li { margin: 0; border-bottom: 1px solid var(--frio); }
.navegacion__lista a {
  display: block;
  padding: 14px 4px;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
}
.navegacion__lista a[aria-current="page"] { color: var(--fucsia); }
.navegacion__lista a[aria-current="page"]::after {
  content: " ·";
  color: var(--fucsia);
}
.navegacion__accion { margin-top: 16px; }

@media (min-width: 1000px) {
  .menu-boton { display: none; }
  .navegacion {
    position: static;
    display: flex !important;
    align-items: center;
    gap: 22px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .navegacion__lista { display: flex; gap: 4px; }
  .navegacion__lista li { border: 0; }
  .navegacion__lista li + li { margin-top: 0; }
  .navegacion__lista a {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .98rem;
  }
  .navegacion__lista a:hover { background: var(--frio); color: var(--tinta); }
  .navegacion__lista a[aria-current="page"] { background: var(--tinte); color: var(--fucsia-osc); }
  .navegacion__lista a[aria-current="page"]::after { content: none; }
  .navegacion__accion { margin-top: 0; }
}

@media (min-width: 760px) {
  .franja__secundario { display: inline-flex; }
}

/* Sin JavaScript, el menú queda siempre visible */
html:not(.js) .menu-boton { display: none; }
html:not(.js) .cabecera__interior { flex-wrap: wrap; }
html:not(.js) .navegacion { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 12px; width: 100%; }
@media (min-width: 1000px) { html:not(.js) .navegacion { width: auto; padding: 0; } }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 700 1rem/1.2 var(--f-texto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  text-align: center;
}
.boton:hover { text-decoration: none; }
.boton--primario { background: var(--fucsia); color: var(--blanco); }
.boton--primario:hover { background: var(--fucsia-osc); color: var(--blanco); }
.boton--secundario { background: transparent; color: var(--tinta); border-color: var(--grafito); }
.boton--secundario:hover { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.boton--suave { background: var(--tinte); color: var(--fucsia-osc); }
.boton--suave:hover { background: var(--fucsia-suave); color: var(--fucsia-osc); }
.boton--claro { background: var(--blanco); color: var(--tinta); }
.boton--claro:hover { background: var(--tinte); color: var(--tinta); }
.boton--chico { min-height: 40px; padding: 8px 16px; font-size: .94rem; }
.boton--ancho { width: 100%; }
.boton__flecha { width: 16px; height: 16px; flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .boton:hover .boton__flecha { transform: translateX(3px); }
  .boton__flecha { transition: transform .2s ease; }
}

.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Etiquetas y textos ---------- */
.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-cifra);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fucsia-osc);
  margin-bottom: 12px;
}
.bajada { font-size: 1.15rem; color: var(--gris); max-width: 62ch; }
.texto-gris { color: var(--gris); }
.chico { font-size: .9rem; }

.etiqueta {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--frio);
  color: var(--grafito);
}
.etiqueta--fucsia { background: var(--tinte); color: var(--fucsia-osc); }

/* ---------- Avisos ---------- */
.aviso-riesgo {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--gris);
  border-left: 3px solid var(--fucsia);
  background: var(--blanco);
  padding: 10px 14px;
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  margin: 14px 0 0;
}
.aviso-ejemplo {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--grafito);
  font-weight: 600;
  margin: 14px 0 0;
}
.nota { font-size: .9rem; color: var(--gris); }

/* ---------- Ruta (arquetipo: camino vertical) ---------- */
.ruta {
  position: relative;
  --avance: 0;
}
.ruta::before,
.ruta::after {
  content: "";
  position: absolute;
  top: calc(clamp(40px, 5.5vw, 76px) + 17px);
  bottom: 60px;
  left: calc(var(--gutter) + var(--ruta-x) - 1px);
  width: 3px;
  border-radius: 3px;
}
.ruta::before {
  background: repeating-linear-gradient(to bottom, var(--linea-ruta) 0 12px, transparent 12px 20px);
}
.ruta::after {
  background: var(--fucsia);
  transform-origin: top;
  transform: scaleY(var(--avance));
}

.parada {
  position: relative;
  padding-left: var(--ruta-sangria);
  padding-block: clamp(40px, 5.5vw, 76px);
}
.parada__marca {
  position: absolute;
  left: calc(var(--ruta-x) - 20px);
  top: calc(clamp(40px, 5.5vw, 76px) - 4px);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blanco);
  border: 3px solid var(--fucsia);
  color: var(--fucsia-osc);
  display: grid;
  place-items: center;
  font: 600 .82rem var(--f-cifra);
  z-index: 1;
  box-shadow: 0 0 0 6px var(--papel);
}
.parada--llegada .parada__marca { background: var(--fucsia); color: var(--blanco); }
.parada__cabeza { max-width: 760px; margin-bottom: 32px; }
.parada__cabeza p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  :root { --ruta-x: 12px; --ruta-sangria: 40px; --gutter: 16px; }
  .parada__marca { width: 30px; height: 30px; left: calc(var(--ruta-x) - 14px); font-size: .7rem; border-width: 2px; box-shadow: 0 0 0 4px var(--papel); }
}

/* ---------- Héroe ---------- */
.heroe {
  position: relative;
}
.heroe__grilla {
  display: grid;
  gap: 40px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.heroe__texto h1 { max-width: 17ch; }
.heroe__sellos {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: .92rem;
  color: var(--gris);
}
.heroe__sellos li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.heroe__sellos svg { width: 16px; height: 16px; color: var(--fucsia); flex: none; }

@media (min-width: 1100px) {
  .heroe__grilla { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; }
  .heroe__texto { padding-top: 18px; }
}

/* ---------- Panel de ejemplo (calculadoras) ---------- */
.ejemplo {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.ejemplo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--panel);
  color: var(--blanco);
}
.ejemplo__titulo {
  font: 600 .82rem var(--f-cifra);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
  color: var(--blanco);
}
.ejemplo__puntos { display: flex; gap: 6px; }
.ejemplo__puntos span { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-2); border: 1px solid #4A5060; }
.ejemplo__puntos span:first-child { background: var(--rosa); border-color: var(--rosa); }

.pestanas {
  display: flex;
  gap: 4px;
  padding: 10px 10px 0;
  background: var(--frio);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
  scrollbar-width: thin;
}
.pestana {
  flex: 1 0 auto;
  border: 0;
  background: transparent;
  color: var(--gris);
  font: 600 .93rem var(--f-texto);
  padding: 11px 14px 12px;
  border-radius: var(--radio-s) var(--radio-s) 0 0;
  cursor: pointer;
  white-space: nowrap;
}
.pestana:hover { color: var(--tinta); background: rgba(255, 255, 255, .6); }
.pestana[aria-selected="true"] {
  background: var(--blanco);
  color: var(--fucsia-osc);
  box-shadow: inset 0 3px 0 var(--fucsia);
}
.pestana__num { font-family: var(--f-cifra); font-size: .78rem; margin-right: 6px; }

.panel-pestana { padding: 20px 18px 20px; }
@media (max-width: 520px) {
  .pestanas { overflow: visible; padding: 8px 6px 0; gap: 2px; }
  .pestana { flex: 1 1 0; min-width: 0; white-space: normal; padding: 9px 6px 10px; font-size: .84rem; line-height: 1.25; text-align: center; }
  .pestana__num { display: block; margin: 0 0 2px; }
  .panel-pestana { padding: 18px 14px; }
}
.panel-pestana[hidden] { display: none; }

.calc__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 16px;
}
.calc__campo label {
  display: block;
  font-size: .86rem;
  font-weight: 700;
  color: var(--grafito);
  margin-bottom: 6px;
  line-height: 1.3;
}
.calc__entrada {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #B9BCC8;
  border-radius: var(--radio-s);
  background: var(--blanco);
  overflow: hidden;
}
.calc__entrada:focus-within { border-color: var(--fucsia); box-shadow: 0 0 0 3px var(--tinte); }
.calc__entrada input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 10px 10px;
  font: 600 1rem var(--f-cifra);
  color: var(--tinta);
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.calc__entrada input:focus { outline: none; }
.calc__unidad {
  display: grid;
  place-items: center;
  padding: 0 10px;
  font: 600 .82rem var(--f-cifra);
  color: var(--gris);
  background: var(--frio);
  white-space: nowrap;
}
.calc__campo.invalido .calc__entrada { border-color: var(--error); }
.calc__error { color: var(--error); font-size: .8rem; font-weight: 600; margin: 5px 0 0; }

.formula {
  margin: 18px 0 0;
  padding: 12px 14px;
  background: var(--frio);
  border-radius: var(--radio-s);
  font-size: .92rem;
  color: var(--grafito);
}
.formula strong { color: var(--tinta); }

.resultados {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.resultado {
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  padding: 10px 12px;
  background: var(--blanco);
}
.resultado--destacado { background: var(--tinte); border-color: var(--fucsia-suave); }
.resultado__etiqueta { display: block; font-size: .8rem; color: var(--gris); font-weight: 600; line-height: 1.3; }
.resultado__valor {
  display: block;
  font: 600 1.12rem/1.3 var(--f-cifra);
  color: var(--tinta);
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.resultado--destacado .resultado__valor { color: var(--fucsia-osc); }
.calc__estado { margin: 10px 0 0; font-size: .86rem; color: var(--error); font-weight: 600; min-height: 0; }
.calc__estado:empty { display: none; }

/* Barras de comparación */
.barras { margin-top: 16px; display: grid; gap: 10px; }
.barra__fila { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; font-size: .84rem; }
.barra__nombre { color: var(--grafito); font-weight: 700; line-height: 1.2; }
.barra__pista { height: 22px; background: var(--frio); border-radius: 6px; overflow: hidden; display: flex; }
.barra__relleno { height: 100%; background: var(--fucsia); width: 0; }
.barra__relleno--rayado {
  background: repeating-linear-gradient(135deg, var(--grafito) 0 6px, #5C6476 6px 10px);
}
.barra__relleno--suave { background: var(--fucsia-suave); }
@media (prefers-reduced-motion: no-preference) {
  .barra__relleno { transition: width .45s ease; }
}
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .8rem; color: var(--gris); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.leyenda .l-fucsia { background: var(--fucsia); }
.leyenda .l-rayado { background: repeating-linear-gradient(135deg, var(--grafito) 0 4px, #5C6476 4px 7px); }
.leyenda .l-suave { background: var(--fucsia-suave); }

/* ---------- Grillas y tarjetas ---------- */
.grilla { display: grid; gap: 18px; }
@media (min-width: 700px) { .grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .grilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.tarjeta h3 { margin-bottom: .4em; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta__pie { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Rutas (tarjetas de cursos) */
.rutas-grilla { display: grid; gap: 14px; }
@media (min-width: 700px) { .rutas-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .rutas-grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rutas-grilla > * { grid-column: span 2; }
  .rutas-grilla > :nth-child(-n+2) { grid-column: span 3; }
}

.ruta-tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ruta-tarjeta:hover { border-color: var(--fucsia-suave); box-shadow: var(--sombra); }
.ruta-tarjeta__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ruta-tarjeta__icono {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--tinte);
  color: var(--fucsia-osc);
  display: grid; place-items: center;
}
.ruta-tarjeta__icono svg { width: 26px; height: 26px; }
.ruta-tarjeta h3 a { color: var(--tinta); text-decoration: none; }
.ruta-tarjeta h3 a:hover { color: var(--fucsia); text-decoration: underline; }
.ruta-tarjeta p { color: var(--gris); font-size: .98rem; }
.ruta-tarjeta__pie { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding-top: 6px; }
.enlace-flecha { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha svg { width: 14px; height: 14px; }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: paso; }
@media (min-width: 700px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pasos li {
  margin: 0;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px;
  position: relative;
}
.pasos__num {
  font: 600 .8rem var(--f-cifra);
  color: var(--fucsia-osc);
  background: var(--tinte);
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 12px;
}
.pasos h3 { font-size: 1.15rem; }
.pasos p { color: var(--gris); font-size: .97rem; margin: 0; }

/* Para quién */
.para-quien { display: grid; gap: 18px; }
@media (min-width: 860px) { .para-quien { grid-template-columns: 1fr 1fr; } }
.lista-marcas { list-style: none; padding: 0; margin: 0; }
.lista-marcas li { position: relative; padding-left: 32px; margin: 0 0 12px; }
.lista-marcas li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tinte);
  box-shadow: inset 0 0 0 2px var(--fucsia);
}
.lista-marcas li::after {
  content: "";
  position: absolute; left: 7px; top: 8px;
  width: 6px; height: 9px;
  border: solid var(--fucsia-osc);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lista-marcas--no li::before { background: var(--frio); box-shadow: inset 0 0 0 2px var(--grafito); }
.lista-marcas--no li::after {
  left: 5px; top: 12px; width: 10px; height: 2px; border: 0;
  background: var(--grafito); transform: none;
}

/* Planes */
.planes { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 960px) { .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.plan--destacado {
  border: 2px solid var(--fucsia);
  box-shadow: var(--sombra);
  position: relative;
}
@media (min-width: 960px) { .plan--destacado { transform: translateY(-10px); } }
.plan__sello { align-self: flex-start; margin-bottom: 14px; }
.plan h3 { font-size: 1.45rem; margin-bottom: .25em; }
.plan__contenido { color: var(--gris); }
.plan__lista { list-style: none; padding: 0; margin: 14px 0 18px; }
.plan__lista li { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; }
.plan__lista li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--fucsia); flex: none; transform: translateY(-1px); }
.plan__arancel {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: var(--radio-s);
  background: var(--frio);
  font-weight: 700;
  color: var(--grafito);
  margin-bottom: 16px;
}
.planes__nota { margin-top: 22px; font-weight: 600; color: var(--grafito); max-width: 70ch; }

/* Guías */
.guia-tarjeta { text-decoration: none; color: inherit; }
.guia-tarjeta:hover { color: inherit; }
.guia-tarjeta:hover h3 { color: var(--fucsia); text-decoration: underline; }

/* ---------- Orientación (quiz) ---------- */
.orientacion {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(18px, 3vw, 32px);
  box-shadow: var(--sombra);
}
.orientacion__etiqueta {
  font-size: .88rem;
  font-weight: 700;
  color: var(--grafito);
  background: var(--frio);
  padding: 8px 12px;
  border-radius: var(--radio-s);
  margin-bottom: 20px;
}
.pregunta { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.pregunta legend {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 10px;
  padding: 0;
}
.pregunta__num { font-family: var(--f-cifra); color: var(--fucsia-osc); font-size: .85rem; margin-right: 8px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion label {
  display: inline-block;
  padding: 9px 14px;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.3;
}
.opcion label:hover { border-color: var(--grafito); }
.opcion input:checked + label { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.opcion input:focus-visible + label { outline: 3px solid var(--fucsia); outline-offset: 2px; }
.orientacion__error { color: var(--error); font-weight: 600; font-size: .92rem; margin: 0 0 12px; }
.orientacion__resultado {
  margin-top: 22px;
  border-radius: var(--radio);
  background: var(--tinte);
  border: 1px solid var(--fucsia-suave);
  padding: 20px 22px;
}
.orientacion__resultado h3 { margin-bottom: .3em; }
.orientacion__resultado[hidden] { display: none; }

/* ---------- Acordeón ---------- */
.acordeon { border-top: 1px solid var(--linea); max-width: 900px; }
.acordeon__item { border-bottom: 1px solid var(--linea); }
.acordeon__titulo { margin: 0; font-size: 1.1rem; }
.acordeon__boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: none;
  border: 0;
  padding: 20px 4px;
  font: 700 1.08rem/1.35 var(--f-titulo);
  color: var(--tinta);
  cursor: pointer;
}
.acordeon__boton:hover { color: var(--fucsia-osc); }
.acordeon__signo {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--linea);
  position: relative;
}
.acordeon__signo::before, .acordeon__signo::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.acordeon__signo::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after { transform: translate(-50%, -50%) rotate(0deg); }
.acordeon__panel { padding: 0 4px 20px; color: var(--gris); max-width: 72ch; }
.acordeon__panel[hidden] { display: none; }

/* ---------- Bloque final ---------- */
.cierre {
  background: var(--panel);
  color: var(--claro-panel);
  border-radius: calc(var(--radio) + 6px);
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  gap: 24px;
  align-items: center;
}
.cierre h2 { color: var(--blanco); }
.cierre p { max-width: 60ch; }
.cierre a:not(.boton) { color: var(--rosa); }
.cierre .boton--secundario { color: var(--blanco); border-color: var(--claro-panel); }
.cierre .boton--secundario:hover { background: var(--blanco); color: var(--tinta); }
.cierre :focus-visible { outline-color: var(--rosa); }
@media (min-width: 960px) { .cierre { grid-template-columns: 1.4fr 1fr; } .cierre .acciones { justify-content: flex-end; } }

/* ---------- Página interior ---------- */
.portada {
  padding-block: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 48px);
  border-bottom: 1px solid var(--linea);
  background:
    radial-gradient(circle at 92% 0%, var(--tinte) 0, transparent 38%),
    var(--papel);
}
.portada h1 { max-width: 22ch; }
.portada .bajada { margin-bottom: 0; }
.migas { font-size: .88rem; color: var(--gris); margin-bottom: 18px; }
.migas a { color: var(--gris); }
.migas a:hover { color: var(--fucsia); }

.seccion { padding-block: clamp(40px, 6vw, 80px); }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion--blanca { background: var(--blanco); }

.lectura { max-width: 760px; }
.lectura h2 { margin-top: 1.6em; }
.lectura h2:first-child, .lectura .antetitulo + h2 { margin-top: 0; }
.lectura h3 { margin-top: 1.4em; }

/* ---------- Cursos ---------- */
.cursos-diseno { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.cursos-diseno > * { min-width: 0; }
@media (min-width: 1100px) { .cursos-diseno { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; } }

.mapa-rutas { align-self: start; }
@media (min-width: 1100px) { .mapa-rutas { position: sticky; top: 100px; } }
.mapa-rutas__titulo { font: 600 .8rem var(--f-cifra); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: 12px; }
.mapa-rutas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mapa-rutas li { margin: 0; }
.mapa-rutas a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.mapa-rutas a:hover { border-color: var(--fucsia); color: var(--fucsia-osc); }
.mapa-rutas__nodo {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--fucsia);
  display: grid; place-items: center;
  font: 600 .72rem var(--f-cifra); color: var(--fucsia-osc);
  background: var(--blanco);
  flex: none;
}
.mapa-rutas a.activa { border-color: var(--fucsia); background: var(--tinte); }
.mapa-rutas a.activa .mapa-rutas__nodo { background: var(--fucsia); color: var(--blanco); }
@media (min-width: 1100px) {
  .mapa-rutas ol { flex-direction: column; gap: 0; position: relative; }
  .mapa-rutas ol::before {
    content: ""; position: absolute; left: 20px; top: 18px; bottom: 18px; width: 2px;
    background: repeating-linear-gradient(to bottom, var(--linea-ruta) 0 8px, transparent 8px 14px);
  }
  .mapa-rutas a { border: 0; background: none; padding: 8px 8px 8px 8px; border-radius: var(--radio-s); width: 100%; position: relative; }
  .mapa-rutas a.activa { background: var(--tinte); }
  .mapa-rutas__nodo { width: 26px; height: 26px; }
}
.mapa-rutas__nota { margin-top: 18px; font-size: .88rem; color: var(--gris); }

.curso {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: calc(var(--radio) + 4px);
  padding: clamp(20px, 3.5vw, 40px);
  scroll-margin-top: 96px;
}
.curso + .curso { margin-top: 32px; }
.curso__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.curso__icono {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--tinte); color: var(--fucsia-osc);
  display: grid; place-items: center; flex: none;
}
.curso__icono svg { width: 30px; height: 30px; }
.curso h2 { margin: 0; }
.curso__bajada { color: var(--gris); font-size: 1.08rem; max-width: 70ch; margin-top: 12px; }

.ficha-datos { display: grid; gap: 12px; margin: 24px 0; }
@media (min-width: 760px) { .ficha-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ficha-datos div { background: var(--papel); border-radius: var(--radio-s); padding: 14px 16px; }
.ficha-datos dt { font: 600 .76rem var(--f-cifra); letter-spacing: .05em; text-transform: uppercase; color: var(--fucsia-osc); margin-bottom: 6px; }
.ficha-datos dd { margin: 0; font-size: .97rem; }

.modulos { list-style: none; padding: 0; margin: 0 0 8px; counter-reset: modulo; display: grid; gap: 8px; }
.modulos li {
  counter-increment: modulo;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--frio);
  border-radius: var(--radio-s);
}
.modulos li::before {
  content: counter(modulo, decimal-leading-zero);
  font: 600 .85rem var(--f-cifra);
  color: var(--fucsia-osc);
  background: var(--tinte);
  border-radius: 8px;
  text-align: center;
  padding: 3px 0;
}
.modulos strong { display: block; }
.modulos span { color: var(--gris); font-size: .95rem; }

.curso__bloques { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 860px) { .curso__bloques { grid-template-columns: 1fr 1fr; } }
.bloque { border-radius: var(--radio); padding: 20px 22px; background: var(--papel); }
.bloque h3 { font-size: 1.12rem; }
.bloque ul { margin: 0; }
.bloque p:last-child { margin-bottom: 0; }
.bloque--riesgos { background: var(--blanco); border: 1.5px dashed var(--grafito); }

.resuelto {
  margin-top: 24px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.resuelto__barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 18px;
  background: var(--frio);
  border-bottom: 1px solid var(--linea);
}
.resuelto__barra h3 { margin: 0; font-size: 1.1rem; }
.resuelto__cuerpo { padding: 18px; }
.resuelto__cuerpo > p:last-child { margin-bottom: 0; }

.curso__pie { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; margin: 12px 0; border-radius: var(--radio-s); border: 1px solid var(--linea); }
.tabla-numeros { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--blanco); }
.tabla-numeros caption { text-align: left; font-weight: 700; padding: 10px 12px; color: var(--grafito); caption-side: top; }
.tabla-numeros th, .tabla-numeros td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--frio); }
.tabla-numeros thead th { background: var(--papel); font-size: .82rem; color: var(--gris); font-weight: 700; }
.tabla-numeros td.num, .tabla-numeros th.num { text-align: right; font-family: var(--f-cifra); font-size: .92rem; white-space: nowrap; }
.tabla-numeros tfoot td, .tabla-numeros tfoot th { font-weight: 700; background: var(--tinte); border-bottom: 0; }
.tabla-numeros tr.destacada td { background: #FDF5F9; }

/* Diagrama de diversificación */
.diversificacion { display: grid; gap: 14px; margin: 14px 0; grid-template-columns: minmax(0, 1fr); }
.cartera { border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 14px; background: var(--blanco); }
.cartera h4 { margin: 0 0 10px; }
.cartera__bloques { display: grid; gap: 6px; }
.cartera__bloque { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: .86rem; }
.cartera__bloque .barra__pista { height: 18px; }
.cartera__total { margin-top: 10px; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cartera__total .cifra { font-family: var(--f-cifra); }

/* Ficha de un fondo (documento) */
.documento {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 6px;
  box-shadow: 6px 6px 0 var(--frio), var(--sombra);
  padding: 22px 22px 18px;
  max-width: 520px;
  margin: 18px 0;
  position: relative;
}
.documento__cabeza { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid var(--tinta); padding-bottom: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.documento__cabeza strong { font-family: var(--f-titulo); font-size: 1.1rem; }
.documento dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; font-size: .92rem; }
.documento dt, .documento dd { padding: 7px 0; border-bottom: 1px dotted var(--linea); margin: 0; }
.documento dt { color: var(--gris); font-weight: 600; padding-right: 10px; }
.documento dd { font-weight: 600; }
.documento__pie { font-size: .78rem; color: var(--gris); margin: 10px 0 0; }

/* Lista de control */
.control { margin: 16px 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
.control__titulo { font: 700 1rem var(--f-titulo); padding: 12px 16px; background: var(--panel); color: var(--blanco); margin: 0; }
.control__lista { list-style: none; padding: 0; margin: 0; }
.control__lista li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--frio); }
.control__lista li:last-child { border-bottom: 0; }
.control__caja { width: 20px; height: 20px; border: 2px solid var(--grafito); border-radius: 5px; margin-top: 3px; }

/* Gráfico de línea */
.grafico { margin: 18px 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); padding: 14px; }
.grafico svg { width: 100%; height: auto; }
.grafico figcaption { font-size: .88rem; color: var(--gris); margin-top: 8px; }
.grafico text { font-family: var(--f-texto); }

/* ---------- Recursos ---------- */
.guia { scroll-margin-top: 96px; }
.guia + .guia { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--linea); }
.guia__fecha { font: 600 .8rem var(--f-cifra); color: var(--gris); margin-bottom: 16px; display: block; }
.indice-guias { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .indice-guias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.indice-guias li { margin: 0; }
.indice-guias a { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--blanco); text-decoration: none; color: var(--tinta); font-weight: 700; }
.indice-guias a:hover { border-color: var(--fucsia); color: var(--fucsia-osc); }
.indice-guias span { display: block; font: 600 .76rem var(--f-cifra); color: var(--fucsia-osc); margin-bottom: 4px; }

.glosario { display: grid; gap: 10px; margin: 0; }
@media (min-width: 760px) { .glosario { grid-template-columns: 1fr 1fr; } }
.glosario div { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 14px 16px; }
.glosario dt { font-family: var(--f-titulo); font-weight: 700; margin-bottom: 4px; }
.glosario dd { margin: 0; color: var(--gris); font-size: .97rem; }

/* ---------- Contacto y formularios ---------- */
.contacto-diseno { display: grid; gap: 28px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .contacto-diseno { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; } }
.caja-form {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--sombra);
}
.caja-datos { display: grid; gap: 16px; }
.dato-contacto { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; }
.dato-contacto h2, .dato-contacto h3 { font-size: 1.12rem; }
.dato-contacto dl { margin: 0; }
.dato-contacto dt { font: 600 .76rem var(--f-cifra); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.dato-contacto dd { margin: 2px 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.dato-contacto dd:last-child { margin-bottom: 0; }

.formulario { display: grid; gap: 16px; }
.formulario__fila { display: grid; gap: 16px; }
@media (min-width: 640px) { .formulario__fila { grid-template-columns: 1fr 1fr; } }
.campo label, .campo__etiqueta { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px; color: var(--tinta); }
.campo__opcional { font-weight: 500; color: var(--gris); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="date"],
.campo select, .campo textarea {
  width: 100%;
  font: 500 1rem var(--f-texto);
  color: var(--tinta);
  background: var(--blanco);
  border: 1.5px solid #B9BCC8;
  border-radius: var(--radio-s);
  padding: 12px 14px;
  min-height: 48px;
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--grafito) 50%), linear-gradient(135deg, var(--grafito) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--fucsia); box-shadow: 0 0 0 3px var(--tinte); }
.campo__ayuda { font-size: .85rem; color: var(--gris); margin: 6px 0 0; }
.campo__error { font-size: .86rem; color: var(--error); font-weight: 600; margin: 6px 0 0; display: flex; gap: 6px; }
.campo__error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--error); color: var(--blanco); font-size: .72rem; flex: none; margin-top: 2px; }
.campo__error[hidden] { display: none; }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: var(--error); background: var(--error-fondo); }
.campo--check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.campo--check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--fucsia); }
.campo--check label { font-weight: 500; margin: 0; }
.campo--check .campo__error { grid-column: 2; }
.campo-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formulario__nota { font-size: .86rem; color: var(--gris); margin: 0; }

.revision[hidden] { display: none; }
.revision h3 { margin-bottom: .4em; }
.revision h3:focus { outline: none; }
.revision__texto {
  width: 100%;
  min-height: 220px;
  font: 500 .92rem/1.55 var(--f-cifra);
  padding: 14px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-s);
  background: var(--papel);
  color: var(--tinta);
  resize: vertical;
  margin: 10px 0 14px;
}
.revision__estado { font-size: .9rem; color: var(--grafito); font-weight: 600; min-height: 1.4em; margin: 10px 0 0; }
.revision__pasos { margin: 0 0 6px; padding-left: 1.2em; color: var(--gris); }

/* Diálogo (ventana de consulta) */
.dialogo {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: var(--sombra-fuerte);
  overflow: auto;
}
@supports (height: 100dvh) { .dialogo { max-height: calc(100dvh - 24px); } }
.dialogo::backdrop { background: rgba(27, 30, 38, .58); }
.dialogo__cabeza {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.dialogo__cabeza h2 { font-size: 1.25rem; margin: 0; }
.dialogo__cerrar {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--linea);
  background: var(--blanco);
  font-size: 1.5rem; line-height: 1;
  color: var(--tinta);
  cursor: pointer;
  flex: none;
}
.dialogo__cerrar:hover { background: var(--frio); }
.dialogo__cuerpo { padding: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .dialogo[open] { animation: entrada-dialogo .28s ease-out; }
  .dialogo[open]::backdrop { animation: entrada-fondo .28s ease-out; }
}
@keyframes entrada-dialogo { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes entrada-fondo { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Legales ---------- */
.legal { counter-reset: legal; }
.legal h2 { font-size: 1.35rem; margin-top: 1.8em; }
.legal h2:first-child { margin-top: 0; }
.legal__fecha { font: 600 .82rem var(--f-cifra); color: var(--gris); }
.cita-legal { background: var(--blanco); border-left: 3px solid var(--grafito); padding: 12px 16px; border-radius: 0 var(--radio-s) var(--radio-s) 0; font-size: .95rem; }

/* ---------- Pie ---------- */
.pie {
  background: var(--panel);
  color: var(--claro-panel);
  padding-top: 56px;
  margin-top: 0;
  font-size: .95rem;
}
.pie a { color: var(--rosa); }
.pie a:hover { color: var(--blanco); }
.pie :focus-visible { outline-color: var(--rosa); }
.pie__grilla { display: grid; gap: 32px; }
@media (min-width: 760px) { .pie__grilla { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1100px) { .pie__grilla { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.pie .marca { color: var(--blanco); }
.pie .marca__bajada { color: var(--claro-panel); }
.pie__descripcion { margin-top: 14px; max-width: 38ch; }
.pie h2 { font: 600 .78rem var(--f-cifra); letter-spacing: .08em; text-transform: uppercase; color: var(--blanco); margin-bottom: 14px; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin: 0 0 8px; }
.pie__lista a { color: var(--claro-panel); text-decoration: none; }
.pie__lista a:hover { color: var(--blanco); text-decoration: underline; }
.pie__contacto dt { font-size: .8rem; color: #A7ACB8; }
.pie__contacto dd { margin: 0 0 10px; color: var(--blanco); overflow-wrap: anywhere; }
.pie__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pie__boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--rosa);
  border-radius: 999px;
  color: var(--blanco) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
}
.pie__boton:hover { background: var(--rosa); color: var(--tinta) !important; }
.pie__avisos { margin-top: 40px; padding-top: 24px; border-top: 1px solid #3A3F4C; display: grid; gap: 12px; font-size: .86rem; line-height: 1.6; }
.pie__avisos p { margin: 0; max-width: 110ch; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px 28px; font-size: .86rem; color: #A7ACB8; border-top: 1px solid #3A3F4C; margin-top: 24px; }
.pie__base ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie__base li { margin: 0; }
.pie__base a { color: var(--claro-panel); }

/* ---------- Volver arriba ---------- */
.subir {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--tinta);
  color: var(--blanco);
  box-shadow: var(--sombra);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.subir[hidden] { display: none; }
.subir:hover { background: var(--fucsia); }
.subir svg { width: 20px; height: 20px; }

/* ---------- Aparición al desplazar ---------- */
.js .revelar { opacity: 0; transform: translateY(16px); }
.js .revelar.visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--orden, 0) * 80ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .revelar, .js .revelar.visible { opacity: 1; transform: none; transition: none; }
  .ruta::after { transform: scaleY(1); opacity: 0; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Impresión ---------- */
@media print {
  .franja, .cabecera, .subir, .pie__botones, .dialogo { display: none !important; }
  body { background: #fff; }
  .js .revelar { opacity: 1; transform: none; }
}