/*
Theme Name: El Nexo
Theme URI: https://oscarfernandoperezca1781823565000.1770063.misitiohostgator.com/
Author: El Nexo
Description: Theme propio, independiente de Newspaper X. Sistema de módulos editoriales (apertura + tarjeta + lista) sobre selección automática de WordPress por categoría. Ver Auditoria-Theme-Propio.md, Revision-Critica-Prototipo-Portada.md y Refinamiento-Densidad-Personalidad.md en el repositorio del proyecto para el razonamiento detrás de cada decisión.
Version: 0.3.0
Requires PHP: 7.4
Text Domain: el-nexo
*/

/* ================= tokens ================= */
:root{
	--ink:#0B1220;
	--paper:#FFFFFF;
	--paper-tint:#F3F5F8;
	--line:#E2E5EB;
	--line-strong:#C7CCD6;
	--accent:#2247E0;
	--accent-deep:#16309E;
	--text-1:#0B1220;
	--text-2:#4B5565;
	--text-3:#8A93A3;
	--font-display:'Newsreader', Georgia, 'Times New Roman', serif;
	--font-body:'Work Sans', -apple-system, Helvetica, Arial, sans-serif;
	--font-mono:'IBM Plex Mono', 'SF Mono', Consolas, monospace;
	--content-width:720px;
	/* 1040px -> 1240px -> 1200px (2026-09-03, dos pasadas): la primera
	   pasada redujo el margen lateral del artículo a la mitad, pero se pasó
	   un poco -- esta segunda pasada recupera un poco de aire (~20px por
	   lado a 1440px de viewport, el equivalente aproximado a dos letras del
	   cuerpo del texto). El cuerpo (.articulo-cuerpo) ya no queda topeado
	   muy por debajo del ancho real de su columna del grid -- ver el
	   min(72ch,100%) más abajo, que es la otra mitad de este mismo ajuste. */
	--article-max:1200px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
	background:var(--paper); color:var(--text-1); font-family:var(--font-body);
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.wrap{ max-width:1520px; margin:0 auto; padding:0 24px; }

/* ================= masthead ================= */
/* Todas las filas del header comparten el gutter lateral de .wrap (24px, 18px
   en móvil) — ningún texto queda pegado al borde de la pantalla.
   Rediseño 2026-09-16: la franja "Edición Nacional" + fecha (.utility-bar)
   se elimina por completo -- ver decisiones de masthead registradas. El
   masthead pasa a 3 filas propias (wordmark / marca+control / fecha) en vez
   de la única .masthead-top de antes, para que en móvil solo la fila de la
   marca pueda quedar sticky (.masthead-sticky más abajo) sin arrastrar
   wordmark ni fecha con ella. En escritorio/tablet (>599px) las tres filas
   se ven exactamente como antes se veía .masthead-top -- ningún cambio
   visual ahí, ver el bloque responsive al final del archivo. */
header.masthead{ border-bottom:3px solid var(--accent); }
.masthead-wordmark-row{ text-align:center; padding-top:16px; padding-bottom:2px; }
.wordmark{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--text-3); text-transform:uppercase; margin-bottom:0; }
.masthead-sticky{ position:static; background:var(--paper); }
.masthead-sticky-inner{ position:relative; text-align:center; padding-top:6px; padding-bottom:10px; }
/* 2026-09-23: compactado vertical del bloque superior (eslogan/logo/fecha),
   SOLO escritorio (>860px) -- ajuste puro de espaciado, sin tocar tamaño ni
   posición del logo ni el markup. Va a min-width:861px, no 600px, a
   propósito: el bloque @media(max-width:860px) de más abajo YA trae su
   propio padding compacto para .masthead-wordmark-row/.masthead-sticky-inner
   (line-height tablet/móvil, sin relación con este ajuste) y, al venir
   DESPUÉS en la cascada, le ganaría a cualquier regla puesta acá con
   min-width:600px en el rango 600-860px -- probado en vivo, con
   min-width:600px el compactado no tenía ningún efecto real en tablet,
   solo en pantallas >860px. 861px es el mismo punto de corte que ya usa el
   archivo para "escritorio" (ver @media (min-width:861px) más abajo), así
   que tablet (600-860px) y móvil (≤599px) quedan con su espaciado de
   siempre, sin tocar. La reducción es mayor abajo (10px -> 2px) que arriba
   (6px -> 4px) porque el espacio en blanco entre el logo y la fila de
   fecha/buscador era el más notorio -- el propio wordmark SVG ya trae
   bastante aire interno arriba y abajo de las letras, así que estos
   paddings son el único margen ajustable sin recortar el archivo. */
@media (min-width: 861px){
	.masthead-wordmark-row{ padding-bottom:0; }
	.masthead-sticky-inner{ padding-top:4px; padding-bottom:2px; }
	/* 2026-09-23 (ronda 2): el padding ya está al mínimo razonable (2px) --
	   lo que seguía leyéndose como "vacío" bajo el logo es el propio margen
	   transparente que trae el archivo del wordmark por debajo de las letras
	   (~18px a 80px de alto, medido por análisis de píxeles -- más del doble
	   del margen equivalente arriba, ~16px). padding no puede ir a negativo,
	   así que se compensa con un margin-bottom negativo en .masthead-sticky:
	   sube el bloque completo (logo incluido) sin cambiar su tamaño ni su
	   posición horizontal, solo lo acerca a la fila de fecha/buscador.
	   -10px -> -16px (ronda 4, mismo día): el margen transparente del logo
	   (~18px + 2px de padding restante = ~20px de tope antes de morder la
	   tinta visible) todavía dejaba aire de sobra -- se sube más, dejando
	   ~4px de colchón de seguridad. */
	.masthead-sticky{ margin-bottom:-16px; }
	/* 2026-09-23 (ronda 3): acerca la fecha/buscador al filete horizontal
	   que separa esa fila del menú (border-top de nav.primary-nav) -- mismo
	   principio que las dos rondas anteriores, ajuste puro de espaciado.
	   12px -> 6px: se nota el menú "más pegado" sin que el buscador quede
	   apretado contra la línea. */
	.masthead-fecha-row{ padding-bottom:6px; }
}
.logo{ font-family:var(--font-display); font-weight:700; font-size:36px; letter-spacing:-.015em; color:var(--ink); line-height:1.05; }
/* 2026-09-23: pasa de text-align:right (un solo hijo, la fecha) a flex
   space-between -- ahora conviven fecha (izquierda) + buscador de escritorio
   (derecha, ver .masthead-search-desktop). Sin efecto en móvil salvo por el
   propio buscador, que se oculta ahí (ver bloque ≤599px) -- la fecha sola
   dentro de un flex row de 1 hijo se comporta igual que antes con
   text-align:right (queda pegada al extremo, acá el derecho porque es el
   único elemento hasta que aparece el buscador en >599px). */
.masthead-fecha-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:0; padding-bottom:12px; }
.masthead-fecha{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); white-space:nowrap; }

/* Buscador de escritorio/tablet en la franja de fecha (2026-09-23). Reutiliza
   el_nexo_search_form() (mismo HTML que search.php y el panel móvil) -- acá
   solo se restyla, scoped a .masthead-search-desktop, para que quepa en una
   franja angosta sin aumentar su altura: campo e ícono chicos en vez del
   input+botón "BUSCAR" de tamaño normal que usa .search-form en search.php.
   Oculto a ≤599px (ver bloque responsive) -- ahí el buscador sigue siendo,
   sin cambios, el de #nav-search-panel. */
.masthead-search-desktop{ flex:none; }
.masthead-search-desktop .search-form{ display:flex; gap:0; max-width:none; margin:0; }
.masthead-search-desktop .search-form .search-field{
	width:150px; font-family:var(--font-mono); font-size:11px; color:var(--text-2);
	padding:3px 8px; border:1px solid var(--line); border-right:0; border-radius:3px 0 0 3px;
	background:var(--paper); transition:border-color .15s ease,width .15s ease;
}
.masthead-search-desktop .search-form .search-field::placeholder{ color:var(--text-3); }
.masthead-search-desktop .search-form .search-field:focus{ outline:none; border-color:var(--accent); width:190px; }
.masthead-search-desktop .search-form .search-submit{
	display:flex; align-items:center; justify-content:center; flex:none;
	width:24px; padding:0; border:1px solid var(--line); border-radius:0 3px 3px 0;
	background:var(--paper); color:var(--text-3); font-size:0; cursor:pointer;
	transition:color .15s ease,border-color .15s ease;
}
.masthead-search-desktop .search-form .search-field:focus + .search-submit{ border-color:var(--accent); }
.masthead-search-desktop .search-form .search-submit::before{
	content:""; display:block; width:13px; height:13px; background-color:currentColor;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='19' y1='19' x2='15.2' y2='15.2'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='19' y1='19' x2='15.2' y2='15.2'/%3E%3C/svg%3E");
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
}
.masthead-search-desktop .search-form .search-submit:hover,
.masthead-search-desktop .search-form .search-submit:focus-visible{ color:var(--accent-deep); border-color:var(--accent-deep); }

/* 2026-09-23 (ronda 5): aumento tipográfico sutil de fecha + buscador, SOLO
   escritorio (>860px) -- alternativa de menor riesgo a mover el markup a la
   fila del logo (ver decisiones registradas). No cambia layout ni posición,
   solo "llena" un poco más la franja para que se perciba menos vacía. Va
   DESPUÉS de las reglas base en el archivo a propósito -- misma especificidad,
   así se asegura que gane sin depender de dónde caiga en la cascada.
   .masthead-fecha se scopea acá (no en la regla base) porque esa clase
   también se usa en móvil, donde no debe cambiar. .masthead-search-desktop ya
   está oculto en móvil por su cuenta (ver bloque ≤599px), así que ahí no
   hace falta scoping extra. */
@media (min-width: 861px){
	.masthead-fecha{ font-size:12px; }
	.masthead-search-desktop .search-form .search-field{ font-size:12.5px; padding:4px 9px; width:160px; }
	.masthead-search-desktop .search-form .search-field:focus{ width:205px; }
	.masthead-search-desktop .search-form .search-submit{ width:27px; }
	.masthead-search-desktop .search-form .search-submit::before{ width:14px; height:14px; }
}

/* Control combinado navegación+búsqueda -- oculto en escritorio/tablet
   (>599px, donde el nav sigue mostrándose en línea como siempre); visible
   solo en el breakpoint móvil nuevo, ver el bloque responsive al final del
   archivo. Rediseño 2026-09-16 (propuesta D validada en maqueta): la caja
   visible ES el área táctil -- 44x44px, el mínimo recomendado -- en vez de
   depender de un padding invisible sobre una caja más chica. Estado activo
   con relleno sólido (ver [aria-expanded="true"] abajo) para que el botón
   se lea como "abierto" y quede visualmente emparentado con el panel que
   despliega (ver nav.primary-nav.is-open más abajo). */
.nav-search-toggle{ display:none; position:absolute; left:6px; top:50%; transform:translateY(-50%); padding:0; border:0; background:none; cursor:pointer; color:var(--text-2); }
/* background:var(--paper-tint) en reposo (2026-09-16, revisión UX): antes
   solo tenía borde, sin relleno -- se leía "prácticamente transparente"
   contra el fondo del header. paper-tint es un gris muy sutil, no un
   relleno pesado -- da superficie identificable sin competir con el logo
   ni con el estado activo (que sigue siendo el relleno sólido de abajo). */
