/* Ochenta & Ocho Politics: micrositio (23 de octubre: «que se sienta como si entras en una nueva página… su estilo y vibra
   diferente a la de O&O general»). Toma el lenguaje del portafolio político en PDF que el cliente aprobó el 14 de octubre:
   negro profundo y blanco puro, titulares en Poppins seminegrita con el degradado oficial azul–violeta–rosa, antetítulos en
   Bebas espaciada, grises de lectura y la barra del degradado fija en el borde derecho de la pantalla. El rojo del logotipo
   queda para botones, viñetas y números. Logotipo «Politics» oficial, letras blancas sobre negro (rol politics_dark).
   Esquinas rectas, sin sombras ni desenfoques. Todo bajo body[data-micro="politics"]: no toca el resto del sitio. */
body[data-micro="politics"]{
  --pl-negro:#000;--pl-blanco:#fff;--pl-gris:#a1a1a6;--pl-gris-claro:#6e6e73;--pl-linea:rgba(255,255,255,.14);--pl-linea-clara:rgba(0,0,0,.12);
  --pl-degradado:linear-gradient(90deg,#1381bc 0%,#7e6aaa 55%,#e84967 100%);
  --mc-fondo:#000;--mc-tinta:#fff;--mc-tenue:#a1a1a6;--mc-linea:rgba(255,255,255,.16);--mc-acento:#e84967;--mc-cta:var(--red);--mc-cta-tinta:#fff;
  --mc-pie:#000;--mc-pie-tinta:#fff;
  background:var(--pl-negro)}
/* La firma del micrositio: la barra del degradado oficial, fija en el borde derecho (como en el portafolio). */
body[data-micro="politics"]::after{content:"";position:fixed;z-index:25;top:0;right:0;bottom:0;width:clamp(6px,.6vw,10px);background:linear-gradient(180deg,#e84967,#7e6aaa 50%,#1381bc);pointer-events:none}
body[data-micro="politics"] .light::after{content:none}
body[data-micro="politics"] main{background:var(--pl-negro)}
body[data-micro="politics"] .section,body[data-micro="politics"] .closing,body[data-micro="politics"] .cp-hero{background:var(--pl-negro);color:var(--pl-blanco)}
body[data-micro="politics"] .light{background:var(--pl-blanco);color:#000}

/* Titulares: Poppins, frase normal (no versales), con el degradado. Si el navegador no recorta el fondo al texto, se ve blanco o negro. */
body[data-micro="politics"] .cp-hero h1,body[data-micro="politics"] .mod-super,body[data-micro="politics"] .closing h2{
  font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:-.03em;line-height:1.04;
  background:var(--pl-degradado);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* El fondo se ajusta al ancho del texto para que el degradado llegue completo, del azul al rosa, en cada titular. */
body[data-micro="politics"] .cp-hero h1,body[data-micro="politics"] .mod-head .mod-super,body[data-micro="politics"] .closing h2{width:fit-content;max-width:100%;margin-inline:auto}
body[data-micro="politics"] .cp-hero h1{font-size:clamp(2.6rem,5.6vw,5rem);max-width:min(15ch,100%)}
body[data-micro="politics"] .mod-super{font-size:clamp(2.2rem,4.4vw,3.9rem)}
body[data-micro="politics"] .closing h2{font-size:clamp(2.6rem,5.4vw,4.6rem)}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  body[data-micro="politics"] .cp-hero h1,body[data-micro="politics"] .mod-super,body[data-micro="politics"] .closing h2{background:none;-webkit-text-fill-color:currentColor;color:inherit}
}
body[data-micro="politics"] .eyebrow{font:400 .9375rem/1.3 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--pl-gris)}
body[data-micro="politics"] .light .eyebrow{color:var(--pl-gris-claro)}
body[data-micro="politics"] .mod-line,body[data-micro="politics"] .cp-hero-line{color:#d2d2d7}
body[data-micro="politics"] .light .mod-line{color:var(--pl-gris-claro)}

/* Portada */
body[data-micro="politics"] .cp-hero{padding-top:clamp(56px,8vw,112px)}
body[data-micro="politics"] .cp-hero-line{font-size:clamp(1.0625rem,1.5vw,1.3125rem)}
body[data-micro="politics"] .cp-hero figcaption{color:var(--pl-gris)}
body[data-micro="politics"] .answer-block{color:var(--pl-blanco)}
body[data-micro="politics"] .answer-copy{color:#d2d2d7}

/* Portada «El territorio marca el rumbo» como motion graphic (23 de octubre: el cliente pidió mejorar la composición de Codex
   y después «que se vuelva motion graphic y si le das clic a cada punto cambie la frase y el fondo»). Cuatro estados
   (data-estado 0–3, politics.js): inicio, Escucha, Mensaje y Comunicación. Cada uno cambia el color del fondo, el relieve, el
   número de fondo y la frase; la ruta avanza hasta su punto y el mapa se acerca a él. Al cargar, la ruta se traza una vez.
   Transiciones de 0.5–1 s con salida suave; con movimiento reducido el cambio es inmediato. Sin bucles. Sin candidaturas,
   rostros, partidos ni resultados. */
body[data-micro="politics"] .pol-editorial-figure{width:min(1120px,calc(100% - 72px));margin:clamp(40px,6vw,72px) auto 0}
body[data-micro="politics"] .pol-editorial-art{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:1200/560;border:1px solid rgba(255,255,255,.1);color:#fff}
.pol-territorio{--fondo:#060607;--tono:255,255,255;background:var(--fondo);transition:background-color .9s var(--ease-out,ease)}
.pol-territorio[data-estado="1"]{--fondo:#04111a;--tono:19,129,188}
.pol-territorio[data-estado="2"]{--fondo:#0d0a19;--tono:154,131,207}
.pol-territorio[data-estado="3"]{--fondo:#170910;--tono:232,73,103}
.pol-territorio-map{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.pol-grid{fill:none;stroke:rgba(255,255,255,.055);stroke-width:1}
/* Relieve: un juego de curvas por estado; cambia con un fundido. */
.pol-contours{opacity:0;transition:opacity .9s var(--ease-out,ease)}
.pol-contours path{fill:none;stroke:rgba(var(--tono),.15);stroke-width:1.2;transition:stroke .9s var(--ease-out,ease)}
.pol-contours-0 path{stroke:rgba(255,255,255,.08)}
.pol-territorio[data-estado="0"] .pol-contours-0,.pol-territorio[data-estado="1"] .pol-contours-1,
.pol-territorio[data-estado="2"] .pol-contours-2,.pol-territorio[data-estado="3"] .pol-contours-3{opacity:1}
/* El mapa se acerca al punto elegido (escala 1.12 alrededor del punto, en unidades del dibujo). */
.pol-mapa{transform-origin:0 0;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.pol-territorio[data-estado="1"] .pol-mapa{transform:translate(-36px,-18px) scale(1.12)}
.pol-territorio[data-estado="2"] .pol-mapa{transform:translate(-74px,-28px) scale(1.12)}
.pol-territorio[data-estado="3"] .pol-mapa{transform:translate(-108px,-13px) scale(1.12)}
/* Ruta: la base tenue siempre completa; la del degradado avanza hasta el punto elegido (fracción del largo real). */
.pol-route-base{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2;stroke-linecap:round}
.pol-route,.pol-route-wash{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1)}
.pol-route{stroke-width:3.5}
.pol-route-wash{stroke-width:24;opacity:.12}
.pol-territorio[data-estado="1"] :is(.pol-route,.pol-route-wash){stroke-dashoffset:.755}
.pol-territorio[data-estado="2"] :is(.pol-route,.pol-route-wash){stroke-dashoffset:.485}
.pol-territorio[data-estado="3"] :is(.pol-route,.pol-route-wash){stroke-dashoffset:.233}
.pol-node{transition:opacity .5s var(--ease-out,ease),transform .7s cubic-bezier(.16,1,.3,1)}
.pol-node-1{--c:#1381bc}.pol-node-2{--c:#9a83cf}.pol-node-3{--c:#e84967}
.pol-node-hit{fill:transparent}
.pol-node-ring{fill:#060607;stroke:var(--c);stroke-width:2.5}
.pol-node-core{fill:#fff}
.pol-node-halo{fill:var(--c);opacity:.18;transition:opacity .3s var(--ease-out,ease)}
.pol-territorio.is-ready .pol-node{cursor:pointer}
@media (hover:hover) and (pointer:fine){.pol-territorio.is-ready .pol-node:hover .pol-node-halo{opacity:.42}}
.pol-territorio[data-estado="1"] .pol-node-1,.pol-territorio[data-estado="2"] .pol-node-2,.pol-territorio[data-estado="3"] .pol-node-3{transform:scale(1.4)}
.pol-territorio[data-estado="1"] :is(.pol-node-2,.pol-node-3),.pol-territorio[data-estado="2"] .pol-node-3{opacity:.4}
/* Número de fondo: 88 al inicio, 01–03 en cada punto, en contorno del color del estado. */
.pol-fondo-num{position:absolute;right:-.02em;bottom:-.2em;z-index:-2;font:600 clamp(9rem,26vw,24rem)/1 var(--body);letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1px rgba(var(--tono),.2);opacity:0;transform:translateY(6%);transition:opacity .6s var(--ease-out,ease),transform 1s cubic-bezier(.16,1,.3,1);pointer-events:none;user-select:none}
.pol-territorio[data-estado="0"] [data-num="0"],.pol-territorio[data-estado="1"] [data-num="1"],
.pol-territorio[data-estado="2"] [data-num="2"],.pol-territorio[data-estado="3"] [data-num="3"]{opacity:1;transform:none}
.pol-territorio-meta{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:16px;padding:clamp(16px,2.4vw,30px) clamp(18px,3vw,40px);font:400 clamp(.8125rem,1vw,.9375rem)/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:#a1a1a6;pointer-events:none}
.pol-territorio-pista[hidden]{display:none}
/* Frases: apiladas en el mismo lugar; la activa entra después de que sale la anterior. */
.pol-territorio-frases{position:absolute;left:clamp(18px,3vw,40px);right:clamp(18px,3vw,40px);bottom:clamp(62px,7.4vw,96px);height:clamp(120px,15vw,176px);pointer-events:none}
.pol-territorio-title{position:absolute;left:0;bottom:0;display:grid;gap:8px;max-width:min(100%,760px);margin:0;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s var(--ease-out,ease),transform .35s var(--ease-out,ease),visibility 0s .35s}
.pol-territorio-title.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease-out,ease) .25s,transform .9s cubic-bezier(.16,1,.3,1) .25s,visibility 0s}
.pol-territorio-title span{font:400 clamp(.875rem,1.3vw,1.125rem)/1 var(--display);letter-spacing:.32em;text-transform:uppercase;color:#d2d2d7}
.pol-territorio-title strong{font:600 clamp(2rem,4.6vw,4.2rem)/1 var(--body);letter-spacing:-.035em;padding-bottom:.08em;
  background:var(--pl-degradado);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Las frases de cada punto llevan una línea más: el titular baja de tamaño para quedar en una sola línea. */
.pol-territorio-title:not([data-frase="0"]){max-width:100%}
.pol-territorio-title:not([data-frase="0"]) strong{font-size:clamp(1.8rem,3.5vw,3.25rem)}
.pol-territorio-title em{max-width:52ch;font:400 clamp(.9375rem,1.2vw,1.0625rem)/1.5 var(--body);font-style:normal;color:#d2d2d7}
/* Leyenda: tres botones; el elegido se ilumina con su color y una línea debajo. */
.pol-territorio-steps{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:0 clamp(8px,2.4vw,36px);margin:0;padding:0 clamp(10px,2.2vw,30px);border-top:1px solid rgba(255,255,255,.12)}
.pol-territorio-steps button{position:relative;display:inline-flex;align-items:center;min-height:clamp(52px,5.6vw,68px);padding:0 10px;border:0;background:transparent;color:#f5f5f7;
  font:500 clamp(.75rem,1vw,.875rem)/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .3s var(--ease-out,ease)}
.pol-territorio-steps button i{margin-right:10px;font-style:normal;font-weight:600;color:var(--c);transition:color .3s var(--ease-out,ease)}
.pol-territorio-steps button::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pol-step-1{--c:#1381bc}.pol-step-2{--c:#9a83cf}.pol-step-3{--c:#e84967}
.pol-territorio:not([data-estado="0"]) .pol-territorio-steps button[aria-pressed="false"],.pol-territorio:not([data-estado="0"]) .pol-territorio-steps button[aria-pressed="false"] i{color:#8e8e93}
.pol-territorio-steps button[aria-pressed="true"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.pol-territorio-steps button:hover{color:#fff}.pol-territorio-steps button:hover i{color:var(--c)}}
.pol-territorio-steps button:focus-visible{outline:2px solid var(--c);outline-offset:-4px}
.pol-territorio-steps button:active{transform:scale(.97)}
/* Escena con el desplazamiento (politics.js le pone .is-scroll y la alarga): la pieza queda fija y centrada bajo el
   encabezado mientras la ruta avanza; las transiciones se acortan para seguir el dedo o la rueda sin retraso. */
.pol-editorial-figure.is-scroll{position:relative}
.pol-editorial-figure.is-scroll .pol-territorio{position:sticky;top:calc(var(--header-height,76px) + max(16px,(100svh - var(--header-height,76px) - var(--escena-h,520px)) / 2))}
.pol-editorial-figure.is-scroll :is(.pol-route,.pol-route-wash){transition-duration:.45s}
.pol-editorial-figure.is-scroll .pol-mapa{transition-duration:.7s}
/* Al cargar, la ruta se traza una vez. */
@keyframes pol-draw{from{stroke-dashoffset:1}}
@media (prefers-reduced-motion:no-preference){.pol-route,.pol-route-wash{animation:pol-draw 2.2s cubic-bezier(.65,0,.35,1) .3s backwards}}
@media (prefers-reduced-motion:reduce){.pol-territorio,.pol-territorio *{transition:none!important;animation:none!important}}

/* Subtítulos del contenido: también Poppins, sin versales. Los números y años llevan el degradado. */
body[data-micro="politics"] .pol-step h3,body[data-micro="politics"] .pol-case-copy h3,body[data-micro="politics"] .pol-group h3,
body[data-micro="politics"] .pol-table caption,body[data-micro="politics"] .pol-sub,body[data-micro="politics"] .cp-three h3{
  font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:-.02em;line-height:1.12}
body[data-micro="politics"] .pol-step h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
body[data-micro="politics"] .pol-case-copy h3{font-size:clamp(1.8rem,3.2vw,2.6rem)}
body[data-micro="politics"] .pol-group h3{font-size:clamp(1.15rem,1.6vw,1.375rem)}
body[data-micro="politics"] .pol-table caption{font-size:1.25rem}
body[data-micro="politics"] .sector-case-copy h3{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:-.02em;font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.15}
body[data-micro="politics"] .pol-step-num,body[data-micro="politics"] .pol-table .pol-year,body[data-micro="politics"] .cp-three-list span{
  font-family:var(--body);font-weight:600;letter-spacing:-.02em;
  background:var(--pl-degradado);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body[data-micro="politics"] .pol-step-num,body[data-micro="politics"] .cp-three-list span{font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1}
body[data-micro="politics"] .pol-table .pol-year{font-size:1rem}
body[data-micro="politics"] .pol-bond p{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:-.025em;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05}
body[data-micro="politics"] .pol-step,body[data-micro="politics"] .pol-bond,body[data-micro="politics"] .pol-table td,body[data-micro="politics"] .pol-table tbody th{border-color:var(--pl-linea)}
body[data-micro="politics"] .light .pol-step,body[data-micro="politics"] .light .pol-table td,body[data-micro="politics"] .light .pol-table tbody th{border-color:var(--pl-linea-clara)}
body[data-micro="politics"] .pol-step small,body[data-micro="politics"] .pol-bond small,body[data-micro="politics"] .pol-defs dd,body[data-micro="politics"] .pol-piece figcaption,body[data-micro="politics"] .pol-note{opacity:1;color:var(--pl-gris)}
body[data-micro="politics"] .light .pol-step small,body[data-micro="politics"] .light .pol-defs dd,body[data-micro="politics"] .light .pol-piece figcaption{color:var(--pl-gris-claro)}

/* Preguntas y cierre */
body[data-micro="politics"] #preguntas summary{font-family:var(--body);font-weight:500}
body[data-micro="politics"] .closing{text-align:center;border-top:1px solid var(--pl-linea)}
body[data-micro="politics"] .closing .eyebrow{color:var(--pl-gris)}
body[data-micro="politics"] .closing .button-light{background:var(--red);border-color:var(--red);color:#fff}
body[data-micro="politics"] .closing .button-ghost{color:#fff;border-color:rgba(255,255,255,.5)}

/* Botón flotante: negro con filo del degradado, como el resto del micrositio. */
body[data-micro="politics"] .wa-float{background:#000;border-color:#e84967}

/* Pie: el logotipo grande y la línea del degradado arriba. */
.micro-footer-politics{border-top:2px solid transparent;border-image:linear-gradient(90deg,#1381bc,#7e6aaa 55%,#e84967) 1}

/* Fichas de campaña y de gobierno (23 de octubre: «se sigue viendo como una sección barata, y sobre todo lo de los
   gobiernos»). Sustituyen a los bloques compactos. Retícula de dos columnas: la ficha (número con el degradado, datos,
   nombre, una frase y las piezas) y los marcos, siempre de la misma altura, en vez de fotos de tamaños sueltos. Los diseños
   entran completos sobre su marco; las fotografías lo llenan. Las fichas alternan de lado. */
.pol-feats{max-width:1240px;margin:clamp(48px,6vw,80px) auto 0}
.pol-feat{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.62fr);align-items:center;gap:clamp(28px,4.4vw,72px);padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--pl-linea)}
.pol-feat:last-child{border-bottom:1px solid var(--pl-linea)}
.light .pol-feat{border-color:var(--pl-linea-clara)}
.pol-feat:nth-child(even) .pol-feat-copy{order:2}
.pol-feat-num{margin:0 0 18px;font:600 clamp(2.4rem,4vw,3.4rem)/1 var(--body);letter-spacing:-.04em;
  background:var(--pl-degradado);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.pol-feat-num span{font-size:.36em;letter-spacing:.02em;vertical-align:.95em;-webkit-text-fill-color:var(--pl-gris);color:var(--pl-gris)}
.light .pol-feat-num span{-webkit-text-fill-color:var(--pl-gris-claro);color:var(--pl-gris-claro)}
body[data-micro="politics"] .pol-feat-copy .eyebrow{margin:0 0 12px;line-height:1.5}
body[data-micro="politics"] .pol-feat-copy h3{margin:0 0 14px;font:600 clamp(1.7rem,2.6vw,2.4rem)/1.08 var(--body);letter-spacing:-.025em;text-transform:none}
.pol-feat-text{max-width:42ch;margin:0;font-size:clamp(1rem,1.25vw,1.0625rem);line-height:1.6;color:#d2d2d7}
.light .pol-feat-text{color:#3a3a3c}
.pol-feat-pies{max-width:42ch;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--pl-linea);font-size:.8125rem;line-height:1.55;color:var(--pl-gris)}
.light .pol-feat-pies{border-color:var(--pl-linea-clara);color:var(--pl-gris-claro)}
.pol-feat:nth-child(even){grid-template-columns:minmax(0,1.62fr) minmax(0,.78fr)}
/* Marcos: la proporción del conjunto (--a) y las columnas (--cols) las calcula pol_feature según las piezas, así cada una
   llena su marco. En teléfono, las piezas forman una tira que se desliza, cada una en su proporción (--r). */
.pol-feat-media{display:grid;grid-template-columns:var(--cols);gap:10px;aspect-ratio:var(--a)}
.pol-feat-media.is-tres{grid-template-rows:1fr 1fr}
.pol-feat-media.is-tres .pol-mat:first-child{grid-row:1/3}
/* Más de tres piezas: filas justificadas, todas las de una fila a la misma altura y completas. */
.pol-feat-media.is-filas{display:flex;flex-direction:column;gap:10px;aspect-ratio:auto}
.pol-feat-row{display:flex;gap:10px}
.pol-feat-row .pol-mat{flex:var(--r) 1 0;aspect-ratio:var(--r)}
.pol-mat{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;background:#0f0f11;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.light .pol-mat{background:#f2f2f4;outline-color:rgba(0,0,0,.07)}
.pol-mat img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform var(--t-media,.5s) var(--ease-out,ease)}
.pol-feat-media.is-uno .pol-mat img{padding:clamp(16px,5%,40px)}
.pol-mat.is-cover img{object-fit:cover;object-position:var(--foco,50% 50%);padding:0}
.pol-mat:focus-visible{outline:2px solid #e84967;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pol-mat:hover img{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.pol-mat img{transition:none}}
@media (max-width:900px){
  .pol-feat,.pol-feat:nth-child(even){grid-template-columns:minmax(0,1fr);gap:24px}
  .pol-feat:nth-child(even) .pol-feat-copy{order:0}
  .pol-feat-media,.pol-feat-media.is-tres{display:flex;gap:10px;aspect-ratio:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-right:calc(50% - 50vw);padding-right:calc(50vw - 50%);overscroll-behavior-x:contain}
  .pol-feat-media::-webkit-scrollbar{display:none}
  .pol-feat-media.is-filas{flex-direction:row}
  .pol-feat-row{display:contents}
  .pol-feat-row .pol-mat{flex:0 0 auto}
  .pol-mat{flex:0 0 auto;height:min(64vw,340px);aspect-ratio:var(--r);scroll-snap-align:start}
  .pol-feat-media.is-uno .pol-mat{width:100%;height:auto;aspect-ratio:var(--a)}
  .pol-feat-media.is-uno .pol-mat img{padding:16px}
}
/* La nota «Dónde» se alinea con la columna de la trayectoria. */
body[data-micro="politics"] .pol-record .offer-note{max-width:1040px;margin-inline:auto;color:var(--pl-gris)}
/* Portada en teléfono: más alta; el mapa completo arriba, la frase y la leyenda debajo. */
@media (max-width:760px){
  body[data-micro="politics"] .pol-editorial-figure{width:calc(100% - 40px)}
  body[data-micro="politics"] .pol-editorial-art{aspect-ratio:.78}
  .pol-territorio-meta span:first-child{display:none}
  .pol-territorio-map{inset:44px 0 auto 0;height:auto;aspect-ratio:1200/560}
  .pol-route{stroke-width:8}.pol-route-wash{stroke-width:44}.pol-route-base{stroke-width:4}
  .pol-node-halo{r:40px}.pol-node-ring{r:20px;stroke-width:5}.pol-node-core{r:8px}.pol-node-hit{r:70px}
  .pol-territorio-frases{height:190px}
  .pol-territorio-title strong,.pol-territorio-title:not([data-frase="0"]) strong{font-size:clamp(1.7rem,7.6vw,2.2rem)}
  .pol-territorio-title em{font-size:.9375rem}
  .pol-fondo-num{font-size:12rem;bottom:auto;top:28%}
  /* Leyenda en tres columnas iguales, con el número arriba del nombre: nunca se parte en dos renglones. */
  .pol-territorio-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0}
  .pol-territorio-steps button{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:64px;padding:0 14px;font-size:.6875rem;letter-spacing:.08em}
  .pol-territorio-steps button i{margin:0}
  .pol-territorio-steps button::after{left:14px;right:14px}
  .pol-territorio-frases{bottom:80px}
}