/* ===========================================================================
   PÚBLICO · GRÁFICAS 3D · EFECTOS — Central Ensigna               (13/11/2026)
   ===========================================================================
   Se carga después de tema.css. Tres partes:
     1. EFECTOS: botones con volumen, íconos que brillan, neón en las gráficas
        que ya había (clases que les pone graficos.js: .gf-linea, .gf-capa-barras).
     2. GRÁFICAS 3D (.g3-*): las que dibuja js/graficos3d.js.
     3. PANTALLA «Público» (.pu-*), sus tarjetas del Inicio (.pi-f3-*) y la
        puerta desde Estadísticas (.pe-a-publico).
   Tinta sobre color: #160A2E (pasa contraste sobre rosa, violeta, naranja, oro).
   =========================================================================== */
:root { --tinta: #160A2E; --g3-celeste: #1D8FC4; --g3-verde: #0E9A63; --g3-lila: #7440DC; --g3-rosado: #D4458F; }
:root[data-theme="dark"] { --g3-celeste: #5FD4FF; --g3-verde: #4FE3A3; --g3-lila: #B592FF; --g3-rosado: #FF8FC7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --g3-celeste: #5FD4FF; --g3-verde: #4FE3A3; --g3-lila: #B592FF; --g3-rosado: #FF8FC7; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1 · EFECTOS
   ═══════════════════════════════════════════════════════════════════════════ */

/* botones: se sienten de goma — filo de luz arriba, sombra abajo, se hunden al tocarlos */
.btn { transition: transform .14s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease; }
.btn:not(.btn-primario):not(.btn-fantasma):not(.btn-google) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 8px 16px -12px rgba(0, 0, 0, .7);
}
.btn-primario {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(96, 18, 120, .3), 0 14px 30px -12px rgba(var(--neon), .9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primario:not(.btn-chico)::after {            /* el destello que cruza */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .6) 48%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; transition: background-position .8s ease;
}
@media (hover: hover) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn:not(.btn-primario):not(.btn-fantasma):hover:not(:disabled) { border-color: rgba(var(--neon), .6); }
  .btn-primario:not(.btn-chico):hover::after { background-position: -40% 0; }
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn-primario:active:not(:disabled) { box-shadow: inset 0 3px 8px rgba(70, 10, 100, .45), 0 4px 10px -8px rgba(var(--neon), .8); }

/* el [+] de la barra: el aro late */
.tab-publicar span { position: relative; }
.tab-publicar span::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--rosa); opacity: 0;
  animation: aro-late 2.8s ease-out infinite; pointer-events: none;
}
@keyframes aro-late { 0% { transform: scale(.92); opacity: .75; } 70%, 100% { transform: scale(1.45); opacity: 0; } }

/* íconos: el activo se prende */
.tab .ico, .lateral-item .ico { transition: filter .25s ease, color .25s ease, transform .25s ease; }
.tab.activo .ico, .lateral-item.activo .ico { color: var(--lila); filter: drop-shadow(0 0 7px rgba(var(--neon), .85)); transform: translateY(-1px); }
.pi-aviso-ico, .co-banda-ico, .confirmar-ico, .pi-paso-ico, .cu-camino-ico {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 8px 14px -10px currentColor;
}
.vacio-ico { box-shadow: 0 0 0 1px var(--linea), 0 0 28px -6px rgba(var(--neon-2), .8); }
.chip { transition: transform .14s ease, box-shadow .2s ease, background .2s ease; }
.chip.activo { box-shadow: 0 8px 18px -10px rgba(var(--neon), .9), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.chip:active { transform: scale(.96); }

/* tarjetas que se tocan: se levantan */
.pi-red, .pe-a-publico, .cu-guia { transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; }
@media (hover: hover) {
  .pi-red:hover, .pe-a-publico:hover, .cu-guia:hover { transform: translateY(-3px); border-color: rgba(var(--neon), .55);
    box-shadow: 0 22px 40px -26px rgba(var(--neon), .9); }
}

/* las gráficas que ya había: neón en las líneas, volumen y sombra en las barras */
.gf-linea { filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 7px 8px rgba(0, 0, 0, .35)); }
.gf-capa-barras { filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .38)); }
.gf-capa-puntos circle { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
.gf-dona-grafica svg { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(var(--neon-2), .35)); }
.gf-anillo svg { filter: drop-shadow(0 0 8px rgba(var(--neon-2), .55)); }
.gf-hpista { height: 13px; border-radius: 7px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.gf-hrelleno {
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .22)), var(--gf-color, var(--serie-1));
  box-shadow: 0 0 12px -1px var(--gf-color, var(--serie-1));
}
.gf-medidor-pista { box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.gf-medidor-relleno { background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .2)); }
.gf-tip { border: 1px solid rgba(var(--neon), .45); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), 0 0 24px -10px rgba(var(--neon), .8); }
.gf-muestra { box-shadow: 0 0 8px -1px currentColor; }