.ns-box{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1.5px solid var(--line-strong); border-radius:11px; background:var(--paper-tint); transition:background .15s ease,border-color .15s ease,color .15s ease; }
.ns-box svg{ width:22px; height:22px; display:block; }
.nav-search-toggle[aria-expanded="true"] .ns-box{ color:#fff; background:var(--accent-deep); border-color:var(--accent-deep); }
/* Velo y botón de cierre del panel móvil: sin efecto fuera del breakpoint
   ≤599px (ver reglas .is-open/.nav-panel-close en el bloque responsive) --
   ocultos acá por defecto para que no aparezcan en escritorio/tablet. */
.nav-backdrop{ display:none; }
.nav-panel-close{ display:none; }
.nav-panel-topbar{ display:none; }
/* Nota (2026-09-16): se probó congelar el scroll de fondo con
   overflow:hidden en <html>/<body> mientras el panel está abierto -- se
   descartó. Verificado en vivo: rompe position:sticky de .masthead-sticky
   (el navegador dejaba de "pegar" la barra al perder su contenedor de
   scroll normal, saltando a su posición estática real del documento, muy
   por encima del viewport a scroll profundo) -- exactamente el tipo de
   salto que los puntos 8/9 de esta revisión piden evitar, no algo que
   valga la pena introducir para resolver el punto 10. Se resuelve distinto
   más abajo: el cierre inmediato al primer touchstart fuera del panel (ver
   nav.js) ya impide que el usuario llegue a desplazar el fondo -- el menú
   se cierra en el instante que el gesto empieza, antes de que haya scroll
   que mostrar. */

/* ---- navegación principal (generalista, propia del tema) ---- */
nav.primary-nav{ border-top:1px solid var(--line); }
nav.primary-nav .wrap{ padding-top:10px; padding-bottom:10px; }
/* Formulario de búsqueda dentro del panel -- oculto en escritorio/tablet
   (el formulario "real" de cara al público en ese ancho sigue siendo el de
   search.php); en móvil se activa como primera fila del panel, ver bloque
   responsive. Reutiliza .search-form tal cual (misma función que ya usa
   search.php), sin duplicar estilos. */
.primary-nav .search-form{ display:none; }
.primary-nav .nav-list{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 22px; list-style:none; margin:0; padding:0; }
.primary-nav .nav-item{ position:relative; }
.primary-nav a,
.primary-nav .sub-toggle{
	display:inline-flex; align-items:center;
	font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:.02em; text-transform:uppercase;
	white-space:nowrap; color:var(--text-2); padding:3px 0; border:0; border-bottom:2px solid transparent;
	background:none; cursor:pointer;
}
.primary-nav a:hover,
.primary-nav .sub-toggle:hover,
.primary-nav .nav-item.is-open .sub-toggle,
.primary-nav .current-menu-item > a{ color:var(--ink); border-color:var(--accent); }
.primary-nav .caret{ margin-left:6px; border:4px solid transparent; border-top-color:currentColor; border-bottom:0; transform:translateY(1px); transition:transform .15s ease; }
.primary-nav .nav-item.is-open .caret{ transform:translateY(1px) rotate(180deg); }

/* Desplegable "Secciones" — panel absoluto en escritorio (hover, foco de
   teclado vía :focus-within, o click vía .is-open del script). */
.primary-nav .subnav{
	position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
	min-width:240px; margin:0; padding:6px; list-style:none;
	background:var(--paper); border:1px solid var(--line); box-shadow:0 10px 30px rgba(11,18,32,.10);
	display:none; z-index:60;
}
/* Solo .is-open controla la visibilidad -- 2026-09-16, revisión UX: antes
   también se mostraba con :hover/:focus-within, lo que hacía que un segundo
   clic en "Secciones" no cerrara visualmente el submenú mientras el mouse
   siguiera encima (y en iOS/Safari, mientras el :hover quedara "pegado"
   tras un toque) -- el JS de initSecciones() ya alternaba .is-open
   correctamente, el problema era puramente este CSS ganándole. .sub-toggle
   es un <button> real -- Enter/Espacio ya disparan el mismo click que el
   mouse, así que quitar :focus-within no le saca nada al teclado. */
.primary-nav .nav-item.is-open .subnav{ display:block; }
.primary-nav .subnav a{
	display:block; width:100%; padding:8px 10px;
	font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; white-space:nowrap;
	border:0; color:var(--text-2);
}
.primary-nav .subnav a:hover{ background:var(--paper-tint); color:var(--ink); }

/* ================= ticker: últimas noticias ================= */
.ticker{ background:var(--ink); color:#fff; overflow:hidden; }
.ticker .wrap{ display:flex; align-items:center; gap:16px; padding-top:8px; padding-bottom:8px; }
.ticker-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8FA3F5; display:flex; align-items:center; gap:6px; flex:none; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:#5C7CF0; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
/* Sin JS (o con "reduce motion"): el viewport queda como carril con scroll
   manual. Con JS, initTicker() pasa overflow-x a hidden y anima el track. */
.ticker-viewport{ flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
.ticker-viewport::-webkit-scrollbar{ display:none; }
.ticker-track{ display:flex; align-items:baseline; gap:34px; white-space:nowrap; will-change:transform; }
.ticker-item{ display:inline-flex; align-items:baseline; gap:8px; font-family:var(--font-mono); font-size:12px; color:#D7DCE8; }
.ticker-item b{ color:#8FA3F5; font-weight:600; }
.ticker-item time{ color:#5C6FA0; }
.ticker-item:hover span{ text-decoration:underline; }

/* ================= kicker: nombre de sección — tipografía editorial, no chip de UI ================= */
.kicker{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.kicker .nombre{ font-family:var(--font-body); font-weight:700; font-size:15px; letter-spacing:.005em; text-transform:uppercase; color:var(--ink); }
.kicker .ver-todo{ font-family:var(--font-body); font-size:12px; color:var(--text-3); }
.kicker .ver-todo:hover{ color:var(--accent-deep); text-decoration:underline; }

section.modulo{ padding:22px 0; }
section.modulo.opinion{ background:var(--paper-tint); }

/* ================= apertura — dominante + secundaria + Más en portada ================= */
.apertura-grid{ display:grid; grid-template-columns:1.85fr 1fr; gap:34px; align-items:stretch; }
/* La dominante estira al alto de la fila (columna secundaria + "Más en
   portada", casi siempre más alta). El espacio vertical sobrante NO se deja
   como hueco muerto entre el crédito y el meta: lo absorbe la imagen, que
   crece para llenarlo (ver .imagen abajo). Así el crédito y el meta quedan
   pegados debajo de la foto y el meta cae, de forma natural, cerca del final
   del bloque de las 4 notas de la derecha -- sin empujarlo artificialmente.
   Si la nota dominante no tiene imagen, el margin-top:auto del meta hace de
   respaldo y lo ancla igual al final de la columna. Ajuste 2026-09-06. */
.apertura-dominante{ display:flex; flex-direction:column; }
.apertura-dominante .eyebrow{ font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; display:block; }
/* Tamaño fluido (no un valor fijo): un titular corto en un ancho de columna
   grande igual necesita "llenar" visualmente ese ancho, y uno largo necesita
   más líneas antes que un tamaño gigante -- clamp() deja que el punto medio
   lo resuelva el propio texto, sin max-width artificial ni letter-spacing
   forzado. text-wrap:pretty (no "balance"): balance repartía el titular en
   líneas parejas pero visualmente más angostas que la imagen/bajada de al
   lado -- bug real encontrado en portada, independiente de qué noticia
   estuviera arriba. "pretty" solo evita que la ÚLTIMA línea quede con una
   palabra sola, sin angostar las demás; en navegadores que no lo soportan
   cae solo al ajuste normal (llena cada línea al máximo), nunca a "balance". */
.apertura-dominante h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,2.4vw + 12px,42px); line-height:1.08; letter-spacing:-.01em; margin:0 0 13px; text-wrap:pretty; }
/* Sin max-width propio a propósito -- debe ocupar el mismo ancho que el
   título y la imagen de abajo (regla estructural, no ajuste puntual: bug
   real encontrado con "60ch" acá, que dejaba un espacio en blanco arbitrario
   a la derecha del dek frente al h1/la imagen, sin importar qué noticia
   estuviera en la posición dominante). */
.apertura-dominante .dek{ font-family:var(--font-display); font-style:italic; font-size:17px; line-height:1.5; color:var(--text-2); margin:0 0 16px; }
/* aspect-ratio 5/3 es el tamaño BASE (piso) de la imagen: con ese alto arranca
   y nunca queda más chica que eso (flex-shrink:0). Cuando la columna derecha
   es más alta, la imagen crece (flex-grow:1) para consumir el espacio libre
   de la columna izquierda en vez de dejarlo como banda blanca antes del meta.
   El img interior mantiene width/height:100% + object-fit:cover, así que ese
   alto extra se resuelve recortando la foto (nunca deformándola). Es dinámico:
   cuanto más largos el titular/bajada de la dominante o más baja la columna
   derecha, menos crece la imagen; en el límite no crece nada. min-height:0
   evita desbordes de flexbox. */
.apertura-dominante .imagen{ aspect-ratio:5/3; flex:1 0 auto; min-height:0; overflow:hidden; background:var(--paper-tint); margin-bottom:12px; }
.apertura-dominante .imagen img{ width:100%; height:100%; object-fit:cover; }
.apertura-dominante .credito-imagen{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); display:block; margin:-4px 0 0; }
.apertura-dominante .meta{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); margin-top:auto; padding-top:14px; }

/* Columna derecha: sin línea divisoria — la jerarquía respecto de la
   dominante depende del ancho de columna (~35%), y entre secundaria y
   "Más en portada" depende solo de tamaño tipográfico y de imagen, más aire
   (margen), nunca de un borde. Probado explícitamente sin línea antes de
   fijarlo así — ver Refinamiento-Densidad-Personalidad.md. */
.apertura-columna{ display:flex; flex-direction:column; gap:0; }
.apertura-secundaria{ display:flex; flex-direction:column; gap:20px; }
.apertura-secundaria .card .thumb{ aspect-ratio:16/10; }
.apertura-secundaria .card h3{ font-size:19px; line-height:1.26; margin-bottom:2px; }
.apertura-secundaria .card .dek{ font-family:var(--font-display); font-style:italic; font-size:13.5px; line-height:1.4; color:var(--text-2); margin:0; }
.mas-en-portada{ margin-top:26px; }
.mas-en-portada .item-compacto{ padding:10px 0; }
.mas-en-portada .item-compacto:first-child{ padding-top:0; }
.mas-en-portada .item-compacto h4{ font-size:14.5px; }

/* ================= archivo de ediciones (date.php / page-ediciones.php) ================= */
/* Margen lateral extra sobre el de .wrap -- a pedido del director, el
   contenido de /ediciones/ (fechas + título) quedaba demasiado pegado al
   borde. clamp() en vez de un valor fijo: crece hasta ~96px en pantallas
   anchas, pero se repliega solo hasta el padding normal de .wrap en
   pantallas angostas -- nunca angosta la columna en mobile, solo agrega
   aire de más cuando sobra espacio. */
.ediciones-cuerpo{ padding:0 clamp(0px, 7vw, 96px); }
.edicion-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--font-body); font-size:13.5px; }
.edicion-nav a{ color:var(--accent-deep); text-decoration:none; }
.edicion-nav a:hover{ text-decoration:underline; }
.edicion-nav-indice{ color:var(--text-3) !important; }
.lista-ediciones{ display:flex; flex-direction:column; }
.lista-ediciones .item-edicion{ display:flex; flex-direction:column; gap:2px; padding:16px 0; border-bottom:1px solid var(--line); }
.lista-ediciones .item-edicion:first-child{ padding-top:0; }
.lista-ediciones .item-edicion:last-child{ border-bottom:none; }
.lista-ediciones .item-edicion .fecha-edicion{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); text-decoration:none; }
.lista-ediciones .item-edicion .fecha-edicion:hover{ text-decoration:underline; }
/* Navegación entre meses -- SIEMPRE arriba de la lista de fechas, nunca al
   final: quien quiere saltar de mes no debería tener que recorrer primero
   todas las ediciones del mes actual. Tratamiento tipográfico distinto a
   propósito (mono, mayúscula pequeña, más chico) para que se lea de
   inmediato como navegación, no como una fecha más de la lista de abajo. */
.edicion-mes-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; }
.edicion-mes-nav a{ color:var(--accent-deep); text-decoration:none; }
.edicion-mes-nav a:hover{ text-decoration:underline; }
.edicion-mes-nav .mes-actual{ color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }

/* ================= tarjetas ================= */
.tres-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
/* cols-2/cols-1 (2026-09-10, a pedido del director): antes quedaban con
   max-width pero SIN centrar -- una tarjeta sola (cols-1) terminaba angosta
   y pegada al borde izquierdo, dejando un vacío enorme a la derecha; cols-2
   tenía el mismo problema. margin:0 auto centra ambos casos dentro de
   .art-siguiente-inner (o cualquier otro contenedor de .tres-grid). cols-1
   además sube su max-width (420px -> 560px) para que una sola tarjeta se
   vea con presencia real, no como un resto perdido. */
.tres-grid.cols-2{ grid-template-columns:repeat(2,1fr); max-width:820px; margin:0 auto; }
.tres-grid.cols-1{ grid-template-columns:1fr; max-width:560px; margin:0 auto; }
.card{ display:flex; flex-direction:column; gap:10px; }
.card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-tint); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .cat-tag{ font-family:var(--font-body); font-weight:700; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); }
/* Sin text-wrap:balance a propósito -- balance ajusta el punto de corte de
   línea para "equilibrar" el título, pero eso podía dejarlo visualmente más
   angosto que el .dek de la misma tarjeta (que envuelve de forma normal),
   aunque ambos tengan la misma caja/ancho disponible. Título y dek deben
   compartir el mismo comportamiento de ajuste para verse consistentes con
   cualquier noticia, sin depender de qué tan larga sea esa noticia puntual. */
