/* =====================================================================
   SEMANA 03 — ESTUDIOS COMPETITIVOS
   Hoja propia de la subpagina. No entra en el bundle de styles.css
   porque ese ya va por 3.500 lineas y lo descargan las diez paginas;
   esto solo lo necesita una.

   Todo cuelga de los tokens de la escena (--bg, --text, --accent,
   --dato, --serie3, --border...). Por eso vira solo con el scroll y no
   hay una sola regla duplicada para el tramo claro.

   COLOR POR ENTIDAD, y el mismo en toda la pagina:
     El Encanto -> --accent  (cian)
     Sary       -> --dato    (ambar)
     Sonsonena  -> --serie3  (violeta)
   Los tres pasan las cinco comprobaciones del validador de la skill
   dataviz, en oscuro y en claro. No se reasignan por ranking.
   ===================================================================== */

.s3 { --s3-gap: clamp(18px, 2.4vw, 30px); }

/* ---------------------------------------------------------------
   Piezas comunes
   --------------------------------------------------------------- */
.s3-eyebrow{
  font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .5em;
}
.s3-num{
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em;
  color: var(--text-faint);
}
.s3-h2{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.06; letter-spacing: -.02em; margin: 0 0 .45em;
  color: var(--text);
}
.s3-lead{ font-size: 1.02rem; color: var(--text-muted); max-width: 68ch; }
.s3-nota{ font-size: .82rem; color: var(--text-faint); max-width: 74ch; }
.s3-fuente{
  font-size: .74rem; color: var(--text-faint); margin-top: .7em;
  padding-left: .8em; border-left: 2px solid var(--border-strong);
}
.s3-card{
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: clamp(16px, 2vw, 24px);
}

/* =====================================================================
   LA TRAMPA QUE YA CAYO TRES VECES EN ESTE PROYECTO: contenido que nace
   en opacity 0 esperando una clase que nadie le pone. Ocupa su sitio y
   no se dibuja, asi que parece un hueco de maquetacion y no un fallo.

   La regla aqui: TODO estado oculto de partida cuelga de body.s3-js, y
   esa clase la pone el propio semana-03.js en su primera linea. Si el JS
   no corre no hay nada invisible: los diez paneles se ven apilados, las
   dos vistas de la matriz se ven las dos y todas las barras salen
   llenas. Al verificar hay que medir opacidad, no altura.
   ===================================================================== */
body.s3-js .s3-anim{ opacity: 0; }
body.s3-js .s3-anim.is-in{ opacity: 1; transition: opacity .5s cubic-bezier(.16,.84,.28,1); }
@media (prefers-reduced-motion: reduce){
  body.s3-js .s3-anim, body.s3-js .s3-anim.is-in{ opacity: 1; transition: none; }
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.s3-hero .doc-hero-titulo{ text-transform: none; }
.s3-hero-kicker{
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .9em;
}
.s3-hero-sub{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.3rem); color: var(--text-muted);
  margin: .2em 0 .8em; line-height: 1.35;
}
.s3-hero-sub span{ font-size: .72em; color: var(--text-faint); letter-spacing: .04em; }

/* ---------------------------------------------------------------
   GUIA DE NAVEGACION
   --------------------------------------------------------------- */
.s3-guia{ border-top: none; }
.s3-guia-grid{
  display: grid; gap: 12px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.s3-parada{
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 16px 18px;
  position: relative; overflow: hidden;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease;
}
.s3-parada::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.s3-parada:hover, .s3-parada:focus-visible{
  border-color: var(--border-strong); transform: translateY(-3px);
  background: var(--bg-elev-2);
}
.s3-parada:hover::after, .s3-parada:focus-visible::after{ transform: scaleX(1); }
.s3-parada-n{
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--accent); line-height: 1; display: block; margin-bottom: .35em;
}
.s3-parada-t{ display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin-bottom: .3em; }
.s3-parada-d{ display: block; font-size: .82rem; color: var(--text-muted); line-height: 1.45; }
.s3-parada-min{
  font-size: .7rem; color: var(--text-faint); letter-spacing: .08em;
  text-transform: uppercase; margin-top: .7em; display: block;
}

/* Leyenda de color global: se declara una vez y vale para toda la pagina */
.s3-clave{
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  margin-top: 26px; padding: 14px 18px;
  border: 1px dashed var(--border-strong); border-radius: 12px;
}
.s3-clave-t{ font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.s3-clave-i{ display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; }
.s3-swatch{ width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sw-ee{ background: var(--accent); }
.sw-sa{ background: var(--dato); }
.sw-so{ background: var(--serie3); }

/* ---------------------------------------------------------------
   AUTOR
   --------------------------------------------------------------- */
/* La ficha dejo de llevar retrato: la entrega es del equipo consultor y
   no de una persona. Con un solo hijo, la columna de 210px reservaba un
   hueco vacio a la izquierda, asi que la rejilla pasa a una columna. */
.s3-autor{
  display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.s3-autor:has(.s3-autor-foto){ grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
.s3-autor-foto{
  position: relative; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, var(--accent-soft), transparent 65%);
  border: 1px solid var(--border-strong); aspect-ratio: 4 / 5;
}
.s3-autor-foto img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.s3-autor-nombre{
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.1; margin: 0 0 .2em;
}
.s3-autor-rol{ color: var(--accent); font-size: .9rem; letter-spacing: .06em; margin-bottom: 1em; }
.s3-autor-datos{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.s3-chip{
  font-size: .78rem; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-muted);
}
.s3-chip b{ color: var(--text); }
@media (max-width: 640px){
  .s3-autor{ grid-template-columns: 1fr; }
  .s3-autor-foto{ max-width: 180px; }
}

/* ---------------------------------------------------------------
   EMBUDO DE COMPETIDORES
   --------------------------------------------------------------- */
.s3-embudo{ display: grid; gap: 18px; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); margin-top: 26px; }
@media (max-width: 760px){ .s3-embudo{ grid-template-columns: 1fr; } }
.s3-filtros{ display: flex; flex-direction: column; gap: 8px; }
.s3-filtro{
  text-align: left; cursor: pointer; font: inherit;
  background: var(--bg-elev); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px;
  display: flex; align-items: baseline; gap: 10px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.s3-filtro:hover{ border-color: var(--border-strong); color: var(--text); }
.s3-filtro.is-on{ border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.s3-filtro-n{ font-family: var(--font-display); font-size: .74rem; color: var(--accent); flex: none; }
.s3-filtro-t{ font-size: .86rem; line-height: 1.35; }
.s3-marcas{
  display: grid; gap: 10px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}

/* Mosaico de marca. El logotipo ES la superficie de la tarjeta, no un
   adorno dentro de ella: cada marca llega con su propio color corporativo
   y eso es justo lo que hace legible el embudo de un vistazo.

   El unico momento animado de esta pieza es el DRENAJE DE COLOR. Cuando un
   filtro elimina una marca, su logo se va a gris y se apaga; las que
   sobreviven conservan su identidad. No hay ocho efectos compitiendo:
   hay uno, y cuenta exactamente lo que hace el filtro. */
.s3-marca{
  position: relative; margin: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--border);
  aspect-ratio: 720 / 520; isolation: isolate;
  transition: border-color .3s ease, outline-color .3s ease;
}
.s3-marca img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: filter .52s cubic-bezier(.16,.84,.28,1),
              opacity .52s cubic-bezier(.16,.84,.28,1),
              transform .5s cubic-bezier(.16,.84,.28,1);
}
/* El velo garantiza el contraste del rotulo sobre CUALQUIER logo, sean
   los rojos de Sary o los verdes de Doña Lucha. Sin el, el texto depende
   del color de marca y hay marcas donde no se lee. */
.s3-marca figcaption{
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 30px 12px 10px;
  background: linear-gradient(to top,
    rgba(6,9,12,.95) 0%, rgba(6,9,12,.86) 34%, rgba(6,9,12,.34) 72%, rgba(6,9,12,0) 100%);
  transition: opacity .52s cubic-bezier(.16,.84,.28,1);
}
.s3-marca figcaption b{
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .84rem; color: #fff; line-height: 1.2;
}
.s3-marca figcaption small{
  display: block; margin-top: .2em; font-size: .68rem; line-height: 1.35;
  color: rgba(255,255,255,.74);
}

/* Descartada por el filtro */
.s3-marca.is-out img{ filter: grayscale(1) contrast(.9) brightness(.38); }
.s3-marca.is-out figcaption{ opacity: .5; }

/* Superviviente: anillo de seleccion, no sombra. La elevacion se declara
   una sola vez en esta pieza y es el borde. */
.s3-marca.is-final{
  border-color: transparent;
  outline: 2px solid var(--accent); outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine){
  .s3-marca:not(.is-out):hover img{ transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce){
  .s3-marca img, .s3-marca figcaption{ transition: none; }
}

.s3-embudo-cuenta{
  font-family: var(--font-display); font-size: .8rem; color: var(--text-faint);
  margin-top: 12px;
}
.s3-embudo-cuenta b{ color: var(--accent); font-size: 1.1rem; }

/* ---------------------------------------------------------------
   FICHAS DE EMPRESA
   --------------------------------------------------------------- */
.s3-fichas{
  display: grid; gap: var(--s3-gap); margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.s3-ficha{
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg-elev); padding: 20px; position: relative;
  border-top: 1px solid var(--ent, var(--accent));
}
.s3-ficha[data-ent="ee"]{ --ent: var(--accent); }
.s3-ficha[data-ent="sa"]{ --ent: var(--dato); }
.s3-ficha[data-ent="so"]{ --ent: var(--serie3); }
.s3-ficha-rol{
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ent); margin-bottom: .5em;
}
.s3-ficha-n{ font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 .15em; }
.s3-ficha-sub{ font-size: .8rem; color: var(--text-faint); margin-bottom: 1em; }
.s3-ficha dl{ margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .84rem; }
.s3-ficha dt{ color: var(--text-faint); }
.s3-ficha dd{ margin: 0; color: var(--text); text-align: right; }
.s3-ficha dd b{ color: var(--ent); }

/* ---------------------------------------------------------------
   GRAFICOS — piezas comunes
   --------------------------------------------------------------- */
.s3-fig{ margin: 30px 0 6px; }
.s3-fig-t{
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  margin: 0 0 .25em;
}
.s3-fig-d{ font-size: .84rem; color: var(--text-muted); max-width: 70ch; margin-bottom: 1.1em; }
.s3-leyenda{ display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; font-size: .8rem; }
.s3-leyenda span{ display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); }
.s3-leyenda i{ width: 12px; height: 12px; border-radius: 3px; display: block; }

/* --- Matriz de puntos: escala operativa --- */
.s3-puntos{
  display: grid; gap: 16px;
  /* La silueta se declara una sola vez aqui y la heredan las 781 figuras.
     Va como mascara, no como imagen: asi el color lo sigue poniendo
     --ent y la figura vira con el scroll igual que el resto de la
     pagina. Una imagen coloreada se habria quedado congelada en el
     tramo claro. */
  --persona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Ccircle cx='7' cy='4' r='4'/%3E%3Cpath d='M7 9.6c3.9 0 6 2.6 6 6.1V20H1v-4.3C1 12.2 3.1 9.6 7 9.6Z'/%3E%3C/svg%3E");
}
.s3-puntos-fila{ display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.s3-puntos-et{ font-size: .86rem; color: var(--text); }
/* Las figuras se apoyan en la linea de abajo de cada renglon (align-items:
   flex-end): una fila de gente de pie, no una nube de manchas. */
.s3-puntos-caja{ display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; align-content: flex-start; }
.s3-punto{
  width: 7px; height: 10px; background: var(--ent, var(--accent));
  -webkit-mask: var(--persona) center / contain no-repeat;
          mask: var(--persona) center / contain no-repeat;
}
/* Crecen desde los pies, no desde el centro, que es lo que las hace
   leerse como gente que se pone de pie al entrar en pantalla. */
body.s3-js .s3-punto{ opacity: 0; transform: scale(.3); transform-origin: 50% 100%; }
body.s3-js .s3-puntos-fila.is-in .s3-punto{ opacity: 1; transform: none; transition: opacity .4s ease, transform .4s cubic-bezier(.16,.84,.28,1); }
.s3-puntos-val{ font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ent, var(--accent)); }
.s3-puntos-fila[data-ent="ee"]{ --ent: var(--accent); }
.s3-puntos-fila[data-ent="sa"]{ --ent: var(--dato); }
.s3-puntos-fila[data-ent="so"]{ --ent: var(--serie3); }
@media (max-width: 620px){
  .s3-puntos-fila{ grid-template-columns: 1fr auto; row-gap: 8px; }
  .s3-puntos-et{ grid-column: 1; grid-row: 1; }
  .s3-puntos-val{ grid-column: 2; grid-row: 1; }
  .s3-puntos-caja{ grid-column: 1 / -1; grid-row: 2; }
}

/* --- Barras horizontales --- */
.s3-barras{ display: grid; gap: 12px; }
.s3-barra{ display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.s3-barra-et{ font-size: .86rem; color: var(--text); }
.s3-barra-pista{ height: 22px; background: var(--bg-elev-2); border-radius: 4px; overflow: hidden; }
.s3-barra-fill{
  /* display:block NO es decorativo, es lo que hace que la barra exista.
     Es un <span> dentro de .s3-barra-pista, que no es flex ni grid, asi
     que por defecto se queda en display:inline y el navegador IGNORA
     width y height: medido en el DOM daba 0x0 y las tres barras salian
     vacias. A .s3-ev-fill le pasaba lo mismo en los diez paneles de
     criterio. .s3-brecha-fill se salvaba sola porque va en
     position:absolute, que ya blockifica el elemento. */
  display: block;
  height: 100%; width: var(--w, 0%); border-radius: 0 4px 4px 0;
  background: var(--ent, var(--accent));
  transform-origin: left center;
}
/* Cero no es "muy poco": es cero. Dibujar un munon de 2 % para que se vea
   algo es inventar magnitud. Se marca el origen con un tope redondo, el
   mismo recurso que ya usa .s3-brecha.is-cero mas abajo. */
.s3-barra.is-cero .s3-barra-fill{ width: 4px; border-radius: 2px; }
body.s3-js .s3-barra .s3-barra-fill{ transform: scaleX(0); }
body.s3-js .s3-barra.is-in .s3-barra-fill{ transform: none; transition: transform .9s cubic-bezier(.16,.84,.28,1); }
.s3-barra-val{ font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ent, var(--accent)); min-width: 3ch; text-align: right; }
.s3-barra[data-ent="ee"]{ --ent: var(--accent); }
.s3-barra[data-ent="sa"]{ --ent: var(--dato); }
.s3-barra[data-ent="so"]{ --ent: var(--serie3); }
.s3-barra-cero{ font-size: .78rem; color: var(--text-faint); font-style: italic; }
@media (max-width: 620px){
  .s3-barra{ grid-template-columns: 1fr auto; row-gap: 6px; }
  .s3-barra-et{ grid-column: 1; grid-row: 1; }
  .s3-barra-val{ grid-column: 2; grid-row: 1; }
  .s3-barra-pista{ grid-column: 1 / -1; grid-row: 2; }
}

/* --- Barra apilada 100 % (reparto del peso) --- */
.s3-apilada{ display: flex; height: 34px; border-radius: 6px; overflow: hidden; gap: 2px; }
.s3-apilada-seg{ width: var(--w); min-width: 0; overflow: hidden; }

.s3-apilada-pies{ display: flex; gap: 2px; margin-top: 10px; }
.s3-apilada-pie{ font-size: .8rem; color: var(--text-muted); line-height: 1.4; padding-right: 10px; }
.s3-apilada-pie b{ display: block; color: var(--text); font-family: var(--font-display); margin-bottom: .15em; }
.s3-apilada-pct{ font-size: 1.05rem; font-weight: 700; }

/* ---------------------------------------------------------------
   LOS DIEZ CRITERIOS
   --------------------------------------------------------------- */
.s3-crit{ display: grid; gap: var(--s3-gap); grid-template-columns: minmax(0, 300px) minmax(0, 1fr); margin-top: 28px; }
@media (max-width: 880px){ .s3-crit{ grid-template-columns: 1fr; } }
.s3-crit-lista{ display: flex; flex-direction: column; gap: 6px; align-content: start; }
.s3-crit-btn{
  font: inherit; cursor: pointer; text-align: left;
  background: transparent; color: var(--text-muted);
  border: 1px solid transparent; border-radius: 12px; padding: 10px 13px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  transition: color .2s ease, background .2s ease;
}
.s3-crit-btn:hover{ color: var(--text); background: var(--bg-elev); }
.s3-crit-btn.is-on{ color: var(--text); background: var(--bg-elev); border-color: var(--border); }
.s3-crit-btn-n{ font-family: var(--font-display); font-size: .74rem; color: var(--text-faint); font-variant-numeric: tabular-nums; position: relative; padding-left: 13px; }
.s3-crit-btn-n::before{ content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--border-strong); transition: background .2s ease, box-shadow .2s ease; }
.s3-crit-btn.is-on .s3-crit-btn-n::before{ background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.s3-crit-btn.is-on .s3-crit-btn-n{ color: var(--accent); }
.s3-crit-btn-t{ font-size: .87rem; line-height: 1.3; }
.s3-crit-btn-p{ font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: var(--text-faint); }
.s3-crit-btn.is-on .s3-crit-btn-p{ color: var(--accent); }

.s3-crit-panel{ position: relative; min-height: 460px; }
.s3-crit-hoja{ grid-area: 1 / 1; transition: opacity .3s ease; }
body.s3-js .s3-crit-hoja{ visibility: hidden; opacity: 0; }
.s3-crit-panel{ display: grid; }
body.s3-js .s3-crit-hoja.is-on{ visibility: visible; opacity: 1; }
body:not(.s3-js) .s3-crit-panel{ display: block; }
body:not(.s3-js) .s3-crit-hoja{ margin-bottom: 34px; }
body:not(.s3-js) .s3-crit-lista{ display: none; }
.s3-crit-cab{ display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: .8em; }
.s3-crit-titulo{ font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0; }
.s3-crit-peso{
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 3px 10px;
}
.s3-crit-campo{ margin-bottom: 1em; }
.s3-crit-campo h4{
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 .35em; font-weight: 600;
}
.s3-crit-campo p{ margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-muted); }

