/* =============================================================
   TECNET — ENSAMBLES / PC GAMERS

   La tarjeta de equipo y la pagina que las lista. Se carga en la
   portada y en /ensambles/, que son los dos sitios donde aparecen.
   ============================================================= */

/* ---------- ENSAMBLES ---------- */
.tt-ensambles-grid{display:grid;gap:var(--s-4)}
@media (min-width:640px){.tt-ensambles-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tt-ensambles-grid{grid-template-columns:repeat(3,1fr)}}

.tt-ens-card{display:flex;flex-direction:column}
.tt-ens-card-img{position:relative;display:block;background:var(--tt-carbon);aspect-ratio:1}
.tt-ens-card-img img{width:100%;height:100%;object-fit:cover}

.tt-ens-badge{
  position:absolute;top:var(--s-3);left:var(--s-3);
  padding:var(--s-1) var(--s-2);border-radius:var(--radio-sm);
  background:var(--tt-azul-btn);color:#fff;
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.1em;
}
.tt-ens-agotado{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,11,13,.78);color:var(--tt-texto);font-weight:700;
}

.tt-ens-card-body{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);flex:1}
.tt-ens-card-titulo{font-size:1.05rem;line-height:1.3}
.tt-ens-card-titulo a:hover{color:var(--tt-azul-claro)}

.tt-ens-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tt-ens-chip{
  padding:2px var(--s-2);border-radius:var(--radio-sm);
  background:var(--tt-carbon);border:1px solid var(--tt-linea);
  font-size:var(--fs-micro);color:var(--tt-texto-2);
}

.tt-ens-precio{margin-top:auto;font-size:1.35rem;font-weight:800;color:var(--tt-texto)}
.tt-ens-precio del{font-size:var(--fs-small);font-weight:500;color:var(--tt-texto-2);margin-right:var(--s-2)}
.tt-ens-precio ins{text-decoration:none}

.tt-ensambles-mas{margin-top:var(--s-6);text-align:center}
.tt-ensambles-vacio{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  padding:var(--s-7) var(--s-4);text-align:center;
  border:1px dashed var(--tt-linea);border-radius:var(--radio);
}
.tt-aviso-admin{
  margin-bottom:var(--s-4);padding:var(--s-3) var(--s-4);
  border-left:4px solid var(--tt-alerta);border-radius:var(--radio-sm);
  background:rgba(245,165,36,.08);font-size:var(--fs-small);
}

/* =============================================================
   PAGINA PC GAMERS
   ============================================================= */

.tt-pcg-hero{
  padding-block:var(--s-7);
  background:
    radial-gradient(85% 130% at 20% 0%, rgba(11,124,237,.16), transparent 62%),
    var(--tt-carbon);
  border-bottom:1px solid var(--tt-linea);
}
.tt-pcg-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:var(--fs-h1);line-height:1.05;
  margin-block:var(--s-3);max-width:18ch;
}
.tt-pcg-sub{color:var(--tt-texto-2);font-size:1.05rem;max-width:62ch;line-height:1.7}

.tt-pcg-promesas{
  list-style:none;margin:var(--s-5) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
}
.tt-pcg-promesas li{
  position:relative;padding-left:var(--s-5);
  font-size:var(--fs-small);font-weight:600;
}
.tt-pcg-promesas li::before{
  content:'';position:absolute;left:0;top:.35em;
  width:16px;height:9px;
  border-left:2px solid var(--tt-naranja);border-bottom:2px solid var(--tt-naranja);
  transform:rotate(-45deg);
}

.tt-pcg-cuenta{color:var(--tt-texto-2);font-size:var(--fs-small);margin-bottom:var(--s-4)}

/* ---------- PAGINACION ---------- */
.tt-pcg-paginacion{margin-top:var(--s-6)}
.tt-pcg-paginacion ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);
}
.tt-pcg-paginacion a,
.tt-pcg-paginacion span{
  display:grid;place-items:center;
  min-width:44px;min-height:44px;padding:0 var(--s-3);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
  font-weight:600;font-size:var(--fs-small);
}
.tt-pcg-paginacion a:hover{border-color:var(--tt-azul);color:var(--tt-azul-claro)}
.tt-pcg-paginacion .current{background:var(--tt-azul-btn);border-color:var(--tt-azul-btn);color:#fff}

/* ---------- CIERRE ---------- */
.tt-pcg-cierre{
  padding-block:var(--s-7);text-align:center;
  background:
    radial-gradient(70% 140% at 50% 100%, rgba(230,105,3,.14), transparent 65%),
    var(--tt-carbon);
  border-top:1px solid var(--tt-linea);
}
.tt-pcg-cierre-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;font-size:var(--fs-h2);
}
.tt-pcg-cierre-texto{
  color:var(--tt-texto-2);margin-block:var(--s-3) var(--s-5);
  max-width:52ch;margin-inline:auto;
}
.tt-pcg-cierre-acciones{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center}

/* =============================================================
   RENDIMIENTO EN LA FICHA DEL ENSAMBLE

   Que tan bien corre cada juego y programa, segun los requisitos
   oficiales (o los FPS medidos en el taller). Mobile-first: una
   columna a 375 px, dos desde 700 px.
   Nunca se comunica solo por color: cada fila lleva su etiqueta.
   ============================================================= */
.tt-rend{margin-block:var(--s-5) var(--s-4)}
/* La ficha de WooCommerce es una grilla de dos columnas en escritorio: el bloque ocupa las dos. */
.woocommerce div.product .tt-rend{grid-column:1/-1}