.card h3{ font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.24; margin:0; }
.card .meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.card.card-texto{ border-top:3px solid var(--ink); padding-top:12px; }
.card.card-texto p{ font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--text-2); margin:0; }

.card-full{ display:grid; grid-template-columns:1fr 1.4fr; gap:32px; align-items:start; }
.card-full .thumb{ aspect-ratio:16/11; overflow:hidden; background:var(--paper-tint); }
.card-full .thumb img{ width:100%; height:100%; object-fit:cover; }
.card-full h2{ font-family:var(--font-display); font-weight:700; font-size:28px; line-height:1.16; margin:8px 0 10px; text-wrap:pretty; }
.card-full p{ font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--text-2); margin:0 0 10px; max-width:52ch; }

/* ================= listas ================= */
.lista-compacta{ display:flex; flex-direction:column; }
.item-compacto{ display:grid; grid-template-columns:84px 1fr; gap:16px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.item-compacto.sin-imagen > div{ grid-column:2; }
.item-compacto:first-child{ padding-top:0; }
.item-compacto:last-child{ border-bottom:none; }
.item-compacto .thumb-sm{ width:84px; height:62px; overflow:hidden; flex:none; background:var(--paper-tint); }
.item-compacto .thumb-sm img{ width:100%; height:100%; object-fit:cover; }
.item-compacto h4{ font-family:var(--font-display); font-weight:600; font-size:16.5px; line-height:1.28; margin:0 0 5px; text-wrap:balance; }
.item-compacto .meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }

.lista-textual{ display:flex; flex-direction:column; }
.item-textual{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.item-textual:first-child{ padding-top:0; }
.item-textual:last-child{ border-bottom:none; }
.item-textual .num{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-3); flex:none; width:18px; }
/* Glifo de área en vez de número -- mini-índice de "más titulares" bajo un
   módulo de grilla (antes usaba "+", que podía leerse como control para
   expandir contenido; ver el_nexo_render_item_textual()). var(--amber)
   (#E8A317) en vez del #B5652C usado en un primer intento: ese cobre no
   coincide con ningún acento real del sitio en funcionamiento (el --accent
   de este archivo es azul, #2247E0) -- var(--amber) sí está activo hoy,
   definido en infonexo-identidad.css (carga en todo el sitio, no solo en
   Sobre Nosotros) y es el mismo tono que ya se usa ahí para marcar lo
   humano/editorial (revisión de portada, 2026-09-13). */
.item-textual .num.num-icono{ display:flex; align-items:center; width:18px; color:var(--amber); }
.item-textual .num-icono svg{ width:15px; height:15px; }
.item-textual h4{ font-family:var(--font-body); font-weight:600; font-size:15.5px; line-height:1.35; margin:0; color:var(--ink); }
.item-textual .meta{ font-family:var(--font-mono); font-size:10px; color:var(--text-3); white-space:nowrap; }

/* mini-índice bajo un módulo de grilla, cuando la categoría real tiene más
   notas que las mostradas en la grilla — generado por el_nexo_modulo(), no
   por config manual por sección. Continuación del mismo módulo, sin caja ni
   borde (antes se veía como contenido residual). */
.mini-indice{ margin-top:20px; }
.mini-indice .lista-textual .item-textual{ padding:7px 0; }
/* Variante en grilla 2 columnas -- usada bajo "tres" (Nacional, Tecnología,
   Economía y Negocios, Deportes), sección de ancho completo, así que 2
   columnas de titulares aprovechan el ancho en vez de dejarlo vacío a la
   derecha de cada fila (auditoría de portada, punto 2). Regla anti-huérfano:
   si el conteo de titulares es impar, el último ocupa el ancho completo en
   vez de dejar una celda vacía al lado -- así 1, 2, 3 o 4 titulares siempre
   completan filas. Item-compacto (miniatura + título), no lista-textual --
   propuesta J de la auditoría de portada 2026-09-18: mismo componente visual
   que ya usan las 4 terciarias de la apertura. */
.mini-indice-grid.lista-compacta{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:32px; }
.mini-indice-grid.lista-compacta .item-compacto:last-child:nth-child(odd){ grid-column:1 / -1; }

/* ================= destacada + lista: un post con más peso + el resto como
   índice, mismo patrón que ya funciona en la apertura, a escala de sección.
   La elige el_nexo_elegir_disposicion() según cantidad real + proporción con
   imagen — nunca a mano por sección. ================= */
.destacada-lista-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:30px; align-items:start; }
.card-destacada .thumb{ aspect-ratio:16/10; }
.card-destacada h3{ font-size:25px; line-height:1.2; margin-bottom:4px; }
.card-destacada .dek{ font-family:var(--font-display); font-style:italic; font-size:14.5px; line-height:1.45; color:var(--text-2); margin:0; }
.destacada-lista-columna{ display:flex; flex-direction:column; }
.destacada-lista-lista{ display:flex; flex-direction:column; }
.destacada-lista-lista .item-compacto:first-child{ padding-top:0; }
/* Sobrante más allá de las 4 miniaturas, mismo mini-índice textual que
   "tres" pero en una sola columna (angosta, no de ancho completo) -- aquí
   no aplica el problema de espacio vacío a la derecha que sí existía en la
   variante de ancho completo, así que no necesita la grilla de 2 columnas. */
.destacada-lista-columna .mini-indice{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }

/* ================= publicidad ================= */
.ad-slot{ border:1px dashed var(--line-strong); background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:30px 20px; text-align:center; }
.ad-slot .ad-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.ad-slot .ad-dims{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); }

/* ================= artículo (V4) ================= */
/* Síntesis de tres propuestas comparadas con el director, 2026-09-03:
   encabezado protagonista a ancho completo (base: propuesta inspirada en
   El País) + columna editorial liviana durante la lectura (no un sidebar
   de widgets) + módulo de tarjetas grandes al cierre, independiente del
   sidebar (mismo componente que la portada). Ver _estado.md. */

.articulo-v4{ max-width:var(--article-max); margin:0 auto; padding:44px 28px 0; }

/* --- encabezado protagonista: ocupa TODO el ancho de --article-max,
   antes de que exista ninguna columna -- mismo ancho que la imagen
   destacada de abajo, sin un tope propio más angosto (bug real: había un
   max-width:760px suelto que contradecía el comentario de arriba). El
   texto no se fuerza a llenar ese ancho, solo puede usarlo si lo necesita. */
.art-hero-texto{ max-width:100%; }
.art-cat{ font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:14px; }
/* Mismo criterio que .apertura-dominante h1 (ver comentario ahí): tamaño
   fluido + text-wrap:pretty en vez de "balance", para que el bloque del
   titular llene el mismo ancho que el kicker/dek arriba y la imagen hero
   debajo, sin depender de la longitud del titular puntual. */
.art-titulo{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,2.2vw + 14px,42px); line-height:1.14; margin:0 0 16px; letter-spacing:-.01em; text-wrap:pretty; }
.art-dek{ font-family:var(--font-display); font-style:italic; font-size:19px; line-height:1.5; color:var(--text-2); margin:0 0 22px; }
.art-byline{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-3); display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:28px; }
.art-byline .autor-nombre{ color:var(--text-1); font-weight:600; font-family:var(--font-body); font-size:13px; }
.art-byline .autor-cargo{ color:var(--text-3); }

.art-imagen-hero{ margin:0 0 48px; }
.art-imagen-hero img{ width:100%; height:auto; display:block; }
.art-imagen-hero figcaption{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); padding-top:8px; }

/* --- del cuerpo hacia abajo: columna principal + columna editorial --- */
.art-layout{ display:grid; grid-template-columns:1fr 280px; gap:56px; align-items:start; }

/* max-width:66ch dejaba el cuerpo notablemente más angosto que su propia
   celda del grid (.art-main, 1fr) -- eso era la causa real del hueco en
   blanco entre el texto y el sidebar, no el gap del grid (que no cambió).
   min(72ch,100%): sigue topeado a un ancho de lectura razonable (72ch, no
   "sin límite"), pero nunca se queda más angosto que el espacio real que el
   layout ya le da -- por eso la columna principal "gana ancho" sin tocar el
   sidebar ni inventar una excepción para un artículo puntual. */
.articulo-cuerpo{ font-family:var(--font-body); font-size:18px; line-height:1.7; color:var(--text-1); max-width:min(72ch,100%); }
.articulo-cuerpo p{ margin:0 0 24px; }
.articulo-cuerpo h2{ font-family:var(--font-display); font-weight:600; font-size:26px; line-height:1.3; margin:44px 0 18px; }
.articulo-cuerpo h3{ font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.32; margin:36px 0 14px; }
.articulo-cuerpo figure{ margin:32px 0; }
.articulo-cuerpo figure img{ width:100%; height:auto; }
.articulo-cuerpo figcaption{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); padding-top:8px; }
.articulo-cuerpo blockquote{ font-family:var(--font-display); font-style:italic; font-size:22px; line-height:1.5; color:var(--text-2); margin:36px 0; padding-left:22px; border-left:3px solid var(--accent); }
.articulo-cuerpo a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px; }

/* Fuentes consultadas — compacto y escalable: columnas CSS adaptativas
   (una lista corta cae sola en una columna, una larga se reparte en dos
   sin lógica condicional), tipografía chica tipo cita, poco margen
   vertical por ítem. Prioridad: legibilidad y transparencia (enlaces
   visibles y subrayados), no protagonismo — nunca debe competir en peso
   visual con el cuerpo ni empujar "Sigue leyendo" muy abajo. */
.fuentes-consultadas{ max-width:min(72ch,100%); margin:8px 0 0; padding-top:28px; border-top:1px solid var(--line); }
.fuentes-consultadas h3{ font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); margin:0 0 14px; }
.fuentes-consultadas ul{ list-style:none; margin:0; padding:0; columns:280px 2; column-gap:28px; }
.fuentes-consultadas li{ font-family:var(--font-body); font-size:12.5px; line-height:1.5; color:var(--text-2); break-inside:avoid; margin:0 0 12px; padding-left:14px; position:relative; }
.fuentes-consultadas li::before{ content:"—"; position:absolute; left:0; color:var(--text-3); }
.fuentes-consultadas a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }

/* ================= página "Sobre nosotros" — v2 =================
   Dirección de arte "El expediente, no el prospecto" (revisión de diseño,
   ver hilo de trabajo para el razonamiento completo). Scope ".sobre-nosotros":
   cero identidad visual nueva -- sigue reutilizando tokens, .kicker,
   .eyebrow, .card/.card-texto, .ver-todo -- lo que cambia es la lógica de
   composición (márgenes, alternancia de estructura por sección, reparto de
   color) y algunos elementos propios de esta página (mosaico de áreas,
   split de IA, diagrama de supervisión). Ver Diseno-Sobre-Nosotros.md para
   el contenido editorial base, que esta revisión no toca.

   Márgenes: aprox. el doble del resto del sitio (48px vs. 24px de .wrap),
   solo dentro de esta página -- pedido explícito de la revisión de diseño. */
.sobre-nosotros .wrap{ padding:0 48px; }
.sobre-nosotros .modulo{ padding:34px 0; }
/* Ajuste fino: "Cómo se supervisa" un poco más pegado al bloque de arriba. */
.sobre-nosotros .sn-supervision{ padding-top:14px; }

/* Nota de diseño: la dirección de arte original proponía una "columna
   vertebral" -- una guía visual de las 4 capas editoriales (Entrada/
   Contexto/Profundización/Análisis), marcada explícitamente como
   experimental por el director ("si distrae o pesa, elimínala"). Se
   probó una versión simplificada (etiqueta de esquina vía [data-capa] +
   content:attr()) y se descartó en la propia construcción del prototipo:
   además de no aportar tanto como el resto de los recursos nuevos
   (numeral 2026, mosaico, split de IA, diagrama de supervisión ya narran
   la estructura por sí solos), la implementación real resultó frágil --
   attr() en CSS solo lee atributos del propio elemento donde se genera
   el pseudo-elemento, no de un ancestro, así que la etiqueta no llegaba a
   pintar texto sin mover el atributo a cada .wrap; y su posicionamiento
   dependía de que el viewport superara el ancho máximo del contenido
   (1520px) para no quedar recortada fuera de pantalla en anchos de
   escritorio comunes (1280-1440px). Los atributos data-capa quedan en el
   markup de page-sobre-nosotros.php sin efecto visual (no estorban, son
   metadata inerte) por si se retoma la idea con otra implementación más
   robusta -- no se tocó el PHP para no acoplar esta decisión de estilo a
   la plantilla.

   ---------- 1. Hero ---------- */
