/* ═══════════════════════════════════════════════════════════════════════════
   EXPERIMENTO — CATÁLOGO. LA TARJETA DE PORSCHE, ADAPTADA.

   La primera versión de esta página me la inventé: leí dos artículos sobre
   cómo las marcas de lujo separan gama, saqué un principio abstracto y monté
   tarjetas de 360x480 sobre negro. El dueño lo vio y tenía razón: "parece que
   te lo inventaste y no tomaste ninguna referencia".

   Así que se midió su LISTADO DE MODELOS (2026-09-06), que es exactamente
   esta página —un catálogo de familias y variantes con precio—:

     h1 de la página      26,7px / 400   (no 34: un índice no compite)
     nombre del modelo    20,5px / 400
     cifra de dato        18,1px / 400 + pie de 14px al 70%
     botón                299x56, radio 12, texto 16px / 400
     foto                 tira ancha, ratio 3,36, radio 0

   Y DOS HALLAZGOS QUE CAMBIARON EL DISEÑO:

   1. El 718 Cayman, el Cayman S y el GTS 4.0 usan LA MISMA TARJETA. Porsche
      no le da diseño propio a la variante cara: la diferencia la hacen el
      nombre, las cifras y el precio. Aquí igual — una sola tarjeta.

   2. Nada va detrás de un acordeón: su página mide 19.990px en móvil y lo
      enseña todo. Coincide con Baymard, cuyas pruebas encuentran que el
      contenido que exige una interacción para verse se pasa por alto.

   Lo que NO se copia es el fondo blanco: el sitio es oscuro y cambiarlo aquí
   rompería su identidad. Se adopta la ESTRUCTURA, no el color.
   ═══════════════════════════════════════════════════════════════════════════ */

body.lab-listado { padding-bottom: 0; }

.lab-cab {
  padding: clamp(64px, 16vw, 120px) var(--margen) clamp(32px, 8vw, 56px);
  display: grid;
  gap: 12px;
}
.lab-cab h1 {
  margin: 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  /* ANTES: 26,7px, "porque un índice no lleva titular de héroe". Ese
     razonamiento venía de una página SUELTA, sin cabecera de sitio encima ni
     gamas con titulares debajo. Metida en el sitio dejó de valer: medido, el
     título quedaba a 26px y el nombre de un servicio High-Class a 23,2px en
     DORADO, o sea 1,12 de ratio y más fuerza de color abajo que arriba. La
     escala tipográfica pide 1,333 como mínimo para que dos niveles se
     distingan; por debajo de eso son el mismo nivel y la página se lee plana.

     34px es además exactamente lo que mide el titular de la portada, así que
     las dos aperturas del embudo abren igual. Ratio contra el nombre de
     servicio: 34/23,2 = 1,47. */
  font-size: clamp(2.125rem, 8.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.02em;
}
/* El rótulo que le faltaba. Cada gama de abajo tiene el suyo ("When nothing
   gets rushed"), así que el TÍTULO DE LA PÁGINA era lo único sin contexto
   encima: por eso las secciones se veían más compuestas que la cabecera que
   las manda. La ley lo contempla: "an eyebrow sits above a title to give
   context". */
.lab-cab .aui-eyebrow {
  margin: 0 0 2px;
  color: var(--tinta-tenue);
}
.lab-cab-lead {
  margin: 0;
  font-size: clamp(1.0625rem, 4.2vw, 1.2rem);
  line-height: 1.42;
  color: var(--tinta-suave);
  max-width: 36ch;
}

/* ── CABECERA DE GAMA ─────────────────────────────────────────────────────
   20,5px, igual que el nombre de un modelo. En su listado la familia NO grita
   más que sus variantes: sólo las ordena. */
/* El relleno INFERIOR era 0 y la siguiente sección empezaba 34px antes de
   que acabara la última tarjeta: se solapaban. Medido en 360, 390, 900 y
   1440 — pasaba en las tres gamas, no sólo en High-Class.
   Un suelo de sección sin relleno abajo no es una decisión, es un olvido. */
.lab-gama {
  padding: clamp(32px, 8vw, 64px) var(--margen) clamp(40px, 10vw, 72px);
}
.lab-gama-cab { display: grid; gap: 6px; margin-bottom: 20px; }
.lab-gama h2 {
  margin: 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: normal;
}
.lab-gama-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta-tenue);
  max-width: 42ch;
}
.lab-gama-lista { display: grid; gap: 16px; }

/* ── LA TARJETA ───────────────────────────────────────────────────────────
   La foto va arriba en tira ancha y la tarjeta empieza justo debajo. En la
   suya el coche desborda el borde superior; aquí no se imita ese recorte
   porque exige fotos con fondo recortado, y las de un detallado no lo tienen:
   copiarlo con una foto normal deja un rectángulo cortado a media carrocería.
   Se adopta la PROPORCIÓN de la tira, que es lo que da el aire. */
/* LA TARJETA TIENE QUE PESAR COMO UN OBJETO, NO COMO UN RECUADRO.
   El dueño: «las tarjetas están bien pero les falta algo más, no sé qué».
   Medido en píxeles reales: la tarjeta salía MÁS OSCURA que su propio suelo
   —rgb(12,13,15) sobre rgb(18,19,22)— y se despegaba 1,05:1. O sea que no se
   leía como una superficie elevada: la dibujaba sólo una línea de 1px.

   En interfaz oscura la regla es la contraria y está bien documentada
   (Material, tema oscuro): elevar es ACLARAR. Una superficie más alta recibe
   una capa blanca semitransparente sobre el lienzo; cuanto más alta, más
   clara. El suelo de estas gamas lleva además un degradado que la aclaraba
   por encima de la tarjeta, así que el velo de 3,5% no llegaba.

   Sube a 9%, que es lo medido para quedar POR ENCIMA del punto más claro del
   degradado, y el borde acompaña. La sombra ya estaba. */
