/* ============================================================
   CONTENT.CSS -- sistema de contenido enriquecido (prosa, figuras,
   piezas de datos, formulas) para los modulos de "Contenido" de
   CUALQUIER tema. Nace del Modulo 1, pero es intencionalmente
   generico (prefijo "cn-") para que Tema 2 y siguientes reutilicen
   el mismo vocabulario visual sin duplicar CSS.
   Usa solo tokens de tokens.css -- cero colores hardcodeados aqui,
   salvo la paleta categorica de las tablas visuales (--dv-*), que
   es intrinseca a esas piezas de datos y no forma parte del
   sistema de marca (ver comentario junto a su declaracion).
   ============================================================ */

:root {
  /* Paleta categorica SOLO para agrupar filas/franjas en las tablas
     visuales de datos (conductividad, h, emisividad). No es marca:
     son "colores de categoria" arbitrarios para distinguir grupos. */
  --dv-metales: var(--brand-primary);
  --dv-cristalinos: var(--color-amber);
  --dv-liquidos: #5457C7;
  --dv-aislantes: var(--color-accent-green);
  --dv-gases: #A7A9E8;
  --dv-fase: var(--color-amber);

  --shadow-figura: 0 18px 40px rgba(27, 29, 58, 0.22);
}

/* ================= BLOQUES DE LECTURA ================= */
/* Antes .cn-lectura limitaba TODO el modulo (texto, galerias, piezas de
   datos, mecanismos) a 780px, anidado dentro de un #main-content ya
   limitado a 1100px -- de ahi el hueco en blanco a la derecha. Despues se
   probo dejar el texto suelto en una columna de 760px mientras las piezas
   visuales usaban todo el ancho -- pero eso rompia la otra exigencia de
   Rafael: el texto debe ocupar SIEMPRE el mismo ancho, igual que figuras,
   pares texto+imagen, galerias y piezas de datos, sin una columna de
   lectura mas estrecha por separado. .cn-lectura usa el 100% de
   #main-content y ya no hay ningun tope de ancho especifico para parrafos
   o listas: todo el contenido de un modulo comparte el mismo ancho. */
.cn-lectura { max-width: 100%; }

.cn-bloque {
  position: relative;
  margin-bottom: 52px;
  padding-left: 20px;
  border-left: 3px solid var(--brand-primary);
}
.cn-bloque:last-child { margin-bottom: 0; }

.cn-bloque__numero {
  font-family: var(--font-mono);
  color: var(--brand-primary);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cn-bloque__numero-fantasma {
  position: absolute;
  top: -16px;
  right: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 5.8rem);
  font-weight: 800;
  color: var(--brand-primary);
  opacity: 0.05;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.cn-bloque h3 {
  position: relative;
  font-family: var(--font-display);
  color: var(--brand-primary);
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  font-weight: 800;
  margin: 4px 0 16px 0;
}

.cn-bloque h4 {
  font-family: var(--font-display);
  color: var(--brand-primary);
  font-size: 1.08rem;
  font-weight: 700;
  margin: 26px 0 10px 0;
  /* La cabecera queda "sticky" (position:sticky) y el clic en un subtitulo
     del indice hace scrollIntoView hasta este h4 -- sin este margen, la
     cabecera lo tapa parcialmente al llegar. */
  scroll-margin-top: 84px;
}

.cn-bloque p { margin-bottom: 14px; font-size: 1rem; }
.cn-bloque p:last-child { margin-bottom: 0; }
.cn-bloque ul, .cn-bloque ol { margin: 0 0 14px 0; padding-left: 22px; }
.cn-bloque li { margin-bottom: 6px; font-size: 1rem; }
.cn-bloque strong { color: var(--brand-primary); font-weight: 700; }

/* Frase ancla / ejemplo destacado */
.cn-ancla {
  background: var(--color-surface);
  border-left: 4px solid var(--color-interactive);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  margin: 18px 0;
  box-shadow: var(--shadow-card);
  font-size: 0.96rem;
}
.cn-ancla__etiqueta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-primary);
  margin-bottom: 6px;
}

