/* =====================================================================
   SEMANA 04 — TRABAJO DE APLICACION, PRIMERA ENTREGA
   Hoja propia de la pagina. No entra al bundle: styles.css ya va por
   3.500 lineas y lo descargan las doce paginas del sitio.

   La identidad visual de esta pagina es EL PLANO DE DECISION. Todo el
   entregable consiste en cruzar variables para caer en un cuadrante, y
   por eso el recurso que se repite es el plano con ejes: en el hero
   (matriz IE), en la parada 08 (las cuatro herramientas) y en las
   miniaturas de convergencia. No es decoracion: es la forma del
   argumento.

   Los estados ocultos de partida cuelgan TODOS de body.s4-js, clase que
   pone el propio semana-04.js en su primera linea. Sin JS no hay nada
   invisible. Es la trampa que ya costo cara cuatro veces en este
   proyecto y aqui esta blindada por construccion.
   ===================================================================== */

/* =====================================================================
   0. TOKENS LOCALES
   Los tokens de entidad son los mismos de semana-03 para que el lector
   que venga de aquella pagina no tenga que reaprender el color:
   El Encanto = --accent, Sary = --dato, Sonsonena = --serie3.

   Lo nuevo aqui es el eje FAVORABLE / ADVERSO, que gobierna el PESTEL y
   las cinco fuerzas. Se apoya en los mismos dos tonos porque la escena
   ya los interpola con el scroll; un token nuevo se quedaria congelado
   al llegar al tramo claro. El color NUNCA es el unico canal: cada
   celda lleva ademas la palabra.
   ===================================================================== */
.s4 {
  --ent-ee: var(--accent);
  --ent-sa: var(--dato);
  --ent-so: var(--serie3);

  --fav: var(--accent);
  --adv: var(--dato);
  --neu: var(--fuera);

  --s4-gap: clamp(18px, 2.6vw, 30px);
  --s4-panel: color-mix(in srgb, var(--bg-elev) 92%, var(--text) 8%);
  --s4-linea: color-mix(in srgb, var(--border-strong) 100%, transparent);
  --s4-medida: 68ch;
}

/* Superficies del navegador. Son las partes que no dibujamos y que
   llegan con los valores por defecto de nadie. */
.s4 ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }
.s4 { scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--bg)) transparent; scrollbar-width: thin; }
.s4 :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.s4 a { text-underline-offset: .22em; }

/* =====================================================================
   1. HERO — EL PLANO DE DECISION
   El unico momento animado con autoria propia de la pagina. Todo lo
   demas usa la entrada por scroll compartida. Dos entradas animadas
   seguidas se anulan entre si.
   ===================================================================== */
.s4-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(96px, 13vh, 150px) clamp(64px, 9vh, 104px);
}

/* Retícula de fondo: la pauta del propio plano, muy tenue. No es una
   textura decorativa, es el mismo instrumento de la pagina a escala de
   fondo. Se apaga hacia los bordes para no competir con el texto. */
.s4-hero-malla {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 12%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 12%, transparent 78%);
  opacity: .85;
}

/* El fondo vivo del hero. La reticula de arriba es el respaldo quieto y
   este lienzo pinta encima LA CONVERGENCIA: trazos que entran por bordes
   distintos y acaban todos en el mismo punto. Nace invisible y solo lo
   enciende el JS, para que sin JS no quede un rectangulo muerto. */
.s4-hero-campo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.s4-hero-campo.is-live { opacity: 1; }

/* Cuando el lienzo vive, la reticula estatica baja de intensidad: si no,
   se suman las dos pautas y el fondo compite con el titular. */
.s4-hero.is-campo .s4-hero-malla { opacity: .4; transition: opacity 1.1s ease; }

.s4-hero .doc-header-inner { position: relative; z-index: 2; }

.s4-hero-logo {
  display: block;
  width: clamp(150px, 17vw, 232px);
  height: auto;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.s4-hero-titulo {
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.035em;
  margin: 0 0 .38em;
  text-wrap: balance;
}

.s4-hero-sub {
  font-family: var(--font-display);
  font-size: clamp(.94rem, 1.7vw, 1.12rem);
  letter-spacing: .01em;
  color: var(--text-muted);
  margin: 0 0 1.1em;
}
.s4-hero-sub b { color: var(--text); font-weight: 600; }
.s4-hero-sub span {
  display: block;
  margin-top: .3em;
  font-size: .86em;
  color: var(--text-faint);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.s4-hero-lead {
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---- El plano IE del hero ---------------------------------------- */
.s4-plano {
  margin-top: clamp(30px, 4.6vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(22px, 3.4vw, 46px);
  align-items: start;
}

.s4-plano-caja {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-elev) 74%, transparent);
  padding: clamp(16px, 2.4vw, 26px);
}

.s4-plano-tit {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 14px;
}

.s4-ie {
  position: relative;
  display: grid;
  grid-template-columns: 26px repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(58px, auto)) 26px;
  gap: 3px;
}

/* Rotulos de los ejes: van FUERA de la rejilla de celdas, en su propia
   pista de 26px. Dentro de una celda le robarian sitio al numero. */
.s4-ie-ejey {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.s4-ie-ejex {
  grid-column: 2 / 5;
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.s4-ie-celda {
  position: relative;
  border-radius: 8px;
  padding: 8px 9px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid transparent;
  min-width: 0;
}
.s4-ie-celda[data-zona="crecer"]    { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.s4-ie-celda[data-zona="mantener"]  { background: color-mix(in srgb, var(--text) 8%, transparent); }
.s4-ie-celda[data-zona="cosechar"]  { background: color-mix(in srgb, var(--dato) 11%, transparent); }

.s4-ie-n {
  display: block;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1;
}
.s4-ie-z {
  display: block;
  margin-top: 5px;
  font-size: .6rem;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Las dos celdas que importan */
.s4-ie-celda.is-actual {
  border-color: color-mix(in srgb, var(--dato) 60%, transparent);
  background: color-mix(in srgb, var(--dato) 20%, transparent);
}
.s4-ie-celda.is-meta {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.s4-ie-celda.is-actual .s4-ie-n,
.s4-ie-celda.is-meta .s4-ie-n { color: var(--text); }

/* El punto que cae y el que se alcanza. La traslacion del primero al
   segundo es LA animacion de la pagina. */
.s4-ie-punto {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -6.5px 0 0 -6.5px;
  background: var(--dato);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--dato) 55%, transparent);
}
.s4-ie-punto.is-meta {
  background: var(--accent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* El alto y el ancho van EXPLICITOS. Un <svg> posicionado en absoluto con
   `inset: 0` pero sin medidas propias no obedece al `bottom`: es un
   elemento reemplazado y toma su tamano intrinseco, que aqui es el
   cuadrado del viewBox. Con la matriz a 760px de ancho eso dibujaba un
   lienzo de 760x760 y la flecha caia 400px por debajo de la caja, sobre
   el texto del capitulo. */
.s4-ie-flecha {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.s4-ie-flecha path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke-width: 1.6;
  stroke-dasharray: 4 4;
}

/* Sin JS los dos puntos y la flecha se ven ya en su sitio: no es una
   animacion pendiente, es un dato. Con JS, el punto ambar cae primero y
   el cian aparece despues, que es el orden en que se lee el hallazgo. */
.s4-ie.is-live .s4-ie-punto:not(.is-meta) {
  animation: s4Cae .85s cubic-bezier(.16,1,.3,1) both;
}
.s4-ie.is-live .s4-ie-punto.is-meta {
  animation: s4Aparece .7s cubic-bezier(.16,1,.3,1) .95s both;
}
.s4-ie.is-live .s4-ie-flecha path {
  stroke-dashoffset: 90;
  animation: s4Traza 1s linear .8s forwards;
}
@keyframes s4Cae {
  from { transform: translateY(-34px) scale(.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes s4Aparece {
  from { transform: scale(.2); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes s4Traza { to { stroke-dashoffset: 0; } }

.s4-ie-pie {
  margin: 16px 0 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}
.s4-ie-pie b { color: var(--text); font-weight: 600; }

/* ---- Los tres instrumentos que confirman -------------------------- */
.s4-conf {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s4-conf-t {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 2px;
}
.s4-conf-i {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elev) 60%, transparent);
}
.s4-conf-mini {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.s4-conf-mini i { border-radius: 2px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.s4-conf-mini i.on { background: var(--accent); }
.s4-conf-nom { font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.s4-conf-ver { display: block; margin-top: 3px; font-size: .74rem; color: var(--text-muted); line-height: 1.35; }

@media (max-width: 900px) {
  .s4-plano { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .s4-ie { grid-template-columns: 20px repeat(3, minmax(0, 1fr)); }
  .s4-ie-z { display: none; }
  .s4-ie-celda { padding: 7px 6px; }
}

/* =====================================================================
   2. GUIA DE NAVEGACION — LAS SIETE PARADAS
   Aqui la numeracion 03..09 NO es decorativa: es el numero de capitulo
   que exige la plantilla del docente, y el evaluador busca por ese
   numero. Ese es el unico motivo por el que la pagina numera.
   ===================================================================== */
.s4-guia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 26px;
}
/* Siete capitulos en cuatro columnas: 4+3. Con auto-fit el ancho grande
   daba cinco, y una segunda fila de dos deja tres huecos seguidos que se
   leen como si faltara algo. */
@media (min-width: 1080px) {
  .s4-guia-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* En reposo la tarjeta ensena solo el numero, el capitulo y su duracion:
   la fila entera cabe en un vistazo. La descripcion se descubre al pasar
   el cursor. Para que ese crecimiento no empuje a las vecinas, la que
   crece SACA SU INTERIOR DEL FLUJO y se desborda por debajo de su celda,
   asi que el alto de la fila lo siguen fijando las demas. Es la misma
   solucion de las tarjetas del equipo en la portada, y la unica que no
   provoca un salto de maquetacion. */
.s4-parada {
  position: relative;
  display: block;
  min-height: 124px;
  text-decoration: none;
  color: inherit;
  z-index: 0;
}
.s4-parada:hover,
.s4-parada:focus-within { z-index: 3; }

.s4-parada-in {
  position: absolute;
  inset: 0 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 72%, var(--bg));
  overflow: hidden;
  transform-origin: 50% 0;
  transition:
    border-color .34s cubic-bezier(.16,1,.3,1),
    background .34s cubic-bezier(.16,1,.3,1),
    box-shadow .34s cubic-bezier(.16,1,.3,1),
    transform .34s cubic-bezier(.16,1,.3,1);
}

/* La regla de acento se traza de izquierda a derecha al entrar. Es el
   mismo gesto del eje que se dibuja en el resto de la pagina. */
.s4-parada-in::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}

.s4-parada-n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
  transition: color .3s ease, transform .34s cubic-bezier(.16,1,.3,1);
}
.s4-parada-t { font-family: var(--font-display); font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.s4-parada-d { font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
.s4-parada-min {
  margin-top: auto;
  padding-top: 6px;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* El pliegue solo existe donde hay un cursor de verdad. En tactil y sin
   JS la descripcion va siempre visible: nadie puede pasar el raton. */
@media (hover: hover) and (pointer: fine) {
  body.s4-js .s4-parada-d {
    max-height: 0;
    opacity: 0;
    transition: max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  }
  body.s4-js .s4-parada:hover .s4-parada-d,
  body.s4-js .s4-parada:focus-within .s4-parada-d {
    max-height: 7.5em;
    opacity: 1;
  }
  body.s4-js .s4-parada:hover .s4-parada-in,
  body.s4-js .s4-parada:focus-within .s4-parada-in {
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    /* en color y no en atajo: el atajo reiniciaria background-image y
       se llevaria por delante la luz que sigue al cursor. */
    background-color: color-mix(in srgb, var(--bg-elev) 96%, var(--accent));
    box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .78);
    transform: translateY(-3px);
  }
  body.s4-js .s4-parada:hover .s4-parada-in::before,
  body.s4-js .s4-parada:focus-within .s4-parada-in::before { transform: scaleX(1); }
  body.s4-js .s4-parada:hover .s4-parada-n,
  body.s4-js .s4-parada:focus-within .s4-parada-n {
    color: var(--accent);
    transform: translateY(-1px);
  }
}

/* Las DOS claves de la pagina. Van separadas porque codifican cosas
   distintas y nunca coinciden en un mismo grafico: una nombra marcas y
   la otra califica el efecto de un hecho. Compartir tono entre las dos
   —El Encanto y «favorable» en el mismo cian— hacia creer que el color
   significaba una sola cosa.

   Los dos tonos del eje favorable/adverso NO se cambian: son var(--accent)
   y var(--dato) porque la escena los interpola con el scroll y un token
   propio se quedaria congelado al llegar al tramo claro. Lo que se
   diferencia es la FORMA, que ademas es el unico canal que sigue vivo
   para quien no distingue esos dos tonos. */
.s4-claves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.s4-claves .s4-clave { margin-top: 0; }

/* Triangulo arriba para lo favorable, abajo para lo adverso, rombo para
   lo mixto. */
.is-efecto .sw-fav { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.is-efecto .sw-adv { clip-path: polygon(50% 100%, 100% 0, 0 0); border-radius: 0; }
.is-efecto .sw-neu { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; }
.is-efecto .s4-swatch { width: 12px; height: 12px; }

/* La clave de color de la pagina */
.s4-clave {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elev) 45%, transparent);
  font-size: .82rem;
  color: var(--text-muted);
}
.s4-clave-t { font-family: var(--font-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.s4-clave-i { display: inline-flex; align-items: center; gap: 8px; }
.s4-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.sw-ee { background: var(--ent-ee); }
.sw-sa { background: var(--ent-sa); }
.sw-so { background: var(--ent-so); }
.sw-fav { background: var(--fav); }
.sw-adv { background: var(--adv); }
.sw-neu { background: var(--neu); }

/* =====================================================================
   3. SHELL DE CAPITULO — EL UMBRAL

   OJO CON LA ESPECIFICIDAD. styles.css trae `.doc-section h2` y
   `.doc-section h3` con tamano fijo, y eso son 0,1,1: le ganan a `.s4-h2`
   y `.s4-h3`, que son 0,1,0. Durante toda la vida de esta pagina los
   siete titulos de capitulo salieron a 24px —los mismos 24px del titular
   de una tarjeta— mientras el hero iba a 86px, y por eso el trabajo se
   leia como un documento y no como una pagina: no habia umbral entre un
   capitulo y el siguiente. La correccion es prefijar con `.s4` para
   subir a 0,2,0 y NO tocar styles.css, que lo descargan las doce
   paginas del sitio y obligaria a subir la version en todas.

   El capitulo abre como abre todo en esta pagina: con un eje. Una
   hairline que cruza la seccion de lado a lado y el numero de capitulo
   posado encima como la marca de una escala. No es adorno: la
   numeracion 03..09 es la que exige la plantilla del docente y es por
   donde el evaluador busca.
   ===================================================================== */
.s4 .s4-cap-cab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.8vw, 22px);
  margin-bottom: 12px;
  padding-top: clamp(20px, 2.6vw, 32px);
}

/* El eje se tinta desde --text y no desde --border-strong: --text es de
   los que la escena interpola con el scroll, asi que la linea sigue viva
   en el tramo claro. Con un token que no se interpola, la linea existe
   en oscuro y desaparece en blanco. */
.s4 .s4-cap-cab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.05s cubic-bezier(.16,1,.3,1);
}
.s4 .s4-cap-cab.is-in::before { transform: scaleX(1); }
body:not(.s4-js) .s4-cap-cab::before { transform: scaleX(1); }

.s4 .s4-cap-n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.045em;
  color: color-mix(in srgb, var(--accent) 44%, transparent);
  flex: none;
}
.s4 .s4-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}
.s4 .s4-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 2vw, 1.44rem);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.2;
  margin: clamp(34px, 4.4vw, 52px) 0 12px;
  color: var(--text);
}
.s4-h4 {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  margin: 26px 0 10px;
  color: var(--text);
}
.s4-lead {
  max-width: var(--s4-medida);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.62;
  color: var(--text-muted);
  margin: 14px 0 0;
}
.s4-p {
  max-width: var(--s4-medida);
  line-height: 1.68;
  color: var(--text-muted);
  margin: 0 0 1.05em;
}
.s4-p b, .s4-p strong { color: var(--text); font-weight: 600; }
.s4-p:last-child { margin-bottom: 0; }

/* Dato ancla: la cifra que abre el capitulo antes del parrafo */
.s4-ancla {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: clamp(22px, 3vw, 34px) 0 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.s4-ancla-cifra {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.6vw, 3.5rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--accent);
}
.s4-ancla-txt { font-size: .95rem; line-height: 1.5; color: var(--text-muted); max-width: 46ch; }

/* Nota de fuente al pie de una figura */
.s4-fuente {
  margin: 10px 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--text-faint);
  max-width: 78ch;
}
.s4-fuente a { color: inherit; }

/* Caja de metodo / advertencia honesta */
.s4-nota {
  margin: 20px 0 0;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 76ch;
}
.s4-nota b { color: var(--text); font-weight: 600; }
.s4-nota-t {
  display: block;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

/* Hueco de imagen marcado. El punteado significa exactamente eso en
   este proyecto y no se usa para nada mas. */
.s4-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 190px;
  padding: 22px;
  border: 1px dashed color-mix(in srgb, var(--text) 26%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  text-align: center;
}
.s4-slot-t {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.s4-slot-d { font-size: .84rem; line-height: 1.55; color: var(--text-muted); max-width: 52ch; margin: 0 auto; }
.s4-slot-r {
  font-size: .72rem;
  color: var(--text-faint);
  font-family: var(--font-display);
  letter-spacing: .04em;
  word-break: break-all;
}
.s4-slot.is-ancho { min-height: 0; aspect-ratio: 16 / 7; }
.s4-slot-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 6px;
  text-align: left;
}
.s4-slot-lista span {
  display: block;
  padding: 9px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.s4-slot-lista b { display: block; color: var(--text); font-weight: 600; font-family: var(--font-display); font-size: .8rem; margin-bottom: 3px; }
.s4-slot-lista code { font-size: .92em; color: var(--text-faint); }

/* Los fondos de las caras del cilindro se declaran en --img pero el CSS
   NO los pide hasta que exista la clase body.s4-fondos. Una imagen que
   falta deja un 404 por cara en la consola, y la consola limpia es el
   detector de problemas de esta pagina. Cuando lleguen los cinco
   archivos basta con anadir esa clase al body. */
body.s4-fondos .s4-cara-fondo { background-image: var(--img); }

/* Separador entre capitulos: no llega a los extremos y lo recorre un
   pulso al entrar en pantalla. */
.s4-sep {
  position: relative;
  height: 1px;
  margin: clamp(52px, 8vw, 96px) auto;
  max-width: min(100%, 940px);
  background: var(--border);
  overflow: hidden;
}
.s4-sep::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-120%);
}
body.s4-js .s4-sep.is-in::after { animation: s4Pulso 1.5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes s4Pulso { to { transform: translateX(320%); } }

/* Entrada por scroll compartida. El estado oculto cuelga de body.s4-js:
   sin JS todo nace visible. */
body.s4-js .s4-anim { opacity: 0; transform: translateY(16px); }
body.s4-js .s4-anim.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

/* =====================================================================
   3c. LA CAJA DE TEXTO
   Todo el cuerpo del informe va justificado con particion de palabra. Sin
   la particion, justificar en espanol abre rios blancos enormes porque el
   idioma tiene palabras largas; con ella, el bloque queda con el borde
   derecho recto y el interletraje quieto, que es como se lee un informe.
   Los pies de figura, los rotulos y las tablas NO se justifican: son
   fragmentos y ahi la justificacion solo estropea.
   ===================================================================== */
.s4-p,
.s4-lead,
.s4-vp-b p,
.s4-tr-txt,
.s4-fuerza-cuerpo p,
.s4-tabp p,
.s4-pila-in p,
.s4-nota,
.s4-hecho-d {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Una linea suelta no se justifica: se estira sola y queda peor. */
.s4-p:only-child,
.s4-lead { text-wrap: pretty; }

@media (max-width: 620px) {
  /* En columna estrecha la justificacion abre huecos aunque haya
     particion: por debajo de unos 45 caracteres deja de compensar. */
  .s4-p, .s4-lead, .s4-vp-b p, .s4-tr-txt, .s4-fuerza-cuerpo p,
  .s4-tabp p, .s4-pila-in p, .s4-nota, .s4-hecho-d { text-align: left; }
}

/* =====================================================================
   3b. LAS LAMINAS — LA IMAGEN COMO PLACA EN EL ESPACIO

   Toda imagen de esta pagina que no viva ya dentro de un mecanismo
   —el cilindro, la esfera, el acordeon— se presenta asi: una placa con
   grosor, apoyada en perspectiva, que se inclina hacia quien la mira y
   devuelve un reflejo por donde pasa el cursor.

   La inclinacion la escribe el JS en --rx y --ry, y NADA MAS: ni un
   estilo de presentacion sale de JavaScript. La perspectiva vive en el
   padre y la rotacion en el hijo, que es la unica forma de que el
   `overflow: hidden` del recorte no aplaste el volumen.
   ===================================================================== */
.s4-fig {
  margin: clamp(30px, 4.4vw, 52px) 0;
  perspective: 1300px;
  perspective-origin: 50% 42%;
}
.s4-fig-caja {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--text) 10%, transparent) inset,
    0 30px 60px -30px rgba(0, 0, 0, .85);
  will-change: transform;
}
.s4-fig-caja:hover {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.018);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--text) 16%, transparent) inset,
    0 42px 80px -34px rgba(0, 0, 0, .92);
}
.s4-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* El reflejo. Va por encima de la foto y por debajo de todo lo demas, y
   solo existe donde hay cursor de verdad. */
.s4-fig-brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, #fff 20%, transparent),
    transparent 62%);
}
@media (hover: hover) and (pointer: fine) {
  .s4-fig-caja:hover .s4-fig-brillo { opacity: 1; }
}

.s4-fig-pie {
  margin: 14px auto 0;
  max-width: 72ch;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: center;
  text-wrap: pretty;
}
.s4-fig-pie b { color: var(--text-muted); font-weight: 600; }

/* La entrada: la placa llega inclinada y se endereza. Es la unica
   entrada de la pagina que usa el eje X, y por eso se lee distinto de
   los bloques de texto. */
body.s4-js .s4-fig.s4-anim { opacity: 0; transform: none; }
body.s4-js .s4-fig.s4-anim .s4-fig-caja {
  opacity: 0;
  transform: rotateX(9deg) scale(.955) translateY(22px);
}
body.s4-js .s4-fig.s4-anim.is-in { opacity: 1; }
body.s4-js .s4-fig.s4-anim.is-in .s4-fig-caja {
  opacity: 1;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}

/* =====================================================================
   4. CAPITULO 03 — CONTEXTO SITUACIONAL
   Scrollytelling: el visor queda fijo y cambia solo mientras los hechos
   pasan al lado. Portado de componentes/05.
   El bloque activo NO se elige por intersectionRatio: con dos bloques
   cruzando la banda gana el que mas porcion propia ensena, que no es el
   que se esta leyendo, y el segundo no se activa nunca. Manda el ultimo
   bloque que ya cruzo una linea a media pantalla.
   ===================================================================== */
.s4-scroll {
  display: grid;
  /* La lamina bajo un 10 %: .92fr la dejaba en 542 px sobre 1.132 de
     contenido y ocupaba casi toda la altura util de la ventana. Con .76fr
     mide 488 px y el texto gana ese ancho. */
  grid-template-columns: minmax(0, 1fr) minmax(0, .76fr);
  gap: clamp(26px, 4.4vw, 64px);
  align-items: start;
  margin-top: clamp(26px, 4vw, 44px);
}

.s4-scroll-visor {
  position: sticky;
  top: calc(var(--nav-h) + 26px);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-elev);
  aspect-ratio: 4 / 5;
}
.s4-scroll-visor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1);
}
.s4-scroll-visor img.is-on { opacity: 1; transform: none; }
.s4-scroll-visor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 44%, color-mix(in srgb, var(--bg) 78%, transparent));
}
.s4-scroll-rot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}

