/* ==========================================================================
Maquimaderas de Colombia — Home
Sistema visual: Brandkit/Identidad_Corporativa.md
Light theme FIJO. Nunca depende de prefers-color-scheme.
========================================================================== */
:root{
color-scheme: light only;
/* Paleta oficial (Identidad_Corporativa.md §3) */
--white: #FFFFFF;
--graphite: #0B0D12;
--blue: #1E31A4;
--blue-electric: #3D5CFF;
/* El gris de texto secundario subió de #64748B a #4A5769. Sobre la superficie
clara (#F6F8FC) el anterior daba 4.48:1 de contraste, justo por debajo del
4.5:1 que pide la WCAG AA para texto normal: se quedaba corto por dos
centésimas. El nuevo da 6.91:1 sobre esa superficie y 7.35:1 sobre blanco.
Era la otra mitad del problema que Juan señaló en las líneas de datos: una
parte la ponía la fuente y la otra el color. */
--slate: #4A5769;
--yellow: #FFC629;
/* Derivados de apoyo */
--paper: #F6F8FC;
--line: rgba(30,49,164,.12);
--line-strong: rgba(30,49,164,.22);
--glass: rgba(255,255,255,.08);
--glass-line: rgba(255,255,255,.18);
/* Gradientes oficiales (§4) */
--grad-primary: linear-gradient(135deg, #1E31A4 0%, #3D5CFF 100%);
--grad-contrast: linear-gradient(135deg, #0B0D12 0%, #1E31A4 100%);
--grad-atmos: linear-gradient(135deg, #3D5CFF 0%, #1E31A4 55%, #0B0D12 100%);
/* Tipografía (§5) */
--f-display: "Fugaz One", "Arial Black", "Haettenschweiler", Impact, sans-serif;
--f-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* SE RETIRÓ LA MONOESPACIADA (Fragment Mono).
Juan: «tengo serios problemas con este tipo de texto, no se ve, no se lee,
se disimula; no quiero usar esa fuente».
Tenía razón por tres motivos que se suman: Fragment Mono viene en UN SOLO
peso (400), a 13px sobre gris pizarra, y una monoespaciada reparte el mismo
ancho a la i que a la M, así que el gris que deja es más claro que el de
una grotesca del mismo tamaño. Tres cosas restando contraste a la vez.
La referencia es Apple, y Apple NO usa monoespaciada en marketing: usa UNA
familia y hace la jerarquía con tamaño, peso y color. Aquí ya había dos
familias; la tercera solo estaba debilitando sus líneas.
`--f-mono` se queda como alias del cuerpo para no reescribir 24 reglas, y
cada una sube a 14px y peso 500, que es lo que faltaba. */
--f-mono: var(--f-body);
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
/* Radios concéntricos. Cuando una caja redondeada vive dentro de otra, la de
dentro NO puede llevar el mismo radio: las dos curvas dejan de ser
paralelas y la interna se ve demasiado redonda. La regla es
interno = externo - separación. Con los 24px de la tarjeta y 20-24px de
margen interior, el valor que queda armonioso es este. */
/* UNIDAD DE SEPARACIÓN DEL SITIO. Un solo valor para el hueco entre piezas
de una retícula, para el margen lateral de esas retículas y para el grosor
de la línea blanca del alero. Si se cambia aquí, se mueven las tres cosas a
la vez y no se pueden desincronizar. */
--gap-unit: 10px;
--r-in-lg: 12px; /* dentro de una caja de 24px */
--r-in-md: 8px; /* dentro de una caja de 16px */
--shadow-soft: 0 12px 32px -12px rgba(11,13,18,.16);
--shadow-lift: 0 28px 60px -24px rgba(30,49,164,.38);
/* 68px era la altura de la cápsula flotante de antes. La barra minimal se
acerca a la de Apple, que ronda los 44. 52 deja aire para el logotipo, que
es más alto que una manzana. */
--nav-h: 52px;
/* Cuánto se aparta un ancla del borde superior para no quedar debajo de la
cápsula del navbar. La cápsula mide 52px y arranca a 8px del borde, así que
esto deja 16px de aire. Lo usan el CSS y el scroll suave de main.js, para
que no haya dos números que mantener sincronizados a mano. */
--scroll-offset: 76px;
--gutter: 20px;
--maxw: 1240px;
}
/* Sin esto, entrar directo a maquimaderasdecolombia.com/#paquetes deja el
titular de la sección tapado por el navbar. El scroll suave de main.js sí lo
compensaba, pero solo al hacer clic dentro de la página: un enlace compartido
por WhatsApp o un anuncio que apunte a un ancla caían mal. */
:target,
section[id],
[id^="galeria"]{ scroll-margin-top:var(--scroll-offset); }
/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* OJO: nada de `scroll-behavior:smooth` aquí. Rompe la medición de ScrollTrigger
(los pins arrancan desfasados). El scroll suave de los anclas lo hace main.js. */
html{ -webkit-text-size-adjust:100%; }
body{
margin:0;
/* El fondo del documento es la misma superficie clara que las secciones: si
fuera blanco puro, asomaría en el rebote del scroll y volvería a verse el
salto de tono. */
background:var(--paper);
color:var(--graphite);
font-family:var(--f-body);
font-weight:400;
font-size:17px;
/* 1.6 para un cuerpo de 16px deja las líneas algo apretadas cuando el texto
va sobre color. 1.68 es el punto donde el párrafo se lee sin esfuerzo sin
que las líneas se desparramen. */
line-height:1.68;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:400; text-transform:uppercase; line-height:.98; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
/* Fugaz One es de un solo peso: nunca forzar bold/thin (Identidad §5) */
/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(72px,11vw,132px); }
/* `.section--dark` ya no la usa ningún marcado: cada sección oscura declara su
propio degradado (paquetes, garantía, cierre). Se deja la clase porque sus
reglas derivadas (`.lead`, `.eyebrow`, `.btn--ghost` sobre oscuro) siguen
siendo el sitio donde se listan las superficies oscuras del sitio. */
.section--dark{ background:var(--grad-contrast); color:var(--white); }
/* ---------- Tipografía utilitaria ---------- */
.h1{ font-family:var(--f-display); font-size:clamp(34px,6.6vw,68px); line-height:.96; letter-spacing:-.02em; text-transform:uppercase; }
.h2{ font-family:var(--f-display); font-size:clamp(28px,4.8vw,52px); line-height:1; letter-spacing:-.015em; text-transform:uppercase; }
.h3{ font-family:var(--f-display); font-size:clamp(20px,2.6vw,28px); line-height:1.05; text-transform:uppercase; }
/* Medida de lectura más corta y línea más alta. 56 caracteres por línea es el
tope de lo cómodo; 62 ya obliga a "buscar" el principio de la siguiente. Se
baja a 52 y se sube el interlineado, que es la palanca que más se nota. */
.lead{ font-size:clamp(16px,2vw,19px); line-height:1.62; color:var(--slate); max-width:52ch; }
.section--dark .lead,
.aftersale .lead{ color:rgba(255,255,255,.72); }
.mono{ font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.02em; }
/* ==========================================================================
ETIQUETAS · un solo recetario para todo el sitio (26/09/2026)
Juan sobre las etiquetas en monoespaciada: «no se lee muy bien, aunque el
estilo está bueno; un poco más grande y un poco más pesada».
El problema tiene nombre: Fragment Mono viene en UN SOLO peso. No existe su
negrita, y falsearla con el navegador engorda los trazos de forma desigual,
que en una monoespaciada se nota más que en cualquier otra letra.
La solución no fue traer una fuente nueva: el sitio YA tenía este recetario
en `.eyebrow` (Public Sans 700), solo que las fichas de línea, los paneles de
Top ventas y la galería usaban monoespaciada por su cuenta. Ahora todas las
etiquetas comparten el mismo estilo.
La monoespaciada NO desaparece: se queda donde su razón de ser es que las
cifras se alineen en columna (la franja de datos, los pies de las máquinas,
las fichas técnicas). Ahí sí aporta; como etiqueta, solo restaba peso.
========================================================================== */
.eyebrow{
font-family:var(--f-body); font-weight:700; font-size:14px;
letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
display:block; line-height:1.4;
}
/* NADA de raya decorativa antes del label. Regla de marca: el adorno tipo
"— LABEL" está prohibido en cualquier diseño. El label se sostiene solo con
mayúsculas, peso y letter-spacing. */
/* Sobre cualquier fondo oscuro o azul el label va en amarillo, no en azul:
azul sobre azul no se lee. */
/* `.close` salió de esta lista: dejó de ser una sección oscura el día que la
secuencia de color la pasó a claro. Su antetítulo va en azul, más abajo. */
.section--dark .eyebrow,
.aftersale .eyebrow{ color:var(--yellow); }
/* ---------- Botones ---------- */
/* Altura fija en vez de padding vertical: todos los botones se alinean solos
aunque cambie el cuerpo de texto. */
/* Canto suave de 12px en lugar de pildora: el boton pasa a ser un rectangulo y
rima con las tarjetas, las fotos y los bloques de color, que tambien lo son.
Decision de Juan sobre el banco de formas. */
.btn{
position:relative; isolation:isolate; overflow:hidden;
display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:54px; padding:0 26px; border-radius:12px;
font-weight:700; font-size:15px; letter-spacing:-.012em; white-space:nowrap;
transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease,
background-color .22s ease, color .22s ease, border-color .22s ease;
will-change:transform;
}
/* Barrido de luz: una franja inclinada cruza la superficie al pasar el cursor,
como la luz corriendo sobre una lamina de acero. Va en z-index negativo
dentro del propio boton (isolation:isolate), asi queda sobre el fondo y
debajo del texto sin tener que subir el texto a una capa propia.
El bloque global de prefers-reduced-motion ya lo neutraliza. */
.btn::before{
content:""; position:absolute; inset:0 auto 0 0; width:46%; z-index:-1;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
transform:translateX(-170%) skewX(-18deg);
transition:transform .72s cubic-bezier(.22,.7,.25,1);
pointer-events:none;
}
.btn:hover::before,
.btn:focus-visible::before{ transform:translateX(330%) skewX(-18deg); }
/* La flecha acompaña el gesto en hover */
.btn > svg:last-child{ transition:transform .28s cubic-bezier(.2,.8,.3,1); }
.btn:hover > svg:last-child{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px) scale(.99); }
/* Amarillo Taller: siempre SÓLIDO, nunca en gradiente (Identidad §4/§6.3) */
/* Amarillo sólido, sin degradado (regla de marca). La profundidad la da una
luz interior arriba más una sombra proyectada del propio color. */
/* SIN halo de color. La sombra era amarilla sobre un botón amarillo, así que
sobre el azul del hero se leía como un resplandor de neón alrededor, no como
una sombra. Ahora la sombra es neutra y oscura, que es lo que hace un objeto
apoyado sobre una superficie: separa sin brillar. */
.btn--primary{
background:var(--yellow); color:var(--graphite);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px -10px rgba(11,13,18,.55);
}
.btn--primary:hover{
background:#FFD24D; transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 24px -12px rgba(11,13,18,.6);
}
/* Fantasma en vidrio en vez de contorno plano: se apoya sobre foto o sobre
color sin ensuciarse, y hace juego con la cápsula del navbar. */
.btn--ghost{
border:1px solid rgba(30,49,164,.26); color:var(--blue);
background:rgba(255,255,255,.55);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4);
}
/* EN EL HERO, BLANCO MACIZO. Sobre el azul profundo, un blanco al 55% con
desenfoque detrás se vuelve azul lavanda y el botón desaparece: parece
desactivado, no secundario. Juan: «blanco este botón, que se note».
Un segundo botón no tiene que ser tenue, tiene que ser CLARAMENTE el segundo,
y eso ya lo dice el color (el primario es amarillo) sin necesidad de
apagarlo. Aquí el blanco macizo se sostiene solo y no necesita ni borde ni
desenfoque. */
.hero .btn--ghost{
background:var(--white); color:var(--blue);
border-color:var(--white);
backdrop-filter:none; -webkit-backdrop-filter:none;
box-shadow:0 10px 26px -14px rgba(5,8,26,.7);
}
.hero .btn--ghost:hover{
background:var(--white); color:var(--blue); border-color:var(--white);
transform:translateY(-2px);
box-shadow:0 16px 32px -14px rgba(5,8,26,.8);
}
/* Sobre superficie clara un destello blanco no se ve: el barrido del fantasma
se tine de azul de marca. */
.btn--ghost::before{
background:linear-gradient(100deg, transparent, rgba(30,49,164,.20), transparent);
}
.btn--ghost:hover{
background:var(--blue); color:var(--white); border-color:var(--blue);
transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 12px 24px -14px rgba(11,13,18,.55);
}
/* Botón fantasma sobre superficie oscura o azul: va en blanco.
Hay que listar las superficies explícitamente porque varias pintan su
gradiente con clase propia (.lcard--urus, .lcard--titan) y no con
.section--dark, así que se quedaban en azul sobre azul.
`.close` salió de la lista: es una sección clara y su fantasma va en azul,
corregido más abajo. */
.section--dark .btn--ghost,
.aftersale .btn--ghost,
.lcard--urus .btn--ghost,
.lcard--titan .btn--ghost{
border-color:rgba(255,255,255,.3); color:var(--white);
background:rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.section--dark .btn--ghost::before,
.aftersale .btn--ghost::before,
.lcard--urus .btn--ghost::before,
.lcard--titan .btn--ghost::before,
.hero.is-act-2 .btn--ghost::before,
.hero.is-act-3 .btn--ghost::before{
background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
}
.section--dark .btn--ghost:hover,
.aftersale .btn--ghost:hover,
.lcard--urus .btn--ghost:hover,
.lcard--titan .btn--ghost:hover{ background:var(--white); color:var(--blue); border-color:var(--white); }
.btn--sm{ height:44px; padding:0 19px; font-size:14px; border-radius:10px; }
.btn svg{ flex:none; }
/* ==========================================================================
ETIQUETAS — dos tratamientos, y cual se usa lo decide la superficie:
.pill "etiqueta recta": lleva caja. Va SOBRE FOTO o sobre una tarjeta de
color, donde el texto necesita su propio fondo para leerse.
.label "sin caja": solo punto y texto. Va sobre color plano y junto al
titular, donde una caja mas solo compite con el.
Asi la alternancia no es decorativa: en el hero conviven las dos, la sin caja
a la izquierda con el copy y la recta a la derecha sobre la foto de la
maquina. Decision de Juan sobre el banco de etiquetas.
========================================================================== */
/* ---------- .pill · etiqueta recta (sobre foto o tarjeta de color) ---------- */
.pill{
display:inline-flex; align-items:center; gap:8px;
padding:7px 13px; border-radius:var(--r-in-md);
font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
white-space:nowrap;
}
/* Solo una etiqueta en toda la página va rellena de amarillo: la del producto
más vendido. Si todas gritan, ninguna se oye. */
.pill--yellow{ background:var(--yellow); color:var(--graphite); }
.pill--glass{ background:var(--glass); color:var(--white); border:1px solid var(--glass-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
/* ---------- .label · sin caja (sobre color plano, junto al titular) ---------
Los colores salen de los tokens del acto (--hero-fg / --hero-muted), asi que
la etiqueta cambia sola al pasar de blanco a azul y a amarillo. */
.label{
display:inline-flex; align-items:center; gap:9px;
font-size:13.5px; white-space:nowrap; max-width:100%;
}
.label__k{
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
color:var(--hero-muted);
}
.label__v{
font-weight:700; letter-spacing:-.005em; color:var(--hero-fg);
min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.label__dot{
width:8px; height:8px; border-radius:50%; flex:none;
background:var(--yellow); box-shadow:0 0 0 3px rgba(255,198,41,.22);
}
/* Sobre el amarillo del acto 3 el punto amarillo desaparece: pasa a grafito. */
.hero.is-act-3 .label__dot{ background:var(--graphite); box-shadow:0 0 0 3px rgba(11,13,18,.12); }
.label__ring{
width:8px; height:8px; border-radius:50%; background:var(--blue-electric); flex:none;
box-shadow:0 0 0 0 rgba(61,92,255,.55);
animation:ring 2.4s ease-out infinite;
}
@keyframes ring{ 70%{ box-shadow:0 0 0 9px rgba(61,92,255,0); } 100%{ box-shadow:0 0 0 0 rgba(61,92,255,0); } }
.hero.is-act-2 .label__ring{ background:var(--white); box-shadow:0 0 0 0 rgba(255,255,255,.55); animation-name:ringLight; }
@keyframes ringLight{ 70%{ box-shadow:0 0 0 9px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }
.hero.is-act-3 .label__ring{ background:var(--blue); box-shadow:0 0 0 0 rgba(30,49,164,.5); animation-name:ringDark; }
@keyframes ringDark{ 70%{ box-shadow:0 0 0 9px rgba(30,49,164,0); } 100%{ box-shadow:0 0 0 0 rgba(30,49,164,0); } }
/* El dato rotativo es el valor de la etiqueta, asi que pesa como .label__v */
.label--live .transit__item{ font-weight:700; color:var(--hero-fg); letter-spacing:-.005em; }
/* ---------- Glass card: SOLO sobre fondos azul/grafito ---------- */
.glass{
background:var(--glass);
border:1px solid var(--glass-line);
border-radius:var(--r-lg);
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 24px 48px -28px rgba(0,0,0,.6);
}
/* Card sobre blanco: sin glass, borde fino + sombra suave */
.card{
background:var(--white);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-soft);
}
/* ---------- Orbs atmosféricos ---------- */
.orb{
position:absolute; border-radius:50%; pointer-events:none; z-index:0;
background:var(--grad-atmos);
filter:blur(70px); opacity:.20;
will-change:transform;
}
.orb--hero{ width:min(62vw,640px); aspect-ratio:1; opacity:.28; }
/* ==========================================================================
CORTE DE MARCA (.seam-cut)
No es un chevron genérico: es el perfil del alero azul del logo de
Maquimaderas, extraído por pixel del PNG oficial. Hombros planos hasta el
10,55% y desde el 89,45%, ápice al 49,88%.
Se rellena con el color de la SECCIÓN SIGUIENTE, así el corte "muerde" hacia
arriba igual que el tejado del logo.
Uso: solo en transiciones estratégicas, no en cada sección.
========================================================================== */
.has-seam{ position:relative; }
.seam-cut{
position:absolute; left:0; right:0; bottom:-1px;
height:clamp(34px,4.4vw,66px);
z-index:3; pointer-events:none;
}
.seam-cut svg{ width:100%; height:100%; display:block; }
/* ==========================================================================
NAVBAR
========================================================================== */
/* ANTES: cápsula flotante de 58px con vidrio, hairline, sombra y un botón
amarillo a la derecha. George (26/09/2026) la vio pesada y pidió algo más
minimal, tipo Apple.
AHORA: barra a ancho completo, baja, sin caja. Dos estados:
· Arriba del todo, sobre el hero: SIN fondo. Solo los enlaces flotando en
blanco sobre el azul. Es el momento en que se juzga la página y es donde
menos tiene que haber.
· Al bajar: fondo esmerilado claro y texto grafito, para que se lea sobre
el contenido blanco.
El CTA de WhatsApp dejó de ser botón amarillo y pasó a ser un enlace más. El
botón flotante de la esquina sigue ahí, que es el que convierte de verdad. */
.nav{
position:fixed; inset:0 0 auto 0; z-index:60;
display:flex; align-items:center; justify-content:center;
pointer-events:none;
height:var(--nav-h);
}
.nav__inner{
pointer-events:auto;
/* Posicionado y por encima del cristal. `.nav::before` está posicionado y el
contenido no lo estaba, así que el cristal se pintaba ENCIMA de los enlaces
y del logo y la barra parecía vacía al bajar. */
position:relative; z-index:1;
width:min(100% - var(--gutter) * 2, var(--maxw));
height:100%; padding:0;
display:flex; align-items:center; gap:clamp(18px,3vw,38px);
/* Sin caja: ni fondo, ni borde, ni sombra, ni radio. */
background:none; border:0; box-shadow:none; border-radius:0;
}
/* Barra BLANCA SIEMPRE y sin cambiar de estado al bajar (George, 26/09/2026).
Se probó transparente sobre el hero y cambiando a claro al hacer scroll: se
veía más ligero, pero la barra "vivía" y él la quiere quieta. Una barra que
no cambia es la de Apple, y es la que no distrae.
Queda fija arriba: acompaña el scroll pero no se transforma. */
.nav::before{
content:""; position:absolute; inset:0; pointer-events:none;
/* BLANCO OPACO, sin transparencia ni desenfoque. El vidrio esmerilado dejaba
pasar el color de lo que hubiera detrás, así que la barra cambiaba de tono
al pasar sobre el azul, sobre el amarillo o sobre el blanco. Una barra que
se tiñe no se lee como barra, se lee como un velo. Opaca es siempre la
misma y el logo siempre se ve igual.
De paso se va el `backdrop-filter`, que es de lo más caro que hay de pintar
en cada fotograma de scroll. */
background:#FFFFFF;
border-bottom:1px solid rgba(11,13,18,.09);
}
/* `.is-stuck` sigue poniéndose desde main.js, pero ya no cambia nada de la
barra. Se deja el gancho por si algún día hace falta. */
/* --- Un solo juego de colores, para los dos tramos --- */
/* El isotipo es ancho y bajo (876x296), así que su altura engaña: a 19px se veía
diminuto aunque midiera 56px de ancho. A 26px ocupa unos 77px y tiene el peso
de una marca, sin tocar el borde de una barra de 52px. */
.nav__links a,
.nav__cta{
font-size:13.5px; font-weight:400; letter-spacing:-.005em;
color:rgba(11,13,18,.78);
padding:6px 0; border-radius:0;
background:none; border:0; box-shadow:none;
transition:color .2s ease;
}
.nav__links a:hover,
.nav__cta:hover{ color:var(--blue); background:none; }
/* La marca escrita, no el isotipo. A 26px el isotipo era una mancha que no se
leía; el nombre en la tipografía de display ocupa lo mismo y se entiende de
un golpe. En mayúsculas, como manda la regla de marca para esta tipografía. */
.nav__marca{
font-family:var(--f-display); text-transform:uppercase;
font-size:clamp(17px,1.5vw,20px); line-height:1;
letter-spacing:-.015em; color:var(--graphite);
white-space:nowrap;
}
/* Los enlaces se ven en TODOS los anchos. Antes se ocultaban por debajo de
1000px porque quedaba el botón de WhatsApp; sin él, la barra se habría
quedado solo con el logo y el sitio sin navegación en celular, que es de
donde llega casi todo el tráfico.
En pantallas estrechas la fila se desplaza en horizontal: sin menú
hamburguesa, sin JS y sin romper la altura de la barra. Si algún día se
quiere el menú desplegable de verdad, este es el sitio. */
.nav__links{
display:flex; margin-left:auto; gap:clamp(16px,2.4vw,34px); align-items:center;
min-width:0; overflow-x:auto; overflow-y:hidden;
scrollbar-width:none; -ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
/* El fundido va SOLO en el borde derecho, que es donde se corta la fila. Con
fundido también a la izquierda, el primer enlace salía medio borrado
pegado al isotipo aunque no hubiera nada que desplazar. */
mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.nav__links::-webkit-scrollbar{ display:none; }
.nav__links a{ white-space:nowrap; }
/* El CTA es un enlace más, al final de la fila. Un icono pequeño lo identifica
sin necesidad de caja de color. */
.nav__cta{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; }
.nav__cta .ic{ width:15px; height:15px; }
@media (min-width:1000px){
/* Con sitio de sobra no hace falta ni desplazamiento ni fundido. */
.nav__links{ overflow:visible; mask-image:none; }
}
/* ==========================================================================
2. BENEFICIOS (dark)
========================================================================== */
/* Sin tope en `ch`: esa unidad está calibrada para párrafos y estrangulaba el
titular de 52px, que se partía en tres líneas cortas con media pantalla
vacía al lado. El ancho de lectura lo controla .lead por su cuenta. */
.benefits__head{ display:grid; gap:16px; max-width:min(100%,980px); margin-bottom:clamp(36px,5vw,56px); }
.benefits__grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:860px){ .benefits__grid{ grid-template-columns:repeat(3,1fr); } }
.bcard{ padding:28px 24px 26px; display:grid; gap:14px; align-content:start; will-change:transform,opacity; }
.bcard h3{ font-size:clamp(19px,2.2vw,23px); }
.bcard p{ font-size:15px; color:rgba(255,255,255,.72); }
.bcard__stat{
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.04em;
color:var(--yellow); border-top:1px solid rgba(255,255,255,.14); padding-top:12px; margin-top:2px;
}
/* ==========================================================================
3. LÍNEAS DE PRODUCTO (pinned + scroll horizontal)
========================================================================== */
.lines{ position:relative; overflow:hidden; background:var(--paper); }
.lines__ghost{
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%); /* GSAP anima xPercent/yPercent sobre esto */
font-family:var(--f-display); text-transform:uppercase;
font-size:clamp(120px,26vw,340px); line-height:.8; letter-spacing:-.03em;
color:transparent; -webkit-text-stroke:1px rgba(30,49,164,.12);
white-space:nowrap; pointer-events:none; user-select:none; z-index:0;
will-change:transform;
}
.lines__head{ position:relative; z-index:2; display:grid; gap:14px; max-width:min(100%,900px); }
/* ---------- Fichas de línea ----------
Estructura de ficha técnica, no de tarjeta de blog: índice, nombre, función,
descripción y una fila de datos con la etiqueta encima del valor. La
jerarquía la dan el contraste y las reglas finas, no subir cuerpos de letra.
--------------------------------------------------------------------------- */
.cats{
position:relative; z-index:2;
margin-top:clamp(28px,4vw,44px);
display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:1fr;
}
@media (min-width:820px){ .cats{ grid-template-columns:1fr 1fr; } }
.cat{
min-width:0;
display:grid; grid-template-rows:auto 1fr; overflow:hidden;
border-radius:var(--r-lg); border:1px solid var(--line);
background:var(--white);
transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.cat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--line-strong); }
.cat__shot{ position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--paper); }
.cat__shot img{
width:100%; height:100%; object-fit:cover; display:block;
/* El acercamiento en hover es lo que hace que la tarjeta se sienta un objeto
y no un enlace con foto. */
transition:transform .7s cubic-bezier(.2,.8,.3,1);
}
.cat:hover .cat__shot img{ transform:scale(1.05); }
.cat__body{
display:grid; gap:clamp(16px,2vw,22px); align-content:start;
padding:clamp(22px,2.8vw,32px);
}
/* Cabecera: el índice pequeño en mono al lado del nombre grande. El contraste
entre los dos es la mitad del carácter de la ficha. */
.cat__head{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.cat__idx{
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.1em;
color:var(--slate); padding-top:.5em;
}
.cat__name{
font-family:var(--f-display); text-transform:uppercase; margin:0;
font-size:clamp(30px,3.8vw,46px); line-height:.9; letter-spacing:-.025em;
}
.cat--urus .cat__name{ color:var(--graphite); }
.cat--titan .cat__name{ color:var(--blue); }
.cat__fn{
margin:6px 0 0; font-family:var(--f-body); font-weight:700; font-size:13px;
letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
}
.cat__what{
margin:0; font-size:15.5px; line-height:1.68; color:var(--slate);
max-width:44ch;
padding-top:clamp(14px,1.8vw,18px); border-top:1px solid var(--line);
}
/* Fila de datos: etiqueta encima, valor debajo. Leerlo cuesta menos que una
línea corrida con puntos medios, y se ve como una ficha de producto. */
.cat__data{
margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(12px,1.6vw,18px) clamp(16px,2.4vw,28px);
padding-top:clamp(14px,1.8vw,18px); border-top:1px solid var(--line);
}
@media (min-width:620px){ .cat__data{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cat__data > div{ display:grid; gap:4px; min-width:0; }
.cat__data dt{
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.05em;
line-height:1.2; text-transform:uppercase; color:var(--slate);
}
.cat__data dd{
margin:0; font-family:var(--f-display); font-size:clamp(15px,1.7vw,19px);
line-height:1.15; letter-spacing:-.005em; color:var(--graphite);
text-transform:uppercase;
}
.cat__go{
display:inline-flex; align-items:center; gap:8px;
font-weight:700; font-size:15px; color:var(--blue);
padding-top:clamp(4px,1vw,8px);
}
.cat__go svg{ transition:transform .35s cubic-bezier(.2,.8,.3,1); }
.cat:hover .cat__go svg{ transform:translateX(5px); }
/* ---------- Rejilla de modelos ---------- */
.models__head{
position:relative; z-index:2;
margin-top:clamp(40px,5.5vw,68px); padding-bottom:14px;
border-bottom:1px solid var(--line);
display:flex; flex-wrap:wrap; gap:12px 20px; align-items:baseline; justify-content:space-between;
}
.models__all{
padding-block:10px;
display:inline-flex; align-items:center; gap:7px;
font-weight:700; font-size:14.5px; color:var(--blue); white-space:nowrap;
}
.models__all svg{ transition:transform .28s cubic-bezier(.2,.8,.3,1); }
.models__all:hover svg{ transform:translateX(3px); }
.models{
position:relative; z-index:2;
margin-top:clamp(18px,2.4vw,26px);
display:grid; gap:clamp(12px,1.6vw,18px);
/* minmax(0,1fr) y no 1fr: `1fr` es minmax(auto,1fr), así que el precio, que
no parte de línea, imponía su ancho mínimo y sacaba la rejilla 13px fuera
de la pantalla en iPhone. */
grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){ .models{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.model{
/* Los items de una rejilla también traen min-width:auto: sin esto la tarjeta
se niega a encoger por debajo de su contenido y se sale de su celda, aunque
la columna esté bien calculada. */
min-width:0;
/* Y la columna interna también: si no, el hijo más ancho (la etiqueta, que no
parte de línea) se sale de la tarjeta aunque la tarjeta mida lo correcto. */
display:grid; grid-template-rows:auto 1fr; grid-template-columns:minmax(0,1fr);
overflow:hidden;
border-radius:var(--r-md); border:1px solid var(--line); background:var(--white);
transition:transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.model:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--line-strong); }
/* El destacado se marca con el amarillo de marca en el borde, no con un tamaño
distinto: si la tarjeta creciera rompería la rejilla. */
.model--hot{ border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow); }
.model__shot{
position:relative; margin:0; aspect-ratio:4/3; overflow:hidden;
background:var(--paper); display:grid; place-items:center;
}
.model__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Los recortes llevan fondo transparente: se muestran completos y con aire, no
recortados a la caja como una foto. */
/* Tratamiento de recorte: fondo claro y la máquina completa con aire, no
recortada a la caja como una foto de ambiente. Se separó de `--hot` (que es
solo el borde amarillo de "top ventas") cuando llegaron las fotos reales de
George: ser recorte y ser top ventas son dos cosas distintas. */
.model--hot .model__shot,
.model--cut .model__shot{ background:linear-gradient(160deg,#EEF2FF,#FFFFFF); }
.model--hot .model__shot img,
.model--cut .model__shot img{ object-fit:contain; padding:12px; }
/* Lo mismo en la ficha de línea. */
.cat__shot--cut{ background:linear-gradient(160deg,#EEF2FF,#FFFFFF); }
.cat__shot--cut img{ object-fit:contain; padding:clamp(14px,2vw,26px); }
.model__body{ display:grid; gap:7px; align-content:start; padding:clamp(13px,1.5vw,17px); }
/* En celular la etiqueta era el elemento más ancho de la tarjeta y la empujaba
fuera. Se le permite partir y reducir el espaciado. */
.model__tag{ justify-self:start; max-width:100%; white-space:normal; }
@media (max-width:520px){ .model__tag{ letter-spacing:.04em; padding:5px 9px; } }
.model__name{
font-family:var(--f-display); text-transform:uppercase; margin:2px 0 0;
font-size:clamp(18px,2vw,23px); line-height:1; letter-spacing:-.015em; color:var(--graphite);
}
.model__spec{ margin:0; font-size:14px; line-height:1.62; color:var(--slate); }
.model__price{
margin:6px 0 4px; font-family:var(--f-display); font-size:clamp(17px,1.9vw,21px);
letter-spacing:-.01em; color:var(--blue);
text-transform:uppercase; }
.model .btn{ justify-self:start; }
/* ==========================================================================
4. AUTORIDAD (números grandes, ref. 4)
========================================================================== */
.authority{ background:var(--paper); }
/* Los números de trayectoria ya no son tarjetas blancas con sombra dentro de un
contenedor centrado: son cuatro paneles de la retícula a sangre. Todo su
estilo vive ahora en el bloque RETÍCULA DE PANELES, al final de la hoja
(`.dato`). Aquí no queda nada. */
/* ==========================================================================
5. PAQUETES (scroll horizontal + rotación 3D que se corrige)
========================================================================== */
/* El carrusel horizontal de tarjetas de vidrio se retiró: los tres paquetes son
ahora tres paneles visibles a la vez. `.pack`, `.slots` y `.slot` se
redefinen enteros en el bloque RETÍCULA DE PANELES. El fondo de la sección lo
pone la SECUENCIA DE COLOR, más abajo. */
/* ==========================================================================
6. GARANTÍAS Y SERVICIO
========================================================================== */
.scard__ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(30,49,164,.08); border:1px solid var(--line); color:var(--blue); }
/* La ubicación pasó a dos paneles de la retícula (`.mapa__info`, `.mapa__frame`).
El marco redondeado con sombra ya no existe. */
/* Las dos bodegas. Numeradas porque son dos direcciones distintas que hay que
distinguir de un vistazo, no por adorno. */
.sedes{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.sedes li{
display:flex; align-items:baseline; gap:10px;
font-size:16px; font-weight:600; color:var(--graphite);
}
.sedes__n{
font-family:var(--f-mono); font-size:14px; font-weight:500;
color:var(--blue); letter-spacing:.04em; flex:none;
}
/* ==========================================================================
DESPUÉS DE LA VENTA — secuencia numerada
Lo que pasa, en el orden en que pasa. Cada paso con su dato duro a la
derecha. El peso lo da la estructura, no un icono decorativo: por eso el
número manda y el icono es secundario.
========================================================================== */
/* La secuencia dejó de ser una lista de cinco filas con la cabecera pegajosa al
lado: son cinco paneles en fila, uno por paso. `.steps` y `.step*` se
redefinen en el bloque RETÍCULA DE PANELES. */
/* ==========================================================================
7. CIERRE
========================================================================== */
.close{ position:relative; }
.close__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.close__micro{ font-family:var(--f-mono); font-weight:500; font-size:14px; color:var(--slate); }
/* Footer */
/* ---------- Pie claro ----------
El cierre azul es el último golpe de color de la página; el pie se aparta para
no competir con él. Antes era un bloque grafito con el alero encima y diez
enlaces en una fila: pesaba más que la sección que debía rematar. */
.foot{
background:var(--paper); color:var(--slate);
/* Sin borde recto arriba: la costura con el cierre amarillo la hace el alero
de `.cut-top`, y un filete recto por encima lo delataría. */
padding-block:clamp(40px,5vw,64px) clamp(20px,2.4vw,28px);
}
.foot__inner{ display:grid; gap:clamp(30px,4vw,56px); grid-template-columns:1fr; }
@media (min-width:900px){ .foot__inner{ grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); } }
.foot__brand{ display:grid; gap:14px; align-content:start; justify-items:start; }
/* Sobre fondo claro el logo va tal cual, sin placa: la placa blanca solo hacía
falta cuando el pie era oscuro. */
.foot__logo{ height:38px; width:auto; display:block; }
.foot__claim{
margin:0; font-family:var(--f-display); text-transform:uppercase;
font-size:clamp(15px,1.8vw,19px); letter-spacing:.01em; line-height:1.15;
color:var(--graphite);
}
.foot__addr{ margin:0; font-size:14px; line-height:1.65; color:var(--slate); }
/* Enlaces agrupados por para qué sirven. Diez en una fila no se leen; en cuatro
columnas con título se escanean de un vistazo. */
.foot__cols{ display:grid; gap:clamp(22px,3vw,34px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:640px){ .foot__cols{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.foot__col{ display:grid; gap:2px; align-content:start; min-width:0; }
.foot__t{
margin:0 0 8px; font-family:var(--f-body); font-weight:700; font-size:13px;
letter-spacing:.12em; text-transform:uppercase; color:var(--graphite);
}
.foot__col a{
font-size:15px; color:var(--slate); padding-block:8px;
transition:color .2s ease;
}
.foot__col a:hover{ color:var(--blue); }
.foot__base{
margin-top:clamp(30px,4vw,48px); padding-top:clamp(16px,2vw,22px);
border-top:1px solid var(--line);
display:grid; gap:4px;
}
.foot__base p{ margin:0; font-size:13px; color:var(--slate); opacity:.85; }
/* ---------- CTA flotante de WhatsApp ---------- */
/* Botón flotante: solo ícono. El ícono es el único protagonista, así que va
grande y el botón es un círculo limpio. */
.wa-float{
position:fixed; z-index:70; right:20px; bottom:20px;
width:66px; height:66px; padding:0; border-radius:50%;
display:grid; place-items:center;
background:var(--yellow); color:var(--graphite);
box-shadow:0 18px 38px -12px rgba(11,13,18,.5);
/* Visible siempre. Antes arrancaba escondido abajo y lo sacaba el JS al
pasar medio hero; desde que no hay CTA en la barra, este es el único canal
permanente y no puede depender de que el JS cargue. */
transform:none; opacity:1;
transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .3s ease, background-color .2s ease;
will-change:transform;
}
.wa-float svg{ width:34px; height:34px; position:relative; z-index:2; }
/* ==========================================================================
EL BOTÓN LLAMA · halo fijo y dos ondas (29/09/2026)
Es el único canal de contacto permanente de la página y estaba ahí quieto,
esperando a que alguien se fijara. Ahora late.
DOS CAPAS CON PAPELES DISTINTOS:
HALO un resplandor amarillo fijo alrededor. No se anima: separa el botón
del fondo (que a veces es azul, a veces casi negro) y lo sostiene
cuando las ondas están apagadas. Va en `box-shadow`, junto a la
sombra proyectada que ya tenía.
ONDAS dos aros que salen del botón y se desvanecen, uno a mitad del ciclo
del otro. Dos y no tres: con tres el botón parece un radar y el ojo
deja de leer el icono.
SOLO SE ANIMAN `transform` Y `opacity`. Es la única razón por la que esto
puede latir eternamente sin costar batería: las dos se resuelven en la GPU
sin volver a pintar nada. Animar el `box-shadow`, que es lo que suele salir
al buscar «botón con pulso», obliga al navegador a repintar en cada
fotograma un elemento que está SIEMPRE en pantalla.
Los aros son pseudoelementos y no marcado nuevo a propósito: así el botón
flotante del marketplace hereda el efecto sin tener que regenerar las trece
páginas.
`prefers-reduced-motion` ya está cubierto por la regla global que corta
cualquier animación, unas líneas más abajo.
========================================================================== */
.wa-float{
box-shadow:
0 18px 38px -12px rgba(11,13,18,.5),
0 0 0 8px rgba(255,198,41,.16),
0 0 26px 2px rgba(255,198,41,.28);
}
.wa-float::before,
.wa-float::after{
content:""; position:absolute; inset:0; z-index:1;
border-radius:50%;
border:2px solid var(--yellow);
pointer-events:none;
transform-origin:50% 50%;
animation:waOnda 3s cubic-bezier(.2,.62,.3,1) infinite;
}
/* El desfase es la mitad del ciclo exacta: un aro sale siempre cuando el otro
va por la mitad, así el ritmo es constante y no a rachas. */
.wa-float::after{ animation-delay:1.5s; }
@keyframes waOnda{
0% { transform:scale(1); opacity:.6; }
/* Se apaga al 62% y no al final: un aro que llega al borde del recorrido
todavía visible se ve como un aro que se corta, no como uno que se va. */
62% { opacity:0; }
100% { transform:scale(1.95); opacity:0; }
}
/* Al pasar el ratón las ondas se paran. Si alguien ya está apuntando al botón,
el efecto ya cumplió su trabajo y lo único que hace es estorbar la lectura
del icono. */
.wa-float:hover::before,
.wa-float:hover::after{ animation-play-state:paused; opacity:0; }
.wa-float.is-in{ transform:translateY(0); opacity:1; }
.wa-float:hover{ background:#FFD24D; transform:translateY(0) scale(1.06); }
@media (max-width:520px){ .wa-float{ right:14px; bottom:14px; width:60px; height:60px; } .wa-float svg{ width:31px; height:31px; } }
/* ---------- Estados iniciales de animación (JS los limpia) ---------- */
/* ESTADOS DE PARTIDA DEL SISTEMA DE MOVIMIENTO.
Solo `opacity` y `translateY`, nunca `scale`. El `scale(.965)` que llevaba
`[data-fit]` se quitó: una pieza que además de subir crece se nota como
efecto, y un efecto que se nota le está robando atención a la máquina.
Recorridos cortos, 20px el texto y 32px la pieza. Un recorrido largo
(60-80px) es el tic más reconocible de plantilla: se ve barato porque la
pieza «viaja» en vez de asentarse.
Van bajo `.anim-ready`, que solo se pone si el módulo de animación arrancó:
si el JS falla, la página se lee entera. */
.anim-ready [data-rise]{ opacity:0; transform:translateY(20px); }
.anim-ready [data-fit]{ opacity:0; transform:translateY(32px); }
.anim-ready [data-hero-in]{ opacity:0; transform:translateY(20px); }
/* ==========================================================================
ACCESIBILIDAD — prefers-reduced-motion
Misma jerarquía y contenido, cero movimiento.
========================================================================== */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; scroll-behavior:auto !important;
}
/* Red de seguridad: si algo marcó .anim-ready, se neutraliza por completo. */
.anim-ready [data-rise], .anim-ready [data-fit], .anim-ready [data-hero-in]{
opacity:1 !important; transform:none !important;
}
.anim-ready .kt__i{ transform:none !important; }
.wa-float{ transform:none; opacity:1; }
.transit__track{ height:auto; }
.transit__item + .transit__item{ display:none; }
}
/* Focus visible consistente */
:focus-visible{ outline:3px solid var(--blue-electric); outline-offset:3px; border-radius:6px; }
/* ==========================================================================
RIELES HORIZONTALES
Corte en 980px a propósito: es el mismo punto donde el hero pasa a dos
columnas. Si los breakpoints no coinciden queda una franja (900–979px) con
el hero en una sola columna pero en modo desktop, demasiado alto para
pinnearlo y sin la banda de continuación.
Desktop (>=980px): sección pinneada, el track se mueve atado al scroll (GSAP).
Móvil (<980px): swipe nativo con scroll-snap. Es mejor UX en celular que
secuestrar el scroll vertical, y es la degradación pedida en la regla 7.
========================================================================== */
.lines__viewport{
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
overscroll-behavior-x:contain;
}
.lines__viewport::-webkit-scrollbar{ display:none; }
.lcard{ scroll-snap-align:center; }
@media (min-width:980px){
.anim-ready .lines__viewport{ overflow:hidden; scroll-snap-type:none; }
/* Cards más anchas en desktop: si no, las 3 caben en pantalla y el riel
horizontal recorrería 100px, que se lee como un glitch y no como efecto. */
.lcard{ flex:0 0 clamp(400px,36vw,520px); }
/* Aquí vivía la compresión de #lineas para que la sección pinneada cupiera
entera en el viewport. El pin se retiró hace tiempo y las clases que
tocaba (.lcard, .lines__viewport, .rail-hint) ya no existen en esa
sección; lo único que seguía haciendo era dejarle 46px de padding abajo,
que descuadraba la separación de la banda. Fuera. */
}
/* En celular los rieles se deslizan con el dedo: hay que decirlo.
La barra de progreso solo aplica al modo scroll-linked de desktop. */
.rail-hint{ display:flex; }
.rail-hint__arrow{ margin-left:7px; display:inline-block; animation:nudge 1.8s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
@media (max-width:979px){ .rail-hint .rail-bar{ display:none; } }
@media (min-width:980px){
.rail-hint__arrow{ display:none; }
.rail-hint{ display:none; }
.anim-ready .rail-hint{ display:flex; }
}
/* Trayectoria ya no es «copy + imagen lado a lado» dentro de un contenedor
centrado: es una retícula de cuatro columnas a sangre. Ver `.pgrid--tray`. */
/* Parallax interno de la placa: el arte se mueve dentro del marco */
.shot__art{ will-change:transform; }
/* ==========================================================================
.shot — PLACA DE IMAGEN
Marco con la proporción que ocupa la foto. Hoy lleva material provisional
bajado del Facebook del cliente; cuando llegue el definitivo solo se cambia
el `src` y se borran .shot__marks y .shot__tag.
OJO: este bloque va ANTES de "BLOQUE FULL-BLEED", porque .shot--full
sobreescribe estas reglas base y con la misma especificidad gana la última.
========================================================================== */
.shot{
position:relative; margin:0; overflow:hidden;
/* Radio interior: esta figura casi siempre vive dentro de una tarjeta de
24px, y llevar el mismo radio que ella era justo lo que se veía mal. */
border-radius:var(--r-in-lg);
aspect-ratio:4 / 3;
display:grid; place-items:center;
/* Degradado LINEAL, sin foco radial. Criterio de Juan (26/09/2026): todos los
degradados del sitio van en dirección, no en foco. Un radial mete un punto
de luz con su propio centro y, al haber varios en la misma pantalla, cada
superficie parece iluminada desde un sitio distinto. */
background:linear-gradient(155deg, #EDF1FF 0%, #E4EBFF 52%, #DCE4FF 100%);
border:1px solid var(--line);
isolation:isolate;
}
.shot:has(img.shot__art)::before{ display:none; }
.shot::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:
linear-gradient(to right, rgba(30,49,164,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(30,49,164,.055) 1px, transparent 1px);
background-size:34px 34px;
}
.shot__art{ position:relative; z-index:1; width:100%; height:100%; }
img.shot__art{ object-fit:cover; }
.shot__marks{ position:absolute; inset:14px; z-index:2; pointer-events:none; }
.shot__marks i{ position:absolute; width:16px; height:16px; border:1.5px solid rgba(255,255,255,.55); }
.shot__marks i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.shot__marks i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; border-radius:0 4px 0 0; }
.shot__marks i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 4px; }
.shot__marks i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 4px 0; }
.shot__tag{
position:absolute; z-index:3; left:12px; bottom:12px;
display:inline-flex; align-items:center; gap:7px;
padding:5px 10px; border-radius:999px;
background:rgba(11,13,18,.62); border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.06em;
color:#fff; white-space:nowrap;
}
.shot__tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--yellow); flex:none; }
.shot--wide{ aspect-ratio:16 / 9; }
.shot--tall{ aspect-ratio:4 / 5; }
.shot--dark{ border-color:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
/* ==========================================================================
GALERÍA — banda de imágenes entre secciones
========================================================================== */
.gallery{ position:relative; overflow:hidden; background:var(--paper); padding-block:clamp(56px,7vw,92px); }
.gallery__head{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(24px,3vw,34px); }
.gallery__head h2{ max-width:16ch; }
/* Mosaico, no riel. Cuatro verticales y dos horizontales que ocupan dos
columnas: la mezcla de proporciones es lo que evita que se lea como una
plantilla de cuadrícula uniforme. */
.gallery__grid{
margin-top:clamp(26px,3.4vw,40px);
display:grid; gap:clamp(10px,1.4vw,16px);
grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:860px){ .gallery__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.gallery__item{
min-width:0;
position:relative; margin:0; overflow:hidden;
border-radius:var(--r-md); background:var(--paper);
aspect-ratio:3/4;
}
@media (min-width:860px){
.gallery__item--wide{ grid-column:span 2; aspect-ratio:16/10; }
}
.gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* El pie va dentro de la foto, sobre un velo: fuera de ella obligaba a dejar
un carril de texto bajo cada placa y desalineaba las alturas. */
.gallery__item figcaption{
position:absolute; left:0; right:0; bottom:0;
display:flex; align-items:baseline; gap:9px;
padding:26px 14px 12px;
background:linear-gradient(to top, rgba(11,13,18,.80), rgba(11,13,18,0));
color:#fff; font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.06em;
text-transform:uppercase;
}
.gallery__n{ color:var(--yellow); flex:none; }
/* En la galería la etiqueta va arriba a la derecha, no abajo a la izquierda.
OJO: hay que ANULAR `left` y `bottom` de la regla base. Si se dejan puestos,
el elemento tiene los CUATRO lados fijados y deja de encogerse a su
contenido: se estira hasta ocupar la placa entera. Con `border-radius:999px`
y `backdrop-filter:blur(8px)` encima, eso pintaba un óvalo desenfocado gigante
sobre cada foto de la galería. Se veía como un fallo de render y era esto. */
.gallery__item .shot__tag{ top:10px; right:10px; left:auto; bottom:auto; }
/* ==========================================================================
BLOQUE FULL-BLEED — revelado cinematográfico
La placa arranca recortada como una ventana y se abre a sangre con el
scroll. Solo se anima `clip-path` y `transform`: nada de layout.
========================================================================== */
.reveal{ position:relative; height:100svh; min-height:520px; background:var(--paper); overflow:hidden; }
.reveal__frame{
position:absolute; inset:0; overflow:hidden;
will-change:clip-path;
}
/* Recorte inicial SOLO en modo animado. Sin JS o con reduced-motion la imagen
se ve a sangre completa desde el principio, que es el estado final. */
.anim-ready .reveal__frame{ clip-path:inset(11% 9% round 28px); }
.shot--full{
position:absolute; inset:0; aspect-ratio:auto;
border-radius:0; border:0;
}
.shot--full::before{ background-size:52px 52px; }
.shot--full .shot__tag{ left:auto; right:18px; bottom:18px; }
.reveal__overlay{
position:absolute; inset:0; z-index:4;
display:grid; place-items:center; padding:var(--gutter);
/* Velo lineal en vez de foco central. Al ir en dirección, el texto de arriba
queda sobre la parte más opaca y la foto respira por abajo. */
background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 46%, rgba(255,255,255,.28) 78%, rgba(255,255,255,0) 100%);
}
/* Ancho en px, no en ch: Fugaz One es de caja muy ancha y `ch` lo estrangulaba
a siete líneas. El salto de línea lo decide el del markup. */
.reveal__inner{ display:grid; gap:18px; justify-items:center; text-align:center; width:min(100%,1020px); }
.reveal__inner h2{ font-size:clamp(26px,4.2vw,50px); max-width:none; }
.reveal__meta{ color:var(--blue); font-size:13px; letter-spacing:.1em; }
@media (max-width:979px){
.anim-ready .reveal__frame{ clip-path:inset(7% 5% round 20px); }
.reveal__inner{ width:min(100%,560px); gap:15px; }
.reveal__inner h2{ font-size:clamp(22px,5.8vw,34px); }
}
/* ==========================================================================
.bleed-rail — RIEL A SANGRE
El riel vive FUERA del .wrap y ocupa todo el ancho de la pantalla: las
tarjetas entran y salen por los bordes en vez de cortarse contra el margen
del contenedor. El padding lateral es el que alinea la primera tarjeta con
la columna de texto de la cabecera.
========================================================================== */
.bleed-rail{
margin-inline:0;
padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.bleed-rail > *{ padding-right:0; }
/* ==========================================================================
1. HERO — TRES ACTOS (Home blanco → Titan azul → Urus amarillo)
Todo se mueve con transform y opacity. El color de fondo NO se interpola:
son tres capas apiladas que se cruzan, así los gradientes siguen funcionando.
========================================================================== */
.hero{
position:relative; overflow:hidden;
/* El acto 1 ya no es claro: sus tokens de texto son los de fondo oscuro. */
/* Sin padding vertical: el panel de imagen llega arriba y abajo del hero.
El texto se separa del navbar por su cuenta (.hero__copywrap). */
padding:0;
display:grid; align-items:stretch;
/* Tokens que cambian por acto. Los define .is-act-N de abajo.
Por defecto son los de fondo oscuro, porque el acto 1 ya abre en oscuro. */
--hero-fg:var(--white);
--hero-muted:rgba(255,255,255,.72);
--hero-line:rgba(255,255,255,.20);
}
.hero.is-live{ min-height:100svh; }
/* Las capas de color del hero no se funden: SUBEN, y su borde superior es el
alero del logo. El mismo perfil que ya corta las secciones, ahora en
movimiento. Un fundido de opacidad lo hace cualquiera; esta transición solo
la puede tener esta marca.
La capa mide más que el hero y asoma por arriba, así que cuando termina de
subir el vértice ya salió de pantalla y el color cubre del todo. Se anima
`yPercent`, que se compone en GPU: el `clip-path` es fijo y no se recalcula
en cada frame, que es lo que habría costado caro en celular. */
.hero__bg{
position:absolute; left:0; right:0; top:-16%; height:116%;
z-index:0; pointer-events:none;
clip-path:polygon(
0 var(--alero), 10.55% var(--alero), 49.88% 0,
89.45% var(--alero), 100% var(--alero),
100% 100%, 0 100%);
--alero:9%;
will-change:transform;
}
/* La capa blanca es el fondo de partida: ni sube ni se recorta. */
.hero__bg--1{ top:0; height:100%; clip-path:none; will-change:auto; }
/* FASE 1. Pasó por tres estados: blanco (sin impacto), azul casi negro
(`--grad-contrast`, demasiado apagado para abrir) y este. George pidió abrir
directamente con el azul claro de marca, el mismo del acto de Titán.
Consecuencia buscada: la página entra ya comprometida con el color, y el
único salto cromático grande queda reservado para el amarillo de Urus.
Consecuencia a tener en cuenta: el paso del acto 1 al 2 ya no cambia de
color, solo de contenido. Si alguna vez se quiere recuperar ese salto, basta
con darle a `.hero__bg--1` una variante propia en vez de compartir fondo. */
/* Azul con profundidad: una base marino y dos focos de luz superpuestos, en
vez de un degradado lineal plano de dos paradas. Da relieve y aguanta mucho
mejor una foto encima. */
.hero__bg--1,
.hero__bg--2{
/* Un solo degradado lineal en la dirección de toda la página (155deg). Antes
eran dos focos radiales superpuestos sobre un lineal: daba relieve, pero
también tres centros de luz distintos en la misma superficie. El relieve
ahora lo dan las paradas del propio lineal. */
background:linear-gradient(155deg, #16226E 0%, #1E31A4 38%, #2C45D6 72%, #1B2A8C 100%);
}
.hero__bg--1{ opacity:1; top:0; height:100%; clip-path:none; will-change:auto; }
.hero__bg--3{
background:linear-gradient(155deg, #FFD24D 0%, #FFC629 46%, #F5B912 100%);
}
/* Para suavizar el amarillo (ver nota de marca en index.html) basta con:
.hero__bg--3{ background:#FFF4D6; } */
.hero .orb{ z-index:1; }
/* ---------- Ghost typography: marca a contorno, sangrando por la izquierda ---
Detalle de fondo, no elemento de lectura. Relleno transparente y trazo del
color de primer plano del acto muy rebajado, para que se integre en el
degradado en vez de mancharlo. Vive entre el fondo (z 0) y el escenario
(z 2), y el riel de maquinas lo tapa cuando se cruzan. */
.hero__ghost{
position:absolute; z-index:1; pointer-events:none; user-select:none;
left:0;
font-family:var(--f-display); text-transform:uppercase; white-space:nowrap;
/* Mucho más grande que antes y sangrando por los dos lados a propósito.
Ya no hay que preocuparse de que la palabra quepa entera: al moverse con
el scroll, el corte se lee como recorrido y no como error de maquetación.
El JS le da la posición horizontal, así que aquí no hay transform. */
/* El tamano lo calcula el JS: cada palabra se ajusta al ancho REAL de la
pantalla, de borde a borde. El clamp es solo el valor de arranque para el
primer pintado y para cuando no hay JS. */
font-size:var(--ghost-fs, clamp(48px,8.5vw,132px));
letter-spacing:var(--ghost-ls, -.045em);
line-height:.76;
color:transparent; -webkit-text-stroke:1.5px var(--ghost-stroke, transparent);
opacity:0; transition:opacity .55s ease;
will-change:transform;
}
/* Dos líneas, arriba y abajo, cruzándose en direcciones opuestas. Una sola se
leía como un adorno suelto; dos enmarcan la escena y el cruce delata que el
movimiento está pensado. La de arriba va más rebajada para no competir con
el titular. */
.hero__ghost--bottom{ bottom:clamp(10px,2.4vh,40px); }
/* Baja al hueco entre el titular y el carrusel. Arriba se cruzaba con el
titular centrado y las dos cosas perdían: ahora hace de fondo de las
máquinas, que es donde un fantasma tipográfico funciona. */
.hero__ghost--top{ top:46%; }
.hero__ghost--top{ opacity:0; }
.hero.is-act-2 .hero__ghost--top,
.hero.is-act-3 .hero__ghost--top{ opacity:.55; }
/* Solo en los actos de color. En blanco no hay contraste que aguante un trazo
tan fino sin verse sucio. */
/* Mismo fondo que el acto 2, así que mismo trazo: sobre el azul claro el .13
de antes se perdía. */
.hero.is-act-1 .hero__ghost{ --ghost-stroke:rgba(255,255,255,.16); opacity:1; }
.hero.is-act-2 .hero__ghost{ --ghost-stroke:rgba(255,255,255,.16); opacity:1; }
.hero.is-act-3 .hero__ghost{ --ghost-stroke:rgba(17,17,17,.11); opacity:1; }
/* Sin JS los tres actos quedan apilados: el fantasma no tiene acto al que
pertenecer, asi que no se pinta. */
.hero:not(.is-live) .hero__ghost{ display:none; }
@media (prefers-reduced-motion:reduce){ .hero__ghost{ transition:none; } }
.hero__stage{ position:relative; z-index:2; width:100%; display:grid; gap:clamp(18px,3vw,34px); align-content:center; }
/* Desktop: el texto ocupa la izquierda y el riel vive en la mitad derecha, que
antes quedaba vacía. Las máquinas pueden así verse mucho más grandes. */
@media (min-width:980px){
.hero__stage{ grid-template-columns:1fr; align-content:center; }
.hero__copywrap{ padding-top:var(--nav-h); max-width:min(52%, 660px); }
}
/* ---------- Bloques de texto por acto (apilados y cruzados) ---------- */
.hero__copywrap{ position:relative; }
/* Sin JS, o si el módulo del hero no arranca, .hero nunca recibe .is-live y los
tres actos quedan apilados y legibles. Nunca una pantalla en blanco. */
.hero:not(.is-live) .hero__stage{ gap:40px; }
.hero:not(.is-live) .act{ margin-bottom:28px; }
.act{
display:grid; gap:15px; justify-items:start;
/* Ancho generoso a propósito: con una columna estrecha el titular se parte en
cuatro líneas y el bloque de texto no cabe junto al riel. */
/* Acompaña a `.hero__copywrap`: si esta se queda en 880 el ensanche de allá
no sirve de nada, porque el tope pequeño es el que manda. */
max-width:min(100%,940px);
color:var(--hero-fg);
}
.hero.is-live .act{ position:absolute; inset:0 auto auto 0; width:100%; opacity:0; visibility:hidden; will-change:transform,opacity; }
/* El acto visible lo pone el CSS, no el JS. Antes lo escribía en línea el
módulo del hero de tres actos, que ya no existe: la clase `is-live` va en el
marcado y aquí se le devuelve la opacidad. */
.hero.is-live .act.is-on{ visibility:visible; opacity:1; }
/* Alto reservado para el texto. El acto va en posición absoluta, así que este
valor es el que evita que el bloque se monte sobre el riel de máquinas. */
.hero.is-live .hero__copywrap{ min-height:clamp(290px,31vw,340px); }
.hero .h1{ font-size:clamp(28px,4vw,50px); }
.act .lead{ color:var(--hero-muted); max-width:52ch; }
/* Lema de marca. Se apoya en la tipografía de titulares pero muy pequeño, para
que lea como firma y no compita con el h1 que tiene encima. El color sale de
los tokens del acto, así que sobrevive al cambio a azul y a amarillo. */
.claim{
margin:0; font-family:var(--f-display); text-transform:uppercase;
font-size:clamp(13px,1.5vw,16px); letter-spacing:.02em; line-height:1.15;
color:var(--hero-fg);
}
/* El subrayado es el amarillo de marca, no una raya decorativa: nace del ancho
del texto y muere con él. */
.claim::after{
content:""; display:block; width:100%; height:3px; margin-top:6px;
background:var(--yellow); border-radius:2px;
}
.hero.is-act-3 .claim::after{ background:var(--graphite); }
.act h1, .act .act__title{ color:var(--hero-fg); }
.hero__badges{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-self:stretch; }
/* Carril del dato rotativo de preventa / en tránsito. La caja desapareció al
pasar a etiqueta sin caja, pero el carril sigue igual: los ítems se vuelven
absolutos por JS, así que TIENE que ser position:relative con alto propio o
el texto se escapa. El ancho se lo pone el JS midiendo el ítem más largo. */
.transit__track{ position:relative; height:1.35em; overflow:hidden; flex:none; }
.transit__item{ display:block; white-space:nowrap; }
.act__cta{ display:flex; flex-wrap:wrap; gap:12px; padding-top:2px; }
.act__meta{ font-family:var(--f-mono); font-weight:500; font-size:14px; color:var(--hero-muted); }
.act__kicker{
font-family:var(--f-body); font-weight:700; font-size:13px;
letter-spacing:.16em; text-transform:uppercase; color:var(--hero-muted);
}
.act__title{
font-family:var(--f-display); text-transform:uppercase;
font-size:clamp(48px,8vw,112px); line-height:.86; letter-spacing:-.03em;
}
/* Sobre el fondo oscuro del acto 1 el degradado azul del acento no se leía.
El amarillo de marca sí, y además adelanta el color del último acto. */
/* `:not(.kt__i)` NO ES UN ADORNO, ES LA CORRECCIÓN DE UN FALLO (30/09/2026).
Esta regla es (0,2,1). Mientras la del barrido fue `.hero h1 .kt__i.accent`
(0,3,1), le ganaba sin problema. Al generalizarla a `.kt__i.accent` bajó a
(0,2,0) y esta pasó a ganarle: su `background:none` borraba el degradado y su
`-webkit-text-fill-color:currentColor` devolvía la letra a amarillo macizo.
Resultado: el hero se quedó SIN barrido y Trayectoria sí lo tenía. Juan:
«¿por qué le quitaste el efecto al hero?».
Esta regla sigue haciendo falta para un acento que NO sea cinético, así que
en vez de subirle especificidad a la otra se le quita a esta el caso que no
le toca. Y la lección, anotada: al generalizar un selector hay que mirar qué
le ganaba antes por especificidad, porque lo que antes perdía ahora gana. */
.hero h1 .accent:not(.kt__i){ color:var(--yellow); background:none; -webkit-text-fill-color:currentColor; }
/* ==========================================================================
TIPOGRAFÍA CINÉTICA DEL TITULAR · motion graphics, 29/09/2026
El titular entra por CORTINA: cada línea sube desde debajo de su propio
renglón, tapada por una ventana, en vez de aparecer con un fundido. Es la
diferencia entre «el texto se hizo visible» y «alguien lo puso ahí».
EL DETALLE QUE HACE QUE FUNCIONE, y que rompe a quien no lo sabe: la tinta de
Fugaz One NO cabe en su caja. Medido con `measureText`, las tildes suben
0.231em por encima del borde superior. Una ventana con `overflow:hidden`
ajustada a la caja le corta la tilde a MÁS y a CARPINTERÍA, y queda un
titular decapitado. La ventana se agranda por arriba con `padding-top` y se
devuelve el hueco con un `margin-top` negativo del mismo valor: recorta donde
hay que recortar y el renglón no se mueve ni un píxel.
ESTADO DE REPOSO = ESTADO FINAL. El CSS deja el titular entero y quieto; solo
cuando el JS enciende `.anim-ready` se esconde para poder entrar. Así, sin JS
o con movimiento reducido, se lee el titular y no un hueco.
========================================================================== */
.kt{ display:grid; justify-items:inherit; }
.kt__l{
display:block; overflow:hidden;
padding-top:.24em; margin-top:-.24em;
}
.kt__i{ display:block; will-change:transform; }
.anim-ready .kt__i{ transform:translateY(105%); }
/* EL BARRIDO DE COLOR.
La segunda línea no aparece amarilla: se INUNDA de amarillo de izquierda a
derecha, justo después de terminar de subir. Se hace con un degradado de
corte duro recortado contra el texto (`background-clip:text`) y movido con
`--barrido`, de 0 a 1. Ni una capa encima ni un elemento de más: es la propia
letra la que cambia de color.
El degradado va de amarillo a blanco y no al revés porque el reposo (barrido
= 1) tiene que ser el titular ya amarillo. */
/* EL BARRIDO ES REUTILIZABLE, no exclusivo del hero.
Esta regla estaba anclada a `.hero h1` y ahora la usan dos titulares: el del
hero y el de Trayectoria. Lo único que cambia entre los dos es el color del
que parte la letra antes de inundarse, así que eso sale a una variable
(`--wipe-base`) y el resto es idéntico. Si mañana hace falta en un tercer
sitio, basta con poner `.kt` y `.accent` en el marcado. */
.kt__i.accent{
/* LA CAJA DEL FONDO TIENE QUE CUBRIR LA TINTA, o se pierde la tilde.
`background-clip:text` solo pinta donde hay fondo, y el fondo llega hasta
el borde de la caja: la tilde de CARPINTERÍA sobresale 0.231em por encima,
se queda sin fondo y desaparece. Medido en pantalla: el titular salía
«CARPINTERIA».
Este `padding` agranda la caja del fondo y el `margin` negativo devuelve el
hueco, así que la línea no se mueve. Es la misma compensación de tinta que
ya llevan la ventana de la cortina y la banda de máquinas trabajando: en
este sitio, cualquier cosa que recorte Fugaz One necesita este par. */
padding-top:.24em; margin-top:-.24em;
background-image:linear-gradient(90deg,
var(--yellow) 0, var(--yellow) 50%,
var(--wipe-base, #fff) 50%, var(--wipe-base, #fff) 100%);
background-size:200% 100%;
background-position:calc(100% - var(--barrido, 1) * 100%) 0;
background-repeat:no-repeat;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
/* Red de seguridad: si el navegador no sabe recortar el fondo contra el texto,
`background-clip:text` no aplica y la letra se quedaría transparente sobre un
rectángulo de degradado. Esta consulta solo deja el efecto donde funciona. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.kt__i.accent{
background:none; color:var(--yellow); -webkit-text-fill-color:currentColor;
}
}
/* El hero parte de su propio color de primer plano, que cambia por acto. */
.hero h1 .kt__i.accent{ --wipe-base:var(--hero-fg); }
.hero.is-act-3 h1 .accent:not(.kt__i){ color:var(--graphite); }
/* ---------- Riel de máquinas: una protagonista enorme + dos miniaturas ------
Tratamiento editorial: la máquina protagonista es un panel de imagen que
sangra hasta el borde derecho de la pantalla y se difumina por la izquierda
contra el color de fondo del acto, sin marco ni tarjeta. Las otras dos
quedan como miniaturas apiladas abajo a la derecha. Los papeles rotan en
círculo con el scroll.
Los tres estados se mueven con `transform` y transición CSS, nunca con
width/height: no hay recálculo de layout. */
.reels{ position:relative; width:100%; min-height:clamp(380px,50vw,650px); }
.reel{ position:relative; width:100%; height:100%; }
.hero.is-live .reel{ position:absolute; inset:0; opacity:0; visibility:hidden; }
.hero.is-live .reel.is-on{ visibility:visible; }
.hero.is-live .reels{ height:clamp(380px,50vw,650px); }
.mach{
position:absolute; inset:0;
transform-origin:100% 100%;
/* Más lento que antes (.6s) para acompañar el nuevo ritmo del hero: la
máquina que crece y las que se van tienen tiempo de leerse. */
transition:transform .95s cubic-bezier(.22,.75,.24,1), opacity .7s ease;
will-change:transform,opacity;
}
.mach__art{
position:relative; width:100%; height:100%; overflow:hidden;
border-radius:0;
transition:border-radius .6s cubic-bezier(.2,.8,.25,1), box-shadow .5s ease;
}
.mach__art img{ width:100%; height:100%; object-fit:cover; display:block; }
/* El filo izquierdo se funde con TRANSPARENCIA, no con un velo de color.
Antes era un degradado hacia un azul plano, y como el fondo real es un
degradado de varias capas el color no coincidía y se veía el parche.
Enmascarando la propia imagen, el fondo verdadero se ve a través, sea cual
sea: blanco, azul o amarillo. Cero coincidencia de color que mantener. */
.mach.is-hero .mach__art > img{
/* Dos máscaras cruzadas: la foto se disuelve por la izquierda Y por abajo.
Con solo el fundido horizontal el borde inferior quedaba recto y la imagen
se leía "cortada" contra el fondo. */
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.9) 54%, #000 70%),
linear-gradient(0deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 28%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.9) 54%, #000 70%),
linear-gradient(0deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 28%);
mask-composite:intersect;
}
/* --- Protagonista --- */
.mach.is-hero{ transform:none; opacity:1; z-index:2; }
.mach.is-hero .mach__art{ border-radius:0; }
/* --- Miniaturas ---
Ocultas: el hero enseña UNA máquina y el scroll se gasta en girarla. Las dos
pequeñas competían con ella y partían la escena en tres focos de atención.
Se mantienen en el marcado por si se quiere recuperar el riel de tres. --- */
.mach.is-t1, .mach.is-t2{ display:none; }
.reels.is-trio .mach.is-t1,
.reels.is-trio .mach.is-t2{ display:block; z-index:4; opacity:.92; }
.mach.is-t1{ transform:translate(-26px,-172px) scale(.185); }
.mach.is-t2{ transform:translate(-26px,-26px) scale(.185); }
.mach.is-t1 .mach__art, .mach.is-t2 .mach__art{
border-radius:76px;
box-shadow:0 60px 90px -30px rgba(11,13,18,.55);
}
.mach.is-t1 .mach__tag, .mach.is-t2 .mach__tag{ opacity:0; }
/* Ficha de la protagonista, sobre la zona difuminada */
/* La ficha de la máquina va CENTRADA en vertical, no abajo: queda en paralelo
con el bloque de texto de la izquierda. Se centra con flex y no con
`transform`, porque el transform lo usa el estado de miniatura. */
.mach__meta{
/* Desplazada hacia dentro del panel para que respire respecto al bloque de
texto de la izquierda. El margen se queda dentro de la zona difuminada,
así que el texto sigue leyéndose sobre el fondo y no sobre la foto. */
position:absolute; left:clamp(36px,9vw,190px); top:0; bottom:0; z-index:3;
width:min(calc(100% - clamp(36px,9vw,190px)),520px);
display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
gap:10px; text-align:left;
pointer-events:none; transition:opacity .4s ease, transform .4s ease;
}
.hero.is-live .mach.is-t1 .mach__meta,
.hero.is-live .mach.is-t2 .mach__meta{ opacity:0; transform:translateY(10px); }
.mach__name{
font-family:var(--f-display); text-transform:uppercase;
font-size:clamp(38px,5.8vw,86px); line-height:.88; letter-spacing:-.025em;
color:var(--hero-fg);
}
/* Esta etiqueta va ENCIMA de la foto de la máquina, no sobre el fondo del acto.
Antes heredaba --hero-muted y --hero-line, que son los colores del texto sobre
el fondo, y sobre una foto clara quedaba gris sobre gris. Ahora se pinta sola:
velo oscuro y texto blanco, que se lee sobre cualquier imagen. */
/* Etiqueta de categoría sobre foto. Antes era un bloque gris macizo con las dos
palabras al mismo peso separadas por un punto: se leía como un chip genérico.
Ahora las dos partes tienen jerarquía distinta y las separa una regla fina,
que es lo que la hace parecer una placa de datos y no una pegatina.
El relleno se mantiene porque va sobre foto y necesita fondo para leerse,
pero mucho más discreto. */
.pill--state{
display:inline-flex; align-items:stretch; gap:0; padding:0;
background:rgba(11,13,18,.52); color:#fff;
border:1px solid rgba(255,255,255,.16);
border-radius:var(--r-in-md);
font-size:13px; letter-spacing:.06em; overflow:hidden;
backdrop-filter:blur(8px) saturate(1.2); -webkit-backdrop-filter:blur(8px) saturate(1.2);
}
.pill--state .pill__a,
.pill--state .pill__b{ display:inline-flex; align-items:center; padding:6px 11px; }
/* La categoría manda; la gama acompaña. */
.pill--state .pill__a{ font-weight:700; }
.pill--state .pill__b{
font-family:var(--f-mono); font-weight:500; letter-spacing:.04em;
color:rgba(255,255,255,.72);
border-left:1px solid rgba(255,255,255,.18);
}
.mach__tag{
position:absolute; right:12px; top:12px; z-index:3;
padding:4px 9px; border-radius:6px;
background:rgba(11,13,18,.55); color:#fff;
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.08em;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
transition:opacity .4s ease;
}
/* ---------- Colores por acto ---------- */
/* Acto 2 · fondo azul: texto blanco y los esquemas en línea blanca, si no el
dibujo azul desaparece contra el fondo azul. */
.hero.is-act-2{ --hero-fg:#FFFFFF; --hero-muted:rgba(255,255,255,.75); --hero-line:rgba(255,255,255,.34); }
.hero.is-act-2 .act__title{ color:#fff; }
/* Acto 3 · fondo amarillo: todo en grafito. El CTA amarillo no puede ir sobre
amarillo, por eso el acto 3 usa .btn--dark. */
.hero.is-act-3{ --hero-fg:var(--graphite); --hero-muted:rgba(11,13,18,.62); --hero-line:rgba(11,13,18,.22); }
.hero.is-act-3 .btn--ghost{
border-color:rgba(11,13,18,.22); color:var(--graphite);
background:rgba(255,255,255,.4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.hero.is-act-3 .btn--ghost:hover{ background:var(--graphite); color:var(--yellow); border-color:var(--graphite); }
.hero.is-act-3 .orb{ opacity:.12; }
.btn--dark{
background:var(--graphite); color:var(--white);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -12px rgba(11,13,18,.8);
}
.btn--dark:hover{
background:#1a1f2b; transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 18px 34px -14px rgba(11,13,18,.9);
}
/* Botón fantasma sobre el azul del acto 2 */
.hero.is-act-2 .btn--ghost{
border-color:rgba(255,255,255,.32); color:#fff;
background:rgba(255,255,255,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.hero.is-act-2 .btn--ghost:hover{ background:#fff; color:var(--blue); border-color:#fff; }
/* Transición suave de color al cambiar de acto */
.hero, .act, .act .lead, .mach__name, .pill--state, .btn--ghost{
transition:color .32s ease, border-color .32s ease, background-color .32s ease;
}
/* ---------- Celular ---------- */
@media (max-width:979px){
.hero.is-live{ padding-top:calc(var(--nav-h) + 10px); padding-bottom:16px; }
.hero__stage{ gap:16px; }
.act{ gap:12px; }
/* El acto 1 es el más cargado de texto. En celular se recorta para que quepa
junto al riel: el CTA secundario sale (el catálogo sigue en el menú y en la
sección de líneas) y el párrafo baja de tamaño. */
.hero.is-live .hero__copywrap{ min-height:348px; }
.hero .h1{ font-size:clamp(26px,7vw,38px); }
.act[data-act="1"] .lead{ font-size:15px; }
.act[data-act="1"] .act__cta .btn--ghost{ display:none; }
.act__title{ font-size:clamp(46px,15vw,84px); }
.reels, .hero.is-live .reels{ height:clamp(260px,64vw,340px); min-height:0; }
.mach.is-t1{ transform:translate(-14px,-104px) scale(.26); }
.mach.is-t2{ transform:translate(-14px,-14px) scale(.26); }
.mach.is-t1 .mach__art, .mach.is-t2 .mach__art{ border-radius:54px; }
.mach__name{ font-size:clamp(30px,8.4vw,44px); }
.mach__meta{ left:18px; width:min(calc(100% - 18px),300px); }
.mach{ flex:0 0 clamp(112px,34vw,150px); }
.mach__name{ font-size:24px; }
}
/* Mientras el hero está en el acto amarillo, los CTA amarillos flotantes se
pierden contra el fondo. main.js marca en ese tramo. */
body.on-yellow .wa-float{ background:var(--graphite); color:var(--white); box-shadow:0 14px 30px -12px rgba(11,13,18,.5); }
body.on-yellow .wa-float:hover{ background:#1a1f2b; }
/* El fondo de la barra lo pinta `.nav::before` y solo cuando está pegada.
`.nav` en sí nunca lleva color. */
.nav{ background:none; }
/* ==========================================================================
REGLA DE SEGURIDAD PARA IMÁGENES
Cada hueco tiene su proporción fija y la imagen SIEMPRE lo llena por
recorte, nunca por deformación ni dejando aire. Vale para cualquier foto
que se meta después, tenga el tamaño que tenga.
========================================================================== */
.shot > img, .mach__art > img{
width:100%; height:100%; object-fit:cover; object-position:center 42%;
display:block;
}
/* El navegador reserva el espacio antes de que cargue la foto: sin saltos. */
.shot > img, .mach__art > img{ background:rgba(30,49,164,.06); }
/* La cápsula se adapta al acto del hero que tenga detrás.
Se repite el selector con `.is-stuck` a propósito: esa regla tiene más
especificidad y le ganaba, con lo que sobre el azul quedaba cápsula blanca
con enlaces blancos, ilegible.
Sobre azul y amarillo la cápsula se mantiene CLARA y los enlaces en grafito:
así el logo original se lee sin tener que invertirlo ni recolorearlo. */
body.on-blue .nav .nav__inner,
body.on-blue .nav.is-stuck .nav__inner{
background:rgba(255,255,255,.88);
border-color:rgba(255,255,255,.95);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 16px 40px -14px rgba(5,10,48,.55);
}
body.on-yellow .nav .nav__inner,
body.on-yellow .nav.is-stuck .nav__inner{
background:rgba(255,255,255,.9);
border-color:rgba(255,255,255,.95);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 16px 40px -14px rgba(90,60,0,.35);
}
/* Los enlaces quedan siempre en grafito: máximo contraste sobre la cápsula. */
body.on-blue .nav__links a,
body.on-yellow .nav__links a{ color:var(--graphite); }
body.on-blue .nav__links a:hover,
body.on-yellow .nav__links a:hover{ background:rgba(30,49,164,.09); color:var(--blue); }
/* ==========================================================================
.cut-top — CORTE DE MARCA EN LA ENTRADA DE UNA SECCIÓN
El perfil del alero del logo, pero sin superponer ninguna figura: se recorta
la propia sección y se sube sobre la anterior. Así el fondo de la sección
(degradado incluido) rellena el alero por sí solo, y por los hombros asoma lo
que haya arriba. Ventaja sobre el .seam-cut de SVG: no hay que mantener
sincronizado ningún color, y funciona igual si mañana cambia el fondo.
Las cotas son las del logo: hombros al 10,55% y 89,45%, ápice al 49,88%.
========================================================================== */
.cut-top{
--seam-h:clamp(30px,4vw,62px);
/* Grosor de la línea blanca de separación: la unidad del sitio, la misma que
separa las piezas de las retículas. */
--seam-w:var(--gap-unit);
position:relative;
margin-top:calc(var(--seam-h) * -1);
padding-top:calc(clamp(72px,11vw,132px) + var(--seam-h));
clip-path:polygon(
0 var(--seam-h),
10.55% var(--seam-h),
49.88% 0,
89.45% var(--seam-h),
100% var(--seam-h),
100% calc(100% + 2px),
0 calc(100% + 2px)
);
}
/* LÍNEA BLANCA DE SEPARACIÓN, con la forma del logo.
En la web de Apple cada ficha de producto se separa de la siguiente con una
línea blanca fina. Aquí la línea existe igual, pero sigue el alero.
Cómo se dibuja, que tiene truco: no se puede "trazar" un clip-path. Lo que
hay son DOS recortes que se restan.
1. La sección ya está recortada por debajo del alero (regla de arriba):
todo lo que queda POR ENCIMA del alero no se pinta.
2. Este pseudoelemento es una banda blanca recortada por encima del MISMO
alero desplazado hacia abajo `--seam-w` píxeles.
Lo único que sobrevive a los dos recortes es la franja entre los dos aleros:
una línea blanca del grosor exacto que siga la forma, sin SVG y sin tener que
mantener sincronizado ningún color con la sección de arriba. */
.cut-top::before{
content:""; position:absolute; top:0; left:0; right:0; z-index:1;
height:calc(var(--seam-h) + var(--seam-w) + 1px);
background:#fff; pointer-events:none;
clip-path:polygon(
0 0,
100% 0,
100% calc(var(--seam-h) + var(--seam-w)),
89.45% calc(var(--seam-h) + var(--seam-w)),
49.88% var(--seam-w),
10.55% calc(var(--seam-h) + var(--seam-w)),
0 calc(var(--seam-h) + var(--seam-w))
);
}
/* La imagen del hero ocupa TODO el alto disponible en desktop.
Va al final del archivo a propósito: tiene que ganarle a la altura fija que
se define en el bloque del hero (misma especificidad, gana la última). */
/* ==========================================================================
PANEL DE IMAGEN DEL HERO — anclado al borde de la pantalla
Va al final del archivo y con selector `.hero .reels` a propósito: la regla
base de .reels aparece más abajo en el bloque del hero y, con la misma
especificidad, le ganaba. Anclarlo al (y no a la rejilla) es lo
que garantiza que toque exacto el borde derecho y el alto completo en
cualquier ancho de viewport; con márgenes en porcentaje nunca cuadraba,
porque un margen % se resuelve contra el área de la rejilla, no contra el
contenedor.
========================================================================== */
@media (min-width:980px){
/* Se repite el selector con `.is-live` para igualar la especificidad de la
altura fija que se define arriba; si no, el panel se quedaba en 650px. */
.hero .reels,
.hero.is-live .reels{
position:absolute; top:0; right:0; bottom:0;
left:51%;
width:auto; height:auto; min-height:0; margin:0; z-index:1;
}
}
/* Cabecera de la galería: dos acciones */
.gallery__cta{ display:flex; flex-wrap:wrap; gap:10px; }
/* ==========================================================================
GALERÍA ENLAZABLE A INSTAGRAM
Cada plano puede envolverse en apuntando a su reel
o publicación. Enlace directo, sin el script de embed de Meta: pesa cero,
no se rompe cuando Meta cambia el embed y no penaliza el móvil.
========================================================================== */
.gallery__link{ display:block; position:relative; border-radius:var(--r-lg); overflow:hidden; }
.gallery__link::after{
content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
background:linear-gradient(to top, rgba(11,13,18,.38), transparent 45%);
opacity:0; transition:opacity .3s ease;
}
.gallery__link:hover::after{ opacity:1; }
.gallery__link .shot{ transition:transform .5s cubic-bezier(.2,.8,.25,1); }
.gallery__link:hover .shot{ transform:scale(1.03); }
/* Sin usar todavía a propósito: se activa al envolver un plano en
.gallery__link para enlazarlo a su reel. Ver LEEME.md. */
.gallery__play{
position:absolute; z-index:5; right:12px; top:12px;
width:38px; height:38px; border-radius:50%;
display:grid; place-items:center;
background:rgba(255,255,255,.92); color:var(--blue);
box-shadow:0 8px 20px -8px rgba(11,13,18,.5);
}
/* ==========================================================================
MODO RECORTE (máquinas sin fondo)
Cuando lleguen los PNG con transparencia, basta con añadir la clase
`is-cutout` a .reels: la máquina pasa a flotar sobre el color del acto, con
sombra proyectada y sin el velo de fundido, que deja de tener sentido.
========================================================================== */
.reels.is-cutout .mach__art{ background:transparent; box-shadow:none; border-radius:0; overflow:visible; }
.reels.is-cutout .mach__art > img{
object-fit:contain; object-position:center;
background:transparent;
filter:drop-shadow(0 38px 44px rgba(11,13,18,.32));
}
.reels.is-cutout .mach__tag{ display:none; }
.reels.is-cutout .mach.is-t1 .mach__art,
.reels.is-cutout .mach.is-t2 .mach__art{ border-radius:0; box-shadow:none; }
/* ==========================================================================
ESCAPARATE DE PRODUCTO — primer impacto del hero
La máquina deja de ser una foto dentro de un marco y pasa a ser un objeto
apoyado en un suelo. Lo que la hace parecer fotografiada y no pegada es la
sombra: un recorte flotando en el vacío se ve barato.
========================================================================== */
/* Titular corto del acto 1: más grande que el h1 normal porque ahora carga solo
con el peso que antes repartían el lema y el párrafo. */
/* El titular pasa a ser el elemento más grande de la pantalla. Antes el
fantasma del fondo medía 283px y este 76: el adorno pesaba cuatro veces más
que el mensaje. */
/* `.hero .h1` es (0,2,0) y le ganaba a `.h1--stage` (0,1,0): el titular se
quedaba en los 50px de la regla vieja por mucho que aquí pidiera 118. */
.hero .h1--stage{
/* 7vw y no 8: a 8 la primera línea no cabía en la columna y «QUE» quedaba
huérfano en un renglón propio. Sigue siendo el elemento más grande de la
pantalla, que es lo que se buscaba. */
/* 6vw, medido y no estimado: la columna útil son 624px y «MÁQUINAS QUE»
necesita 722 a 103px de cuerpo. A 6vw entra en dos líneas sin dejar
«QUE» huérfano en un renglón propio. */
/* El `min()` con `vh` es lo que faltaba: el cuerpo tiene que mirar las DOS
dimensiones, no solo el ancho. Medido en 1512x800: a 6vw el titular pedía
90,7px, o sea 185px de dos líneas, y el bloque de texto se llevaba el 56%
de la pantalla. A 9,5vh se queda en 76px y devuelve 38px al carrusel sin
dejar de ser, de lejos, lo más grande de la pantalla. */
font-size:min(clamp(42px,6vw,92px), 9.5vh); line-height:1.02; letter-spacing:-.03em;
/* Sin límite de medida: el corte de línea lo decide el del marcado. Con
9ch la primera línea no cabía y se partía en cuatro renglones. */
max-width:none; text-wrap:balance;
}
/* Franja de datos. Lo que el párrafo decía en prosa, en cifras: un comprador
que compara máquinas lee esto antes que cualquier frase. */
.specstrip{
margin:clamp(20px,2.6vw,30px) 0 0; padding-top:clamp(16px,2vw,22px);
border-top:1px solid var(--hero-line);
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(12px,1.8vw,20px) clamp(18px,3vw,38px);
}
@media (min-width:560px){ .specstrip{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Etiqueta y valor tienen que leerse como UNA cosa, no como dos.
Lo que los separaba no era el hueco (ya era de 3px) sino el interletrado: con
.12em la etiqueta salía más ancha que su propio valor y las dos líneas no
compartían eje. Bajando a .05em cada etiqueta mide más o menos lo que mide su
valor, y el par se lee de arriba abajo de un golpe. */
.specstrip > div{ display:grid; gap:4px; min-width:0; }
.specstrip dt{
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.05em;
line-height:1.2; text-transform:uppercase; color:var(--hero-muted);
}
.specstrip dd{
margin:0; font-family:var(--f-display); font-size:clamp(16px,1.9vw,21px);
line-height:1.1; letter-spacing:-.005em; color:var(--hero-fg);
text-transform:uppercase;
}
/* ---------- La máquina sobre el escenario ---------- */
.mach--cut.is-hero .mach__art{
background:transparent; box-shadow:none; border-radius:0; overflow:visible;
}
/* La foto del recorte es muy apaisada (2:1) y el panel del hero es alto y
estrecho: encajándola dentro, la máquina quedaba en un 27% del alto de
pantalla, o sea pequeña. Se saca del encaje y se dimensiona a mano, más ancha
que el panel y sangrando por la derecha. Una máquina que no cabe se lee como
grande; una que cabe entera con aire alrededor se lee como una miniatura. */
.mach--cut.is-hero .mach__art{ display:block; }
/* La máscara doble de las fotos enmarcadas no sirve aquí: su fundido inferior
disolvía la base de la máquina y peleaba con la sombra de apoyo. */
.mach--cut.is-hero .mach__art > img{
-webkit-mask-composite:source-over; mask-composite:add;
position:absolute; right:-18%; bottom:8%;
/* 158% de ancho estaba calibrado para el recorte anterior, muy apaisado
(ratio 2.09). La foto de estudio de George es casi cuadrada (1.10): al
mismo ancho tapaba el titular entero. Ahora se manda por ALTURA, que es lo
que controla de verdad cuánto invade la columna de texto. */
width:auto; height:60%; max-width:none;
object-fit:contain;
/* La sombra sigue la silueta, no la caja. Es lo que ancla la máquina. */
filter:drop-shadow(0 30px 36px rgba(11,13,18,.30));
/* SIN máscara de fundido. La tenía cuando el recorte era tan ancho que se
metía debajo del titular: había que disolver ese borde. La foto de estudio
ya no llega hasta ahí, así que la máscara solo servía para comerse la mesa
de entrada de la máquina, que es parte del producto. */
}
@media (max-width:979px){
/* Apilado no hay columna de texto al lado, así que no hace falta disolver
nada: la máquina se ve entera. */
.mach--cut.is-hero .mach__art > img{ -webkit-mask-image:none; mask-image:none; }
}
@media (max-width:979px){
/* Apilado: el panel es ancho y bajo, así que la máquina ya no necesita
sangrar tanto para verse grande. */
/* Apilado: la caja del riel es baja (380px), así que la foto se manda por
altura. Con ancho al 112% la máquina se salía por ARRIBA de su caja y
tapaba la franja de datos (garantía y envíos). */
.mach--cut.is-hero .mach__art > img{ right:-2%; bottom:3%; width:auto; height:92%; }
}
/* Pie de la máquina del hero: qué modelo es. Discreto, alineado a la derecha
bajo el recorte, en mono como el resto de datos duros del sitio. */
.mach__id{
position:absolute; right:clamp(16px,4vw,48px); bottom:clamp(10px,2vh,26px);
z-index:3; margin:0; text-align:right;
font-family:var(--f-mono); font-weight:500; font-size:14px; line-height:1.5;
color:var(--hero-fg); letter-spacing:.02em;
}
.mach__id span{ display:block; color:var(--hero-muted); font-size:13px; }
.mach:not(.is-hero) .mach__id{ display:none; }
@media (max-width:979px){ .mach__id{ right:16px; bottom:6px; } }
/* El suelo: una elipse difuminada bajo la máquina. Sin ella el recorte flota en
el vacío; con ella parece apoyado en algo. */
.mach--cut.is-hero .mach__art::after{
content:""; position:absolute; z-index:-1;
left:6%; right:-6%; bottom:4%; height:7%;
border-radius:50%;
background:radial-gradient(ellipse at center, rgba(11,13,18,.32), rgba(11,13,18,0) 70%);
pointer-events:none;
}
.hero.is-act-2 .mach--cut .mach__art::after,
.hero.is-act-3 .mach--cut.is-hero .mach__art::after{ background:radial-gradient(ellipse at center, rgba(11,13,18,.26), rgba(11,13,18,0) 70%); }
/* AVISO OCULTO A PETICIÓN DE JUAN (25/09/2026). Quedaba cortado por el alero
del fondo y ensuciaba el hero. El dato sigue siendo cierto: de los nueve
recortes del riel SOLO el de la Titán 2 corresponde a su modelo; los otros
ocho son sustitutos visuales mientras llegan las fotos de George.
ESTO NO SE PUEDE PUBLICAR ASÍ. Antes de sacar el sitio a producción hay que
reemplazar las imágenes o volver a mostrar el aviso: basta con borrar la
línea `display:none` de abajo. Anotado también en LEEME.md. */
.mach--cut .mach__tag{
display:none;
position:absolute; left:50%; right:auto; top:auto; bottom:4px;
transform:translateX(-50%);
background:rgba(11,13,18,.62); color:#fff;
padding:5px 11px; border-radius:6px;
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.02em;
white-space:nowrap; z-index:3;
}
/* En las miniaturas no cabe y sobra: ahí ya se entiende que es material de paso. */
.mach--cut.is-t1 .mach__tag,
.mach--cut.is-t2 .mach__tag{ display:none; }
/* ==========================================================================
PÁGINAS LEGALES
Documentos para leer, no para escanear: una sola columna estrecha, medida
de línea corta y jerarquía por tamaño, no por color. Comparten tokens y
fuentes con el home, así que no hay un segundo sistema que mantener.
========================================================================== */
.legal{ padding-top:calc(var(--nav-h) + clamp(28px,5vw,56px)); padding-bottom:clamp(56px,8vw,96px); }
.legal__wrap{ max-width:760px; margin-inline:auto; }
.legal__head{ display:grid; gap:14px; padding-bottom:clamp(26px,4vw,40px); border-bottom:1px solid var(--line); }
.legal__kicker{
font-family:var(--f-mono); font-weight:500; font-size:14px; letter-spacing:.14em;
text-transform:uppercase; color:var(--slate);
}
.legal h1{ font-size:clamp(30px,5.4vw,50px); }
.legal__meta{
margin:0; font-family:var(--f-mono); font-weight:500; font-size:14px; color:var(--slate);
display:flex; flex-wrap:wrap; gap:6px 18px;
}
.legal__body{ display:grid; gap:clamp(26px,3.4vw,38px); padding-top:clamp(26px,4vw,40px); }
.legal section{ display:grid; gap:12px; }
.legal h2{
font-size:clamp(19px,2.4vw,25px); line-height:1.1;
padding-top:clamp(8px,1.4vw,14px);
}
.legal h3{ font-size:16px; text-transform:none; font-family:var(--f-body); font-weight:700; letter-spacing:0; }
.legal p, .legal li{ font-size:16px; line-height:1.68; color:#2A3140; }
.legal p{ margin:0; max-width:68ch; }
.legal ul, .legal ol{ margin:0; padding-left:21px; display:grid; gap:9px; max-width:68ch; }
.legal a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.legal strong{ color:var(--graphite); }
.legal__toc{
display:grid; gap:9px; padding:clamp(18px,2.6vw,24px);
background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
}
.legal__toc ol{ padding-left:19px; gap:6px; }
.legal__toc li{ font-size:15px; }
/* Dato que el cliente todavía no ha entregado. Se marca fuerte a propósito:
publicar una política legal con un hueco dentro es peor que no publicarla. */
.pend{
display:inline-block; padding:1px 8px; border-radius:5px;
background:#FFE7A3; color:#6B4E00; border:1px solid #E0B94B;
font-family:var(--f-mono); font-size:14px; font-weight:500; letter-spacing:.02em;
}
.legal__warn{
display:grid; gap:10px; padding:clamp(18px,2.6vw,24px);
background:#FFF8E6; border:1px solid #E7CE8C;
border-radius:var(--r-md);
}
.legal__warn p{ font-size:14.5px; color:#5E4A12; }
.legal__warn strong{ color:#3D2F00; }
/* Miniaturas del acto con escaparate. La máquina grande ocupa la franja baja
del panel, así que las dos pequeñas se suben al borde superior: antes caían
justo encima del recorte y lo partían por la mitad. */
@media (min-width:980px){
.reel .mach--cut ~ .mach.is-t1,
.reel .mach--cut ~ .mach.is-t2{ top:clamp(14px,3vh,34px); bottom:auto; }
.reel .mach--cut ~ .mach.is-t1{ right:clamp(12px,1.6vw,22px); }
.reel .mach--cut ~ .mach.is-t2{ right:calc(clamp(12px,1.6vw,22px) + 142px); }
}
/* ==========================================================================
HERO: COPIA ARRIBA, CARRUSEL ABAJO (26/09/2026)
Estructura pedida por George: el mensaje centrado en el tercio superior, y
los dos tercios de abajo para las máquinas. Va al final del archivo a
propósito, para ganarle a las reglas del bloque del hero sin tener que
editarlas una por una.
========================================================================== */
.hero{
/* Dos filas: un tercio para el mensaje, dos tercios para las máquinas.
`minmax(0,…)` en las dos para que el contenido no pueda estirar la fila
por encima de su reparto, que es la trampa clásica de CSS Grid. */
/* 32/68 dejaba el bloque de texto pegado al techo y un vacío grande bajo el
carrusel. 40/60 le da aire arriba al mensaje y le quita banda muerta a las
máquinas, que ya tienen su propio alto. */
/* `minmax(auto, 40fr)` y NO `minmax(0, 40fr)` en la fila del mensaje.
Medido en una ventana de 1512x800: la fila del texto sale a 320px y el
bloque de texto mide 485. Con el mínimo en 0 la fila no crece, el texto se
sale por abajo y aterriza ENCIMA de las máquinas: eso es lo que se veía
amontonado en pantallas de escritorio cortas, y no tenía nada que ver con
el 3D. Con el mínimo en `auto`, el reparto 40/60 se mantiene mientras
quepa, y en cuanto no cabe la fila del mensaje se queda con lo suyo y las
máquinas ceden. El texto no se puede encoger; las fotos sí. */
grid-template-rows:minmax(auto,40fr) minmax(0,60fr);
/* HUECO GARANTIZADO ENTRE EL MENSAJE Y LAS MÁQUINAS.
Sin él, la separación era lo que SOBRARA después de repartir, y eso
depende de tres cosas que cambian con la ventana (cuánto mide el titular,
cuánto se lleva el alero, cuánto crece la foto). Medido antes de ponerlo:
30px de aire en una pantalla de 1220 y 12px en una de 900. Doce píxeles
entre un bloque de texto y una fila de máquinas se lee como un choque.
Con un `row-gap` la separación es un número que se decide, no un residuo, y
el presupuesto en `cqh` de la banda lo descuenta solo porque su fila mide
menos. */
row-gap:clamp(20px,3vh,44px);
/* ALTURA DEFINIDA, no `min-height`. Con `min-height` la altura del hero es
indefinida para la rejilla, y entonces las filas `fr` no reparten: se
dimensionan por la fila que más contenido tiene y estiran el contenedor.
Medido: el hero acababa en 1336px dentro de una ventana de 1235 y el
carrusel se salía por abajo. Con `height` el reparto 34/66 es exacto. */
height:100svh; min-height:620px;
}
.hero__stage{
align-content:center; justify-items:center; text-align:center;
/* Aire real bajo la barra. Con el mínimo justo, el antetítulo quedaba casi
tocando el nav y la pantalla arrancaba apretada. */
/* SOLO LA SEPARACIÓN DE LA BARRA, el resto del aire lo reparte el centrado.
Este relleno estaba en `nav-h + hasta 84px`, y en una pantalla alta eso se
comía casi todo el espacio libre de la fila ANTES de que el
`align-content:center` pudiera repartirlo: el bloque de texto quedaba
pegado al borde de arriba y todo el hueco sobrante caía debajo, entre el
texto y las máquinas. Medido en 1700x1220: 25px de aire arriba contra 210
abajo.
Ahora el relleno solo garantiza que el antetítulo no toque la barra, y de
centrar el bloque en su fila se encarga la rejilla, que es su trabajo. */
padding-top:calc(var(--nav-h) + clamp(28px,3.4vh,60px));
}
/* La columna de texto ya no vive a la izquierda: manda centrada y con medida
corta, que es lo que hace que un titular centrado no se lea flojo. */
@media (min-width:980px){
/* 940 y no 820. Medido a 1512px de ancho: el titular va a 90,7px de cuerpo y
«EN TU CARPINTERÍA.» necesita unos 850px. En una columna de 820 no cabe y
se parte en TRES renglones, que a 92px de interlínea son 93px de más
comidos al carrusel. Por eso las máquinas salían apretadas contra el alero
en pantallas de escritorio cortas. Sigue siendo medida corta: 940 de 1512
es el 62% del ancho. */
.hero__copywrap{ max-width:min(100%, 940px); margin-inline:auto; padding-top:0; }
}
.hero.is-live .hero__copywrap{ min-height:0; }
.hero .act{ justify-items:center; text-align:center; margin-inline:auto; }
.hero .act .hero__badges,
.hero .act .act__cta{ justify-content:center; }
.hero .act .specstrip{ justify-content:center; }
/* Sin el pin, los bloques ya no se cruzan: el acto único puede fluir. */
.hero.is-live .act{ position:relative; inset:auto; opacity:1; visibility:visible; }
/* ---------- Carrusel ---------- */
/* Centrado en su banda y con las máquinas grandes. Con el carrusel pegado
abajo y las fotos pequeñas quedaba una franja azul vacía enorme entre la
franja de datos y las máquinas, que es lo que se veía como "muy separado". */
.hcar{
/* `stretch` y no `center`. Con `center` la banda se encoge a su contenido y
su altura queda INDEFINIDA; en cuanto se le puso `container-type:size`, la
contención de tamaño le borró esa referencia y colapsó a 0. Un contenedor
de consulta por tamaño necesita que la altura se la dé la rejilla, no su
contenido. El centrado se hace ahora por dentro, con flex. */
position:relative; z-index:2; align-self:stretch;
/* CENTRADAS EN SU FRANJA, no apoyadas abajo.
Estuvieron apoyadas abajo mientras el arco BAJABA a la máquina del centro:
esa caída necesitaba su respiro entero por debajo. Desde que el arco sube
los lados en vez de bajar el centro, esa reserva ya no existe, y anclar
abajo solo servía para que todo el hueco libre de la franja se acumulara
ARRIBA, justo entre el texto y las máquinas. El alero de la sección
siguiente ya está reservado con el `padding-bottom` de esta misma regla,
que queda fuera del centrado. */
display:flex; align-items:center;
width:100%; overflow:hidden;
/* EL PUNTO DE FUGA VIVE AQUÍ, no en cada máquina.
Antes cada pieza llevaba su propio `perspective()` dentro de su transform,
y eso hace que cada una tenga su punto de fuga centrado en sí misma: todas
se inclinan igual, nadie se aleja, y lo que se ve es una fila de cartas
torcidas, no una escena. Con la perspectiva en el contenedor todas las
máquinas comparten un solo ojo, el del centro de la pantalla, así que
girarse hacia dentro las manda de verdad hacia el fondo.
El origen va un poco por encima de la mitad: la cámara mira ligeramente
desde arriba, que es como se mira una máquina de pie en un taller. */
perspective:1150px;
perspective-origin:50% 44%;
/* Contenedor de consulta por TAMAÑO. Es lo que le permite a las máquinas
medirse contra el sitio que les queda de verdad y no contra `vh`, que no
sabe cuánto se llevó el texto. La regla que lo usa está al final del
archivo, con la de tamaño percibido. */
container-type:size;
/* Los bordes se disuelven en vez de cortarse en seco: es la diferencia entre
una marquesina y una fila recortada por una caja. */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
/* LA SECCIÓN DE ABAJO SE SUBE ENCIMA. `.cut-top` lleva
`margin-top: -var(--seam-h)`, así que los últimos 60px del hero (a 1512px
de ancho) ya están tapados por el alero de la sección siguiente. Medido: el
hero acababa en 800, la sección de abajo empezaba en 740 y el pie de la
máquina del centro caía en 787: cuarenta y siete píxeles debajo del alero.
Este respiro es ese solape, con la misma fórmula. Y como la banda es
contenedor de consulta, se descuenta solo del presupuesto en `cqh`: una
sola cifra que tocar si el alero cambia de alto.
Va AQUÍ y no arriba del bloque: había un `padding-bottom:0` en esta misma
regla que se lo comía. */
/* El alero + 14px. El solape solo garantiza que el pie no quede TAPADO; los
14px son para que tampoco quede BESANDO la línea blanca, que es donde el
ojo lee «se salió». */
padding-bottom:calc(clamp(30px,4vw,62px) + 14px);
}
.hcar__track{
width:100%;
display:flex; align-items:flex-end; gap:clamp(24px,4vw,64px);
/* Sin respiro abajo. El arco pasó a subir los lados en vez de bajar el
centro, así que ya no hace falta reservar nada por debajo. */
padding-bottom:0;
will-change:transform;
/* Sin esto la pista aplana a sus hijas contra su propio plano y la
perspectiva del contenedor no llega: es el otro 50% del efecto. */
transform-style:preserve-3d;
}
.hcar__it{
margin:0; flex:0 0 auto;
display:grid; justify-items:center; gap:12px;
/* La escala, la caída y el giro los pone el JS según lo cerca que esté del
centro. Aquí solo va el estado de reposo, que es el que se ve sin JS.
El origen va en la base: así al encogerse la máquina se queda apoyada en la
misma línea en vez de flotar hacia el centro de su caja. */
transform-origin:50% 100%;
backface-visibility:hidden;
}
.hcar__it img{
display:block; width:auto; max-width:none;
/* La altura la decide `data-forma` (regla de tamaño percibido, al final del
archivo). Aquí la enchapadora Titán 2 es 2:1 y las demás casi cuadradas:
con una altura igual para todas, la Titán 2 parecía el doble de máquina. */
height:auto;
object-fit:contain;
filter:drop-shadow(0 22px 28px rgba(11,13,18,.32));
}
/* El pie reacciona al foco. `--k` lo publica el JS: 1 cuando la máquina está en
el centro, 0 cuando está en el borde. Así la protagonista se ANUNCIA (nombre
grande y nítido) y las demás se quedan en un susurro. Es lo que separa un
carrusel de una tira de imágenes: en todo momento hay una máquina que la
página te está presentando. */
.hcar__it figcaption{
font-family:var(--f-mono); font-weight:500; font-size:14px; line-height:1.5;
color:var(--hero-muted); letter-spacing:.02em; text-align:center;
opacity:calc(.3 + .7 * var(--k, 1));
transform:translateY(calc((1 - var(--k, 1)) * 6px));
}
.hcar__it figcaption b{
display:block; font-weight:400; color:var(--hero-fg);
/* De 13px en el borde a 18px en el centro. Nunca baja de 13. */
font-size:calc(13px + 5px * var(--k, 1));
letter-spacing:calc(.02em + .02em * (1 - var(--k, 1)));
line-height:1.35;
}
/* RETIRADA LA ELIPSE DE APOYO (28/09/2026).
Había aquí una elipse difuminada bajo cada máquina, pensada para posarla en
el suelo cuando la fila era plana. Con el carrusel en 3D dejó de funcionar, y
por un motivo de fondo: una sombra de suelo vive en el PLANO DEL SUELO, y
esta vivía en el plano de la máquina. Al girar la pieza sobre su eje Y y
alejarse en Z, la elipse giraba y se alejaba con ella, así que dejaba de
leerse como contacto y pasaba a ser una mancha oscura flotando detrás. Y como
su opacidad iba atada a `--k`, esa mancha latía en cada fotograma: eso era el
halo que parpadeaba.
No se sustituye por nada. El `drop-shadow` de la propia foto ya posa la
máquina, y ese sí viaja bien con el giro, porque es un filtro sobre el mapa
de bits de la imagen y no una figura aparte con su propia idea de dónde está
el suelo. Comprobado en pantalla con la elipse quitada: la máquina sigue
apoyada y el halo desaparece.
Se deja `position:relative` porque no cuesta nada y cualquier adorno futuro
de la pieza lo va a necesitar. */
.hcar__it{ position:relative; }
@media (max-width:979px){
/* Apilado: el texto manda y se lleva lo que necesite; el carrusel ocupa lo
que sobre. Aquí sí conviene `min-height`, porque en un teléfono corto el
bloque de texto tiene que poder pasarse de una pantalla antes que
apretarse. */
.hero{ grid-template-rows:auto minmax(0,1fr); height:auto; min-height:100svh; }
/* Fuera en vertical. Se probó arriba, a media altura y abajo: en un teléfono
el hero va tan justo que el fantasma siempre acaba cruzándose con algo (el
botón o la franja de datos) y solo añade ruido. En escritorio sí tiene
sitio propio, entre el titular y las máquinas. */
.hero__ghost{ display:none; }
/* El tamaño de las máquinas en móvil se declara junto a la regla de tamaño
percibido, al final del archivo: aquí quedaba pisado por ella. */
.hcar{ padding-bottom:clamp(10px,2vh,22px); }
}
@media (prefers-reduced-motion:reduce){
.hcar__track{ transform:none !important; }
}
/* Estrellas de la franja del hero. Se pintan con el carácter ★ y no con
imágenes: pesa cero, escala con el texto y se puede copiar. El aria-label del