/* Las dos frases del hero se tratan como una sola idea en dos tiempos, no
   como titular + bajada: mismo tamaño de familia, unidas por un quiebre
   con marca ámbar -- resuelve la jerarquía desbalanceada de la v1.
   Composición texto-izquierda / imagen-derecha (inspirada en la referencia
   del director, sin copiarla): la imagen es protagonista real, no un
   acento -- ocupa una columna propia a todo lo alto del hero. */
.sobre-nosotros .sn-hero-grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:40px; align-items:stretch; }
.sobre-nosotros .sn-hero-texto{ display:flex; flex-direction:column; padding:6px 0; }
.sobre-nosotros .sn-hero-texto .eyebrow{ font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; display:block; }
.sobre-nosotros .sn-hero-diptico{ margin:0 0 22px; }
.sobre-nosotros .sn-hero-linea-1,
.sobre-nosotros .sn-hero-linea-2{
	display:block; font-family:var(--font-display); font-weight:600;
	font-size:clamp(26px,2vw + 14px,38px); line-height:1.18; letter-spacing:-.01em;
	color:var(--ink); text-wrap:pretty;
}
.sobre-nosotros .sn-hero-linea-2{ font-style:italic; font-weight:500; color:var(--text-2); }
.sobre-nosotros .sn-hero-nexo{ display:block; width:34px; height:2px; background:var(--amber); margin:14px 0; }
.sobre-nosotros .sn-lead{ font-family:var(--font-body); font-size:16.5px; line-height:1.65; color:var(--text-1); max-width:56ch; margin:0; }
.sobre-nosotros .sn-ficha{
	display:flex; flex-direction:row; flex-wrap:wrap; gap:6px 22px; padding:14px 0 0;
	border-top:1px solid var(--line); margin-top:auto; padding-top:24px;
}
.sobre-nosotros .sn-ficha-linea{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--text-2); }
.sobre-nosotros .sn-ficha-linea:first-child{ color:var(--ink); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; }

/* Imagen protagonista del hero -- pieza entregada por el director
   (assets/sobre-nosotros-hero.jpg), aprobada tal cual, con sus colores
   reales (sin duotono -- pedido explícito de esta revisión). El contorno
   irregular (clip-path) es lo que la integra a la identidad editorial en
   vez del color: un recorte documental, no un rectángulo de stock, con la
   esquina superior izquierda y la inferior derecha "cortadas" como una
   fotografía de archivo pegada en un expediente. Forma distinta a la de
   la sección IA (border-radius orgánico) a propósito -- dos motivos
   dentro del mismo sistema, no el mismo recurso repetido dos veces. */
.sobre-nosotros .sn-hero-imagen-real{
	position:relative; overflow:hidden; width:100%; height:100%; min-height:380px;
	clip-path:polygon(7% 0%, 100% 0%, 100% 86%, 91% 100%, 0% 100%, 0% 11%);
}
.sobre-nosotros .sn-hero-imagen-real img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 38%;
}

/* ---------- 2. Cómo empezamos ---------- */
/* Módulo tratado como pieza independiente: más angosto que el resto de la
   página y centrado, con aire lateral propio -- no comparte columnas con
   el hero ni con las áreas, a propósito, para romper la sensación de
   grilla única que atravesaba toda la v3. */
.sobre-nosotros .sn-bloque-origen{ max-width:1180px; margin-left:auto; margin-right:auto; }
/* "2026" aparece una sola vez, como numeral gráfico grande (wash sutil de
   --ink) -- ancla visual del bloque en vez de repetirse en cada hito. */
/* "2026" centrado verticalmente contra el conjunto de los tres hitos (su
   centro visual cae aproximadamente a la altura de "El giro", el del
   medio) -- ancla el módulo en vez de quedar apoyado arriba o abajo. */
.sobre-nosotros .sn-origen-grid{ display:grid; grid-template-columns:auto 1fr; gap:8px 68px; align-items:center; }
.sobre-nosotros .sn-numeral-2026{
	font-family:var(--font-display); font-weight:700; font-size:clamp(72px,9vw,128px);
	line-height:.85; color:color-mix(in srgb, var(--ink) 15%, var(--paper));
	letter-spacing:-.02em; user-select:none;
}
.sobre-nosotros .sn-hitos{ display:flex; flex-direction:column; gap:20px; padding-top:14px; }
.sobre-nosotros .sn-hito{ padding-left:18px; border-left:2px solid var(--line-strong); }
.sobre-nosotros .sn-hito-titulo{ display:block; font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:5px; }
.sobre-nosotros .sn-hito p{ font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--text-2); margin:0; }
/* Frase de cierre del bloque -- centrada dentro de la sección, en una sola
   línea siempre que el ancho lo permita (clamp de tamaño para que quepa
   antes de tener que envolver), con un filete ámbar centrado arriba en vez
   del borde izquierdo de la v4 -- mismo acento, tratamiento simétrico. */
.sobre-nosotros .sn-cierre-bloque{
	position:relative; font-family:var(--font-display); font-weight:600; font-style:normal;
	font-size:clamp(17px,1.6vw + 10px,21px); line-height:1.4; color:var(--ink);
	margin:38px auto 0; padding-top:18px; text-align:center; max-width:60ch; white-space:nowrap;
}
.sobre-nosotros .sn-cierre-bloque::before{
	content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
	width:36px; height:2px; background:var(--amber);
}

/* ---------- 3. Qué hacemos distinto ---------- */
/* Kicker centrado sobre el módulo -- única sección de la página con este
   tratamiento, a propósito: rompe la sensación de que todo está anclado
   al mismo margen izquierdo. */
.sobre-nosotros .sn-kicker-centrado{ justify-content:center; text-align:center; }
/* Tres tarjetas escalonadas -- quiebre sutil, editorial (desplazamiento
   vertical leve + filete superior alternado ink/teal/ámbar). El ritmo es
   normal -> apenas más abajo -> normal: la v3 bajaba la tarjeta del medio
   30px, que leía como una "U" marcada con un vacío central grande -- acá
   las tres se mueven un poco (la de los extremos sube levemente, la del
   medio baja apenas), para un desnivel mucho más discreto sin perder el
   quiebre. */
.sobre-nosotros .sn-adn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 24px; }
.sobre-nosotros .sn-adn-grid .card-texto{ border-top-width:3px; }
.sobre-nosotros .sn-adn-1{ border-top-color:var(--ink); margin-top:-4px; }
.sobre-nosotros .sn-adn-2{ border-top-color:var(--accent-deep); margin-top:12px; }
.sobre-nosotros .sn-adn-3{ border-top-color:var(--amber); margin-top:-8px; }
.sobre-nosotros .sn-adn-grid .card-texto h3{ font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.3; margin:0 0 8px; }

/* Sistema de glifos -- un solo lenguaje gráfico (SVG a mano, trazo
   currentColor) reutilizado en las 3 familias: ADN, áreas y supervisión.
   Tamaño e intensidad deliberadamente bajos -- son marca, no ilustración. */
.sobre-nosotros .sn-glifo{ width:22px; height:22px; flex-shrink:0; }
.sobre-nosotros .sn-adn-grid .sn-glifo{ color:var(--text-3); margin-bottom:10px; display:block; }
.sobre-nosotros .sn-adn-1 .sn-glifo{ color:var(--ink); }
.sobre-nosotros .sn-adn-2 .sn-glifo{ color:var(--accent-deep); }
.sobre-nosotros .sn-adn-3 .sn-glifo{ color:var(--amber); }

/* ---------- 4. Áreas que cubrimos ---------- */
/* Mosaico asimétrico: 1 tarjeta grande (la de la publicación más reciente
   de todas, calculada en page-sobre-nosotros.php) + 6 chicas, en una grilla
   de 6 columnas × 2 filas exacta -- resuelve el "5+2 incompleto" sin dejar
   ninguna celda sobrante. Cada área muestra SU PROPIA imagen cuando existe
   (no solo la grande). Tarjetas chicas compactas: imagen + área + titular,
   sin fecha ni "Ver todo" -- el titular ya es el enlace, así que ese link
   sobraba y solo agregaba altura. La grande conserva la fecha porque ahí
   sí completa la composición (es la pieza con más aire). */
