/* ================= BLOG =================
   Cuatro versiones de entrada, calcadas de las cuatro que ya están
   aprobadas y publicadas en producción. Cada versión es un HERO más un
   ESTILO DE CONTENIDO, y las dos piezas se eligen por separado: hoy se usan
   emparejadas como en el original, y el día que se quiera el hero de una con
   el contenido de otra no hay que tocar nada.

     v1  hero a sangre con foto de fondo, header blanco
         contenido en bloques partidos que alternan claro y oscuro
         · aristas.co/personalizacion-de-mobiliario-encuentra-una-expresion…
         · aristas.co/sofas-modulares-diseno-confort-y-versatilidad…

     v2  hero a sangre más bajo, solo el título, header negro
         primer párrafo centrado sobre blanco y luego los bloques partidos
         · aristas.co/diseno-que-se-adapta-para-aprovechar-cada-espacio

     v3  hero partido, foto a la derecha hasta el borde
         contenido lineal en una columna: título, texto, foto, y otra vez
         · aristas.co/la-experiencia-de-visitar-los-showrooms-de-aristas

     v4  hero partido con el texto alineado al contenido
         contenido que alterna blanco y gris; en el gris el texto va en una
         tarjeta blanca que pisa la foto
         · aristas.co/iconos-que-permanecen

   Las medidas salen de medir esas cuatro páginas a 1440px, no de ojo.
   ======================================================================= */

.arq {
  --arq-gut: clamp(20px, 4.4vw, 64px);   /* producción: 64 a 1440 */
  --arq-aire: clamp(2.6rem, 6.4vw, 5.75rem);
  /* La columna de la v3. Produccion no es coherente consigo misma: la
     entrada de los showrooms la pinta a 776 y las de Elementor —MAGNO,
     Bold, Medellin— a 1140, que es el ancho completo de su contenedor.
     Se queda en un punto intermedio: a 1140 la linea pasaba de los 130
     caracteres, muy por encima del rango comodo de lectura (Carlos,
     2026-09-22). */
  --arq-lectura: 950px;
  --arq-gris: #f2eff0;                   /* el gris de la banda de la v4 */
  color: var(--ink);
  background: var(--white);
}

/* --- piezas compartidas por los cuatro heros ---------------------------- */
.arq-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin: 0 0 1.5em;
}
.arq-eyebrow a { color: inherit; text-decoration: none; }
.arq-eyebrow a:hover { text-decoration: underline; }

/* Amadine Light es muy fina y a tamanos grandes se queda debil. Produccion
   la refuerza con un trazo DEL MISMO COLOR del texto —no un contorno de otro
   color— que la engorda sin cambiar de peso: 0,5px cuando el titulo es
   oscuro sobre claro y 0,3px cuando es blanco sobre oscuro, porque el texto
   claro ya engorda opticamente y con 0,5 se empasta. */
.arq-tit,
.arq-cuerpo h2,
.arq-cuerpo h3,
.arq-list__title,
.arq-card__title,
.arq-rel__title,
.arq-hero--v3 .arq-bajada {   /* tambien es Amadine, de 36px */
  -webkit-text-stroke: var(--arq-trazo, .5px) currentColor;
}

.arq-tit {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: .04em;
  margin: 0;
  text-wrap: balance;
}

/* sobre foto o sobre el negro de marca, el trazo baja */
.arq-hero--v1,
.arq-hero--v2,
.arq-cuerpo .arq-split--dark,
.arq-cuerpo .arq-cierre,
.arq-cuerpo .arq-cta { --arq-trazo: .3px; }
/* el cierre de la v4 es gris claro con el texto oscuro: le toca el trazo
   de los fondos claros, no el de los oscuros */
.arq-cuerpo .arq-cta--gris { --arq-trazo: .5px; }
/* El titular se dimensiona segun su largo —los titulos van de 21 a 72
   caracteres— y ademas cada hero lo escala, porque en produccion el tamano
   no depende solo del largo: a 1440 la v2 pone 68,8px para 49 caracteres y
   la v3 pone 56px para 50, porque una es a sangre y la otra va en media
   pantalla. Medido entrada por entrada, los tramos base dan 70 / 62 / 54px
   a 1440 y cada hero aplica su factor. */
