/* ═══════════════════════════════════════════════════════════════════════════
   EXPERIMENTO — PÁGINA DE SERVICIO ESCRITA DESDE CERO

   No hereda nada del sitio a propósito. Todo lo de aquí sale de MEDIR la
   página del 911 Turbo S con un navegador el 2026-09-05, no de recordarla:

     · Tipografía a peso 400 SIEMPRE. Su h1 mide 34,9px en un móvil de 390 y
       72,5px en escritorio, y ni uno ni otro llevan negrita. La jerarquía la
       hace el tamaño; la negrita, cuando está en todo, no dice nada.
     · `letter-spacing: normal` en toda la página. Ni una letra apretada.
     · Cuerpo de 20,5px en móvil. El nuestro va algo por debajo porque Inter
       tiene el ojo mayor que Porsche Next: se iguala la MANCHA, no la cifra.
     · Las fotos sangran hasta el filo y llevan esquinas grandes en DOS
       vértices, nunca en los cuatro.
     · Movimiento: 0,25s estados · 0,4s medias · 0,6s entradas · 1,2s las
       apariciones al bajar, escalonadas. Curva base cubic-bezier(.25,.1,.25,1),
       apariciones cubic-bezier(.55,0,.61,1), imágenes cubic-bezier(.2,.1,.2,1).
       Todo verificado contra el CSS que sirve su página.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --tinta: #f2f4f7;
  --tinta-suave: rgba(226, 232, 240, 0.68);
  --tinta-tenue: rgba(226, 232, 240, 0.42);
  --fondo: #08090b;
  --fondo-claro: #f4f5f7;
  --tinta-invertida: #14161a;
  --acento: #e52929;
  --radio: 32px;
  --estado: 0.25s;
  --media: 0.4s;
  --entrada: 0.6s;
  --larga: 1.2s;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-revelar: cubic-bezier(0.55, 0, 0.61, 1);
  --ease-imagen: cubic-bezier(0.2, 0.1, 0.2, 1);
  --margen: 24px;
  --columna: 1100px;   /* la MISMA columna para todas las secciones */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  /* La página entera es la unidad de scroll; nada dentro puede ensancharla.
     Es la regla que faltaba en la página vieja y por eso una foto de 498px
     estiraba la maquetación a 507 en un teléfono de 360. */
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

h1, h2 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  margin: 0;
}

/* ── LA BARRA COMPACTA ──────────────────────────────────────────────────── */
.lab-barra {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px max(var(--margen), env(safe-area-inset-left));
  background: rgba(8, 9, 11, 0.78);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transform: translate3d(0, -101%, 0);
  transition: transform var(--media) var(--ease);
}
.lab-barra.visible { transform: none; }
.lab-barra-nombre {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.lab-barra-precio {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* EN PANTALLA ESTRECHA, EL PRECIO SALE DE LA BARRA.
   Medido a 360px: entre el precio y el botón no quedaba sitio y el nombre se
   cortaba en "High-Class Full …". La barra existe para recordar QUÉ estás
   mirando; un nombre truncado no lo recuerda. La referencia hace justo esto:
   su barra dice "911 Turbo S" y nada más. El precio sigue en el héroe y en el
   cierre, que es donde se decide. */
@media (max-width: 420px) {
  .lab-barra-precio {
    display: none;
  }
}
.lab-barra-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* 44 y no 40: es el mínimo de Apple HIG y de la WCAG 2.5.5, y medido era el
     objetivo más pequeño de toda la página. Cuatro píxeles no se ven en una
     captura y sí se notan en un pulgar, sobre todo en una barra fija donde el
     dedo llega desde el borde de la pantalla. */
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--tinta-invertida);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: opacity var(--estado) var(--ease);
}
.lab-barra-cta:hover { opacity: 0.82; }

