/* Estructura de la guía y plantilla fija de cada capítulo. */

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--alto-barra);
  padding: 0 calc(var(--margen) - 8px) 0 var(--margen);
  background: var(--negro);
  color: var(--blanco);
}
.barra__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  min-width: 0;
}
/* Único logo autorizado: la palabra «ceo®». Nunca el isotipo. */
.barra__logo { width: auto; height: 16px; }
.barra__titulo {
  display: none;
  padding-left: 10px;
  border-left: 1px solid var(--linea-clara);
  font: 400 0.9375rem/1 var(--fuente-titulo);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
@media (min-width: 440px) { .barra__titulo { display: inline; } }
.barra__plan {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio);
  background: transparent;
  color: var(--blanco);
  font: 600 0.6875rem/1 var(--fuente-texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.barra__plan svg { width: 14px; height: 14px; }
.barra__plan [data-icono], .barra__plan > span:first-child { display: none; }
@media (min-width: 420px) { .barra__plan > span:first-child { display: inline; } }
.barra__plan:hover { border-color: var(--blanco); }
.barra .boton-icono { color: var(--blanco); }

.progreso {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--blanco);
  transform-origin: left;
  transform: scaleX(var(--avance, 0));
}

/* ---------- Portada del capítulo ---------- */
.portada {
  position: relative;
  overflow: hidden;
  padding: 48px var(--margen) 56px;
  background: var(--negro);
  color: var(--blanco);
}
.portada__interior { position: relative; max-width: var(--ancho-herramienta); margin: 0 auto; }
.portada__numero {
  position: absolute;
  right: -0.08em;
  bottom: -0.24em;
  font: 400 min(62vw, 440px)/1 var(--fuente-titulo);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 245, 240, 0.2);
  pointer-events: none;
  user-select: none;
}
.portada h1 {
  margin: 20px 0 14px;
  max-width: 11ch;
  font-size: clamp(2.5rem, 11.5vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.portada__sub {
  margin: 0 0 40px;
  font: 400 1.25rem/1.3 var(--fuente-titulo);
  color: var(--gris);
}
.portada__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--blanco);
}
.portada__meta li { display: flex; align-items: center; gap: 8px; }
.portada__meta svg { width: 16px; height: 16px; color: var(--gris); }
.pastilla {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 0.6875rem/1.2 var(--fuente-texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Secciones ---------- */
.seccion { padding: 56px var(--margen); }
.seccion > * { max-width: var(--ancho-texto); margin-left: auto; margin-right: auto; }
.seccion + .seccion { padding-top: 8px; }

.encabezado {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}
.encabezado__n {
  font: 400 1.125rem/1 var(--fuente-titulo);
  color: var(--tinta);
}
.sobre-negro .encabezado { border-color: var(--linea-clara); }
.sobre-negro .encabezado__n { color: var(--blanco); }

.seccion h2 {
  margin-bottom: 20px;
  font-size: clamp(1.75rem, 7vw, 2.25rem);
}

/* La idea en una frase */
.idea {
  margin-top: 0;
  margin-bottom: 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--negro);
  font: 400 clamp(1.5rem, 6.6vw, 2.25rem)/1.22 var(--fuente-titulo);
  letter-spacing: -0.01em;
}

/* Texto corrido */
.texto p { margin: 0 0 1.1em; }
.texto > ul:not([class]), .certeza > ul {
  margin: 0 0 1.25em;
  padding: 0;
  list-style: none;
}
.texto > ul:not([class]) > li, .certeza > ul > li {
  position: relative;
  margin-bottom: 0.45em;
  padding-left: 22px;
}
.texto > ul:not([class]) > li::before, .certeza > ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 10px;
  height: 1px;
  background: var(--negro);
}

/* Regla destacada dentro del texto */
.regla {
  margin: 36px calc(var(--margen) * -1);
  padding: 32px var(--margen);
  background: var(--negro);
  color: var(--blanco);
}
.regla p { margin: 0; }
.regla__antes { font-size: 0.9375rem; color: var(--gris); }
.regla__frase {
  margin: 10px 0 14px !important;
  font: 400 clamp(2rem, 9.5vw, 3.25rem)/1.02 var(--fuente-titulo);
  letter-spacing: -0.02em;
}
.regla__despues { font-size: 0.9375rem; color: var(--blanco); opacity: 0.8; }
@media (min-width: 720px) {
  .regla { margin-left: 0; margin-right: 0; padding: 40px; border-radius: var(--radio); }
}

/* Lema de la marca: misma banda negra que la regla, con el texto más grande */
.regla--lema .regla__frase { font-size: clamp(1.75rem, 8vw, 2.75rem); line-height: 1.08; margin-top: 0 !important; }

/* Niveles de certeza, como muestra */
.niveles { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 1.4em; padding: 0; list-style: none; }

/* Las 6 partes de cada capítulo */
.estructura {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
@media (min-width: 600px) { .estructura { grid-template-columns: repeat(6, 1fr); } }
.estructura a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 12px;
  background: var(--blanco);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}
.estructura a:hover { background: var(--panel); }
.estructura span { font: 400 1.125rem/1 var(--fuente-titulo); }

/* Aviso médico y recuadro de la muestra */
.aviso-medico {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  margin: 28px 0;
  padding: 18px 18px 18px 16px;
  border: 1px solid var(--negro);
  border-radius: var(--radio);
  font-size: 0.9375rem;
}
.aviso-medico svg { width: 22px; height: 22px; margin-top: 1px; }
.aviso-medico p { margin: 0; }
.aviso-muestra {
  margin: 28px 0 0;
  padding: 20px;
  border: 1px dashed var(--negro);
  border-radius: var(--radio);
}
.aviso-muestra p { margin: 0 0 14px; font-size: 0.9375rem; }
.aviso-muestra .etiqueta { margin-bottom: 8px; }

/* «Mi plan» */
.plan-bloque { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--linea); }
.plan-bloque:last-child { border-bottom: 0; }
.plan-bloque .etiqueta { margin-bottom: 8px; }
.plan-bloque > a { font-size: 0.875rem; }
/* Entrar con el email de compra y la cuenta, en «Mi plan» */
.plan-entrar { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linea); }
.plan-entrar .etiqueta { margin-bottom: 8px; }
.plan-entrar__campo { display: block; margin: 16px 0 12px; }
.plan-entrar__campo input { display: block; width: 100%; height: 52px; margin-top: 8px; padding: 0 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: transparent; color: inherit; font: 500 1rem/1 var(--fuente-texto); }
.plan-entrar__campo input:focus { outline: 2px solid currentColor; outline-offset: 1px; }
.plan-entrar .boton { width: 100%; justify-content: center; }
.plan-entrar__estado { min-height: 1.5em; margin: 12px 0 0; font-size: 0.875rem; }
.plan-cuenta .boton { margin-top: 4px; }
.plan-datos { margin: 0 0 14px; }
.plan-datos div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linea-suave); font-size: 0.875rem; }
.plan-datos dt { color: var(--tinta-suave); }
.plan-datos dd { margin: 0; font-weight: 600; text-align: right; }

/* Figura: el estudio en tres grupos */
.estudio { margin: 36px 0; }
.estudio figcaption { margin-bottom: 16px; }
.estudio__titulo {
  display: block;
  margin-top: 6px;
  font: 400 1.375rem/1.2 var(--fuente-titulo);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}
.estudio__grupos {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 960px) {
  /* En pantallas grandes la figura sale de la columna de texto. */
  .estudio, .estirado, .escalera, .doble {
    position: relative;
    left: 50%;
    width: min(var(--ancho-herramienta), calc(100vw - 2 * var(--margen)));
    transform: translateX(-50%);
  }
  .estudio__grupos { grid-template-columns: repeat(3, 1fr); }
}
.grupo {
  padding: 18px 18px 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.35);
}
.grupo__nombre { margin: 0 0 2px; font: 600 1.0625rem/1.3 var(--fuente-titulo); }
.grupo__dosis { margin: 0 0 12px; font-size: 0.8125rem; color: var(--tinta-suave); }
.grupo dl { margin: 0; }
.grupo__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--linea-suave);
  font-size: 0.875rem;
}
.grupo dt { color: var(--tinta-suave); }
.grupo dd { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; text-align: right; }
.marca {
  flex: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--negro);
}
.marca--se-mantiene { background: var(--negro); }
.marca--casi { background: linear-gradient(90deg, var(--negro) 50%, transparent 50%); }
.marca--se-pierde { background: transparent; }
.estudio__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
}
.estudio__leyenda li { display: flex; align-items: center; gap: 8px; }

/* Ejemplo con el personaje */
.ejemplo {
  margin: 36px 0;
  padding: 22px 20px 6px;
  border-top: 2px solid var(--negro);
  background: var(--panel);
  border-radius: 0 0 var(--radio) var(--radio);
}
.ejemplo__datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  background: var(--linea);
  border: 1px solid var(--linea);
}
@media (min-width: 600px) {
  .ejemplo__datos { grid-template-columns: repeat(4, 1fr); }
}
.ejemplo__datos li { padding: 10px 12px; background: var(--panel); font-size: 0.75rem; color: var(--tinta-suave); }
.ejemplo__datos strong { display: block; font: 400 1.25rem/1.2 var(--fuente-titulo); color: var(--tinta); }

/* Qué hacer */
.pasos { margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos > li {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 12px;
  padding: 20px 0;
  border-top: 1px solid var(--linea);
  counter-increment: paso;
}
.pasos > li:last-child { border-bottom: 1px solid var(--linea); }
.pasos > li::before {
  content: counter(paso, decimal-leading-zero);
  grid-row: span 2;
  font: 400 1.5rem/1.1 var(--fuente-titulo);
}
.pasos h3 { font: 600 1.125rem/1.3 var(--fuente-titulo); letter-spacing: 0; }
.pasos p { margin: 0; }
.pasos ul { margin: 8px 0 0; padding: 0; list-style: none; }
.pasos ul li { position: relative; padding-left: 22px; margin-top: 4px; }
.pasos ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.82em;
  width: 10px; height: 1px;
  background: var(--negro);
}

