/* =========================================================
   CUAS Café 2026 · Estilos del reporte
   Identidad visual Enfocuss (paleta institucional)
   ========================================================= */

:root {
  --enfocuss-orange: #ff6900;
  --enfocuss-teal: #008080;
  --enfocuss-white: #ffffff;
  --enfocuss-navy: #0b0c5e;
  --enfocuss-teal-light: #3aafa6;
  --enfocuss-orange-light: #ffb84d;
  --enfocuss-gray-dark: #3a3a3a;
  --enfocuss-gray-medium: #9c9c9c;
  --enfocuss-blue-accent: #1e90ff;

  --bg: #ffffff;
  --borde-suave: #e6e6e6;
  --fondo-suave: #f7fafa;

  --barra-pie: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--enfocuss-gray-dark);
  background: var(--bg);
  overflow: hidden;
  height: 100vh;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- Pantallas (una visible a la vez) ---------- */
.pantalla {
  display: none;
  height: calc(100vh - var(--barra-pie) - 2px);
  overflow-y: auto;
  padding-top: 8px;
}
.pantalla.active { display: block; }
/* Las páginas con título/segmentadores empiezan pegadas al borde superior,
   sin franja entre el viewport y el encabezado sticky. */
.pantalla[data-pagina="4"],
.pantalla[data-pagina="5"],
.pantalla[data-pagina="6"],
.pantalla[data-pagina="7"],
.pantalla[data-pagina="9"],
.pantalla[data-pagina="11"],
.pantalla[data-pagina="12"],
.pantalla[data-pagina="15"],
.pantalla[data-pagina="16"],
.pantalla[data-pagina="17"],
.pantalla[data-pagina="23"],
.pantalla[data-pagina="24"],
.pantalla[data-pagina="25"],
.pantalla[data-pagina="27"],
.pantalla[data-pagina="29"],
.pantalla[data-pagina="34"],
.pantalla[data-pagina="35"],
.pantalla[data-pagina="37"],
.pantalla[data-pagina="39"] { padding-top: 0; }

/* ---------- ENCABEZADO (cuerpo superior, fijo) ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--enfocuss-white);
  border-bottom: 0;
  padding: 14px 28px 10px;
}
.enc-titulo {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--enfocuss-navy);
  letter-spacing: .2px;
}
.segmentacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.seg-chips {
  font-size: .82rem;
  color: var(--enfocuss-gray-medium);
  background: var(--fondo-suave);
  border: 1px solid var(--borde-suave);
  border-radius: 20px;
  padding: 4px 14px;
}

/* ---------- CUERPO (datos) ---------- */
.cuerpo {
  padding: 18px 28px 110px;
}
.placeholder {
  border: 2px dashed var(--borde-suave);
  border-radius: 14px;
  background: var(--fondo-suave);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--enfocuss-gray-medium);
  font-size: 1.05rem;
}
.placeholder p { line-height: 1.6; }

/* =========================================================
   PORTADA
   ========================================================= */
.portada {
  min-height: calc(100vh - var(--barra-pie) - 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 30px 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafa 100%);
}
.portada-logos {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
  padding-top: 6px;
}
.logo { max-height: 60px; width: auto; }
.logo-enfocuss { max-height: 46px; }
.logo-plantosa { max-height: 64px; }

.portada-titulo {
  margin-top: 18px;
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--enfocuss-navy);
  letter-spacing: .5px;
  text-align: center;
}
.portada-subtitulo {
  font-size: 1.35rem;
  color: var(--enfocuss-gray-dark);
  margin-top: 6px;
  text-align: center;
  font-style: italic;
}
.portada-fecha {
  font-size: 1.05rem;
  color: var(--enfocuss-gray-medium);
  margin-top: 4px;
}

.portada-linea {
  width: 120px; height: 4px;
  background: var(--enfocuss-orange);
  margin: 16px auto 28px;
  border-radius: 2px;
}

.portada-cuerpo {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Tarjetas (objetivo / ficha) */
.card {
  background: var(--enfocuss-white);
  border: 1px solid var(--borde-suave);
  border-left: 4px solid var(--enfocuss-navy);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(11,12,94,.08);
  padding: 22px 26px;
  text-align: justify;
}
.card-titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--enfocuss-navy);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.card-linea { height: 3px; background: var(--enfocuss-orange); width: 64px; margin: 8px 0 14px; border-radius: 2px; }
.card-texto { font-size: .98rem; line-height: 1.65; color: var(--enfocuss-gray-dark); }
.ficha-tag {
  font-size: .72rem;
  font-weight: 700;
  color: var(--enfocuss-white);
  background: var(--enfocuss-teal);
  border-radius: 4px;
  padding: 1px 7px;
  margin-right: 4px;
}