/* Las cinco tarjetas del contexto. Eran filas separadas por una raya y
   ahora son tarjetas, y LA QUE SE ESTA LEYENDO ENCIENDE SU BORDE. La
   clase la pone el mismo indice que gobierna la lamina de al lado, asi
   que el resplandor no decora: senala la correspondencia entre lo que
   se lee y lo que se ve. Las demas se apagan un punto, que es lo que
   hace que la encendida destaque sin subirle el brillo a nada. */
.s4-hecho {
  position: relative;
  margin: 0 0 12px;
  padding: clamp(22px, 3.2vw, 34px) clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 46%, transparent);
  opacity: .58;
  transition: opacity .45s ease, border-color .45s ease,
              box-shadow .45s ease, background-color .45s ease;
}
.s4-hecho:last-child { margin-bottom: 0; }

.s4-hecho.is-activo {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 22px 46px -26px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* La luz recorre el borde superior de la activa, de izquierda a derecha:
   es la misma linea que se traza en los umbrales de capitulo. */
.s4-hecho::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.s4-hecho.is-activo::after { transform: scaleX(1); }

/* Sin JS no hay tarjeta activa, asi que se ven todas a plena luz. */
body:not(.s4-js) .s4-hecho { opacity: 1; }
.s4-hecho-n {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 10px;
}
.s4-hecho-t {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: var(--text);
  text-wrap: balance;
}
.s4-hecho-c {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.s4-cifra {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.s4-cifra em { font-style: normal; font-weight: 500; font-size: .78em; color: var(--text-muted); letter-spacing: .02em; }
.s4-cifra.is-adv { background: color-mix(in srgb, var(--dato) 12%, transparent); border-color: color-mix(in srgb, var(--dato) 30%, transparent); }
.s4-hecho-p { max-width: 56ch; line-height: 1.65; color: var(--text-muted); margin: 0; }
.s4-hecho-f { margin: 12px 0 0; font-size: .74rem; color: var(--text-faint); }

@media (max-width: 860px) {
  .s4-scroll { grid-template-columns: minmax(0, 1fr); }
  .s4-scroll-visor { position: relative; top: auto; max-width: 420px; }
}

/* ---- Cadena causal: cuatro niveles encadenados ------------------- */
/* Dos columnas. En una sola, cada eslabon ocupaba un renglon de 160
   caracteres con la etiqueta a la izquierda y media pagina en blanco a
   la derecha. La cadena se lee igual de bien en zigzag y ocupa el ancho
   que la seccion ya tenia reservado. */
.s4-cadena {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.s4-cadena-n {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elev) 52%, transparent);
  position: relative;
}
/* El orden de la cadena ya no lo dice una linea vertical —en rejilla no
   habria por donde trazarla— sino el numero de eslabon. */
.s4-cadena-n::before {
  counter-increment: eslabon;
  content: counter(eslabon);
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.s4-cadena { counter-reset: eslabon; }
.s4-cadena-r {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
.s4-cadena-c { font-size: .9rem; line-height: 1.6; color: var(--text-muted); }
.s4-cadena-c b { color: var(--text); font-weight: 600; }
.s4-cadena-e { display: block; margin-top: 7px; font-size: .78rem; color: var(--text-faint); }



/* =====================================================================
   5. CAPITULO 04 — OBJETIVOS ESTRATEGICOS
   La plantilla del docente pide, para mision, vision y valores, una
   DESCRIPCION ACTUAL y una PROPUESTA. Lo que hay que ver, entonces, no
   son dos textos sueltos: es la transformacion. Por eso la pieza es un
   antes/despues con el diagnostico en medio, y no dos tarjetas iguales.
   ===================================================================== */
.s4-mega { display: grid; gap: 14px; margin-top: clamp(24px, 3.6vw, 38px); }

.s4-tr {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-elev) 50%, transparent);
  overflow: hidden;
}
.s4-tr-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}
.s4-tr-nom { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text); }
.s4-tr-est {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  white-space: nowrap;
}
.s4-tr-est.is-mod { border-color: color-mix(in srgb, var(--dato) 45%, transparent); color: color-mix(in srgb, var(--dato) 90%, var(--text)); }
.s4-tr-est.is-nueva { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: color-mix(in srgb, var(--accent) 90%, var(--text)); }

.s4-tr-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--border);
}
.s4-tr-lado { padding: 18px 20px 20px; background: var(--bg-elev); }
.s4-tr-lado.is-hoy { background: color-mix(in srgb, var(--bg-elev) 100%, transparent); }
.s4-tr-lado.is-prop { background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev)); }
.s4-tr-eti {
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 10px;
}
.s4-tr-lado.is-prop .s4-tr-eti { color: color-mix(in srgb, var(--accent) 90%, var(--text)); }
.s4-tr-txt {
  margin: 0;
  font-size: .89rem;
  line-height: 1.68;
  color: var(--text-muted);
}
.s4-tr-txt.is-cita { font-style: italic; }
.s4-tr-vacio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .86rem;
  color: var(--text-faint);
  font-style: italic;
}
.s4-tr-vacio::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--border-strong);
  flex: none;
}

/* Evaluacion criterio a criterio */
.s4-eval { margin-top: 16px; display: grid; gap: 7px; }
.s4-eval-f {
  display: grid;
  grid-template-columns: minmax(0, 190px) 78px minmax(0, 1fr);
  gap: 10px 16px;
  align-items: start;
  padding: 11px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 3.5%, transparent);
  font-size: .84rem;
}
.s4-eval-c { font-family: var(--font-display); font-weight: 600; color: var(--text); line-height: 1.35; }
.s4-eval-v {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: 2px;
}
.s4-eval-v[data-v="si"] { color: color-mix(in srgb, var(--accent) 92%, var(--text)); }
.s4-eval-v[data-v="no"] { color: color-mix(in srgb, var(--dato) 92%, var(--text)); }
.s4-eval-v[data-v="parcial"] { color: var(--text-muted); }
.s4-eval-d { line-height: 1.55; color: var(--text-muted); }

