/* ==========================================================================
   The Indoor Forecast · el artículo (maqueta v1, 11 oct 2026). Clases con prefijo art-.
   Solo valores de theme/DISENO.md: colores (las variables de site.css), Schibsted Grotesk 700/800 y Petrona
   400/400i/600, escala 11·12·13·14·16·18·20·24·30·38·48 px y radios 8·12·999 px.
   Los COMPONENTES del pipeline (Quick Answer, Pro Tip, tabla, tarjetas, FAQ) traen estilos en línea o en su
   propio <style>: aquí NO se les pisa nada. Las reglas del texto llevan :not([style]) para no colarse en ellos.
   Cargada después de site.css: lo que se repite en la portada se reutiliza (.kicker, .foto-caja, .ult, .peq,
   .fecha, .btn) y lo nuevo va con prefijo.
   ========================================================================== */

/* Un «.ad» vacío no ocupa: la red de anuncios lo usará el día que entre (decisión de la casa, 11 oct) */
.ad:empty { display: none; }

/* ---------- Medidor de lectura: bajo la cabecera pegajosa. Track petróleo claro (decorativo), relleno petróleo. ---------- */
.art-medidor { position: fixed; left: 0; right: 0; top: var(--cab-h, 132px); height: 6px; z-index: 49;
  background: var(--clara); pointer-events: none; }
.art-medidor-fill { position: absolute; inset: 0; background: var(--prot); transform-origin: 0 50%; transform: scaleX(0); }
/* una muesca tinta por cada H2: dónde empieza cada apartado (los pone articulo.js) */
.art-muesca { position: absolute; top: -3px; width: 1px; height: 12px; background: var(--tinta); }

/* ---------- Estructura: en el móvil todo en una columna; «Keep going», el autor y los comentarios antes que la lateral ---------- */
.art-todo { display: flex; flex-direction: column; }
.art-marco { display: contents; }                       /* en el móvil, la lateral se va al final con order */
.art-col, .art-lado, .art-fin { width: min(1200px, 100% - 40px); margin-inline: auto; }
.art-col { order: 1; padding-top: 28px; }
.art-banda { order: 2; }
.art-fin { order: 3; }
.art-lado { order: 4; padding-top: 40px; }

/* Columna del texto: 720 px (entre 680 y 800: la medida de lectura de la casa). Cada bloque la respeta. */
.art-cab, .art-foto, .art-indice, .art-cuerpo { max-width: 720px; }

/* ---------- Cabecera del artículo ---------- */
.art-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.4; color: var(--tinta); }
.art-migas a { color: var(--prot); text-decoration: none; }
.art-migas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.art-migas a[aria-current="page"] { color: var(--tinta); }
.art-cab .kicker { margin-top: 22px; }                 /* el rótulo: la categoría RAÍZ */
.art-cab h1 { font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; margin-top: 10px; }
.art-extracto { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--tinta); }
.art-firma { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 16px; line-height: 1.4; }
.art-firma p { margin: 0; }
.art-firma .fecha { display: inline-block; margin-top: 4px; }
.art-firma-foto { width: 48px; height: 48px; flex: none; border-radius: 999px; border: 1px solid var(--clara); }

/* La foto destacada: 4:3, desnuda. Sin marco, sin pestaña y sin enlace. Su aire de abajo: 26 px. */
.art-foto { margin: 28px 0 26px; }
.art-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }

/* ---------- El índice: plegado, con el mismo «+» que las preguntas del final ---------- */
.art-indice { background: var(--blanco); border: 1px solid var(--clara); border-radius: 12px; padding: 0 20px; }
.art-indice summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 52px; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 16px; color: var(--tinta); }
.art-indice summary::-webkit-details-marker { display: none; }
.art-indice summary:focus-visible { outline: 3px solid var(--prot); outline-offset: 3px; border-radius: 8px; }
.art-ico { width: 20px; height: 20px; flex: none; color: var(--prot); transition: transform 0.3s ease; }
.art-indice[open] .art-ico { transform: rotate(45deg); }
.art-indice ol { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--clara); }
.art-indice li { border-bottom: 1px solid var(--clara); }
.art-indice li a { display: block; padding: 12px 0; font-family: "Petrona", Georgia, serif; font-size: 16px; line-height: 1.4; color: var(--tinta); text-decoration: none; }
.art-indice li a:hover { color: var(--prot); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- El cuerpo: Petrona. 16 px en el móvil, 18 px en escritorio ---------- */
.art-cuerpo { margin-top: 36px; font-family: "Petrona", Georgia, serif; font-size: 16px; line-height: 1.65; color: var(--tinta); }
.art-cuerpo h2:not([style]) { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 24px; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--tinta); margin: 2.2em 0 0.6em; scroll-margin-top: 140px; }
.art-cuerpo h3:not([style]) { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.25;
  letter-spacing: -0.02em; color: var(--tinta); margin: 1.8em 0 0.5em; scroll-margin-top: 140px; }
