/**
 * Artículos reescritos · 2026
 *
 * Se aplica SOLO a los artículos que llevan la clase .post-2026 en su
 * contenedor. Los otros 45 artículos siguen exactamente como estaban: esta
 * hoja no toca ningún selector global.
 *
 * Se carga después de post.css para poder corregir lo que aquella impone:
 *   · p { text-align: justify } por encima de 537 px, que abre ríos blancos
 *   · h1 y h2 demasiado pequeños y sin peso
 *   · main strong { color: #464646 }, que deja las negritas grises
 *   · .note-light con borde azul #2196f3, ajeno a la marca
 *
 * La paleta y la escala son las mismas de la portada y de las páginas de
 * categoría, para que el blog no parezca otro sitio.
 */

.post-2026 {
  --p26-ink: #0b0c0f;
  --p26-muted: #4a5160;
  --p26-line: #e4e7ec;
  --p26-ground: #f7f8fa;
  --p26-gold: #e5bb47;
  --p26-gold-strong: #f2c94c;

  color: var(--p26-ink);
  font-family: "Montserrat", Arial, sans-serif;
}

/* ---------- Medida de lectura ----------
   La columna da unos 690 px, que a este cuerpo son 75 caracteres por línea:
   demasiados. Se limita a 40rem, en torno a 68, que es donde el ojo encuentra
   el salto de línea sin esfuerzo. */

.post-2026 p,
.post-2026 ul,
.post-2026 ol,
.post-2026 h2,
.post-2026 .col-md-8 h3 {
  max-width: 40rem;
}

/* ---------- Texto ---------- */

.post-2026 .col-md-8 p {
  margin: 0 0 1.55rem;
  color: #23262d;
  font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.12rem);
  font-weight: 400;
  line-height: 1.8;
  /* Alineado a la izquierda a propósito: el justificado de post.css deja
     huecos irregulares entre palabras y ríos blancos verticales. */
  text-align: left;
  text-wrap: pretty;
}

.post-2026 strong,
.post-2026 .col-md-8 strong {
  color: var(--p26-ink);
  font-weight: 700;
}

/* ---------- Firma de autor ----------
   Solo la llevan los articulos escritos por una persona concreta. El marcado
   anterior traia el nombre en azul y en cursiva, con la foto en un circulo de
   borde rojo: dos colores ajenos a la marca peleandose en la primera linea.
   Aqui la foto manda y el nombre se retira a un gris de apoyo. */

.post-2026 .col-md-8 .post-firma {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--p26-line);
}

.post-2026 .col-md-8 .post-firma__foto {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  object-fit: cover;
}

.post-2026 .col-md-8 .post-firma__nombre {
  margin: 0;
  color: #6b6f76;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Titulares ----------
   Todo se limita a .col-md-8, la columna de contenido. La barra lateral tiene
   su propio lenguaje (la tarjeta oscura de .post-cta) y sin esta restriccion
   su titular se pintaba en tinta sobre fondo negro, ilegible. */

.post-2026 .col-md-8 h1 {
  max-width: 22ch;
  margin: 0 0 1.4rem;
  color: var(--p26-ink);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.03;
  /* !important porque el marcado trae class="text-center" y esa utilidad de
     MDB ya lo es. El centrado rompe el eje: todo lo demas arranca a la
     izquierda. */
  text-align: left !important;
  text-wrap: balance;
}

.post-2026 .col-md-8 h2 {
  position: relative;
  margin: 3.4rem 0 1.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--p26-line);
  color: var(--p26-ink);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}

/* Filete dorado sobre cada sección: el mismo gesto del kicker en la portada. */
.post-2026 .col-md-8 h2::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 3px;
  background: var(--p26-gold);
  content: "";
}

.post-2026 h3 {
  margin: 2.2rem 0 0.8rem;
  color: var(--p26-ink);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- Herramienta dentro del articulo ----------
   La calculadora de requerimiento energetico. Antes usaba .btn-secondary de
   MDB, que la pintaba de morado: un color que no aparece en ninguna otra parte
   de la marca. Aqui se le da el mismo negro y dorado de los tarros. */

.post-2026 .col-md-8 .post-herramienta {
  max-width: 40rem;
  margin: 2.6rem 0;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--p26-line);
  border-radius: 12px;
  background: var(--p26-ground);
}

