/* ==========================================================================
   AdriCare: páginas de texto largo: legales, índice del blog y entradas
   Diseño minimalista: una columna, medida de lectura corta, sin adornos.
   ========================================================================== */

.pagina { padding-block: var(--space-12) var(--section-y); }

.pagina__head {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.pagina__head h1 { max-width: 22ch; }
.pagina .lede { max-width: var(--measure); }

.pagina__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  margin-bottom: calc(var(--space-2) * -1);
  justify-self: start;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.volver:hover { text-decoration: underline; }
.volver svg { width: 18px; height: 18px; }

.pagina__imagen {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-12);
  background-color: var(--color-bg-alt);
}

/* --- Índice de secciones ---------------------------------------------------- */

.toc {
  padding: var(--space-6);
  margin-bottom: var(--space-12);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.toc__titulo {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.toc__lista {
  display: grid;
  gap: var(--space-1);
}

@media (min-width: 700px) {
  .toc__lista { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
}

.toc__lista a {
  display: block;
  min-height: var(--tap-min);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-decoration: none;
}
.toc__lista a:hover { text-decoration: underline; }

/* --- Prosa ------------------------------------------------------------------ */

.prosa {
  max-width: var(--measure);
  line-height: var(--leading-normal);
}

.prosa > * + * { margin-top: var(--space-4); }

.prosa h2 {
  margin-top: var(--space-12);
  font-size: var(--text-xl);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.prosa h3 {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
}

.prosa :is(h2, h3) + * { margin-top: var(--space-3); }

.prosa :is(ul, ol) {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-6);
  list-style: revert;
}

.prosa li::marker { color: var(--color-brand-ink); }

.prosa strong { font-weight: var(--weight-bold); }

.prosa blockquote {
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-brand);
  color: var(--color-text-muted);
}

.prosa blockquote :is(p, i, em) { font-style: normal; }
.prosa blockquote > * + * { margin-top: var(--space-2); }

/* Los textos legales traen URL muy largas: deben romper, no desbordar. */
.prosa :is(p, li, td, th, a) { overflow-wrap: anywhere; }

.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.prosa :is(th, td) {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.prosa th { background-color: var(--color-bg-alt); font-weight: var(--weight-medium); }

/* Las tablas anchas hacen scroll dentro de su caja, no arrastran la página. */
.prosa table { display: block; overflow-x: auto; }

.aviso-pendiente {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-notice);
  border-radius: var(--radius-sm);
  background-color: var(--color-notice-soft);
  font-size: var(--text-sm);
}

/* --- Índice del blog --------------------------------------------------------- */

.entradas {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 700px) { .entradas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .entradas { grid-template-columns: repeat(3, 1fr); } }

.entrada { display: flex; }

.entrada__enlace {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-out);
}

.entrada__enlace:hover { transform: translateY(-2px); }
.entrada__enlace:hover .entrada__titulo { text-decoration: underline; }
.entrada__enlace:hover .entrada__mas { color: var(--color-brand-active); }

.entrada__imagen {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.entrada__cuerpo { display: grid; gap: var(--space-2); }

.entrada__fecha {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.entrada__titulo {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
}

.entrada__resumen {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.entrada__mas {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-brand-ink);
}

.entrada__mas svg { width: 16px; height: 16px; }

/* --- Cierre y navegación de entrada ------------------------------------------ */

.cta-entrada {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: var(--measure);
  padding: var(--space-6);
  margin-top: var(--space-16);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.cta-entrada h2 { font-size: var(--text-lg); }
.cta-entrada .btn { margin-top: var(--space-2); }

.paginacion {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 700px) { .paginacion { grid-template-columns: repeat(2, 1fr); } }

.paginacion__enlace {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.paginacion__enlace:hover {
  border-color: var(--color-brand);
  background-color: var(--color-surface-muted);
}

.paginacion__enlace--fin { text-align: right; }

.paginacion__etiqueta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.paginacion__titulo {
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}