.arq-tit--corto { --t-min: 2.5rem;  --t-vw: 4.86vw; --t-max: 4.4rem; }
.arq-tit--medio { --t-min: 2.15rem; --t-vw: 4.3vw;  --t-max: 3.9rem; }
.arq-tit--largo { --t-min: 1.95rem; --t-vw: 3.75vw; --t-max: 3.4rem; }

/* La bajada va al mismo tamano y peso que el texto del cuerpo (17 en el
   telefono, 18 en escritorio). Antes iba a 17,9 pero en peso 300, y esos
   dos puntos de peso la hacian parecer bastante mas pequena al lado del
   titular. */
.arq-bajada {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.78;
  margin: 1.4em 0 0;
}
.arq-fecha {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 2em;
}
/* el header se queda fijo al bajar: sin este margen el destino del "Ver mas"
   aterriza debajo de la barra */
#arq-cuerpo { scroll-margin-top: var(--sticky-h, 96px); }
.arq-mas {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: .35em;
  margin-top: 2.2em;
}

/* ====================== LOS CUATRO HEROS ============================== */

/* --- v1 · a sangre, foto de fondo, el menú flota encima ----------------- */
.arq-hero--v1 {
  position: relative;
  min-height: 88vh;                      /* producción: 828 de 900 */
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
}
.arq-hero--v1 .arq-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Degradado radial + lineal, no uno plano: sobre fotos claras y parejas el
   plano dejaba el texto débil. Es el fix que ya traían los lineamientos.
   Aclarado 15 puntos el 2026-09-22 a petición de Carlos. Es el máximo que
   admite: medido componiendo el velo sobre las fotos reales de las cuatro
   portadas v1, el titular se queda en 4,0:1 y la bajada en 5,6:1 en el peor
   caso. Quince puntos más y el titular baja de 3:1 y deja de cumplir. */