/* los títulos de las secciones del Inicio llevan su pieza 3D */
.pi-monet > .pi-cab, .pi-cola > .pi-cab, .pi-mejores > .pi-cab, .pi-redes > .pi-cab, .pi-crece .gf-tarjeta-textos {
  position: relative; padding-left: 54px; min-height: 46px; display: grid; align-content: center;
}
.pi-monet > .pi-cab::before, .pi-cola > .pi-cab::before, .pi-mejores > .pi-cab::before, .pi-redes > .pi-cab::before,
.pi-crece .gf-tarjeta-textos::before {
  content: ""; position: absolute; left: -2px; top: 50%; width: 50px; height: 50px; margin-top: -25px;
  background: center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(var(--neon-2), .55));
}
.pi-monet > .pi-cab::before { background-image: url("../img/ilu-monedas.webp"); }
.pi-cola > .pi-cab::before { background-image: url("../img/ilu-calendario.webp"); }
.pi-mejores > .pi-cab::before { background-image: url("../img/ilu-cohete.webp"); }
.pi-redes > .pi-cab::before { background-image: url("../img/ilu-conectar.webp"); }
.pi-crece .gf-tarjeta-textos::before { background-image: url("../img/ilu-grafica.webp"); }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · GRÁFICAS 3D
   ═══════════════════════════════════════════════════════════════════════════ */
.g3 { min-width: 0; }
.g3 svg { display: block; width: 100%; height: auto; overflow: visible; }

/* leyenda (dona) */
.g3-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.g3-ley { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; outline: 0; }
.g3-ley:hover, .g3-ley:focus-visible { background: var(--campo-2); }
.g3-muestra { width: 15px; height: 15px; border-radius: 5px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 58%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #0b0624));
  box-shadow: 0 0 10px -2px var(--c); }
.g3-ley-nombre { font-size: 14.5px; font-weight: 600; }
.g3-ley-valor { font-family: var(--display); font-weight: 800; font-size: 16px; }

/* dona */
.g3-dona { display: grid; gap: 8px; }
.g3-dona-caja { position: relative; width: min(100%, 300px); margin: 0 auto; }
.g3-dona-svg { transform: scale(.78) rotate(-8deg); opacity: 0; transition: transform .8s cubic-bezier(.2, .9, .25, 1.15), opacity .4s ease; }
.g3-vivo .g3-dona-svg { transform: none; opacity: 1; }
.g3-dona-lados { filter: brightness(.55) saturate(1.2); }
.g3-dona-tapa { transition: opacity .2s ease; }
.g3-apagado .g3-dona-tapa { opacity: .28; }
.g3-dona-sombra { fill: rgba(0, 0, 0, .5); filter: blur(9px); }
.g3-dona-centro { position: absolute; left: 0; right: 0; top: 43.2%; transform: translateY(-50%); display: grid; justify-items: center; pointer-events: none; line-height: 1.05; }
.g3-dona-centro strong { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 21px; letter-spacing: -.03em; }
.g3-dona-centro small { font-size: 10.5px; color: var(--texto-2); }

