/* Estética alineada con el curso «Introducción a las inversiones» (Fraunces + IBM Plex, bone/ink/brass/teal).
   Fuentes alojadas en /fonts (OFL), sin peticiones a terceros. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --bone: #f5f4f0;
  --surface: #fffefb;
  --surface-2: #faf8f3;
  --ink: #141a22;
  --ink-2: #3c4756;
  /* El curso usa #6d7987; aquí se oscurece para llegar a 4.5:1 sobre bone. */
  --ink-3: #5f6b79;
  --brass: #b6862c;
  /* Brass como texto: el tono del curso no llega a 4.5:1 sobre fondo claro. */
  --brass-texto: #8a6418;
  --brass-soft: #f0e4c8;
  --teal: #0f6b63;
  --teal-soft: #dcefec;
  --line: #e0dcd2;
  --line-strong: #c9c4b7;
  --valido: #2f6b45;
  --invalido: #963e34;
  --foco: #0f6b63;
  --shadow: 0 1px 2px rgba(20, 26, 34, .05), 0 8px 24px -12px rgba(20, 26, 34, .18);
  --radius: 14px;

  /* Bloque del selector: oscuro en ambos temas, como .recipe del curso. */
  --sel-fondo: #141a22;
  --sel-borde-caja: #141a22;
  --sel-texto: #f5f4f0;
  --sel-suave: #c9c4b7;
  --sel-control: #1d2530;
  --sel-control-borde: #6d7987;
  --sel-acento: #b6862c;
  --sel-acento-hover: #c99a3f;
  --sel-boton-texto: #141a22;
  --sel-error: #ef9a8b;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bone: #0f141b;
    --surface: #141a22;
    --surface-2: #1a222c;
    --ink: #e9ecef;
    --ink-2: #b3bcc7;
    --ink-3: #828e9c;
    --brass: #d3a244;
    --brass-texto: #d3a244;
    --brass-soft: #3a2e17;
    --teal: #3daa9e;
    --teal-soft: #0f302e;
    --line: #26303c;
    --line-strong: #38434f;
    --valido: #7cc394;
    --invalido: #ef9a8b;
    --foco: #3daa9e;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .7);

    --sel-fondo: #1a222c;
    --sel-borde-caja: #26303c;
    --sel-texto: #e9ecef;
    --sel-suave: #b3bcc7;
    --sel-control: #0f141b;
    --sel-control-borde: #6b7786;
    --sel-acento: #d3a244;
    --sel-acento-hover: #e0b45c;
    --sel-boton-texto: #0f141b;
  }
  /* Sin variante oscura del wordmark: cápsula clara ceñida a la moneda, no recuadro. */
  .wordmark { background: #f5f4f0; border-radius: 999px; padding: 3px 6px 3px 3px; }
}

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.contenedor { max-width: 72rem; margin: 0 auto; padding: 0 16px; }

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

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.selector :focus-visible { outline-color: var(--sel-acento); }

.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 1; }

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

.cabecera { padding: 18px 0 0; }
.wordmark { display: block; height: 44px; width: auto; }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  text-wrap: balance; color: var(--ink);
}
h1 {
  font-size: clamp(2.4rem, 6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.028em;
  margin: 0.5rem 0 1.25rem; max-width: 16ch;
}
h1 em { font-style: italic; color: var(--brass-texto); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.022em; margin: 0 0 0.75rem; }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; margin: 0; }

/* Secciones separadas por una línea fina, como .step del curso. */
main > .contenedor { padding-top: 48px; padding-bottom: 48px; }
.apertura, .definicion, .resultados { border-bottom: 1px solid var(--line); }

main > .apertura { padding-top: 40px; padding-bottom: 48px; }
.etiqueta {
  display: inline-block; margin: 0; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-texto);
}
.entradilla {
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem); line-height: 1.55;
  color: var(--ink-2); max-width: 56ch; margin: 0 0 0.75rem;
}
.nota-edad, .subtitulo { color: var(--ink-2); max-width: 60ch; }
.nota-edad { font-size: 0.9375rem; color: var(--ink-3); }

/* Nota con filete teal, como .note del curso. */
.nota {
  margin: 1.5rem 0 0; padding: 16px 20px; max-width: 65ch;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0; font-size: 0.97rem; color: var(--ink-2);
}