.sobre-nosotros .sn-intro-bloque{ font-family:var(--font-display); font-style:italic; font-size:17px; color:var(--text-2); margin:0 0 24px; }
.sobre-nosotros .sn-mosaico{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; grid-auto-flow:dense; gap:1px; background:var(--line); border:1px solid var(--line); }
.sobre-nosotros .sn-area{ background:var(--paper); padding:14px; display:flex; flex-direction:column; gap:6px; border-top:3px solid var(--ink); }
.sobre-nosotros .sn-area:nth-child(7n+2){ border-top-color:var(--accent-deep); }
.sobre-nosotros .sn-area:nth-child(7n+3){ border-top-color:var(--amber); }
.sobre-nosotros .sn-area:nth-child(7n+5){ border-top-color:var(--accent-deep); }
.sobre-nosotros .sn-area:nth-child(7n+6){ border-top-color:var(--amber); }
.sobre-nosotros .sn-area-grande{ grid-column:span 3; grid-row:span 2; padding:20px; border-top-width:4px; }
.sobre-nosotros .sn-area-imagen{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-tint); margin-bottom:2px; }
.sobre-nosotros .sn-area-grande .sn-area-imagen{ aspect-ratio:16/9; }
.sobre-nosotros .sn-area-imagen img{ width:100%; height:100%; object-fit:cover; }
.sobre-nosotros .sn-area-nombre{ display:flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:700; font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
.sobre-nosotros .sn-area-nombre .sn-glifo{ width:14px; height:14px; color:inherit; }
.sobre-nosotros .sn-area-grande .sn-area-nombre{ font-size:11.5px; }
.sobre-nosotros .sn-area-grande .sn-area-nombre .sn-glifo{ width:17px; height:17px; }
/* Áreas sin nota todavía: el glifo queda como única identidad visual de la
   tarjeta -- más grande y centrado, no una miniatura de esquina, para que
   la ausencia de foto se sienta "categoría en espera", no "hueco roto". */
.sobre-nosotros .sn-area:not(.sn-area-con-imagen):not(.sn-area-grande){ align-items:flex-start; }
.sobre-nosotros .sn-area:not(.sn-area-con-imagen) .sn-area-vacia{ color:var(--text-3); }
.sobre-nosotros .sn-area h4{ font-family:var(--font-display); font-weight:600; font-size:13.5px; line-height:1.28; margin:1px 0 0; }
.sobre-nosotros .sn-area-grande h4{ font-size:20px; line-height:1.25; margin-top:4px; }
.sobre-nosotros .sn-area h4 a{ color:var(--text-1); text-decoration:none; }
.sobre-nosotros .sn-area h4 a:hover{ text-decoration:underline; }
.sobre-nosotros .sn-area-vacia{ font-family:var(--font-body); font-size:12px; font-style:italic; color:var(--text-3); margin:1px 0 0; }

/* ---------- 5. Lo que puede hacer la IA — y lo que no ---------- */
/* Composición de tres zonas: Puede | Imagen | No puede. Los dos textos
   quedan sobre fondo limpio (--paper), con el mismo tratamiento editorial
   (kicker + filete superior) que ya usan las tarjetas de "Qué hacemos
   distinto" -- ninguno subordinado al otro. La imagen central es un
   elemento visual independiente, puente entre ambos conceptos, no un
   fondo que el texto tenga que pisar -- así la legibilidad de "Puede" y
   "No puede" deja de depender por completo de qué tan clara u oscura
   salga cada una de las 5 fotos rotativas. Columnas no idénticas (1fr /
   .82fr / 1fr) y la imagen ligeramente más angosta que los textos, para
   que no lea como tres celdas de una tabla. */
.sobre-nosotros .sn-ia-split{ display:grid; grid-template-columns:1fr .82fr 1fr; gap:28px; align-items:center; }
.sobre-nosotros .sn-ia-puede,
.sobre-nosotros .sn-ia-no-puede{ padding:102px 0 0; border-top:3px solid var(--ink); align-self:start; }
.sobre-nosotros .sn-ia-no-puede{ border-top-color:var(--teal); }
.sobre-nosotros .sn-columna-titulo{ font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 14px; line-height:1.4; }
.sobre-nosotros .sn-columna-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.sobre-nosotros .sn-columna-lista li{ font-family:var(--font-body); font-size:14.5px; line-height:1.5; color:var(--text-2); padding-left:16px; position:relative; }
.sobre-nosotros .sn-columna-lista li::before{ content:"—"; position:absolute; left:0; color:var(--text-3); }
/* Acento ámbar puntual: los guiones de "No puede" (no los de "Puede", a
   propósito -- asimetría, no simetría decorativa) rompen el predominio
   teal/ink que gana terreno de acá para abajo en la página. */
.sobre-nosotros .sn-ia-no-puede .sn-columna-lista li::before{ color:var(--amber); }
/* Imagen central -- rectángulo con esquinas asimétricas (no una tarjeta
   con radio parejo, tampoco un blob orgánico completo) + una rotación
   apenas perceptible: alcanza para que se sienta "puesta con criterio",
   no pegada a la grilla. Sin difuminado ni viñeta pesada -- la foto se ve
   con su propio color, solo una pizca de contraste para que las 5 (que
   traen luz/tono distintos entre sí) queden parejas como sistema. */
.sobre-nosotros .sn-ia-imagen-central{
	position:relative; overflow:hidden; width:100%; aspect-ratio:4/5; align-self:center;
	border-radius:14% 8% 16% 6% / 8% 14% 6% 16%;
	transform:rotate(-1.4deg);
	box-shadow:0 14px 32px -18px rgba(11,18,32,.35);
}
.sobre-nosotros .sn-ia-imagen-central svg{ position:absolute; inset:0; width:100%; height:100%; }
/* Ilustración editorial elegida al azar (5 assets aprobados, ver
   page-sobre-nosotros.php) -- ocupa el recorte directamente (el propio
   border-radius/overflow del contenedor la recorta) y aparece con un fade
   corto una vez que el script la elige. */
.sobre-nosotros .sn-ia-imagen{
	position:absolute; inset:0; background-size:cover; background-position:center;
	opacity:0; transition:opacity .4s ease;
	filter:contrast(1.04) saturate(.96);
}
.sobre-nosotros .sn-ia-imagen.is-listo{ opacity:1; }
/* Kicker de esta sección con apenas más jerarquía que "Puede"/"No puede"
   (15px del .kicker de base ya es más que los 13px de .sn-columna-titulo,
   se refuerza un poco el peso para que la diferencia se note sin gritar). */
.sobre-nosotros .sn-kicker-ia .nombre{ font-size:16px; font-weight:800; }
/* La bisagra deja de nacer pegada al margen izquierdo (bajo "Puede") y
   pasa a arrancar aproximadamente bajo la imagen/columna "No puede" --
   contrapeso diagonal real contra el título, que queda arriba a la
   izquierda: título arriba-izq. -> frase abajo-der. */
.sobre-nosotros .sn-bisagra{
	position:relative; font-family:var(--font-display); font-weight:500; font-style:italic; font-size:20px; line-height:1.5;
	color:var(--ink); max-width:46ch; margin:36px 0 0 auto; padding-top:16px; text-align:left;
}
/* Mismo filete ámbar que ya marca el quiebre del hero y el cierre de
   "Cómo empezamos" -- reaparece acá como remate de la sección, no como
   elemento nuevo. */
.sobre-nosotros .sn-bisagra::before{
	content:""; position:absolute; top:0; left:0; width:30px; height:2px; background:var(--amber);
}

/* ---------- 6. Cómo se supervisa cada nota ---------- */
/* Las 4 etapas en una sola línea horizontal, misma jerarquía -- el zigzag
   de la ronda anterior aportaba personalidad pero dejaba demasiado aire
   vertical antes de "Quién responde", así que se compactó. Separadores
   cortos y discretos entre columnas (no una línea larga) y el punto ámbar
   ahora arriba de cada ícono, parejo en las 4. */
.sobre-nosotros .sn-flujo{
	position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0 20px;
	padding:8px 0 36px; counter-reset:sn-paso;
}
/* Conector horizontal continuo, a la altura del punto de cada paso -- lee
   como un único flujo que atraviesa las 4 etapas, en vez de 4 columnas
   sueltas. Sutil (1px, color de línea, no ámbar) para no competir con el
   punto de cada etapa. Arranca y termina exactamente en el centro del
   primer y el último punto (4.5px = mitad del ancho del punto, con
   box-sizing:border-box) -- antes usaba un cálculo simétrico en % que no
   correspondía a la posición real de los puntos dentro de la grilla de 4
   columnas + gap, y dejaba un tramo vacío antes del primer punto. */
.sobre-nosotros .sn-flujo::before{
	content:""; position:absolute; left:4.5px; right:calc(25% - 19.5px);
	top:30px; height:1px; background:var(--line-strong); z-index:0;
}
.sobre-nosotros .sn-flujo-paso{
	position:relative; display:flex; flex-direction:column; gap:6px; padding-top:44px;
	counter-increment:sn-paso; z-index:1;
}
/* Numeración discreta 01 / 02 / 03 / 04 -- refuerza la lectura de
   secuencia sin depender de una línea continua. Separada horizontalmente
   del punto (no encima de él) y con algo más de peso/tamaño que la ronda
   anterior, donde quedaba casi superpuesta al círculo. */
.sobre-nosotros .sn-flujo-paso::after{
	content:counter(sn-paso, decimal-leading-zero);
	position:absolute; left:20px; top:21px; font-family:var(--font-mono); font-weight:600;
	font-size:13px; letter-spacing:.04em; color:var(--text-2);
}
.sobre-nosotros .sn-flujo-punto{ position:absolute; left:0; top:26px; width:9px; height:9px; border-radius:50%; background:var(--amber); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line-strong); z-index:1; }
.sobre-nosotros .sn-flujo-paso .sn-glifo{ color:var(--accent-deep); width:20px; height:20px; }
/* Edición y Aprobación humana conservan el glifo en ámbar -- ya no
   responde a un zigzag arriba/abajo, pero el mismo detalle de color que
   ya funcionaba se mantiene tal cual, ahora como acento parejo entre las
   4 columnas alineadas. */
.sobre-nosotros .sn-flujo-paso--abajo .sn-glifo{ color:var(--amber); }
.sobre-nosotros .sn-flujo-paso h5{ font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.01em; color:var(--ink); margin:0; }
.sobre-nosotros .sn-flujo-paso p{ font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--text-2); margin:0; }
/* Aprobación humana (último paso, siempre) -- realce sobrio: caja propia
   con fondo ámbar muy tenue y filete, sin volverse un elemento llamativo.
   Es la promesa central ("nada se publica sin revisión humana"), por eso
   el único paso que se distingue visualmente del resto. */
.sobre-nosotros .sn-flujo-paso:last-child{
	background:color-mix(in srgb, var(--amber) 7%, var(--paper));
	border:1px solid color-mix(in srgb, var(--amber) 28%, var(--line));
	border-radius:3px; padding:44px 14px 14px 14px; margin:-8px -14px 0;
}
.sobre-nosotros .sn-flujo-paso:last-child .sn-flujo-punto{ background:var(--amber); box-shadow:0 0 0 1px color-mix(in srgb, var(--amber) 50%, var(--line-strong)); }
.sobre-nosotros .sn-flujo-paso:last-child h5{ color:color-mix(in srgb, var(--amber) 55%, var(--ink)); }

/* ---------- 8. Quién responde por esto ---------- */
/* Composición ancha (kicker + colofón + párrafo con el ancho real del
   módulo) con la fotografía real del director a la derecha -- grande,
   integrada al bloque (mismo eje vertical que el nombre, pegada al texto
   con un espacio generoso pero no "aislada en una esquina"), nunca chica
   ni testimonial. El texto sigue siendo 1fr (todo el ancho disponible). */
.sobre-nosotros .sn-responsable-grid{ display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; }
/* Filete ámbar, no ink -- el kicker de arriba ya es teal; este pequeño
   quiebre de color es lo que evita que el cierre de la página se sienta
   monocromo verde/tinta. */
.sobre-nosotros .sn-colofon{ display:flex; flex-direction:column; gap:2px; padding-top:14px; border-top:2px solid var(--amber); margin-bottom:16px; max-width:fit-content; }
.sobre-nosotros .sn-colofon-nombre{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--ink); }
.sobre-nosotros .sn-colofon-cargo{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); }
/* Sin tope de ancho artificial -- el párrafo usa todo lo que le da la
   columna 1fr (todo el módulo menos la foto), para que nombre, cargo y
   texto se perciban como un solo cuerpo editorial ancho, no una columna
   angosta al lado de la foto. */
.sobre-nosotros .sn-responsable-grid p{ font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--text-2); margin:0; }
/* Fotografía real del director -- circular, con presencia clara (no un
   acompañamiento testimonial chico): tamaño comparable al de una firma de
   autor en una revista editorial, con un filete fino que la ata a la
   misma paleta del resto del sistema (no un marco decorativo aparte).
   Un poco más grande que la ronda anterior para compensar que el bloque
   de texto ahora ocupa mucho más ancho. */
.sobre-nosotros .sn-foto-director{
	width:184px; height:184px; border-radius:50%; overflow:hidden; flex-shrink:0;
	border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line-strong), 0 18px 32px -18px rgba(11,18,32,.28);
}
.sobre-nosotros .sn-foto-director img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }

/* ---------- 9. Cierre ---------- */
/* Banda de cierre propia -- antes la frase y el link a Contacto quedaban
   sueltos, sin caja ni separación clara del contenido anterior ni del
   footer. Ahora es un bloque definido (fondo tenue + filete), con
   suficiente aire arriba y abajo para leerse como el remate de la
   página, no como un párrafo más. */
.sobre-nosotros .sn-cierre{ padding:20px 0 64px; }
.sobre-nosotros .sn-cierre-caja{
	text-align:center; background:var(--paper-tint); border:1px solid var(--line);
	border-radius:4px; padding:48px 32px; margin-top:8px;
}
/* Mismo filete ámbar centrado que ya remata "Cómo empezamos" -- bookend:
   el primer y el último acento de color de la página son el mismo gesto. */
.sobre-nosotros .sn-cierre-frase{
	position:relative; font-family:var(--font-display); font-weight:700; font-style:italic;
	font-size:25px; color:var(--ink); margin:0 0 16px; padding-top:22px; display:inline-block;
}
.sobre-nosotros .sn-cierre-frase::before{
	content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
	width:34px; height:2px; background:var(--amber);
}
.sobre-nosotros .sn-cierre-texto{ font-family:var(--font-body); font-size:14px; color:var(--text-2); margin:0 0 22px; }
/* CTA visible hacia Contacto -- antes era un link de texto dentro de la
   frase; ahora es el único botón real de la página, reservado para este
   cierre. */
.sobre-nosotros .sn-cierre-cta{
	display:inline-block; font-family:var(--font-body); font-weight:700; font-size:13.5px;
	letter-spacing:.02em; color:var(--paper); background:var(--ink); text-decoration:none;
	padding:12px 28px; border-radius:2px; transition:background-color .15s ease;
}
.sobre-nosotros .sn-cierre-cta:hover{ background:var(--accent-deep); }

.art-main{ padding-bottom:56px; }

/* --- columna editorial: liviana, sin apariencia de panel de widgets --- */
.art-sidebar-editorial{ padding-top:6px; }
.sidebar-modulo{ margin-bottom:40px; }
.sidebar-titulo{ font-family:var(--font-body); font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px; }
.art-sidebar-editorial .item-compacto{ padding:12px 0; }
.art-sidebar-editorial .item-compacto:first-child{ padding-top:0; }
.art-sidebar-editorial .item-compacto h4{ font-size:14px; }
.art-sidebar-editorial .item-textual{ padding:10px 0; }
.art-sidebar-editorial .item-textual:first-child{ padding-top:0; }
.art-sidebar-editorial .item-textual h4{ font-size:13.5px; }
.sidebar-secciones .chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.sidebar-secciones .chip-row a{ font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text-2); background:transparent; border:1px solid var(--line); padding:5px 10px; border-radius:5px; }
.sidebar-secciones .chip-row a:hover{ border-color:var(--line-strong); color:var(--text-1); }
/* Nube de etiquetas -- deliberadamente SIN borde/fondo/radio, a diferencia
   de .chip-row de arriba: son dos tipos de navegación distintos (Secciones
   es fija y estructural; Etiquetas es descubrimiento de cola larga) y no
   deben confundirse visualmente. wp_tag_cloud() ya varía el font-size
   según frecuencia (smallest/largest en single.php) -- acá solo se fija la
   tipografía, el color sobrio y el espaciado para que fluya como texto,
   no como una fila de botones. */