/* columnas */
.g3-col-svg { max-height: 270px; }
.g3-col-piso { fill: var(--campo-2); stroke: var(--linea); stroke-width: 1; }
.g3-col-cara { fill: var(--c); }
.g3-col-lado { fill: color-mix(in srgb, var(--c) 52%, #0b0624); }
.g3-col-tapa { fill: color-mix(in srgb, var(--c) 60%, #fff); }
.g3-col-brillo { fill: rgba(255, 255, 255, .26); }
.g3-col-cuerpo, .g3-esc-cuerpo { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0);
  transition: transform .85s cubic-bezier(.2, .9, .25, 1.1) var(--d, 0ms); }
.g3-vivo .g3-col-cuerpo, .g3-vivo .g3-esc-cuerpo { transform: none; }
.g3-col-mayor .g3-col-cuerpo { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--c) 75%, transparent)); }
.g3-col-valor { font: 800 11.5px var(--display); fill: var(--texto); opacity: 0; transition: opacity .35s ease calc(var(--d, 0ms) + .55s); }
.g3-vivo .g3-col-valor { opacity: 1; }
.g3-col-nombre { font: 600 10.5px var(--cuerpo); fill: var(--texto-2); }

/* ranking */
.g3-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.g3-rank-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 11px; row-gap: 6px; align-items: center; }
.g3-ficha { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  font: 800 12.5px var(--display); letter-spacing: .02em; color: var(--tinta);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 62%, #fff), var(--c) 52%, color-mix(in srgb, var(--c) 70%, #0b0624));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 9px 16px -9px var(--c); }
.g3-rank-nombre { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3-rank-valor { font-family: var(--display); font-weight: 800; font-size: 15px; }
.g3-pista { grid-column: 2 / -1; position: relative; height: 12px; border-radius: 6px; overflow: hidden; background: var(--campo-2);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .38); }
.g3-relleno { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .22)), var(--c);
  box-shadow: 0 0 12px -1px var(--c); transition: width .95s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.g3-vivo .g3-relleno { width: var(--w); }

/* partido */
.g3-partido { display: grid; gap: 10px; }
.g3-partido-cab { display: flex; justify-content: space-between; gap: 12px; }
.g3-partido-cab > div { display: grid; gap: 1px; }
.g3-partido-b { text-align: right; justify-items: end; }
.g3-partido-cab strong { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 32px; letter-spacing: -.035em; line-height: 1; padding-right: .08em; }
.g3-partido-a strong { background: linear-gradient(100deg, var(--naranja), var(--rosa)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g3-partido-b strong { color: var(--g3-lila); }
.g3-partido-cab span { font-size: 13px; color: var(--texto-2); }
.g3-partido-barra { display: flex; gap: 3px; height: 24px; border-radius: 12px; overflow: hidden; background: var(--campo-2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.g3-partido-ia, .g3-partido-ib { display: block; height: 100%; }
.g3-partido-ia { width: 0; border-radius: 12px 4px 4px 12px; transition: width 1s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .2)), linear-gradient(90deg, var(--naranja), var(--rosa));
  box-shadow: 0 0 14px -2px rgba(var(--neon), .9); }
.g3-vivo .g3-partido-ia { width: var(--a); }
.g3-partido-ib { flex: 1; border-radius: 4px 12px 12px 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .22)), var(--violeta); }

/* calor */
.g3-calor-grilla { display: grid; grid-template-columns: 34px repeat(8, minmax(0, 1fr)); gap: 5px; align-items: center; }
.g3-calor-hora { font: 600 10px var(--cuerpo); color: var(--texto-3); text-align: center; white-space: nowrap; }
.g3-calor-dia { font: 700 11.5px var(--display); color: var(--texto-2); }
.g3-celda { position: relative; aspect-ratio: 1.3; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: var(--campo-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .22);
  opacity: 0; transform: scale(.55); transition: opacity .3s ease var(--d, 0ms), transform .5s cubic-bezier(.2, .9, .3, 1.35) var(--d, 0ms); }
