/* ============================================================
     RedEntrenadores — Observatorio: CSS base del layout de panel

     Implementa design_handoff_observatorio (Esteve, 18/09/2026). El
     prototipo lleva todos los estilos en linea por requisito de su
     herramienta; aqui van a clases, que es como se estila este sitio.

     QUE CAMBIA RESPECTO A LO QUE HABIA
     La pagina pasa de una columna de scroll a un panel: barra superior,
     portada oscura a ancho completo, indice lateral pegajoso y ocho
     vistas conmutadas. Es el tercer estilo en tres dias y el mas
     distinto de los tres; las hojas anteriores (1, 1b, 1c, 1d) las
     sustituye este juego entero.

     LAS OCHO VISTAS ESTAN TODAS EN EL HTML, Y ESO ES A PROPOSITO
     El handoff dice "solo se monta la seccion activa". Aqui no: las
     ocho viajan en el HTML servido y se conmutan con CSS.

     El motivo es el unico que importa en esta pagina. El Observatorio
     existe para que lo citen y lo enlacen -DA 4, cero backlinks
     editoriales- y con las vistas montadas por JS, Google y los
     rastreadores de las IA ven una sola de las ocho. El resto del
     informe no existiria para ellos. La experiencia es identica, el
     anclaje profundo funciona igual, y el coste es tener 60 KB de HTML
     en la pagina en vez de 8.

     LOS TOKENS SON LOS DEL HANDOFF, NO LOS DE AYER
     Vuelve el verde de marca #089F3B y la tinta #1B1E22, y con ellos
     Barlow para titulares y cifras. El #17803d y el Figtree del estilo
     de Preply se van con el layout que los trajo.
     ============================================================ 
*/

/* ---------- tokens ----------
   Se declaran como variables porque los usan las cuatro hojas de este juego,
   y porque el JS del mapa ya lee `--ob-rampa-*` desde el 16/09. */
:root{
  --ob-verde:#089F3B;
  --ob-verde-oscuro:#067A2D;
  --ob-verde-suave:#EAF3DE;
  --ob-tinta:#1B1E22;
  --ob-fondo:#F3F3F3;
  --ob-superficie:#FFFFFF;
  --ob-superficie-2:#F9FAFB;
  --ob-borde:#d9dde2;
  --ob-hairline:#eef0f2;
  --ob-texto-2:#4B5563;
  --ob-apagado:#6b7280;
  --ob-serie-gris:#9ca3af;
  --ob-error:#791F1F;
  /* Escala secuencial del mapa y de las celdas del explorador. */
  --ob-sin-dato:#F3F4F6;
  --ob-rampa-0:#EAF3DE;
  --ob-rampa-1:#B7DFC0;
  --ob-rampa-2:#6FC186;
  --ob-rampa-3:#089F3B;
  --ob-rampa-4:#067A2D;
}

/* ---------- la pagina ----------
   `ob-panel` sustituye a `ob-pagina`. Va a ancho completo y pinta el fondo
   gris: la portada oscura y la barra superior sangran hasta el borde, asi que
   el contenedor no puede limitar. Lo que limita es `ob-tira`, dentro. */
/* LA PORTADA SANGRA, Y PARA ESO HAY QUE SOLTAR DOS CLASES DEL SITIO
   El diseno pide la barra y la portada a ancho completo sobre fondo oscuro. La
   pagina cuelga de `general-seccion` (2% de padding lateral) dentro de
   `wrap_general` (tope de 1260 px y 40 px de margen arriba), asi que por
   defecto la banda oscura sale recortada y con una franja blanca alrededor:
   se lee como una tarjeta, no como una portada.

   Las dos reglas siguientes las sueltan SOLO en la pagina que contiene un
   `ob-panel`. `:has()` limita el alcance a este caso, sin tocar las clases que
   usan las otras 115 paginas. Donde no haya `:has()` la portada se queda
   dentro del contenedor, que es exactamente lo que hay hoy: se degrada a lo
   anterior, no se rompe.

   Lo que limita el contenido es `ob-tira`, dentro. */
