/* ═══════════════════════════════════════════════════════════════════════════
   BLOG CUIDARTE · blog-v2.css
   Hoja propia del blog. CSS plano, sin SCSS: en este proyecto no hay compilador
   (no hay wp-scss ni package.json). No reemplaza a global.css: convive con él.

   ─── QUÉ HAY ACÁ ───────────────────────────────────────────────────────────
   fase 1 · los tokens del :root
   fase 3 · el hub: hero, secciones, cards, chips, paginación
   fase 4 · la nota: miga, firma, cabecera, contenido, CTA, sidebar,
            vecinas, seguí leyendo, cierre con formulario
   fase 5 · categoría y etiqueta: chips fuera de la grilla, grilla de 2 +
            sidebar, otras notas, estado vacío                   ← acá estamos

   ─── LAS TRES REGLAS QUE NO SE ROMPEN (Regla 2 de CLAUDE.md) ───────────────

   1 · CERO SELECTORES DE ELEMENTO SUELTOS.
       Ni un solo selector que sea un nombre de etiqueta pelado: enlace, body,
       párrafo, encabezado, cita, campo de formulario. Todo cuelga de una clase
       del blog: .cui-blog …, .cui-nota__…

       No es cosmético. Medido: el CSS del Customizer de Divi se imprime en
       wp_head prioridad 103 (Divi/core/components/PageResource.php:681), o sea
       DESPUÉS de wp_print_styles(), y el CSS adicional de WordPress en la 101.
       Ninguna prioridad de encolado los adelanta (se probaron cuatro). Esas dos
       hojas tienen 8 reglas que pueden chocar y las 8 usan selector de elemento
       suelto. Con una clase de por medio ganamos por especificidad y no hace
       falta pelear por el orden.

   2 · CERO REGLAS FORZADAS.
       Ni una sola declaración con la bandera de prioridad de CSS (el signo de
       admiración seguido de «important»). Se escribe así, en palabras, para que
       un grep del literal sobre este archivo dé cero de verdad.

       Única excepción prevista y todavía NO usada: el error 2 del patrón
       (colores inline en el contenido de una nota, que ganan por especificidad).
       Si aparece, la regla va acotada al contenedor del contenido y anotada
       como deuda. Hoy no hay ni una nota con style="color:…" — se vigila con
       una consulta en cada fase.

   3 · CERO HEX SUELTOS.
       Todos los colores del blog salen de las variables de este bloque. Un
       HEX fuera del :root de acá abajo es un error, no un atajo.

   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── 1 · COLORES DE MARCA ────────────────────────────────────────────────
     Los cinco de la Regla 6 de CLAUDE.md, tal cual. No se inventa ninguno.

     Los prohibidos NO se escriben acá ni para nombrarlos, así un grep sobre
     este archivo los da en cero de verdad. La lista completa, con su HEX y su
     motivo, está en la tabla de la Regla 6 de CLAUDE.md: los dos defaults de
     Divi (azul y teal), la paleta de Bootstrap 4 que arrastra global.css, y
     las tres variables del boilerplate Starterpoint, que no son la marca.     */

  --cui-tinta:    #35352e;  /* texto y títulos. Es el color del logo          */
  --cui-acento:   #000000;  /* links, nav, fondo del footer del sitio         */
  --cui-calido:   #faf6f5;  /* fondo cálido: hero, bloques destacados         */
  --cui-hover:    #d2c8c9;  /* hover                                          */
  --cui-blanco:   #ffffff;  /* fondo                                          */

  /* #f9f6f6 anda dando vueltas por el sitio y es casi el mismo que #faf6f5.
     No se define: se usa --cui-calido y listo.                               */

  /* ─── 2 · NEUTROS DERIVADOS ───────────────────────────────────────────────
     NO son colores de marca nuevos: son --cui-tinta mezclada con blanco, para
     tener bajadas y separadores sin salirse de la paleta. Se escriben en HEX
     y no con color-mix() para no depender del soporte del navegador.

       --cui-texto-suave = 70% tinta + 30% blanco → contraste 4.8:1 sobre
                           blanco. Pasa AA para texto normal (mínimo 4.5:1).
       --cui-linea       = 12% tinta + 88% blanco. Solo bordes y separadores,
                           nunca texto.

     Para referencia, los de la paleta sobre blanco:
       --cui-tinta   11.7:1  → AAA
       --cui-acento  21.0:1  → AAA                                             */

  --cui-texto-suave: #72726d;  /* bajadas, metadatos, fechas                  */
  --cui-linea:       #e7e7e6;  /* bordes de cards, separadores                */

  /* ─── 2b · EL COLOR DEL CTA · P5, PROVISORIO ──────────────────────────────
     P5 de CLAUDE.md sigue ABIERTA: el color del botón de WhatsApp y del CTA lo
     decide Sebas mirando el hub. Hasta entonces vale el acento del sitio.

     Está en UN SOLO token a propósito. Cambiarlo es cambiar esta línea, no
     buscar por la hoja: por eso ninguna regla de más abajo escribe
     var(--cui-acento) para un botón, siempre var(--cui-cta).                  */

  --cui-cta:         var(--cui-acento);
  --cui-cta-texto:   var(--cui-blanco);

  /* ─── 3 · TIPOGRAFÍA ──────────────────────────────────────────────────────
     Raleway, que el tema YA carga con todos sus pesos (100-900). No se agrega
     ninguna familia: eso lo decide Sebas (Regla 7).

     Roboto NO se usa, aunque esté cargada: la trae Slider Revolution.

     El cuerpo del sitio es 16px con line-height 1.4em. El blog sube el
     line-height del texto largo a 1.7 porque una nota se lee de corrido y 1.4
     aprieta demasiado; los títulos bajan a 1.15.                              */

  --cui-fuente:      "Raleway", "Helvetica Neue", Arial, sans-serif;

  --cui-texto-base:  16px;   /* igual que el sitio                            */
  --cui-lh-texto:    1.7;    /* prosa larga                                   */
  --cui-lh-titulo:   1.15;   /* títulos                                       */

  /* Escala tipográfica. Los tamaños grandes con clamp() para que no haga falta
     una media query por cada título.                                          */

  --cui-t-hero:      clamp(2rem, 5vw, 3.2rem);    /* título del hub y del término */
  --cui-t-titulo:    clamp(1.7rem, 3.6vw, 2.5rem); /* <h1> de la nota          */
  --cui-t-seccion:   1.15rem;  /* «Lo último», «Todas las notas»              */
  --cui-t-card:      1.05rem;  /* título de card                              */
  --cui-t-cuerpo:    1rem;
  --cui-t-bajada:    .95rem;
  --cui-t-meta:      .82rem;   /* fecha, tiempo de lectura, kickers           */

  --cui-peso-normal: 400;
  --cui-peso-medio:  600;
  --cui-peso-fuerte: 800;

  --cui-track-kicker: .08em;   /* letter-spacing de kickers y chips           */

  /* ─── 4 · RITMO Y FORMA ───────────────────────────────────────────────────
     --cui-medida es el ancho de la columna de lectura de la nota: 68ch son
     unos 75 caracteres por línea, que es el rango cómodo. Es el token con más
     impacto visual de todos.

     No se porta la franja lateral de 30px del patrón: es identidad de Silvana
     Dato, no de Cuidarte.                                                     */

  --cui-medida:      68ch;
  --cui-ancho:       1180px;  /* ancho máximo del contenedor propio del blog  */
  --cui-gutter:      24px;    /* aire lateral del contenedor                  */
  --cui-radio:       2px;     /* radio de bordes. 0 = todo recto              */
  --cui-transicion:  .3s ease;

  /* Espaciado. Un solo juego para todo el blog.                              */

  --cui-esp-xs:      8px;
  --cui-esp-sm:      16px;
  --cui-esp-md:      24px;
  --cui-esp-lg:      40px;
  --cui-esp-xl:      64px;

  /* ─── 5 · GRILLAS Y PROPORCIONES ──────────────────────────────────────────
     No se registra ningún tamaño de imagen (decisión 14): las proporciones de
     las cards salen de aspect-ratio + object-fit: cover.

     --cui-ratio es el de la cabecera de la nota y lo pisa el PHP nota por nota:
     9/16 si la URL del embed tiene /shorts/, si no lo que declare el embed, y
     16/9 como última opción (Regla 13). Acá está el valor por defecto.

     El alto de la cabecera se limita por el ANCHO, nunca por el alto:
       max-width: min(100%, calc(var(--cui-alto-embed) * var(--cui-ratio)))    */

  --cui-ratio:       16 / 9;  /* por defecto. Lo pisa el PHP en cada nota     */
  --cui-ratio-card:  3 / 2;   /* imagen de las cards                          */
  --cui-alto-embed:  70vh;    /* tope de alto de la cabecera de la nota       */

  --cui-cols-hub:    3;       /* grilla del hub y de «otras notas»            */
  --cui-cols-term:   2;       /* grilla de categoría y etiqueta               */

  /* ─── 6 · LA NOTA (fase 4) ────────────────────────────────────────────────
     --cui-sidebar es el ancho de la columna lateral; --cui-sticky-top, a qué
     distancia del borde se pega el sidebar al hacer scroll (por debajo del
     header fijo de Divi). --cui-t-contenido es el cuerpo de la nota: un poco
     más grande que el del sitio, porque se lee de corrido.                   */

  --cui-sidebar:     320px;
  --cui-sticky-top:  110px;
  --cui-t-contenido: 1.06rem;
  --cui-t-h2:        1.5rem;
  --cui-t-h3:        1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 3 · EL HUB
   ═══════════════════════════════════════════════════════════════════════════

   Todo lo de acá abajo cuelga de .cui-blog o de una clase .cui-*. Ni un
   selector de elemento suelto, ni una regla forzada, ni un HEX. Los tres greps
   de la Regla 2 tienen que dar cero sobre este archivo.

   Por qué importa acá y no es paranoia: el CSS del Customizer de Divi sale en
   wp_head 103 y el CSS adicional de WordPress en la 101, o sea DESPUÉS de toda
   la cola de estilos. Sus 8 reglas usan selector de elemento suelto. Con una
   clase de por medio ganamos por especificidad sin pelear por el orden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CONTENEDOR ─────────────────────────────────────────────────────────────
   Contenedor propio, NO el .container de Divi (Regla 9). box-sizing acotado a
   los descendientes del blog: global.css trae Bootstrap 4 y no queremos
   tocarle nada a las 93 páginas.                                             */

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