@media (max-width: 760px) {
  .s4-tr-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .s4-eval-f { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Objetivos estrategicos OE1..OE4 */
.s4-oe { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 12px; margin-top: 20px; }
.s4-oe-c {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 19px 19px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
}
.s4-oe-n { font-family: var(--font-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.s4-oe-t { font-family: var(--font-display); font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.s4-oe-d { font-size: .83rem; line-height: 1.55; color: var(--text-muted); }
.s4-oe-i { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); font-size: .76rem; color: var(--text-faint); line-height: 1.45; }
/* Los tres escenarios reutilizan la tarjeta de los objetivos estrategicos
   y solo cambian de tinta, con los mismos tokens que ya usa la lectura de
   cada variable del macroentorno: favorable, mixto y adverso. Un cuarto
   componente para tres tarjetas no se sostiene. */
.s4-oe-c[data-e="fav"] { border-color: color-mix(in srgb, var(--fav) 30%, transparent); background: color-mix(in srgb, var(--fav) 6%, transparent); }
.s4-oe-c[data-e="fav"] .s4-oe-n { color: color-mix(in srgb, var(--fav) 92%, var(--text)); }
.s4-oe-c[data-e="adv"] { border-color: color-mix(in srgb, var(--adv) 30%, transparent); background: color-mix(in srgb, var(--adv) 6%, transparent); }
.s4-oe-c[data-e="adv"] .s4-oe-n { color: color-mix(in srgb, var(--adv) 92%, var(--text)); }
.s4-oe-c[data-e="mix"] .s4-oe-n { color: var(--text-muted); }
.s4-oe-i b { color: var(--text-muted); font-weight: 500; }

/* =====================================================================
   6. CAPITULO 05 — MACROENTORNO
   Cilindro 3D de cinco caras, una por variable. Portado de
   componentes/04. El radio NO se elige a ojo: sale de trigonometria,
   radio = (ancho / 2) / tan(180 / n). Con cinco caras de 300px da 206px
   y el cilindro cierra exacto. Al soltar, imanta por el camino mas
   corto: de la ultima a la primera avanza una cara, no retrocede cuatro.

   El giro es el gesto del capitulo a proposito: el docente pidio mirar
   dos o tres anos hacia atras y otros tantos hacia adelante. La rueda
   es literalmente ese movimiento.
   ===================================================================== */
/* La rueda a un lado y la lectura al otro. Antes iba arriba a todo lo
   ancho y el panel debajo: el lector giraba, perdia la rueda de vista al
   bajar a leer y tenia que subir otra vez para cambiar de variable. Con
   la rueda pegada al lado el gesto y su resultado se ven a la vez, que es
   justo lo que el capitulo pide —mirar atras y adelante— sin dejar de
   tener el instrumento delante. */
.s4-pestel {
  margin-top: clamp(26px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 46px);
  /* SIN align-items: start. La rueda mide ~450px y el texto de una
     variable con tablas puede pasar de 1.200px: con "start" cada columna
     tomaba solo su propia altura de contenido, así que en cuanto el
     texto se alargaba, la columna de la rueda terminaba a los 450px y
     dejaba TODO el resto —hasta 750px— en blanco al lado del texto que
     seguía bajando. El valor por defecto (stretch) hace que la celda de
     la rueda ocupe el alto de la fila entera, igualada a la del texto:
     es lo que le da a `position: sticky` de abajo un recorrido real
     donde pegarse. */
}

/* Con la celda ya estirada al alto de la fila, sticky funciona como
   debe: la rueda se pega al desplazarse y se despega ella sola en
   cuanto se acaba SU PROPIA celda, que ahora mide lo mismo que el texto
   más largo. No hace falta vigilar el final a mano ni limitarlo a la
   sección: el límite es geométrico. El intento anterior fallaba porque
   la celda no estaba estirada —sticky no tiene dónde recorrerse si su
   caja ya mide lo mismo que su contenido— y por eso parecía que la
   rueda "flotaba" sin despegarse nunca. */
/* SIN position ni align-self en .s4-pestel-mando. Es el item de rejilla
   y hereda el `stretch` por defecto de `.s4-pestel`: su caja queda tan
   alta como la fila (igual que el texto), que es lo que le da recorrido
   a la rueda para desplazarse.

   Probado en directo con getBoundingClientRect en cada paso de scroll:
   poner `position: sticky` en ESTE MISMO elemento —el que además se
   estira con align-items:stretch— no engancha en este navegador; se
   comporta como si fuera estático aunque el estilo computado diga
   "sticky". Un envoltorio interno que no es el que se estira sí
   engancha, así que sticky vive en `.s4-pestel-riel`, un div nuevo
   dentro de `.s4-pestel-mando` que envuelve la rueda y sus controles. */
.s4-pestel-riel {
  position: sticky;
  top: clamp(88px, 12vh, 120px);
}

@media (max-width: 1080px) {
  .s4-pestel { grid-template-columns: minmax(0, 1fr); }
  .s4-pestel-riel { position: relative; top: auto; }
}

.s4-drum-caja {
  position: relative;
  height: 372px;
  perspective: 880px;
  perspective-origin: 50% 42%;
  margin-bottom: 18px;
  touch-action: pan-y;
}

/* El suelo. Sin una sombra que lo apoye, un objeto en 3D flota sobre la
   nada y se lee como cinco rectangulos sueltos, no como un volumen. */
.s4-drum-caja::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 372px;
  height: 42px;
  margin-left: -186px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
}

.s4-drum {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.16,1,.3,1);
  cursor: grab;
  z-index: 1;
}
.s4-drum.is-drag { transition: none; cursor: grabbing; }

.s4-cara {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 372px;
  height: 264px;
  margin: -132px 0 0 -186px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;

  /* Material de la cara: una superficie con luz propia arriba y sombra
     abajo, no un rectangulo de color plano. El brillo del canto (el
     inset de 1px) es lo que la hace leerse como una placa fisica. */
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--text) 7%, transparent) 0%,
      transparent 46%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-elev) 100%, transparent) 0%,
      color-mix(in srgb, var(--bg) 82%, var(--bg-elev)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 14%, transparent),
    inset 0 -18px 34px -22px rgba(0,0,0,.9);

  /* La profundidad la calcula el JS cara por cara (--o), como en la
     esfera de Fibonacci: una opacidad binaria delante/detras hace que la
     rueda parezca un carrusel de fichas y no un cilindro. */
  opacity: var(--o, .34);
  transition: opacity .28s linear, border-color .4s ease, box-shadow .4s ease;
}

/* La reticula del plano, en la propia cara. Es el motivo de la pagina a
   escala de material, no una textura tomada de ningun sitio. */
.s4-cara::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 22%, #000, transparent 76%);
  mask-image: radial-gradient(90% 70% at 50% 22%, #000, transparent 76%);
}

.s4-cara.is-frente {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 34%, transparent),
    inset 0 -18px 34px -22px rgba(0,0,0,.9),
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
    0 26px 48px -26px rgba(0,0,0,.9);
}

/* La cara del frente enciende su canto inferior: es el indicador de
   "esta es la que estas leyendo", ligado a la misma variable de foco. */
.s4-cara.is-frente::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* La fotografia de la variable. Sube mucho en la cara del frente y baja
   en las de canto: es lo que convierte cinco rectangulos en cinco
   laminas distintas. */
.s4-cara-fondo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .30;
  /* Las ilustraciones del cilindro son de trazo fino y tono frío sobre
     fondo oscuro: en el tramo claro del capítulo (fondo casi blanco) se
     lavaban hasta casi desaparecer. El realce de saturación y contraste
     es lo que las hace leerse como imagen y no como niebla, sin
     necesidad de oscurecer el fondo de la tarjeta para compensar. */
  filter: saturate(1.55) contrast(1.16);
  transform: scale(1.07);
  transition: opacity .45s ease, transform .8s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
.s4-cara.is-frente .s4-cara-fondo { opacity: .82; filter: saturate(1.65) contrast(1.2); transform: scale(1); }

/* El rotulo del gesto. Se apaga en cuanto alguien gira la rueda. */
.s4-drum-pista {
  position: absolute;
  left: 50%;
  bottom: 2px;
  white-space: nowrap;
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
  transition: opacity .5s ease;
}
.s4-drum-pista.is-off { opacity: 0; }
body:not(.s4-js) .s4-drum-pista { display: none; }
/* Degradado denso abajo y limpio arriba: la foto se ve arriba y el texto
   vive abajo. Sin el, sobre una foto clara el titulo desaparece. Va
   tintado con --bg y no con --bg-elev porque --bg es el que la escena
   interpola de oscuro a claro. */
.s4-cara-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 6%, transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 42%,
    color-mix(in srgb, var(--bg) 90%, transparent) 72%,
    color-mix(in srgb, var(--bg) 97%, transparent) 100%);
}
.s4-cara-in { position: relative; z-index: 2; }
.s4-cara-v {
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 7px;
}
.s4-cara-t {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--text);
}
.s4-cara-d { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-muted); }

.s4-drum-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.s4-drum-b {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.s4-drum-b:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.s4-drum-b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.s4-drum-p { display: flex; gap: 7px; }
.s4-drum-p button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.s4-drum-p button[aria-selected="true"] { background: var(--accent); transform: scale(1.5); }

/* Panel de la variable en foco: analisis + proyecciones, que es lo que
   la plantilla exige para cada una de las cinco. Los paneles viven
   apilados en la misma celda para que la caja no salte al cambiar. */
/* La caja del panel toma el alto de la variable ACTIVA, no el de la mas
   larga. Antes reservaba el maximo y las variables cortas dejaban un
   hueco muerto de cientos de pixeles. El alto lo mide el JS y se anima,
   asi que cambiar de variable no produce ningun salto. */
.s4-pestel-panel {
  display: grid;
  /* start y no stretch: si los paneles se estiran al alto de la caja,
     su scrollHeight pasa a valer lo que la caja mide y la medida se
     muerde la cola. */
  align-items: start;
  height: var(--alto, auto);
  transition: height .5s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
body:not(.s4-js) .s4-pestel-panel { height: auto; }
/* Los cinco paneles viven apilados en la misma celda de grid: la caja
   reserva el alto del mas largo y no salta al cambiar de variable. Eso
   deja holgura en los paneles cortos, y esa holgura se absorbe por
   estructura, no se deja como hueco: el panel es una columna flex y el
   bloque de dos columnas es la pieza elastica que crece. Es la misma
   solucion del punto 2 de semana-02. */
.s4-pestel-p {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .38s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
}
.s4-pestel-p.is-on { visibility: visible; opacity: 1; }
body:not(.s4-js) .s4-pestel-p { visibility: visible; opacity: 1; grid-area: auto; margin-bottom: 34px; }

/* Una sola columna: el panel ya vive en la mitad derecha de la sección,
   y partirlo otra vez en dos deja líneas de 28 caracteres donde el texto
   justificado se llena de ríos blancos. */
.s4-vp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; flex: 1; }
.s4-vp-b {
  padding: 19px 21px 21px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 52%, transparent);
}
.s4-vp-t {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 12px;
}
.s4-vp-b p { margin: 0 0 .9em; font-size: .88rem; line-height: 1.65; color: var(--text-muted); }
.s4-vp-b p:last-child { margin-bottom: 0; }
.s4-vp-b b { color: var(--text); font-weight: 600; }

/* Lectura: como afecta a la empresa. El docente lo pidio explicito:
   "digame eso como nos beneficia o como me impacta negativamente". */
.s4-lect {
  margin-top: 14px;
  padding: 14px 17px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.s4-lect[data-e="fav"] { background: color-mix(in srgb, var(--fav) 8%, transparent); border-color: color-mix(in srgb, var(--fav) 28%, transparent); }
.s4-lect[data-e="adv"] { background: color-mix(in srgb, var(--adv) 8%, transparent); border-color: color-mix(in srgb, var(--adv) 28%, transparent); }
.s4-lect[data-e="mix"] { background: color-mix(in srgb, var(--text) 4%, transparent); }
.s4-lect-t {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 7px;
  color: var(--text);
}
.s4-lect-t::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.s4-lect[data-e="fav"] .s4-lect-t { color: color-mix(in srgb, var(--fav) 92%, var(--text)); }
.s4-lect[data-e="adv"] .s4-lect-t { color: color-mix(in srgb, var(--adv) 92%, var(--text)); }
.s4-lect[data-e="mix"] .s4-lect-t { color: var(--text-muted); }

/* El cilindro se encoge por tramos. Las caras laterales sobresalen del
   ancho de la caja —es un volumen, no una fila— y con la cara grande en
   una ventana estrecha ese vuelo saca barra horizontal. Cada tramo lleva
   tambien su sombra de apoyo: si no, el objeto flota sobre una elipse
   que ya no le corresponde. */
@media (max-width: 1000px) {
  .s4-drum-caja { height: 330px; }
  .s4-drum-caja::after { width: 300px; margin-left: -150px; }
  .s4-cara { width: 300px; height: 240px; margin: -120px 0 0 -150px; }
}
@media (max-width: 720px) {
  .s4-vp { grid-template-columns: minmax(0, 1fr); }
  .s4-drum-caja { height: 290px; }
  .s4-drum-caja::after { width: 250px; margin-left: -125px; height: 34px; }
  .s4-cara { width: 250px; height: 210px; margin: -105px 0 0 -125px; }
}

/* Tabla de decision de variables: cuales se analizan y cuales no */
.s4-tabla { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .86rem; }
.s4-tabla caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 10px;
}
.s4-tabla th, .s4-tabla td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
}
.s4-tabla th {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  border-bottom-color: var(--border-strong);
}
.s4-tabla td { color: var(--text-muted); }
/* La primera columna NO lleva nowrap. Con nowrap, una etiqueta larga como
   «Resoluciones 810/2021, 2492/2022 y 254/2023» fija un ancho minimo enorme,
   la tabla se desborda de su caja y la ultima columna queda cortada fuera
   del scroll. Pasa en cuanto la tabla vive dentro de media columna. */
.s4-tabla td:first-child { color: var(--text); font-weight: 600; }
.s4-tabla tbody tr:last-child td { border-bottom: 0; }
.s4-tabla .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.s4-tabla-wrap { overflow-x: auto; }

.s4-dec {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.s4-dec[data-d="si"] { color: color-mix(in srgb, var(--fav) 92%, var(--text)); }
.s4-dec[data-d="no"] { color: color-mix(in srgb, var(--adv) 92%, var(--text)); }

/* =====================================================================
   7. CAPITULO 06 — SECTOR / INDUSTRIA
   ===================================================================== */
/* Contraste industria vs categoria: barras divergentes desde un cero
   central. El cero se dibuja como cero, con tope redondo, nunca como un
   munon del 2 % para que "se vea algo". */
.s4-div { display: grid; gap: 9px; margin-top: 20px; }
.s4-div-f {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 74px;
  gap: 14px;
  align-items: center;
  font-size: .84rem;
}
.s4-div-n { color: var(--text-muted); line-height: 1.35; }
.s4-div-p { position: relative; height: 22px; background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 5px; overflow: hidden; }
.s4-div-p::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.s4-div-b {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 3px;
  width: 0;
  transition: width .9s cubic-bezier(.16,1,.3,1);
}
.s4-div-f[data-s="pos"] .s4-div-b { left: 50%; background: var(--fav); }
.s4-div-f[data-s="neg"] .s4-div-b { right: 50%; background: var(--adv); }
body.s4-js .s4-div.is-in .s4-div-b { width: calc(var(--w) * .5); }
body:not(.s4-js) .s4-div-b { width: calc(var(--w) * .5); }
.s4-div-v { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.s4-div-f[data-s="neg"] .s4-div-v { color: color-mix(in srgb, var(--adv) 92%, var(--text)); }

@media (max-width: 620px) {
  .s4-div-f { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "n v" "p p"; }
  .s4-div-n { grid-area: n; }
  .s4-div-v { grid-area: v; }
  .s4-div-p { grid-area: p; }
}

/* Cascada del tamano de mercado: cada paso se come una parte del
   anterior, y eso solo se ve si los pasos se dibujan a escala. */
.s4-casc { display: grid; gap: 4px; margin-top: 22px; }
.s4-casc-f {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.s4-casc-f:last-child { border-bottom: 0; }
.s4-casc-p { font-family: var(--font-display); font-size: .74rem; font-weight: 600; color: var(--text-faint); }
.s4-casc-c { min-width: 0; }
.s4-casc-l { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 7px; }
.s4-casc-t { font-size: .85rem; color: var(--text-muted); line-height: 1.4; }
.s4-casc-v { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s4-casc-pista { height: 9px; border-radius: 4px; background: color-mix(in srgb, var(--text) 5%, transparent); overflow: hidden; }
.s4-casc-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent) 45%, transparent));
  width: 0;
  transition: width 1s cubic-bezier(.16,1,.3,1);
}
body.s4-js .s4-casc.is-in .s4-casc-fill { width: var(--w); }
body:not(.s4-js) .s4-casc-fill { width: var(--w); }
.s4-casc-fu { font-size: .74rem; color: var(--text-faint); margin-top: 5px; }

