/*
 * Hoja de estilos de todoenlared.
 *
 * Escrita a mano en lugar de generada por Tailwind: el sitio se sirve desde
 * PHP en Hostinger y no hay proceso de compilación. Un único fichero, sin
 * dependencias, que el navegador cachea un año.
 */

:root {
  --marca-50: #fff7ed;
  --marca-100: #ffedd5;
  --marca-200: #fed7aa;
  --marca-300: #fdba74;
  --marca-400: #fb923c;
  --marca-500: #f97316;
  --marca-600: #ea580c;
  --marca-700: #c2410c;
  --marca-800: #9a3412;

  --tinta-50: #f8fafc;
  --tinta-100: #f1f5f9;
  --tinta-200: #e2e8f0;
  --tinta-300: #cbd5e1;
  --tinta-400: #94a3b8;
  --tinta-500: #64748b;
  --tinta-600: #475569;
  --tinta-700: #334155;
  --tinta-800: #1e293b;
  --tinta-900: #0f172a;

  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --ancho: 1152px;
  --ancho-texto: 768px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta-800);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1rem;
}

.principal {
  flex: 1;
}

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tinta-200);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  min-width: 0;
}

.logo svg {
  flex-shrink: 0;
}

.logo-texto {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinta-900);
  line-height: 1;
}

@media (min-width: 640px) {
  .logo-texto {
    font-size: 1.35rem;
  }
}

.nav-escritorio {
  display: none;
}

.nav-escritorio ul {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-escritorio a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-600);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.nav-escritorio a:hover {
  background: var(--marca-50);
  color: var(--marca-800);
}

.nav-icono {
  display: none;
}

@media (min-width: 1024px) {
  .nav-escritorio {
    display: block;
  }
  .nav-movil {
    display: none;
  }
}

@media (min-width: 1280px) {
  .nav-escritorio a {
    padding: 0.5rem 0.625rem;
  }
  .nav-icono {
    display: inline;
    font-size: 1rem;
    line-height: 1;
  }
}

/* Menú desplegable en móvil, con <details> nativo: sin JavaScript. */
.nav-movil {
  position: relative;
}

.nav-movil summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tinta-200);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-700);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.nav-movil summary::-webkit-details-marker {
  display: none;
}

.nav-movil summary svg {
  transition: transform 0.15s;
}

.nav-movil[open] summary svg {
  transform: rotate(180deg);
}

.nav-movil-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  margin-top: 0.5rem;
  width: 16rem;
  max-width: calc(100vw - 2rem);
  background: #fff;
  border: 1px solid var(--tinta-200);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.nav-movil-panel ul {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.nav-movil-panel a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-700);
  text-decoration: none;
}

.nav-movil-panel a:hover {
  background: var(--marca-50);
  color: var(--marca-800);
}

/* ------------------------------------------------------------------- héroe */

.heroe {
  border-bottom: 1px solid var(--tinta-200);
  background: linear-gradient(to bottom, var(--marca-50), #fff);
  padding: 3rem 0;
}

@media (min-width: 640px) {
  .heroe {
    padding: 4rem 0;
  }
}

.heroe h1 {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tinta-900);
  margin: 0;
  max-width: 46rem;
}

@media (min-width: 640px) {
  .heroe h1 {
    font-size: 3rem;
  }
}

.heroe p {
  margin: 1rem 0 0;
  max-width: 40rem;
  font-size: 1rem;
  color: var(--tinta-600);
}

@media (min-width: 640px) {
  .heroe p {
    font-size: 1.125rem;
    margin-top: 1.25rem;
  }
}

.pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  outline: 1px solid var(--tinta-200);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-700);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, outline-color 0.15s;
}

.pastilla:hover {
  background: var(--marca-600);
  color: #fff;
  outline-color: var(--marca-600);
}

/* ---------------------------------------------------------------- tarjetas */

.seccion-titulo {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-500);
  margin: 0 0 1.25rem;
}