/* Lo que dice la ciencia */
.ciencia {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.ciencia > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
}
.ciencia > summary::-webkit-details-marker { display: none; }
.ciencia__titulo { font: 400 clamp(1.375rem, 5.8vw, 1.75rem)/1.2 var(--fuente-titulo); margin-right: auto; }
.ciencia__icono { width: 22px; height: 22px; transition: transform 0.2s; }
.ciencia[open] .ciencia__icono { transform: rotate(45deg); }
.ciencia__cuerpo { padding-bottom: 28px; }
.certeza { margin: 8px 0 24px; }
.certeza > h3 { margin-bottom: 12px; }
.nivel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--negro);
  border-radius: 999px;
  font: 600 0.6875rem/1 var(--fuente-texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nivel--solido { background: var(--negro); color: var(--blanco); }
.nivel--matiz { background: transparent; }
.nivel--no { border-style: dashed; color: var(--tinta-suave); }
.estudios { font-size: 0.875rem; color: var(--tinta-suave); }
.estudios li { margin-bottom: 0.7em; }

/* Cierre Modo CEO */
.cierre {
  margin-top: 0;
  padding: 56px var(--margen) 64px;
  background: var(--negro);
  color: var(--blanco);
}
.cierre > * { max-width: var(--ancho-texto); margin-left: auto; margin-right: auto; }
.cierre__frase {
  margin: 0 auto 36px;
  font: 400 clamp(1.5rem, 6.6vw, 2.125rem)/1.25 var(--fuente-titulo);
  letter-spacing: -0.01em;
}
.cierre__cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--linea-clara);
}
.cierre__cta p { margin: 0; color: var(--gris); font-size: 0.9375rem; }
@media (min-width: 600px) {
  .cierre__cta { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Navegación entre capítulos */
.navegacion {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border-top: 1px solid var(--linea);
}
@media (min-width: 720px) { .navegacion { grid-template-columns: 1fr 1fr; } }
.navegacion a, .navegacion span {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px var(--margen);
  background: var(--blanco);
  text-decoration: none;
}
.navegacion .siguiente { text-align: right; align-items: flex-end; }
.navegacion__titulo { font: 400 1.0625rem/1.3 var(--fuente-titulo); display: flex; align-items: center; gap: 8px; }
.navegacion__titulo svg { width: 14px; height: 14px; color: var(--gris); }

.pie {
  padding: 28px var(--margen) 40px;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  text-align: center;
}
.pie p { margin: 0 auto 6px; max-width: var(--ancho-texto); }
/* Licencia del comprador: al pie de cada capítulo (la pone el servidor en los pagos y la guía en los demás) */
.licencia { margin: 28px auto 0; padding: 0 var(--margen); max-width: var(--ancho-texto); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--tinta-suave); text-align: center; }
.pie .licencia { margin-top: 10px; padding: 0; }

/* ---------- Hojas (menú, Mi plan, video) ---------- */
.hoja {
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: var(--blanco);
  color: var(--tinta);
}
.hoja::backdrop { background: rgba(0, 0, 0, 0.55); }
.hoja[open] { animation: subir 0.22s ease-out; }
@keyframes subir { from { transform: translateY(24px); } }
@media (min-width: 720px) {
  .hoja { max-width: 440px; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 0; }
  .hoja--centro { height: auto; max-height: 90vh; margin: auto; border-radius: 8px; }
  .hoja[open] { animation-name: entrar; }
  @keyframes entrar { from { transform: translateX(24px); } }
}
.hoja__cabeza {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px 10px var(--margen);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.hoja__cabeza h2 { font-size: 1.25rem; }
.hoja__cuerpo { padding: 20px var(--margen) 32px; }
.hoja__cuerpo p { margin: 0 0 1em; }

.indice { margin: 0; padding: 0; list-style: none; }
.indice li { border-bottom: 1px solid var(--linea-suave); }
.indice small { color: var(--tinta-suave); font-size: 0.8125rem; }
.indice > li > a, .indice > li > span {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 13px 0;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.indice__n { font: 400 1rem/1 var(--fuente-titulo); color: var(--tinta-suave); }
.indice > li > a, .indice > li > span { grid-template-columns: 40px 1fr auto; }
/* Encabezado de cada parte del Método C.E.O. dentro del índice */
.indice .indice__parte {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 24px 0 8px;
  border-bottom: 1px solid var(--linea);
  font: 600 0.75rem/1 var(--fuente-texto);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.indice__letra { font: 400 1.75rem/1 var(--fuente-titulo); letter-spacing: 0; color: var(--tinta); }
/* Números de capítulo de 2 o 3 caracteres (C10, E1, O4) */
.portada__numero--largo { font-size: min(40vw, 300px); }
.indice__estado { font: 600 0.625rem/1 var(--fuente-texto); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); display: flex; align-items: center; gap: 6px; }
.indice__estado svg { width: 13px; height: 13px; }
.indice .actual { font-weight: 600; }
.indice .actual .indice__n { color: var(--tinta); }
.indice .bloqueado { color: var(--tinta-suave); }

.video-marco {
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  max-height: 60vh;
  margin: 0 auto 16px;
  border-radius: var(--radio);
  background: var(--negro);
  color: var(--gris);
  text-align: center;
  font-size: 0.875rem;
}
.video-marco svg { width: 44px; height: 44px; margin: 0 auto 10px; color: var(--blanco); }
.video-marco--activo { display: block; overflow: hidden; }
.video-marco iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Gráfico: cómo funciona la guía ---------- */
.flujo { margin: 8px 0 32px; }
.flujo figcaption { margin-bottom: 14px; }
.flujo ol {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0 0 0 34px;
  list-style: none;
}
/* La línea que une los pasos */
.flujo ol::before {
  content: '';
  position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 1px;
  background: var(--linea);
}
.flujo ol::after {
  content: '';
  position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 1px;
  background: var(--negro);
  transform-origin: top;
}
.flujo li { position: relative; display: grid; gap: 2px; }
.flujo__n {
  position: absolute;
  left: -34px; top: 0;
  display: grid;
  place-items: center;
  width: 23px; height: 23px;
  border: 1px solid var(--negro);
  border-radius: 50%;
  background: var(--blanco);
  font: 400 0.6875rem/1 var(--fuente-titulo);
  z-index: 1;
}
.flujo b { font: 600 1.0625rem/1.3 var(--fuente-titulo); }
.flujo small { font-size: 0.875rem; color: var(--tinta-suave); }
@media (min-width: 720px) {
  .flujo ol { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 38px 0 0; }
  .flujo ol::before, .flujo ol::after { left: 12px; right: 12px; top: 11px; bottom: auto; width: auto; height: 1px; transform-origin: left; }
  .flujo__n { left: 0; top: -38px; }
}

/* ---------- Gráfico: volumen semanal en el tiempo (estudio del capítulo 10) ---------- */
.linea-tiempo {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
  margin: 2px 0 6px;
}
.linea-tiempo span { display: block; height: 100%; transform-origin: left bottom; }
.linea-tiempo__fase1 { flex: 16; background: var(--negro); }
.linea-tiempo__fase2 {
  flex: 32;
  height: calc(var(--dosis) * 100%) !important;
  min-height: 3px;
  background: var(--negro);
}
.linea-tiempo__fase2--vacia { height: 100% !important; background: transparent; border: 1px dashed var(--linea); }
.linea-tiempo__texto {
  display: flex;
  gap: 3px;
  margin: 0 0 14px;
  font-size: 0.6875rem;
  color: var(--tinta-suave);
  letter-spacing: 0.04em;
}
.linea-tiempo__texto span:first-child { flex: 16; }
.linea-tiempo__texto span:last-child { flex: 32; }

/* ---------- Gráfico: cuánto tarda un hábito (O1) ---------- */
.tiempo-habito { margin: 32px 0; }
.tiempo-habito figcaption { margin-bottom: 78px; }
.tiempo-habito__eje {
  --escala: 260; /* días del eje */
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--linea-suave);
}
.tiempo-habito__rango {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--desde) / var(--escala) * 100%);
  width: calc((var(--hasta) - var(--desde)) / var(--escala) * 100%);
  border-radius: 7px;
  background: var(--negro);
  transform-origin: left;
}
.tiempo-habito__marca {
  position: absolute;
  bottom: 22px;
  left: calc(var(--dia) / var(--escala) * 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  white-space: nowrap;
}
.tiempo-habito__marca::after { content: ''; width: 1px; height: 12px; margin-top: 4px; background: var(--negro); }
.tiempo-habito__marca b { font: 400 1.25rem/1 var(--fuente-titulo); }
.tiempo-habito__marca small { font-size: 0.6875rem; color: var(--tinta-suave); }
/* Las marcas 66 y 91 están cerca: la del ejercicio va debajo del eje */
.tiempo-habito__marca--ejercicio { bottom: auto; top: 22px; flex-direction: column-reverse; }
.tiempo-habito__marca--ejercicio::after { margin: 0 0 4px; }
.tiempo-habito__marca--mito b { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--tinta-suave); }
.tiempo-habito__escala { position: relative; height: 14px; margin-top: 52px; font-size: 0.6875rem; color: var(--tinta-suave); }
.tiempo-habito__escala span { position: absolute; left: calc(var(--dia) / 260 * 100%); transform: translateX(-50%); white-space: nowrap; }
.tiempo-habito__escala span:first-child { transform: none; }
.tiempo-habito__escala span:last-child { transform: translateX(-70%); }
.tiempo-habito__nota { margin: 8px 0 0 !important; font-size: 0.8125rem; color: var(--tinta-suave); }

/* Las dos reglas de O1 */
.dos-reglas { display: grid; gap: 10px; margin: 0 0 1.4em; padding: 0; list-style: none; }
@media (min-width: 600px) { .dos-reglas { grid-template-columns: 1fr 1fr; } }
.dos-reglas li { padding: 16px 18px; border: 1px solid var(--negro); border-radius: var(--radio); font-size: 0.9375rem; }
.dos-reglas li:first-child { background: var(--negro); color: var(--blanco); }
.dos-reglas li:first-child .etiqueta { color: var(--gris); }
.dos-reglas .etiqueta { display: block; margin-bottom: 8px; }
.dos-reglas strong { display: block; margin-bottom: 4px; font: 600 1.125rem/1.3 var(--fuente-titulo); }

/* ---------- C1: las 5 ideas ---------- */
.cinco-ideas { display: grid; gap: 0; margin: 8px 0 28px; padding: 0; list-style: none; counter-reset: none; }
.cinco-ideas > li {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 2px 12px;
  padding: 20px 0;
  border-top: 1px solid var(--linea);
}
@media (min-width: 600px) { .cinco-ideas > li { grid-template-columns: 64px 1fr; gap: 2px 16px; } }
.cinco-ideas > li:last-child { border-bottom: 1px solid var(--linea); }
.cinco-ideas__n { grid-row: span 2; font: 400 clamp(2.25rem, 9vw, 3rem)/0.9 var(--fuente-titulo); letter-spacing: -0.03em; }
.cinco-ideas h3 { font: 600 1.25rem/1.25 var(--fuente-titulo); letter-spacing: 0; }
.cinco-ideas p { margin: 0; }