.lab-t {
  border-radius: 16px;
  overflow: hidden;
  /* LA SUPERFICIE NO ES PLANA. El dueño: «se mira como un borde simple aún».
     Tenía razón: un velo de un solo valor es un rectángulo pintado, no una
     superficie. Una pieza real recibe la luz por arriba, así que el velo
     DEGRADA -más claro arriba, más apagado abajo-. Es el mismo recurso que ya
     usa el suelo de la gama alta unas líneas más abajo. */
  --velo-tarjeta: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.075) 42%,
    rgba(255, 255, 255, 0.055) 100%
  );
  background: var(--velo-tarjeta);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* SOBRE EL SUELO CLARO, LA TARJETA VA BLANCA.
   Ahí el velo blanco no sirve: sobre un lienzo claro aclarar no eleva nada
   —medido, 1,01:1: el MISMO píxel que el fondo—. El patrón de toda la vida es
   tarjeta blanca sobre lienzo gris, que es lo que separa sin dibujar cajas. */
.lab-gama--especial .lab-t {
  background: #fff;
  border-color: rgba(20, 22, 26, 0.10);
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.10);
}
.lab-t-foto {
  display: block;
  /* 1,78 (16:9) Y NO 3,36.
     3,36 lo copié de la banda de una tarjeta de coche y es casi el DOBLE del
     ratio más ancho que se usa para tarjetas de producto --16:9--; los
     estándares van de 1:1 a 16:9 y nada se acerca a 3,36. En una banda así
     una foto 4:3 enseña el 40% de su alto: no se ve el trabajo, se ve una
     rendija. A 16:9 enseña el 75%.

     De paso arregla un desajuste real: el pipeline genera la tira a 1440x500
     (2,88) para que el navegador no descargue píxeles que no va a enseñar, y
     mi caja pedía 3,36 --o sea que en producción el archivo y la caja no
     coincidían y la tira se recortaba otra vez por los lados--. */
  aspect-ratio: 1.78;
  overflow: hidden;
}
/* `video` y no solo `img`: dos de los ocho servicios activos tienen clip
   subido desde el panel, y sin esto salian a tamano natural. */