.sidebar-etiquetas .tagcloud-sobrio{ line-height:2; }
.sidebar-etiquetas .tagcloud-sobrio a{ font-family:var(--font-body); color:var(--text-2); text-decoration:none; margin-right:10px; white-space:nowrap; }
.sidebar-etiquetas .tagcloud-sobrio a:hover{ color:var(--text-1); text-decoration:underline; }

/* Formulario de suscripción Kit — se integra dentro de .sidebar-suscripcion
   (single.php). El widget se auto-inyecta vía script async de kit.com y trae
   su propio <style> interno con tamaños/márgenes pensados para un ancho
   mayor a 280px; estas reglas lo ajustan al ancho real del sidebar y a la
   tipografía del sitio sin tocar el diseñador de Kit. */
.sidebar-suscripcion,
.sidebar-suscripcion .kit-embed-wrap,
.sidebar-suscripcion .formkit-form{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
.sidebar-suscripcion .formkit-form *{ box-sizing:border-box !important; max-width:100% !important; min-width:0 !important; }
.sidebar-suscripcion .formkit-header{ margin:0 0 10px !important; }
.sidebar-suscripcion .formkit-header h2{ font-family:var(--font-body) !important; font-size:25px !important; line-height:1.25 !important; }
.sidebar-suscripcion .formkit-subheader{ margin:0 0 16px !important; }
.sidebar-suscripcion .formkit-subheader p{ font-family:var(--font-body) !important; font-size:14px !important; line-height:1.5 !important; }
/* Kit pone flex:1 0 auto (flex-shrink:0) en .formkit-input y .formkit-submit
   dentro de un contenedor flex — por eso no se encogían al ancho de 280px.
   Su selector real es `.formkit-form[data-uid="..."] .formkit-input`, con la
   misma especificidad que un simple `.sidebar-suscripcion .formkit-input`
   (clase+atributo+clase = clase+clase); por eso se necesita un selector con
   un nivel más (vía .kit-embed-wrap) para ganar el empate siempre, sin
   depender del orden de carga entre nuestro style.css y el <style> que Kit
   inyecta dentro del propio formulario. */
.sidebar-suscripcion .kit-embed-wrap .formkit-fields{
	display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important;
	width:100% !important; margin-top:14px !important;
}
.sidebar-suscripcion .kit-embed-wrap .formkit-field{ width:100% !important; flex:1 1 100% !important; }
.sidebar-suscripcion .kit-embed-wrap .formkit-input{
	width:100% !important; flex:1 1 100% !important;
	font-family:var(--font-body) !important;
}
.sidebar-suscripcion .kit-embed-wrap .formkit-submit{
	width:100% !important; flex:1 1 100% !important;
	font-family:var(--font-body) !important; font-weight:600 !important;
}
.sidebar-suscripcion .formkit-guarantee{ margin-top:10px !important; }

/* --- cierre: módulo de tarjetas grandes, independiente del sidebar ---
   márgenes negativos = el ancho del padding horizontal de .articulo-v4,
   para que el fondo tintado llegue borde a borde del propio contenedor
   del artículo (no del viewport completo, ni con doble padding). */
.art-siguiente{ background:var(--paper-tint); border-top:1px solid var(--line); margin:8px -28px 0; padding:44px 28px 60px; }
.art-siguiente-inner{ max-width:calc(var(--article-max) - 56px); margin:0 auto; }
.art-siguiente .kicker{ margin-bottom:20px; }

/* ================= footer (v2, horizontal, 2026-09-10) ================= */
/* Fondo Tinta / texto Papel / metadatos Gris cálido / enlaces Teal -- paleta
   INFONEXO vía las custom properties ya redefinidas por el plugin
   infonexo-identidad (--ink, --paper, --grey, --teal), ningún color nuevo.
   Reemplaza el diseño apilado anterior (bloques uno debajo del otro): ahora
   Secciones y Nosotros van lado a lado en desktop, con un divisor vertical
   entre ambos -- referencia conceptual (no copia) de bloques horizontales
   tipo La Tercera, adaptado al contenido real de InfoNexo (2 bloques, no
   varios). .wrap es el mismo contenedor/max-width que usa el resto del
   sitio -- el footer no queda pegado a los bordes de la ventana. */
footer.site-footer{
	background:var(--ink);
	color:var(--paper);
	margin-top:48px;
}
.footer-grid{
	display:flex;
	flex-direction:column;
	/* OJO (corregido 2026-09-10): NUNCA usar el shorthand "padding" acá --
	   .footer-grid comparte el mismo elemento que .wrap (mismo <div
	   class="wrap footer-grid">, ver footer.php), y .wrap ya fija
	   padding:0 24px para alinear el contenido con el resto del sitio
	   (portada, header). Un "padding:28px 0 16px" en este selector,
	   declarado DESPUÉS de .wrap en la cascada, ponía left/right en 0 y
	   pisaba ese margen -- el contenido quedaba pegado a los bordes de la
	   ventana. padding-top/padding-bottom por separado deja intacto el
	   padding horizontal de .wrap. */
	padding-top:28px;
	padding-bottom:16px;
}
/* Línea divisoria SOLO entre los 3 bloques principales (presentación /
   Secciones+El medio / colofón) -- nunca entre las columnas internas de
   Secciones, ni entre Secciones y El medio (ese divisor es vertical, ver
   .footer-principal más abajo, no uno de estos horizontales). */
.footer-grid > *{ padding:16px 0; }
.footer-grid > *:first-child{ padding-top:0; }
.footer-grid > * + *{ border-top:1px solid rgba(250,248,244,.12); }

/* Presentación: logo (variante clara del wordmark oficial, ver footer.php)
   + una línea, compacto, en la misma fila cuando el ancho alcanza --
   "Inicio" del menú queda representado acá por el logo, no como un enlace
   repetido más abajo. */
.footer-top{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px 20px;
}
.footer-brand{ flex:none; line-height:0; }
.footer-logo{ height:26px; width:auto; display:block; }

/* Bloques principales lado a lado -- Secciones | divisor vertical sutil |
   El medio | divisor | InfoNexo (identidad). Ninguno se estira para llenar
   el ancho disponible (flex:0 0 auto -- cada uno ocupa solo lo que su
   contenido necesita, sin space-between: la 3ª columna se junta con la 2ª
   por su propio contenido, no queda flotando pegada al borde derecho con un
   vacío en el medio -- esa era la Alternativa B descartada, 2026-09-16) --
   nunca apilados en desktop. */
.footer-principal{
	display:flex;
	align-items:flex-start;
}
.footer-secciones{ flex:0 0 auto; }
.footer-nosotros{
	flex:0 0 auto;
	margin-left:44px;
	padding-left:32px;
	border-left:1px solid rgba(250,248,244,.12);
}
.footer-identidad{
	flex:0 0 auto;
	max-width:420px;
	margin-left:44px;
	padding-left:32px;
	border-left:1px solid rgba(250,248,244,.12);
}
.footer-identidad p{
	font-family:var(--font-body);
	font-size:13.5px;
	line-height:1.6;
	color:var(--paper);
	margin:0;
}

.footer-titulo{
	font-family:var(--font-mono);
	font-size:11px;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--grey);
	margin-bottom:12px;
}

/* Columnas internas de Secciones -- ancho ajustado al contenido (no 1fr/1fr
   estirado), separadas solo por un espacio reducido (14px, antes 28px) para
   que se perciban como parte de un mismo bloque, no como dos grupos
   alejados. Sin divisor entre ellas. */
.footer-cols{
	display:grid;
	grid-template-columns:repeat(2, max-content);
	column-gap:14px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin:0 0 8px; }
.footer-col a{
	font-family:var(--font-body);
	font-size:13.5px;
	color:var(--teal);
	text-decoration:none;
}
.footer-col a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* Colofón: discreto, no debe competir con los bloques principales. */
footer.site-footer .colofon{
	font-family:var(--font-mono);
	font-size:11px;
	color:var(--grey);
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:10px;
}

/* ================= responsive ================= */
@media (max-width: 860px){
	.wrap{ padding:0 18px; }
	.apertura-grid{ grid-template-columns:1fr; }
	.apertura-dominante h1{ font-size:28px; }
	.apertura-columna{ margin-top:22px; }
	.tres-grid{ grid-template-columns:1fr; gap:22px; }
	.tres-grid.cols-2{ max-width:none; }
	.tres-grid.cols-1{ max-width:none; }
	.mini-indice-grid.lista-compacta{ grid-template-columns:1fr; }
	.mini-indice-grid.lista-compacta .item-compacto:last-child:nth-child(odd){ grid-column:auto; }
	.destacada-lista-grid{ grid-template-columns:1fr; gap:22px; }
	.card-destacada h3{ font-size:21px; }
	.card-full{ grid-template-columns:1fr; gap:14px; }
	.card-full h2{ font-size:23px; }
	.item-compacto{ grid-template-columns:60px 1fr; gap:12px; }
	.item-compacto .thumb-sm{ width:60px; height:45px; }
	.masthead-wordmark-row{ padding:14px 0 4px; }
	.masthead-sticky-inner{ padding:4px 0 8px; }
	.logo{ font-size:30px; }
	.primary-nav .nav-list{ gap:4px 16px; }
	/* El desplegable "Secciones" pasa a expandirse en el flujo (no panel
	   flotante) — sólo cuando el script lo abre con .is-open. */
	.primary-nav .nav-item.has-sub{ width:100%; text-align:center; }
	.primary-nav .subnav{
		position:static; transform:none; left:auto; min-width:0; width:100%;
		margin-top:8px; border-left:0; border-right:0; box-shadow:none;
	}
	.primary-nav .subnav a{ text-align:center; white-space:normal; }

	.articulo-v4{ padding:32px 20px 0; }
	.art-titulo{ font-size:27px; }
	.art-hero-texto{ max-width:none; }
	.art-imagen-hero{ margin-bottom:32px; }
	.art-layout{ grid-template-columns:1fr; gap:0; }
	.articulo-cuerpo{ font-size:17px; max-width:none; }
	.fuentes-consultadas{ max-width:none; }
	.fuentes-consultadas ul{ columns:1; }
	.art-sidebar-editorial{ border-top:1px solid var(--line); margin-top:36px; padding-top:32px; }
	.art-siguiente{ margin:8px -20px 0; padding:36px 20px 48px; }
	.art-siguiente-inner{ max-width:none; }

	/* Footer: Secciones y El medio pasan de lado a lado a apilados -- el
	   divisor vertical entre ambos se reemplaza por uno horizontal (mismo
	   que ya usa .footer-grid entre sus bloques), y El medio pierde el
	   margin-left/padding-left que solo tenía sentido junto al divisor
	   vertical. La grilla de 2 columnas de Secciones se mantiene acá (hay
	   espacio de sobra en tablet/móvil grande) -- solo se fuerza a 1 columna
	   más abajo, en el breakpoint angosto de verdad. */
	.footer-principal{ flex-direction:column; }
	.footer-nosotros,
	.footer-identidad{
		margin-left:0;
		border-left:0;
		padding-left:0;
		border-top:1px solid rgba(250,248,244,.12);
		padding-top:16px;
		margin-top:16px;
	}
	.footer-identidad{ max-width:none; }
	.colofon{ flex-direction:column; gap:4px; }

	/* Página "Sobre nosotros" (v2): márgenes vuelven a lo habitual del sitio
	   (el "doble de margen" es un recurso de escritorio, en móvil no hay
	   espacio de sobra que gastar) y todas las composiciones asimétricas
	   caen a una sola columna apilada -- mismo criterio ya usado arriba
	   para .tres-grid/.apertura-grid. */
	.sobre-nosotros .wrap{ padding:0 18px; }
	.sobre-nosotros .modulo{ padding:26px 0; }
	.sobre-nosotros .sn-hero-grid{ grid-template-columns:1fr; gap:22px; }
	.sobre-nosotros .sn-hero-imagen-real{ aspect-ratio:16/10; order:-1; }
	.sobre-nosotros .sn-ficha{ margin-top:8px; }
	.sobre-nosotros .sn-hero-linea-1,
	.sobre-nosotros .sn-hero-linea-2{ font-size:26px; }
	.sobre-nosotros .sn-origen-grid{ grid-template-columns:1fr; gap:0; }
	.sobre-nosotros .sn-numeral-2026{ font-size:64px; }
	.sobre-nosotros .sn-hitos{ padding-top:10px; }
	.sobre-nosotros .sn-cierre-bloque{ white-space:normal; }
	.sobre-nosotros .sn-bloque-origen{ max-width:none; }
	.sobre-nosotros .sn-adn-grid{ grid-template-columns:1fr; gap:18px; }
	.sobre-nosotros .sn-adn-1,
	.sobre-nosotros .sn-adn-2,
	.sobre-nosotros .sn-adn-3{ margin-top:0; }
	.sobre-nosotros .sn-mosaico{ grid-template-columns:1fr 1fr; }
	.sobre-nosotros .sn-area-grande{ grid-column:span 2; grid-row:span 1; }
	.sobre-nosotros .sn-ia-split{ grid-template-columns:1fr; gap:26px; }
	.sobre-nosotros .sn-ia-puede,
	.sobre-nosotros .sn-ia-no-puede{ padding-top:16px; }
	.sobre-nosotros .sn-ia-imagen-central{ width:100%; aspect-ratio:16/10; max-width:320px; margin:0 auto; transform:rotate(-1deg); }
	.sobre-nosotros .sn-responsable-grid{ display:flex; flex-direction:column-reverse; align-items:flex-start; gap:20px; }
	.sobre-nosotros .sn-foto-director{ width:112px; height:112px; }
	.sobre-nosotros .sn-flujo{ grid-template-columns:1fr; gap:26px; padding:8px 0 8px 20px; }
	.sobre-nosotros .sn-flujo::before{ content:none; }
	.sobre-nosotros .sn-flujo-paso::before{ content:none; }
	.sobre-nosotros .sn-flujo-paso{ padding-top:0; }
	.sobre-nosotros .sn-flujo-paso::after{ content:none; }
	.sobre-nosotros .sn-flujo-punto{ left:-20px; top:6px; }
	.sobre-nosotros .sn-flujo-paso:last-child{ margin:0; padding:14px; }
}

