/* Secciones comunes de las 4 opciones. Cada página define sus colores y su letra de títulos:
   --bg --soft --ink --mid --line --g --ease  y  --tf (fuente) --tw (peso) --tt (mayúsculas) --ts (espaciado) */
.full h2 { font-family: var(--tf); font-weight: var(--tw, 400); text-transform: var(--tt, none); letter-spacing: var(--ts, 0); }
.full h3 { font-family: var(--tf); font-weight: var(--tw, 400); text-transform: var(--tt, none); letter-spacing: var(--ts, 0); font-style: normal; color: var(--ink); margin: 0; }
.full .lead { color: var(--mid); max-width: 46ch; margin: 0 auto 2.5rem; text-align: center; }
.full .center { text-align: center; }

/* Mi historia, texto completo */
.story-more { display: grid; gap: 1rem; }
.story-more .sign { font-family: var(--tf); font-size: 1.8rem; font-style: italic; color: var(--ink); margin-top: .5rem; }

/* Capacitaciones */
.courses { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 1040px; margin: 0 auto; counter-reset: c; }
.course { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: .5rem; text-align: left; counter-increment: c; border: 1px solid var(--line); }
.course::before { content: counter(c, decimal-leading-zero); font-family: var(--tf); font-size: 1.4rem; color: var(--mid); }
.course h3 { font-size: 1.3rem; line-height: 1.3; }
.course p { color: var(--mid); }
.course .meta { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }

/* Mi recorrido */
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1040px; margin: 0 auto; border-top: 1px solid var(--line); padding-top: 2rem; text-align: center; }
.path li { display: grid; gap: .4rem; justify-items: center; }
.path .yr { font-family: var(--tf); font-size: 1.7rem; font-style: italic; color: var(--ink); }
.path p { color: var(--mid); font-size: .95rem; max-width: 20ch; }

/* Cómo trabajamos */
.steps { max-width: 820px; margin: 0 auto; counter-reset: s; border-top: 1px solid var(--line); text-align: left; }
.steps li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font-family: var(--tf); font-size: 1.4rem; color: var(--mid); }
.steps h3 { font-size: 1.25rem; line-height: 1.3; }
.steps p { color: var(--mid); }

/* Tips */
.tips { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); counter-reset: t; text-align: left; }
.tip { border-bottom: 1px solid var(--line); counter-increment: t; }
.tip summary { display: grid; grid-template-columns: 3.25rem 1fr auto; gap: 1rem; align-items: center; padding: 1.4rem 0; cursor: pointer; list-style: none; }
.tip summary::-webkit-details-marker { display: none; }
.tip summary::before { content: counter(t, decimal-leading-zero); font-family: var(--tf); font-size: 1.4rem; color: var(--mid); }
.tip summary::after { content: "+"; font-size: 1.4rem; color: var(--mid); transition: transform 220ms var(--ease); }
.tip[open] summary::after { transform: rotate(45deg); }
.tip summary h3 { font-size: 1.2rem; line-height: 1.35; }
.tip p { padding: 0 0 1.5rem 4.25rem; color: var(--mid); }

/* Contacto */
.contact { text-align: center; display: grid; justify-items: center; gap: 1.25rem; }
.contact p { color: var(--mid); max-width: 46ch; }
.contact .links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.contact .mail { color: var(--mid); text-underline-offset: .3em; }

.foot { text-align: center; padding: 3rem var(--g); border-top: 1px solid var(--line); color: var(--mid); font-size: .9rem; display: grid; gap: .3rem; }
.foot b { font-family: var(--tf); font-weight: var(--tw, 400); font-size: 1.5rem; color: var(--ink); text-transform: var(--tt, none); letter-spacing: var(--ts, 0); }

@media (max-width: 760px) {
  .courses { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
  .tip summary { grid-template-columns: 2.5rem 1fr auto; }
  .tip p { padding-left: 3.5rem; }
}

/* Botones dentro de las secciones comunes (sobre fondo claro en las 4 opciones) */
.full .btn { display: inline-block; padding: 1rem 2rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; transition: transform 160ms var(--ease); }
.full .btn--dark { background: var(--ink); color: var(--bg); }
.full .btn:active { transform: scale(.97); }

/* Selector de versiones: píldora fija abajo, igual en computadora y teléfono */
.versiones {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: .25rem; padding: .35rem;
  background: rgb(43 43 43 / .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .45);
  font: 500 .78rem/1 system-ui, sans-serif; letter-spacing: .06em;
}
.versiones span { color: rgb(255 255 255 / .7); padding: 0 .6rem 0 .75rem; white-space: nowrap; }
.versiones a {
  display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .9rem; border-radius: 999px;
  color: #fff; text-decoration: none; transition: background-color 200ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.versiones a:active { transform: scale(.94); }
.versiones a[aria-current="page"] { background: #fdfdfd; color: #2b2b2b; }
@media (hover: hover) and (pointer: fine) { .versiones a:not([aria-current="page"]):hover { background: rgb(255 255 255 / .16); } }
.foot { padding-bottom: 6rem; } /* que la píldora no tape el pie */