.lab-t-foto img,
.lab-t-foto video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-t-cuerpo { padding: 20px; display: grid; gap: 0; }
.lab-t-nombre {
  /* 4 y no 6: la escala del sistema es de 4 y el ritmo de la tarjeta salía
     6-2-16-20-20-4, que es irregular sin motivo. Medido con el DOM. */
  margin: 0 0 4px;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.28rem;      /* 20,5px */
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: normal;
}
.lab-t-precio {
  margin: 0;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.lab-t-nota { margin: 4px 0 0; font-size: 14px; color: var(--tinta-tenue); }

/* CHIPS: uno activo y el resto en gris, como sus "2025 / Gasoline / RWD". */
.lab-t-chips {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lab-t-chips li {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--tinta-suave);
}
.lab-t-chips li.es-activo {
  background: var(--tinta);
  color: var(--tinta-invertida);
}

/* BLOQUES DE CIFRA: 18px el número, 14px el pie. Compactos, como en su
   listado —los enormes son cosa de la página del modelo—. */
.lab-t-datos {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.lab-t-cifra {
  margin: 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.13rem;
  font-weight: 400;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.lab-t-pie { margin: 2px 0 0; font-size: 14px; color: var(--tinta-tenue); line-height: 1.35; }

/* ── «SEE WHAT'S INCLUDED»: DE ENLACE A BOTÓN ──────────────────────────────
   Era un enlace subrayado que se iba a la ficha. Dos problemas, y el dueño
   nombró los dos: «debe verse mejor ese botón», y que para comparar lo que
   incluyen tres servicios había que entrar y volver tres veces.

   Ahora ABRE UNA VENTANA, así que tiene que parecer un control y no un enlace
   de texto: caja, borde, icono y —lo que de verdad convence de pulsar— EL
   NÚMERO DE PASOS a la derecha. La promesa deja de ser abstracta: no es «ver
   qué incluye», es «ver los 22». */
.lab-t-detalle {
  margin-top: 20px;
  justify-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--tinta-suave);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  -webkit-text-size-adjust: 100%;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}
.lab-t-detalle > span:first-of-type {
  min-width: 0;
  /* Google Translate alarga lo corto hasta un 300 %: que parta antes de
     empujar la cifra fuera de la caja. */
  overflow-wrap: anywhere;
}
/* LA CIFRA, empujada al extremo. `margin-left: auto` y no una rejilla: el
   texto puede ocupar una o dos líneas según el idioma y una rejilla de dos
   columnas le fijaría el ancho a la más larga. */
.lab-t-detalle-n {
  margin-left: auto;
  flex: none;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.lab-t-detalle:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
}
.lab-t-detalle:focus-visible {
  outline: 2px solid var(--brand-red, #dc2626);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .lab-t-detalle {
    transition: none;
  }
}
.lab-t-cta { margin-top: 8px; width: 100%; }

@media (min-width: 900px) {
  .lab-cab, .lab-gama { max-width: 1180px; margin-inline: auto; }
  .lab-gama-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .lab-t { display: flex; flex-direction: column; }
  .lab-t-cuerpo { flex: 1 1 auto; align-content: start; }
  .lab-t-cta { margin-top: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LA ESCALERA DE GAMA, CON SUS PROPIAS SEÑALES

   Medido en dos páginas suyas distintas el 2026-09-06:

     listado de modelos      nombre 20,5px PESO 400, foto en tira 3,36
     Exclusive Manufaktur    nombre PESO 600, foto CUADRADA que ES la tarjeta

   O sea que Porsche sí distingue una categoría cara, y lo hace con tres
   señales: el PESO de la tipografía, la PROPORCIÓN de la foto y si la foto es
   un adorno o es la tarjeta entera.

   (Ojo: yo había escrito antes en el CSS que "Porsche nunca usa negrita".
   Era falso. No la usan en las páginas de modelo; su gama a medida va entera
   a 600. Medir una sección y generalizar a todo el sitio es justo el error
   que llevó a que las especiales parecieran de $89.)

   Aquí se escalona igual:
     Express      ficha completa, peso 400, tira 3,36
     High-Class   la misma ficha con el nombre a 600 y la foto más alta
     Especiales   la tarjeta de deseo: la foto es la tarjeta
   ══════════════════════════════════════════════════════════════════════════ */
.lab-t--alta .lab-t-nombre { font-weight: 600; }
/* El ratio de la foto lo manda `.lab-t-foto` y es UNO para todo el
   catalogo. Ver la nota de abajo. */

/* ── LA TARJETA DE DESEO ─────────────────────────────────────────────────── */
/* La tarjeta pasó de ser UN enlace a ser una tarjeta con DOS destinos: la
   foto lleva a la ficha y el botón a cotizar. El contenedor deja de tener la
   forma --la hereda el enlace-- y sólo apila. */
.lab-d { display: grid; gap: 12px; }
.lab-d-enlace {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  /* MISMO 16:9 QUE EL RESTO. Ver la nota de `.lab-t-foto`: el catalogo tenia
     TRES ratios de foto (3,36 / 1,45 / 1,15) y la tira que genera el servidor
     es UNA sola, asi que en dos de los tres la caja y el archivo no podian
     coincidir --una tira de 2,88 en una caja de 1,15 ensena el 40% de su
     ancho--. La jerarquia entre gamas no la sostiene el ratio de la foto: la
     sostienen el nombre sobre la foto, el tamano del tipo, el bloque de "9
     things Express doesn't include" y el orden de las secciones. */
  aspect-ratio: 1.78;
  text-decoration: none;
  color: var(--tinta);
  transition: transform var(--media) var(--ease-imagen);
}
.lab-d-cta { width: 100%; }
.lab-d-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-imagen);
}
.lab-d-enlace:hover .lab-d-foto { transform: scale(1.04); }
.lab-d-velo {
  position: absolute;
  inset: 0;
  /* El texto va sobre foto: el velo se endurece abajo, que es donde vive.
     El mismo error del héroe -medir el contraste con las letras puestas- no
     se repite: aquí el degradado llega al 0,88 bajo el pie. */
  background: linear-gradient(
    180deg,
    rgba(8, 9, 11, 0.12) 0%,
    rgba(8, 9, 11, 0.06) 42%,
    rgba(8, 9, 11, 0.72) 78%,
    rgba(8, 9, 11, 0.88) 100%
  );
}
.lab-d-pie {
  position: absolute;
  inset: auto 0 0;
  padding: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.lab-d-texto { display: grid; gap: 4px; min-width: 0; }
.lab-d-nombre {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.28rem;
  /* 600: la señal de gama de su Manufaktur. */
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: normal;
}
.lab-d-precio { font-size: 15px; color: rgba(240, 244, 249, 0.82); font-variant-numeric: tabular-nums; }
.lab-d-flecha {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  transition: transform var(--estado) var(--ease);
}
.lab-d:hover .lab-d-flecha { transform: translateX(4px); }
.lab-d:active { transform: scale(0.994); }

@media (min-width: 900px) {
  .lab-gama-lista--especial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── EL COLOR DE LA GAMA ALTA (medido en PlayStation Plus, 2026-09-06) ─────
   Ellos NO colorean las tres gamas: Essential y Extra llevan el nombre en
   negro y sólo Premium se lleva el dorado de marca —y en el NOMBRE, no en el
   fondo ni en el borde—. Una gama con color, el resto neutras.

   Champán y no su amarillo eléctrico: en una web de detallado ese amarillo se
   lee a consola de videojuegos. 11,2:1 sobre el fondo de la tarjeta.

   Y NO el rojo de marca: medido da 4,04:1 —por debajo del 4,5 que pide la
   norma— y chocaría con lo único que el rojo debe significar aquí, que es
   "reservar". */
.lab-t--alta .lab-t-nombre,
.lab-d .lab-d-nombre {
  color: #e8c87a;
}
/* El chip de la gama alta se apaga: si el nombre ya lleva el color, el chip
   en blanco sólido compite con él. Con el nombre en champán, el chip pasa a
   ser un dato más. */
.lab-t--alta .lab-t-chips li.es-activo {
  background: rgba(232, 200, 122, 0.16);
  color: #e8c87a;
}

/* ══════════════════════════════════════════════════════════════════════════
   EL TITULAR DE LA GAMA ALTA, MEDIDO EN MERCEDES-AMG (2026-09-06)

   Porsche no podía enseñarme esto: tiene UN solo nivel de producto. Por eso
   mis diferencias entre gamas salían tímidas —estaba midiendo una referencia
   que no tiene el problema que hay que resolver—. AMG sí lo tiene: es la gama
   alta de una marca normal, exactamente el caso.

   Su fórmula, medida en mercedes-amg.com a 390px:

     fuente     `titleExtraBold` — una tipografía DEDICADA, extra negra
     tamaño     34px en móvil
     caja       MAYÚSCULAS
     tracking   +0,15px  (POSITIVO; casi todo el mundo aprieta, ellos abren)

   Aquí se reproduce con Archivo a peso 900, que YA está en el repositorio
   para el panel y el público no descargaba. Space Grotesk se queda en 700, y
   700 no es "poderoso": es negrita normal. El salto de una familia a otra es
   lo que hace que se lea como otra gama y no como el mismo texto en negrita.

   SOBRE LAS MAYÚSCULAS: no contradicen la regla de no usarlas. NN/g las
   desaconseja para FRASES —se leen ~10% más lento— y las admite para
   etiquetas cortas de un vistazo. "HIGH-CLASS" son dos palabras: el caso
   permitido. El gancho de debajo sigue en caja normal, que sí es una frase.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* `unicode-range` latino: el navegador ni la pide si la página no la usa,
     así que las gamas que no la llevan no pagan un byte. */
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
}

.lab-gama--alta h2 {
  font-family: "Archivo", "Space Grotesk", sans-serif;
  font-weight: 900;
  font-size: clamp(2.125rem, 8.8vw, 3.2rem);
  line-height: 1.06;
  text-transform: uppercase;
  /* +0,0044em son sus 0,15px sobre 34. Positivo: abrir una extra negra en
     mayúsculas es lo que evita que las letras se toquen y se lea como un
     bloque. Apretarla la convertiría en una mancha. */
  letter-spacing: 0.0044em;
  color: #e8c87a;
}
/* El gancho vuelve a caja normal y a la tipografía de siempre: es una frase,
   y una frase en mayúsculas se lee un 10% más lento. */
.lab-gama--alta .lab-gama-lead {
  color: var(--tinta-suave);
}
/* Una línea fina sobre el titular, del color de la gama. Marca el arranque
   de la sección sin meter una caja ni un fondo distinto. */
.lab-gama--alta .lab-gama-cab::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 16px;
  background: #e8c87a;
}

/* ══════════════════════════════════════════════════════════════════════════
   CADA GAMA ES UN SITIO, NO UN TITULAR (2026-09-06)

   El dueño: "se sigue viendo re simple, solo le cambiaste el color". Tenía
   razón, y la causa no era el color: era que las TRES secciones estaban sobre
   el mismo negro. Un titular flotando sobre el mismo fondo que el anterior no
   separa nada.

   Se miraron las composiciones -no sólo los números- de las dos referencias:

     PlayStation Plus   cambia el FONDO en cada sección (blanco, gris) y pone
                        titulares ENORMES en mayúsculas pesadas, a dos líneas.
     Mercedes-AMG       gancho en caja normal → filete de color corto →
                        titular gigante en mayúsculas → botón de esquina RECTA.

   Las dos hacen lo mismo: la sección tiene su propio suelo y su titular ocupa
   el ancho. Aquí se aplica igual, y la gama se nota al ENTRAR en ella.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── EL SUELO DE CADA GAMA ─────────────────────────────────────────────── */
.lab-gama--alta {
  /* Más profundo que el fondo general, con una luz muy baja arriba: es el
     recurso que usa una pieza pulida para verse pulida. Sin bordes ni cajas. */
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(232, 200, 122, 0.07), transparent 62%),
    #0c0d10;
}
.lab-gama--express {
  background: #121418;
}

/* ── EL GANCHO ─────────────────────────────────────────────────────────── */
.lab-gama-gancho {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--tinta-tenue);
}
.lab-gama--especial .lab-gama-gancho { color: rgba(20, 22, 26, 0.55); }