/* Participacion de mercado en la categoria */
.s4-part { display: grid; gap: 8px; margin-top: 18px; }
.s4-part-f { display: grid; grid-template-columns: minmax(0, 128px) minmax(0, 1fr) 60px; gap: 14px; align-items: center; font-size: .85rem; }
.s4-part-m { color: var(--text); font-weight: 600; }
.s4-part-m em { display: block; font-style: normal; font-weight: 400; font-size: .78em; color: var(--text-faint); }
.s4-part-p { height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--text) 5%, transparent); overflow: hidden; }
.s4-part-b { display: block; height: 100%; border-radius: 4px; background: var(--neu); width: 0; transition: width .9s cubic-bezier(.16,1,.3,1); }
.s4-part-f.is-sary .s4-part-b { background: var(--ent-sa); }
.s4-part-f.is-ee .s4-part-b { background: var(--ent-ee); }
body.s4-js .s4-part.is-in .s4-part-b { width: var(--w); }
body:not(.s4-js) .s4-part-b { width: var(--w); }
.s4-part-v { font-family: var(--font-display); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }

@media (max-width: 560px) {
  .s4-part-f { grid-template-columns: minmax(0, 1fr) 56px; grid-template-areas: "m v" "p p"; }
  .s4-part-m { grid-area: m; } .s4-part-v { grid-area: v; } .s4-part-p { grid-area: p; }
}

/* =====================================================================
   8. CAPITULO 07 — MICROENTORNO
   ===================================================================== */

/* ---- 7.1 La empresa: esfera de la marca (componentes/03) ----------
   Reparto por espiral de Fibonacci con el angulo aureo. Por filas y
   columnas quedan anillos visibles y se amontona en los polos. Cada
   pieza lleva contragiro heredado de --spin para no irse de canto: una
   sola escritura mueve las catorce. */
.s4-esfera-caja {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1;
  margin: 0 auto;
  perspective: 900px;
  /* La mascara se afloja: con el corte al 52 % las piezas del ecuador se
     desvanecian justo donde mas cuerpo dan, y la esfera se leia hueca. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 74%, transparent 96%);
  mask-image: radial-gradient(circle at 50% 50%, #000 74%, transparent 96%);
}
.s4-esfera {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-14deg) rotateY(var(--spin, 0deg));
}
.s4-esf-p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  transform-style: preserve-3d;
  transform:
    rotateY(var(--lon)) rotateX(var(--lat)) translateZ(var(--radio, 175px))
    rotateX(calc(-1 * var(--lat))) rotateY(calc(-1 * var(--lon)))
    rotateY(calc(-1 * var(--spin, 0deg)));
}
.s4-esf-p img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  opacity: var(--o, 1);
}

/* El radio de la esfera va en una variable porque tiene que encoger con
   la ventana: con 175px fijos, en un movil de 390px las piezas del
   ecuador salian 8px por fuera del documento y aparecia barra
   horizontal. La mascara las tapaba, pero el scroll no se tapa. */
@media (max-width: 560px) {
  .s4-esfera-caja { --radio: 118px; }
  .s4-esf-p { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .s4-esfera-nucleo { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  .s4-esfera-nucleo img { width: 46px; height: 46px; }
  .s4-esfera-nucleo-t { font-size: .62rem; }
}

/* El nucleo de la esfera. Vive en la CAJA y no en el elemento que gira,
   asi que se queda quieto en el centro mientras las dieciocho piezas
   orbitan. Es la empresa, y todo lo que da vueltas alrededor es su
   operacion: la composicion dice eso sin escribirlo. */
.s4-esfera-nucleo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 50%;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--bg) 92%, transparent) 62%,
                    color-mix(in srgb, var(--bg) 70%, transparent) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
              0 0 44px 12px color-mix(in srgb, var(--bg) 88%, transparent);
  pointer-events: none;
}
.s4-esfera-nucleo img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  border-radius: 10px;
}
.s4-esfera-nucleo-t {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}

/* ---- 7.2 Clientes: pestanas con panel e imagen (componentes/02) ---
   Los paneles viven apilados en la misma celda de grid: la caja reserva
   el alto del mas largo y no salta al cambiar. Los ocultos se quitan
   con visibility, no con el atributo hidden, que los sacaria del layout
   y devolveria el salto. */
.s4-tabs { margin-top: clamp(22px, 3.4vw, 34px); }
.s4-tabs-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}
.s4-tab {
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.s4-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.s4-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text);
}
.s4-tabs-panel { display: grid; }
.s4-tabp {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s cubic-bezier(.16,1,.3,1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(20px, 3vw, 38px);
  align-items: start;
}
.s4-tabp.is-on { visibility: visible; opacity: 1; }
body:not(.s4-js) .s4-tabp { visibility: visible; opacity: 1; grid-area: auto; margin-bottom: 34px; }
.s4-tabp-img {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 5;
  background: var(--bg-elev);
}
.s4-tabp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 800px) {
  .s4-tabp { grid-template-columns: minmax(0, 1fr); }
  .s4-tabp-img { max-width: 320px; }
}

/* Ficha del buyer persona */
.s4-persona { display: grid; gap: 7px; margin-top: 16px; }
.s4-persona-f {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  gap: 6px 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
}
.s4-persona-f:last-child { border-bottom: 0; }
.s4-persona-a { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.s4-persona-v { color: var(--text-muted); line-height: 1.55; }
@media (max-width: 620px) { .s4-persona-f { grid-template-columns: minmax(0, 1fr); } }

/* ---- 7.3.2 Porter: acordeon horizontal (componentes/06) -----------
   Se anima flex-grow, no width: es el unico numero que el navegador
   interpola sin recalcular la caja de todas las hojas en cada
   fotograma. Animar width provoca reflow y se nota. */
/* La caja lleva ALTO FIJO, no min-height. Con min-height los cuerpos de
   las cinco fuerzas —que siguen en el layout aunque esten ocultos con
   visibility— se maquetan dentro de una columna de 40px, cada uno se
   estira miles de pixeles y el contenedor toma el mas alto: medido, 6.691px.
   Por eso el cuerpo va en position:absolute y no aporta altura, y la
   fuerza abierta desplaza el sobrante con su propio scroll. */
.s4-porter {
  display: flex;
  gap: 8px;
  margin-top: clamp(22px, 3.4vw, 34px);
  height: clamp(470px, 66vh, 660px);
}
.s4-fuerza {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-elev);
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .55s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
.s4-fuerza.is-open { flex-grow: 4.6; border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.s4-fuerza-lomo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 16px;
  gap: 10px;
}
.s4-fuerza-n {
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.s4-fuerza-t {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  margin-bottom: 8px;
}
.s4-fuerza.is-open .s4-fuerza-t { writing-mode: horizontal-tb; transform: none; white-space: normal; }
.s4-fuerza-int {
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  align-self: flex-start;
}
.s4-fuerza-int[data-i="alta"] { color: color-mix(in srgb, var(--adv) 92%, var(--text)); }
.s4-fuerza-int[data-i="media-alta"] { color: color-mix(in srgb, var(--adv) 72%, var(--text)); }
.s4-fuerza-int[data-i="media"] { color: var(--text-muted); }

.s4-fuerza-cuerpo {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s cubic-bezier(.16,1,.3,1);
  scrollbar-width: thin;
}
.s4-fuerza.is-open .s4-fuerza-cuerpo { opacity: 1; visibility: visible; }
.s4-fuerza.is-open .s4-fuerza-lomo { opacity: 0; visibility: hidden; }

/* El cuerpo abierto tiene mas alto del que cabe: diez variables no entran
   en la caja. Un degradado al pie avisa de que sigue, que es la unica
   forma de que un contenedor con scroll propio no parezca terminado. */
.s4-fuerza.is-open::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 0;
  height: 54px;
  z-index: 3;
  pointer-events: none;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: linear-gradient(180deg, transparent, var(--bg-elev));
}
.s4-fuerza-cab { margin-bottom: 14px; }
.s4-fuerza-cab h4 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin: 4px 0 8px; color: var(--text); }
.s4-fuerza-res { font-size: .82rem; line-height: 1.55; color: var(--text-muted); margin: 0; }