.tt-rend-grupo{
  margin:var(--s-4) 0 var(--s-2);
  font-family:var(--tt-font);font-size:var(--fs-small);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tt-texto-2);
}
.tt-rend-lista{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s-3);
}
@media (min-width:700px){.tt-rend-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.tt-rend-lista{grid-template-columns:repeat(3,minmax(0,1fr))}}

.tt-rend-item{
  display:flex;flex-direction:column;gap:var(--s-2);min-width:0;
  padding:var(--s-3);
  background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio);
}
.tt-rend-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2)}
.tt-rend-nombre{font-weight:700;color:var(--tt-texto);overflow-wrap:anywhere}

.tt-rend-etiqueta,
.tt-rend-fps{font-size:var(--fs-small);font-weight:800}
.tt-rend-etiqueta{
  padding:2px var(--s-2);border:1px solid currentColor;border-radius:var(--radio-pill);
  text-align:right;
}

/* Colores por nivel. Todos pasan 4.5:1 sobre --tt-superficie. */
.is-alto{color:var(--tt-fps-alto)}
.is-medio{color:var(--tt-fps-medio)}
.is-bajo{color:var(--tt-fps-bajo)}
.is-nulo{color:var(--tt-error)}

/* Pasos: una marca por nivel que publica el desarrollador. */
.tt-rend-pasos{display:flex;gap:var(--s-1)}
.tt-rend-paso{flex:1;height:6px;border-radius:var(--radio-pill);background:var(--tt-linea)}
.tt-rend-paso.is-on{background:currentColor}
.tt-rend-pasos.is-nulo .tt-rend-paso{background:var(--tt-linea)}

.tt-rend-detalle{
  margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--tt-texto-2);
}
.tt-rend-fuente{
  display:inline-block;color:var(--tt-azul-claro);text-decoration:underline;
  text-underline-offset:2px;
}
.tt-rend-fuente:hover{color:var(--tt-texto)}

/* Estado "Medido en nuestro taller": es el dato fuerte, se distingue del estimado. */
.tt-rend-estado--medido{
  display:inline-block;padding:1px var(--s-2);margin-right:var(--s-1);
  border-radius:var(--radio-sm);background:rgba(45,183,66,.14);
  color:var(--tt-fps-alto);font-weight:700;
}

/* Barra de FPS medidos */
.tt-bench-track{height:8px;border-radius:var(--radio-pill);background:var(--tt-linea);overflow:hidden}
.tt-bench-bar{height:100%;border-radius:var(--radio-pill);background:currentColor}

.tt-rend-nota{
  margin:var(--s-4) 0 0;max-width:72ch;
  font-size:var(--fs-small);line-height:1.6;color:var(--tt-texto-2);
}

/* =============================================================
   FICHA DEL ENSAMBLE: specs clave, ficha tecnica y componentes
   ============================================================= */

/* Cuatro specs clave en el resumen, junto al precio. */
.tt-ens-claves{
  list-style:none;margin:var(--s-3) 0;padding:0;
  display:grid;gap:var(--s-2);
}
.tt-ens-clave{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  padding:var(--s-2) var(--s-3);
  background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
}
.tt-ens-clave-et{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tt-texto-2)}
.tt-ens-clave-val{font-size:var(--fs-small);font-weight:600;color:var(--tt-texto);overflow-wrap:anywhere}
@media (min-width:480px){.tt-ens-claves{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Ficha tecnica: dos columnas desde 800 px. */
.woocommerce div.product .tt-ficha-tec{grid-column:1/-1}
.tt-ficha-tec{margin-block:var(--s-5) var(--s-4)}
.tt-ficha-tec-cols{display:grid;gap:var(--s-4)}
@media (min-width:800px){.tt-ficha-tec-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}}
.tt-ficha-tec-col{min-width:0}

.tt-specs{margin:0;padding:0;border:1px solid var(--tt-linea);border-radius:var(--radio);overflow:hidden}
.tt-specs-fila{
  display:grid;gap:2px;padding:var(--s-2) var(--s-3);
  background:var(--tt-superficie);border-top:1px solid var(--tt-linea);
}
.tt-specs-fila:first-child{border-top:0}
.tt-specs-fila dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tt-texto-2)}
.tt-specs-fila dd{margin:0;font-size:var(--fs-small);color:var(--tt-texto);overflow-wrap:anywhere}
@media (min-width:480px){
  .tt-specs-fila{grid-template-columns:minmax(7rem,30%) 1fr;gap:var(--s-3);align-items:baseline}
}

.tt-comps{list-style:none;margin:0;padding:0;border:1px solid var(--tt-linea);border-radius:var(--radio);overflow:hidden}
.tt-comps-item{
  display:grid;gap:2px;padding:var(--s-2) var(--s-3);
  background:var(--tt-superficie);border-top:1px solid var(--tt-linea);
}
.tt-comps-item:first-child{border-top:0}
.tt-comps-marca{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tt-texto-2);overflow-wrap:anywhere}
.tt-comps-nombre{font-size:var(--fs-small);color:var(--tt-texto);overflow-wrap:anywhere}
.tt-comps-nombre a{color:var(--tt-azul-claro);text-decoration:underline;text-underline-offset:2px}
.tt-comps-nombre a:hover{color:var(--tt-texto)}
@media (min-width:480px){
  .tt-comps-item{grid-template-columns:minmax(7rem,30%) 1fr;gap:var(--s-3);align-items:baseline}
}