/* Dato curioso / comentario que da color al contenido -- usa el
   acento ambar de "uso libre", nunca cian ni rojo. */
.cn-comentario {
  background: #FBF7EC;
  border: 1px solid #F0E1BC;
  border-left: 4px solid var(--color-amber);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  margin: 16px 0;
}
.cn-comentario__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8A6416;
  margin-bottom: 6px;
}
.cn-comentario ul { padding-left: 18px; margin: 6px 0 0 0; }
.cn-comentario li { font-size: 0.92rem; margin-bottom: 5px; }

/* ================= BLOQUE MATEMATICO (KaTeX manual) ================= */
.math-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 22px 24px;
  margin: 18px 0 0 0;
  text-align: center;
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}
.math-block .katex { font-size: clamp(1.2em, 1em + 1.1vw, 1.6em); }
.math-block__nota {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-muted);
  text-align: left;
}

.cn-glosario-formula {
  list-style: none;
  padding-left: 0;
  margin: 12px 0 0 0;
  display: grid;
  gap: 8px;
}
.cn-glosario-formula li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 0.94rem; align-items: baseline; }
.cn-glosario-formula .cn-var { font-family: var(--font-mono); color: var(--brand-primary); font-weight: 600; }

/* Leyenda compacta bajo cada formula del cuerpo (no la del Formulario) */
.cn-leyenda-formula {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 18px 0;
  padding: 10px 24px 14px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--brand-primary);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 0.86rem;
}
.cn-leyenda-formula li { display: flex; gap: 5px; align-items: baseline; }
.cn-leyenda-formula .cn-var { font-family: var(--font-mono); color: var(--brand-primary); font-weight: 700; }
.cn-leyenda-formula .cn-sig { color: var(--color-muted); }

/* Dos (o mas) formulas cortas y relacionadas lado a lado -- ver formulasFilaHTML() en
   content-blocks.js. Cada .cn-formulas-fila__item es una celda de grid que contiene su propio
   math-block + leyenda, para que ambas piezas se muevan juntas. En movil se apilan (ver media
   query mas abajo). */
.cn-formulas-fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0 0;
  align-items: start;
}
.cn-formulas-fila__item { display: flex; flex-direction: column; }
.cn-formulas-fila__item .math-block { margin-top: 0; flex: 1; }
.cn-formulas-fila__item .cn-leyenda-formula { margin-bottom: 0; }

/* ================= FIGURAS ================= */
.cn-figura { margin: 24px auto 26px auto; max-width: 640px; }
.cn-figura__marco {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-figura);
}
.cn-figura__marco img { width: 100%; display: block; }
.cn-figura__pie {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--color-muted);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.cn-figura__num { font-family: var(--font-mono); color: var(--brand-primary); font-weight: 600; flex-shrink: 0; }

.cn-figura__etiqueta {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(20, 21, 46, 0.72);
  backdrop-filter: blur(3px);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.25);
}
.cn-figura__etiqueta--frio { border-color: var(--thermal-cool); }
.cn-figura__etiqueta--caliente { border-color: var(--thermal-hot); }
.cn-figura__etiqueta--ambar { border-color: var(--color-amber); }

/* margin 24px auto centra la figura cuando "mini" se usa suelta (no dentro de un cn-par); dentro
   de un cn-par, .cn-par__imagen .cn-figura (mas especifica) fuerza margin:0 igualmente, asi que
   este cambio no afecta esos casos. */
.cn-figura--mini { margin: 24px auto; max-width: 380px; }
.cn-figura--mini .cn-figura__marco { border-radius: var(--radius-md); }
.cn-figura--mini .cn-figura__pie { font-size: 0.8rem; }

/* Icono/pictograma simple (recuadro de una diapositiva, esquema) emparejado con 2-3 lineas de
   texto -- mas pequeno que mini, para que la pareja quede equilibrada: un icono de este tipo a
   320px de ancho queda mucho mas alto que el texto que lo acompana y el par se ve descompensado
   dentro de .cn-par (que centra verticalmente). */
