/* ═══════════════════════════════════════════════════════════════════════════
   BLOG v2 — ARES DG
   Hoja de estilos de las 4 vistas nuevas del blog:
     blog-v2.php (hub) · single-v2.php (nota) · category.php · tag.php

   ───────────────────────────────────────────────────────────────────────────
   DÓNDE VIVE ESTE ARCHIVO, Y POR QUÉ NO EN assets/css/
   ───────────────────────────────────────────────────────────────────────────
   wp-scss está ACTIVO en producción. Su enqueue_files() recorre /assets/css/
   con un DirectoryIterator y encola TODO .css que encuentre, en TODAS las
   páginas del sitio. Puesto ahí, este archivo se cargaría en la home, en el
   portfolio y en el contacto. Aquí afuera queda fuera de su alcance, y lo encola
   ares_blog_encolar_css() solo en las 4 vistas.

   No tocar global.css: lo compila wp-scss desde src/sass/ y lo pisa en la
   próxima carga del admin.

   ───────────────────────────────────────────────────────────────────────────
   TODO ESTÁ SCOPEADO BAJO .blog-v2
   ───────────────────────────────────────────────────────────────────────────
   Es la clase raíz del <main> de las 4 plantillas. Sirve para que, mientras
   category.php y tag.php todavía no estén subidos y esas URLs las siga
   sirviendo archive.php, esta hoja sea INERTE aunque llegara a colarse.

   ───────────────────────────────────────────────────────────────────────────
   PARA OTRA MARCA: se tocan SOLO los tokens del :root de aquí abajo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · TOKENS — ESTO ES LO QUE SE CAMBIA
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1.1 · ACENTO ────────────────────────────────────────────────────────
     UN SOLO color de acento: el dorado de marca, el mismo del sidebar fijo y
     del footer. Con dos acentos la página pierde jerarquía y todo compite.

     PROHIBIDOS, y no están aquí por eso:
       #b89d6a  dorado ajeno, con 20 apariciones en el CSS viejo del blog
       #651c34  borgoña: es la franja lateral de OTRO cliente (Silvana Dato),
                portada por error al tema. Ver la sección 3 de esta hoja.

     Las dos variantes son derivadas del acento, no colores nuevos:
       --ares-acento-oscuro  para texto chico sobre blanco. #ae913a sobre
                             blanco da 3.08:1 y no llega a AA para cuerpo;
                             esta variante da 4.53:1 y sí.
       --ares-acento-claro   solo para hovers sobre fondo oscuro.            */

  --ares-acento:        #ae913a;
  --ares-acento-oscuro: #8c7430;
  --ares-acento-claro:  #c4a95a;

  /* ── 1.2 · NEUTROS ───────────────────────────────────────────────────────
     Los únicos permitidos por el proyecto: #000 #fff #222 #555 #888 #f8f8f8.
     Las líneas se derivan de #000 con alfa en vez de inventar un gris nuevo:
     así siguen siendo el mismo neutro y se adaptan al fondo que tengan detrás. */

  --ares-negro:        #000;
  --ares-blanco:       #fff;
  --ares-tinta:        #222;   /* títulos y texto fuerte                     */
  --ares-texto:        #555;   /* cuerpo, bajadas y metadatos (7.4:1)        */
  --ares-apagado:      #888;   /* SOLO decorativo: nunca texto que haya que leer */
  --ares-banda:        #f8f8f8;/* fondo de bandas y del bloque de consulta   */

  --ares-linea:        rgba(0, 0, 0, .10);
  --ares-linea-fuerte: rgba(0, 0, 0, .16);

  /* ── 1.3 · TIPOGRAFÍA ────────────────────────────────────────────────────
     Las carga el TEMA por @import en global.css. Aquí solo se nombran.
     NO agregar familias nuevas ni otro @import.                             */

  --ares-font-titulo: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --ares-font-cuerpo: "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* ── 1.4 · RITMO Y FORMA ─────────────────────────────────────────────────
     --ares-medida es el ancho de la columna de lectura: 68ch son ~75
     caracteres por línea, que es el rango legible.

     --ares-desplazamiento compensa el #sidebar del tema, que es
     position:fixed con 100px de ancho a partir de 991px. Las vistas viejas con
     <main id="cuerpo"> lo compensan a medias con un border-left de 30px en
     #651c34 — la franja prohibida. Aquí va como padding propio, con su token, y
     el borgoña no entra.                                                    */

  --ares-medida:         68ch;
  --ares-ancho:          1180px;
  --ares-radio:          2px;
  --ares-transicion:     .3s ease;
  --ares-desplazamiento: 100px;

  /* Aire entre el último bloque de contenido y la franja dorada del footer.
     Va sobre el CONTENEDOR y no sobre el <main>: footer.php abre <footer id="pie">
     ANTES de cerrar </main>, o sea que el footer es HIJO del <main>. Un
     padding-bottom en .blog-v2 cae DEBAJO del footer, donde no separa nada y
     además deja una tira blanca bajo el dorado. Medido: 70px de tira. */
  --ares-aire-footer:    72px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2 · BASE
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2,
.blog-v2 *,
.blog-v2 *::before,
.blog-v2 *::after { box-sizing: border-box; }