/* ---------- C1: estirado contra no estirado ---------- */
.estirado { margin: 8px 0 32px; }
.estirado figcaption { margin-bottom: 18px; }
.estirado__sub { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--tinta-suave); }
.estirado__pares { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .estirado__pares { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.estirado__musculo { margin: 0 0 10px !important; font: 600 1.0625rem/1.2 var(--fuente-titulo); }
.estirado__barra {
  --escala: 22; /* % máximo del eje: el tríceps llega a 19,9 */
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
  padding-top: 18px;
}
.estirado__barra span {
  position: absolute;
  left: 0; top: 0;
  height: 12px;
  width: calc(var(--v) / var(--escala) * 100%);
  border: 1.5px solid var(--negro);
  border-radius: 2px;
  transform-origin: left;
}
.estirado__barra--si span { background: var(--negro); }
.estirado__barra b { font: 400 1.125rem/1 var(--fuente-titulo); }
.estirado__barra small { font-size: 0.8125rem; color: var(--tinta-suave); }
.estirado__fuente { margin: 2px 0 0 !important; font-size: 0.6875rem; color: var(--tinta-suave); letter-spacing: 0.04em; }

/* ---------- C2: cada mejora cuesta más series (Pelland y col., 2026) ---------- */
.escalera { margin: 8px 0 36px; }
.escalera figcaption { margin-bottom: 18px; }
.escalera__sub { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--tinta-suave); }
.escalera__grafico {
  padding: 18px 14px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.35);
}
@media (min-width: 720px) { .escalera__grafico { padding: 24px 28px 18px; } }
.escalera__minimo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 22px !important;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--linea);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.escalera__minimo b { flex: none; font: 400 2.25rem/1 var(--fuente-titulo); color: var(--tinta); }
.escalera__tramos {
  --alto: 150px; /* alto de la columna más alta (12,5 series) */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .escalera__tramos { --alto: 210px; } }
.escalera__tramo { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; text-align: center; }
.escalera__tramo b { margin-bottom: 8px; font: 400 clamp(0.9375rem, 4.2vw, 1.5rem)/1 var(--fuente-titulo); letter-spacing: -0.02em; white-space: nowrap; }
.escalera__columna {
  display: block;
  height: calc(var(--v) / 12.5 * var(--alto));
  margin: 0 3px;
  border: 1.5px solid var(--negro);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
}
@media (min-width: 720px) { .escalera__columna { margin: 0 8px; } }
.escalera__tramo--eficiente .escalera__columna { background: var(--negro); }
.escalera__tramo--sin-datos b { color: var(--gris); }
.escalera__tramo--sin-datos .escalera__columna { border: 1.5px dashed var(--gris); border-bottom: 0; }
.escalera__tramo small {
  padding-top: 8px;
  border-top: 1.5px solid var(--negro);
  font-size: 0.75rem;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.escalera__marca {
  order: -1;
  margin: 0 0 8px;
  font: 600 0.625rem/1.2 var(--fuente-texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.escalera__eje { margin: 10px 0 0 !important; font-size: 0.75rem; color: var(--tinta-suave); text-align: center; }
.escalera__fuente { margin: 8px 0 0 !important; font-size: 0.6875rem; color: var(--tinta-suave); letter-spacing: 0.04em; }

/* ---------- C2: series por objetivo ---------- */
.objetivos { display: grid; gap: 8px; margin: 0 0 1.4em; padding: 0; list-style: none; }
.objetivos li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 16px;
  border: 1px solid var(--negro);
  border-radius: var(--radio);
}
.objetivos b { font: 400 2rem/1 var(--fuente-titulo); letter-spacing: -0.02em; }
.objetivos small { grid-column: 1 / -1; font-size: 0.8125rem; line-height: 1.35; color: var(--tinta-suave); }
@media (min-width: 600px) {
  .objetivos { grid-template-columns: repeat(3, 1fr); }
  .objetivos li { grid-template-columns: 1fr; align-content: start; padding: 18px; }
  .objetivos b { font-size: 2.5rem; }
}

/* ---------- C3: la escala del RIR ---------- */
.rir { margin: 8px 0 32px; }
.rir figcaption { margin-bottom: 16px; }
.rir__grafico {
  padding: 18px 14px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.35);
}
@media (min-width: 720px) { .rir__grafico { padding: 24px 28px 18px; } }
.rir__cuentan, .rir__escala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 720px) { .rir__cuentan, .rir__escala { gap: 10px; } }
.rir__cuentan { margin: 0 0 8px !important; }
.rir__cuentan span {
  grid-column: 2 / -1;
  font: 600 0.625rem/1.2 var(--fuente-texto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.rir__cuentan span::after {
  content: '';
  display: block;
  height: 8px;
  margin-top: 6px;
  border: 1.5px solid var(--negro);
  border-bottom: 0;
  transform-origin: left;
}
.rir__escala { margin: 0; padding: 0; list-style: none; }
.rir__paso { display: flex; flex-direction: column; align-items: stretch; min-width: 0; text-align: center; }
.rir__paso b {
  display: grid;
  place-items: center;
  height: clamp(56px, 15vw, 88px);
  border-radius: var(--radio);
  font: 400 clamp(1.5rem, 7vw, 2.5rem)/1 var(--fuente-titulo);
  letter-spacing: -0.02em;
}
.rir__paso small { margin-top: 8px; font-size: 0.6875rem; line-height: 1.25; color: var(--tinta-suave); }
.rir__paso--no-cuenta b {
  border: 1px dashed var(--gris);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 6px);
  color: var(--tinta-suave);
}
.rir__paso--3 b { background: rgba(0, 0, 0, 0.16); }
.rir__paso--2 b { background: rgba(0, 0, 0, 0.34); }
.rir__paso--1 b { background: var(--gris-oscuro); color: var(--blanco); }
.rir__paso--0 b { background: var(--negro); color: var(--blanco); }
.rir__paso--0 small { color: var(--tinta); font-weight: 600; }
.rir__eje {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0 !important;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
  font-size: 0.75rem;
  color: var(--tinta-suave);
}
.rir__eje span:last-child::after { content: ' →'; }

/* ---------- C3 y T3: esfuerzo por tipo de ejercicio ---------- */
.esfuerzo { display: grid; gap: 8px; margin: 0 0 1.4em; padding: 0; list-style: none; }
.esfuerzo li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.herramienta .esfuerzo li { background: var(--blanco); border-color: var(--linea-suave); }
.esfuerzo p { margin: 0 !important; }
.esfuerzo__tipo b { display: block; font: 600 1.0625rem/1.25 var(--fuente-titulo); }
.esfuerzo__tipo small { display: block; margin-top: 3px; font-size: 0.8125rem; line-height: 1.35; color: var(--tinta-suave); }
.esfuerzo__reps { text-align: right; }
.esfuerzo__reps b { display: block; font: 400 1.5rem/1 var(--fuente-titulo); letter-spacing: -0.02em; white-space: nowrap; }
.esfuerzo__reps small { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
.esfuerzo__rir {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linea-suave);
  font: 600 1rem/1.3 var(--fuente-titulo);
}
.esfuerzo__etiqueta {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--negro);
  color: var(--blanco);
  font: 600 0.625rem/1.2 var(--fuente-texto);
  letter-spacing: 0.12em;
}
@media (min-width: 720px) {
  .esfuerzo li { grid-template-columns: minmax(0, 1.3fr) 5.5rem minmax(0, 1fr); align-items: center; padding: 16px 20px; }
  .esfuerzo__reps { text-align: left; }
  .esfuerzo__rir { grid-column: auto; padding-top: 0; border-top: 0; }
}
.esfuerzo__notas { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.esfuerzo__notas li { display: flex; gap: 10px; font-size: 0.875rem; line-height: 1.45; }
.esfuerzo__notas svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ---------- C3: los casos ---------- */
.casos { display: grid; gap: 10px; margin: 0 0 1.4em; padding: 0; list-style: none; }
.casos li {
  padding: 16px 18px;
  border-top: 2px solid var(--negro);
  border-radius: 0 0 var(--radio) var(--radio);
  background: var(--panel);
  font-size: 0.9375rem;
}
.casos strong { display: block; margin-bottom: 4px; font: 600 1.125rem/1.3 var(--fuente-titulo); }
.casos .casos__destacado { background: var(--negro); color: var(--blanco); }
@media (min-width: 600px) {
  .casos { grid-template-columns: 1fr 1fr; }
  .casos__destacado { grid-column: 1 / -1; }
}

/* ---------- B-roll: portada con video ---------- */
.portada__media { position: absolute; inset: 0; z-index: 0; background: var(--negro); }
.portada__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.portada__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.78) 62%, #000 100%);
}
.portada--con-video { display: flex; flex-direction: column; justify-content: flex-end; min-height: min(86svh, 760px); }
.portada--con-video .portada__numero { z-index: 1; -webkit-text-stroke-color: rgba(244, 245, 240, 0.28); }
.portada--con-video .portada__interior { z-index: 2; width: 100%; }
@media (min-width: 960px) {
  .portada--con-video { justify-content: center; min-height: 620px; }
  .portada__media {
    inset: 40px auto auto auto;
    right: max(var(--margen), calc((100% - var(--ancho-herramienta)) / 2));
    z-index: 1;
    height: calc(100% - 80px);
    width: auto;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: var(--radio);
  }
  .portada__media::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 45%); }
  .portada--con-video .portada__numero { z-index: 0; }
  .portada--con-video .portada__interior { padding-right: 340px; }
}

/* ---------- B-roll: franja entre secciones (1 clip en el celular, 3 en pantallas grandes) ---------- */
.franja { display: grid; gap: 6px; margin: 0; background: var(--negro); }
.franja__clip { position: relative; overflow: hidden; height: min(58svh, 520px); }
.franja__clip video {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  translate: 0 calc(var(--p, 0) * -6%);
}
.franja__clip--ancho { display: none; }
@media (min-width: 720px) {
  .franja { grid-template-columns: repeat(3, 1fr); }
  .franja__clip { height: min(72vh, 620px); }
  .franja__clip--ancho { display: block; }
}

/* ---------- C4: la doble progresión ---------- */
.doble { margin: 8px 0 36px; }
.doble figcaption { margin-bottom: 18px; }
.doble__grafico {
  --alto: 120px;
  padding: 18px 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.35);
}
@media (min-width: 720px) { .doble__grafico { --alto: 170px; padding: 24px 28px 18px; } }
.doble__sesiones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .doble__sesiones { gap: 16px; } }
.doble__sesiones li { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; text-align: center; }
.doble__sesiones b { margin-bottom: 8px; font: 400 clamp(0.8125rem, 3.4vw, 1.125rem)/1.1 var(--fuente-titulo); white-space: nowrap; }
.doble__series { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: var(--alto); }
.doble__series::before, .doble__series::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  border-top: 1px dashed var(--gris);
}
.doble__series::before { top: 0; border-top-color: var(--negro); } /* techo: 8 */
.doble__series::after { top: 25%; } /* piso: 6 */
.doble__series i {
  display: block;
  width: 24%;
  max-width: 20px;
  height: calc(var(--r) / 8 * 100%);
  border-radius: 2px 2px 0 0;
  background: rgba(0, 0, 0, 0.3);
  transform-origin: bottom;
}
.doble__techo .doble__series i, .doble__sube .doble__series i { background: var(--negro); }
.doble__sesiones small { padding-top: 7px; border-top: 1.5px solid var(--negro); font-size: 0.6875rem; color: var(--tinta-suave); white-space: nowrap; }
.doble__salto {
  align-self: center;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--negro);
  color: var(--blanco);
  font: 600 0.625rem/1.2 var(--fuente-texto);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.doble__leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0 !important; font-size: 0.75rem; color: var(--tinta-suave); }
.doble__leyenda span { display: flex; align-items: center; gap: 8px; }
.doble__marca { display: inline-block; width: 18px; border-top: 1px dashed var(--gris); }
.doble__marca--techo { border-top-color: var(--negro); }

