/* Estilos propios del blog "Consejos".
   Se carga DESPUÉS de web.css, que ya trae tokens, cabecera, botones y pie.

   La cabecera y el cierre de `/consejos` usan `.page-head` y `.band-tinta
   cta` de web.css, igual que `/planes` y `/el-tunel`: aquí solo lo que es
   propio de esta sección (las tarjetas, la malla y el artículo). */

/* La malla de gradientes que pinta `components/web/MallaAgua.jsx`. La caja
   siempre a pantalla completa de su contenedor; las manchas, sueltas y con
   `mix-blend-mode` para que se fundan entre sí en vez de apilarse en capas
   planas. */
.malla { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(155deg, #1a3c66, var(--tinta)); }
.malla-m { position: absolute; border-radius: 50%; filter: blur(38px); mix-blend-mode: screen; }

/* Rejilla de artículos.
 *
 * `margin`, no `padding-block`: este elemento lleva también la clase `.wrap`
 * (de `web.css`), que trae `padding: 0 clamp(...)` — un atajo que fija
 * arriba/abajo a 0. En el HTML servido `blog.css` carga ANTES que `web.css`
 * (lo contrario de lo que parecía al mirar el código), así que cualquier
 * `padding-top`/`padding-bottom`/`padding-block` puesto aquí perdía contra
 * ese atajo y quedaba en 0px, comprobado con `getComputedStyle` por CDP.
 * `margin` no compite con `padding` de ninguna forma: no puede perder. */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(28px,4vw,44px); margin-bottom: clamp(64px,9vw,104px); }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .posts { grid-template-columns: 1fr; } }
.posts-mini { grid-template-columns: repeat(2, 1fr); margin-bottom: clamp(64px,9vw,104px); }
@media (max-width: 620px) { .posts-mini { grid-template-columns: 1fr; } }
.post {
  display: flex; flex-direction: column; background: var(--sup); border: 1px solid var(--linea);
  border-radius: 18px; overflow: hidden; box-shadow: var(--sombra);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s;
}
.post:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(11,27,51,0.04), 0 30px 60px -30px rgba(11,27,51,0.42); }
.post-img { height: 168px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.post-ic {
  position: relative; z-index: 1; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0.95; transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.post-ic svg { width: 26px; height: 26px; }
.post:hover .post-ic { transform: scale(1.08); }
.post-img .tag {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.24); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px;
}
.post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-body h2 { font-family: 'Fraunces', 'Georgia', serif; font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: 21px; line-height: 1.25; }
.post-body p { font-size: 14.5px; color: var(--texto-2); margin-top: 10px; line-height: 1.6; flex: 1; }
.post-meta { font-size: 12.5px; color: var(--texto-3); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); }

/* La "portada" del artículo: banda oscura con la malla detrás y el título en
   blanco encima, en vez de arrancar en seco con texto negro sobre blanco. */
.article-hero {
  position: relative; overflow: hidden; border-radius: 24px;
  margin-top: clamp(28px, 4vw, 44px); padding: clamp(40px,7vw,64px) clamp(28px,5vw,48px) clamp(32px,5vw,44px);
}
.article-hero-in { position: relative; z-index: 1; }
.article-hero .back { color: rgba(255,255,255,0.72); }
.article-hero .back:hover { color: #fff; }
.article-hero h1 { font-family: 'Fraunces', 'Georgia', serif; font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0;
  line-height: 1.15; margin-top: 18px; }
.article-hero .meta { border-bottom: 0; padding-bottom: 0; margin-top: 14px; }

.kicker { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.kicker-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16); color: #fff;
}
.kicker-ic svg { width: 18px; height: 18px; }
.kicker .tag {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,0.16); padding: 5px 12px; border-radius: 100px;
}

/* margin, no padding-block: mismo motivo que `.posts` más arriba. */
.article { margin-bottom: clamp(64px, 9vw, 104px); }
.article .back { font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.article-body { padding-top: clamp(32px, 5vw, 44px); }
.article-body p { font-size: 17px; color: #2b3a4d; line-height: 1.75; margin-bottom: 22px; }
.article-body > p:first-of-type { font-family: 'Fraunces', 'Georgia', serif; font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.6; letter-spacing: 0; color: var(--texto); }
.article-body h2 { font-family: 'Inter', sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: clamp(24px, 3.4vw, 30px); line-height: 1.25; margin: 40px 0 16px; }
.article-body ul { margin: 0 0 22px; padding-left: 22px; }
.article-body li { font-size: 17px; color: #2b3a4d; line-height: 1.7; margin-bottom: 10px; }
.article-body strong { color: var(--texto); font-weight: 600; }

/* El diagrama de cada artículo: la pieza visual que dibuja lo que el texto
   ya dice, no un adorno aparte. Una caja neutra por fuera para que las tres
   (una con dos paneles claro/oscuro, otra con el coche, otra con tres
   paneles) enmarquen igual, sea lo que sea que dibujen dentro. */
.diagrama { margin: 28px 0 32px; padding: clamp(16px,3vw,26px); background: var(--fondo); border: 1px solid var(--linea); border-radius: 18px; }
.diagrama svg { width: 100%; height: auto; display: block; }
.diagrama-2 svg { max-width: 560px; margin: 0 auto; }
.diagrama-coche svg { max-width: 320px; margin: 0 auto; }
.diagrama-leyenda {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--linea); list-style: none;
}
@media (max-width: 560px) { .diagrama-leyenda { grid-template-columns: 1fr; } }
.diagrama-leyenda li { display: flex; gap: 10px; align-items: flex-start; }
.dl-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
/* `div span`, no `span` a secas: el número de la insignia (`.dl-n`) TAMBIÉN
   es un <span> dentro de `.diagrama-leyenda`, y un selector `.diagrama-
   leyenda span` sin acotar lo engancha a él también — con un elemento más
   en el selector que `.dl-n`, le ganaba la partida y le pisaba el
   `color: #fff` y el `display: flex` que lo centra. El texto de la leyenda
   vive dentro de un <div>; `.dl-n` no. Acotar a `div span` describe lo que
   de verdad se quiere, no solo evita el choque de especificidad. */
.diagrama-leyenda b { display: block; font-size: 13.5px; color: var(--texto); }
.diagrama-leyenda div span { display: block; font-size: 12px; color: var(--texto-3); margin-top: 2px; }

/* La nota destacada: el punto que más importa del artículo, aparte del
   párrafo corrido. Mismo tono "Aire" que el resto: fondo tenue, sin marco
   llamativo. */
.nota {
  display: flex; gap: 16px; margin-top: 8px; padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(155deg, rgba(74,174,227,0.1), rgba(16,35,64,0.04)); border: 1px solid var(--linea);
}
.nota svg { width: 22px; height: 22px; flex: none; color: var(--tinta); margin-top: 2px; }
.nota p { font-size: 15.5px; color: var(--texto-2); line-height: 1.6; margin: 0; }
.nota-t { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta); margin-bottom: 4px; }

.article-cta { margin-top: 44px; padding: 30px; background: var(--sup); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); }
.article-cta h3 { font-size: 22px; }
.article-cta p { font-size: 15px; color: var(--texto-2); margin: 8px 0 20px; }

/* margin, no padding-top: mismo motivo que `.posts` más arriba (esta
   sección también lleva la clase `.wrap`). */
.relacionados { margin-top: clamp(8px, 2vw, 16px); }

@media (prefers-reduced-motion: reduce) { .post, .post-ic { transition: none; } }