/* Página de un solo producto.
   Se apoya en marca.css —cabecera, pie, botones, tipografía y colores— y
   solo añade lo que esta página tiene y el catálogo no: el retrato grande,
   la ficha técnica a tamaño de lectura y la fila de hermanos.
   Existe para que Google pueda leer un producto sin ejecutar JavaScript;
   por eso todo lo de aquí es HTML y CSS, sin un solo guion. */

.ficha-sola {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 22px 24px 64px;
}

/* ---------- Ruta ---------- */
.migas {
  font-size: 13px;
  color: var(--humo);
  margin-bottom: 22px;
}
.migas a { color: var(--humo); }
.migas a:hover { color: var(--granate); }

/* ---------- Producto ---------- */
.ficha-sola .cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
}
.retrato {
  background: var(--acero);
  border-radius: var(--radio);
  display: grid;
  place-items: center;
  padding: 26px;
}
.retrato img {
  width: 100%;
  height: auto;
  max-width: 360px;
  mix-blend-mode: multiply;
}

.datos .donde {
  font: 600 10.5px/1 var(--texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--granate);
  margin: 0 0 12px;
}
.datos h1 {
  font: 600 clamp(24px, 2.8vw, 34px)/1.15 var(--display);
  color: var(--grafito);
  margin: 0 0 24px;
  letter-spacing: -.012em;
  text-wrap: balance;
}
/* La tabla de especificaciones vive en catalogo.css, que sirve al raíl y a
   la rejilla y aquí no pinta nada. Se copian las cuatro reglas en vez de
   arrastrar una hoja entera de estilos ajenos. */
.ficha-sola .tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-bottom: 26px;
}
.ficha-sola .tabla th,
.ficha-sola .tabla td {
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.ficha-sola .tabla th {
  color: var(--humo);
  font-weight: 500;
  width: 38%;
  padding-right: 14px;
}
.ficha-sola .tabla td { color: var(--grafito); }
.ficha-sola .tabla caption {
  text-align: left;
  font: 600 10.5px/1 var(--texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenue);
  padding-bottom: 10px;
}

.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.datos .nota {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--humo);
  max-width: 56ch;
}

/* ---------- Hermanos ----------
   No es un adorno: son los enlaces por los que un buscador llega al resto
   del catálogo. Sin ellos las 6.394 páginas serían islas y solo se
   alcanzarían por el sitemap. */
.hermanos {
  margin-top: clamp(44px, 5vw, 70px);
  border-top: 1px solid var(--linea);
  padding-top: 26px;
}
.hermanos h2 {
  font: 600 17px/1.2 var(--display);
  color: var(--grafito);
  margin: 0 0 18px;
}
.hermanos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 14px;
}
.hermanos a {
  display: block;
  text-decoration: none;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px;
  background: var(--papel);
  color: var(--grafito);
  transition: border-color .2s, transform .2s;
}
.hermanos a:hover { border-color: var(--grafito); transform: translateY(-2px); }
.hermanos img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  margin-bottom: 9px;
}
.hermanos span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--humo);
}

@media (max-width: 760px) {
  .ficha-sola { padding: 16px 17px 48px; }
  .ficha-sola .cuerpo { grid-template-columns: 1fr; gap: 22px; }
  .retrato { padding: 18px; }
  .acciones .btn { flex: 1 1 100%; text-align: center; }
  .hermanos ul { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}

/* ---------- Páginas de categoría ----------
   Son las diez puertas de entrada del buscador al catálogo: HTML de verdad,
   una por categoría y paginadas de 60 en 60. Comparten la rejilla de
   `.hermanos`, que ya existía para los productos relacionados. */
.cabeza-cat { margin-bottom: clamp(30px, 4vw, 48px); max-width: 68ch; }
.cabeza-cat h1 {
  font: 600 clamp(27px, 3.4vw, 40px)/1.1 var(--display);
  color: var(--grafito);
  margin: 0 0 16px;
  letter-spacing: -.014em;
  text-wrap: balance;
}
.cabeza-cat .entrada {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--humo);
  margin: 0 0 24px;
}
.cabeza-cat .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

.tipos-cat { margin-bottom: clamp(34px, 4vw, 52px); }
.tipos-cat h2 {
  font: 600 10.5px/1 var(--texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0 0 14px;
}
.tipos-cat ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tipos-cat a {
  display: inline-flex; gap: 7px; align-items: baseline;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  color: var(--grafito);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.tipos-cat a:hover { border-color: var(--granate); color: var(--granate); }
.tipos-cat a span { color: var(--tenue); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.rejilla-cat-seo { border-top: 0; padding-top: 0; margin-top: 0; }
.rejilla-cat-seo h2 {
  font: 600 10.5px/1 var(--texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: 0 0 18px;
}

.paso-paginas {
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.paso-paginas span { color: var(--humo); font-size: 14px; margin-right: auto; }

/* ---------- Video de la categoría ----------
   Vertical, porque así se grabó: en el computador va al lado del texto de
   entrada y en el teléfono debajo. No arranca solo —`preload="none"`— así
   que la página no gasta un byte de video hasta que alguien lo pide. */
.cabeza-con-video {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(22px, 4vw, 54px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.cabeza-con-video .cabeza-cat { margin-bottom: 0; }
.video-cat { margin: 0; }
.video-cat video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  display: block;
  background: var(--acero);
  border-radius: var(--radio);
  object-fit: cover;
}
.video-cat figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--humo);
}
@media (max-width: 860px) {
  .cabeza-con-video { grid-template-columns: 1fr; }
  .video-cat { max-width: 320px; }
}

/* El video es alto —9:16— y al lado del solo encabezado dejaba un vacío de
   media pantalla. Los filtros de tipo suben a su misma altura. */
.col-izq { display: grid; align-content: start; }
.col-izq .tipos-cat { margin: clamp(26px, 3vw, 38px) 0 0; }