/* =========================================================
   PIE DE NAVEGACIÓN (cuerpo inferior, fijo)
   ========================================================= */
.nav-pie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--barra-pie);
  background: var(--enfocuss-navy);
  color: var(--enfocuss-white);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  box-shadow: 0 -3px 10px rgba(0,0,0,.12);
  z-index: 100;
}
.nav-flecha {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--enfocuss-orange);
  color: var(--enfocuss-white);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.nav-flecha:hover { background: #e85f00; transform: scale(1.06); }
.nav-flecha:disabled { background: #c8c8c8; color: #ffffff; cursor: default; }
.nav-select {
  flex: 1;
  font-size: .95rem;
  color: var(--enfocuss-white);
  background: var(--enfocuss-navy);
  border: 1px solid #3a4a8f;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.nav-select option { color: var(--enfocuss-white); background: var(--enfocuss-navy); }

/* Nav: contador */
.nav-contador { font-size: .85rem; color: var(--enfocuss-teal-light); white-space: nowrap; }

/* =========================================================
   RESPONSIVE (cobertura tablet / móvil)
   ========================================================= */
@media (max-width: 980px) {
  .encabezado, .cuerpo { padding-left: 16px; padding-right: 16px; }
  .portada { padding-left: 16px; padding-right: 16px; }
  .portada-titulo { font-size: 1.9rem; }
  .portada-subtitulo { font-size: 1.1rem; }
  .nav-pie { padding: 0 14px; gap: 10px; }
  .nav-select { font-size: .85rem; }
}
@media (max-width: 620px) {
  .enc-titulo { font-size: 1.2rem; }
  .portada-logos { gap: 22px; }
  .portada-titulo { font-size: 1.5rem; }
  .portada-subtitulo { font-size: 1rem; }
  .card-texto { font-size: .9rem; }
  .nav-flecha { width: 34px; height: 34px; }
}

/* =========================================================
   Componentes de datos (gráficos, tablas, historias)
   ========================================================= */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
  align-items: start;
}
.contenedor {
  background: var(--enfocuss-white);
  border: 1px solid var(--borde-suave);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(11,12,94,.06);
  padding: 14px 16px;
}
.contenedor.destacado { border: 2px solid var(--enfocuss-orange); box-shadow: 0 0 0 3px rgba(255,105,0,.12); }
.contenedor.destacado-sutil { border-left: 4px solid var(--enfocuss-teal); box-shadow: 0 3px 12px rgba(0,128,128,.10); }
.ele-titulo {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--enfocuss-navy);
  border-bottom: 2px solid var(--enfocuss-orange);
  padding-bottom: 6px;
}
.group-titulo, .grupo-titulo {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--enfocuss-navy);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--fondo-suave);
  border-left: 4px solid var(--enfocuss-teal);
  padding: 8px 12px;
}
.graf { position: relative; }
.sin-datos { min-height: 84px; display: grid; place-items: center; color: var(--enfocuss-gray-medium); font-style: italic; font-size: .9rem; background: var(--fondo-suave); border-radius: 8px; margin-top: 14px; padding: 18px; text-align: center; }
.historia {
  background: #f0f3f9;
  border-left: 4px solid var(--enfocuss-blue-accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: .9rem;
  color: var(--enfocuss-gray-dark);
  line-height: 1.5;
}
.n-nota {
  font-size: .8rem;
  color: var(--enfocuss-gray-medium);
  margin-top: 10px;
  text-align: right;
  font-style: italic;
}

/* Tablas de datos */
.dt {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.dt th {
  background: var(--enfocuss-navy);
  color: var(--enfocuss-white);
  padding: 6px 8px;
  text-align: right;
  font-weight: 600;
}
.dt th.primera { text-align: left; }
.dt td {
  border: 1px solid var(--borde-suave);
  padding: 5px 8px;
  text-align: right;
  color: var(--enfocuss-gray-dark);
}
.dt td.primera { text-align: left; color: var(--enfocuss-navy); font-weight: 600; }
.dt tr.fila-total td {
  background: #eef1f7;
  font-weight: 700;
  color: var(--enfocuss-navy);
}
.dt tr.fila-total td.primera { color: var(--enfocuss-navy); }
.dt tr:nth-child(even) td { background: #f7fafc; }
.dt { table-layout: auto; width: 100%; min-width: 100%; }
.dt th, .dt td { padding: 7px 9px; word-break: normal; overflow-wrap: anywhere; }
.dt td.primera, .dt th.primera { width: auto; min-width: 130px; }
.tabla-scroll { max-width: 100%; overflow-x: auto; }
#cuerpo-7 .contenedor.tabla-cruce-ancha { grid-column: 1 / -1; }
#cuerpo-7 .tabla-cruce-ancha .dt th:not(.primera),
#cuerpo-10 .tabla-cruce-ancha .dt th:not(.primera) {
  min-width: 62px;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
#cuerpo-10 .contenedor.tabla-cruce-ancha { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .dt { font-size: .74rem; }
  .dt th, .dt td { padding: 5px 6px; }
}

/* Índice de contenido: bloques temáticos, jerarquía clara y logos al pie */
.pantalla[data-pagina="4"].active { display:flex; flex-direction:column; overflow:hidden; }
.pantalla[data-pagina="4"] .encabezado { flex:0 0 auto; border-bottom:2px solid var(--enfocuss-orange-light); }
.indice-cuerpo {
  flex:1 1 auto; min-height:0; width:100%; max-width:none; margin:0;
  padding:10px 28px 8px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
.indice-columna { min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.indice-grupo { min-width:0; padding:7px 9px 6px; background:var(--enfocuss-white); border:1px solid var(--borde-suave); border-top:3px solid var(--enfocuss-orange); border-radius:8px; box-shadow:0 3px 10px rgba(11,12,94,.05); }
.indice-columna:nth-child(2) .indice-grupo { border-top-color:var(--enfocuss-teal); }
.indice-columna:nth-child(3) .indice-grupo { border-top-color:var(--enfocuss-navy); }
.indice-grupo-titulo { padding-bottom:5px; margin-bottom:4px; color:var(--enfocuss-navy); border-bottom:1px solid #eceef2; font-size:.75rem; font-weight:800; letter-spacing:.055em; line-height:1.2; text-transform:uppercase; }
.indice-lista { display:flex; flex-direction:column; gap:1px; }
.indice-item {
  width:100%; display:grid; grid-template-columns:29px minmax(0,1fr); align-items:center; gap:8px;
  padding:0 4px; border:0; border-radius:5px; background:transparent; text-align:left;
  color:var(--enfocuss-gray-dark); font:500 clamp(.75rem,.85vw,.9rem)/1.08 "Segoe UI",Arial,sans-serif;
  cursor:pointer; transition:background .15s,color .15s,transform .15s;
}
.indice-num { display:flex; min-width:26px; height:16px; align-items:center; justify-content:center; border-radius:5px; background:rgba(255,105,0,.09); color:var(--enfocuss-orange); font-size:.68rem; font-weight:800; }
.indice-item:hover { background:var(--fondo-suave); color:var(--enfocuss-navy); transform:translateX(2px); }
.indice-item:hover .indice-num { background:var(--enfocuss-orange); color:#fff; }
.indice-item:focus-visible { outline:2px solid var(--enfocuss-teal); outline-offset:1px; }
.indice-titulo { min-width:0; }
.indice-pie { flex:0 0 auto; min-height:56px; display:flex; align-items:center; justify-content:center; padding:2px 28px 5px; }
.indice-logos { display:flex; align-items:center; justify-content:center; gap:18px; }
.indice-logos img { display:block; width:auto; max-height:44px; object-fit:contain; }
.indice-logo-enfocuss { max-width:128px; }
.indice-logo-plantosa { max-width:100px; }
.indice-logos > span { width:1px; height:32px; background:#d9dce2; }
@media (max-width:900px) {
  .pantalla[data-pagina="4"].active { overflow-y:auto; }
  .indice-cuerpo { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .indice-cuerpo { grid-template-columns:minmax(0,1fr); padding:8px 16px; }
  .indice-grupo { padding:8px 10px; }
  .indice-grupo-titulo { font-size:.8rem; }
  .indice-item { font-size:.88rem; padding:5px 4px; }
  .indice-pie { padding-bottom:8px; }
}

/* Separador */
.separador-libre {
  min-height: calc(100vh - var(--barra-pie));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b2f46 0%, #0b0c5e 45%, #008080 100%);
  color: var(--enfocuss-white);
}
.sep-titulo {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
}
.sep-sub { font-size: 1.1rem; color: var(--enfocuss-teal-light); margin-top: 8px; }

/* =========================================================
   Segmentadores, grid 2 cols, minigráficos, logo separador
   ========================================================= */
.seg-label { font-size: .85rem; font-weight: 700; color: var(--enfocuss-navy); margin-right: 4px; }
.seg-grupo { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-chip {
  border: 1px solid var(--enfocuss-navy);
  background: #ffffff; color: var(--enfocuss-navy);
  border-radius: 20px; padding: 5px 15px; font-size: .85rem; cursor: pointer;
}
.seg-chip:hover { background: var(--enfocuss-teal-light); }
.seg-chip.active { background: var(--enfocuss-orange); color: #ffffff; border-color: var(--enfocuss-orange); font-weight: 700; }
.seg-none { font-size: .8rem; font-style: italic; color: var(--enfocuss-gray-medium); }
.seg-fijo { font-size:.78rem; font-weight:700; color:var(--enfocuss-gray-medium); background:var(--fondo-suave); border:1px solid var(--borde-suave); border-radius:20px; padding:4px 11px; }

.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.contenedor.wide { grid-column: span 2; }

.grupo-wrap { grid-column: span 2; border: 1px solid var(--borde-suave); border-radius: 14px; padding: 14px 18px; background: var(--fondo-suave); }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 16px; margin-top: 6px; }
.grupo-grilla { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; margin-top:10px; }
@media (max-width: 620px) { .grupo-grilla { grid-template-columns:minmax(0,1fr); } }

.sep-logo { max-height: 40px; }
.separador-libre { position: relative; }
.separador-libre .sep-logo { position: absolute; right: 22px; bottom: 64px; }
/* ---------- NOTAS bajo gráficas/tablas ---------- */
.notas { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 12px; }
.nota-otro { font-size: .85rem; color: var(--enfocuss-gray-dark); font-weight: 600; }
.nota-n { font-size: .85rem; color: var(--enfocuss-gray-medium); font-style: italic; }
.notas.notas-historicas { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; gap:4px 12px; }
.notas-historicas > span { min-width:0; overflow-wrap:anywhere; line-height:1.3; }
.notas-historicas .nota-n { text-align:right; }
@media (max-width: 760px) {
  .notas.notas-historicas { grid-template-columns:1fr; }
  .notas-historicas .nota-n { text-align:left; }
}
.notas.notas-historicas.solo-n { display:flex; justify-content:flex-end; }
.notas.notas-historicas.solo-n .nota-n { text-align:right; }
#cuerpo-12 .contenedor.texto-pagina12 { grid-column:1 / -1; background:var(--fondo-suave); }
#cuerpo-12 .texto-pagina12-cuerpo { margin:0; color:var(--enfocuss-gray-dark); font-size:.96rem; line-height:1.65; }

/* Página 13 · Potencial de marca y embudo: gráficos en porcentaje, sin conteos */
#cuerpo-13 .contenedor.wide { grid-column: 1 / -1; }
#cuerpo-13 .marca-grafico-scroll { max-width: 100%; overflow-x: auto; }
#cuerpo-13 .marca-grafico-svg { display:block; width:100%; min-width:920px; height:auto; }
#cuerpo-13 .marca-axis-text { font-size:13px; fill:#9c9c9c; }
#cuerpo-13 .marca-legend-text { font-size:12px; fill:#3a3a3a; }
#cuerpo-13 .marca-segment-label,
#cuerpo-13 .marca-funnel-pct { font-size:12px; font-weight:700; pointer-events:none; }
#cuerpo-13 .marca-small-pct { font-size:11px; font-weight:700; fill:#3a3a3a; pointer-events:none; }
#cuerpo-13 .marca-potential-label { font-size:14px; font-weight:800; fill:#0b0c5e; }
#cuerpo-13 .marca-brand-label { font-size:13px; font-weight:700; fill:#0b0c5e; }

/* Página 15 · Dashboard de recordación soluble */
#cuerpo-15 .contenedor { min-width:0; }
#cuerpo-15 .grupo-wrap { grid-column:1 / -1; }
#cuerpo-15 .mini-grid { grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); }
#cuerpo-15 .contenedor.texto-pagina12 { grid-column:1 / -1; background:var(--fondo-suave); }
#cuerpo-15 .texto-pagina12-cuerpo { margin:0; color:var(--enfocuss-gray-dark); font-size:.96rem; line-height:1.65; }
#cuerpo-15 .tabla-estadisticas { table-layout:fixed; min-width:840px; }
#cuerpo-15 .tabla-estadisticas th, #cuerpo-15 .tabla-estadisticas td { min-width:120px; text-align:center; vertical-align:middle; }
#cuerpo-15 .tabla-estadisticas th { font-size:.78rem; line-height:1.25; }
#cuerpo-15 .tabla-estadisticas td { font-weight:700; color:var(--enfocuss-navy); }

/* Página 16 · Preferencias de compra soluble */
#cuerpo-16 .contenedor { min-width:0; }
#cuerpo-16 .contenedor.wide, #cuerpo-16 .contenedor.tabla-cruce-ancha { grid-column:1 / -1; }
#cuerpo-16 .tabla-cruce-ancha .dt th:not(.primera) { min-width:78px; word-break:normal; overflow-wrap:normal; hyphens:none; }
#cuerpo-16 .grupo-wrap { grid-column:1 / -1; }
#cuerpo-16 .grupo-grilla .contenedor { min-width:0; }
#cuerpo-16 .contenedor.texto-pagina12 { background:var(--fondo-suave); }
#cuerpo-16 .texto-pagina12-cuerpo { margin:0; color:var(--enfocuss-gray-dark); font-size:.96rem; line-height:1.65; overflow-wrap:anywhere; }

/* Páginas 17–20 · hábitos, históricos, potencial y separador */
#cuerpo-17 .contenedor, #cuerpo-18 .contenedor, #cuerpo-19 .contenedor { min-width:0; }
#cuerpo-17 .tarjeta-dato { min-height:150px; display:flex; align-items:center; justify-content:center; background:var(--fondo-suave); border-radius:8px; }
#cuerpo-17 .tarjeta-dato-valor { color:var(--enfocuss-navy); font-size:2.6rem; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; }
#cuerpo-13 .contenedor.wide, #cuerpo-19 .contenedor.wide { grid-column:1 / -1; }
#cuerpo-19 .marca-grafico-scroll { max-width:100%; overflow-x:auto; }
#cuerpo-19 .marca-grafico-svg { display:block; width:100%; min-width:1024px; height:auto; }
#cuerpo-19 .marca-axis-text { font-size:13px; fill:#9c9c9c; }
#cuerpo-19 .marca-legend-text { font-size:12px; fill:#3a3a3a; }
#cuerpo-19 .marca-segment-label, #cuerpo-19 .marca-funnel-pct { font-size:12px; font-weight:700; pointer-events:none; }
#cuerpo-19 .marca-small-pct { font-size:11px; font-weight:700; fill:#3a3a3a; pointer-events:none; }
#cuerpo-19 .marca-potential-label { font-size:14px; font-weight:800; fill:#0b0c5e; }
#cuerpo-19 .marca-brand-label { font-size:13px; font-weight:700; fill:#0b0c5e; }
#cuerpo-20 .sep-logo { right:22px; bottom:64px; }
.nota-otros { margin-right:auto; text-align:left; }
.notas.notas-historicas.solo-n { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.notas.notas-historicas.solo-n .nota-n { margin-left:auto; text-align:right; }
@media (max-width:760px) {
  #cuerpo-19 .marca-grafico-svg { min-width:1024px; }
  .notas.notas-historicas.solo-n .nota-otros, .notas.notas-historicas.solo-n .nota-n { flex:1 1 100%; margin-left:0; text-align:left; }
}

/* Página 21 · Key Driver */
#cuerpo-21 .keydriver-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:22px; align-items:start; }
#cuerpo-21 .keydriver-chart h3 { color:var(--enfocuss-navy); font-size:.95rem; margin-bottom:12px; }
#cuerpo-21 .keydriver-bar-row { display:grid; grid-template-columns:minmax(150px,1.3fr) minmax(80px,1fr) 54px; gap:10px; align-items:center; min-height:34px; margin:4px 0; }
#cuerpo-21 .keydriver-bar-label { font-size:.78rem; line-height:1.25; }
#cuerpo-21 .keydriver-track { height:15px; background:#eef1f7; border-radius:8px; overflow:hidden; }
#cuerpo-21 .keydriver-fill { display:block; height:100%; border-radius:8px; }
#cuerpo-21 .keydriver-index { color:var(--enfocuss-navy); font-size:.8rem; text-align:right; font-variant-numeric:tabular-nums; }
#cuerpo-21 .keydriver-table-scroll { min-width:0; overflow-x:auto; }
#cuerpo-21 .keydriver-table { font-size:.74rem; }
#cuerpo-21 .keydriver-table th, #cuerpo-21 .keydriver-table td { text-align:right; vertical-align:middle; }
#cuerpo-21 .keydriver-table th.primera, #cuerpo-21 .keydriver-table td.primera { text-align:left; min-width:145px; }
#cuerpo-21 .keydriver-base { grid-column:1/-1; color:var(--enfocuss-gray-medium); text-align:right; font-size:.8rem; }
#cuerpo-21 .keydriver-note { grid-column:1/-1; padding:12px 14px; background:var(--fondo-suave); border-left:4px solid var(--enfocuss-teal); border-radius:8px; font-size:.86rem; line-height:1.5; }
@media (max-width:980px) { #cuerpo-21 .keydriver-layout { grid-template-columns:minmax(0,1fr); } }

/* Páginas 22–27 · posicionamiento, promociones y consumo en el hogar */
#cuerpo-22 .contenedor, #cuerpo-23 .contenedor, #cuerpo-25 .contenedor, #cuerpo-27 .contenedor { min-width:0; }
#cuerpo-25 .grupo-wrap { grid-column:1 / -1; }
#cuerpo-25 .grupo-grilla .contenedor { min-width:0; }
#cuerpo-25 .ele-titulo { min-height:2.7em; line-height:1.3; overflow-wrap:anywhere; }
#cuerpo-25 .graf { min-width:0; }
#cuerpo-27 .tarjeta-dato { min-height:150px; display:flex; align-items:center; justify-content:center; background:var(--fondo-suave); border-radius:8px; }
#cuerpo-27 .tarjeta-dato-valor { color:var(--enfocuss-navy); font-size:2.6rem; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; }
#cuerpo-27 .ele-titulo { min-height:2.7em; line-height:1.3; overflow-wrap:anywhere; }
@media (max-width:620px) {
  #cuerpo-21 .keydriver-bar-row { grid-template-columns:minmax(110px,1.2fr) minmax(55px,1fr) 48px; gap:6px; }
  #cuerpo-21 .keydriver-bar-label { font-size:.72rem; }
  #cuerpo-21 .keydriver-table { min-width:560px; }
}

/* Páginas 29–30 · calificaciones y NPS */
#cuerpo-29 .contenedor, #cuerpo-30 .contenedor { min-width:0; }
#cuerpo-30 .grupo-wrap { grid-column:1 / -1; }
#cuerpo-30 .grupo-grilla .contenedor { min-width:0; }
.nps-visual { padding:12px 2px 0; }
.nps-score { color:var(--enfocuss-navy); font-size:1.35rem; font-weight:800; margin:0 0 16px; font-variant-numeric:tabular-nums; }
.nps-stackedbar { display:flex; width:100%; height:38px; overflow:hidden; border-radius:7px; background:#eef1f7; box-shadow:inset 0 0 0 1px var(--borde-suave); }
.nps-segment { flex-shrink:0; height:100%; transition:flex-basis .2s ease; }
.nps-legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.nps-legend-item { display:flex; align-items:center; gap:7px; color:var(--enfocuss-gray-dark); font-size:.78rem; line-height:1.3; }
.nps-swatch { width:11px; height:11px; flex:0 0 11px; border-radius:3px; }
@media (max-width:620px) {
  .nps-legend { grid-template-columns:minmax(0,1fr); gap:6px; }
}

/* Páginas 32–35 · consumo de medios y recordación publicitaria */
#cuerpo-32 .contenedor, #cuerpo-33 .contenedor, #cuerpo-35 .contenedor { min-width:0; }
#cuerpo-32 .ele-titulo, #cuerpo-33 .ele-titulo, #cuerpo-35 .ele-titulo {
  min-height:2.7em; line-height:1.3; overflow-wrap:anywhere;
}
#cuerpo-32 .grupo-wrap, #cuerpo-33 .grupo-wrap { grid-column:1 / -1; }
#cuerpo-32 .grupo-grilla, #cuerpo-33 .grupo-grilla { min-width:0; }
@media (max-width:620px) {
  #cuerpo-32 .grupo-grilla, #cuerpo-33 .grupo-grilla { grid-template-columns:minmax(0,1fr); }
}

/* Antesala editorial «¿Sabías que…?» · páginas 1 y 2 */
.pantalla-sabias { padding-top:0; overflow:hidden; background:#fff; }
.sabias-layout { width:100%; height:100%; min-height:0; display:grid; grid-template-columns:34% minmax(0,1fr); background:#fff; }
.sabias-visual { min-width:0; min-height:0; overflow:hidden; display:grid; place-items:center; background:#f3eee6; }
.sabias-visual img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100vh - var(--barra-pie) - 2px); object-fit:contain; object-position:center; }
.sabias-contenido { min-width:0; min-height:0; padding:17px 25px 10px; display:flex; flex-direction:column; }
.sabias-encabezado { flex:0 0 auto; padding-bottom:8px; border-bottom:1px solid #e6e6e6; }
.sabias-encabezado h1 { margin:0; color:var(--enfocuss-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.65rem,2.8vw,2.5rem); line-height:1; letter-spacing:-.4px; }
.sabias-grilla { flex:1 1 auto; min-height:0; margin:7px 0 5px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; overflow:hidden; }
.sabias-grilla-p1 { grid-template-rows:repeat(5,minmax(0,1fr)); }
.sabias-grilla-p2 { grid-template-rows:repeat(6,minmax(0,1fr)); }
.sabias-item { min-width:0; min-height:0; display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:5px; align-content:center; border-bottom:1px solid #e7e8eb; overflow:hidden; }
.sabias-item > span { padding-top:1px; color:var(--enfocuss-orange); font-size:.72rem; font-weight:800; }
.sabias-item p { margin:0; color:var(--enfocuss-gray-dark); font-size:clamp(.75rem,.94vw,.96rem); line-height:1.04; text-wrap:pretty; }
.sabias-item strong { color:var(--enfocuss-navy); font-weight:750; }
.sabias-cierre {
  min-width:0; display:flex; align-items:center; padding:7px 11px;
  color:var(--enfocuss-navy); background:#fff; border:1px solid var(--enfocuss-orange-light);
  border-left:3px solid var(--enfocuss-orange); border-radius:3px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(.92rem,1.12vw,1.05rem); line-height:1.18; font-style:italic;
  font-weight:650; text-wrap:balance;
}
.sabias-pie { flex:0 0 auto; min-height:45px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:4px; }
.sabias-pagina1 .sabias-pie { justify-content:flex-end; }
.sabias-pagina2 .sabias-pie { justify-content:flex-end; }
.sabias-pie > p { margin:0; color:var(--enfocuss-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(.94rem,1.28vw,1.18rem); line-height:1.12; font-style:italic; }
.sabias-logos { display:flex; flex:0 0 auto; align-items:center; gap:12px; padding-left:10px; }
.sabias-logos img { display:block; width:auto; max-height:40px; object-fit:contain; background:#fff; }
.sabias-logos .sabias-logo-enfocuss { max-width:100px; }
.sabias-logos .sabias-logo-plantosa { max-width:82px; }
.sabias-logos > span { width:1px; height:30px; background:#d9dce2; }
@media (max-width:760px) {
  .pantalla-sabias { overflow-y:auto; }
  .sabias-layout { height:auto; min-height:100%; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(210px,32vh) auto; }
  .sabias-visual { min-height:210px; }
  .sabias-visual img { max-height:32vh; }
  .sabias-contenido { height:auto; min-height:0; padding:16px 18px 13px; }
  .sabias-grilla { display:flex; flex-direction:column; overflow:visible; gap:0; }
  .sabias-item { flex:none; min-height:54px; padding:8px 0; overflow:visible; }
  .sabias-item p { font-size:.92rem; line-height:1.3; }
  .sabias-cierre { flex:none; min-height:68px; margin-top:10px; font-size:1rem; }
  .sabias-pie { align-items:flex-start; flex-wrap:wrap; }
  .sabias-logos { margin-left:auto; }
}