.general-seccion:has(> .wrap_general > .ob-panel){padding-left:0;padding-right:0}
.wrap_general:has(> .ob-panel){max-width:none;margin-top:0}
.ob-panel{background:var(--ob-fondo);color:var(--ob-tinta);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.ob-panel,.ob-panel *{box-sizing:border-box}
.ob-tira{max-width:1440px;margin:0 auto;padding:0 32px}
/* EL RESET VA EN `:where()`, Y NO ES UN CAPRICHO
   `.ob-panel p` pesa mas que `.ob-fig-pie`: una clase y un elemento contra una
   clase sola. Escrito asi, el `margin:0` de aqui ganaba a TODOS los
   `margin-top` puestos por clase en un parrafo -el pie de figura, el subtitulo,
   la entradilla de portada, el «ahora dice» de las correcciones- y los mataba a
   los cuatro sin avisar. Solo sobrevivian los que llevan `style` en linea, que
   es justo el sintoma que despista: se veian bien los que iban a mano.

   `:where()` no suma especificidad, asi que esto queda en «un elemento» y
   cualquier clase le gana, que es lo que tiene que pasar en un reset. */
:where(.ob-panel) h1,:where(.ob-panel) h2,:where(.ob-panel) h3{margin:0;
  font-family:'Barlow',system-ui,sans-serif;font-weight:700;color:var(--ob-tinta)}
:where(.ob-panel) p{margin:0}
:where(.ob-panel) a{color:var(--ob-verde);text-decoration:none;
  border-bottom:1px solid rgba(21,122,75,.35)}
.ob-panel a:hover{color:var(--ob-verde-oscuro);border-bottom-color:var(--ob-verde-oscuro)}

/* ---------- barra superior ----------
   Pegajosa, no fija. El sitio ya tiene su propia cabecera arriba: dos barras
   fijas se pisan y obligarian a descontar las dos en cada ancla. Pegajosa se
   queda bajo la cabecera del sitio mientras dura el informe. */
/* ---------- la barra pegajosa, y el div que la mataba ----------
   Un `position:sticky` solo se pega DENTRO de la caja de su padre: en cuanto
   se scrollea mas alla del padre, se va con el. Webflow envuelve cada embed en
   un `div.w-embed`, asi que la barra vivia dentro de una caja de 585 px de
   alto y dejaba de pegarse a los 585 px de scroll.

   `display:contents` borra esa caja sin borrar el div: sus hijos pasan a ser
   hijos de `.ob-panel`, que es la caja que interesa. Ya pasó en la pagina
   anterior el 18/09/2026 -se pegaba en local y no en stage- y volvio a pasar
   aqui porque esta regla no se copio al montar el panel.

   La vista previa genera los mismos `div.w-embed` justamente para que este
   fallo se vea en local. */
/* TODOS los `w-embed` de dentro, no solo los de primer nivel. El indice vive en
   el suyo dentro de `.ob-cuerpo`, y ese envoltorio mide exactamente lo que mide
   el indice: 58 px. Un `sticky` dentro de una caja de 58 px se despega a los 58
   px de scroll, que es como no tenerlo. */
.ob-panel .w-embed{display:contents}

.ob-cabecera{position:sticky;top:0;z-index:40;background:var(--ob-tinta);
  color:#ffffff;border-bottom:1px solid rgba(255,255,255,.14)}
.ob-cabecera .ob-tira{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:12px;padding-bottom:12px}
.ob-cabecera-marca{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.ob-cabecera-logo{width:26px;height:26px;border-radius:6px;background:var(--ob-verde);
  color:#ffffff;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow',sans-serif;font-weight:700;font-size:15px;flex:0 0 auto}
.ob-cabecera-sep{color:rgba(255,255,255,.35)}
.ob-cabecera-seccion{color:rgba(255,255,255,.65);font-weight:500}
.ob-cabecera-dcha{display:flex;align-items:center;gap:14px;font-size:12.5px;
  color:rgba(255,255,255,.65)}

/* ---------- portada oscura ---------- */
.ob-portada{background:var(--ob-tinta);color:#ffffff;padding:44px 0 0}
.ob-portada-fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:40px;align-items:start;padding-bottom:36px}
.ob-portada h1{color:#ffffff;font-size:clamp(38px,4vw,58px);line-height:1.05;max-width:22ch}
.ob-portada-entradilla{margin-top:18px;font-size:16.5px;line-height:1.6;
  color:rgba(255,255,255,.8);max-width:72ch;text-wrap:pretty}
/* La tarjeta de prensa es de las pocas superficies que se permiten sobre el
   fondo oscuro, y va perfilada, no rellena. */
.ob-prensa{border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:20px}
.ob-prensa-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ob-verde)}
.ob-prensa p{margin-top:8px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.75)}
.ob-prensa-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------- las cuatro cifras de portada ---------- */
.ob-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.14)}
.ob-cifra{padding:22px 22px 26px;border-left:1px solid rgba(255,255,255,.14)}
.ob-cifra:first-child{border-left:0;padding-left:0}
.ob-cifra-v{font-family:'Barlow',sans-serif;font-weight:600;font-size:38px;
  line-height:1.02;color:#ffffff}
.ob-cifra-t{margin-top:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.8)}
.ob-cifra-n{margin-top:10px;font-size:11px;line-height:1.5;color:rgba(255,255,255,.6)}