.blog-v2 {
  font-family: var(--ares-font-cuerpo);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ares-texto);
  background: var(--ares-blanco);
  /* Sin padding-bottom: el footer del tema es hijo de este <main>, así que ese
     padding quedaba por DEBAJO de la franja dorada. El aire va en el
     contenedor, con --ares-aire-footer. */
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* El tema mete padding lateral a `main > section`. Las secciones de estas
   plantillas cuelgan del contenedor, no del <main>, pero la regla queda por si
   alguna vez alguien sube una al primer nivel. */
.blog-v2 > section { padding-left: 0; padding-right: 0; }

/* Desplazamiento por el #sidebar fijo del tema. Sin border-left: la franja
   de 30px que usan las vistas viejas es de otro cliente. */
@media (min-width: 991px) {
  .blog-v2 { padding-left: var(--ares-desplazamiento); }
}

.blog-v2 img { max-width: 100%; height: auto; }

/* Color por defecto de los enlaces SIN clase propia.
   El selector va con :where() a propósito. Escrito como `.blog-v2 a` tiene
   especificidad (0,1,1) y le GANABA a todos los componentes de una sola clase
   —(0,1,0)— que definen su propio color: el botón quedaba con texto #222 sobre
   fondo negro (ilegible), el chip activo y la etiqueta activa perdían el negro
   puro sobre el dorado, y el enlace de sección perdía su gris.
   Con :where() la regla baja a (0,1,0) y cualquier componente posterior la
   pisa. Los que invierten fondo y texto se refuerzan igual más abajo. */
.blog-v2 :where(a) {
  color: var(--ares-tinta);
  text-decoration: none;
  transition: color var(--ares-transicion);
}
.blog-v2 :where(a):hover,
.blog-v2 :where(a):focus-visible { color: var(--ares-acento-oscuro); text-decoration: none; }

.blog-v2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ares-font-titulo);
  color: var(--ares-tinta);
  line-height: 1.15;
  margin: 0 0 .5em;
}

.blog-v2 :focus-visible {
  outline: 2px solid var(--ares-acento-oscuro);
  outline-offset: 3px;
}

.blog-v2__container {
  width: 100%;
  max-width: var(--ares-ancho);
  /* El margen inferior es lo que separa el último bloque del footer dorado.
     Acotado a .blog-v2__container: esta clase solo existe en las 4 plantillas
     nuevas, así que no puede alcanzar a ninguna otra página del sitio. */
  margin: 0 auto var(--ares-aire-footer);
  padding: 0 24px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3 · HERO — la cabecera del hub y de los archivos
   Barlow Condensed en versalitas con letter-spacing, que es el gesto de
   cabecera del sitio (ver .cabecera-pagina en global.css).
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2__hero {
  text-align: left;
  padding: 56px 0 0;
  background: var(--ares-banda);
  margin-bottom: 48px;
}
.blog-v2__hero-in {
  width: 100%;
  max-width: var(--ares-ancho);
  margin: 0 auto;
  padding: 0 24px 48px;
}
.blog-v2__kicker {
  font-family: var(--ares-font-titulo);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ares-acento-oscuro);
  margin: 0 0 10px;
}
.blog-v2__title {
  font-family: var(--ares-font-titulo);
  font-weight: 700;
  /* Un solo tamaño para el hub y para los archivos. El tamaño del título no
     puede depender de cuántas letras tiene el nombre de la categoría. */
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ares-tinta);
  margin: 0;
  overflow-wrap: break-word;
}
.blog-v2__title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: var(--ares-acento);
  margin-top: 20px;
}
.blog-v2__desc {
  max-width: 62ch;
  margin: 22px 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ares-texto);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · TÍTULOS DE SECCIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2-seccion { margin-top: 64px; }