.cui-blog {
  font-family: var(--cui-fuente);
  font-size: var(--cui-texto-base);
  color: var(--cui-tinta);
  background: var(--cui-blanco);
}

.cui-blog__interior {
  width: 100%;
  max-width: var(--cui-ancho);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cui-gutter);
  padding-right: var(--cui-gutter);
}

/* ─── HERO ───────────────────────────────────────────────────────────────────
   Banda cálida a todo el ancho, con el texto adentro del contenedor.
   Sin bajada, el título es lo último: el padding de abajo cierra el bloque y
   no queda un hueco (§4.6).                                                  */

.cui-blog .cui-hero {
  background: var(--cui-calido);
  padding-block: var(--cui-esp-xl);
  margin-bottom: var(--cui-esp-xl);
}

.cui-blog .cui-hero__interior {
  width: 100%;
  max-width: var(--cui-ancho);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cui-gutter);
  padding-right: var(--cui-gutter);
}

.cui-blog .cui-hero__kicker {
  margin: 0 0 var(--cui-esp-xs);
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-medio);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-texto-suave);
}

.cui-blog .cui-hero__titulo {
  margin: 0;
  font-size: var(--cui-t-hero);
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  color: var(--cui-tinta);
}

.cui-blog .cui-hero__bajada {
  margin: var(--cui-esp-md) 0 0;
  max-width: var(--cui-medida);
  font-size: var(--cui-t-bajada);
  line-height: var(--cui-lh-texto);
  color: var(--cui-texto-suave);
}

/* ─── SECCIONES ──────────────────────────────────────────────────────────────
   El título a la izquierda y el dato a la derecha, con una línea que los cruza.
   Si no hay dato, el título ocupa lo suyo y la línea llega hasta el final.    */

.cui-blog .cui-seccion {
  margin-bottom: var(--cui-esp-xl);
}

.cui-blog .cui-seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cui-esp-xs) var(--cui-esp-md);
  margin-bottom: var(--cui-esp-lg);
  padding-bottom: var(--cui-esp-sm);
  border-bottom: 1px solid var(--cui-linea);
}

.cui-blog .cui-seccion__titulo {
  margin: 0;
  font-size: var(--cui-t-seccion);
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  color: var(--cui-tinta);
}

.cui-blog .cui-seccion__dato {
  margin: 0;
  font-size: var(--cui-t-meta);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-texto-suave);
}

/* ─── GRILLAS ────────────────────────────────────────────────────────────────
   Una sola grilla de 3 columnas para las dos bandas. Las destacadas son 1 card
   doble (2 columnas) + 1 simple (1 columna) = una fila EXACTA de 3.

   Sin la fila exacta queda un agujero visible, que es el error que el patrón
   marca como el que más arruina el hub (PATRON-BLOG §2).                     */

