/* ============================================================
   HARDY — Artículos y listados del blog.

   El theme no tenía blog: las entradas caían en index.php sin estilo
   propio. Esta hoja cubre la plantilla de artículo (single.php) y la
   grilla de listados. Se carga solo en esas vistas.
   ============================================================ */

/* ============================================================
   1 · Artículo
   ============================================================ */
.articulo__cab {
  padding-block: 130px 0;
  max-width: 760px;
  margin-inline: auto;
}

.articulo__kicker {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tierra);
  margin-bottom: 14px;
}
.articulo__kicker a { color: inherit; }
.articulo__kicker span { opacity: 0.5; margin-inline: 6px; }

.articulo__cab h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  max-width: 20ch;
  text-wrap: balance;
}

/* La bajada es el extracto: también es la meta description, así que
   conviene que se lea bien en los dos lugares. */
.articulo__bajada {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.7vw, 21px);
  font-style: italic;
  line-height: 1.5;
  color: var(--tinta-2);
  margin-top: 20px;
  max-width: 46ch;
}

.articulo__portada {
  max-width: 900px;
  margin: 40px auto 0;
}
.articulo__portada img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
}

/* ---------- Cuerpo ----------
   Ancho de lectura acotado: pasadas las ~70 caracteres por línea el ojo
   pierde el renglón al volver. */
.articulo__cuerpo {
  max-width: 680px;
  margin-inline: auto;
  padding-top: 40px;
  padding-bottom: 20px;
}

.articulo__cuerpo p {
  font-size: 17px;
  line-height: 1.72;
  margin-bottom: 22px;
  color: var(--tinta);
}

.articulo__cuerpo h2 {
  font-family: var(--f-display);
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  margin: 46px 0 16px;
}

.articulo__cuerpo h3 {
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.01em;
  margin: 32px 0 10px;
}

.articulo__cuerpo ul,
.articulo__cuerpo ol {
  margin: 0 0 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.articulo__cuerpo li {
  font-size: 17px;
  line-height: 1.6;
}
.articulo__cuerpo ul { list-style: none; margin-left: 4px; }
.articulo__cuerpo ul li { position: relative; padding-left: 22px; }
.articulo__cuerpo ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--tierra);
}
.articulo__cuerpo ol { list-style: decimal; }
.articulo__cuerpo ol li::marker {
  font-family: var(--f-ui);
  font-weight: 600;
  color: var(--tierra);
}

.articulo__cuerpo strong { font-weight: 650; }

.articulo__cuerpo a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--tierra);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s var(--t);
}
.articulo__cuerpo a:hover { color: var(--tierra); }

/* ---------- Pie ---------- */
.articulo__pie {
  max-width: 680px;
  margin-inline: auto;
  padding-bottom: 20px;
}

.articulo__fecha {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--tinta-2);
  opacity: 0.8;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
}

.articulo__cta {
  margin-top: 34px;
  padding: 30px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  text-align: center;
}
.articulo__cta p {
  font-family: var(--f-display);
  font-size: 19px;
  margin-bottom: 18px;
}

/* ---------- Relacionados ---------- */
.articulo__relacionados {
  max-width: 900px;
  margin: 60px auto 0;
  padding-bottom: 90px;
}
.articulo__relacionados h2 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 20px;
}
.articulo__relacionados ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}
.articulo__relacionados li { background: var(--blanco); }
.articulo__relacionados a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  height: 100%;
  transition: background 0.3s var(--t);
}
.articulo__relacionados a:hover { background: var(--crema); }
.articulo__relacionados strong {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
}
.articulo__relacionados span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* ============================================================
   2 · Listado del blog
   ============================================================ */
.entradas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  padding-bottom: 90px;
}

.entrada {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.4s var(--t), box-shadow 0.4s var(--t);
}
.entrada:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.entrada__kicker {
  font-family: var(--f-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tierra);
}

.entrada h2 {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.22;
}
.entrada h2 a { color: var(--tinta); }
.entrada h2 a:hover { color: var(--tierra); }

.entrada p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tinta-2);
}

.entrada__mas {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--f-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tierra);
}

@media (max-width: 700px) {
  .articulo__cab { padding-block: 104px 0; }
  .articulo__cuerpo p,
  .articulo__cuerpo li { font-size: 16.5px; }
}

/* ============================================================
   3 · Páginas de contenido

   Historia, Preguntas frecuentes, Envíos y Contacto. Comparten familia
   visual con los artículos pero admiten un ancho algo mayor, porque
   llevan listas y bloques de datos además de prosa corrida.
   ============================================================ */
.pagina__cab {
  max-width: 820px;
  margin-inline: auto;
  padding-block: 130px 0;
}

.pagina__bajada {
  font-family: var(--f-display);
  font-size: clamp(17px, 1.7vw, 21px);
  font-style: italic;
  line-height: 1.5;
  color: var(--tinta-2);
  margin-top: 18px;
  max-width: 48ch;
}

