/* ============================================================
   Licio Lorenzoni — Sección "Noticias de Tech" (/tech)
   ------------------------------------------------------------
   Hermano de /blog y /f1. Carga DESPUÉS de:
     1. colors_and_type.css   (tokens base)
     2. blog.css              (layout, prose, nav, footer)
     3. tech.css              (este archivo)

   Regla de oro del contrato de integración:
   NO se renombra ninguna variable. Aquí sólo se SOBREESCRIBEN
   VALORES de tokens existentes (--accent y variantes) y se
   AÑADEN tokens nuevos propios de Tech (prefijo --tech-*).
   Identidad: acento TEAL eléctrico + display Space Grotesk.
   ============================================================ */

/* ---------- 1 · ACENTO PROPIO — teal eléctrico (modo claro) ---------- */
/* Sobreescribe los mismos nombres de variable del sistema. */
:root {
  --accent:             #0AA593;  /* fills, marcadores, subrayado activo */
  --accent-hover:       #08897A;
  --accent-press:       #066B5F;
  --accent-soft:        #DEF7F2;  /* tinte de fondo (tags, callouts) */
  --accent-soft-border: #B2ECE1;
  --accent-fg:          #07786B;  /* TEXTO de acento sobre bg claro · AA */
  --fg-onaccent:        #042B26;  /* tinta oscura sobre botón teal · AA */
  --selection:          #CFF3EC;

  /* placeholder de imagen — glow teal en lugar de cobalto */
  --grid-line: rgba(10, 165, 147, 0.12);

  /* ---------- Tokens NUEVOS propios de Tech ---------- */
  --tech-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --tech-good:    #1F9D63;   /* puntaje alto */
  --tech-mid:     #C77A1A;   /* puntaje medio */
  --tech-low:     #C2403C;   /* puntaje bajo */
  --tech-track:   var(--bg-subtle);  /* pista del anillo de puntaje */
  --tech-feed-rule: var(--hairline);
}

/* ---------- 1b · ACENTO TEAL (modo oscuro) ---------- */
[data-theme="dark"] {
  --accent:             #2DD4BF;
  --accent-hover:       #5EEAD4;
  --accent-press:       #14B8A6;
  --accent-soft:        #0E2F2A;
  --accent-soft-border: #1E4D46;
  --accent-fg:          #5EEAD4;  /* texto teal claro sobre fondo oscuro */
  --fg-onaccent:        #042B26;  /* tinta oscura sobre teal brillante */
  --selection:          #123E38;

  --grid-line: rgba(45, 212, 191, 0.16);

  --tech-good: #36C285;
  --tech-mid:  #E0A14A;
  --tech-low:  #E06360;
  --tech-track: var(--bg-subtle);
}

/* ---------- 2 · TÍTULOS CON DISPLAY PROPIO ---------- *
   Sólo los titulares de Tech adoptan Space Grotesk; la PROSA
   del artículo hereda intacta la tipografía editorial del blog. */
.tech-id h1,
.tech-hero__title,
.tech-card__title,
.tech-review-head h1,
.list-head h3.tech-list-head,
.tech-verdict__score-big {
  font-family: var(--tech-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
/* Space Grotesk no tiene cursiva real: el énfasis va por color, no italic */
.tech-id h1 em,
.tech-hero__title em { font-style: normal; color: var(--accent-fg); }

/* ---------- 3 · IDENTIDAD DE SECCIÓN ---------- */
.tech-id { padding: var(--space-9) 0 var(--space-6); }
.tech-id__inner { max-width: 54rem; }
.tech-id__kicker { margin-bottom: var(--space-4); display: inline-block; }
.tech-id h1 {
  font-size: clamp(2.5rem, 6vw, var(--text-4xl));
  line-height: var(--leading-tight);
  color: var(--fg-strong);
  margin-bottom: var(--space-4);
}
.tech-id__sub {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  max-width: 40rem;
}

/* ---------- 4 · CHIP DE CATEGORÍA (con ícono) ---------- */
.cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--accent-fg);
  background: var(--accent-soft);
  border: var(--border-hairline) solid var(--accent-soft-border);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.cat svg { width: 13px; height: 13px; stroke-width: 2; }

/* ---------- 5 · BARRA DE FILTRO POR CATEGORÍA ---------- *
   Sticky bajo el header. Sin JS se ven TODOS los chips y todas
   las reseñas (los chips son enlaces/botones inertes hasta que
   tech.js los activa). */
.filterbar {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--border-hairline) solid var(--hairline);
}
.filterbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-3) var(--space-6);
  max-width: var(--container);
  margin-inline: auto;
}
.filterbar__inner::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .filterbar__inner { padding-inline: var(--space-4); } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-muted);
  background: var(--bg-surface);
  border: var(--border-hairline) solid var(--border);
  padding: 7px 14px 7px 11px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.chip svg { width: 15px; height: 15px; stroke-width: 1.9; flex-shrink: 0; }