/* Regla de calificacion: la escala 1-4 dibujada */
.s3-regla{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: .4em; }
.s3-regla-p{
  border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px;
  background: var(--bg-elev);
}
.s3-regla-n{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-faint); }
.s3-regla-d{ font-size: .74rem; color: var(--text-muted); line-height: 1.35; margin-top: .2em; }
.s3-regla-p[data-nivel="4"] .s3-regla-n{ color: var(--accent); }
@media (max-width: 620px){ .s3-regla{ grid-template-columns: repeat(2, 1fr); } }

/* Evidencia: tres filas con la cifra observada y la calificacion */
.s3-ev{ display: grid; gap: 8px; margin-top: .5em; }
.s3-ev-fila{
  display: grid; grid-template-columns: minmax(0, 158px) minmax(0, 1fr) 104px auto;
  gap: 12px; align-items: center;
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px;
}
.s3-ev-fila[data-ent="ee"]{ --ent: var(--accent); }
.s3-ev-fila[data-ent="sa"]{ --ent: var(--dato); }
.s3-ev-fila[data-ent="so"]{ --ent: var(--serie3); }
.s3-ev-emp{ font-size: .82rem; font-weight: 600; color: var(--ent); display: flex; align-items: center; gap: 8px; }
.s3-ev-emp::before{ content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ent); flex: none; }
.s3-ev-dato{ font-size: .82rem; color: var(--text-muted); line-height: 1.45; }
.s3-ev-pista{ height: 10px; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
/* display:block por la misma razon que .s3-barra-fill: sin el, este span
   queda inline, ignora width y height y la barrita de evidencia de los
   diez paneles de criterio se dibuja vacia. */
.s3-ev-fill{ display: block; height: 100%; background: var(--ent); border-radius: 999px; width: var(--w); }
.s3-ev-cal{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ent); }
@media (max-width: 720px){
  .s3-ev-fila{ grid-template-columns: 1fr auto; }
  .s3-ev-dato{ grid-column: 1 / -1; }
  .s3-ev-pista{ grid-column: 1 / -1; }
}

/* Descartados */
/* =====================================================================
   LOS SEIS QUE NO ENTRARON
   El bloque tenia el argumento escondido: CINCO de los seis criterios no
   se tiraron, los absorbio otro criterio que si entro. Eso estaba en una
   linea gris de 12 px al pie de la tarjeta. Ahora es una ficha con el
   numero de destino, que es lo unico que hay que poder escanear aqui.

   Y el borde punteado se fue: en esta misma pagina el punteado significa
   "hueco de imagen pendiente", asi que seis tarjetas punteadas se leian
   como seis huecos sin rellenar.

   La rejilla pasa a 3 x 2. Con auto-fit entraban cuatro arriba y dos
   abajo, dejando dos agujeros en la segunda fila.
   ===================================================================== */