.arq-hero--v1::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(65% 85% at 30% 55%, rgba(8,7,6,.47) 0%, rgba(8,7,6,.31) 55%, rgba(8,7,6,.16) 100%),
    linear-gradient(180deg, rgba(10,9,8,.29) 0%, rgba(10,9,8,.16) 30%, rgba(10,9,8,.35) 70%, rgba(10,9,8,.59) 100%);
}
/* el padding de arriba deja libre la franja del header, que aquí flota */
.arq-hero--v1 .arq-hero__texto {
  position: relative;
  z-index: 1;
  max-width: 70%;
  padding: calc(var(--sticky-h, 96px) + 3.5rem) var(--arq-gut) clamp(2.8rem, 6vw, 4.2rem);
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.arq-hero--v1 .arq-tit { font-size: clamp(var(--t-min), var(--t-vw), var(--t-max)); text-transform: uppercase; letter-spacing: .035em; }  /* produccion: 54px */
/* Con el velo más claro, el gris de la bajada ya no daba: #d8d5d0 tiene un
   32% menos de contraste que el blanco y se quedaba en 3,8:1, por debajo
   del 4,5:1 que pide un texto de este tamaño. La jerarquía con el titular
   la marcan el cuerpo y el peso, no un gris. */
.arq-hero--v1 .arq-bajada { color: var(--white); max-width: 38rem; }
/* sobre foto la fecha se atenua un punto para que no compita con el titular,
   y cede margen porque debajo aun va el enlace de "Ver mas" */
.arq-hero--v1 .arq-fecha { color: #f0eeea; margin-top: 1.6em; }

/* --- v2 · a sangre, más bajo, solo el título --------------------------- */
.arq-hero--v2 {
  position: relative;
  min-height: 60vh;                      /* producción: 540 de 900 */
  display: flex;
  /* centrado, como en produccion: alli el titulo queda con 156px de aire
     arriba y 157 abajo */
  align-items: center;
  color: var(--white);
  overflow: hidden;
}
.arq-hero--v2 .arq-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arq-hero--v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,.30) 0%, rgba(10,9,8,.26) 45%, rgba(10,9,8,.58) 100%);
}
.arq-hero--v2 .arq-hero__texto {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.4rem, 5vw, 3.6rem) var(--arq-gut);
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
}
.arq-hero--v2 .arq-tit { font-size: clamp(calc(var(--t-min) * 1.11), calc(var(--t-vw) * 1.11), calc(var(--t-max) * 1.11)); text-transform: uppercase; letter-spacing: .035em; }  /* produccion: 68,8px */
.arq-hero--v2 .arq-fecha { color: #f0eeea; }

/* --- v3 · partido, foto a la derecha hasta el borde -------------------- */
.arq-hero--v3 {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
}
.arq-hero--v3 .arq-hero__texto { padding: var(--arq-aire) var(--arq-gut); align-self: center; }
.arq-hero--v3 .arq-eyebrow,
.arq-hero--v3 .arq-fecha { color: var(--text-2); }
.arq-hero--v3 .arq-tit { font-size: clamp(calc(var(--t-min) * .9), calc(var(--t-vw) * .9), calc(var(--t-max) * .9)); }  /* produccion: 56px */
/* En la v3 la bajada no es un parrafo: en produccion es un subtitulo de
   36px en Amadine, y sin eso el hero se quedaba sin peso. */
.arq-hero--v3 .arq-bajada {
  color: var(--ink);
  max-width: 34rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
  line-height: 1.2;
}
.arq-hero--v3 .arq-hero__fig { margin: 0; }
.arq-hero--v3 .arq-hero__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- v4 · partido, el texto alineado al ancho del contenido ------------ */
.arq-hero--v4 {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
}
.arq-hero--v4 .arq-hero__texto { padding: var(--arq-aire) var(--arq-gut); align-self: center; }
.arq-hero--v4 .arq-eyebrow,
.arq-hero--v4 .arq-fecha { color: var(--text-2); }
.arq-hero--v4 .arq-tit { font-size: clamp(calc(var(--t-min) * .89), calc(var(--t-vw) * .89), calc(var(--t-max) * .89)); }  /* produccion: 62,4px */
.arq-hero--v4 .arq-bajada { color: var(--text-2); max-width: 34rem; }
.arq-hero--v4 .arq-hero__fig { margin: 0; }
.arq-hero--v4 .arq-hero__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ====================== LOS CUATRO CONTENIDOS ========================== */

/* Base de lectura: la usan los párrafos sueltos de cualquier versión. */
.arq-cuerpo { padding-block: var(--arq-aire); }
/* Red de seguridad: `.arq-cuerpo` no limita el ancho, confia en que cada
   hijo sea un bloque con su clase. Si alguno se cuela suelto —pasaba con
   los grupos de solo texto en "Conceptos 2026"— se iba a los 1425 desde el
   borde, sin margen ni centrado. Aqui se le da la medida de lectura para
   que, aunque el conversor falle, nunca se vea desbordado. */
.arq-cuerpo > :is(p, h2, h3, h4, ul, ol, blockquote) {
  max-width: min(var(--arq-lectura), 100% - var(--arq-gut) * 2);
  margin-inline: auto;
}
/* 17px en el telefono y 18 en escritorio (Carlos, 2026-09-22). Produccion
   usa 16 con Montserrat, pero Futura PT tiene menos altura de x y al mismo
   cuerpo se lee mas pequena. */
.arq-cuerpo p,
.arq-cuerpo li {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.78;
  color: var(--charcoal);
  margin: 0;
}
.arq-cuerpo h2,
.arq-cuerpo h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
/* Produccion, a 1440: 50,4px en los bloques partidos, 34,4 en la columna
   lineal de la v3 y 44 en el blanco/gris de la v4. */
.arq-cuerpo h2 { font-size: clamp(1.65rem, 3.5vw, 3.15rem); }
.arq-cuerpo--v3 h2 { font-size: clamp(1.45rem, 2.4vw, 2.15rem); }
.arq-cuerpo--v4 h2 { font-size: clamp(1.55rem, 3.05vw, 2.75rem); }
.arq-cuerpo h3 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
.arq-cuerpo a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .18em; }
.arq-cuerpo img { width: 100%; height: auto; display: block; }
.arq-cuerpo figure { margin: 0; }
.arq-cuerpo ul, .arq-cuerpo ol { padding-left: 1.3em; display: grid; row-gap: .5em; margin: 0; }

/* --- bloque partido: lo usan v1 y v2 ------------------------------------
   El fondo sangra y el contenido no: en producción el bloque mide todo el
   ancho y la rejilla de dentro se queda en 1280 con columnas de 548. */
.arq-split { padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }
.arq-split__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--arq-gut);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2rem);
}
.arq-split__fig { margin: 0; min-height: 0; }
.arq-split__fig img { width: 100%; height: 100%; object-fit: cover; }
/* El prefijo .arq-cuerpo NO sobra: sin el, «.arq-cuerpo p {margin:0}» (0,1,1)
   le gana a «.arq-...__texto > * + *» (0,1,0) y el bloque se queda sin
   espaciado vertical, con el titulo pegado al parrafo. Es la misma trampa que
   ya estaba documentada en .arq-intro unas lineas mas abajo. */
