/* Estilos del blog. Se carga DESPUÉS de landing.css y depende de él: el cielo con
   estrellas, la barra superior, el botón dorado, el pie y TODAS las variables de color
   son las mismas de la página pública, no una copia.

   Igual que landing.css, vive fuera del HTML porque la CSP de vercel.json declara
   style-src-elem 'self': un <style> dentro de la página se descarta entero.

   La idea del diseño (v2, 20 ago 2026): una revista, no un blog. El artículo abre de
   noche —el cielo de Kangu— con portada de revista; la foto hace la bisagra hacia la
   luz; el cuerpo se lee en una columna estrecha con secciones numeradas, y cada vez que
   el texto explica algo que la app resuelve, se abre una banda oscura con la pantalla
   real de Kangu dentro de un teléfono.

   Los únicos hex sueltos son #8F5E12 y #A8701A, exentos en scripts/check-palette.mjs:
   el blog es HTML estático generado en build y no puede leer el Proxy C de theme.js.
   Todo lo demás sale de las variables de landing.css o de la paleta de theme.js. */

body.blog{background:var(--beige);color:var(--navy)}

/* En una página interna el wordmark sí es un enlace de regreso. Necesita ser caja
   para no romper el reparto flex de .topbar, que espera dos hijos y nada más. */
.topbar a.home{display:flex;align-items:center;text-decoration:none}

.wrap{max-width:1100px;margin:0 auto;padding:0 32px}

/* Barra de avance de lectura. La pinta blog.js: sin JS se queda en cero y no estorba.
   Se escala en vez de crecer de ancho: blog.js la repinta en cada evento de scroll, y
   animar `width` ahí obliga a recalcular layout en el hilo principal. `scaleX` sobre un
   elemento fuera de flujo se resuelve en el compositor. El degradado se ve igual: en
   ambos casos la rampa completa cabe en el ancho visible de la barra. */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--goldBtn);transition:transform .12s linear}

/* ═══════════════ EL DESBORDE ═══════════════
   La columna de lectura mide 680 px dentro de un contenedor de 1036. Lo que lleva
   .wide se sale a los lados con margen negativo, medido por tramos: `calc` con `min()`
   anidado se comporta distinto entre navegadores y aquí un error de 12 px mete scroll
   horizontal en toda la página. */
.wide{margin-left:0;margin-right:0}
@media(min-width:820px){.wide{margin-left:-28px;margin-right:-28px}}
@media(min-width:940px){.wide{margin-left:-78px;margin-right:-78px}}
@media(min-width:1100px){.wide{margin-left:-158px;margin-right:-158px}}

/* ═════════════════════ LA NOCHE: portada del artículo ═════════════════════ */
.head{background:var(--sky);position:relative;overflow:hidden;color:var(--ink);
  padding:0 32px 200px;text-align:center}
.head-in{position:relative;z-index:2;max-width:820px;margin:0 auto;padding-top:56px}

.crumbs{font-size:11.5px;letter-spacing:.06em;color:rgba(232,238,252,.55);
  display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.crumbs a{color:rgba(232,238,252,.55);text-decoration:none;transition:.22s}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.35}

.head .eyebrow{display:block;margin-bottom:26px}
.head h1{font-family:Fraunces,Georgia,serif;font-size:clamp(36px,5.6vw,64px);font-weight:300;
  line-height:1.06;letter-spacing:-.032em;margin:0 auto 24px;max-width:17ch}
.head h1 em{font-style:italic;color:var(--gold)}

/* La entradilla: en una revista es lo que decide si se lee el artículo. Va en la
   itálica de marca porque es voz editorial, no información. */
.stand{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(17px,2.1vw,21px);line-height:1.55;color:rgba(232,238,252,.82);
  max-width:52ch;margin:0 auto 30px;letter-spacing:-.008em}

/* Filete dorado: el detalle chico que separa un título de una portada de revista. */
.rule{width:38px;height:1px;background:var(--gold);opacity:.7;margin:0 auto 24px}

.meta{font-size:12px;color:rgba(232,238,252,.66);display:flex;gap:11px;
  justify-content:center;flex-wrap:wrap;align-items:center;letter-spacing:.04em}