.s3-desc{ display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
/* Columna flexible con la ficha empujada al fondo (margin-top:auto en
   .s3-desc-q): las tarjetas de una fila ya se estiran a la misma altura,
   pero la ficha seguia al texto y quedaba a tres alturas distintas.
   Ancladas abajo, las seis fichas se leen de un barrido. */
.s3-desc-c{
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-left: 1px solid var(--fuera);
  border-radius: 12px; padding: 16px 18px;
}
/* El filo izquierdo dice de un vistazo si el criterio encontro destino o
   no: acento si lo absorbio otro, gris de "fuera" si no lo absorbio nadie.
   A 1px, no a 3: un borde de color grueso en una tarjeta es el tic mas
   reconocible de una interfaz generada, y en esta pagina ya se corrigio
   una vez por lo mismo. */
.s3-desc-c[data-destino]{ border-left-color: var(--accent); }

.s3-desc-t{ font-family: var(--font-display); font-size: 1rem; margin: 0 0 .45em; }
.s3-desc-t s{
  position: relative; display: inline-block;
  color: var(--fuera); text-decoration: none;
}
/* La tachadura se dibuja, no viene puesta: al entrar en pantalla se
   traza de izquierda a derecha. Es el descarte ocurriendo, no un
   adorno. Por defecto —sin JS— nace ya trazada. */
.s3-desc-t s::after{
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px;
  background: var(--fuera); border-radius: 2px;
  transform: scaleX(1); transform-origin: left center;
}
.s3-desc-p{ font-size: .82rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.s3-desc-q{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: .76rem; color: var(--text-muted); margin: 0; padding-top: 1em;
  margin-top: auto;
}
.s3-desc-chip{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  color: var(--accent); background: var(--accent-soft);
  border-radius: var(--radius-pill); padding: 3px 10px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.s3-desc-chip::before{ content: "→"; font-weight: 500; }
/* El unico sin destino no lleva ficha de color: lleva su ausencia. */
.s3-desc-chip.is-sin{ color: var(--fuera); background: transparent; box-shadow: inset 0 0 0 1px var(--fuera); }
.s3-desc-chip.is-sin::before{ content: "—"; }

body.s3-js .s3-desc-t s::after{ transform: scaleX(0); }
body.s3-js .s3-desc-chip{ opacity: 0; transform: translateX(-6px); }
body.s3-js .s3-anim.is-in .s3-desc-t s::after{
  transform: scaleX(1);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(140ms + var(--i, 0) * 90ms);
}
body.s3-js .s3-anim.is-in .s3-desc-chip{
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(560ms + var(--i, 0) * 90ms);
}
@media (hover: hover) and (pointer: fine){
  .s3-desc-c{ transition: transform .3s cubic-bezier(.16,.84,.28,1), box-shadow .3s ease; }
  .s3-desc-c:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(0,0,0,.5); }
}
@media (prefers-reduced-motion: reduce){
  body.s3-js .s3-desc-t s::after{ transform: scaleX(1); }
  body.s3-js .s3-desc-chip{ opacity: 1; transform: none; }
  body.s3-js .s3-anim.is-in .s3-desc-t s::after,
  body.s3-js .s3-anim.is-in .s3-desc-chip{ transition: none; }
  .s3-desc-c, .s3-desc-c:hover{ transition: none; transform: none; }
}
@media (max-width: 900px){ .s3-desc{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .s3-desc{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   LA MATRIZ
   --------------------------------------------------------------- */
.s3-tabs{ display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; margin-bottom: 18px; }
.s3-tab{
  font: inherit; font-size: .84rem; cursor: pointer; border: none;
  background: transparent; color: var(--text-muted);
  padding: 7px 16px; border-radius: 999px; transition: background .2s ease, color .2s ease;
}
.s3-tab.is-on{ background: var(--accent); color: #06212b; font-weight: 600; }

.s3-vista{ display: block; }
body.s3-js .s3-vista{ display: none; }
body.s3-js .s3-vista.is-on{ display: block; }
body:not(.s3-js) .s3-tabs{ display: none; }

/* Mapa de calor 10 x 3 */
/* =====================================================================
   LA MATRIZ — que muestre su propia aritmetica
   Antes: un mapa de calor con la calificacion sola, la columna de peso
   como texto suelto, y los tres totales flotando debajo en tres tarjetas
   iguales y casi vacias. La seccion mas importante de la pagina era la
   mas plana, y con 184 px muertos a la derecha porque la tabla llevaba
   max-width: 900px dentro de una caja de 1084.

   Ahora la matriz ES la matriz: cada celda lleva la calificacion y
   DEBAJO su ponderado, el peso se dibuja en vez de escribirse, y los
   tres totales bajan al pie de su propia columna, que es donde se suman.
   El hueco muerto se convirtio en el eje de pesos.

   Sin movimiento propio a proposito: los diez diales de la parada 02
   barren justo antes, y esta seccion es el remanso denso que sigue. Dos
   entradas animadas seguidas se anulan entre si.
   ===================================================================== */
.s3-heat{ overflow-x: auto; }
.s3-heat table{ font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 640px; }
.s3-heat th{ font-size: .74rem; font-weight: 600; color: var(--text-muted); text-align: center; padding: 4px 4px 8px; }
.s3-heat th.s3-heat-crit{ text-align: left; font-weight: 400; color: var(--text-muted); }
.s3-heat td{ text-align: center; }
.s3-heat-crit{ font-size: .82rem; color: var(--text-muted); text-align: left; padding-right: 10px; white-space: nowrap; }
.s3-heat-c{
  display: grid; gap: 1px; justify-items: center; align-content: center;
  border-radius: 8px; padding: 9px 6px; min-height: 50px; min-width: 86px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--text);
}
/* El ponderado, debajo de la calificacion. Es lo que convierte el mapa de
   calor en la matriz: peso x calificacion, visible celda por celda, sin
   tener que abrir la otra pestana para comprobarlo. */
.s3-heat-c i{
  font-style: normal; font-family: var(--font-body); font-weight: 500;
  font-size: .69rem; letter-spacing: .01em; opacity: .74;
}
/* Rampa secuencial de un solo tono: mas alto = mas lleno. La identidad
   de la empresa la lleva el encabezado de columna, no la celda. */
.s3-heat-c[data-v="1"]{ background: color-mix(in srgb, var(--accent) 12%, transparent); }
.s3-heat-c[data-v="2"]{ background: color-mix(in srgb, var(--accent) 30%, transparent); }
.s3-heat-c[data-v="3"]{ background: color-mix(in srgb, var(--accent) 55%, transparent); }
.s3-heat-c[data-v="4"]{ background: color-mix(in srgb, var(--accent) 82%, transparent); color: #06212b; }

/* El peso se dibuja. Era texto alineado a la derecha con 184 px de vacio
   al lado; ahora ese vacio es la barra, y el reparto de los pesos —que
   antes solo existia en el grafico apilado de la parada 02— se lee aqui
   mientras se mira la matriz. */
.s3-heat-peso{ padding-right: 16px; min-width: 190px; }
/* En el pie, "100 %" es una suma, no un peso. Dibujarle barra lo haria
   parecer el criterio mas pesado de todos. */
.s3-heat-pie .s3-peso-b i{ display: none; }
.s3-heat-pie .s3-peso-b{ grid-template-columns: auto; justify-content: end; }
.s3-heat-pie .s3-peso-b b{ color: var(--text); font-weight: 600; }
.s3-peso-b{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.s3-peso-b i{
  display: block; height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--text-faint) 26%, transparent);
  position: relative; overflow: hidden;
}
.s3-peso-b i::after{
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%);
  background: var(--text-faint); border-radius: 3px;
}
.s3-peso-b b{ font-weight: 500; font-size: .74rem; color: var(--text-faint); }

/* El pie: los totales viven bajo su columna, que es donde se suman. */
.s3-heat tfoot th, .s3-heat tfoot td{ padding-top: 10px; }
.s3-heat-pie th.s3-heat-crit{ font-weight: 600; color: var(--text); }
.s3-heat-tot{
  display: grid; gap: 2px; justify-items: center; padding: 10px 6px 4px;
  border-top: 2px solid var(--ent, var(--accent));
}
.s3-heat-tot b{
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--ent, var(--accent));
  letter-spacing: -.03em;
}
.s3-heat-tot i{ font-style: normal; font-size: .7rem; color: var(--text-faint); }
.s3-heat-pie td[data-ent="ee"]{ --ent: var(--accent); }
.s3-heat-pie td[data-ent="so"]{ --ent: var(--serie3); }
.s3-heat-pie td[data-ent="sa"]{ --ent: var(--dato); }
/* En movil la tabla ya desplaza dentro de su caja, pero con la etiqueta
   en nowrap ocupaba ~540 px y las tres columnas de calificacion nacian
   fuera de pantalla: habia que arrastrar la tabla entera antes de ver un
   solo dato. Aqui la etiqueta parte en dos lineas y el peso renuncia a
   su barra —se queda el porcentaje—, que es lo prescindible cuando el
   ancho escasea. */
@media (max-width: 620px){
  .s3-heat table{ min-width: 500px; }
  .s3-heat-crit{ white-space: normal; min-width: 148px; max-width: 190px; }
  .s3-heat-peso{ min-width: 52px; padding-right: 8px; }
  .s3-heat-peso .s3-peso-b{ grid-template-columns: auto; justify-content: end; }
  .s3-heat-peso .s3-peso-b i{ display: none; }
  .s3-heat-c{ min-width: 62px; padding: 8px 4px; }
}

/* Tabla completa */
.s3-tabla-wrap{ overflow-x: auto; }
.s3-tabla{ border-collapse: collapse; width: 100%; min-width: 720px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.s3-tabla th, .s3-tabla td{ padding: 8px 10px; border-bottom: 1px solid var(--border); }
.s3-tabla thead th{
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); text-align: center;
  border-bottom: 1px solid var(--border-strong);
}
.s3-tabla thead th.l{ text-align: left; }
.s3-tabla thead tr:first-child th[colspan]{ font-size: .74rem; letter-spacing: .04em; text-transform: none; padding-bottom: 4px; }
.s3-tabla thead tr:first-child th.ee{ color: var(--accent); }
.s3-tabla thead tr:first-child th.so{ color: var(--serie3); }
.s3-tabla thead tr:first-child th.sa{ color: var(--dato); }
.s3-tabla thead tr:first-child th{ border-bottom: none; }
.s3-tabla td.c{ text-align: center; }
.s3-tabla td.crit{ color: var(--text-muted); }
.s3-tabla td.calif{ font-family: var(--font-display); font-weight: 700; }
.s3-tabla td.pond{ color: var(--text-faint); font-size: .78rem; }
.s3-tabla col.g-ee{ background: color-mix(in srgb, var(--accent) 7%, transparent); }
.s3-tabla col.g-so{ background: color-mix(in srgb, var(--serie3) 7%, transparent); }
.s3-tabla col.g-sa{ background: color-mix(in srgb, var(--dato) 7%, transparent); }
.s3-tabla tfoot td{ font-family: var(--font-display); font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: none; }
.s3-tabla tfoot tr.tot td{ font-size: .92rem; }
.s3-tabla .ee{ color: var(--accent); }
.s3-tabla .so{ color: var(--serie3); }
.s3-tabla .sa{ color: var(--dato); }

/* Las tres tarjetas de totales se eliminaron. Eran tres tarjetas iguales
   —el andamio perezoso— casi vacias por dentro, repetian el 1,39 del
   dato ancla a 500 px de distancia, e iban en orden Sary → Sonsonena →
   El Encanto, al reves que el tablero de la parada 01. Los totales ahora
   son el pie de la matriz, bajo su propia columna y en el orden de la
   matriz, que es el mismo del tablero. Ver .s3-heat-tot mas arriba. */

/* ---------------------------------------------------------------
   ANALISIS
   --------------------------------------------------------------- */
/* =====================================================================
   LOS TRES ROLES — una escalera, no tres tarjetas
   Eran tres tarjetas iguales de punto + titulo + parrafo. El parrafo que
   viene justo despues dice que del primero al segundo hay 0,50 y del
   segundo al tercero 1,85, «casi cuatro veces mayor» — y eso no se veia
   por ningun lado. Ahora los tres marcadores viven sobre UNA sola escala
   de 0 a 4, asi que las dos distancias se leen antes que el texto.
   ===================================================================== */
.s3-esc{ display: grid; gap: 0; margin-top: 26px; }
.s3-esc-cab{
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 18px; align-items: end; padding-bottom: 8px;
}
.s3-esc-cab span{ font-size: .72rem; color: var(--text-faint); }
.s3-esc-regla{ display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.s3-esc-regla i{ font-style: normal; font-size: .7rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.s3-esc-f{
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 18px; align-items: center; padding: 16px 0;
  border-bottom: 1px solid var(--border);
  --ent: var(--accent);
}
.s3-esc-f[data-ent="sa"]{ --ent: var(--dato); }
.s3-esc-f[data-ent="so"]{ --ent: var(--serie3); }
.s3-esc-rol{ margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ent); }
.s3-esc-emp{ margin: 0; font-size: .78rem; color: var(--text-faint); }
/* La via es comun a las tres filas y va de 0 a 4: por eso el marcador de
   cada una cae donde cae y las distancias se pueden comparar de un
   vistazo. Una barra por tarjeta, con su propia escala, no diria nada. */
.s3-esc-via{ position: relative; height: 30px; }
.s3-esc-via::before{
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px;
  background: var(--border); border-radius: 1px;
}
.s3-esc-tramo{
  position: absolute; left: 0; top: 14px; height: 2px; border-radius: 1px;
  background: var(--ent); width: calc(var(--v) / 4 * 100%);
  transform-origin: left center;
}
.s3-esc-p{
  position: absolute; top: 15px; left: calc(var(--v) / 4 * 100%);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  min-width: 54px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--ent); color: var(--bg);
  font-family: var(--font-display); font-weight: 700; font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
/* La distancia entre dos filas, escrita sobre la via. Es el dato que el
   parrafo enuncia y que el grafico tenia que enseñar. */
.s3-esc-d{
  position: absolute; top: 0; height: 12px;
  left: calc(var(--a) / 4 * 100%); width: calc((var(--b) - var(--a)) / 4 * 100%);
  border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
}
.s3-esc-d b{
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  background: var(--bg); padding: 0 7px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: .7rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.s3-esc-t{ grid-column: 1 / -1; margin: 10px 0 0; font-size: .87rem; color: var(--text-muted); line-height: 1.55; max-width: 78ch; }

body.s3-js .s3-esc-tramo{ transform: scaleX(0); }
body.s3-js .s3-esc-p{ opacity: 0; }
body.s3-js .s3-esc-d{ opacity: 0; }
body.s3-js .s3-anim.is-in .s3-esc-tramo{ transform: none; transition: transform .85s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i,0) * 130ms); }
body.s3-js .s3-anim.is-in .s3-esc-p{ opacity: 1; transition: opacity .4s ease; transition-delay: calc(340ms + var(--i,0) * 130ms); }
body.s3-js .s3-anim.is-in .s3-esc-d{ opacity: 1; transition: opacity .4s ease; transition-delay: 760ms; }
@media (prefers-reduced-motion: reduce){
  body.s3-js .s3-esc-tramo{ transform: none; }
  body.s3-js .s3-esc-p, body.s3-js .s3-esc-d{ opacity: 1; }
  body.s3-js .s3-anim.is-in .s3-esc-tramo,
  body.s3-js .s3-anim.is-in .s3-esc-p,
  body.s3-js .s3-anim.is-in .s3-esc-d{ transition: none; }
}
@media (max-width: 720px){
  .s3-esc-cab, .s3-esc-f{ grid-template-columns: 1fr; gap: 8px; }
  .s3-esc-cab{ display: none; }
}

.s3-roles{ display: grid; gap: var(--s3-gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 26px; }
.s3-rol{
  border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 22px; background: var(--bg-elev);
}
.s3-rol[data-ent="ee"]{ --ent: var(--accent); }
.s3-rol[data-ent="sa"]{ --ent: var(--dato); }
.s3-rol[data-ent="so"]{ --ent: var(--serie3); }
.s3-rol-t{ font-family: var(--font-display); font-size: 1.05rem; color: var(--ent); margin: 0 0 .2em; display: flex; align-items: center; gap: 9px; }
.s3-rol-t::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ent); flex: none; }
.s3-rol-e{ font-size: .8rem; color: var(--text-faint); margin-bottom: .8em; }
.s3-rol-p{ font-size: .87rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Barras divergentes de brecha */
.s3-brechas{ display: grid; gap: 7px; }
.s3-brecha{ display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.s3-brecha-et{ font-size: .82rem; color: var(--text-muted); }
.s3-brecha-eje{ position: relative; height: 22px; }
.s3-brecha-eje::before{
  content: ""; position: absolute; right: 0; top: -3px; bottom: -3px; width: 1px;
  background: var(--border-strong);
}
.s3-brecha-fill{
  position: absolute; right: 0; top: 3px; height: 16px; width: var(--w);
  background: var(--dato); border-radius: 4px 0 0 4px;
  transform-origin: right center;
}
body.s3-js .s3-brechas .s3-brecha-fill{ transform: scaleX(0); }
body.s3-js .s3-brechas.is-in .s3-brecha-fill{ transform: none; transition: transform .9s cubic-bezier(.16,.84,.28,1); }
/* El color de la barra dice el COSTO de cerrar, no la empresa. Antes iban
   las diez en ambar, que es el color de Sary, y parecia que la barra
   hablaba de Sary. No habla de ninguna empresa: mide la distancia de El
   Encanto contra el promedio, asi que el color queda libre y se usa para
   lo unico que cambia la decision. Misma clave que la dispersion. */
.s3-brecha.is-barata .s3-brecha-fill{ background: var(--accent); }
.s3-brecha.is-barata .s3-brecha-val{ color: var(--accent); }
.s3-brecha.is-cero .s3-brecha-fill{ background: var(--accent); width: 6px; border-radius: 3px; }
.s3-brecha-val{ font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--dato); min-width: 5ch; text-align: right; }
.s3-brecha.is-cero .s3-brecha-val{ color: var(--accent); }
@media (max-width: 620px){
  .s3-brecha{ grid-template-columns: 1fr auto; row-gap: 6px; }
  .s3-brecha-et{ grid-column: 1; grid-row: 1; }
  .s3-brecha-val{ grid-column: 2; grid-row: 1; }
  .s3-brecha-eje{ grid-column: 1 / -1; grid-row: 2; }
}

/* Dispersion brecha x costo */
/* =====================================================================
   BRECHA x COSTO — cuatro variables en un solo grafico
   Era un cuadro partido por una cruz con diez puntos del mismo tamaño:
   dos variables y un adorno de cuadrantes. Ahora codifica cuatro:
     x  = lo que cuesta cerrar la brecha
     y  = el tamaño de la brecha ponderada
     r  = el peso del criterio en la matriz   <- era el que faltaba
     color = si se puede cerrar sin capacidad de planta o no
   El peso importaba y no estaba: una brecha grande en un criterio que
   pesa 8 % no es la misma decision que en uno que pesa 14 %.

   POR QUE AQUI NO APARECE SONSONEÑA (ni Sary). Este grafico no compara
   empresas: mide UNA distancia, la de El Encanto contra el promedio de
   sus dos competidores, criterio por criterio. No hay serie por empresa
   que pintar, y por eso el color queda libre para decir otra cosa.
   ===================================================================== */
.s3-disp{ position: relative; }
.s3-disp svg{ width: 100%; height: auto; display: block; overflow: visible; }
.s3-disp-punto{ cursor: pointer; }
.s3-disp-hit{ fill: transparent; }
.s3-disp-rejilla line{ stroke: var(--border); stroke-width: 1; }
.s3-disp-eje{ stroke: var(--border-strong); stroke-width: 1.5; }
.s3-disp-tick{ fill: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.s3-disp-rot{ fill: var(--text-faint); font-size: 12px; }
.s3-disp-zona{ fill: var(--accent-soft); }
.s3-disp-zona-t{ fill: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.s3-disp-b{ stroke: var(--bg); stroke-width: 2; }
.s3-disp-n{ font-family: var(--font-display); font-weight: 700; font-size: 12px; text-anchor: middle; }
/* Las burbujas crecen desde su propio centro al entrar, escalonadas de la
   mas barata de cerrar a la mas cara: el grafico se lee en el orden en
   que hay que actuar. Sin JS nacen ya en su tamaño. */
.s3-disp-punto{ transform-box: fill-box; transform-origin: center; }
body.s3-js .s3-disp-punto{ transform: scale(0); opacity: 0; }
body.s3-js .s3-anim.is-in .s3-disp-punto{
  transform: none; opacity: 1;
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  transition-delay: calc(var(--i, 0) * 65ms);
}
@media (prefers-reduced-motion: reduce){
  body.s3-js .s3-disp-punto{ transform: none; opacity: 1; }
  body.s3-js .s3-anim.is-in .s3-disp-punto{ transition: none; }
}

/* =====================================================================
   EL VALLE DE ABURRA — cobertura por empresa
   Portado del componente React de referencia que paso Juli. Se toman sus
   dos mecanicas y se deja fuera todo lo demas: el campo de puntos que
   dibuja el territorio, y la trayectoria curva que se dibuja sola.
   NO se instalo React, Tailwind, framer-motion, next-themes ni
   dotted-map: la pagina no tiene build y no va a tenerlo. El
   pathLength de framer-motion se resuelve con stroke-dasharray, el
   latido de los nodos con SMIL —que no necesita JS— y el campo de
   puntos se genero de una vez, no por fotograma.
   ===================================================================== */
.s3-cob{ margin-top: 20px; --ent: var(--accent); }
.s3-cob[data-emp="so"]{ --ent: var(--serie3); }
.s3-cob[data-emp="sa"]{ --ent: var(--dato); }
.s3-cob-tabs{ display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.s3-cob-b{
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--text-muted);
  padding: 7px 15px; border-radius: var(--radius-pill);
}
.s3-cob-b[data-emp="ee"].is-on{ background: var(--accent); color: var(--bg); font-weight: 600; }
.s3-cob-b[data-emp="so"].is-on{ background: var(--serie3); color: var(--bg); font-weight: 600; }
.s3-cob-b[data-emp="sa"].is-on{ background: var(--dato); color: var(--bg); font-weight: 600; }
/* El valle es un corredor de unos 55 km de sur a norte y apenas 10 de
   ancho. Dibujarlo con el norte arriba da una tira vertical altisima que
   se come media pagina y no se lee. Va tumbado, en PROYECCION DE
   CORREDOR: la x es la distancia real recorrida a lo largo del eje del
   valle y la y es la separacion perpendicular. Las distancias entre
   municipios siguen siendo las de verdad; lo unico que cambia es que el
   norte apunta a la derecha. */
.s3-cob-cifra{ display: flex; align-items: baseline; gap: 9px; margin: 18px 0 0; }
.s3-cob-cifra b{
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 4vw, 2.8rem); color: var(--ent); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.s3-cob-cifra span{ font-size: .84rem; color: var(--text-muted); }
.s3-cob-nota{ margin: .5em 0 0; font-size: .8rem; color: var(--text-faint); max-width: 62ch; }
/* Un 10 % mas pequeno y centrado: a ancho completo el mapa pesaba
   demasiado en la pagina y sus margenes laterales quedaban desiguales. */
.s3-cob-svg{ display: block; width: 90%; height: auto; margin: 14px auto 0; overflow: visible; }
/* Los punticos, recortados a la forma de cada municipio. Es la textura
   que hacia que el valle se leyera como territorio y no como una mancha
   plana; va como <pattern>, asi que cuestan dos elementos y no 2.493. */
.s3-cob-pts{ fill: url(#s3-pts-off); pointer-events: none; transition: fill .5s ease; }
.s3-cob[data-emp="ee"] .s3-cob-n[data-cob~="ee"] .s3-cob-pts,
.s3-cob[data-emp="so"] .s3-cob-n[data-cob~="so"] .s3-cob-pts,
.s3-cob[data-emp="sa"] .s3-cob-n[data-cob~="sa"] .s3-cob-pts{ fill: url(#s3-pts-on); }
/* Los diez municipios, con su limite real. En reposo son territorio
   —relleno neutro, borde fino—; al cubrirlos una empresa se llenan de su
   color. Es el mismo mecanismo que el embudo del punto 01: el color
   entra y sale, y eso es lo que se lee sin tener que contar nada. */
.s3-cob-mun{
  fill: var(--bg-elev); stroke: var(--border-strong); stroke-width: 1.2;
  transition: fill .5s ease, stroke .5s ease;
}
.s3-cob[data-emp="ee"] .s3-cob-n[data-cob~="ee"] .s3-cob-mun,
.s3-cob[data-emp="so"] .s3-cob-n[data-cob~="so"] .s3-cob-mun,
.s3-cob[data-emp="sa"] .s3-cob-n[data-cob~="sa"] .s3-cob-mun{
  fill: color-mix(in srgb, var(--ent) 15%, transparent); stroke: var(--ent);
}

/* El campo. Un solo color para las 690 marcas: es el territorio, no el
   dato. Lo que cambia de color son los diez nodos. */
.s3-cob-campo circle{ fill: var(--text-faint); }

.s3-cob-base{ fill: var(--bg-elev-2); stroke: var(--border-strong); stroke-width: 1.5; transition: fill .45s ease, stroke .45s ease; }
.s3-cob-halo{ fill: var(--ent); opacity: 0; }
.s3-cob-et{ fill: var(--text-faint); font-family: var(--font-body); font-size: 13px; transition: fill .45s ease; }
/* Solo se encienden los municipios que la empresa activa cubre de verdad.
   data-cob lleva escrito quien llega a cada uno, asi que el mapa no
   puede desincronizarse del dato: es el mismo atributo el que decide el
   color, la etiqueta y el latido. */
.s3-cob[data-emp="ee"] .s3-cob-n[data-cob~="ee"] .s3-cob-base,
.s3-cob[data-emp="so"] .s3-cob-n[data-cob~="so"] .s3-cob-base,
.s3-cob[data-emp="sa"] .s3-cob-n[data-cob~="sa"] .s3-cob-base{ fill: var(--ent); stroke: var(--ent); }
.s3-cob[data-emp="ee"] .s3-cob-n[data-cob~="ee"] .s3-cob-et,
.s3-cob[data-emp="so"] .s3-cob-n[data-cob~="so"] .s3-cob-et,
.s3-cob[data-emp="sa"] .s3-cob-n[data-cob~="sa"] .s3-cob-et{ fill: var(--text); }
.s3-cob[data-emp="ee"] .s3-cob-n[data-cob~="ee"] .s3-cob-halo,
.s3-cob[data-emp="so"] .s3-cob-n[data-cob~="so"] .s3-cob-halo,
.s3-cob[data-emp="sa"] .s3-cob-n[data-cob~="sa"] .s3-cob-halo{ opacity: .45; }

/* Las dos salidas solo existen para Sary, que es la unica que exporta.
   El trazo se descubre en vez de aparecer: es el pathLength del
   componente original, resuelto sin libreria. */
.s3-cob-sal{ opacity: 0; transition: opacity .3s ease; }
.s3-cob[data-emp="sa"] .s3-cob-sal{ opacity: 1; }
.s3-cob-arco{
  fill: none; stroke: var(--dato); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
}
.s3-cob[data-emp="sa"] .s3-cob-arco{ stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s cubic-bezier(.22,1,.36,1) .1s; }
.s3-cob[data-emp="sa"] .s3-cob-arco:nth-of-type(2){ transition-delay: .32s; }
.s3-cob-dest{ fill: var(--dato); }
.s3-cob-sal-t{ fill: var(--dato); font-family: var(--font-display); font-weight: 600; font-size: 13px; }

@media (prefers-reduced-motion: reduce){
  .s3-cob-arco{ transition: none !important; }
  .s3-cob-halo animate, .s3-cob-halo{ display: none; }
}
@media (max-width: 560px){
  .s3-cob-tabs{ display: flex; width: 100%; }
  .s3-cob-b{ flex: 1; padding: 8px 6px; font-size: .76rem; }
  .s3-cob-et{ font-size: 15px; }
}

/* =====================================================================
   PIEZAS QUE SALIERON DEL SVG
   Los tres graficos del punto 4 se salian de su marco por la misma
   causa: el texto iba DENTRO del lienzo. SVG no ajusta ni recorta texto,
   asi que en cuanto una frase crecia se desbordaba. Ahora el SVG se
   queda con la geometria y toda la prosa vive aqui, en HTML, donde el
   navegador la parte solo y no puede salirse.
   ===================================================================== */

/* La tira de referencia de las brechas. Juli pregunto DOS VECES por
   Sonsoneña en ese grafico; si hay que preguntarlo dos veces el fallo es
   del grafico, no de quien mira. Los dos puntos de color se funden en el
   3,49 y se ve que las dos empresas estan dentro de la cifra contra la
   que se mide. */
.s3-ref{
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 9px;
  margin: 16px 0 4px; padding: 12px 16px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
}
.s3-ref-p{ width: 13px; height: 13px; border-radius: 50%; flex: none; }
.s3-ref-p[data-ent="so"]{ background: var(--serie3); margin-right: -7px; }
.s3-ref-p[data-ent="sa"]{ background: var(--dato); }
.s3-ref-f{ width: 22px; height: 1px; background: var(--border-strong); flex: none; }
.s3-ref-v{
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--text); font-variant-numeric: tabular-nums; flex: none;
}
.s3-ref-t{ font-size: .8rem; color: var(--text-muted); line-height: 1.5; flex: 1 1 320px; }
.s3-ref-t b{ color: var(--text); }
/* El marcador del cero no puede ser otro cuadrado cian: en la leyenda
   vieja habia dos entradas cian y no se distinguian. */
/* Va con .s3-leyenda delante porque .s3-leyenda i clava border-radius:3px
   y le gana en especificidad: sin esto el anillo salia cuadrado. */
.s3-leyenda i.s3-ley-cero{
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 2px var(--accent); display: block;
}

/* Cabecera de zonas de la dispersion, fuera del lienzo */
.s3-zonas{ display: grid; grid-template-columns: 45% 1fr; gap: 0; margin: 20px 0 2px; padding-left: 16%; }
.s3-zona{ font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.s3-zona-ya{ color: var(--accent); }
.s3-zona-no{ color: var(--text-faint); }

/* Leyenda de tamaño: en un grafico de burbujas el area codifica un dato,
   asi que hace falta una escala para poder leerlo. */
.s3-tam{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
.s3-tam-t{ font-size: .76rem; color: var(--text-faint); }
.s3-tam-m{ display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.s3-tam-m i{ width: var(--r); height: var(--r); border-radius: 50%; background: var(--fuera); display: block; flex: none; }

/* Leyenda del plano perceptual. Estas tres frases vivian como <text>
   dentro del SVG y se salian del plano por la derecha; una de ellas
   cruzaba el eje horizontal. */
.s3-mapa-ley{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.s3-mapa-l{
  display: grid; gap: 3px; padding-top: 11px;
  border-top: 2px solid var(--ent, var(--accent));
  --ent: var(--accent);
}
.s3-mapa-l[data-ent="so"]{ --ent: var(--serie3); }
.s3-mapa-l[data-ent="sa"]{ --ent: var(--dato); }
.s3-mapa-l b{ font-family: var(--font-display); font-size: .92rem; color: var(--ent); }
.s3-mapa-l span{ font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 700px){
  .s3-mapa-ley{ grid-template-columns: 1fr; gap: 12px; }
  .s3-zonas{ grid-template-columns: 1fr; gap: 2px; padding-left: 0; }
}

/* =====================================================================
   PLANO PERCEPTUAL — el cuadrante vacio como argumento
   Era un recuadro con borde y tres puntos colocados con left/top en
   porcentaje: la version Word del mapa. Ahora es SVG, los ejes cruzan de
   verdad, cada empresa es una burbuja del tamaño de su calificacion
   total —tercera variable— y el cuadrante vacio esta pintado como lo que
   es: el argumento del parrafo que sigue.
   ===================================================================== */
.s3-mapa{ position: relative; margin-top: 20px; }
.s3-mapa svg{ width: 100%; height: auto; display: block; overflow: visible; }
.s3-mapa-cuad{ fill: var(--bg-elev-2); }
.s3-mapa-vacio{ fill: color-mix(in srgb, var(--fuera) 10%, transparent); }
.s3-mapa-eje{ stroke: var(--border-strong); stroke-width: 1.5; }
.s3-mapa-et{ fill: var(--text-faint); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.s3-mapa-q{ fill: var(--text-faint); font-size: 12px; font-style: italic; }
.s3-mapa-b{ stroke: var(--bg); stroke-width: 3; }
.s3-mapa-n{ font-family: var(--font-display); font-weight: 700; font-size: 14px; text-anchor: middle; }
.s3-mapa-d{ fill: var(--text-muted); font-size: 11.5px; text-anchor: middle; }
.s3-mapa-marca{ transform-box: fill-box; transform-origin: center; }
body.s3-js .s3-mapa-marca{ transform: scale(0); }
body.s3-js .s3-anim.is-in .s3-mapa-marca{
  transform: none; transition: transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * 140ms);
}
body.s3-js .s3-mapa-txt{ opacity: 0; }
body.s3-js .s3-anim.is-in .s3-mapa-txt{ opacity: 1; transition: opacity .5s ease; transition-delay: calc(420ms + var(--i, 0) * 140ms); }
@media (prefers-reduced-motion: reduce){
  body.s3-js .s3-mapa-marca{ transform: none; }
  body.s3-js .s3-mapa-txt{ opacity: 1; }
  body.s3-js .s3-anim.is-in .s3-mapa-marca,
  body.s3-js .s3-anim.is-in .s3-mapa-txt{ transition: none; }
}
.s3-disp-tip{
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--bg-elev-2); border-radius: 12px; padding: 11px 13px; max-width: 260px;
  font-size: .8rem; color: var(--text); line-height: 1.45;
  transition: opacity .18s ease; z-index: 5;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.s3-disp-tip.is-on{ opacity: 1; }
.s3-disp-tip b{ display: block; color: var(--accent); margin-bottom: .25em; }

/* Mapa perceptual 2 x 2 */
.s3-plano{
  position: relative; aspect-ratio: 5 / 4; max-width: 720px; margin: 8px auto 0;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), var(--border) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), var(--border) 50%, transparent calc(50% + 1px));
}
.s3-plano-eje{
  position: absolute; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.s3-plano-eje.ar{ top: 8px; left: 50%; transform: translateX(-50%); }
.s3-plano-eje.ab{ bottom: 8px; left: 50%; transform: translateX(-50%); }
.s3-plano-eje.iz{ left: 10px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.s3-plano-eje.de{ right: 10px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }
.s3-plano-m{
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 6px; text-align: center; width: 148px;
}
.s3-plano-d{ width: 16px; height: 16px; border-radius: 50%; background: var(--ent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ent) 22%, transparent); }
.s3-plano-n{ font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--ent); }
.s3-plano-q{ font-size: .7rem; color: var(--text-faint); line-height: 1.35; }
.s3-plano-m[data-ent="ee"]{ --ent: var(--accent); }
.s3-plano-m[data-ent="sa"]{ --ent: var(--dato); }
.s3-plano-m[data-ent="so"]{ --ent: var(--serie3); }
.s3-plano-vacio{
  position: absolute; transform: translate(-50%, -50%); width: 160px;
  font-size: .72rem; color: var(--text-faint); font-style: italic; text-align: center;
}

/* Destacado */
.s3-callout{
  border: 1px solid var(--accent); border-radius: var(--radius-card);
  background: var(--accent-soft); padding: clamp(18px, 2.4vw, 28px);
  margin-top: 30px;
}
.s3-callout-t{ font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .4em; color: var(--text); }
.s3-callout p{ margin: 0 0 .7em; color: var(--text-muted); font-size: .92rem; line-height: 1.6; }
.s3-callout p:last-child{ margin-bottom: 0; }

/* =====================================================================
   ACORDEON VERTICAL + FONDO POR TARJETA
   Va sobre <details>/<summary> nativo a proposito: abre y cierra sin JS,
   es accesible de fabrica, Ctrl+F encuentra el texto aunque este plegado
   y al imprimir se puede forzar abierto. Un acordeon a mano con clases
   pierde las cuatro cosas.

   El fondo lo declara cada tarjeta en --img. Mientras el archivo no
   exista la tarjeta se ve igual que sin el: el fondo suma, no sostiene.
   Por eso el texto NUNCA se apoya en la imagen — encima va siempre un
   velo opaco del color de la superficie.
   ===================================================================== */
/* Al volverse acordeon, la tarjeta pasa a tener UN solo hijo (el
   <details>), asi que las rejillas y flex antiguos de .s3-imp-c y
   .s3-desc-c sobran: dejaban el details en una columna "auto" y el
   chevron se quedaba pegado al texto en vez de irse al borde. */
/* Selector doblado a proposito: .s3-imp-c y .s3-desc-c se declaran mas
   abajo en el archivo y, a igual especificidad, gana el ultimo. Su
   display:grid dejaba el <details> en una columna "auto" y el chevron se
   quedaba pegado al texto en vez de irse al borde derecho. */
.s3-acc.s3-acc{ position: relative; overflow: hidden; padding: 0; isolation: isolate; display: block; }
.s3-acc > details{ display: block; width: 100%; }
/* El fondo NO se pide hasta que los 24 archivos existan: una imagen que
   falta deja un 404 en consola en cada tarjeta, y la consola limpia es el
   detector de problemas de esta pagina. Cuando lleguen las imagenes basta
   con anadir la clase .s3-tarjetas al <body> del HTML. */
.s3-acc::before{
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: .3; transition: opacity .45s ease, transform .6s cubic-bezier(.16,.84,.28,1);
}
/* El velo: degradado del color de la superficie, mas denso donde cae el
   texto. Es lo que garantiza el contraste haya la imagen que haya. */
.s3-acc::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-elev) 72%, transparent) 0%,
    color-mix(in srgb, var(--bg-elev) 93%, transparent) 55%,
    var(--bg-elev) 100%);
}
.s3-acc summary{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-family: var(--font-display);
}
.s3-acc summary::-webkit-details-marker{ display: none; }
.s3-acc summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 11px; }
/* El chevron: dos trazos, no un glifo. Los emoji y las flechas de fuente
   no comparten grosor con el resto de la pagina. */
.s3-acc-v{
  margin-left: auto; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s cubic-bezier(.16,.84,.28,1), border-color .3s ease;
}
.s3-acc details[open] .s3-acc-v{ transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--accent); }
.s3-acc details[open]{ }
.s3-acc:has(details[open])::before{ opacity: .16; transform: scale(1.04); }
.s3-acc-c{ padding: 0 18px 18px; display: grid; gap: 0; }
/* La apertura vertical se anima con grid-template-rows, no con height:
   no hace falta saber el alto de antemano y no hay salto al terminar. */
.s3-acc details > .s3-acc-c{ animation: s3-abre .38s cubic-bezier(.16,.84,.28,1); }
@keyframes s3-abre{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }

.s3-acc .s3-desc-t, .s3-acc .s3-imp-t{ margin: 0; }
.s3-acc .s3-imp-n{ flex: none; }
@media (hover: hover) and (pointer: fine){
  .s3-acc summary:hover .s3-acc-v{ border-color: var(--accent); }
  .s3-acc:hover::before{ opacity: .42; }
  .s3-acc:has(details[open]):hover::before{ opacity: .2; }
}
@media (prefers-reduced-motion: reduce){
  .s3-acc::before, .s3-acc-v{ transition: none; }
  .s3-acc details > .s3-acc-c{ animation: none; }
}
/* Al imprimir, todo abierto: un entregable no se entrega plegado. */
@media print{
  .s3-acc details{ display: block; }
  .s3-acc .s3-acc-c{ display: block !important; }
  .s3-acc::before{ display: none; }
}

/* Los diez paneles de criterio conservan su sistema de pestanas —la
   rubrica depende de el— y solo reciben el fondo. */
.s3-conimg{ position: relative; isolation: isolate; }
.s3-conimg::before{
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background-size: cover; background-position: center;
  opacity: .14;
}
.s3-conimg::after{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

body.s3-tarjetas .s3-acc::before,
body.s3-tarjetas .s3-conimg::before{ background-image: var(--img); }

/* La fotografia de la entrega directa, que ocupa el que fue el hueco 04.
   Va a ancho de seccion porque es la unica fotografia de la parada 05 y
   cierra el argumento del criterio 09. */
.s3-foto{ margin: clamp(26px, 3vw, 38px) 0; }
 .s3-foto{ perspective: 1200px; }
.s3-foto-marco{
  display: block; overflow: hidden; border-radius: 14px;
  /* 8 % arriba y 8 % abajo: la escena queda mas apaisada y el recorte
     cae en cielo y adoquin, no en las manos, que son el sujeto. */
  aspect-ratio: 1600 / 756;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.16,.84,.28,1), box-shadow .5s ease;
  box-shadow: 0 22px 50px -30px rgba(0,0,0,.85);
  position: relative;
}
.s3-foto-marco img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* El brillo sigue al cursor y se suma en modo screen: es lo que da
   volumen de verdad, no la inclinacion sola. */
.s3-foto-luz{
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(23,184,230,.20), transparent 62%);
  opacity: 0; transition: opacity .45s ease;
}
.s3-foto:hover .s3-foto-luz{ opacity: 1; }
.s3-foto:hover .s3-foto-marco{ box-shadow: 0 34px 64px -30px rgba(0,0,0,.95); }
@media (prefers-reduced-motion: reduce), (pointer: coarse){
  .s3-foto-marco{ transform: none !important; transition: none; }
  .s3-foto-luz{ display: none; }
}
.s3-foto figcaption{
  margin-top: 12px; font-size: .84rem; color: var(--text-muted); line-height: 1.6; max-width: 84ch;
}
.s3-foto figcaption b{ color: var(--text); display: block; margin-bottom: .25em; font-family: var(--font-display); }
.s3-foto figcaption i{ color: var(--text-faint); }

/* =====================================================================
   MENU PROPIO DE LA SUBPAGINA
   Aqui el menu es el indice del trabajo, no el del sitio. VERTICE
   encabeza y es la unica salida hacia la portada.
   ===================================================================== */
.s3-nav .s3-nav-salida a{ color: var(--accent); }
.s3-nav .s3-nav-salida{ margin-bottom: .4em; }
.s3-nav .s3-nav-menor a{ font-size: .62em; opacity: .72; }

/* =====================================================================
   ACORDEON VERTICAL DE LAS IMPLICACIONES
   Es el componente 06 del proyecto —acordeon horizontal de imagenes—
   girado 90 grados: filas que crecen en alto en vez de columnas que
   crecen en ancho.

   SE ANIMA flex-grow, NO LA ALTURA. Es la decision que ese componente
   documenta y vale igual en vertical: flex-grow es el unico numero que
   el navegador interpola sin recalcular la caja de todas las hojas en
   cada fotograma. Animar height o flex-basis provoca reflow y se nota.
   ===================================================================== */
.s3-vac{
  display: flex; flex-direction: column; gap: 10px;
  height: clamp(520px, 74vh, 720px); margin-top: 26px;
}
.s3-vac-h{
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  flex: 0 0 var(--lomo, 76px);
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-elev);
  transition: flex-grow .55s cubic-bezier(.22, 1, .36, 1), border-color .45s ease;
}
.s3-vac-h.is-on{ flex-grow: 1; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* La fotografia solo existe de verdad en la hoja abierta: cerrada se
   queda en un rescoldo apagado que insinua que hay algo detras. */
.s3-vac-img{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  filter: grayscale(1) brightness(.42);
  opacity: .3; transform: scale(1.06);
  transition: opacity .6s ease, filter .6s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.s3-vac-h.is-on .s3-vac-img{ opacity: 1; filter: none; transform: none; }
/* El velo: el texto nunca se apoya en la fotografia. Denso a la
   izquierda, que es por donde se lee, y transparente a la derecha, que
   es donde el prompt dejo el motivo. */
.s3-vac-h::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    var(--bg-elev) 0%,
    color-mix(in srgb, var(--bg-elev) 92%, transparent) 38%,
    color-mix(in srgb, var(--bg-elev) 55%, transparent) 68%,
    color-mix(in srgb, var(--bg-elev) 25%, transparent) 100%);
  transition: opacity .5s ease;
}
.s3-vac-lomo{
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 0 20px; height: 76px; flex: none;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.s3-vac-lomo:focus-visible{ outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 13px; }
.s3-vac-n{
  font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; line-height: 1;
  color: var(--text-faint); flex: none; font-variant-numeric: tabular-nums;
  transition: color .45s ease;
}
.s3-vac-h.is-on .s3-vac-n{ color: var(--accent); }
.s3-vac-t{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.s3-vac-v{
  margin-left: auto; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .45s ease;
}
.s3-vac-h.is-on .s3-vac-v{ transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--accent); }
.s3-vac-c{
  padding: 0 20px 26px; max-width: 60ch; margin-top: auto;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease .1s, transform .5s cubic-bezier(.22,1,.36,1) .1s;
}
.s3-vac-h.is-on .s3-vac-c{ opacity: 1; transform: none; }
.s3-vac-p{ margin: 0; font-size: .9rem; color: var(--text-muted); line-height: 1.65; }
.s3-vac-p b{ color: var(--text); }
@media (hover: hover) and (pointer: fine){
  .s3-vac-h:not(.is-on):hover{ border-color: var(--border-strong); }
  .s3-vac-h:not(.is-on):hover .s3-vac-img{ opacity: .5; }
}
/* Sin JS, o en pantalla estrecha, o con movimiento reducido: las cuatro
   abiertas y en columna. Nada queda escondido nunca. */
@media (max-width: 760px){
  .s3-vac{ height: auto; }
  .s3-vac-h{ flex: 1 1 auto; }
  .s3-vac-c{ opacity: 1; transform: none; }
  .s3-vac-img{ opacity: .22; }
  .s3-vac-v{ display: none; }
}
body:not(.s3-js) .s3-vac{ height: auto; }
body:not(.s3-js) .s3-vac-c{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .s3-vac-h, .s3-vac-img, .s3-vac-c, .s3-vac-v{ transition: none; }
}

/* =====================================================================
   LAS CINCO CONCLUSIONES — el broche
   Es lo ultimo que se lee del trabajo, asi que deja de ser una lista con
   bolitas: cada conclusion es una franja a ancho completo con su cifra
   en grande, y la ultima —la de metodo— cierra en el color de la marca.
   ===================================================================== */
.s3-concl{ list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.s3-concl li{
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 46px); align-items: start;
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--border);
  position: relative;
}
.s3-concl li:last-child{ border-bottom: 1px solid var(--border); }
.s3-concl b{
  font-family: var(--font-display); font-weight: 700; line-height: .9;
  font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -.04em;
  color: var(--border-strong); font-variant-numeric: tabular-nums;
  transition: color .5s ease;
}
.s3-concl span{ font-size: clamp(.95rem, 1.3vw, 1.06rem); color: var(--text-muted); line-height: 1.62; max-width: 74ch; }
/* La cifra se enciende cuando la conclusion entra en pantalla: el
   recorrido de lectura se ve avanzar. */
.s3-concl li.is-in b{ color: var(--accent); }
/* Y una linea que se dibuja sobre el borde superior, de izquierda a
   derecha, al llegar cada una. */
.s3-concl li::before{
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
}
.s3-concl li.is-in::before{ transform: scaleX(1); transition: transform .9s cubic-bezier(.22,1,.36,1); }
body:not(.s3-js) .s3-concl li b{ color: var(--accent); }
@media (prefers-reduced-motion: reduce){
  .s3-concl li b{ color: var(--accent); }
  .s3-concl li::before{ transform: scaleX(1); transition: none; }
}
@media (max-width: 620px){
  .s3-concl li{ grid-template-columns: 1fr; gap: 6px; }
}

/* Implicaciones */
.s3-imp{ display: grid; gap: 14px; margin-top: 26px; }
.s3-imp-c{
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
  background: var(--bg-elev);
}
.s3-imp-n{
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  color: var(--accent); line-height: 1;
}
.s3-imp-t{ font-family: var(--font-display); font-size: 1rem; margin: 0 0 .3em; }
.s3-imp-p{ font-size: .88rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------------
   HUECOS DE IMAGEN — se reemplazan por la imagen definitiva
   --------------------------------------------------------------- */
.s3-slot{
  width: min(100%, 780px);
  border: 1px dashed var(--border-strong); border-radius: 14px;
  padding: 18px 22px; margin: 26px 0 30px;
  display: grid; gap: 6px; justify-items: start; text-align: left;
}
.s3-slot-et{
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.s3-slot-t{ font-family: var(--font-display); font-size: .95rem; margin: 0; color: var(--text); }
.s3-slot-p{ font-size: .8rem; color: var(--text-muted); max-width: 72ch; margin: 0; line-height: 1.5; }
.s3-slot-m{ font-size: .74rem; color: var(--text-faint); }
.s3-slot img{ width: 100%; height: auto; border-radius: 10px; display: block; }

/* ---------------------------------------------------------------
   Referencias
   --------------------------------------------------------------- */
.s3-refs{ list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.s3-refs li{ font-size: .84rem; color: var(--text-muted); line-height: 1.5; padding-left: 1.2em; text-indent: -1.2em; }
.s3-refs a{ color: var(--accent); }

@media print{
  .s3-crit-hoja{ visibility: visible !important; opacity: 1 !important; position: static !important; }
  .s3-crit-panel{ display: block; }
  .s3-vista{ display: block !important; }
  .s3-tabs, .s3-filtros{ display: none; }
  .s3-anim{ opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   PIEZAS DE LA PASADA VISUAL
   La pagina leia como un documento: abria con un parrafo y el veredicto
   aparecia en la parada 03. Ahora el resultado va primero y cada seccion
   abre con su hallazgo en cifra. No se quito informacion: cambio el
   orden de lectura.
   ===================================================================== */

/* ---- Marcador del hero: el veredicto antes que nada ---- */
.s3-marcador{
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 720px;
  display: grid; gap: 10px;
}
.s3-marcador-fila{
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 2.6ch minmax(0, 17ch) minmax(0, 1fr) 5ch;
  --ent: var(--accent);
}
.s3-marcador-fila[data-ent="sa"]{ --ent: var(--dato); }
.s3-marcador-fila[data-ent="so"]{ --ent: var(--serie3); }
.s3-marcador-pos{
  font-family: var(--font-display); font-size: .78rem;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.s3-marcador-emp{ font-size: .92rem; color: var(--text-muted); }
.s3-marcador-fila.is-reto .s3-marcador-emp{ color: var(--text); font-weight: 600; }
.s3-marcador-pista{
  height: 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-faint) 18%, transparent);
  overflow: hidden;
}
.s3-marcador-fill{
  display: block; height: 100%; width: var(--w); border-radius: 999px;
  background: var(--ent); transform-origin: left center;
}
/* El unico momento animado con autoria de la pagina: las tres barras se
   despliegan una detras de otra al cargar, y nada mas vuelve a hacerlo. */
body.s3-js .s3-marcador-fill{ transform: scaleX(0); }
body.s3-js .s3-marcador.is-in .s3-marcador-fill{
  transform: none;
  transition: transform 1.15s cubic-bezier(.16,.84,.28,1);
}
body.s3-js .s3-marcador.is-in .s3-marcador-fila:nth-child(2) .s3-marcador-fill{ transition-delay: .12s; }
body.s3-js .s3-marcador.is-in .s3-marcador-fila:nth-child(3) .s3-marcador-fill{ transition-delay: .24s; }
.s3-marcador-val{
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ent); text-align: right; font-variant-numeric: tabular-nums;
}
.s3-marcador-pie{
  grid-column: 1 / -1; margin: 6px 0 0;
  font-size: .82rem; color: var(--text-faint); line-height: 1.5; max-width: 62ch;
}
@media (max-width: 560px){
  .s3-marcador-fila{ grid-template-columns: 2.4ch minmax(0,1fr) 5ch; row-gap: 6px; }
  .s3-marcador-pista{ grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce){
  body.s3-js .s3-marcador-fill{ transform: none; }
  body.s3-js .s3-marcador.is-in .s3-marcador-fill{ transition: none; }
}

/* ---- Dato ancla: cada seccion abre con su hallazgo ---- */
.s3-ancla{
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px); align-items: center;
  margin: clamp(24px, 3vw, 38px) 0 clamp(28px, 3.5vw, 44px);
  padding-bottom: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--border);
}
.s3-ancla-cifra{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 11vw, 6rem); line-height: .82;
  letter-spacing: -.035em; color: var(--accent); margin: 0;
  font-variant-numeric: tabular-nums;
}
.s3-ancla-cifra small{
  display: block; font-size: .16em; font-weight: 500; letter-spacing: .02em;
  color: var(--text-faint); margin-top: 1.1em; line-height: 1.35; max-width: 16ch;
}
.s3-ancla-frase{
  margin: 0; font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.5;
  color: var(--text-muted); max-width: 52ch;
}
@media (max-width: 620px){
  .s3-ancla{ grid-template-columns: 1fr; gap: 16px; }
  .s3-ancla-cifra small{ max-width: none; }
}

/* ---- Tipologia de competidores: lista, no cuadricula de tarjetas ----
   Cuatro tarjetas del mismo tamano no dicen cual importa, y aqui solo
   una de las cuatro entra a la matriz. */
.s3-tipos{ margin: 26px 0 0; display: grid; gap: 0; }
.s3-tipo{
  display: grid; grid-template-columns: minmax(0, 13ch) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 30px); align-items: baseline;
  padding: 15px 0; border-top: 1px solid var(--border);
}
.s3-tipo:last-child{ border-bottom: 1px solid var(--border); }
.s3-tipo dt{
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--text-muted);
}
.s3-tipo dd{ margin: 0; font-size: .9rem; color: var(--text-faint); line-height: 1.5; }
.s3-tipo.is-dentro{ border-top-color: var(--accent); }
.s3-tipo.is-dentro dt{ color: var(--accent); font-size: 1.22rem; }
.s3-tipo.is-dentro dd{ color: var(--text-muted); font-size: 1rem; }
.s3-tipo.is-dentro dd b{ color: var(--text); }
@media (max-width: 560px){ .s3-tipo{ grid-template-columns: 1fr; gap: 4px; } }

