/* ==========================================================================
   Ciudadano Liberal — sistema visual (UI kit)
   Fuente: Claude Design · «Ciudadano Liberal.dc.html» (artboards 1a–1h, 2a–2f)
   Medidas tomadas del diseño a 1440 px (desktop) y 390 px (móvil).
   Monocromo #e4e2dd / #100f0f · Anton · Be Vietnam Pro · Instrument Sans
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --fondo: #e4e2dd;
  --tinta: #100f0f;
  --gris: #5c5a55;        /* texto secundario · 5,6:1 */
  --trama: #d6d3cc;       /* trama de placeholders */
  --borde-suave: #c9c6be; /* borde de placeholders */

  --f-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-ui: 'Be Vietnam Pro', system-ui, sans-serif;
  --f-texto: 'Instrument Sans', system-ui, sans-serif;
  --f-mono: ui-monospace, Menlo, Consolas, monospace;

  --c-bg: var(--fondo);
  --c-fg: var(--tinta);
  --linea: 1px solid var(--tinta);

  --ancho: 1440px;
  --margen: 48px;
  /* margen lateral: 48 px, y en pantallas > 1440 centra el contenido */
  --px: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--f-texto); }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
button, input { font: inherit; color: inherit; }

/* Superficie inversa. Máximo un bloque inverso por pantalla. */
.inverso {
  --c-bg: var(--tinta);
  --c-fg: var(--fondo);
  --linea: 1px solid var(--fondo);
  background: var(--tinta);
  color: var(--fondo);
}
.relleno { background: var(--c-fg); color: var(--c-bg); }
.gris { color: var(--gris); }
.inverso .gris, .inverso .kicker--gris { color: inherit; opacity: .6; }