/* ---------- C4: tres ritmos ---------- */
.ritmos { display: grid; gap: 10px; margin: 0 0 1.4em; padding: 0; list-style: none; }
.ritmos li { padding: 16px 18px; border: 1px solid var(--linea); border-left: 3px solid var(--negro); border-radius: var(--radio); font-size: 0.9375rem; }
.ritmos .etiqueta { display: block; margin-bottom: 6px; }
.ritmos strong { display: block; margin-bottom: 4px; font: 600 1.125rem/1.3 var(--fuente-titulo); }

/* ---------- C5: los 10 ejercicios ---------- */
.base10 { display: grid; gap: 0; margin: 0 0 1.4em; padding: 0; list-style: none; counter-reset: none; }
.base10 li {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 0 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
}
.base10 li:last-child { border-bottom: 1px solid var(--linea); }
.base10__n { grid-row: span 2; font: 400 1.5rem/1 var(--fuente-titulo); letter-spacing: -0.02em; }
.base10 b { font: 600 1.0625rem/1.3 var(--fuente-titulo); }
.base10 small { grid-column: 2; font-size: 0.8125rem; color: var(--tinta-suave); }
.base10__funcion {
  grid-column: 3;
  grid-row: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--negro);
  color: var(--blanco);
  font: 600 0.5625rem/1.3 var(--fuente-texto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.base10__accesorio .base10__n { color: transparent; -webkit-text-stroke: 1px var(--negro); }
.base10__accesorio .base10__funcion { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--negro); }

/* ---------- E y O: piezas del texto ---------- */
.mitos { display: grid; gap: 10px; margin: 0 0 1.4em; padding: 0; list-style: none; }
@media (min-width: 600px) { .mitos { grid-template-columns: 1fr 1fr; } }
.mitos li { padding: 16px 18px; border: 1px dashed var(--gris); border-radius: var(--radio); font-size: 0.9375rem; }
.mitos p { margin: 0 !important; }
.mitos__sello {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border: 1.5px solid var(--negro);
  border-radius: 2px;
  font: 600 0.625rem/1.2 var(--fuente-texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.pilares { margin: 8px 0 28px; padding: 0; list-style: none; }
.pilares > li { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; padding: 18px 0; border-top: 1px solid var(--linea); }
.pilares > li:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 600px) { .pilares > li { grid-template-columns: 56px 1fr; gap: 2px 16px; } }
.pilares__n { grid-row: span 2; font: 400 clamp(2rem, 8vw, 2.75rem)/0.9 var(--fuente-titulo); letter-spacing: -0.03em; }
.pilares h3 { font: 600 1.1875rem/1.25 var(--fuente-titulo); letter-spacing: 0; }
.pilares p { margin: 4px 0 0 !important; }

.cama { display: grid; gap: 10px; margin: 0 0 1.6em; }
.cama__fila { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; align-items: center; }
.cama__fila .etiqueta { margin: 0; }
.cama__barra {
  display: flex;
  align-items: center;
  width: calc(var(--h) / 9 * 100%);
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radio);
  transform-origin: left;
  white-space: nowrap;
}
.cama__barra b { font: 400 1rem/1 var(--fuente-titulo); }
.cama__barra--dormido { background: var(--negro); color: var(--blanco); }
.cama__barra--cama { border: 1.5px dashed var(--negro); }

.luz { display: inline-block; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--negro); border-radius: 50%; }
.semaforo-figura__fila--amarillo .luz, .luz.luz--amarillo-fija { background: linear-gradient(90deg, var(--negro) 50%, transparent 50%); }
.semaforo-figura__fila--rojo .luz { background: var(--negro); }
.semaforo-figura { margin: 8px 0 32px; }
.semaforo-figura figcaption { margin-bottom: 14px; }
.semaforo-figura__filas { margin: 0; padding: 0; list-style: none; border: 1px solid var(--linea); border-radius: var(--radio); }
.semaforo-figura__fila { display: grid; grid-template-columns: 22px 6.5rem 1fr; gap: 12px; align-items: center; padding: 14px 16px; font-size: 0.9375rem; }
.semaforo-figura__fila + .semaforo-figura__fila { border-top: 1px solid var(--linea-suave); }
.semaforo-figura__fila b { font: 600 1rem/1.2 var(--fuente-titulo); }
.semaforo-figura__nota { margin: 10px 0 0 !important; font-size: 0.75rem; color: var(--tinta-suave); }

.palancas-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.4em; padding: 0; list-style: none; }
.palancas-lista li { padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; font-size: 0.875rem; }

.cinco-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 1.6em; padding: 0; list-style: none; }
.cinco-s li { display: grid; justify-items: center; gap: 8px; padding: 18px 10px; border: 1px solid var(--linea); border-radius: var(--radio); text-align: center; }
.cinco-s b { font: 600 1.0625rem/1.2 var(--fuente-titulo); }
.cinco-s small { font-size: 0.75rem; color: var(--tinta-suave); }
.cinco-s__marca { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--negro); border-radius: 50%; }
.cinco-s__marca svg { width: 16px; height: 16px; }
.cinco-s__aparenta .cinco-s__marca { background: linear-gradient(90deg, var(--negro) 50%, transparent 50%); }
.cinco-s__drena { background: var(--negro); color: var(--blanco); }
.cinco-s__drena small { color: var(--gris); }
.tarjeta-roja { display: inline-block; flex: none; width: 18px; height: 26px; border-radius: 2px; background: var(--negro); transform: rotate(-8deg); }
.cinco-s__drena .tarjeta-roja { background: var(--blanco); }

.punto-justo { margin: 0 0 1.6em; }
.punto-justo__escala { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--negro), var(--linea) 35%, var(--linea) 65%, var(--negro)); }
.punto-justo__marca { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border: 3px solid var(--blanco); border-radius: 50%; background: var(--negro); transform: translate(-50%, -50%); box-shadow: 0 0 0 1px var(--negro); }
.punto-justo__etiquetas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin: 12px 0 0 !important; font-size: 0.75rem; color: var(--tinta-suave); }
.punto-justo__etiquetas b { font: 600 0.875rem/1.2 var(--fuente-titulo); color: var(--tinta); }
.punto-justo__etiquetas span:last-child { text-align: right; }

.tres-pasos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 1.6em; padding: 0; list-style: none; }
.tres-pasos::before { content: ''; position: absolute; left: 16%; right: 16%; top: 17px; border-top: 1px solid var(--negro); }
.tres-pasos li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.tres-pasos__n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 50%; background: var(--negro); color: var(--blanco); font: 400 1rem/1 var(--fuente-titulo); }
.tres-pasos b { font: 600 0.9375rem/1.25 var(--fuente-titulo); }
.tres-pasos small { font-size: 0.75rem; color: var(--tinta-suave); }

.orden-dia { margin: 8px 0 32px; }
.orden-dia figcaption { margin-bottom: 14px; }
.orden-dia__puntos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: punto; }
@media (min-width: 720px) { .orden-dia__puntos { grid-template-columns: repeat(4, 1fr); } }
.orden-dia__puntos li { counter-increment: punto; display: grid; gap: 6px; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio); }
.orden-dia__puntos li::before { content: '0' counter(punto); font: 400 1.5rem/1 var(--fuente-titulo); letter-spacing: -0.02em; }
.orden-dia__puntos li:last-child { background: var(--negro); color: var(--blanco); }
.orden-dia__puntos b { font: 600 0.9375rem/1.25 var(--fuente-titulo); }

.nota-capitulo { max-width: var(--ancho-texto); margin: 20px auto 0 !important; padding: 14px 18px; border-left: 2px solid var(--negro); background: var(--panel); font-size: 0.9375rem; }

/* ---------- Inicio · Cómo funciona ---------- */
.portada--inicio { min-height: min(92svh, 820px); }
.portada--inicio .portada__logo { width: auto; height: 30px; margin-bottom: 22px; }
.portada--inicio h1 { max-width: 10ch; font-size: clamp(3rem, 14vw, 6rem); }
.portada__lema {
  margin: 22px 0 28px;
  padding-left: 14px;
  border-left: 2px solid var(--blanco);
  font: 400 clamp(1.0625rem, 4.4vw, 1.375rem)/1.35 var(--fuente-titulo);
  max-width: 28rem;
}
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (min-width: 960px) {
  /* En el Inicio, el montaje ocupa toda la portada, como un hero. */
  .portada--inicio { min-height: 640px; justify-content: flex-end; padding-bottom: 72px; }
  .portada--inicio .portada__media { inset: 0; height: auto; width: auto; aspect-ratio: auto; border-radius: 0; }
  .portada--inicio .portada__media::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(0deg, #000 0%, transparent 30%); }
  .portada--inicio .portada__interior { padding-right: 0; }
}

.seccion--ancha > * , .seccion > .metodo { max-width: var(--ancho-herramienta); }
.inicio__entrada { font: 400 clamp(1.25rem, 5vw, 1.5rem)/1.4 var(--fuente-titulo); }
.inicio__subtitulo { margin: 2em 0 12px !important; }
.para-que { display: grid; gap: 10px; margin: 0 0 1em; padding: 0; list-style: none; }
.para-que li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 4px 12px; padding: 16px 18px; border-top: 2px solid var(--negro); border-radius: 0 0 var(--radio) var(--radio); background: var(--panel); font-size: 0.9375rem; }
.para-que__n { grid-row: span 2; font: 400 2rem/1 var(--fuente-titulo); }
.para-que b { font-family: var(--fuente-titulo); font-size: 1.0625rem; }

.metodo { display: grid; gap: 10px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 600px) { .metodo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .metodo { grid-template-columns: 0.8fr 1fr 1fr 1fr; } }
.metodo__parte { display: grid; align-content: start; gap: 8px; padding: 20px; border: 1px solid var(--negro); border-radius: var(--radio); }
.metodo__parte--inicio { border-color: var(--linea); background: var(--panel); }
.metodo__letra { font: 400 clamp(3.5rem, 16vw, 5rem)/0.9 var(--fuente-titulo); letter-spacing: -0.04em; }
.metodo__parte--inicio .metodo__letra { color: transparent; -webkit-text-stroke: 1.5px var(--negro); }
.metodo__parte p { margin: 0; }
.metodo__nombre { font: 600 1.375rem/1.2 var(--fuente-titulo); }
.metodo__que { font-size: 0.875rem; line-height: 1.45; color: var(--tinta-suave); }
.metodo__caps { display: flex; align-items: baseline; gap: 10px; margin-top: 8px !important; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 0.8125rem; color: var(--tinta-suave); }
.metodo__caps b { font: 400 1.75rem/1 var(--fuente-titulo); color: var(--tinta); }
.herr-grupo__letra { display: inline-grid; font-family: var(--fuente-titulo); font-weight: 400; place-items: center; width: 34px; height: 34px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); font-size: 1.125rem; letter-spacing: 0; }

