/* Kiosko — "Portada de kiosco".
 *
 * El sistema entero descansa en una idea: el fondo se calla y el color lo
 * ponen los temas. Cinco categorías conviviendo en el mismo scroll necesitan
 * distinguirse antes de leerse, igual que las secciones de un periódico de
 * papel — por eso el color es información, no decoración, y cada tarjeta
 * lleva la franja de su tema.
 */

:root {
  color-scheme: light;

  /* Papel, no blanco puro: un blanco puro con cinco colores saturados encima
     vibra. Este gris cálido los deja respirar. */
  --papel: #EDEAE1;
  --papel-2: #F5F3EC;
  --tinta: #16140F;
  --tinta-2: #4A473E;
  --tinta-3: #7C786C;
  --linea: #D9D5C8;

  /* Los cinco temas. Misma luminosidad y saturación parecidas: se leen como
     un juego de banderas, no como cinco rotuladores distintos. */
  --motor: #D6631E;
  --ia: #6E43B8;
  --videojuegos: #1E9A5A;
  --salud: #0E8F8B;
  --tecnologia: #235FD1;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --texto: "Work Sans", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --papel: #14130F;
    --papel-2: #1D1B16;
    --tinta: #F4F2EA;
    --tinta-2: #B7B3A5;
    --tinta-3: #88847A;
    --linea: #322F28;
    --motor: #E8823F;
    --ia: #9370D8;
    --videojuegos: #3FBB7B;
    --salud: #2BAFAA;
    --tecnologia: #5B8CE8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: 2px solid var(--tinta);
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 20;
}

.masthead-fila {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

/* El punto es la única floritura del sitio: hereda el color del tema que se
   esté filtrando, así que la marca cambia de color según lo que estés
   leyendo. */
.logo-punto { color: var(--acento, var(--motor)); }

.masthead-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.boton {
  font-family: var(--texto);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 2px;
  border: 1.5px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.boton:hover { background: var(--tinta); color: var(--papel); }
.boton:focus-visible { outline: 3px solid var(--acento, var(--tecnologia)); outline-offset: 2px; }
.boton-solido { background: var(--tinta); color: var(--papel); }
.boton-solido:hover { background: var(--tinta-2); border-color: var(--tinta-2); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--tinta); display: block;
}

/* ── Barra de temas ───────────────────────────────────────────────────── */

.temas {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  overflow-x: auto;
  scrollbar-width: none;
}
.temas::-webkit-scrollbar { display: none; }

.temas-fila {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 0;
}

.tema {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 11px 16px;
  text-decoration: none;
  color: var(--tinta-2);
  border-bottom: 4px solid transparent;
  white-space: nowrap;
}

.tema:hover { color: var(--tinta); }
.tema.activo { color: var(--tinta); border-bottom-color: var(--c); }

/* ── El feed ──────────────────────────────────────────────────────────── */

.feed {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 20px 80px;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.tarjeta {
  position: relative;
  /* La franja del tema, a la izquierda: es lo que hace que la columna se lea
     como una sección aunque scrollees rápido. */
  border-left: 5px solid var(--c);
  background: var(--papel-2);
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform 0.14s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .tarjeta:hover { transform: translateY(-3px); }
}


.tarjeta-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--linea);
}

.tarjeta-cuerpo { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

.tarjeta-tema {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c);
}

.tarjeta-titular {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.65rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.tarjeta-sub {
  margin: 0;
  font-size: 0.93rem;
  color: var(--tinta-2);
  line-height: 1.5;
}

/* El titular es el enlace, y se estira sobre la tarjeta entera: se puede
   pinchar en cualquier punto sin anidar enlaces dentro de enlaces. */
.tarjeta-enlace { text-decoration: none; color: inherit; }
.tarjeta-enlace::after { content: ""; position: absolute; inset: 0; }
.tarjeta-enlace:focus-visible { outline: none; }
.tarjeta:focus-within { outline: 3px solid var(--c); outline-offset: 3px; }

/* La atribución. No es un pie decorativo: dice a quién pertenece la noticia
   y a dónde lleva el clic, con el dominio a la vista. Citar y enlazar es lo
   que separa un agregador honesto de apropiarse del trabajo de otro. */
.tarjeta-pie {
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 7px;
  font-size: 0.76rem;
  color: var(--tinta-3);
}

.tarjeta-via { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.tarjeta-fuente {
  font-weight: 700;
  color: var(--c);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tarjeta-dominio {
  font-size: 0.72rem;
  color: var(--tinta-3);
  word-break: break-all;
}

.tarjeta-flecha { margin-left: auto; font-size: 1rem; color: var(--c); }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie {
  border-top: 2px solid var(--tinta);
  padding: 26px 20px 40px;
  font-size: 0.84rem;
  color: var(--tinta-3);
}

.pie-fila { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 560px) {
  .masthead-fila { padding: 12px 16px; gap: 12px; }
  .logo { font-size: 1.65rem; }
  .feed { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px 60px; }
  .tarjeta-titular { font-size: 1.5rem; }
}