.g3-celda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, var(--violeta), var(--rosa)); opacity: var(--i, 0); }
.g3-vivo .g3-celda { opacity: 1; transform: none; }
.g3-celda-vacia { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); }
.g3-celda-top { overflow: visible; z-index: 1; box-shadow: 0 0 16px -1px rgba(var(--neon), .95), inset 0 1px 0 rgba(255, 255, 255, .5); }
.g3-celda-top::before { border-radius: inherit; background: linear-gradient(140deg, var(--oro), var(--naranja) 55%, var(--rosa)); opacity: 1; }
.g3-celda b { position: relative; font: 900 12px var(--display); color: var(--tinta); }
.g3-calor-escala { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--texto-3); }
.g3-calor-rampa { flex: 0 0 96px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--violeta) 16%, transparent), var(--violeta), var(--rosa)); }

/* embudo */
.g3-embudo { display: grid; gap: 7px; justify-items: center; }
.g3-emb-fila { width: var(--w); min-width: min(100%, 236px); max-width: 100%; display: grid; gap: 2px; justify-items: center;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .4));
  opacity: 0; transform: translateY(-12px) scaleX(.7); transition: opacity .35s ease var(--d, 0ms), transform .6s cubic-bezier(.2, .9, .25, 1.1) var(--d, 0ms); }
.g3-vivo .g3-emb-fila { opacity: 1; transform: none; }
.g3-emb-pieza { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 20px;
  color: var(--tinta); clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 13px 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .18)), var(--c); }