.blog-v2-seccion:first-child { margin-top: 0; }

.blog-v2-seccion__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--ares-acento);
}
.blog-v2-seccion__title {
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ares-tinta);
  margin: 0;
}
.blog-v2-seccion__link {
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ares-texto);
}
.blog-v2-seccion__link i { margin-left: 6px; font-size: .8em; }
.blog-v2-seccion__link:hover { color: var(--ares-acento-oscuro); }


/* ═══════════════════════════════════════════════════════════════════════════
   5 · CHIPS DE CATEGORÍA
   Van SIEMPRE fuera del contenedor de dos columnas: adentro empujan hacia abajo
   solo la columna de las cards y el sidebar arranca más arriba que la grilla.
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2-chips { display: flex; flex-wrap: wrap; gap: 9px; }

.blog-v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--ares-linea-fuerte);
  border-radius: 999px;
  background: var(--ares-blanco);
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ares-tinta);
  transition: all var(--ares-transicion);
}
/* Dorado con texto NEGRO, no blanco: blanco sobre #ae913a da 3.08:1 y no llega
   a AA; negro sobre el mismo dorado da 6.8:1.
   Prefijado con .blog-v2 por lo mismo que el botón: el estado invertido no
   puede quedar a merced del orden del archivo. */
.blog-v2 .blog-v2-chip:hover,
.blog-v2 .blog-v2-chip--activo {
  background: var(--ares-acento);
  border-color: var(--ares-acento);
  color: var(--ares-negro);
}
.blog-v2-chip__count {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ares-acento-oscuro);
  background: var(--ares-banda);
  padding: 1px 9px;
  border-radius: 999px;
  transition: all var(--ares-transicion);
}
.blog-v2-chip:hover .blog-v2-chip__count,
.blog-v2-chip--activo .blog-v2-chip__count {
  background: rgba(0, 0, 0, .14);
  color: var(--ares-negro);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · GRILLAS
   DOS columnas, no tres: hay pocas notas y las cards llevan bajada.
   Las cuentas que dependen de esto (destacadas = 2, notas por página = 10,
   "otras notas" = 2) están en las constantes de functions.php. Si esta grilla
   pasa a 3, HAY QUE REHACERLAS.
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr);
}
.blog-v2-layout {
  display: grid;
  gap: 46px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

@media (max-width: 1199px) {
  .blog-v2-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 34px; }
}
@media (max-width: 991px) {
  .blog-v2-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
  .blog-v2-grid { grid-template-columns: 1fr; gap: 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · CARD DE NOTA
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ares-blanco);
  border: 1px solid var(--ares-linea);
  border-radius: var(--ares-radio);
  overflow: hidden;
  transition: box-shadow var(--ares-transicion), transform var(--ares-transicion);
}
.blog-v2-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
  transform: translateY(-3px);
}

.blog-v2-card__thumb-link { display: block; }
.blog-v2-card__thumb {
  position: relative;
  overflow: hidden;
  /* Las destacadas de las notas son 800x600 (4:3). A 16/10 el recorte es
     mínimo y todas quedan iguales aunque una sea 1200x806. */
  aspect-ratio: 16 / 10;
  background: var(--ares-banda);
}
.blog-v2-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.blog-v2-card:hover .blog-v2-card__thumb img { transform: scale(1.06); }

.blog-v2-card__cat {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: calc(100% - 24px);
  padding: 4px 10px;
  background: var(--ares-acento);
  color: var(--ares-negro);
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: normal;
}