.arq-cuerpo .arq-split__texto > * + * { margin-top: 1.1em; }
.arq-split--dark { background: var(--ink); }

/* --- primer párrafo centrado: solo v2 ---------------------------------- */
.arq-intro {
  background: var(--white);
  padding: clamp(2.4rem, 5vw, 3.6rem) var(--arq-gut);
  text-align: center;
}
/* Con el contenedor delante: `.arq-cuerpo p { margin: 0 }` apunta al
   elemento y le gana a un `.arq-intro > *` a secas, asi que el
   margin-inline:auto no se aplicaba y el texto quedaba a la izquierda
   dentro de la banda en vez de centrado. */
.arq-cuerpo .arq-intro > * {
  /* misma medida que la columna de la v3 (950): a 90ch se quedaba en 920 y
     el bloque se veia estrecho para la banda (Carlos, 2026-09-22) */
  max-width: var(--arq-lectura);
  margin-inline: auto;
}
.arq-cuerpo .arq-intro > * + * { margin-top: 1.1em; }
.arq-intro p {
  font-size: 1.0625rem;   /* 17px, el mismo que el resto del cuerpo */
  line-height: 1.8;
  color: var(--text-2);
}
/* El bloque tambien recoge grupos con titular —el de "Bold: el renacimiento
   del caracter"—, asi que su h2 necesita tamano y centrado propios. */
.arq-cuerpo .arq-intro > h2,
.arq-cuerpo .arq-intro > h3 {
  max-width: 34ch;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  color: var(--ink);
}

/* --- contenido lineal: solo v3 -----------------------------------------
   Una sola columna centrada, del ancho de lectura, con las fotos dentro.
   En producción el envoltorio mide 840 y las secciones 776. */
/* El tope incluye el padding, asi que se le suma: con `max-width: 776px` a
   secas el texto se quedaba en 649 —127px mas estrecho que produccion—
   porque los 64 de cada lado se comian de dentro. Asi el CONTENIDO mide los
   776 del original. */
.arq-cuerpo--v3 .arq-lineal {
  max-width: calc(var(--arq-lectura) + var(--arq-gut) * 2);
  margin-inline: auto;
  padding-inline: var(--arq-gut);
}
.arq-cuerpo--v3 .arq-lineal > * + * { margin-top: 1.4em; }
.arq-cuerpo--v3 .arq-lineal + .arq-lineal { margin-top: clamp(2.6rem, 5vw, 4.4rem); }
.arq-cuerpo--v3 .arq-lineal h2 { margin-bottom: .2em; }

/* --- alternancia blanco / gris con tarjeta: solo v4 --------------------- */
.arq-plain { background: var(--white); padding-block: clamp(2.8rem, 6.4vw, 5.75rem); }
.arq-plain__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--arq-gut);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.7rem);
  align-items: center;
}
.arq-plain__fig { margin: 0; }
.arq-cuerpo .arq-plain__texto > * + * { margin-top: 1.1em; }

.arq-band { background: var(--arq-gris); padding-block: clamp(2.8rem, 6.4vw, 5.75rem); }
.arq-band__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--arq-gut);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
}
.arq-band__fig { margin: 0; }
/* La tarjeta blanca que pisa la foto. En producción son 56px de solape,
   con la tarjeta centrada respecto a la foto y por encima de ella. */
.arq-band__card {
  position: relative;
  z-index: 1;
  background: var(--white);
  padding: clamp(1.8rem, 3.6vw, 3.25rem);
}
.arq-band__card > * + * { margin-top: 1.1em; }

/* --- cierres ------------------------------------------------------------ */
/* con foto a sangre y velo: v1 y v3 */
.arq-cierre {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
}
.arq-cierre__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arq-cierre::after { content: ""; position: absolute; inset: 0; background: rgba(10,9,8,.68); }
/* 950 y no los 736 de produccion: el texto sobre la foto se veia estrecho
   (Carlos, 2026-09-22). El tope suma el padding, como en la columna de la v3. */