.cn-figura--icono { margin: 0 auto; max-width: 220px; }
.cn-figura--icono .cn-figura__marco { border-radius: var(--radius-md); }
.cn-figura--icono .cn-figura__pie { font-size: 0.8rem; }

.cn-figura__leyenda-temp {
  position: absolute;
  bottom: 12px; left: 12px;
  display: flex; gap: 10px;
  background: rgba(20, 21, 46, 0.55);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  color: #FFFFFF;
}
.cn-figura__leyenda-temp span { display: flex; align-items: center; gap: 5px; }
.cn-figura__leyenda-temp .punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cn-figura__leyenda-temp .punto--frio { background: var(--thermal-cool); }
.cn-figura__leyenda-temp .punto--caliente { background: var(--thermal-hot); }

.cn-figura__leyenda-pie {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 10px; font-size: 0.84rem; color: var(--color-muted);
}
.cn-figura__leyenda-pie strong { color: var(--brand-primary); }

/* ================= TEXTO + IMAGEN EMPAREJADOS ================= */
.cn-par { display: flex; align-items: center; gap: 30px; margin: 20px 0 26px 0; }
.cn-par--imagen-izq { flex-direction: row-reverse; }
.cn-par__texto { flex: 1 1 54%; min-width: 0; }
.cn-par__texto p:last-child, .cn-par__texto ul:last-child { margin-bottom: 0; }
.cn-par__imagen { flex: 1 1 40%; min-width: 0; display: flex; justify-content: center; }
.cn-par__imagen .cn-figura { margin: 0; width: 100%; }

/* Par texto+imagen envuelto como tarjeta autocontenida -- un mecanismo (icono + definición) o
   un resumen (foto + texto) por fila, no un párrafo cualquiera con una figura al lado. */
.cn-par--tarjeta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
}

/* Bloque de titulo + texto + imagen combinados en una sola tarjeta -- para cuando el titulo de
   un apartado va seguido directamente de una figura de apoyo. Con align-items:center (el de
   .cn-par por defecto) el texto, mas corto que la imagen, quedaba centrado verticalmente dentro
   de la fila y dejaba un hueco vacio justo debajo del titulo; con align-items:flex-start el
   texto arranca pegado al titulo, sin hueco, sea cual sea la altura de la imagen. La imagen NO
   se fuerza a una altura ajena a su proporcion (eso producia recuadros con bandas en blanco
   cuando la figura era mas vertical/horizontal que la caja): se muestra a su ancho de columna
   completo y con su alto natural. */
.cn-par-bloque--tarjeta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
  margin: 20px 0 26px 0;
}
.cn-par-bloque--tarjeta > h3,
.cn-par-bloque--tarjeta > h4 { margin-top: 0; }
.cn-par-bloque--tarjeta .cn-par { align-items: flex-start; margin: 14px 0 0 0; }

/* Contenido adicional dentro de la misma tarjeta titulo+texto+imagen, debajo del par -- ver el
   parametro extraHTML de bloqueTituloParHTML(). Separado con un borde superior sutil para que
   se lea como continuacion del mismo bloque, no como una tarjeta aparte. */
.cn-par-bloque__extra {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}

/* Imagen apilada sobre su texto (en vez de emparejadas en fila) -- ver imagenTextoApiladoHTML()
   y el uso de esta misma clase dentro de .cn-par-bloque__extra. */
.cn-apilado .cn-figura { margin: 0 auto 18px auto; }
.cn-apilado__texto ul:last-child, .cn-apilado__texto p:last-child { margin-bottom: 0; }

/* ================= GALERIA DE IMAGENES (aplicaciones, ejemplos) ================= */
.cn-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 22px 0 6px 0;
}
.cn-galeria__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-card);
  background: #14152E;
}
.cn-galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cn-galeria__item:hover img { transform: scale(1.06); }
.cn-galeria__etiqueta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px 8px 12px;
  background: linear-gradient(0deg, rgba(20,21,46,0.85) 0%, rgba(20,21,46,0) 100%);
  color: #FFFFFF; font-size: 0.84rem; font-weight: 600;
}