.blog-v2-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.blog-v2-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ares-texto);
  margin-bottom: 10px;
}
.blog-v2-card__meta i { color: var(--ares-acento-oscuro); margin-right: 4px; }

.blog-v2-card__title {
  font-family: var(--ares-font-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  margin: 0 0 12px;
  overflow-wrap: break-word;
}
.blog-v2-card__title a { color: var(--ares-tinta); }
.blog-v2-card__title a:hover { color: var(--ares-acento-oscuro); }

.blog-v2-card__excerpt {
  flex: 1;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--ares-texto);
  margin: 0 0 20px;
}

.blog-v2-card__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--ares-acento);
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ares-tinta);
  transition: gap var(--ares-transicion);
}
.blog-v2-card:hover .blog-v2-card__btn { gap: 13px; }

/* Card destacada: ocupa la fila entera de la grilla de 2. Con
   ARES_BLOG_DESTACADAS = 2 son dos cards simples una al lado de la otra, así
   que este modificador queda de reserva para el día que se pase a 1 doble. */
.blog-v2-card--destacada .blog-v2-card__thumb { aspect-ratio: 16 / 9; }
.blog-v2-card--destacada .blog-v2-card__title { font-size: 1.75rem; }
.blog-v2-card--destacada .blog-v2-card__excerpt { font-size: 1.05rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   8 · SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2-sidebar { min-width: 0; }
@media (min-width: 992px) {
  .blog-v2-sidebar { position: sticky; top: 30px; }
}

.blog-v2-side {
  background: var(--ares-blanco);
  border: 1px solid var(--ares-linea);
  padding: 24px 22px;
  margin-bottom: 26px;
}
.blog-v2-side:last-child { margin-bottom: 0; }

.blog-v2-side__head {
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ares-tinta);
  padding-bottom: 11px;
  margin: 0 0 16px;
  border-bottom: 2px solid var(--ares-acento);
}
.blog-v2-side__head i { color: var(--ares-acento-oscuro); margin-right: 6px; }

.blog-v2-side__list { list-style: none; margin: 0; padding: 0; }
.blog-v2-side__list li + li { border-top: 1px solid var(--ares-linea); }
.blog-v2-side__list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: .95rem;
  color: var(--ares-texto);
}
.blog-v2-side__list li a:hover { color: var(--ares-acento-oscuro); }
.blog-v2-side__list li.es-actual > a { color: var(--ares-tinta); font-weight: 700; }

.blog-v2-side__count {
  font-family: var(--ares-font-titulo);
  font-weight: 700;
  font-size: .85rem;
  color: var(--ares-acento-oscuro);
  background: var(--ares-banda);
  padding: 2px 10px;
  border-radius: 999px;
}

.blog-v2-side__cloud { display: flex; flex-wrap: wrap; gap: 7px; }

.blog-v2-tag {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--ares-linea-fuerte);
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ares-texto);
  /* Los nombres de las etiquetas están cargados como slugs con guiones y hay
     uno concatenado de 85 caracteres: sin esto se sale del sidebar. */
  max-width: 100%;
  overflow-wrap: break-word;
  transition: all var(--ares-transicion);
}
.blog-v2 .blog-v2-tag:hover,
.blog-v2 .blog-v2-tag--activo {
  background: var(--ares-acento);
  border-color: var(--ares-acento);
  color: var(--ares-negro);
}

/* ── Bloque "Proyecto relacionado" — la pieza de conversión ────────────────
   Imagen + título + botón, SIN bajada: los 72 `trabajos` tienen 0 excerpts y
   0 rank_math_description, y su texto plano son etiquetas decorativas
   ("Diseño y Construcción de Stands Sector SECTOR: SERVICIO: …"). Cualquier
   fallback de texto ensuciaría el bloque. Es el error 4 del patrón.

   16:9 y no 4:3: las destacadas de los trabajos son fotos apaisadas reales
   (~3:2) y SIN texto quemado encima, así que no hay recorte que coma letras. */