.g3-emb-ico { display: grid; }
.g3-emb-nombre { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g3-emb-valor { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 16px; }
.g3-emb-nota { font-size: 11.5px; color: var(--texto-3); }

/* escalera */
.g3-esc-svg { max-height: 300px; }
.g3-esc { --base: color-mix(in srgb, var(--violeta) 22%, var(--superficie-solida)); }
.g3-esc-ok { --base: var(--c); }
.g3-esc-cara { fill: var(--base); }
.g3-esc-lado { fill: color-mix(in srgb, var(--base) 56%, #06031a); }
.g3-esc-tapa { fill: color-mix(in srgb, var(--base) 66%, #fff); }
.g3-esc-avance { fill: var(--c); }
.g3-esc-sig .g3-esc-cara { stroke: var(--c); stroke-width: 1.2; stroke-dasharray: 4 3; }
.g3-esc-ok .g3-esc-cuerpo { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 65%, transparent)); }
.g3-esc-nombre { font: 800 11px var(--display); fill: var(--texto-3); }
.g3-esc-ok .g3-esc-nombre, .g3-esc-sig .g3-esc-nombre { fill: var(--texto); }
.g3-esc-tilde { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g3-esc-marca { opacity: 0; transition: opacity .4s ease .75s; filter: drop-shadow(0 4px 8px rgba(var(--neon), .7)); }
.g3-vivo .g3-esc-marca { opacity: 1; }
.g3-esc-marca image { animation: g3-salta 2.4s ease-in-out infinite; }
@keyframes g3-salta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.g3-esc-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 8px; }
.g3-esc-dato { display: grid; gap: 1px; min-width: 0; }
.g3-esc-dato + .g3-esc-dato { border-left: 1px solid var(--linea); padding-left: 10px; }
.g3-esc-dato small { font-size: 12px; color: var(--texto-3); }
.g3-esc-dato strong { font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(15px, 4.4vw, 20px); letter-spacing: -.03em; overflow-wrap: anywhere; }
.g3-esc-dato:first-child strong { background: var(--holo-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; }
.g3-esc-dato span { font-size: 12px; color: var(--texto-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · PANTALLA «PÚBLICO»
   ═══════════════════════════════════════════════════════════════════════════ */
.pu { display: grid; gap: 14px; }
.pu-redes .chip .red { margin: 0 2px 0 -4px; }
.pu-datos { display: grid; gap: 14px; }
.pu-cab { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 20px; border-radius: 26px; }
.pu-cab > * { position: relative; }
.pu-cab-ilu { position: absolute; right: -16px; top: 6px; width: 146px; height: 146px; pointer-events: none; }
.pu-cab .ceja { padding-right: 110px; }
.pu-titulo { margin: 0; font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(21px, 6vw, 30px); line-height: 1.14;
  letter-spacing: -.02em; padding-right: 104px; }
.pu-titulo b, .pi-f3-frase b { font-weight: 900; background: var(--holo-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.pu-bajada { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--texto-2); max-width: 54ch; }
.pu-bajada b { color: var(--texto); }
.pu-cab-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.pu-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--campo-2); border: 1px solid var(--linea); }
.pu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pu-tarjeta { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 22px; }
.pu-tarjeta-cab { display: grid; gap: 2px; }
.pu-cuerpo { min-width: 0; }
.pu-sin { display: flex; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 14px; border: 1px dashed var(--linea-fuerte); font-size: 14px; line-height: 1.4; color: var(--texto-3); }
.pu-sin .ico { flex: 0 0 auto; margin-top: 1px; }
.pu-lectura { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.pu-mejores { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pu-mejor { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--campo-2); border: 1px solid var(--linea); }
.pu-mejor b { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 900 13px var(--display); color: var(--tinta);
  background: linear-gradient(140deg, var(--oro), var(--naranja) 55%, var(--rosa)); box-shadow: 0 0 12px -2px rgba(var(--neon), .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pu-mejor span { display: grid; min-width: 0; }
.pu-mejor strong { font-size: 14.5px; }
.pu-mejor small { font-size: 12.5px; color: var(--texto-3); }
.pu-cuentas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pu-cuenta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 0; }
.pu-cuenta + .pu-cuenta { border-top: 1px solid var(--linea); }
.pu-cuenta-nota { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--texto-3); }
.pu-origen-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--campo-2); border: 1px solid var(--linea); }
.pu-tono-entra { color: var(--entra); border-color: color-mix(in srgb, var(--entra) 45%, transparent); background: color-mix(in srgb, var(--entra) 10%, transparent); }
.pu-tono-marca { color: var(--lila); border-color: color-mix(in srgb, var(--lila) 45%, transparent); background: color-mix(in srgb, var(--lila) 10%, transparent); }
.pu-tono-aviso { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 45%, transparent); background: color-mix(in srgb, var(--aviso) 10%, transparent); }

@media (min-width: 720px) {
  .pu-mejores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pu-cuentas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .pu-cuenta:nth-child(2) { border-top: 0; }
}
@media (min-width: 960px) {
  .pu, .pu-datos { gap: 16px; }
  .pu-cab { padding: 28px 30px; min-height: 190px; align-content: center; }
  .pu-cab-ilu { right: 26px; top: 50%; margin-top: -105px; width: 210px; height: 210px; }
  .pu-titulo { font-size: 34px; max-width: 24ch; padding-right: 230px; }
  .pu-bajada { padding-right: 230px; }
  .pu-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .pu-tarjeta { padding: 22px; }
  /* cinco renglones parejos: escala + género · países + ciudades + de dónde llegan ·
     cuándo publicar (ocupa dos) con edades y gente nueva al lado · embudo + de dónde sale el dato */
  .pu-escala { grid-column: span 7; order: 1; }
  .pu-genero { grid-column: span 5; order: 2; }
  .pu-pais, .pu-ciudad, .pu-fuente { grid-column: span 4; order: 3; }
  .pu-horarios { grid-column: span 7; grid-row: span 2; order: 4; }
  .pu-edad { grid-column: span 5; order: 5; }
  .pu-nuevos { grid-column: span 5; order: 6; }
  .pu-embudo { grid-column: span 5; order: 7; }
  .pu-origen { grid-column: span 7; order: 8; }
  .pu-origen .pu-cuentas { grid-template-columns: minmax(0, 1fr); }
  .pu-origen .pu-cuenta:nth-child(2) { border-top: 1px solid var(--linea); }
  .g3-dona-caja { width: min(100%, 330px); }
}

/* ── las dos tarjetas del Inicio ─────────────────────────────────────────── */
.pi-piloto, .pi-publico-mini { display: grid; gap: 12px; align-content: start; }
.pi-f3-cab { display: flex; align-items: center; gap: 12px; }
.pi-f3-ilu { flex: 0 0 auto; width: 66px; height: 66px; margin: -8px 0 -8px -6px; }
.pi-f3-textos { min-width: 0; }
.pi-f3-cuerpo { display: grid; gap: 12px; }
.pi-f3-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pi-f3-dato { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 10px; border-radius: 14px; text-align: left; font: inherit; color: inherit;
  background: var(--campo-2); border: 1px solid var(--linea); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .2); }
button.pi-f3-dato { cursor: pointer; transition: transform .14s ease, border-color .2s ease; }
button.pi-f3-dato:active { transform: scale(.97); }
.pi-f3-dato small { font-size: 11.5px; line-height: 1.2; color: var(--texto-2); }
.pi-f3-dato strong { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 18px; letter-spacing: -.03em; line-height: 1.12; overflow-wrap: anywhere; }
.pi-f3-dato-texto strong { font-style: normal; font-weight: 800; font-size: 14px; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: normal; }
.pi-f3-atento { border-color: color-mix(in srgb, var(--aviso) 55%, transparent); background: color-mix(in srgb, var(--aviso) 10%, transparent); }
.pi-f3-atento strong { color: var(--aviso); }
.pi-f3-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.pi-f3-mov { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; }
.pi-f3-mov + .pi-f3-mov { border-top: 1px solid var(--linea); }
.pi-f3-mov-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta);
  background: linear-gradient(145deg, #C9A9FF, var(--violeta)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 7px 12px -8px var(--violeta); }
.pi-f3-mov-texto { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-f3-mov small { font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.pi-f3-nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.pi-f3-frase { margin: 0; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 17px; line-height: 1.28; }
.pi-f3-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-f3-ficha { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 13px;
  background: var(--campo-2); border: 1px solid var(--linea); }
.pi-f3-ficha .ico { color: var(--lila); }
.pi-f3-ficha strong { font-weight: 800; }
.pi-f3-ver { justify-self: start; }
@media (min-width: 960px) {
  .pi-grid {
    grid-template-areas:
      "total total total total total redes redes redes redes redes redes redes"
      "avisos avisos avisos avisos avisos avisos avisos avisos avisos avisos avisos avisos"
      "crece crece crece crece crece crece crece crece cola cola cola cola"
      "piloto piloto piloto piloto piloto piloto publicom publicom publicom publicom publicom publicom"
      "monet monet monet monet monet monet monet monet monet monet monet monet"
      "mejores mejores mejores mejores mejores mejores mejores ingresos ingresos ingresos ingresos ingresos";
  }
  .pi-piloto { grid-area: piloto; }
  .pi-publico-mini { grid-area: publicom; }
}

/* ── la puerta desde Estadísticas ────────────────────────────────────────── */
.pe-a-publico { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 14px 6px 8px; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  border-radius: 18px; border: 1px solid color-mix(in srgb, var(--rosa) 42%, transparent);
  background: linear-gradient(100deg, rgba(var(--neon), .15), rgba(var(--neon-2), .1)); }
.pe-a-publico img { flex: 0 0 auto; width: 58px; height: 58px; animation: none; }
.pe-a-publico > span { flex: 1; display: grid; min-width: 0; }
.pe-a-publico strong { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 16px; }
.pe-a-publico small { font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.pe-a-publico > .ico { flex: 0 0 auto; color: var(--texto-3); }

@media (prefers-reduced-motion: reduce) {
  .tab-publicar span::after, .g3-esc-marca image { animation: none; }
  .g3 *, .btn, .chip { transition: none !important; }
}