/* ---------- cuerpo: indice lateral y panel ---------- */
.ob-cuerpo{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);
  gap:32px;padding-top:28px;padding-bottom:64px}
/* Las dos columnas van DICHAS, no dejadas al orden del DOM.
   En stage el indice acabo en la columna ancha y las ocho vistas en la
   estrecha, con las tarjetas a 108 px. El indice viaja dentro del `div.w-embed`
   que pone Webflow, y aunque ese div este en `display:contents` -y lo esta- la
   colocacion automatica no siempre lo resuelve como en local. Con la columna
   escrita, da igual cuantos divs meta Webflow por el camino. */
.ob-indice{grid-column:1}
.ob-panel-main{grid-column:2;min-width:0}
.ob-indice{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow-y:auto;
  align-self:start;display:grid;gap:2px}
.ob-indice-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ob-apagado);padding:0 0 10px 12px}
.ob-nav-tab{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:4px;
  width:100%;text-align:left;font-family:inherit;font-size:13.5px;line-height:1.4;
  color:var(--ob-texto-2);background:transparent;border:0;
  border-left:2px solid transparent;border-radius:0 8px 8px 0;
  padding:9px 12px;cursor:pointer}
.ob-nav-tab:hover{background:var(--ob-fondo)}
.ob-nav-n{font-size:11.5px;font-weight:700;color:var(--ob-apagado);
  font-variant-numeric:tabular-nums}
.ob-nav-tab[aria-selected="true"]{background:var(--ob-superficie);
  border-left-color:var(--ob-verde);color:var(--ob-tinta);font-weight:600}
.ob-nav-tab[aria-selected="true"] .ob-nav-n{color:var(--ob-verde)}

/* ---------- las ocho vistas ----------
   Todas en el HTML; solo se ve la activa. El interruptor es `aria-hidden` y no
   el atributo `hidden`, porque `display:grid` pisa a `hidden`. */
/* `minmax(0,1fr)` y no la columna implicita: el minimo automatico de una pista
   de rejilla es su CONTENIDO, asi que una figura que pide 560 px estiraba la
   seccion entera a 560 y se llevaba la pagina por delante en un movil. Con el
   minimo a cero, la que se sale es la figura -que para eso desliza- y no la
   pagina. */
.ob-seccion{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.ob-seccion[aria-hidden="true"]{display:none}

/* ---------- encabezado de bloque ---------- */
.ob-bloque-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.ob-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ob-verde)}
.ob-bloque-cab h2{margin-top:6px;font-size:clamp(28px,2.8vw,38px);line-height:1.1;
  max-width:34ch}

/* ---------- tarjetas ---------- */
.ob-tarjeta{background:var(--ob-superficie);border:1px solid var(--ob-borde);
  border-radius:12px;padding:24px}
.ob-tarjeta-oscura{background:var(--ob-tinta);color:#ffffff;border-color:var(--ob-tinta);
  padding:28px}
.ob-tarjeta-oscura h2,.ob-tarjeta-oscura h3{color:#ffffff}
.ob-tarjeta-suave{background:var(--ob-superficie-2)}
.ob-tarjeta-discontinua{background:transparent;border-style:dashed}
.ob-cifra-grande{font-family:'Barlow',sans-serif;font-weight:600;line-height:1.02}

/* ---------- rejillas de bloque ----------
   Dos columnas iguales, que es la que se repite en los cinco bloques. Las
   partidas 1/3 + 2/3 son otra cosa y viven en `.ob-figura`.

   `minmax(0,1fr)` y no `1fr`: el minimo de una pista de rejilla es `auto`, o
   sea el contenido, asi que una tabla ancha o un `nowrap` dentro ensancha la
   columna y desborda la pagina en vez de encogerse. */
.ob-rejilla-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  align-items:start}
.ob-rejilla-2.ob-igualadas{align-items:stretch}
.ob-cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:16px}
.ob-cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  margin-top:16px}