.cui-blog .cui-grilla {
  display: grid;
  grid-template-columns: repeat(var(--cui-cols-hub), minmax(0, 1fr));
  gap: var(--cui-esp-lg) var(--cui-esp-md);
}

.cui-blog .cui-card--doble {
  grid-column: span 2;
}

/* Con UNA sola destacada, la card doble se estira a las 3 columnas en vez de
   dejar un tercio vacío al lado. Es el caso de hoy: hay 1 nota (§4.6).       */

.cui-blog .cui-grilla--destacadas-1 .cui-card--doble {
  grid-column: 1 / -1;
}

/* ─── CARD ───────────────────────────────────────────────────────────────────
   Sin sombra y sin relleno: solo un borde fino, como en las referencias del
   patrón. La card entera es clickeable estirando el enlace del título.       */

.cui-blog .cui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--cui-linea);
  border-radius: var(--cui-radio);
  background: var(--cui-blanco);
  transition: border-color var(--cui-transicion);
}

.cui-blog .cui-card:hover {
  border-color: var(--cui-hover);
}

.cui-blog .cui-card__figura {
  margin: 0;
  overflow: hidden;
  background: var(--cui-calido);
}

.cui-blog .cui-card__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--cui-ratio-card);
  object-fit: cover;
}

.cui-blog .cui-card__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--cui-esp-md);
}

.cui-blog .cui-card__kicker {
  margin: 0 0 var(--cui-esp-xs);
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-medio);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-texto-suave);
}

.cui-blog .cui-card__titulo {
  margin: 0;
  font-size: var(--cui-t-card);
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  /* Un título largo tiene que cortar, no empujar la grilla ni desbordar.
     La prueba pide una nota con título muy largo justamente por esto.

     ⚠️ SOLO overflow-wrap. Ni word-break ni hyphens: los dos partían palabras
     normales en el medio y el hub salía con «li-pofilling» y «so-bre la grasa».
     Visto en pantalla, no deducido. overflow-wrap: break-word corta ÚNICAMENTE
     cuando una palabra no entra entera de ninguna manera, que es el caso que
     había que cubrir.                                                        */
  overflow-wrap: break-word;
}

.cui-blog .cui-card__enlace {
  color: var(--cui-tinta);
  text-decoration: none;
  transition: color var(--cui-transicion);
}

/* El enlace del título se estira sobre toda la card: el área clickeable es la
   card entera, pero el lector de pantalla anuncia UN enlace con el título como
   texto, en vez de leer todo el contenido dos veces.                         */

.cui-blog .cui-card__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cui-blog .cui-card:hover .cui-card__enlace,
.cui-blog .cui-card__enlace:focus-visible {
  color: var(--cui-acento);
}

.cui-blog .cui-card__enlace:focus-visible {
  outline: 2px solid var(--cui-acento);
  outline-offset: 3px;
}

.cui-blog .cui-card__bajada {
  margin: var(--cui-esp-sm) 0 0;
  font-size: var(--cui-t-bajada);
  line-height: var(--cui-lh-texto);
  color: var(--cui-texto-suave);
}

/* El meta se pega abajo: con o sin bajada, todas las cards de una fila
   alinean la fecha. Es lo que hace que una card sin bajada no se vea rota.   */

.cui-blog .cui-card__meta {
  margin: var(--cui-esp-md) 0 0;
  padding-top: var(--cui-esp-sm);
  font-size: var(--cui-t-meta);
  color: var(--cui-texto-suave);
  margin-top: auto;
}

/* ─── CARD DOBLE ─────────────────────────────────────────────────────────────
   En pantalla ancha, figura al lado del texto. En angosta se apila sola, sin
   media query: el cambio lo hace la misma media query de la grilla.          */

@media (min-width: 861px) {

  .cui-blog .cui-card--doble {
    flex-direction: row;
    align-items: stretch;
  }

  .cui-blog .cui-card--doble .cui-card__figura {
    flex: 0 0 46%;
    max-width: 46%;
  }

  .cui-blog .cui-card--doble .cui-card__img {
    height: 100%;
    aspect-ratio: auto;
  }

  .cui-blog .cui-card--doble .cui-card__cuerpo {
    justify-content: center;
    padding: var(--cui-esp-lg);
  }

  /* La destacada grande sube de tamaño, pero MENOS de lo que parecía a ojo:
     con --cui-t-titulo (hasta 2.5rem) el título entraba a 2 o 3 palabras por
     línea en una columna de menos de la mitad del ancho, y se leía peor que la
     card chica. Este clamp es propio de la card doble.                       */
  .cui-blog .cui-card--doble .cui-card__titulo {
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  }

  /* Sin imagen la card doble no tiene columna que compensar: el texto se
     queda arriba en vez de flotar en el medio de un bloque alto y vacío.     */

  .cui-blog .cui-card--doble.cui-card--sin-imagen .cui-card__cuerpo {
    justify-content: flex-start;
  }

  /* En la card doble el meta NO se pega abajo.
     El margin-top: auto de la card simple sirve para alinear la fecha de
     varias cards en una fila; acá la card está sola y el auto peleaba con el
     centrado vertical: el texto quedaba en el medio y la fecha abajo de todo,
     con un agujero de 200px en el medio. Visto en pantalla.                  */

  .cui-blog .cui-card--doble .cui-card__meta {
    margin-top: var(--cui-esp-md);
  }
}

/* ─── CHIPS ──────────────────────────────────────────────────────────────────
   Píldoras con el nombre y el conteo. Con menos de 2 categorías el bloque
   entero no se pinta desde PHP, así que acá no hace falta ningún caso raro.  */

.cui-blog .cui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cui-esp-xs) var(--cui-esp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-chips__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cui-esp-xs);
  padding: 8px 16px;
  border: 1px solid var(--cui-linea);
  border-radius: 999px;
  font-size: var(--cui-t-meta);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cui-tinta);
  background: var(--cui-blanco);
  transition: border-color var(--cui-transicion), background-color var(--cui-transicion), color var(--cui-transicion);
}

.cui-blog .cui-chip:hover {
  border-color: var(--cui-hover);
  background: var(--cui-calido);
  color: var(--cui-tinta);
}

.cui-blog .cui-chip:focus-visible {
  outline: 2px solid var(--cui-acento);
  outline-offset: 2px;
}

.cui-blog .cui-chip--activo {
  border-color: var(--cui-cta);
  background: var(--cui-cta);
  color: var(--cui-cta-texto);
}

