/* Blog de MyShopLink.
   HTML plano a propósito: estas páginas existen para que las lean rastreadores
   que no ejecutan JavaScript. Nada de fuentes externas ni scripts.

   Sin modo oscuro a propósito: el resto del sitio es claro y siempre el mismo,
   y un blog que cambia de color según el sistema del visitante se veía como
   otra web distinta. */

:root {
  --verde: hsl(160 84% 27%);
  --verde-claro: hsl(160 84% 96%);
  --tinta: hsl(160 12% 12%);
  --tinta-suave: hsl(160 8% 40%);
  --linea: hsl(160 10% 90%);
  --fondo: hsl(160 20% 99%);
  --papel: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.envoltorio { max-width: 720px; margin: 0 auto; padding: 0 20px; }

header.sitio {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  /* Fija arriba: si no, a mitad de un artículo largo la única forma de volver
     era subir hasta el principio. */
  position: sticky; top: 0; z-index: 10;
}
header.sitio .envoltorio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 60px;
}
/* Volver, dicho con todas las letras.
   Antes esto era una ruta de migas —"MyShopLink / Blog"—, que solo se entiende
   si ya conoces la convención. Con una flecha y la palabra delante no hay nada
   que interpretar. La marca sigue en el pie, que es donde no estorba. */
header.sitio a.atras {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: 16px; font-weight: 700;
  color: var(--tinta); text-decoration: none; white-space: nowrap;
}
header.sitio a.atras:hover { color: var(--verde); }

header.sitio a.marca {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 800; color: var(--tinta); text-decoration: none; font-size: 17px;
}

header.sitio .acciones { display: flex; align-items: center; gap: 14px; }

/* Iniciar sesión va en la cabecera SIEMPRE, también en móvil: es donde se
   busca. Lo que se encoge es el texto del botón —"Crear gratis" en pantallas
   estrechas—, el mismo recurso que ya usa la landing para caber a 390px. */
header.sitio a.entrar {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--tinta-suave);
  text-decoration: none; white-space: nowrap;
}
header.sitio a.entrar:hover { color: var(--verde); }

.corto { display: inline; }
.largo { display: none; }
@media (min-width: 560px) {
  .corto { display: none; }
  .largo { display: inline; }
  header.sitio .acciones { gap: 18px; }
}

header.sitio a.cta {
  background: var(--verde); color: #fff; text-decoration: none;
  padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 15px;
  /* 44px es el mínimo tocable de la guía de diseño; con padding se quedaba en 39. */
  min-height: 44px; display: inline-flex; align-items: center;
}

article, main { background: var(--papel); }
main { padding: 32px 0 56px; }

h1 { font-size: 32px; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.02em; }
h2 { font-size: 23px; line-height: 1.25; margin: 40px 0 12px; letter-spacing: -0.01em; }
h3 { font-size: 19px; margin: 28px 0 8px; }

.fecha { color: var(--tinta-suave); font-size: 15px; margin: 0 0 28px; }

/* La respuesta directa bajo cada encabezado: es lo que se cita. */
.respuesta {
  background: var(--verde-claro);
  border-left: 3px solid var(--verde);
  padding: 14px 16px; margin: 0 0 20px; border-radius: 0 10px 10px 0;
}
.respuesta p { margin: 0; }

table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 20px 0; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linea); }
th { font-weight: 700; background: var(--verde-claro); }
td.no { color: var(--tinta-suave); }
.tabla-scroll { overflow-x: auto; }

a { color: var(--verde); }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

.fuentes { font-size: 14px; color: var(--tinta-suave); border-top: 1px solid var(--linea); margin-top: 44px; padding-top: 16px; }
.fuentes li { margin: 4px 0; }

.aviso {
  border: 1px solid var(--linea); border-radius: 12px;
  padding: 16px; margin: 28px 0; font-size: 15px;
}

.cierre {
  border: 1px solid var(--linea); border-radius: 14px;
  padding: 20px; margin: 40px 0 0; background: var(--fondo);
}
.cierre h2 { margin-top: 0; font-size: 19px; }
.cierre a.cta {
  display: inline-block; background: var(--verde); color: #fff;
  text-decoration: none; padding: 11px 18px; border-radius: 10px; font-weight: 600;
}

/* Índice del blog */
.entrada { border-bottom: 1px solid var(--linea); padding: 22px 0; }
.entrada:last-child { border-bottom: 0; }
.entrada h2 { margin: 0 0 6px; font-size: 21px; }
.entrada h2 a { color: var(--tinta); text-decoration: none; }
.entrada h2 a:hover { color: var(--verde); }
.entrada p { margin: 0 0 6px; color: var(--tinta-suave); }
.entrada .fecha { margin: 0; font-size: 14px; }

/* El pie solo lleva lo legal. Navegar se navega desde la cabecera, que está
   fija arriba y no hay que ir a buscarla. */
footer.sitio {
  border-top: 1px solid var(--linea); padding: 24px 0 40px;
  font-size: 15px; color: var(--tinta-suave); background: var(--papel);
}
.pie-legal { margin: 0; font-size: 14px; color: var(--tinta-suave); }
.pie-legal a { color: var(--tinta-suave); }

@media (max-width: 480px) {
  h1 { font-size: 27px; }
  h2 { font-size: 21px; }
  header.sitio .acciones { display: flex; align-items: center; gap: 14px; }

/* Iniciar sesión va en la cabecera SIEMPRE, también en móvil: es donde se
   busca. Lo que se encoge es el texto del botón —"Crear gratis" en pantallas
   estrechas—, el mismo recurso que ya usa la landing para caber a 390px. */
header.sitio a.entrar {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--tinta-suave);
  text-decoration: none; white-space: nowrap;
}
header.sitio a.entrar:hover { color: var(--verde); }

.corto { display: inline; }
.largo { display: none; }
@media (min-width: 560px) {
  .corto { display: none; }
  .largo { display: inline; }
  header.sitio .acciones { gap: 18px; }
}

header.sitio a.cta { padding: 8px 13px; font-size: 14px; }
}

.seguir-leyendo {
  border-top: 1px solid var(--linea); margin-top: 44px; padding-top: 22px;
}
.seguir-leyendo h2 { margin: 0 0 12px; font-size: 19px; }
.seguir-leyendo ul { list-style: none; padding: 0; margin: 0; }
.seguir-leyendo li { margin: 0; border-bottom: 1px solid var(--linea); }
.seguir-leyendo li:last-child { border-bottom: 0; }
.seguir-leyendo a {
  display: block; padding: 13px 0; min-height: 44px;
  font-weight: 600; text-decoration: none; color: var(--tinta);
}
.seguir-leyendo a:hover { color: var(--verde); }

/* El mismo camino al terminar de leer, donde uno se pregunta qué hay después.
   Con borde, porque un enlace de texto suelto mucha gente no lo ve como algo
   que se pueda pulsar. */
.volver-abajo { margin: 28px 0 0; }
.volver-abajo a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--linea); border-radius: 12px;
  background: var(--papel); color: var(--tinta);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.volver-abajo a:hover { border-color: var(--verde); color: var(--verde); }