.art-cuerpo h4:not([style]) { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; margin: 1.6em 0 0.4em; }
.art-cuerpo p:not([style]) { margin: 0 0 1.1em; }
.art-cuerpo strong { font-weight: 700; color: var(--tinta); }
.art-cuerpo em { font-style: italic; }
.art-cuerpo a { color: var(--prot); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-cuerpo a:hover { color: var(--tinta); }
.art-cuerpo a:focus-visible { outline: 3px solid var(--prot); outline-offset: 3px; border-radius: 4px; }

/* Listas (las de los componentes llevan su estilo en línea y no se tocan) */
.art-cuerpo ul:not([style]), .art-cuerpo ol:not([style]) { margin: 0 0 1.2em; padding-left: 1.3em; }
.art-cuerpo ul:not([style]) { list-style: disc; }
.art-cuerpo ol:not([style]) { list-style: decimal; }
/* Solo las listas del texto: el Quick Answer tiene su ol con estilo en línea, y su último ítem no lo lleva */
.art-cuerpo ul:not([style]) > li, .art-cuerpo ol:not([style]) > li { margin: 0 0 0.45em; padding-left: 0.2em; }
.art-cuerpo ul:not([style]) > li::marker, .art-cuerpo ol:not([style]) > li::marker { color: var(--prot); font-weight: 700; }

/* Cita: sin borde de acento (es un tic de IA); una tarjeta blanca con el texto en cursiva */
/* Revisión del chat principal: cita destacada. Comilla grande en petróleo claro, texto en Petrona cursiva a 24 px,
   filetes arriba y abajo (no a un lado). */
.art-cuerpo blockquote:not([style]) { position: relative; margin: 2.2em 0; padding: 30px 8px 22px 64px;
  border-top: 1px solid var(--clara); border-bottom: 1px solid var(--clara);
  font-style: italic; font-size: 24px; line-height: 1.4; color: var(--tinta); }
.art-cuerpo blockquote:not([style])::before { content: "\201C"; position: absolute; left: 0; top: 6px;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 96px; line-height: 1; color: var(--prot); }
.art-cuerpo blockquote:not([style]) p { margin: 0; }

/* Figuras: la imagen llena el ancho de la columna y su proporción sale de width/height (sin recortar) */
.art-cuerpo figure:not([style]) { margin: 2em 0; }
.art-cuerpo figure img { width: 100%; height: auto; border-radius: 12px; }
.art-cuerpo figcaption { margin-top: 10px; font-family: "Petrona", Georgia, serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--tinta); }

/* Separador */
.art-cuerpo hr:not([style]) { border: 0; border-top: 1px solid var(--clara); margin: 2.4em 0; }

/* Código en línea: la letra de leer, con su marco de la casa */
.art-cuerpo code { font-family: "Petrona", Georgia, serif; font-size: 16px; color: var(--tinta); background: var(--blanco);
  border: 1px solid var(--clara); border-radius: 8px; padding: 1px 6px; }

/* Tablas que no son componente: se desplazan dentro de su propio contenedor */
.art-cuerpo :not(.cn-compare) > table { display: block; overflow-x: auto; max-width: 100%; margin: 2em 0; border: 1px solid var(--clara);
  border-radius: 12px; background: var(--blanco); font-size: 16px; }
.art-cuerpo :not(.cn-compare) > table th, .art-cuerpo :not(.cn-compare) > table td { padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--clara); vertical-align: top; }
.art-cuerpo :not(.cn-compare) > table th { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px;
  background: var(--tinta); color: var(--blanco); }
/* La tabla comparativa del pipeline: su propio contenedor es el que se desliza (su <style> trae el resto) */
.art-cuerpo .cn-compare { overflow-x: auto; max-width: 100%; }
/* Las respuestas de la FAQ (letra de 15,5 px) se leen mal a 100 caracteres por línea: se acotan a ~80 */
.art-cuerpo .cn-faq .cn-faq-ans { max-width: 66ch; }