/* ---------- 3. Tipografía ---------- */
.kicker { font: 500 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.kicker--gris { color: var(--gris); }
.rotulo { font: 500 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; } /* módulos pedagógicos */
.enlace-ui { font: 500 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.enlace-seccion { font: 500 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; border-bottom: var(--linea); padding-bottom: 4px; }
.fig { font: 400 11px/1.4 var(--f-mono); color: var(--gris); }
.inverso .fig { color: inherit; opacity: .7; }
.display { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; }

.t-hero      { font: 400 clamp(86px, 12.222vw, 176px)/.97 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.t-hero-noticia { font: 400 clamp(72px, 11.111vw, 160px)/.97 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.t-hero-ancho { font: 400 clamp(72px, 14.722vw, 212px)/.96 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; }
.t-h1-articulo { font: 400 clamp(64px, 8.333vw, 120px)/.97 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.t-h2        { font: 400 clamp(46px, 5vw, 72px)/.98 var(--f-display); text-transform: uppercase; }
.t-h2-xl     { font: 400 clamp(72px, 8.889vw, 128px)/.96 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.entradilla  { font: 400 20px/1.5 var(--f-texto); max-width: 560px; }

/* ---------- 4. Utilidades de respuesta ---------- */
.solo-movil { display: none; }

/* ---------- 5. Logo (lockup tipográfico) ----------
   font-size = altura de «LIBERAL». Ciudadano 0,57× · lema 0,15× · tracking .2em.
   Nunca sin lema. Mínimo 44 px de «LIBERAL» (35 px en cabecera móvil). */
.logo { display: inline-flex; flex-direction: column; align-items: center; width: max-content; font-family: var(--f-display); font-size: 44px; line-height: .94; }
.logo:hover { text-decoration: none; }
.logo__ciudadano { font-size: .568em; letter-spacing: .01em; margin-bottom: .12em; }
.logo__liberal { text-transform: uppercase; letter-spacing: .005em; }
.logo__lema { font: 500 .15em/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; margin-top: .75em; }
.logo--izq { align-items: flex-start; }
.logo--regular .logo__lema { font-weight: 400; }

/* ---------- 6. Botones y formularios ---------- */
.boton { display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; background: var(--c-fg); color: var(--c-bg); padding: 16px 24px; font: 500 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; border: 0; cursor: pointer; }
.boton--secundario { background: transparent; color: inherit; border: var(--linea); padding: 15px 24px; }

.form-linea { display: flex; border: var(--linea); }
.form-linea input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 16px 18px; font: 400 16px var(--f-texto); color: var(--tinta); outline: none; }
.form-linea button { border: 0; background: var(--tinta); color: var(--fondo); padding: 0 24px; font: 500 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.form-buscar { display: flex; align-items: center; gap: 12px; border-bottom: var(--linea); padding: 0 0 10px; }
.form-buscar .icono-lupa { width: 12px; height: 12px; flex: none; }
.form-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 6px 0; font: 400 22px var(--f-texto); color: var(--tinta); outline: none; }

.icono-lupa { display: block; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; }

/* ---------- 7. Cabecera ---------- */
.cabecera { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--px); border-bottom: var(--linea); }
.nav { display: flex; align-items: center; gap: 34px; font: 500 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.nav a[aria-current] { border-bottom: var(--linea); padding-bottom: 3px; }
.boton-buscar { display: flex; align-items: center; gap: 10px; border: var(--linea); padding: 10px 14px; }
.cabecera__movil { display: none; gap: 10px; }
.boton-icono { width: 44px; height: 44px; border: var(--linea); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; cursor: pointer; }
.boton-icono .icono-lupa { width: 11px; height: 11px; }
.boton-icono .raya { display: block; width: 16px; height: 1.5px; background: currentColor; }

/* ---------- 8. Secciones y retícula ---------- */
.seccion { padding: 64px var(--px); border-bottom: var(--linea); }
.seccion--fin { padding-bottom: 72px; }
.seccion--sin-linea { border-bottom: 0; }
.cabeza { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.cabeza .kicker { display: block; margin-bottom: 14px; }
.cabeza__intro { max-width: 560px; font: 400 18px/1.5 var(--f-texto); }
.cabeza--extremos { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.cabeza--extremos .cabeza__intro { max-width: 400px; font-size: 17px; text-align: right; }
.r-3-9 { display: grid; grid-template-columns: 3fr 9fr; gap: 48px; }
.r-4-8 { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; }
.r-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; }
.lista-filas { border-top: var(--linea); }
.lista-filas > * { border-bottom: var(--linea); }

/* ---------- 9. Hero de portada ---------- */
.hero { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; padding: 56px var(--px) 64px; border-bottom: var(--linea); }
.hero__texto { display: flex; flex-direction: column; gap: 28px; }
.hero__meta { display: flex; gap: 18px; }
.hero__visual { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.hero__visual .fig { text-align: center; margin-top: 6px; }
/* Hero con titular a todo ancho (2f) */
.hero--ancho { display: flex; flex-direction: column; gap: 36px; }
.hero--ancho .hero__meta { justify-content: space-between; }
.hero__cita { font: 400 22px/1.4 var(--f-texto); color: var(--gris); max-width: 720px; }
.hero__pie { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; border-top: var(--linea); padding-top: 32px; }
.hero__pie > div:first-child { display: flex; flex-direction: column; gap: 24px; }

/* ---------- 10. Esquemas CSS (visuales que explican) ---------- */
/* Flujo: cajas + flechas. Vertical por defecto; --horizontal en línea. */
.flujo { display: flex; flex-direction: column; gap: 14px; }
.flujo__paso { border: var(--linea); padding: 22px; text-align: center; font: 400 30px/1.08 var(--f-display); text-transform: uppercase; }
.flujo__paso.relleno { border-color: transparent; }
.flujo__sub { display: block; font: 400 12px/1 var(--f-ui); letter-spacing: .14em; margin-top: 8px; }
.flujo__flecha { text-align: center; font: 400 22px/1 var(--f-texto); }
.flujo__flecha::before { content: '↓'; }
.flujo--horizontal { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.flujo--horizontal .flujo__paso { padding: 16px 10px; font-size: 22px; }
.flujo--horizontal .flujo__sub { font-size: 10px; line-height: 1.2; letter-spacing: .1em; margin-top: 6px; }
.flujo--horizontal .flujo__flecha { font-size: 20px; }
.flujo--horizontal .flujo__flecha::before { content: '→'; }
.flujo--tiempo { gap: 10px; }
.flujo--tiempo .flujo__paso { padding: 22px 10px; font-size: 24px; }
.flujo--tiempo .flujo__sub { font-size: 11px; line-height: 1.3; letter-spacing: .1em; margin-top: 8px; }
.flujo--tiempo .flujo__sub { opacity: .7; }
.flujo--tiempo .relleno .flujo__sub { opacity: 1; }
.flujo--tiempo .flujo__flecha { font-size: 22px; }

/* Barras decrecientes (lo que queda tras cada intermediario) */
.barras { display: flex; flex-direction: column; gap: 8px; }
.barras > span { display: block; width: var(--w, 100%); height: 16px; background: var(--c-fg); }
.barras > span.hueca { background: transparent; border: var(--linea); }
.barras--card { border: var(--linea); justify-content: center; padding: 18px; }
.barras--card > span { height: 14px; }
.barras--card .fig { margin-top: 10px; }

/* Dos celdas (precio bajo / cola larga) */
.dos-celdas { border: var(--linea); display: grid; grid-template-rows: 1fr 1fr; padding: 18px; gap: 10px; }
.dos-celdas > span { display: flex; align-items: center; justify-content: center; text-align: center; border: var(--linea); font: 400 24px/1.08 var(--f-display); text-transform: uppercase; }
.dos-celdas > span.relleno { border-color: transparent; }

/* Comensales (fig. 02 concepto) */
.comensales { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 8px; }
.comensales > span { height: 90px; background: var(--tinta); }
.comensales > span.hueca { background: transparent; border: var(--linea); }

/* Oferta antes / con tope (2c) */
.oferta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; height: 320px; }
.oferta > div { display: flex; flex-direction: column; gap: 6px; height: 100%; justify-content: flex-end; }
.oferta .bloque { background: var(--tinta); }
.oferta .retirado { border: var(--linea); display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font: 400 12px/1.4 var(--f-mono); color: var(--gris); }
.oferta .kicker { margin-top: 8px; letter-spacing: .14em; }

/* Deuda vs PIB (2d) */
.proporcion { display: flex; gap: 4px; margin-top: 16px; }
.proporcion > span { height: 22px; background: var(--c-fg); }
.proporcion > span.hueca { background: transparent; border: var(--linea); }
.proporcion-leyenda { display: flex; justify-content: space-between; }

/* Muro (2e) */
.muro { display: grid; grid-template-columns: 1fr 2px 1fr; gap: 24px; align-items: center; }
.muro__grupo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.muro__grupo > span { aspect-ratio: 1; background: var(--tinta); }
.muro__grupo--fuera > span { background: transparent; border: var(--linea); }
.muro__pared { background: var(--tinta); height: 100%; min-height: 220px; }
.muro-leyenda { display: grid; grid-template-columns: 1fr 2px 1fr; gap: 24px; font: 500 11px/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- 11. Imágenes y figuras ----------
   .visual es el hueco de imagen. Sin <img> muestra la trama de placeholder;
   con <img> recorta con object-fit. Proporciones: 4/5 tarjeta, 16/9 artículo. */
.visual { position: relative; overflow: hidden; }
.visual > img { width: 100%; height: 100%; object-fit: cover; }
.visual--4x5 { aspect-ratio: 4 / 5; }
.visual--16x9 { aspect-ratio: 16 / 9; }
.visual--mono > img { filter: grayscale(1) contrast(1.05); }
.placeholder { background: repeating-linear-gradient(135deg, var(--trama) 0 1px, transparent 1px 11px); border: 1px solid var(--borde-suave); display: flex; align-items: flex-end; padding: 14px; font: 400 11px/1.4 var(--f-mono); color: var(--gris); }

/* ---------- 12. Tarjetas ---------- */
/* «Empieza por aquí» — numerada, línea superior, sin caja */
.rejilla-inicio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-bottom: -40px; }
.tarjeta-inicio { display: flex; flex-direction: column; gap: 18px; border-top: var(--linea); padding: 20px 0 40px; }
.tarjeta-inicio__num { font: 400 14px/1.08 var(--f-display); color: var(--gris); }
.tarjeta-inicio__titulo { font: 400 40px/1.02 var(--f-display); text-transform: uppercase; }
.tarjeta-inicio__texto { font: 400 16px/1.5 var(--f-texto); }
.tarjeta-inicio .enlace-ui { margin-top: auto; }
.tarjeta-inicio__flecha { display: none; }

/* Concepto — retícula con líneas compartidas */
.rejilla-conceptos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--linea); border-left: var(--linea); }
.tarjeta-concepto { display: flex; flex-direction: column; gap: 20px; padding: 28px 24px; border-right: var(--linea); border-bottom: var(--linea); min-height: 300px; }
.tarjeta-concepto.relleno { --c-bg: var(--tinta); --c-fg: var(--fondo); }
.tarjeta-concepto__titulo { font: 400 44px/.98 var(--f-display); text-transform: uppercase; }
.tarjeta-concepto__texto { font: 400 16px/1.5 var(--f-texto); }
.tarjeta-concepto .enlace-ui { margin-top: auto; }
.tarjeta-concepto--suelta { border: var(--linea); padding: 24px; min-height: 260px; gap: 18px; }
.tarjeta-concepto--suelta .tarjeta-concepto__titulo { font-size: 40px; }
.tarjeta-concepto--suelta .tarjeta-concepto__texto { font-size: 15px; }
.mas-conceptos { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font: 400 15px/1 var(--f-texto); align-items: center; }
.mas-conceptos .enlace-ui { color: var(--gris); margin-right: 8px; }
.mas-conceptos .todos { text-decoration: underline; }

/* Corriente — «lente»: anillo + punto. La posición del punto codifica la postura sobre el Estado. */
.rejilla-corrientes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 32px; }
.tarjeta-corriente { display: flex; flex-direction: column; gap: 16px; }
.tarjeta-corriente__titulo { font: 400 30px/1.02 var(--f-display); text-transform: uppercase; }
.tarjeta-corriente__texto { font: 400 15px/1.5 var(--f-texto); }

.lente { --d: 56px; width: var(--d); height: var(--d); flex: none; border: 1.5px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lente::after { content: ''; width: calc(var(--d) * .18); height: calc(var(--d) * .18); border-radius: 50%; background: currentColor; transform: translate(calc(var(--d) * var(--x, 0)), calc(var(--d) * var(--y, 0))); }
.lente--hueca::after { background: transparent; border: 1.5px solid currentColor; }
.lente--sm { --d: 36px; }
.lente--md { --d: 40px; }
.lente--xl { --d: 160px; }
.lente--liberalismo-clasico { --x: .25; --y: 0; }
.lente--neoliberalismo { --x: .143; --y: -.143; }
.lente--minarquismo { --x: -.179; --y: .107; }
.lente--anarcocapitalismo { --x: -.286; --y: 0; }
.lente--ordoliberalismo { --x: .214; --y: .143; }
.lente--egoismo { --x: 0; --y: 0; }
.lente--voluntarismo { --x: -.107; --y: -.214; }
.lente--libertarismo-pragmatico { --x: .071; --y: .214; }

/* Idea en 5 minutos */
.rejilla-ideas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.tarjeta-idea { display: flex; flex-direction: column; gap: 16px; }
.tarjeta-idea__meta { color: var(--gris); }
.tarjeta-idea__titulo { font: 400 26px/1.08 var(--f-display); text-transform: uppercase; }

/* Artículo en lista (corriente, relacionados) */
.rejilla-articulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.tarjeta-articulo { display: flex; flex-direction: column; gap: 14px; border-top: var(--linea); padding-top: 18px; }
.tarjeta-articulo .kicker { font-size: 10px; letter-spacing: .14em; color: var(--gris); }
.tarjeta-articulo__titulo { font: 400 34px/1.02 var(--f-display); text-transform: uppercase; }

/* Chips de concepto (relleno = activo) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: var(--linea); padding: 12px 16px; font: 400 20px/1.08 var(--f-display); text-transform: uppercase; }
.chip--etiqueta { font: 500 11px/1 var(--f-ui); letter-spacing: .16em; padding: 6px 10px; }
.chip--etiqueta.relleno { padding: 7px 10px; border: 0; }

/* ---------- 13. Mitos y realidades ---------- */
.mito { display: grid; grid-template-columns: 110px 1fr 110px 1fr; gap: 32px; padding: 32px 0; align-items: start; }
.mito__rotulo { font: 500 11px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; padding-top: 6px; }
.mito__rotulo--mito { opacity: .6; }
.mito__frase { font: 400 40px/1.02 var(--f-display); text-transform: uppercase; }
.mito__realidad { font: 400 18px/1.5 var(--f-texto); }

/* ---------- 14. Actualidad ---------- */
.noticia { display: grid; grid-template-columns: 120px 1fr 260px; gap: 24px; padding: 22px 0; align-items: baseline; }
.noticia__fecha { font: 400 12px/1.4 var(--f-mono); color: var(--gris); }
.noticia__titular { font: 500 20px/1.3 var(--f-texto); }
.noticia__concepto { font: 500 11px/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.actualidad__intro { margin-top: 20px; max-width: 340px; font: 400 16px/1.5 var(--f-texto); color: var(--gris); }

/* ---------- 15. Pie ---------- */
.pie { padding: 72px var(--px) 40px; display: flex; flex-direction: column; gap: 56px; }
.pie__principal { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
.pie .logo { font-size: clamp(92px, 13.611vw, 196px); }
.pie__lado { display: flex; flex-direction: column; gap: 22px; }
.pie__lado p { font: 400 18px/1.5 var(--f-texto); }
.pie__nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font: 500 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; margin-top: 12px; }
.pie__legal { display: flex; justify-content: space-between; border-top: var(--linea); padding-top: 18px; font: 400 12px/1.4 var(--f-texto); color: var(--gris); }

/* ---------- 16. Página de artículo (post) ---------- */
.art-cabecera { padding: 48px var(--px) 56px; display: grid; grid-template-columns: 3fr 9fr; gap: 48px; border-bottom: var(--linea); }
.taxonomia { display: flex; flex-direction: column; gap: 28px; font: 500 11px/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.taxonomia__rotulo { display: block; color: var(--gris); margin-bottom: 8px; }
.taxonomia__valor { font: 400 30px/1.08 var(--f-display); letter-spacing: 0; }
.taxonomia__relacion { font: 400 15px/1.5 var(--f-texto); letter-spacing: 0; text-transform: none; }
.art-cabecera__texto { display: flex; flex-direction: column; gap: 28px; }
.art-entradilla { max-width: 760px; font: 400 24px/1.4 var(--f-texto); }
.art-meta { display: flex; gap: 32px; font: 400 13px/1.4 var(--f-texto); color: var(--gris); }
.art-meta .autor { color: var(--tinta); }

.art-figura { padding: 0 var(--px); border-bottom: var(--linea); }
.art-figura__pie { padding: 32px 0; font: 400 11px/1.5 var(--f-mono); color: var(--gris); }
.art-figura__media { min-height: 480px; border-left: var(--linea); border-right: var(--linea); }
.art-figura__media.placeholder { border-top: 0; border-bottom: 0; border-color: var(--tinta); align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 12px; }
.art-figura__media > img { width: 100%; height: 100%; min-height: 480px; aspect-ratio: 16 / 9; object-fit: cover; }

.art-cuerpo { padding: 64px var(--px) 80px; display: grid; grid-template-columns: 3fr 9fr; gap: 48px; }
.indice { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 14px; font: 400 13px/1.5 var(--f-texto); color: var(--gris); }
.indice .kicker { font-size: 10px; color: var(--tinta); margin-bottom: 6px; }
.indice a { padding-left: 13px; }
.indice a[aria-current] { color: var(--tinta); border-left: var(--linea); padding-left: 12px; }
.prosa { max-width: 680px; display: flex; flex-direction: column; gap: 32px; font: 400 19px/1.6 var(--f-texto); }
.prosa strong { font-weight: 600; }

/* Módulos pedagógicos */
.m-idea { padding: 36px 40px; display: flex; flex-direction: column; gap: 18px; }
.m-idea .rotulo { opacity: .7; }
.m-idea__frase { font: 400 44px/1.02 var(--f-display); text-transform: uppercase; }

.m-piensalo { border: var(--linea); padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; }
.m-piensalo p { font: 400 20px/1.5 var(--f-texto); }
.m-piensalo .flujo { margin-top: 8px; }

.m-concepto { display: grid; grid-template-columns: 150px 1fr; gap: 24px; border-top: var(--linea); border-bottom: var(--linea); padding: 28px 0; }
.m-concepto .rotulo { line-height: 1.6; }
.m-concepto__nombre { display: block; margin-top: 10px; font: 400 28px/1.08 var(--f-display); letter-spacing: 0; }
.m-concepto__cuerpo { display: flex; flex-direction: column; gap: 12px; }
.m-concepto__definicion { font: 500 20px/1.45 var(--f-texto); }
.m-concepto__nota { font: 400 17px/1.55 var(--f-texto); color: var(--gris); }

.m-objecion { display: grid; grid-template-columns: 1fr 1fr; border: var(--linea); }
.m-objecion > div { padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.m-objecion > div:first-child { border-right: var(--linea); }
.m-objecion__objecion { font: 400 26px/1.1 var(--f-display); text-transform: uppercase; }
.m-objecion__respuesta { font: 400 17px/1.55 var(--f-texto); }

.m-corrientes > .rotulo { display: block; padding-bottom: 16px; }
.m-corrientes__fila { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px 0; font: 400 16px/1.5 var(--f-texto); }
.m-corrientes__nombre { font: 400 22px/1.08 var(--f-display); text-transform: uppercase; }

.m-seguir { display: flex; flex-direction: column; gap: 16px; }
.m-seguir__lista { border-bottom: var(--linea); }
.m-seguir__item { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-top: var(--linea); }
.m-seguir__titulo { font: 400 24px/1.08 var(--f-display); text-transform: uppercase; }
.m-seguir__tipo { font: 400 13px/1 var(--f-texto); color: var(--gris); white-space: nowrap; }

/* ---------- 17. Página de concepto ---------- */
.concepto-cabecera { padding: 48px var(--px) 56px; border-bottom: var(--linea); display: flex; flex-direction: column; gap: 32px; }
.concepto-cabecera__meta { display: flex; justify-content: space-between; gap: 24px; }
.t-concepto { font: 400 clamp(64px, 18.056vw, 260px)/.96 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; }
.concepto-definicion { max-width: 900px; font: 400 34px/1.3 var(--f-texto); }
.rotulo-lateral { font: 500 11px/1.6 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--linea); }
.dos-columnas > div { padding: 56px 48px; display: flex; flex-direction: column; gap: 22px; }
.dos-columnas > div:first-child { padding-left: var(--px); border-right: var(--linea); }
.dos-columnas > div:last-child { padding-right: var(--px); }
.idea-principal { font: 400 52px/1.02 var(--f-display); text-transform: uppercase; }
.dos-columnas .texto { font: 400 18px/1.55 var(--f-texto); max-width: 520px; }
.dos-columnas .analogia { font: 400 22px/1.45 var(--f-texto); }

.puntos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; font: 400 18px/1.55 var(--f-texto); }
.puntos strong { font-weight: 600; }

.error { display: grid; grid-template-columns: 60px 1fr 1fr; gap: 32px; padding: 26px 0; align-items: start; }
.error__num { font: 400 24px/1.08 var(--f-display); color: var(--gris); }
.error__frase { font: 400 30px/1.08 var(--f-display); text-transform: uppercase; }
.error__texto { font: 400 17px/1.5 var(--f-texto); }

.relacionados { padding: 64px var(--px) 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.relacionados > div { display: flex; flex-direction: column; gap: 20px; }
.fila-enlace { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: var(--linea); }
.fila-enlace:last-child { border-bottom: var(--linea); }
.fila-enlace--lente { flex-direction: row; align-items: center; gap: 16px; }
.fila-enlace__titulo { font: 400 24px/1.08 var(--f-display); text-transform: uppercase; }
.fila-enlace__meta { font: 400 13px/1 var(--f-texto); color: var(--gris); }

/* ---------- 18. Página de corriente ---------- */
.corriente-cabecera { padding: 48px var(--px) 56px; border-bottom: var(--linea); display: grid; grid-template-columns: 8fr 4fr; gap: 48px; align-items: end; }
.corriente-cabecera > div { display: flex; flex-direction: column; gap: 28px; }
.corriente-cabecera > div:last-child { gap: 20px; align-items: flex-start; }
.t-corriente { font: 400 clamp(96px, 13.889vw, 200px)/.96 var(--f-display); text-transform: uppercase; letter-spacing: -.015em; }
.corriente-idea { padding: 56px var(--px); }
.corriente-idea .kicker { opacity: .7; }
.corriente-idea p { font: 400 clamp(40px, 5vw, 72px)/1 var(--f-display); text-transform: uppercase; max-width: 1000px; }

.cuadricula { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--linea); }
.cuadricula > div { padding: 48px; display: flex; flex-direction: column; gap: 16px; }
.cuadricula > div:nth-child(odd) { padding-left: var(--px); border-right: var(--linea); }
.cuadricula > div:nth-child(even) { padding-right: var(--px); }
.cuadricula > div:nth-child(-n+2) { border-bottom: var(--linea); }
.cuadricula p { font: 400 19px/1.55 var(--f-texto); }

.eje { position: relative; padding-top: 40px; }
.eje::before { content: ''; display: block; height: 1px; background: var(--tinta); }
.eje__lista { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: -6px; }
.eje__item { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.eje__punto { width: 11px; height: 11px; border: 1.5px solid var(--tinta); border-radius: 50%; background: var(--fondo); }
.eje__item[aria-current] .eje__punto { border: 0; background: var(--tinta); box-shadow: 0 0 0 5px var(--fondo), 0 0 0 6.5px var(--tinta); }
.eje__nombre { font: 400 22px/1.08 var(--f-display); text-transform: uppercase; }
.eje__nota { font: 400 13px/1.4 var(--f-texto); color: var(--gris); }

.dos-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.dos-listas > div { display: flex; flex-direction: column; gap: 20px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0; align-items: baseline; }
.par__clave { font: 500 11px/1.6 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.par__valor { font: 400 16px/1.5 var(--f-texto); }
.par__nombre { font: 400 28px/1.08 var(--f-display); text-transform: uppercase; }
.par__nota { font: 400 15px/1.5 var(--f-texto); color: var(--gris); }

/* ---------- 19. Posts para redes (2a, 2b) ----------
   Se maquetan a 540 px y se exportan a 2× (1080). */
.post { width: 540px; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: var(--c-bg); color: var(--c-fg); }
.post--4x5 { height: 675px; }
.post--1x1 { height: 540px; }
.post .kicker { font-size: 9px; }
.post .logo { font-size: 33px; flex: none; }
.post .logo__lema { font-size: 5px; }

.post__titular { font: 400 118px/.96 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.post__frase { font: 400 60px/.98 var(--f-display); text-transform: uppercase; }
.post__texto { max-width: 280px; font: 400 13px/1.5 var(--f-texto); }
.post__realidad { font: 400 20px/1.4 var(--f-texto); }
.post .rotulo { font-size: 9px; }
.post__fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.post__bloque { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 20. Utilidades de maquetación ---------- */
.kicker--bloque { display: block; margin-bottom: 14px; }
.seccion--pila { display: flex; flex-direction: column; gap: 36px; }
.seccion--80 { padding-bottom: 80px; }
.cabeza-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.texto-18 { max-width: 640px; font: 400 18px/1.5 var(--f-texto); }

/* ---------- 21. Documentación del kit (no se publica) ---------- */
.kit-barra { display: flex; justify-content: space-between; gap: 16px; padding: 10px var(--px); background: #cfccc4; font: 400 11px/1.3 var(--f-mono); color: rgba(0,0,0,.6); }
.kit-barra a { color: var(--tinta); }
.kit-lienzo { padding: 40px var(--px); display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; background: #cfccc4; }
.kit-pieza { display: flex; flex-direction: column; gap: 9px; max-width: 100%; overflow-x: auto; }
.kit-etiqueta { font: 400 11px/1.3 var(--f-mono); color: rgba(0,0,0,.6); }
.kit-pieza .post { flex: none; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.kit-separador { padding: 14px var(--px); background: #cfccc4; font: 400 11px/1.3 var(--f-mono); color: rgba(0,0,0,.6); }
.kit-notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 18px 20px; border: 1px solid rgba(0,0,0,.12); font: 13px/1.55 var(--f-texto); }
.kit-notas b { display: block; margin-bottom: 8px; font: 600 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--gris); }

.doc { padding: 56px var(--px); display: flex; flex-direction: column; gap: 56px; }
.doc-nota { font: 400 11px/1.6 var(--f-mono); color: var(--gris); max-width: 300px; }
.doc-fila { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.doc-logos { display: flex; gap: 64px; align-items: flex-end; flex-wrap: wrap; }
.doc-logo-inverso { padding: 28px 36px; }
.doc-pila { display: flex; flex-direction: column; gap: 24px; }
.doc-tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.doc-tarjetas .tarjeta-inicio { padding: 20px 0 0; }
.doc-tarjetas .tarjeta-inicio__titulo { font-size: 34px; }
.doc-tarjetas .tarjeta-inicio__texto, .doc-tarjetas .tarjeta-corriente__texto { font-size: 15px; }
.doc-tarjetas .tarjeta-corriente { gap: 14px; }
.doc-tarjetas .tarjeta-corriente__titulo { font-size: 28px; }
.doc-tarjetas .tarjeta-idea { gap: 14px; }
.doc-tarjetas .tarjeta-idea__titulo { font-size: 24px; }
.caja-taxonomia { display: grid; grid-template-columns: auto 1fr; gap: 32px; border: var(--linea); padding: 24px 28px; max-width: 760px; align-items: start; }
.caja-taxonomia .taxonomia { gap: 0; }
.caja-taxonomia .taxonomia__rotulo--sep { margin: 16px 0 6px; }
.doc-modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.doc-modulos .m-idea { padding: 28px 32px; gap: 14px; }
.doc-modulos .m-idea__frase { font-size: 32px; }
.doc-modulos .m-piensalo { padding: 28px 32px; gap: 12px; }
.doc-modulos .m-piensalo p { font-size: 18px; }
.doc-modulos .m-concepto { grid-template-columns: 130px 1fr; gap: 20px; padding: 24px 0; }
.doc-modulos .m-concepto__nombre { font-size: 26px; margin-top: 8px; }
.doc-modulos .m-concepto__definicion { font-size: 18px; }
.doc-modulos .m-objecion > div { padding: 22px; gap: 10px; }
.doc-modulos .m-objecion__objecion { font-size: 22px; line-height: 1.05; }
.doc-modulos .m-objecion__respuesta { font-size: 15px; line-height: 1.5; }
.doc-modulos .m-corrientes > .rotulo, .doc-modulos .m-seguir > .rotulo { padding-bottom: 12px; }
.doc-modulos .m-corrientes__fila { grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 0; font-size: 15px; }
.doc-modulos .m-corrientes__nombre { font-size: 20px; }
.doc-modulos .m-seguir { gap: 0; }
.doc-modulos .m-seguir__item { gap: 16px; padding: 14px 0; }
.doc-modulos .m-seguir__titulo { font-size: 22px; }
.doc-mito { padding: 0 32px; }
.doc-mito .mito { grid-template-columns: 100px 1fr 100px 1fr; gap: 28px; padding: 28px 0; }
.doc-mito .mito__frase { font-size: 34px; }
.doc-mito .mito__realidad { font-size: 17px; }
.doc-nav { border-top: var(--linea); border-bottom: var(--linea); padding: 18px 0; }
.doc-nav .boton-buscar { margin-left: auto; }
.doc-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.sg-titulo { font: 400 clamp(56px, 6.667vw, 96px)/.96 var(--f-display); text-transform: uppercase; }
.sg-intro { max-width: 640px; font: 400 20px/1.5 var(--f-texto); }
.sg-paleta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sg-color { display: flex; flex-direction: column; gap: 10px; font: 400 12px/1.5 var(--f-mono); }
.sg-color__muestra { height: 120px; }
.sg-tipo { display: grid; grid-template-columns: 200px 1fr 260px; gap: 32px; padding: 28px 0; align-items: center; }
.sg-tipo__nombre { font: 400 12px/1.6 var(--f-mono); color: var(--gris); }
.sg-tipo__uso { font: 400 13px/1.5 var(--f-texto); }
.sg-escala { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.sg-escala__fila { display: grid; grid-template-columns: 1fr auto auto; gap: 20px; padding: 12px 0; font: 400 12px/1.5 var(--f-mono); }
.sg-espaciado { display: flex; gap: 8px; align-items: flex-end; }
.sg-espaciado span { display: block; background: var(--tinta); }
.sg-reticula { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; height: 48px; }
.sg-reticula span { background: var(--tinta); }
.sg-reglas { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; font: 400 16px/1.5 var(--f-texto); }
.sg-reglas > div { border-top: var(--linea); padding-top: 14px; }
.sg-reglas strong { font-weight: 600; }

/* ==========================================================================
   Responsive — tablet (< 1024) y móvil (< 768, referencia 390)
   ========================================================================== */
@media (max-width: 1023px) {
  .hero, .hero__pie, .r-7-5 { grid-template-columns: 1fr; }
  .rejilla-conceptos, .rejilla-corrientes, .rejilla-ideas { grid-template-columns: repeat(2, 1fr); }
  .rejilla-inicio { grid-template-columns: repeat(2, 1fr); }
  .mito { grid-template-columns: 90px 1fr; gap: 12px 24px; }
  .noticia { grid-template-columns: 110px 1fr; }
  .noticia__concepto { grid-column: 2; }
  .nav { gap: 22px; }
  .relacionados, .rejilla-articulos { grid-template-columns: 1fr 1fr; }
  .eje__lista { gap: 16px; }
}

@media (max-width: 767px) {
  :root { --margen: 20px; }
  .solo-desktop { display: none !important; }
  .solo-movil { display: revert; }
  .oculto-movil { display: none !important; }

  .kicker, .enlace-ui { font-size: 10px; }
  .rotulo { font-size: 9px; }
  .fig { font-size: 10px; }
  .entradilla { font-size: 17px; }

  /* Cabecera */
  .cabecera { flex-wrap: wrap; padding: 12px var(--px); }
  .cabecera .logo { font-size: 35px; }
  .cabecera .logo__lema { font-size: 5.4px; }
  .cabecera .nav { display: none; }
  .cabecera__movil { display: flex; }
  .cabecera.abierta .nav { display: flex; order: 3; width: 100%; flex-direction: column; align-items: flex-start; gap: 22px; padding: 24px 0 12px; }

  /* Secciones */
  .seccion { padding: 40px var(--px); display: flex; flex-direction: column; gap: 20px; }
  .cabeza, .cabeza--extremos, .r-3-9, .r-4-8 { display: flex; flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 0; }
  .cabeza .kicker, .kicker--bloque { margin-bottom: 10px; }
  .seccion--pila { gap: 24px; }
  .seccion.dos-listas { display: grid; gap: 40px; }
  .cabeza-fila { flex-direction: column; align-items: flex-start; gap: 14px; }
  .texto-18 { font-size: 17px; }

  /* Hero: el esquema pasa a horizontal, entre la entradilla y el botón */
  .hero { display: flex; flex-direction: column; gap: 22px; padding: 36px var(--px) 44px; }
  .hero__texto { display: contents; }
  .hero__visual { order: 4; margin-top: 6px; }
  .hero > .hero__texto > .boton, .hero .boton { order: 5; align-self: stretch; justify-content: space-between; padding: 18px 20px; }
  .hero__visual .fig { display: none; }
  .hero__visual .flujo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; }
  .hero__visual .flujo__paso { padding: 14px 6px; font-size: 18px; }
  .hero__visual .flujo__sub { font-size: 9px; line-height: 1.2; letter-spacing: .08em; margin-top: 6px; }
  .hero__visual .flujo__flecha { font-size: 16px; }
  .hero__visual .flujo__flecha::before { content: '→'; }
  .hero--ancho { gap: 22px; }
  .hero__cita { font-size: 17px; }
  .hero__pie { gap: 22px; padding-top: 22px; }
  .oferta { height: 220px; }

  /* Empieza por aquí → lista */
  .rejilla-inicio { display: flex; flex-direction: column; border-top: var(--linea); margin-bottom: 0; }
  .tarjeta-inicio { display: grid; grid-template-columns: 32px 1fr 20px; gap: 12px; align-items: center; border-top: 0; border-bottom: var(--linea); padding: 18px 0; }
  .tarjeta-inicio__num { font-size: 13px; }
  .tarjeta-inicio__titulo { font-size: 24px; line-height: 1.08; }
  .tarjeta-inicio__texto, .tarjeta-inicio .enlace-ui { display: none; }
  .tarjeta-inicio__flecha { display: block; }

  /* Carriles horizontales */
  .rejilla-conceptos, .carril { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; margin: 0 calc(-1 * var(--px)); padding: 0 var(--px); scrollbar-width: none; }
  .rejilla-conceptos::-webkit-scrollbar, .carril::-webkit-scrollbar { display: none; }
  .rejilla-conceptos > *, .carril > * { scroll-snap-align: start; }
  .tarjeta-concepto { flex: none; width: 250px; border: var(--linea); padding: 20px; min-height: 230px; gap: 14px; }
  .tarjeta-concepto__titulo { font-size: 34px; }
  .tarjeta-concepto__texto { font-size: 15px; }
  .mas-conceptos { gap: 8px 18px; margin-top: 0; line-height: 1.3; }
  .rejilla-ideas.carril > * { flex: none; width: 220px; gap: 12px; }
  .tarjeta-idea__titulo { font-size: 22px; }
  .placeholder { padding: 12px; font-size: 10px; }

  /* Corrientes → 2 columnas, solo lente + nombre */
  .rejilla-corrientes { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .tarjeta-corriente { gap: 10px; }
  .tarjeta-corriente .lente { --d: 40px; }
  .tarjeta-corriente__titulo { font-size: 22px; }
  .tarjeta-corriente__texto, .tarjeta-corriente .enlace-ui { display: none; }

  /* Mitos */
  .mito { display: flex; flex-direction: column; gap: 12px; padding: 22px 0; }
  .mito__rotulo { font-size: 10px; line-height: 1; padding-top: 0; }
  .mito__rotulo--realidad { margin-top: 6px; }
  .mito__frase { font-size: 30px; }
  .mito__realidad { font-size: 16px; }

  /* Actualidad */
  .noticia { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; }
  .noticia__fecha { font-size: 11px; line-height: 1; }
  .noticia__titular { font-size: 17px; line-height: 1.35; }
  .noticia__concepto { font-size: 10px; }

  /* Pie */
  .pie { padding: 44px var(--px) 28px; gap: 28px; }
  .pie__principal { grid-template-columns: 1fr; gap: 28px; }
  .pie .logo__lema { font-size: 14px; }
  .pie__lado { gap: 28px; }
  .pie__lado p { display: none; }
  .pie__nav { gap: 12px 20px; font-size: 10px; margin-top: 0; }
  .pie__legal { font-size: 11px; padding-top: 14px; }
  .form-linea input { padding: 14px; font-size: 15px; }
  .form-linea button { padding: 0 16px; font-size: 11px; }

  /* Artículo */
  .art-cabecera { display: flex; flex-direction: column; gap: 20px; padding: 28px var(--px) 32px; }
  .taxonomia { display: block; font-size: 10px; line-height: 1.5; }
  .taxonomia > div { display: inline; }
  .taxonomia__rotulo { display: inline; margin: 0 0 0 8px; }
  .taxonomia > div:first-child .taxonomia__rotulo { margin-left: 0; }
  .taxonomia__valor { font: inherit; letter-spacing: inherit; }
  .taxonomia__relacionado { display: none !important; }
  .art-cabecera__texto { gap: 20px; }
  .art-entradilla { font-size: 18px; line-height: 1.45; }
  .art-meta { gap: 16px; font-size: 12px; }
  .art-figura { padding: 0; }
  .art-figura .r-3-9 { display: block; }
  .art-figura__pie { display: none; }
  .art-figura__media { min-height: 0; aspect-ratio: 4 / 5; border: 0; }
  .art-figura__media.placeholder { align-items: flex-end; justify-content: flex-start; text-align: left; padding: 16px 20px; font-size: 10px; }
  .art-figura__media > img { min-height: 0; aspect-ratio: 4 / 5; }
  .art-cuerpo { display: block; padding: 32px var(--px) 48px; }
  .indice { display: none; }
  .prosa { gap: 24px; font-size: 17px; }

  .m-idea { margin: 0 calc(-1 * var(--px)); padding: 24px; gap: 12px; }
  .m-idea__frase { font-size: 30px; }
  .m-piensalo { padding: 22px 20px; gap: 14px; }
  .m-piensalo p { font-size: 17px; }
  .m-piensalo .flujo { gap: 8px; margin-top: 0; }
  .m-piensalo .flujo__paso { padding: 12px 4px; font-size: 16px; }
  .m-piensalo .flujo__sub { font-size: 9px; letter-spacing: 0; margin-top: 5px; }
  .m-piensalo .flujo__flecha { font-size: 16px; }
  .m-concepto { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; }
  .m-concepto__nombre { font-size: 26px; margin-top: 10px; }
  .m-concepto__definicion { font-size: 17px; }
  .m-concepto__nota, .m-concepto .enlace-ui { display: none; }
  .m-objecion { display: block; }
  .m-objecion > div { padding: 20px; gap: 10px; }
  .m-objecion > div:first-child { border-right: 0; border-bottom: var(--linea); }
  .m-objecion__objecion { font-size: 22px; line-height: 1.05; }
  .m-objecion__respuesta { font-size: 16px; line-height: 1.5; }
  .m-corrientes > .rotulo { padding-bottom: 12px; }
  .m-corrientes__fila { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; font-size: 15px; }
  .m-corrientes__nombre { font-size: 20px; }
  .m-seguir { gap: 0; }
  .m-seguir > .rotulo { padding-bottom: 12px; }
  .m-seguir__item { padding: 14px 0; }
  .m-seguir__titulo { font-size: 22px; }
  .m-seguir__tipo { display: none; }

  /* Concepto */
  .concepto-cabecera { padding: 28px var(--px) 36px; gap: 20px; }
  .t-concepto { font-size: clamp(56px, 22vw, 96px); }
  .concepto-definicion { font-size: 22px; line-height: 1.35; }
  .dos-columnas, .cuadricula, .dos-listas, .relacionados, .rejilla-articulos, .puntos { grid-template-columns: 1fr; }
  .dos-columnas > div, .dos-columnas > div:first-child, .dos-columnas > div:last-child { padding: 40px var(--px); border-right: 0; }
  .dos-columnas > div:first-child { border-bottom: var(--linea); }
  .idea-principal { font-size: 30px; }
  .dos-columnas .analogia { font-size: 18px; }
  .comensales > span { height: 56px; }
  .puntos { gap: 20px; font-size: 17px; }
  .error { grid-template-columns: 36px 1fr; gap: 8px 12px; padding: 20px 0; }
  .error__num { font-size: 18px; }
  .error__frase { font-size: 24px; }
  .error__texto { grid-column: 2; font-size: 16px; }
  .relacionados { padding: 40px var(--px) 48px; gap: 40px; }

  /* Corriente */
  .corriente-cabecera { grid-template-columns: 1fr; gap: 24px; padding: 28px var(--px) 36px; }
  .corriente-cabecera .lente { --d: 96px; }
  .corriente-idea { padding: 40px var(--px); display: flex; flex-direction: column; gap: 16px; }
  .cuadricula > div, .cuadricula > div:nth-child(odd), .cuadricula > div:nth-child(even) { padding: 32px var(--px); border-right: 0; border-bottom: var(--linea); }
  .cuadricula > div:last-child { border-bottom: 0; }
  .cuadricula p { font-size: 17px; }
  .eje { padding: 0; }
  .eje::before { display: none; }
  .eje__lista { grid-template-columns: 1fr; gap: 20px; margin: 0 0 0 5px; border-left: var(--linea); padding-left: 22px; }
  .eje__item { position: relative; gap: 6px; }
  .eje__punto { position: absolute; left: -28.5px; top: 5px; }
  .eje__nombre { font-size: 20px; }
  .dos-listas { gap: 40px; }
  .par { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .par__nombre { font-size: 24px; }
  .rejilla-articulos { gap: 20px; }
  .tarjeta-articulo__titulo { font-size: 28px; }

  .relacionados .chip, .chip { font-size: 18px; padding: 10px 14px; }
  .chip--etiqueta { font-size: 10px; padding: 6px 10px; }
  .dos-celdas { padding: 14px; gap: 8px; }
  .dos-celdas > span { font-size: 20px; }
  .muro__pared { min-height: 140px; }

  /* Documentación */
  .doc { padding: 40px var(--px); gap: 40px; }
  .kit-notas, .doc-tarjetas, .doc-modulos, .doc-forms, .sg-escala, .sg-reglas, .caja-taxonomia, .sg-tipo { grid-template-columns: 1fr; }
  .sg-paleta { grid-template-columns: repeat(2, 1fr); }
  .sg-tipo { gap: 12px; }
  .doc-logos { gap: 32px; }
  .doc-mito { padding: 0 20px; }
  .doc-nav { flex-wrap: wrap; gap: 18px; }
  .doc-nav .boton-buscar { margin-left: 0; }
  .doc-modulos .m-idea { margin: 0; }
}