/* ──────────────────────────────────────────────────────────────────────────
AL HEREDAR LA BASE DEL SITIO, RECUPERAR LO QUE ELLA PISA.
Esta portada vivía como página suelta con su propio . Al integrarla
en `public/base.html` --para no perder la canónica, las og:, los DOS
bloques de datos estructurados, la cabecera, el pie y el aviso de
galletas-- la hoja de la base gana en tres sitios, medido comparando la
huella de antes y después:
· el fondo pasaba de #08090b a NEGRO;
· `line-height: 25.92px` se heredaba a todo y estiraba los bloques
--la nota de reseñas 18->24, el nombre de familia 16->24, el nombre de
servicio 18->26--;
· el h2 del cierre cambiaba de Archivo a Space Grotesk.
No se toca la base: se reafirma lo propio bajo la clase de página, que es
como lo hacen ya las páginas de cuenta.
────────────────────────────────────────────────────────────────────────── */
body.lab-portada {
/* Al suelo de la ley, para que no haya costura con el resto del sitio. */
background: var(--aui-bg, #0b0d10);
color: var(--tinta, #f2f4f7);
line-height: normal;
}
/* El h2 del cierre heredaba la tipografía del cuerpo; la base impone la suya.
Se reafirma sólo AQUÍ: poner Archivo a todos los encabezados rompía el h1
del héroe, que es Space Grotesk a propósito. Medido: al hacerlo en bloque,
el titular cambiaba de familia. */
body.lab-portada .lp-cierre h2,
body.lab-portada .lp-cab h2 {
font-family: "Archivo", "Space Grotesk", sans-serif;
}
/* ═══════════════════════════════════════════════════════════════════════════
EXPERIMENTO — PORTADA. FASE 1.
El orden lo manda la investigación de conversión para servicios locales
(2026-09-06), no el gusto:
· "ventana de confianza de 50 milisegundos": lo que hay sobre el pliegue
carga con casi todo el peso de la decisión de quedarse;
· el 97% de los clientes lee reseñas antes de elegir un negocio local, y
la recomendación explícita es enseñar la VALORACIÓN sobre el pliegue;
· un sello de confianza JUNTO AL BOTÓN trabaja más que el mismo sello en
la cabecera.
La portada actual no cumple ninguna: sobre el pliegue hay navegación, un
titular genérico y tres chips, y las 27 reseñas de Google no aparecen hasta
el final.
OJO CON LAS REFERENCIAS DEL SECTOR: los listados de "mejores webs de
detallado 2026" son granjas de SEO. Se midieron tres de las que recomiendan
y royalautofinishes.com tiene su propio dominio como titular -página
aparcada-, classiqueautospa.com no resuelve DNS y alphashine igual. No se
construyó nada sobre ellas.
═══════════════════════════════════════════════════════════════════════════ */
body.lab-portada { padding-bottom: 0; }
/* ── HÉROE ─────────────────────────────────────────────────────────────── */
.lp-heroe {
position: relative;
min-height: 100svh;
display: grid;
align-items: end;
overflow: hidden;
}
.lp-heroe-foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: lab-entrar-foto 1.3s var(--ease-imagen) both;
}
.lp-heroe-velo {
position: absolute;
inset: 0;
/* Mismo criterio medido que en el héroe de servicio: se endurece donde vive
el texto. Aquí abajo hay MÁS texto -valoración y sello-, así que la parte
opaca empieza antes. */
background: linear-gradient(
180deg,
rgba(8, 9, 11, 0.5) 0%,
rgba(8, 9, 11, 0.12) 24%,
rgba(8, 9, 11, 0.78) 52%,
rgba(8, 9, 11, 0.95) 80%,
var(--fondo) 100%
);
}
.lp-heroe-texto {
position: relative;
padding: 0 var(--margen) clamp(40px, 10vw, 80px);
display: grid;
gap: 16px;
justify-items: center;
text-align: center;
max-width: 720px;
margin-inline: auto;
width: 100%;
}
.lp-sitio { margin: 0; font-size: 14px; color: rgba(226, 232, 240, 0.86); }
.lp-heroe h1 {
margin: 0;
font-family: "Space Grotesk", "Inter", sans-serif;
font-size: clamp(2.125rem, 9vw, 4.2rem);
font-weight: 400;
line-height: 1.3;
letter-spacing: normal;
max-width: 15ch;
}
.lp-lead {
margin: 0;
font-size: clamp(1.0625rem, 4.4vw, 1.25rem);
line-height: 1.42;
color: var(--tinta-suave);
max-width: 34ch;
}
/* ── LA VALORACIÓN ──────────────────────────────────────────────────────
Va sobre el pliegue porque es donde la investigación la pide. Las estrellas
se dibujan con CSS: un "★" tipográfico cambia de forma y de peso con cada
fuente que cargue, y aquí la forma ES el mensaje. */
.lp-nota {
margin: 4px 0 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
font-size: 15px;
color: var(--tinta-suave);
}
.lp-nota strong { color: var(--tinta); font-weight: 500; }
.lp-estrellas { display: inline-flex; gap: 3px; }
.lp-estrellas span {
width: 13px;
height: 13px;
background: #e8c87a;
/* Una estrella de cinco puntas, dibujada. */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.lp-acciones { display: grid; gap: 10px; width: 100%; max-width: 420px; margin-top: 8px; }
/* La firma del dueno: retrato de 44px --el minimo de zona tocable, aunque
aqui no se toque-- y su nombre al lado. Va DEBAJO del boton, que es donde
la investigacion situa las senales de confianza: pegadas a la accion, no
en la cabecera. */
.lp-firma {
display: flex;
align-items: center;
gap: 10px;
margin: 2px 0 0;
font-size: 14px;
color: var(--tinta-tenue);
}
.lp-firma img {
width: 44px;
height: 44px;
border-radius: 999px;
object-fit: cover;
flex: 0 0 auto;
}
.lp-firma strong { color: var(--tinta); font-weight: 600; }
.lp-sello {
margin: 0;
font-size: 13.5px;
line-height: 1.4;
color: var(--tinta-tenue);
}
/* ── SECCIONES ─────────────────────────────────────────────────────────── */
.lp-prueba, .lp-voces, .lp-cierre {
padding: clamp(56px, 14vw, 112px) var(--margen);
}
.lp-cab { margin-bottom: 24px; }
.lp-prueba h2, .lp-voces h2, .lp-cierre h2 {
margin: 0;
font-family: "Archivo", "Space Grotesk", sans-serif;
font-size: clamp(2.125rem, 9.5vw, 3.4rem);
font-weight: 800;
line-height: 1.04;
text-transform: uppercase;
letter-spacing: 0.0044em;
}
/* ── ANTES / DESPUÉS ────────────────────────────────────────────────────
Superpuestas y con tirador, NO lado a lado. Partidas, el ojo compara dos
encuadres distintos; superpuestas compara el COCHE, que es el punto. En
detallado esta comparación ES el producto, y el sitio no tenía ninguna. */
/* La proporcion la manda la FOTO, no al reves: el par sale de una sola
toma partida por la mitad (2:1 cada mitad). Forzar 1.3 aqui recortaba
el coche por los lados justo donde se ve el trabajo. */
.lp-ab {
position: relative;
aspect-ratio: 2;
overflow: hidden;
border-radius: 16px;
width: calc(100% + var(--margen) * 2);
margin-inline: calc(var(--margen) * -1);
touch-action: pan-y;
}
.lp-ab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-ab-despues {
position: absolute;
inset: 0;
overflow: hidden;
/* La anchura la lleva una variable para que la mueva el JS sin recalcular
estilos: sólo cambia el recorte. */
width: var(--ab, 50%);
}
/* El ancho tiene que ser EXACTAMENTE el del contenedor, o las dos mitades
quedan a escalas distintas y la costura no cuadra. .lp-ab mide 100vw en
movil (es 100% + 2 margenes con margenes negativos); medido, esta imagen
salia 48px mas ancha. */
.lp-ab-despues img { width: 100vw; max-width: none; }
.lp-ab-tirador {
position: absolute;
top: 0;
bottom: 0;
left: var(--ab, 50%);
width: 2px;
background: var(--tinta);
transform: translateX(-1px);
pointer-events: none;
}
.lp-ab-tirador::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
margin: -22px 0 0 -22px;
border-radius: 999px;
background: var(--tinta);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
/* El control real es un invisible por encima: se arrastra
con el dedo, funciona con teclado y lo anuncia un lector de pantalla. Un
tirador hecho a mano con eventos de ratón no hace ninguna de las tres. */
.lp-ab-rango {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
}
/* ── VOCES ─────────────────────────────────────────────────────────────── */
.lp-voces-lista { display: grid; gap: 16px; }
.lp-voz {
margin: 0;
padding: 20px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-voz blockquote {
margin: 0 0 14px;
font-size: 16px;
line-height: 1.5;
color: var(--tinta);
}
.lp-voz figcaption { display: grid; gap: 2px; }
.lp-voz-quien { font-size: 15px; }
.lp-voz-donde { font-size: 13.5px; color: var(--tinta-tenue); }
.lp-cierre { display: grid; gap: 16px; justify-items: start; }
.lp-cierre .lab-btn { min-width: min(100%, 320px); }
@media (min-width: 900px) {
.lp-prueba, .lp-voces, .lp-cierre { max-width: 1180px; margin-inline: auto; }
.lp-voces-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-ab { width: 100%; margin-inline: 0; aspect-ratio: 2.1; }
.lp-ab-despues img { width: 1180px; }
}
/* ── EL TITULAR DEL HÉROE SE DESCUBRE AL CARGAR, NO AL BAJAR ──────────────
Estaba INVISIBLE. La máscara esconde la palabra hasta que su bloque recibe
`.visible`, y eso lo pone el observador cuando el bloque entra en pantalla.
El héroe ya está en pantalla al cargar, así que nunca "entraba": nadie le
ponía la clase y el titular principal de la portada no se veía nunca.
Es exactamente el fallo del que yo mismo dejé aviso escrito en el CSS de la
máscara —"sin JS la palabra tiene que estar visible"— y lo cometí igual en
otra página. Aquí no hace falta observador: se anima al cargar. */
.lp-heroe .lab-mascara > span {
animation: lp-descubrir 0.6s var(--ease-revelar) 0.15s both;
transform: translate3d(0, 105%, 0);
}
@keyframes lp-descubrir {
from { transform: translate3d(0, 105%, 0); }
to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.lp-heroe .lab-mascara > span { animation: none; transform: none; }
}
/* ── LOS SERVICIOS EN LA PORTADA: ENRUTADOR ──────────────────────────────
Filas, no tarjetas. Aquí el visitante no elige todavía: mira qué hay y a
qué precio, y salta. Poner las tarjetas completas duplicaría el catálogo y
—según la misma investigación— listar cada paquete con cada detalle abruma
y hace rebotar. La tarjeta grande vive en /lab/services, que es donde se
elige de verdad. */
.lp-servicios { padding: clamp(56px, 14vw, 112px) var(--margen); }
.lp-vitrina { display: grid; gap: 32px; }
/* EL TÍTULO DE GRUPO TIENE QUE PESAR MÁS QUE SUS SERVICIOS.
Medido: Express y "Protection & correction" salían a 18px/400 en blanco y
sus servicios a 16px/400 en blanco —el mismo texto con dos píxeles de
diferencia—. Sólo High-Class estaba diferenciado, porque le puse champán y
peso 600 y a los otros dos no los volví a mirar.
Ahora los TRES suben a 600 y a versalitas cortas: el título ordena, el
servicio se lee. Que High-Class además vaya en champán es otra cosa —eso
separa GAMAS, no separa título de servicio—. */
.lp-grupo-tit {
/* Antes era una linea de texto; ahora es una BANDA con la foto de la familia
detras. La proporcion 3 la eligio el presupuesto de alto: la seccion no
puede volverse tres pantallas por ganar imagen. */
position: relative;
overflow: hidden;
border-radius: 14px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
aspect-ratio: 3;
padding: 14px 16px;
margin: 0 0 10px;
font-family: "Archivo", "Space Grotesk", sans-serif;
font-size: 0.94rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--tinta-suave);
}
.lp-grupo--alta .lp-grupo-nombre { color: #e8c87a; }
/* La foto de la familia y su velo. El degradado es EL MISMO del catalogo
--copiado del marcado real, no reinventado--: se endurece abajo, donde vive
el nombre, para que la foto no decida si el precio se lee. */
.lp-grupo-tit img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-grupo-velo {
position: absolute;
inset: 0;
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%
);
}
.lp-grupo-nombre,
.lp-grupo-tit .lp-grupo-desde { position: relative; }
.lp-grupo-desde {
font-size: 13px;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--tinta-tenue);
font-variant-numeric: tabular-nums;
}
.lp-grupo-lista { margin: 0; padding: 0; list-style: none; }
.lp-grupo-lista a {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 2px 14px;
padding: 14px 0;
min-height: 44px;
border-top: 1px solid rgba(255, 255, 255, 0.09);
text-decoration: none;
color: inherit;
transition: background var(--estado) var(--ease);
}
.lp-grupo-lista li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.lp-grupo-lista a:hover { background: rgba(255, 255, 255, 0.03); }
.lp-serv-nombre { font-size: 16px; }
.lp-serv-precio {
grid-row: 1 / span 2;
grid-column: 2;
align-self: center;
font-size: 16px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.lp-serv-meta { grid-column: 1; font-size: 13.5px; color: var(--tinta-tenue); }
.lp-vitrina-todo { margin-top: 32px; width: 100%; max-width: 420px; }
@media (min-width: 900px) {
.lp-servicios { max-width: 1180px; margin-inline: auto; }
.lp-vitrina { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
}
/* ── LO QUE NO ESTÁ EN LA LISTA, TAMBIÉN EN LA PORTADA ────────────────────
Furgonetas, autocaravanas, barcos y camiones de trabajo. Lo puse en el
catálogo y se me olvidó aquí, que es donde llega la mayoría. Son los
encargos más caros del negocio y no aparecían en la primera pantalla del
sitio. */
.lp-cotiza {
display: grid;
gap: 6px;
margin-top: 24px;
padding: 18px 20px;
border: 1px dashed rgba(255, 255, 255, 0.22);
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: border-color var(--estado) var(--ease), background var(--estado) var(--ease);
}
.lp-cotiza:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.03); }
.lp-cotiza-tit { font-size: 16px; }
.lp-cotiza-txt { font-size: 14px; line-height: 1.45; color: var(--tinta-tenue); }
/* El enlace a Google bajo el título de las reseñas. Discreto: no compite con
los botones de reserva, pero está donde alguien acaba de leer tres
opiniones y es cuando más se fía. */
.lp-voces-google {
display: inline-block;
margin-top: 10px;
font-size: 14px;
color: var(--tinta-suave);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(255, 255, 255, 0.3);
}
.lp-voces-google:hover { color: var(--tinta); }
/* La reseña, en el orden de la auditoría A26: quién habla, estrellas, cita. */
.lp-voz-quien-fila { display: grid; gap: 2px; margin: 0 0 8px; }
.lp-voz-estrellas {
margin: 0 0 10px;
font-size: 13px;
letter-spacing: 2px;
color: #e8c87a;
}
/* ── LOS CUATRO PASOS ──────────────────────────────────────────────────────
Rejilla de dos por dos en el teléfono y de cuatro en línea en escritorio.
Sin cajas ni bordes: el número y el icono ya separan un paso del siguiente,
y la ley del proyecto dice que la jerarquía se hace con tamaño, peso y
color, no dibujando marcos alrededor de todo. */
.lp-pasos { padding: 56px var(--margen); }
.lp-pasos-lista {
list-style: none;
margin: 24px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 20px;
}
.lp-paso { display: grid; gap: 4px; justify-items: start; }
.lp-paso-icono { color: var(--tinta-tenue); line-height: 0; }
.lp-paso-n {
font-family: "Space Grotesk", "Inter", sans-serif;
font-size: 12px;
letter-spacing: 0.08em;
color: var(--tinta-tenue);
font-variant-numeric: tabular-nums;
}
.lp-paso-tit { font-size: 17px; font-weight: 600; }
.lp-paso-txt { font-size: 15px; color: var(--tinta-suave); }
@media (min-width: 720px) {
.lp-pasos-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
/* ── LAS FILAS DE SERVICIO: SIN SUBRAYADO PERMANENTE ───────────────────────
Al integrar la portada en la base del sitio, `public_polish_2026.css` pinta
el color de enlace de la marca sobre cualquier que no tenga regla
propia. Estas filas no la tenían, así que salían con subrayado ROJO fijo:
medido, `text-decoration: underline rgba(220,38,38,0.55)` en las nueve.
El dueño lo pidió al revés y tiene razón: el rojo marca lo que se ELIGE,
no lo que existe. Es además lo que dice la ley --el acento se reserva para
la acción y los estados--. Así que la fila va limpia y el rojo aparece al
pasar por encima, al tocarla o al enfocarla con el teclado. */
body.lab-portada .lp-grupo-lista a {
text-decoration: none;
/* Calle para la barra roja, sangrada hacia afuera: la barra deja de pisar
el texto y el texto NO se mueve. Las divisorias pasan al