.partes6 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 1.4em; padding: 0; list-style: none; }
@media (min-width: 600px) { .partes6 { grid-template-columns: repeat(3, 1fr); } }
.partes6 li { display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio); font-size: 0.875rem; line-height: 1.4; }
.partes6 li:nth-child(4) { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.partes6 span { font: 400 1.375rem/1 var(--fuente-titulo); }
.partes6 b { font-family: var(--fuente-titulo); }
.niveles-def { margin: 0 0 1em; }
.niveles-def div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
.niveles-def dd { margin: 0; font-size: 0.9375rem; }

.herr-grupo { display: flex; align-items: center; gap: 12px; margin: 28px auto 12px !important; font: 600 1.25rem/1.2 var(--fuente-titulo); }
.herr-grupo:first-of-type { margin-top: 8px !important; }
.herr-grid { display: grid; gap: 8px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 600px) { .herr-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .herr-grid { grid-template-columns: repeat(3, 1fr); } }
.herr-tarjeta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.3s var(--ease-salida, ease);
}
a.herr-tarjeta[href]:hover { border-color: var(--negro); transform: translate3d(0, -2px, 0); }
.herr-tarjeta__cap { grid-row: span 3; display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 6px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); font: 400 0.9375rem/1 var(--fuente-titulo); }
.herr-tarjeta b { font: 600 1.0625rem/1.25 var(--fuente-titulo); }
.herr-tarjeta small { font-size: 0.8125rem; line-height: 1.4; color: var(--tinta-suave); }
.herr-tarjeta__estado { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 0.6875rem/1.2 var(--fuente-texto); letter-spacing: 0.1em; text-transform: uppercase; }
.herr-tarjeta__estado svg { width: 14px; height: 14px; }
.herr-tarjeta.bloqueado { color: var(--tinta-suave); background: transparent; }
.herr-tarjeta.bloqueado .herr-tarjeta__cap { background: var(--gris); }

.semana-guia { position: relative; margin: 0 auto; padding: 0 0 0 30px; list-style: none; }
.semana-guia::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; border-left: 1.5px solid var(--negro); transform-origin: top; }
.semana-guia li { position: relative; display: grid; gap: 4px; padding: 0 0 24px; }
.semana-guia li::before { content: ''; position: absolute; left: -30px; top: 4px; width: 15px; height: 15px; border: 1.5px solid var(--negro); border-radius: 50%; background: var(--blanco); }
.semana-guia li:first-child::before, .semana-guia li:last-child::before { background: var(--negro); }
.semana-guia p { margin: 0; }
.semana-guia__cuando b { font: 600 1.125rem/1.2 var(--fuente-titulo); }
.semana-guia__cuando small { margin-left: 8px; font-size: 0.75rem; color: var(--tinta-suave); }
.semana-guia__que { font-size: 0.9375rem; }
.semana-guia__donde { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px !important; }
.semana-guia__donde a, .semana-guia__donde span { padding: 4px 10px; border-radius: 999px; font: 600 0.75rem/1.3 var(--fuente-texto); }
.semana-guia__donde a { background: var(--negro); color: var(--blanco); text-decoration: none; }
.semana-guia__donde a.bloqueado { background: var(--gris); }
.semana-guia__donde span { border: 1px solid var(--linea); color: var(--tinta-suave); }
@media (min-width: 720px) {
  .semana-guia li { grid-template-columns: 12rem 1fr auto; gap: 16px; align-items: baseline; }
  .semana-guia__cuando small { display: block; margin: 2px 0 0; }
  .semana-guia__donde { margin-top: 0 !important; justify-content: flex-end; }
}

.mi-plan-inicio { display: grid; gap: 14px; justify-items: start; margin: 0 0 1.4em; padding: 20px; border-radius: var(--radio); background: var(--panel); }
.mi-plan-inicio p { margin: 0 !important; }
.mi-plan-inicio .boton svg, .mi-plan-inicio .boton span svg { width: 16px; height: 16px; }
.moverte { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.moverte li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--linea-suave); }
.moverte li > span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--linea); border-radius: 50%; }
.moverte li > span svg { width: 18px; height: 18px; }
.moverte p { margin: 0 !important; font-size: 0.9375rem; }

.versiones { display: grid; gap: 10px; }
@media (min-width: 600px) { .versiones { grid-template-columns: 1fr 1fr; } }
.versiones__col { display: grid; align-content: start; gap: 12px; padding: 22px 20px; border: 1px solid var(--negro); border-radius: var(--radio); }
.versiones__col--completa { background: var(--negro); color: var(--blanco); }
.versiones__nombre { margin: 0; font: 400 1.625rem/1.1 var(--fuente-titulo); }
.versiones dl { margin: 0; }
.versiones dl div { padding: 10px 0; border-top: 1px solid var(--linea); }
.versiones__col--completa dl div { border-top-color: var(--linea-clara); }
.versiones dt { font: 600 0.6875rem/1.2 var(--fuente-texto); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.versiones dd { margin: 4px 0 0; font-size: 0.9375rem; }
.versiones__col .boton { justify-self: start; margin-top: 6px; }
.versiones__nota { margin-top: 14px !important; font-size: 0.875rem; color: var(--tinta-suave); }

.faq { border-bottom: 1px solid var(--linea); }
.faq details { border-top: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 600 1.125rem/1.3 var(--fuente-titulo); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { display: grid; flex: none; }
.faq summary svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease-salida, ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; font-size: 0.9375rem; color: var(--tinta-suave); }

.cierre__cta--inicio { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 14px; }
.indice__inicio .indice__n svg { width: 18px; height: 18px; }

/* ---------- C6: las preguntas del ranking ---------- */
.preguntas { display: grid; gap: 0; margin: 0 0 1.4em; padding: 0; list-style: none; }
.preguntas li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea-suave); font-size: 0.9375rem; }
.preguntas li:last-child { border-bottom: 1px solid var(--linea-suave); }
.preguntas svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* ---------- C6: los cuatro niveles (ejemplo con cuádriceps) ---------- */
.tier { margin: 8px 0 32px; }
.tier figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.tier__sub { font-size: 0.8125rem; color: var(--tinta-suave); }
.tier__filas { margin: 0; padding: 0; list-style: none; border: 1px solid var(--negro); border-radius: var(--radio); overflow: hidden; background: var(--blanco); }
.tier__fila { display: grid; grid-template-columns: 64px minmax(0, 1fr); border-top: 1px solid var(--linea); }
.tier__fila:first-child { border-top: 0; }
.tier__letra { display: grid; place-items: center; min-height: 76px; font: 700 2.25rem/1 var(--fuente-titulo); }
.tier__fila--s .tier__letra { background: var(--negro); color: var(--blanco); }
.tier__fila--a .tier__letra { background: var(--gris-oscuro); color: var(--blanco); }
.tier__fila--b .tier__letra { background: var(--gris); color: var(--blanco); }
.tier__fila--c .tier__letra { background: var(--panel); color: var(--tinta-suave); }
.tier__texto { display: block; padding: 14px 16px; font-size: 0.875rem; line-height: 1.4; color: var(--tinta-suave); }
.tier__texto b { font: 600 1rem/1.3 var(--fuente-titulo); color: var(--tinta); }
.tier__ejemplos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tier__ejemplos i { padding: 5px 10px; border: 1px solid var(--linea); border-radius: 999px; font-style: normal; font-size: 0.8125rem; line-height: 1.2; color: var(--tinta); }
.tier__fila--c .tier__ejemplos i { border-style: dashed; color: var(--tinta-suave); text-decoration: line-through; }
@media (min-width: 720px) {
  .tier__fila { grid-template-columns: 96px minmax(0, 1fr); }
  .tier__letra { min-height: 88px; font-size: 3rem; }
  .tier__texto { padding: 18px 24px; font-size: 0.9375rem; }
}

/* ---------- C6: tres sorpresas ---------- */
.sorpresas { display: grid; gap: 10px; margin: 0 0 1.6em; padding: 0; list-style: none; }
@media (min-width: 560px) {
  .sorpresas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sorpresas > li:first-child { grid-column: 1 / -1; }
}
.sorpresas > li { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--radio); }
.sorpresas .etiqueta { margin: 0; }
.sorpresas__barras { display: grid; gap: 12px; }
.sorpresas__barra { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; margin: 0 !important; padding-top: 18px; }
.sorpresas__barra span {
  position: absolute;
  left: 0; top: 0;
  height: 11px;
  width: calc(var(--v) / 6 * 100%);
  border: 1.5px solid var(--negro);
  border-radius: 2px;
  transform-origin: left;
}
.sorpresas__barra--si span { background: var(--negro); }
.sorpresas__barra b { font: 400 1.25rem/1 var(--fuente-titulo); }
.sorpresas__barra small { font-size: 0.8125rem; color: var(--tinta-suave); }
.sorpresas__igual { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 !important; }
.sorpresas__igual b { font: 600 1.25rem/1.2 var(--fuente-titulo); }
.sorpresas__igual span { display: inline-block; font: 400 2.25rem/1 var(--fuente-titulo); }
.sorpresas__fuente { margin-top: auto; font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.04em; color: var(--tinta-suave); }

/* ---------- C6: lo que conviene dejar de lado ---------- */
.dejar { display: grid; gap: 8px; margin: 0 0 1.4em; padding: 0; list-style: none; }
.dejar li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px dashed var(--linea); border-radius: var(--radio); font-size: 0.9375rem; color: var(--tinta-suave); }
.dejar b { color: var(--tinta); }
.dejar svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.dejar [data-icono], .dejar li > span:first-child { display: inline-flex; flex: none; }