.chip:hover { color: var(--fg-strong); border-color: var(--border-strong); background: var(--bg-subtle); }
.chip:active { transform: translateY(0.5px) scale(0.99); }
.chip[aria-pressed="true"] {
  color: var(--fg-onaccent);
  background: var(--accent);
  border-color: var(--accent);
}
.chip[aria-pressed="true"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chip__count {
  font-size: var(--text-2xs);
  color: var(--fg-faint);
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  margin-left: 1px;
}
.chip[aria-pressed="true"] .chip__count {
  color: var(--fg-onaccent);
  background: color-mix(in srgb, var(--fg-onaccent) 16%, transparent);
}

/* ---------- 6 · BADGE DE PUNTAJE — anillo de progreso ---------- */
.score {
  position: relative;
  display: inline-grid;   /* funciona como <span> y como <div> */
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.score--lg { width: 92px; height: 92px; }
.score__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.score__track {
  fill: none;
  stroke: var(--tech-track);
  stroke-width: 3.4;
}
.score__bar {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.4;
  stroke-linecap: round;
  /* pathLength="100" → dasharray = puntaje·10 (ej. 8.6 → "86 100") */
  transition: stroke-dasharray var(--dur-slow) var(--ease);
}
.score--good .score__bar { stroke: var(--tech-good); }
.score--mid  .score__bar { stroke: var(--tech-mid); }
.score--low  .score__bar { stroke: var(--tech-low); }
.score__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--tech-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}
.score--lg .score__num { font-size: 1.75rem; }
.score--lg .score__bar, .score--lg .score__track { stroke-width: 4; }

/* ---------- 7 · RESEÑA DESTACADA (hero / pinned) ---------- */
.tech-hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 860px) { .tech-hero { grid-template-columns: 1fr; gap: var(--space-5); } }
.tech-hero__media { position: relative; aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .tech-hero__media { aspect-ratio: 16 / 9; order: -1; } }
.tech-hero__pin {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-onaccent);
  background: var(--accent);
  padding: 4px 9px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.tech-hero__pin svg { width: 12px; height: 12px; }
.tech-hero__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.tech-hero__title {
  font-size: clamp(1.9rem, 4vw, var(--text-3xl));
  line-height: 1.1;
  color: var(--fg-strong);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.tech-hero__brand {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.tech-hero__excerpt {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  margin-bottom: var(--space-5);
  max-width: 34rem;
}
.tech-hero__foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.tech-hero__meta {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* ---------- 8 · TARJETA DE RESEÑA ---------- */
.tech-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--dur) var(--ease-out);
}
.tech-card:hover { transform: translateY(-3px); }
.tech-card__media { position: relative; aspect-ratio: 16 / 10; }
/* el anillo de puntaje flota sobre la portada */
.tech-card__score {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.tech-card__cat { position: absolute; top: var(--space-3); left: var(--space-3); }
.tech-card__brand {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.tech-card__title {
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--fg-strong);
  transition: color var(--dur-fast) var(--ease);
  text-wrap: pretty;
}
.tech-card:hover .tech-card__title { color: var(--accent-fg); }
.tech-card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.tech-card__foot {
  margin-top: auto;
  padding-top: var(--space-1);
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-faint);
}

/* tarjeta filtrada (oculta por JS) */
.is-hidden { display: none !important; }

/* estado "sin resultados" */
.no-results {
  display: none;
  padding: var(--space-7) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.no-results.is-on { display: block; }

/* ---------- 9 · "LO ÚLTIMO" — feed de noticias (terminal/denso) ---------- */
.feed {
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}
.feed__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-hairline) solid var(--hairline);
  background: var(--bg-subtle);
}
.feed__head-l { display: inline-flex; align-items: center; gap: var(--space-3); }
.feed__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.feed__title-txt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-strong);
}
.feed__src-note {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.feed__list { display: flex; flex-direction: column; }
.feed__item {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-hairline) solid var(--tech-feed-rule);
  transition: background var(--dur-fast) var(--ease);
}
.feed__item:last-child { border-bottom: 0; }
.feed__item:hover { background: var(--bg-subtle); }
.feed__source {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed__headline {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--fg);
  text-wrap: pretty;
  transition: color var(--dur-fast) var(--ease);
}
.feed__item:hover .feed__headline { color: var(--fg-strong); }
.feed__time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-faint);
  white-space: nowrap;
}
.feed__ext {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  color: var(--fg-faint);
  border: var(--border-hairline) solid transparent;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.feed__ext svg { width: 15px; height: 15px; stroke-width: 2; }
.feed__item:hover .feed__ext {
  color: var(--accent-fg);
  background: var(--accent-soft);
  border-color: var(--accent-soft-border);
}
/* responsive: en móvil la fuente baja a su propia línea */
@media (max-width: 680px) {
  .feed__item {
    grid-template-columns: 1fr auto;
    grid-template-areas: "src ext" "head head" "time ext";
    gap: var(--space-1) var(--space-3);
    row-gap: 6px;
  }
  .feed__source { grid-area: src; }
  .feed__headline { grid-area: head; }
  .feed__time { grid-area: time; }
  .feed__ext { grid-area: ext; align-self: center; }
}

/* ---------- 10 · ARTÍCULO DE RESEÑA — cabecera ---------- */
.tech-review-head { padding: var(--space-8) 0 var(--space-6); }
.tech-review-head__inner { max-width: var(--container-narrow); margin-inline: auto; }
.tech-review-head__row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.tech-review-head h1 {
  font-size: clamp(2rem, 5vw, var(--text-3xl));
  line-height: 1.08;
  color: var(--fg-strong);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.tech-review-head__lead {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  margin-bottom: var(--space-6);
}
.tech-review-head__brand {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- 11 · BLOQUE VEREDICTO ---------- */
.tech-verdict {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-8);
  padding-inline: var(--space-6);
}
.tech-verdict__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: center;
  background: var(--accent-soft);
  border: var(--border-hairline) solid var(--accent-soft-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
}
@media (max-width: 560px) { .tech-verdict__inner { grid-template-columns: 1fr; gap: var(--space-5); text-align: center; justify-items: center; } }
.tech-verdict__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-fg);
  margin-bottom: var(--space-2);
}
.tech-verdict__phrase {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--fg-strong);
  text-wrap: pretty;
}
.tech-verdict__scale {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-top: var(--space-3);
}