.meta span{opacity:.35}
.meta b{font-weight:600;color:rgba(244,247,255,.94)}

/* ═════════════════ LA BISAGRA: portada montada sobre el filo ═════════════════ */
.cover{max-width:980px;margin:-158px auto 0;position:relative;z-index:3;padding:0 32px}
.cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;
  box-shadow:0 36px 84px rgba(27,34,56,.38),0 6px 18px rgba(27,34,56,.16)}
.cover figcaption{font-size:11.5px;color:var(--navyMuted);text-align:center;
  margin-top:15px;letter-spacing:.02em;line-height:1.6;max-width:56ch;
  margin-left:auto;margin-right:auto}

/* ═════════════════════ LA RESPUESTA CORTA ═════════════════════
   Va antes del cuerpo y encerrada a propósito: es lo que un motor de respuestas
   levanta para citar, y lo que lee un papá a las 3 de la mañana que no va a leer
   el artículo completo. */
.short{max-width:680px;margin:64px auto 0;padding:0 0 0 30px;
  border-left:2px solid var(--accent);position:relative}
.short b{display:block;font-size:10px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#8F5E12;margin-bottom:14px}
.short p{font-size:20px;line-height:1.62;color:var(--navy);letter-spacing:-.012em;
  font-weight:400}
.short strong{font-weight:600}

/* ═════════════════════ ÍNDICE DE LA NOTA ═════════════════════
   Lo que en una revista es el sumario. Además da anclas que un buscador puede
   ofrecer como enlaces de salto directo a la sección. */
.toc{max-width:680px;margin:52px auto 0;border-top:1px solid var(--beigeDeep);
  border-bottom:1px solid var(--beigeDeep);padding:26px 0 22px}
.toc b{display:block;font-size:10px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--navyMuted);margin-bottom:16px}
.toc ol{list-style:none;counter-reset:t;columns:2;column-gap:34px}
.toc li{counter-increment:t;break-inside:avoid;margin-bottom:9px}
.toc a{display:flex;gap:11px;align-items:baseline;text-decoration:none;
  font-size:14.5px;line-height:1.45;color:var(--navyLight);transition:.2s}
.toc a::before{content:counter(t,decimal-leading-zero);font-size:10.5px;font-weight:800;
  color:var(--accent);letter-spacing:.06em;flex:none;font-variant-numeric:tabular-nums}