.arq-cierre__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--arq-lectura) + var(--arq-gut) * 2);
  padding: var(--arq-aire) var(--arq-gut);
}
/* produccion: 18,4px en el cierre con foto y 19,2 en la banda solida */
.arq-cuerpo .arq-cierre p { font-size: 1.15rem; line-height: 1.8; }
.arq-cuerpo .arq-cta p { font-size: 1.2rem; line-height: 1.75; }
.arq-cierre__rule { display: block; width: 2.5rem; height: 1px; background: rgba(255,255,255,.55); margin: 0 auto 1.6rem; }

/* El cierre de la v4: titulo y parrafo arriba, foto ancha debajo, sobre el
   gris. Produccion a 1440: seccion de 1421 de alto con 115px de aire
   arriba y abajo, contenido en 1280 y la foto de 832 centrada. */
.arq-cuerpo p:empty { display: none; margin: 0; }
.arq-final { background: var(--arq-gris); padding-block: clamp(3rem, 8vw, 7.2rem); }
.arq-final__inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--arq-gut); }
/* medido en produccion: max-width 40rem, centrado en bloque Y en texto */
.arq-final__texto { max-width: 40rem; margin-inline: auto; text-align: center; }
.arq-cuerpo .arq-final__texto > * + * { margin-top: 1.1em; }
/* con el contenedor delante: `.arq-cuerpo figure { margin: 0 }` gana por
   especificidad y dejaba la foto pegada a la izquierda en vez de centrada */
.arq-cuerpo .arq-final__fig { margin: clamp(2rem, 4vw, 3.4rem) auto 0; max-width: 832px; }
.arq-cuerpo .arq-final h2 { color: var(--ink); }
.arq-cuerpo .arq-final p { color: var(--charcoal); }
.arq-cuerpo .arq-final a { color: var(--ink); }

/* banda sólida sin foto: v2 (oscura) y v4 (gris) */
.arq-cta { background: var(--ink); color: var(--white); text-align: center; padding: var(--arq-aire) var(--arq-gut); }
.arq-cta__inner { max-width: 736px; margin-inline: auto; }
.arq-cuerpo .arq-cta__inner > * + * { margin-top: 1.1em; }
.arq-cta--gris { background: var(--arq-gris); color: var(--ink); }

/* Los bloques a sangre viven dentro de .arq-cuerpo, y las reglas de color de
   la columna de lectura le ganan al color heredado del bloque: el color se
   hereda, y la herencia pierde ante cualquier regla que apunte al elemento.
   Por eso en los oscuros el color va declarado pieza por pieza. */