.s4-var { display: grid; gap: 1px; background: var(--border); border-radius: 10px; overflow: hidden; }
.s4-var-f {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 84px;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elev);
  font-size: .8rem;
  align-items: start;
}
.s4-var-n { color: var(--text-faint); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.s4-var-c { min-width: 0; }
.s4-var-t { color: var(--text); font-weight: 600; display: block; margin-bottom: 3px; line-height: 1.3; }
.s4-var-d { color: var(--text-muted); line-height: 1.5; }
.s4-var-e {
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  padding-top: 1px;
}
.s4-var-e[data-e="pos"] { color: color-mix(in srgb, var(--fav) 92%, var(--text)); }
.s4-var-e[data-e="neg"] { color: color-mix(in srgb, var(--adv) 92%, var(--text)); }
.s4-var-e[data-e="neu"] { color: var(--text-faint); }

/* En tactil y sin JS el acordeon se convierte en una lista apilada con
   todo el contenido visible. Ninguno de los siete componentes depende
   del hover para funcionar. */
@media (max-width: 900px), (hover: none) {
  .s4-porter { flex-direction: column; height: auto; }
  .s4-fuerza { flex: none; }
  .s4-fuerza-lomo { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
  .s4-fuerza-t { writing-mode: horizontal-tb; transform: none; white-space: normal; margin: 0; }
  .s4-fuerza-cuerpo { position: relative; inset: auto; opacity: 1; visibility: visible; height: auto; overflow: visible; border-top: 1px solid var(--border); }
  .s4-fuerza.is-open { flex-grow: 0; }
  .s4-fuerza.is-open::after { display: none; }

  /* Apiladas, las cinco hojas ensenan lomo Y cuerpo a la vez. Una foto a
     inset:0 quedaria por tanto detras de las diez variables. Aqui la
     imagen se acota al lomo, que pasa a ser una banda con su velo, y el
     cuerpo se queda sobre superficie solida. La cabecera renuncia a la
     banda para no repetir la misma foto dos veces en la misma tarjeta. */
  .s4-fuerza-fondo, .s4-fuerza-velo { display: none; }
  .s4-fuerza-lomo {
    min-height: 124px;
    background-image:
      linear-gradient(180deg, rgba(6, 10, 14, .30) 0%, rgba(6, 10, 14, .86) 100%),
      var(--img);
    background-size: cover, cover;
    background-position: center 28%, center 28%;
  }
  .s4-fuerza .s4-fuerza-n { color: rgba(255, 255, 255, .74); }
  .s4-fuerza .s4-fuerza-t { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
  .s4-fuerza .s4-fuerza-int { color: #fff; border-color: rgba(255, 255, 255, .52); background: rgba(6, 10, 14, .42); }
  /* Las anulaciones de la cabecera NO van aqui: la regla de escritorio
     que las pisa tiene la misma especificidad y aparece mas abajo en la
     hoja, asi que ganaria por orden. Van justo detras de ella, en 9b. */
}

/* ---- 7.3.3 Matriz de perfil competitivo: mapa de calor ------------ */
.s4-mpc-wrap { overflow-x: auto; margin-top: 20px; }
.s4-mpc { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: .82rem; min-width: 560px; }
.s4-mpc th {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  padding: 8px 10px;
  text-align: center;
  vertical-align: bottom;
}
.s4-mpc th.crit { text-align: left; }
.s4-mpc td { padding: 9px 10px; vertical-align: middle; }
.s4-mpc td.crit { color: var(--text-muted); line-height: 1.35; }
.s4-mpc td.peso { font-variant-numeric: tabular-nums; color: var(--text-faint); text-align: right; white-space: nowrap; }
.s4-mpc-c { text-align: center; border-radius: 6px; font-variant-numeric: tabular-nums; }
.s4-mpc-c b { display: block; font-family: var(--font-display); font-size: .96rem; font-weight: 700; color: var(--text); line-height: 1; }
.s4-mpc-c em { display: block; font-style: normal; font-size: .68rem; color: var(--text-faint); margin-top: 3px; }
.s4-mpc-c[data-v="1"] { background: color-mix(in srgb, var(--ent) 10%, transparent); }
.s4-mpc-c[data-v="2"] { background: color-mix(in srgb, var(--ent) 24%, transparent); }
.s4-mpc-c[data-v="3"] { background: color-mix(in srgb, var(--ent) 40%, transparent); }
.s4-mpc-c[data-v="4"] { background: color-mix(in srgb, var(--ent) 58%, transparent); }
.s4-mpc col.ee, .s4-mpc td.ee { --ent: var(--ent-ee); }
.s4-mpc td.ee { --ent: var(--ent-ee); }
.s4-mpc td.so { --ent: var(--ent-so); }
.s4-mpc td.sa { --ent: var(--ent-sa); }
.s4-mpc tfoot td { padding-top: 13px; border-top: 1px solid var(--border-strong); font-family: var(--font-display); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.s4-mpc tfoot td.tot-ee { color: var(--ent-ee); }
.s4-mpc tfoot td.tot-so { color: var(--ent-so); }
.s4-mpc tfoot td.tot-sa { color: var(--ent-sa); }
.s4-mpc tfoot td.crit { text-align: left; color: var(--text-faint); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

/* Roles competitivos: el bloque de reglas vive en la sección 9d, más
   abajo. Este era el de la versión anterior de la tarjeta (sin logo, sin
   despliegue) y se quedó vivo por error: su `padding: 18px 19px 19px`
   en `.s4-rol` no lo reescribía ninguna regla posterior, así que se
   sumaba silenciosamente al padding propio de `.s4-rol-cab` y desviaba
   la medida real de la tarjeta. */

/* Actores del microentorno: distribuidores, proveedores, otros */
/* El acordeón de actores vive ahora en la sección 9d. */

/* =====================================================================
   9. CAPITULO 08 — MATRICES PARA LA TOMA DE DECISIONES
   El docente fue explicito en la clase del 8 de septiembre: o se hace
   la DOFA, o se hacen la EFE y la EFI y se llevan sus resultados a la
   interna-externa. No las dos cosas encadenadas como si fueran una.
   Pero tambien dijo que complementar con otra matriz le encanta, porque
   varias herramientas con criterios distintos apuntando al mismo lugar
   dan la certeza de que el analisis esta bien hecho.

   De ahi la forma de este capitulo: DOS RUTAS INDEPENDIENTES y una
   tercera seccion de convergencia. No es un adorno de maquetacion, es
   la estructura del argumento.
   ===================================================================== */
.s4-rutas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: clamp(24px, 3.6vw, 36px);
}
.s4-ruta {
  padding: 20px 21px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
}
.s4-ruta-e { font-family: var(--font-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.s4-ruta-t { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.25; margin: 0 0 10px; color: var(--text); }
.s4-ruta-d { font-size: .85rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 14px; }
.s4-ruta-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s4-ruta-l li { display: flex; gap: 9px; font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.s4-ruta-l li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; margin-top: .55em; }

/* ---- DOFA: los cuarenta factores ---------------------------------- */
.s4-dofa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 22px; }
.s4-dofa-q {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-elev);
}
.s4-dofa-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--border);
}
.s4-dofa-cab h4 { margin: 0; font-family: var(--font-display); font-size: .84rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.s4-dofa-q[data-q="f"] .s4-dofa-cab h4 { color: color-mix(in srgb, var(--fav) 92%, var(--text)); }
.s4-dofa-q[data-q="o"] .s4-dofa-cab h4 { color: color-mix(in srgb, var(--fav) 92%, var(--text)); }
.s4-dofa-q[data-q="d"] .s4-dofa-cab h4 { color: color-mix(in srgb, var(--adv) 92%, var(--text)); }
.s4-dofa-q[data-q="a"] .s4-dofa-cab h4 { color: color-mix(in srgb, var(--adv) 92%, var(--text)); }
.s4-dofa-cn { font-family: var(--font-display); font-size: .72rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.s4-dofa-l { list-style: none; margin: 0; padding: 6px 0; }
.s4-dofa-l li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 17px;
  font-size: .81rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.s4-dofa-l li + li { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.s4-dofa-k { font-family: var(--font-display); font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.s4-dofa-l cite { display: block; margin-top: 4px; font-style: normal; font-size: .74rem; color: var(--text-faint); }
@media (max-width: 780px) { .s4-dofa { grid-template-columns: minmax(0, 1fr); } }

/* ---- Los cruces: aqui la DOFA deja de describir y decide ---------- */
/* LOS CRUCES SON LA MATRIZ, NO CUATRO TARJETAS EN FILA.
   La version anterior ponia FO, DO, FA y DA como cuatro columnas
   seguidas de texto justificado: un muro de periodico que no se parecia
   a un cruce. Y es justo el sitio donde el capitulo defiende que "matriz
   es correlacionar". Ahora es la rejilla 2x2 literal: las columnas son
   los factores externos, las filas los internos, y cada celda es el
   encuentro de una fila con una columna. Se leen los rotulos del
   profesor —adaptacion, supervivencia, ataque, defensa— porque son los
   suyos y porque nombran lo que hace cada cuadrante.
   La posicion de cada pieza va en el HTML con grid-area: el sitio en la
   matriz ES informacion, no presentacion. */
.s4-cruz {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: clamp(22px, 3vw, 30px);
}
.s4-cruz-ejex,
.s4-cruz-ejey {
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.s4-cruz-ejex { grid-area: 1 / 3 / 2 / 5; text-align: center; }
.s4-cruz-ejey {
  grid-area: 3 / 1 / 5 / 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: center;
  align-self: center;
}
.s4-cruz-cab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
.s4-cruz-cab[data-t="o"] {
  color: color-mix(in srgb, var(--fav) 92%, var(--text));
  background: color-mix(in srgb, var(--fav) 9%, transparent);
  border-color: color-mix(in srgb, var(--fav) 26%, transparent);
}
.s4-cruz-cab[data-t="a"] {
  color: color-mix(in srgb, var(--adv) 92%, var(--text));
  background: color-mix(in srgb, var(--adv) 9%, transparent);
  border-color: color-mix(in srgb, var(--adv) 26%, transparent);
}
.s4-cruz-cab.is-fila {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 14px 10px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.s4-cruz-celda {
  padding: 16px 18px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
}
.s4-cruz-k {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 13px;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.s4-cruz-k b {
  font-size: 1.14rem;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--accent);
  font-weight: 700;
}
.s4-cruz-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.s4-cruz-l li {
  display: grid;
  gap: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}
.s4-cruz-l li:first-child { padding-top: 0; border-top: 0; }
.s4-cruz-n { font-family: var(--font-display); font-size: .62rem; letter-spacing: .14em; color: var(--accent); }
.s4-cruz-t { font-weight: 600; font-size: .88rem; line-height: 1.4; color: var(--text); }
.s4-cruz-d { font-size: .82rem; line-height: 1.56; color: var(--text-muted); }
.s4-cruz-o {
  justify-self: start;
  margin-top: 3px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-family: var(--font-display);
  font-size: .65rem;
  color: var(--text-muted);
  white-space: nowrap;
}
/* En estrecho la rejilla no cabe: se apila. Los rotulos de fila y
   columna sobran porque cada celda ya dice a que cuadrante pertenece.
   El grid-area va en linea en el HTML, asi que hay que pisarlo. */
@media (max-width: 860px) {
  .s4-cruz { grid-template-columns: minmax(0, 1fr); }
  .s4-cruz-ejex, .s4-cruz-ejey, .s4-cruz-cab { display: none; }
  .s4-cruz-celda { grid-area: auto !important; }
}

/* ---- EFE / EFI ---------------------------------------------------- */
.s4-ponderada { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 16px; }
.s4-ponderada th, .s4-ponderada td { padding: 9px 11px; border-bottom: 1px solid var(--border); text-align: left; line-height: 1.45; }
.s4-ponderada th { font-family: var(--font-display); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.s4-ponderada td { color: var(--text-muted); }
.s4-ponderada td.k { font-family: var(--font-display); font-weight: 600; color: var(--text-faint); white-space: nowrap; }
.s4-ponderada td.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.s4-ponderada tr.sub td { background: color-mix(in srgb, var(--text) 4%, transparent); font-weight: 600; color: var(--text); }
.s4-ponderada tr.tot td { border-top: 1px solid var(--border-strong); border-bottom: 0; font-family: var(--font-display); font-weight: 700; color: var(--text); padding-top: 12px; }
.s4-ponderada caption {
  caption-side: top; text-align: left; padding-bottom: 10px;
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-faint);
}
/* La calificacion 1-4 se dibuja ademas de escribirse: cuatro celdas
   separadas, escala ordinal que se cuenta de un vistazo sin leer un eje.
   Encendido y apagado son el mismo color a dos opacidades, no dos
   tokens: con dos tokens cada fila pesaria distinto. */
.s4-cal { display: inline-flex; gap: 2px; vertical-align: middle; }
.s4-cal i { width: 7px; height: 13px; border-radius: 2px; background: var(--accent); opacity: .2; }
.s4-cal i.on { opacity: 1; }

/* ---- Plano cartesiano generico: PEyEA y Gran Estrategia ----------- */
.s4-cart-caja {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin-top: 20px;
}
.s4-cart {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
  overflow: hidden;
}
.s4-cart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s4-cart-eje { stroke: var(--border-strong); stroke-width: 1; }
.s4-cart-rej { stroke: color-mix(in srgb, var(--text) 6%, transparent); stroke-width: 1; }
.s4-cart-zona { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.s4-cart-zona.is-adv { fill: color-mix(in srgb, var(--dato) 9%, transparent); }
.s4-cart-banda { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: color-mix(in srgb, var(--accent) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.s4-cart-pt { fill: var(--accent); }
.s4-cart-pt-halo { fill: color-mix(in srgb, var(--accent) 24%, transparent); }
/* Los rotulos de cuadrante van en HTML sobre el SVG. Dentro del SVG
   solo va geometria: SVG no ajusta ni recorta texto, asi que toda
   frase que crezca se desborda del marco. */
.s4-cart-q {
  position: absolute;
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 7px 9px;
  pointer-events: none;
}
.s4-cart-q.tl { top: 0; left: 0; }
.s4-cart-q.tr { top: 0; right: 0; text-align: right; }
.s4-cart-q.bl { bottom: 0; left: 0; }
.s4-cart-q.br { bottom: 0; right: 0; text-align: right; }
.s4-cart-q.is-aqui { color: var(--text); font-weight: 600; }
.s4-cart-ejex, .s4-cart-ejey {
  position: absolute;
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.s4-cart-ejex { bottom: 4px; left: 50%; transform: translateX(-50%); }
.s4-cart-ejey { left: 4px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }

.s4-cart-lect { display: grid; gap: 12px; }
.s4-cart-res {
  padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.s4-cart-res-t { font-family: var(--font-display); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 6px; }
.s4-cart-res-v { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.2; }
.s4-cart-res p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 760px) { .s4-cart-caja { grid-template-columns: minmax(0, 1fr); } .s4-cart { max-width: 340px; } }

/* Ejes de la PEyEA: las cuatro calificaciones que producen el punto */
.s4-peyea-ejes { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 10px; margin-top: 18px; }
.s4-peyea-e {
  padding: 15px 17px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elev) 50%, transparent);
}
.s4-peyea-n { font-family: var(--font-display); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.s4-peyea-v { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.s4-peyea-v small { font-size: .5em; font-weight: 500; color: var(--text-faint); margin-left: 6px; letter-spacing: .02em; }
.s4-peyea-d { font-size: .78rem; line-height: 1.5; color: var(--text-muted); margin-top: 8px; }

/* ---- ADL: posicion competitiva x madurez del sector --------------- */
.s4-adl-wrap { overflow-x: auto; margin-top: 20px; }
.s4-adl { border-collapse: separate; border-spacing: 3px; font-size: .76rem; min-width: 520px; width: 100%; }
.s4-adl th {
  font-family: var(--font-display); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 600; padding: 7px;
}
.s4-adl th.fila { text-align: right; white-space: nowrap; }
.s4-adl td {
  padding: 11px 9px; border-radius: 7px; text-align: center; line-height: 1.3;
  color: var(--text-faint); background: color-mix(in srgb, var(--text) 4%, transparent);
}
.s4-adl td[data-z="natural"] { background: color-mix(in srgb, var(--fav) 13%, transparent); color: color-mix(in srgb, var(--fav) 80%, var(--text)); }
.s4-adl td[data-z="selectivo"] { background: color-mix(in srgb, var(--fav) 7%, transparent); color: var(--text-muted); }
.s4-adl td[data-z="reconversion"] { background: color-mix(in srgb, var(--adv) 11%, transparent); color: color-mix(in srgb, var(--adv) 82%, var(--text)); }
.s4-adl td[data-z="abandono"] { background: color-mix(in srgb, var(--adv) 18%, transparent); color: color-mix(in srgb, var(--adv) 88%, var(--text)); }
.s4-adl td.is-aqui { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--text); font-weight: 600; }
.s4-adl td.is-aqui::after { content: " ← aquí"; font-family: var(--font-display); font-size: .9em; color: var(--accent); }

/* ---- Triangulacion: tarjetas que se apilan (componentes/07) --------
   La escala se MIDE (cuanto cubre la siguiente a la actual), no se
   reparte en tramos fijos de scroll: asi el encogido va al ritmo exacto
   aunque las tarjetas no midan lo mismo. Y solo se inclina la de
   delante; si se inclinaran todas dejaria de leerse como una pila. */
.s4-pila { margin-top: clamp(26px, 4vw, 44px); }
.s4-pila-c { position: relative; }
body.s4-js .s4-pila-c {
  position: sticky;
  top: calc(var(--nav-h) + 30px);
  margin-bottom: 22px;
}
.s4-pila-in {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-elev);
  padding: clamp(20px, 3vw, 30px);
  transform-origin: 50% 0;
  will-change: transform;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .8);
}
.s4-pila-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.s4-pila-n { font-family: var(--font-display); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); }
.s4-pila-t { font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 600; letter-spacing: -.02em; color: var(--text); margin: 0; }
.s4-pila-ver {
  font-family: var(--font-display); font-size: .74rem; font-weight: 600;
  padding: 6px 13px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--text); white-space: nowrap;
}
.s4-pila-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 26px; }
/* Los planos dentro de la pila van acotados: una tarjeta mas alta que la
   ventana se queda con el pie tapado por la siguiente al apilarse, y el
   pie de estos planos son justamente los rotulos de cuadrante. */
.s4-pila-cuerpo .s4-cart { max-width: 330px; }
.s4-pila-cuerpo .s4-adl-wrap { max-width: 100%; }
.s4-pila-cuerpo p { margin: 0 0 .9em; font-size: .86rem; line-height: 1.62; color: var(--text-muted); }
.s4-pila-cuerpo p:last-child { margin-bottom: 0; }
.s4-pila-cuerpo b { color: var(--text); font-weight: 600; }
@media (max-width: 720px) { .s4-pila-cuerpo { grid-template-columns: minmax(0, 1fr); } }

/* La sintesis de la convergencia */
.s4-conv {
  margin-top: clamp(30px, 4.5vw, 48px);
  padding: clamp(24px, 3.6vw, 38px);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.s4-conv-t { font-family: var(--font-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px; }
.s4-conv-f {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.8vw, 1.8rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 0 0 16px;
  max-width: 34ch;
  text-wrap: balance;
}
.s4-conv-p { max-width: 68ch; font-size: .92rem; line-height: 1.66; color: var(--text-muted); margin: 0; }

/* Macroestrategias */
.s4-macro { display: grid; gap: 11px; margin-top: 22px; }
.s4-macro-c {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 190px);
  gap: 12px 22px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 50%, transparent);
  align-items: start;
}
.s4-macro-k { font-family: var(--font-display); font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.s4-macro-t { font-family: var(--font-display); font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 7px; }
.s4-macro-d { font-size: .85rem; line-height: 1.6; color: var(--text-muted); }
.s4-macro-o { font-size: .76rem; line-height: 1.5; color: var(--text-faint); }
.s4-macro-o b { display: block; font-family: var(--font-display); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; font-weight: 600; }
@media (max-width: 800px) { .s4-macro-c { grid-template-columns: 46px minmax(0, 1fr); } .s4-macro-o { grid-column: 1 / -1; } }

/* =====================================================================
   10. CAPITULO 09 — OBJETIVOS DEL PLAN DE MARKETING
   El selector de acronimo (componentes/01) puesto donde de verdad
   sirve: SMART no es un adorno, es la regla con la que el docente
   califica cada objetivo. Elegir una letra explica que exige y como la
   cumplen los objetivos de esta pagina.
   ===================================================================== */
/* =====================================================================
   9f. SMART — REDISEÑO

   La regla es que SMART no es un adorno: es el criterio con el que se
   califica cada objetivo del capítulo 9, así que tenía que verse como el
   instrumento más importante de la página y no como un selector cualquiera
   de pestañas. Tres decisiones:

   1. La letra activa se INVIERTE (fondo sólido, letra en el color del
      fondo de la página) en vez de solo teñirse, que es un salto de
      contraste mucho mayor y es el mismo lenguaje que ya usan los botones
      de "lo que dice hoy / lo que proponemos" del capítulo 4.
   2. Un RIEL conecta las cinco letras por abajo: una línea tenue y
      continua con un segmento sólido que crece bajo la letra activa. Es
      el mismo vocabulario del camino numerado del capítulo 8 y de los
      puntos del cilindro del capítulo 5: en esta página, una secuencia
      con posición se dibuja como un riel, no como pestañas sueltas.
   3. El panel lleva una LETRA FANTASMA gigante de fondo —la misma que
      está activa, leída de data-k con CSS puro, sin tocar el JS— que
      llena el espacio vacío de la derecha y confirma de un vistazo cuál
      de las cinco se está leyendo.
   ===================================================================== */
.s4-smart { margin-top: clamp(24px, 3.6vw, 38px); }

.s4-smart-letras {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: clamp(22px, 3vw, 30px);
  padding-bottom: 14px;
}
/* El riel: una línea continua y tenue bajo las cinco letras. */
.s4-smart-letras::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 2px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 2px;
}

.s4-smart-l {
  position: relative;
  padding: clamp(20px, 2.6vw, 26px) 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 48%, transparent);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1),
              box-shadow .3s ease;
}
.s4-smart-l:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
/* El segmento sólido del riel: vive DENTRO de cada letra, pegado a su
   borde inferior, y crece desde el centro solo cuando esa letra está
   activa. Como cada tarjeta ya tiene overflow:hidden, el segmento se
   recorta limpio a su propio ancho sin invadir a las vecinas. */
.s4-smart-l::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
}
.s4-smart-l[aria-selected="true"]::after { transform: scaleX(1); }

/* La letra activa se invierte: fondo solido, letra oscura sobre acento.
   Es el contraste mas fuerte que la pagina tiene para decir "esta". */
.s4-smart-l[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--accent) 70%, transparent);
}
.s4-smart-k {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--text-muted);
  transition: color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.s4-smart-l:hover .s4-smart-k { color: var(--text); }
.s4-smart-l[aria-selected="true"] .s4-smart-k { color: var(--bg); transform: scale(1.06); }
.s4-smart-w {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color .3s ease;
}
.s4-smart-l[aria-selected="true"] .s4-smart-w { color: color-mix(in srgb, var(--bg) 82%, transparent); }

/* El brillo que sigue al cursor, igual que el resto de tarjetas de la
   pagina: aqui reforzado porque la letra invertida ya tiene fondo solido
   y el degradado se nota mejor sobre un color plano. */
@media (hover: hover) and (pointer: fine) {
  .s4-smart-l.is-luz {
    background-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%);
  }
  .s4-smart-l[aria-selected="true"].is-luz {
    background-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, white 30%, transparent), transparent 68%);
  }
}