/* ---------- C6: dos por músculo grande ---------- */
.parejas { display: grid; gap: 8px; margin: 0 0 1.6em; padding: 0; list-style: none; }
@media (min-width: 600px) { .parejas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.parejas li { padding: 14px 16px; border: 1px solid var(--linea); border-left: 3px solid var(--negro); border-radius: var(--radio); }
.parejas .etiqueta { display: block; margin-bottom: 8px; }
.parejas__par { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.parejas__par b { font: 600 1rem/1.25 var(--fuente-titulo); }
.parejas__par i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--negro); color: var(--blanco); font: 700 0.875rem/1 var(--fuente-texto); font-style: normal; }
.plan-datos--lista div { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.plan-datos--lista dd { font-weight: 400; line-height: 1.45; text-align: left; }

/* ---------- C7: las tres partes del hombro ---------- */
.tres-partes { display: grid; gap: 8px; margin: 0 0 1.6em; padding: 0; list-style: none; }
@media (min-width: 600px) { .tres-partes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tres-partes li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; padding: 16px; border: 1px solid var(--negro); border-radius: var(--radio); background: var(--negro); color: var(--blanco); }
@media (min-width: 600px) { .tres-partes li { grid-template-columns: 1fr; align-content: start; } }
.tres-partes__n { grid-row: span 3; font: 400 1.75rem/1 var(--fuente-titulo); color: var(--gris); }
@media (min-width: 600px) { .tres-partes__n { grid-row: auto; margin-bottom: 10px; } }
.tres-partes b { font: 600 1.25rem/1.2 var(--fuente-titulo); }
.tres-partes small { font-size: 0.8125rem; color: var(--gris); }
.tres-partes__estado { justify-self: start; margin-top: 8px; padding: 4px 10px; border: 1px solid var(--blanco); border-radius: 999px; font: 600 0.625rem/1.2 var(--fuente-texto); letter-spacing: 0.1em; text-transform: uppercase; }
.tres-partes__cubierta { background: transparent !important; color: var(--tinta) !important; border-style: dashed !important; border-color: var(--linea) !important; }
.tres-partes__cubierta small, .tres-partes__cubierta .tres-partes__n { color: var(--tinta-suave); }
.tres-partes__cubierta .tres-partes__estado { border-color: var(--linea); color: var(--tinta-suave); }

/* ---------- C7: repartir las series en la semana ---------- */
.repartir { margin: 8px 0 32px; padding: 18px 14px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(255, 255, 255, 0.35); }
@media (min-width: 720px) { .repartir { padding: 22px 26px 18px; } }
.repartir figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 16px; }
.repartir__sub { font-size: 0.8125rem; color: var(--tinta-suave); }
.repartir__semana, .repartir__fila { display: grid; grid-template-columns: 5.5rem repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }
@media (min-width: 600px) { .repartir__semana, .repartir__fila { grid-template-columns: 7rem repeat(7, minmax(0, 1fr)); gap: 6px; } }
.repartir__semana span { font: 600 0.6875rem/1 var(--fuente-texto); letter-spacing: 0.1em; text-align: center; color: var(--tinta-suave); }
.repartir__fila { margin-top: 8px; }
.repartir__nombre { font: 600 0.875rem/1.2 var(--fuente-titulo); }
.repartir__dia { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 2px; border-radius: var(--radio); background: var(--linea-suave); }
.repartir__dia i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--negro); }
@media (min-width: 600px) { .repartir__dia i { width: 10px; height: 10px; } }
.repartir__fila--antes .repartir__dia i { background: var(--gris); }
.repartir__pie { margin: 14px 0 0 !important; font-size: 0.8125rem; color: var(--tinta-suave); }

/* ---------- C7: dos planos para la lateral ---------- */
.planos { margin: 8px 0 32px; padding: 18px 14px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(255, 255, 255, 0.35); }
@media (min-width: 720px) { .planos { padding: 22px 26px 18px; } }
.planos figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.planos__sub { font-size: 0.8125rem; color: var(--tinta-suave); }
.planos svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.planos__cuerpo { fill: var(--panel); stroke: var(--negro); stroke-width: 1.5; }
.planos__cabeza { fill: var(--blanco); stroke: var(--negro); stroke-width: 1.5; }
.planos__brazo { stroke: var(--negro); stroke-width: 7; stroke-linecap: round; }
.planos__brazo--escapular { stroke: var(--gris); }
.planos__arco { fill: none; stroke: var(--negro); stroke-width: 1.5; stroke-dasharray: 3 3; }
.planos__grados { font: 600 15px var(--fuente-texto); fill: var(--tinta); }
.planos__etiqueta { font: 600 12.5px var(--fuente-texto); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--tinta); }
.planos__etiqueta--escapular { fill: var(--tinta-suave); }
.planos__adelante { font: 400 13px var(--fuente-texto); fill: var(--tinta-suave); }
.planos__flecha { fill: none; stroke: var(--tinta-suave); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.planos__pie { margin: 10px 0 0 !important; font-size: 0.875rem; color: var(--tinta-suave); }
.planos__pie b { color: var(--tinta); }

/* ---------- C8: la división según los días ---------- */
.divisiones, .minutos-series { margin: 8px 0 32px; padding: 18px 14px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(255, 255, 255, 0.35); }
@media (min-width: 720px) { .divisiones, .minutos-series { padding: 22px 26px 18px; } }
.divisiones figcaption, .minutos-series figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.divisiones__sub, .minutos-series__sub { font-size: 0.8125rem; color: var(--tinta-suave); }
.divisiones__filas { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.divisiones__filas li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--linea-suave); }
.divisiones__filas li:first-child { border-top: 0; }
.divisiones__filas b { font: 600 0.9375rem/1.2 var(--fuente-titulo); }
.divisiones__filas small { grid-column: 2; font-size: 0.75rem; color: var(--tinta-suave); }
.divisiones__sesiones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.divisiones__sesiones i { display: grid; place-items: center; min-height: 34px; padding: 4px 2px; border-radius: var(--radio); font: 600 0.625rem/1.1 var(--fuente-texto); font-style: normal; letter-spacing: 0.04em; text-align: center; overflow-wrap: anywhere; }
@media (min-width: 600px) { .divisiones__sesiones i { font-size: 0.75rem; } }
.divisiones__sesiones .d-fb { background: var(--negro); color: var(--blanco); }
.divisiones__sesiones .d-t { background: var(--gris-oscuro); color: var(--blanco); }
.divisiones__sesiones .d-p { box-shadow: inset 0 0 0 1.5px var(--negro); }
.divisiones__sesiones .d-e { background: var(--gris); color: var(--blanco); }
.divisiones__sesiones .d-tr { box-shadow: inset 0 0 0 1.5px var(--gris); color: var(--tinta-suave); }

/* ---------- C8: cuántas series entran en tus minutos ---------- */
.minutos-series__filas { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.minutos-series__filas li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) 3.25rem; align-items: center; gap: 10px; }
.minutos-series__filas b { font: 600 0.875rem/1 var(--fuente-titulo); }
.minutos-series__filas em { font: 400 1.0625rem/1 var(--fuente-titulo); font-style: normal; text-align: right; }
.minutos-series__barra { position: relative; height: 12px; border-radius: 2px; background: var(--linea-suave); overflow: hidden; }
.minutos-series__barra span { position: absolute; top: 0; bottom: 0; left: 0; transform-origin: left; }
.minutos-series__barra span:first-child { z-index: 1; width: calc(var(--a) / 30 * 100%); background: var(--negro); }
.minutos-series__barra span:last-child { width: calc(var(--b) / 30 * 100%); background: repeating-linear-gradient(135deg, var(--gris) 0 2px, transparent 2px 5px); }
.superseries-pares { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--linea); list-style: none; }
.superseries-pares li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--negro); border-radius: 999px; }
.superseries-pares b { font: 600 0.875rem/1 var(--fuente-titulo); }
.superseries-pares i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--negro); color: var(--blanco); font: 700 0.75rem/1 var(--fuente-texto); font-style: normal; }
.minutos-series__pie { margin: 12px 0 0 !important; font-size: 0.8125rem; color: var(--tinta-suave); }

/* ---------- C8: lo que no se negocia y el orden ---------- */
.innegociables { display: grid; gap: 8px; margin: 0 0 1.6em; padding: 0; list-style: none; }
@media (min-width: 600px) { .innegociables { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.innegociables li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; padding: 16px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); }
@media (min-width: 600px) { .innegociables li { grid-template-columns: 1fr; align-content: start; } }
.innegociables__n { grid-row: span 2; font: 400 2.5rem/0.9 var(--fuente-titulo); }
@media (min-width: 600px) { .innegociables__n { grid-row: auto; margin-bottom: 8px; } }
.innegociables b { font: 600 1.0625rem/1.2 var(--fuente-titulo); }
.innegociables small { font-size: 0.8125rem; line-height: 1.35; color: var(--gris); }
.orden-sesion { display: grid; gap: 6px; margin: 0 0 1.6em; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 600px) { .orden-sesion { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.orden-sesion li { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); }
.orden-sesion span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--negro); color: var(--blanco); font: 600 0.875rem/1 var(--fuente-titulo); }
.orden-sesion li:nth-child(2) span { background: var(--gris-oscuro); }
.orden-sesion li:nth-child(3) span { background: var(--gris); }
.orden-sesion b { font: 600 0.9375rem/1.25 var(--fuente-titulo); }

/* ---------- C9: la misma semana, otra prioridad ---------- */
.balanza, .anio { margin: 8px 0 32px; padding: 18px 14px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(255, 255, 255, 0.35); }
@media (min-width: 720px) { .balanza, .anio { padding: 22px 26px 18px; } }
.balanza figcaption, .anio figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.balanza__sub, .anio__sub { font-size: 0.8125rem; color: var(--tinta-suave); }
.balanza__columnas { display: grid; gap: 18px; }
@media (min-width: 600px) { .balanza__columnas { grid-template-columns: 1fr 1fr; gap: 28px; } }
.balanza__titulo { margin: 0 0 10px !important; font: 600 0.9375rem/1.2 var(--fuente-titulo); }
.balanza__col--despues .balanza__titulo::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--negro); vertical-align: 1px; }
.balanza__barras { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.balanza__barras li { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr) 2.25rem; align-items: center; gap: 8px; font-size: 0.8125rem; }
.balanza__barras i { display: block; height: 12px; width: calc(var(--v) / 16 * 100%); border: 1.5px solid var(--gris); border-radius: 2px; transform-origin: left; }
.balanza__barras b { font: 400 1rem/1 var(--fuente-titulo); text-align: right; }
.balanza__prio span, .balanza__prio b { font-weight: 600; }
.balanza__prio i { border-color: var(--negro); background: var(--negro); }
.balanza__pie { margin: 14px 0 0 !important; font-size: 0.8125rem; color: var(--tinta-suave); }

/* ---------- C9: metas de la especialización ---------- */
.metas-esp { display: grid; gap: 8px; margin: 0 0 1.6em; padding: 0; list-style: none; }
@media (min-width: 600px) { .metas-esp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.metas-esp li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; padding: 16px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); }
@media (min-width: 600px) { .metas-esp li { grid-template-columns: 1fr; align-content: start; } }
.metas-esp__n { grid-row: span 2; font: 400 2.25rem/0.9 var(--fuente-titulo); white-space: nowrap; }
@media (min-width: 600px) { .metas-esp__n { grid-row: auto; margin-bottom: 8px; } }
.metas-esp b { font: 600 1.0625rem/1.2 var(--fuente-titulo); }
.metas-esp small { font-size: 0.8125rem; line-height: 1.35; color: var(--gris); }