.cui-blog .cui-chip__cuenta {
  font-weight: var(--cui-peso-fuerte);
  opacity: .6;
}

/* ─── PAGINACIÓN ─────────────────────────────────────────────────────────────
   Con una sola página no se pinta desde PHP: no hay «1» solitario.           */

.cui-blog .cui-paginacion {
  margin-top: var(--cui-esp-xl);
}

.cui-blog .cui-paginacion__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cui-esp-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-paginacion__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cui-linea);
  border-radius: var(--cui-radio);
  font-size: var(--cui-t-bajada);
  text-decoration: none;
  color: var(--cui-tinta);
  transition: border-color var(--cui-transicion), background-color var(--cui-transicion), color var(--cui-transicion);
}

.cui-blog .cui-paginacion .page-numbers:hover {
  border-color: var(--cui-hover);
  background: var(--cui-calido);
}

.cui-blog .cui-paginacion .page-numbers:focus-visible {
  outline: 2px solid var(--cui-acento);
  outline-offset: 2px;
}

.cui-blog .cui-paginacion .current {
  border-color: var(--cui-cta);
  background: var(--cui-cta);
  color: var(--cui-cta-texto);
}

.cui-blog .cui-paginacion .dots {
  border-color: transparent;
}

/* ─── ESTADO VACÍO ───────────────────────────────────────────────────────────  */

.cui-blog .cui-vacio {
  margin: 0;
  padding: var(--cui-esp-xl) 0;
  font-size: var(--cui-t-bajada);
  line-height: var(--cui-lh-texto);
  color: var(--cui-texto-suave);
}

/* El vacío del HUB (fase 6, visto con 0 notas publicadas): Divi apaga el
   padding inferior del último <p> del área y el texto quedaba pegado al
   footer. Se le da aire explícito abajo, con un selector más específico.   */

.cui-blog .cui-blog__interior > .cui-vacio {
  padding-bottom: var(--cui-esp-xl);
  margin-bottom: var(--cui-esp-xl);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────
   Dos cortes y nada más. El de 860px es el mismo que usa la card doble, para
   que la grilla y la card cambien juntas y no haya un tramo intermedio donde
   una card «doble» de 2 columnas quede más angosta que una simple.           */

@media (max-width: 860px) {

  .cui-blog .cui-grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cui-blog .cui-hero {
    padding-block: var(--cui-esp-lg);
    margin-bottom: var(--cui-esp-lg);
  }

  .cui-blog .cui-seccion {
    margin-bottom: var(--cui-esp-lg);
  }
}

@media (max-width: 560px) {

  .cui-blog .cui-grilla {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A una columna, «doble» y «simple» son lo mismo: si la doble siguiera
     pidiendo 2 columnas, se desbordaría de la grilla y aparecería el scroll
     horizontal. Es el fallo que la prueba de 360px busca.                    */

  .cui-blog .cui-card--doble {
    grid-column: 1 / -1;
  }

  .cui-blog .cui-blog__interior,
  .cui-blog .cui-hero__interior {
    padding-left: var(--cui-esp-sm);
    padding-right: var(--cui-esp-sm);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 4 · LA NOTA
   ═══════════════════════════════════════════════════════════════════════════

   Mismas tres reglas. Todo cuelga de .cui-blog o de una clase .cui-*. Los
   selectores del contenido de la nota (.cui-nota__contenido p, h2, …) cuelgan
   de la clase del contenedor: es la forma de vestir HTML que escribe el
   editor y que no trae clases propias, y sigue ganándole por especificidad
   al CSS del Customizer de Divi, que usa p, h2 y a a secas.

   Divi trae reglas de elemento con padding (p { padding-bottom: 1em },
   h1–h6 { padding-bottom: 10px }): acá se ponen a cero adentro del blog para
   que el ritmo lo manden los márgenes de esta hoja y no una suma de los dos.
   ═══════════════════════════════════════════════════════════════════════════ */

.cui-blog .cui-nota__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cui-sidebar);
  gap: var(--cui-esp-xl);
  align-items: start;
  margin-bottom: var(--cui-esp-xl);
}

/* Sin sidebar —ningún bloque tenía contenido— la columna del artículo se
   queda sola y se centra a un ancho cómodo. Sin hueco a la derecha.         */

.cui-blog .cui-nota__layout--sin-sidebar {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.cui-blog .cui-nota {
  min-width: 0;
}

/* ─── MIGA ───────────────────────────────────────────────────────────────────
   Solo markup: no se emite BreadcrumbList (decisiones 5 y 6).               */

.cui-blog .cui-miga {
  margin: var(--cui-esp-md) 0 var(--cui-esp-lg);
  font-size: var(--cui-t-meta);
  color: var(--cui-texto-suave);
}

.cui-blog .cui-miga__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cui-esp-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-miga__item {
  display: inline-flex;
  align-items: center;
  gap: var(--cui-esp-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.cui-blog .cui-miga__item + .cui-miga__item::before {
  content: "›";
  color: var(--cui-hover);
}

.cui-blog .cui-miga__enlace {
  color: var(--cui-texto-suave);
  text-decoration: none;
  transition: color var(--cui-transicion);
}

.cui-blog .cui-miga__enlace:hover,
.cui-blog .cui-miga__enlace:focus-visible {
  color: var(--cui-acento);
}

.cui-blog .cui-miga__actual {
  color: var(--cui-tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}

/* ─── CABECERA DEL ARTÍCULO: kicker, título, firma ─────────────────────────── */

.cui-blog .cui-nota__cabecera {
  margin-bottom: var(--cui-esp-lg);
}

.cui-blog .cui-nota__kicker {
  margin: 0 0 var(--cui-esp-sm);
  padding: 0;
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-medio);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
}

.cui-blog .cui-nota__kicker-enlace {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--cui-linea);
  border-radius: 999px;
  color: var(--cui-tinta);
  text-decoration: none;
  transition: border-color var(--cui-transicion), background-color var(--cui-transicion);
}

.cui-blog .cui-nota__kicker-enlace:hover,
.cui-blog .cui-nota__kicker-enlace:focus-visible {
  border-color: var(--cui-hover);
  background: var(--cui-calido);
}

.cui-blog .cui-nota__titulo {
  margin: 0 0 var(--cui-esp-md);
  padding: 0;
  font-size: var(--cui-t-titulo);
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  color: var(--cui-tinta);
  overflow-wrap: break-word;
}

/* La firma a la izquierda y la fecha con el tiempo de lectura a la derecha,
   con una línea arriba y abajo. Sin firma (firma_mostrar = false) queda la
   barra de la fecha sola, alineada a la izquierda.                          */

.cui-blog .cui-nota__firma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cui-esp-sm) var(--cui-esp-md);
  padding: var(--cui-esp-sm) 0;
  border-top: 1px solid var(--cui-linea);
  border-bottom: 1px solid var(--cui-linea);
}

.cui-blog .cui-firma {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* El círculo del isotipo. Fondo cálido para que un SVG con transparencia no
   quede flotando. Sin archivo (P1) el círculo no existe: solo el nombre.    */

.cui-blog .cui-firma__figura {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cui-calido);
  border: 1px solid var(--cui-linea);
}

.cui-blog .cui-firma__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.cui-blog .cui-firma__nombre {
  margin: 0;
  padding: 0;
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-fuerte);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-tinta);
}