/* ---- Huecos de imagen a ancho completo ---- */
.s3-slot-ancho{ margin: clamp(26px, 3vw, 40px) 0; padding: clamp(26px, 4vw, 48px); }
.s3-slot-ancho .s3-slot-t{ font-size: 1.15rem; }

/* =====================================================================
   EL INSTRUMENTO DE MEDIDA — diez diales que barren al entrar
   Ocupa el sitio del hueco 02. Se descarto la lamina generada por dos
   razones: una imagen exportada no puede animarse, y la descripcion del
   hueco pedia fondo casi negro y cian #17b8e6 cuando esta seccion esta
   en el tramo CLARO (--sc-mix vale 1.000 aqui), asi que habria quedado
   un rectangulo negro en mitad de una seccion blanca.

   Las agujas llevan las diez calificaciones reales de la empresa del
   reto. Sus ponderados suman 1,39, que es su nota. Nueve abajo y una
   levantada —el canal propio, el unico criterio donde no pierde— es el
   argumento de la seccion dicho sin texto.

   GEOMETRIA. Arco de 180 grados, centro (60,62), radio 44. La posicion p
   (1 a 4) cae en el angulo 180-(p-1)*60. La aguja se dibuja apuntando a
   la posicion 1 y gira (p-1)*60 grados; el arco recorrido se descubre
   con stroke-dashoffset sobre una longitud de PI*44 = 138,3.
   ===================================================================== */