/* Selector: bloque oscuro como .recipe del curso. */
.selector {
  margin: 2rem 0 0; padding: 24px; max-width: 34rem;
  background: var(--sel-fondo); color: var(--sel-texto);
  border: 1px solid var(--sel-borde-caja); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.selector label {
  display: block; margin-bottom: 0.75rem;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
}
.selector-fila { display: flex; flex-wrap: wrap; gap: 8px; }
select, button { font: inherit; min-height: 48px; border-radius: 10px; }
select {
  flex: 1 1 10rem; padding: 0 12px; color: var(--sel-texto); background: var(--sel-control);
  border: 1px solid var(--sel-control-borde);
}
select[aria-invalid="true"] { border-color: var(--sel-error); }
.boton-principal {
  flex: 0 0 auto; padding: 0 22px; border: 0; font-weight: 600; cursor: pointer;
  background: var(--sel-acento); color: var(--sel-boton-texto);
}
.boton-principal:hover { background: var(--sel-acento-hover); }
.selector .ayuda { color: var(--sel-suave); font-size: 0.875rem; margin: 0.85rem 0 0; }
.error { color: var(--invalido); font-weight: 600; margin: 0.85rem 0 0; }
.selector .error { color: var(--sel-error); }

.boton-secundario {
  padding: 0 20px; cursor: pointer; font-weight: 600;
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink);
}
.boton-secundario:hover { background: var(--ink); color: var(--bone); }
.boton-principal, .boton-secundario { transition: background-color 0.15s, color 0.15s, transform 0.1s; }
.boton-principal:active, .boton-secundario:active { transform: translateY(1px); }

.definicion > p { max-width: 65ch; }

/* Ejemplos: panel partido, como .vs del curso. */
.ejemplos {
  display: grid; margin: 1.5rem 0 0; max-width: 56rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.ejemplo { margin: 0; padding: 20px 22px; border-top: 3px solid transparent; }
.ejemplo + .ejemplo { border-top: 3px solid transparent; box-shadow: inset 0 1px 0 var(--line); }
.ejemplo p { margin: 0.35rem 0 0; }
.ejemplo-valido { border-top-color: var(--valido); }
.ejemplo-invalido { border-top-color: var(--invalido); }
.ejemplo-tipo {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ejemplo-valido .ejemplo-tipo { color: var(--valido); }
.ejemplo-invalido .ejemplo-tipo { color: var(--invalido); }

.resultados { scroll-margin-top: 8px; }
.selector { scroll-margin-top: 8px; }
.resultados h2:focus { outline: none; }
.resultados h2:focus-visible { outline: 3px solid var(--foco); }

/* Fichas: tarjetas como .card del curso. */
.fichas { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 14px; }
.ficha article {
  height: 100%; padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  font-size: 0.97rem; line-height: 1.55;
}
.ficha h3 { font-size: 1.25rem; line-height: 1.25; }
.desde {
  margin: 0.45rem 0 0.4rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-texto);
}
.ficha dl { margin: 0; }
.ficha dt {
  margin-top: 0.85rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.ficha dd { margin: 0.15rem 0 0; color: var(--ink-2); }
.ficha dt:last-of-type { margin-top: 1rem; color: var(--teal); }
.ficha dd:last-of-type {
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0; color: var(--ink-2);
}

.acciones-resultados { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; }
.enlace-accion { font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; }

.enlaces { padding-left: 1.25rem; }
.enlaces li { margin: 0.5rem 0; }
.enlaces li::marker { color: var(--brass); }
.pendiente { color: var(--ink-3); }
.pendiente span { font-size: 0.875rem; font-style: italic; }

.pie { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.nota-uso { color: var(--ink-3); font-size: 0.875rem; max-width: 70ch; }
.firma { font-family: var(--font-display); font-weight: 600; color: var(--ink-2); margin-bottom: 0; }

@media (min-width: 40rem) {
  main > .contenedor { padding-top: 64px; padding-bottom: 64px; }
  .ejemplos { grid-template-columns: 1fr 1fr; }
  .ejemplo + .ejemplo { box-shadow: inset 1px 0 0 var(--line); }
  .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 64rem) {
  main > .apertura {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    grid-template-areas: "etiqueta selector" "titulo selector" "entradilla selector" "edad selector";
    column-gap: clamp(3rem, 7vw, 6.5rem); align-items: center;
    padding-top: 72px; padding-bottom: 64px;
  }
  .apertura > .etiqueta { grid-area: etiqueta; align-self: end; }
  .apertura > h1 { grid-area: titulo; margin-top: 0.4rem; }
  .apertura > .entradilla { grid-area: entradilla; }
  .apertura > .nota-edad { grid-area: edad; margin-top: 0; }
  .apertura > .selector { grid-area: selector; margin: 0; width: 100%; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}