.post-2026 .col-md-8 .post-herramienta__texto {
  margin: 0 0 1.1rem;
  color: var(--p26-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.post-2026 .col-md-8 .post-herramienta__boton {
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 8px;
  background: var(--p26-ink);
  color: var(--p26-gold-strong);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.post-2026 .col-md-8 .post-herramienta__boton:hover,
.post-2026 .col-md-8 .post-herramienta__boton:focus-visible {
  background: var(--p26-gold-strong);
  color: var(--p26-ink);
}

/* ---------- Imagenes dentro del texto ----------
   Para las fotos que ilustran un apartado (platos, ejercicios). Se limitan a la
   medida de lectura para que no rompan la columna. */

.post-2026 .col-md-8 .post-figura {
  margin: 0 0 1.55rem;
  max-width: 40rem;
}

.post-2026 .col-md-8 .post-figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ---------- Listas del cuerpo ----------
   MDB deja los <ul> sin vinetas y con el cuerpo por defecto, asi que una lista
   de ingredientes acababa siendo un bloque de lineas sueltas mas pequenas que
   el texto que las rodea. Se les devuelve la vineta -en dorado, marcada con
   ::marker para no tocar el contenido- y el mismo cuerpo que los parrafos.
   Se excluyen el indice y los estudios, que llevan su propio tratamiento. */

.post-2026 .col-md-8 ul:not(.post-indice__lista):not(.post-estudios),
.post-2026 .col-md-8 ol:not(.post-indice__lista) {
  margin: 0 0 1.55rem;
  padding-left: 1.35rem;
  list-style: disc outside;
}

.post-2026 .col-md-8 ol:not(.post-indice__lista) {
  list-style: decimal outside;
}

.post-2026 .col-md-8 ul:not(.post-indice__lista):not(.post-estudios) > li,
.post-2026 .col-md-8 ol:not(.post-indice__lista) > li {
  margin-bottom: 0.5rem;
  color: #23262d;
  font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.12rem);
  line-height: 1.7;
}

.post-2026 .col-md-8 ul:not(.post-indice__lista):not(.post-estudios) > li::marker {
  color: var(--p26-gold);
}

.post-2026 .col-md-8 ol:not(.post-indice__lista) > li::marker {
  color: var(--p26-gold);
  font-weight: 700;
}

/* ---------- Enlaces dentro del texto ----------
   Sin el azul de Bootstrap: tinta con subrayado dorado, que es de la marca y
   se distingue igual de bien sin gritar. */

.post-2026 .col-md-8 p a,
.post-2026 .col-md-8 li a {
  color: var(--p26-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--p26-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.post-2026 .col-md-8 p a:hover,
.post-2026 .col-md-8 li a:hover,
.post-2026 .col-md-8 p a:focus-visible,
.post-2026 .col-md-8 li a:focus-visible {
  color: #6b5410;
  text-decoration-color: #6b5410;
}

/* ---------- Índice del artículo ---------- */

.post-2026 .post-indice {
  max-width: 40rem;
  margin: 2.4rem 0 3rem;
  padding: 1.6rem 1.75rem 1.4rem;
  border: 0;
  border-left: 3px solid var(--p26-gold);
  border-radius: 0 0.9rem 0.9rem 0;
  background: var(--p26-ground);
}

/* h2.post-indice__titulo, no solo la clase: es un <h2> dentro de .col-md-8, y
   sin subir la especificidad gana la regla de seccion y lo pinta enorme y con
   filete. */
.post-2026 .col-md-8 h2.post-indice__titulo {
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
  color: var(--p26-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}

.post-2026 .col-md-8 h2.post-indice__titulo::before {
  display: none;
}

.post-2026 .post-indice__lista li {
  margin-bottom: 0.7rem;
  line-height: 1.45;
}

.post-2026 .post-indice__lista li::before {
  color: var(--p26-gold);
  font-size: 0.78rem;
  font-weight: 800;
}

.post-2026 .post-indice__lista a {
  color: var(--p26-ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.post-2026 .post-indice__lista a:hover,
.post-2026 .post-indice__lista a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--p26-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* ---------- Notas al margen ---------- */

.post-2026 .note,
.post-2026 .note-light {
  max-width: 40rem;
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  border: 0 !important;
  border-left: 3px solid var(--p26-gold) !important;
  border-radius: 0 0.7rem 0.7rem 0;
  background: var(--p26-ground);
  color: var(--p26-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

.post-2026 .note p,
.post-2026 .note-light p {
  margin: 0;
}

/* ---------- Tabla comparativa ---------- */

.post-2026 .table-responsive {
  max-width: 40rem;
  margin: 2rem 0 2.5rem;
}

.post-2026 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.post-2026 table th,
.post-2026 table td {
  padding: 0.85rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--p26-line);
  text-align: left;
  vertical-align: top;
}

.post-2026 table thead th {
  border-bottom: 2px solid var(--p26-ink);
  color: var(--p26-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-2026 table tbody th {
  color: var(--p26-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.post-2026 table tbody tr:last-child th,
.post-2026 table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Estudios citados ----------
   Antes era una lista de enlaces en cursiva y azul, todos pegados: un muro.
   Cada referencia pasa a ser una fila con aire y separador. */

.post-2026 .col-md-8 .post-estudios {
  max-width: 40rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.post-2026 .col-md-8 .post-estudios li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--p26-line);
}

.post-2026 .col-md-8 .post-estudios li:first-child {
  border-top: 0;
  padding-top: 0;
}

.post-2026 .col-md-8 .post-estudios a {
  display: block;
  color: var(--p26-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.post-2026 .col-md-8 .post-estudios a:hover,
.post-2026 .col-md-8 .post-estudios a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--p26-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.post-2026 .col-md-8 .post-estudios .post-estudios__fuente {
  display: block;
  margin-top: 0.35rem;
  color: var(--p26-muted);
  font-size: 0.86rem;
  font-weight: 500;
}

/* ---------- Imagen de portada ---------- */

.post-2026 > .row > .col-md-8 > section:first-child {
  margin-bottom: 2.5rem !important;
  border: 0 !important;
}

.post-2026 picture img {
  border-radius: 1rem;
}

/* ---------- Barra lateral ---------- */

.post-2026 .col-md-4 small {
  color: var(--p26-muted) !important;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.post-2026 .col-md-4 ul a {
  color: var(--p26-ink);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
}

.post-2026 .col-md-4 ul a:hover,
.post-2026 .col-md-4 ul a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--p26-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.post-2026 .col-md-4 ul li {
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--p26-line);
}

.post-2026 .col-md-4 ul li:last-child {
  border-bottom: 0;
}

@media (max-width: 767px) {
  .post-2026 .col-md-8 h2 {
    margin-top: 2.6rem;
  }
}