/* Las partidas desiguales. El numero es la proporcion que pide el bloque: en
   -300 la primera columna es fija, en las demas es un reparto. No hay una
   clase por cada proporcion imaginable, solo las cuatro que se usan; una
   quinta que haga falta se anade aqui y no con un `style` en la vista. */
.ob-partida-300{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.ob-partida-120{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.ob-partida-125{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.ob-partida-130{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}

/* ---------- cifras pequenas dentro de una tarjeta ----------
   `.ob-subcifras` va al pie de la tarjeta oscura: el `margin-top:auto` la
   empuja abajo para que las dos tarjetas de la fila acaben a la misma altura.
   Solo funciona si la tarjeta es un flex en columna. */
.ob-tarjeta-oscura{display:flex;flex-direction:column}
.ob-subcifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.ob-subcifra-v{display:block;font-family:'Barlow',sans-serif;font-size:24px;
  font-weight:700;line-height:1.1}
.ob-subcifra-t{display:block;margin-top:4px;font-size:12px;line-height:1.4;
  color:rgba(255,255,255,.6)}

.ob-cajas-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ob-caja{background:var(--ob-superficie-2);padding:14px}
.ob-caja-v{display:block;font-family:'Barlow',sans-serif;font-size:28px;font-weight:600;
  line-height:1.1}
.ob-caja-t{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;
  color:var(--ob-texto-2)}

/* ---------- el aviso que acompana a una cifra ----------
   Va DENTRO de la tarjeta del dato, separado por una linea, y no en una nota
   al pie de la seccion. Peticion del brief: el limite de una cifra tiene que
   viajar pegado a la cifra, porque si esta abajo se cita la cifra y se deja
   el limite. */
.ob-aviso{margin-top:18px;padding-top:16px;border-top:1px solid var(--ob-borde)}
.ob-tarjeta-oscura .ob-aviso{border-top-color:rgba(255,255,255,.18)}

/* ---------- dos cifras enfrentadas ----------
   Para el "55,35 € contra 40 €" de 3.4: la primera en verde y la segunda
   apagada, porque el hallazgo es la de arriba. */
.ob-contra{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-top:14px}
.ob-contra-v{font-family:'Barlow',sans-serif;font-size:34px;font-weight:600;
  line-height:1.05;color:var(--ob-verde)}
.ob-contra-apagado{color:var(--ob-apagado)}
.ob-contra-vs{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ob-apagado)}

/* ---------- cifra grande con su pie, dentro de una tarjeta ----------
   Es la tarjeta de KPI del brief. `.ob-kpi-clave` es la que lleva el color, y
   solo puede haber una por pareja: si las dos van en verde, el verde no dice
   cual es el hallazgo. */
.ob-kpi{display:flex;flex-direction:column;justify-content:center;gap:8px}
.ob-kpi-v{font-family:'Barlow',sans-serif;font-size:40px;font-weight:600;
  line-height:1.02}
.ob-kpi-clave .ob-kpi-v{color:var(--ob-verde)}
.ob-kpi-t{font-size:13px;line-height:1.45;color:var(--ob-texto-2)}


/* ---------- vista 1: las cuatro conclusiones ----------
   Rejilla de 2x2 y no de 4x1: son frases enteras, no etiquetas, y cuatro
   frases en fila se leen a cuatro palabras por linea. */
.ob-hallazgos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ob-hallazgo-cifra{font-family:'Barlow',sans-serif;font-weight:600;font-size:34px;
  line-height:1.05;color:var(--ob-verde)}
.ob-hallazgo-txt{margin-top:10px;font-size:16px;line-height:1.6;color:var(--ob-texto-2);
  text-wrap:pretty}
.ob-hallazgo-n{margin-top:14px;font-size:11px;line-height:1.5;color:var(--ob-apagado)}

/* ---------- botones ---------- */
.ob-panel button{font-family:inherit}
.ob-btn{display:inline-block;font-size:13.5px;font-weight:600;line-height:1.2;
  padding:10px 16px;border-radius:8px;border:1px solid var(--ob-borde);
  background:var(--ob-superficie);color:var(--ob-tinta);cursor:pointer;
  text-decoration:none}
.ob-panel a.ob-btn{border-bottom:1px solid var(--ob-borde)}
.ob-btn:hover{color:var(--ob-verde);border-color:var(--ob-verde)}
.ob-panel a.ob-btn:hover{border-bottom-color:var(--ob-verde)}
.ob-btn-verde{background:var(--ob-verde);border-color:var(--ob-verde);color:#ffffff}
.ob-btn-verde:hover{background:var(--ob-verde-oscuro);border-color:var(--ob-verde-oscuro);
  color:#ffffff}
/* Sobre fondo oscuro el secundario se perfila en blanco translucido. */
.ob-btn-claro{background:transparent;border-color:rgba(255,255,255,.28);color:#ffffff}
.ob-btn-claro:hover{background:var(--ob-verde);border-color:var(--ob-verde);color:#ffffff}
.ob-btn-mini{font-size:12px;padding:7px 12px}

/* ---------- notas y etiquetas ---------- */
.ob-nota{font-size:12px;line-height:1.5;color:var(--ob-apagado)}
.ob-cab-col{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ob-apagado)}
.ob-texto{font-size:16px;line-height:1.6;color:var(--ob-texto-2);text-wrap:pretty}
.ob-texto-grande{font-size:18px}

/* El boton mientras dice «copiado». Solo cambia el color: el texto ya cambia
   solo, y un boton que ademas salta de tamano mueve lo que hay al lado. */
.ob-copiado{color:var(--ob-verde);border-color:var(--ob-verde)}
.ob-texto strong{color:var(--ob-tinta);font-weight:700}
.ob-num{font-variant-numeric:tabular-nums}

/* ---------- listas de prosa ----------
   La metodologia es casi toda texto, y en texto la maquetacion es el ritmo:
   una lista con su marca y su sangria se lee como lista, y un parrafo detras
   de otro se lee como un muro. */
.ob-lista{margin:12px 0 0;padding-left:20px;display:grid;gap:10px;
  font-size:15px;line-height:1.55;color:var(--ob-texto-2)}
.ob-lista li{padding-left:2px}

/* Los tres pasos del protocolo de depuracion. El numero va en su propia
   columna para que los parrafos queden alineados entre si. */
.ob-pasos{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.ob-pasos li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;
  align-items:start;font-size:15px;line-height:1.55;color:var(--ob-texto-2)}
.ob-paso-n{font-family:'Barlow',sans-serif;font-size:18px;font-weight:700;
  line-height:1.3;color:var(--ob-verde)}

/* Termino y definicion: las fuentes y los sesgos. El termino en negrita
   arriba y la explicacion debajo, que es como se lee una ficha. */
.ob-fuentes{margin:14px 0 0}
.ob-fuentes dt{font-size:14.5px;font-weight:700;color:var(--ob-tinta)}
.ob-fuentes dd{margin:6px 0 16px;font-size:14.5px;line-height:1.55;
  color:var(--ob-texto-2)}
.ob-fuentes dd:last-child{margin-bottom:0}
.ob-fuentes-oscura dt{color:#ffffff}
.ob-fuentes-oscura dd{color:rgba(255,255,255,.75)}

/* ---------- ficha tecnica ----------
   Aqui SI hay tabla, y es la excepcion a "en esta pagina no hay tablas": lo
   que se compara no son cifras entre si, es un campo con su valor. Una tabla
   de dos columnas es exactamente eso. */
.ob-ficha{width:100%;border-collapse:collapse;margin-top:16px}
.ob-ficha th{width:210px;text-align:left;vertical-align:top;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--ob-borde);font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ob-apagado)}
.ob-ficha td{padding:12px 0;border-bottom:1px solid var(--ob-borde);
  font-size:14.5px;line-height:1.55;color:var(--ob-texto-2)}

/* ---------- correcciones ----------
   La fecha a la izquierda y el par "decia / ahora dice" a la derecha. El
   "decia" va tachado a proposito: se tiene que ver de un vistazo cual de los
   dos parrafos es el que ya no vale. */
.ob-correcciones{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.ob-correcciones li{display:grid;grid-template-columns:minmax(0,176px) minmax(0,1fr);
  gap:24px;padding:18px 0;border-top:1px solid var(--ob-borde)}
.ob-corr-fecha{font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:var(--ob-verde)}
/* El tachado hereda el color del texto a proposito. Con
   `text-decoration-color` puesto al gris del borde no se veia, y entonces los
   dos parrafos parecian decir lo mismo. */
.ob-corr-decia{font-size:14px;line-height:1.55;color:var(--ob-apagado);
  text-decoration:line-through}
.ob-corr-ahora{margin-top:10px;font-size:14.5px;line-height:1.55;
  color:var(--ob-texto-2)}

/* ---------- los nueve ficheros ----------
   Tarjetas y no filas de tabla porque cada una es un enlace de descarga: un
   objetivo de clic de 20 px de alto en una tabla es un objetivo que se falla. */
.ob-datasets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
/* Son fichas, no enlaces: nada de `:hover` ni de cursor de mano. Una tarjeta
   que reacciona al raton promete un clic, y aqui el clic no existe. */
.ob-dataset{display:flex;flex-direction:column;gap:6px;padding:16px;
  background:var(--ob-superficie-2);border:1px solid var(--ob-borde);
  border-radius:10px;color:inherit}
.ob-dataset-t{font-size:14.5px;font-weight:700;color:var(--ob-tinta)}
.ob-dataset-d{font-size:13px;line-height:1.45;color:var(--ob-texto-2)}
.ob-dataset-m{margin-top:auto;padding-top:8px;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ob-apagado)}

/* ---------- el email ---------- */
.ob-email-tit{font-size:15px;font-weight:700;color:var(--ob-tinta)}
.ob-email-campo{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ob-email-campo input{flex:1 1 240px;font-family:inherit;font-size:15px;
  color:var(--ob-tinta);background:var(--ob-superficie);
  border:1px solid var(--ob-borde);border-radius:8px;padding:11px 14px}
.ob-email-campo input::placeholder{color:var(--ob-apagado)}
/* El campo trampa del formulario. Fuera de la pantalla y sin quitarlo del
   arbol: un `display:none` lo salta cualquier bot que mire el estilo. */
.ob-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ob-email-aviso{margin-top:10px;font-size:13px}
.ob-email-error{color:#B42318}
.ob-email-ok{color:var(--ob-verde)}

/* ---------- explorador de tablas ----------
   Los ids son `ob-px-*` y no `ob-exp-*`: ese segundo prefijo lo usa todavia
   el explorador del informe publicado, que pinta con otras clases. */
.ob-px-mandos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--ob-borde)}
/* Cuatro y no cinco desde que el boton de descargar se fue: los CSV se piden,
   no se bajan de aqui. */
.ob-px-mandos-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ob-px-et{display:block;margin-bottom:6px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ob-apagado)}
.ob-px-mandos select,.ob-px-mandos input{width:100%;font-family:inherit;
  font-size:14px;color:var(--ob-tinta);background:var(--ob-superficie);
  border:1px solid var(--ob-borde);border-radius:8px;padding:10px 12px}
.ob-px-boton{display:flex;align-items:flex-end}
.ob-px-boton .ob-btn{width:100%;justify-content:center;text-align:center}
.ob-px-tabla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 32px;margin-top:20px}
.ob-px-pie{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.ob-px-pie #ob-px-cuenta{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ob-apagado)}

/* ============================================================
   POR DEBAJO DE 1000 px
   ============================================================
   El panel esta pensado para una pantalla ancha: un indice fijo a la izquierda
   y dos columnas a la derecha. En un movil no cabe ninguna de las dos cosas.

   EL INDICE PASA DE COLUMNA A TIRA, Y NO A UN DESPLEGABLE
   Las ocho secciones son el mapa del informe: verlas -aunque haya que
   deslizar- dice cuanto hay y donde esta uno. Un `select` las esconde todas
   menos la actual y convierte el indice en un tramite.

   La tira se queda pegada justo debajo de la cabecera. A que altura lo dice
   `--ob-alto-cabecera`, que mide el JS: la cabecera cambia de alto segun lo que
   quepa en ella, y un numero fijo aqui la solaparia en cuanto envolviera.

   TODO LO QUE ERA DE DOS COLUMNAS PASA A UNA
   Sin excepciones: las parejas de este informe son «dato y su limite» o «dato y
   su grafica», y las dos se leen igual una debajo de otra. El orden del HTML no
   se toca, porque ese orden ya es el de lectura.
   ============================================================ */
@media (max-width:1000px){
  .ob-tira{padding:0 20px}

  .ob-cuerpo{grid-template-columns:minmax(0,1fr);gap:20px}
  .ob-indice,.ob-panel-main{grid-column:1}

  /* El indice es a la vez lo que se pega y lo que desliza. Se puede: un
     elemento `sticky` puede tener su propio `overflow`. */
  .ob-indice{position:sticky;top:var(--ob-alto-cabecera,56px);z-index:30;
    display:flex;gap:8px;overflow-x:auto;max-height:none;
    margin:0 -20px;padding:10px 20px;
    background:var(--ob-fondo);border-bottom:1px solid var(--ob-borde);
    scroll-snap-type:x proximity;scrollbar-width:thin}
  .ob-indice-kicker{display:none}
  .ob-nav-tab{flex:0 0 auto;scroll-snap-align:start;
    border-left:0;border-bottom:2px solid transparent;border-radius:8px;
    padding:8px 12px;white-space:nowrap}
  .ob-nav-tab[aria-selected="true"]{border-left:0;
    border-bottom-color:var(--ob-verde);background:var(--ob-superficie)}
  .ob-nav-n{display:none}

  /* Todas las rejillas de dos y de tres, a una. */
  .ob-rejilla-2,.ob-cols-2,.ob-cols-3,.ob-hallazgos,.ob-cajas-2,
  .ob-px-tabla,.ob-datasets,
  .ob-partida-300,.ob-partida-120,.ob-partida-125,
  .ob-partida-130{grid-template-columns:minmax(0,1fr)}
  .ob-cols-3,.ob-cols-2{gap:16px}

  /* La ficha tecnica deja de ser una tabla de dos columnas: el campo encima de
     su valor. Un rotulo de 210 px en un movil deja 100 px para el dato. */
  .ob-ficha th,.ob-ficha td{display:block;width:auto;border-bottom:0;padding:0}
  .ob-ficha th{padding-top:16px}
  .ob-ficha td{padding:6px 0 16px;border-bottom:1px solid var(--ob-borde)}

  /* Las correcciones, igual: la fecha encima de su par. */
  .ob-correcciones li{grid-template-columns:minmax(0,1fr);gap:10px}

  /* Los mandos del explorador, de cuatro a dos. */
  .ob-px-mandos,.ob-px-mandos-4{grid-template-columns:repeat(2,minmax(0,1fr))}

  .ob-bloque-cab{flex-wrap:wrap}
  .ob-bloque-cab h2{max-width:none}

  /* LA PORTADA
     La tarjeta de prensa pedia 360 px fijos al lado del titular. A 375 px eso
     dejaba el texto en una columna de un par de dedos y la entradilla salia a
     palabra por linea. Debajo del titular, y las cuatro cifras de cuatro en
     fila a dos en dos: el separador vertical pasa a horizontal, que es lo que
     sigue diciendo «son cuatro cosas distintas». */
  .ob-portada{padding-top:32px}
  .ob-portada-fila{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:28px}
  .ob-portada h1{max-width:none}
  .ob-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-cifra{padding:20px 20px 22px}
  .ob-cifra:nth-child(odd){border-left:0;padding-left:0}
  .ob-cifra:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}

/* ---------- movil de verdad ---------- */
@media (max-width:640px){
  .ob-tira{padding:0 16px}
  .ob-indice{margin:0 -16px;padding:10px 16px}
  .ob-tarjeta{padding:18px}
  .ob-tarjeta-oscura{padding:20px}
  .ob-fig{padding:18px}

  /* La fecha y el rotulo de seccion de la cabecera se van. No son datos que se
     consulten, son un sello, y compiten por el ancho con el boton de copiar la
     cita, que si se usa. La fecha sigue entera en la portada. */
  .ob-cabecera-dcha > span{display:none}
  .ob-cabecera-seccion,.ob-cabecera-sep{display:none}

  .ob-px-mandos,.ob-px-mandos-4{grid-template-columns:minmax(0,1fr)}
  .ob-subcifras{grid-template-columns:minmax(0,1fr);gap:12px}
  .ob-contra{gap:8px}
  .ob-email-campo{flex-direction:column;align-items:stretch}

  .ob-cifras{grid-template-columns:minmax(0,1fr)}
  .ob-cifra{border-left:0;padding:18px 0}
  .ob-cifra:nth-child(n+2){border-top:1px solid rgba(255,255,255,.14)}
  .ob-cifra-v{font-size:32px}
}