/* ── EL FILETE, entre el gancho y el titular. Como el de AMG. ──────────── */
.lab-gama-cab::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 0 18px;
  background: currentColor;
  opacity: 0.9;
}
.lab-gama--alta .lab-gama-cab::before { color: #e8c87a; }
.lab-gama--express .lab-gama-cab::before { color: rgba(242, 244, 247, 0.55); }
.lab-gama--especial .lab-gama-cab::before { color: rgba(20, 22, 26, 0.45); }
/* el filete va DESPUÉS del gancho, así que se reordena el bloque */
.lab-gama-cab { display: flex; flex-direction: column; }
.lab-gama-gancho { order: 1; }
.lab-gama-cab::before { order: 2; }
.lab-gama-cab h2 { order: 3; }
.lab-gama-lead { order: 4; }

/* ── LOS TITULARES, GRANDES DE VERDAD ──────────────────────────────────
   Los de 20,5px eran del listado de modelos de Porsche, donde el titular de
   familia sólo ordena. Aquí la sección ES la gama, y tanto AMG como
   PlayStation la titulan a lo grande y en mayúsculas. */
.lab-gama h2 {
  font-family: "Archivo", "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.0044em;   /* el +0,15px de AMG */
  line-height: 1.04;
  margin: 0 0 12px;
}
.lab-gama--alta h2 {
  font-weight: 900;
  font-size: clamp(2.75rem, 12.5vw, 4.6rem);
  color: #e8c87a;
}
.lab-gama--express h2 {
  /* Un escalón por debajo: 800 y algo menor. Express no es la pobre, es la
     rápida — pero la jerarquía tiene que leerse sin comparar. */
  font-weight: 800;
  font-size: clamp(2.125rem, 9.5vw, 3.4rem);
  color: var(--tinta);
}
.lab-gama--especial h2 {
  font-weight: 800;
  font-size: clamp(2.125rem, 9.5vw, 3.4rem);
  color: var(--tinta-invertida);
}
.lab-gama-lead { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   EL MOVIMIENTO SIGUE A LA TAREA, NO A LA MARCA (medido 2026-09-06)

   Comparadas las dos páginas de Porsche:

     listado de modelos      77 transiciones, TODAS de 0,4s. Cero de 0,8s+.
     página de un modelo     0,25 / 0,4 / 0,6 / 1,2 / 1,3s. Once de 0,8s+.

   La misma marca, el mismo sistema, y velocidades distintas según lo que el
   visitante está haciendo: RÁPIDO donde elige, LENTO donde admira.

   Este catálogo había heredado las apariciones de 1,2s de la página de
   modelo. Ahí el cliente está escaneando ocho servicios para decidir, y una
   entrada de más de un segundo por tarjeta no se lee como lujo: se lee como
   que la página va lenta.

   Se confirma con las otras dos referencias de gama: AMG anima 33 elementos
   entre 0,15 y 0,25s, y PlayStation Plus todo entre 0,1 y 0,4s. Ninguna de
   las dos usa apariciones largas. El movimiento NO es lo que hace que una
   gama se sienta superior.
   ══════════════════════════════════════════════════════════════════════════ */
body.lab-listado [data-revelar] {
  transition:
    opacity 0.4s var(--ease-revelar),
    transform 0.4s var(--ease-revelar);
}

/* ══════════════════════════════════════════════════════════════════════════
   DÓNDE EMPIEZA Y ACABA CADA GAMA (medido en PlayStation Plus, 2026-09-06)

   El dueño: "no se mira donde comienzan ni donde empiezan". Medido, tenía
   toda la razón: mis dos suelos oscuros se diferenciaban en 1,05:1, que es
   decir que eran el mismo color.

   PlayStation usa DOS escalones distintos, y los dos hacen falta:

     oscuro rgb(18,19,20) ↔ blanco        18,60:1   salto de categoría
     blanco ↔ gris rgb(217,220,232)        1,37:1   escalón entre secciones

   Aquí se replican los dos:
     High-Class → Express      1,37:1   (#0c0d10 → #292b2e, su escalón sutil)
     Express → Especiales     ~18:1     (oscuro → claro, su salto)

   El 1,37 no se eligió a ojo: se calculó para dar ese número exacto. Un
   escalón menor no se ve —lo probé sin querer— y uno mayor parte la página
   en dos sitios distintos en vez de separar dos secciones de la misma.
   ══════════════════════════════════════════════════════════════════════════ */
.lab-gama--express { background: #292b2e; }

/* EL FONDO CLARO DE LAS ESPECIALES, QUE SE HABÍA PERDIDO.
   Al reescribir este archivo desapareció la regla y la sección quedó
   transparente… con el texto puesto en tinta OSCURA para un fondo claro que
   ya no estaba. Oscuro sobre oscuro, ilegible. Lo vio el dueño. */
.lab-gama--especial {
  background: var(--fondo-claro);
  color: var(--tinta-invertida);
}
.lab-gama--especial .lab-gama-lead { color: rgba(20, 22, 26, 0.66); }

/* La línea donde una gama termina y empieza la siguiente. Un filete de 1px
   del color del suelo siguiente: separa sin dibujar una caja. */
.lab-gama + .lab-gama { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.lab-gama--especial { border-top: 0; }

/* ── LA TARJETA DE PRESUPUESTO A MEDIDA ─────────────────────────────────
   Faltaba, y no es un detalle: es la que recoge furgonetas, autocaravanas,
   barcos y camiones de trabajo —los trabajos más caros del negocio—. En el
   sitio real se pinta en su propio bloque, y al construir este catálogo sólo
   con los servicios del catálogo se quedó fuera entera.

   Va sobre el fondo claro y con borde discontinuo: dice "esto no es un
   producto de la lista, es una conversación" sin tener que escribirlo. */
.lab-cotiza {
  display: block;
  margin-top: 20px;
  padding: 24px 20px;
  border: 1px dashed rgba(20, 22, 26, 0.28);
  border-radius: 16px;
  text-decoration: none;
  color: var(--tinta-invertida);
  transition: border-color var(--estado) var(--ease), background var(--estado) var(--ease);
}
.lab-cotiza:hover {
  border-color: rgba(20, 22, 26, 0.5);
  background: rgba(20, 22, 26, 0.03);
}
.lab-cotiza-nombre {
  display: block;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.24;
}
.lab-cotiza-lead {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(20, 22, 26, 0.62);
}
.lab-cotiza-ir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  min-height: 44px;
  font-size: 15px;
}
.lab-cotiza:hover .lab-cotiza-ir span { transform: translateX(3px); }
.lab-cotiza-ir span { transition: transform var(--estado) var(--ease); }

/* ══════════════════════════════════════════════════════════════════════════
   EL MOMENTO. UNO SOLO.

   El dueño pide algo creativo y no aburrido. La tentación es animarlo todo, y
   los datos dicen justo lo contrario: AMG anima 33 elementos en 0,15-0,25s y
   PlayStation todo entre 0,1 y 0,4s. Ninguna usa apariciones largas.

   Así que en vez de repartir movimiento, se concentra: UN gesto, en el sitio
   donde importa —el nombre de la gama—, y el resto se queda quieto. Un sitio
   caro no tiene muchas animaciones pequeñas: tiene un momento que se recuerda.

   El gesto es una MÁSCARA: la palabra sube desde debajo de su propia línea,
   como cuando se descubre un nombre. No es un fundido, que es lo que hace
   todo el mundo. Y es barato: `transform` sobre una capa propia, que el
   navegador pinta en el compositor.

   Va a 0,6s -su tramo de "entrada", no el de 1,2s que es para contemplar- con
   la curva de revelado de Porsche. Y con `prefers-reduced-motion` no ocurre:
   una palabra que salta es exactamente lo que marea a quien pidió no ver
   movimiento.
   ══════════════════════════════════════════════════════════════════════════ */
.lab-mascara {
  /* El recorte. `clip-path` y no `overflow: hidden` porque las mayúsculas de
     Archivo 900 tienen trazos que sobresalen por arriba y `overflow` los
     cortaría también en reposo. */
  clip-path: inset(-0.12em 0 -0.12em 0);
}
.lab-mascara > span {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform 0.6s var(--ease-revelar);
  will-change: transform;
}
[data-revelar].visible .lab-mascara > span,
.lab-gama-cab.visible .lab-mascara > span {
  transform: none;
}
/* Sin JavaScript la palabra tiene que estar VISIBLE, no escondida debajo de
   su máscara para siempre. Es el mismo principio que el resto: el movimiento
   es un adorno, y un adorno no puede esconder el contenido. */
html:not(.js) .lab-mascara > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lab-mascara > span { transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HIGH-CLASS: EL NOMBRE VIVE SOBRE LA FOTO

   El dueño dio por buenas Ceramic y Paint —"quedó perfecto, nada que tocar"—
   y siguió sin ver diferencia entre Express y High-Class. La causa es la
   misma en los dos casos, sólo que en un sentido: lo que hizo funcionar a las
   especiales NO fue el color dorado ni el peso 600. Fue que cambió la
   ESTRUCTURA de la tarjeta —la foto pasó a sostener el nombre—.

   Express y High-Class compartían estructura y se diferenciaban en color y
   peso, que es exactamente lo que el dueño lleva tres rondas diciendo que no
   se ve. Así que el mismo recurso, un escalón más abajo:

     Express      la foto es una tira decorativa; el nombre va debajo, en el
                  cuerpo. Es una FICHA: "esto es lo que te llevas por $89".
     High-Class   la foto sostiene el nombre y el precio. Es una PORTADA con
                  ficha debajo: primero el deseo, después los datos.

   Las dos conservan chips y cifras: las dos se compran mirando el precio. Lo
   que cambia es de quién es la primera palabra, si de los datos o de la foto.
   ══════════════════════════════════════════════════════════════════════════ */
.lab-t--alta .lab-t-foto { position: relative; }
.lab-t--alta .lab-t-velo {
  position: absolute;
  inset: 0;
  /* Se endurece abajo, donde vive el texto. Mismo criterio que en el héroe:
     el degradado llega al 0,9 bajo el nombre para que la foto no decida si el
     precio se lee. */
  background: linear-gradient(
    180deg,
    rgba(8, 9, 11, 0.05) 0%,
    rgba(8, 9, 11, 0.04) 40%,
    rgba(8, 9, 11, 0.68) 76%,
    rgba(8, 9, 11, 0.9) 100%
  );
}
.lab-t--alta .lab-t-sobrefoto {
  position: absolute;
  inset: auto 0 0;
  padding: 20px;
  display: grid;
  gap: 4px;
}
.lab-t--alta .lab-t-sobrefoto .lab-t-nombre {
  margin: 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: #e8c87a;
}
.lab-t--alta .lab-t-sobrefoto .lab-t-precio {
  margin: 0;
  font-size: 17px;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
/* El cuerpo de High-Class arranca directo en los chips: el nombre y el precio
   ya se dijeron arriba, y repetirlos sería el mismo error que la frase de la
   gama saliendo cuatro veces. */
.lab-t--alta .lab-t-chips { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   QUE LA TARJETA PAREZCA UNA TARJETA (2026-09-06)

   El dueño: "ahora las tarjetas no se miran como tarjetas dentro de las
   gamas". Medido, tenía razón y la culpa es mía y reciente: al subir el suelo
   de Express a #292b2e —para que SÍ se viera dónde empieza cada gama— la
   tarjeta y su suelo se acercaron. Arreglé una separación y rompí la otra.
   El mismo tipo de error que con el velo del héroe: tocar un valor mirando un
   problema y no comprobar el efecto en el vecino.

   Medido antes de tocar:
     tarjeta sobre High-Class   1,07:1     ← invisible
     tarjeta sobre Express      1,10:1     ← invisible

   Cómo lo hacen las referencias, visto en sus capturas: PlayStation y Porsche
   ponen tarjeta CLARA sobre suelo gris y la levantan con SOMBRA. La
   separación la hacen con un escalón de luminosidad y sombra, no con un borde
   tenue —que es lo que yo tenía: blanco al 9% que sobre negro no se ve—.

   Aquí el equivalente en oscuro: subir el relleno hasta el escalón de 1,35:1
   -el mismo umbral de PlayStation- y añadir sombra. Y el alfa NO puede ser
   uno solo: cada gama parte de un suelo distinto, así que 0,12 sobre el negro
   de High-Class y 0,10 sobre el gris de Express dan el mismo escalón. Un
   valor único dejaría una de las dos sin separar.
   ══════════════════════════════════════════════════════════════════════════ */
/* Estas reglas por gama iban DESPUÉS y pintaban un velo plano, así que se
   comían el degradado de arriba sin que se notara por qué. Ahora reutilizan el
   mismo velo: un solo sitio donde tocarlo. */
.lab-gama--alta .lab-t {
  background: var(--velo-tarjeta);
  border-color: rgba(232, 200, 122, 0.26);
}
.lab-gama--express .lab-t {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.13);
}
/* La sombra: no para decorar, para despegar. Muy difusa y muy baja, que es
   como se comporta una sombra real sobre una superficie oscura; una sombra
   dura sobre negro no se ve y sólo ensucia el borde.

   PROFUNDIDAD EN TRES CAPAS (2026-09-13), que es lo que separa una tarjeta de
   un recuadro:
     · un filo de luz de 1px por dentro del borde superior — es lo que hace
       que el ojo lea "canto de una pieza" y no "línea dibujada";
     · una sombra de CONTACTO, corta y cerrada, que la apoya en el suelo;
     · la sombra difusa de siempre, que la levanta.
   Las tres juntas cuestan cero peso y es lo que hace que parezca un objeto. */
/* EL FILO DE LUZ VA EN UNA CAPA POR ENCIMA, no en la sombra interior.
   La tarjeta lleva `overflow: hidden` y la foto ocupa todo el borde de
   arriba: una `inset` se pinta sobre el fondo pero DEBAJO de los hijos, así
   que el filo quedaba tapado justo donde tenía que verse. Esta capa flota
   sobre todo, no recibe toques y hereda el radio. */
.lab-t { position: relative; }
.lab-t::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: box-shadow 220ms cubic-bezier(0.22, 0.65, 0.2, 1);
}
.lab-t:hover::after,
.lab-t:focus-within::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.lab-t--alta::after { box-shadow: inset 0 1px 0 rgba(232, 200, 122, 0.20); }
.lab-t--alta:hover::after,
.lab-t--alta:focus-within::after { box-shadow: inset 0 1px 0 rgba(232, 200, 122, 0.34); }

.lab-t {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.45);
  transition:
    transform 220ms cubic-bezier(0.22, 0.65, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.22, 0.65, 0.2, 1),
    border-color 220ms cubic-bezier(0.22, 0.65, 0.2, 1);
}

/* Y RESPONDE AL TOCARLA. No tenía NINGÚN estado: una tarjeta que no se mueve
   al pasar por encima se siente muerta, y es la mitad de la personalidad que
   faltaba. Sube dos píxeles, la sombra se abre y el borde se enciende. */
.lab-t:hover,
.lab-t:focus-within {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.38),
    0 26px 56px rgba(0, 0, 0, 0.55);
}

/* CADA GAMA, SU LUZ. La alta ya tenía el oro en los chips y en su suelo; aquí
   el filo y el borde lo recogen, para que la tarjeta cara se note cara sin
   cambiar de forma. Express se queda en luz neutra: es la gama del diario. */
.lab-t--alta {
  border-color: rgba(232, 200, 122, 0.26);
}
.lab-t--alta:hover,
.lab-t--alta:focus-within {
  border-color: rgba(232, 200, 122, 0.44);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.38),
    0 26px 56px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .lab-t { transition: none; }
  .lab-t:hover,
  .lab-t:focus-within { transform: none; }
}
/* La foto de Express llegaba al borde de la tarjeta y se comía la esquina
   redondeada por arriba: con la tarjeta ahora visible, ese detalle canta. */
.lab-t-foto { border-radius: 15px 15px 0 0; }
.lab-t--alta .lab-t-foto { border-radius: 15px 15px 0 0; }

/* ── MÁS PRESENCIA DEL CHAMPÁN EN HIGH-CLASS ──────────────────────────────
   Cinco referencias medidas —Porsche listado, Porsche Manufaktur, AMG,
   PlayStation Plus y Emirates— y NINGUNA colorea sus gamas con suelos
   distintos. PlayStation, la única que usa color de nivel, lo pone SÓLO en el
   nombre de la de arriba.

   Así que no se inventa un sistema de colores por gama: se usa MÁS el que ya
   está justificado. El champán pasa del nombre a las cifras y al filete de la
   tarjeta, que son los datos que sostienen el precio. Sigue siendo un acento
   sobre neutro, no un tema de color.

   Y la diferencia grande no la va a dar el CSS: Emirates separa sus cabinas
   con LA FOTOGRAFÍA. Con fotos reales de Jeyner —brillo de espejo y agua
   perlando en un High-Class contra un coche simplemente limpio en un
   Express— las gamas se separarán solas. */
.lab-gama--alta .lab-t { border-color: rgba(232, 200, 122, 0.26); }
.lab-gama--alta .lab-t-cifra { color: #e8c87a; }
/* En la gama alta el botón lleva su dorado: el filete y el texto, no un
   subrayado que ya no existe. */
.lab-gama--alta .lab-t-detalle {
  color: rgba(232, 200, 122, 0.92);
  border-color: rgba(232, 200, 122, 0.34);
  background: rgba(232, 200, 122, 0.07);
}
.lab-gama--alta .lab-t-detalle:hover {
  border-color: rgba(232, 200, 122, 0.55);
  background: rgba(232, 200, 122, 0.11);
}
.lab-gama--alta .lab-t-detalle-n {
  background: rgba(232, 200, 122, 0.18);
  color: #f6e4b8;
}

/* ── LO QUE AÑADE HIGH-CLASS ──────────────────────────────────────────────
   La diferencia entre gamas, escrita. Va ANTES de las tarjetas: es lo que el
   visitante necesita para entender por qué una cuesta el doble, y necesitarlo
   después de haber visto los precios es tarde.

   Sin caja ni fondo: dos columnas de líneas con un punto delante. Es una
   lista de hechos, no un anuncio, y ponerle marco la convertiría en un
   banner —que es lo que la gente salta—. */
.lab-anade {
  margin: 0 0 24px;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(232, 200, 122, 0.24);
}
.lab-anade-tit {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: #e8c87a;
}
.lab-anade-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px 20px;
}
.lab-anade-lista li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tinta-suave);
}
/* El punto se dibuja, no se escribe: un "•" tipográfico cambia de tamaño y de
   posición con cada fuente que cargue. */