/* ================= header móvil compacto (≤599px) =================
   Breakpoint propio, más angosto que los 860px/520px que ya usa el tema --
   a propósito: entre 600 y 860px (tablet en portrait) el nav sigue viéndose
   en línea como hoy, sin tocar nada. Recién por debajo de 600px se
   reemplaza el nav visible por el botón combinado + panel plegable. Ver
   decisiones de masthead/menú móvil registradas -- header sticky de un solo
   estado (nunca dos versiones que se transforman entre sí), sin animación. */
@media (max-width: 599px){
	.nav-search-toggle{ display:block; }

	/* El buscador de escritorio de la franja de fecha no aplica acá -- en
	   móvil el buscador sigue siendo, sin ningún cambio, el de
	   #nav-search-panel (ver arriba en este mismo bloque). */
	.masthead-search-desktop{ display:none; }

	.masthead-sticky{
		position:sticky; top:0; z-index:50;
		padding-top:env(safe-area-inset-top, 0px);
	}

	/* Separación real entre el botón y el logo (2026-09-16, revisión UX):
	   .masthead-sticky-inner centra el logo en su ancho TOTAL con
	   text-align:center, y el botón (position:absolute) le resta espacio
	   directamente por la izquierda -- medido en vivo (misma técnica que ya
	   usa infonexo-identidad.css para calibrar el tamaño del logo): con el
	   botón en left:6px (ver arriba), el margen real entre ambos era de
	   -4px, un solapamiento genuino -- ya era de apenas 2px incluso antes,
	   con el botón en left:0. No se soluciona achicando el logo (ya
	   calibrado a su tamaño mínimo aceptable en infonexo-identidad.css) ni
	   el botón (tamaño ya fijado en la revisión anterior) -- se soluciona
	   acá, en la composición: un padding-left asimétrico desplaza el centro
	   de la caja donde text-align:center centra el logo, ganándole aire al
	   botón sin tocar ninguno de los dos elementos.
	   Ojo -- este desplazamiento tiene un costo, medido en vivo con una
	   línea guía en el centro real del viewport: es geométricamente
	   imposible, a 375px de ancho, dar margen real al botón (44px + 6px) Y
	   mantener el logo (283px, fijo) perfectamente centrado -- no entran
	   los tres al mismo tiempo (44+6+283 = 333px de 339px útiles, casi sin
	   sobra). Cualquier margen positivo para el botón desplaza el logo del
	   centro exacto en aproximadamente la mitad de ese padding. 30px (11px
	   de margen) corría el logo 15px del centro real -- perceptible al ojo
	   comparado contra el descriptor de arriba, que sí queda centrado.
	   20px de padding deja solo 6px de margen real (ya no el -4px del
	   problema original, pero tampoco un colchón grande) y corre el logo
	   apenas 10px -- verificado visualmente que a esa distancia ya no se
	   percibe desplazado. Es el punto elegido a propósito, no el que más
	   margen da. */
	.masthead-sticky-inner{ padding-left:20px; }

	/* El nav se pliega por defecto -- el filete de acento de 3px de
	   header.masthead (sin tocar esa regla) cae así justo debajo de la
	   fecha, tal como pide el diagrama aprobado, sin mover esa línea. */
	nav.primary-nav{ display:none; border-top:0; }

	/* Propuesta D (cortina con anclaje), validada en maqueta 2026-09-16:
	   al abrir, el panel deja de estar "en flujo" (ver comentario anterior)
	   y pasa a flotar como tarjeta fija, anclada justo debajo de la barra
	   sticky -- el "top" exacto lo calcula nav.js contra la altura real de
	   .masthead-sticky (varía con el safe-area-inset-top del dispositivo,
	   no es un valor fijo confiable en CSS). 20px de margen lateral (subido
	   desde 16px, revisión UX 2026-09-16): un poco más angosto, para que el
	   margen se lea como intencional y no como "llegó justo hasta el borde"
	   -- sigue probado contra "Ciencia, Salud y Medio Ambiente", el nombre
	   más largo del menú real, sin recortarse. border-radius 14px (subido
	   de 12px): refinamiento discreto, mismo lenguaje visual, sin volverlo
	   "app-like". */
	nav.primary-nav.is-open{
		display:block;
		position:fixed;
		left:20px; right:20px;
		max-height:calc(100vh - 110px);
		overflow-y:auto;
		background:var(--paper);
		border:1px solid var(--line-strong);
		border-radius:14px;
		box-shadow:0 12px 32px rgba(11,18,32,.24);
		z-index:60;
	}
	/* Punta conectora: alinea con el centro del botón. Botón: left:6px dentro
	   de .wrap (18px de padding) -> borde izquierdo real en 24px, centro en
	   24+22(mitad de 44px)=46px desde el borde de pantalla. Panel: left:20px
	   -> 46-20=26px relativo al panel, menos 6px (mitad de la caja de 12px
	   antes de rotar) = 20px de left acá. top:3px en vez de un valor negativo
	   a propósito: verificado en vivo que un offset negativo (que asome por
	   encima del borde superior del panel, invadiendo el área de
	   .masthead-sticky) queda tapado por la barra sticky pese a su z-index
	   más alto -- ambos son hijos directos de <body> pero .masthead-sticky es
	   position:sticky con su propio contexto de apilamiento, y en la práctica
	   gana el pintado ahí. Con top:3px la punta queda enteramente dentro del
	   propio rectángulo del panel, sin invadir el de .masthead-sticky. */
	nav.primary-nav.is-open::before{
		content:"";
		position:absolute;
		left:20px; top:3px;
		width:12px; height:12px;
		background:var(--paper);
		border-left:1px solid var(--line-strong);
		border-top:1px solid var(--line-strong);
		transform:rotate(45deg);
	}

	/* Franja superior propia para la X de cierre (2026-09-16, revisión UX):
	   separa el control de cierre del contenido del panel -- antes competía
	   visualmente con el botón "Buscar" (ya eliminado, ver .search-form más
	   abajo). Deja de ser un botón flotante encima del contenido y pasa a
	   ser parte del flujo normal del panel, en su propia fila con línea
	   divisoria. */
	.nav-panel-topbar{
		display:flex; justify-content:flex-end;
		padding:8px 10px; border-bottom:1px solid var(--line);
	}
	.nav-panel-close{
		display:flex; align-items:center; justify-content:center;
		width:30px; height:30px; border-radius:50%;
		border:1px solid var(--line-strong); background:var(--paper);
		color:var(--text-2); font-size:16px; line-height:1; cursor:pointer;
	}

	.primary-nav .wrap{ padding-top:16px; }

	/* Buscador de un solo campo con lupa integrada (2026-09-16, revisión UX):
	   reemplaza el par [campo][botón "Buscar"] separado -- el botón submit
	   sigue siendo el mismo elemento real (accesible, sigue enviando el
	   formulario), solo se reposiciona encima del propio campo y su texto se
	   esconde visualmente (font-size:0) a favor de un ícono de lupa dibujado
	   en CSS puro vía mask-image -- el <button> no tiene hijos editables sin
	   tocar functions.php, y esa función también arma el buscador de
	   /buscar/ (search.php), que no se toca acá: todo esto queda scoped a
	   .primary-nav .search-form, cero cambio de markup PHP. */
	.primary-nav .search-form{ display:block; position:relative; max-width:none; margin:0 0 18px; }
	.primary-nav .search-form .search-field{ width:100%; padding-right:44px; }
	.primary-nav .search-form .search-submit{
		position:absolute; top:0; right:0; bottom:0;
		width:44px; padding:0; border:0; background:none; cursor:pointer;
		font-size:0; color:var(--text-2);
	}
	.primary-nav .search-form .search-submit::before{
		content:""; display:block; margin:0 auto; width:19px; height:19px;
		background-color:currentColor;
		-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='19' y1='19' x2='15.2' y2='15.2'/%3E%3C/svg%3E");
		mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='19' y1='19' x2='15.2' y2='15.2'/%3E%3C/svg%3E");
		-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
		-webkit-mask-position:center; mask-position:center;
	}
	.primary-nav .search-form .search-submit:hover,
	.primary-nav .search-form .search-submit:focus-visible{ color:var(--accent-deep); }

	/* Navegación principal en una sola columna, alineada a la izquierda
	   (2026-09-16, revisión UX) -- .nav-list base sigue centrado en línea
	   para escritorio (regla sin media query, no se toca), esto solo aplica
	   dentro del panel móvil abierto. */
	nav.primary-nav.is-open .nav-list{
		flex-direction:column; align-items:flex-start; gap:0;
	}
	nav.primary-nav.is-open .nav-list > .nav-item{ width:100%; }
	nav.primary-nav.is-open .primary-nav a,
	nav.primary-nav.is-open .sub-toggle{
		width:100%; padding:12px 2px; border-bottom:1px solid var(--line);
		font-size:15px;
	}
	nav.primary-nav.is-open .nav-item.has-sub{ text-align:left; }

	/* Submenú "Secciones": columna indentada, distinguible del nivel
	   principal por tamaño e indentación, no por un tratamiento distinto. */
	nav.primary-nav.is-open .subnav{
		padding-left:16px; margin:0 0 4px;
	}
	nav.primary-nav.is-open .subnav a{
		padding:9px 2px; font-size:13.5px; color:var(--text-2); text-align:left; white-space:normal;
	}
	/* "Secciones" NO es un acordeón en el panel móvil (revisión UX
	   2026-09-16): las categorías quedan siempre visibles al abrir el
	   panel, sin necesidad de tocar "Secciones" -- el <button
	   class="sub-toggle"> y su estado .is-open siguen siendo el mismo
	   markup/JS que usa escritorio (initSecciones() en nav.js, sin tocar),
	   acá solo se fuerza el resultado visual: el submenú siempre
	   display:block sin importar .is-open, y se le quita la flecha y el
	   cursor de "clic" al título para que no invite a togglear algo que ya
	   está abierto. Un toque ahí sigue sin romper nada -- alterna .is-open
	   puertas adentro, pero no cambia nada visible acá. */
	nav.primary-nav.is-open .nav-item.has-sub .subnav{ display:block; }
	nav.primary-nav.is-open .caret{ display:none; }
	nav.primary-nav.is-open .sub-toggle{ cursor:default; }

	/* Velo semitransparente detrás del panel -- separa la cortina del
	   contenido sin taparlo del todo (mismo principio que la maqueta tomó
	   de referencia). z-index entre el contenido normal y .masthead-sticky
	   (50): la barra sticky con el botón activo queda SIN atenuar, visible
	   y utilizable para cerrar; solo se atenúa lo que hay debajo. Cerrar
	   tocando el velo ya funciona sin JS adicional -- es el mismo listener
	   de "click fuera del panel/botón" que ya cierra el panel hoy. */
	.nav-backdrop.is-open{ display:block; position:fixed; inset:0; background:rgba(11,18,32,.45); z-index:40; }
}

/* Móvil angosto de verdad: acá sí falta espacio para 2 columnas de nombres
   de sección largos ("Ciencia, Salud y Medio Ambiente") -- pasan a 1 sola
   columna sin perder legibilidad. Entre este breakpoint y los 860px de
   arriba, Secciones conserva sus 2 columnas (hay espacio suficiente). */