@media (max-width: 560px) {
  .s4-smart-letras { gap: 6px; }
  .s4-smart-w { display: none; }
  .s4-smart-l { padding: 16px 4px 13px; }
}

.s4-smart-panel { display: grid; }
.s4-smart-p {
  position: relative;
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  padding: clamp(26px, 3.4vw, 40px) clamp(26px, 3.4vw, 44px) clamp(24px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-elev) 56%, transparent);
  overflow: hidden;
  isolation: isolate;
}
.s4-smart-p.is-on { visibility: visible; opacity: 1; transform: none; }
body:not(.s4-js) .s4-smart-p { visibility: visible; opacity: 1; transform: none; grid-area: auto; margin-bottom: 12px; }

/* La letra fantasma. Lee la propia letra del panel con attr(), asi que
   no hace falta ni una linea de JS para que el fondo la reconozca.
   Va CENTRADA en la franja vacia de la derecha, no colgada de una
   esquina: con top/right negativos la letra se salia del panel por dos
   lados y, como cada glifo tiene un ancho distinto, la S, la M y la T
   caian cada una en un sitio. Centrarla en una franja fija hace que las
   cinco aterricen exactamente en el mismo punto al cambiar de pestaña.
   La franja es el 30 % derecho y el texto nunca llega ahi: los dos
   bloques estan acotados con max-width en ch (66ch y 74ch). */
.s4-smart-p::before {
  content: attr(data-k);
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 34%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(9rem, 18vw, 18rem);
  font-weight: 700;
  line-height: 1;
  /* Las cinco son versales y no tienen descendente, asi que el hueco
     bajo la linea base descentra el glifo hacia arriba. Se compensa. */
  transform: translateY(.05em);
  color: color-mix(in srgb, var(--accent) 9%, transparent);
  pointer-events: none;
  user-select: none;
}
.s4-smart-pt, .s4-smart-pd, .s4-smart-pe { position: relative; z-index: 1; }

.s4-smart-pt {
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--text);
  margin: 0 0 12px;
}
.s4-smart-pd {
  font-size: .92rem;
  line-height: 1.68;
  color: var(--text-muted);
  margin: 0 0 clamp(16px, 2.2vw, 22px);
  max-width: 66ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* La caja "cómo se cumple aquí": insignia de verificación, borde de
   acento y un poco más de aire. Es la única parte de la tarjeta con
   autoridad para decir "esto ya está resuelto en el trabajo", y antes se
   veia igual de discreta que el párrafo de arriba. */
.s4-smart-pe {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px 17px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-size: .86rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 74ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.s4-smart-pe b { color: var(--text); font-weight: 600; }
.s4-smart-check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.s4-smart-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 620px) {
  /* En estrecho el texto ocupa todo el ancho y no queda franja vacia:
     la letra baja a la esquina inferior derecha como marca de agua, que
     es el unico sitio donde no cae detras de una linea de texto. */
  .s4-smart-p::before {
    top: auto;
    bottom: 6px;
    right: 10px;
    width: auto;
    display: block;
    font-size: 5.5rem;
    transform: none;
  }
}

/* Objetivo general destacado */
.s4-general {
  margin-top: clamp(26px, 4vw, 40px);
  padding: clamp(24px, 3.6vw, 36px);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.s4-general-t { font-family: var(--font-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px; }
.s4-general-x {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 2.2vw, 1.42rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--text);
  margin: 0;
  max-width: 44ch;
}
.s4-general-x b { font-weight: 700; }

/* Los objetivos especificos, por plazo */
.s4-plazos { display: grid; gap: 12px; margin-top: 22px; }
.s4-plazo-cab {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: clamp(22px, 3vw, 32px) 0 4px;
}
.s4-plazo-k { font-family: var(--font-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.s4-plazo-r { font-size: .8rem; color: var(--text-faint); }
.s4-obj {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px 20px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 48%, transparent);
}
.s4-obj-k { font-family: var(--font-display); font-size: .84rem; font-weight: 700; color: var(--accent); }
.s4-obj-t { font-size: .93rem; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.s4-obj-t b { font-weight: 600; }
.s4-obj-smart { display: flex; flex-wrap: wrap; gap: 6px; }
.s4-obj-s {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  font-size: .74rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.s4-obj-s b { font-family: var(--font-display); color: var(--accent); font-weight: 700; }
/* La trazabilidad no es un criterio SMART —la R del profesor mide el
   reto, no la relevancia—, asi que se distingue de las cinco pildoras:
   dice de que factor de la DOFA sale el objetivo y que criterio de la
   MPC mueve. Es lo que deja seguir el hilo analisis -> objetivo. */
.s4-obj-s.is-liga {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--text-muted);
}
.s4-obj-s.is-liga::before {
  content: "↳";
  color: var(--accent);
  font-weight: 700;
}
@media (max-width: 620px) { .s4-obj { grid-template-columns: minmax(0, 1fr); } }

/* Trazabilidad macroestrategia -> objetivo */
.s4-traza { overflow-x: auto; margin-top: 24px; }

/* =====================================================================
   11. REFERENCIAS
   ===================================================================== */
.s4-refs { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.s4-refs li {
  padding-left: 22px;
  text-indent: -22px;
  font-size: .84rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 92ch;
}
.s4-refs a { color: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.s4-refs cite { font-style: italic; }

/* =====================================================================
   4c. LAS TRES PRESIONES DEL «POR QUE AHORA»
   Era un parrafo de doce lineas que enumeraba «la primera… la segunda…
   la tercera». Cuando un texto ya viene numerado por dentro, la forma
   correcta no es un parrafo: son tres piezas, cada una con la cifra que
   la sostiene, para que la urgencia se vea antes de leerse.
   ===================================================================== */
.s4-presiones {
  list-style: none;
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  counter-reset: none;
}
.s4-presion {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 20px 22px;
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--dato) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 56%, transparent);
  transition: border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.s4-presion:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .8);
  border-color: color-mix(in srgb, var(--dato) 42%, transparent);
}
.s4-presion-e {
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.s4-presion-c {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--dato);
  font-variant-numeric: tabular-nums;
}
.s4-presion-t {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.24;
  color: var(--text);
  margin-top: 2px;
}
.s4-presion-d {
  font-size: .82rem;
  line-height: 1.56;
  color: var(--text-muted);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.s4-presion-d b { color: var(--text); font-weight: 600; }

/* =====================================================================
   5b. MISION, VISION Y VALORES CON BOTONES

   Antes iban las dos versiones a la vez, una en cada columna, y el nombre
   del elemento en letra de rotulo. Dos problemas: el nombre —que es lo
   que el capitulo trata— pesaba menos que el texto, y comparar obligaba a
   mover los ojos entre dos columnas de sesenta palabras cada una.

   Ahora el nombre va en grande y las dos versiones se alternan EN EL
   MISMO SITIO. Comparar pasa a ser pulsar: el texto cambia debajo del
   dedo y la diferencia se nota, que es justo lo que un antes/despues
   tiene que conseguir. Los dos paneles viven apilados en la misma celda
   de rejilla para que la caja no salte al cambiar.
   ===================================================================== */
.s4-tr-cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: clamp(14px, 2vw, 20px);
}
.s4-tr-num {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin: 0;
}
.s4 .s4-tr-nom {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1;
  color: var(--text);
  margin: 0;
}
.s4-tr-est {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.s4-tr-est.is-mod { color: color-mix(in srgb, var(--dato) 92%, var(--text)); }
.s4-tr-est.is-nueva { color: var(--accent); }

/* Los dos botones. Se leen como botones: tienen caja, tienen estado y el
   activo invierte el color en vez de solo subrayarse. */
.s4-tr-mando {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-elev) 62%, transparent);
}
.s4-tr-b {
  padding: 9px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .28s cubic-bezier(.16,1,.3,1), color .28s ease;
}
.s4-tr-b:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.s4-tr-b[aria-selected="true"] { background: var(--accent); color: var(--bg); }
.s4-tr-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.s4-tr-visor { display: grid; }
.s4-tr-lado {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1);
}
.s4-tr-lado.is-on { visibility: visible; opacity: 1; transform: none; }
body:not(.s4-js) .s4-tr-lado {
  visibility: visible; opacity: 1; transform: none;
  grid-area: auto; margin-bottom: 18px;
}

/* =====================================================================
   6b. DECISION DE ALCANCE DEL MACROENTORNO

   Era una tabla de tres columnas al final del capitulo, y es lo primero
   que hay que leer: dice sobre que se trabaja. Ahora son seis fichas al
   principio, y la que se descarta se distingue sin leerla —borde
   discontinuo, numero apagado y el texto en gris—, porque una decision
   negativa que se ve igual que una positiva no comunica que hubo
   decision.
   ===================================================================== */
.s4-alcance { margin: clamp(24px, 3.4vw, 40px) 0 clamp(28px, 4vw, 46px); }
.s4-alcance-t {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 10px;
}
.s4-alcance-d {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  font-size: .92rem;
  line-height: 1.66;
  color: var(--text-muted);
  max-width: 74ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.s4-alcance-d b { color: var(--text); font-weight: 600; }

.s4-alc-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 10px;
}
.s4-alc-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 16px 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 58%, transparent);
  transition: border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), background-image .28s ease;
}
.s4-alc-f[data-d="si"] { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.s4-alc-f[data-d="no"] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text) 20%, transparent);
  background: transparent;
}
.s4-alc-est {
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}
.s4-alc-f[data-d="no"] .s4-alc-est { color: var(--text-faint); }
.s4-alc-n {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}
.s4-alc-f[data-d="no"] .s4-alc-n { color: var(--text-muted); }
.s4-alc-j { font-size: .78rem; line-height: 1.5; color: var(--text-muted); }
.s4-alc-f[data-d="no"] .s4-alc-j { color: var(--text-faint); }

@media (hover: hover) and (pointer: fine) {
  .s4-alc-f.is-luz {
    border-color: color-mix(in srgb, var(--accent) 46%, transparent);
    transform: translateY(-2px);
    background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--accent) 17%, transparent), transparent 68%);
  }
}

/* =====================================================================
   9b. LAS CINCO FUERZAS, CON IMAGEN

   Cada hoja del acordeon lleva su fotografia. Sobre ella el texto no se
   lee, asi que va un velo que es DENSO donde esta el texto y transparente
   donde esta el motivo: en la hoja cerrada la lectura ocurre en el lomo
   vertical de la izquierda, y en la abierta en toda la caja. Por eso el
   velo cambia de direccion al abrir, y no solo de opacidad.
   ===================================================================== */
/* LA FOTO NO ES PAPEL PINTADO. La version anterior tenia la imagen a
   inset:0 en los dos estados y el velo abierto arrancaba en el 12 %: el
   titulo de la fuerza, el recuento y el resumen caian encima de la
   fotografia a plena luz y no se leian —se ve en la captura del 9-sep—.
   Ademas la foto es vertical (2:3) y en la hoja abierta, que es ancha,
   background-size:cover la recortaba a una franja central irreconocible.
   Ahora la foto tiene un papel distinto en cada estado:
   · cerrada  -> es un cartel: ocupa la hoja entera, a todo color, con
                 un velo oscuro de abajo arriba para el lomo vertical.
                 La hoja es vertical y la foto tambien: encaja sin recorte.
   · abierta  -> deja de estar detras del texto y pasa a ser la cabecera
                 (.s4-fuerza-cab), una banda con su propio velo. El
                 cuerpo queda sobre superficie solida, siempre legible.
   El velo es negro fijo y no var(--bg) a proposito: aqui la hoja es un
   objeto fotografico con su texto en blanco, y este tramo de la pagina
   es claro —con var(--bg) el velo era blanco y lavaba las cinco fotos. */
.s4-fuerza-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--img);
  /* auto 132% en vez de cover: cover deja la imagen clavada al alto de
     la columna y sin desbordamiento vertical no hay nada que reencuadrar.
     Con 132 % sobra un 32 % de alto y el punto de interes puede subir o
     bajar. Es lo que saca del recorte el titular incrustado. */
  background-size: auto 132%;
  /* Las cinco laminas llevan un titular incrustado en la franja alta y
     la columna cerrada es muy estrecha: encuadrando al centro ese texto
     salia cortado a media palabra. Bajando el punto de interes se ve la
     escena y el titular queda fuera del recorte. */
  background-position: center 52%;
  opacity: 1;
  filter: contrast(1.06) saturate(1.12);
  transition: opacity .45s ease, transform .8s cubic-bezier(.16,1,.3,1);
  transform: scale(1.04);
}
.s4-fuerza:hover .s4-fuerza-fondo { transform: scale(1.08); }
.s4-fuerza.is-open .s4-fuerza-fondo { opacity: 0; }

.s4-fuerza-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity .45s ease;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 14, .18) 0%,
    rgba(6, 10, 14, .40) 40%,
    rgba(6, 10, 14, .72) 74%,
    rgba(6, 10, 14, .90) 100%);
}
.s4-fuerza.is-open .s4-fuerza-velo { opacity: 0; }

/* Hoja cerrada: el lomo va SIEMPRE en blanco, porque debajo hay una
   fotografia y no la superficie de la pagina. */
.s4-fuerza:not(.is-open) .s4-fuerza-n { color: rgba(255, 255, 255, .74); }
.s4-fuerza:not(.is-open) .s4-fuerza-t {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}
.s4-fuerza:not(.is-open) .s4-fuerza-int {
  color: #fff;
  border-color: rgba(255, 255, 255, .52);
  background: rgba(6, 10, 14, .42);
}

/* Hoja abierta: la cabecera es la banda con la foto. Sangra hasta el
   borde del panel comiendose el padding del cuerpo (18px 20px) y va
   DENTRO del bloque con scroll, asi que acompana al contenido en vez de
   quedarse flotando cuando se baja por las diez variables. */
