/* Wasiluk Yasinsky · blog "Información útil" (índice, notas y tarjetas de la portada) */

.blog main { padding: 132px var(--borde) 96px; }
.blog .cabecera nav a[href$="blog/"] { color: var(--tinta); }

/* rótulo de área con la cara de la moneda que corresponde */
.area { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.area img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px #D6B46E; }

/* ── tarjetas (índice y portada) ── */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 40px; margin-top: 56px; }
.tarjeta { border-top: 1px solid var(--filete); }
.tarjeta a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 28px 0 40px; text-decoration: none; }
.tarjeta h3 { font: 400 clamp(28px, 2.4vw, 38px)/1.05 var(--serif); transition: color .3s; }
.tarjeta p { margin: 0; color: var(--suave); }
.tarjeta__fecha { margin-top: auto; font-size: 13px; color: var(--suave); }
.tarjeta a:hover h3 { color: var(--acento); }
.tarjeta__borrador, .nota__borrador {
  align-self: flex-start; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; border: 1px dashed currentColor; color: var(--acento);
}
.tarjeta--vacia { color: var(--suave); padding: 28px 0; border-top: 1px solid var(--filete); }

.indice .titulo-seccion { max-width: 16ch; }
.indice__bajada { max-width: 36em; color: var(--suave); font-size: 18px; margin: 24px 0 0; }

/* ── nota ── */
.nota { max-width: 760px; margin: 0 auto; }
.nota__borrador { display: inline-block; margin: 0 0 32px; }
.nota__cabeza { border-bottom: 1px solid var(--filete); padding-bottom: 36px; margin-bottom: 40px; }
.nota h1 { font: 400 clamp(40px, 5.2vw, 72px)/1.02 var(--serif); letter-spacing: -.015em; margin: 22px 0 24px; }
.nota__resumen { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--suave); margin: 0 0 20px; }
.nota__fecha { font-size: 14px; color: var(--suave); margin: 0; }
.nota__texto { font-size: 18px; line-height: 1.7; }
.nota__texto h2 { font: 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); margin: 52px 0 16px; }
.nota__texto h3 { font: 600 18px/1.3 var(--sans); margin: 36px 0 10px; }
.nota__texto p { margin: 0 0 20px; }
.nota__texto ul, .nota__texto ol { margin: 0 0 24px; padding-left: 1.3em; }
.nota__texto ul { list-style: disc; }
.nota__texto ol { list-style: decimal; }
.nota__texto li { margin-bottom: 8px; padding-left: 4px; }
.nota__texto li::marker { color: var(--acento); }
.nota__texto a { text-underline-offset: 4px; }
.nota__dato { margin: 32px 0; padding: 24px 28px; border-left: 3px solid var(--acento); background: rgba(214, 180, 110, .12); }
.nota__dato p { margin: 0; font: 400 22px/1.35 var(--serif); }
.nota__fuentes { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--filete); }
.nota__fuentes h2 { font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin: 0 0 12px; }
.nota__fuentes li { padding: 6px 0; overflow-wrap: anywhere; }
.nota__aviso { font-size: 14px; color: var(--suave); margin: 28px 0; }
.nota__consulta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin: 48px 0 32px; padding: 32px; background: #0C1729; color: #F1ECE1;
}
.nota__consulta p { margin: 0; font: 400 28px/1.15 var(--serif); }
.nota__consulta .boton { background: #D6B46E; color: #0C1729; }
.nota__consulta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.enlace-correo { color: #F1ECE1; text-underline-offset: 4px; font-size: 15px; padding: 8px 0; }
.enlace-volver { font-weight: 500; text-underline-offset: 5px; display: inline-block; padding: 8px 0; }
.enlace-volver::before { content: "← "; }

/* ── sección de la portada ── */
.informacion { padding: 140px var(--borde) 120px; }
.informacion__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.informacion .titulo-seccion { max-width: 14ch; }
.informacion .tarjetas { margin-top: 64px; }
.enlace-flecha--lado::after { content: "→"; }

/* filtros por tema */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.filtros a, .filtros button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--filete); border-radius: 999px; font-size: 15px; transition: border-color .3s, background-color .3s, color .3s;
}
.filtros a:hover, .filtros button:hover { border-color: var(--acento); }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.filtros a:focus-visible, .filtros button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.tarjeta[hidden] { display: none; }

@media (max-width: 999px) {
  .blog main { padding-top: 112px; }
  .nota__consulta { padding: 24px; }
}