/* ── HÉROE ──────────────────────────────────────────────────────────────── */
.lab-heroe {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.lab-heroe-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La imagen entra con una escala mínima. 1,3s con su curva de imagen: es
     lento a propósito, y esa lentitud es la mitad de la sensación de coche
     caro. Una animación rápida se siente barata. */
  animation: lab-entrar-foto 1.3s var(--ease-imagen) both;
}
@keyframes lab-entrar-foto {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.lab-heroe-velo {
  position: absolute;
  inset: 0;
  /* EL VELO SE MIDIÓ, NO SE ESTIMÓ.
     Se captura el héroe CON EL TEXTO OCULTO y se muestrea el fondo real bajo
     cada bloque. Hacerlo con el texto puesto no vale: el muestreo pilla los
     bordes suavizados de las letras y saca contrastes de 1,5:1 que no
     existen —me pasó, y casi arreglo un problema imaginario—.
     Lo que sí era real: el eyebrow daba 3,14:1 y la norma pide 4,5:1. Con
     esta curva sube a 12,33:1 típico y 8,35:1 en el peor punto del fondo.
     Se endurece del 50% hacia abajo, que es donde vive el texto, y se deja
     clara la parte de arriba, que es donde se ve el coche. */
  background: linear-gradient(
    180deg,
    rgba(8, 9, 11, 0.55) 0%,
    rgba(8, 9, 11, 0.14) 26%,
    rgba(8, 9, 11, 0.74) 52%,
    rgba(8, 9, 11, 0.94) 76%,
    var(--fondo) 100%
  );
}
.lab-heroe-texto {
  position: relative;
  padding: 0 var(--margen) clamp(44px, 12vw, 88px);
  display: grid;
  gap: 18px;
  /* CENTRADO, como el suyo.
     Medido: el texto de los botones estaba centrado a la perfección -0px de
     desvío- y aun así "flotaba", porque TODO lo de encima iba alineado a la
     izquierda y la etiqueta no se alineaba con nada. En la página del 911 el
     héroe entero va centrado -nombre, etiqueta, precio y los botones
     apilados-, y por eso allí no chirría. Se arregla alineando el bloque, no
     el botón: el botón ya estaba bien. */
  justify-items: center;
  text-align: center;
}
.lab-etiqueta {
  margin: 0;
  font-size: 14px;
  /* Sobre foto, no vale el gris de cuerpo: medido, daba 3,14:1 típico y la
     norma pide 4,5:1. Se sube la opacidad en vez de agrandar la letra. */
  color: rgba(226, 232, 240, 0.86);
}
.lab-heroe h1 {
  margin-inline: auto;
  /* 34px a 360 → 72px en escritorio. Exactamente el recorrido del suyo. */
  font-size: clamp(2.125rem, 9vw, 4.53rem);
  /* 1,30 y no 1,05. MEDIDO en su página: 45,285px de interlineado sobre
     34,922px de cuerpo. El 1,05 que tenía apretaba los renglones un 24% más
     que ellos, y ése es justo el motivo de que la página se sintiera
     comprimida: el aire ENTRE líneas es lo que hace respirar un titular
     grande. En un titular corto no se nota; en uno de dos renglones, mucho. */
  line-height: 1.3;
  max-width: 13ch;
}
.lab-precio {
  margin: 0;
  font-size: clamp(1.25rem, 4.6vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  display: grid;
  gap: 4px;
}
.lab-precio-nota {
  font-size: 14px;
  color: var(--tinta-tenue);
}
.lab-acciones {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.lab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* MEDIDO en su página, no elegido: sus botones son 331x56 con radio 12 y
     texto de 16px a peso 400. El alto y el cuerpo ya coincidían; el radio iba
     a 14 y el texto a 500. Lo del peso es el mismo despiste de siempre: la
     negrita colándose donde ellos nunca la ponen. */
  min-height: 56px;
  padding: 0 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--tinta);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  /* CRISTAL, pero sólo aquí. El secundario vive sobre la zona ya oscurecida
     del velo, así que el desenfoque no puede volverse ilegible. El principal
     se queda SÓLIDO: el cristal sobre foto es justo donde a Apple le miden
     1,5:1 de contraste con una norma de 4,5:1 (Infinum, 2025). */
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  /* El brillo del borde superior: es lo que hace que el cristal se lea como
     un material y no como un rectángulo translúcido. Una sola línea, no un
     degradado por todo el borde, que se ve sucio a tamaño pequeño. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition:
    background var(--estado) var(--ease),
    border-color var(--estado) var(--ease),
    transform 0.12s var(--ease),
    box-shadow var(--estado) var(--ease);
  /* El navegador reserva capa: sin esto, el primer toque tiene un tirón
     mientras promociona el elemento a su propia capa de composición. */
  will-change: transform;
}
.lab-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
/* LA PULSACIÓN.
   Se hunde un 1,5% en 120ms. No más: un botón que se encoge mucho se siente
   de juguete, y uno que tarda se siente lento. 0,12s es la mitad del tramo
   de "estado" de su sistema (0,25s), que es lo correcto para algo que tiene
   que responder ANTES de que el dedo se levante.
   `:active` y no una animación con JS: el navegador lo pinta en el hilo del
   compositor y responde aunque el hilo principal esté ocupado. */
.lab-btn:active {
  transform: scale(0.985);
}
/* El foco de teclado NO se hereda del hover: quien navega con tabulador
   necesita ver dónde está, y un cambio de fondo apenas se nota. */
.lab-btn:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}
/* El principal va BLANCO, no rojo: es lo que hace Porsche sobre negro, y en
   una página oscura el blanco es lo más ruidoso que hay. El rojo de la marca
   se guarda para el resto del sitio. */