.rejilla {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--tinta-200);
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.tarjeta:hover {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.tarjeta-imagen {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--tinta-50);
  padding: 1.5rem;
}

.tarjeta-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.tarjeta:hover .tarjeta-imagen img {
  transform: scale(1.05);
}

.tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem;
}

.tarjeta-categoria {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--marca-700);
  text-decoration: none;
}

.tarjeta h2,
.tarjeta h3 {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-900);
  margin: 0;
}

.tarjeta h2 a,
.tarjeta h3 a {
  text-decoration: none;
}

.tarjeta h2 a:hover,
.tarjeta h3 a:hover {
  color: var(--marca-700);
}

.tarjeta-extracto {
  flex: 1;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-600);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tinta-100);
  font-size: 0.75rem;
  color: var(--tinta-500);
}

.tarjeta-precio {
  font-weight: 600;
  color: var(--tinta-700);
}

/* Tarjeta destacada, en horizontal para no disparar la altura. */
.destacada {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border: 1px solid var(--tinta-200);
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.destacada:hover {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

@media (min-width: 640px) {
  .destacada {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

.destacada-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinta-50);
  padding: 1rem;
}

@media (min-width: 640px) {
  .destacada-imagen {
    padding: 1.5rem;
  }
}

.destacada-imagen img {
  max-height: 150px;
  width: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

@media (min-width: 640px) {
  .destacada-imagen img {
    max-height: 16rem;
  }
}

.destacada:hover .destacada-imagen img {
  transform: scale(1.05);
}

.destacada-cuerpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .destacada-cuerpo {
    padding: 2rem;
  }
}

.destacada-cuerpo h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta-900);
  margin: 0;
}

.destacada-cuerpo h2 a {
  text-decoration: none;
}

.destacada-cuerpo h2 a:hover {
  color: var(--marca-700);
}

.etiqueta-categoria {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: var(--marca-50);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--marca-700);
  text-decoration: none;
}

/* ---------------------------------------------------------------- artículo */

.articulo-pagina {
  max-width: var(--ancho-texto);
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

.migas {
  font-size: 0.875rem;
  color: var(--tinta-500);
  margin-bottom: 1.5rem;
}

.migas a {
  text-decoration: none;
}

.migas a:hover {
  color: var(--marca-700);
}

.migas span {
  margin: 0 0.5rem;
}

.articulo-pagina h1 {
  font-family: var(--display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tinta-900);
  margin: 0;
}

@media (min-width: 640px) {
  .articulo-pagina h1 {
    font-size: 2.25rem;
  }
}

.entradilla {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  color: var(--tinta-600);
}

.meta-articulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--tinta-200);
  font-size: 0.875rem;
  color: var(--tinta-500);
}

.indice {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--tinta-200);
  border-radius: 0.75rem;
}

.indice p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta-900);
}

.indice ol {
  margin: 0;
  padding-left: 1.25rem;
}

.indice li {
  margin-bottom: 0.5rem;
}

.indice a {
  font-size: 0.875rem;
  color: var(--tinta-600);
  text-decoration: none;
}

.indice a:hover {
  color: var(--marca-700);
  text-decoration: underline;
}

/* Cuerpo del artículo: el HTML lo genera el redactor, se estila desde aquí. */
.articulo {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--tinta-700);
  margin-top: 2.5rem;
}

.articulo > p {
  margin: 0 0 1.25rem;
}

.articulo h2 {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta-900);
  margin: 2.75rem 0 1rem;
  scroll-margin-top: 5rem;
}

.articulo h3 {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--tinta-900);
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 5rem;
}

.articulo strong {
  color: var(--tinta-900);
  font-weight: 650;
}

.articulo ul,
.articulo ol {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
}