.arq-cuerpo .arq-cierre h2,
.arq-cuerpo .arq-cierre p,
.arq-cuerpo .arq-cierre a,
.arq-cuerpo .arq-cta h2,
.arq-cuerpo .arq-cta p,
.arq-cuerpo .arq-cta a,
.arq-cuerpo .arq-split--dark h2,
.arq-cuerpo .arq-split--dark h3,
.arq-cuerpo .arq-split--dark a { color: var(--white); }
.arq-cuerpo .arq-split--dark p { color: #d8d5d0; }
.arq-cuerpo .arq-cta--gris h2,
.arq-cuerpo .arq-cta--gris a { color: var(--ink); }
.arq-cuerpo .arq-cta--gris p { color: var(--charcoal); }

/* --- el aire bajo el hero: 60px, no 150 (Carlos, 2026-09-24) ------------
   `.arq-cuerpo` ponia su propio aire (92px a 1440) ANTES del padding del
   primer bloque y los dos se sumaban. Se apaga arriba y es el primer bloque
   el que pone los 60 exactos: asi el numero vale igual en las cuatro
   versiones, tambien en las v3, que arrancan con un `.arq-lineal` sin
   padding propio. Va despues de las reglas de cada bloque porque compite
   con ellas por especificidad. */
.arq-cuerpo { padding-top: 0; }
.arq-cuerpo > :first-child { padding-top: 60px; }
/* Y los mismos 60 por debajo: el padding inferior del intro ya los da, asi
   que el bloque siguiente no vuelve a separar. Se excluyen los de fondo
   oscuro, que necesitan su aire por dentro de la banda. */
.arq-cuerpo > .arq-intro:first-child { padding-bottom: 60px; }
.arq-cuerpo > .arq-intro:first-child + :not(.arq-split--dark):not(.arq-cierre):not(.arq-cta) { padding-top: 0; }

/* ====================== ESCRITORIO ==================================== */
@media (min-width: 821px) {
  /* heros partidos */
  .arq-hero--v3 { grid-template-columns: 1fr 1fr; min-height: 60vh; }
  .arq-hero--v4 { grid-template-columns: 1fr 1fr; min-height: 75vh; }
  /* La foto se saca del flujo dentro de su figura para que NO imponga su
     altura: con una destacada vertical (1080x1350) el hero se iba a 891px
     en vez de los 677 de produccion. Asi manda el min-height y object-fit
     recorta, que es lo que hace el original. */
  .arq-hero--v3 .arq-hero__fig,
  .arq-hero--v4 .arq-hero__fig { position: relative; overflow: hidden; }
  .arq-hero--v3 .arq-hero__fig img,
  .arq-hero--v4 .arq-hero__fig img { position: absolute; inset: 0; }
  /* el texto de la v4 arranca en el margen del contenido, no en el del
     viewport: es la diferencia con la v3 */
  .arq-hero--v4 .arq-hero__texto {
    padding-left: max(var(--arq-gut), calc((100% - var(--maxw)) / 2 + var(--arq-gut)));
  }

  /* bloque partido */
  /* el cuerpo sube de 17 a 18 solo en escritorio, y la bajada del hero va
     con el, porque es el mismo tipo de texto */
  .arq-cuerpo p,
  .arq-cuerpo li,
  .arq-intro p,
  .arq-bajada { font-size: 1.125rem; }

  .arq-split__inner { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 3.9vw, 3.5rem); min-height: 24rem; }
  /* se invierte con grid-column y no con `order`: en una rejilla el order
     reordena la colocación automática y aquí no bastaba */
  .arq-split--rev .arq-split__fig { grid-column: 2; grid-row: 1; }
  .arq-split--rev .arq-split__texto { grid-column: 1; grid-row: 1; }

  /* v4: rejilla de 12 columnas, la foto ocupa 6 y el texto 5, con una de
     respiro entre las dos (medido en producción: 554 y 455 de 1280) */
  .arq-plain__inner { grid-template-columns: repeat(12, 1fr); column-gap: 43px; }
  /* La FILA va declarada siempre, no solo la columna: al invertir, la foto
     pide las columnas 7-12 y el texto las 1-5, y la colocacion automatica no
     retrocede —manda el texto a una fila nueva y aparece debajo de la foto
     en vez de al lado. Es el mismo motivo por el que el bloque partido se
     invierte con grid-column y no con `order`. */
  .arq-plain__fig { grid-column: 1 / span 6; grid-row: 1; }
  .arq-plain__texto { grid-column: 8 / span 5; grid-row: 1; }
  .arq-plain--rev .arq-plain__fig { grid-column: 7 / span 6; grid-row: 1; }
  .arq-plain--rev .arq-plain__texto { grid-column: 1 / span 5; grid-row: 1; }

  /* v4: la banda gris. La foto manda el alto y la tarjeta se monta encima */
  .arq-band__inner { grid-template-columns: minmax(0, 645fr) minmax(0, 507fr); }
  .arq-band__fig { grid-column: 1; grid-row: 1; }
  .arq-band__card { grid-column: 2; grid-row: 1; margin-left: -56px; }
  .arq-band--rev .arq-band__inner { grid-template-columns: minmax(0, 507fr) minmax(0, 645fr); }
  .arq-band--rev .arq-band__fig { grid-column: 2; grid-row: 1; }
  .arq-band--rev .arq-band__card { grid-column: 1; grid-row: 1; margin-left: 0; margin-right: -56px; }
}

/* ====================== TELÉFONO ====================================== */
@media (max-width: 820px) {
  .arq-hero--v1 { min-height: 76vh; }
  .arq-hero--v1 .arq-hero__texto { max-width: 100%; }
  .arq-hero--v2 { min-height: 52vh; }
  .arq-hero--v3 .arq-hero__fig img,
  .arq-hero--v4 .arq-hero__fig img { height: auto; aspect-ratio: 4/3; }
  /* la tarjeta deja de pisar la foto: en una columna no hay dónde */
  .arq-band__card { margin: -32px 20px 0; }
}

/* ====================== EL LISTADO ==================================== */
.arq-list { padding-bottom: clamp(3rem, 7vw, 6rem); }
.arq-list__head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 4rem) var(--arq-gut) clamp(1.6rem, 3vw, 2.4rem);
}
.arq-list__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}
/* mismo trato que las bajadas de las portadas: es el mismo tipo de texto
   —un parrafo que acompana a un titulo— y a 15px se veia flaco debajo del
   titular. La medida sube a 62ch para que no caiga en seis lineas. */