.toc a:hover,.toc a.on{color:#8F5E12}
@media(max-width:640px){.toc ol{columns:1}}

/* ═════════════════════════════ CUERPO ═════════════════════════════ */
.body{max-width:680px;margin:0 auto;padding:8px 0 0}
.body p{font-size:18.5px;line-height:1.8;color:var(--navyLight);margin:0 0 24px;
  letter-spacing:-.004em}

/* Capitular en el primer párrafo. Es el gesto de revista que cuesta una línea de CSS
   y cambia por completo cómo se lee la entrada. */
.body > p:first-child::first-letter{font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:76px;line-height:.78;float:left;margin:9px 14px 0 0;color:var(--navy)}

/* ── Sección numerada ──
   El numeral y el filete son lo que convierte una lista de subtítulos en un sumario
   de revista. Van dentro del h2 para que el ancla caiga en el sitio correcto. */
.body h2{font-family:Fraunces,Georgia,serif;font-size:clamp(27px,3.4vw,36px);font-weight:300;
  letter-spacing:-.024em;color:var(--navy);margin:72px 0 20px;line-height:1.18;
  padding-top:30px;border-top:1px solid var(--beigeDeep);scroll-margin-top:80px}
.body h2 .n{display:flex;align-items:center;gap:11px;font-family:Inter,sans-serif;
  font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px}
.body h2 .n::after{content:"";flex:1;height:1px;background:var(--beigeDeep);max-width:52px}
.body h2 em{font-style:italic;color:#A8701A}

.body h3{font-size:13px;font-weight:800;color:#8F5E12;margin:38px 0 12px;
  letter-spacing:.13em;text-transform:uppercase}
.body strong{color:var(--navy);font-weight:600}
.body em{font-style:italic}
.body a{color:#8F5E12;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(143,94,18,.35);transition:.2s}
.body a:hover{text-decoration-color:#8F5E12}

.body ul,.body ol{margin:0 0 26px;padding-left:4px;list-style:none;counter-reset:n}
.body li{font-size:18.5px;line-height:1.76;color:var(--navyLight);margin-bottom:13px;
  padding-left:28px;position:relative}
.body ul li::before{content:"";position:absolute;left:5px;top:13px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.85}
.body ol li{counter-increment:n}
.body ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:3px;
  font-size:11px;font-weight:800;color:#8F5E12;font-variant-numeric:tabular-nums;
  letter-spacing:.04em}

/* ── Fotografía dentro del cuerpo ── Se desborda para romper el muro de texto. */
.fig{margin:52px 0}
.fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;
  box-shadow:0 22px 52px rgba(140,120,90,.2)}
.fig figcaption{font-size:11.5px;color:var(--navyMuted);margin-top:13px;
  letter-spacing:.02em;line-height:1.6;padding-left:2px}

/* ── Tabla de datos: el calendario de vacunas, los horarios de rutina ──
   Sin caja ni sombra: filetes finos y aire, que es como se imprime una tabla en papel. */
.tw{overflow-x:auto;margin:8px 0 34px}
.body table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:440px}
.body th,.body td{text-align:left;padding:15px 22px 15px 0;line-height:1.55}
.body thead tr{border-bottom:1px solid var(--navy)}
.body tbody tr{border-bottom:1px solid var(--beigeDeep)}
.body th{font-size:9.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:#8F5E12;white-space:nowrap;padding-bottom:11px}
.body td{color:var(--navyLight)}
.body td b{color:var(--navy);font-weight:600}

/* ── Cita textual de una fuente ── Fraunces itálica: la voz es de otro. */
.quote{margin:44px 0;padding-left:28px;border-left:2px solid var(--accent)}
.quote p{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:22px;
  line-height:1.5;color:var(--navy);font-weight:300;margin-bottom:12px;letter-spacing:-.014em}
.quote cite{font-size:11.5px;font-style:normal;color:var(--navyMuted);letter-spacing:.06em;
  text-transform:uppercase;font-weight:700}

/* ── Frase destacada ── Distinta de .quote: aquí la voz es nuestra y ocupa el ancho. */
.pull{margin-top:60px;margin-bottom:60px;padding:0;text-align:center;position:relative}
.pull p{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(24px,3.6vw,38px);line-height:1.24;color:var(--navy);
  letter-spacing:-.026em;max-width:26ch;margin:0 auto;text-wrap:balance}
.pull::before,.pull::after{content:"";display:block;width:38px;height:1px;
  background:var(--accent);opacity:.6;margin:0 auto}
.pull::before{margin-bottom:26px}
.pull::after{margin-top:26px}

/* ── Dato con número grande ── El gancho visual que una revista pone al margen. */
.dato{margin:44px 0;display:flex;gap:24px;align-items:flex-start;
  border-top:1px solid var(--beigeDeep);border-bottom:1px solid var(--beigeDeep);
  padding:26px 0}
.dato .n{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(42px,6vw,62px);
  line-height:.9;color:var(--accent);letter-spacing:-.04em;flex:none;
  font-variant-numeric:tabular-nums}
.dato .n i{font-style:normal;font-size:.4em;letter-spacing:0;margin-left:.16em}
.dato b{display:block;font-size:15.5px;font-weight:700;color:var(--navy);
  margin-bottom:7px;letter-spacing:-.008em;line-height:1.35}
.dato p{font-size:15.5px;line-height:1.66;color:var(--navyMuted);margin:0}

/* ── Pasos ── Lo accionable, en tarjetas, para que se pueda hojear sin leer. */
.body .pasos{margin:38px 0 42px;padding:0;list-style:none;counter-reset:paso;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
/* Tarjeta con borde propio y no rejilla de 2 px: con cinco pasos la última celda queda
   sola, y una rejilla con fondo deja ahí un hueco que se lee como error de maquetación. */
.body .pasos li{counter-increment:paso;background:var(--white);padding:22px 22px 24px;
  margin:0;font-size:inherit;position:static;border:1px solid var(--beigeDeep);
  border-radius:3px}
.body .pasos li::before{content:counter(paso,decimal-leading-zero);display:block;
  font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--accent);
  margin-bottom:13px;position:static;font-variant-numeric:tabular-nums}
.body .pasos b{display:block;font-size:15.5px;font-weight:700;color:var(--navy);
  margin-bottom:8px;line-height:1.34;letter-spacing:-.008em}
.body .pasos p{font-size:14.5px;line-height:1.62;color:var(--navyMuted);margin:0}

/* ── Aviso ── Rojo apagado, el mismo de .warn de la página pública. */
.care{border-left:2px solid #C0392B;padding:2px 0 2px 28px;margin:38px 0}
.care b{display:block;color:#C0392B;font-size:10px;margin-bottom:11px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase}
.care p{font-size:17px;line-height:1.7;color:var(--navyLight);margin:0}

/* ── Dato con respaldo ── */
.note{background:var(--accentPale);border-radius:3px;padding:26px 30px;margin:38px 0}
.note b{display:block;color:#8F5E12;font-size:10px;margin-bottom:11px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase}
.note p{font-size:17px;line-height:1.7;color:var(--navyLight);margin:0}

/* ── Pregunta suelta dentro del texto ──
   El recurso de entrevista: la pregunta en la voz de marca, la respuesta en la del
   cuerpo. Es también lo que alimenta el FAQPage del JSON-LD. */
.qa{margin:42px 0;padding:28px 0 0;border-top:1px solid var(--beigeDeep)}
.qa b{display:block;font-family:Fraunces,Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(21px,2.7vw,27px);line-height:1.28;color:var(--navy);
  letter-spacing:-.02em;margin-bottom:14px}
.qa p{font-size:17.5px;line-height:1.76;color:var(--navyLight);margin:0 0 16px}
.qa p:last-child{margin-bottom:0}

/* ═════════════════ LA PANTALLA DE KANGU ═════════════════
   Cada vez que el texto explica algo que la app resuelve, se abre la noche y aparece
   la pantalla real —captura de la app corriendo, no un dibujo—. Es la pieza que hace
   que la nota venda sin dejar de ser una nota. */
.app{background:var(--sky);position:relative;overflow:hidden;border-radius:6px;
  margin-top:64px;margin-bottom:64px;color:var(--ink);
  box-shadow:0 30px 70px rgba(27,34,56,.26)}
.app-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  gap:34px;padding:44px 34px 0;align-items:center}
@media(min-width:820px){
  .app-in{grid-template-columns:1.06fr .94fr;gap:46px;padding:52px 52px 0}
  .app-txt{padding-bottom:52px}
}
.app .lbl{display:block;font-size:10px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.app h3{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(24px,3.2vw,32px);
  line-height:1.16;letter-spacing:-.026em;color:var(--ink);margin-bottom:16px;
  text-transform:none}
.app h3 em{font-style:italic;color:var(--gold)}
.app-txt p{font-size:16px;line-height:1.72;color:var(--mut);margin:0 0 24px}
.app-txt .goldbtn{padding:13px 26px;font-size:14px;border-radius:15px;text-decoration:none}

/* El teléfono. Sale del filo inferior de la banda a propósito: es lo que hace que se
   lea como un dispositivo apoyado y no como una imagen pegada. */
.dev{margin:0;position:relative;max-width:290px;justify-self:center;width:100%}
.dev .fr{display:block;padding:8px;border-radius:42px;
  background:linear-gradient(150deg,#3D5CCB,#0E1936 62%);
  box-shadow:0 30px 60px rgba(14,25,54,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.dev img{width:100%;height:auto;display:block;border-radius:35px}
.dev figcaption{font-size:11px;line-height:1.55;color:rgba(232,238,252,.6);
  text-align:center;margin-top:14px;padding-bottom:26px;letter-spacing:.02em}
@media(min-width:820px){.dev figcaption{padding-bottom:34px}}

/* ═════════════════════ PREGUNTAS FRECUENTES ═════════════════════ */
.faq{max-width:680px;margin:76px auto 0;padding-top:34px;border-top:2px solid var(--navy)}
.faq > b{display:block;font-size:10px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--navyMuted);margin-bottom:26px}
.faq .q{padding:24px 0;border-bottom:1px solid var(--beigeDeep)}
.faq .q:first-of-type{padding-top:0}
.faq .q b{display:block;font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:21px;line-height:1.3;color:var(--navy);letter-spacing:-.018em;margin-bottom:11px}
.faq .q p{font-size:16.5px;line-height:1.72;color:var(--navyLight);margin:0}
.faq .q a{color:#8F5E12;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(143,94,18,.35)}

/* ═════════════════════════════ FUENTES ═════════════════════════════
   Cada una dice qué prueba y qué NO prueba. Es la regla de la casa y además es lo
   que hace que un modelo cite a Kangu en vez de a quien solo afirma. */
.sources{max-width:680px;margin:66px auto 0;padding-top:32px;border-top:1px solid var(--beigeDeep)}
.sources h2{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navyMuted);margin-bottom:24px}
.sources ul{list-style:none;counter-reset:f}
.sources li{counter-increment:f;margin-bottom:26px;font-size:13.5px;line-height:1.72;
  color:var(--navyMuted);padding-left:30px;position:relative}
.sources li::before{content:counter(f,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-size:10.5px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;
  letter-spacing:.06em}
.sources li b{display:block;color:var(--navy);font-weight:600;font-size:15px;margin-bottom:5px;
  line-height:1.45}
.sources li a{color:#8F5E12;word-break:break-word;text-decoration:none;
  border-bottom:1px solid rgba(143,94,18,.3)}
.sources li a:hover{border-bottom-color:#8F5E12}
.sources .pn{display:block;margin-top:6px;font-size:13px;opacity:.92}

/* ── Firma del autor ── */
.by{max-width:680px;margin:48px auto 0;display:flex;align-items:center;gap:18px;
  border-top:1px solid var(--beigeDeep);padding-top:26px}
.by .mono{width:52px;height:52px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--sagePale);color:var(--sage);
  font-family:Fraunces,Georgia,serif;font-size:26px;font-weight:300;line-height:1}
.by b{display:block;font-size:15px;color:var(--navy);font-weight:600;margin-bottom:3px}
.by p{font-size:13.5px;line-height:1.62;color:var(--navyMuted)}

/* ═════════════════════════ RELACIONADOS ═════════════════════════ */
.also{max-width:1036px;margin:84px auto 0;padding:0 32px}
.also h2{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--navyMuted);margin-bottom:26px;text-align:center}
.also-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.also a{display:block;text-decoration:none;transition:.3s}
.also a:hover{transform:translateY(-4px)}
.also a img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px;
  box-shadow:0 10px 28px rgba(140,120,90,.16);transition:.3s}
.also a:hover img{box-shadow:0 20px 44px rgba(140,120,90,.26)}
.also .txt{padding:18px 2px 0}
.also .sec-lbl{display:block;font-size:9.5px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:#8F5E12;margin-bottom:9px}
.also a b{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:300;
  color:var(--navy);line-height:1.24;margin-bottom:9px;letter-spacing:-.02em}
.also .txt p{font-size:13.5px;line-height:1.62;color:var(--navyMuted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ═════════════════ CIERRE: vuelve la noche ═════════════════ */
.tail{background:var(--sky);position:relative;overflow:hidden;margin-top:92px;
  padding:78px 32px;text-align:center;color:var(--ink)}
.tail-in{position:relative;z-index:2;max-width:540px;margin:0 auto}
.tail .kanga{width:78px;margin:0 auto 18px;filter:drop-shadow(0 16px 32px rgba(0,0,0,.5))}
.tail h2{font-family:Fraunces,Georgia,serif;font-size:clamp(26px,3.4vw,36px);font-weight:300;
  letter-spacing:-.028em;margin-bottom:14px;line-height:1.18}
.tail h2 em{font-style:italic;color:var(--gold)}
.tail p{color:var(--mut);font-size:15.5px;line-height:1.62;margin-bottom:28px}

/* ═════════════════════════════ ÍNDICES ═════════════════════════════ */
.idx{background:var(--sky);position:relative;overflow:hidden;color:var(--ink);
  padding:0 32px 132px;text-align:center}
.idx-in{position:relative;z-index:2;max-width:760px;margin:0 auto;padding-top:60px}
.idx .eyebrow{display:block;margin-bottom:24px}
.idx h1{font-family:Fraunces,Georgia,serif;font-size:clamp(38px,6vw,64px);font-weight:300;
  letter-spacing:-.032em;margin:0 auto 24px;line-height:1.06;max-width:15ch}
.idx h1 em{font-style:italic;color:var(--gold)}
.idx p{color:var(--mut);font-size:16.5px;line-height:1.7;max-width:56ch;margin:0 auto}

/* Rejilla de secciones, montada sobre el filo del cielo igual que la portada. */
.secs{max-width:1100px;margin:-88px auto 0;padding:0 32px;position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:2px;
  background:var(--beigeDeep)}
.sec{background:var(--white);padding:30px 28px 26px;text-decoration:none;display:block;
  transition:.3s}
.sec:hover{background:var(--accentPale)}
.sec .k{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;
  color:var(--accent);margin-bottom:15px;font-variant-numeric:tabular-nums}
.sec b{display:block;font-family:Fraunces,Georgia,serif;font-size:21px;font-weight:300;
  color:var(--navy);margin-bottom:10px;letter-spacing:-.022em;line-height:1.2}
.sec p{font-size:14px;line-height:1.64;color:var(--navyMuted);margin-bottom:18px}
.sec .n{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8F5E12}

/* Lista de artículos de una sección. */
.posts{max-width:1036px;margin:-70px auto 0;padding:0 32px;position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px 26px}
.post{display:block;text-decoration:none;transition:.3s}
.post:hover{transform:translateY(-4px)}
.post img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px;
  box-shadow:0 12px 32px rgba(27,34,56,.18);transition:.3s}
.post:hover img{box-shadow:0 22px 48px rgba(27,34,56,.26)}
.post .txt{padding:19px 2px 0}
.post .sec-lbl{display:block;font-size:9.5px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:#8F5E12;margin-bottom:9px}
.post b{display:block;font-family:Fraunces,Georgia,serif;font-size:22px;font-weight:300;
  color:var(--navy);line-height:1.2;margin-bottom:10px;letter-spacing:-.024em}
.post p{font-size:14.5px;line-height:1.64;color:var(--navyMuted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* Banda de todas las notas en el índice. Reusa la tarjeta de .also y solo le cambia
   el encabezado: aquí es el contenido principal de la página, no un pie de artículo. */
.band{margin-top:92px}
.band h2{font-family:Fraunces,Georgia,serif;font-size:clamp(28px,3.4vw,38px);font-weight:300;
  letter-spacing:-.026em;color:var(--navy);text-transform:none;margin-bottom:10px}
.band h2 em{font-style:italic;color:#A8701A}
.band > p{text-align:center;font-size:15px;line-height:1.62;color:var(--navyMuted);
  max-width:520px;margin:0 auto 36px}

/* Aviso general del blog, al pie de los índices. */
.disc{max-width:640px;margin:64px auto 0;font-size:12.5px;line-height:1.72;
  color:var(--navyMuted);text-align:center;opacity:.85}

@media(max-width:640px){
  .wrap,.also,.secs,.posts,.cover{padding-left:20px;padding-right:20px}
  .head{padding-bottom:160px}
  .cover{margin-top:-124px}
  .body p,.body li{font-size:17px}
  .body > p:first-child::first-letter{font-size:60px;margin:6px 11px 0 0}
  .body h2{margin-top:56px;padding-top:26px}
  .short{margin-top:44px;padding-left:22px}
  .short p{font-size:18px}
  .quote p{font-size:19.5px}
  .fig{margin:38px 0}
  .app{margin-top:48px;margin-bottom:48px}
  .app-in{padding:36px 26px 0;gap:28px}
  .dato{gap:18px;flex-direction:column}
  .tail{padding:58px 20px}
  .idx{padding-bottom:110px}
  .secs,.posts{margin-top:-66px}
}