.articulo li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.articulo a {
  color: var(--marca-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.articulo blockquote {
  border-left: 3px solid var(--marca-300);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--tinta-600);
  font-style: italic;
}

/* Las tablas se desplazan dentro de su caja, nunca arrastran la página. */
.tabla-scroll {
  overflow-x: auto;
  margin: 1.75rem 0;
  border: 1px solid var(--tinta-200);
  border-radius: 0.75rem;
}

.articulo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.articulo th {
  background: var(--tinta-50);
  text-align: left;
  font-weight: 650;
  color: var(--tinta-900);
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.articulo td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--tinta-200);
  vertical-align: top;
}

/* --------------------------------------------------------- ficha de compra */

.ficha-producto {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1.75rem 0 2.25rem;
  padding: 1rem 1.25rem;
  background: var(--marca-50);
  border: 1px solid var(--marca-200);
  border-radius: 0.875rem;
}

.ficha-imagen {
  flex-shrink: 0;
  display: block;
  width: 92px;
  height: 92px;
  background: #fff;
  border-radius: 0.625rem;
  padding: 0.375rem;
}

.ficha-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ficha-datos {
  min-width: 0;
  flex: 1;
}

.ficha-titulo {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-900);
}

.ficha-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.ficha-nota {
  color: var(--tinta-500);
}

.ficha-precio {
  font-weight: 700;
  color: var(--marca-800);
}

.articulo .ficha-boton,
.ficha-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--marca-600);
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.5625rem 1.125rem;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: background-color 0.15s;
}

.articulo .ficha-boton:hover,
.ficha-boton:hover {
  background: var(--marca-700);
}

.ficha-boton::after {
  content: '→';
  font-size: 1rem;
}

@media (max-width: 480px) {
  .ficha-producto {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }
  .ficha-imagen {
    width: 100%;
    height: 140px;
  }
}

/* ------------------------------------------------------------- veredictos */

.veredictos {
  margin-top: 3.5rem;
}

.veredictos > h2,
.faq > h2,
.relacionados > h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tinta-900);
  margin: 0 0 1.5rem;
}

.veredicto {
  border: 1px solid var(--tinta-200);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.veredicto-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--tinta-50);
  border-bottom: 1px solid var(--tinta-100);
}

.veredicto-cabeza img {
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  background: #fff;
  border-radius: 0.5rem;
  object-fit: contain;
  padding: 0.375rem;
}

.veredicto-titulo {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta-900);
  margin: 0;
}

.veredicto-para {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-600);
}

.veredicto-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--tinta-500);
}

.veredicto-listas {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .veredicto-listas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.veredicto-listas h4 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.a-favor h4 {
  color: #047857;
}

.en-contra h4 {
  color: #be123c;
}

.veredicto-listas ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.veredicto-listas li {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  color: var(--tinta-700);
}

.veredicto-listas li::before {
  flex-shrink: 0;
  font-weight: 700;
}

.a-favor li::before {
  content: '+';
  color: #059669;
}

.en-contra li::before {
  content: '−';
  color: #e11d48;
}

.veredicto-pie {
  padding: 0 1.25rem 1.25rem;
}

/* -------------------------------------------------------------------- FAQ */

.faq {
  margin-top: 3.5rem;
}

.faq-lista {
  border-top: 1px solid var(--tinta-200);
  border-bottom: 1px solid var(--tinta-200);
}

.faq details {
  border-bottom: 1px solid var(--tinta-200);
  padding: 1rem 0;
}

.faq details:last-child {
  border-bottom: none;
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 500;
  color: var(--tinta-900);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--tinta-400);
  transition: transform 0.15s;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq p {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-600);
}

/* --------------------------------------------------------------- etiquetas */

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tinta-200);
}

.etiqueta {
  padding: 0.25rem 0.75rem;
  background: var(--tinta-100);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tinta-600);
}

.relacionados {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* -------------------------------------------------------------------- pie */

.pie {
  margin-top: 5rem;
  border-top: 1px solid var(--tinta-200);
  background: var(--tinta-50);
  padding: 3rem 0;
}

.pie-rejilla {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pie-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pie-rejilla {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pie-marca {
    grid-column: span 2;
  }
}

.pie-marca p {
  margin: 0.5rem 0 0;
  max-width: 24rem;
  font-size: 0.875rem;
  color: var(--tinta-600);
}

.pie h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta-900);
}