/* ---------- El banner de Audible, justo antes de las preguntas: fondo tinta, la onda de la cordillera ---------- */
.audible { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px 22px; align-items: center; margin: 2.4em 0 1.4em; padding: 26px; background: var(--tinta); border-radius: 12px; }
.audible-onda { position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 62%; }
.audible-txt { min-width: 0; max-width: 60ch; }
.audible-onda rect { fill: var(--prot); fill-opacity: 0.55; transform-box: fill-box; transform-origin: 50% 100%; }
.audible:hover .audible-onda rect { animation: audible-suena 0.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -97ms); }
@keyframes audible-suena { from { transform: scaleY(1); } to { transform: scaleY(0.5); } }
.audible-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 999px; background: var(--clara); color: var(--tinta); }
.audible-ic svg { width: 28px; height: 28px; }
.art-cuerpo .audible p { margin: 0; }
.audible-rot { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--clara); }
.art-cuerpo .audible .audible-t { margin: 6px 0 8px; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800;
  font-size: 24px; line-height: 1.15; color: var(--blanco); text-wrap: balance; }
.audible-p { font-size: 16px; line-height: 1.5; color: var(--fondo); }
.audible-p strong { color: var(--blanco); }
.art-cuerpo .audible .audible-gancho { margin-top: 8px; }
.art-cuerpo a.audible-b { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 8px; background: var(--aviso);
  color: var(--tinta); font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 16px; text-decoration: none;
  white-space: nowrap; transition: background-color 0.2s ease; }
.art-cuerpo a.audible-b:hover { background: var(--clara); color: var(--tinta); }
.audible-b svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.audible-b:hover svg { transform: translateX(3px); }

/* ---------- La columna de al lado (escritorio) y su «More from this room» ---------- */
.art-lado h2 { font-size: 20px; line-height: 1.2; margin: 0 0 14px; }
.art-mas-l { display: grid; gap: 16px; }
.art-mas-l .peq a { display: flex; gap: 12px; align-items: flex-start; color: var(--tinta); text-decoration: none; }
.art-mas-l .peq .foto-caja { flex: 0 0 104px; }
.art-mas-l .peq .txt { min-width: 0; }
.art-mas-l .peq h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.art-mas-l .peq .fecha { margin-top: 6px; font-size: 12px; }
.art-mas-l .peq a:hover h3 { color: var(--prot); }
.art-autor-mini { margin-top: 32px; padding: 18px; background: var(--blanco); border: 1px solid var(--clara); border-radius: 12px;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }
.art-autor-mini img { width: 56px; height: 56px; border-radius: 999px; }
.art-autor-mini p { margin: 0; font-size: 14px; line-height: 1.4; }

/* ---------- «Keep going»: banda a sangre con 4 relacionados ---------- */
.art-banda { background: var(--blanco); border-top: 1px solid var(--clara); border-bottom: 1px solid var(--clara); margin-top: 56px; }
.art-banda-in { width: min(1200px, 100% - 40px); margin-inline: auto; padding: 44px 0 48px; }
.art-banda h2 { font-size: 24px; }
.art-sigue-l { display: grid; gap: 16px; margin-top: 22px; }
.art-sigue-l .ult a { display: flex; gap: 14px; align-items: flex-start; }
.art-sigue-l .ult .foto-caja { flex: 0 0 128px; }
.art-sigue-l .ult .txt { min-width: 0; }
.art-sigue-l .ult .ult-t { margin: 0; font-size: 18px; }

/* ---------- La firma de abajo: el autor y los comentarios ---------- */
.art-fin { padding-bottom: 0; }
.art-autor { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; padding: 40px 0 32px;
  border-bottom: 1px solid var(--clara); }
.art-autor img { width: 96px; height: 96px; border-radius: 999px; border: 1px solid var(--clara); }
.art-autor h2 { font-size: 24px; margin: 0 0 6px; }
.art-autor p { margin: 0; font-size: 16px; line-height: 1.55; }
.art-autor > div { max-width: 62ch; min-width: 0; }
.art-autor-n { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 10px !important; }
.art-autor-n a { color: var(--prot); }