.cui-blog .cui-nota__meta {
  margin: 0;
  padding: 0;
  font-size: var(--cui-t-meta);
  color: var(--cui-texto-suave);
}

/* ─── CABECERA: EL EMBED O LA IMAGEN ─────────────────────────────────────────
   --cui-ratio lo escribe el PHP en el propio elemento (9/16 para un Short,
   Regla 13). Se limita el ANCHO en función del alto deseado: el alto queda
   topado en --cui-alto-embed sin deformar ni recortar. Un vertical a ancho
   completo mediría más de 1300px y empujaría el artículo fuera de pantalla.  */

.cui-blog .cui-cabecera {
  margin: 0 0 var(--cui-esp-lg);
}

.cui-blog .cui-cabecera__marco {
  width: 100%;
  margin: 0 auto;
  max-width: min(100%, calc(var(--cui-alto-embed) * var(--cui-ratio)));
  background: var(--cui-tinta);
}

/* El autoembed deja el iframe adentro de un <p>: sin margen ni padding.      */

.cui-blog .cui-cabecera__marco p {
  margin: 0;
  padding: 0;
}

.cui-blog .cui-cabecera__marco .fluid-width-video-wrapper {
  margin: 0;
}

.cui-blog .cui-cabecera__marco iframe,
.cui-blog .cui-cabecera__marco video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--cui-ratio);
  border: 0;
}

.cui-blog .cui-cabecera__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--cui-ratio);
  object-fit: cover;
  background: var(--cui-calido);
}

.cui-blog .cui-cabecera--imagen {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

/* ─── EL CONTENIDO ───────────────────────────────────────────────────────────
   El HTML lo escribe el editor y no trae clases: se viste desde el
   contenedor. Los márgenes mandan; los paddings de Divi se apagan.
   Los elementos que crecen (imágenes, iframes, tablas) se topan al ancho de
   la columna para que nada desborde en móvil.                               */

.cui-blog .cui-nota__contenido {
  font-size: var(--cui-t-contenido);
  line-height: var(--cui-lh-texto);
  color: var(--cui-tinta);
  overflow-wrap: break-word;
}

.cui-blog .cui-nota__contenido > * {
  max-width: var(--cui-medida);
}

.cui-blog .cui-nota__contenido p {
  margin: 0 0 1.35em;
  padding: 0;
}

.cui-blog .cui-nota__contenido h2,
.cui-blog .cui-nota__contenido h3,
.cui-blog .cui-nota__contenido h4,
.cui-blog .cui-nota__contenido h5,
.cui-blog .cui-nota__contenido h6 {
  margin: 1.8em 0 .6em;
  padding: 0;
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  color: var(--cui-tinta);
}

/* Un <h1> que NO repite el título es un subtítulo real y se deja: se viste
   como un h2 para que no compita con el título de la nota.                  */

.cui-blog .cui-nota__contenido h1,
.cui-blog .cui-nota__contenido h2 {
  font-size: var(--cui-t-h2);
}

.cui-blog .cui-nota__contenido h1 {
  margin: 1.8em 0 .6em;
  padding: 0;
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  color: var(--cui-tinta);
}

.cui-blog .cui-nota__contenido h3 {
  font-size: var(--cui-t-h3);
}

.cui-blog .cui-nota__contenido h4,
.cui-blog .cui-nota__contenido h5,
.cui-blog .cui-nota__contenido h6 {
  font-size: var(--cui-t-cuerpo);
}

.cui-blog .cui-nota__contenido ul,
.cui-blog .cui-nota__contenido ol {
  margin: 0 0 1.35em;
  padding: 0 0 0 1.3em;
  line-height: var(--cui-lh-texto);
}

/* Divi apaga las viñetas de las listas del sitio (list-style: none en
   #main-content). Visto en pantalla: la lista de la nota salía sin bullets.  */

.cui-blog .cui-nota__contenido ul {
  list-style: disc;
}

.cui-blog .cui-nota__contenido ol {
  list-style: decimal;
}

.cui-blog .cui-nota__contenido li {
  margin: 0 0 .5em;
  padding: 0;
}

.cui-blog .cui-nota__contenido li::marker {
  color: var(--cui-texto-suave);
}

.cui-blog .cui-nota__contenido a {
  color: var(--cui-acento);
  text-decoration: underline;
  text-decoration-color: var(--cui-hover);
  text-underline-offset: .15em;
  transition: text-decoration-color var(--cui-transicion);
}

.cui-blog .cui-nota__contenido a:hover,
.cui-blog .cui-nota__contenido a:focus-visible {
  text-decoration-color: var(--cui-acento);
}

.cui-blog .cui-nota__contenido strong,
.cui-blog .cui-nota__contenido b {
  font-weight: var(--cui-peso-medio);
  color: var(--cui-tinta);
}

.cui-blog .cui-nota__contenido blockquote {
  margin: 1.6em 0;
  padding: var(--cui-esp-sm) var(--cui-esp-md);
  border: 0;
  border-left: 3px solid var(--cui-acento);
  background: var(--cui-calido);
  font-size: var(--cui-t-contenido);
  font-style: normal;
  color: var(--cui-tinta);
}

.cui-blog .cui-nota__contenido blockquote p:last-child {
  margin-bottom: 0;
}

.cui-blog .cui-nota__contenido img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.8em 0;
}

.cui-blog .cui-nota__contenido figure {
  margin: 1.8em 0;
  max-width: 100%;
}

.cui-blog .cui-nota__contenido figure img {
  margin: 0;
}

.cui-blog .cui-nota__contenido figcaption {
  margin-top: var(--cui-esp-xs);
  font-size: var(--cui-t-meta);
  color: var(--cui-texto-suave);
}

/* Un video en el medio del artículo (no el de apertura): a todo el ancho de
   la columna y con la proporción por defecto. Los Shorts de apertura no
   pasan por acá: van a la cabecera.                                         */