/* ---------- 12 · FICHA TÉCNICA (specs) ---------- */
.tech-specs { max-width: var(--container-narrow); margin: var(--space-8) auto; padding-inline: var(--space-6); }
.tech-specs__h {
  font-family: var(--tech-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--hairline);
}
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--space-3) var(--space-2);
  border-bottom: var(--border-hairline) solid var(--hairline);
  vertical-align: top;
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
  width: 38%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.spec-table td {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-strong);
}

/* ---------- 13 · PROS Y CONTRAS ---------- */
.tech-pc { max-width: var(--container-narrow); margin: var(--space-8) auto; padding-inline: var(--space-6); }
.tech-pc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 560px) { .tech-pc__grid { grid-template-columns: 1fr; } }
.pc-col {
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--bg-surface);
}
.pc-col__h {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.pc-col--pro .pc-col__h { color: var(--tech-good); }
.pc-col--con .pc-col__h { color: var(--tech-low); }
.pc-col__h svg { width: 16px; height: 16px; stroke-width: 2.2; }
.pc-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pc-col li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.pc-col li::before {
  position: absolute; left: 0; top: 0.05em;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
}
.pc-col--pro li::before { content: "+"; color: var(--tech-good); }
.pc-col--con li::before { content: "\2212"; color: var(--tech-low); }

/* ---------- 14 · PRECIO / DÓNDE COMPRAR ---------- */
.tech-price { max-width: var(--container-narrow); margin: var(--space-8) auto; padding-inline: var(--space-6); }
.price-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-surface);
  flex-wrap: wrap;
}
.price-card__l { display: flex; flex-direction: column; gap: 2px; }
.price-card__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.price-card__value {
  font-family: var(--tech-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
}
.price-card__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); }

/* ---------- 15 · SECCIÓN LECTURA — wrapper ---------- */
.tech-body { padding-top: var(--space-4); }

/* utilidad: ocultar el bloque "sin JS" cuando JS está activo */
.js .nojs-only { display: none; }

/* ---------- IMAGEN REAL sobre el placeholder (drop-in) ----------
   Coloca un <img class="ph__img"> dentro de cualquier .ph / media.
   Si la imagen carga, tapa la rejilla, el glow y el chip de label.
   Si falla (404), el onerror la quita y vuelve a verse el placeholder.
   Los overlays (chip de categoría, puntaje, "fijado") quedan encima. */
.ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 1;
}
.tech-hero__pin,
.tech-card__cat,
.tech-card__score { z-index: 2; }

/* ============================================================
   Serie / reportaje — lista de partes al pie de una nota.
   (añadido por la integración /tech; usa solo tokens del sistema)
   ============================================================ */
.tech-series { list-style: none; margin: 0; padding: 0; }
.tech-series li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline);
}
.tech-series li:last-child { border-bottom: 0; }
.tech-series li a { display: flex; align-items: center; gap: var(--space-3); }
.tech-series__n {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem;
  display: inline-grid; place-items: center; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-fg);
  border: 1px solid var(--accent-soft-border);
  font-family: var(--tech-display); font-weight: 600; font-size: var(--text-sm);
}
.tech-series__t { font-family: var(--tech-display); font-weight: 500; }
.tech-series li.is-current .tech-series__n {
  background: var(--accent); color: var(--fg-onaccent); border-color: var(--accent);
}
.tech-series li.is-current .tech-series__t { color: var(--fg-strong); }