.art-com { padding: 36px 0 64px; }
.art-com h2 { font-size: 24px; margin: 0; }
.art-com-sub { margin-top: 8px; font-size: 16px; line-height: 1.5; max-width: 52ch; }
.art-form { margin-top: 22px; display: grid; gap: 16px; max-width: 720px; }
.art-form label { display: grid; gap: 6px; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px; color: var(--tinta); }
.art-form textarea, .art-form input { font-family: "Petrona", Georgia, serif; font-weight: 400; font-size: 16px; color: var(--tinta);
  background: var(--blanco); border: 1px solid var(--tinta); border-radius: 8px; padding: 10px 12px; width: 100%; min-height: 48px; }
.art-form textarea { min-height: 140px; resize: vertical; }
.art-form-fila { display: grid; gap: 16px; }
.art-form .btn { justify-self: start; border: 0; }

/* ==========================================================================
   Tamaños. Los escalones: 360–639 (móvil), 640–959 (tableta), 960+ (escritorio). Y el de la columna, 1100+.
   ========================================================================== */
@media (min-width: 640px) {
  .art-cab h1 { font-size: 40px; }
  .art-cuerpo { font-size: 18px; }
  .art-sigue-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-sigue-l .ult a { display: block; }
  .art-sigue-l .ult .foto-caja { flex: none; }
  .art-sigue-l .ult .ult-t { font-size: 18px; margin-top: 14px; }
  .art-form-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-cuerpo h2:not([style]) { font-size: 30px; }
  .art-cuerpo h3:not([style]) { font-size: 20px; }
  .art-cuerpo table, .art-cuerpo :not(.cn-compare) > table { font-size: 16px; }
  .art-autor h2 { font-size: 30px; }
  .art-com h2 { font-size: 30px; }
  .art-banda h2 { font-size: 30px; }
}
@media (min-width: 960px) {
  .art-cab h1 { font-size: 48px; line-height: 1.05; }
  .art-sigue-l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .art-sigue-l .ult .ult-t { font-size: 18px; }
}
@media (max-width: 639px) {
  .art-cuerpo h2:not([style]) { font-size: 24px; }
  .art-cuerpo h3:not([style]) { font-size: 18px; }
  .art-cuerpo .cn-compare table, .art-cuerpo :not(.cn-compare) > table { min-width: 480px; }
  .audible { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 20px 26px; }
  .audible-ic { width: 44px; height: 44px; }
  .audible-ic svg { width: 22px; height: 22px; }
  .audible-rot { font-size: 11px; letter-spacing: 0.05em; }
  .art-cuerpo .audible .audible-t { font-size: 20px; }
  .art-cuerpo a.audible-b { grid-column: 1 / -1; justify-self: start; }
  .art-autor { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .art-autor img { width: 72px; height: 72px; }
}
/* Escritorio: la columna del texto (720) y la lateral (260) a la derecha. La lateral se queda pegada al bajar. */
@media (min-width: 1100px) {
  .art-todo { display: block; }
  .art-marco { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 56px; align-items: start;
    width: min(1200px, 100% - 40px); margin-inline: auto; }
  .art-col, .art-lado { width: auto; margin: 0; }
  .art-col { padding-top: 40px; }
  .art-lado { position: sticky; top: 132px; padding-top: 40px; }
  .art-banda, .art-fin { width: 100%; }
  .art-fin { width: min(1200px, 100% - 40px); margin-inline: auto; }
}

/* 📱 El celular (11 oct 2026): la prosa a 16 px (la regla del café), titulares contenidos */
@media (max-width: 720px) {
  .art-cab h1 { font-size: 27px; line-height: 1.1; }
  .art-extracto { font-size: 16px; }
  .art-firma { font-size: 14px; }
  .art-cuerpo { font-size: 16px; line-height: 1.65; }
  .art-cuerpo h2:not([style]) { font-size: 21px; }
  .art-cuerpo h3:not([style]) { font-size: 17px; }
  .art-cuerpo blockquote:not([style]) { font-size: 19px; padding: 24px 4px 18px 48px; }
  .art-cuerpo blockquote:not([style])::before { font-size: 72px; }
  .art-banda h2, .art-autor h2, .art-com h2 { font-size: 21px; }
  .art-sigue-l .ult .ult-t { font-size: 16px; }
  .art-cuerpo .audible .audible-t { font-size: 18px; }
}
@media (min-width: 721px) and (max-width: 1060px) {
  .art-cab h1 { font-size: 34px; }
  .art-cuerpo { font-size: 17px; }
}