.pie ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.pie ul li {
  margin-bottom: 0.5rem;
}

.pie ul a {
  font-size: 0.875rem;
  color: var(--tinta-600);
  text-decoration: none;
}

.pie ul a:hover {
  color: var(--marca-700);
}

.pie-legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tinta-200);
}

.pie-legal > p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--tinta-500);
}

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 0.75rem;
}

.pie-enlaces a {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tinta-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pie-enlaces a:hover {
  color: var(--marca-700);
}

.pie-enlaces span {
  font-size: 0.75rem;
  color: var(--tinta-300);
}

.pie-credito {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--tinta-500);
}

.pie-credito a {
  font-weight: 600;
  color: var(--tinta-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pie-version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--tinta-400);
}

/* ------------------------------------------------------- páginas estáticas */

.pagina {
  max-width: var(--ancho-texto);
  margin: 0 auto;
  padding: 3rem 1rem;
}

.pagina h1 {
  font-family: var(--display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tinta-900);
  margin: 0;
}

@media (min-width: 640px) {
  .pagina h1 {
    font-size: 2.25rem;
  }
}

.pagina > p:first-of-type {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--tinta-600);
}

.pagina section {
  margin-top: 2.5rem;
}

.pagina section h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tinta-900);
  margin: 0 0 0.75rem;
}

/* ---------------------------------------------------------------- estado */

.estado-datos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .estado-datos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.estado-dato {
  border: 1px solid var(--tinta-200);
  border-radius: 0.75rem;
  padding: 1rem;
}

.estado-dato strong {
  display: block;
  font-family: var(--display);
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--tinta-900);
  line-height: 1.1;
}

.estado-dato span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-500);
}

.aviso {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 0.75rem;
}

.aviso strong {
  color: #78350f;
}

.aviso p {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #92400e;
}

.tabla-estado {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tabla-estado th {
  background: var(--tinta-50);
  text-align: left;
  padding: 0.625rem 1rem;
  font-weight: 600;
  color: var(--tinta-900);
}

.tabla-estado td {
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--tinta-200);
}

.alerta {
  font-weight: 600;
  color: #b45309;
}

.lista-simple {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  border: 1px solid var(--tinta-200);
  border-radius: 0.75rem;
}

.lista-simple li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--tinta-200);
}

.lista-simple li:last-child {
  border-bottom: none;
}

.lista-simple a {
  font-size: 0.875rem;
  color: var(--tinta-800);
  text-decoration: none;
}

.lista-simple a:hover {
  color: var(--marca-700);
}

.lista-simple time {
  font-size: 0.75rem;
  color: var(--tinta-500);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------- 404 */

.error-404 {
  max-width: 40rem;
  margin: 0 auto;
  padding: 6rem 1rem;
  text-align: center;
}

.error-404 .codigo {
  font-family: var(--display);
  font-size: 3.75rem;
  font-weight: 600;
  color: var(--marca-500);
  margin: 0;
}

.error-404 h1 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tinta-900);
  margin: 1rem 0 0;
}

.error-404 > p {
  margin: 0.75rem 0 0;
  color: var(--tinta-600);
}

.error-404 .pastillas {
  justify-content: center;
  margin-top: 2rem;
}

.vacio {
  padding: 4rem 0;
  text-align: center;
  color: var(--tinta-500);
}

/* El logo envuelve el símbolo y el texto en un span propio, así que el
   espaciado tiene que ir aquí y no en el enlace que lo contiene. */
.logo-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

/* Aviso de precios caducados en guías con unas semanas encima. Ámbar y no
   rojo: no es un error, es un matiz que el lector agradece saber. */
.aviso-precios {
  margin: 1.25rem 0 0;
  padding: 0.875rem 1rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #78350f;
}

.aviso-precios strong {
  font-weight: 650;
}