.cui-blog .cui-nota__contenido iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--cui-ratio);
  margin: 1.8em 0;
  border: 0;
}

/* Divi aplica FitVids al contenido: envuelve cada <iframe> en un
   div.fluid-width-video-wrapper con padding-top proporcional y pone al iframe
   en position: absolute con estilos inline. Visto en pantalla: el margen del
   iframe lo corría 30px hacia abajo DENTRO del envoltorio y pisaba el párrafo
   siguiente. El margen va en el envoltorio y el iframe queda sin margen.     */

.cui-blog .cui-nota__contenido .fluid-width-video-wrapper {
  margin: 1.8em 0;
  max-width: 100%;
}

.cui-blog .cui-nota__contenido .fluid-width-video-wrapper iframe {
  margin: 0;
}

.cui-blog .cui-nota__contenido hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--cui-linea);
}

.cui-blog .cui-nota__contenido table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.35em;
  border-collapse: collapse;
  font-size: var(--cui-t-bajada);
}

.cui-blog .cui-nota__contenido th,
.cui-blog .cui-nota__contenido td {
  padding: var(--cui-esp-xs) var(--cui-esp-sm);
  border-bottom: 1px solid var(--cui-linea);
  text-align: left;
  vertical-align: top;
}

/* ─── BOTONES ────────────────────────────────────────────────────────────────
   UN solo botón, con el color del CTA (P5, token --cui-cta). El de WhatsApp
   es el mismo botón con el ícono de Font Awesome 5 que el tema ya carga.    */

.cui-blog .cui-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cui-esp-xs);
  padding: 13px 24px;
  border: 1px solid var(--cui-cta);
  border-radius: var(--cui-radio);
  background: var(--cui-cta);
  color: var(--cui-cta-texto);
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-medio);
  letter-spacing: var(--cui-track-kicker);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cui-transicion), border-color var(--cui-transicion), color var(--cui-transicion);
}

.cui-blog .cui-boton:hover,
.cui-blog .cui-boton:focus-visible {
  background: var(--cui-blanco);
  color: var(--cui-cta);
}

.cui-blog .cui-boton:focus-visible {
  outline: 2px solid var(--cui-acento);
  outline-offset: 3px;
}

.cui-blog .cui-boton--grande {
  padding: 16px 32px;
}

.cui-blog .cui-boton .fab,
.cui-blog .cui-boton .fas {
  font-size: 1.15em;
}

/* ─── CTA DEL SERVICIO (al cierre del artículo) ─────────────────────────────
   Como la card doble: figura al lado del texto en pantalla ancha, apilada en
   angosta. Sin imagen —lo normal, error 16— el texto ocupa todo.            */

.cui-blog .cui-cta {
  display: flex;
  flex-direction: column;
  margin: var(--cui-esp-xl) 0 var(--cui-esp-lg);
  border: 1px solid var(--cui-linea);
  border-radius: var(--cui-radio);
  background: var(--cui-calido);
  overflow: hidden;
}

.cui-blog .cui-cta__figura {
  margin: 0;
  overflow: hidden;
}

.cui-blog .cui-cta__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--cui-ratio-card);
  object-fit: cover;
}

.cui-blog .cui-cta__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--cui-esp-lg);
}

.cui-blog .cui-cta__kicker,
.cui-blog .cui-servicio__kicker {
  margin: 0 0 var(--cui-esp-xs);
  padding: 0;
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-medio);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-texto-suave);
}

.cui-blog .cui-cta__titulo {
  margin: 0 0 var(--cui-esp-sm);
  padding: 0;
  font-size: var(--cui-t-h2);
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  color: var(--cui-tinta);
  overflow-wrap: break-word;
}

.cui-blog .cui-cta__bajada {
  margin: 0 0 var(--cui-esp-md);
  padding: 0;
  font-size: var(--cui-t-bajada);
  line-height: var(--cui-lh-texto);
  color: var(--cui-texto-suave);
}

.cui-blog .cui-cta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cui-esp-sm);
  margin-top: auto;
}

@media (min-width: 861px) {

  .cui-blog .cui-cta {
    flex-direction: row;
    align-items: stretch;
  }

  .cui-blog .cui-cta__figura {
    flex: 0 0 38%;
    max-width: 38%;
  }

  .cui-blog .cui-cta__img {
    aspect-ratio: auto;
  }
}

/* ─── ETIQUETAS ──────────────────────────────────────────────────────────────
   Píldoras. Las comparten el pie del artículo y el sidebar.                 */

.cui-blog .cui-nota__etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cui-esp-sm);
  margin: var(--cui-esp-lg) 0;
  padding-top: var(--cui-esp-md);
  border-top: 1px solid var(--cui-linea);
}

.cui-blog .cui-nota__etiquetas-rotulo {
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-medio);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-texto-suave);
}

.cui-blog .cui-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cui-esp-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-etiquetas__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-etiqueta {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--cui-linea);
  border-radius: 999px;
  font-size: var(--cui-t-meta);
  color: var(--cui-texto-suave);
  text-decoration: none;
  transition: border-color var(--cui-transicion), background-color var(--cui-transicion), color var(--cui-transicion);
}

.cui-blog .cui-etiqueta:hover,
.cui-blog .cui-etiqueta:focus-visible {
  border-color: var(--cui-hover);
  background: var(--cui-calido);
  color: var(--cui-tinta);
}

/* ─── ANTERIOR / SIGUIENTE ───────────────────────────────────────────────────
   Dos lados siempre, aunque uno esté vacío: así «siguiente» se queda a la
   derecha cuando no hay «anterior».                                         */

.cui-blog .cui-vecinas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cui-esp-md);
  margin: var(--cui-esp-lg) 0;
  padding-top: var(--cui-esp-md);
  border-top: 1px solid var(--cui-linea);
}

.cui-blog .cui-vecinas__lado {
  min-width: 0;
}

.cui-blog .cui-vecinas__lado--siguiente {
  text-align: right;
}

.cui-blog .cui-vecinas__enlace {
  display: block;
  color: var(--cui-tinta);
  text-decoration: none;
}

.cui-blog .cui-vecinas__rotulo {
  display: block;
  margin-bottom: var(--cui-esp-xs);
  font-size: var(--cui-t-meta);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-texto-suave);
}

.cui-blog .cui-vecinas__titulo {
  display: block;
  font-size: var(--cui-t-card);
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  overflow-wrap: break-word;
  transition: color var(--cui-transicion);
}