.lab-anade-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(232, 200, 122, 0.75);
}
@media (min-width: 560px) {
  .lab-anade-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── EL RECORRIDO DE LA APARICIÓN, EN EL CATÁLOGO ─────────────────────────
   34px eran los de la página de servicio, donde la entrada dura 1,2s y el
   visitante está contemplando. Aquí dura 0,4s —"rápido donde se elige", que
   es lo que hace Porsche— y 34px en 0,4s es un salto, no una entrada.

   Y tenía un efecto que se veía: una tarjeta aún sin aparecer está aparcada
   34px más abajo, así que la última de cada gama invadía la sección
   siguiente. El dueño lo vio como "la última tarjeta choca con Express". No
   era el relleno -que también estaba a 0 y era un olvido-: era esto.

   16px: se nota el movimiento y no descuadra nada. */
body.lab-listado [data-revelar] {
  transform: translate3d(0, 16px, 0);
}
body.lab-listado [data-revelar].visible {
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOS SUELOS, CON EL RECURSO DE PLAYSTATION (medido 2026-09-06)

   El dueño: "los colores de fondo se miran simples aún". Tenía razón y la
   respuesta estaba medida, no inventada: PlayStation NO usa colores planos en
   sus secciones. Usa GRADIENTES VERTICALES muy sutiles.

     su suelo oscuro   linear-gradient(0deg, #000000, #121314)   = 1,13:1
     su suelo claro    linear-gradient(0deg, #ffffff, #d2d4d9)
     y además          radial-gradient(… at 50% 0px, …)

   Todos van de más oscuro ABAJO a más claro ARRIBA, con un recorrido de
   apenas 1,1:1. No es un degradado que se vea: es uno que se siente. Un plano
   se lee como pintura; un gradiente así se lee como una superficie con luz.

   Aquí se replica el mismo recorrido en las dos gamas —1,12:1— y se conserva
   el radial desde arriba en el centro, que ellos también usan y que en
   High-Class lleva el champán.
   ══════════════════════════════════════════════════════════════════════════ */
.lab-gama--alta {
  background:
    radial-gradient(118% 62% at 50% 0%, rgba(232, 200, 122, 0.08), transparent 60%),
    linear-gradient(0deg, #0c0d10 0%, #191a1d 100%);
}
.lab-gama--express {
  background:
    radial-gradient(118% 55% at 50% 0%, rgba(255, 255, 255, 0.035), transparent 58%),
    linear-gradient(0deg, #292b2e 0%, #313336 100%);
}
/* El claro también: su gradiente va de blanco a gris, no de blanco a blanco. */
.lab-gama--especial {
  background: linear-gradient(0deg, #eef0f2 0%, #f7f8f9 100%);
}


/* ══════════════════════════════════════════════════════════════════════════
   EL SUELO DE EXPRESS. CORRECCIÓN DE UN ERROR DE LECTURA.

   El dueño: "los tonos de Express se miran raros". Tenía razón y el fallo era
   mío, de leer mal una medición propia.

   Yo había puesto #292b2e para dar 1,37:1 de separación contra High-Class.
   Pero ese 1,37 lo medí entre las secciones CLARAS de PlayStation —blanco
   contra gris—. Entre sus dos secciones OSCURAS el escalón es 1,14:1.

   Apliqué un escalón de zona clara a una zona oscura, y en oscuro subir 1,37
   obliga a irse a gris medio. Consecuencias, las dos visibles:

     · la gama BARATA se quedaba con la franja más luminosa de la página,
       entre un negro casi puro y un blanco. Jerarquía invertida;
     · tarjeta gris sobre suelo gris, que es lo que se veía lavado.

   Ahora #1f2024, que es literalmente el segundo tono oscuro de PlayStation.
   1,19:1 contra High-Class: menos salto, pero en la dirección correcta —el
   caro sigue siendo el más profundo— y el filete de 1px entre secciones
   marca el corte.
   ══════════════════════════════════════════════════════════════════════════ */
.lab-gama--express {
  background:
    radial-gradient(118% 55% at 50% 0%, rgba(255, 255, 255, 0.03), transparent 58%),
    linear-gradient(0deg, #1f2024 0%, #292a2e 100%);
}
.lab-gama--express .lab-t {
  background: var(--velo-tarjeta);
  border-color: rgba(255, 255, 255, 0.16);
}

/* La descripción que el dueño escribe desde el panel. Tamaño de nota, no de
   titular: describe, no vende. */
.lab-t-desc {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.lab-d-desc {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.78);
}

/* AQUÍ SE INVERTÍA EL BOTÓN PRINCIPAL SOBRE EL FONDO CLARO, y hacía falta:
   el primario era casi blanco y sobre este suelo daba 1,00:1 —se leía el
   texto y no se veía el botón—, así que la llamada a cotizar un trabajo de
   1.195 $ parecía un párrafo suelto.

   Ya no hace falta, y por eso se va (dueño, 2026-09-13: «los colores debe
   predominar 1»). El primario es ROJO DE MARCA en todo el sitio, y sobre este
   suelo claro da 5,4:1 — se ve mejor que la versión invertida y, sobre todo,
   es el MISMO botón que en el resto de la página. Mantener la inversión ahora
   sería fabricar otra vez dos primarios distintos. */

/* ── LAS PREGUNTAS DEL CATÁLOGO (A23, 2026-09-15) ──────────────────────────
   El acordeón lo dibuja `public_faq.css`, que carga todo el sitio; aquí sólo
   va su sitio en esta página, que hereda `site_main` y por tanto NO viene
   dentro de un `.container`: las gamas van a sangre y esto no.

   El ancho de lectura se limita a 72ch aunque la pantalla dé más: una línea
   de 1.400px no se lee, se escanea y se abandona. */
body.lab-listado .lab-faq {
  width: min(72ch, 92vw);
  margin: clamp(48px, 10vw, 96px) auto clamp(56px, 12vw, 112px);
}
body.lab-listado .lab-faq-cab {
  margin-bottom: 20px;
}
body.lab-listado .lab-faq-cab h2 {
  margin: 8px 0 0;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  line-height: 1.12;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA VENTANA DE VISTAZO RÁPIDO.

   Baymard, investigación de «quick views»: la superposición va CENTRADA y no
   en un cajón lateral —probaron las dos y la centrada fue la que funcionó—, y
   tiene que ser accesible por teclado. Lo segundo lo da `<dialog>` nativo
   gratis, que es por lo que esto no es un `<div>` con `position: fixed`.

   MÓVIL PRIMERO, y aquí eso cambia la forma: a 360 px ocupa casi la pantalla
   entera y lo que se desplaza es SU CUERPO, no la página. La cabecera con el
   nombre y el pie con los dos botones se quedan fijos, porque en una lista de
   22 pasos el que llega al final no tiene por qué subir a buscar el botón de
   reservar.
   ══════════════════════════════════════════════════════════════════════════ */
.lab-ficha {
  width: min(560px, calc(100vw - 24px));
  max-height: min(88svh, 900px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #0b0d11;
  color: var(--tinta, #f3f5f7);
  overflow: hidden;
}
.lab-ficha::backdrop {
  background: rgba(2, 4, 7, 0.72);
  backdrop-filter: blur(4px);
}
/* `grid` de tres filas con el cuerpo elástico: es lo que fija cabecera y pie
   sin `position: sticky`, que dentro de un `<dialog>` que ya recorta se pelea
   con el recorte. */
.lab-ficha-caja {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
  height: min(88svh, 900px);
}
.lab-ficha-cab {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lab-ficha-titulos {
  min-width: 0;
}
.lab-ficha-gama {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.58);
}
.lab-ficha-nombre {
  margin: 0;
  font-size: clamp(1.15rem, 5.2vw, 1.5rem);
  line-height: 1.2;
  color: #fff;
  overflow-wrap: anywhere;
}
.lab-ficha-x {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.lab-ficha-x:focus-visible {
  outline: 2px solid var(--brand-red, #dc2626);
  outline-offset: 2px;
}

.lab-ficha-cuerpo {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 20px;
}

/* Los tres datos que deciden, en fila y con la cifra pesando más que su
   rótulo. Tres columnas caben a 360 px porque los valores son cortos; si el
   idioma los alarga, `auto-fit` los baja solo. */
.lab-ficha-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.lab-ficha-datos div {
  min-width: 0;
}
.lab-ficha-datos dt {
  margin: 0 0 3px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.52);
}
.lab-ficha-datos dd {
  margin: 0;
  font-size: 15px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* LA DIFERENCIA, ANUNCIADA ANTES DE LA LISTA. Quien abre esto en la gama cara
   viene con una sola pregunta. */
.lab-ficha-extra {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 200, 122, 0.3);
  border-radius: 12px;
  background: rgba(232, 200, 122, 0.08);
  color: rgba(246, 228, 184, 0.92);
  font-size: 14px;
  line-height: 1.5;
}
.lab-ficha-extra strong {
  color: #f6e4b8;
}

/* LOS PASOS, NUMERADOS. El número no es adorno: es el orden del trabajo, y
   `counter` deja alinearlo sin depender del marcador del navegador. */
.lab-ficha-pasos {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.lab-ficha-pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  background: #0d1015;
  font-size: 14.5px;
  line-height: 1.45;
}
.lab-ficha-pasos li::before {
  content: counter(paso, decimal-leading-zero);
  color: rgba(226, 232, 240, 0.4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.lab-ficha-paso {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* El paso que sólo trae la gama alta: filete dorado a la izquierda y su sello.
   Sin repintar la fila entera — lo que tiene que saltar es CUÁLES, no cuántos
   colores hay. */
.lab-ficha-pasos li.es-propio {
  background: rgba(232, 200, 122, 0.07);
  box-shadow: inset 2px 0 0 rgba(232, 200, 122, 0.65);
}
.lab-ficha-sello {
  grid-column: 2;
  justify-self: start;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(232, 200, 122, 0.16);
  color: #f6e4b8;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lab-ficha-pie {
  display: grid;
  gap: 10px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #090b0f;
}
.lab-ficha-pie .lab-btn {
  width: 100%;
  justify-content: center;
}
/* El camino a la ficha entera. Va como enlace y no como segundo botón a
   propósito: son dos acciones de peso distinto —reservar y seguir leyendo— y
   dos botones iguales obligan a elegir entre dos cosas que no compiten. */
.lab-ficha-mas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  color: var(--tinta-suave, rgba(232, 235, 239, 0.72));
  font-size: 14.5px;
  text-decoration: none;
}
.lab-ficha-mas:hover {
  color: #fff;
}
.lab-ficha-mas:focus-visible {
  outline: 2px solid var(--brand-red, #dc2626);
  outline-offset: 2px;
  border-radius: 8px;
}

/* La nota de «incluye todo lo de…», encabezando la lista sin ser un paso.
   Va en cursiva y sin caja: es contexto, no trabajo, y meterla en un recuadro
   la pondría al mismo peso que el aviso de la gama, que sí exige atención. */
.lab-ficha-nota {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
  color: rgba(226, 232, 240, 0.66);
}
/* La caja no dibuja aro al recibir el foco de apertura: no es un control, y
   un aro alrededor de toda la ventana no le dice nada a nadie. El foco de
   TECLADO sobre los controles de dentro sigue intacto. */
.lab-ficha-caja:focus {
  outline: none;
}