.s3-inst{ display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px 4px; margin-top: 24px; }
.s3-dial{ display: grid; gap: 3px; justify-items: center; }
.s3-dial-svg{ display: block; width: 100%; height: auto; overflow: visible; }
.s3-dial-pista{ fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }
.s3-dial-fill{
  fill: none; stroke: var(--ent, var(--accent)); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 138.3; stroke-dashoffset: var(--off, 138.3);
}
.s3-dial-marcas line{ stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }
.s3-dial-num text{ fill: var(--text-faint); font-family: var(--font-body); font-size: 9px; }
/* La escala se rotula UNA vez, en el primer dial, y los otros nueve solo
   llevan las marcas. Repetir 1-2-3-4 diez veces son cuarenta numeros que
   no dicen nada nuevo despues del primero. */
.s3-dial:not(.is-clave) .s3-dial-num{ display: none; }
.s3-dial-aguja{
  stroke: var(--ent, var(--accent)); stroke-width: 2; stroke-linecap: round;
  transform: rotate(var(--giro, 0deg)); transform-origin: 60px 62px; transform-box: view-box;
}
.s3-dial-pivote{ fill: var(--ent, var(--accent)); }
.s3-dial-n{ margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text); font-variant-numeric: tabular-nums; }
.s3-dial-p{ margin: 0; font-size: .69rem; color: var(--text-faint); }