/* UN SOLO COLOR MANDA (dueño, 2026-09-13: «los colores debe predominar 1 ya
   que tenemos un frankestein»). La acción que da dinero es ROJA en todo el
   sitio: es la del héroe de producción, la del cierre y la de la ley de
   diseño. Antes este botón era casi blanco (`--tinta`), así que la misma
   página tenía dos primarios distintos —rojo arriba, blanco en las tarjetas—.
   El rojo además funciona sobre los dos suelos: el oscuro del sitio y el
   claro de la gama especial, donde un botón blanco se perdía. */
.lab-btn--principal {
  /* El rojo es el FUERTE (#b91e1e), no el claro (#dc2626): la prueba de
     contraste del sitio midió que blanco sobre #dc2626 da 3,75:1 y la norma
     pide 4,5 para texto de 16px. Sobre #b91e1e da 6,5:1. Es el mismo rojo de
     marca, el que ya se usaba para el estado :hover. */
  background: var(--brand-red-strong, #b91e1e);
  border-color: var(--brand-red-strong, #b91e1e);
  color: #fff;
}
.lab-btn--principal {
  /* Sólido: sin cristal y sin desenfoque. Es el que tiene que leerse SIEMPRE. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.lab-btn--principal:hover { background: #a01a1a; border-color: #a01a1a; }
.lab-btn--principal:active { transform: scale(0.985); }

.lab-scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5));
  animation: lab-latido 2.4s var(--ease) infinite;
}
@keyframes lab-latido {
  0%, 100% { opacity: 0.25; transform: scaleY(0.6); }
  50%      { opacity: 1; transform: scaleY(1); }
}

/* ── CIFRAS ─────────────────────────────────────────────────────────────── */
.lab-cifras {
  display: grid;
  gap: clamp(40px, 10vw, 64px);
  padding: clamp(64px, 16vw, 128px) var(--margen);
  text-align: center;
}
.lab-cifra {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.25rem, 15vw, 5rem);
  font-weight: 400;
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
}
.lab-cifra span {
  font-size: 0.28em;
  margin-left: 0.1em;
  color: var(--tinta-tenue);
}
.lab-cifra-pie {
  margin: 0;
  font-size: 15px;
  color: var(--tinta-suave);
  max-width: 24ch;
  margin-inline: auto;
}

/* ── EDITORIAL ──────────────────────────────────────────────────────────── */
.lab-editorial {
  display: grid;
  gap: clamp(24px, 7vw, 52px);
  padding: 0 var(--margen) clamp(64px, 16vw, 128px);
}
.lab-foto { margin: 0; overflow: hidden; }
.lab-foto img { width: 100%; height: 100%; object-fit: cover; }
.lab-foto--der {
  width: calc(100% + var(--margen));
  margin-right: calc(var(--margen) * -1);
  border-radius: var(--radio) 0 0 var(--radio);
}
.lab-copy { display: grid; gap: 14px; }
.lab-copy h2 {
  font-size: clamp(1.85rem, 7vw, 2.9rem);
  /* 1,38, medido en su h2: 32,2575 sobre 23,346. */
  line-height: 1.38;
  max-width: 17ch;
}
.lab-copy p {
  margin: 0;
  /* 20px en móvil, no 18. Lo justifiqué diciendo que Inter tiene el ojo más
     grande que Porsche Next y por eso bastaba con menos: era flojo —las dos
     rondan 0,72 de altura de x— y la diferencia medida era del 14%. Su
     cuerpo mide 20,549px; éste 20. */
  font-size: clamp(1.25rem, 5.2vw, 1.44rem);
  /* 1,42: 29,1075 sobre 20,549 en su página. */
  line-height: 1.42;
  color: var(--tinta-suave);
  /* Baymard sitúa la lectura cómoda entre 50 y 75 caracteres. A 360px con
     20px de cuerpo salen ~34, que es lo que da el ancho de un teléfono y es
     también lo que a ellos les sale: no hay más sitio. El tope importa en
     pantallas grandes, donde sin él la línea se iría a 90. */
  max-width: 60ch;
}

/* El collage: sangran por lados OPUESTOS y se solapan. Sin el solape son dos
   fotos; con él es una composición. */
/* Dos fotos al 50% pegadas NO son un collage: son una foto partida. Lo que
   hace Porsche es desigualarlas —una más ancha y arriba, otra más estrecha,
   más abajo y montada encima— de modo que se lean como una composición y no
   como una rejilla. El solape es lo que lo consigue; sin él, nada. */
.lab-collage {
  width: calc(100% + var(--margen) * 2);
  margin-inline: calc(var(--margen) * -1);
}
/* OJO: este selector es `.clase elemento` = especificidad (0,1,1) y las dos
   reglas de abajo son `.clase` = (0,1,0). Si aquí se pone `margin: 0`, GANA
   sobre el `margin-left:auto` y el solape de las figuras, y el collage se
   deshace en dos fotos pegadas a la izquierda. Ya pasó. Por eso aquí sólo va
   `overflow`, y los márgenes se declaran una sola vez, en su figura. */
.lab-collage figure { overflow: hidden; }
.lab-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sangra por la IZQUIERDA, ocupa dos tercios y manda. */
.lab-collage-a {
  margin: 0;
  width: 70%;
  border-radius: 0 var(--radio) var(--radio) 0;
}
/* Sangra por la DERECHA, más estrecha, y sube para montarse sobre la de
   arriba. El margen negativo va en porcentaje para que el solape se mantenga
   proporcional en cualquier ancho de pantalla. */
.lab-collage-b {
  width: 58%;
  margin: -16% 0 0 auto;
  border-radius: var(--radio) 0 0 var(--radio);
  position: relative;
  z-index: 1;
  box-shadow: -18px -18px 44px rgba(0, 0, 0, 0.55);
}

/* ── LO QUE INCLUYE ─────────────────────────────────────────────────────── */
.lab-incluye {
  display: grid;
  gap: clamp(24px, 7vw, 48px);
  padding: clamp(64px, 16vw, 128px) var(--margen);
  background: var(--fondo-claro);
  color: var(--tinta-invertida);
}
.lab-incluye .lab-copy p { color: rgba(20, 22, 26, 0.62); }
.lab-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: paso;
}
.lab-lista li {
  display: grid;
  grid-template-columns: 3.2ch 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(20, 22, 26, 0.1);
  font-size: 17px;
  line-height: 1.42;
}
.lab-lista li:first-child { border-top: 1px solid rgba(20, 22, 26, 0.1); }
.lab-lista-num {
  color: rgba(20, 22, 26, 0.34);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  padding-top: 2px;
}

/* ── CIERRE ─────────────────────────────────────────────────────────────── */
.lab-cierre {
  position: relative;
  min-height: 84svh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.lab-cierre-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lab-cierre-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.25), rgba(8, 9, 11, 0.9) 72%, var(--fondo));
}
.lab-cierre-texto {
  position: relative;
  padding: 0 var(--margen) clamp(52px, 14vw, 104px);
  display: grid;
  gap: 16px;
  justify-items: start;
}
.lab-cierre-texto p { margin: 0; font-size: 17px; color: var(--tinta-suave); max-width: 34ch; }
.lab-cierre-texto .lab-btn { min-width: min(100%, 300px); }