.blog-v2-side--proyecto { padding: 0; overflow: hidden; border-color: var(--ares-linea-fuerte); }
.blog-v2-side__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ares-banda); }
.blog-v2-side__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-v2-side__body { padding: 20px 22px 24px; background: var(--ares-banda); }
.blog-v2-side__kicker {
  display: block;
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ares-acento-oscuro);
  margin-bottom: 7px;
}
.blog-v2-side__title {
  font-family: var(--ares-font-titulo);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .03em;
  color: var(--ares-tinta);
  margin: 0 0 16px;
  overflow-wrap: break-word;
}
.blog-v2-side__txt { font-size: .93rem; line-height: 1.6; color: var(--ares-texto); margin: 0 0 18px; }

.blog-v2-side--consulta { background: var(--ares-banda); border-color: var(--ares-linea-fuerte); }


/* ═══════════════════════════════════════════════════════════════════════════
   9 · BOTONES
   Fondo negro y no dorado: es el botón que ya usa el sitio (.wpcf7-submit del
   formulario), y blanco sobre #ae913a no llega a AA. El dorado entra en el
   hover, con texto negro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Los tres selectores van prefijados con .blog-v2 para llegar a (0,2,0). El
   color de un botón que invierte fondo y texto NO puede depender del orden en
   que quede escrito el archivo: si alguien mueve este bloque más arriba, el
   texto vuelve a salir #222 sobre negro y el botón se pierde. */
.blog-v2 .blog-v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 2px solid var(--ares-negro);
  background: var(--ares-negro);
  color: var(--ares-blanco);
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: all var(--ares-transicion);
}
.blog-v2 .blog-v2-btn:hover,
.blog-v2 .blog-v2-btn:focus-visible {
  background: var(--ares-acento);
  border-color: var(--ares-acento);
  color: var(--ares-negro);
}
.blog-v2 .blog-v2-btn--linea {
  background: transparent;
  color: var(--ares-tinta);
}


/* ═══════════════════════════════════════════════════════════════════════════
   10 · LA NOTA
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2--nota { padding-top: 0; }

.blog-v2-breadcrumb {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ares-texto);
  padding: 26px 0 0;
}
.blog-v2-breadcrumb a { color: var(--ares-texto); }
.blog-v2-breadcrumb a:hover { color: var(--ares-acento-oscuro); }
.blog-v2-breadcrumb .sep { color: var(--ares-apagado); margin: 0 4px; }
/* Rank Math y NavXT envuelven la ruta en su propio contenedor. */
.blog-v2-breadcrumb :is(p, nav, .rank-math-breadcrumb) { margin: 0; font-size: inherit; }

.blog-v2-nota { min-width: 0; max-width: 820px; }

.blog-v2 .blog-v2-nota__cat {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  background: var(--ares-acento);
  color: var(--ares-negro);
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-v2 .blog-v2-nota__cat:hover { background: var(--ares-negro); color: var(--ares-blanco); }

/* El <h1> real de la nota. El que venía dentro del contenido se fue solo con
   la fila landing-header, que la plantilla resta: no hace falta ocultarlo por
   CSS como hace global.css con `body.single #landing-header h1`. */
.blog-v2-nota__title {
  font-family: var(--ares-font-titulo);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ares-tinta);
  margin: 0 0 22px;
  /* Los títulos van en versalitas con letter-spacing: una palabra larga sin
     espacios (un slug de etiqueta, una URL pegada) desbordaría en móvil. */
  overflow-wrap: break-word;
}

/* Firma + barra de metadatos. Señal de autoridad (E-E-A-T): antes no existía. */
.blog-v2-nota__firma {
  display: flex;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 30px;
  border-top: 1px solid var(--ares-linea);
  border-bottom: 1px solid var(--ares-linea);
}
.blog-v2-nota__autor {
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ares-tinta);
  line-height: 1.25;
}
.blog-v2-nota__autor small {
  display: block;
  font-family: var(--ares-font-cuerpo);
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ares-texto);
}
.blog-v2-nota__meta {
  margin-left: auto;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ares-texto);
}
.blog-v2-nota__meta i { color: var(--ares-acento-oscuro); margin-right: 5px; }
@media (max-width: 575px) {
  .blog-v2-nota__meta { margin-left: 0; }
}