.s4-fuerza.is-open .s4-fuerza-cab {
  position: relative;
  margin: -18px -20px 16px;
  padding: clamp(62px, 8vw, 92px) 20px 15px;
  background-image:
    linear-gradient(180deg,
      rgba(6, 10, 14, .12) 0%,
      rgba(6, 10, 14, .52) 46%,
      rgba(6, 10, 14, .88) 82%,
      rgba(6, 10, 14, .95) 100%),
    var(--img);
  background-size: cover, cover;
  background-position: center 40%, center 40%;
  background-repeat: no-repeat, no-repeat;
}
.s4-fuerza.is-open .s4-fuerza-cab .s4-fuerza-n { color: rgba(255, 255, 255, .80); }
.s4-fuerza.is-open .s4-fuerza-cab h4 { color: #fff; }
.s4-fuerza.is-open .s4-fuerza-cab .s4-fuerza-res { color: rgba(255, 255, 255, .90); }

/* Apiladas, la foto ya la lleva el lomo. Si la cabecera conservara la
   suya, la misma imagen saldria dos veces en la misma tarjeta y el
   titulo en blanco quedaria sobre superficie clara en el tramo claro.
   Va DESPUES de la regla de arriba a proposito: misma especificidad,
   gana la ultima. */
@media (max-width: 900px), (hover: none) {
  .s4-fuerza.is-open .s4-fuerza-cab {
    margin: 0 0 14px;
    padding: 0;
    background-image: none;
  }
  .s4-fuerza.is-open .s4-fuerza-cab .s4-fuerza-n { color: var(--text-faint); }
  .s4-fuerza.is-open .s4-fuerza-cab h4 { color: var(--text); }
  .s4-fuerza.is-open .s4-fuerza-cab .s4-fuerza-res { color: var(--text-muted); }
}

/* =====================================================================
   9d. LOS DOS ACORDEONES VAN SIEMPRE EN OSCURO
   Las cinco fuerzas y los tres actores del microentorno caen en el tramo
   claro de la escena, asi que heredaban superficie blanca y texto oscuro.
   Sobre una fotografia eso obliga a velos muy densos y el resultado era
   una tarjeta deslavada. Se resuelve de raiz: la tarjeta REDEFINE los
   tokens del sitio dentro de si misma, con lo que todo lo que lleva
   dentro —superficies, bordes, pildoras de intensidad, los positivos y
   negativos— se recalcula solo sin escribir una regla por pieza. Una
   custom property declarada en el propio elemento gana a la que la
   escena interpola en un ancestro, asi que la tarjeta queda fuera del
   viraje claro/oscuro por diseno.
   ===================================================================== */
.s4-fuerza,
.s4-actor {
  --bg: #0a0d10;
  --bg-elev: #11161c;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, .82);
  --text-faint: rgba(255, 255, 255, .56);
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .22);
  --accent: #2ec4ec;
  --dato: #edb95e;
  background: var(--bg-elev);
  color: var(--text);
  border-color: rgba(255, 255, 255, .16);
}
/* Titulo en azul y lectura en blanco: separa de un vistazo el nombre de
   la variable de lo que se dice sobre ella. */
.s4-fuerza .s4-var-t,
.s4-actor .s4-actor-c > b:first-child { color: var(--accent); }
/* SOLO z-index. El lomo y el cuerpo ya llevan position:absolute desde su
   regla base (líneas 1917 y 1959): es lo que hace que el cuerpo cerrado
   quede tapado por el lomo en vez de estirar la tarjeta, que es el
   mecanismo entero del acordeón. Pisarlo con position:relative aquí
   sacaba a las dos capas del apilado absoluto y las devolvía al flujo
   normal, así que las cinco hojas se veían todas a la vez, superpuestas
   y sin la franja del lomo. */
.s4-fuerza-lomo, .s4-fuerza-cuerpo { z-index: 2; }

/* =====================================================================
   9c. LAS REFERENCIAS PLEGADAS
   Veintinueve entradas seguidas cierran la pagina con un muro. Un
   <details> las guarda y no cuesta ni una linea de JavaScript: el
   navegador ya sabe abrirlo, enfocarlo con teclado y —lo que importa
   aqui— imprimirlo abierto si se manda la pagina a PDF.
   ===================================================================== */
.s4-refs-caja {
  margin-top: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev) 50%, transparent);
  overflow: hidden;
}
.s4-refs-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  transition: background .25s ease;
}
.s4-refs-sum::-webkit-details-marker { display: none; }
.s4-refs-sum:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.s4-refs-caja:focus-within .s4-refs-sum { outline: 2px solid var(--accent); outline-offset: -2px; }
.s4-refs-sum-t {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}
.s4-refs-sum-i {
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.s4-refs-caja[open] .s4-refs-sum-i { transform: rotate(-135deg) translate(-2px, -2px); }
.s4-refs-caja[open] .s4-refs-sum { border-bottom: 1px solid var(--border); }
.s4-refs-caja .s4-refs { margin: 0; padding: 20px 22px 22px; }
@media print { .s4-refs-caja .s4-refs { display: grid !important; } }

/* =====================================================================
   9d. ROLES COMPETITIVOS Y ACORDEON DE 7.4 · 7.5 · 7.6

   Los roles: cabecera siempre visible con el logo, el nombre, el rol y la
   puntuacion —que es la comparacion— y el analisis desplegandose hacia
   abajo solo si se pide. La cuarta no tiene logo porque el seguidor no
   esta identificado, y esa ausencia se ve.

   El acordeon de actores abre HACIA ABAJO, con la fotografia del actor de
   fondo y un velo denso: la imagen situa y el texto se lee encima sin
   pelear. El cuerpo se anima con grid-template-rows de 0fr a 1fr, que es
   la unica forma de animar un alto desconocido sin medirlo en JS.
   ===================================================================== */

/* ---- roles ---- */
.s4-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 18px;
  align-items: start;
}
.s4-rol {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 60%, transparent);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.s4-rol:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 18px 38px -20px rgba(0,0,0,.75);
  transform: translateY(-2px);
}
/* Tres columnas, no cuatro: el puntaje dejó de tener columna propia y
   ahora vive DENTRO de .s4-rol-id, como tercera línea bajo el rol. Con
   cuatro columnas (logo, nombre, puntaje, flecha) la columna del nombre
   se quedaba en ~50px de ancho —el puntaje y la flecha se llevaban el
   resto—, y con nombres largos como «Arepas Sonsoneña» la palabra no
   tenía dónde partirse y se salía de su columna, montándose sobre el
   número. Con tres columnas el nombre tiene casi toda la tarjeta. */
.s4-rol-cab {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.s4-rol-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.s4-rol-logo {
  width: 54px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  padding: 5px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  display: grid;
  place-items: center;
}
/* contain, no cover: las cuatro imágenes de marca no comparten
   proporción ni encuadre —una foto de producto, un logotipo cuadrado,
   una etiqueta apaisada— y recortarlas a la fuerza dentro de una caja de
   54×42 cortaba texto de cada logo a la mitad. Con contain se ve el
   logo entero, aunque quede más pequeño en unas marcas que en otras. */
.s4-rol-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.s4-rol-anon {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-faint);
}
.s4-rol-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s4-rol-e {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.s4-rol-r {
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.s4-rol-p {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 5px 0 0;
  font-variant-numeric: tabular-nums;
}
.s4-rol[data-e="sa"] .s4-rol-p { color: var(--ent-sa); }
.s4-rol[data-e="so"] .s4-rol-p { color: var(--ent-so); }
.s4-rol[data-e="ee"] .s4-rol-p { color: var(--ent-ee); }
.s4-rol[data-e="anon"] .s4-rol-p { color: var(--text-faint); }

.s4-rol-i {
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .34s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.s4-rol-cab[aria-expanded="true"] .s4-rol-i {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--accent);
}
.s4-rol-cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .44s cubic-bezier(.16,1,.3,1);
}
.s4-rol-cab[aria-expanded="true"] + .s4-rol-cuerpo { grid-template-rows: 1fr; }
.s4-rol-d {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 16px;
  font-size: .82rem;
  line-height: 1.56;
  color: var(--text-muted);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.s4-rol-cab[aria-expanded="true"] + .s4-rol-cuerpo .s4-rol-d { padding: 4px 16px 16px; }
body:not(.s4-js) .s4-rol-cuerpo { grid-template-rows: 1fr; }
body:not(.s4-js) .s4-rol-d { padding: 4px 16px 16px; }

/* ---- acordeón vertical de actores ---- */
.s4-actores { display: grid; gap: 12px; margin-top: 20px; }
.s4-actor {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}
.s4-actor-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center 38%;
  opacity: .42;
  /* Grayscale(.5) sin ningún realce dejaba las tres fotos deslavadas
     incluso abiertas al 100%: "grayscale(0)" solo vuelve al color
     original, no lo sube. Las tres imágenes también se reexportaron a
     mayor resolución (1920×720, con nitidez añadida) para la vista
     abierta a ancho completo. */
  filter: grayscale(.28) contrast(1.1) saturate(1.25);
  transform: scale(1.04);
  transition: opacity .55s ease, filter .55s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.s4-actor:has(.s4-actor-cab[aria-expanded="true"]) .s4-actor-fondo {
  opacity: .92;
  filter: grayscale(0) contrast(1.16) saturate(1.4);
  transform: scale(1);
}
/* El velo. Denso siempre por abajo, porque ahi es donde cae el texto al
   abrirse, y suave arriba para que la fotografia se vea. */
.s4-actor-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 20%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 22%,
    color-mix(in srgb, var(--bg) 97%, transparent) 42%,
    color-mix(in srgb, var(--bg) 99%, transparent) 100%);
}
.s4-actor-cab, .s4-actor-cuerpo { position: relative; z-index: 2; }

.s4-actor-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 28px);
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.s4-actor-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.s4 .s4-actor-n {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 2vw, 1.34rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}
.s4-actor-niv {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.s4-actor-niv[data-i="alta"] { color: color-mix(in srgb, var(--accent) 92%, var(--text)); }
.s4-actor-niv[data-i="media"] { color: color-mix(in srgb, var(--dato) 92%, var(--text)); }
.s4-actor-niv[data-i="baja"] { color: var(--text-faint); }
.s4-actor-i {
  width: 10px; height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
}
.s4-actor-cab[aria-expanded="true"] .s4-actor-i { transform: rotate(-135deg) translate(-2px, -2px); }

.s4-actor-cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.16,1,.3,1);
}
.s4-actor-cab[aria-expanded="true"] + .s4-actor-cuerpo { grid-template-rows: 1fr; }
.s4-actor-in { overflow: hidden; min-height: 0; }
.s4-actor-in > div,
.s4-actor-in { display: block; }
@media (min-width: 900px) {
  .s4-actor-in > .s4-actor-c { max-width: none; }
  .s4-actor-cuerpo .s4-actor-in {
    column-count: 2;
    column-gap: clamp(24px, 3vw, 44px);
  }
  .s4-actor-c { break-inside: avoid; }
}
.s4-actor-in > * { padding-inline: clamp(20px, 2.6vw, 28px); }
.s4-actor-in > *:last-child { padding-bottom: clamp(22px, 3vw, 30px); }
.s4-actor-c {
  display: block;
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 92ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
/* Solo el PRIMER <b> es el rotulo del bloque. Antes la regla cogia
   cualquier <b>, asi que un enfasis dentro del parrafo —"vende en el
   canal mas grande..."— se convertia en un rotulo en versalitas y
   partia la frase en dos. */
.s4-actor-c > b:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
  font-weight: 600;
}
.s4-actor-c b { font-weight: 600; color: var(--text); }
.s4-actor-c > b:first-child + * { display: inline; }
body:not(.s4-js) .s4-actor-cuerpo { grid-template-rows: 1fr; }

@media (max-width: 560px) {
  .s4-rol-cab { grid-template-columns: 46px minmax(0, 1fr) 14px; gap: 10px; }
  .s4-actor-cab { grid-template-columns: minmax(0, 1fr) 14px; row-gap: 8px; }
  .s4-actor-niv { grid-column: 1; justify-self: start; }
}

/* =====================================================================
   9e. 7.3.4 EL ESTUDIO CUALITATIVO, EN TRES FICHAS
   Eran tres parrafos de doce lineas en una columna, con media pagina
   vacia a la derecha. Cada competidor pasa a ficha: quien es, sus cifras
   duras y —abajo, separada— SU GRIETA, que es lo unico accionable de
   todo el bloque y estaba enterrado en la mitad del parrafo.
   ===================================================================== */
.s4-cual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
  margin-top: clamp(18px, 2.4vw, 26px);
  align-items: start;
}
.s4-cual-c {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 58%, transparent);
  transition: border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.s4-cual-c:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px -22px rgba(0,0,0,.75);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.s4-cual-cab { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 12px; align-items: center; }
.s4-cual-logo {
  width: 66px; height: 50px; border-radius: 9px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  display: grid; place-items: center;
}
.s4-cual-logo img { width: 100%; height: 100%; object-fit: cover; }
.s4-cual-anon { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text-faint); }
.s4-cual-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s4-cual-n { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.s4-cual-r { font-family: var(--font-display); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }

.s4-cual-cifras { display: flex; flex-wrap: wrap; gap: 7px; }
.s4-cual-cifras span {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: .7rem; color: var(--text-muted);
}
.s4-cual-cifras span b {
  font-family: var(--font-display); font-size: .92rem; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.s4-cual-cifras span.is-adv {
  border-color: color-mix(in srgb, var(--dato) 34%, transparent);
  background: color-mix(in srgb, var(--dato) 9%, transparent);
}
.s4-cual-cifras span.is-adv b { color: color-mix(in srgb, var(--dato) 92%, var(--text)); }

.s4-cual-p {
  margin: 0; font-size: .82rem; line-height: 1.58; color: var(--text-muted);
  text-align: justify; text-justify: inter-word; hyphens: auto;
}
.s4-cual-p b { color: var(--text); font-weight: 600; }

/* La grieta, separada del resto: es lo unico de la ficha sobre lo que se
   puede actuar, y enterrada en el parrafo no se veia. */
.s4-cual-g {
  margin: auto 0 0; padding: 14px 15px 15px;
  border-radius: 12px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: .8rem; line-height: 1.55; color: var(--text-muted);
  text-align: justify; text-justify: inter-word; hyphens: auto;
}
.s4-cual-g span {
  display: block; font-family: var(--font-display); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 5px;
}
.s4-cual-g b { color: var(--text); font-weight: 600; }

/* =====================================================================
   10a. LOS VALORES QUE SE VOLTEAN

   Delante, la fotografia de marca a color con el nombre del valor.
   Detras, LA MISMA fotografia en gris y oscurecida, para que el texto se
   lea sobre ella sin necesidad de otra caja: quitarle el color es lo que
   convierte una imagen en un fondo.

   El giro va en el eje Y sobre un padre con perspectiva, y cada cara
   lleva `backface-visibility: hidden`, que es lo unico que impide ver el
   reverso espejado de la cara de delante. Se voltea al pasar el cursor y
   TAMBIEN al pulsar, porque en tactil no hay cursor: por eso la tarjeta
   es un <button> y no un <div>, y por eso lleva aria-expanded.
   ===================================================================== */
.s4-valores { margin: clamp(22px, 3vw, 34px) 0 0; }
.s4-valores-e {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 14px;
}
.s4-valores-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 12px;
}
.s4-val { perspective: 1200px; }
.s4-val-caja {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.16,1,.3,1);
  border-radius: 16px;
}
.s4-val-caja:hover,
.s4-val-caja[aria-expanded="true"] { transform: rotateY(180deg); }
.s4-val-caja:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.s4-val-cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.s4-val-cara.is-dorso { transform: rotateY(180deg); }
.s4-val-cara img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .5s ease;
}
/* El dorso pierde el color: es lo que deja leer el texto. */
.s4-val-cara.is-dorso img { filter: grayscale(1) contrast(1.06) brightness(.5); }

.s4-val-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 4%, transparent) 0%,
    color-mix(in srgb, var(--bg) 48%, transparent) 46%,
    color-mix(in srgb, var(--bg) 92%, transparent) 100%);
}
.s4-val-cara.is-dorso .s4-val-velo {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 74%, transparent),
    color-mix(in srgb, var(--bg) 88%, transparent));
}

.s4-val-n {
  position: relative;
  z-index: 2;
  padding: 0 15px 16px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--text);
  text-align: left;
}
.s4-val-pista {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 26%, transparent);
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg) 45%, transparent);
}

.s4-val-dorso-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 15px;
  height: 100%;
  justify-content: center;
  text-align: left;
}
.s4-val-dn {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
}
.s4-val-q { font-size: .8rem; line-height: 1.48; color: var(--text); }
.s4-val-c { font-size: .73rem; line-height: 1.45; color: var(--text-muted); }
.s4-val-c b { display: block; color: var(--text-faint); font-weight: 600; font-size: .92em; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }

/* Sin JS y al imprimir las dos caras se ven, una debajo de la otra. */
body:not(.s4-js) .s4-val-caja { transform: none; height: auto; aspect-ratio: auto; }
body:not(.s4-js) .s4-val-cara { position: relative; transform: none; }