/* ---------- C9: un año en 4 programas ---------- */
.anio__programas { position: relative; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .anio__programas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.anio__programas li { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--negro); border-radius: var(--radio); background: var(--blanco); }
.anio__programas li:first-child { background: var(--negro); color: var(--blanco); }
.anio__programas span { font: 600 0.6875rem/1.2 var(--fuente-texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.anio__programas li:first-child span { color: var(--gris); }
.anio__programas b { font: 600 0.9375rem/1.25 var(--fuente-titulo); }

/* ---------- C11: las series de aproximación ---------- */
.aproximacion, .rodilla { margin: 8px 0 32px; padding: 18px 14px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(255, 255, 255, 0.35); }
@media (min-width: 720px) { .aproximacion, .rodilla { padding: 22px 26px 18px; } }
.aproximacion figcaption, .rodilla figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.aproximacion__sub, .rodilla__sub { font-size: 0.8125rem; color: var(--tinta-suave); }
.aproximacion__pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aproximacion__pasos li { display: grid; gap: 4px; align-content: end; }
.aproximacion__barra { display: block; margin-bottom: 8px; border: 1.5px solid var(--negro); border-radius: 2px 2px 0 0; transform-origin: bottom; }
.aproximacion__paso--1 .aproximacion__barra { height: 44px; }
.aproximacion__paso--2 .aproximacion__barra { height: 78px; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0 2px, transparent 2px 5px); }
.aproximacion__paso--3 .aproximacion__barra { height: 120px; background: var(--negro); }
.aproximacion__pasos b { font: 600 0.875rem/1.2 var(--fuente-titulo); }
.aproximacion__pasos small { font-size: 0.75rem; line-height: 1.3; color: var(--tinta-suave); }

/* ---------- C11: rango sin dolor en la prensa ---------- */
.rodilla svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; }
.rodilla__recta { stroke: var(--linea); stroke-width: 2; stroke-dasharray: 4 4; }
.rodilla__muslo { stroke: var(--negro); stroke-width: 9; stroke-linecap: round; }
.rodilla__pierna { stroke-width: 9; stroke-linecap: round; }
.rodilla__pierna--cien { stroke: var(--negro); }
.rodilla__pierna--fondo { stroke: var(--gris); stroke-dasharray: 2 12; stroke-width: 7; }
.rodilla__arco { fill: none; stroke-width: 2; }
.rodilla__arco--cien { stroke: var(--negro); }
.rodilla__arco--fondo { stroke: var(--gris); stroke-dasharray: 3 3; }
.rodilla__eje { fill: var(--blanco); stroke: var(--negro); stroke-width: 2; }
.rodilla__texto { font: 600 13px var(--fuente-texto); }
.rodilla__texto--cien { fill: var(--tinta); font-size: 16px; }
.rodilla__texto--fondo { fill: var(--tinta-suave); }
.rodilla__muslo-texto { font: 600 11px var(--fuente-texto); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--tinta-suave); }
.rodilla__pie { margin: 10px 0 0 !important; font-size: 0.875rem; color: var(--tinta-suave); }
.rodilla__pie b { color: var(--tinta); }

/* ---------- C11: resumen después de los 40 ---------- */
.reglas40 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 1.6em; padding: 0; list-style: none; }
@media (min-width: 720px) { .reglas40 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reglas40 li { display: grid; align-content: start; gap: 2px; padding: 16px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); }
.reglas40 span { margin-bottom: 8px; font: 400 2.25rem/0.9 var(--fuente-titulo); }
.reglas40 b { font: 600 1rem/1.2 var(--fuente-titulo); }
.reglas40 small { font-size: 0.75rem; line-height: 1.35; color: var(--gris); }

/* ---------- C12: tres niveles de certeza, los estudios y tú, correlación ---------- */
.certezas3, .quien, .correlacion { margin: 8px 0 32px; padding: 18px 14px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(255, 255, 255, 0.35); }
@media (min-width: 720px) { .certezas3, .quien, .correlacion { padding: 22px 26px 18px; } }
.certezas3 figcaption, .quien figcaption, .correlacion figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.certezas3__sub, .quien__sub, .correlacion__sub { font-size: 0.8125rem; color: var(--tinta-suave); }

.certezas3__niveles { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .certezas3__niveles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.certezas3__nivel { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; padding: 14px; border: 1px solid var(--linea-suave); border-radius: var(--radio); background: var(--blanco); }
.certezas3__nivel .nivel { justify-self: start; }
.certezas3__nivel b, .certezas3__nivel small { grid-column: 1 / -1; }
.certezas3__nivel b { margin-top: 6px; font: 600 1rem/1.25 var(--fuente-titulo); }
.certezas3__nivel small { font-size: 0.8125rem; line-height: 1.4; color: var(--tinta-suave); }
.certezas3__senal { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.certezas3__senal i { display: block; width: 7px; border: 1.5px solid var(--linea); border-radius: 1px; transform-origin: bottom; }
.certezas3__senal i:nth-child(1) { height: 9px; }
.certezas3__senal i:nth-child(2) { height: 15px; --k: 1; }
.certezas3__senal i:nth-child(3) { height: 22px; --k: 2; }
.certezas3__senal i.lleno { border-color: var(--negro); background: var(--negro); }
.certezas3__senal i.punteado { border-style: dashed; border-color: var(--negro); }
.certezas3__nivel--solido { border-color: var(--negro); background: var(--negro); color: var(--blanco); }
.certezas3__nivel--solido .nivel--solido { border-color: var(--blanco); background: var(--blanco); color: var(--negro); }
.certezas3__nivel--solido small { color: var(--gris); }
.certezas3__nivel--solido .certezas3__senal i.lleno { border-color: var(--blanco); background: var(--blanco); }
.certezas3__nivel--no { border: 1px dashed var(--linea); background: transparent; }

.quien__bloque + .quien__bloque { margin-top: 20px; }
.quien__titulo { margin: 0 0 8px !important; font: 600 0.75rem/1 var(--fuente-texto); letter-spacing: 0.14em; text-transform: uppercase; }
.quien__fila, .quien__escala { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 10px; }
@media (min-width: 720px) { .quien__fila, .quien__escala { grid-template-columns: 104px minmax(0, 1fr); } }
.quien__fila + .quien__fila { margin-top: 6px; }
.quien__quien { font-size: 0.8125rem; color: var(--tinta-suave); }
.quien__pista { position: relative; height: 28px; border-radius: 2px; background: var(--linea-suave); }
.quien__banda { position: absolute; top: 0; bottom: 0; left: var(--desde); width: var(--ancho); display: flex; align-items: center; padding: 0 8px; overflow: hidden; border-radius: 2px; font: 600 0.75rem/1 var(--fuente-texto); white-space: nowrap; }
.quien__banda--estudios { background: var(--negro); }
.quien__banda--tu { border: 1.5px solid var(--negro); background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 6px); color: var(--tinta); }
.quien__banda--sigue::after { content: '→'; margin-left: auto; }
.quien__banda span { padding: 2px 5px; border-radius: 2px; background: var(--blanco); }
.quien__valor { position: absolute; top: 50%; left: calc(var(--desde) + 8px); transform: translateY(-50%); font: 600 0.75rem/1 var(--fuente-texto); white-space: nowrap; }
.quien__escala { margin-top: 6px; }
.quien__marcas { position: relative; height: 14px; font-size: 0.6875rem; color: var(--tinta-suave); }
.quien__marcas i { position: absolute; top: 0; font-style: normal; white-space: nowrap; transform: translateX(-50%); }
.quien__marcas i:nth-child(1) { left: 0; transform: none; }
.quien__marcas i:nth-child(2) { left: 25%; }
.quien__marcas i:nth-child(3) { left: 50%; }
.quien__marcas i:nth-child(4) { left: 75%; }
.quien__marcas i:nth-child(5) { left: 100%; transform: translateX(-100%); }
.quien__pie { margin: 16px 0 0 !important; font-size: 0.875rem; color: var(--tinta-suave); }
.quien__pie b { color: var(--tinta); }

.correlacion svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
.correlacion__eje { stroke: var(--negro); stroke-width: 1.5; }
.correlacion__puntos circle { fill: var(--negro); fill-opacity: 0.75; }
.correlacion__recta { stroke: var(--negro); stroke-width: 2.5; stroke-linecap: round; }
.correlacion__eje-texto { font: 600 10px var(--fuente-texto); letter-spacing: 0.04em; fill: var(--tinta-suave); }
.correlacion__r { font: 600 17px var(--fuente-texto); fill: var(--tinta); }
.correlacion__lectura { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1.35; }
@media (min-width: 720px) { .correlacion__lectura { grid-template-columns: auto 1fr; gap: 20px; } }
.correlacion__lectura li { display: flex; align-items: center; gap: 8px; }
.correlacion__lectura span { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border: 1.5px solid var(--negro); border-radius: 50%; font-size: 0.75rem; font-weight: 600; }
.correlacion__lectura--si span { background: var(--negro); color: var(--blanco); }
.correlacion__lectura--no { color: var(--tinta-suave); }
.correlacion__lectura--no span { border-style: dashed; color: var(--tinta); }

/* ---------- C12: las tres preguntas ---------- */
.tres-preguntas { display: grid; gap: 8px; margin: 0 0 1.6em; padding: 0; list-style: none; }
@media (min-width: 720px) { .tres-preguntas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tres-preguntas li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; padding: 16px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); }
.tres-preguntas span { grid-row: span 2; font: 400 2.75rem/0.9 var(--fuente-titulo); }
.tres-preguntas b { font: 600 1.0625rem/1.2 var(--fuente-titulo); }
.tres-preguntas small { font-size: 0.75rem; line-height: 1.35; color: var(--gris); }

/* ---------- C13 · Anexos ---------- */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.anexos-indice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
@media (min-width: 720px) { .anexos-indice { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.anexos-indice a { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); font: 600 0.875rem/1.25 var(--fuente-titulo); text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.anexos-indice a span { font: 400 1.5rem/1 var(--fuente-titulo); color: var(--tinta-suave); }
.anexos-indice a:hover { border-color: var(--negro); background: var(--negro); color: var(--blanco); }
.anexos-indice a:hover span { color: var(--gris); }

/* Glosario */
.glosario-grupo { margin: 28px 0 0; }
.glosario-grupo > .etiqueta { margin: 0 0 10px; }
.glosario { margin: 0; border-top: 1px solid var(--negro); }
.glosario__item { display: grid; gap: 4px; padding: 12px 0 13px; border-bottom: 1px solid var(--linea); }
@media (min-width: 720px) { .glosario__item { grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; } }
.glosario dt { font: 600 1rem/1.3 var(--fuente-titulo); }
.glosario dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.glosario__caps { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: 1px; }
.glosario__cap, .bib-item__cap { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta); font: 600 0.6875rem/1.4 var(--fuente-texto); letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; transition: border-color 0.2s, background 0.2s, color 0.2s; }
a.glosario__cap:hover, a.bib-item__cap:hover { border-color: var(--negro); background: var(--negro); color: var(--blanco); }
.glosario__cap.bloqueado, .bib-item__cap--bloqueado { color: var(--tinta-suave); border-style: dashed; cursor: default; }
.glosario__cap svg { width: 10px; height: 10px; }

/* Estudios citados */
.estudios-filtros { display: grid; gap: 10px; margin: 8px 0 6px; }
@media (min-width: 720px) { .estudios-filtros { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
.estudios-buscar input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); font: 400 0.9375rem var(--fuente-texto); color: var(--tinta); }
.estudios-buscar input:focus { outline: 2px solid var(--negro); outline-offset: 2px; }
.estudios-cuenta { margin: 0 0 8px !important; font-size: 0.8125rem; color: var(--tinta-suave); }
.estudios-letra { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 10px; padding: 14px 0 4px; border-top: 1px solid var(--linea); }
.estudios-letra[hidden], .bib-item[hidden] { display: none; }
.estudios-letra__titulo { margin: 0; font: 400 1.75rem/1 var(--fuente-titulo); }
.estudios-letra ol, .estudios-otras ol { margin: 0; padding: 0; list-style: none; }
.bib-item { padding: 0 0 12px; }
.bib-item p { margin: 0 !important; }
.bib-item__cita { font-size: 0.875rem; line-height: 1.5; }
.bib-item__cita a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.bib-item__titulo { color: var(--tinta-suave); }
.bib-item__nota { font-size: 0.8125rem; color: var(--tinta-suave); }
.bib-item__caps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px !important; }
.estudios-otras { margin-top: 18px; padding: 16px 18px 6px; border: 1px dashed var(--linea); border-radius: var(--radio); }
.estudios-otras > .etiqueta { margin: 0 0 12px; }

