/* ============================================================================
   PUENTE v4 · FICHA DE EXTENSIÓN Y HUB DE LA SUITE
   Reutiliza la «ventana de navegador» (`.win`, en components.css), la misma que
   enseña la sección de extensiones de la portada.
   ========================================================================== */

.prod-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-3xl);
  align-items: center;
}
.prod-hero__text { display: flex; flex-direction: column; gap: var(--space-lg); }
.prod-hero__text h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.025em; }
.prod-hero__meta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.prod-hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

@media (max-width: 900px) {
  .prod-hero__grid { grid-template-columns: 1fr; }
}


/* ── Las otras extensiones ───────────────────────────────────────────────── */
.prod-others {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}
.prod-other {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .prod-other:hover { border-color: var(--divider); transform: translateY(-2px); }
}
.prod-other img { border-radius: 6px; flex: 0 0 auto; }
.prod-other strong { display: block; font-size: var(--text-sm); }
.prod-other em { font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); }

/* ── Hub de la suite ─────────────────────────────────────────────────────── */
.suite { display: flex; flex-direction: column; gap: var(--space-md); }
.suite__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
}
.suite__id { display: flex; align-items: center; gap: var(--space-lg); min-width: 0; }
.suite__id img { border-radius: 8px; flex: 0 0 auto; }
.suite__id h2 { margin-bottom: 2px; }
.suite__id a:hover { color: var(--accent-blue); }
.suite__meta { display: flex; align-items: center; gap: var(--space-md); color: var(--text-tertiary); }

@media (max-width: 760px) {
  .suite__row { grid-template-columns: 1fr; gap: var(--space-md); }
  .suite__go { justify-self: start; }
}

/* En el hub la marca tipográfica ocupa el mismo hueco que un logo de 34 px. */
.suite__id .exts__mark { width: 34px; height: 34px; border-radius: 9px; font-size: 15px; }

/* ============================================================================
   FICHA COMPLETA (v4.2) — el cuerpo largo: índice, pasos, funciones, modos,
   límites, requisitos, novedades y preguntas.
   Hasta la 4.1 la ficha eran tres párrafos y tres destacados; el propietario
   pidió que contara «absolutamente todo» lo que hace cada extensión.
   ========================================================================== */

/* ── Índice pegajoso ──────────────────────────────────────────────────────
   Solo en pantallas anchas y solo si la ficha tiene más de cinco secciones
   (lo decide la plantilla). En una columna estrecha estorbaría más que ayuda. */
.prod-body--toc { position: relative; }

.prod-toc { display: none; }

@media (min-width: 1180px) {
  .prod-body--toc {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--space-3xl);
    max-width: var(--col-wide);
    margin-inline: auto;
    padding-inline: var(--space-2xl);
  }
  /* Dentro de la rejilla, las secciones ya no necesitan su propia columna
     centrada: el ancho lo pone la rejilla. */
  .prod-body--toc .col { padding-inline: 0; max-width: none; }
  .prod-body--toc .panel--sunken,
  .prod-body--toc .panel--dark {
    border-radius: var(--radius-hero);
    padding-inline: var(--space-2xl);
  }

  .prod-toc {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-2xl));
    align-self: start;
    padding-top: var(--space-4xl);
  }
  .prod-toc__title {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
  }
  .prod-toc ol { display: flex; flex-direction: column; gap: 2px; }
  .prod-toc a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border-left: 2px solid var(--hairline-strong);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .prod-toc a:hover { color: var(--text-primary); border-left-color: var(--accent-blue); }
}

/* ── Qué hace ─────────────────────────────────────────────────────────────── */
.prod-about { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-2xl); max-width: 68ch; }

/* ── Pasos ────────────────────────────────────────────────────────────────
   Aquí SÍ hay números en círculo: es un proceso con orden, y es lo que el
   lector busca al bajar («¿qué hago primero?»). */
.prod-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
  margin-top: var(--space-3xl);
}
.prod-step { display: flex; gap: var(--space-lg); align-items: flex-start; }
.prod-step__n {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--accent-blue);
  color: var(--text-on-accent);
  font-size: var(--text-sm);
  font-weight: 700;
}
.prod-step h3 { margin-bottom: var(--space-sm); }

/* ── Todas las funciones, por grupos ──────────────────────────────────────── */
.prod-group { margin-top: var(--space-3xl); }
.prod-group__title {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-tertiary);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline-strong);
}
.prod-caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl) var(--space-2xl);
  margin-top: var(--space-xl);
}
.prod-cap { display: flex; flex-direction: column; gap: 2px; }
.prod-cap strong { font-size: var(--text-sm); color: var(--text-primary); }
.prod-cap span { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* ── Modos y opciones ─────────────────────────────────────────────────────── */
.prod-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
}
.prod-mode { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); }

/* ── Viñetas de Studio y de requisitos ────────────────────────────────────── */
.prod-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  max-width: 72ch;
}
.prod-points li {
  position: relative;
  padding-left: var(--space-xl);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.prod-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-blue);
}
.prod-req { display: flex; flex-direction: column; gap: var(--space-lg); }
.prod-req a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ── Límites y planes ─────────────────────────────────────────────────────── */
.prod-limits {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3xl);
  font-size: var(--text-sm);
  /* Sin esto, en móvil la tabla se estruja y las tres columnas de plan quedan
     en una palabra por línea. La envuelve un `.scroll-x`. */
  min-width: 560px;
}
.prod-limits th,
.prod-limits td {
  padding: var(--space-lg) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--hairline-strong);
  vertical-align: top;
}
.prod-limits thead th {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-tertiary);
}
.prod-limits tbody th { color: var(--text-primary); font-weight: 600; }
.prod-limits td { color: var(--text-secondary); }
.prod-limits .is-pro { color: var(--text-primary); font-weight: 600; }

/* ── Novedades ────────────────────────────────────────────────────────────── */
.prod-releases { display: flex; flex-direction: column; gap: var(--space-2xl); margin-top: var(--space-3xl); }
.prod-release {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--hairline-strong);
}
.prod-release__v {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-lg);
  font-weight: 700;
}
.prod-release ul { display: flex; flex-direction: column; gap: var(--space-md); }
.prod-release li {
  position: relative;
  padding-left: var(--space-xl);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.prod-release li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface-3);
}
@media (max-width: 700px) {
  .prod-release { grid-template-columns: 1fr; gap: var(--space-md); }
  .prod-release__v { flex-direction: row; align-items: center; }
}

/* ── Preguntas ────────────────────────────────────────────────────────────── */
.prod-faq { margin-top: var(--space-2xl); }

/* ── Hub: tres funciones por extensión ────────────────────────────────────
   El índice tenía solo nombre, plataforma y versión, y obligaba a entrar en
   las ocho fichas para saber cuál servía. Las tres viñetas salen del mismo
   catálogo que la ficha, así que no pueden decir cosas distintas. */
.suite__bullets { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-md); }
.suite__bullets li {
  position: relative;
  padding-left: var(--space-lg);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.suite__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-blue);
}
.suite__go { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); }
.suite__more { font-size: var(--text-xs); color: var(--text-tertiary); }
.suite__more:hover { color: var(--accent-blue); }
.suite__meta { flex-wrap: wrap; }
@media (max-width: 760px) {
  .suite__go { align-items: flex-start; }
}