.pagina__portada {
  max-width: 1000px;
  margin: 40px auto 0;
}
.pagina__portada img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r);
}

.pagina__cuerpo {
  max-width: 720px;
  margin-inline: auto;
  padding-top: 44px;
  padding-bottom: 10px;
}

/* La primera línea de cada página funciona como entradilla. */
.pagina__cuerpo .intro {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.35;
  color: var(--tinta);
  margin-bottom: 26px;
}

.pagina__cuerpo p {
  font-size: 17px;
  line-height: 1.72;
  margin-bottom: 20px;
}

.pagina__cuerpo h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 400;
  line-height: 1.22;
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
}
/* La primera no lleva línea: ya está el encabezado arriba. */
.pagina__cuerpo h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 30px; }

.pagina__cuerpo ul {
  list-style: none;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pagina__cuerpo ul li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.6;
}
.pagina__cuerpo ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 1px;
  background: var(--tierra);
}

.pagina__cuerpo a:not(.boton) {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--tierra);
  text-underline-offset: 3px;
  transition: color 0.25s var(--t);
}
.pagina__cuerpo a:not(.boton):hover { color: var(--tierra); }

.pagina__cta {
  max-width: 720px;
  margin: 30px auto 0;
  padding: 32px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  text-align: center;
}
.pagina__cta p {
  font-family: var(--f-display);
  font-size: 19px;
  margin-bottom: 18px;
}

.pagina .pagina__cta { margin-bottom: 90px; }

@media (max-width: 700px) {
  .pagina__cab { padding-block: 104px 0; }
  .pagina__cuerpo p, .pagina__cuerpo ul li { font-size: 16.5px; }
}

/* ============================================================
   4 · Páginas legales

   Términos, privacidad y arrepentimiento son documentos de consulta: se
   los busca por sección, no se los lee de corrido. El problema que tenían
   era de jerarquía —h1, bajada, `.intro` y h2 eran cuatro serifas de
   tamaño parecido apiladas— y de alineación: el encabezado y el cuerpo
   tenían anchos distintos, así que el borde izquierdo daba un salto.

   Acá el cuerpo se alinea con el encabezado, la escala se separa de
   verdad y las secciones van numeradas.
   ============================================================ */
.pagina__cuerpo--legal {
  max-width: 820px;   /* mismo ancho que .pagina__cab: sin salto lateral */
}

/* La primera línea deja de ser un titular. En una página legal, la bajada
   del encabezado ya cumple ese rol; repetirlo abajo duplicaba la voz. */
.pagina__cuerpo--legal .intro {
  font-family: var(--f-ui);
  font-size: 16.5px;
  font-style: normal;
  line-height: 1.65;
  color: var(--tinta-2);
  margin-bottom: 4px;
}

/* ---------- Índice ---------- */
.pagina__indice {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 24px 28px 26px;
  margin: 8px 0 46px;
}
.pagina__indice h2 {
  font-family: var(--f-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
.pagina__indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 34px;
}
.pagina__indice li { break-inside: avoid; margin-bottom: 7px; }
.pagina__indice a {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--tinta-2);
  text-decoration: none;
  transition: color 0.25s var(--t);
}
.pagina__indice a:hover { color: var(--tierra); }
.pagina__indice a span {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--tierra);
  padding-top: 3px;
  flex: 0 0 auto;
}

/* ---------- Secciones numeradas ----------
   El número da al ojo un punto de anclaje al recorrer el documento, y
   separa el h2 de la prosa mucho mejor que el tamaño solo. */
.pagina__cuerpo--legal h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(19px, 2vw, 23px);
  margin: 52px 0 14px;
  padding-top: 26px;
  scroll-margin-top: 100px;   /* que el header fijo no tape el ancla */
}
.pagina__num {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tierra);
  flex: 0 0 auto;
  position: relative;
  top: -2px;
}

/* ---------- Prosa más compacta ----------
   Un documento legal se escanea. Cuerpo algo menor y renglón más corto
   que en un artículo, que sí se lee entero. */
.pagina__cuerpo--legal p,
.pagina__cuerpo--legal li {
  font-size: 15.5px;
  line-height: 1.68;
}
.pagina__cuerpo--legal p { max-width: 68ch; margin-bottom: 16px; }
.pagina__cuerpo--legal ul { max-width: 68ch; gap: 9px; }

/* La fecha de actualización es metadato, no prosa. */
.pagina__cuerpo--legal > p:nth-of-type(2) {
  font-family: var(--f-ui);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--tinta-3);
  padding-bottom: 6px;
}

@media (max-width: 700px) {
  .pagina__indice ol { columns: 1; }
  .pagina__cuerpo--legal h2 { gap: 10px; margin-top: 40px; }
}