.cui-blog .cui-vecinas__enlace:hover .cui-vecinas__titulo,
.cui-blog .cui-vecinas__enlace:focus-visible .cui-vecinas__titulo {
  color: var(--cui-acento);
}

/* ─── SIDEBAR ────────────────────────────────────────────────────────────────
   Propio, no el de Divi. Pegado al hacer scroll por debajo del header fijo.
   Cada bloque es una caja con borde; el de servicio lleva fondo cálido.     */

.cui-blog .cui-sidebar {
  position: sticky;
  top: var(--cui-sticky-top);
  min-width: 0;
}

.cui-blog .cui-sidebar__bloque {
  margin: 0 0 var(--cui-esp-md);
  padding: var(--cui-esp-md);
  border: 1px solid var(--cui-linea);
  border-radius: var(--cui-radio);
  background: var(--cui-blanco);
}

.cui-blog .cui-sidebar__titulo {
  margin: 0 0 var(--cui-esp-sm);
  padding: 0 0 var(--cui-esp-xs);
  border-bottom: 1px solid var(--cui-linea);
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-fuerte);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-tinta);
}

.cui-blog .cui-sidebar__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-sidebar__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cui-blog .cui-sidebar__item + .cui-sidebar__item {
  border-top: 1px solid var(--cui-linea);
}

.cui-blog .cui-sidebar__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cui-esp-xs);
  padding: 9px 0;
  font-size: var(--cui-t-bajada);
  color: var(--cui-tinta);
  text-decoration: none;
  transition: color var(--cui-transicion);
}

.cui-blog .cui-sidebar__enlace:hover,
.cui-blog .cui-sidebar__enlace:focus-visible {
  color: var(--cui-acento);
}

.cui-blog .cui-sidebar__enlace--activo .cui-sidebar__nombre {
  font-weight: var(--cui-peso-fuerte);
}

.cui-blog .cui-sidebar__cuenta {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--cui-calido);
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-fuerte);
  color: var(--cui-tinta);
}

.cui-blog .cui-sidebar__texto {
  margin: 0 0 var(--cui-esp-sm);
  padding: 0;
  font-size: var(--cui-t-bajada);
  line-height: var(--cui-lh-texto);
  color: var(--cui-texto-suave);
}

/* El bloque de servicio del sidebar: la pieza de conversión.               */

.cui-blog .cui-sidebar__bloque--servicio {
  padding: 0;
  overflow: hidden;
  background: var(--cui-calido);
}

.cui-blog .cui-servicio__figura {
  display: block;
  overflow: hidden;
}

.cui-blog .cui-servicio__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--cui-ratio);
  object-fit: cover;
}

.cui-blog .cui-servicio__cuerpo {
  padding: var(--cui-esp-md);
}

.cui-blog .cui-servicio__titulo {
  margin: 0 0 var(--cui-esp-xs);
  padding: 0;
  font-size: var(--cui-t-card);
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  color: var(--cui-tinta);
  overflow-wrap: break-word;
}

.cui-blog .cui-servicio__bajada {
  margin: 0 0 var(--cui-esp-sm);
  padding: 0;
  font-size: var(--cui-t-bajada);
  line-height: var(--cui-lh-texto);
  color: var(--cui-texto-suave);
}

.cui-blog .cui-sidebar__bloque--consulta {
  background: var(--cui-calido);
}

/* ─── SEGUÍ LEYENDO ──────────────────────────────────────────────────────────
   Reusa la sección y las cards del hub. Con 1 o 2 notas la grilla se achica
   a esa cantidad de columnas en vez de dejar una fila coja.                 */

.cui-blog .cui-seccion__enlace {
  margin: 0;
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-medio);
  letter-spacing: var(--cui-track-kicker);
  text-transform: uppercase;
  color: var(--cui-acento);
  text-decoration: none;
}

.cui-blog .cui-seccion__enlace:hover,
.cui-blog .cui-seccion__enlace:focus-visible {
  text-decoration: underline;
}

.cui-blog .cui-grilla--cols-1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc((var(--cui-ancho) - 2 * var(--cui-esp-md)) / 3);
}

.cui-blog .cui-grilla--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ─── EL CIERRE: HACÉ TU CONSULTA ────────────────────────────────────────────
   Banda cálida con el título, el botón de WhatsApp y el formulario de CF7.
   El formulario trae su propio CSS (contact-form-7-css); acá se visten los
   campos por la clase que CF7 les pone, colgando de .cui-formulario.        */

.cui-blog .cui-cierre {
  margin: var(--cui-esp-xl) 0 var(--cui-esp-xl);
  padding: var(--cui-esp-xl) var(--cui-esp-md);
  border-radius: var(--cui-radio);
  background: var(--cui-calido);
}

.cui-blog .cui-cierre__interior {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.cui-blog .cui-cierre__titulo {
  margin: 0 0 var(--cui-esp-xs);
  padding: 0;
  font-size: var(--cui-t-hero);
  font-weight: var(--cui-peso-fuerte);
  line-height: var(--cui-lh-titulo);
  color: var(--cui-tinta);
}

.cui-blog .cui-cierre__bajada {
  margin: 0 0 var(--cui-esp-md);
  padding: 0;
  font-size: var(--cui-t-bajada);
  line-height: var(--cui-lh-texto);
  color: var(--cui-texto-suave);
}

.cui-blog .cui-cierre__whatsapp {
  margin-bottom: var(--cui-esp-lg);
}

.cui-blog .cui-formulario {
  text-align: left;
}

.cui-blog .cui-formulario__fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cui-esp-sm);
}

.cui-blog .cui-formulario__campo {
  margin: 0 0 var(--cui-esp-sm);
  padding: 0;
}

.cui-blog .cui-formulario__campo--entero {
  grid-column: 1 / -1;
}

.cui-blog .cui-formulario .wpcf7-form-control-wrap {
  display: block;
}

.cui-blog .cui-formulario .wpcf7-form-control {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cui-linea);
  border-radius: var(--cui-radio);
  background: var(--cui-blanco);
  font-family: var(--cui-fuente);
  font-size: var(--cui-t-cuerpo);
  line-height: 1.4;
  color: var(--cui-tinta);
  box-shadow: none;
  transition: border-color var(--cui-transicion);
}

.cui-blog .cui-formulario .wpcf7-form-control::placeholder {
  color: var(--cui-texto-suave);
  opacity: 1;
}

.cui-blog .cui-formulario .wpcf7-form-control:focus {
  border-color: var(--cui-acento);
  outline: 2px solid var(--cui-acento);
  outline-offset: 1px;
}

.cui-blog .cui-formulario .wpcf7-textarea {
  min-height: 140px;
  resize: vertical;
}

