/* Guías de gráficos: una pregunta por página y todo en una pantalla (1890×950).
   Se apoya en catalogo.css + catalogo-piel.css; aquí solo se compacta y se simplifica. */

.guia .guia-cabeza { padding: clamp(84px, 9.6vh, 100px) 0 clamp(8px, 1.4vh, 16px); }
.guia .guia-migas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.guia .guia-migas .svc-volver { font-size: 14px; }
.guia .guia-cabeza h1 { font-size: clamp(30px, min(2.9vw, 5.4vh), 52px); line-height: 1.02; margin: 8px 0 4px; text-wrap: balance; }
.guia .guia-cabeza .bajada { font-size: clamp(14.5px, 1vw, 16.5px); color: var(--gris, #55555c); max-width: none; margin: 0; }

/* la sección deja su número, su pregunta y su párrafo largo: la cabecera ya los dice */
.guia section { padding: clamp(8px, 1.4vh, 16px) 0 clamp(10px, 1.6vh, 18px); border-bottom: 0; background: transparent !important; }
.guia section .wrap { display: block; }
.guia section .num, .guia section .pregunta, .guia section .forma { display: none; }
.guia .tarjetas { margin-top: 0; gap: 12px; }

/* tarjeta simple: gráfico, nombre, para qué sirve, cuándo no */
.guia .card { padding: 12px 14px 10px; display: flex; flex-direction: column; }
.guia .card h3 { font-size: 1.05rem; }
.guia .card .sub { font-size: .9rem; margin-top: 1px; }
.guia .card .usos, .guia .card .nota .tip { display: none; }
.guia .card.mas .usos { display: flex; } .guia .card.mas .nota .tip { display: block; }
.guia .card .nota { margin-top: 6px; padding-top: 6px; font-size: .9rem; }
.guia .card .nota p + p { margin-top: 4px; }
.guia .card .porque { font-size: .88rem; }
.guia .ver-mas { align-self: flex-start; margin-top: 6px; border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: 500 12px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-2, #8a8a92); }
.guia .ver-mas:hover { color: var(--tinta, #0a0a0a); }
.guia .ver-mas:focus-visible { outline: 2px solid var(--rosa, #FF2E6E); outline-offset: 3px; }

/* alturas de gráfico atadas a la pantalla */
.guia .viz { height: clamp(150px, 26vh, 250px) !important; }
.guia .viz.alto { height: clamp(170px, 30vh, 290px) !important; }
.guia .viz.bajo { height: clamp(110px, 17vh, 160px) !important; }

/* siguiente recurso */
.guia .guia-sigue { padding: clamp(6px, 1vh, 12px) 0 clamp(24px, 4vh, 40px); }
.guia .guia-sigue .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.guia .guia-indice { font-size: 14px; color: var(--gris, #55555c); text-decoration: underline; text-underline-offset: 3px; }
.guia .guia-siguiente { display: inline-flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 999px;
  background: var(--tinta, #0a0a0a); color: #fff; text-decoration: none; }
.guia .guia-siguiente small { font: 500 10.5px var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.guia .guia-siguiente b { font-weight: 600; font-size: 15px; }
.guia .guia-siguiente i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; }
.guia .guia-siguiente:focus-visible, .guia .guia-indice:focus-visible { outline: 2px solid var(--rosa, #FF2E6E); outline-offset: 3px; }

/* errores: un laboratorio a la vez */
.guia .pestanas-guia { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(10,10,10,.05);
  border: 1px solid var(--linea, rgba(10,10,10,.1)); margin: 0 0 6px max(32px, calc((100% - 1240px) / 2 + 32px)); }
.guia .pestanas-guia button { font: 500 13.5px var(--body, inherit); border: 0; background: transparent; color: var(--gris, #55555c);
  padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.guia .pestanas-guia button[aria-selected="true"] { background: var(--tinta, #0a0a0a); color: #fff; }
.guia .pestanas-guia button:focus-visible { outline: 2px solid var(--rosa, #FF2E6E); outline-offset: 3px; }
.guia section[hidden] { display: none !important; }
.guia #cvd .cvd-caja .viz { height: clamp(160px, 27vh, 250px) !important; }
.guia #ejes .viz { height: clamp(220px, 40vh, 380px) !important; }
.guia .seg { margin-top: 0 !important; margin-bottom: 10px; }

/* industrias: un rubro a la vez, el detalle y la leyenda fuera de la primera pantalla */
.guia #ind .leyenda-panel { display: none; }
.guia #ind .detalle { display: none; }
.guia #ind .mod .viz { height: clamp(120px, 19vh, 190px) !important; }
.guia #ind .mod.ancho .viz { height: clamp(120px, 19vh, 190px) !important; }

/* laboratorio */
.guia #lab { background: var(--oscuro, #0a0a0a) !important; color: #fff; }
.guia #lab .lienzo .viz { height: clamp(220px, 40vh, 360px) !important; }

/* índice de guías */
.guia-indice-pag .guias-lista { padding: clamp(10px, 2vh, 20px) 0 clamp(32px, 6vh, 64px); }
.guias-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.guia-tarjeta { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 20px 46px; border-radius: 18px;
  background: var(--blanco, #fff); border: 1px solid var(--linea, rgba(10,10,10,.1)); color: var(--tinta, #0a0a0a); text-decoration: none;
  transition: box-shadow .5s var(--curva, ease), transform .5s var(--curva, ease); }
.guia-tarjeta:hover { box-shadow: var(--sombra, 0 20px 40px -24px rgba(0,0,0,.3)); transform: translateY(-2px); }
.guia-tarjeta:focus-visible { outline: 2px solid var(--rosa, #FF2E6E); outline-offset: 3px; }
.guia-tarjeta__n { font: 500 11px var(--mono, monospace); letter-spacing: .14em; color: var(--rosa-texto, #D4144F); }
.guia-tarjeta b { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.25vw, 21px); letter-spacing: -.02em; line-height: 1.1; }
.guia-tarjeta__d { font-size: 13.5px; color: var(--gris, #55555c); line-height: 1.4; }
.guia-tarjeta i { position: absolute; right: 16px; bottom: 14px; font-style: normal; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 13px; transition: transform .5s var(--curva, ease); }
.guia-tarjeta:hover i { transform: translateX(3px); }

@media (max-width: 1060px) {
  .guias-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guia .pestanas-guia { margin-left: 32px; }
}
@media (max-width: 640px) {
  .guias-rejilla { grid-template-columns: 1fr; }
  .guia .pestanas-guia { margin-left: 16px; display: flex; flex-wrap: wrap; border-radius: 18px; }
  .guia .guia-siguiente b { font-size: 14px; }
}

/* título a la izquierda, selector de pregunta a la derecha */
.guia .guia-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.guia .guia-fila > div { min-width: 0; flex: 1 1 520px; }
.guia .guia-selector { display: grid; gap: 4px; flex: 0 1 380px; }
.guia .guia-selector span { font: 500 10.5px var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--gris, #55555c); }
.guia .guia-selector select { font: 600 16px var(--display, inherit); letter-spacing: -.01em; padding: 11px 40px 11px 16px; border-radius: 14px;
  border: 1px solid var(--linea, rgba(10,10,10,.14)); background: var(--blanco, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FF2E6E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  -webkit-appearance: none; appearance: none; color: var(--tinta, #0a0a0a); cursor: pointer; width: 100%; }
.guia .guia-selector select:focus-visible { outline: 2px solid var(--rosa, #FF2E6E); outline-offset: 3px; }
@media (max-width: 640px) { .guia .guia-selector { flex-basis: 100%; } }
.guia .guia-cabeza h1 { max-width: none; }
.guia .guia-cabeza h1 em { white-space: nowrap; }

/* industrias en una pantalla: el rubro arriba a la derecha del tablero, los cuatro módulos en una fila */
@media (min-width: 1061px) {
  .guia #ind .wrap { position: relative; }
  .guia #ind .industrias { position: absolute; top: 0; right: 32px; margin: 0; z-index: 2; }
  .guia #ind .industrias .selector { flex-direction: row; display: flex; align-items: center; gap: 10px; max-width: none; }
  .guia #ind .industrias .selector select { min-width: 280px; padding-top: 8px; padding-bottom: 8px; }
  .guia #ind .tablero { margin-top: 0; }
  .guia #ind .tablero-top { padding: 10px 18px; padding-right: 420px; }
  .guia #ind .tablero-top h4 { font-size: 1.1rem; }
  .guia #ind .filtros { display: none; }
  .guia #ind .tablero-cuerpo { padding: 10px 14px 12px; gap: 8px; }
  .guia #ind .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .guia #ind .mod, .guia #ind .mod.ancho { grid-column: span 1; padding: 9px 12px; }
  .guia #ind .mod .sub { font-size: .82rem; }
  .guia #ind .mod .viz, .guia #ind .mod.ancho .viz { height: clamp(140px, 22vh, 210px) !important; }
  .guia #ind .lee { font-size: .82rem; padding: 6px 9px; line-height: 1.4; }
}
@media (min-width: 1061px) {
  .guia #ind .banda { padding: 10px 18px; }
  .guia #ind .banda .grande { font-size: 1.9rem; }
  .guia #ind .banda .apoyo div { font-size: 1rem; }
  .guia #ind .k { padding: 8px 12px; }
}

/* laboratorio «de gráfico a producto»: mandos en una columna a la izquierda, el gráfico a la derecha */
.guia #lab { padding: 18px 0 20px; }
.guia #lab .lab-grid { margin-top: 0; }
@media (min-width: 1061px) {
  .guia #lab .lab-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
  .guia #lab .mandos { grid-template-columns: 1fr; gap: 6px; }
  .guia #lab .mando { padding: 9px 12px; }
  .guia #lab .mando b { font-size: .92rem; } .guia #lab .mando i { font-size: .82rem; }
  .guia #lab .lienzo .viz { height: clamp(260px, 44vh, 420px) !important; }
}

/* armador: piezas compactas y mini-gráficos bajos para que el panel y lo que se rompe quepan juntos */
.guia #armar .armar { margin-top: 0; gap: 16px; grid-template-columns: 260px 1fr; }
.guia #armar .piezas > b { margin-bottom: 6px; font-size: .72rem; }
.guia #armar .piezas #piezas { gap: 4px; }
.guia #armar .pieza { padding: 6px 10px; border-radius: 9px; }
.guia #armar .pieza span { font-size: .86rem; } .guia #armar .pieza i { font-size: .76rem; }
.guia #armar .pieza .mas { width: 18px; height: 18px; font-size: .8rem; }
.guia #armar .preset { margin-top: 8px; padding-top: 8px; gap: 4px; }
.guia #armar .preset button { padding: 6px 10px; font-size: .82rem; }
.guia #armar .arma-top { padding: 8px 14px; }
.guia #armar .lienzo-arma { padding: 10px; gap: 8px; min-height: 160px; }
.guia #armar .blq { padding: 8px 10px; }
.guia #armar .blq .viz { height: clamp(80px, 11vh, 112px) !important; }
.guia #armar .blq.banda-b .cifra { font-size: 1.7rem; margin-top: 4px; }
.guia #armar .blq.kpis-b { padding-top: 22px; }
.guia #armar .blq.kpis-b .kk { padding: 7px 10px; }
@media (max-width: 1060px) { .guia #armar .armar { grid-template-columns: 1fr; } }
.guia #armar .piezas #diagnostico { border-top: 1px solid var(--linea-suave, rgba(10,10,10,.08)); margin-top: 10px; padding: 10px 0 0; gap: 6px; font-size: .84rem; line-height: 1.4; }
.guia #armar .blq.kpis-b .kk { padding: 6px 10px; }
.guia #armar .blq .esq i { height: 8px; }
@media (min-width: 1061px) {
  .guia #armar .armar { grid-template-columns: 380px 1fr; }
  .guia #armar .piezas #piezas { grid-template-columns: 1fr 1fr; }
  .guia #armar .pieza i { display: none; }
  .guia #armar .preset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guia #armar .preset button { padding: 6px 6px; font-size: .76rem; line-height: 1.2; }
  .guia #armar .piezas #diagnostico .dg { font-size: .84rem; gap: 8px; }
}

/* cinco formas en una fila; la jerarquía con su explicación al lado */
@media (min-width: 1101px) { .guia .tarjetas.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
@media (min-width: 1061px) {
  .guia #jer .wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .guia #jer .tarjetas { grid-template-columns: 1fr !important; margin-top: 0 !important; gap: 10px; }
  .guia #q14b .descartadas { margin-top: 10px; padding: 10px 16px; }
  .guia #q14b .descartadas p { font-size: .86rem; line-height: 1.35; }
}

/* laptops chicos (1366×768, 1280×720): todo más contenido */
@media (min-width: 1001px) and (max-height: 900px) {
  .guia .guia-cabeza { padding: 76px 0 6px; }
  .guia .guia-cabeza h1 { font-size: clamp(24px, 4.4vh, 34px); margin: 4px 0 2px; }
  .guia .guia-cabeza .bajada { font-size: 13px; }
  .guia .guia-migas .svc-volver { font-size: 13px; }
  .guia .guia-selector span { font-size: 9.5px; }
  .guia .guia-selector select { font-size: 14px; padding: 7px 36px 7px 12px; border-radius: 11px; }
  .guia section { padding: 6px 0 8px; }
  .guia .tarjetas { gap: 8px; }
  .guia .card { padding: 8px 10px 6px; border-radius: 12px; }
  .guia .card h3 { font-size: .92rem; } .guia .card .sub { font-size: .78rem; }
  .guia .card .nota { font-size: .78rem; margin-top: 4px; padding-top: 4px; }
  .guia .ver-mas { font-size: 10.5px; margin-top: 3px; }
  .guia .tog { transform: scale(.88); transform-origin: left center; }
  .guia .viz { height: clamp(110px, 24vh, 200px) !important; }
  .guia .viz.alto { height: clamp(120px, 27vh, 230px) !important; }
  .guia .viz.bajo { height: clamp(90px, 15vh, 130px) !important; }
  .guia .guia-sigue { padding: 4px 0 18px; }
  .guia .guia-siguiente { padding: 6px 8px 6px 14px; } .guia .guia-siguiente b { font-size: 13px; }
  .guia .guia-siguiente i { width: 24px; height: 24px; }
  .guia #q14b .descartadas p { font-size: .76rem; }
  /* industrias */
  .guia #ind .tablero-top { padding-top: 6px; padding-bottom: 6px; }
  .guia #ind .tablero-top h4 { font-size: .98rem; } .guia #ind .tablero-top .rubro { font-size: .78rem; }
  .guia #ind .industrias .selector select { padding-top: 5px; padding-bottom: 5px; font-size: .88rem; }
  .guia #ind .banda { padding: 6px 14px; } .guia #ind .banda .grande { font-size: 1.4rem; }
  .guia #ind .banda .grande small, .guia #ind .banda .apoyo span { font-size: .68rem; }
  .guia #ind .banda .apoyo div { font-size: .88rem; }
  .guia #ind .k { padding: 5px 10px; } .guia #ind .k b { font-size: 1rem; } .guia #ind .k span { font-size: .72rem; }
  .guia #ind .mod { padding: 6px 9px; } .guia #ind .mod h5 { font-size: .82rem; } .guia #ind .mod .sub { font-size: .72rem; }
  .guia #ind .mod .viz, .guia #ind .mod.ancho .viz { height: clamp(100px, 18vh, 150px) !important; }
  .guia #ind .lee { font-size: .72rem; padding: 4px 7px; margin-top: 4px; }
  /* laboratorio */
  .guia #lab { padding: 8px 0 10px; }
  .guia #lab .mandos { grid-template-columns: 1fr 1fr; gap: 5px; }
  .guia #lab .mando { padding: 6px 8px; gap: 8px; } .guia #lab .mando i { display: none; } .guia #lab .mando b { font-size: .8rem; }
  .guia #lab .lienzo { padding: 10px 14px; } .guia #lab .lienzo .viz { height: clamp(180px, 40vh, 320px) !important; }
  .guia #lab .marcador { font-size: .78rem; }
  .guia .seg button { padding: 5px 10px; font-size: .8rem; }
  .guia .veredicto { padding: 8px 12px; font-size: .82rem; margin-top: 8px; }
  .guia #cvd .cvd-caja { padding: 10px 12px; } .guia #cvd .cvd-caja .viz { height: clamp(130px, 26vh, 210px) !important; }
  .guia #ejes .viz { height: clamp(180px, 38vh, 300px) !important; }
  .guia #jer .panel-falso { padding: 10px; } .guia #jer .banda { padding: 10px 16px; } .guia #jer .banda .grande { font-size: 1.6rem; }
  .guia #jer .card .nota p { font-size: .76rem; line-height: 1.35; }
  .guia #jer .demo-barra { margin-bottom: 6px; }
  /* armador */
  .guia #armar .armar { grid-template-columns: 330px 1fr; gap: 10px; }
  .guia #armar .pieza { padding: 4px 8px; } .guia #armar .pieza span { font-size: .78rem; }
  .guia #armar .preset button { font-size: .7rem; padding: 4px 4px; }
  .guia #armar .piezas #diagnostico .dg { font-size: .74rem; line-height: 1.3; }
  .guia #armar .arma-top { padding: 4px 10px; font-size: .78rem; }
  .guia #armar .lienzo-arma { padding: 6px; gap: 6px; }
  .guia #armar .blq { padding: 5px 8px; } .guia #armar .blq h6 { font-size: .76rem; }
  .guia #armar .blq .viz { height: clamp(58px, 9.5vh, 90px) !important; }
  .guia #armar .blq.banda-b .cifra { font-size: 1.2rem; }
  .guia #armar .blq.kpis-b { padding-top: 18px; gap: 6px; } .guia #armar .blq.kpis-b .kk { padding: 4px 8px; font-size: .8rem; }
}
@media (min-width: 1061px) {
  .guia #jer .wrap > .demo { grid-column: 1; }
  .guia #jer .wrap > .tarjetas { grid-column: 2; }
}

/* la pregunta manda: el selector va en su propia fila, grande, y el título baja de rango */
.guia .guia-fila { flex-direction: column; align-items: stretch; gap: 12px; }
.guia .guia-fila > div { flex: none; }
.guia .guia-cabeza h1 { font-size: clamp(20px, min(1.7vw, 3.2vh), 30px); }
.guia .guia-selector { flex: none; width: 100%; max-width: 820px; gap: 6px; }
.guia .guia-selector span { font-size: 11.5px; color: var(--rosa-texto, #D4144F); }
.guia .guia-selector select { font: 600 clamp(24px, min(2.5vw, 4.6vh), 42px)/1.15 var(--display, inherit); letter-spacing: -.03em;
  padding: .32em 2.2em .38em .6em; border: 2px solid var(--tinta, #0a0a0a); border-radius: 18px;
  background-size: .5em auto; background-position: right .7em center; box-shadow: 0 14px 30px -22px rgba(10,10,10,.45); }
.guia .guia-selector select:hover { border-color: var(--rosa, #FF2E6E); }
@media (max-height: 900px) {
  .guia .guia-cabeza .bajada { display: none; }
  .guia .guia-fila { gap: 6px; }
  .guia .guia-selector select { font-size: clamp(20px, 3.6vh, 30px); padding: .25em 2.2em .3em .55em; }
}

/* ═══ panel profesional (.pp): jerarquía del laboratorio y panel bien armado del armador ═══
   Tres pesos: la cifra que manda en la tarjeta grande, los apoyos en tarjetas chicas, el detalle plegado. */
.cat .pp { --pp-sube: #14864a; --pp-baja: #c43a3a; --pp-borde: rgba(11,11,11,.07);
  background: #f4f4f6; border: 1px solid var(--pp-borde); border-radius: 18px; padding: clamp(10px, 1.6vh, 16px); }
.cat .pp-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 2px clamp(8px, 1.2vh, 12px); }
.cat .pp-cab b { font-family: var(--display); font-weight: 600; font-size: clamp(15px, min(1.1vw, 2.2vh), 19px); letter-spacing: -.02em; }
.cat .pp-cab span { display: block; font-size: 12px; color: var(--tinta-3); margin-top: 1px; }
.cat .pp-filtro { flex: none; font-size: 12px !important; color: var(--tinta-2) !important; background: #fff; border: 1px solid var(--pp-borde);
  border-radius: 999px; padding: 5px 12px; }
.cat .pp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(6px, 1vh, 10px); }
.cat .pp-card { position: relative; background: #fff; border: 1px solid var(--pp-borde); border-radius: 14px;
  padding: clamp(9px, 1.4vh, 14px) clamp(11px, 1vw, 16px); box-shadow: 0 1px 2px rgba(11,11,11,.04), 0 10px 24px -18px rgba(11,11,11,.28); min-width: 0; }
.cat .pp-rot { display: block; font: 500 10.5px var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.cat .pp-delta { display: inline-block; font-size: 12px; font-weight: 600; margin-top: 4px; }
.cat .pp-delta.sube { color: var(--pp-sube); } .cat .pp-delta.baja { color: var(--pp-baja); }
.cat .pp-hero { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-rows: auto auto 1fr; column-gap: 12px; }
.cat .pp-hero .pp-rot, .cat .pp-hero .pp-cifra, .cat .pp-hero .pp-delta { grid-column: 1; }
.cat .pp-cifra { font-family: var(--display); font-weight: 600; letter-spacing: -.045em; line-height: 1;
  font-size: clamp(30px, min(3vw, 6vh), 58px); margin-top: clamp(4px, .8vh, 8px); color: var(--tinta); }
.cat .pp-spark { grid-column: 2; grid-row: 1 / 4; width: 100%; height: 100%; min-height: 40px; align-self: end; }
.cat .pp-spark .a { fill: rgba(42,120,214,.12); } .cat .pp-spark .l { fill: none; stroke: var(--s1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cat .pp-k { grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.cat .pp-k b { display: block; font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  font-size: clamp(18px, min(1.5vw, 3.2vh), 28px); margin-top: clamp(4px, .8vh, 8px); }
.cat .pp-card h6 { font-family: var(--display); font-weight: 600; font-size: clamp(13px, min(.95vw, 2vh), 16px); letter-spacing: -.015em; margin: 0; }
.cat .pp-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }
.cat .pp-sub i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--s1); }
.cat .pp-sub i.c2 { background: transparent; border-top: 2px dashed #a3a3ab; height: 0; margin-left: 6px; }
.cat .pp-graf { grid-column: span 8; display: flex; flex-direction: column; }
.cat .pp-area { width: 100%; height: clamp(64px, 15vh, 150px); margin-top: clamp(4px, .8vh, 8px); }
.cat .pp-area .g line { stroke: rgba(11,11,11,.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cat .pp-area .a { fill: rgba(42,120,214,.12); }
.cat .pp-area .l { fill: none; stroke: var(--s1); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cat .pp-area .ant { fill: none; stroke: #a3a3ab; stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.cat .pp-ejes { display: flex; justify-content: space-between; font: 500 10px var(--mono, monospace); color: var(--tinta-3); margin-top: 3px; }
.cat .pp-rank { grid-column: span 4; }
.cat .pp-r { display: grid; grid-template-columns: 64px minmax(0, 1fr) 38px; align-items: center; gap: 8px; font-size: 12px; margin-top: clamp(4px, .9vh, 9px); }
.cat .pp-r span { color: var(--tinta-2); } .cat .pp-r em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cat .pp-r i { display: block; height: clamp(7px, 1.1vh, 10px); border-radius: 4px; background: rgba(42,120,214,.1); }
.cat .pp-r i b { display: block; height: 100%; border-radius: 4px; background: var(--s1); }
.cat .pp-r:first-of-type i b { background: var(--tinta); }
.cat .pp-det { grid-column: span 12; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: clamp(6px, 1vh, 10px); padding-bottom: clamp(6px, 1vh, 10px); box-shadow: none; background: rgba(255,255,255,.6); }
.cat .pp-det span { font-size: 12.5px; color: var(--tinta-2); } .cat .pp-det em { font-style: normal; font-size: 11.5px; color: var(--tinta-3); }

/* «todo pesa lo mismo»: ocho tarjetas iguales, mismo tamaño, mismo peso, sin orden */
.cat .pp.plano .pp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.cat .pp.plano .pp-card { grid-column: span 1; box-shadow: none; border-color: rgba(11,11,11,.12); border-radius: 8px; display: block; }
.cat .pp.plano .pp-hero { grid-template-columns: 1fr; }
.cat .pp.plano .pp-cifra, .cat .pp.plano .pp-k b { font-family: var(--body, inherit); font-weight: 500; font-size: 17px; letter-spacing: 0; margin-top: 4px; }
.cat .pp.plano .pp-rot, .cat .pp.plano .pp-card h6 { font: 500 12px var(--body, inherit); letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
.cat .pp.plano .pp-delta { font-weight: 500; color: var(--tinta-2); }
.cat .pp.plano .pp-spark { display: none; }
.cat .pp.plano .pp-area { height: clamp(34px, 6vh, 56px); }
.cat .pp.plano .pp-ejes, .cat .pp.plano .pp-sub { display: none; }
.cat .pp.plano .pp-r { margin-top: 2px; grid-template-columns: 52px minmax(0, 1fr) 30px; font-size: 10.5px; }
.cat .pp.plano .pp-r:nth-of-type(n+4) { display: none; }
.cat .pp.plano .pp-r:first-of-type i b { background: var(--s1); }
.cat .pp.plano .pp-det { order: -1; display: block; background: #fff; }
.cat .pp.plano .pp-det em { display: block; }
.cat .pp.plano .pp-cab b { font-weight: 500; font-size: 15px; }

/* laboratorio de jerarquía: el panel ocupa lo suyo y la explicación va al lado */
.guia #jer .demo { padding: 0; border: 0; background: transparent; box-shadow: none; }
.guia #jer .demo-barra { margin-bottom: clamp(6px, 1vh, 10px); }

@media (max-width: 760px) {
  .cat .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat .pp-hero, .cat .pp-graf, .cat .pp-rank, .cat .pp-det { grid-column: span 2; }
  .cat .pp-k { grid-column: span 1; } .cat .pp-k:last-of-type { grid-column: span 2; }
  .cat .pp.plano .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ajustes: la tendencia va al lado de la variación, sin pisar la cifra; los apoyos en una línea */
.cat .pp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; }
.cat .pp-hero .pp-rot, .cat .pp-hero .pp-cifra { grid-column: 1 / -1; }
.cat .pp-hero .pp-delta { grid-column: 1; grid-row: 3; align-self: end; }
.cat .pp-spark { grid-column: 2; grid-row: 3; height: clamp(26px, 4.4vh, 44px); min-height: 0; align-self: end; }
.cat .pp-k b { white-space: nowrap; font-size: clamp(17px, min(1.35vw, 3vh), 26px); }
.cat .pp-area { height: clamp(52px, 11.5vh, 118px); }
/* el selector se ajusta al largo de la pregunta (si el navegador lo permite) */
.guia .guia-selector select { max-width: 100%; }
@supports (field-sizing: content) { .guia .guia-selector { width: auto; max-width: 100%; } .guia .guia-selector select { field-sizing: content; width: auto; min-width: min(100%, 420px); } }
.cat .pp .pp-solo-plano { display: none; }
.cat .pp.plano .pp-solo-plano { display: block; }
.guia .guia-selector { align-self: flex-start; }

/* armador: las piezas son tarjetas de panel profesional; los mandos aparecen al pasar o enfocar */
.guia #armar .lienzo-arma { background: #f4f4f6; gap: clamp(6px, 1vh, 10px); padding: clamp(8px, 1.2vh, 12px); }
.guia #armar .blq.pp-card { background: #fff; border: 1px solid rgba(11,11,11,.07); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11,11,11,.04), 0 10px 24px -18px rgba(11,11,11,.28); padding: clamp(8px, 1.3vh, 13px) clamp(10px, .9vw, 14px); }
.guia #armar .blq h6 { font-family: var(--display); font-weight: 600; font-size: clamp(12.5px, min(.9vw, 1.9vh), 15px); letter-spacing: -.015em; padding-right: 0; }
.guia #armar .blq .mandos-b { opacity: 0; transition: opacity .2s; top: 6px; right: 6px; z-index: 2; }
.guia #armar .blq:hover .mandos-b, .guia #armar .blq:focus-within .mandos-b { opacity: 1; }
@media (hover: none) { .guia #armar .blq .mandos-b { opacity: 1; } }
.guia #armar .blq.pp-hero { display: grid; }
.guia #armar .blq.pp-hero .pp-cifra { font-size: clamp(26px, min(2.4vw, 5vh), 46px); }
.guia #armar .blq.kpis-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1vh, 10px);
  background: transparent; border: 0; padding: 0; box-shadow: none; }
.guia #armar .blq.kpis-b .pp-card { padding: clamp(8px, 1.3vh, 13px) clamp(10px, .9vw, 14px); }
.guia #armar .blq.kpis-b .pp-k b { font-size: clamp(16px, min(1.25vw, 2.8vh), 24px); }
.guia #armar .blq .viz { height: clamp(78px, 15vh, 168px) !important; }
.cat .pp-tabla { width: 100%; border-collapse: collapse; margin-top: clamp(4px, .7vh, 8px); font-size: clamp(11px, min(.75vw, 1.6vh), 13px); font-variant-numeric: tabular-nums; }
.cat .pp-tabla th { font: 500 10px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); text-align: right; padding: 0 8px 4px; border-bottom: 1px solid rgba(11,11,11,.08); }
.cat .pp-tabla td { text-align: right; padding: clamp(2px, .5vh, 5px) 8px; border-bottom: 1px solid rgba(11,11,11,.05); color: var(--tinta-2); }
.cat .pp-tabla th:first-child, .cat .pp-tabla td:first-child { text-align: left; padding-left: 0; color: var(--tinta); }
.cat .pp-tabla tr:last-child td { border-bottom: 0; }
.cat .pp-tabla td.sube { color: #14864a; font-weight: 600; } .cat .pp-tabla td.baja { color: #c43a3a; font-weight: 600; }
/* el mal armado se nota a propósito: las piezas no se alinean y la tabla queda arriba */
@media (max-width: 760px) {
  .guia #armar .lienzo-arma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guia #armar .lienzo-arma > .blq { grid-column: span 2 !important; }
}
.guia #armar .blq.kpis-b .pp-k { grid-column: auto; }
/* el botón flotante «¿Conversamos?» no tapa «Siguiente recurso» */
@media (min-width: 761px) and (max-width: 1660px) { .guia .guia-sigue .wrap { padding-right: 236px; } }
@media (max-width: 760px) { .guia .guia-sigue { padding-bottom: 96px; } }

/* encaje fino: industrias y «de gráfico a producto» en una pantalla también en monitores grandes */
@media (min-width: 1061px) {
  .guia #ind .mod .viz, .guia #ind .mod.ancho .viz { height: clamp(100px, 16.5vh, 165px) !important; }
  .guia #ind .mod { padding-top: 8px; padding-bottom: 8px; }
  .guia #ind .lee { padding: 5px 8px; margin-top: 4px; }
  .guia #lab .lienzo .viz { height: clamp(200px, 35vh, 340px) !important; }
  .guia #lab .mando { padding-top: 7px; padding-bottom: 7px; }
  .guia #lab .mandos { gap: 5px; }
}
@media (min-width: 1001px) and (max-height: 900px) {
  .guia #ind .mod .viz, .guia #ind .mod.ancho .viz { height: clamp(88px, 15.5vh, 140px) !important; }
  .cat .pp-area { height: clamp(40px, 9vh, 90px); }
  .cat .pp { padding: 8px 10px; }
  .cat .pp-cab { margin-bottom: 6px; }
}
@media (min-width: 1061px) { .guia #ind .mod .viz, .guia #ind .mod.ancho .viz { height: clamp(88px, 15.5vh, 155px) !important; } }
@media (min-width: 1001px) and (max-height: 900px) { .guia #ind .mod .viz, .guia #ind .mod.ancho .viz { height: clamp(84px, 15vh, 136px) !important; } }
.guia #jer { padding-top: clamp(4px, .8vh, 10px); }
@media (max-height: 900px) { .cat .pp-r { margin-top: 3px; } .cat .pp-k b, .cat .pp-cifra { margin-top: 2px; } }
@media (max-width: 760px) {
  .guia .guia-selector select { font-size: 17px; padding: .5em 2.2em .55em .7em; border-radius: 14px; }
  .cat .pp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cat .pp-hero, .cat .pp-graf, .cat .pp-rank, .cat .pp-det { grid-column: span 6; }
  .cat .pp-k, .cat .pp-k:last-of-type { grid-column: span 2; padding-left: 9px; padding-right: 9px; }
  .cat .pp-k b { font-size: 16px; }
  .cat .pp.plano .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat .pp.plano .pp-card { grid-column: span 1; }
  .guia #armar .blq.tabla-b { overflow-x: auto; }
  .guia #armar .pp-tabla { min-width: 440px; }
}

/* menú propio de la pregunta: el botón grande manda, la lista es compacta y numerada */
.guia .guia-selector { position: relative; }
.guia .menu-btn { display: inline-flex; align-items: center; gap: .55em; max-width: 100%; cursor: pointer; text-align: left;
  font: 600 clamp(24px, min(2.5vw, 4.6vh), 42px)/1.15 var(--display, inherit); letter-spacing: -.03em; color: var(--tinta, #0a0a0a);
  background: var(--blanco, #fff); padding: .32em .6em .38em; border: 2px solid var(--tinta, #0a0a0a); border-radius: 18px;
  box-shadow: 0 14px 30px -22px rgba(10,10,10,.45); transition: border-color .25s; }
.guia .menu-btn:hover { border-color: var(--rosa, #FF2E6E); }
.guia .menu-btn:focus-visible { outline: 2px solid var(--rosa, #FF2E6E); outline-offset: 3px; }
.guia .menu-btn i { flex: none; width: .42em; height: .42em; margin-top: -.18em; border-right: .09em solid var(--rosa-texto, #D4144F);
  border-bottom: .09em solid var(--rosa-texto, #D4144F); transform: rotate(45deg); transition: transform .25s; }
.guia .menu-btn[aria-expanded="true"] i { transform: rotate(225deg); margin-top: .2em; }
.guia .menu-lista { position: absolute; z-index: 1000; top: calc(100% + 8px); left: 0; margin: 0; list-style: none;
  width: max(100%, 380px); max-width: min(760px, calc(100vw - 32px)); overflow-y: auto; padding: 6px;
  background: var(--blanco, #fff); border: 1px solid var(--linea, rgba(10,10,10,.1)); border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(10,10,10,.35); display: grid; gap: 2px; }
.guia .menu-lista.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(760px, calc(100vw - 32px)); }
.guia .menu-lista:focus { outline: none; }
.guia .menu-lista li { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font: 500 15px/1.3 var(--body, inherit); color: var(--tinta, #0a0a0a); }
.guia .menu-lista li b { flex: none; font: 500 11px var(--mono, monospace); letter-spacing: .08em; color: var(--gris, #55555c); }
.guia .menu-lista li.activo { background: var(--fondo, #f4f4f6); }
.guia .menu-lista li[aria-selected="true"] { font-weight: 600; }
.guia .menu-lista li[aria-selected="true"] b { color: var(--rosa-texto, #D4144F); }
@media (max-height: 900px) { .guia .menu-btn { font-size: clamp(20px, 3.6vh, 30px); padding: .25em .55em .3em; } .guia .menu-lista li { padding: 7px 11px; font-size: 14px; } }
@media (max-width: 760px) { .guia .menu-btn { font-size: 17px; padding: .5em .7em .55em; border-radius: 14px; } .guia .menu-lista.dos { grid-template-columns: 1fr; } }
.guia .guia-selector .menu-btn span, .guia .guia-selector .menu-lista li span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; min-width: 0; }
.guia .menu-lista[hidden] { display: none; }
/* «ver el error» va bajo el aviso, nunca encima del subtítulo */
.guia .card:has(> .tog) { position: relative; }
.guia .card > .tog { position: absolute; top: auto; bottom: 12px; right: 14px; margin: 0; }
/* cada forma dice cuándo usarla y cuándo no, con palabras simples */
.cat .nota .cuando b { font-weight: 700; }
.cat .nota .cuando.si b { color: #0a7a0a; }
.cat .nota .cuando.nunca b { color: var(--critico, #d03b3b); }
.cat .nota .no::before { content: "ERROR"; }
/* con «cuándo sí / cuándo no» la nota crece una línea: el gráfico cede un poco de alto para que todo quepa */
.guia-catalogo section[data-slug] .tarjetas .viz:not(.alto):not(.bajo) { height: clamp(140px, 21vh, 215px) !important; }
.guia .card .nota { font-size: .86rem; line-height: 1.38; }
.guia .card .nota p + p { margin-top: 3px; }
@media (max-height: 900px) {
  .guia-catalogo section[data-slug] .tarjetas .viz:not(.alto):not(.bajo) { height: clamp(105px, 20vh, 180px) !important; }
  .guia .card .nota { font-size: .78rem; }
}
.guia-catalogo section[data-slug] .tarjetas .viz.alto { height: clamp(150px, 24vh, 250px) !important; }
@media (max-height: 900px) { .guia-catalogo section[data-slug] .tarjetas .viz.alto { height: clamp(115px, 23vh, 200px) !important; } }

/* las que no entraron: se marcan en la esquina para que nadie las tome como recomendadas */
.cat .card.descartada { position: relative; }
.cat .card.descartada h3::after { content: "No entró"; margin-left: 8px; vertical-align: 2px; font: 700 .62rem var(--mono, monospace);
  letter-spacing: .1em; text-transform: uppercase; color: var(--critico, #d03b3b); border: 1px solid rgba(208,59,59,.35);
  border-radius: 20px; padding: 1px 7px; }