:root {
--paper: #ffffff;
--ink: #0a0a0a;
--ink-soft: #525258;
--accent: #2F7DC1; /* azul corporativo */
--side-pad: clamp(20px, 4vw, 56px);
--frame-pad: clamp(10px, 1.1vw, 18px);
--frame-radius: clamp(14px, 1.2vw, 20px);
--header-h: 76px;
--radius-pill: 14px;
--sans: "Inter Tight", system-ui, -apple-system, "Helvetica Neue", sans-serif;
--intro-end: 3200ms; /* cuándo termina el slide-up del intro */
--fade-ease: cubic-bezier(0.25, 1, 0.5, 1);
}
/* Cuando se salta el intro (navegación interna productos→home), todas las
animaciones que dependen de --intro-end arrancan inmediatamente. */
body.intro-skipped {
--intro-end: 0ms;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
margin: 0;
padding: 0;
overflow-x: clip;
background: var(--paper); /* blanco default — no toca desktop */
}
/* Mobile: el html SIEMPRE blanco para que iOS Safari mantenga URL bar
inferior clara y el intro (var(--paper) blanco) cubra coherente hasta
abajo durante la animación de recarga. */
@media (max-width: 760px) {
html:has(body.page-home) {
background: var(--paper);
}
/* MOBILE: header SIEMPRE transparente en TODAS las páginas — las imágenes
y contenido pasan por detrás (incluyendo detrás del notch) en cualquier
scroll. Transición desactivada para que aparezca/desaparezca instantáneo
sin animación. El JS scroll-hide funciona en TODAS las páginas mobile:
burger + logo visibles SOLO cuando estás al top; al scrollear se ocultan
y se quedan ocultos hasta volver al top. */
.site-header,
.site-header.is-static {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: none !important;
}
}
body {
margin: 0;
padding: 0;
background: var(--paper);
min-height: 100vh;
min-height: 100dvh;
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
max-width: 100vw;
}
/* Home: header transparente cuando el hero está visible (default),
se vuelve translúcido (.is-static) solo cuando se scrollea más allá del hero */
img { display: block; max-width: 100%; height: auto; }
/* Texto solo para lectores de pantalla — no se selecciona al copiar */
.sr-only { user-select: none; -webkit-user-select: none; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
/* ============================================================
INTRO — SK trazándose con líneas, después se levanta
============================================================ */
.intro {
position: fixed;
inset: 0;
z-index: 999;
display: grid;
place-items: center;
background: var(--paper);
pointer-events: none;
will-change: transform, opacity;
animation: introSlideUp 900ms cubic-bezier(.7,0,.3,1) 2400ms forwards;
}
@keyframes introSlideUp {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-100%); opacity: 1; }
}
.intro__svg {
width: clamp(120px, 14vw, 200px);
height: auto;
color: var(--ink);
overflow: visible;
}
.intro__svg path {
fill: transparent;
stroke: currentColor;
stroke-width: 60;
stroke-dasharray: 9000;
stroke-dashoffset: 9000;
animation:
introDraw 1400ms cubic-bezier(.65,0,.35,1) forwards calc(180ms + var(--i, 0) * 90ms),
introFill 500ms ease forwards calc(1500ms + var(--i, 0) * 60ms);
}
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introFill { to { fill: currentColor; stroke-width: 0; } }
/* ============================================================
HEADER — liquid glass translúcido sticky
============================================================ */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
/* Altura incluye el safe-area-inset-top; padding interno empuja logo/nav debajo del notch */
height: calc(var(--header-h) + env(safe-area-inset-top));
z-index: 200;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding: calc(20px + env(safe-area-inset-top)) var(--side-pad) 0;
background: transparent; /* deja ver el contenido detrás */
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* Reveal post-intro vía clase (no animation forwards — así el inline
transform del scroll-linked no queda bloqueado) */
opacity: 0;
transform: translate3d(0, -8px, 0);
transition:
opacity 700ms var(--fade-ease),
transform 120ms linear; /* corto: el scroll dicta el transform */
will-change: transform;
}
.site-header.is-loaded {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Variante sobre fondo claro (cuando hero del catálogo sale de view) —
blanco translúcido + texto/logo oscuro para lectura sobre grid blanco */
.site-header.is-static {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(140%) blur(16px);
-webkit-backdrop-filter: saturate(140%) blur(16px);
}
.site-header {
/* transition fluida del fondo cuando se activa/desactiva is-static */
transition:
opacity 700ms var(--fade-ease),
transform 120ms linear,
background 350ms ease,
backdrop-filter 350ms ease;
}
.site-header.is-static .brand,
.site-header.is-static .primary-nav a {
color: var(--ink);
transition: color 350ms ease;
}
.site-header.is-static .brand__logo {
filter: none;
transition: filter 350ms ease;
}
.site-header .brand,
.site-header .primary-nav a {
transition: color 350ms ease;
}
.site-header .brand__logo {
transition: filter 350ms ease;
}
/* Pill contacto invertido sobre fondo claro */
.site-header.is-static .cta-pill {
color: var(--ink);
border-color: rgba(10, 10, 10, 0.55);
}
.site-header.is-static .cta-pill:hover {
background: rgba(10, 10, 10, 0.05);
border-color: var(--ink);
}
.cta-pill {
transition:
transform .35s var(--fade-ease),
box-shadow .35s ease,
background .35s ease,
color 350ms ease,
border-color 350ms ease;
}
/* Header actions wrapper: search + favorito + contacto */
.header-actions {
display: inline-flex;
align-items: center;
gap: 18px;
}
.header-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
padding: 0;
color: inherit;
cursor: pointer;
text-decoration: none;
position: relative;
transition: opacity 200ms ease;
}
.header-icon-btn:hover { opacity: 0.65; }
.header-icon-btn svg { display: block; }
/* Sobre hero oscuro (sin is-static): íconos heart + buscador en blanco
tanto en desktop como en móvil */
.site-header:not(.is-static) .header-icon-btn,
.site-header:not(.is-static) .header-fav-btn {
color: #ffffff;
}
/* Favoritos count: número antes del corazón estilo Carl ("0 ♡") */
.header-fav-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
padding: 0 4px;
color: inherit;
cursor: pointer;
text-decoration: none;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
transition: opacity 200ms ease;
}
.header-fav-btn:hover { opacity: 0.65; }
.header-fav-btn svg { display: block; }
.header-fav-btn[data-count="0"] .header-fav-btn__count {
color: rgba(255, 255, 255, 0.6); /* count gris cuando 0 (sobre hero oscuro) */
}
.site-header.is-static .header-fav-btn[data-count="0"] .header-fav-btn__count {
color: rgba(10, 10, 10, 0.4);
}
.header-fav-btn:not([data-count="0"]) .header-fav-btn__icon path {
fill: currentColor; /* relleno cuando hay favoritos */
}
/* Contacto pill un poco más compacto cuando hay íconos al lado */
.header-actions .cta-pill {
padding: 0 22px;
height: 40px;
font-size: 11px;
}
/* Loading state en heart al guardar (spinner breve) */
.familia-grid__fav.is-loading,
.modelo__fav.is-loading {
pointer-events: none;
}
.familia-grid__fav.is-loading svg,
.modelo__fav.is-loading svg {
animation: favSpin 600ms cubic-bezier(0.4, 0, 0.6, 1);
transform-origin: center;
}
@keyframes favSpin {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.25) rotate(-12deg); }
100% { transform: scale(1) rotate(0deg); }
}
/* Pulse del header heart cuando el count cambia */
.header-fav-btn.is-pulsing .header-fav-btn__icon {
animation: headerFavPulse 600ms cubic-bezier(0.22, 1, 0.36, 1);
transform-origin: center;
}
.header-fav-btn.is-pulsing .header-fav-btn__count {
animation: headerFavCountPop 500ms cubic-bezier(0.22, 1, 0.36, 1);
display: inline-block;
}
@keyframes headerFavPulse {
0% { transform: scale(1); }
35% { transform: scale(1.35); }
100% { transform: scale(1); }
}
@keyframes headerFavCountPop {
0% { transform: scale(1); }
40% { transform: scale(1.6); }
100% { transform: scale(1); }
}
/* En productos catálogo el hero arranca pegado al top (header transparente) */
.page-productos:not(.page-modelo):not(.page-familia):not(.page-legal) main { padding-top: 0; }
/* Fade-in al entrar a productos (transición fluida desde home) */
.page-productos { animation: productosFadeIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes productosFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Fade-out al salir (cuando se navega desde otra página con .is-leaving) */
body.is-leaving {
opacity: 0;
transition: opacity 280ms ease-out;
pointer-events: none;
}
/* ============================================================
PRODUCTOS HERO — full-bleed imagen + título centrado (Cassina-style)
============================================================ */
.productos-hero {
position: relative;
width: 100%;
max-width: 100%;
height: clamp(560px, 86vh, 880px);
overflow: hidden;
background: #0a0a0a;
contain: paint; /* asegura clip de elementos escalados (video transform scale 1.22) */
isolation: isolate;
}
.productos-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.productos-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.productos-hero__media .productos-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.22); /* corta barras negras laterales del video */
transform-origin: center;
pointer-events: none;
z-index: 1; /* base — escondido debajo del activo */
}
/* Imagen estática usada SOLO en mobile (en desktop está oculta) */
.productos-hero__media .productos-hero__image {
display: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 10% center; /* desplazado a la izquierda como pediste */
pointer-events: none;
z-index: 1;
}
.productos-hero__media .productos-hero__video.is-active {
z-index: 2; /* el activo cubre al otro instantáneamente */
}
.productos-hero__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0.32) 0%,
rgba(0,0,0,0.10) 30%,
rgba(0,0,0,0.10) 65%,
rgba(0,0,0,0.45) 100%);
pointer-events: none;
}
.productos-hero__breadcrumb {
position: absolute;
top: calc(var(--header-h) + 18px);
left: var(--side-pad);
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.85);
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.productos-hero__breadcrumb a {
color: inherit;
text-decoration: none;
transition: color 250ms ease;
}
.productos-hero__breadcrumb a:hover { color: #fff; }
.productos-hero__breadcrumb [aria-current] { color: rgba(255,255,255,0.55); }
.productos-hero__title {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
color: #fff;
font-family: var(--sans);
font-weight: 300;
font-size: clamp(32px, 4.4vw, 68px);
letter-spacing: 0.04em;
line-height: 1;
text-align: center;
text-shadow: 0 2px 24px rgba(0,0,0,0.28);
}
@media (max-width: 760px) {
.productos-hero { height: 70vh; }
.productos-hero__breadcrumb { font-size: 10px; letter-spacing: 0.16em; }
/* En mobile: ocultamos los videos y mostramos la imagen estática.
Mejor performance, sin issues de autoplay en low power mode. */
.productos-hero__media .productos-hero__video {
display: none;
}
.productos-hero__media .productos-hero__image {
display: block;
}
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
}
.brand__logo {
height: 36px;
width: auto;
display: block;
/* Invierte el SVG negro a blanco para que se vea sobre el hero oscuro */
filter: brightness(0) invert(1);
}
.primary-nav {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(24px, 2.8vw, 44px);
}
.primary-nav a {
font-size: clamp(15px, 1.05vw, 17px);
font-weight: 500;
letter-spacing: -0.005em;
color: #fff;
position: relative;
padding: 4px 0;
}
.primary-nav a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 5px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right center;
transition: transform .22s cubic-bezier(.7,0,.3,1);
}
.primary-nav a:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
/* ============================================================
BOTONES — rectángulo redondeado (estilo leftcoast)
============================================================ */
.cta-pill,
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
border-radius: 10px;
padding: 0 22px;
height: 48px;
position: relative;
isolation: isolate;
transition: transform .35s var(--fade-ease), box-shadow .35s ease, background .35s ease;
}
.cta-pill::before,
.cta::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
pointer-events: none;
z-index: -1;
}
/* Outlined pill — estilo Boffi (Contacto header + CTA primario hero) */
.cta-pill,
.cta--primary,
.cta--outline {
color: #ffffff;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.75);
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 12px;
font-weight: 500;
padding: 0 32px;
height: 48px;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.cta-pill::before,
.cta--primary::before,
.cta--outline::before { display: none; }
.cta-pill:hover,
.cta--primary:hover,
.cta--outline:hover {
background: rgba(255, 255, 255, 0.10);
border-color: #ffffff;
transform: translateY(-1px);
}
/* Liquid glass — CTA secundario sobre hero (legacy, por si se reusa) */
.cta--ghost {
color: #fff;
background: transparent;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.22);
box-shadow: none;
}
.cta--ghost:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-1px);
}
/* Boffi-style — text link minimalista con underline sutil + flecha */
.cta--text {
color: #ffffff;
background: transparent;
border: 0;
border-radius: 0;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 12px;
font-weight: 500;
padding: 0;
height: auto;
gap: 10px;
transition: gap .3s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease;
}
.cta--text::before { display: none; }
.cta--text span {
position: relative;
padding-bottom: 4px;
display: inline-block;
}
.cta--text span::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: currentColor;
transform-origin: left center;
transform: scaleX(1);
transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta--text svg {
transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta--text:hover {
gap: 14px;
}
.cta--text:hover svg {
transform: translateX(3px);
}
/* ============================================================
HERO — frame con margen y rounded (estilo leftcoast)
============================================================ */
.hero {
position: relative;
width: 100%;
height: 100vh;
height: 100svh;
background: #18181b; /* fallback oscuro mientras carga el image — para que iOS samplee dark */
padding: 0;
isolation: isolate;
}
.hero__frame {
position: relative;
width: 100%;
height: 100%;
border-radius: 0; /* SIN bordes redondeados */
overflow: hidden;
background: linear-gradient(180deg, #18181b 0%, #3f3f46 100%);
box-shadow: none;
isolation: isolate;
}
.hero__media {
position: absolute;
inset: 0;
z-index: 1;
}
.hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
opacity: 0;
visibility: hidden;
transform: scale(1.06);
transition:
opacity 1400ms var(--fade-ease),
visibility 0s linear 1400ms,
transform 9s linear;
}
.hero__img.is-active {
opacity: 1;
visibility: visible;
transform: scale(1);
transition:
opacity 1400ms var(--fade-ease),
visibility 0s,
transform 9s linear;
}
.hero__overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.32) 38%, rgba(0,0,0,0) 72%),
linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.75) 100%);
}
.hero__content {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 clamp(28px, 4vw, 64px) clamp(40px, 6vh, 72px);
max-width: min(900px, 92vw);
color: #fff;
pointer-events: none;
}
.hero__content > * { pointer-events: auto; }
.hero__title {
font-family: var(--sans);
font-weight: 500;
font-size: clamp(40px, 5vw, 76px);
line-height: 0.9;
letter-spacing: -0.02em;
color: #fff;
margin-bottom: clamp(18px, 2.2vh, 28px);
text-wrap: balance;
max-width: 14ch;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: none;
}
/* Cada palabra es indivisible — los chars dentro se animan, pero el wrap
solo ocurre entre palabras (evita que "espacio" se parta en "espac/io") */
.hero__title .word {
display: inline-block;
white-space: nowrap;
}
/* Letra-por-letra: cada char aparece gris → blanco */
.hero__title .char {
display: inline-block;
opacity: 0;
color: rgba(255, 255, 255, 0.4); /* gris suave, no azul */
transform: translateY(0.12em);
animation:
charIn 520ms var(--fade-ease) forwards calc(var(--intro-end) + 350ms + var(--n, 0) * 55ms),
charWhite 700ms ease forwards calc(var(--intro-end) + 600ms + var(--n, 0) * 55ms);
}
@keyframes charIn { to { opacity: 1; transform: translateY(0); } }
@keyframes charWhite { to { color: #fff; } }
/* Replay rápido del título cuando se hace click en el logo / Inicio
(la intro SK NO se repite, sólo se re-anima el texto) */
@keyframes charReplay {
0% { opacity: 0; color: rgba(255, 255, 255, 0.4); transform: translateY(0.12em); }
42% { opacity: 1; color: rgba(255, 255, 255, 0.4); transform: translateY(0); }
100% { opacity: 1; color: #fff; transform: translateY(0); }
}
.hero__title.is-replay .char {
animation: charReplay 1100ms cubic-bezier(0.25, 1, 0.5, 1) forwards calc(var(--n, 0) * 55ms);
}
.hero__sub {
font-size: clamp(15px, 1.05vw, 18px);
font-weight: 400;
line-height: 1.55;
color: rgba(255,255,255,0.82);
max-width: 520px;
margin-bottom: clamp(24px, 3.4vh, 36px);
opacity: 0;
transform: translateY(8px);
animation: heroIn 800ms var(--fade-ease) calc(var(--intro-end) + 1400ms) forwards;
}
.hero__ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(8px);
animation: heroIn 800ms var(--fade-ease) calc(var(--intro-end) + 1700ms) forwards;
}
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
/* ============================================================
PREVIEW — counter + carrusel liquid glass abajo a la derecha
============================================================ */
.hero__preview {
position: absolute;
right: 40px;
bottom: 40px;
width: 440px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 16px;
pointer-events: none;
}
.hero__preview > * { pointer-events: auto; }
.hero__preview-counter {
display: flex;
align-items: center;
gap: 16px;
color: rgba(255,255,255,0.90);
font-size: 14px;
font-weight: 500;
padding: 0 8px;
width: 100%;
opacity: 0;
animation: heroIn 900ms var(--fade-ease) calc(var(--intro-end) + 1900ms) forwards;
}
.hero__counter-track {
position: relative;
flex: 1;
height: 2px;
background: rgba(255,255,255,0.20);
border-radius: 999px;
overflow: hidden;
}
.hero__counter-fill {
position: absolute;
inset: 0 auto 0 0;
width: 12.5%;
background: #fff;
border-radius: 0 999px 999px 0;
transition: width .8s var(--fade-ease);
}
.hero__preview-viewport {
width: 464px;
max-width: calc(100vw - 80px);
overflow: hidden;
opacity: 0;
transform: translateY(8px);
animation: heroIn 900ms var(--fade-ease) calc(var(--intro-end) + 2050ms) forwards;
}
.hero__preview-track {
display: flex;
gap: 16px;
margin-left: 0;
transition: margin-left 900ms cubic-bezier(0.65, 0, 0.35, 1);
will-change: margin-left;
}
.hero__preview-card {
flex: 0 0 296px;
display: flex;
align-items: center;
gap: 16px;
padding: 12px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(60px) saturate(180%);
-webkit-backdrop-filter: blur(60px) saturate(180%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.25),
0 12px 30px -10px rgba(0,0,0,0.40);
opacity: 0.7;
transition: opacity .5s ease;
cursor: pointer;
}
.hero__preview-card.is-next { opacity: 1; }
.hero__preview-card:hover { opacity: 0.95; }
.hero__preview-thumb {
flex: 0 0 88px;
width: 88px;
height: 88px;
border-radius: 10px;
background-size: cover;
background-position: center;
background-color: #2a2a2e;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
overflow: hidden;
}
.hero__preview-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hero__preview-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
}
.hero__preview-name {
font-size: 15px;
font-weight: 500;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ============================================================
SCROLL REVEAL — usado por .reveal en cualquier sección
============================================================ */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .9s var(--fade-ease), transform .9s var(--fade-ease);
transition-delay: var(--rev-delay, 0ms);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
SECCIÓN 2 — INDUSTRIAS A LAS QUE SERVIMOS (leftcoast-style)
============================================================ */
.industrias {
width: 100%;
background: var(--paper);
/* Sección con altura natural — sin centrado vertical que dejaba mucho gap */
padding: clamp(40px, 5vw, 80px) clamp(20px, 3.2vw, 48px);
}
.industrias__grid {
display: grid;
grid-template-columns: 1fr 2fr; /* 1/3 texto, 2/3 imágenes */
gap: clamp(28px, 3.2vw, 48px);
width: 100%;
max-width: 1400px;
margin: 0 auto;
align-items: stretch;
}
.industrias__col-text {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 0;
}
.industrias__eyebrow {
font-size: 13.5px;
font-weight: 400;
letter-spacing: 0;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 12px;
}
.industrias__title {
font-family: var(--sans);
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 500;
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: clamp(14px, 1.2vw, 18px);
max-width: 28ch;
text-wrap: balance;
}
.industrias__desc {
font-size: clamp(14px, 1vw, 16px);
line-height: 1.55;
color: var(--ink-soft);
margin-bottom: clamp(20px, 2vw, 28px);
text-wrap: pretty;
}
/* Lista estilo leftcoast: nombres grandes + indicador vertical animado */
.industrias__list {
list-style: none;
margin: 0;
padding: 0;
}
.industrias__item {
position: relative;
display: flex;
align-items: center;
gap: 18px;
padding: clamp(10px, 1vw, 14px) 22px clamp(10px, 1vw, 14px) 22px;
cursor: pointer;
color: var(--ink);
transition: color .35s ease;
}
/* Indicador vertical a la izquierda — crece desde 0 al activo */
.industrias__item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 2px;
height: 0;
background: var(--ink-soft);
transform: translateY(-50%);
transition: height .45s cubic-bezier(0.25, 1, 0.5, 1);
}
.industrias__item.is-active::before { height: 62%; }
.industrias__item:hover .industrias__name { transform: translateX(6px); }
.industrias__item:hover .industrias__num { transform: translateY(-2px); }
/* Activo en gris claro — fuerte contraste con el negro de los inactivos */
.industrias__item.is-active .industrias__name { color: #a8a8a8; }
.industrias__item.is-active .industrias__num { color: #a8a8a8; }
.industrias__num {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink-soft);
min-width: 22px;
transform: translateY(0);
transition: transform .35s cubic-bezier(0.25, 1, 0.5, 1), color .35s ease;
}
.industrias__name {
font-size: clamp(22px, 2.1vw, 30px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.15;
transform: translateX(0);
transition: color .35s ease, transform .45s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Flecha → señal inequívoca de "click para cambiar" */
.industrias__arrow-icon {
margin-left: auto;
color: var(--ink-soft);
opacity: 0;
transform: translateX(-8px);
transition:
opacity .35s cubic-bezier(0.25, 1, 0.5, 1),
transform .35s cubic-bezier(0.25, 1, 0.5, 1),
color .35s ease;
}
.industrias__item:hover .industrias__arrow-icon,
.industrias__item.is-active .industrias__arrow-icon {
opacity: 1;
transform: translateX(0);
}
.industrias__item.is-active .industrias__arrow-icon { color: #a8a8a8; }
/* Items deshabilitados (sin imágenes aún) — gris claro + pill "Pronto" */
.industrias__item.is-disabled {
pointer-events: none;
cursor: default;
color: rgba(10, 10, 10, 0.35);
}
.industrias__item.is-disabled .industrias__num,
.industrias__item.is-disabled .industrias__name {
color: rgba(10, 10, 10, 0.35);
}
.industrias__item.is-disabled::before { display: none; }
.industrias__pill {
margin-left: auto;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 4px 10px;
border: 1px solid rgba(10, 10, 10, 0.18);
border-radius: 999px;
line-height: 1;
}
/* Caption sobre la imagen grande — ancla la lista a la imagen */
.industrias__caption {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px) saturate(180%);
-webkit-backdrop-filter: blur(8px) saturate(180%);
padding: 8px 14px;
border-radius: 999px;
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition:
opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.industrias__col-media.is-visible .industrias__caption {
opacity: 1;
transform: translateY(0);
}
/* Columna de imágenes: aspect-ratio fijo para que NUNCA se estiren */
.industrias__col-media {
position: relative;
width: 100%;
aspect-ratio: 1.8 / 1;
}
.industrias__viewport {
position: absolute;
inset: 0;
overflow: hidden;
background: transparent;
}
.industrias__track {
position: relative;
width: 100%;
height: 100%;
}
/* Slots fijos (big-left + small-right). Las imágenes se desliza dentro
de cada slot con AnimatePresence-like: vieja sale, nueva entra simultáneo */
.industrias__slot {
position: absolute;
border-radius: 22px; /* esquinas redondeadas como antes */
overflow: hidden;
box-shadow: 0 12px 32px -12px rgba(0,0,0,0.18);
background: #f0f0f2;
contain: paint;
}
.industrias__slot--big {
left: 0;
top: 0;
width: 55%;
height: 100%;
}
.industrias__slot--small {
left: 57.5%; /* 100% - 42.5% */
top: 0;
width: 42.5%;
height: 82%;
}
.industrias__slot img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform-origin: center center;
/* Estado activo (center) por defecto */
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
transition:
transform 500ms cubic-bezier(0.65, 0, 0.35, 1),
opacity 500ms cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform, opacity;
backface-visibility: hidden;
}
/* Estado de entrada — variants.enter de Framer
{ x: "60%", scale: 0.95, opacity: 0 }
transition:none para fijar la posición inicial sin animar */
.industrias__slot img.is-enter {
transform: translate3d(60%, 0, 0) scale(0.95);
opacity: 0;
transition: none;
}
/* Estado activo explícito (center) — para el swap inmediato */
.industrias__slot img.is-active {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
/* Exit del slot GRANDE — variants.exit del big de leftcoast
{ x: "-60%", scale: 0.73, y: -45, opacity: 0 } */
.industrias__slot--big img.is-exit {
transform: translate3d(-60%, -45px, 0) scale(0.73);
opacity: 0;
}
/* Exit del slot PEQUEÑO — variants.exit del small de leftcoast
{ x: "-40%", scale: 0.95, opacity: 0 } */
.industrias__slot--small img.is-exit {
transform: translate3d(-40%, 0, 0) scale(0.95);
opacity: 0;
}
.industrias__slot .industrias__empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--ink-soft);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: #f5f5f7;
}
/* Flechas dentro de la columna de imágenes, abajo a la derecha (como leftcoast) */
.industrias__nav {
position: absolute;
right: 4px;
bottom: 0;
display: flex;
gap: 6px;
z-index: 2;
}
.industrias__arrow {
width: 38px;
height: 40px;
border-radius: 10px;
background: var(--ink);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .25s ease, transform .25s ease, opacity .25s ease;
}
.industrias__arrow:hover { background: #1a1a1a; transform: translateY(-1px); }
.industrias__arrow:disabled,
.industrias__arrow[aria-disabled="true"] {
opacity: 0.35;
pointer-events: none;
}
.industrias__empty {
flex: 1;
display: grid;
place-items: center;
color: var(--ink-soft);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
height: 100%;
background: #f5f5f7;
border-radius: 22px;
}
/* Snap reset: utilidad para quitar transiciones temporalmente y resetear sin
ver el "rewind" de los chars cuando se hace click al logo */
.no-transition,
.no-transition * {
transition: none !important;
animation: none !important;
}
/* Reveal letra-por-letra (azul → ink, igual que el hero pero invertido).
Stagger 16ms — rápido, soporta títulos largos sin tardar segundos */
/* Wrapper de palabra: permite que el reveal-letters NO rompa palabras a la mitad
(cada char es inline-block; sin esto el browser puede partir mid-word) */
.char-word {
display: inline-block;
white-space: nowrap;
}
.reveal-letters .char {
display: inline-block;
opacity: 0;
color: var(--accent);
transform: translate3d(0, 0.5em, 0);
transition:
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
color 900ms cubic-bezier(0.25, 1, 0.5, 1),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--n, 0) * 16ms);
will-change: opacity, color, transform;
backface-visibility: hidden;
}
.reveal-letters.is-visible .char {
opacity: 1;
color: var(--ink);
transform: translateY(0);
}
.reveal-letters.is-visible .char {
transition-delay:
calc(var(--n, 0) * 16ms),
calc(var(--n, 0) * 16ms + 200ms),
calc(var(--n, 0) * 16ms);
}
/* Reveal palabra-por-palabra: aparecen + se "rellenan" de gris a negro
(mismo principio que reveal-fill de areas, adaptado a fondo claro) */
.reveal-words .word {
display: inline-block;
opacity: 0;
color: rgba(10, 10, 10, 0.28);
transform: translateY(0.45em);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
color 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--n, 0) * 60ms);
will-change: opacity, color, transform;
}
.reveal-words.is-visible .word {
opacity: 1;
color: var(--ink);
transform: translateY(0);
}
/* Imágenes entrando en escena al hacer scroll */
.industrias__col-media .industrias__slide {
opacity: 0;
transform: translateY(28px);
transition:
opacity 1000ms cubic-bezier(0.25, 1, 0.5, 1),
transform 1000ms cubic-bezier(0.25, 1, 0.5, 1);
}
.industrias__col-media.is-visible .industrias__slide {
opacity: 1;
transform: translateY(0);
}
.industrias__col-media.is-visible .industrias__slide:nth-child(2) {
transition-delay: 180ms;
}
/* ============================================================
SECCIÓN 3 — ÁREAS (estilo FIND, fondo casi negro)
============================================================ */
.areas {
background: #151717;
color: #fff;
min-height: 100svh; /* cabe en una pantalla */
display: flex;
align-items: center;
padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px);
}
.areas__container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.areas__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
margin-bottom: clamp(40px, 5vw, 72px);
align-items: end;
}
.areas__eyebrow {
grid-column: 1 / -1;
font-size: 13.5px;
font-weight: 400;
letter-spacing: 0;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin: 0 0 clamp(16px, 2vw, 24px);
}
.areas__title {
font-family: var(--sans);
font-size: clamp(34px, 3.8vw, 56px); /* tamaño FIND-like */
font-weight: 500;
line-height: 1;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
}
.areas__line {
display: block;
}
.areas__desc {
font-size: clamp(22px, 1.8vw, 32px);
line-height: 1.35;
font-weight: 600; /* bold */
color: rgba(255, 255, 255, 0.45);
max-width: 38ch;
margin: 0;
align-self: end;
text-wrap: pretty;
letter-spacing: -0.015em;
}
/* Reveal por palabras estilo FIND: arrancan en gris y suben + brightenan */
.reveal-fill .word {
display: inline-block;
opacity: 0;
color: rgba(255, 255, 255, 0.4);
transform: translate3d(0, 0.5em, 0);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
color 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--n, 0) * 60ms);
will-change: opacity, color, transform;
}
.reveal-fill.is-visible .word {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.reveal-fill.is-visible .word.word--white { color: #fff; }
.reveal-fill.is-visible .word.word--gray { color: rgba(255, 255, 255, 0.4); }
/* Grid de tarjetas con magnificación :has() (truco FIND) */
.areas__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch; /* misma altura — ambas crecen sólo al ancho */
margin: 0 auto;
gap: clamp(16px, 1.6vw, 28px); /* gap como FIND (3rem ≈ 24px) */
transition: grid-template-columns 1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Magnificación FIND: 1.2 / 0.8 — sólo lateral, sin tocar la altura */
@media (min-width: 768px) and (pointer: fine) {
.areas__grid:has(.areas__card:nth-child(1):hover),
.areas__grid:has(.areas__card:nth-child(1):focus-visible) {
grid-template-columns: 1.2fr 0.8fr;
}
.areas__grid:has(.areas__card:nth-child(2):hover),
.areas__grid:has(.areas__card:nth-child(2):focus-visible) {
grid-template-columns: 0.8fr 1.2fr;
}
}
.areas__card {
position: relative;
overflow: hidden;
border-radius: 0; /* SIN esquinas redondeadas — exactamente FIND */
/* Altura FIJA — al hover solo cambia el ANCHO, expansión puramente horizontal */
height: clamp(420px, 60vh, 580px);
background: #1a1a1a;
cursor: default;
outline: none;
}
.areas__card:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }
.areas__bg {
position: absolute;
inset: 0;
}
.areas__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.02);
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.areas__card:hover .areas__bg img,
.areas__card:focus-visible .areas__bg img {
transform: scale(1.08);
}
.areas__overlay {
position: absolute;
inset: 0;
/* Gradiente arriba (para que el título sea legible) y un toque abajo */
background:
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0) 60%),
linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 35%);
pointer-events: none;
}
.areas__content {
position: absolute;
inset: 0 0 auto 0; /* TÍTULO ARRIBA (no abajo) */
padding: clamp(20px, 2.8vw, 44px);
color: #fff;
z-index: 2;
display: flex;
flex-direction: column;
gap: clamp(10px, 1vw, 14px);
}
.areas__card-title {
font-family: var(--sans);
font-size: clamp(28px, 3vw, 44px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
}
.areas__card-desc {
font-size: clamp(14px, 1vw, 16px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.85);
max-width: 42ch;
margin: clamp(12px, 1.2vw, 18px) 0 0;
opacity: 0;
transform: translateY(8px);
transition:
opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.areas__card:hover .areas__card-desc,
.areas__card:focus-visible .areas__card-desc {
opacity: 1;
transform: translateY(0);
}
/* CTA pill estilo FIND, abajo del card — transparente, solo borde */
.areas__cta {
position: absolute;
bottom: clamp(20px, 2.4vw, 32px);
left: clamp(20px, 2.4vw, 32px);
z-index: 3;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0 22px;
height: 44px;
border-radius: 999px; /* pill / óvalo */
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid rgba(255, 255, 255, 0.55);
color: #fff;
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
transition:
background 350ms cubic-bezier(0.22, 1, 0.36, 1),
color 350ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 350ms cubic-bezier(0.22, 1, 0.36, 1),
gap 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.areas__cta svg {
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.areas__card:hover .areas__cta,
.areas__card:focus-visible .areas__cta,
.areas__cta:hover {
background: #fff;
color: #0a0a0a;
gap: 14px;
}
.areas__card:hover .areas__cta svg,
.areas__cta:hover svg { transform: translateX(3px); }
/* Card-as-link: el card entero es clickable (manejado por JS) */
.areas__card { cursor: pointer; }
@media (max-width: 900px) {
.areas { min-height: 0; padding: 60px 20px; }
.areas__head { grid-template-columns: 1fr; }
.areas__grid { grid-template-columns: 1fr; max-width: 100%; }
.areas__card {
aspect-ratio: 4 / 5;
height: auto; /* override del clamp(420…580px) que forzaba ancho */
width: 100%;
}
.areas__card-desc { opacity: 1; transform: none; } /* en táctil siempre visible */
.areas__desc { font-size: clamp(16px, 4vw, 20px); } /* un toque más chico en móvil */
}
/* ============================================================
SECCIÓN — CATÁLOGO (familias estilo Cassina: grilla full-bleed
con líneas que cruzan toda la pantalla)
============================================================ */
.catalogo {
background: var(--paper);
padding: clamp(80px, 10vw, 140px) 0; /* sin padding lateral: grilla edge-to-edge */
}
.catalogo__container {
width: 100%;
max-width: none; /* full-bleed */
margin: 0;
padding: 0;
}
.catalogo__head {
margin-bottom: clamp(48px, 6vw, 88px);
max-width: 1200px;
padding: 0 clamp(20px, 4vw, 56px); /* el header sí respeta los gutters */
}
.catalogo__eyebrow {
display: inline-block;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6b6b6b;
margin-bottom: clamp(16px, 2vw, 24px);
}
.catalogo__breadcrumb {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-size: 13px;
color: #6b6b6b;
margin-bottom: clamp(28px, 3.5vw, 48px);
}
.catalogo__breadcrumb a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(10, 10, 10, 0.2);
transition: text-decoration-color 250ms ease;
}
.catalogo__breadcrumb a:hover {
text-decoration-color: var(--ink);
}
.catalogo__breadcrumb [aria-current] {
color: #6b6b6b;
}
/* Reveal on scroll — título + descripción aparecen al llegar a la sección */
.catalogo__title,
.catalogo__desc {
opacity: 0;
transform: translateY(28px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.catalogo__desc {
transition-delay: 120ms; /* la descripción entra justo después del título */
}
.catalogo__title.is-revealed,
.catalogo__desc.is-revealed {
opacity: 1;
transform: translateY(0);
}
.catalogo__title {
font-family: var(--sans);
font-size: clamp(44px, 6vw, 88px);
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.04em;
color: var(--ink);
margin: 0 0 clamp(20px, 2.4vw, 32px);
text-wrap: balance;
}
.catalogo__title-dark { color: var(--ink); }
.catalogo__title-muted { color: #6b6b6b; }
.catalogo__desc {
font-family: var(--sans);
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.55;
color: #6b6b6b;
max-width: 88ch;
margin: 0;
text-wrap: pretty;
}
/* Controles: toggle + búsqueda */
.catalogo__controls {
margin-top: clamp(32px, 4vw, 56px);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: clamp(16px, 2vw, 28px);
padding-top: clamp(24px, 3vw, 40px);
border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.catalogo__toggle {
display: inline-flex;
background: rgba(10, 10, 10, 0.04);
border-radius: 999px;
padding: 4px;
gap: 2px;
}
.catalogo__toggle-btn {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
font-family: var(--sans);
font-size: clamp(13px, 0.95vw, 14px);
font-weight: 500;
color: #6b6b6b;
padding: 10px 18px;
border-radius: 999px;
transition: background 250ms ease, color 250ms ease;
}
.catalogo__toggle-btn:hover {
color: var(--ink);
}
.catalogo__toggle-btn.is-active {
background: var(--ink);
color: #ffffff;
}
.catalogo__search {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(10, 10, 10, 0.04);
border-radius: 999px;
padding: 10px 18px;
min-width: clamp(220px, 28vw, 360px);
transition: background 250ms ease;
}
.catalogo__search:focus-within {
background: rgba(10, 10, 10, 0.08);
}
.catalogo__search svg {
color: #6b6b6b;
flex-shrink: 0;
}
.catalogo__search input {
appearance: none;
border: 0;
background: transparent;
outline: none;
width: 100%;
font-family: var(--sans);
font-size: clamp(13px, 0.95vw, 14px);
color: var(--ink);
}
.catalogo__search input::placeholder {
color: #9a9a9a;
}
/* Grid full-bleed estilo Cassina — 3 columnas, sin gap, líneas continuas */
.catalogo__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); /* minmax(0,1fr) permite que la celda se encoja */
gap: clamp(8px, 1vw, 16px);
width: 100%;
max-width: 100%;
}
.catalogo__card {
background: transparent;
min-width: 0; /* permite shrink en grid */
/* Reveal-on-scroll */
opacity: 0;
transform: translateY(28px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}
.catalogo__card.is-revealed {
opacity: 1;
transform: translateY(0);
}
.catalogo__card-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
padding: 0 clamp(16px, 1.8vw, 28px); /* aire lateral más ajustado para que el render respire más */
}
/* Imagen — el "héroe" del card; menos relleno → render más grande, card más baja */
.catalogo__card-media {
flex: 1 1 auto;
aspect-ratio: 1.1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(18px, 2.2vw, 32px) 0 clamp(10px, 1.2vw, 18px);
background: transparent;
overflow: hidden;
position: relative;
}
/* Sombra elíptica bajo el render — le da "peso" al objeto, evita la sensación de flotar sobre blanco */
.catalogo__card-media::after {
content: '';
position: absolute;
left: 50%;
bottom: clamp(26px, 3.4vw, 46px);
transform: translateX(-50%);
width: 50%;
height: 18px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.09) 40%, transparent 72%);
filter: blur(7px);
z-index: 0;
pointer-events: none;
opacity: 0.85;
transition: opacity 500ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.catalogo__card:hover .catalogo__card-media::after {
opacity: 1;
transform: translateX(-50%) scaleX(1.12);
}
.catalogo__card-img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transform: scale(1.04);
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.catalogo__card:hover .catalogo__card-img {
transform: scale(1.10);
}
/* Info abajo: nombre + descripción centrados */
.catalogo__card-info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(12px, 1.2vw, 20px) 0 clamp(20px, 2vw, 30px);
margin-top: auto;
}
.catalogo__card-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
min-width: 0;
}
.catalogo__card-name {
font-family: var(--sans);
font-size: clamp(16px, 1.2vw, 21px);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
line-height: 1.25;
display: block;
text-align: center;
text-wrap: balance; /* wrap natural sin orphans feos */
}
/* Flecha "Ver familia →" que aparece en hover — toque editorial sin agregar HTML */
.catalogo__card-name::after {
content: ' →';
font-weight: 400;
color: var(--ink);
opacity: 0;
transform: translateX(-6px);
transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
display: inline-block;
white-space: pre; /* preserva el espacio antes de la flecha */
}
.catalogo__card:hover .catalogo__card-name::after {
opacity: 1;
transform: translateX(0);
}
.catalogo__card-desc {
font-family: var(--sans);
font-size: clamp(12px, 0.85vw, 14px);
font-weight: 400;
color: #6e6e6e;
margin: 0;
line-height: 1.45;
max-width: 38ch;
}
.catalogo__card-count { display: none; }
/* Responsive */
@media (max-width: 1280px) {
.catalogo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.catalogo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.catalogo__controls { flex-direction: column; align-items: stretch; }
.catalogo__search { width: 100%; }
}
@media (max-width: 540px) {
.catalogo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalogo__card-link { padding: 0 10px; }
.catalogo__card-info { padding: 10px 0 16px; }
.catalogo__card-name { font-size: 15px; }
.catalogo__card-desc { font-size: 12px; line-height: 1.4; }
}
/* ============================================================
SECCIÓN 5 — CAPACIDADES (estilo handle.ai con imagen full-bleed izquierda)
============================================================ */
.capacidades {
background: var(--paper);
padding: clamp(64px, 8vw, 112px) clamp(80px, 10vw, 160px) clamp(48px, 6vw, 80px) 0;
overflow: hidden; /* evita que la imagen con bleed/transform tape el bloque siguiente */
}
.capacidades__container {
width: 100%;
max-width: 100%;
margin: 0;
}
/* Layout: izq imagen pegada al borde / der contenido con max-width y right-padding */
.capacidades__layout {
display: grid;
grid-template-columns: 1fr min(760px, 55%); /* contenido más ancho para que el título quepa en 1 línea */
gap: clamp(28px, 3.5vw, 56px);
align-items: start;
}
/* Imagen completa (natural ratio) pero con BLEED al edge izquierdo
que recorta ~1/4 de la imagen fuera del viewport */
.capacidades__media {
overflow: hidden;
border-radius: 0 22px 22px 0;
max-width: clamp(520px, 56vw, 720px); /* MÁS grande para que el 25% pueda salirse */
margin-left: calc(-1 * clamp(80px, 10vw, 160px)); /* bleed: 80-160px fuera del viewport */
align-self: end;
will-change: transform, opacity;
transform-origin: left center;
transform: scale(0.95) translateY(40px);
opacity: 0.4;
/* Sin transition: el JS scroll-tied interpola por cada frame.
Una transition en CSS pelea contra el scroll y causa stutter en móvil. */
}
.capacidades__media img {
width: 100%;
height: auto;
display: block;
}
/* Content padding right — para que respire del borde derecho */
.capacidades__content {
padding-right: clamp(20px, 4vw, 56px);
max-width: 760px;
}
.capacidades__content {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 28px);
}
.capacidades__title {
font-family: var(--sans);
font-size: clamp(36px, 4.2vw, 60px); /* ajustado para caber en 1 línea */
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.04em;
color: var(--ink);
margin: 0;
max-width: 100%;
text-align: right;
white-space: nowrap; /* todo el título en una sola línea */
}
.capacidades__title-dark,
.capacidades__title-muted {
display: inline;
}
.capacidades__title-dark { color: var(--ink); }
.capacidades__title-muted { color: #6b6b6b; }
.capacidades__desc {
font-family: var(--sans);
font-size: clamp(15px, 1.15vw, 19px);
line-height: 1.5;
color: #6b6b6b;
max-width: 100%;
margin: 0;
text-align: right;
}
/* 6 cards de métricas en grid 3x2 */
.capacidades__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.4vw, 18px);
}
.capacidades__card {
background: #ffffff; /* BLANCAS */
color: var(--ink);
padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.8vw, 40px);
border-radius: 22px;
display: flex;
flex-direction: column;
justify-content: center; /* centrado vertical */
align-items: center; /* centrado horizontal — todas las cards numéricas centradas */
text-align: center;
gap: clamp(10px, 1.2vw, 16px);
overflow: hidden;
/* sombra suave para que se observen sobre fondo blanco */
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.04),
0 6px 24px -6px rgba(10, 10, 10, 0.10);
transition:
transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.capacidades__card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(10, 10, 10, 0.05),
0 12px 32px -8px rgba(10, 10, 10, 0.14);
}
/* Cuando la card contiene un link, este absorbe el padding y layout
para que sea clickeable en toda la superficie. */
.capacidades__card:has(.capacidades__link) {
padding: 0;
display: block;
}
.capacidades__link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: clamp(10px, 1.2vw, 16px);
padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.8vw, 40px);
color: inherit;
text-decoration: none;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: inherit;
cursor: pointer;
outline: none;
}
.capacidades__link:focus-visible {
box-shadow: inset 0 0 0 2px currentColor;
}
.capacidades__card--dark {
background: var(--ink);
color: #fff;
text-align: center;
align-items: center; /* centrado horizontal del contenido */
/* sombra sutil para la card oscura */
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.08),
0 8px 28px -6px rgba(10, 10, 10, 0.18);
}
/* Cards centradas (Garantía total, etc.) */
.capacidades__card--value {
text-align: center;
align-items: center;
}
.capacidades__num {
font-family: var(--sans);
font-size: clamp(34px, 4vw, 60px); /* responsive para no desbordar */
font-weight: 500;
line-height: 0.88;
letter-spacing: -0.04em;
color: inherit;
display: inline-flex;
align-items: baseline;
}
.capacidades__unit {
font-size: 0.46em;
font-weight: 500;
margin-left: 0.06em;
}
.capacidades__phrase {
font-family: var(--sans);
font-size: clamp(20px, 2.2vw, 32px); /* responsive — se ajusta para que entre */
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.025em;
color: inherit;
hyphens: none;
word-break: keep-all; /* no parte palabras como "Trazabilidad" */
display: block;
width: 100%; /* ocupa todo el ancho para que text-align centre cada línea */
}
.capacidades__label {
font-family: var(--sans);
font-size: clamp(14px, 1.05vw, 16px); /* más legible */
font-weight: 400;
line-height: 1.4;
color: inherit;
margin: 0;
opacity: 0.85;
display: block;
width: 100%;
}
.capacidades__card--dark .capacidades__label { opacity: 0.9; }
.capacidades__text {
font-family: var(--sans);
font-size: clamp(13px, 0.95vw, 14.5px); /* más legible */
line-height: 1.5;
margin: 0;
padding-top: clamp(10px, 1.2vw, 14px);
color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 900px) {
.capacidades { padding: clamp(64px, 9vw, 96px) clamp(20px, 5vw, 32px); }
.capacidades__layout { grid-template-columns: 1fr; gap: clamp(36px, 5vw, 56px); }
/* DOM order: imagen primero, contenido después. En mobile invertimos
con `order` para que el texto suba arriba y la imagen baje. */
.capacidades__content { order: 1; padding-right: 0; }
.capacidades__media { order: 2; }
/* El título suelto en una línea sobra en mobile — permite wrap natural */
.capacidades__title {
white-space: normal;
text-align: left;
font-size: clamp(34px, 8.5vw, 52px);
line-height: 1;
}
.capacidades__desc { text-align: left; }
/* Imagen pegada al borde izquierdo en desktop, en mobile vuelve al flujo */
.capacidades__media {
margin-left: 0;
max-width: 100%;
border-radius: 16px;
align-self: stretch;
}
/* Grid de cards: 2 columnas en tablets/mobile grande */
.capacidades__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
/* Grid 2x3 en mobile — más compacto que 6 cards en una columna */
.capacidades__grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.capacidades__card {
padding: 18px 14px;
border-radius: 16px;
gap: 8px;
}
.capacidades__num { font-size: 30px; }
.capacidades__phrase { font-size: 18px; }
.capacidades__label { font-size: 12px; line-height: 1.35; }
.capacidades__text { font-size: 11.5px; padding-top: 8px; }
/* La card oscura (4,000 m²) y la última (Garantía total) ocupan fila completa */
.capacidades__card--dark,
.capacidades__grid > li:last-child { grid-column: span 2; }
}
/* ============================================================
SECCIÓN 6 — CALL TO ACTION (estilo handle.ai)
Card grande con imagen bg + capas de iluminación + texto centrado
============================================================ */
.cta-block {
background: var(--paper); /* blanco */
display: flex;
align-items: center;
padding: 0;
}
.cta-block__container {
width: 100%;
max-width: 100%;
margin: 0;
}
.cta-block__card {
position: relative;
border-radius: 0; /* full bleed, sin esquinas redondeadas */
overflow: hidden;
width: 100%;
min-height: clamp(520px, 70vh, 760px); /* alto tipo hero */
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
/* posición del spotlight (CSS vars actualizadas vía JS) */
--mx: 50%;
--my: 50%;
--spot-opacity: 0;
}
/* CAPA 1: Imagen como background, full cover */
.cta-block__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
/* Movimiento sutil — la imagen "respira" como handle.ai */
animation: ctaBreathe 18s ease-in-out infinite;
will-change: transform;
}
@keyframes ctaBreathe {
0%, 100% { transform: scale(1.02) translate(0, 0); }
50% { transform: scale(1.05) translate(-1.5%, -1%); }
}
/* CAPA 2: Spotlight que sigue al cursor (estilo handle.ai) */
.cta-block__glow {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
circle 420px at var(--mx) var(--my),
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.30) 18%,
rgba(255, 255, 255, 0.10) 42%,
transparent 65%
);
mix-blend-mode: screen;
opacity: var(--spot-opacity, 0);
transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, background;
}
/* CAPA 3: Vignette + dim general para que el texto domine sobre la imagen */
.cta-block__vignette {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%),
radial-gradient(70% 60% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
}
/* CAPA 4: Contenido (eyebrow + h2 + desc + button) */
.cta-block__content {
position: relative;
z-index: 3;
text-align: center;
color: #fff;
padding: clamp(32px, 5vw, 64px);
max-width: 940px;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 2vw, 24px);
}
.cta-block__eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
background: #fff;
padding: 6px 14px;
border-radius: 999px;
}
.cta-block__title {
font-family: var(--sans);
font-size: clamp(36px, 5.6vw, 76px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.035em;
color: #fff;
margin: 0;
text-wrap: balance;
max-width: 18ch;
}
.cta-block__desc {
font-family: var(--sans);
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
max-width: 56ch;
margin: 0;
text-wrap: pretty;
}
.cta-block__button {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
color: var(--ink);
height: 52px;
padding: 0 28px;
border-radius: 999px;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
margin-top: clamp(8px, 1vw, 14px);
transition:
background 350ms cubic-bezier(0.22, 1, 0.36, 1),
transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
gap 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-block__button svg { transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.cta-block__button:hover {
background: #f0f0f0;
transform: translateY(-1px);
gap: 14px;
}
.cta-block__button:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.cta-block__bg { animation: none; }
.cta-block__glow { transition: none; }
}
/* ============================================================
PÁGINA — CONTACTO (estilo Left Coast Design Studio)
Texto editorial izquierda + form card derecha con esquinas redondeadas
============================================================ */
.contacto-page {
background: #ffffff;
padding: calc(var(--header-h) + clamp(24px, 3vw, 48px)) var(--side-pad) clamp(48px, 6vw, 88px);
}
/* MOBILE: padding-top reducido para que el contenido suba detrás del notch
(el header transparente fijo permite ver lo que pasa por atrás). */
@media (max-width: 760px) {
.contacto-page {
padding-top: var(--header-h);
}
}
.contacto-page__container {
width: 100%;
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.85fr 1.15fr; /* form más ancho que el texto izquierdo */
gap: clamp(24px, 3vw, 56px); /* gap más chico */
align-items: start;
}
.contacto-page__left {
padding-top: 0;
min-width: 0; /* evita que children con max-content expandan la columna */
display: flex;
flex-direction: column;
}
.contacto-page__right {
min-width: 0; /* evita que el form rompa el grid */
}
.contacto-page__eyebrow {
display: inline-block;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #6b6b6b;
margin: 0 0 clamp(14px, 1.8vw, 22px);
opacity: 0;
transform: translateY(10px);
animation: contactoReveal 700ms cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}
.contacto-page__title {
font-family: var(--sans);
font-size: clamp(36px, 4.4vw, 64px);
font-weight: 500;
line-height: 1.0;
letter-spacing: -0.035em;
color: var(--ink);
margin: 0 0 clamp(18px, 2.2vw, 28px);
text-wrap: balance;
max-width: 14ch;
}
.contacto-page__desc {
font-family: var(--sans);
font-size: clamp(14px, 1vw, 16px);
line-height: 1.55;
color: #6b6b6b;
margin: 0 0 clamp(20px, 2.4vw, 32px);
max-width: 50ch;
text-wrap: pretty;
}
/* Reveal de chars en la página de contacto — gris arrancando, no verde como en proyectos */
.page-contacto .reveal-letters .char {
color: rgba(10, 10, 10, 0.22); /* gris suave en lugar de var(--accent) verde */
}
.page-contacto .reveal-letters.is-visible .char {
color: var(--ink); /* termina en negro */
}
@keyframes contactoReveal {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Card del formulario — estilo Left Coast */
.contacto-page__right {
background: #ffffff;
border-radius: clamp(24px, 2.4vw, 32px);
padding: clamp(24px, 2.6vw, 36px);
border: 1px solid rgba(10, 10, 10, 0.06);
box-shadow:
0 1px 2px rgba(10, 10, 10, 0.04),
0 24px 60px rgba(10, 10, 10, 0.08);
margin-top: clamp(32px, 4vw, 64px); /* desktop: form un poco más abajo que el título */
opacity: 0;
transform: translateY(10px);
animation: contactoReveal 800ms cubic-bezier(0.22, 1, 0.36, 1) 360ms forwards;
}
.contacto-form {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.5vw, 20px);
}
.contacto-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(12px, 1.2vw, 16px);
}
.contacto-form__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.contacto-form__label {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.contacto-form__required {
color: #c44b3d;
margin-left: 2px;
}
.contacto-form__input,
.contacto-form__phone-prefix {
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
background: rgba(235, 234, 230, 0.55); /* gris cálido translúcido */
border: 1px solid transparent;
border-radius: 14px; /* RECTANGULAR redondeado tipo Left Coast */
height: 46px;
padding: 0 14px;
width: 100%;
transition:
background 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease;
-webkit-appearance: none;
appearance: none;
}
.contacto-form__input::placeholder {
color: #9a9a9a;
font-weight: 400;
}
.contacto-form__input:hover,
.contacto-form__phone-prefix:hover {
background: rgba(225, 223, 218, 0.65);
}
.contacto-form__input:focus,
.contacto-form__phone-prefix:focus {
outline: none;
background: #ffffff;
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}
/* Estado de error inline — se marca al hacer blur en un campo inválido */
.contacto-form__input.is-invalid {
border-color: #c0392b;
background: #fdf3f1;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10);
}
.contacto-form__input.is-invalid:focus {
border-color: #c0392b;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
/* Textarea — sobreescribe altura y padding */
.contacto-form__input--area {
height: 120px !important;
min-height: 90px !important;
max-height: 120px !important;
padding: 12px 14px;
line-height: 1.5;
resize: none !important;
overflow-y: scroll !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-y; /* iOS: scroll vertical dentro del textarea */
}
/* Teléfono: prefijo + número */
.contacto-form__phone {
display: grid;
grid-template-columns: minmax(110px, 130px) 1fr;
gap: 10px;
}
.contacto-form__phone-prefix {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
cursor: pointer;
font-feature-settings: "tnum" 1;
}
/* Consentimientos (checkboxes) */
.contacto-form__consents {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.contacto-form__check {
display: grid;
grid-template-columns: 18px 1fr;
gap: 12px;
align-items: start;
cursor: pointer;
user-select: none;
}
.contacto-form__check input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.contacto-form__check-box {
width: 18px;
height: 18px;
border: 1.5px solid #c9c7c0;
border-radius: 5px;
background: #fff;
margin-top: 1px;
position: relative;
transition: background 180ms ease, border-color 180ms ease;
}
.contacto-form__check-box::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 180ms ease;
}
.contacto-form__check input:checked + .contacto-form__check-box {
background: var(--ink);
border-color: var(--ink);
}
.contacto-form__check input:checked + .contacto-form__check-box::after {
opacity: 1;
}
.contacto-form__check input:focus-visible + .contacto-form__check-box {
box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.12);
}
.contacto-form__check-text {
font-family: var(--sans);
font-size: 12.5px;
line-height: 1.45;
color: #6b6b6b;
}
.contacto-form__check-text a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(10, 10, 10, 0.3);
transition: text-decoration-color 220ms ease;
}
.contacto-form__check-text a:hover { text-decoration-color: var(--ink); }
/* Aviso de privacidad — collapsible (details) */
.contacto-form__legal {
background: rgba(245, 244, 241, 0.6);
border-radius: 14px;
padding: 0;
margin-top: 4px;
}
.contacto-form__legal-summary {
list-style: none;
cursor: pointer;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-family: var(--sans);
font-size: 12.5px;
font-weight: 500;
color: #525258;
letter-spacing: -0.005em;
transition: color 220ms ease;
}
.contacto-form__legal-summary::-webkit-details-marker { display: none; }
.contacto-form__legal-summary:hover { color: var(--ink); }
.contacto-form__legal-chev {
color: #9a9a9a;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
flex-shrink: 0;
}
.contacto-form__legal[open] .contacto-form__legal-chev { transform: rotate(180deg); }
.contacto-form__legal-text {
margin: 0;
padding: 0 18px 16px;
font-family: var(--sans);
font-size: 11.5px;
line-height: 1.55;
color: #7a7a7a;
}
.contacto-form__legal-text a {
color: #525258;
text-decoration: underline;
text-underline-offset: 2px;
}
.contacto-form__legal-text strong { color: var(--ink); font-weight: 600; }
/* Botón submit — rectángulo negro redondeado, full width tipo Left Coast */
.contacto-form__submit {
margin-top: clamp(10px, 1.2vw, 18px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--ink);
color: #fff;
height: 54px;
padding: 0 28px;
border: none;
border-radius: 14px;
font-family: var(--sans);
font-size: 14.5px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
width: 100%;
transition:
background 350ms cubic-bezier(0.22, 1, 0.36, 1),
transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
gap 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.contacto-form__submit svg {
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.contacto-form__submit:hover {
background: #1a1a1a;
gap: 14px;
}
.contacto-form__submit:hover svg { transform: translateX(3px); }
.contacto-form__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.contacto-form__submit:disabled svg { transform: none; }
/* Mensaje de éxito/error después de enviar el formulario */
.contacto-form__status {
margin-top: 18px;
padding: 18px 20px;
border-radius: 14px;
font-family: var(--sans);
font-size: 15px;
font-weight: 500;
line-height: 1.45;
background: #f4f4f4;
color: var(--ink);
border: 1.5px solid #e5e5e5;
display: flex;
align-items: center;
gap: 12px;
animation: contactoStatusIn 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Asegura que se oculte cuando tiene el atributo `hidden` (display:flex
por defecto en .contacto-form__status sobreescribe el hidden nativo). */
.contacto-form__status[hidden] {
display: none;
}
.contacto-form__status-icon {
flex-shrink: 0;
display: none;
}
.contacto-form__status[data-kind="success"] {
background: linear-gradient(180deg, #e8f3e8 0%, #dceedb 100%);
border-color: #7fb87f;
color: #1e4d1e;
font-size: 16px;
padding: 22px 24px;
box-shadow: 0 6px 20px -10px rgba(31, 77, 31, 0.45);
}
.contacto-form__status[data-kind="success"] .contacto-form__status-icon {
display: block;
color: #2f7d32;
}
.contacto-form__status[data-kind="error"] {
background: #fbf1f1;
border-color: #d99696;
color: #6b1f1f;
font-size: 15px;
}
@keyframes contactoStatusIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
CARRUSEL DE CLIENTES INLINE — dentro de la columna izquierda
============================================================ */
.contacto-page__marquee {
margin-top: 0;
margin-bottom: clamp(28px, 3vw, 40px);
width: 100%;
max-width: 560px; /* un poco más ancho */
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 88%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 88%, transparent 100%);
opacity: 0;
transform: translateY(10px);
animation: contactoReveal 700ms cubic-bezier(0.22, 1, 0.36, 1) 680ms forwards;
}
.contacto-page__marquee-track {
display: flex;
align-items: center;
gap: clamp(28px, 3vw, 44px);
width: max-content;
/* Animación con delay para que arranque DESPUÉS del reveal del padre
(evita competencia de animaciones en el primer paint que en iOS
Safari mobile hacía que el marquee corriera lento hasta interactuar). */
animation: clientesScroll 56s linear 1500ms infinite;
/* Promoción a capa GPU */
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.contacto-page__marquee:hover .contacto-page__marquee-track {
animation-play-state: paused;
}
.contacto-page__marquee-logo {
flex-shrink: 0;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.contacto-page__marquee-logo img {
max-height: 100%;
max-width: 130px;
width: auto;
object-fit: contain;
filter: grayscale(1);
opacity: 0.55;
transition:
filter 350ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.contacto-page__marquee-logo:hover img {
filter: grayscale(0);
opacity: 1;
}
.contacto-page__marquee-logo img[src*="LUCEK"] {
max-height: 72%;
max-width: 100px;
}
/* ============================================================
CONTACTO CARD — diseño editorial cream, vive dentro de
.contacto-page__left debajo del marquee
============================================================ */
.contacto-card {
background: #f5f4f1; /* cream cálido — diferenciado del form blanco */
border-radius: clamp(20px, 2vw, 26px);
padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px);
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
gap: clamp(16px, 1.8vw, 22px);
opacity: 0;
transform: translateY(10px);
animation: contactoReveal 800ms cubic-bezier(0.22, 1, 0.36, 1) 880ms forwards;
}
.contacto-card__head {
display: flex;
flex-direction: column;
gap: 4px;
}
.contacto-card__eyebrow {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #6b6b6b;
}
.contacto-card__title {
font-family: var(--sans);
font-size: clamp(18px, 1.4vw, 22px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
.contacto-card__address {
font-family: var(--sans);
font-style: normal;
font-size: clamp(13px, 0.95vw, 15px);
line-height: 1.55;
color: #525258;
margin: 0;
padding-top: clamp(4px, 0.6vw, 8px);
border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.contacto-card__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(10px, 1.2vw, 14px);
padding-top: clamp(4px, 0.6vw, 8px);
border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.contacto-card__row {
display: grid;
grid-template-columns: 90px 1fr;
align-items: center;
gap: 14px;
}
.contacto-card__label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8a8a8a;
}
.contacto-card__value {
font-family: var(--sans);
font-size: clamp(13px, 0.95vw, 15px);
font-weight: 500;
color: var(--ink);
text-decoration: none;
letter-spacing: -0.005em;
transition: color 220ms ease;
}
.contacto-card__value:hover { color: #525258; }
/* Mobile — stack vertical: texto arriba, form abajo */
@media (max-width: 900px) {
.contacto-page {
padding-top: calc(var(--header-h) + clamp(36px, 6vw, 60px));
}
/* En mobile usamos flex con order para mover la card debajo del form.
`display: contents` en .contacto-page__left hace que sus hijos se
comporten como hijos directos del container (eyebrow/title/desc/marquee/card).
Luego ordenamos: form (.contacto-page__right) primero después del marquee,
y la card al final. */
.contacto-page__container {
display: flex;
flex-direction: column;
gap: clamp(28px, 4vw, 48px);
}
.contacto-page__left {
display: contents;
}
.contacto-page__eyebrow { order: 1; }
.contacto-page__title { order: 2; max-width: 16ch; }
.contacto-page__desc { order: 3; }
.contacto-page__marquee { order: 4; }
.contacto-page__right { order: 5; margin-top: 0; }
.contacto-card { order: 6; }
.contacto-page__left { position: static; top: auto; }
.contacto-form__row {
grid-template-columns: 1fr;
}
.contacto-form__phone {
grid-template-columns: minmax(100px, 120px) 1fr;
}
.contacto-card__row {
grid-template-columns: 90px 1fr;
}
}
/* ============================================================
SECCIÓN 7 — CLIENTES (marquee infinito + hover gris→color)
============================================================ */
.clientes {
background: var(--paper); /* BLANCO */
padding: clamp(120px, 14vw, 200px) 0 clamp(180px, 20vw, 280px);
}
.clientes__container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.clientes__head {
text-align: left; /* alineado IZQUIERDA */
margin: 0 0 clamp(48px, 6vw, 88px);
padding: 0 clamp(20px, 4vw, 56px);
max-width: 1000px;
}
.clientes__title {
font-family: var(--sans);
font-size: clamp(40px, 5vw, 72px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.04em;
color: var(--ink);
margin: 0 0 clamp(18px, 2vw, 28px);
text-wrap: balance;
}
.clientes__title-dark { color: var(--ink); }
.clientes__title-muted { color: #6b6b6b; }
.clientes__desc {
font-family: var(--sans);
font-size: clamp(16px, 1.15vw, 19px);
line-height: 1.55;
color: #6b6b6b;
max-width: 64ch;
margin: 0;
text-wrap: pretty;
}
/* Marquee: contenedor con overflow hidden + máscara fade en bordes */
.clientes__marquee {
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.clientes__track {
display: flex;
align-items: center;
gap: clamp(40px, 5vw, 80px);
width: max-content;
animation: clientesScroll 56s linear infinite;
}
.clientes__marquee:hover .clientes__track {
animation-play-state: paused; /* pausa al hover para que el usuario lea */
}
@keyframes clientesScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* avanza la mitad = una serie completa */
}
.clientes__logo {
flex-shrink: 0;
height: clamp(48px, 5.5vw, 80px);
display: flex;
align-items: center;
justify-content: center;
}
.clientes__logo img {
max-height: 100%;
max-width: clamp(120px, 14vw, 200px);
width: auto;
object-fit: contain;
filter: grayscale(1); /* solo gris, sin oscurecer */
opacity: 0.5;
transition:
filter 350ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 350ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: filter, opacity;
}
.clientes__logo:hover img {
filter: grayscale(0); /* color completo */
opacity: 1;
}
/* LUCEK — logotipo un poco más chico que el resto */
.clientes__logo img[src*="LUCEK"] {
max-height: 72%;
max-width: clamp(80px, 10vw, 140px);
}
@media (prefers-reduced-motion: reduce) {
.clientes__track { animation: none; }
}
/* Lenis smooth scroll */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: clip;
}
@media (max-width: 900px) {
.industrias__grid {
grid-template-columns: 1fr;
}
.industrias__col-text { min-height: 0; }
.industrias__col-media {
min-height: 60vw;
}
.industrias__slide:nth-child(2) {
height: 100%;
}
}
/* ============================================================
SECCIÓN POR INDUSTRIA — patrón leftcoast (una sección
independiente por industria, full template + carrusel)
============================================================ */
.industria {
width: 100%;
background: var(--paper);
padding: clamp(32px, 4vw, 64px) 0 clamp(96px, 10vw, 160px);
overflow: hidden;
}
.industria__head {
width: 100%;
max-width: 1100px;
margin: 0 auto clamp(32px, 4vw, 56px);
padding: 0 clamp(20px, 4vw, 56px);
text-align: center;
}
.industria__title--centered {
font-family: var(--sans);
font-size: clamp(18px, 1.6vw, 26px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ink);
margin: 0;
text-wrap: balance;
}
/* Marquee horizontal con tiles cuadrados (estilo Boffi) — drag opcional + autoplay */
.industria__marquee {
width: 100%;
overflow: hidden;
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: pan-y; /* permite scroll vertical pero captura swipe horizontal para el JS */
}
.industria__marquee.is-dragging {
cursor: grabbing;
}
.industria__track {
display: flex;
align-items: stretch;
gap: clamp(80px, 9vw, 160px);
width: max-content;
will-change: transform;
transform: translate3d(0, 0, 0);
}
/* Autoplay vía CSS — el JS lo desactiva si el usuario arrastra */
.industria__track.is-auto {
animation: industriaScroll 60s linear infinite;
}
.industria__marquee:hover .industria__track.is-auto {
animation-play-state: paused;
}
@keyframes industriaScroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.industria__tile {
flex-shrink: 0;
position: relative;
width: clamp(300px, 30vw, 520px);
aspect-ratio: 4 / 5; /* portrait, mismo ratio que Boffi */
overflow: hidden;
background: #f0f0f2;
pointer-events: none; /* clicks pasan al track para drag */
}
.industria__tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
-webkit-user-drag: none;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.industria__track.is-auto { animation: none; }
}
@media (max-width: 760px) {
.industria__title--centered { font-size: clamp(14px, 3.6vw, 18px); }
.industria__tile { width: clamp(240px, 70vw, 340px); }
}
/* ============================================================
SECCIÓN 4 — SERVICIO INTEGRAL (handle.ai pattern)
Layout: izq título + descripción + 2x2 quadrants con cruz divisora
der imagen (sin recorte)
============================================================ */
.proceso {
background: var(--paper);
padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px);
}
.proceso__container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
.proceso__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.proceso__content {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 32px);
}
.proceso__title {
font-family: var(--sans);
font-size: clamp(36px, 4.4vw, 64px);
font-weight: 500;
line-height: 0.96;
letter-spacing: -0.04em;
color: var(--ink);
margin: 0;
max-width: 22ch;
text-wrap: balance;
}
.proceso__title-dark { color: var(--ink); }
.proceso__title-muted { color: #6b6b6b; }
.proceso__desc {
font-family: var(--sans);
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.6;
color: #6b6b6b;
max-width: 48ch;
margin: 0;
text-wrap: pretty;
}
/* 2x2 quadrants — solo la CRUZ divisora (no borde exterior, no rectángulos cerrados) */
.proceso__quadrants {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: #e5e5e5;
/* Sin border, sin border-radius, sin overflow — el bg sólo se ve por los gaps,
formando una cruz; los bordes exteriores quedan abiertos */
}
.proceso__quad {
background: var(--paper);
min-height: clamp(160px, 16vw, 200px);
position: relative;
}
/* El link cubre todo el cuadrante. Hereda layout del antiguo .proceso__quad. */
.proceso__quad-link {
display: flex;
flex-direction: column;
gap: 12px;
padding: clamp(20px, 2.4vw, 32px);
color: inherit;
text-decoration: none;
height: 100%;
transition: background 0.25s ease;
cursor: pointer;
outline: none;
}
.proceso__quad-link:hover { background: rgba(0, 0, 0, 0.025); }
.proceso__quad-link:focus-visible { background: rgba(0, 0, 0, 0.04); box-shadow: inset 0 0 0 2px var(--ink); }
.proceso__quad-link:active { background: rgba(0, 0, 0, 0.045); }
.proceso__quad-link h3,
.proceso__quad-link p { margin: 0; }
/* Círculo numerado: vacío por default, lleno NEGRO cuando está activo
(sin verde — más profesional) */
.proceso__quad-num {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1.5px solid #d4d4d8;
background: transparent;
color: #9a9a9a;
font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition:
background 600ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 600ms cubic-bezier(0.22, 1, 0.36, 1),
color 600ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: background, color;
}
.proceso__quad.is-active .proceso__quad-num {
background: var(--ink);
border-color: var(--ink);
color: #fff;
box-shadow: 0 0 0 5px rgba(10, 10, 10, 0.08);
}
.proceso__quad-title {
font-family: var(--sans);
font-size: clamp(15px, 1.15vw, 18px);
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0;
}
.proceso__quad-desc {
font-family: var(--sans);
font-size: clamp(13px, 0.95vw, 14px);
line-height: 1.55;
color: #6b6b6b;
margin: 0;
text-wrap: pretty;
}
/* Imagen del lado derecho — natural ratio, sin recorte
+ scale-on-scroll estilo handle.ai (mismo que capacidades) */
.proceso__media {
margin: 0;
overflow: hidden;
border-radius: 16px;
will-change: transform, opacity;
transform-origin: right center; /* origen desde la derecha donde está */
transform: scale(0.95) translateY(40px);
opacity: 0.4;
transition: opacity 200ms linear, transform 200ms linear;
}
.proceso__media img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 900px) {
.proceso__layout { grid-template-columns: 1fr; gap: 32px; }
.proceso__quadrants { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.proceso__quad-num { transition: none; }
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
:root { --header-h: 72px; }
.primary-nav { display: none; }
.site-header { grid-template-columns: auto 1fr auto; gap: 12px; }
.hero__title { font-size: clamp(32px, 9vw, 56px); }
.hero__preview { left: 16px; right: 16px; align-items: stretch; bottom: 16px; }
.hero__preview-counter { gap: 10px; font-size: 12px; }
.hero__counter-track { width: 100%; }
.hero__preview-viewport { width: 100%; }
.hero__preview-card { flex-basis: 78%; }
.brand__wordmark { font-size: 12px; letter-spacing: 0.16em; }
}
/* ============================================================
HAMBURGUESA + MENÚ MÓVIL — visible solo en mobile (<= 900px)
============================================================ */
.header-burger {
display: none; /* oculto en desktop */
width: 40px; height: 40px;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: #ffffff; /* blanco sobre hero oscuro por defecto */
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
z-index: 220;
transition: color 350ms ease;
}
.site-header.is-static .header-burger {
color: var(--ink); /* negro cuando el header pasa a fondo claro */
}
/* Páginas que arrancan con header sobre fondo claro (productos, favoritos, modelo) */
.page-favoritos .header-burger,
.page-modelo .header-burger,
.page-familia .header-burger {
color: var(--ink);
}
.header-burger span {
display: block;
width: 22px;
height: 1.6px;
background: currentColor;
border-radius: 2px;
transition:
transform 520ms cubic-bezier(0.65, 0, 0.35, 1),
opacity 320ms ease;
transform-origin: center;
}
/* Las 3 líneas se transforman en X: la primera baja al centro y rota 45°,
la del medio desaparece, la tercera sube al centro y rota -45°. */
.header-burger.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.header-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header-burger.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
/* Menú móvil overlay full-screen — slide-down estilo cortina (como Hay).
Usa pointer-events en lugar de visibility para que la animación de cierre
(deslizar hacia arriba) sea visible, no se corte instantáneamente. */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
height: auto;
max-height: 85svh;
z-index: 210;
background: #0a0a0a; /* bg oscuro cubre toda la zona incl. notch */
color: #ffffff;
padding: calc(var(--header-h) + 20px) clamp(24px, 6vw, 36px) 24px;
display: flex;
flex-direction: column;
gap: 18px;
border-radius: 0 0 28px 28px;
transform: translateY(-105%);
transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Suprime cualquier transición durante la carga inicial — evita la "animación fantasma"
del mobile-menu y megamenu al cargar/refrescar la página */
html.preload .mobile-menu,
html.preload .megamenu {
transition: none !important;
}
.mobile-menu.is-open {
transform: translateY(0); /* baja hasta cubrir todo */
pointer-events: auto;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); /* profundidad solo cuando abierto */
transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1); /* apertura: snappy */
}
.mobile-menu__nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-menu__nav a {
font-family: var(--sans);
font-size: clamp(22px, 5vw, 28px);
font-weight: 500;
letter-spacing: -0.02em;
color: #ffffff;
text-decoration: none;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
transition: opacity 200ms ease, transform 250ms ease;
}
.mobile-menu__nav a:active {
opacity: 0.6;
transform: translateX(4px);
}
.mobile-menu__nav a[aria-current="page"] {
color: rgba(255, 255, 255, 0.5);
}
/* Footer del menú móvil — adaptación compacta del site-footer */
.mobile-menu__footer {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 20px;
}
.mobile-menu__contact {
display: flex;
flex-direction: column;
gap: 5px;
}
.mobile-menu__contact a {
font-family: var(--sans);
font-size: 12px;
color: rgba(255, 255, 255, 0.70);
text-decoration: none;
transition: color 200ms ease;
}
.mobile-menu__contact a:active { color: #ffffff; }
.mobile-menu__social {
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-menu__social-label {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.40);
}
.mobile-menu__social-icons {
display: flex;
gap: 14px;
align-items: center;
}
.mobile-menu__social-icons a {
color: rgba(255, 255, 255, 0.70);
transition: color 200ms ease;
}
.mobile-menu__social-icons a:active { color: #ffffff; }
.mobile-menu__social-icons svg {
display: block;
width: 17px;
height: 17px;
}
.mobile-menu__address {
font-family: var(--sans);
font-size: 11px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.50);
font-style: normal;
}
.mobile-menu__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 24px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.55);
color: #ffffff;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
align-self: flex-start;
}
.mobile-menu__cta:active {
background: #ffffff;
color: #0a0a0a;
}
/* Bloquea scroll del body cuando el menú está abierto */
body.has-mobile-menu-open {
overflow: hidden;
}
/* Cuando el menú está abierto el header debe estar visible (la X tiene que ser
alcanzable). Anula cualquier translateY del scroll-linked header. */
body.has-mobile-menu-open .site-header {
transform: translate3d(0, 0, 0) !important;
opacity: 1 !important;
z-index: 220; /* sube por encima del menú (z:210) para que la X sea visible */
background: transparent; /* sin pill blanco mientras está sobre el menú oscuro */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.has-mobile-menu-open .header-burger {
color: #ffffff !important; /* X siempre blanco sobre el menú oscuro */
}
/* Mobile breakpoint — mostrar hamburguesa, ocultar pill Contacto + búsqueda */
@media (max-width: 900px) {
.header-burger { display: inline-flex; }
.site-header .cta-pill { display: none; } /* Contacto sale del header */
.site-header .header-icon-btn { display: none; } /* Búsqueda sale del header */
}
@media (min-width: 901px) {
.mobile-menu { display: none; }
}
/* ============================================================
LIGHTBOX — vista ampliada al tap en imagen (mobile DGR03 etc.)
Activa solo en mobile via JS; desktop queda intacto.
============================================================ */
.modelo-lightbox {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(10, 10, 10, 0.96);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px 40px;
opacity: 0;
pointer-events: none;
transition: opacity 250ms ease;
}
.modelo-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.modelo-lightbox__img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
.modelo-lightbox__close {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #ffffff;
cursor: pointer;
padding: 0;
}
body.has-lightbox-open {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.intro,
.intro__svg path,
.site-header,
.hero__title .char,
.hero__sub,
.hero__ctas,
.hero__preview-counter,
.hero__preview-viewport,
.hero__preview-track,
.hero__img,
.reveal-letters .char,
.reveal-words .word,
.industrias__col-media .industrias__slide { animation: none !important; transition: none !important; }
.intro { display: none; }
.site-header,
.hero__sub,
.hero__ctas,
.hero__preview-counter,
.hero__preview-viewport,
.reveal-letters .char,
.reveal-words .word,
.industrias__col-media .industrias__slide { opacity: 1; transform: none; }
.hero__title .char { opacity: 1; color: #fff; transform: none; }
.intro__svg path { stroke-dashoffset: 0; fill: currentColor; stroke-width: 0; }
}
/* ============================================================
FLOATING WHATSAPP — fijo abajo a la derecha en TODA la página
============================================================ */
.wa-float {
position: fixed;
right: clamp(14px, 1.6vw, 22px);
bottom: clamp(14px, 1.6vw, 22px);
z-index: 9999;
width: clamp(46px, 4vw, 54px);
height: clamp(46px, 4vw, 54px);
border-radius: 999px; /* círculo perfecto estilo INSCA / Marrocchi */
background: #25D366; /* verde oficial WhatsApp */
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow:
0 4px 12px rgba(37, 211, 102, 0.35),
0 10px 32px -6px rgba(10, 10, 10, 0.30);
/* Aparece después del intro (3.4s) — solo en index.html (con intro) */
opacity: 0;
pointer-events: none;
animation: waFloatIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 3200ms forwards;
transition:
transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 250ms cubic-bezier(0.22, 1, 0.36, 1),
background 250ms ease;
will-change: transform, opacity;
}
@keyframes waFloatIn {
from { opacity: 0; transform: translateY(12px); pointer-events: none; }
to { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
/* En páginas internas (sin intro) aparece de inmediato */
.page-productos .wa-float {
opacity: 1;
pointer-events: auto;
animation: none;
}
.wa-float:hover {
background: #1ebd5b;
transform: translateY(-2px) scale(1.05);
box-shadow:
0 6px 18px rgba(37, 211, 102, 0.5),
0 14px 40px -6px rgba(10, 10, 10, 0.35);
}
.wa-float:active {
transform: translateY(0) scale(0.98);
}
.wa-float svg {
width: clamp(22px, 2vw, 28px);
height: clamp(22px, 2vw, 28px);
}
/* Pulso sutil para llamar la atención */
.wa-float::before {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
border: 2px solid #25D366;
opacity: 0.6;
animation: waPulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes waPulse {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.wa-float::before { animation: none; }
.wa-float:hover { transform: none; }
}
/* ============================================================
PROYECTOS — estilo editorial tipo Left Coast Design Studio
(listing 2 cols + detalle full-bleed con metadata + galería)
============================================================ */
.proyectos {
background: var(--paper);
padding: calc(var(--header-h) + clamp(48px, 6vh, 96px)) clamp(28px, 4vw, 64px) clamp(80px, 10vh, 140px);
color: var(--ink);
}
/* MOBILE: padding-top suficiente para que el título "Nuestros Proyectos"
quede CLARAMENTE debajo del header (no se encime con el burger/logo). */
@media (max-width: 760px) {
.proyectos {
padding-top: calc(var(--header-h) + clamp(32px, 4vh, 56px));
}
}
.proyectos__head {
max-width: 1500px;
margin: 0 auto clamp(40px, 5vh, 80px);
}
.proyectos__title {
font-family: var(--sans);
font-size: clamp(40px, 5.2vw, 76px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 clamp(12px, 1.4vh, 20px);
text-wrap: balance;
}
.proyectos__lede {
font-family: var(--sans);
font-size: clamp(15px, 1.05vw, 17px);
color: #6b6b6b;
margin: 0;
max-width: 60ch;
line-height: 1.55;
}
.proyectos__grid {
list-style: none;
display: flex;
flex-direction: column;
gap: clamp(20px, 2.2vw, 36px);
max-width: 1500px;
margin: 0 auto;
padding: 0;
}
.proyectos__row {
display: grid;
gap: clamp(20px, 2.2vw, 36px);
}
.proyectos__row--two { grid-template-columns: 1fr 1fr; }
.proyectos__row--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
.proyectos__row--two,
.proyectos__row--three { grid-template-columns: 1fr; }
}
.proyectos__card { margin: 0; }
.proyectos__card-link {
display: block;
text-decoration: none;
color: inherit;
}
.proyectos__card-media {
aspect-ratio: 16 / 9;
overflow: hidden;
background: #f0f0f2;
border-radius: 18px;
position: relative;
}
.proyectos__card-media img,
.proyectos__card-media video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
/* Ocultar todos los controles nativos del video — el play button overlay
de iOS Safari y los controles inferiores de cualquier browser */
.proyectos__card-video::-webkit-media-controls,
.proyectos__card-video::-webkit-media-controls-enclosure,
.proyectos__card-video::-webkit-media-controls-panel,
.proyectos__card-video::-webkit-media-controls-overlay-play-button,
.proyectos__card-video::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none !important;
appearance: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Video card: ligero zoom para asegurar que no quede ningún borde negro
residual y para uniformar el feel con los otros cards. */
.proyectos__card-media--video .proyectos__card-video {
transform: scale(1.06);
}
.proyectos__card:hover .proyectos__card-media img,
.proyectos__card:focus-visible .proyectos__card-media img {
transform: scale(1.04);
}
.proyectos__card:hover .proyectos__card-media--video .proyectos__card-video,
.proyectos__card:focus-visible .proyectos__card-media--video .proyectos__card-video {
transform: scale(1.10);
}
.proyectos__card-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 14px 4px 0;
}
.proyectos__card-title {
font-family: var(--sans);
font-size: clamp(14px, 1vw, 16px);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.proyectos__card-location {
font-family: var(--sans);
font-size: clamp(13px, 0.95vw, 15px);
color: #6b6b6b;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 200ms ease;
}
.proyectos__card:hover .proyectos__card-location {
color: var(--ink);
}
.proyectos__card-location svg {
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.proyectos__card:hover .proyectos__card-location svg {
transform: translate(3px, -3px);
}
/* DETALLE — hero con metadata + galería */
.proyecto-detalle {
background: var(--paper);
padding: calc(var(--header-h) + clamp(32px, 4vh, 56px)) 0 clamp(80px, 10vh, 140px);
}
.proyecto-detalle__container {
max-width: 1500px;
margin: 0 auto;
padding: 0 clamp(28px, 4vw, 64px);
}
/* MOBILE: la imagen hero del proyecto va PRIMERO (extiende detrás del notch).
El título, meta y resto del contenido se reordenan abajo. */
@media (max-width: 760px) {
.proyecto-detalle {
padding-top: 0;
}
.proyecto-detalle__container {
display: flex;
flex-direction: column;
padding-left: 0;
padding-right: 0;
}
.proyecto-detalle__hero-wrap { order: 1; }
.proyecto-detalle__title { order: 2; margin-top: clamp(20px, 3vw, 32px); padding: 0 clamp(20px, 4vw, 28px); }
.proyecto-detalle__meta { order: 3; padding: 0 clamp(20px, 4vw, 28px); }
.proyecto-detalle__details { order: 4; padding: 0 clamp(20px, 4vw, 28px); }
.proyecto-detalle__gallery { order: 5; padding: 0 clamp(20px, 4vw, 28px); }
}
.proyecto-detalle__title {
font-family: var(--sans);
font-size: clamp(48px, 7.5vw, 120px);
font-weight: 500;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0 0 clamp(32px, 4vh, 56px);
text-wrap: balance;
}
.proyecto-detalle__meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 2.4vw, 40px);
margin-bottom: clamp(16px, 2vh, 28px);
border-top: 1px solid rgba(10, 10, 10, 0.12);
padding: clamp(14px, 1.6vh, 20px) 0 0; /* más delgado vertical */
}
.proyecto-detalle__meta-item {
display: flex;
flex-direction: column;
gap: 2px; /* label más pegado al value */
}
.proyecto-detalle__meta-label {
font-family: var(--sans);
font-size: 14px;
font-weight: 400;
letter-spacing: -0.005em;
text-transform: none;
color: #7b7b7b;
}
.proyecto-detalle__meta-value {
font-family: var(--sans);
font-size: 14px;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--ink);
}
.proyecto-detalle__hero-wrap {
margin-bottom: clamp(28px, 3.5vh, 56px);
}
.proyecto-detalle__hero {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 24px;
background: #f0f0f2;
margin-bottom: 0;
}
.proyecto-detalle__hero img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.proyecto-detalle__hero-caption {
font-family: var(--sans);
font-size: clamp(12px, 0.85vw, 13px);
font-weight: 400;
letter-spacing: -0.005em;
color: #8b8b8b;
margin: 10px 4px 0;
text-align: right;
}
/* Sección Project Details (overview, collaborators, scale, outcome) */
.proyecto-detalle__details {
display: grid;
grid-template-columns: 220px 200px 1fr;
gap: clamp(28px, 3vw, 56px);
align-items: start;
margin-bottom: clamp(60px, 8vh, 120px);
}
.proyecto-detalle__details-eyebrow {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8b8b8b;
margin: 0;
}
.proyecto-detalle__details-rows {
grid-column: 2 / -1;
display: flex;
flex-direction: column;
gap: clamp(24px, 3vh, 40px);
}
.proyecto-detalle__row {
display: grid;
grid-template-columns: 200px 1fr;
gap: clamp(20px, 2vw, 40px);
align-items: start;
}
.proyecto-detalle__row-label {
font-family: var(--sans);
font-size: clamp(14px, 1vw, 16px);
color: var(--ink);
font-weight: 500;
margin: 0;
}
.proyecto-detalle__row-value {
font-family: var(--sans);
font-size: clamp(14px, 1vw, 16px);
color: #6b6b6b;
line-height: 1.6;
margin: 0;
max-width: 70ch;
}
/* Cita / descripción grande */
.proyecto-detalle__statement {
font-family: var(--sans);
font-size: clamp(24px, 2.8vw, 44px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
max-width: 26ch;
margin: 0 0 clamp(60px, 8vh, 120px);
text-wrap: balance;
}
/* Galería — Selby's: 1ra fila 2 imágenes asimétricas, después filas de 3 */
.proyecto-detalle__gallery {
display: flex;
flex-direction: column;
gap: clamp(32px, 4vh, 56px);
}
.proyecto-detalle__gallery-row {
display: grid;
gap: clamp(16px, 1.6vw, 28px);
}
.proyecto-detalle__gallery-row--two { grid-template-columns: 1.4fr 1fr; }
.proyecto-detalle__gallery-row--three { grid-template-columns: repeat(3, 1fr); }
.proyecto-detalle__gallery-row--two-equal { grid-template-columns: repeat(2, 1fr); }
.proyecto-detalle__gallery-row--full { grid-template-columns: 1fr; }
.proyecto-detalle__gallery-item {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.proyecto-detalle__gallery-media {
overflow: hidden;
border-radius: 18px;
background: #f0f0f2;
aspect-ratio: 4 / 3;
position: relative;
}
.proyecto-detalle__gallery-row--two .proyecto-detalle__gallery-item:first-child .proyecto-detalle__gallery-media { aspect-ratio: 16 / 10; }
.proyecto-detalle__gallery-row--two .proyecto-detalle__gallery-item:last-child .proyecto-detalle__gallery-media { aspect-ratio: 4 / 5; }
.proyecto-detalle__gallery-row--three .proyecto-detalle__gallery-media { aspect-ratio: 4 / 5; }
.proyecto-detalle__gallery-row--two-equal .proyecto-detalle__gallery-media { aspect-ratio: 4 / 3; }
.proyecto-detalle__gallery-row--full .proyecto-detalle__gallery-media { aspect-ratio: 16 / 9; }
.proyecto-detalle__gallery-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* "Cunas para grandes formatos" — anclar al bottom para que no se corte abajo */
.proyecto-detalle__gallery-media img[src*="Cunas para grandes formatos" i] {
object-position: center bottom;
}
/* Cesantoni — "Exhibidor modular" es portrait pero cae en un slot 16/10
landscape → recortaba mucho. Cambiamos el slot a 4/5 (matching la
orientación de la imagen) — así llena con cover, queda mínimo crop y
las esquinas redondeadas del contenedor sí se aplican a la imagen. */
.proyecto-detalle__gallery-row--two .proyecto-detalle__gallery-item:has(img[src*="Exhibidor-modular.jpg"]) .proyecto-detalle__gallery-media {
aspect-ratio: 4 / 5;
}
/* Imagen portrait "Sistemas de exhibición..." en la fila full:
contenedor portrait + ancho limitado y centrado.
Selector case-insensitive (i flag) por si el filename cambia de mayúsculas */
.proyecto-detalle__gallery-row--full:has(img[src*="sistemas" i][src*="porcelanato" i]) {
display: flex;
justify-content: center;
}
.proyecto-detalle__gallery-row--full:has(img[src*="sistemas" i][src*="porcelanato" i]) .proyecto-detalle__gallery-item {
max-width: 480px;
width: 100%;
}
.proyecto-detalle__gallery-row--full:has(img[src*="sistemas" i][src*="porcelanato" i]) .proyecto-detalle__gallery-media {
aspect-ratio: 3 / 4;
}
.proyecto-detalle__gallery-media img[src*="sistemas" i][src*="porcelanato" i] {
object-fit: cover;
}
/* (Eliminado el tag overlay — ahora se usa .proyecto-detalle__hero-caption debajo del hero) */
.proyecto-detalle__caption {
font-family: var(--sans);
font-size: clamp(13px, 0.9vw, 14px);
font-weight: 400;
letter-spacing: -0.005em;
color: #7b7b7b;
margin: 0 2px;
line-height: 1.4;
}
@media (max-width: 760px) {
.proyecto-detalle__gallery-row--two,
.proyecto-detalle__gallery-row--three { grid-template-columns: 1fr; }
}
/* ============================================================
REVEAL ON SCROLL — entrada suave para proyectos
============================================================ */
/* Override del color reveal-letters dentro de proyectos: verde Pantone 360 C
+ stagger más lento (45ms × char) y transiciones más largas */
.proyectos .reveal-letters .char,
.proyecto-detalle .reveal-letters .char {
color: #72bf44;
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
color 1200ms cubic-bezier(0.25, 1, 0.5, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--n, 0) * 45ms);
}
.proyectos .reveal-letters.is-visible .char,
.proyecto-detalle .reveal-letters.is-visible .char {
color: var(--ink);
transition-delay:
calc(var(--n, 0) * 45ms),
calc(var(--n, 0) * 45ms + 350ms),
calc(var(--n, 0) * 45ms);
}
.proyectos [data-reveal-up],
.proyecto-detalle [data-reveal-up] {
opacity: 0;
transform: translateY(28px);
transition:
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-delay, 0) * 1ms);
will-change: opacity, transform;
}
.proyectos [data-reveal-up].is-revealed,
.proyecto-detalle [data-reveal-up].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Reveal especial: fade-in puro (sin slide) para el título */
.proyectos [data-reveal-fade],
.proyecto-detalle [data-reveal-fade] {
opacity: 0;
transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
.proyectos [data-reveal-fade].is-revealed,
.proyecto-detalle [data-reveal-fade].is-revealed {
opacity: 1;
}
/* Reveal escala — para imágenes hero */
.proyectos [data-reveal-zoom],
.proyecto-detalle [data-reveal-zoom] {
opacity: 0;
transform: scale(1.04);
transition:
opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
.proyectos [data-reveal-zoom].is-revealed,
.proyecto-detalle [data-reveal-zoom].is-revealed {
opacity: 1;
transform: scale(1);
}
@media (max-width: 900px) {
.proyectos__grid { grid-template-columns: 1fr; }
.proyecto-detalle__meta { grid-template-columns: repeat(2, 1fr); }
.proyecto-detalle__details { grid-template-columns: 1fr; }
.proyecto-detalle__details-rows { grid-column: 1; }
.proyecto-detalle__row { grid-template-columns: 1fr; gap: 6px; }
.proyecto-detalle__gallery { grid-template-columns: 1fr; }
}
/* ============================================================
FOOTER — fondo negro, todo alineado a la izquierda
============================================================ */
.site-footer {
background: #0a0a0a; /* negro */
color: #ffffff;
padding: clamp(80px, 10vw, 140px) clamp(32px, 6vw, 100px) clamp(40px, 4vw, 56px);
font-family: var(--sans);
}
.site-footer__container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(40px, 5vw, 72px);
}
/* Bloque superior: brand a la izquierda + columnas */
.site-footer__top {
display: grid;
grid-template-columns: 0.7fr 2.3fr;
gap: clamp(48px, 6vw, 120px);
align-items: start;
}
.site-footer__brand {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.6vw, 22px);
max-width: 320px;
}
.site-footer__logo {
display: inline-flex;
align-items: center;
width: clamp(130px, 13vw, 180px);
}
.site-footer__logo img {
width: 100%;
height: auto;
display: block;
filter: invert(1) brightness(2); /* logo en blanco sobre fondo negro */
}
.site-footer__tagline {
font-size: clamp(13px, 1vw, 15px);
line-height: 1.5;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
/* Grid de 4 columnas con links */
.site-footer__cols {
display: grid;
grid-template-columns: 1.4fr 1.6fr 1fr 1fr;
gap: clamp(32px, 4vw, 72px);
}
.site-footer__col {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.4vw, 20px);
}
.site-footer__col-title {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0;
}
.site-footer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(10px, 1.1vw, 14px);
}
/* Lista de colecciones en 2 columnas */
.site-footer__list--cols {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(20px, 2vw, 32px);
row-gap: clamp(10px, 1.1vw, 14px);
}
@media (max-width: 540px) {
.site-footer__list--cols {
grid-template-columns: 1fr 1fr; /* 2 cols en móvil */
column-gap: 14px;
row-gap: 10px;
}
}
@media (max-width: 360px) {
.site-footer__list--cols { grid-template-columns: 1fr; } /* sólo en pantallas muy chicas */
}
.site-footer__list a,
.site-footer__addr {
color: #ffffff;
text-decoration: none;
font-size: clamp(13px, 1vw, 15px);
line-height: 1.45;
transition: opacity 250ms ease;
}
.site-footer__list a:hover {
opacity: 0.7;
}
.site-footer__addr {
color: rgba(255, 255, 255, 0.7);
}
.site-footer__placeholder {
color: rgba(255, 255, 255, 0.4);
font-style: italic;
font-size: clamp(13px, 1vw, 15px);
}
/* Lista de redes sociales con logo + nombre (estilo Marrocchi) */
.site-footer__social-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(10px, 1.1vw, 14px);
}
.site-footer__social-list a {
display: inline-flex;
align-items: center;
gap: 10px;
color: #ffffff;
text-decoration: none;
font-size: clamp(13px, 1vw, 15px);
line-height: 1.45;
transition: opacity 250ms ease;
}
.site-footer__social-list a:hover {
opacity: 0.7;
}
.site-footer__social-list svg {
flex-shrink: 0;
color: #ffffff;
}
/* Bloque inferior: solo copyright */
.site-footer__bottom {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 24px;
padding-top: clamp(20px, 2.4vw, 32px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__copy {
margin: 0;
color: rgba(255, 255, 255, 0.55);
font-size: clamp(12px, 0.9vw, 13px);
}
@media (max-width: 900px) {
.site-footer__top { grid-template-columns: 1fr; }
.site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* ============================================================
FAMILIA DETALLE — página por familia (Hay-style mosaic editorial
con tamaños variados + Carl Hansen hover-swap a imagen artística)
============================================================ */
.familia-hero {
padding: calc(var(--header-h) + clamp(40px, 5vh, 72px)) var(--side-pad) clamp(20px, 2.4vh, 32px);
text-align: left;
background: #ffffff;
max-width: 1500px;
margin: 0 auto;
}
/* Favoritos — CTA "Solicitar cotización" debajo del título */
.favoritos-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: clamp(16px, 2vw, 24px);
padding: 0 24px;
height: 48px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none;
transition:
background 350ms cubic-bezier(0.22, 1, 0.36, 1),
gap 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.favoritos-cta svg {
transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.favoritos-cta:hover {
background: #1a1a1a;
gap: 14px;
}
.favoritos-cta:hover svg { transform: translateX(3px); }
.favoritos-cta[hidden] { display: none; }
/* Stepper de cantidad debajo de cada card de favoritos.
Está FUERA del para que funcione el tap en mobile sin navegar. */
.favoritos-qty {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: -8px 0 0;
padding: 10px 12px;
background: #f6f6f4;
border-radius: 10px;
text-align: left;
}
.page-favoritos .familia-grid__item {
display: flex;
flex-direction: column;
}
.favoritos-qty__label {
font-family: var(--sans);
font-size: 12.5px;
color: #6b6b6b;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.favoritos-qty__stepper {
display: inline-flex;
align-items: center;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 999px;
overflow: hidden;
}
.favoritos-qty__btn {
width: 30px;
height: 30px;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
font-weight: 500;
line-height: 1;
cursor: pointer;
user-select: none;
transition: background 200ms ease;
}
.favoritos-qty__btn:hover { background: #f0f0ef; }
.favoritos-qty__btn:active { background: #e8e8e6; }
.favoritos-qty__input {
width: 38px;
height: 30px;
border: 0;
background: transparent;
text-align: center;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
color: var(--ink);
appearance: textfield;
-moz-appearance: textfield;
}
.favoritos-qty__input::-webkit-inner-spin-button,
.favoritos-qty__input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.favoritos-qty__input:focus {
outline: 2px solid rgba(10, 10, 10, 0.1);
outline-offset: 2px;
border-radius: 4px;
}
/* Mobile: stepper compacto para que entre en cards de 2 columnas */
@media (max-width: 760px) {
.favoritos-qty {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 8px 10px;
}
.favoritos-qty__label { font-size: 10.5px; }
.favoritos-qty__btn { width: 26px; height: 26px; font-size: 14px; }
.favoritos-qty__input { width: 30px; height: 26px; font-size: 13px; }
}
/* Breadcrumb pequeño estilo Arper — sustituye al eyebrow grande */
.familia-hero__crumb {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-size: 13px;
font-weight: 400;
color: #6b6b6b;
margin: 0 0 clamp(20px, 3vh, 36px);
}
.familia-hero__crumb a {
color: #6b6b6b;
text-decoration: none;
transition: color 250ms ease;
}
.familia-hero__crumb a:hover { color: var(--ink); }
.familia-hero__crumb [aria-current="page"] { color: var(--ink); }
/* Row editorial estilo Flos: título arriba (grande, bold) + descripción abajo (full-width, contenido) */
.familia-hero__row {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 32px);
}
.familia-hero__title {
font-family: var(--sans);
font-size: clamp(38px, 4.5vw, 64px);
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.02em;
text-transform: uppercase;
color: rgb(26, 32, 44);
margin: 0;
}
.familia-hero__desc {
max-width: 640px;
}
.familia-hero__slash {
font-weight: 300;
color: rgba(10,10,10,0.4);
margin-left: 0.04em;
}
.familia-hero__desc {
max-width: 720px;
margin: 14px 0 0;
font-family: var(--sans);
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 400;
color: #6b6b6b;
line-height: 1.55;
}
/* Página de favoritos — count en título y estado vacío */
.favoritos-count {
color: var(--ink); /* negro como Carl */
font-weight: 300;
margin-left: 4px;
white-space: nowrap; /* "(0)" no se separa nunca */
}
/* Página de favoritos: hover hace zoom en la imagen (no swap a alt),
y se ve el "Ver producto" abajo. */
.page-favoritos .familia-grid {
grid-template-columns: repeat(4, 1fr); /* cards más chicas */
max-width: 1500px;
}
@media (max-width: 1100px) {
.page-favoritos .familia-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.page-favoritos .familia-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.page-favoritos .familia-grid__img--alt {
display: none; /* sin alt — solo render principal */
}
.page-favoritos .familia-grid__img--main {
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease-in-out;
}
/* Zoom on hover SOLO en dispositivos con hover real (mouse/trackpad).
En touch (mobile/tablet) un "tap" se interpreta como hover y dejaba
la imagen ampliada de forma indeseada al entrar al apartado. */
@media (hover: hover) and (pointer: fine) {
.page-favoritos .familia-grid__card:hover .familia-grid__img--main {
transform: scale(1.45); /* zoom como Carl */
opacity: 1;
}
}
.page-favoritos .familia-grid__action {
display: inline-block;
margin-top: 16px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 1px;
line-height: 1.2;
}
/* Specs line — pipe-separated abajo del título estilo Carl */
.familia-grid__specs {
font-family: var(--sans);
font-size: clamp(13px, 0.95vw, 15px);
font-weight: 400;
color: #666;
margin: 6px 0 0;
line-height: 1.4;
}
.favoritos-empty {
text-align: center;
padding: clamp(60px, 10vh, 120px) var(--side-pad);
}
.favoritos-empty p {
font-family: var(--sans);
font-size: clamp(15px, 1.1vw, 17px);
color: #6b6b6b;
margin: 0 0 16px;
}
.favoritos-empty__link {
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--ink);
padding-bottom: 2px;
transition: opacity 200ms ease;
}
.favoritos-empty__link:hover { opacity: 0.65; }
/* Grid Carl Hansen-style: 3 columnas uniformes, cards square con fondo
gris sutil + hover swap a imagen artística. Limpio y editorial. */
.familia-grid {
list-style: none;
margin: 0 auto;
padding: 0 var(--side-pad) clamp(80px, 10vh, 140px);
max-width: 1500px;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: clamp(14px, 1.4vw, 24px); /* aire horizontal moderado entre cards */
row-gap: clamp(8px, 1vw, 16px);
}
.familia-grid__item { margin: 0; }
.familia-grid__card {
display: block;
text-decoration: none;
color: inherit;
}
.familia-grid__media {
position: relative;
overflow: hidden;
background: transparent;
border: none;
border-radius: 0;
aspect-ratio: 1 / 1; /* cuadrado en vez de 8/9 — recuadros menos altos */
}
/* Sombra elíptica bajo el render — le da peso al silo, evita que parezca flotando */
.familia-grid__media::after {
content: '';
position: absolute;
left: 50%;
bottom: 10%;
transform: translateX(-50%);
width: 60%;
height: 22px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.08) 40%, transparent 72%);
filter: blur(10px);
pointer-events: none;
z-index: 0;
opacity: 0.85;
transition: opacity 350ms ease;
}
.familia-grid__card:hover .familia-grid__media::after {
opacity: 0; /* en hover muestra la artística, no necesita sombra */
}
.familia-grid__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0;
transform: scale(1.32); /* silo MUCHO más grande dentro del recuadro */
transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
}
.familia-grid__img--alt {
opacity: 0;
object-fit: cover; /* misma lógica que Reclinables — fill el recuadro */
transform: scale(1);
transition: opacity 500ms ease-in-out;
}
/* PCO y P51 tienen render alargado vertical: sin zoom para que no se recorte el silo */
.familia-grid__img[src*="Corredizos/PCO/"],
.familia-grid__img[src*="Corredizos/P51/"] {
transform: scale(1);
}
/* DCO26 (Gris) — un poco más chico que el default */
.familia-grid__img[src*="Corredizos/DCO26/"] {
transform: scale(1.05);
}
/* Render muy grande para el default — bajar zoom */
.familia-grid__img[src*="Piezas Sueltas/AURA/"],
.familia-grid__img[src*="Piezas Sueltas/DDE05/"],
.familia-grid__img[src*="Paneles/DPS21/"],
.familia-grid__img[src*="Paneles/DPS20/"],
.familia-grid__img[src*="Libros/DLB02/"] {
transform: scale(1);
}
/* DGI04 y DGI18 — render portrait: sin zoom para que entre completo */
.familia-grid__img[src*="Giratorios/DGI04/"],
.familia-grid__img[src*="Giratorios/DGI18/"] {
transform: scale(1);
}
/* MODULAR y MODUFLEX — render muy grande, bajar zoom para que no se corte */
.familia-grid__img[src*="Modulares/MODULAR/"],
.familia-grid__img[src*="Modulares/MODUFLEX/"] {
transform: scale(1);
}
/* GRF, GRR y GSL — render muy grande, bajar zoom para que no se corte */
.familia-grid__img[src*="Griferia/GRF/"],
.familia-grid__img[src*="Griferia/GRR/"],
.familia-grid__img[src*="Griferia/GSL/"] {
transform: scale(1);
}
/* GSL alt (hover) — usar contain para no recortar */
.familia-grid__img--alt[src*="Griferia/GSL/"] {
object-fit: contain;
}
/* LVS — render aún más grande, más zoom out */
.familia-grid__img[src*="Griferia/LVS/"] {
transform: scale(0.85);
}
/* IS (Iluminación) — render muy grande, bajar zoom */
.familia-grid__img[src*="Iluminación/IS/"] {
transform: scale(1);
}
/* Sanitarios — DLB17 (DBA17), DLB18 (DBA18) y ESP: render muy grande, bajar zoom */
.familia-grid__img[src*="Sanitarios/DLB17/"],
.familia-grid__img[src*="Sanitarios/DLB18/"],
.familia-grid__img[src*="Sanitarios/ESP/"] {
transform: scale(0.85);
}
/* DLB18 imagen 4 (wide): se corta, usar contain en lugar de cover */
.modelo__gallery-img[data-base="DLB18-4"] {
object-fit: contain;
}
/* DLB11 imagen 3: recorrida a la izquierda (desktop + base) */
.modelo__gallery-img[data-base="DLB11-3"] {
object-position: 20% center !important;
transform: translateX(-8%) scale(1.5) !important;
}
/* LVS imágenes 2 y 3 (pair): muy grandes, contener al silo dentro del recuadro */
.modelo__gallery .modelo__gallery-item--half .modelo__gallery-img[data-base="LVS-2"],
.modelo__gallery .modelo__gallery-item--half .modelo__gallery-img[data-base="LVS-3"] {
transform: scale(0.85) !important;
}
/* LVS imagen 4 (wide): se ve completa sin recortar lados — fuerza contain */
.modelo__gallery .modelo__gallery-img[data-base="LVS-4"] {
object-fit: contain !important;
}
/* Grandes Formatos — TODOS los SKUs (DGF01/13/50/69/70/75/76/77/83 + TOTEM):
centrar y sin zoom agresivo en pair items (1ra y 2da imagen). Esto evita que
se corten al entrar al detalle. */
.modelo__gallery .modelo__gallery-item--half .modelo__gallery-img[data-base^="DGF"],
.modelo__gallery .modelo__gallery-item--half .modelo__gallery-img[data-base^="TOTEM"] {
transform: scale(1) !important;
object-fit: contain !important;
object-position: center center !important;
}
/* Hero y wide también centrados (no se cortan ya, pero por consistencia) */
.modelo__gallery .modelo__gallery-img[data-base^="DGF"],
.modelo__gallery .modelo__gallery-img[data-base^="TOTEM"] {
object-fit: contain;
object-position: center center;
}
/* DESKTOP: Grandes Formatos — imágenes WIDE (típicamente la 3, 4, 6)
usan COVER para que llenen el ancho completo del frame 16:9 y se vean
alargadas, en lugar de quedar con bandas vacías a los lados (contain
las dejaba pequeñas en el medio). */
.modelo__gallery .modelo__gallery-item--wide .modelo__gallery-img[data-base^="DGF"],
.modelo__gallery .modelo__gallery-item--wide .modelo__gallery-img[data-base^="TOTEM"] {
object-fit: cover !important;
object-position: center center !important;
}
/* Grandes Formatos — solo bajamos zoom en los SKUs con render que ocupa mucho
espacio dentro del frame (DGF01/DGF50/DGF83/TOTEM); los demás conservan el
scale(1.32) default para que el render se vea grande en la card */
.familia-grid__img[src*="Grandes Formatos/DGF01/"],
.familia-grid__img[src*="Grandes Formatos/DGF50/"],
.familia-grid__img[src*="Grandes Formatos/DGF83/"],
.familia-grid__img[src*="Grandes Formatos/TOTEM/"] {
transform: scale(1);
}
/* DGF01 — aún más chico que los demás de Grandes Formatos */
.familia-grid__img[src*="Grandes Formatos/DGF01/"] {
transform: scale(0.78);
}
/* Ajustes finos solo en mobile para Grandes Formatos */
@media (max-width: 760px) {
.familia-grid__img[src*="Grandes Formatos/DGF01/"] {
transform: scale(0.7) !important;
}
.familia-grid__img[src*="Grandes Formatos/DGF13/"] {
transform: scale(1.5) !important;
}
}
/* P51 alt es portrait — contain fits sin recortar */
.familia-grid__img--alt[src*="Corredizos/P51/"] {
object-fit: contain;
transform: scale(1);
}
/* PCO alt usa imágenes landscape (PCO-3/4/5): cover llena el recuadro 1:1
y un scale extra recorta más los lados para que se vea centrada */
.familia-grid__img--alt[src*="Corredizos/PCO/"] {
object-fit: cover;
transform: scale(1.5);
}
/* Placeholder tag — para cards sin render aún */
.familia-grid__placeholder-tag {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-size: 12px;
font-weight: 400;
color: #aaa;
letter-spacing: 0.04em;
text-transform: uppercase;
pointer-events: none;
}
.familia-grid__card--placeholder {
pointer-events: none; /* placeholder no clickable */
opacity: 0.85;
}
.familia-grid__card--placeholder .familia-grid__fav { pointer-events: none; }
/* Heart icon — top-right del card media */
.familia-grid__fav {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--ink);
cursor: pointer;
padding: 0;
transition: transform 250ms ease;
}
.familia-grid__fav svg { width: 16px; height: 16px; }
.familia-grid__fav:hover { transform: scale(1.1); }
.familia-grid__fav.is-saved svg path {
fill: currentColor; /* corazón relleno cuando guardado */
}
/* Mantener placeholders sin click en la heart */
.familia-grid__card--placeholder .familia-grid__fav {
pointer-events: none;
opacity: 0.5;
}
/* Modelo detalle — heart guardado */
.modelo__fav.is-saved svg path {
fill: currentColor;
}
/* Hover image swap solo en dispositivos con cursor (no en táctil / móvil) */
@media (hover: hover) and (pointer: fine) {
.familia-grid__card:hover .familia-grid__img--main { opacity: 0; }
.familia-grid__card:hover .familia-grid__img--alt { opacity: 1; }
}
/* En móvil/táctil: la imagen alt nunca se muestra */
@media (hover: none), (pointer: coarse) {
.familia-grid__img--alt { opacity: 0 !important; }
.familia-grid__img--main { opacity: 1 !important; }
}
.familia-grid__info {
padding: 14px 0 28px;
text-align: center;
}
.familia-grid__maker {
font-family: var(--sans);
font-size: clamp(12px, 0.88vw, 14px);
font-weight: 400;
color: var(--ink);
margin: 0 0 5px 0;
}
.familia-grid__name {
font-family: var(--sans);
font-size: clamp(15px, 1.15vw, 19px);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.3;
color: var(--ink);
margin: 0;
}
@media (max-width: 1280px) {
.familia-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.familia-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.familia-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* ============================================================
MODELO DETALLE — Carl Hansen-style exacto: gallery izquierda con
hero ancho + pair 50/50, sidebar sticky derecha con maker/fav,
título grande, props, variant grid, CTA texto-flecha y accordion.
============================================================ */
.modelo {
max-width: none; /* full width — sin constraint */
margin: 0 auto;
padding: calc(var(--header-h) + 56px) clamp(12px, 1.2vw, 20px) clamp(80px, 10vh, 140px);
}
/* Breadcrumb estilo INSCA — solo aparece en MOBILE; desktop queda como estaba */
.modelo__breadcrumb {
display: none; /* desktop: no se muestra */
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6b6b6b;
margin: 0 0 clamp(20px, 2.4vw, 32px);
padding: 0 clamp(8px, 1vw, 16px);
}
@media (max-width: 1000px) {
.modelo__breadcrumb { display: flex; } /* visible solo en mobile/tablet */
}
.modelo__breadcrumb a {
color: #6b6b6b;
text-decoration: none;
transition: color 200ms ease;
}
.modelo__breadcrumb a:hover { color: var(--ink); }
.modelo__breadcrumb-sep {
color: rgba(10, 10, 10, 0.3);
}
.modelo__breadcrumb-current {
color: var(--ink);
}
.modelo__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(470px, 34vw, 580px);
gap: clamp(20px, 2vw, 32px);
align-items: start;
}
/* GALERÍA — hero ancho 16:9 + pair 50/50 abajo */
.modelo__gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(3px, 0.4vw, 6px); /* gap apretado tipo Carl Hansen */
}
.modelo__gallery-item {
position: relative;
overflow: hidden;
background: #ffffff;
border: none;
border-radius: 0;
}
/* Sombra elíptica bajo los renders sin fondo (no aplica a las artísticas con cover) */
.modelo__gallery-item:not(:has(.modelo__gallery-img--cover))::after {
content: '';
position: absolute;
left: 50%;
bottom: 10%;
transform: translateX(-50%);
width: 56%;
height: 26px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 42%, transparent 72%);
filter: blur(12px);
pointer-events: none;
z-index: 0;
opacity: 0.85;
}
.modelo__gallery-item--hero {
grid-column: span 2;
aspect-ratio: 16 / 9; /* hero wide, silo no se corta */
}
.modelo__gallery-item--wide {
grid-column: span 2;
aspect-ratio: 16 / 9;
}
.modelo__gallery-item--half {
aspect-ratio: 1 / 1; /* recuadro cuadrado — menos alto */
}
.modelo__gallery-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 0;
transform: scale(1);
transition: opacity 500ms ease-in-out;
}
/* Pair items: silo más grande dentro del recuadro (proporcional, sin distorsión) */
.modelo__gallery-item--half .modelo__gallery-img:not(.modelo__gallery-img--cover) {
transform: scale(1.5); /* silo abarca mucho más del recuadro */
}
/* Modelos grandes (7-8 carros, mixto, paneles corredizos): sin zoom para
que el render no se corte por la izquierda/derecha */
.modelo__gallery[data-large] .modelo__gallery-item--half .modelo__gallery-img:not(.modelo__gallery-img--cover) {
transform: scale(1);
}
/* DCN07/DCN10 imagen 3 (jpg artística): escala menos agresiva para que no se recorte */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DCN07-3"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DCN10-3"] {
transform: scale(1.15);
}
/* DCO26 imágenes 2 y 3: render más chico para que se vean completas */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DCO26N-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DCO26N-3"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DCO26G-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DCO26G-3"] {
transform: scale(1.1);
}
/* DDE05 imagen 2 (y duplicada en slot 3): muy grande, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DDE05-2"] {
transform: scale(1);
}
/* AURA imagen 2 (y duplicada en slot 3): muy grande, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="AURA-2"] {
transform: scale(1);
}
/* DLB08 imagen 2 (y duplicada en slot 3): muy grande, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DLB08-2"] {
transform: scale(1);
}
/* DGI04 imágenes 2 y 3 (pair): se cortan, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DGI04-2"] {
transform: scale(1);
}
/* DGI04 imagen 3: silo 3D angled — más chico para que no se vea tan cerca (desktop) */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DGI04-3"] {
transform: scale(0.85);
}
/* DGI18 imágenes 2 y 3 (pair): se cortan, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DGI18-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DGI18-3"] {
transform: scale(1);
}
/* MODULAR imágenes 2 y 3 (pair): un poco más chicas */
.modelo__gallery-item--half .modelo__gallery-img[data-base="MODULAR-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="MODULAR-3"] {
transform: scale(0.9);
}
/* MODUFLEX imágenes 2 y 3 (pair): muy grandes, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="MODUFLEX-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="MODUFLEX-3"] {
transform: scale(1);
}
/* MODUFLEX imagen 4 (wide artística): usar contain para que se vea completa */
.modelo__gallery-img[data-base="MODUFLEX-4"] {
object-fit: contain;
}
/* GRF imagen 2 (y dup en slot 3): se corta, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="GRF-2"] {
transform: scale(1);
}
/* GRR imágenes 2 y 3 (pair): se cortan, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="GRR-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="GRR-3"] {
transform: scale(1);
}
/* DBA17 (DOBLE) y DBA18 (SENCILLO) imagen 2 y 3 (pair): se cortan */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DOBLE-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DOBLE-3"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="SENCILLO-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="SENCILLO-3"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DBA17-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DBA17-3"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DBA18-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DBA18-3"] {
transform: scale(1);
}
/* MALLA — pair y artísticas se cortan: bajar escala / usar contain */
.modelo__gallery-item--half .modelo__gallery-img[data-base="MALLA-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="MALLA-3"] {
transform: scale(1);
}
.modelo__gallery-img[data-base="MALLA-4"],
.modelo__gallery-img[data-base="MALLA-5"],
.modelo__gallery-img[data-base="MALLA-6"] {
object-fit: contain;
}
/* DDE05 slot 4 (imagen -3 wide artística): muy grande, usar contain para verla completa */
.modelo__gallery-img[data-base="DDE05-3"] {
object-fit: contain;
}
/* DMC06 — imagen 2 y 3 mucho más chicas (desktop) */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DMC06-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DMC06-3"],
.modelo__gallery-item--hero .modelo__gallery-img[data-base="DMC06-2"],
.modelo__gallery-item--hero .modelo__gallery-img[data-base="DMC06-3"],
.modelo__gallery-item--wide .modelo__gallery-img[data-base="DMC06-2"],
.modelo__gallery-item--wide .modelo__gallery-img[data-base="DMC06-3"] {
transform: scale(0.95);
}
/* Cover para imágenes contextuales (artística) — llena todo sin whitespace */
.modelo__gallery-img--cover {
object-fit: cover;
transform: scale(1);
}
/* SIDEBAR sticky derecha — exactamente Carl Hansen */
.modelo__info {
position: sticky;
top: calc(var(--header-h) + 16px);
align-self: start;
}
/* Top row: maker (izq) + favorito (der) */
.modelo__info-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.modelo__maker {
font-family: var(--sans);
font-size: 15px;
font-weight: 400;
color: var(--ink);
}
.modelo__fav {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sans);
font-size: 15px;
font-weight: 400;
color: var(--ink);
transition: opacity 200ms ease;
}
.modelo__fav:hover { opacity: 0.65; }
/* Título grande */
.modelo__title {
font-family: var(--sans);
font-size: clamp(30px, 2.8vw, 40px);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.15;
color: var(--ink);
margin: 0 0 22px;
}
.modelo__title-pipe {
font-weight: 300;
color: var(--ink);
margin: 0 0.1em;
}
/* Propiedades label: value tipo Carl ("Material: oak, oil") */
.modelo__props {
margin: 0 0 28px;
}
.modelo__prop {
display: flex;
gap: 6px;
font-family: var(--sans);
font-size: 15px;
line-height: 1.55;
margin: 0;
}
.modelo__prop dt {
color: #888;
font-weight: 400;
margin: 0;
}
.modelo__prop dd {
color: var(--ink);
font-weight: 500;
margin: 0;
}
/* Variants — círculos chicos con el color, sin texto */
.modelo__variants {
display: flex;
gap: 10px;
margin: 0 0 28px;
}
.modelo__variant {
background: transparent;
border: none;
padding: 2px; /* gap entre borde activo y círculo */
cursor: pointer;
border-radius: 50%;
transition: opacity 200ms ease;
}
.modelo__variant:hover { opacity: 0.85; }
.modelo__variant-circle {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid transparent;
box-sizing: border-box;
}
.modelo__variant.is-active {
box-shadow: 0 0 0 1.5px var(--ink); /* anillo oscuro alrededor del activo */
}
.modelo__variant-circle--negro {
background: #1a1a1a;
}
.modelo__variant-circle--blanco {
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.18);
}
.modelo__variant-circle--gris {
background: #888888;
}
.modelo__variant-circle--beige {
background: #d6c4a8;
box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.10);
}
/* Sin anillo negro alrededor del swatch beige cuando está activo */
.modelo__variant.is-active:has(.modelo__variant-circle--beige) {
box-shadow: none;
}
/* CTA primario — texto + flecha CENTRADO (no es una caja, solo texto) */
.modelo__primary-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
font-weight: 500;
padding: 18px 0;
margin: 0 0 12px;
transition: gap 250ms ease;
}
.modelo__primary-cta:hover {
gap: 14px;
}
.modelo__primary-cta svg {
transition: transform 250ms ease;
}
.modelo__primary-cta:hover svg { transform: translateX(2px); }
/* Accordion — secciones expandibles tipo Carl */
.modelo__accordion {
margin-top: 8px;
}
.modelo__acc {
border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}
.modelo__acc-summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
font-family: var(--sans);
font-size: 19px;
font-weight: 500;
color: var(--ink);
}
.modelo__acc-summary::-webkit-details-marker { display: none; }
.modelo__acc-icon {
transition: transform 280ms cubic-bezier(0.4, 0, 1, 1);
}
.modelo__acc.is-expanded .modelo__acc-icon {
transform: rotate(180deg);
}
.modelo__acc-content {
padding: 0 0 28px;
box-sizing: border-box;
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: #555;
overflow: hidden;
transition: height 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modelo__acc-content > *:last-child { margin-bottom: 0; }
.modelo__acc-content p {
margin: 0 0 10px;
}
.modelo__acc-content p:last-child {
margin-bottom: 0;
}
.modelo__acc-content a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Sección de modelos relacionados — abajo de la página estilo Carl Hansen */
.modelo__related {
max-width: 1500px;
margin: clamp(60px, 8vw, 110px) auto 0;
padding: 0 clamp(12px, 1.2vw, 20px);
}
.modelo__related-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 clamp(20px, 2vw, 32px);
gap: 16px;
}
.modelo__related-title {
font-family: var(--sans);
font-size: clamp(22px, 2vw, 30px);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.modelo__related-controls {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.modelo__related-nav {
width: 38px;
height: 38px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(10, 10, 10, 0.20);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
padding: 0;
transition: background 220ms ease, border-color 220ms ease, opacity 220ms ease;
}
.modelo__related-nav:hover {
background: rgba(10, 10, 10, 0.04);
border-color: var(--ink);
}
.modelo__related-nav:disabled {
opacity: 0.28;
pointer-events: none;
}
.modelo__related-nav svg { display: block; }
.modelo__related-track {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: clamp(8px, 0.8vw, 14px);
overflow-x: auto;
/* overscroll-behavior-x: contain aísla SOLO el eje horizontal:
cuando el carrusel topa con su borde, no salta a la página, pero
el wheel vertical sí pasa normalmente para mover la página. */
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.modelo__related-track::-webkit-scrollbar { display: none; }
.modelo__related-track > li {
flex: 0 0 calc(33.333% - clamp(6px, 0.55vw, 10px));
scroll-snap-align: start;
}
.modelo__related-card {
display: block;
text-decoration: none;
color: inherit;
transition: opacity 220ms ease;
}
.modelo__related-card:hover { opacity: 0.88; }
.modelo__related-card-media {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
background: transparent;
overflow: hidden;
}
.modelo__related-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: clamp(18px, 2vw, 36px);
box-sizing: border-box;
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modelo__related-card:hover .modelo__related-card-img { transform: scale(1.04); }
/* DGF01 — imagen más chica en productos relacionados (el render es muy grande). */
.modelo__related-card-img[src*="Grandes Formatos/DGF01/"] {
transform: scale(0.78);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Grandes Formatos/DGF01/"] {
transform: scale(0.82);
}
/* DGF69 — imagen más grande en productos relacionados (los renders son chicos). */
.modelo__related-card-img[src*="Grandes Formatos/DGF69/"] {
transform: scale(1.25);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Grandes Formatos/DGF69/"] {
transform: scale(1.3);
}
/* DGF13 — imagen más grande en productos relacionados. */
.modelo__related-card-img[src*="Grandes Formatos/DGF13/"] {
transform: scale(1.25);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Grandes Formatos/DGF13/"] {
transform: scale(1.3);
}
/* AURA — imagen un poco más chica en productos relacionados. */
.modelo__related-card-img[src*="Piezas Sueltas/AURA/"] {
transform: scale(0.85);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Piezas Sueltas/AURA/"] {
transform: scale(0.89);
}
/* DDE04 — imagen más grande en productos relacionados. */
.modelo__related-card-img[src*="Piezas Sueltas/DDE04/"] {
transform: scale(1.25);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Piezas Sueltas/DDE04/"] {
transform: scale(1.3);
}
.modelo__related-card-name {
display: block;
margin-top: 16px;
font-family: var(--sans);
font-size: clamp(15px, 1.05vw, 17px);
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
}
.modelo__related-card-sub {
display: block;
margin-top: 4px;
font-family: var(--sans);
font-size: clamp(13px, 0.9vw, 14px);
color: #6b6b6b;
line-height: 1.4;
}
.modelo__related-card-link {
display: inline-block;
margin-top: 14px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
color: var(--ink);
line-height: 1.2;
}
@media (max-width: 900px) {
.modelo__related-track > li { flex: 0 0 calc(50% - 6px); }
}
@media (max-width: 760px) {
/* Carrusel mobile estilo INSCA: 1 producto por pantalla, centrado, con
flechas a los lados encima del carrusel. */
.modelo__related {
position: relative;
padding: 0 clamp(16px, 4vw, 24px);
}
.modelo__related-header {
flex-direction: row;
align-items: center;
justify-content: flex-start; /* título a la IZQUIERDA */
text-align: left;
gap: 12px;
}
.modelo__related-title {
font-size: 20px;
text-align: left;
}
.modelo__related-controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
justify-content: space-between;
pointer-events: none;
gap: 0;
transform: translateY(-30%); /* centradas sobre la imagen */
padding: 0 8px;
}
.modelo__related-nav {
pointer-events: auto;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-color: rgba(10, 10, 10, 0.10);
box-shadow: 0 2px 12px rgba(10, 10, 10, 0.06);
-webkit-tap-highlight-color: transparent; /* sin highlight negro al tap */
}
.modelo__related-nav:active,
.modelo__related-nav:focus,
.modelo__related-nav:focus-visible {
background: rgba(255, 255, 255, 0.92); /* mantener bg blanco al press */
border-color: rgba(10, 10, 10, 0.10);
outline: none;
}
.modelo__related-nav svg {
width: 14px;
height: 14px;
}
.modelo__related-track {
gap: 0;
}
.modelo__related-track > li {
flex: 0 0 100%;
scroll-snap-align: center;
text-align: center;
}
.modelo__related-card-name,
.modelo__related-card-sub,
.modelo__related-card-link {
text-align: center;
display: block;
}
/* DCO03 — imagen más grande en productos relacionados (solo mobile) */
.modelo__related-card-img[src*="Corredizos/DCO03/"] {
transform: scale(1.25);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Corredizos/DCO03/"] {
transform: scale(1.3);
}
/* DLB11 — imagen más grande en productos relacionados (solo mobile) */
.modelo__related-card-img[src*="Libros/DLB11/"] {
transform: scale(1.3);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Libros/DLB11/"] {
transform: scale(1.35);
}
/* DGI05 — imagen más grande en productos relacionados (solo mobile) */
.modelo__related-card-img[src*="Giratorios/DGI05/"] {
transform: scale(1.6);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Giratorios/DGI05/"] {
transform: scale(1.65);
}
/* DGI07 — imagen más grande en productos relacionados (solo mobile) */
.modelo__related-card-img[src*="Giratorios/DGI07/"] {
transform: scale(1.6);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Giratorios/DGI07/"] {
transform: scale(1.65);
}
/* MALLA — imagen más grande en productos relacionados (solo mobile) */
.modelo__related-card-img[src*="Giratorios/MALLA/"] {
transform: scale(1.6);
}
.modelo__related-card:hover .modelo__related-card-img[src*="Giratorios/MALLA/"] {
transform: scale(1.65);
}
}
/* Spec list dentro del accordion de Especificaciones */
.modelo__spec-list {
list-style: none;
padding: 0;
margin: 0;
}
.modelo__spec-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid rgba(10, 10, 10, 0.08);
font-size: 14px;
gap: 16px;
}
.modelo__spec-list li:last-child { border-bottom: none; }
.modelo__spec-list span {
color: #888;
font-weight: 400;
}
.modelo__spec-list strong {
color: var(--ink);
font-weight: 500;
text-align: right;
}
/* Responsive */
@media (max-width: 1000px) {
.modelo__layout { grid-template-columns: 1fr; gap: 40px; }
.modelo__info { position: static; }
}
/* Título mobile solo aparece en pantallas chicas — desktop NO se toca */
.modelo__mobile-title { display: none; }
@media (max-width: 600px) {
/* Padding ajustado en mobile */
.modelo {
padding: calc(var(--header-h) + 24px) 16px clamp(60px, 8vh, 100px);
}
.modelo__breadcrumb {
font-size: 10px;
letter-spacing: 0.15em;
padding: 0;
margin-bottom: 14px;
}
/* Título mobile arriba de la galería — solo visible <=600px */
.modelo__mobile-title {
display: block;
font-family: var(--sans);
font-size: clamp(26px, 7vw, 34px);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink);
margin: 0 0 40px;
}
.modelo__mobile-title .modelo__title-pipe {
color: rgba(10, 10, 10, 0.25);
font-weight: 300;
margin: 0 6px;
}
/* En mobile ocultamos el "Por Stelium Koncept" del sidebar (solo ruido) */
.modelo__maker { display: none; }
/* Galería tipo carrusel horizontal swipeable con snap (estilo Apple/Aesop).
Cada card ocupa el 100% del ancho — la imagen se ve sola sin peek de la siguiente. */
.modelo__gallery {
display: flex;
flex-direction: row;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-padding: 0;
padding: 0 0 clamp(10px, 2vw, 14px);
margin: 0 -16px; /* edge-to-edge */
scrollbar-width: none;
}
.modelo__gallery::-webkit-scrollbar { display: none; }
.modelo__gallery-item,
.modelo__gallery-item--hero,
.modelo__gallery-item--half,
.modelo__gallery-item--wide {
flex: 0 0 100%;
aspect-ratio: 4 / 3;
grid-column: auto;
scroll-snap-align: center;
background: transparent; /* sin recuadro gris */
}
/* Imagen un poco más grande dentro del recuadro */
.modelo__gallery-img {
transform: scale(1.1);
}
.modelo__gallery-item--half .modelo__gallery-img:not(.modelo__gallery-img--cover) {
transform: scale(1.15);
}
.modelo__gallery-img--cover {
transform: scale(1);
}
/* MOBILE: Grandes Formatos — TODAS las imágenes (hero, half, wide) sin zoom y centradas
Usamos tanto data-base como src para máxima cobertura */
.modelo__gallery-img[src*="Grandes Formatos/"],
.modelo__gallery-img[data-base^="DGF"],
.modelo__gallery-img[data-base^="TOTEM"] {
transform: scale(1) !important;
object-fit: contain !important;
object-position: center center !important;
padding: 0 !important;
}
/* DGF50 — imagen 1 y 2 recorridas hacia la izquierda */
.modelo__gallery-img[data-base="DGF50-1"] {
transform: scale(0.9) !important;
object-position: 20% center !important;
}
.modelo__gallery-img[data-base="DGF50-2"] {
object-position: 15% center !important;
}
/* DGF13 — imagen 1 y 2 recorridas hacia la izquierda */
.modelo__gallery-img[data-base="DGF13-1"],
.modelo__gallery-img[data-base="DGF13-2"] {
object-position: 20% center !important;
}
/* DCO21 — imagen 3 un poco más chica para que no se corte arriba/abajo */
.modelo__gallery-img[data-base="DCO21-3"] {
transform: scale(0.85) !important;
}
/* DGR19 — todas las imágenes un poco más chicas en mobile */
.modelo__gallery-img[data-base^="DGR19"] {
transform: scale(0.85) !important;
}
/* DGR19 — card en la página de familia (Reclinables) un poco más chica */
.familia-grid__img[src*="Reclinables/DGR19/"] {
transform: scale(1) !important;
}
/* DGI04 — card en familia (Giratorios) recorrida a la izquierda en mobile */
.familia-grid__img[src*="Giratorios/DGI04/"] {
object-position: 35% center !important;
transform: translateX(-6%) !important;
}
/* DMC01 — imagen 1 y 2 un leve más chicas en mobile */
.modelo__gallery-img[data-base="DMC01-1"],
.modelo__gallery-img[data-base="DMC01-2"] {
transform: scale(0.9) !important;
}
/* DMC06 — imagen 2 y 3 un leve más chicas en mobile */
.modelo__gallery-img[data-base="DMC06-2"],
.modelo__gallery-img[data-base="DMC06-3"] {
transform: scale(0.9) !important;
}
/* DPS30 — imagen 2 un leve más chica en mobile */
.modelo__gallery-img[data-base="DPS30-2"] {
transform: scale(0.9) !important;
}
/* DLB08 — imagen 2 un poco más chica en mobile */
.modelo__gallery-img[data-base="DLB08-2"] {
transform: scale(0.9) !important;
}
/* MODULAR — imagen 1, 2 y 3 un poco más chicas en mobile */
.modelo__gallery-img[data-base="MODULAR-1"],
.modelo__gallery-img[data-base="MODULAR-2"],
.modelo__gallery-img[data-base="MODULAR-3"] {
transform: scale(0.9) !important;
}
/* DPS20 — imagen 1 y 2 más chicas en mobile */
.modelo__gallery-img[data-base="DPS20-1"],
.modelo__gallery-img[data-base="DPS20-2"] {
transform: scale(0.85) !important;
}
/* DPS21 — imagen 2 más chica en mobile */
.modelo__gallery-img[data-base="DPS21-2"] {
transform: scale(0.85) !important;
}
/* GRR — imagen 2 y 3 un leve más chicas en mobile */
.modelo__gallery-img[data-base="GRR-2"],
.modelo__gallery-img[data-base="GRR-3"] {
transform: scale(0.95) !important;
}
/* LVS — imagen 1 un poco más chica en mobile */
.modelo__gallery-img[data-base="LVS-1"] {
transform: scale(0.9) !important;
}
/* GSL — imagen 1, 2 y 3 un leve más chicas en mobile */
.modelo__gallery-img[data-base="GSL-1"],
.modelo__gallery-img[data-base="GSL-2"],
.modelo__gallery-img[data-base="GSL-3"] {
transform: scale(0.92) !important;
}
/* DLB17 (DOBLE) — imagen 2 más grande en mobile */
.modelo__gallery-img[data-base="DOBLE-2"] {
transform: scale(1.3) !important;
}
/* RHD39 — imagen 1 levemente más chica en mobile */
.modelo__gallery-img[data-base="RHD39-1"] {
transform: scale(0.9) !important;
}
/* DLB11 — imagen 3 recorrida a la izquierda en mobile */
.modelo__gallery-img[data-base="DLB11-3"] {
transform: translateX(-10%) scale(1.15) !important;
}
/* DPS30 — imagen 3 (vertical 4:5): el slot adopta su aspect-ratio
para que llene sin recortes y sin bandas blancas a los lados. */
.modelo__gallery-item--half:has(.modelo__gallery-img[data-base="DPS30-3"]) {
aspect-ratio: 4 / 5 !important;
}
.modelo__gallery-img[data-base="DPS30-3"] {
transform: scale(1) !important;
object-fit: cover !important;
object-position: center !important;
}
/* DGF69 — imagen 1 aún más grande; 2 y 3 también más grandes.
Selectores con :has() de mayor especificidad para ganar sobre las
reglas globales de Grandes Formatos en mobile. */
.modelo__gallery-item--hero:has(.modelo__gallery-img[data-base="DGF69-1"]) .modelo__gallery-img,
.modelo__gallery-item--half:has(.modelo__gallery-img[data-base="DGF69-1"]) .modelo__gallery-img {
transform: scale(1.8) !important;
}
.modelo__gallery-item--hero:has(.modelo__gallery-img[data-base="DGF69-2"]) .modelo__gallery-img,
.modelo__gallery-item--half:has(.modelo__gallery-img[data-base="DGF69-2"]) .modelo__gallery-img,
.modelo__gallery-item--hero:has(.modelo__gallery-img[data-base="DGF69-3"]) .modelo__gallery-img,
.modelo__gallery-item--half:has(.modelo__gallery-img[data-base="DGF69-3"]) .modelo__gallery-img,
.modelo__gallery-item--wide:has(.modelo__gallery-img[data-base="DGF69-3"]) .modelo__gallery-img {
transform: scale(1.6) !important;
}
/* DGF01 — imagen 1 un poco más chica; imagen 2 aún más chica.
:has() para mayor especificidad y vencer las reglas globales. */
.modelo__gallery-item--hero:has(.modelo__gallery-img[data-base="DGF01-1"]) .modelo__gallery-img,
.modelo__gallery-item--half:has(.modelo__gallery-img[data-base="DGF01-1"]) .modelo__gallery-img {
transform: scale(0.88) !important;
}
.modelo__gallery-item--hero:has(.modelo__gallery-img[data-base="DGF01-2"]) .modelo__gallery-img,
.modelo__gallery-item--half:has(.modelo__gallery-img[data-base="DGF01-2"]) .modelo__gallery-img {
transform: scale(0.8) !important;
}
/* DGF01 — imagen 3, 4 y 6: usan el mismo comportamiento natural que la
imagen 5 (height: auto, ancho 100%, sin crop). Quedan al mismo nivel
visual que la 5. */
/* Grandes Formatos — dejamos que la imagen defina su altura natural
(los renders varían entre 16:9, 4:3, 1:1 y portrait). Sin forzar
aspect-ratio evitamos la línea blanca de letterbox y mostramos la
imagen completa sin recortar. */
.modelo__gallery-item--hero:has(.modelo__gallery-img[src*="Grandes Formatos/"]),
.modelo__gallery-item--half:has(.modelo__gallery-img[src*="Grandes Formatos/"]),
.modelo__gallery-item--wide:has(.modelo__gallery-img[src*="Grandes Formatos/"]) {
aspect-ratio: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.modelo__gallery-item--hero:has(.modelo__gallery-img[src*="Grandes Formatos/"]) .modelo__gallery-img,
.modelo__gallery-item--half:has(.modelo__gallery-img[src*="Grandes Formatos/"]) .modelo__gallery-img,
.modelo__gallery-item--wide:has(.modelo__gallery-img[src*="Grandes Formatos/"]) .modelo__gallery-img {
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
object-fit: unset !important;
}
/* Items marcados como duplicados (mismo src que el anterior) se ocultan
en mobile — la marca la pone el JS automáticamente */
.modelo__gallery-item[data-duplicate] {
display: none;
}
/* Thumbnails píldora debajo de la galería — estilo INSCA: indican al
usuario que hay más imágenes y permiten saltar entre ellas.
Mobile: más chicos + scroll horizontal con snap para que entren todos
sin importar cuántos haya (4, 6, 8...) sin apelotonarse. */
.modelo__gallery-thumbs {
display: flex;
gap: 6px;
justify-content: center; /* centrados cuando caben */
padding: 6px 16px 4px;
margin: 0 -16px 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.modelo__gallery-thumbs::-webkit-scrollbar { display: none; }
.modelo__gallery-thumb {
flex: 0 0 auto;
width: 48px;
height: 34px;
scroll-snap-align: center;
border-radius: 999px;
overflow: hidden;
background: #fafafa;
border: 1px solid rgba(10, 10, 10, 0.12);
padding: 3px;
box-sizing: border-box;
cursor: pointer;
transition: border-color 220ms ease, opacity 220ms ease, transform 220ms ease;
opacity: 0.55;
}
.modelo__gallery-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Fotos (JPG/JPEG): llenan toda la cápsula con cover, sin padding */
.modelo__gallery-thumb:has(img[src$=".jpg"]),
.modelo__gallery-thumb:has(img[src$=".JPG"]),
.modelo__gallery-thumb:has(img[src$=".jpeg"]) {
padding: 0;
}
.modelo__gallery-thumb img[src$=".jpg"],
.modelo__gallery-thumb img[src$=".JPG"],
.modelo__gallery-thumb img[src$=".jpeg"] {
object-fit: cover;
}
.modelo__gallery-thumb.is-active {
opacity: 1;
border-color: var(--ink);
}
.modelo__variants { grid-template-columns: repeat(4, 1fr); }
}
/* ============================================================
MEGAMENU — click en "Productos" abre dropdown fullscreen blanco
============================================================ */
.megamenu {
position: fixed;
top: 0; left: 0; right: 0;
max-height: 92vh;
overflow-y: auto;
background: #ffffff;
color: var(--ink);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 350ms ease,
visibility 0s linear 350ms;
z-index: 199;
display: flex;
flex-direction: column;
box-shadow: none;
}
/* Backdrop sin tinte — invisible */
.megamenu::after {
content: '';
position: fixed;
top: 92vh; left: 0; right: 0; bottom: 0;
background: transparent;
opacity: 0;
transition: opacity 320ms ease;
pointer-events: none;
}
body.has-megamenu-open .megamenu::after {
opacity: 1;
pointer-events: auto;
}
body.has-megamenu-open .megamenu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 350ms ease,
visibility 0s linear 0s !important;
}
body.has-megamenu-open .site-header {
background: #ffffff !important;
transition: background 240ms ease;
}
body.has-megamenu-open .site-header .brand,
body.has-megamenu-open .site-header .primary-nav a,
body.has-megamenu-open .site-header .header-icon-btn,
body.has-megamenu-open .site-header .header-fav-btn { color: var(--ink) !important; }
body.has-megamenu-open .site-header .brand__logo { filter: none !important; }
body.has-megamenu-open .site-header .cta-pill {
color: var(--ink) !important;
border-color: rgba(10,10,10,0.55) !important;
}
body.has-megamenu-open { overflow: hidden; }
.megamenu__close {
position: absolute;
top: clamp(14px, 1.8vw, 22px);
right: clamp(20px, 3vw, 40px);
width: 40px; height: 40px;
background: transparent; border: none; cursor: pointer;
color: var(--ink); z-index: 2;
display: flex; align-items: center; justify-content: center;
transition: opacity 200ms ease;
}
.megamenu__close:hover { opacity: 0.6; }
.megamenu__inner {
flex: 1;
display: grid;
grid-template-columns: 1fr clamp(260px, 22vw, 340px);
gap: 0;
max-width: 1600px;
width: 100%;
margin: 0 auto;
/* Más padding-top para bajar el contenido — más aire bajo el header */
padding: calc(var(--header-h) + clamp(40px, 5.5vh, 80px)) clamp(20px, 3vw, 40px) clamp(20px, 3vh, 36px);
box-sizing: border-box;
align-items: start;
overflow: hidden;
}
.megamenu__collections {
padding-right: clamp(20px, 2.4vw, 36px);
}
.megamenu__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 2.2vw, 40px);
width: 100%;
}
.megamenu__cols .megamenu__list {
display: flex !important;
flex-direction: column;
gap: clamp(10px, 1vw, 16px) !important;
margin: 0;
padding: 0;
list-style: none;
}
.megamenu__cols .megamenu__list > li {
break-inside: avoid;
}
.megamenu__collections {
padding-left: clamp(24px, 3vw, 56px); /* empuja el contenido a la derecha */
}
.megamenu__col-title {
display: block;
font-family: var(--sans);
font-size: clamp(15px, 1.15vw, 18px); /* más grande */
font-weight: 600; /* más bold */
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink); /* negro */
margin: 0 0 clamp(22px, 2.4vw, 32px);
}
.megamenu__list,
.megamenu__sublist {
list-style: none !important; /* sin bullets en ningún nivel */
padding: 0;
margin: 0;
display: flex; flex-direction: column;
}
.megamenu__list { gap: clamp(12px, 1.2vw, 18px); }
.megamenu__list > li,
.megamenu__sublist > li {
display: block;
list-style: none !important;
}
.megamenu__list > li::marker,
.megamenu__sublist > li::marker { content: '' !important; }
/* Familia (parent) — más grande y bold */
.megamenu__list a.megamenu__family {
display: inline-block;
font-family: var(--sans);
color: var(--ink); text-decoration: none;
font-size: clamp(14px, 1.05vw, 18px);
font-weight: 600;
letter-spacing: -0.015em;
margin-bottom: 3px;
line-height: 1.25;
transition: opacity 200ms ease;
}
.megamenu__list a.megamenu__family:hover,
.megamenu__list a.megamenu__family.is-active { opacity: 0.55; }
/* Sublista de SKUs debajo de cada familia */
.megamenu__sublist {
list-style: none;
padding: 0;
margin: 4px 0 0;
display: flex; flex-direction: column;
gap: 4px;
}
/* Variante en 2 columnas internas para familias con muchos SKUs — pegadas */
.megamenu__sublist--two-col {
display: grid;
grid-template-columns: auto auto;
justify-content: start;
column-gap: 14px;
row-gap: 3px;
}
.megamenu__sublist a {
font-family: var(--sans);
color: #6b6b6b; text-decoration: none;
font-size: clamp(12px, 0.88vw, 14px);
font-weight: 400;
letter-spacing: 0;
transition: color 200ms ease;
width: max-content;
line-height: 1.4;
display: block;
padding: 0;
}
.megamenu__sublist a:hover,
.megamenu__sublist a.is-active { color: var(--ink); }
.megamenu__cta {
display: inline-flex; align-items: center;
margin-top: clamp(14px, 1.6vw, 22px);
font-family: var(--sans);
color: var(--ink); text-decoration: none;
font-size: 13px; font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-bottom: 0; /* sin subrayado */
padding-bottom: 4px;
transition: opacity 200ms ease, gap 250ms cubic-bezier(0.22, 1, 0.36, 1);
width: max-content;
}
.megamenu__cta:hover { opacity: 0.65; }
/* Featured panel — right side, todo blanco, separado por línea vertical */
.megamenu__featured {
position: relative;
padding-left: clamp(20px, 2.4vw, 36px);
border-left: 0;
}
.megamenu__featured-title {
display: block;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink); /* negro, como pidió */
margin: 0 0 clamp(22px, 2.4vw, 32px);
}
.megamenu__featured-track {
position: relative;
width: 100%;
max-width: 340px; /* imagen más grande */
}
.megamenu__featured.has-preview .megamenu__featured-card.is-active {
opacity: 0;
}
.megamenu__featured-card {
position: absolute;
inset: 0;
display: flex; flex-direction: column;
text-decoration: none; color: var(--ink);
opacity: 0;
transition: opacity 600ms ease;
pointer-events: none;
}
.megamenu__featured-card.is-active {
position: relative;
opacity: 1;
pointer-events: auto;
}
.megamenu__featured-media {
width: 100%;
aspect-ratio: 4/5;
background: #ffffff;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.megamenu__featured-media img {
width: 100%; height: 100%;
object-fit: contain; /* nunca corta la imagen */
}
.megamenu__featured-name {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
}
.megamenu__featured-link {
display: inline-block;
margin-top: 4px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8b8b8b;
transition: color 200ms ease;
}
/* Badge "Nuevo" en rojo — se aplica vía JS aleatoriamente a algunos destacados */
.megamenu__featured-badge {
display: inline-block;
margin-top: 6px;
margin-right: 8px;
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #d62828; /* rojo */
background: rgba(214, 40, 40, 0.08);
padding: 3px 8px;
border-radius: 3px;
vertical-align: middle;
}
.megamenu__featured-card:hover .megamenu__featured-link { color: var(--ink); }
/* Preview image (cuando se hover una familia) — sobrepone el featured */
.megamenu__preview-wrap {
position: absolute;
top: 0; left: 0; right: 0;
background: #ffffff;
width: 100%;
aspect-ratio: 4/5; /* mismo tamaño que .megamenu__featured-media */
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.megamenu__preview { width: 100%; height: 100%; object-fit: contain !important; }
.megamenu__preview-name {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
color: var(--ink);
opacity: 0;
transition: opacity 220ms ease;
pointer-events: none;
}
.megamenu__featured.has-preview .megamenu__preview-name {
opacity: 1;
}
.megamenu__preview-wrap.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 320ms ease;
}
.megamenu__preview { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .megamenu { display: none; } }
/* ============================================================
LIGHT TOGGLE — botón de prender/apagar iluminación en RHD39
============================================================ */
.modelo__light-toggle {
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: 1.5px solid rgba(10, 10, 10, 0.18);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
margin-left: 8px;
transition: background 250ms ease, border-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
.modelo__light-toggle:hover {
border-color: var(--ink);
}
.modelo__light-toggle.is-on {
background: #ffd54a;
border-color: #ffd54a;
color: #2a1d00;
box-shadow: 0 0 0 4px rgba(255, 213, 74, 0.18),
0 0 18px rgba(255, 213, 74, 0.4);
}
/* Switch interno se desplaza horizontalmente con feedback tactil (estilo apagador) */
.modelo__light-toggle-switch {
transition: x 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* spring bounce horizontal */
}
.modelo__light-toggle.is-on .modelo__light-toggle-switch {
x: 12;
}
/* Press feedback — el botón se "hunde" como un apagador físico */
.modelo__light-toggle:active {
transform: scale(0.92);
transition: transform 80ms ease-out;
}
.modelo__light-toggle {
transition: background 250ms ease, border-color 250ms ease, color 250ms ease, box-shadow 250ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* RHD39 — render grande en family, bajar zoom */
.familia-grid__img[src*="Iluminación/APAGADORES/"] {
transform: scale(1);
}
/* RHD39 imagen 2 (pair): se corta, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="RHD39-2"] {
transform: scale(1) !important;
}
/* DPS15 en family — bajar zoom */
.familia-grid__img[src*="Piezas Sueltas/DDE06/"] {
transform: scale(1);
}
/* Mobiliario — todas las imágenes landscape, sin zoom para que entren completas */
.familia-grid__img[src*="Mobiliario/"] {
transform: scale(1);
}
/* DPS15 imagen 2 (pair): muy grande, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DPS15-2"] {
transform: scale(1) !important;
}
/* DMC02 y DMC07 imágenes 2 y 3 (pair): muy grandes, bajar escala */
.modelo__gallery-item--half .modelo__gallery-img[data-base="DMC02-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DMC02-3"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DMC07-2"],
.modelo__gallery-item--half .modelo__gallery-img[data-base="DMC07-3"] {
transform: scale(1) !important;
}
/* ============================================================
AVISO LEGAL — página de texto legal estilo editorial
============================================================ */
.legal {
background: #ffffff;
padding: calc(var(--header-h) + clamp(80px, 12vh, 160px)) var(--side-pad) clamp(80px, 10vh, 140px);
color: var(--ink);
}
.legal__container {
max-width: 820px;
margin: 0 auto;
font-family: var(--sans);
}
.legal__header {
border-bottom: 1px solid rgba(10, 10, 10, 0.12);
padding-bottom: clamp(28px, 4vh, 48px);
margin-bottom: clamp(36px, 5vh, 56px);
}
.legal__eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #6b6b6b;
margin: 0 0 14px;
}
.legal__title {
font-size: clamp(38px, 4.5vw, 56px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--ink);
margin: 0 0 18px;
}
.legal__date {
font-size: 14px;
color: #6b6b6b;
margin: 0;
}
.legal__section {
margin: 0 0 clamp(32px, 4vh, 48px);
}
.legal__h2 {
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink);
margin: 0 0 18px;
}
.legal__h3 {
font-size: clamp(14.5px, 1.1vw, 16px);
font-weight: 600;
letter-spacing: -0.003em;
color: var(--ink);
margin: 22px 0 10px;
}
.legal__section p {
font-size: clamp(14px, 1vw, 15.5px);
line-height: 1.65;
color: #2a2a2a;
margin: 0 0 14px;
}
.legal__section p:last-child { margin-bottom: 0; }
.legal__section a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.legal__section strong {
font-weight: 600;
color: var(--ink);
}
.legal__cta {
appearance: none;
border: 1px solid var(--ink);
background: var(--ink);
color: #fff;
font: inherit;
font-weight: 500;
font-size: clamp(13.5px, 1vw, 14.5px);
letter-spacing: -0.005em;
padding: 10px 18px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
margin: 2px 0 6px;
}
.legal__cta:hover { background: transparent; color: var(--ink); }
.legal__cta:active { transform: scale(0.98); }
.legal__list {
margin: 8px 0 14px;
padding-left: 22px;
font-size: clamp(14px, 1vw, 15.5px);
line-height: 1.65;
color: #2a2a2a;
}
.legal__list li { margin-bottom: 6px; }
/* Datos identificativos como tabla minimal */
.legal__data {
margin: 0;
padding: 18px 0 0;
display: grid;
gap: 12px;
}
.legal__data > div {
display: grid;
grid-template-columns: clamp(140px, 22%, 200px) 1fr;
gap: 16px;
align-items: baseline;
padding-bottom: 12px;
border-bottom: 1px solid rgba(10, 10, 10, 0.06);
font-size: clamp(14px, 1vw, 15px);
line-height: 1.55;
}
.legal__data > div:last-child { border-bottom: none; padding-bottom: 0; }
.legal__data dt {
color: #6b6b6b;
font-weight: 400;
margin: 0;
}
.legal__data dd {
color: var(--ink);
font-weight: 500;
margin: 0;
}
.legal__contact {
background: #fafafa;
padding: 18px 22px;
border-left: 2px solid var(--ink);
margin: 14px 0 0 !important;
line-height: 1.7 !important;
}
@media (max-width: 600px) {
.legal__data > div { grid-template-columns: 1fr; gap: 4px; }
}
/* ============================================================
PÁGINA 404 — error "página no encontrada"
============================================================ */
.page-404__main {
min-height: calc(100vh - var(--header-h) - 80px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--header-h) 24px 60px;
background: #ffffff;
}
.page-404__hero {
max-width: 720px;
text-align: center;
}
.page-404__eyebrow {
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6b6b6b;
margin: 0 0 18px;
}
.page-404__title {
font-family: var(--sans);
font-size: clamp(40px, 6vw, 76px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 24px;
}
.page-404__lede {
font-family: var(--sans);
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.55;
color: #4a4a4a;
max-width: 580px;
margin: 0 auto 36px;
}
.page-404__ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.page-404__cta {
display: inline-flex;
align-items: center;
padding: 0 22px;
height: 46px;
border-radius: 999px;
border: 1px solid #e0e0e0;
background: #fff;
color: var(--ink);
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition:
background 250ms ease,
border-color 250ms ease,
color 250ms ease;
}
.page-404__cta:hover {
background: #f5f5f5;
border-color: #c0c0c0;
}
.page-404__cta--primary {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.page-404__cta--primary:hover {
background: #1a1a1a;
border-color: #1a1a1a;
color: #fff;
}
/* ============================================================
NOSOTROS — página "Nuestra historia" (estilo Allbirds + Left Coast)
============================================================ */
html.page-nosotros,
body.page-nosotros,
.page-nosotros .nosotros,
.page-nosotros .nosotros-pillars,
.page-nosotros .nosotros-hero,
.page-nosotros .nosotros-process,
.page-nosotros .nosotros-historia,
.page-nosotros main {
background: #ffffff !important;
}
/* HERO — foto a full-bleed con padding lateral y esquinas redondeadas */
.nosotros-hero {
padding: calc(var(--header-h) + clamp(12px, 1.5vw, 24px))
clamp(12px, 1.8vw, 28px)
0;
}
.nosotros-hero__frame {
position: relative;
overflow: hidden;
border-radius: clamp(14px, 1.6vw, 22px);
aspect-ratio: 16 / 9;
background: #1a1a1a;
}
@media (max-width: 760px) {
/* Mobile: hero full-bleed (sin padding lateral, sin border-radius, pegado al header) */
.nosotros-hero {
padding: 0;
}
.nosotros-hero__frame {
aspect-ratio: 3 / 4;
border-radius: 0;
}
}
.nosotros-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02); /* sutil zoom para evitar borde fino */
}
.nosotros-hero__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 60px);
/* Velo muy sutil para garantizar legibilidad del blanco */
background: rgba(0, 0, 0, 0.12);
color: #ffffff;
}
.nosotros-hero__eyebrow {
font-family: var(--sans);
font-size: clamp(11px, 0.85vw, 13px);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #ffffff;
margin: 0 0 clamp(18px, 2vw, 28px);
}
.nosotros-hero__title {
font-family: var(--sans);
font-size: clamp(22px, 2.4vw, 36px);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.005em;
color: #ffffff;
margin: 0;
max-width: 28ch;
}
/* Override del reveal-letters dentro del hero de Nosotros:
las letras nacen blancas (no azules) y se quedan blancas. */
.nosotros-hero .reveal-letters .char,
.nosotros-hero .reveal-letters.is-visible .char {
color: #ffffff;
}
/* ============================================================
NOSOTROS — sección 2: 4 stat cards (estilo INSCA / referencia)
============================================================ */
.nosotros-pillars {
padding: clamp(36px, 4.5vw, 70px) clamp(12px, 1.8vw, 28px) clamp(40px, 5vw, 80px);
}
.nosotros-pillars__title {
font-family: var(--sans);
font-size: clamp(28px, 3.2vw, 46px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
text-align: left;
margin: 0 0 clamp(24px, 2.6vw, 44px); /* espacio compacto a los cards */
padding: 0 clamp(4px, 0.5vw, 12px); /* alineado con el grid */
}
.nosotros-pillars__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 1.4vw, 22px);
}
@media (max-width: 900px) {
/* Mobile: 2x2 — 2 arriba, 2 abajo (no colapsa a 1 columna) */
.nosotros-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Stat card — flip al hover. Sombras visibles para destacar sobre fondo blanco. */
.stat-card {
position: relative;
perspective: 1400px;
}
/* DESKTOP — 3D flip al hover */
@media (hover: hover) and (pointer: fine) {
.stat-card {
aspect-ratio: 1.2 / 1; /* más ancho que alto = compacto */
}
.stat-card__inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
transform-style: preserve-3d;
}
.stat-card:hover .stat-card__inner {
transform: rotateY(180deg);
}
.stat-card__face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: clamp(16px, 1.3vw, 22px);
padding: clamp(14px, 1.4vw, 22px);
display: flex;
flex-direction: column;
gap: clamp(4px, 0.5vw, 8px);
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 10px 30px -12px rgba(0, 0, 0, 0.18);
}
.stat-card__face--back {
transform: rotateY(180deg);
justify-content: center;
}
.stat-card--dark .stat-card__face--front {
background: #0a0a0a;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.06);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 12px 36px -10px rgba(0, 0, 0, 0.28);
}
.stat-card--dark .stat-card__face--front .stat-card__heading,
.stat-card--dark .stat-card__face--front .stat-card__number,
.stat-card--dark .stat-card__face--front .stat-card__unit {
color: #ffffff;
}
}
/* MOBILE / TOUCH — sin flip: stack vertical de ambas caras dentro de la card.
Las 4 cards comparten la misma altura usando grid-auto-rows: 1fr en el padre. */
@media (hover: none), (pointer: coarse) {
.nosotros-pillars__grid {
grid-auto-rows: 1fr;
}
.stat-card,
.stat-card__inner {
height: 100%;
}
.stat-card__inner {
display: flex;
flex-direction: column;
border-radius: clamp(16px, 1.5vw, 22px);
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 8px 22px -12px rgba(0, 0, 0, 0.12);
}
.stat-card__face {
padding: clamp(16px, 4vw, 22px);
display: flex;
flex-direction: column;
gap: clamp(6px, 1.4vw, 10px);
}
.stat-card__face--back {
padding-top: 0;
padding-bottom: clamp(18px, 4vw, 22px);
}
.stat-card--dark .stat-card__inner {
background: #0a0a0a;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.06);
}
.stat-card--dark .stat-card__face--back {
background: #ffffff;
color: var(--ink);
}
.stat-card--dark .stat-card__face--back .stat-card__desc {
color: #6b6b6b;
}
}
/* Contenido del front: icono + métrica + heading, todo centrado vertical y horizontal */
.stat-card__face--front {
align-items: center;
justify-content: center;
text-align: center;
}
.stat-card__face--back {
align-items: center;
justify-content: center;
text-align: center;
}
/* Icono superior — línea fina minimal, con efecto draw al revelar */
.stat-card__icon {
color: inherit;
margin-bottom: clamp(12px, 1.2vw, 18px);
opacity: 0.92;
flex-shrink: 0;
}
/* Estado inicial: líneas invisibles (dasharray=1, offset=1) */
.stat-card__icon path,
.stat-card__icon line,
.stat-card__icon circle,
.stat-card__icon rect {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
/* Estado final: dibuja la línea cuando la card es visible.
Respeta el --rev-delay de cada card para que el draw siga el stagger. */
.stat-card.reveal.is-visible .stat-card__icon path,
.stat-card.reveal.is-visible .stat-card__icon line,
.stat-card.reveal.is-visible .stat-card__icon circle,
.stat-card.reveal.is-visible .stat-card__icon rect {
animation: statIconDraw 1100ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
animation-delay: calc(var(--rev-delay, 0ms) + 450ms);
}
@keyframes statIconDraw {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
/* Si el usuario prefiere reduced-motion, no animar */
@media (prefers-reduced-motion: reduce) {
.stat-card__icon path,
.stat-card__icon line,
.stat-card__icon circle,
.stat-card__icon rect {
stroke-dasharray: none;
stroke-dashoffset: 0;
}
}
/* Métrica grande (número + unidad) */
.stat-card__metric {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--sans);
line-height: 0.95;
letter-spacing: -0.025em;
}
.stat-card__number {
font-size: clamp(32px, 3.4vw, 52px);
font-weight: 600;
color: inherit;
}
.stat-card__unit {
font-size: clamp(13px, 1.1vw, 18px);
font-weight: 500;
color: inherit;
}
.stat-card--dark .stat-card__number,
.stat-card--dark .stat-card__unit {
color: #ffffff;
}
/* Heading: subtítulo pequeño debajo del número o título medio */
.stat-card__heading {
font-family: var(--sans);
font-size: clamp(12px, 0.85vw, 14px);
font-weight: 500;
color: inherit;
line-height: 1.35;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: clamp(6px, 0.6vw, 10px);
opacity: 0.78;
}
.stat-card__heading--big {
font-size: clamp(18px, 1.7vw, 24px);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
text-transform: none;
opacity: 1;
margin-top: 0;
}
/* Descripción en el back */
.stat-card__desc {
font-family: var(--sans);
font-size: clamp(13px, 0.95vw, 15px);
line-height: 1.5;
color: #4a4a4a;
margin: 0;
max-width: 24ch;
}
/* ============================================================
NOSOTROS — sección 3: PROCESO (scroll-jacking real estilo Apple)
La SECCIÓN tiene altura virtual ≈ 4 viewports. Dentro hay un
bloque .nosotros-process__pin con position:sticky;top:0;height:100vh
que se queda fijo en pantalla mientras el usuario scrollea por
la altura virtual. JS calcula el progreso del scroll y cambia
el stage activo — la pantalla no se mueve, solo cambia la
imagen + qué paso está iluminado.
============================================================ */
.nosotros-process {
/* Altura virtual ajustada — cada stage ocupa ~90vh de scroll para que
el usuario tenga tiempo de ver cada imagen antes de pasar al siguiente. */
height: 360vh;
position: relative;
padding: 0;
background: #ffffff;
}
/* Mobile: ver el bloque de "carrusel horizontal" más abajo en el archivo. */
/* El bloque que se queda anclado en pantalla — esto es LO ÚNICO que el
usuario ve durante todo el scroll dentro de la sección. */
.nosotros-process__pin {
position: sticky;
top: var(--header-h, 64px);
height: calc(100vh - var(--header-h, 64px));
display: flex;
align-items: stretch;
justify-content: center;
overflow: visible;
}
.nosotros-process__inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: clamp(20px, 3vh, 40px) clamp(12px, 1.8vw, 28px) clamp(8px, 1.5vh, 18px);
display: flex;
flex-direction: column;
gap: clamp(10px, 1.5vh, 20px);
height: 100%;
justify-content: flex-start;
}
.nosotros-process__header {
flex-shrink: 0;
}
.nosotros-process__eyebrow {
font-family: var(--sans);
font-size: clamp(11px, 0.85vw, 13px);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6b6b6b;
margin: 0 0 clamp(8px, 0.8vw, 14px);
}
.nosotros-process__title {
font-family: var(--sans);
font-size: clamp(26px, 3.8vw, 56px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0;
max-width: none;
}
/* Override del reveal-letters para el título del proceso.
Las letras aparecen una por una; las del primer span en NEGRO,
las del segundo ("punto de venta") en gris más fuerte. */
/* Estado inicial: TODAS las letras invisibles en gris oscuro */
.nosotros-process__title .reveal-letters .char {
color: rgba(0, 0, 0, 0.42);
}
/* Parte fuerte ("De la idea al") — termina en NEGRO sólido */
.nosotros-process__title-strong.is-visible .char {
color: var(--ink);
}
/* Parte suave ("punto de venta") — con el mismo gradiente verde que "construyendo experiencias." */
.nosotros-process__title-soft .char,
.nosotros-process__title-soft.is-visible .char {
background-image: linear-gradient(90deg, #3d5e54 0%, #4a7062 25%, #5a8576 50%, #6e9587 75%, #8aaba0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Stagger continuo entre los 2 spans: el segundo arranca después de las
10 letras del primero ("De la idea al" sin contar espacios = 10). */
.nosotros-process__title-soft .char {
transition-delay: calc((var(--n, 0) + 10) * 16ms);
}
.nosotros-process__title-soft.is-visible .char {
transition-delay:
calc((var(--n, 0) + 10) * 16ms),
calc((var(--n, 0) + 10) * 16ms + 200ms),
calc((var(--n, 0) + 10) * 16ms);
}
/* Layout interno: 2 columnas — IZQ steps siempre visibles / DER imagen
La columna derecha ocupa la mayor parte del ancho para que el render
sea bien grande. Gap chico para que el texto quede pegado a la imagen.
align-items: start → la imagen se posiciona arriba (más espacio abajo). */
.nosotros-process__layout {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
gap: clamp(8px, 0.8vw, 16px);
align-items: start;
flex: 1;
min-height: 0;
}
/* ===== IZQUIERDA — solo el step activo es visible (estilo Allbirds) ===== */
.nosotros-process__steps {
list-style: none;
margin: 0;
padding: 0;
position: relative;
height: 100%;
min-height: 220px;
/* Sube levemente el bloque de texto para alinear visualmente con la imagen */
transform: translateY(calc(-1 * clamp(40px, 7vh, 90px)));
}
/* Cada step se posiciona en el mismo lugar y solo el activo se ve;
los demás están con opacity 0 (cross-fade entre uno y otro). */
.process-step {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(12px, 1.4vh, 20px);
padding: 0 clamp(8px, 1.5vw, 24px);
opacity: 0;
pointer-events: none;
transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step.is-active {
opacity: 1;
pointer-events: auto;
}
/* Título del step — usa la misma tipografía que el resto de la página
(no uppercase, sin letter-spacing amplio). */
.process-step__title {
font-family: var(--sans);
font-size: clamp(22px, 2.4vw, 36px);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.15;
margin: 0;
}
/* Descripción debajo, mismo estilo de body del resto de la página */
.process-step__desc {
font-family: var(--sans);
font-size: clamp(15px, 1.1vw, 19px);
font-weight: 400;
line-height: 1.55;
letter-spacing: -0.005em;
color: #3a3a3a;
margin: 0;
max-width: none;
}
/* ===== DERECHA — contenedor de la imagen activa + dots verticales ===== */
.nosotros-process__sticky {
display: flex;
align-items: flex-start;
justify-content: center;
gap: clamp(16px, 1.6vw, 28px);
height: 100%;
min-height: 0;
align-self: stretch;
margin-top: 0;
overflow: visible;
}
/* Dots verticales — estilo Allbirds: círculos pequeños, activo relleno.
order: 2 los manda al final del flex (a la derecha del stack). */
.process-dots {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(10px, 1.1vw, 16px);
flex-shrink: 0;
order: 2;
align-self: flex-start;
margin-top: clamp(20px, 5vh, 70px);
margin-right: clamp(12px, 2vw, 36px);
}
.process-dots__dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid #1a1a1a;
background: transparent;
transition: background 350ms ease, transform 350ms ease;
}
.nosotros-process[data-active-stage="1"] .process-dots__dot[data-dot="1"],
.nosotros-process[data-active-stage="2"] .process-dots__dot[data-dot="2"],
.nosotros-process[data-active-stage="3"] .process-dots__dot[data-dot="3"],
.nosotros-process[data-active-stage="4"] .process-dots__dot[data-dot="4"] {
background: #1a1a1a;
}
.process-stack {
position: relative;
height: 78vh;
max-height: 78vh;
aspect-ratio: 3 / 4;
margin: 0 auto;
align-self: flex-start;
/* Translate negativo para subir SOLO la imagen sin afectar otros elementos */
transform: translateY(calc(-1 * clamp(120px, 22vh, 280px)));
}
/* Cada imagen es un frame absoluto superpuesto. Transición tipo Allbirds:
slide vertical — el frame que sale se va hacia arriba, el que entra
sube desde abajo. */
.process-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: clamp(12px, 1.2vw, 18px);
overflow: hidden;
background: #ffffff;
isolation: isolate;
opacity: 0;
transform: translateY(100%); /* default: aún no llega, está debajo */
transition:
transform 800ms cubic-bezier(0.65, 0, 0.35, 1),
opacity 500ms cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
will-change: transform, opacity;
}
.process-frame.is-active {
opacity: 1;
transform: translateY(0);
}
.process-frame.is-passed {
opacity: 0;
transform: translateY(-100%); /* ya pasó: se fue hacia arriba */
}
.process-frame.is-active {
opacity: 1;
pointer-events: auto;
}
.process-frame__img,
.process-frame__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Video de Logística: ya re-encodeado en portrait 3:4 → cover llena
el frame perfectamente sin cropping. */
.process-frame__video {
object-fit: cover;
background: #ffffff;
}
/* Instalación (stage 4) usa contain para mostrar la imagen completa
sin recortar. El fondo blanco del JPG se mezcla con el del frame.
Scale 0.93 = un poquito más chica que el frame para que respire. */
.process-frame[data-process-media="4"] .process-frame__img {
object-fit: contain;
background: #ffffff;
transform: scale(0.93);
transform-origin: center center;
}
/* Mantener el scale aunque se aplique is-revealed (que pone transform: scale(1)) */
.process-frame[data-process-media="4"].is-revealed .process-frame__img {
transform: scale(0.93);
}
/* Fabricación (stage 2): la imagen es landscape 5:4 (1402×1122).
Para que se vea GRANDE sin recortar, el frame mismo se vuelve
landscape 5:4 (matching la proporción del JPG) cuando esta fase
está activa. Así la imagen llena el frame al 100%.
IMPORTANTE: solo en desktop — en mobile el .process-stack es un
carrusel horizontal y este cambio rompe la mecánica. */
@media (min-width: 901px) {
.process-frame[data-process-media="2"] .process-frame__img {
object-fit: cover;
background: #ffffff;
}
.nosotros-process[data-active-stage="2"] .process-stack {
aspect-ratio: 1402 / 1122;
height: auto;
width: min(70vh, 100%);
max-height: 78vh;
}
}
/* En mobile, la imagen de Fabricación usa contain (la misma estrategia
de Instalación) — frame 3:4 portrait, imagen landscape: se ve completa
sin recortar, con espacio blanco arriba/abajo que se mezcla con el fondo */
@media (max-width: 900px) {
.process-frame[data-process-media="2"] .process-frame__img {
object-fit: contain;
background: #ffffff;
}
}
/* Encuadre de líneas (overlay SVG) — se dibuja PRIMERO sobre la imagen oculta */
.process-frame__grid {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: visible;
}
.pb-line {
fill: none;
stroke: rgba(20, 20, 20, 0.6);
stroke-width: 1;
vector-effect: non-scaling-stroke;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: opacity 600ms ease 1700ms;
opacity: 1;
}
.pb-line--outer {
stroke: rgba(20, 20, 20, 0.8);
stroke-width: 1.4;
}
/* Cuando el frame está activo (entró al viewport o el step lo activó),
las líneas se dibujan secuencialmente y luego la imagen se descubre. */
.process-frame.is-revealed .pb-line {
animation: pbLineDraw 1000ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.process-frame.is-revealed .pb-line:nth-child(1) { animation-delay: 0ms; }
.process-frame.is-revealed .pb-line:nth-child(2) { animation-delay: 140ms; }
.process-frame.is-revealed .pb-line:nth-child(3) { animation-delay: 220ms; }
.process-frame.is-revealed .pb-line:nth-child(4) { animation-delay: 320ms; }
.process-frame.is-revealed .pb-line:nth-child(5) { animation-delay: 420ms; }
@keyframes pbLineDraw {
to { stroke-dashoffset: 0; }
}
/* Imagen / Video revela cuando is-revealed (clip-path en ambos,
transform sólo en img — el video mantiene su scale(1.5) custom). */
.process-frame.is-revealed .process-frame__img,
.process-frame.is-revealed .process-frame__video {
clip-path: inset(0 0 0 0);
}
.process-frame.is-revealed .process-frame__img {
transform: scale(1);
}
/* Líneas interiores se desvanecen al terminar; contorno externo queda sutil */
.process-frame.is-revealed .pb-line:not(.pb-line--outer) {
opacity: 0;
}
.process-frame.is-revealed .pb-line--outer {
opacity: 0.25;
}
/* Reduce motion: todo visible al instante */
@media (prefers-reduced-motion: reduce) {
.process-frame__img,
.process-frame__video {
clip-path: none;
transform: none;
transition: none;
}
.pb-line {
stroke-dasharray: none;
stroke-dashoffset: 0;
opacity: 0.25;
transition: none;
}
.process-frame.is-revealed .pb-line:not(.pb-line--outer) { opacity: 0; }
.process-step {
min-height: 0 !important;
opacity: 1 !important;
}
.diseno-svg path {
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
animation: none !important;
}
}
/* ============================================================
FLIPBOOK (Fabricación) — 3 imágenes pasan rápido al activarse
para simular la rotación 3D del exhibidor. La última (DGF83-3)
queda como imagen final del stage 2.
============================================================ */
.process-frame--flipbook {
background: #ffffff;
}
.flipbook__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
/* Aseguramos que se vea cada frame con un crisp swap, no fade lento */
transition: opacity 80ms linear;
}
/* Al activarse el frame 2 (is-revealed), las imágenes 1 y 2 hacen flash
secuencial muy rápido (efecto rotación), y la 3 se queda. */
.process-frame--flipbook.is-revealed .flipbook__img[data-flip="1"] {
animation: flipFlash 320ms ease-out forwards;
animation-delay: 100ms;
}
.process-frame--flipbook.is-revealed .flipbook__img[data-flip="2"] {
animation: flipFlash 320ms ease-out forwards;
animation-delay: 320ms;
}
.process-frame--flipbook.is-revealed .flipbook__img[data-flip="3"] {
animation: flipFinal 500ms ease-out forwards;
animation-delay: 540ms;
}
/* Flash: aparece, se queda un poco, desaparece (cede el frame al siguiente) */
@keyframes flipFlash {
0% { opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}
/* Final: aparece y se queda */
@keyframes flipFinal {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* En el flipbook no aplica el clip-path/grid del frame genérico
(las imágenes ya cuentan su propia historia con el flash sequence). */
.process-frame--flipbook .process-frame__grid {
display: none;
}
.process-frame--flipbook .flipbook__img {
clip-path: none;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.flipbook__img { opacity: 0; transition: none; animation: none; }
.flipbook__img--final { opacity: 1; }
}
/* ============================================================
DISEÑO SVG — el wireframe del exhibidor (500 paths vectoriales)
se traza línea por línea cuando llegas al stage 1 (Diseño).
Mismo principio que la intro del home: stroke-dasharray progresivo.
============================================================ */
.diseno-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: #1a1a1a;
overflow: visible;
padding: 0;
box-sizing: border-box;
}
.diseno-svg path {
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: 2400;
stroke-dashoffset: 2400;
}
/* Al activarse el frame 1, cada path se traza con stagger.
500 paths × 4ms stagger + 900ms draw ≈ 2.9s total para formar el dibujo. */
.process-frame[data-process-media="1"].is-revealed .diseno-svg path {
animation: disenoDraw 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
animation-delay: calc(80ms + var(--i, 0) * 4ms);
}
@keyframes disenoDraw {
to { stroke-dashoffset: 0; }
}
/* Reduce motion: muestra el dibujo completo al instante */
@media (prefers-reduced-motion: reduce) {
.diseno-svg path {
stroke-dasharray: none;
stroke-dashoffset: 0;
animation: none !important;
}
}
/* ============================================================
PROCESS-MODEL — con el .glb del exhibidor 3D
Llena el frame 1, con fondo blanco y proporción libre.
============================================================ */
.process-model {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
background-color: #ffffff;
--poster-color: #ffffff;
--progress-bar-color: #1a1a1a;
--progress-bar-height: 2px;
--progress-mask: transparent;
}
/* En mobile: NO hay scroll-jacking vertical. Es un carrusel HORIZONTAL
con scroll-snap — el usuario hace swipe hacia los lados para cambiar
de etapa. Layout: imagen arriba, dots debajo de la imagen, texto abajo. */
@media (max-width: 900px) {
.nosotros-process {
height: auto;
padding: clamp(24px, 5vw, 40px) 0 clamp(12px, 2vw, 20px);
}
.nosotros-process__pin {
position: static;
height: auto;
display: block;
overflow: visible;
}
.nosotros-process__inner {
height: auto;
padding: 0;
gap: clamp(18px, 4vw, 28px);
}
.nosotros-process__header {
padding: 0 clamp(16px, 4vw, 28px);
}
.nosotros-process__layout {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: clamp(14px, 3vw, 22px);
}
/* Sticky en mobile: column con stack arriba + dots debajo */
.nosotros-process__sticky {
order: -1;
flex-direction: column;
height: auto;
gap: clamp(12px, 2vw, 18px);
}
/* Stack = carrusel horizontal con scroll-snap */
.process-stack {
transform: none; /* override del translate del desktop */
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
aspect-ratio: auto;
width: 100%;
max-width: none;
max-height: none;
height: auto;
}
.process-stack::-webkit-scrollbar { display: none; }
/* Cada frame en línea horizontal: 100% del ancho, aspect 3/4.
Override de is-active / is-passed para que TODOS sean visibles. */
.process-frame,
.process-frame.is-active,
.process-frame.is-passed {
position: relative;
flex: 0 0 100%;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
scroll-snap-align: center;
scroll-snap-stop: always;
opacity: 1;
transform: none;
transition: none;
pointer-events: auto;
border-radius: 0;
}
/* Dots horizontales y clickeables — centrados */
.process-dots {
flex-direction: row;
gap: 10px;
padding: 0;
margin: 0 auto; /* centrado horizontal */
margin-right: auto;
align-self: center; /* override del align-self del desktop */
justify-content: center;
}
.process-dots__dot {
width: 8px;
height: 8px;
cursor: pointer;
}
/* Texto debajo — limitado en ancho para que no cubra toda la pantalla */
.nosotros-process__steps {
min-height: 140px;
padding: 0 clamp(20px, 8vw, 48px);
margin-top: clamp(50px, 10vw, 90px);
}
.process-step__title {
font-size: clamp(20px, 5.5vw, 30px);
}
.process-step__desc {
font-size: clamp(15px, 4vw, 18px);
line-height: 1.5;
max-width: 32ch;
margin: 0 auto;
}
/* En mobile: imágenes 2 (Fabricación) y 3 (Logística) levemente más chicas
(el video de Fabricación tiene su propio scale en regla aparte arriba) */
.process-frame[data-process-media="2"] .process-frame__img,
.process-frame[data-process-media="3"] .process-frame__img {
transform: scale(0.88);
transform-origin: center center;
}
}
/* ============================================================
NOSOTROS — sección 4: HISTORIA (timeline estilo Left Coast)
Timeline horizontal con scroll-jacking vertical: el track se mueve
horizontalmente conforme bajas. Cada año activo (en negro) muestra
su descripción + imagen abajo.
============================================================ */
.nosotros-historia {
/* Altura natural — navegación manual con flechas, sin scroll-jacking */
position: relative;
background: #ffffff;
padding: clamp(16px, 2vh, 32px) 0 clamp(60px, 8vh, 120px);
}
.nosotros-historia__pin {
/* Ya no es sticky, es un wrapper normal */
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
.nosotros-historia__inner {
display: flex;
flex-direction: column;
padding: 0;
}
.nosotros-historia__header {
padding: 0 clamp(12px, 1.8vw, 28px);
margin-bottom: clamp(24px, 4vh, 56px);
max-width: 1400px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.nosotros-historia__header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(20px, 4vw, 60px);
}
.nosotros-historia__titles {
flex: 1;
min-width: 0;
}
/* Flechas prev/next — círculos negros pequeños */
.historia-nav {
display: flex;
gap: 12px;
flex-shrink: 0;
margin-right: clamp(40px, 8vw, 120px);
}
.historia-nav-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 0;
background: #0a0a0a;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 200ms ease, transform 200ms ease, opacity 200ms ease;
padding: 0;
}
.historia-nav-btn:hover {
background: #1f1f1f;
transform: scale(1.08);
}
.historia-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}
.historia-nav-btn:disabled:hover {
background: #0a0a0a;
}
@media (max-width: 900px) {
/* Mobile: solo swipe — flechas ocultas */
.historia-nav,
.historia-nav-btn {
display: none !important;
}
}
.nosotros-historia__eyebrow {
font-family: var(--sans);
font-size: clamp(11px, 0.85vw, 13px);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6b6b6b;
margin: 0 0 clamp(10px, 1vw, 16px);
}
.nosotros-historia__title {
font-family: var(--sans);
font-size: clamp(26px, 3.8vw, 56px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0;
max-width: none;
}
/* Override del reveal-letters para el título de Historia.
Las letras aparecen una por una; las del primer span en NEGRO,
las del segundo ("construyendo experiencias.") en gris fuerte. */
.nosotros-historia__title .reveal-letters .char {
color: rgba(0, 0, 0, 0.42);
}
.nosotros-historia__title-strong.is-visible .char {
color: var(--ink);
}
/* Parte suave ("construyendo experiencias.") — con el gradiente verde de la ola */
.nosotros-historia__title-soft .char,
.nosotros-historia__title-soft.is-visible .char {
background-image: linear-gradient(90deg, #3d5e54 0%, #4a7062 25%, #5a8576 50%, #6e9587 75%, #8aaba0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Stagger continuo: el segundo span arranca después de las 14 letras
del primero ("Casi dos décadas" sin contar espacios = 14). */
.nosotros-historia__title-soft .char {
transition-delay: calc((var(--n, 0) + 14) * 16ms);
}
.nosotros-historia__title-soft.is-visible .char {
transition-delay:
calc((var(--n, 0) + 14) * 16ms),
calc((var(--n, 0) + 14) * 16ms + 200ms),
calc((var(--n, 0) + 14) * 16ms);
}
/* Stage = track horizontal + detalles + línea vertical decorativa continua */
.historia-stage {
position: relative;
display: flex;
flex-direction: column;
}
/* Cada año tiene su propia línea vertical (border-left). El detail también
tiene border-left alineado con el año activo → se ve como una línea
continua entre año y detail. */
/* ===== Track horizontal con la línea base, marcas y años ===== */
.historia-track {
position: relative;
height: clamp(160px, 22vh, 240px);
width: 100%;
overflow: hidden;
}
/* Línea base — oculta, ahora solo se ve la ola con gradiente */
.historia-line { display: none; }
/* Línea ondulada SVG — fuera del track scrollable, posicionada al final del track */
.historia-marks { display: none; }
.historia-wave {
position: absolute;
left: 0;
right: 0;
top: clamp(100px, 15vh, 160px); /* desktop: ola justo abajo del año */
width: 100%;
height: 60px;
overflow: visible;
pointer-events: none;
z-index: 5;
}
@media (max-width: 900px) {
.historia-wave {
top: clamp(95px, 14vh, 130px); /* mobile: ola justo debajo del label */
}
}
.historia-wave path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
/* Una sola línea con gradiente — se ondea fluido al pasar el cursor.
Sin transition CSS porque la animación viene del RAF (más fluida). */
.historia-wave__ola {
stroke: url(#olaGradient);
stroke-width: 2.5;
}
/* Lista de años en flex horizontal — JS aplica translateX.
padding-bottom: 0 → la línea del año atraviesa las marks y llega al bottom
del track, conectando visualmente con la línea del detail abajo. */
.historia-years {
position: absolute;
inset: 0;
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: flex-end;
padding-bottom: 0;
will-change: transform;
transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
z-index: 2; /* por encima de las marks */
}
.historia-year {
position: relative; /* anchor para la línea pseudo-element */
flex: 0 0 90vw; /* 1 año por pantalla */
text-align: left;
color: rgba(0, 0, 0, 0.25);
transition: color 500ms cubic-bezier(0.22, 1, 0.36, 1),
transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
transform: scale(0.92);
transform-origin: left top;
padding-left: clamp(20px, 2.4vw, 36px);
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 0; /* año pegado al top del track */
}
/* Línea vertical del año: solo dentro del year cuando es active (corta).
La descripción/imagen abajo no se conecta con esta línea. */
.historia-year::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 0;
background: rgba(0, 0, 0, 0.45);
transition: height 450ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
z-index: 3;
}
.historia-year.is-active::after {
height: 100%;
}
.historia-year.is-active {
border-left-color: rgba(0, 0, 0, 0.45);
}
.historia-year.is-active {
color: var(--ink);
transform: scale(1);
}
.historia-year__num {
display: block;
font-family: var(--sans);
font-size: clamp(40px, 6vw, 88px);
font-weight: 600;
line-height: 0.95;
letter-spacing: -0.03em;
color: inherit;
}
.historia-year__label {
display: block;
font-family: var(--sans);
font-size: clamp(12px, 0.95vw, 15px);
font-weight: 500;
color: inherit;
margin-top: clamp(6px, 0.8vw, 12px);
opacity: 0.85;
}
/* ===== Detalles (descripción + imagen del hito activo) ===== */
.historia-details {
position: relative;
margin-top: 0; /* pegado al track */
padding: 0;
max-width: none;
width: 100%;
min-height: clamp(280px, 32vh, 380px);
}
.historia-detail {
position: absolute;
top: 0;
bottom: 0;
left: 5vw; /* posición fija — no se mueve con el año */
width: 90vw;
max-width: 1400px;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(20px, 4vw, 60px);
align-items: start;
padding-top: clamp(12px, 1.5vh, 24px);
opacity: 0;
transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.historia-detail.is-active {
opacity: 1;
pointer-events: auto;
}
.historia-detail.is-active {
opacity: 1;
pointer-events: auto;
}
.historia-detail__desc {
font-family: var(--sans);
font-size: clamp(15px, 1.2vw, 20px);
line-height: 1.55;
color: #4a4a4a;
margin: 0;
max-width: 50ch;
}
.historia-detail__media {
margin: 0;
width: 100%;
aspect-ratio: 4 / 3;
max-height: clamp(160px, 22vh, 260px);
overflow: hidden;
border-radius: clamp(6px, 0.6vw, 10px);
justify-self: end;
max-width: clamp(240px, 30vw, 420px);
}
.historia-detail__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ===== Mobile: igual que desktop (track horizontal con prev/next) ===== */
@media (max-width: 900px) {
.nosotros-historia {
height: auto;
padding: clamp(12px, 2vh, 24px) 0 clamp(40px, 6vw, 60px);
}
.nosotros-historia__pin {
position: static;
height: auto;
overflow: hidden; /* recorta el track horizontal */
display: block;
}
.nosotros-historia__inner {
height: auto;
padding: 0;
}
.nosotros-historia__header {
padding: 0 clamp(16px, 4vw, 28px);
}
.nosotros-historia__header-row {
flex-direction: column;
align-items: flex-start;
gap: clamp(16px, 3vw, 24px);
}
.historia-stage {
flex-direction: column;
}
/* Track horizontal — scroll nativo touch + snap consistente */
.historia-track {
position: relative;
height: clamp(180px, 26vh, 240px);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 0; /* snap pegado al borde izquierdo */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.historia-track::-webkit-scrollbar { display: none; }
/* Línea base + marks visibles, ocupan todo el ancho del track */
.historia-line {
position: absolute;
bottom: 38px;
left: 0;
right: 0;
height: 1px;
background: rgba(0, 0, 0, 0.18);
}
.historia-marks {
position: absolute;
bottom: 24px;
left: 0;
right: 0;
height: 50px;
display: flex;
align-items: flex-end;
justify-content: space-between;
pointer-events: none;
}
.historia-mark {
height: 6px;
}
/* Years en flex horizontal nativo con scroll-snap */
.historia-years {
position: relative;
inset: auto;
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: flex-start; /* año pegado al top del track */
flex-direction: row;
transition: none;
transform: none !important;
height: 100%;
width: max-content;
}
.historia-year {
flex: 0 0 80vw;
text-align: left;
margin-left: 0;
padding-left: clamp(20px, 4vw, 28px);
padding-right: clamp(16px, 4vw, 24px);
padding-top: clamp(8px, 1.5vh, 16px);
scroll-snap-align: start;
justify-content: flex-start !important;
transform-origin: left top;
}
/* Primer año (2008) recorrido a la derecha */
.historia-year:first-child {
margin-left: 11vw;
}
/* Propiedades comunes a TODOS los años en mobile (restauradas) */
.historia-year {
opacity: 1;
transform: scale(0.92);
align-self: stretch;
scroll-snap-align: center;
scroll-snap-stop: always;
min-width: 0;
pointer-events: auto;
color: rgba(0, 0, 0, 0.25);
cursor: default !important;
transition: color 500ms cubic-bezier(0.22, 1, 0.36, 1),
transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.historia-year.is-active {
color: var(--ink);
opacity: 1;
transform: scale(1);
}
.historia-year__num {
font-size: clamp(44px, 12vw, 72px);
}
.historia-year__label {
font-size: clamp(12px, 3vw, 15px);
margin-top: clamp(4px, 1.5vw, 10px);
}
/* Línea decorativa: en mobile usamos otra posición (left fija al inicio del detail) */
.historia-stage::before {
left: clamp(16px, 4vw, 28px);
}
.historia-details {
position: relative;
flex: none;
margin-top: 0;
padding: 0;
min-height: clamp(280px, 60vw, 360px);
}
.historia-detail {
inset: 0;
left: clamp(16px, 4vw, 28px);
right: clamp(16px, 4vw, 28px);
grid-template-columns: 1fr;
gap: clamp(16px, 3vw, 24px);
align-items: start;
padding-left: clamp(16px, 4vw, 24px);
padding-top: clamp(20px, 4vw, 32px);
}
.historia-detail__media {
max-width: 100%;
justify-self: start;
aspect-ratio: 16 / 10;
}
}
@media (prefers-reduced-motion: reduce) {
.historia-years,
.historia-year,
.historia-detail {
transition: none !important;
}
}
/* ============================================================
CONTACTO — Cards de productos seleccionados (desde favoritos)
Reglas con specificity alta para que NADA las sobreescriba.
============================================================ */
body.page-contacto .cotizar-cards {
margin-top: clamp(8px, 1vw, 14px) !important;
display: flex !important;
flex-direction: column !important;
gap: clamp(10px, 1.2vw, 16px) !important;
}
body.page-contacto .cotizar-cards__list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: clamp(8px, 1.2vw, 16px) !important;
}
body.page-contacto .cotizar-card {
position: relative !important;
display: grid !important;
grid-template-columns: 56px 1fr !important;
gap: 12px !important;
align-items: center !important;
padding: 12px 14px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
list-style: none !important;
}
body.page-contacto .cotizar-card__media {
width: 56px !important;
height: 56px !important;
max-width: 56px !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
border-radius: 8px !important;
background: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
body.page-contacto .cotizar-card__media img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
max-width: 100% !important;
}
body.page-contacto .cotizar-card__body {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-width: 0 !important;
}
body.page-contacto .cotizar-card__name {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--ink) !important;
line-height: 1.25 !important;
}
body.page-contacto .cotizar-card__specs {
font-size: 11px !important;
color: #6b6b6b !important;
line-height: 1.4 !important;
}
body.page-contacto .cotizar-card__qty {
display: inline-block !important;
margin-top: 4px !important;
padding: 2px 8px !important;
background: #0a0a0a !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
border-radius: 100px !important;
width: max-content !important;
}
body.page-contacto .cotizar-card__remove {
position: absolute !important;
top: 4px !important;
right: 4px !important;
width: 22px !important;
height: 22px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: rgba(0, 0, 0, 0.45) !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
/* Mobile: cards más compactas, imagen chica, texto bien aprovechado */
@media (max-width: 600px) {
body.page-contacto .cotizar-cards__list {
gap: 8px !important;
}
body.page-contacto .cotizar-card {
grid-template-columns: 1fr !important; /* 1 columna interna (imagen arriba, texto abajo) */
gap: 8px !important;
padding: 10px !important;
justify-items: center !important;
text-align: center !important;
}
body.page-contacto .cotizar-card__media {
width: 56px !important;
height: 56px !important;
margin: 0 auto !important;
}
body.page-contacto .cotizar-card__body {
align-items: center !important;
text-align: center !important;
}
body.page-contacto .cotizar-card__name {
font-size: 12px !important;
text-align: center !important;
}
body.page-contacto .cotizar-card__specs {
font-size: 10px !important;
text-align: center !important;
}
body.page-contacto .cotizar-card__qty {
font-size: 9px !important;
margin: 4px auto 0 !important;
}
}
/* Cleanup: la regla original .cotizar-cards (sin body) queda como fallback */
.cotizar-cards {
margin-top: clamp(8px, 1vw, 14px);
display: flex;
flex-direction: column;
gap: clamp(10px, 1.2vw, 16px);
}
.cotizar-cards__title {
font-family: var(--sans);
font-size: clamp(11px, 0.85vw, 13px);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #6b6b6b;
}
.cotizar-cards__list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: clamp(8px, 1.2vw, 16px) !important;
}
.cotizar-card {
position: relative;
display: grid !important;
grid-template-columns: clamp(44px, 5vw, 64px) 1fr !important;
gap: clamp(12px, 1.4vw, 20px);
align-items: center;
padding: clamp(10px, 1.2vw, 16px) clamp(14px, 1.4vw, 20px);
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: clamp(8px, 0.8vw, 14px);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.cotizar-card__media {
max-width: 64px !important; /* nunca más grande */
}
/* Botón X para eliminar la card */
.cotizar-card__remove {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
color: rgba(0, 0, 0, 0.45);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 180ms ease, color 180ms ease;
}
.cotizar-card__remove:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--ink);
}
.cotizar-card:hover {
border-color: rgba(0, 0, 0, 0.18);
box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08);
}
.cotizar-card__media {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: clamp(4px, 0.5vw, 8px);
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.cotizar-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.cotizar-card__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.cotizar-card__name {
font-family: var(--sans);
font-size: clamp(14px, 1vw, 16px);
font-weight: 600;
color: var(--ink);
line-height: 1.25;
}
.cotizar-card__specs {
font-family: var(--sans);
font-size: clamp(12px, 0.85vw, 13px);
color: #6b6b6b;
line-height: 1.4;
}
.cotizar-card__qty {
display: inline-block;
margin-top: 4px;
padding: 3px 10px;
background: #0a0a0a;
color: #ffffff;
font-size: clamp(10px, 0.75vw, 12px);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 100px;
width: max-content;
}
@media (max-width: 600px) {
.cotizar-card {
grid-template-columns: 40px 1fr;
gap: 8px;
padding: 10px;
}
.cotizar-card__name { font-size: 13px; }
.cotizar-card__specs { font-size: 11px; }
}