/* El botón de enviar es el mismo botón del blog. Se lo pisa por clase de
   CF7 porque el submit no acepta la clase nuestra desde el editor.         */

.cui-blog .cui-formulario .wpcf7-submit {
  display: inline-flex;
  width: auto;
  min-height: 0;
  padding: 16px 32px;
  border: 1px solid var(--cui-cta);
  border-radius: var(--cui-radio);
  background: var(--cui-cta);
  color: var(--cui-cta-texto);
  font-size: var(--cui-t-meta);
  font-weight: var(--cui-peso-medio);
  letter-spacing: var(--cui-track-kicker);
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--cui-transicion), color var(--cui-transicion);
}

.cui-blog .cui-formulario .wpcf7-submit:hover,
.cui-blog .cui-formulario .wpcf7-submit:focus-visible {
  background: var(--cui-blanco);
  color: var(--cui-cta);
}

.cui-blog .cui-formulario__enviar {
  margin: 0;
  padding: 0;
  text-align: center;
}

.cui-blog .cui-formulario .wpcf7-spinner {
  margin: 0 0 0 var(--cui-esp-xs);
}

.cui-blog .cui-formulario .wpcf7-not-valid-tip {
  margin-top: var(--cui-esp-xs);
  font-size: var(--cui-t-meta);
  color: var(--cui-tinta);
}

.cui-blog .cui-formulario .wpcf7-response-output {
  margin: var(--cui-esp-sm) 0 0;
  padding: var(--cui-esp-sm);
  border: 1px solid var(--cui-linea);
  border-radius: var(--cui-radio);
  font-size: var(--cui-t-bajada);
  color: var(--cui-tinta);
}

/* ─── RESPONSIVE DE LA NOTA ──────────────────────────────────────────────────
   A 990px el sidebar pasa abajo del artículo. A 560px, lo de siempre.       */

@media (max-width: 990px) {

  .cui-blog .cui-nota__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cui-esp-lg);
  }

  .cui-blog .cui-sidebar {
    position: static;
  }
}

@media (max-width: 560px) {

  .cui-blog .cui-vecinas {
    grid-template-columns: minmax(0, 1fr);
  }

  .cui-blog .cui-vecinas__lado--siguiente {
    text-align: left;
  }

  .cui-blog .cui-cta__cuerpo {
    padding: var(--cui-esp-md);
  }

  .cui-blog .cui-cierre {
    padding: var(--cui-esp-lg) var(--cui-esp-sm);
  }

  .cui-blog .cui-formulario__fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .cui-blog .cui-miga__actual {
    max-width: 100%;
    white-space: normal;
  }

  .cui-blog .cui-grilla--cols-1,
  .cui-blog .cui-grilla--cols-2 {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 5 · CATEGORÍA Y ETIQUETA
   ═══════════════════════════════════════════════════════════════════════════

   Casi todo se reusa: el hero del hub, la miga y el sidebar de la nota, las
   cards y la paginación. Lo propio de la vista de término es el layout de dos
   columnas + sidebar y la grilla de 2 (--cui-cols-term).

   Los chips van FUERA del layout de dos columnas (PATRON-BLOG §3): adentro
   empujarían solo la columna de las cards y el sidebar arrancaría más arriba.
   ═══════════════════════════════════════════════════════════════════════════ */

.cui-blog--termino .cui-hero {
  margin-bottom: var(--cui-esp-lg);
}

.cui-blog--termino .cui-miga {
  margin-top: 0;
}

.cui-blog .cui-termino__chips {
  margin: 0 0 var(--cui-esp-lg);
}

.cui-blog .cui-termino__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cui-sidebar);
  gap: var(--cui-esp-xl);
  align-items: start;
  margin-bottom: var(--cui-esp-xl);
}

/* Sin sidebar, la grilla de 2 se queda sola y se acota a un ancho cómodo.    */

.cui-blog .cui-termino__layout--sin-sidebar {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.cui-blog .cui-termino__principal {
  min-width: 0;
}

.cui-blog .cui-grilla--termino {
  grid-template-columns: repeat(var(--cui-cols-term), minmax(0, 1fr));
}

/* «Otras notas del blog» va debajo de la grilla propia, en la misma columna.
   Con ≤ 3 notas propias arriba, es lo que evita que la vista se vea muerta.  */

.cui-blog .cui-termino__principal .cui-seccion--otras {
  margin-top: var(--cui-esp-xl);
  margin-bottom: 0;
}

/* «Otras notas» va DE A 3 (decisión 12), no de a 2 como la grilla propia:
   con 3 cards a 2 columnas quedaba una sola en la segunda fila. Visto en
   pantalla. Con 1 o 2, las clases --cols-N de la fase 4 achican la grilla.  */

.cui-blog .cui-termino__principal .cui-seccion--otras .cui-grilla {
  grid-template-columns: repeat(var(--cui-cols-hub), minmax(0, 1fr));
}

.cui-blog .cui-termino__principal .cui-seccion--otras .cui-grilla--cols-1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc((100% - 2 * var(--cui-esp-md)) / 3);
}

.cui-blog .cui-termino__principal .cui-seccion--otras .cui-grilla--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc((100% - var(--cui-esp-md)) * 2 / 3 + var(--cui-esp-md));
}

/* El estado vacío: un párrafo con aire, sin borde ni caja. Los chips y el
   sidebar siguen ahí para que el lector tenga adónde ir.                     */

.cui-blog .cui-termino__principal .cui-vacio {
  padding-top: 0;
}

/* La etiqueta activa en las píldoras del sidebar (vista de etiqueta).        */

.cui-blog .cui-etiqueta--activa {
  border-color: var(--cui-cta);
  background: var(--cui-cta);
  color: var(--cui-cta-texto);
}

@media (max-width: 990px) {

  .cui-blog .cui-termino__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cui-esp-lg);
  }
}

@media (max-width: 860px) {

  /* El hub baja su grilla de 3 a 2 acá; «otras notas» se queda en 3 porque
     por debajo de 990 el sidebar ya está abajo y la columna es entera.      */
  .cui-blog .cui-termino__principal .cui-seccion--otras .cui-grilla {
    grid-template-columns: repeat(var(--cui-cols-hub), minmax(0, 1fr));
  }
}

@media (max-width: 560px) {

  .cui-blog .cui-grilla--termino,
  .cui-blog .cui-termino__principal .cui-seccion--otras .cui-grilla,
  .cui-blog .cui-termino__principal .cui-seccion--otras .cui-grilla--cols-1,
  .cui-blog .cui-termino__principal .cui-seccion--otras .cui-grilla--cols-2 {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
}