/* ── Cabecera banner ──────────────────────────────────────────────────────
   Modo `banner` FIJO: ninguna de las 12 notas tiene embed, así que el modo
   `auto` del patrón está descartado entero.

   Contenida al ancho de la columna y NO a sangre completa: 11 de las 12
   destacadas son de 800x600 y no hay tamaño `large` generado (el máximo
   intermedio es medium_large, 768x576). Estiradas a todo el ancho se ven
   blandas. Se pide `full` (800px) y el recorte lo hace el CSS.

   Si una nota no tuviera destacada, la plantilla no imprime nada: el bloque
   desaparece sin dejar hueco. Hoy las 12 la tienen. */
.blog-v2-nota__banner {
  margin: 0 0 34px;
  overflow: hidden;
  background: var(--ares-banda);
  aspect-ratio: 16 / 9;
}
.blog-v2-nota__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Cuerpo del artículo ──────────────────────────────────────────────────
   El contenido es markup de WPBakery (la fila landing-data, que sobrevive a la
   resta). Adentro tiene DOS columnas al 50% (bajada + foto) y después una
   columna a ancho completo con el artículo. Estas reglas normalizan esa
   estructura dentro de una columna más angosta que la de la nota vieja. */
.blog-v2-nota__contenido {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ares-texto);
}
.blog-v2-nota__contenido p { margin: 0 0 1.35em; }
.blog-v2-nota__contenido :is(h2, h3, h4, h5, h6) {
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  color: var(--ares-tinta);
}
.blog-v2-nota__contenido h2 { font-size: 1.9rem; letter-spacing: .05em; margin: 1.9em 0 .5em; }
.blog-v2-nota__contenido h3 { font-size: 1.55rem; letter-spacing: .05em; margin: 1.8em 0 .5em; }
.blog-v2-nota__contenido h4 { font-size: 1.25rem; letter-spacing: .06em; margin: 1.6em 0 .5em; }
/* global.css le cuelga a `body.single .landing-data h4` una rayita decorativa
   con ::after en `left:100%`, que en una columna angosta se sale del ancho. */
.blog-v2-nota__contenido :is(h2, h3, h4)::after { display: none; }

.blog-v2-nota__contenido :is(ul, ol) { margin: 0 0 1.35em; padding-left: 1.3em; }
.blog-v2-nota__contenido li { margin-bottom: .5em; }
.blog-v2-nota__contenido li::marker { color: var(--ares-acento); }
.blog-v2-nota__contenido strong,
.blog-v2-nota__contenido b { color: var(--ares-tinta); font-weight: 700; }
.blog-v2-nota__contenido a { color: var(--ares-acento-oscuro); border-bottom: 1px solid var(--ares-linea-fuerte); }
.blog-v2-nota__contenido a:hover { border-bottom-color: var(--ares-acento); }
.blog-v2-nota__contenido :is(img, iframe) { max-width: 100%; }

.blog-v2-nota__contenido blockquote {
  margin: 2em 0;
  padding: 6px 0 6px 26px;
  border-left: 4px solid var(--ares-acento);
  font-family: var(--ares-font-titulo);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--ares-tinta);
}

/* WPBakery adentro de la columna de lectura.
   El .vc_row de WPBakery lleva margin: 0 -15px y lo compensa el padding de las
   columnas; con min-width:0 y max-width:100% no se escapa del contenedor. */
.blog-v2-nota__contenido .vc_row { margin-left: -15px; margin-right: -15px; }
.blog-v2-nota__contenido :is(.vc_row, .vc_column_container, .vc_column-inner, .wpb_wrapper) {
  min-width: 0;
  max-width: 100%;
}
.blog-v2-nota__contenido .wpb_content_element { margin-bottom: 1.5em; }
.blog-v2-nota__contenido .wpb_content_element:last-child { margin-bottom: 0; }