/* Cómo se llena la planilla */
.como-se-llena { margin: 8px 0 32px; padding: 18px 14px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(255, 255, 255, 0.35); }
@media (min-width: 720px) { .como-se-llena { padding: 22px 26px 18px; } }
.como-se-llena figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.como-se-llena__sub { font-size: 0.8125rem; color: var(--tinta-suave); }
.como-se-llena__marco { overflow-x: auto; }
.como-se-llena table { width: 100%; min-width: 320px; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.como-se-llena th, .como-se-llena td { padding: 8px 6px; border-bottom: 1px solid var(--linea); text-align: center; white-space: nowrap; }
.como-se-llena tbody th, .como-se-llena tfoot th { text-align: left; font-weight: 600; }
.como-se-llena thead th { font: 600 0.6875rem/1.2 var(--fuente-texto); letter-spacing: 0.08em; text-transform: uppercase; }
.como-se-llena__compara { background: var(--negro); color: var(--blanco); }
.como-se-llena__techo { font-weight: 600; box-shadow: inset 0 -2px 0 var(--negro); }
.como-se-llena__sube { background: var(--panel); font-weight: 600; }
.como-se-llena tfoot td, .como-se-llena tfoot th { border-bottom: 0; border-top: 1.5px solid var(--negro); }
.como-se-llena tfoot b { font: 400 1.0625rem/1 var(--fuente-titulo); }
.como-se-llena__pie { margin: 12px 0 0 !important; font-size: 0.875rem; color: var(--tinta-suave); }
.como-se-llena__pie b { color: var(--tinta); }

/* Sobre el autor */
.autor { display: grid; gap: 20px; }
@media (min-width: 720px) { .autor { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; } }
.autor__foto { aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: var(--negro); }
.autor__foto--pendiente { display: grid; place-items: center; max-width: 220px; }
.autor__foto--pendiente img { width: 46%; height: auto; opacity: 0.9; }
.autor__texto h2 { margin: 0 0 4px; font-size: clamp(1.75rem, 7vw, 2.25rem); }
.autor__rol { margin: 0 0 14px; font: 600 0.75rem/1.2 var(--fuente-texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.autor__texto p { line-height: 1.6; }
.autor__lema { margin: 18px 0 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--negro); font: 400 clamp(1.125rem, 4.8vw, 1.375rem)/1.35 var(--fuente-titulo); }

/* Trabajar con Modo CEO */
.coaching { padding: 56px var(--margen) 32px; background: var(--negro); color: var(--blanco); }
.coaching__interior { max-width: var(--ancho-texto); margin: 0 auto; }
.coaching h2 { margin: 0 0 12px; font-size: clamp(1.875rem, 8vw, 2.5rem); }
.coaching__intro { margin: 0 0 22px; color: var(--gris); }
.coaching__pasos { display: grid; gap: 1px; margin: 0 0 20px; padding: 0; list-style: none; border-top: 1px solid var(--linea-clara); }
.coaching__pasos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--linea-clara); }
.coaching__pasos span { grid-row: span 2; font: 400 1.75rem/1 var(--fuente-titulo); }
.coaching__pasos b { font: 600 1.0625rem/1.25 var(--fuente-titulo); }
.coaching__pasos small { font-size: 0.875rem; line-height: 1.45; color: var(--gris); }
.coaching__duracion { margin: 0 0 20px; }
.coaching + .cierre { padding-top: 24px; }
@media (max-width: 480px) {
  .como-se-llena table { min-width: 0; font-size: 0.75rem; }
  .como-se-llena th, .como-se-llena td { padding: 8px 2px; }
  .como-se-llena thead th { font-size: 0.625rem; letter-spacing: 0.02em; text-transform: none; }
  .como-se-llena tfoot b { font-size: 0.9375rem; }
}
@media (max-width: 719px) { .autor__foto--pendiente { max-width: 150px; } }

/* ---------- Página de venta (venta.html) ---------- */
.venta-barra__probar { text-decoration: none; }
.venta-barra__comprar { min-height: 36px; padding: 0 14px; font-size: 0.6875rem; letter-spacing: 0.14em; }
.venta-barra__probar { display: none; }
@media (min-width: 380px) { .venta-barra__probar { display: inline-flex; } }

.venta .portada__sub strong { display: block; margin-bottom: 4px; color: var(--blanco); }
.venta .portada__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.venta-precio { font-weight: 400; letter-spacing: 0.06em; }
.venta-datos { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--gris); }
.venta-datos li { display: flex; align-items: baseline; gap: 6px; }
.venta-datos b { font: 400 1.75rem/1 var(--fuente-titulo); color: var(--blanco); }

.venta-titulo { margin: 0 0 22px; font-size: clamp(1.875rem, 8vw, 2.75rem); line-height: 1.08; }
.venta-subtitulo { margin: 36px 0 16px; font: 400 clamp(1.375rem, 5.6vw, 1.75rem)/1.2 var(--fuente-titulo); }

.venta-dolor { display: grid; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.venta-dolor li { position: relative; padding: 14px 16px 14px 44px; border: 1px solid var(--linea); border-radius: var(--radio); font-size: 1rem; line-height: 1.45; }
.venta-dolor li::before { content: ''; position: absolute; left: 16px; top: 22px; width: 14px; height: 1.5px; background: var(--negro); }

/* Lo que armas + «Mi plan» de ejemplo */
.venta-armas { display: grid; gap: 20px; }
@media (min-width: 960px) { .venta-armas { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.venta-armas__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .venta-armas__lista { grid-template-columns: 1fr 1fr; } }
.venta-armas__lista li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea-suave); }
.venta-armas__cap { justify-self: start; padding: 2px 8px; border: 1px solid var(--linea); border-radius: 999px; font: 600 0.6875rem/1.4 var(--fuente-texto); letter-spacing: 0.06em; }
.venta-armas__lista b { font: 600 1.125rem/1.25 var(--fuente-titulo); }
.venta-armas__lista small { font-size: 0.875rem; line-height: 1.45; color: var(--tinta-suave); }
.venta-plan { width: 100%; max-width: 380px; margin: 0 auto; }
.venta-plan__pantalla { padding: 18px 16px; border-radius: 22px; background: var(--negro); color: var(--blanco); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6); }
@media (min-width: 960px) { .venta-plan { position: sticky; top: calc(var(--alto-barra) + 24px); } }
.venta-plan__cabeza { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; }
.venta-plan__cabeza small { font-size: 0.75rem; color: var(--gris); }
.venta-plan__filas { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.venta-plan__filas li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(244, 245, 240, 0.08); }
.venta-plan__filas span { font: 600 0.625rem/1.2 var(--fuente-texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.venta-plan__filas b { font: 600 0.9375rem/1.3 var(--fuente-titulo); }

.venta-muestra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 24px; padding: 18px 20px; border: 1px dashed var(--linea); border-radius: var(--radio); }
.venta-muestra p { flex: 1 1 260px; margin: 0; font-size: 0.9375rem; }

/* Evidencia */
.venta-datos-ciencia { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
@media (min-width: 720px) { .venta-datos-ciencia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.venta-datos-ciencia li { display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); }
.venta-datos-ciencia .nivel--solido { justify-self: start; border-color: var(--blanco); background: var(--blanco); color: var(--negro); }
.venta-datos-ciencia p { margin: 0; font: 400 1.0625rem/1.35 var(--fuente-titulo); }
.venta-datos-ciencia small { font: 600 0.6875rem/1 var(--fuente-texto); letter-spacing: 0.12em; color: var(--gris); }
.venta-no-probado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0; font-size: 0.9375rem; color: var(--tinta-suave); }

.metodo--tres { margin-bottom: 8px; }
@media (min-width: 720px) { .metodo.metodo--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Para quién es */
.venta-para { display: grid; gap: 10px; }
@media (min-width: 720px) { .venta-para { grid-template-columns: 1fr 1fr; } }
.venta-para__col { padding: 20px; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea-suave); }
.venta-para__col--no { background: transparent; border: 1px dashed var(--linea); }
.venta-para__col h3 { margin: 0 0 12px; font-size: 1.25rem; }
.venta-para__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.venta-para__col li { position: relative; padding-left: 22px; font-size: 0.9375rem; line-height: 1.45; }
.venta-para__col li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--negro); }
.venta-para__col--no li::before { background: transparent; border: 1.5px solid var(--gris); }

/* La oferta */
.venta-oferta { padding: 28px 22px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); }
@media (min-width: 720px) { .venta-oferta { padding: 40px 44px; } }
.venta-oferta h2 { margin: 6px 0 20px; font-size: clamp(1.75rem, 7vw, 2.5rem); }
.venta-oferta__lista { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.venta-oferta__lista li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.venta-oferta__lista svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.venta-oferta__precio { margin: 0 0 16px; padding-top: 20px; border-top: 1px solid var(--linea-clara); }
.venta-oferta__precio b { font: 400 clamp(2rem, 9vw, 2.75rem)/1 var(--fuente-titulo); }
.venta-oferta__precio span { font-size: 0.875rem; color: var(--gris); }
.venta-oferta__boton { width: 100%; }
@media (min-width: 720px) { .venta-oferta__boton { width: auto; min-width: 260px; } }
.venta-oferta__reembolso, .venta-oferta__aviso { margin: 14px 0 0; font-size: 0.8125rem; color: var(--gris); }

.venta-cierre__botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 auto 36px; }

/* Pie */
.venta-pie { padding: 32px var(--margen) 96px; background: var(--negro); color: var(--gris); border-top: 1px solid var(--linea-clara); font-size: 0.8125rem; }
@media (min-width: 720px) { .venta-pie { padding-bottom: 40px; } }
.venta-pie__interior { display: grid; justify-items: start; gap: 14px; max-width: var(--ancho-texto); margin: 0 auto; }
.venta-pie img { width: auto; height: 16px; }
.venta-pie nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.venta-pie a { color: var(--blanco); }
.venta-pie p { margin-top: 0; margin-bottom: 0; }

/* Barra de compra del celular */
.venta-barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); background: var(--negro); color: var(--blanco); border-top: 1px solid var(--linea-clara); transform: translate3d(0, 110%, 0); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.venta-barra-movil.visible { transform: none; }
.venta-barra-movil__precio { font: 400 1.125rem/1 var(--fuente-titulo); }
.venta-barra-movil .boton { min-height: 44px; }
@media (min-width: 720px) { .venta-barra-movil { display: none; } }
@media (prefers-reduced-motion: reduce) { .venta-barra-movil { transition: none; } }