.arq-list__bajada {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-2);
  max-width: 62ch;
  margin: 1em 0 0;
}
/* va aqui y no en la lista de arriba: aquella esta antes en el archivo y, a
   igual especificidad, gana la ultima —la de 17px— y nunca subia a 18 */
@media (min-width: 821px) { .arq-list__bajada { font-size: 1.125rem; } }

/* filtro por categoría: enlaces reales, no pestañas de JavaScript, para que
   cada categoría tenga su URL indexable */
.arq-filtro { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2em; }
.arq-filtro a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: .8em 1.3em;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.arq-filtro a:hover { border-color: var(--ink); }
.arq-filtro a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.arq-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--arq-gut);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.2rem) clamp(1.4rem, 2.4vw, 2rem);
}
.arq-card { display: flex; flex-direction: column; }
.arq-card__fig { margin: 0 0 1.1rem; overflow: hidden; }
/* las imágenes del blog no llevan bordes redondeados, como el resto del sitio */
/* height:auto NO sobra: WordPress emite width/height en el <img> y esos
   atributos son CSS de autor con especificidad cero, pero CSS al fin. Sin una
   regla que fije la altura, el atributo gana a `auto`, el aspect-ratio se
   ignora —solo manda cuando la altura es automatica— y cada portada salia con
   la altura de su archivo: 255, 380, 512, 960. El tema no tiene el
   `img{height:auto}` global que trae casi cualquier otro. */
.arq-card__fig img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; transition: transform .6s var(--ease); }
.arq-card:hover .arq-card__fig img { transform: scale(1.03); }
.arq-card__eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .8em;
}
.arq-card__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: .02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
.arq-card__title a { color: inherit; text-decoration: none; }
/* El grosor se fija a mano: en `auto` el navegador lo deriva del tamano de
   la fuente y en un titular de 43px en Amadine salia un trazo pesado, muy
   lejos del peso Light del titulo. 1px y un poco mas de separacion. */
.arq-card__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.arq-card__resumen { font-family: var(--sans); font-size: 1rem; line-height: 1.7; color: var(--text-2); margin: 0; }
.arq-card__fecha { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 1em; }

/* la primera entrada ocupa el ancho completo: da jerarquía a la página */
.arq-card--destacada { grid-column: 1 / -1; }
.arq-card--destacada .arq-card__fig img { aspect-ratio: 21/9; }
.arq-card--destacada .arq-card__title { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
.arq-card--destacada .arq-card__resumen { max-width: 62ch; font-size: 1.02rem; }

.arq-nav { max-width: var(--maxw); margin: clamp(2.6rem, 5vw, 4rem) auto 0; padding-inline: var(--arq-gut); }
.arq-nav .page-numbers {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--ink);
  padding: .7em 1em;
  border: 1px solid var(--border);
  display: inline-block;
  margin: 0 4px 8px 0;
}
.arq-nav .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.arq-nav .page-numbers.dots { border-color: transparent; }

/* En blanco, no en --cream: el footer usa ese mismo #f4f3ee y las dos bandas
   se fundian en una sola mancha sin borde. Asi el footer recupera su limite
   —el que ya tiene en el resto del sitio, que termina en blanco— y el filete
   de arriba mantiene "Seguir leyendo" como seccion propia cuando encima queda
   el cuerpo blanco del articulo. */
.arq-rel {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding-block: clamp(2.6rem, 5vw, 4.4rem);
}
.arq-rel__title {
  max-width: var(--maxw);
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  padding-inline: var(--arq-gut);
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (min-width: 821px) {
  .arq-grid { grid-template-columns: repeat(3, 1fr); }
  .arq-card--destacada { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: center; }
  .arq-card--destacada .arq-card__fig { margin-bottom: 0; }
  .arq-card--destacada .arq-card__fig img { aspect-ratio: 4/3; }
}

/* ====================== ENTRADA POR SCROLL ============================ */
.arq-pre { opacity: 0; transform: translateY(18px); }
.arq-in {
  opacity: 1;
  transform: none;
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .arq-pre, .arq-in { opacity: 1; transform: none; transition: none; }
  .arq-card__fig img { transition: none; }
}