/* La bajada y la foto de apertura de la nota van a 50% cada una en el markup
   del builder. La nota vieja las mostraba a ancho de pantalla completa; la v2
   tiene sidebar, así que la columna de lectura es bastante más angosta y esas
   dos medias columnas caen en ~360px: unas 8 palabras por línea, ilegible.

   Se apilan por debajo de 1400px de viewport. La cuenta: la columna de lectura
   mide viewport − 100 (sidebar fijo del tema) − 48 (padding del contenedor)
   − 320 (sidebar del blog) − 46 (gap) = viewport − 514. A 1400 eso da ~886px y
   cada mitad ~410px, que ya se lee bien. Por debajo, no.

   NO es una regla global: solo dentro del contenido de la nota. El resto del
   sitio sigue usando las columnas de WPBakery como están. */
@media (max-width: 1399px) {
  .blog-v2-nota__contenido .vc_col-sm-6 { width: 100%; }
}

/* ── CTA de proyecto al cierre del artículo ───────────────────────────────
   Va al CIERRE y no a mitad de la nota: el contenido está montado con columnas
   del builder e inyectar un bloque entre párrafos lo mete dentro de una
   columna al 50%, con el ancho partido. Además, al cierre es donde el lector
   terminó de leer. No pelear con el builder por esto. */
.blog-v2-nota__cta {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background: var(--ares-banda);
  border-left: 5px solid var(--ares-acento);
  margin: 2.8em 0 0;
  overflow: hidden;
}
.blog-v2-nota__cta-img { overflow: hidden; }
.blog-v2-nota__cta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-v2-nota__cta-body { padding: 26px 28px; }
.blog-v2-nota__cta-kicker {
  display: block;
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ares-acento-oscuro);
  margin-bottom: 8px;
}
.blog-v2-nota__cta-title {
  font-family: var(--ares-font-titulo);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .03em;
  margin: 0 0 18px;
}
@media (max-width: 640px) {
  .blog-v2-nota__cta { grid-template-columns: 1fr; }
  .blog-v2-nota__cta-img { aspect-ratio: 16 / 8; }
}

/* ── Etiquetas al pie ─────────────────────────────────────────────────────
   Son las etiquetas DE ESTA NOTA, nunca la nube global del sitio. */
.blog-v2-nota__tags {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding-top: 26px;
  margin-top: 34px;
  border-top: 1px solid var(--ares-linea);
}
.blog-v2-nota__tags-label {
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ares-texto);
  margin-right: 4px;
}

/* ── Anterior / siguiente ────────────────────────────────────────────────── */
.blog-v2-nota__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ares-linea);
}
.blog-v2-nota__nav-link { display: block; }
.blog-v2-nota__nav-link span {
  display: block;
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ares-acento-oscuro);
  margin-bottom: 6px;
}
.blog-v2-nota__nav-link strong {
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ares-tinta);
  transition: color var(--ares-transicion);
}
.blog-v2-nota__nav-link:hover strong { color: var(--ares-acento-oscuro); }
.blog-v2-nota__nav-link--next { text-align: right; }
@media (max-width: 575px) {
  .blog-v2-nota__nav { grid-template-columns: 1fr; }
  .blog-v2-nota__nav-link--next { text-align: left; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11 · PAGINACIÓN
   Con 12 notas − 2 destacadas = 10 y ARES_BLOG_POR_PAGINA = 10, hoy NO hay
   página 2 y paginate_links() no devuelve nada: la plantilla no imprime el
   <nav>. Estas reglas quedan listas para cuando el blog crezca.
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2-paginacion {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 52px;
}
.blog-v2-paginacion :is(a, span) {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid var(--ares-linea-fuerte);
  font-family: var(--ares-font-titulo);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ares-tinta);
  transition: all var(--ares-transicion);
}
.blog-v2-paginacion a:hover {
  background: var(--ares-acento);
  border-color: var(--ares-acento);
  color: var(--ares-negro);
}
.blog-v2-paginacion .current {
  background: var(--ares-negro);
  border-color: var(--ares-negro);
  color: var(--ares-blanco);
}
.blog-v2-paginacion .dots { border-color: transparent; }


/* ═══════════════════════════════════════════════════════════════════════════
   12 · VACÍOS
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-v2__vacio {
  padding: 40px 0;
  font-size: 1.05rem;
  color: var(--ares-texto);
}