/* =====================================================================
   10b. LA MEGA
   La rubrica la califica en un criterio propio y pide «todos los aspectos
   asociados», asi que la pieza no es un parrafo destacado: es la meta y
   sus cuatro aspectos, incluido el que casi nadie escribe —a que se
   renuncia—, que va marcado distinto porque es el unico que obliga.
   ===================================================================== */
.s4-megabloque {
  margin: clamp(20px, 2.6vw, 30px) 0 clamp(28px, 3.6vw, 42px);
  padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 38px) clamp(22px, 2.8vw, 32px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(130% 120% at 8% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-elev) 70%, transparent);
}
.s4-megabloque-e {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.s4-megabloque-t {
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 2.1vw, 1.62rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -.018em;
  color: var(--text-muted);
  margin: 0 0 clamp(22px, 2.8vw, 32px);
  max-width: 46ch;
  text-wrap: pretty;
}
.s4-megabloque-t b { color: var(--text); font-weight: 700; }

.s4-megabloque-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 10px;
}
.s4-megadato {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px 17px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-elev) 62%, transparent);
}
.s4-megadato-e {
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.s4-megadato-c {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--accent);
}
.s4-megadato-d { font-size: .78rem; line-height: 1.5; color: var(--text-muted); }

/* La renuncia va en ambar y no en cian: no es un logro, es un coste. */
.s4-megadato.is-renuncia { border-color: color-mix(in srgb, var(--dato) 34%, transparent); }
.s4-megadato.is-renuncia .s4-megadato-c { color: var(--dato); }

.s4-megabloque-p {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: .86rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 76ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.s4-megabloque-p b { color: var(--text); font-weight: 600; }

/* =====================================================================
   11a. CAPITULO 8 — LA DECISION METODOLOGICA Y EL CAMINO

   El capitulo ya no abre con tres tarjetas de «rutas» que sugerian que se
   recorrian dos a la vez. Abre declarando cual se escogio y por que, y
   dibujando el camino como lo que es: una cadena donde cada eslabon
   consume el anterior. El eslabon 8.3 va marcado porque es el unico que
   prescribe; los demas describen.
   ===================================================================== */
.s4-eleccion {
  margin: clamp(24px, 3.4vw, 40px) 0 clamp(30px, 4vw, 48px);
  padding: clamp(22px, 2.8vw, 32px) clamp(22px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg-elev) 62%, transparent);
}
.s4-eleccion-t {
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.s4-eleccion-p {
  margin: 0 0 12px;
  font-size: .96rem;
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 78ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.s4-eleccion-p b { color: var(--text); font-weight: 600; }

/* El camino. Numeros grandes, una linea que los cose y el eslabon que
   prescribe en acento. */
.s4-camino {
  list-style: none;
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
  counter-reset: none;
}
.s4-camino-p {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
  transition: border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.s4-camino-p:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); }
.s4-camino-n {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.s4-camino-t { font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.s4-camino-d { font-size: .78rem; line-height: 1.5; color: var(--text-muted); }
.s4-camino-p.is-clave {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.s4-camino-p.is-clave .s4-camino-n { color: var(--accent); }

/* Las dos matrices ponderadas, alternandose. El total de cada una viaja
   en su propia pestana: es el dato que el lector viene a buscar. */
.s4-matrices { margin: clamp(20px, 2.6vw, 30px) 0 0; }
.s4-tab-c {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .78em;
  font-weight: 700;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
}
.s4-tab[aria-selected="true"] .s4-tab-c { background: var(--accent); color: var(--bg); }

/* =====================================================================
   11c. LA DOFA — CUATRO TARJETAS QUE SE VOLTEAN

   Delante, LA LETRA a tamano de cartel: D, O, F, A. Es la unica pieza de
   la pagina donde una letra sola ocupa media tarjeta, y se lo gana
   porque el capitulo entero se llama por esas cuatro letras.

   Detras, los diez factores con su fuente. El giro es el mismo mecanismo
   de las tarjetas de valor —perspectiva en el padre, rotacion en el hijo,
   backface oculta— pero aqui NO se voltea al pasar el cursor: se voltea
   al pulsar. Diez factores con cita no se leen de paso, y una tarjeta que
   se da la vuelta sola mientras el ojo la cruza es una trampa.

   Cada letra lleva su color: las internas en el acento de la pagina, las
   externas en el ambar de los datos. Interno y externo es la division que
   la matriz hace, y el color la repite sin una sola palabra.
   ===================================================================== */
.s4-dofa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: clamp(22px, 3vw, 32px) 0 0;
}
.s4-dofa-q { perspective: 1500px; }

.s4-dofa-caja {
  position: relative;
  display: block;
  width: 100%;
  min-height: 340px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
  border-radius: 18px;
}
.s4-dofa-caja[aria-expanded="true"] { transform: rotateY(180deg); }
.s4-dofa-caja:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.s4-dofa-cara {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.s4-dofa-cara.is-dorso {
  transform: rotateY(180deg);
  overflow-y: auto;
  padding: 18px 18px 20px;
}

/* --- la cara de delante --- */
.s4-dofa-letra {
  font-family: var(--font-display);
  font-size: clamp(5.4rem, 11vw, 8.2rem);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.06em;
  margin-bottom: auto;
}
.s4-dofa-nom {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  margin-top: 14px;
}
.s4-dofa-glosa {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 5px;
}
.s4-dofa-cn {
  margin-top: 14px;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* internas en acento, externas en ambar */
.s4-dofa-q[data-q="f"] .s4-dofa-letra,
.s4-dofa-q[data-q="d"] .s4-dofa-letra { color: color-mix(in srgb, var(--accent) 78%, transparent); }
.s4-dofa-q[data-q="o"] .s4-dofa-letra,
.s4-dofa-q[data-q="a"] .s4-dofa-letra { color: color-mix(in srgb, var(--dato) 82%, transparent); }
.s4-dofa-q[data-q="f"] .s4-dofa-cara.is-frente,
.s4-dofa-q[data-q="d"] .s4-dofa-cara.is-frente { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.s4-dofa-q[data-q="o"] .s4-dofa-cara.is-frente,
.s4-dofa-q[data-q="a"] .s4-dofa-cara.is-frente { border-color: color-mix(in srgb, var(--dato) 30%, transparent); }

.s4-dofa-caja:hover .s4-dofa-cara.is-frente {
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--accent));
}

/* --- la cara de detras --- */
.s4-dofa-dorso-cab {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
  flex: none;
}
.s4-dofa-dorso-cab b { color: var(--accent); font-weight: 700; margin-right: 4px; }
.s4-dofa-q[data-q="o"] .s4-dofa-dorso-cab b,
.s4-dofa-q[data-q="a"] .s4-dofa-dorso-cab b { color: var(--dato); }

.s4-dofa-l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.s4-dofa-l li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  font-size: .78rem;
  line-height: 1.48;
  color: var(--text-muted);
}
.s4-dofa-k {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-faint);
  padding-top: 1px;
}
.s4-dofa-l cite { display: block; font-style: normal; font-size: .92em; color: var(--text-faint); margin-top: 2px; }

/* Sin JS las dos caras se ven, una debajo de la otra. */
body:not(.s4-js) .s4-dofa-caja { transform: none; min-height: 0; }
body:not(.s4-js) .s4-dofa-cara { position: relative; transform: none; margin-bottom: 10px; }

/* =====================================================================
   11b. EL EFECTO DE CURSOR — LA LUZ DENTRO DE LA TARJETA

   El primer intento fue una cruz dibujada ENCIMA de toda la pagina y
   estorbaba: una capa entre el lector y el texto no aporta nada, y ya
   costo aprenderlo una vez en la portada. La regla que salio de alli es
   la contraria —sobre el texto no se dibuja nada; lo que reacciona es la
   propia pagina— y esto es esa regla aplicada aqui.

   No hay lienzo ni capa: la luz es una CAPA DE FONDO de la propia
   tarjeta, asi que queda por debajo del texto, recortada por el borde y
   sin un solo pixel fuera de la caja. El JS solo publica --mx y --my.

   Va en background-image y no en un pseudoelemento a proposito: casi
   todas estas tarjetas ya gastan ::before o ::after en otra cosa, y
   ninguna declara imagen de fondo, de modo que el color que ya tenian
   sigue debajo intacto.
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
  .s4-parada-in,
  .s4-oe-c, .s4-camino-p, .s4-conf-i, .s4-vp-b, .s4-pila-in,
  .s4-nota, .s4-megadato, .s4-hecho, .s4-obj {
    transition: background-image .28s ease, border-color .28s ease,
                box-shadow .3s cubic-bezier(.16,1,.3,1),
                transform .3s cubic-bezier(.16,1,.3,1);
  }

  .s4-parada.is-luz .s4-parada-in,
  .s4-oe-c.is-luz, .s4-camino-p.is-luz, .s4-conf-i.is-luz,
  .s4-vp-b.is-luz, .s4-pila-in.is-luz, .s4-nota.is-luz,
  .s4-megadato.is-luz, .s4-hecho.is-luz, .s4-obj.is-luz {
    background-image: radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--accent) 20%, transparent),
      transparent 68%);
  }

  /* Las tarjetas que son una unidad de lectura tambien crecen un punto:
     el aumento dice "esta es la que estas mirando" mejor que un borde. */
  .s4-oe-c.is-luz, .s4-camino-p.is-luz, .s4-megadato.is-luz, .s4-obj.is-luz {
    border-color: color-mix(in srgb, var(--accent) 44%, transparent);
    box-shadow: 0 18px 38px -18px rgba(0, 0, 0, .8);
    transform: translateY(-3px) scale(1.014);
  }
  .s4-conf-i.is-luz, .s4-vp-b.is-luz {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  }
}

/* =====================================================================
   11d. EL HALO — EL EFECTO DE MOUSE DE TODA LA PAGINA

   La regla que ya costo aprender: sobre el texto no se DIBUJA nada. Esta
   capa no dibuja: MODULA. Con mix-blend-mode la luz se mezcla con lo que
   hay debajo en vez de taparlo, asi que puede cubrir la ventana entera y
   el texto sigue leyendose igual —de hecho se lee con mas contraste
   dentro del halo que fuera—.

   Y por eso hay dos modos, no uno: sobre el tramo oscuro la capa SUMA luz
   (plus-lighter) y sobre el tramo claro la RESTA (multiply). Una sola
   mezcla funcionaria en un fondo y desapareceria en el otro, y esta
   pagina vira de oscuro a claro y vuelve.

   No recibe eventos y solo existe donde hay cursor de verdad.
   ===================================================================== */
#s4-halo {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  mix-blend-mode: plus-lighter;
  background: radial-gradient(
    380px circle at var(--hx, 50%) var(--hy, 50%),
    color-mix(in srgb, var(--accent) 15%, transparent) 0%,
    color-mix(in srgb, var(--accent) 6%, transparent) 42%,
    transparent 72%);
}
#s4-halo.is-live { opacity: 1; }

/* En el tramo claro la escena pone .is-light en el body: ahi el halo
   deja de sumar y pasa a restar, que es la unica forma de que se vea
   sobre blanco. */
body.is-light #s4-halo {
  mix-blend-mode: multiply;
  background: radial-gradient(
    380px circle at var(--hx, 50%) var(--hy, 50%),
    color-mix(in srgb, var(--accent) 20%, white) 0%,
    color-mix(in srgb, var(--accent) 7%, white) 46%,
    white 74%);
}

/* =====================================================================
   12. IMPRESION
   Al imprimir se fuerza todo abierto: los paneles de pestanas, las
   caras del cilindro y los cuerpos del acordeon. Un documento impreso
   con la mitad del contenido oculto no es el documento.
   ===================================================================== */
@media print {
  #s4-halo, .s4-hero-malla, .s4-hero-campo, .s4-drum-pista,
  .s4-drum-ctrl, .site-nav, .site-header { display: none !important; }
  .s4-drum-caja::after { display: none !important; }
  .s4-parada-in { position: static !important; }
  .s4-parada-d { max-height: none !important; opacity: 1 !important; }
  .s4-pestel-p, .s4-tabp, .s4-smart-p {
    visibility: visible !important;
    opacity: 1 !important;
    grid-area: auto !important;
    page-break-inside: avoid;
    margin-bottom: 18px;
  }
  .s4-fuerza-cuerpo { position: relative !important; inset: auto !important; opacity: 1 !important; visibility: visible !important; height: auto !important; overflow: visible !important; }
  .s4-fuerza-lomo { position: relative !important; inset: auto !important; }
  .s4-fuerza-t { writing-mode: horizontal-tb !important; transform: none !important; }
  .s4-fuerza.is-open::after { display: none !important; }
  .s4-porter { flex-direction: column; height: auto; }
  .s4-drum-caja { height: auto; }
  .s4-cara { position: relative; inset: auto; margin: 0 0 10px; width: 100%; opacity: 1; transform: none !important; }
  body.s4-js .s4-pila-c { position: static; }
  .s4-pila-in { transform: none !important; }
  body.s4-js .s4-anim { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   13. MOVIMIENTO REDUCIDO
   Quien lo tenga activado ve el contenido completo y quieto, nunca una
   pantalla vacia.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .s4-sep::after { animation: none !important; }
  body.s4-js .s4-anim { opacity: 1; transform: none; transition: none; }
  .s4-drum { transition: none; }
  .s4-scroll-visor img { transition: opacity .01s; }
  .s4-pila-in { transform: none !important; }
  body.s4-js .s4-pila-c { position: static; }
  .s4-div-b, .s4-casc-fill, .s4-part-b { transition: none; }
  /* Sin movimiento: el fondo del hero y los ejes del cursor no llegan a
     encenderse nunca, y la tarjeta de la guia ensena su texto entero. */
  .s4-hero-campo, #s4-halo { display: none; }
  body.s4-js .s4-parada-d { max-height: none !important; opacity: 1 !important; transition: none; }
  .s4-parada-in { transition: none; }
}



/* =====================================================================
   10. CONCLUSIONES · TARJETAS CON VOLUMEN REAL
   El volumen no se pinta con un degradado que lo imita: las tres capas
   de cada tarjeta viven a profundidades distintas con translateZ, asi
   que al inclinarse se desplazan entre si —paralaje— y el relieve se
   ve porque LO HAY. La inclinacion la escribe el JS en dos variables y
   el resto es CSS: una sola escritura por fotograma.
   ===================================================================== */
.s4-conc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 16px;
  margin-top: clamp(24px, 3.4vw, 34px);
  perspective: 1200px;
}
.s4-conc-c {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.s4-conc-c.is-viva { transition: transform .12s linear; }
.s4-conc-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 22px 23px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
  transform-style: preserve-3d;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}
.s4-conc-c:hover .s4-conc-in {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .55);
}
/* El brillo sigue al puntero: es lo que delata que la superficie tiene
   inclinacion, porque una luz fija sobre un plano girado no cambia. */
.s4-conc-brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(
    260px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--accent) 20%, transparent),
    transparent 62%);
}
.s4-conc-c:hover .s4-conc-brillo { opacity: 1; }
.s4-conc-n {
  transform: translateZ(42px);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--accent);
}
.s4-conc-t {
  transform: translateZ(28px);
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.s4-conc-d {
  transform: translateZ(14px);
  margin: 0;
  font-size: .86rem;
  line-height: 1.62;
  color: var(--text-muted);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.s4-conc-f {
  transform: translateZ(20px);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Sin puntero fino no hay inclinacion que seguir: la tarjeta se queda
   plana y no pierde nada, porque el contenido nunca dependio del 3D. */
@media (hover: none), (pointer: coarse) {
  .s4-conc-c { transform: none !important; }
  .s4-conc-brillo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s4-conc-c { transform: none !important; transition: none; }
}