/* El estado de partida cuelga de body.s3-js, como todo lo demas de esta
   pagina: SIN JS las agujas nacen ya en su valor. Un dial que se queda
   en 1 porque el script no corrio no seria una animacion pendiente,
   seria un dato falso. */
body.s3-js .s3-dial-aguja{ transform: rotate(0deg); }
body.s3-js .s3-dial-fill{ stroke-dashoffset: 138.3; }
body.s3-js .s3-anim.is-in .s3-dial-aguja{
  transform: rotate(var(--giro, 0deg));
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
body.s3-js .s3-anim.is-in .s3-dial-fill{
  stroke-dashoffset: var(--off, 138.3);
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
@media (prefers-reduced-motion: reduce){
  body.s3-js .s3-dial-aguja{ transform: rotate(var(--giro, 0deg)); }
  body.s3-js .s3-dial-fill{ stroke-dashoffset: var(--off, 138.3); }
  body.s3-js .s3-anim.is-in .s3-dial-aguja,
  body.s3-js .s3-anim.is-in .s3-dial-fill{ transition: none; }
}
@media (max-width: 900px){ .s3-inst{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 6px; } }
@media (max-width: 560px){ .s3-inst{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; } }

/* =====================================================================
   EL TABLERO DE LAS TRES
   Ocupa el sitio del hueco que pedia una lamina generada. Aqui no hacia
   falta una imagen: el dato ya existe y una lamina "sin cifras legibles"
   habria sido decoracion con forma de grafico.

   POR QUE LA ESCALA ES 1-4 Y NO LA CIFRA CRUDA. Los cuatro indicadores
   vienen en unidades que no se pueden comparar entre si: personas,
   referencias, municipios y publicaciones. Ponerlos en un mismo tablero
   en crudo obliga a dos escalas distintas, que es exactamente el error
   que inventa correlaciones. La calificacion del criterio SI es comun a
   los cuatro —es la que produjo la matriz—, y la cifra observada que la
   genero va impresa debajo de cada medidor, asi que no se esconde nada.
   La tabla completa de los diez criterios vive en la parada 03.

   El color senala a la empresa, nunca su puesto: cian El Encanto,
   violeta Sonsonena, ambar Sary, aqui y en toda la pagina.
   ===================================================================== */
.s3-tablero{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px); margin-top: 20px;
}
.s3-tablero-col{
  display: grid; gap: 15px; align-content: start;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 0 0 20px; overflow: hidden;
  --ent: var(--accent); --ent-soft: var(--accent-soft-2);
}
.s3-tablero-col[data-ent="so"]{ --ent: var(--serie3); --ent-soft: var(--serie3-soft); }
.s3-tablero-col[data-ent="sa"]{ --ent: var(--dato); --ent-soft: var(--dato-soft); }
/* La empresa del reto se distingue por un borde de 1px en su propio
   color, no por un marco grueso: eso es el tic mas reconocible de una
   interfaz generada, y ya se corrigio una vez en esta pagina. */
.s3-tablero-col[data-ent="ee"]{ border-color: var(--accent-soft-2); }

/* El logotipo ES la cabecera, igual que en el embudo de mas arriba. Los
   tres archivos son 720x520 con 115 px de banda de color abajo, asi que
   recortar a 16:9 desde el borde superior deja el logotipo entero y
   descarta solo la banda. */
.s3-tablero-marca{
  display: block; aspect-ratio: 720 / 405; overflow: hidden;
  background: var(--bg-elev-2); border-bottom: 3px solid var(--ent);
}
.s3-tablero-marca img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.s3-tablero-cab{ padding: 0 16px; display: grid; gap: 3px; }
.s3-tablero-emp{ font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin: 0; color: var(--text); }
.s3-tablero-sit{ font-size: .74rem; color: var(--text-faint); margin: 0; }

.s3-tablero-tot{ padding: 0 16px; margin: 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.s3-tablero-tot b{
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: var(--ent);
}
.s3-tablero-tot span{ font-size: .73rem; color: var(--text-faint); }

.s3-tablero-med{ padding: 0 16px; display: grid; gap: 14px; }
.s3-tablero-fila{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
.s3-tablero-ind{ grid-column: 1; grid-row: 1; margin: 0; font-size: .77rem; color: var(--text-muted); }
.s3-tablero-cal{
  grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 700;
  font-size: .84rem; color: var(--text); font-variant-numeric: tabular-nums;
}
.s3-tablero-cal i{ font-style: normal; font-weight: 500; color: var(--text-faint); }
/* Cuatro celdas separadas por 2 px de superficie, no por un borde: la
   escala es ordinal de 1 a 4 y se cuenta de un vistazo sin leer el eje.
   El carril apagado es el mismo color de la empresa a baja opacidad, asi
   que el estado se lee a lo largo de toda la barra. */
.s3-tablero-pista{
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 7px;
}
/* Encendido y apagado son el MISMO color a distinta opacidad, no dos
   tokens distintos: los tres --*-soft de la pagina van a .14, .30 y .34,
   asi que usarlos aqui habria hecho que cada columna pesara diferente y
   en El Encanto casi no se distinguia lo lleno de lo vacio. */
.s3-tablero-pista i{ display: block; border-radius: 2px; background: var(--ent); opacity: .2; }
.s3-tablero-fila[data-v="1"] .s3-tablero-pista i:nth-child(-n+1),
.s3-tablero-fila[data-v="2"] .s3-tablero-pista i:nth-child(-n+2),
.s3-tablero-fila[data-v="3"] .s3-tablero-pista i:nth-child(-n+3),
.s3-tablero-fila[data-v="4"] .s3-tablero-pista i:nth-child(-n+4){ opacity: 1; }
/* La cifra observada va un escalon POR ENCIMA del rotulo del indicador,
   no por debajo: es la evidencia, y es lo que hace que la calificacion
   no sea una opinion. En el tramo de viraje el --text-faint se apaga
   demasiado y era justo lo que peor se leia. */
.s3-tablero-cifra{ grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: .74rem; color: var(--text-muted); line-height: 1.4; }

@media (hover: hover) and (pointer: fine){
  .s3-tablero-col{ transition: transform .35s cubic-bezier(.16,.84,.28,1), border-color .35s ease, box-shadow .35s ease; }
  .s3-tablero-col:hover{ transform: translateY(-4px); border-color: var(--ent-soft); box-shadow: 0 16px 36px -20px var(--ent-soft); }
}
@media (prefers-reduced-motion: reduce){
  .s3-tablero-col, .s3-tablero-col:hover{ transition: none; transform: none; }
}
@media (max-width: 700px){
  .s3-tablero{ grid-template-columns: 1fr; }
  /* Se mantiene el 720/405 tambien aqui. Recortarlo mas para ganar alto
     le comia el nombre a los logotipos —a El Encanto le desaparecia
     entero— y una marca no se recorta. */
}

/* ---- Superficies del navegador ----
   Seleccion, foco y barras de desplazamiento salen de la paleta y no del
   navegador. Es lo que separa una pagina construida de una ensamblada. */
.s3 ::selection{ background: var(--accent-soft-2); color: var(--text); }
.s3 :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.s3 .s3-heat, .s3 .s3-tabla-wrap{ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.s3 .s3-heat::-webkit-scrollbar, .s3 .s3-tabla-wrap::-webkit-scrollbar{ height: 8px; }
.s3 .s3-heat::-webkit-scrollbar-thumb, .s3 .s3-tabla-wrap::-webkit-scrollbar-thumb{
  background: var(--border-strong); border-radius: 999px;
}
.s3 .s3-heat::-webkit-scrollbar-track, .s3 .s3-tabla-wrap::-webkit-scrollbar-track{ background: transparent; }

/* =====================================================================
   PIEZA VISUAL 3D
   Las fotografias de producto no son ilustracion de apoyo: son la prueba
   del argumento. Por eso salen del ancho de la columna de lectura y se
   presentan como un objeto con volumen, no como una imagen pegada.

   El 3D es el mismo lenguaje que ya usan las tarjetas del equipo en la
   portada —inclinacion que sigue al puntero— y no un efecto nuevo
   inventado para esta pagina. Un solo momento de entrada: la pieza llega
   inclinada hacia atras y se asienta.
   ===================================================================== */
.s3-pieza{
  margin: 30px 0 34px;
  /* Mas ancha que la columna de lectura, pero acotada: a ancho completo
     la fotografia competia con los titulos de seccion. */
  width: min(100%, 780px);
}
.s3-pieza-escena{ perspective: 1400px; perspective-origin: 50% 40%; }
.s3-pieza-marco{
  position: relative; border-radius: 16px; overflow: hidden;
  transform-style: preserve-3d;
  /* Sombra con desplazamiento y desenfoque reales: la pieza se apoya en
     la pagina, no lleva un halo de color pegado al borde. */
  box-shadow: 0 24px 48px -22px rgba(0,0,0,.78),
              0 4px 12px -8px rgba(0,0,0,.45);
  transform: rotateX(6deg) scale(.975);
  transition: transform .9s cubic-bezier(.16,.86,.26,1),
              box-shadow .9s cubic-bezier(.16,.86,.26,1);
  will-change: transform;
}
.s3-pieza.is-in .s3-pieza-marco{ transform: rotateX(0deg) scale(1); }
.s3-pieza-marco img{ display: block; width: 100%; height: auto; }

/* El brillo sigue al puntero. Es lo que hace que la superficie se lea
   como una lamina fisica y no como un rectangulo que gira. */
.s3-pieza-brillo{
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.20), rgba(255,255,255,.06) 42%, transparent 68%);
  mix-blend-mode: screen;
}

@media (hover: hover) and (pointer: fine){
  .s3-pieza-marco{ transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .5s ease; }
  .s3-pieza.is-in .s3-pieza-marco:hover{
    box-shadow: 0 32px 60px -24px rgba(0,0,0,.84),
                0 6px 16px -10px rgba(0,0,0,.5);
  }
  .s3-pieza.is-in .s3-pieza-marco:hover .s3-pieza-brillo{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .s3-pieza-marco, .s3-pieza.is-in .s3-pieza-marco{ transform: none; transition: none; }
  .s3-pieza-brillo{ display: none; }
}

.s3-pieza figcaption{
  margin-top: 16px; max-width: 100%;
  font-size: .88rem; line-height: 1.6; color: var(--text-muted);
}
.s3-pieza figcaption b{
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; color: var(--text); margin-bottom: .3em;
}

/* El cara a cara ya viene partido por la mitad en la propia fotografia,
   asi que su entrada acompana ese corte en vez de repetir la inclinacion:
   se abre desde el centro hacia los dos lados. */
.s3-pieza-duo .s3-pieza-marco{
  clip-path: inset(0 26% 0 26% round 16px);
  transition: transform .9s cubic-bezier(.16,.86,.26,1),
              clip-path 1.05s cubic-bezier(.16,.86,.26,1),
              box-shadow .9s cubic-bezier(.16,.86,.26,1);
}
.s3-pieza-duo.is-in .s3-pieza-marco{ clip-path: inset(0 0 0 0 round 16px); }
@media (prefers-reduced-motion: reduce){
  .s3-pieza-duo .s3-pieza-marco{ clip-path: inset(0 0 0 0 round 16px); transition: none; }
}
body:not(.s3-js) .s3-pieza-marco{ transform: none; clip-path: inset(0 0 0 0 round 16px); }

/* =====================================================================
   REPARTO DEL ANCHO
   La seccion mide 1180 px pero la columna de lectura son ~72ch. Con la
   figura centrada quedaba una banda muerta a la derecha en toda la
   pagina. Las piezas pasan a ocupar el ancho completo repartido en dos
   columnas: la fotografia manda, y su lectura vive al lado en vez de
   debajo. La imagen ademas baja de 780 a ~660 px, asi que se llena mas
   ancho con una foto mas pequena.
   ===================================================================== */
.s3-pieza{
  width: 100%; max-width: var(--max);
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr);
  align-items: center;
}
.s3-pieza figcaption{ margin-top: 0; align-self: center; }
.s3-pieza figcaption b{ font-size: 1.05rem; }
@media (max-width: 880px){
  .s3-pieza{ grid-template-columns: 1fr; }
  .s3-pieza figcaption{ margin-top: 4px; }
}

/* =====================================================================
   EL CAMPO DEL HERO
   La constelacion de nodos y lineas es de semana-02; repetirla aqui
   habria hecho que las dos subpaginas se confundieran. Esta pinta lo que
   la pagina trata: una matriz de celdas que se enciende por barridos.
   ===================================================================== */
.s3-campo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; opacity: .9;
}
.s3-hero .doc-header-inner{ position: relative; z-index: 2; }

/* =====================================================================
   RADAR — el puntero avisa antes de llegar
   La huella de semana-02 era decorativa: dejaba rastro y no decia nada.
   Esta capa hace un trabajo: al acercarse a algo pulsable, el anillo lo
   detecta, se ancla a su forma y lo anuncia. Es una afordancia, no un
   adorno, y por eso reemplaza a la anterior en vez de sumarse.
   ===================================================================== */
.s3-radar{
  position: fixed; left: 0; top: 0; z-index: 60;
  pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}
.s3-radar.is-viva{ opacity: 1; }

.s3-radar-anillo{
  position: absolute; left: 50%; top: 50%;
  width: var(--w, 26px); height: var(--h, 26px);
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--accent); border-radius: var(--r, 999px);
  opacity: .5;
  transition: width .34s cubic-bezier(.2,.9,.25,1),
              height .34s cubic-bezier(.2,.9,.25,1),
              border-radius .34s cubic-bezier(.2,.9,.25,1),
              opacity .3s ease, border-width .3s ease;
}
/* Detectado: el anillo se cierra sobre la forma del objetivo */
.s3-radar.is-fijo .s3-radar-anillo{ opacity: 1; border-width: 2px; }

/* El ping solo existe mientras el radar esta buscando: es el aviso de
   que hay algo cerca. Cuando ya se ancló, sobra. */
.s3-radar-ping{
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1.5px solid var(--accent); border-radius: 999px;
  opacity: 0;
}
.s3-radar.is-cerca:not(.is-fijo) .s3-radar-ping{
  animation: s3ping 1.15s cubic-bezier(.15,.7,.3,1) infinite;
}
@keyframes s3ping{
  0%   { transform: scale(.5); opacity: .75; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.s3-radar-et{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + var(--et, 26px)));
  font-family: var(--font-display); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bg); background: var(--accent);
  padding: 3px 8px; border-radius: 4px; white-space: nowrap;
  opacity: 0; transition: opacity .22s ease;
}
.s3-radar.is-fijo .s3-radar-et{ opacity: 1; }

/* Sin puntero fino no hay radar que valga, y con movimiento reducido
   tampoco: no es informacion, es asistencia. */
@media (pointer: coarse), (prefers-reduced-motion: reduce){
  .s3-radar{ display: none; }
}