@media (max-width: 520px){
	.footer-cols{ grid-template-columns:1fr; row-gap:2px; }
	.sobre-nosotros .sn-areas-grid{ grid-template-columns:1fr; }
}

/* ================= búsqueda (C2, 2026-09-16) =================
   V1 aprobada: sin ubicación en el header todavía (se decide junto con el
   menú móvil) -- estos estilos son solo para el formulario dentro de
   search.php y su estado vacío. Mismo tratamiento de input que ya usa el
   formulario de Contacto (borde fino, radio 4px, foco en --accent), para no
   inventar un segundo lenguaje de campos de texto en el sitio. */
.search-form{ display:flex; gap:8px; max-width:420px; margin:0 0 28px; }
.search-form .search-field{
	flex:1; min-width:0; font-family:var(--font-body); font-size:15.5px; color:var(--text-1);
	padding:10px 14px; border:1px solid var(--line-strong); border-radius:4px;
	background:var(--paper); transition:border-color .15s ease;
}
.search-form .search-field:focus{ outline:none; border-color:var(--accent); }
.search-form .search-submit{
	font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:.02em; text-transform:uppercase;
	color:#fff; background:var(--accent); border:0; border-radius:4px; padding:0 22px; cursor:pointer;
	transition:background .15s ease;
}
.search-form .search-submit:hover{ background:var(--accent-deep); }
.busqueda-vacia{ font-family:var(--font-body); font-size:15.5px; line-height:1.6; color:var(--text-2); max-width:56ch; }

/* ================= página "Contacto" (2026-09-12) =================
   Mismo lenguaje que .articulo-v4 (eyebrow .art-cat + título display +
   dek) para que la página no se sienta ajena al resto del sitio, seguido
   del formulario de Fluent Forms restyleado para que no se vea como una
   página genérica del plugin -- se sobreescriben sus clases (ff-el-*),
   nunca se pelea contra su CSS con !important salvo donde el plugin fija
   estilos inline (fondo/color del botón, ya resueltos aparte en la propia
   configuración del formulario, ver Fluent Forms -> Contacto — InfoNexo).
   Ancho de columna = --content-width (720px), igual que un artículo --
   un formulario no necesita ni merece el ancho completo de --wrap. */
.contacto .ct-wrap{ max-width:var(--content-width); padding:56px 24px 96px; }
.contacto .ct-titulo{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,2.2vw + 14px,42px); line-height:1.14; margin:0 0 16px; letter-spacing:-.01em; }
.contacto .ct-dek{ font-family:var(--font-body); font-size:17px; line-height:1.6; color:var(--text-2); margin:0 0 40px; max-width:56ch; }

.contacto .ct-formulario .ff-el-group{ margin-bottom:22px; }
.contacto .ct-formulario .ff-el-input--label label{ font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--text-1); margin-bottom:6px; display:inline-block; }
.contacto .ct-formulario .ff-el-form-control{
	font-family:var(--font-body); font-size:15.5px; color:var(--text-1);
	width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:4px;
	background:var(--paper); transition:border-color .15s ease;
}
.contacto .ct-formulario .ff-el-form-control:focus{ outline:none; border-color:var(--accent); }
.contacto .ct-formulario textarea.ff-el-form-control{ min-height:140px; resize:vertical; }
.contacto .ct-formulario .error{ font-family:var(--font-body); font-size:12.5px; color:#B3261E; margin-top:6px; }

/* Turnstile: el widget de Cloudflare trae su propio tamaño fijo (~300px) --
   no se lo fuerza a un ancho artificial, solo se le da aire vertical
   consistente con el resto de los campos. */
.contacto .ct-formulario .ff-el-turnstile{ margin:4px 0 6px; }

.contacto .ct-formulario .ff-btn-submit{
	font-family:var(--font-body); font-weight:600; font-size:15px;
	padding:13px 28px; border-radius:4px; border:none; cursor:pointer;
	transition:opacity .15s ease;
}
.contacto .ct-formulario .ff-btn-submit:hover{ opacity:.88; }

/* Mensaje de éxito tras enviar (formSettings.confirmation) -- mismo
   lenguaje visual que una alerta editorial discreta, no un banner de UI
   genérico. */
.contacto .ct-formulario .ff-message-success,
.contacto .ct-formulario .ff_success_message{
	font-family:var(--font-body); font-size:16px; color:var(--text-1);
	background:var(--paper-tint); border-left:3px solid var(--accent);
	padding:20px 22px; border-radius:2px;
}

@media (max-width: 520px){
	.contacto .ct-wrap{ padding:40px 20px 72px; }
	.contacto .ct-formulario .ff-btn-submit{ width:100%; }
}

/* ================= página "Línea editorial" (2026-09-14, v4 -- diseño cerrado) =================
   Dirección de arte -- columna única angosta (--content-width, el mismo
   ancho que un artículo o Contacto), hero tipográfico sin foto, numeral
   discreto junto al kicker de cada bloque. Cero fotografía, cero
   ilustración, cero ícono o SVG conceptual -- se exploraron y se
   descartaron explícitamente (ver Diseno-Linea-Editorial.md y el hilo de
   trabajo): la presencia visual de la página se resuelve con tipografía,
   composición y la paleta existente, no con gráficos.

   Seis bloques numerados (01-06) más un cierre reflexivo sin numerar y sin
   título. Dos frases reciben tratamiento de cita editorial (.le-destacado
   -- mismo recurso que ya usa .fuentes-consultadas en cualquier artículo:
   borde de color + fondo con 5-7% de mezcla, nada nuevo). El ámbar en los
   numerales 01/03/05 es puramente rítmico -- segundo color de identidad,
   sin código semántico (decisión explícita del director: no debe tener que
   "significar" algo en cada aparición). Los divisores entre los seis
   bloques son todos iguales (gris fino, incluido entre 05 y 06) -- el único
   divisor de color es el que separa los seis bloques del cierre final. El
   teal sigue siendo el color dominante de la página. */
/* Columna editorial ensanchada respecto al --content-width genérico (720px,
   el mismo de un artículo o Contacto): a ese ancho la página se sentía
   demasiado encerrada, con mucho blanco lateral. 920px reduce el margen
   lateral en, aproximadamente, un tercio en los anchos de escritorio
   habituales -- sigue siendo una columna de lectura editorial, no el ancho
   de una página de noticias. No toca tipografía, interlineado, divisores,
   numerales, destacados ni la composición 2/3 + 1/3 del cierre: todos esos
   elementos ya escalan solos con el ancho del contenedor. */
.linea-editorial .le-wrap{ max-width:920px; }

.linea-editorial .le-hero{ padding-top:52px; padding-bottom:8px; }
.linea-editorial .le-bloque{ border-top:1px solid var(--line); }

/* Encabezado de bloque: numeral mono discreto + kicker heredado (mismo
   .kicker que usa el resto del sitio, sin modificarlo) -- align-items al
   baseline para que el numeral chico se apoye en la línea de base del
   nombre del bloque, no en su centro óptico. */
.linea-editorial .le-encabezado{ display:flex; align-items:baseline; gap:11px; margin-bottom:18px; }
.linea-editorial .le-encabezado .kicker{ margin-bottom:0; }
.linea-editorial .le-num{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-3); flex:none; }
/* Ritmo puro, no código: 01/03/05 en ámbar, 02/04/06 en gris -- los kickers
   (teal) no cambian, así que el color del numeral nunca compite con el
   nombre del bloque. */
.linea-editorial .le-num--ambar{ color:var(--amber); }

/* ---------- Hero ---------- */
.linea-editorial .eyebrow{ font-family:var(--font-body); font-weight:700; font-size:12.5px; display:block; margin:0; }
.linea-editorial .le-titulo{
	font-family:var(--font-display); font-weight:700; font-size:clamp(30px,2.6vw + 12px,44px);
	line-height:1.15; letter-spacing:-.01em; margin:16px 0 18px; text-wrap:pretty;
}
.linea-editorial .le-dek{ font-family:var(--font-display); font-style:italic; font-size:19px; line-height:1.55; color:var(--text-2); margin:0; max-width:58ch; }

/* ---------- Texto corrido común a todos los bloques ---------- */
.linea-editorial .le-texto p{ font-family:var(--font-body); font-size:16.5px; line-height:1.7; color:var(--text-2); margin:0 0 18px; }
.linea-editorial .le-texto p:last-child{ margin-bottom:0; }
.linea-editorial .le-texto a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px; }
/* Enlaces de salida (Bloque 05 y el texto final) -- mismo tratamiento de
   enlace que el resto del sitio, sin botón nuevo. */
.linea-editorial .le-enlace{ font-weight:600; white-space:nowrap; }

/* ---------- Citas editoriales destacadas ----------
   Reutiliza EXACTAMENTE el recurso que ya usa .fuentes-consultadas en
   cualquier nota (borde izquierdo + fondo con 5-7% de mezcla de color) --
   ningún componente nuevo. Dos apariciones en toda la página, elegidas por
   ser las frases que resumen el argumento de su bloque, no una por sección:
   la tesis de "Reconstruir, no agregar" (teal, el registro editorial
   normal) y la garantía de "Una redacción con inteligencia artificial"
   (ámbar, la única distinción de color deliberada entre las dos). */
.linea-editorial .le-destacado{
	font-family:var(--font-display); font-style:italic; font-weight:500;
	font-size:24px; line-height:1.48; color:var(--ink);
	margin:26px 0 4px; padding:16px 22px; border-radius:0 2px 2px 0;
}
.linea-editorial .le-destacado--teal{
	border-left:3px solid var(--teal);
	background:color-mix(in srgb, var(--teal) 5%, transparent);
}
.linea-editorial .le-destacado--ambar{
	border-left:3px solid var(--amber);
	background:color-mix(in srgb, var(--amber) 7%, transparent);
}
/* Los bloques con destacado respiran un poco más -- la jerarquía también se
   construye con aire, no solo con tipografía o color. */
.linea-editorial .le-bloque--pico{ padding-top:12px; padding-bottom:12px; }

/* ---------- Texto final ----------
   Sin numeral, sin kicker, sin la palabra "Cierre" (pedido explícito): es
   una salida de la página, no un séptimo bloque. Se distingue con un
   divisor propio -- ámbar, del ancho de la columna editorial (no el ancho
   completo de la página, a propósito) -- y con una composición en dos
   columnas desiguales (2/3 + 1/3, nunca tres columnas iguales), ambas
   alineadas a la izquierda, sin línea vertical entre ambas: la separación
   es el espacio en blanco (gap), no un borde. */
.linea-editorial .le-final{ padding-bottom:64px; }
.linea-editorial .le-final-wrap{ border-top:2px solid var(--amber); padding-top:34px; }
.linea-editorial .le-final-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px 48px; align-items:start; }
/* La declaración: registro tipográfico destacado (Newsreader itálica), pero
   deliberadamente por debajo de la escala del hero -- no debe leerse como
   un segundo titular de la página. */
.linea-editorial .le-cierre-texto{
	font-family:var(--font-display); font-style:italic; font-size:20px; line-height:1.55;
	color:var(--ink); margin:0; max-width:46ch;
}
/* El enlace institucional: texto corrido normal (misma clase .le-texto que
   el resto de la página), nunca itálica -- debe leerse como un elemento
   funcional, no como una continuación de la declaración. */
.linea-editorial .le-final-enlace p{ margin:0; max-width:34ch; }
/* Tamaño reducido solo en desktop (13px, por debajo del cuerpo normal de
   16.5px) para que su jerarquía quede claramente por debajo de la
   declaración de la izquierda -- en móvil queda igual que el resto del
   cuerpo, sin cambios. */
@media (min-width: 861px){
	.linea-editorial .le-final-enlace p{ font-size:13px; }
}

@media (max-width: 860px){
	.linea-editorial .le-hero{ padding-top:36px; }
	.linea-editorial .le-titulo{ font-size:27px; }
	.linea-editorial .le-dek{ font-size:17px; }
	.linea-editorial .modulo{ padding:28px 0; }
	.linea-editorial .le-destacado{ font-size:20px; padding:14px 18px; }
	.linea-editorial .le-cierre-texto{ font-size:18px; max-width:none; }
	/* Apila en el mismo orden del HTML -- declaración primero, enlace
	   institucional después -- sin necesidad de "order" ni flex-direction. */
	.linea-editorial .le-final-grid{ grid-template-columns:1fr; gap:22px; }
	.linea-editorial .le-final-enlace p{ max-width:none; }
}