.lab-aviso {
  margin: 0;
  padding: 24px var(--margen) 40px;
  font-size: 12px;
  color: var(--tinta-tenue);
  text-align: center;
}

/* ── APARICIONES AL BAJAR ───────────────────────────────────────────────── */
[data-revelar] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity var(--larga) var(--ease-revelar),
    transform var(--larga) var(--ease-revelar);
  transition-delay: var(--retardo, 0ms);
}
[data-revelar].visible { opacity: 1; transform: none; }

/* Sin JavaScript no se esconde nada: la página se lee entera igual. */
html:not(.js) [data-revelar] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1; transform: none; transition: none; }
  /* Quien pidió no ver movimiento tampoco quiere que el botón se hunda. El
     cambio de color se queda: eso es respuesta, no animación. */
  .lab-btn { transition: background var(--estado) linear; }
  .lab-btn:active, .lab-btn--principal:active { transform: none; }
  .lab-heroe-foto { animation: none; }
  .lab-scroll { animation: none; }
}

/* ── ESCRITORIO ─────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  :root { --margen: 64px; }
  /* Rejilla POR CONTENIDO, no de tres columnas fijas. Con `repeat(3, 1fr)`
     una pagina de dos cifras --Ceramic tiene 7 pasos y 0%-- llenaba las
     columnas 1 y 2 y dejaba la 3 vacia: medido, el par caia en 170..882
     dentro de una columna de 170..1270, o sea escorado a la izquierda. */
  .lab-cifras {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 260px);
    justify-content: center;
  }
  .lab-editorial {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
  }
  .lab-heroe-texto, .lab-cierre-texto { max-width: var(--columna); margin-inline: auto; width: 100%; }

  /* UNA columna para toda la pagina.
     Antes se centraban SOLO el heroe y el cierre; las cifras, el editorial y
     "todo incluido" seguian con el gutter de 64px a ancho completo. Medido a
     1440: tres columnas distintas en la misma pagina --64, 170 y 855--, que
     es lo que se lee como contenido tirado contra el borde izquierdo.
     Se centra con padding y no con max-width a proposito: asi la banda clara
     de .lab-incluye y el fondo de la barra siguen llegando de borde a borde. */
  .lab-barra,
  .lab-cifras,
  .lab-editorial,
  .lab-incluye {
    padding-inline: max(var(--margen), calc((100% - var(--columna)) / 2));
  }
  /* Ya no hay borde de pantalla contra el que sangrar: la foto se queda
     dentro de la columna en vez de escaparse 64px hacia la derecha. */
  .lab-foto--der {
    width: 100%;
    margin-right: 0;
    border-radius: var(--radio);
  }
  /* El collage sangra hacia los bordes de la PANTALLA, y en escritorio ya no
     los toca: la seccion vive en una columna de 1100 centrada, asi que el
     desbordamiento se quedaba flotando a media pagina. Dentro de la columna
     el solape se mantiene --que es lo que hace el collage-- pero sin escaparse. */
  .lab-collage { width: 100%; margin-inline: 0; }
  .lab-collage-a,
  .lab-collage-b { border-radius: var(--radio); }
  .lab-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .lab-incluye { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: 72px; }
}