/* Tarjetas de aplicaciones -- imagen + etiqueta + comentario, 1-2 por fila. A diferencia de
   .cn-galeria (etiqueta superpuesta, sin comentario), cada tarjeta es una unidad autocontenida
   que justifica la imagen con un par de frases sobre el papel de la transferencia de calor en
   esa aplicación concreta. */
.cn-aplicaciones-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 22px 0 6px 0;
}
.cn-aplicacion-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cn-aplicacion-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
.cn-aplicacion-card__cuerpo { padding: 16px 20px 20px 20px; }
.cn-aplicacion-card__etiqueta {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 1.02rem;
  margin-bottom: 6px;
}
.cn-aplicacion-card__comentario { font-size: 0.92rem; line-height: 1.5; margin: 0; }

/* ================= PIEZAS DE DATOS ================= */
.cn-datos {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 22px;
  margin: 24px 0 28px 0;
}
.cn-datos__titulo { font-family: var(--font-display); font-weight: 700; color: var(--brand-primary); font-size: 1.02rem; margin-bottom: 4px; }
.cn-datos__subtitulo { font-size: 0.88rem; color: var(--color-muted); margin-bottom: 18px; }

/* --- Conductividad: barras logaritmicas agrupadas --- */
.cn-conductividad__grupo { margin-bottom: 16px; }
.cn-conductividad__grupo:last-child { margin-bottom: 0; }
.cn-conductividad__grupo-titulo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted);
  margin-bottom: 9px;
}
.cn-conductividad__punto { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.cn-barra-log { display: grid; grid-template-columns: 132px 1fr 84px; align-items: center; gap: 12px; margin-bottom: 8px; }
.cn-barra-log__nombre { font-size: 0.9rem; color: var(--color-text); }
.cn-barra-log__pista { position: relative; height: 14px; background: var(--color-bg); border-radius: 999px; overflow: hidden; }
.cn-barra-log__relleno { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 999px; transition: width 0.6s ease; }
.cn-barra-log__valor { font-family: var(--font-mono); font-size: 0.82rem; text-align: right; color: var(--color-muted); }
.cn-conductividad__destacado {
  display: flex; gap: 12px; align-items: flex-start;
  background: #FFF8EA; border: 1px solid #F0E1BC; border-left: 4px solid var(--color-amber);
  border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 14px 16px; margin-top: 16px;
}
.cn-conductividad__destacado .icono { font-size: 1.1rem; flex-shrink: 0; }
.cn-conductividad__destacado p { font-size: 0.9rem; color: #7A5A12; margin: 0; }

/* --- Valores de h: franjas de rango --- */
.cn-franjas { display: grid; gap: 20px; }
.cn-franja__cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cn-franja__nombre { font-family: var(--font-display); font-weight: 700; font-size: 0.96rem; color: var(--color-text); }
.cn-franja__nota { font-size: 0.78rem; color: var(--color-muted); }
.cn-franja__pista { position: relative; height: 46px; background: var(--color-bg); border-radius: var(--radius-sm); overflow: hidden; }
.cn-franja__rango {
  position: absolute; border-radius: 999px; display: flex; align-items: center; padding: 0 10px;
  font-family: var(--font-mono); font-size: 0.7rem; color: #FFFFFF; white-space: nowrap; overflow: hidden;
}
.cn-franja__rango--liquido { top: 4px; height: 16px; opacity: 0.95; }
.cn-franja__rango--gas { bottom: 4px; top: auto; height: 16px; opacity: 0.88; }
.cn-franja--fase .cn-franja__pista { background: #FDEDEA; }
.cn-franja--fase .cn-franja__rango { background: var(--dv-fase); height: 30px; top: 8px; font-size: 0.76rem; font-weight: 600; }
.cn-franja__eje { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-muted); }

/* --- Emisividad: tarjetas con gauge --- */
.cn-emisividad { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cn-gauge-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px 14px 14px; }
.cn-gauge-card__nombre { font-size: 0.84rem; font-weight: 600; color: var(--color-text); margin-bottom: 10px; min-height: 2.4em; }
.cn-gauge-card__pista { position: relative; height: 8px; background: #E4E4EE; border-radius: 999px; margin-bottom: 6px; }
.cn-gauge-card__relleno { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 999px; }
.cn-gauge-card__valor { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-muted); }

/* ================= FICHA DE FORMULA (pestana Formulario) ================= */
.cn-formula-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 20px 22px; margin-bottom: 18px;
}
.cn-formula-card__titulo { font-family: var(--font-display); font-weight: 700; color: var(--brand-primary); font-size: 1.02rem; margin-bottom: 4px; }
.cn-formula-card__origen { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 12px; }

/* ================= PANEL DE MECANISMOS (SVG con pestanas) ================= */
.cn-mecanismos { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; margin: 20px 0; }
.cn-mecanismos__titulo { font-family: var(--font-display); font-weight: 700; color: var(--brand-primary); font-size: 1rem; margin-bottom: 14px; }
.cn-mecanismos__tabs { display: flex; gap: 4px; padding: 4px; background: var(--color-bg); border-radius: var(--radius-sm); margin-bottom: 16px; }
.cn-mecanismos__tab {
  flex: 1; padding: 8px 10px; border: none; background: none; border-radius: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--color-text);
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.cn-mecanismos__tab.active { background: var(--color-surface); color: var(--brand-primary); box-shadow: var(--shadow-card); }
.cn-mecanismos__panel { display: none; }
.cn-mecanismos__panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.cn-mecanismos__panel svg { width: 100%; height: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cn-mecanismos__panel h5 { font-family: var(--font-display); color: var(--brand-primary); font-weight: 700; margin-bottom: 6px; }
.cn-mecanismos__panel p, .cn-mecanismos__panel li { font-size: 0.92rem; }
.cn-mecanismos__panel ul { padding-left: 18px; margin-top: 4px; }

/* ================= UTILIDADES ================= */
.cn-nota-lateral {
  font-size: 0.84rem; color: var(--color-muted);
  border-left: 3px solid var(--color-border); padding-left: 12px; margin: 14px 0; font-style: italic;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 640px) {
  .cn-aplicaciones-grid { grid-template-columns: 1fr; }
  .cn-bloque { padding-left: 14px; }
  .cn-bloque__numero-fantasma { display: none; }
  .math-block { padding: 16px 14px; }
  .cn-leyenda-formula { padding: 10px 14px 12px 14px; }
  .cn-barra-log { grid-template-columns: 96px 1fr 60px; gap: 8px; }
  .cn-barra-log__nombre { font-size: 0.8rem; }
  .cn-galeria { grid-template-columns: repeat(2, 1fr); }
  .cn-glosario-formula li { grid-template-columns: 74px 1fr; }
  .cn-emisividad { grid-template-columns: repeat(2, 1fr); }
  .cn-figura__etiqueta { font-size: 0.7rem; padding: 3px 9px; }
  .cn-par, .cn-par--imagen-izq { flex-direction: column; gap: 14px; margin: 16px 0 20px 0; }
  .cn-par__imagen { order: -1; }
  .cn-par--tarjeta { padding: 18px 16px; }
  .cn-par-bloque--tarjeta { padding: 18px 16px; margin: 16px 0 20px 0; }
  .cn-par-bloque__extra { margin-top: 16px; padding-top: 16px; }
  .cn-figura--mini { max-width: 300px; margin: 0 auto; }
  .cn-figura--icono { max-width: 190px; margin: 0 auto; }
  .cn-formulas-fila { grid-template-columns: 1fr; }
  .cn-mecanismos__panel.active { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .cn-galeria { grid-template-columns: 1fr 1fr; }
  .cn-emisividad { grid-template-columns: 1fr 1fr; }
  .cn-barra-log { grid-template-columns: 82px 1fr 52px; }
}