/* ══════════════════════════════════════════════════════════════════
Imascono Public Site — Global Styles
══════════════════════════════════════════════════════════════════ */
/* ── Tailwind theme (admin) ── */
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
/* ══════════════════════════════════════════════════════════════════
Google Fonts (imported at top of file)
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
Font-Face Declarations
══════════════════════════════════════════════════════════════════ */
/* ── PP Neue Montreal ── */
@font-face { font-family: 'PP Neue Montreal'; src: url('../fonts/montrealbook.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Neue Montreal'; src: url('../fonts/montreal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
/* ── Visuelt Pro ── */
@font-face { font-family: 'Visuelt Pro'; src: url('../fonts/VisueltPro-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Visuelt Pro'; src: url('../fonts/VisueltPro-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Visuelt Pro'; src: url('../fonts/VisueltPro-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Visuelt Pro'; src: url('../fonts/VisueltPro-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Visuelt Pro'; src: url('../fonts/VisueltPro-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
/* ── DM Mono (auto-alojada, woff2 · subset latin) ── */
@font-face { font-family: 'DM Mono'; src: url('../fonts/DMMono-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/DMMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/DMMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
/* ── Graphik ── */
@font-face { font-family: 'Graphik'; src: url('../fonts/GraphikLCG-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* ── DIN Pro ── */
@font-face { font-family: 'DIN Pro'; src: url('../fonts/DINPro-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'DIN Pro'; src: url('../fonts/DINPro-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DIN Pro'; src: url('../fonts/DINPro-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DIN Pro'; src: url('../fonts/DINPro-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DIN Pro'; src: url('../fonts/DINPro-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
/* ══════════════════════════════════════════════════════════════════
Reset & Base
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { font-size: 16px; }
/* Lenis (scroll suave) */
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; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
.public-site {
font-family: 'Visuelt Pro', system-ui, -apple-system, sans-serif;
color: #647483;
background: #ffffff;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
position: relative;
overflow-x: clip;
}
.public-site img { max-width: 100%; display: block; }
.public-site a { text-decoration: none; color: inherit; }
.public-site a.btn-primary { color: #fff; }
.service-hero a.btn-primary { color: #fff; }
.service-hero a.btn-primary:hover { color: #fff; }
.public-site ul { list-style: none; }
/* ── Background grid lines (desactivado: sin líneas verticales) ── */
.public-site::before {
display: none;
content: '';
position: fixed;
top: 0;
bottom: 0;
left: max(40px, calc(50% - 700px));
right: max(40px, calc(50% - 700px));
pointer-events: none;
z-index: -1;
background-image:
repeating-linear-gradient(to bottom, rgba(200,210,220,0.45) 0px, rgba(200,210,220,0.45) 4px, transparent 4px, transparent 10px);
-webkit-mask-image:
linear-gradient(to right,
transparent 0%, transparent calc(11.111% - 0.5px), black calc(11.111% - 0.5px), black calc(11.111% + 0.5px), transparent calc(11.111% + 0.5px),
transparent calc(22.222% - 0.5px), black calc(22.222% - 0.5px), black calc(22.222% + 0.5px), transparent calc(22.222% + 0.5px),
transparent calc(33.333% - 0.5px), black calc(33.333% - 0.5px), black calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px),
transparent calc(44.444% - 0.5px), black calc(44.444% - 0.5px), black calc(44.444% + 0.5px), transparent calc(44.444% + 0.5px),
transparent calc(55.556% - 0.5px), black calc(55.556% - 0.5px), black calc(55.556% + 0.5px), transparent calc(55.556% + 0.5px),
transparent calc(66.667% - 0.5px), black calc(66.667% - 0.5px), black calc(66.667% + 0.5px), transparent calc(66.667% + 0.5px),
transparent calc(77.778% - 0.5px), black calc(77.778% - 0.5px), black calc(77.778% + 0.5px), transparent calc(77.778% + 0.5px),
transparent calc(88.889% - 0.5px), black calc(88.889% - 0.5px), black calc(88.889% + 0.5px), transparent calc(88.889% + 0.5px),
transparent 100%);
mask-image:
linear-gradient(to right,
transparent 0%, transparent calc(11.111% - 0.5px), black calc(11.111% - 0.5px), black calc(11.111% + 0.5px), transparent calc(11.111% + 0.5px),
transparent calc(22.222% - 0.5px), black calc(22.222% - 0.5px), black calc(22.222% + 0.5px), transparent calc(22.222% + 0.5px),
transparent calc(33.333% - 0.5px), black calc(33.333% - 0.5px), black calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px),
transparent calc(44.444% - 0.5px), black calc(44.444% - 0.5px), black calc(44.444% + 0.5px), transparent calc(44.444% + 0.5px),
transparent calc(55.556% - 0.5px), black calc(55.556% - 0.5px), black calc(55.556% + 0.5px), transparent calc(55.556% + 0.5px),
transparent calc(66.667% - 0.5px), black calc(66.667% - 0.5px), black calc(66.667% + 0.5px), transparent calc(66.667% + 0.5px),
transparent calc(77.778% - 0.5px), black calc(77.778% - 0.5px), black calc(77.778% + 0.5px), transparent calc(77.778% + 0.5px),
transparent calc(88.889% - 0.5px), black calc(88.889% - 0.5px), black calc(88.889% + 0.5px), transparent calc(88.889% + 0.5px),
transparent 100%);
}
/* ══════════════════════════════════════════════════════════════════
Container
══════════════════════════════════════════════════════════════════ */
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}
/* ══════════════════════════════════════════════════════════════════
Header / Nav
══════════════════════════════════════════════════════════════════ */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: #ffffff;
border-bottom: 1px solid rgba(0,0,0,0.06);
animation: slideDown 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
/* Al hacer scroll: semitransparente con desenfoque (estado anterior) */
.header.scrolled {
background: rgba(255,255,255,0.83);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
@keyframes slideDown {
0% { transform: translateY(-100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Degradado de desenfoque en los bordes del viewport (inferior siempre; superior al hacer scroll) */
.page-edgeblur-top,
.page-edgeblur-bottom {
position: fixed;
left: 0;
right: 0;
z-index: 90;
pointer-events: none;
}
.page-edgeblur-bottom {
display: none;
}
.page-edgeblur-top {
top: 0; /* desde la parte superior del viewport (ignora la barra del header) */
height: 110px;
background: rgba(255,255,255,0.4);
-webkit-backdrop-filter: blur(1.5px);
backdrop-filter: blur(1.5px);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.45) 45%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.45) 45%, transparent 100%);
opacity: 0;
transition: opacity 0.35s ease;
}
/* Aparece solo cuando se ha hecho scroll (misma señal que el header) */
.header.scrolled ~ .page-edgeblur-top { opacity: 1; }
.header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 1.1rem;
}
.logo svg { width: 36px; height: 20px; }
.nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-links a {
font-size: 0.8rem;
font-weight: 500;
color: #8a9baa;
text-transform: uppercase;
letter-spacing: 0.03em;
transition: color 0.2s;
}
.nav-links a:hover { color: #647483; }
.nav-links a.nav-active { color: #647483; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }
/* ── Header Actions ── */
.header-actions {
display: flex;
align-items: center;
gap: 24px;
}
/* Language switcher · estilo monospace editorial (N2).
Botones EN / ES en SF Mono 12px con underline en el activo, separados
por un slash gris. Los overrides de color para `.header-transparent` y
`.header-scrolled` viven en la sección "Transparent nav". */
.lang-switcher {
display: inline-flex;
align-items: baseline;
gap: 10px;
}
.lang-link {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 14px;
letter-spacing: 0.06em;
color: #8a9baa;
background: transparent;
border: none;
padding: 2px 0;
border-bottom: 1px solid transparent;
cursor: pointer;
transition: color 0.3s ease, border-color 0.3s ease;
}
.lang-link.active {
color: #0e1a26;
border-bottom-color: #0e1a26;
font-weight: 400;
}
.lang-sep {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 14px;
color: #cfd6dc;
user-select: none;
}
.footer-sede-gap { margin-top: 40px; }
/* ── Mega Dropdown ── */
.nav-mega {
position: fixed;
top: 72px;
left: 0;
right: 0;
bottom: 0;
background: rgba(74,90,104,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 99;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
}
.nav-mega.active {
opacity: 1;
pointer-events: auto;
}
.nav-mega-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
padding-top: 80px;
align-items: start;
}
.nav-mega-title {
font-size: 4.5rem;
font-weight: 300;
color: #ffffff;
line-height: 1.05;
letter-spacing: -0.02em;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.nav-mega.active .nav-mega-title {
opacity: 1;
transform: translateY(0);
}
.nav-mega-links {
padding-top: 10px;
}
.nav-mega-links a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.7);
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: opacity 0.2s, color 0.3s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0;
transform: translateY(10px);
}
.nav-mega.active .nav-mega-links a {
opacity: 1;
transform: translateY(0);
}
.nav-mega.active .nav-mega-links a:nth-child(1) { transition-delay: 0.1s; }
.nav-mega.active .nav-mega-links a:nth-child(2) { transition-delay: 0.15s; }
.nav-mega.active .nav-mega-links a:nth-child(3) { transition-delay: 0.2s; }
.nav-mega.active .nav-mega-links a:nth-child(4) { transition-delay: 0.25s; }
.nav-mega.active .nav-mega-links a:nth-child(5) { transition-delay: 0.3s; }
.nav-mega.active .nav-mega-links a:nth-child(6) { transition-delay: 0.35s; }
.nav-mega-links a:first-child {
border-top: 1px solid rgba(255,255,255,0.2);
}
.nav-mega-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: rgba(255,255,255,0.8);
transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mega.active .nav-mega-links a:hover { opacity: 1; color: #ffffff; }
.nav-mega.active .nav-mega-links a:hover::after { width: 100%; }
.nav-mega-links a > span:last-child { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-mega.active .nav-mega-links a:hover > span:last-child { transform: translateX(6px); }
.nav-mega-name { display: flex; align-items: baseline; gap: 8px; flex: 1; }
.nav-mega-desc { font-weight: 300; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.4); }
/* ══════════════════════════════════════════════════════════════════
Buttons
══════════════════════════════════════════════════════════════════ */
.btn-outline {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: #647483;
padding: 10px 24px;
border: 1px solid #c8ced6;
border-radius: 0;
background: transparent;
cursor: pointer;
transition: all 0.2s;
}
.btn-outline:hover {
border-color: #647483;
}
.btn-primary {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: #fff;
padding: 10px 24px;
border: none;
border-radius: 0;
background: linear-gradient(135deg, #546878 0%, #546878 50%, #748a97 50%, #546878 100%);
background-size: 250% 250%;
background-position: 0% 0%;
cursor: pointer;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary:hover { background-position: 100% 100%; }
.btn-primary .arrow { font-size: 1rem; display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-primary:hover .arrow { transform: translateX(6px); }
.btn-primary.btn-lg,
.btn-outline.btn-lg { padding: 18px 48px; font-size: 1.1rem; }
.btn-outline.btn-glass {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.btn-submit { align-self: flex-start; }
/* ── Utility: uppercase description ── */
.section-desc-upper {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.95rem;
color: #647483;
text-transform: uppercase;
}
/* ── Section variants ── */
.section-solutions-bg {
padding-bottom: 0;
}
/* ══════════════════════════════════════════════════════════════════
Section
══════════════════════════════════════════════════════════════════ */
.section {
position: relative;
z-index: auto;
background: #fff;
padding: 100px 0;
}
.section-border {
border-bottom: 1px solid #eee;
}
.section.section-tech-bg {
background: linear-gradient(to bottom, #ffffff 50%, #f2f5f8 100%);
padding-top: 50px;
}
.section.section-solutions-bg {
background: #f2f5f8;
padding-bottom: 0;
}
.section-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
margin-bottom: 60px;
}
.section-title {
font-size: 2.8rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: #647483;
}
.section-title.hero-style {
font-size: 3.8rem;
font-weight: 300;
line-height: 1.05;
}
.section-title.hero-style.hero-lg { font-size: 6rem; }
.section-desc {
font-size: 0.95rem;
color: #8a9baa;
line-height: 1.7;
padding-top: 12px;
}
/* ══════════════════════════════════════════════════════════════════
Stats
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
Home · Servicios principales · variante D · P1 (depth-shift parallax)
══════════════════════════════════════════════════════════════════
Layout 2 cols (sidebar sticky + content scrollable). Cada bloque
tiene un ghost-num gigante de fondo (capa lenta) + título + desc
+ lista de subservicios clickables. Parallax de 4 capas a velocidades
distintas (depth 0.05 / 0.10 / 0.15 / 0.20) gestionado en JS.
Subservicios con magnetic hover · indicador 2px lateral en sidebar. */
.home-services {
background: #fff;
padding: 100px 0 160px;
/* Aísla layout/paint del subtree para que reflows internos no
se propaguen al resto del documento durante el scroll. */
contain: layout paint;
}
.home-services-header {
margin-bottom: 48px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.7s ease 0.1s, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
}
.home-services.in-view .home-services-header {
opacity: 1;
transform: none;
}
.home-services-eyebrow {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #647483;
margin: 0 0 16px;
}
/* Layout 2 cols · sidebar 1fr / contenido 1.6fr */
.home-services-layout {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 100px;
align-items: start;
padding-top: 40px;
border-top: 1px solid #e8ecf0;
position: relative;
}
/* Sidebar sticky · barra indicadora 2px que sigue al .is-active */
.home-services-sidebar {
position: sticky;
top: 120px;
align-self: start;
}
.home-services-sidebar-eyebrow {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8a9baa;
margin-bottom: 30px;
}
.home-services-nav {
list-style: none;
margin: 0;
padding: 0;
counter-reset: srv;
position: relative;
}
.home-services-nav .srv-link {
counter-increment: srv;
padding: 20px 0;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 1.6rem;
line-height: 1.1;
letter-spacing: -0.01em;
color: #cfd6dc;
border-top: 1px solid #e8ecf0;
display: flex;
align-items: center;
gap: 24px;
cursor: default;
position: relative;
z-index: 1;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
padding-left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-services-nav .srv-link::before {
content: counter(srv, decimal-leading-zero);
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: inherit;
flex-shrink: 0;
}
.home-services-nav .srv-link:last-child {
border-bottom: 1px solid #e8ecf0;
}
.home-services-nav .srv-link.is-active {
color: #0e1a26;
padding-left: 16px;
}
.home-services-indicator {
position: absolute;
left: -2px;
width: 2px;
background: #0e1a26;
transition: top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
/* Contenido scrollable · cada bloque ≥ 95vh para que el observer
central (-40% top / -40% bottom) tenga margen estable. */
.home-services-content {
position: relative;
}
.home-service-block {
padding: 0 0 220px;
min-height: 95vh;
position: relative;
isolation: isolate;
/* B2 · Adjacent out-of-focus · el bloque centrado en viewport
queda nítido (blur 0 / op 1); los anteriores y siguientes pierden
foco y opacidad progresivamente. JS actualiza --blur y --op por
scroll desde HomeAnimations (rAF-throttled, valores redondeados a
0.5px para minimizar invalidations del layer GPU). */
filter: blur(var(--blur, 0px));
opacity: var(--op, 1);
will-change: filter, opacity;
}
.home-service-block:last-child {
padding-bottom: 80px;
}
/* Ghost number gigante · capa de fondo (depth 0.15, signo +) que se
queda atrás al scrollear · color casi transparente. */
.home-service-ghost-num {
position: absolute;
top: 0;
right: -40px;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 200;
font-size: clamp(20rem, 36vw, 32rem);
line-height: 0.85;
letter-spacing: -0.08em;
color: #f4f6f8;
z-index: -1;
pointer-events: none;
user-select: none;
will-change: transform;
}
/* Icono de servicio · matriz 5×5 de dots (SVG 100×100 viewBox).
Sin width/height un SVG inline renderiza a tamaño por defecto → lo acotamos.
Cada dot pulsa con un delay inline por posición (onda radial/horizontal/diagonal). */
.home-service-icon {
display: block;
width: 96px;
height: 96px;
margin: 4px 0 32px;
overflow: visible;
}
.hsi-dot {
fill: #0e1a26;
transform-box: fill-box;
transform-origin: center;
animation: hsiPulse 2.8s ease-in-out infinite;
}
@keyframes hsiPulse {
0%, 100% { opacity: 0.2; transform: scale(0.7); }
45% { opacity: 1; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
.hsi-dot { animation: none; opacity: 0.5; }
}
.home-service-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 200;
font-size: clamp(3rem, 6vw, 5rem);
letter-spacing: -0.04em;
line-height: 0.95;
color: #0e1a26;
margin: 0 0 36px;
will-change: transform;
}
.home-service-desc {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.2rem;
line-height: 1.55;
color: #647483;
max-width: 580px;
margin: 0 0 46px;
will-change: transform;
}
/* Lista de subservicios clickables · highlight bar de fondo + arrow
que aparece desde la izquierda al hover. Magnetic translation en JS. */
.home-service-list {
list-style: none;
counter-reset: sub;
padding: 0;
margin: 0;
max-width: 580px;
will-change: transform;
}
.home-service-list li {
counter-increment: sub;
border-top: 1px solid #e8ecf0;
list-style: none;
}
.home-service-list li:last-child {
border-bottom: 1px solid #e8ecf0;
}
.home-service-list a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 18px 0;
padding-right: 14px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.96rem;
color: #0e1a26;
text-decoration: none;
position: relative;
transition: padding-right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.home-service-list a::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0;
background: #0e1a26;
opacity: 0.04;
transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
z-index: -1;
}
.home-service-list a:hover::before { width: 100%; }
.home-service-list a::after {
content: counter(sub, decimal-leading-zero);
font-size: 0.7rem;
letter-spacing: 0.16em;
color: #8a9baa;
transition: color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-service-list a:hover { padding-right: 24px; }
.home-service-list a:hover::after { color: #0e1a26; transform: translateX(8px); }
.home-service-list a .arrow {
position: absolute;
right: 0;
opacity: 0;
transform: translateX(-12px);
font-family: 'PP Neue Montreal', system-ui, sans-serif;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.home-service-list a:hover .arrow { opacity: 1; transform: translateX(0); }
/* Saber más · link genérico al final de cada bloque hacia la página
principal del servicio (Consultoría / Diseño / Desarrollo). Estilo
editorial Montreal uppercase con flecha que se desplaza al hover. */
.home-service-saber {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 32px;
padding: 12px 0;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #0e1a26;
text-decoration: none;
border-bottom: 1px solid #0e1a26;
transition: gap 0.4s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.home-service-saber .arrow {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.86rem;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-service-saber:hover { gap: 18px; }
.home-service-saber:hover .arrow { transform: translateX(4px); }
@media (max-width: 980px) {
.home-services-layout { grid-template-columns: 1fr; gap: 40px; }
.home-services-sidebar { position: static; }
.home-services-indicator { display: none; }
.home-service-block { min-height: auto; padding-bottom: 60px; }
.home-service-ghost-num { font-size: 14rem; right: -20px; }
}
.stats {
position: relative;
z-index: auto;
/* Mitad superior del degradado continuo stats → logos · termina en el midpoint */
background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
padding: 60px 0;
border-top: 1px solid #eee;
border-bottom: none;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
text-align: center;
gap: 20px;
}
.stat-number {
font-size: 6rem;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: -8px;
line-height: 1;
color: #647483;
}
.stat-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.75rem;
color: #647483;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ══════════════════════════════════════════════════════════════════
Tags
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
CTA / Contact Form
══════════════════════════════════════════════════════════════════ */
.cta-section {
position: relative;
z-index: auto;
padding: 100px 0;
background: linear-gradient(to bottom, #f2f5f8 0%, #ffffff 50%);
}
.cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.cta-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 3.8rem;
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
color: #647483;
}
/* Form · estilo línea editorial con label flotante.
El label está posicionado absoluto sobre la línea (mismo baseline que el
texto que se escribirá). Cuando el campo tiene contenido (o se selecciona
un option en el select), el label se oculta con un fade y el texto del
usuario ocupa su sitio. Sin caja, solo `border-bottom` como separador.
Para inputs y textarea: usamos `placeholder=" "` (espacio) para que
`:placeholder-shown` matchee solo cuando está vacío (truco floating-label).
Para select: `:valid` matchea cuando el usuario ha elegido un option. */
.cta-form {
display: flex;
flex-direction: column;
gap: 28px;
}
.form-group {
position: relative;
display: block;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 4px 0 6px;
border: none;
border-bottom: 1px solid #cfd6dc;
border-radius: 0;
font-size: 1.05rem;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
color: #0e1a26;
background: transparent;
outline: none;
transition: border-color 0.3s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: transparent; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #0e1a26;
}
.form-group label {
position: absolute;
left: 0;
top: 4px;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.05rem;
font-weight: 400;
letter-spacing: -0.005em;
color: #647483;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* Label se desvanece al haber contenido en el campo */
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:not(:placeholder-shown) ~ label,
.form-group select:valid ~ label {
opacity: 0;
}
.form-group select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
/* Chevron SVG inline · color #8a9baa, esquina derecha */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 2px center;
background-size: 12px 8px;
padding-right: 24px;
}
.form-group select option { color: #0e1a26; background: #fff; }
.form-group textarea { resize: vertical; min-height: 28px; line-height: 1.5; }
.form-check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.8rem;
color: #647483;
}
.form-check input[type="checkbox"] {
margin-top: 2px;
width: 18px;
height: 18px;
border: 1.5px solid #8a9baa;
accent-color: #546878;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════
Footer
══════════════════════════════════════════════════════════════════ */
.footer {
position: relative;
z-index: auto;
background: #fff;
padding: 60px 0 40px;
}
/* Hairline divisora arriba del footer, limitada al ancho de las guías (no a sangre) */
.footer::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(calc(100% - 80px), 1360px);
border-top: 1px solid #d0d5dd;
}
.footer-top {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 60px;
padding-bottom: 60px;
border-bottom: 1px solid #d0d5dd;
}
.footer-brand p {
font-size: 0.8rem;
color: #8a9baa;
margin-top: 16px;
line-height: 1.6;
}
.footer-col h4 {
font-size: 0.9rem;
font-weight: 600;
color: #3a4f5f;
margin-bottom: 16px;
}
.footer-col-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 600;
font-size: 0.85rem;
color: #3A4F5F;
display: block;
margin-bottom: 16px;
}
.footer-col a {
display: block;
font-size: 0.85rem;
color: #647483;
line-height: 1.7;
margin-bottom: 8px;
transition: color 0.2s;
}
.footer-col a:hover { color: #3a4f5f; }
.footer-col .footer-legal {
margin-top: 20px;
}
.footer-col .footer-address,
.footer-address {
font-size: 0.85rem;
color: #647483;
line-height: 1.7;
margin-bottom: 8px;
}
.footer-col .footer-sede,
.footer-sede {
font-size: 0.85rem;
font-weight: 600;
color: #3a4f5f;
margin-bottom: 8px;
}
.footer-sede--2 { margin-top: 28px; }
/* Teléfono de la sede España pegado al correo de arriba */
.footer-phone-es { display: block; margin-top: -2px; }
.footer-legal-bar {
grid-column: 2 / -1;
padding: 20px 0 0;
font-size: 0.75rem;
color: #647483;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.footer-legal-bar span::after {
content: '|';
margin-left: 8px;
color: #647483;
}
.footer-legal-links {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.footer-legal-links a {
color: #647483;
transition: color 0.2s;
}
.footer-legal-links a:hover { color: #3a4f5f; }
.footer-legal-links a:not(:last-child)::after {
content: '|';
margin-left: 8px;
color: #647483;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
gap: 48px;
align-items: flex-start;
}
.footer-services-section {
flex: 1 1 480px;
min-width: 0;
}
.footer-bottom > .footer-badges {
flex: 0 1 460px;
max-width: 460px;
margin-left: auto;
justify-content: flex-end;
}
.footer-services-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.footer-services-title {
font-size: 1rem;
font-weight: 600;
color: #3a4f5f;
letter-spacing: 0.01em;
}
.footer-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 36px;
align-items: start;
}
.footer-services-col {
display: flex;
flex-direction: column;
}
.footer-services-col a {
display: block;
font-size: 0.85rem;
color: #647483;
line-height: 1.55;
margin-bottom: 8px;
transition: color 0.2s;
text-decoration: none;
}
.footer-services-col a:hover { color: #3a4f5f; }
.footer-services-col a.footer-services-extra-gap { margin-top: 24px; }
/* Backward-compat: keep old class hooks usable if anywhere else references them */
.footer-bottom-col h4 {
font-size: 0.9rem;
font-weight: 600;
color: #3a4f5f;
margin-bottom: 12px;
}
.footer-bottom-col a {
display: block;
font-size: 0.85rem;
color: #647483;
line-height: 1.7;
margin-bottom: 8px;
transition: color 0.2s;
}
.footer-bottom-col a:hover { color: #3a4f5f; }
.footer-badges {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
grid-column: 3 / 5;
}
.footer-badges img {
height: 50px;
object-fit: contain;
}
.footer-badges span {
font-size: 0.75rem;
color: #647483;
font-weight: 500;
}
.footer-social {
display: flex;
gap: 16px;
}
.footer-social a {
width: 36px;
height: 36px;
border-radius: 0;
border: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: #a3b1be;
transition: all 0.2s;
}
.footer-social a:hover {
border-color: #647483;
color: #647483;
}
/* ══════════════════════════════════════════════════════════════════
Scroll Reveal
══════════════════════════════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.from-left {
transform: translateX(-40px);
}
.reveal.from-right {
transform: translateX(40px);
}
.reveal.scale-in {
transform: scale(0.95);
}
.reveal.visible {
opacity: 1;
transform: translateY(0) translateX(0) scale(1);
}
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.12s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.36s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.48s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.6s; }
/* ── Quote text · word-by-word scroll fill ──
* ScrollReveal.tsx envuelve cada palabra en `…`
* y añade `.has-words` al `.s-quote-text`. Cada palabra empieza en gris
* muy claro (#d8dee4) y va recibiendo `.lit` (color tinta oscuro) en
* orden conforme el usuario scrollea por la sección — el texto se
* "lee mientras se descubre". El cálculo de progress usa el
* boundingClientRect de `.s-quote` y mapea de viewport[85%, 15%] al
* intervalo [0, 1]. */
.s-quote-text.has-words {
/* Color outer transparente — los hijos .w dictan el color */
color: transparent;
}
.s-quote-text .w {
display: inline-block;
color: #d8dee4;
transition: color 0.25s linear;
}
.s-quote-text .w.lit { color: #647483; }
/* Quote mark también en gris muy claro al estar fuera de scroll-fill */
.s-quote-text.has-words ~ .s-quote-meta,
.s-quote.has-words-section .s-quote-mark { /* no-op, kept for futuras tweaks */ }
/* (override de productos movido al final, después del bloque dark-mode,
* para no ser reseteado por la transition shorthand de las reglas del
* dark mode. Ver `.s-products-list.stagger > .reveal` más abajo.) */
/* ── Hero mask reveal ── */
/* Hero reveal animations · idéntica receta para caso de éxito y sector v2.
* - Section: `clip-path: inset(0 0 100% 0)` → `inset(0 0 0 0)` en 1.2s cuando
* se añade `.hero-revealed` (200ms post-mount via ScrollReveal).
* - Image: `transform: scale(1.18 → 1)` en 2.5s con delay 0.1s. */
.project-hero, .sector-hero, .s-hero {
clip-path: inset(0 0 100% 0);
transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.project-hero img, .project-hero video {
transform: scale(1.18);
transition: transform 2.5s cubic-bezier(0.25, 0.1, 0.1, 1) 0.1s;
}
.project-hero.hero-revealed, .sector-hero.hero-revealed, .s-hero.hero-revealed {
clip-path: inset(0 0 0 0);
}
.project-hero.hero-revealed img, .project-hero.hero-revealed video {
transform: scale(1);
}
/* Sector v2 (.s-hero) · split SH3 · solo scale 1.18 → 1 en la imagen.
* El clip-path de entrada se aplica a la sección `.s-hero` arriba en este
* archivo (compartido con `.project-hero`) para que texto + imagen se
* unclippen a la vez — misma receta que en las páginas de Caso de éxito. */
.s-hero .s-hero-image-col img, .s-hero .s-hero-image-col video {
transform: scale(1.18);
transition: transform 2.5s cubic-bezier(0.25, 0.1, 0.1, 1) 0.1s;
}
.s-hero.hero-revealed .s-hero-image-col img,
.s-hero.hero-revealed .s-hero-image-col video {
transform: scale(1);
}
/* ── Transparent nav (project pages) ── */
body.has-transparent-nav .project-hero { margin-top: 0 !important; }
.header.header-transparent {
background: linear-gradient(to bottom, rgba(0,0,0,0.35), transparent) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
transition: background 0.4s ease, border-bottom-color 0.4s ease;
}
.header.header-transparent::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(255,255,255,0.3);
z-index: 1;
}
.header.header-transparent:hover::after,
.header.header-scrolled::after { display: none; }
.header.header-transparent .btn-primary { background: #fff !important; color: #647483 !important; border-color: #fff !important; }
.header.header-transparent .btn-primary .arrow { color: #647483 !important; }
.header.header-transparent .btn-primary:hover { background: #f0f2f4 !important; }
.header.header-transparent .nav-links a { color: rgba(255,255,255,0.75) !important; }
.header.header-transparent .nav-links a:hover { color: #fff !important; }
.header.header-transparent .header-actions span { color: rgba(255,255,255,0.6) !important; }
.header.header-transparent .header-actions span[style*="font-weight:600"] { color: #fff !important; }
/* Language switcher (buttons, no spans) · mismo tratamiento blanco/65%
cuando el header está transparente. Se incluye también el `.lang-sep`
y el border-bottom del activo. */
.header.header-transparent .header-actions .lang-link { color: rgba(255,255,255,0.65) !important; }
.header.header-transparent .header-actions .lang-link.active {
color: #fff !important;
border-bottom-color: #fff !important;
}
.header.header-transparent .header-actions .lang-sep { color: rgba(255,255,255,0.40) !important; }
.header.header-transparent .logo img { filter: brightness(10); }
.header.header-transparent:hover {
background: rgba(255,255,255,0.95) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.header.header-transparent:hover .btn-primary {
background: linear-gradient(135deg,#546878 0%,#546878 50%,#748a97 50%,#546878 100%) !important;
color: #fff !important;
border-color: #546878 !important;
}
.header.header-transparent:hover .nav-links a { color: #8a9baa !important; }
.header.header-transparent:hover .nav-links a:hover { color: #647483 !important; }
.header.header-transparent:hover .header-actions span { color: #8a9baa !important; }
.header.header-transparent:hover .header-actions span[style*="font-weight:600"] { color: #647483 !important; }
.header.header-transparent:hover .header-actions .lang-link { color: #8a9baa !important; }
.header.header-transparent:hover .header-actions .lang-link.active {
color: #0e1a26 !important;
border-bottom-color: #0e1a26 !important;
}
.header.header-transparent:hover .header-actions .lang-sep { color: #cfd6dc !important; }
.header.header-transparent:hover .logo img { filter: none; }
.header.header-scrolled {
background: rgba(255,255,255,0.95) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-bottom-color: rgba(0,0,0,0.06) !important;
}
.header.header-scrolled .nav-links a { color: #8a9baa !important; }
.header.header-scrolled .header-actions span { color: #8a9baa !important; }
.header.header-scrolled .header-actions span[style*="font-weight:600"] { color: #647483 !important; }
.header.header-scrolled .header-actions .lang-link { color: #8a9baa !important; }
.header.header-scrolled .header-actions .lang-link.active {
color: #0e1a26 !important;
border-bottom-color: #0e1a26 !important;
}
.header.header-scrolled .header-actions .lang-sep { color: #cfd6dc !important; }
.header.header-scrolled .logo img { filter: none; }
/* Cuando hay un mega-menu activo, el header transparente debe mantenerse
en estado "hover" (blanco) — el `.nav-mega` se renderiza como sibling
del `.header`, así que mover el cursor del header al mega rompe el
:hover. Este `:has()` mantiene los mismos estilos del :hover mientras
un `.nav-mega` esté `.active`. */
body:has(.nav-mega.active) .header.header-transparent {
background: rgba(255,255,255,0.95) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
body:has(.nav-mega.active) .header.header-transparent::after { display: none; }
body:has(.nav-mega.active) .header.header-transparent .btn-primary {
background: linear-gradient(135deg,#546878 0%,#546878 50%,#748a97 50%,#546878 100%) !important;
color: #fff !important;
border-color: #546878 !important;
}
body:has(.nav-mega.active) .header.header-transparent .nav-links a { color: #8a9baa !important; }
body:has(.nav-mega.active) .header.header-transparent .nav-links a:hover { color: #647483 !important; }
body:has(.nav-mega.active) .header.header-transparent .header-actions span { color: #8a9baa !important; }
body:has(.nav-mega.active) .header.header-transparent .header-actions span[style*="font-weight:600"] { color: #647483 !important; }
body:has(.nav-mega.active) .header.header-transparent .header-actions .lang-link { color: #8a9baa !important; }
body:has(.nav-mega.active) .header.header-transparent .header-actions .lang-link.active {
color: #0e1a26 !important;
border-bottom-color: #0e1a26 !important;
}
body:has(.nav-mega.active) .header.header-transparent .header-actions .lang-sep { color: #cfd6dc !important; }
body:has(.nav-mega.active) .header.header-transparent .logo img { filter: none; }
/* ══════════════════════════════════════════════════════════════════
Hero
══════════════════════════════════════════════════════════════════ */
.hero {
padding-top: 72px;
padding-bottom: 0;
overflow-x: clip;
position: relative;
z-index: 1;
/* Aísla layout/paint del subtree del hero. Importante porque el canvas
de partículas está dentro y se redibuja constantemente; sin contain,
sus repaints podrían propagar invalidations al resto del documento. */
contain: layout paint;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #fff;
z-index: -1;
}
.hero .container {
display: flex;
flex-direction: column;
gap: 0;
}
.hero-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
min-height: 70vh;
padding: 40px 0;
position: relative;
overflow: visible;
}
#hero-particles {
position: absolute;
top: 0; right: 0; bottom: 0;
left: calc(-50vw + 50%);
width: calc(50vw + 50%);
height: 100%;
z-index: 1;
pointer-events: none;
}
.hero-content, .hero-right {
position: relative;
z-index: 2;
}
.hero-title {
font-size: 6rem;
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 0;
min-height: 12.8rem;
color: #647483;
visibility: hidden;
}
.hero-title.typing-ready {
visibility: visible;
}
.hero-title .char {
opacity: 0;
display: inline;
animation: charAppear 0.05s forwards;
}
.hero-title .char.space { white-space: pre; }
.hero-title .cursor {
display: inline-block;
width: 3px;
height: 0.9em;
background: #647483;
margin-left: 2px;
margin-right: -5px;
vertical-align: baseline;
animation: blink 0.7s step-end infinite;
}
@keyframes charAppear { to { opacity: 1; } }
@keyframes blink { 50% { border-color: transparent; background: transparent; } }
.hero-desc {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.95rem;
color: #647483;
line-height: 1.7;
margin-bottom: 32px;
text-transform: uppercase;
min-height: 5em;
}
.hero-desc .block-cursor {
display: inline-block;
width: 0.55em;
height: 1.1em;
background: #647483;
vertical-align: text-bottom;
animation: blockBlink 0.8s step-end infinite;
}
@keyframes blockBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero-buttons {
display: flex;
gap: 12px;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-buttons.visible {
opacity: 1;
transform: translateY(0);
}
.hero-buttons button {
flex: 1;
text-align: center;
justify-content: center;
}
.scroll-hint {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #647483;
font-size: 0.85rem;
font-weight: 400;
padding: 30px 0;
animation: bounceDown 2s ease-in-out infinite;
}
.scroll-hint svg {
animation: arrowBounce 2s ease-in-out infinite;
}
@keyframes arrowBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(5px); }
}
.hero-media {
position: relative;
border-radius: 0;
overflow: hidden;
height: 60vh;
width: 100vw;
margin-left: calc(-50vw + 50%);
background: #0a0a14;
}
.hero-media::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(74,90,104,0.2);
z-index: 1;
pointer-events: none;
}
.hero-media img, .hero-media video {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 150%;
object-fit: cover;
opacity: 0.85;
will-change: transform;
animation: kenburns 20s ease-in-out infinite alternate;
}
@keyframes kenburns {
0% { transform: scale(1) translate(0, var(--parallax-y, 0)); }
100% { transform: scale(1.18) translate(-2%, calc(-2% + var(--parallax-y, 0))); }
}
.play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
width: auto; height: auto;
padding: 18px 48px;
border-radius: 0;
font-size: 1.1rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.3);
pointer-events: auto;
transition: left 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.15s ease-out, border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
}
.play-btn:hover { background: rgba(255,255,255,0.08); }
/* Fullscreen reel overlay */
.hero-reel-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: #000;
display: flex;
align-items: center;
justify-content: center;
animation: hero-reel-fade-in 0.2s ease-out;
}
@keyframes hero-reel-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.hero-reel-overlay video {
width: 100%;
height: 100%;
max-width: 100vw;
max-height: 100vh;
object-fit: contain;
background: #000;
}
.hero-reel-close {
position: absolute;
top: 24px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1001;
transition: background 0.15s ease, border-color 0.15s ease;
}
.hero-reel-close:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.4);
}
.hero-media.hovering .play-btn {
flex-direction: column;
width: 140px; height: 140px;
padding: 0;
border-radius: 50%;
font-size: 0.85rem;
/* Más visible al pasar el cursor: fondo translúcido, borde más sólido y
un sutil halo. */
background: rgba(255,255,255,0.16);
border-color: rgba(255,255,255,0.7);
box-shadow: 0 6px 28px rgba(0,0,0,0.35), 0 0 0 8px rgba(255,255,255,0.06);
/* left/top siguen al cursor instantáneamente; el resto suaviza la
transformación de pill → círculo + el fade del fondo */
transition: left 0s, top 0s, transform 0s, border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.play-btn svg { width: 18px; height: 18px; }
/* ══════════════════════════════════════════════════════════════════
Logos / Marquee
══════════════════════════════════════════════════════════════════ */
.logos {
position: relative;
z-index: auto;
/* Mitad inferior del degradado continuo stats → logos · arranca en el midpoint */
background: linear-gradient(to bottom, #f8fafc 0%, #f2f5f8 100%);
padding: 60px 0;
border-bottom: 1px solid #eee;
}
.logos-title {
text-align: center;
font-family: 'Visuelt Pro', system-ui, -apple-system, sans-serif;
font-size: 2.2rem;
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
color: #647483;
margin-bottom: 40px;
/* Aparece con fade-up cuando JS añade .is-visible (1.2 s después de que la
sección entra en viewport, dejando que las stats completen su scramble). */
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.logos-title.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.logos-title { opacity: 1; transform: none; transition: none; }
}
.logos-marquee {
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
overflow: hidden;
margin-top: 40px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.logos-marquee-track {
display: flex;
width: max-content;
animation: marquee 30s linear infinite;
}
.logos-marquee-track img {
display: block;
height: 70px;
width: auto;
flex-shrink: 0;
padding-right: 0;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ══════════════════════════════════════════════════════════════════
Timeline
══════════════════════════════════════════════════════════════════ */
.timeline {
margin: 120px 0 50px;
position: relative;
}
.timeline-groups {
display: grid;
grid-template-columns: 3fr 2fr 3fr;
margin-bottom: 28px;
}
/* Cada group entra por separado (controlado por JS con .revealed) */
.timeline-group {
position: relative;
text-align: center;
padding: 0 6px 8px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.timeline-group.revealed {
opacity: 1;
transform: none;
}
.timeline-group-eyebrow {
display: block;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.7rem;
color: #8a9baa;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0 0 10px;
font-weight: 400;
}
.timeline-group-label {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 2.2rem;
font-weight: 300;
color: #0e1a26;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 14px;
/* Reserve 2 lines so all 3 group-labels share the same height,
keeping eyebrows · separators · descs · brackets aligned across columns
even when "Diseño de producto" wraps in narrower viewports. */
min-height: 2lh;
}
.timeline-group-sep {
width: 30px;
height: 2px;
background: #647483;
margin: 0 auto 14px;
}
.timeline-group-desc {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 0.875rem;
font-weight: 400;
color: #647483;
line-height: 1.55;
max-width: 280px;
margin: 0 auto 16px;
}
.timeline-group-bracket {
position: relative;
height: 12px;
margin: 0 6px;
}
.timeline-group-bracket::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: #647483;
transform: scaleX(0);
transform-origin: left center;
transition:
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
background 0.35s ease,
height 0.35s ease;
}
.timeline-group.revealed .timeline-group-bracket::before {
transform: scaleX(1);
}
.timeline-group-bracket span {
position: absolute;
top: 0;
width: 1px;
height: 12px;
background: #647483;
opacity: 0;
transition:
opacity 0.3s ease 0.85s,
background 0.35s ease,
height 0.35s ease;
}
.timeline-group-bracket span:first-child { left: 0; }
.timeline-group-bracket span:last-child { right: 0; }
.timeline-group.revealed .timeline-group-bracket span { opacity: 1; }
/* ── Hover spotlight: el bloque hovered se intensifica · los otros se atenúan ──
También dim de las sub-fases del timeline que NO pertenecen al bloque hovered. */
.timeline-group {
transition: opacity 0.4s ease;
}
.timeline-group-eyebrow,
.timeline-group-label,
.timeline-group-desc {
transition: color 0.35s ease;
}
.timeline-group-sep {
transition: background 0.35s ease, width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Bloque hovered: intensificar tipografía, separador y bracket */
.timeline-group:hover .timeline-group-eyebrow {
color: #647483;
}
.timeline-group:hover .timeline-group-desc {
color: #3a4f5f;
}
.timeline-group:hover .timeline-group-sep {
background: #0e1a26;
width: 48px;
}
.timeline-group:hover .timeline-group-bracket::before,
.timeline-group:hover .timeline-group-bracket span {
background: #0e1a26;
}
.timeline-group:hover .timeline-group-bracket::before {
height: 1.5px;
}
.timeline-group:hover .timeline-group-bracket span {
height: 14px;
}
/* Atenuar los otros bloques cuando uno está hovered */
.timeline-groups:has(.timeline-group:hover) .timeline-group:not(:hover) {
opacity: 0.4;
}
/* Cross-highlight: dim sub-fases que NO pertenecen al bloque hovered */
/* Bloque 1 (Consultoría) → fases 01, 02, 03 → steps 1-3 */
.timeline:has(.timeline-groups > .timeline-group:nth-child(1):hover) .timeline-step.revealed:nth-child(n+4) {
opacity: 0.3;
}
/* Bloque 2 (Diseño de producto) → fases 04, 05 → steps 4-5 */
.timeline:has(.timeline-groups > .timeline-group:nth-child(2):hover) .timeline-step.revealed:nth-child(-n+3),
.timeline:has(.timeline-groups > .timeline-group:nth-child(2):hover) .timeline-step.revealed:nth-child(n+6) {
opacity: 0.3;
}
/* Bloque 3 (Desarrollo tecnológico) → fases 06, 07, 08 → steps 6-8 */
.timeline:has(.timeline-groups > .timeline-group:nth-child(3):hover) .timeline-step.revealed:nth-child(-n+5) {
opacity: 0.3;
}
.timeline-bar {
position: relative;
width: 100%;
height: 24px;
margin-bottom: 0;
clip-path: inset(-10px 100% -10px 0);
transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 2;
}
/* Cada etapa revela un tramo del bar correspondiente al group activo:
stage-1 = 3/8 (37.5%) · stage-2 = 5/8 (62.5%) · stage-3 = 8/8 (100%) */
.timeline.bar-stage-1 .timeline-bar { clip-path: inset(-10px 62.5% -10px 0); }
.timeline.bar-stage-2 .timeline-bar { clip-path: inset(-10px 37.5% -10px 0); }
.timeline.bar-stage-3 .timeline-bar { clip-path: inset(-10px 0 -10px 0); }
.timeline-bar-fill {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(to right, #c8d2dc 0%, #647483 50%, #2c3e50 100%);
clip-path: polygon(0 85%, 100% 0, 100% 100%, 0 100%);
border-radius: 2px;
}
/* (eliminado: el bar ahora se revela por tramos via .bar-stage-N) */
.timeline-bar-fill::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 128px 128px;
opacity: 0.75;
mix-blend-mode: overlay;
}
.timeline-bar::after {
content: '';
position: absolute;
bottom: -5px; left: 0;
width: 100%; height: 2px;
background: linear-gradient(to right, #c8d2dc 0%, #647483 50%, #2c3e50 100%);
}
.timeline-steps {
display: grid;
grid-template-columns: repeat(8, 1fr);
position: relative;
}
.timeline-step {
text-align: center;
position: relative;
padding-top: 20px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.timeline-step.revealed {
opacity: 1;
transform: none;
}
.timeline-steps:hover .timeline-step.revealed { opacity: 0.5; }
.timeline-steps .timeline-step.revealed:hover { opacity: 1; }
.timeline-step::before,
.timeline-step::after {
content: '';
position: absolute;
top: 0; left: 50%;
border-radius: 50%;
border: 1px solid rgba(163, 177, 190, 0.2);
background: radial-gradient(circle, rgba(163, 177, 190, 0.06) 0%, transparent 70%);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
pointer-events: none;
z-index: 0;
}
.timeline-step::before {
width: 160px; height: 160px;
border-color: rgba(255, 255, 255, 0.9);
background: transparent;
z-index: 3;
}
.timeline-step::after {
width: 260px; height: 260px;
border-color: rgba(163, 177, 190, 0.15);
background: #e7eaec;
box-shadow: 0 0 0 130px #f6f7f8, 0 0 0 131px rgba(163, 177, 190, 0.07);
transition-delay: 0.08s;
}
.timeline-step:hover::before,
.timeline-step:hover::after {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
.timeline-marker::before {
content: '';
position: absolute;
top: -4px; left: 50%;
width: 10px; height: 10px;
border-radius: 50%;
background: #647483;
transform: translateX(-50%) scale(0);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline-step:hover .timeline-marker::before {
transform: translateX(-50%) scale(1);
}
.timeline-step:hover .timeline-num {
transform: translateX(-50%) translateY(-6px);
color: #647483;
}
.timeline-marker {
position: absolute;
top: -38px; left: 50%;
width: 0.5px; height: 52px;
background: #a3b1be;
transform: translateX(-50%) scaleY(0);
transform-origin: bottom center;
transition: transform 0.4s ease;
z-index: 2;
}
.timeline-step.revealed .timeline-marker {
transform: translateX(-50%) scaleY(1);
}
.timeline-num {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.7rem;
color: #a3b1be;
letter-spacing: 0.05em;
display: block;
position: absolute;
top: -56px; left: 50%;
transform: translateX(-50%);
transition: transform 0.3s ease, color 0.3s ease;
white-space: nowrap;
z-index: 2;
}
.timeline-label {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.05rem;
font-weight: 500;
color: #3a4f5f;
margin-bottom: 4px;
position: relative;
z-index: 2;
}
.timeline-sublabel {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
color: #8a9baa;
line-height: 1.4;
position: relative;
z-index: 2;
}
.timeline-icon {
display: block;
width: 28px; height: 28px;
margin: 10px auto 0;
position: relative;
z-index: 2;
opacity: 0;
transform: translateY(6px) scale(0.7);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline-step:hover .timeline-icon {
opacity: 1;
transform: translateY(0) scale(1);
}
.timeline-icon svg {
width: 100%; height: 100%;
stroke: #647483;
fill: none;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.timeline-icon svg .anim-draw {
stroke-dasharray: 200;
stroke-dashoffset: 200;
transition: stroke-dashoffset 0.8s ease 0.15s;
}
.timeline-step:hover .timeline-icon svg .anim-draw { stroke-dashoffset: 0; }
.timeline-icon svg .anim-spin {
transform-origin: center;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
transform: rotate(-90deg);
}
.timeline-step:hover .timeline-icon svg .anim-spin { transform: rotate(0deg); }
.timeline-icon svg .anim-scale {
transform-origin: center;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
transform: scale(0);
}
.timeline-step:hover .timeline-icon svg .anim-scale { transform: scale(1); }
/* ══════════════════════════════════════════════════════════════════
Tech Grid
══════════════════════════════════════════════════════════════════ */
.tech-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 40px;
}
.tech-item {
border: 1px solid #e8ecf0;
border-right: none;
padding: 32px 28px;
display: flex;
flex-direction: column;
min-height: 420px;
transition: background 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, opacity 0.7s ease;
transform-style: preserve-3d;
position: relative;
z-index: 1;
opacity: 0;
transform: translateX(-30px);
}
.tech-item.revealed {
opacity: 1;
transform: translateX(0);
}
.tech-item::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
background-size: 128px 128px;
pointer-events: none;
z-index: 0;
}
.tech-item:hover::before { opacity: 1; }
.tech-item > * { position: relative; z-index: 1; }
.tech-grid:hover .tech-item:not(:hover) { filter: blur(2px); opacity: 0.5; }
.tech-item:hover {
background: #4a5a68;
transform: scale(1.03);
box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(100,116,131,0.2);
z-index: 2;
border-color: transparent;
}
.tech-item:hover .tech-label { color: #fff; }
.tech-item:hover .tech-separator { background: #ffffff; }
.tech-item:hover .tech-name { color: #ffffff; }
.tech-item:hover .tech-desc { color: #ffffff; }
.tech-item:hover .tech-icon {
filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,0.5)) drop-shadow(0 0 14px rgba(255,255,255,0.25));
animation: iconFloat 2s ease-in-out infinite;
}
@keyframes iconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.tech-item:last-child { border-right: 1px solid #e8ecf0; }
.tech-item:last-child:hover { border-color: transparent; }
.tech-label {
font-size: 6rem;
font-weight: 300;
letter-spacing: -0.03em;
color: #647483;
line-height: 1;
height: 124px;
margin-bottom: 0;
transition: color 0.5s ease;
}
.tech-separator {
width: 30px; height: 2px;
background: #647483;
margin-bottom: 14px;
transition: background 0.5s ease;
}
.tech-name {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.1rem;
font-weight: 500;
color: #3a4f5f;
margin-bottom: 40px;
transition: color 0.5s ease;
}
.tech-icon {
margin-top: auto;
margin-bottom: 16px;
width: 80px; height: 80px;
transition: filter 0.5s ease;
}
.tech-desc {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
color: #8a9baa;
line-height: 1.5;
padding-top: 8px;
}
/* ══════════════════════════════════════════════════════════════════
Products
══════════════════════════════════════════════════════════════════ */
.products-header {
text-align: center;
margin-bottom: 16px;
}
.products-header .section-title { margin-bottom: 16px; }
.products-subtitle {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.95rem;
color: #647483;
line-height: 1.7;
text-transform: uppercase;
text-align: center;
margin-bottom: 50px;
}
.products-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px 40px;
}
.product-card {
border-radius: 0;
overflow: visible;
border: none;
background: transparent;
}
.product-img {
aspect-ratio: 16/9;
background: #f0f0f4;
overflow: hidden;
border-radius: 0;
}
.product-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.product-info { padding: 20px 0 0 0; }
.product-name {
font-size: 1.6rem;
font-weight: 700;
color: #546878;
margin-bottom: 4px;
}
.product-desc {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
color: #8a9baa;
line-height: 1.5;
margin-bottom: 16px;
}
.product-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 1.05rem;
font-weight: 500;
color: #647483;
padding: 14px 32px;
border: 1px solid #c8ced6;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.product-cta .arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.product-cta:hover {
background: #546878;
border-color: #546878;
color: #ffffff;
}
.product-cta:hover .arrow { transform: translateX(6px); }
/* ══════════════════════════════════════════════════════════════════
Solutions
══════════════════════════════════════════════════════════════════ */
.solutions-list { margin-top: 0; }
.solution-item {
display: grid;
grid-template-columns: 1fr 1fr 2fr auto;
gap: 40px;
align-items: start;
padding: 40px 0;
border-top: 1px solid #d0d5dd;
}
.solution-item:last-child { border-bottom: 1px solid #d0d5dd; }
.solution-name {
font-size: 2.2rem;
font-weight: 300;
color: #647483;
line-height: 1.2;
}
.solution-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.solution-desc {
font-size: 1.05rem;
color: #647483;
font-weight: 500;
line-height: 1.5;
}
.solution-products {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.8rem;
color: #8a9baa;
}
.solution-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 1.05rem;
font-weight: 500;
color: #647483;
padding: 14px 32px;
border: 1px solid #c8ced6;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
align-self: end;
}
.solution-cta .arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.solution-cta:hover {
background: #546878;
border-color: #546878;
color: #ffffff;
}
.solution-cta:hover .arrow { transform: translateX(6px); }
/* ══════════════════════════════════════════════════════════════════
Projects Grid
══════════════════════════════════════════════════════════════════ */
.projects-header {
text-align: center;
margin-bottom: 50px;
}
.projects-header .section-title { margin-bottom: 12px; }
.projects-subtitle {
font-size: 0.9rem;
color: #a3b1be;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 50px;
}
.projects-grid img, .projects-grid a img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.8s ease;
will-change: transform;
}
.projects-grid a {
display: block;
overflow: hidden;
position: relative;
}
.projects-grid a::after {
content: '';
position: absolute;
inset: 0;
background: rgba(100,116,131,0);
transition: background 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
}
.projects-grid a:hover::after { background: rgba(100,116,131,0.12); }
.projects-grid a:hover img { transform: scale(1.03); }
.projects-cta { text-align: center; margin-top: 60px; }
/* CTA "línea + flecha gigante" bajo los casos destacados de la home.
(El markup vive en page.tsx · projects-cta-line + num/label/arrow.) */
.projects-cta-line {
display: flex;
align-items: center;
gap: 36px;
margin-top: 64px;
padding: 38px 0;
border-top: 1px solid #e8ecf0;
border-bottom: 1px solid #e8ecf0;
text-decoration: none;
color: #0e1a26;
}
.projects-cta-line-num {
flex-shrink: 0;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 0.72rem; /* mismo tamaño que el "CASOS" pequeño */
line-height: 1;
color: #647483;
}
.projects-cta-line-num small {
font-family: 'PP Neue Montreal', ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8a9baa;
margin-left: 6px;
}
.projects-cta-line-label {
flex-shrink: 0;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(1.3rem, 2.4vw, 2rem);
letter-spacing: -0.02em;
color: #647483;
}
.projects-cta-line-arrow {
margin-left: auto;
flex-shrink: 0;
width: clamp(120px, 16vw, 200px);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.projects-cta-line-arrow svg {
display: block;
width: 100%;
height: auto;
stroke: #647483; /* mismo gris que los h1 de sección */
overflow: visible;
}
/* Trazo fino y constante · non-scaling-stroke evita que engorde al escalar el SVG */
.projects-cta-line-arrow svg line,
.projects-cta-line-arrow svg polyline {
vector-effect: non-scaling-stroke;
stroke-width: 1.25;
}
.projects-cta-line:hover .projects-cta-line-arrow { transform: translateX(12px); }
.projects-cta-line:hover .projects-cta-line-label { color: #0e1a26; }
@media (max-width: 720px) {
.projects-cta-line { flex-wrap: wrap; gap: 16px; }
.projects-cta-line-arrow { margin-left: 0; width: 150px; }
}
/* ══════════════════════════════════════════════════════════════════
Project Template
══════════════════════════════════════════════════════════════════ */
.project-hero {
margin-top: 72px;
position: relative;
width: 100%;
aspect-ratio: 16/7;
overflow: hidden;
}
.project-hero img,
.project-hero video {
width: 100%; height: 100%;
object-fit: cover;
}
.project-hero-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 60px 0;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.project-hero-overlay h1 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 5vw, 4.5rem);
color: #fff;
line-height: 1.1;
}
.project-meta {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
padding: 80px 0;
border-bottom: 1px solid rgba(100,116,131,0.15);
}
.project-meta-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: #8a9baa;
margin-bottom: 8px;
}
.project-meta-value {
font-size: 1rem;
color: #647483;
line-height: 1.8;
}
.project-description {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
padding: 80px 0;
}
.project-description h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2rem, 3.5vw, 3rem);
color: #647483;
line-height: 1.15;
}
.project-description p {
font-size: 1.1rem;
color: #8a9baa;
line-height: 1.8;
}
.project-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 80px 0;
border-top: 1px solid rgba(100,116,131,0.15);
border-bottom: 1px solid rgba(100,116,131,0.15);
}
.project-stat-number {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 3.5rem;
color: #647483;
line-height: 1;
margin-bottom: 8px;
}
.project-stat-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
color: #8a9baa;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.project-tech {
display: flex;
gap: 12px;
flex-wrap: wrap;
padding: 40px 0;
}
.project-tech-tag {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.8rem;
font-weight: 500;
color: #647483;
border: 1px solid rgba(100,116,131,0.3);
padding: 8px 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.next-project {
padding: 80px 0;
border-top: 1px solid rgba(100,116,131,0.15);
}
.next-project-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: #8a9baa;
margin-bottom: 16px;
}
.next-project a {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2rem, 4vw, 3.5rem);
color: #647483;
transition: color 0.3s;
display: inline-flex;
align-items: center;
gap: 16px;
text-decoration: none;
}
.next-project a:hover { color: #4a5a68; }
.next-project a .arrow {
font-size: 1.5rem;
transition: transform 0.3s;
}
.next-project a:hover .arrow { transform: translateX(8px); }
/* ══════════════════════════════════════════════════════════════════
Sector Template
══════════════════════════════════════════════════════════════════ */
.sector-hero {
margin-top: 72px;
padding: 120px 0 80px;
background: #f2f5f8;
}
.sector-hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
}
.sector-hero h1 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(3rem, 6vw, 5.5rem);
color: #647483;
line-height: 1.05;
}
.sector-hero-desc {
font-size: 1.1rem;
color: #8a9baa;
line-height: 1.8;
max-width: 500px;
}
.sector-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding: 80px 0;
border-bottom: 1px solid rgba(100,116,131,0.15);
}
.sector-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding: 80px 0;
align-items: center;
}
.sector-feature img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
border-radius: 2px;
}
.sector-feature h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2rem, 3.5vw, 3rem);
color: #647483;
line-height: 1.15;
margin-bottom: 24px;
}
.sector-feature p {
font-size: 1.05rem;
color: #8a9baa;
line-height: 1.8;
}
.sector-trends { padding: 80px 0; }
.sector-trends-header { margin-bottom: 60px; }
.sector-trends-header h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 4vw, 4rem);
color: #647483;
line-height: 1.1;
}
/* ══════════════════════════════════════════════════════════════════
Service pages
══════════════════════════════════════════════════════════════════ */
.section-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: #8a9baa;
margin-bottom: 12px;
display: block;
}
.service-hero {
position: relative;
margin-top: 72px;
padding: 120px 0 80px;
background: #3d4d5c;
overflow: hidden;
}
.service-hero-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
pointer-events: none;
}
.service-hero-left {
display: flex;
flex-direction: column;
}
.service-hero-content {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
}
.service-hero h1 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(3rem, 6vw, 5.5rem);
color: #ffffff;
line-height: 1.05;
visibility: hidden;
}
.service-hero-title.typing-ready { visibility: visible; }
.service-hero-title .char {
opacity: 0;
display: inline;
animation: charAppear 0.05s forwards;
}
.service-hero-title .cursor {
display: inline-block;
width: 0;
border-left: 3px solid #ffffff;
height: 0.9em;
vertical-align: baseline;
margin-left: 2px;
animation: blink 0.7s step-end infinite;
}
.service-hero-icon {
width: 64px;
height: 64px;
margin-bottom: 24px;
filter: brightness(0) invert(1);
}
.service-hero-right {
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
}
.service-hero-desc {
font-size: 1.1rem;
color: rgba(255,255,255,0.6);
line-height: 1.8;
max-width: 500px;
}
.service-hero .btn-primary {
background: rgba(255,255,255,0.1);
border: 2px solid #ffffff;
color: #fff;
padding: 14px 32px;
}
.service-hero .btn-primary:hover {
background: rgba(255,255,255,0.2);
border-color: #fff;
}
.service-overview {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
padding: 80px 0;
border-bottom: 1px solid rgba(100,116,131,0.15);
}
.service-overview h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2rem, 3.5vw, 3rem);
color: #647483;
line-height: 1.15;
}
.service-overview-text p {
font-size: 1.05rem;
color: #8a9baa;
line-height: 1.8;
}
.service-overview-text p + p { margin-top: 24px; }
.service-capabilities { padding: 80px 0; }
.service-capabilities-header { margin-bottom: 60px; }
.service-capabilities-header h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 4vw, 4rem);
color: #647483;
line-height: 1.1;
}
.service-capabilities-header p {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #8a9baa;
margin-top: 12px;
}
.service-process {
padding: 80px 0;
background: #f2f5f8;
}
.service-process .section-header {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
align-items: start;
margin-bottom: 0;
}
.service-process-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 4vw, 4rem) !important;
color: #647483;
line-height: 1.1;
}
.service-faq {
padding: 80px 0;
border-top: 1px solid rgba(100,116,131,0.15);
}
.service-faq-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
.service-faq h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2rem, 3.5vw, 3rem);
color: #647483;
line-height: 1.15;
}
.faq-item { border-bottom: 1px solid rgba(100,116,131,0.15); }
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
cursor: pointer;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #3a4f5f;
transition: color 0.2s;
}
.faq-question:hover { color: #1e2e3a; }
.faq-icon {
font-size: 1.4rem;
line-height: 1;
transition: transform 0.3s;
flex-shrink: 0;
margin-left: 16px;
}
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-answer-inner {
padding: 0 0 24px;
font-size: 0.95rem;
color: #8a9baa;
line-height: 1.8;
}
.trends-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.trend-item {
padding: 32px;
border: 1px solid rgba(100,116,131,0.12);
transition: all 0.4s ease;
}
.trend-item:hover {
border-color: rgba(100,116,131,0.3);
box-shadow: 0 8px 30px rgba(100,116,131,0.08);
}
.trend-icon {
width: 48px; height: 48px;
margin-bottom: 20px;
color: #647483;
}
.trend-icon svg { width: 100%; height: 100%; }
.service-capabilities .trend-icon svg { stroke-width: 0.75; }
.trend-icon svg [data-len] {
transition: stroke-dashoffset 2.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}
.trend-item.visible .trend-icon svg [data-len] {
stroke-dashoffset: 0 !important;
}
.trend-item h3 {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 1rem;
font-weight: 500;
color: #647483;
margin-bottom: 12px;
}
.trend-item p {
font-size: 0.9rem;
color: #8a9baa;
line-height: 1.7;
}
.service-process + .sector-cases {
border-top: 1px solid rgba(100,116,131,0.15);
}
.sector-cases {
padding: 80px 0;
background: #f2f5f8;
}
.sector-cases-header { margin-bottom: 50px; }
.sector-cases-header h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2rem, 3.5vw, 3rem);
color: #647483;
line-height: 1.15;
}
.sector-cases-header p {
font-size: 1rem;
color: #8a9baa;
margin-top: 12px;
}
.cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.case-card {
display: block;
position: relative;
text-decoration: none;
}
.case-card-image {
position: relative;
overflow: hidden;
}
.case-card-image img {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
.case-card-image::after {
content: '';
position: absolute;
inset: 0;
background: rgba(100,116,131,0);
transition: background 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
}
.case-card:hover .case-card-image img { transform: scale(1.03); }
.case-card:hover .case-card-image::after { background: rgba(100,116,131,0.12); }
.case-card-info { padding: 20px 0; }
.case-card-info h3 {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: #647483;
margin-bottom: 4px;
}
.case-card-info p {
font-size: 0.85rem;
color: #8a9baa;
}
.cta-need {
padding: 80px 0;
text-align: center;
}
.cta-need h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 4vw, 4rem);
color: #647483;
line-height: 1.1;
margin-bottom: 24px;
}
.cta-need p {
font-size: 1.05rem;
color: #8a9baa;
margin-bottom: 32px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.imascono-tech {
padding: 80px 0;
border-top: 1px solid rgba(100,116,131,0.15);
}
.imascono-tech-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
}
.imascono-tech h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: #647483;
line-height: 1.1;
}
.imascono-tech h2 span {
display: block;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: #8a9baa;
margin-bottom: 12px;
}
.imascono-tech p {
font-size: 1.05rem;
color: #8a9baa;
line-height: 1.8;
}
/* ══════════════════════════════════════════════════════════════════
Blog Template
══════════════════════════════════════════════════════════════════ */
.blog-hero {
margin-top: 72px;
position: relative;
padding: 0;
overflow: hidden;
}
.blog-hero-image {
width: 100%;
aspect-ratio: 21/9;
overflow: hidden;
position: relative;
}
.blog-hero-image img {
width: 100%; height: 100%;
object-fit: cover;
}
.blog-hero-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%);
}
.blog-hero-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 60px 0;
z-index: 1;
}
.blog-meta {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.7);
margin-bottom: 20px;
display: flex;
gap: 24px;
}
.blog-hero h1 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.2rem, 4vw, 3.2rem);
color: #fff;
line-height: 1.2;
max-width: 700px;
}
.blog-hero-intro {
font-size: 1.05rem;
color: rgba(255,255,255,0.75);
line-height: 1.8;
max-width: 600px;
margin-top: 20px;
}
.blog-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 60px;
max-width: 1440px;
margin: 0 auto;
padding: 80px 40px;
align-items: start;
}
.blog-layout > article:only-child {
grid-column: 1 / -1;
}
.blog-toc {
position: sticky;
top: 92px;
}
.blog-toc-title {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: #8a9baa;
margin-bottom: 16px;
}
.blog-toc a {
display: block;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.8rem;
color: #8a9baa;
line-height: 1.5;
padding: 8px 0 8px 12px;
border-left: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
text-decoration: none;
}
.blog-toc a:hover { color: #647483; }
.blog-toc a.active { color: #3a4f5f; border-left-color: #647483; }
.blog-content,
.post-body-editor {
max-width: 800px;
}
.post-body-editor { font-family: 'Visuelt Pro', system-ui, sans-serif; color: #647483; outline: none; }
.post-body-editor h3 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 400;
font-size: 1.3rem;
color: #3a4f5f;
line-height: 1.3;
margin: 18px 0 10px;
}
.post-body-editor p {
font-size: 1rem;
color: #647483;
line-height: 1.8;
margin-bottom: 14px;
}
.post-body-editor ul,
.post-body-editor ol {
margin-bottom: 14px;
padding-left: 20px;
}
.post-body-editor ul li,
.post-body-editor ol li {
font-size: 1rem;
color: #647483;
line-height: 1.8;
margin-bottom: 8px;
}
.post-body-editor strong { color: #3a4f5f; }
.post-body-editor a { color: #3a4f5f; text-decoration: underline; }
.post-body-editor em { font-style: italic; }
.post-body-editor:empty::before,
.post-body-editor p:first-child:empty::before {
content: 'Escribe el contenido de la sección…';
color: #8a9baa;
}
.blog-content h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(1.8rem, 3vw, 2.5rem);
color: #647483;
line-height: 1.2;
margin-top: 60px;
margin-bottom: 24px;
}
.blog-content h2:first-child { margin-top: 0; }
.blog-content p {
font-size: 1.05rem;
color: #647483;
line-height: 1.9;
margin-bottom: 20px;
}
.blog-content ul {
list-style: none;
margin-bottom: 24px;
padding: 0;
}
.blog-content ul li {
font-size: 1.05rem;
color: #647483;
line-height: 1.9;
padding-left: 20px;
position: relative;
margin-bottom: 16px;
}
.blog-content ul li::before {
content: '';
position: absolute;
left: 0; top: 12px;
width: 6px; height: 6px;
background: #8a9baa;
border-radius: 50%;
}
.blog-content ul li strong { color: #3a4f5f; }
.blog-content .blog-image {
margin: 40px 0;
border-radius: 2px;
overflow: hidden;
}
.blog-content .blog-image img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.blog-content .blog-image-caption {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.8rem;
color: #8a9baa;
margin-top: 12px;
font-style: italic;
}
.blog-cta-inline {
background: #f2f5f8;
padding: 40px;
margin: 48px 0;
border-left: 3px solid #647483;
}
.blog-cta-inline h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 400;
font-size: 1.3rem;
color: #647483;
margin-bottom: 8px;
}
.blog-cta-inline p {
font-size: 0.95rem;
color: #8a9baa;
margin-bottom: 16px;
}
.blog-cta-inline .btn-primary { display: inline-block; }
.blog-tags-section {
border-top: 1px solid rgba(100,116,131,0.15);
}
.blog-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 40px 0;
}
.blog-tag {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
color: #647483;
border: 1px solid rgba(100,116,131,0.3);
padding: 6px 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ══════════════════════════════════════════════════════════════════
Blog List & Portfolio List
══════════════════════════════════════════════════════════════════ */
.blog-list-hero,
.portfolio-hero {
margin-top: 72px;
padding: 120px 0 80px;
background: #f2f5f8;
}
.portfolio-hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
}
.blog-list-hero h1,
.portfolio-hero h1 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(3rem, 6vw, 5.5rem);
color: #647483;
line-height: 1.05;
}
.blog-list-hero-desc {
font-size: 1.1rem;
color: #647483;
line-height: 1.8;
max-width: 600px;
margin-top: 20px;
}
.portfolio-hero-desc {
font-size: 1.1rem;
color: #8a9baa;
line-height: 1.8;
max-width: 500px;
}
.blog-list-section,
.portfolio-section {
padding: 80px 0;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.blog-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border: 1px solid rgba(100,116,131,0.15);
border-radius: 2px;
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
}
.blog-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
.blog-filter {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.blog-filters-wrap {
display: flex;
flex-direction: column;
gap: 18px;
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: 1px solid rgba(100,116,131,0.12);
}
.blog-filter-group { display: flex; flex-direction: column; gap: 8px; }
.blog-filter-group-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.68rem;
letter-spacing: 2px;
color: #8a9baa;
text-transform: uppercase;
font-weight: 500;
}
.blog-filter-btn {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.8rem;
font-weight: 500;
color: #647483;
background: transparent;
border: 1px solid rgba(100,116,131,0.25);
padding: 8px 20px;
border-radius: 50px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.blog-filter-btn:hover { border-color: #647483; }
.blog-filter-btn.active { background: #647483; color: #fff; border-color: #647483; }
.blog-card.featured {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr auto;
border: 1px solid rgba(100,116,131,0.1);
gap: 0;
margin-bottom: 8px;
}
.blog-card.featured .blog-card-image {
aspect-ratio: auto;
grid-row: 1 / -1;
min-height: 480px;
}
.blog-card.featured .blog-card-body {
padding: 48px 48px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-card.featured .blog-card-body h2 {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 300;
line-height: 1.25;
margin-bottom: 0;
}
.blog-card.featured .blog-card-footer { padding: 0 48px 48px; align-self: end; }
.blog-card-meta .blog-card-time { font-weight: 500; }
.blog-card-meta .blog-card-tags { color: #a0adb8; }
.blog-card-image {
width: 100%;
aspect-ratio: 16/10;
overflow: hidden;
}
.blog-card-image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.blog-card:hover .blog-card-image img { transform: scale(1.03); }
.blog-card-body {
padding: 24px 24px 0;
flex: 1;
}
.blog-card-body h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 400;
font-size: 1.2rem;
color: #3a4f5f;
line-height: 1.4;
}
.blog-card-footer { padding: 16px 24px 24px; }
.blog-card-meta {
display: flex;
gap: 16px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
color: #8a9baa;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ── Portfolio Filters ── */
.portfolio-filters {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.portfolio-filter-btn {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.8rem;
padding: 8px 20px;
border: 1px solid rgba(100,116,131,0.25);
background: transparent;
color: #8a9baa;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s;
}
.portfolio-filter-btn:hover { border-color: #647483; color: #647483; }
.portfolio-filter-btn.active { background: #647483; border-color: #647483; color: #fff; }
/* ── Portfolio Grid (Overlay) ── */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.portfolio-card-overlay {
display: block;
position: relative;
overflow: hidden;
}
.portfolio-card-overlay-image {
overflow: hidden;
position: relative;
aspect-ratio: 16/10;
}
.portfolio-card-overlay-image img,
.portfolio-card-overlay-image video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.85);
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s;
will-change: transform;
}
.portfolio-card-overlay:hover .portfolio-card-overlay-image img,
.portfolio-card-overlay:hover .portfolio-card-overlay-image video {
transform: scale(1.05);
filter: brightness(0.7);
}
.portfolio-card-overlay-content {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 36px;
transition: background 0.6s;
}
.portfolio-card-overlay-text {
transform: translateY(40px);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-card-overlay:hover .portfolio-card-overlay-text {
transform: translateY(0);
}
.portfolio-card-overlay-sector {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.7rem;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.portfolio-card-overlay-content h2 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 1.6rem;
color: #fff;
margin-bottom: 0;
}
.portfolio-card-overlay-arrow {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.8rem;
color: rgba(255,255,255,0.7);
opacity: 0;
transition: opacity 0.4s 0.1s;
margin-top: 12px;
}
.portfolio-card-overlay-arrow .arrow {
display: inline-block;
transition: transform 0.3s;
}
.portfolio-card-overlay:hover .portfolio-card-overlay-arrow {
opacity: 1;
}
.portfolio-card-overlay:hover .portfolio-card-overlay-arrow .arrow {
transform: translateX(4px);
}
/* ══════════════════════════════════════════════════════════════════
Responsive
══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
Hamburger + mobile nav (visible ≤900 via .nav-hamburger block below)
═══════════════════════════════════════════════════════════════════════ */
.nav-hamburger {
display: none;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
margin-left: 4px;
z-index: 1001;
position: relative;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 1.5px;
background: #3a4f5f;
transition: transform 0.3s ease, opacity 0.2s ease;
transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-mobile {
position: fixed;
inset: 0;
background: rgba(58, 79, 95, 0.28);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.nav-mobile.open {
opacity: 1;
pointer-events: auto;
}
.nav-mobile-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(380px, 86vw);
background: #fff;
display: flex;
flex-direction: column;
padding: 88px 24px 24px;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: -20px 0 40px -20px rgba(58, 79, 95, 0.16);
}
.nav-mobile.open .nav-mobile-panel { transform: translateX(0); }
.nav-mobile-links {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.nav-mobile-item { border-bottom: 1px solid #eef2f5; }
.nav-mobile-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 18px 4px;
font-family: var(--font-sans, 'Visuelt Pro', 'Inter', system-ui, sans-serif);
font-size: 1.05rem;
font-weight: 500;
color: #3a4f5f;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
text-decoration: none;
letter-spacing: 0.02em;
}
.nav-mobile-link.has-sub .nav-mobile-chevron {
font-size: 1.2rem;
color: #8a9baa;
font-weight: 300;
transition: transform 0.2s ease;
}
.nav-mobile-link.has-sub.expanded .nav-mobile-chevron {
transform: rotate(45deg);
}
.nav-mobile-sub {
display: flex;
flex-direction: column;
padding: 0 4px 18px 4px;
gap: 2px;
}
.nav-mobile-sub-link {
display: flex;
flex-direction: column;
padding: 10px 0;
font-size: 0.9rem;
color: #647483;
text-decoration: none;
letter-spacing: 0.04em;
}
.nav-mobile-sub-link.overview {
color: #3a4f5f;
font-weight: 500;
border-bottom: 1px dashed #eef2f5;
margin-bottom: 6px;
padding-bottom: 12px;
}
.nav-mobile-sub-desc {
font-size: 0.72rem;
color: #a8b3bd;
margin-top: 2px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.nav-mobile-footer {
padding-top: 24px;
border-top: 1px solid #eef2f5;
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 16px;
}
.nav-mobile-langs {
display: flex;
gap: 20px;
justify-content: center;
}
.nav-mobile-footer .btn-primary {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 20px;
}
/* ═══════════════════════════════════════════════════════════════════════
Responsive breakpoints
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.hero-top { grid-template-columns: 1fr; gap: 40px; }
.hero-title { font-size: 2.8rem; min-height: auto; }
.section-header { grid-template-columns: 1fr; gap: 20px; }
.section-title { font-size: 2.4rem; }
.section-title.hero-lg { font-size: 3.2rem; }
.section-title.tech-size { font-size: 3rem; }
.tech-grid { grid-template-columns: repeat(2, 1fr); }
.products-grid { grid-template-columns: repeat(2, 1fr); }
.cta-grid { grid-template-columns: 1fr; gap: 40px; }
.footer-top { grid-template-columns: repeat(2, 1fr); }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
/* Home services · 3 → 1 col, separadores horizontales */
.home-services-grid { grid-template-columns: 1fr; }
.home-service-card {
border-right: none;
border-bottom: 1px solid #cfd6dc;
min-height: auto;
padding: 40px 32px 48px;
}
.home-service-card:last-child { border-bottom: none; }
.home-service-num { margin-bottom: 32px; }
.home-service-title { font-size: 2.4rem; }
}
/* ── Tablet & below: show hamburger, hide desktop nav ─────────────────── */
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-hamburger { display: flex; }
.header-actions .lang-link,
.header-actions .header-cta { display: none; }
.header-actions { gap: 8px; }
.header .container { justify-content: space-between; }
}
@media (max-width: 768px) {
.container { padding: 0 20px; }
/* Hero */
.hero-top { gap: 24px; }
.hero { min-height: auto; padding-bottom: 40px; }
.hero-title { font-size: 2.4rem; line-height: 1.05; }
.hero-desc { font-size: 0.9rem; }
.hero-buttons { flex-wrap: wrap; gap: 10px; }
.hero-buttons .btn-outline,
.hero-buttons .btn-primary { flex: 1 1 140px; justify-content: center; }
.hero-media { display: none; }
#hero-particles { display: none; }
.scroll-hint { display: none; }
/* Section headings */
.section { padding: 60px 0; }
.section-title { font-size: 2rem; }
.section-title.hero-lg { font-size: 2.4rem; }
.section-title.tech-size { font-size: 2.2rem; }
.section-desc { font-size: 0.95rem; }
/* Stats */
.stats { padding: 40px 0; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.stat-number { font-size: 2.4rem; }
/* Home services · ajustes mobile */
.home-services { padding: 60px 0; }
.home-services-header { margin-bottom: 32px; }
.home-service-card { padding: 32px 0 40px; }
.home-service-title { font-size: 2rem; }
.home-service-desc { font-size: 0.9rem; }
/* Timeline */
.timeline-steps { flex-direction: column; gap: 32px; align-items: flex-start; }
.timeline-bar { display: none; }
.timeline-step { width: 100%; align-items: flex-start; text-align: left; }
.timeline-groups { display: none; }
/* Tech */
.tech-grid { grid-template-columns: 1fr; gap: 20px; }
.tech-label { font-size: 4rem; }
/* Products */
.products-grid { grid-template-columns: 1fr; }
/* Solutions */
.solution-item { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
.solution-name { font-size: 1.5rem; }
/* Portfolio / case cards */
.portfolio-grid { grid-template-columns: 1fr; }
.portfolio-hero-content { grid-template-columns: 1fr; gap: 30px; }
/* Project (case study) template */
.project-hero { min-height: 320px; max-height: 45vh; }
.project-hero h1 { font-size: 2.2rem; }
.project-meta, .project-description { grid-template-columns: 1fr; gap: 30px; }
.project-stats { grid-template-columns: 1fr; }
/* Sector template */
.sector-hero-content { grid-template-columns: 1fr; gap: 30px; }
.sector-hero h1 { font-size: 2.4rem; }
.sector-stats { grid-template-columns: 1fr; }
.sector-feature { grid-template-columns: 1fr; }
.trends-grid { grid-template-columns: 1fr; }
.cases-grid { grid-template-columns: 1fr; }
.imascono-tech-grid { grid-template-columns: 1fr; }
/* Service template */
.service-hero-content { grid-template-columns: 1fr; gap: 24px; }
.service-hero-title { font-size: 2.4rem; }
.service-overview { grid-template-columns: 1fr; gap: 24px; }
.service-capabilities-header { grid-template-columns: 1fr; gap: 16px; }
.service-faq-grid { grid-template-columns: 1fr; gap: 20px; }
/* Blog */
.blog-grid { grid-template-columns: 1fr; }
.blog-list-hero, .portfolio-hero { padding: 80px 0 40px; }
.blog-card.featured { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
.blog-card.featured .blog-card-image { min-height: auto; aspect-ratio: 16/10; grid-row: auto; }
.blog-card.featured .blog-card-body { padding: 24px 24px 12px; }
.blog-card.featured .blog-card-body h2 { font-size: 1.4rem; }
.blog-card.featured .blog-card-footer { padding: 0 24px 24px; }
.blog-layout { grid-template-columns: 1fr; padding: 40px 20px; gap: 0; }
.blog-toc { position: static; display: none; }
.blog-cta-inline { padding: 24px; }
.blog-article h1 { font-size: 2rem; line-height: 1.15; }
.blog-article h2 { font-size: 1.5rem; }
.blog-article h3 { font-size: 1.2rem; }
.blog-article img { max-width: 100%; height: auto; }
/* Contact form */
.cta-section { padding: 60px 0; }
.cta-grid { grid-template-columns: 1fr; gap: 24px; }
.cta-title { font-size: 2.2rem; line-height: 1.1; }
.cta-form { max-width: 100%; }
.cta-form input,
.cta-form select,
.cta-form textarea { font-size: 1rem; }
/* Footer */
.footer-top { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.footer-bottom {
grid-template-columns: 1fr;
gap: 32px;
text-align: left;
}
.footer-services-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 480px) {
.footer-services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
/* Mobile phones */
.hero-title { font-size: 2rem; }
.section-title { font-size: 1.8rem; }
.section-title.hero-lg { font-size: 2.1rem; }
.section-title.tech-size { font-size: 2rem; }
.cta-title { font-size: 1.9rem; }
.project-hero h1 { font-size: 2rem; }
.sector-hero h1 { font-size: 2rem; }
.service-hero-title { font-size: 2rem; }
.blog-article h1 { font-size: 1.8rem; }
.footer-top { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
.container { padding: 0 16px; }
.hero-title { font-size: 1.8rem; }
.section-title { font-size: 1.6rem; }
.section-title.hero-lg { font-size: 1.9rem; }
.section-title.tech-size { font-size: 1.8rem; }
.cta-title { font-size: 1.7rem; }
.stat-number { font-size: 2rem; }
.stats-grid { gap: 20px; }
.logo img, .logo svg { max-height: 36px !important; }
.nav-mobile-panel { padding: 72px 20px 20px; width: min(340px, 90vw); }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.nav-mobile-panel,
.nav-hamburger span { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
Mega menu — grouped layout (Variante 1)
Used in: SERVICIOS (CONSULTORÍA / DISEÑO DE PRODUCTO / DESARROLLO TECNOLÓGICO)
═══════════════════════════════════════════════════════════════════════ */
.nav-mega-links--cols {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
padding-top: 0;
}
.nav-mega-col {
display: flex;
flex-direction: column;
}
.nav-mega-col .nav-mega-group {
display: block;
padding: 0 0 14px;
margin: 0 0 6px;
color: #fff;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
user-select: none;
pointer-events: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.25s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mega.active .nav-mega-col .nav-mega-group {
opacity: 1;
transform: translateY(0);
transition-delay: 0.08s;
}
/* Cabecera de grupo clicable (Servicio Principal · Consultoría/Diseño/Desarrollo).
La base .nav-mega-group tiene pointer-events:none — se reactiva aquí. */
.nav-mega-col a.nav-mega-group--linked {
pointer-events: auto;
cursor: pointer;
padding: 0 0 14px !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
transition: opacity 0.25s,
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.2s ease;
}
.nav-mega-col a.nav-mega-group--linked:hover {
border-bottom-color: rgba(255, 255, 255, 0.7);
}
/* Inside columns, links use a smaller padding/font and lose the heavy borders
(the column already separates them). */
.nav-mega-col a {
padding: 11px 0 !important;
font-size: 0.92rem;
text-transform: none;
font-weight: 400;
letter-spacing: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-mega-col a:first-of-type {
border-top: 0 !important;
}
/* Mega menu link with leading icon (e.g. filter glyph in CASOS) */
.nav-mega-link-label {
display: inline-flex;
align-items: center;
gap: 10px;
}
.nav-mega-link-icon {
flex-shrink: 0;
opacity: 0.7;
color: rgba(255, 255, 255, 0.85);
}
/* Mobile sub-link label with optional leading icon */
.nav-mobile-sub-link-label {
display: inline-flex;
align-items: center;
gap: 8px;
}
.nav-mobile-sub-link-label svg {
flex-shrink: 0;
opacity: 0.7;
}
/* Mobile sub-menu group header */
.nav-mobile-sub-group {
display: block;
padding: 14px 0 6px;
color: #3a4f5f;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
user-select: none;
border-top: 1px solid rgba(58, 79, 95, 0.1);
margin-top: 8px;
}
.nav-mobile-sub > .nav-mobile-sub-group:first-child {
border-top: 0;
margin-top: 0;
padding-top: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════
Case studies filters bar (/casos-de-exito)
═══════════════════════════════════════════════════════════════════════ */
.cs-filters {
margin-bottom: 32px;
}
.cs-filters-modes {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #eef2f5;
align-items: center;
}
.cs-filter-mode {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid #d4dce4;
background: #fff;
color: #647483;
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
transition: all 120ms ease;
}
.cs-filter-mode:hover {
border-color: #3a4f5f;
color: #3a4f5f;
}
.cs-filter-mode.active {
background: #3a4f5f;
color: #fff;
border-color: #3a4f5f;
}
.cs-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cs-chip {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid #e4e9ee;
background: #f8f9fb;
color: #647483;
font-size: 0.82rem;
text-decoration: none;
transition: all 120ms ease;
}
.cs-chip:hover {
border-color: #3a4f5f;
color: #3a4f5f;
}
.cs-chip.active {
background: #647483;
color: #fff;
border-color: #647483;
}
.cs-filter-empty {
color: #8a9baa;
font-size: 0.85rem;
font-style: italic;
}
/* ══════════════════════════════════════════════════════════════════
Sector template v2 · prefijo .s-* (no colisiona con .sector-* legacy)
Estructura de 13 bloques: hero · stats · tech 2×2 · cta-mid · timeline ·
cta-mid · cases · products · quote · cta-form · resources · faq · final-cta
══════════════════════════════════════════════════════════════════ */
/* ── 1 · Hero ── */
.s-hero { padding: 100px 0 60px; position: relative; overflow: hidden; }
/* El `.container` global aporta el max-width 1440px y padding lateral 40px
* para que el hero respete el cuerpo de la página como el resto. */
.s-hero > .container { position: relative; }
/* ════ Variante SH3 · split 50/50 limpio ════
* Grid duro 1fr 1fr · column-gap 0 (la imagen arranca exactamente al 50% de
* la línea central) · texto a la izquierda con padding-right para respirar
* sin tocar la imagen · derecha 50% imagen clean cut con colorización suave
* al color del h1 (#647483). Container global aporta los 40px laterales
* para que el hero respete el cuerpo de la página. */
.s-hero-split {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0;
min-height: 620px;
position: relative;
}
.s-hero-text-col {
background: #fff;
padding: 60px 80px 60px 0;
display: flex;
align-items: center;
position: relative;
}
.s-hero-text-inner {
width: 100%;
}
.s-hero-image-col {
position: relative;
overflow: hidden;
background: #f4f6f8;
/* Aísla el `mix-blend-mode` del overlay para que se aplique solo dentro
del bloque de imagen. */
isolation: isolate;
}
.s-hero-image-col img,
.s-hero-image-col video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Colorización suave al color del h1 (#647483) usando `mix-blend-mode: color`
— preserva la luminosidad de la foto pero adopta el matiz del overlay. */
.s-hero-image-col::after {
content: '';
position: absolute;
inset: 0;
background: #647483;
mix-blend-mode: color;
opacity: 0.08;
pointer-events: none;
z-index: 1;
}
@media (max-width: 960px) {
.s-hero { padding: 80px 0 40px; }
.s-hero-split {
grid-template-columns: 1fr;
column-gap: 0;
min-height: auto;
}
.s-hero-text-col { padding: 40px 0 60px; }
.s-hero-image-col { aspect-ratio: 16 / 10; min-height: 360px; }
}
/* Wrappers legacy mantenidos para compatibilidad si algún lugar todavía
* usa la variante anterior (project pages, etc.). */
.s-hero-content {
max-width: 600px;
position: relative;
}
/* Compatibilidad: si algún sector legacy renderiza .s-hero-grid, conserva
* el comportamiento anterior. */
.s-hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: end;
}
.s-hero-eyebrow { margin-bottom: 24px; display: block; }
.s-hero h1 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 6rem;
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
color: #647483;
margin-bottom: 32px;
}
.s-hero h1 em { font-style: normal; color: #8a9baa; }
.s-hero-desc {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.95rem;
color: #647483;
line-height: 1.7;
text-transform: uppercase;
margin-bottom: 40px;
max-width: 520px;
}
.s-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* Bloque "Confían en nosotros" debajo de los CTAs · misma columna que el texto. */
.s-hero-confian-block {
margin-top: 80px;
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.s-hero-confian-block .s-eyebrow { color: #647483; }
.s-hero-confian {
display: flex;
align-items: center;
gap: 48px;
flex-wrap: wrap;
}
.s-hero-confian img {
max-height: 32px;
width: auto;
opacity: 0.85;
}
/* Logos PNG/JPG renderizados con mask-image para que el color quede en la
* paleta del sitio (#647483) independientemente del color original del archivo.
* El archivo debe ser una silueta con alpha (fondo transparente). */
.s-confian-logo-masked {
display: inline-block;
width: 140px;
height: 48px;
background-color: #647483;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
opacity: 0.85;
}
.s-hero-divider { margin-top: 80px; height: 1px; background: #cfd6dc; }
/* Divisor genérico entre secciones · línea fina alineada al container.
* Va dentro de .s-section-divider-wrap para mantener su propio espacio
* vertical sin interferir con paddings de las secciones adyacentes.
* El margin-top negativo "consume" parte del padding inferior de la
* sección anterior (típicamente ContactForm con 100px) para acercar la
* línea al cierre real del bloque previo. */
.s-section-divider-wrap {
background: #ffffff;
margin-top: 0;
padding: 20px 0;
}
.s-section-divider {
height: 1px;
background: #a8b2bb;
}
/* En la plantilla de Servicio el divisor va sobre el gris claro, no blanco */
.s-section-divider-wrap.sv-divider-wrap { background: #f2f5f8; }
/* Banda horizontal decorativa con imagen del sector · variante D
* Va como sección hermana de .s-hero, sin margen propio · el padding-bottom
* del hero ya genera la separación visual sobre la imagen. */
.s-hero-band {
height: 360px;
background-size: cover;
background-position: center 35%;
position: relative;
border-bottom: 1px solid #cfd6dc;
}
.s-hero-band-video {
overflow: hidden;
background: #0e1a26;
}
.s-hero-band-video > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
pointer-events: none;
}
.s-hero-band-meta {
position: absolute;
left: 32px;
bottom: 24px;
color: rgba(255, 255, 255, 0.92);
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
z-index: 2;
}
@media (max-width: 960px) {
.s-hero-band { height: 240px; }
.s-hero-band-meta { left: 24px; bottom: 18px; font-size: 0.66rem; }
}
/* Eyebrow genérico para el sector template */
.s-eyebrow {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #647483;
font-weight: 500;
}
/* Section title (estilo .section-title.hero-style) */
.s-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 3.8rem;
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
color: #647483;
}
.s-desc {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.95rem;
color: #647483;
text-transform: uppercase;
line-height: 1.7;
padding-top: 12px;
}
/* ── 2 · Stats (estilo .stat-number / .stat-label del home) ── */
.s-stats {
padding: 60px 0 90px;
background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
/* Hairline divisora entre hero y stats · respeta el cuerpo del container */
position: relative;
}
.s-stats::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 80px);
max-width: 1360px;
height: 1px;
background: #e8ecf0;
pointer-events: none;
}
.s-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
text-align: center;
}
.s-stat-num {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 6rem;
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
color: #647483;
margin-bottom: -8px;
}
.s-stat-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.75rem;
color: #647483;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ── 3 · Tecnologías 2×2 (reutiliza .tech-item del home) ── */
/* Intro · texto explicativo a doble columna entre .s-stats y .s-tech ·
bg #f8fafc continúa visualmente el degradado de .s-stats (gradient
white → #f8fafc). */
.s-sector-intro {
padding: 50px 0 90px;
background: #f8fafc;
position: relative;
}
/* Hairline divisora entre stats y este bloque · mismo trazo que .s-stats::before */
.s-sector-intro::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 80px);
max-width: 1360px;
height: 1px;
background: #e8ecf0;
pointer-events: none;
}
.s-sector-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
}
.s-sector-intro-grid p {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
color: #647483;
margin: 0;
}
@media (max-width: 980px) {
.s-sector-intro-grid { grid-template-columns: 1fr; gap: 24px; }
.s-sector-intro { padding: 30px 0 70px; }
}
.s-tech {
padding: 85px 0 40px;
background: linear-gradient(to bottom, #ffffff 50%, #f2f5f8 100%);
}
.s-tech-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
margin-bottom: 48px;
}
.s-tech-header h2 { margin: 0; }
.s-tech-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin-top: 32px;
}
.s-tech-grid .tech-item {
border: 1px solid #e8ecf0;
border-right: none;
border-bottom: none;
/* Versión 2×2 intermedia entre el home (4×1, 420px) y la condensada (260px):
* altura suficiente para que `margin-top: auto` del icono cree separación
* cómoda con el texto. El reveal y la animación in-view se heredan del
* .tech-item del home. */
padding: 28px 26px;
min-height: 340px;
}
/* Tamaños internos: tamaño medio entre home y versión condensada */
.s-tech-grid .tech-label { font-size: 5.2rem; height: 108px; }
.s-tech-grid .tech-name { margin-bottom: 28px; }
/* Aire extra entre el bloque de texto y el icono */
.s-tech-grid .tech-desc { padding-top: 6px; margin-bottom: 36px; }
.s-tech-grid .tech-icon { width: 68px; height: 68px; margin-bottom: 12px; }
.s-tech-grid .tech-item:nth-child(2n) { border-right: 1px solid #e8ecf0; }
.s-tech-grid .tech-item:nth-last-child(-n+2) { border-bottom: 1px solid #e8ecf0; }
/* Anula el border-right del :last-child del home (4 cols) */
.s-tech-grid .tech-item:last-child { border-right: 1px solid #e8ecf0; }
/* ── CTA button entry animation (Soft organic) ──
* Para buttons con clase `.btn-entry`: el button crece desde su centro
* horizontal (scaleX 0 → 1) y el label aparece con fade-up cuando la barra
* ya está casi formada. Una sola reproducción al entrar en viewport,
* disparada por IntersectionObserver (ScrollReveal añade `.visible`).
*
* JSX requerido:
*
* Texto →
*
*
* Easing soft organic · easeOutQuart-ish, sin overshoot.
* fill 1.1s · label fade-up 0.7s con delay 0.5s.
*/
.btn-entry {
/* Estado inicial. transform-origin: center para que crezca desde el
* centro horizontal hacia los lados. */
transform: scaleX(0);
transform-origin: center center;
/* Forzamos que la transición de background-position del :hover NO
* compita con la animación de entrada — la animación gana porque define
* `transform`. El hover (background-position) se aplica al fondo y se
* comporta normal una vez visible. */
will-change: transform;
}
.btn-entry .btn-entry-label {
display: inline-flex;
align-items: center;
gap: 8px;
opacity: 0;
transform: translateY(12px);
}
.btn-entry .btn-entry-label .arrow {
/* Mantiene el comportamiento del :hover del .btn-primary (translateX 6px) */
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-entry:hover .btn-entry-label .arrow { transform: translateX(6px); }
/* ── Disparo de la animación cuando el button entra en viewport ──
* ScrollReveal observa `.btn-entry` y añade `.visible` al intersectar. */
.btn-entry.visible {
animation: btn-entry-fill 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.btn-entry.visible .btn-entry-label {
animation: btn-entry-label-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}
@keyframes btn-entry-fill {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
@keyframes btn-entry-label-up {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Reduced motion: aparecen ya formados, sin animación */
@media (prefers-reduced-motion: reduce) {
.btn-entry { transform: scaleX(1); animation: none !important; }
.btn-entry .btn-entry-label {
opacity: 1;
transform: none;
animation: none !important;
}
}
/* ── 4 · CTA mid (variante C · card flotante sobre fondo gris claro) ── */
.s-cta-mid {
padding: 90px 0;
background: #f2f5f8;
}
.s-cta-mid-card {
background: #ffffff;
width: 100%;
padding: 48px 56px;
border: 1px solid #e8ecf0;
box-shadow: 0 30px 80px -24px rgba(14, 26, 38, 0.18);
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
position: relative;
}
.s-cta-mid-eyebrow {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #647483;
line-height: 1.7;
display: block;
margin-bottom: 14px;
}
.s-cta-mid-text {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 2.6rem;
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
color: #0e1a26;
}
.s-cta-mid-text em { font-style: normal; color: #647483; }
/* ── 5 · Metodología (reutiliza .timeline del home) ── */
.s-method { padding: 120px 0; background: #ffffff; }
.s-method-header { margin-bottom: 30px; }
.s-method-header .s-eyebrow { margin-bottom: 18px; display: block; }
/* ── 6 · Casos reales ── */
.s-cases { padding: 120px 0; background: #ffffff; }
.s-cases-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: end;
margin-bottom: 48px;
}
.s-cases-header .s-eyebrow { margin-bottom: 18px; display: block; }
.s-cases-header h2 { margin: 0; }
.s-cases-header-link {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #647483;
display: inline-flex;
align-items: center;
gap: 10px;
}
.s-cases-header-link .arrow {
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.s-cases-header-link:hover .arrow { transform: translateX(6px); }
.s-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* 4 casos · 2 columnas → 2 filas (plantilla de Servicio) */
.s-cases-grid-2col { grid-template-columns: repeat(2, 1fr); }
.s-case-card { display: block; cursor: pointer; }
.s-case-card-image {
aspect-ratio: 4/3;
overflow: hidden;
background: #f2f5f8;
position: relative;
}
/* Plantilla de Servicio · mismo ratio que los casos destacados de la home
(.portfolio-card-overlay-image · 16/10). */
.sv-cases .s-case-card-image { aspect-ratio: 16/10; }
.s-case-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.s-case-card-image::after {
content: '';
position: absolute;
inset: 0;
background: transparent;
transition: background 0.35s ease;
}
.s-case-card:hover .s-case-card-image img { transform: scale(1.03); }
.s-case-card:hover .s-case-card-image::after {
background: rgba(100, 116, 131, 0.12);
}
.s-case-card-info { padding: 20px 0 0; }
.s-case-card-info h3 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.1rem;
font-weight: 500;
color: #3a4f5f;
margin-bottom: 8px;
}
.s-case-card-info p {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
color: #8a9baa;
line-height: 1.5;
}
/* ── 7 · Productos · variante B1 (editorial IBM tight rows) ──
* Cada producto es una fila completa con 3 columnas:
* · Número (01·02·03) izquierda
* · Texto centro (título + subtítulo inline + descripción + CTA)
* · Imagen panorámica derecha
* Líneas finas separan productos. Tipografía protagonista, mucho aire
* pero altura comprimida (~40% menos que la versión cards inicial). */
.s-products { padding: 120px 0; background: #f2f5f8; }
.s-products-header { margin-bottom: 56px; }
.s-products-header .s-eyebrow { margin-bottom: 18px; display: block; }
/* Doble columna · cada producto es una card vertical (num → texto → imagen).
Dropea los divisores horizontales que sí encajaban en lista a 1 columna. */
.s-products-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px 56px;
}
.s-product-row {
display: flex;
flex-direction: column;
gap: 14px;
padding: 0;
border: none;
align-items: stretch;
}
.s-product-row:last-child { border: none; }
.s-product-num {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 400;
color: #8a9baa;
letter-spacing: 0.05em;
}
.s-product-text-col {
display: flex;
flex-direction: column;
gap: 6px;
}
.s-product-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.7rem;
font-weight: 300;
color: #3a4f5f;
letter-spacing: -0.015em;
line-height: 1.1;
}
/* Subtítulo inline, fundido al título como caption en mayúsculas · alineado
por línea base con el título (la "B" de DataLens y la "V" de VISUALIZACIÓN
apoyan en la misma horizontal). */
.s-product-title .s-product-subtitle {
font-family: inherit;
font-size: 0.78rem;
color: #8a9baa;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
margin-left: 12px;
vertical-align: baseline;
}
.s-product-text {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.875rem;
color: #647483;
line-height: 1.55;
max-width: 460px;
margin: 4px 0 6px;
}
.s-product-cta {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #3a4f5f;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
border-bottom: 1px solid rgba(58, 79, 95, 0.2);
padding-bottom: 4px;
transition: gap 0.3s ease, border-color 0.3s ease;
}
.s-product-cta:hover { gap: 12px; border-bottom-color: #3a4f5f; }
.s-product-cta .arrow {
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.s-product-image {
aspect-ratio: 16/9;
overflow: hidden;
background: #e8ecf0;
/* En cards con menos texto, empuja la imagen al fondo de la card para que
todas las cards del grid alineen abajo. */
margin-top: auto;
}
.s-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.s-product-row:hover .s-product-image img { transform: scale(1.03); }
/* Placeholder cuando el producto no tiene imagen · mismo gradiente sutil
que el placeholder del bloque overview en subservicios. */
.s-product-image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8ecf0 0%, #cfd6dc 100%);
}
@media (max-width: 980px) {
.s-products-list { grid-template-columns: 1fr; gap: 56px; }
.s-product-row { gap: 16px; }
}
/* CTA externo bajo los 6 servicios paquetizados · botón sólido de alto
contraste centrado. En modo claro: oscuro sobre claro. En modo oscuro
(body.products-dark): claro sobre oscuro · siempre máximo contraste con
el fondo de su sección. Hover invierte los colores. */
.s-products-cta {
margin-top: 80px;
display: flex;
justify-content: center;
}
.s-products-cta a {
/* Variante "stack button": eyebrow encima del título, padding generoso,
* sigue invirtiendo en dark mode (ver body.products-dark más abajo). */
display: inline-flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
color: #ffffff;
background: #0e1a26;
text-decoration: none;
padding: 32px 64px;
border: 1px solid #0e1a26;
border-radius: 4px;
transition:
background 0.35s ease,
color 0.35s ease,
border-color 0.7s ease,
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.s-products-cta a:hover {
background: #ffffff;
color: #0e1a26;
transform: translateY(-1px);
}
.s-products-cta-eyebrow {
display: block;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.65;
}
.s-products-cta-title {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 400;
font-size: 1.6rem; /* ~25.6px */
line-height: 1.1;
letter-spacing: -0.015em;
text-transform: none;
}
.s-products-cta-icon {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.s-products-cta a:hover .s-products-cta-icon {
transform: translate(3px, -3px);
}
/* ── Dark mode scoped to "Productos propios" ──
* Cuando la sección .s-products entra en viewport (banda central 40%),
* ScrollReveal añade `.products-dark` al . El fondo de .public-site
* transiciona a oscuro, y la sección .s-products se vuelve transparente
* para dejar ver ese fondo. Las secciones vecinas (.s-cases, .s-quote)
* mantienen su `background: #ffffff` propio que las protege. Sus textos
* y cards cambian a paleta oscura con transición suave. Al salir hacia
* la sección .s-quote, ScrollReveal quita la clase y todo vuelve. */
.public-site { transition: background-color 0.7s ease; }
body.products-dark .public-site { background: #48545f; }
/* Transición suave de fondo y color en los elementos que cambian.
* En B1 los elementos clave son: la sección, el header, el número de
* producto, el título, el subtítulo (inline), el texto, el CTA, las
* border-top/bottom de las filas y la imagen. */
.s-products,
.s-products .s-eyebrow,
.s-products .s-title,
.s-products .s-product-row,
.s-products .s-product-num,
.s-products .s-product-title,
.s-products .s-product-title .s-product-subtitle,
.s-products .s-product-text,
.s-products .s-product-cta,
.s-products .s-product-image {
transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}
/* ── Estado oscuro ── */
body.products-dark .s-products { background: transparent; }
body.products-dark .s-products .s-eyebrow { color: #a8b8c4; }
body.products-dark .s-products .s-title { color: #ffffff; }
body.products-dark .s-products .s-product-row,
body.products-dark .s-products .s-product-row:last-child {
border-color: rgba(255, 255, 255, 0.08);
}
body.products-dark .s-products .s-product-num { color: #a8b8c4; }
body.products-dark .s-products .s-product-title { color: #ffffff; }
body.products-dark .s-products .s-product-title .s-product-subtitle {
color: #a8b8c4;
}
body.products-dark .s-products .s-product-text { color: #cfd6dc; }
body.products-dark .s-products .s-product-cta {
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.18);
}
body.products-dark .s-products .s-product-cta:hover {
border-bottom-color: #ffffff;
}
body.products-dark .s-products .s-product-image { background: #2a3a48; }
body.products-dark .s-products-cta a {
background: #ffffff;
color: #0e1a26;
border-color: #ffffff;
}
body.products-dark .s-products-cta a:hover {
background: transparent;
color: #ffffff;
border-color: #ffffff;
}
/* Reduced motion: cambio instantáneo, sin fade */
@media (prefers-reduced-motion: reduce) {
.public-site,
body.products-dark .s-products,
body.products-dark .s-products * {
transition: none !important;
}
}
/* ── Productos · animaciones de entrada (override de .reveal) ──
* Va DESPUÉS del bloque dark-mode porque las reglas de dark mode usan
* `transition` shorthand (background-color/color/border-color) y eso
* resetea las transiciones de opacity/transform del .reveal base. Aquí
* declaramos las transitions completas combinando todas las propiedades
* para que coexistan: dark-mode + reveal + animaciones largas y notables.
* · translateY inicial 80px (vs 40px del reveal base)
* · duración 1.3s (vs 0.9s) — perceptible al scroll
* · stagger 0.22s entre filas (vs 0.12s default) */
.s-products-header > .reveal,
.s-products-list .s-product-row.reveal {
transition:
opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.3s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.7s ease,
color 0.7s ease,
border-color 0.7s ease;
transform: translateY(80px);
}
.s-products-header > .reveal.visible,
.s-products-list .s-product-row.reveal.visible {
transform: translateY(0);
}
.s-products-list.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.s-products-list.stagger > .reveal:nth-child(2) { transition-delay: 0.22s; }
.s-products-list.stagger > .reveal:nth-child(3) { transition-delay: 0.44s; }
.s-products-list.stagger > .reveal:nth-child(4) { transition-delay: 0.66s; }
.s-products-list.stagger > .reveal:nth-child(5) { transition-delay: 0.88s; }
/* ── 8 · Testimonial ── */
/* ── Testimonial · "Display Sans Maxi" (Apple keynote pull-quote)
* Visuelt Pro Light gigante alineado a la izquierda; comillas inline vía
* ::before/::after; autor en mini-cap PP Neue Montreal + cargo Visuelt 400,
* separados del texto por una hairline. Mismo markup que la versión
* anterior · solo cambia el CSS y se añaden los hijos -name / -role. */
.s-quote { padding: 140px 0; background: #ffffff; }
.s-quote-inner { max-width: 100%; margin: 0; text-align: left; }
/* Comilla grande del legacy oculta · ahora las comillas son inline */
.s-quote-mark { display: none; }
.s-quote-text {
position: relative;
margin: 0;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 4.5rem; /* 72px · alineado con la jerarquía de títulos del site */
line-height: 1.05;
letter-spacing: -0.03em;
color: #647483;
}
.s-quote-text::before { content: "\201C"; }
.s-quote-text::after { content: "\201D"; }
/* Comillas mantienen color explícito incluso cuando ScrollReveal pone
* el texto outer en transparent (.has-words → color: transparent). */
.s-quote-text::before,
.s-quote-text::after { color: #647483; }
.s-quote-meta {
margin-top: 56px;
/* La separación visual con la cita ya no la da un border-top encima,
* sino un guión largo inline antes del nombre (.s-quote-meta-name::before). */
display: inline-flex;
/* column-gap 0 → el separador "·" (vía ::before, ver más abajo) provee
* el espaciado horizontal; row-gap mantiene aire al hacer wrap. */
gap: 12px 0;
align-items: baseline;
flex-wrap: wrap;
}
/* Guión largo decorativo antes del nombre, estilo editorial. */
.s-quote-meta-name::before {
content: "";
display: inline-block;
width: 80px;
height: 1px;
background: #647483;
vertical-align: middle;
margin-right: 16px;
}
/* Separador "·" entre nombre y cargo · solo cuando ambos coexisten,
* usando selector de hermano adyacente. Mismo color/spacing que el "·"
* interno (.s-quote-meta-role .sep) para coherencia visual. */
.s-quote-meta-name + .s-quote-meta-role::before {
content: "·";
color: #a8b2bb;
margin: 0 8px;
}
.s-quote-meta-name {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #647483;
}
.s-quote-meta-role {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: #647483;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
}
.s-quote-meta-role .sep { color: #a8b2bb; margin: 0 8px; }
/* Logo de empresa inline · mask-image con color forzado a #647483 */
.s-quote-meta-logo {
display: inline-block;
width: 110px;
height: 24px;
background-color: #647483;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
opacity: 0.85;
vertical-align: middle;
}
/* ── 10 · Recursos (3 posts del blog) ── */
.s-resources { padding: 60px 0 120px; background: #ffffff; }
.s-resources-header { margin-bottom: 48px; }
.s-resources-header .s-eyebrow { margin-bottom: 18px; display: block; }
.s-resources-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* Recursos sector: misma estética que .blog-card del listado /blog,
* pero conservando el resumen (intro) en el body. */
.s-resource {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border: 1px solid rgba(100, 116, 131, 0.15);
border-radius: 2px;
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
cursor: pointer;
background: #ffffff;
}
.s-resource:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.s-resource-image {
width: 100%;
aspect-ratio: 16/10;
background: #f2f5f8;
overflow: hidden;
position: relative;
}
.s-resource-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.s-resource:hover .s-resource-image img { transform: scale(1.03); }
.s-resource-tag {
position: absolute;
top: 16px;
left: 16px;
background: #ffffff;
padding: 6px 12px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #647483;
}
.s-resource-body {
padding: 24px 24px 24px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.s-resource-meta {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.75rem;
color: #8a9baa;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.7;
margin: 0;
}
.s-resource-body h3 {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.2rem;
font-weight: 400;
color: #3a4f5f;
line-height: 1.4;
margin: 0;
}
.s-resource-body p {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
color: #8a9baa;
line-height: 1.5;
margin: 0;
}
/* ── 11 · FAQ (reutiliza .faq-item / .faq-question del service-faq) ── */
.s-faq { padding: 120px 0; background: #f8fafc; }
.s-faq-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: start;
}
.s-faq-header .s-eyebrow { margin-bottom: 18px; display: block; }
.s-faq-list .faq-item { border-bottom: 1px solid rgba(100, 116, 131, 0.18); }
.s-faq-list .faq-item:first-child {
border-top: 1px solid rgba(100, 116, 131, 0.18);
}
/* ── 12 · Final CTA (mismo lenguaje que .s-cta-mid) ── */
.s-final {
padding: 90px 0;
background: #f2f5f8;
}
.s-final-card {
background: #ffffff;
width: 100%;
padding: 48px 56px;
border: 1px solid #e8ecf0;
box-shadow: 0 30px 80px -24px rgba(14, 26, 38, 0.18);
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
position: relative;
}
.s-final-eyebrow {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-weight: 400;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #647483;
line-height: 1.7;
display: block;
margin-bottom: 14px;
}
.s-final-text {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 2.6rem;
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
color: #0e1a26;
}
.s-final-text em { font-style: normal; color: #647483; }
/* ── Responsive ── */
@media (max-width: 960px) {
.s-hero-grid,
.s-cases-header,
.s-tech-header,
.s-cta-mid-card,
.s-final-card,
.s-faq-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.s-hero h1 { font-size: 3.6rem; }
.s-stats-grid,
.s-tech-grid,
.s-cases-grid,
.s-products-grid,
.s-resources-grid {
grid-template-columns: 1fr;
}
.s-tech-grid .tech-item {
border-right: 1px solid #e8ecf0;
border-bottom: 1px solid #e8ecf0;
}
}
/* ══════════════════════════════════════════════════════════════════
Caso de éxito (Project Template v2) · prefijo .p-*
══════════════════════════════════════════════════════════════════
14 bloques. Reusa de sector v2: .s-cta-mid (CTAs intermedios),
.s-quote (cita word-by-word fill), .s-final (CTA final oscuro),
.s-products-list/.s-product-row (lessons numeradas), .btn-entry
(animación scaleX en buttons), .s-eyebrow.
══════════════════════════════════════════════════════════════════ */
/* Bloque 1 · Hero overlay · refuerza el .project-hero existente con
eyebrow y KPI grande superpuestos sobre la imagen/vídeo. */
.project-hero-overlay { padding: 80px 0 60px; }
.project-hero-eyebrow {
display: inline-block;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
}
.project-hero-overlay h1 { margin-bottom: 36px; }
.project-hero-kpi {
display: flex;
align-items: baseline;
gap: 24px;
flex-wrap: wrap;
}
.project-hero-kpi-value {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.4rem, 5.5vw, 4.5rem);
line-height: 1;
color: #fff;
letter-spacing: -0.02em;
}
.project-hero-kpi-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
max-width: 320px;
}
/* Bloque 2 · Resumen del caso · disposición editorial 2 cols
(eyebrow superior · título a la izquierda · texto a la derecha).
Hairline arriba para separar del hero. */
.p-summary {
padding: 80px 0;
border-top: 1px solid #e8ecf0;
}
.p-summary .s-eyebrow { display: block; margin-bottom: 30px; }
.p-summary-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
.p-summary-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(1.8rem, 3vw, 2.6rem);
color: #647483;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
}
.p-summary-text {
font-size: 1.05rem;
line-height: 1.7;
color: #647483;
}
.p-summary-text p + p { margin-top: 1em; }
/* Bloque 3 · Meta-row 4 cols */
.p-meta-row {
padding: 40px 0 60px;
border-top: 1px solid #e8ecf0;
border-bottom: 1px solid #e8ecf0;
}
.p-meta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
padding: 30px 0;
}
.p-meta-cell-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #647483;
margin-bottom: 10px;
}
.p-meta-cell-value {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 1.4rem;
color: #0e1a26;
line-height: 1.2;
}
.p-meta-cell-value.is-empty { color: #c7cfd6; font-style: italic; }
/* Bloque 4 · Vídeo completo */
.p-video { padding: 60px 0 80px; }
.p-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #0e1a26;
overflow: hidden;
border-radius: 4px;
}
.p-video-frame video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.p-video-placeholder {
position: absolute; inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
background: #fbe7ea; /* mismo tono rosado del wireframe para placeholder */
border: 2px solid #e8b1ba;
color: #6a4248;
}
.p-video-play {
font-size: 2.4rem;
width: 96px; height: 96px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex; align-items: center; justify-content: center;
padding-left: 6px; /* compensa el centrado óptico del triángulo */
color: #6a4248;
}
.p-video-placeholder-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Bloque 5 · stats · disposición editorial alineada a la izquierda,
sin cards. Hairlines arriba/abajo. Números en gris medio coherentes
con la paleta canónica. Scramble digital al entrar (selector
.p-stat-num añadido en ScrollReveal). */
.p-stats-section {
padding: 50px 0;
border-top: 1px solid #e8ecf0;
border-bottom: 1px solid #e8ecf0;
}
.p-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
}
.p-stat-num {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.5rem, 4.5vw, 3.6rem);
color: #647483;
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 14px;
}
.p-stat-label {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #647483;
}
/* Bloque 7 · Reto · Solución · stacked single-column editorial con foto.
Cada sub-bloque tiene:
- counter row (01 — El reto) + título centrado + cuerpo en columna 620px
- foto grande contenida (max 1240px, aspect 16:9) con figcaption
Hairline divide los dos sub-bloques. */
.p-cs { padding: 90px 0 80px; }
.p-cs-head {
text-align: center;
margin-bottom: 50px;
}
.p-cs-head .s-eyebrow {
display: inline-block;
}
.p-cs-stack {
width: 100%;
}
/* Layout 50/50: izquierda vacía, texto en la columna derecha · la figure
ocupa el ancho completo bajo el grid (span 2 columnas). */
.p-cs-block {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 60px;
padding: 56px 0 80px;
}
.p-cs-block + .p-cs-block {
border-top: 1px solid #e8ecf0;
}
.p-cs-block-text {
grid-column: 2 / 3;
}
.p-cs-counter {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.74rem;
letter-spacing: 0.20em;
text-transform: uppercase;
color: #8a9baa;
margin-bottom: 24px;
}
.p-cs-counter strong {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: #0e1a26;
}
.p-cs-counter-bar {
display: inline-block;
width: 36px;
height: 1px;
background: #cfd6dc;
}
.p-cs-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 200;
font-size: clamp(2.2rem, 4vw, 3.2rem);
color: #0e1a26;
margin-bottom: 24px;
line-height: 1.02;
letter-spacing: -0.035em;
}
.p-cs-text {
font-size: 1.08rem;
line-height: 1.65;
color: #647483;
max-width: 620px;
/* Anclada a la izquierda del bloque de texto (no auto-centrada) */
margin: 0;
}
/* Figure · ocupa el 100% del ancho del bloque para igualar al hairline
divisor (`.p-cs-block + .p-cs-block` border-top). Reseteamos margins
laterales explícitamente porque el navegador aplica `margin: 1em 40px`
por defecto al elemento . */
.p-cs-figure {
grid-column: 1 / -1;
margin: 60px 0 0 0;
padding: 0;
width: 100%;
}
/* Responsive · en pantallas estrechas vuelve a stack 1-col */
@media (max-width: 900px) {
.p-cs-block { grid-template-columns: 1fr; }
.p-cs-block-text { grid-column: 1 / -1; }
}
.p-cs-figure-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #f4f6f8;
}
.p-cs-figure-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.p-cs-figure-frame.is-placeholder {
border: 1px dashed #cfd6dc;
}
/* Divisor · separador entre metodología y cita.
Línea hairline continua a ancho completo del container. */
.p-section-divider {
max-width: 1440px;
margin: 0 auto;
padding: 60px 40px 0;
}
.p-section-divider-line {
display: block;
width: 100%;
height: 1px;
background: #e8ecf0;
}
.p-cs-figcaption {
margin-top: 16px;
text-align: center;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8a9baa;
}
/* Bloque 8 (legacy) · Foto WIP / Foto resultado · ahora fusionado dentro del
bloque 7 (.p-cs-figure). Las clases `.p-images*` y `.p-image*` se han
eliminado del template. Si en algún momento se vuelven a necesitar como
sección independiente, recuperarlas desde el control de versiones. */
/* Bloque 9 · Metodología · usa el timeline compartido (.timeline / .s-method)
exactamente como sector v2 y la home. Sin overrides necesarios. */
/* Bloque 14 · CTA + form · override del background del cta-section.
Sólo aplica cuando el ContactForm está dentro de la plantilla de
Caso de éxito (.p-form-wrap), el resto de plantillas mantiene su
gradient original. */
.p-form-wrap .cta-section { background: #f2f5f8; }
/* Bloque 12 · Lessons · reusa .s-products-list/.s-product-row pero
sin imagen (la 3ª columna del grid pierde su contenido y deja un
hueco a la derecha). Reasignamos las 3 columnas a num · título ·
texto para que el párrafo aproveche todo el ancho disponible.
`display: contents` en el wrapper text-col vuelca título y texto
al grid del padre sin tocar el JSX heredado. El observer de modo
oscuro busca .s-products específicamente, así que NO se activa. */
.p-lessons { padding: 40px 0 80px; }
.p-lessons-header { margin-bottom: 30px; }
.p-lessons .s-product-row {
grid-template-columns: 56px minmax(220px, 1fr) 2.2fr;
gap: 60px;
align-items: start;
padding: 40px 0;
}
.p-lessons .s-product-num { padding-top: 6px; }
.p-lessons .s-product-text-col { display: contents; }
.p-lessons .s-product-title {
font-size: 1.5rem;
line-height: 1.2;
color: #0e1a26; /* coherencia con titles del project (#0e1a26 = home-service-title) */
}
.p-lessons .s-product-text {
max-width: none;
margin: 0;
font-size: 0.98rem;
line-height: 1.7;
color: #3a4f5f;
}
@media (max-width: 980px) {
.p-lessons .s-product-row {
grid-template-columns: 1fr;
gap: 14px;
}
.p-lessons .s-product-text-col { display: contents; }
.p-lessons .s-product-num { padding-top: 0; }
}
/* Bloque 13 · Industria + Soluciones XR (related) */
.p-related { padding: 80px 0; border-top: 1px solid #e8ecf0; }
.p-related-header { max-width: 760px; margin-bottom: 50px; }
.p-related-header .s-eyebrow { display: block; margin-bottom: 14px; }
.p-related-heading {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: #647483;
margin: 0 0 14px;
}
.p-related-intro {
font-size: 1rem;
line-height: 1.65;
color: #647483;
margin: 0;
}
.p-related-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.p-related-card {
display: flex;
flex-direction: column;
border: 1px solid #e8ecf0;
border-radius: 4px;
overflow: hidden;
background: #fff;
text-decoration: none;
color: inherit;
transition: border-color 0.3s, transform 0.3s;
}
.p-related-card:hover {
border-color: #0e1a26;
transform: translateY(-3px);
}
.p-related-image {
aspect-ratio: 16/9;
overflow: hidden;
background: #f2f5f8;
}
.p-related-image img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.p-related-card:hover .p-related-image img { transform: scale(1.03); }
.p-related-body { padding: 22px 24px 24px; }
.p-related-eyebrow {
display: block;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #647483;
margin-bottom: 10px;
}
.p-related-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 1.5rem;
color: #0e1a26;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.p-related-desc {
font-size: 0.95rem;
line-height: 1.55;
color: #647483;
margin: 0 0 20px;
}
.p-related-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #0e1a26;
font-weight: 500;
padding-top: 14px;
border-top: 1px solid #e8ecf0;
transition: gap 0.3s ease;
}
.p-related-cta .arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.p-related-card:hover .p-related-cta { gap: 14px; }
.p-related-card:hover .p-related-cta .arrow { transform: translateX(6px); }
.p-related-card-empty {
padding: 30px 26px;
background: #f7f9fb;
border-style: dashed;
cursor: default;
}
.p-related-card-empty:hover { transform: none; border-color: #cfd6dc; }
.p-related-card-noimage { justify-content: center; min-height: 220px; }
.p-related-card-noimage .p-related-body { padding: 36px 30px; }
.p-related-empty-hint {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-weight: 300;
font-size: 1.2rem;
color: #647483;
margin: 8px 0 14px;
}
.p-related-empty-note {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.8rem;
color: #a8b2bb;
font-style: italic;
}
/* Responsive */
@media (max-width: 920px) {
.p-summary-grid { grid-template-columns: 1fr; gap: 30px; }
.p-meta-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
.p-stats-grid { grid-template-columns: 1fr; gap: 30px; }
.p-cs-grid,
.p-images-grid,
.p-related-grid { grid-template-columns: 1fr; gap: 30px; }
.project-hero-kpi { gap: 12px; }
.project-hero-overlay { padding: 50px 0 36px; }
}
/* ═════════════════════════════════════════════════════════════════════
SERVICE TEMPLATE v3 (wireframe nuevo · 11 bloques · prefijo .sv-*)
Reusa: .container, .s-eyebrow, .s-title, .s-stats(-grid),
.s-cases(-*), .s-resources-grid, .s-resource(-*),
.faq-item / .faq-question / .faq-icon / .faq-answer
═════════════════════════════════════════════════════════════════════ */
/* ── 1 · Hero · override del layout original (preserva canvas + typewriter) ── */
/* Hero más alto · min-height y contenido anclado abajo */
.service-hero.sv-hero {
min-height: 58vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.sv-hero .service-hero-canvas { z-index: 1; }
/* Imagen destacada dentro de una línea de 10px en el borde inferior del Hero.
La imagen va más alta que la línea y centrada · así el desenfoque (blur
40px, inline en el componente) tiene contenido que muestrear y no deja
bordes claros. El contenedor recorta a 10px con overflow: hidden. */
.sv-hero-line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
.sv-hero-line img {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 160px;
transform: translateY(-50%);
object-fit: cover;
object-position: center;
display: block;
}
/* Hero a 2 columnas como el HTML de referencia · izq: icono + título,
der: intro + CTAs · alineadas abajo. Sin padding propia (la altura la
marca .service-hero · padding 120px 0 80px). */
.sv-hero .sv-hero-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: end;
}
.sv-hero-col-left {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Eyebrow del hero · sólo en plantilla de Subservicio ("Subservicio · Padre") */
.sv-hero-eyebrow {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 20px;
}
.sv-hero-col-right {
display: flex;
flex-direction: column;
gap: 24px;
}
.sv-hero .sv-hero-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: clamp(3rem, 6vw, 5.5rem); /* mismo tamaño que el h1 del HTML de referencia */
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.025em;
color: #ffffff; /* hero tiene bg oscuro (#3d4d5c) — texto blanco */
margin: 0;
}
.sv-hero-intro {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.25rem;
font-weight: 400;
line-height: 1.45;
color: rgba(255,255,255,0.72); /* legible sobre el bg oscuro del hero */
max-width: 640px;
margin: 0;
}
.sv-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 8px;
}
.sv-hero-actions .btn-primary,
.sv-hero-actions .btn-outline {
display: inline-flex;
align-items: center;
gap: 10px;
}
/* CTA secundario sobre hero oscuro · forzar colores claros */
.sv-hero-actions .btn-outline {
color: #ffffff;
border-color: rgba(255,255,255,0.55);
background: transparent;
}
.sv-hero-actions .btn-outline:hover {
border-color: #ffffff;
background: rgba(255,255,255,0.06);
}
/* ── 2 · Phase selector strip ── */
.sv-phases {
background: #f2f5f8;
padding: 40px 0 36px;
}
.sv-phases-eyebrow {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #647483;
margin-bottom: 16px;
}
/* Bloque "Fases" · barra segmentada de 8 fases · activas rellenas (#647483) */
.sv-phases-strip {
display: flex;
flex-wrap: wrap;
gap: 2px;
margin-bottom: 10px;
}
.sv-phase-chip {
flex: 1 1 90px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 13px 16px 13px;
border: 1px solid #e8ecf0;
background: #ffffff;
min-width: 0;
position: relative;
transition: background 0.25s ease, border-color 0.25s ease;
/* Animación "desplegable" · cada segmento sale de debajo del anterior */
opacity: 0;
animation: svPhaseDeploy 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sv-phase-chip.is-active {
background: #647483;
border-color: #647483;
}
/* Cascada izq→der · z-index decreciente para que cada card emerja de debajo
de la anterior; delay escalonado por posición. */
.sv-phase-chip:nth-child(1) { z-index: 9; animation-delay: 0.08s; }
.sv-phase-chip:nth-child(2) { z-index: 8; animation-delay: 0.15s; }
.sv-phase-chip:nth-child(3) { z-index: 7; animation-delay: 0.22s; }
.sv-phase-chip:nth-child(4) { z-index: 6; animation-delay: 0.29s; }
.sv-phase-chip:nth-child(5) { z-index: 5; animation-delay: 0.36s; }
.sv-phase-chip:nth-child(6) { z-index: 4; animation-delay: 0.43s; }
.sv-phase-chip:nth-child(7) { z-index: 3; animation-delay: 0.50s; }
.sv-phase-chip:nth-child(8) { z-index: 2; animation-delay: 0.57s; }
@keyframes svPhaseDeploy {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
.sv-phase-num {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.64rem;
letter-spacing: 0.12em;
color: #b6c0c9;
}
.sv-phase-chip.is-active .sv-phase-num { color: rgba(255, 255, 255, 0.65); }
.sv-phase-label {
margin-top: 16px;
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 0.84rem;
font-weight: 400;
letter-spacing: -0.005em;
color: #0e1a26;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.sv-phase-chip.is-active .sv-phase-label { color: #ffffff; }
/* Track de progreso bajo la barra · entra cuando termina la cascada */
.sv-phases-track {
display: flex;
gap: 2px;
height: 3px;
margin-bottom: 16px;
opacity: 0;
animation: svPhaseTrackFade 0.5s ease 0.62s both;
}
.sv-phases-track span { flex: 1; background: #e8ecf0; }
.sv-phases-track span.is-active { background: #647483; }
@keyframes svPhaseTrackFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Sin animación de despliegue en reduced-motion */
@media (prefers-reduced-motion: reduce) {
.sv-phase-chip,
.sv-phases-track { opacity: 1; animation: none; }
}
.sv-phases-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #3a4f5f;
border-bottom: 1px solid rgba(58, 79, 95, 0.2);
padding-bottom: 4px;
transition: gap 0.3s ease, border-color 0.3s ease;
}
.sv-phases-link:hover { gap: 12px; border-bottom-color: #3a4f5f; }
.sv-phases-link .arrow {
transition: transform 0.3s ease;
}
.sv-phases-link:hover .arrow { transform: translateX(4px); }
/* ── 3 · Overview · 50/50 texto + imagen ── */
.sv-overview { padding: 120px 0; background: #ffffff; }
.sv-overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.sv-overview-text .s-eyebrow { display: block; margin-bottom: 18px; }
.sv-overview-text h2 { margin: 0 0 24px; }
.sv-overview-body p {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 1rem;
line-height: 1.65;
color: #647483;
}
.sv-overview-body p + p { margin-top: 18px; }
.sv-overview-image {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: #f2f5f8;
}
.sv-overview-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sv-overview-image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8ecf0 0%, #cfd6dc 100%);
}
/* ── 4 · Stats · reusa .s-stats existente, solo padding propio ── */
.sv-stats { padding: 80px 0; background: #f2f5f8; }
/* ── 5 · Subservicios · D4 "lámina de cristal · panel completo" ──
Grid de cards · cada card es una lámina glassmorphism sobre la imagen
del subservicio. Card completa clickable. */
.sv-subgrid { padding: 100px 0; background: #ffffff; }
.sv-subgrid-header { margin-bottom: 44px; }
.sv-subgrid-header .s-eyebrow { display: block; margin-bottom: 14px; }
.sv-subgrid-header h2 { margin: 0; }
.sv-subgrid-grid {
display: grid;
/* auto-fit · 3 (Consultoría/Diseño) o 4 (Desarrollo) subservicios */
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.sv-subgrid-card {
position: relative;
display: block;
height: 462px;
overflow: hidden;
background: #0e1a26;
text-decoration: none;
}
.sv-subgrid-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-subgrid-card:hover .sv-subgrid-img { transform: scale(1.06); }
.sv-subgrid-img-fallback {
background: linear-gradient(135deg, #1b2f43 0%, #0e1a26 72%);
}
/* Lámina de cristal · cubre la card con un margen uniforme.
Nota: el blur (backdrop-filter) se aplica como estilo inline en el
componente — el build (Lightning CSS) elimina la propiedad del CSS. */
.sv-subgrid-sheet {
position: absolute;
inset: 16px;
display: flex;
flex-direction: column;
padding: 26px 26px 24px;
background: rgba(14, 26, 38, 0.46);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.sv-subgrid-num {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.66);
}
.sv-subgrid-spacer { flex: 1; }
.sv-subgrid-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 2.15rem;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.025em;
color: #ffffff;
margin: 0 0 14px;
}
.sv-subgrid-text {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.8rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 20px;
}
.sv-subgrid-rule {
height: 1px;
background: rgba(255, 255, 255, 0.2);
margin: 0 0 16px;
}
.sv-subgrid-link {
display: flex;
align-items: center;
gap: 10px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffffff;
}
.sv-subgrid-link .arrow { transition: transform 0.3s ease; }
.sv-subgrid-card:hover .sv-subgrid-link .arrow { transform: translateX(6px); }
/* ── Subservicio · "Aplicación por sector" · 6 cards imagen + panel de cristal.
Nota: el blur (backdrop-filter) se aplica inline en el componente — el
build (Lightning CSS) elimina la propiedad del CSS. */
.sv-sectors { padding: 110px 0; background: #ffffff; }
.sv-sectors-header { margin-bottom: 48px; }
.sv-sectors-header .s-eyebrow { display: block; margin-bottom: 14px; }
.sv-sectors-header h2 { margin: 0; }
.sv-sectors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.sv-sector-card {
position: relative;
display: block;
height: 380px;
overflow: hidden;
background: #0e1a26;
text-decoration: none;
}
.sv-sector-img {
position: absolute;
inset: 0;
background-image: var(--sv-img);
background-size: cover;
background-position: center;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-sector-card:hover .sv-sector-img { transform: scale(1.06); }
.sv-sector-idx {
position: absolute;
top: 16px;
right: 16px;
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.7rem;
letter-spacing: 0.14em;
color: #ffffff;
/* Sin backdrop-filter: en un chip tan pequeño el blur era imperceptible.
Subimos levemente la opacidad del velo para conservar el contraste. */
background: rgba(14, 26, 38, 0.55);
padding: 6px 10px;
}
.sv-sector-panel {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
padding: 22px 22px 20px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.16);
/* Recorta la lámina de cristal falso (::before) a la silueta del panel. */
overflow: hidden;
isolation: isolate;
}
/* Cristal falso · capa 1: copia ESTÁTICA y desenfocada de la imagen.
Reproduce el encuadre exacto de .sv-sector-img (caja = card completa:
left/right/bottom -16px, height = 380px) para que el desenfoque sea
continuo con la imagen nítida de alrededor. El scale extra empuja el
halo del blur fuera del recorte del panel. A diferencia de
backdrop-filter, este blur se rasteriza UNA vez (no por frame). */
.sv-sector-panel::before {
content: "";
position: absolute;
left: -16px;
right: -16px;
bottom: -16px;
height: 380px;
background-image: var(--sv-img);
background-size: cover;
background-position: center;
filter: blur(16px);
transform: scale(1.08);
z-index: 0;
pointer-events: none;
}
.sv-sector-card:hover .sv-sector-panel::before { transform: scale(1.145); }
/* Cristal falso · capa 2: velo oscuro (mismo color/opacidad que antes). */
.sv-sector-panel::after {
content: "";
position: absolute;
inset: 0;
background: rgba(14, 26, 38, 0.42);
z-index: 1;
pointer-events: none;
}
/* Cristal falso · capa 3: el contenido va por encima de cristal + velo. */
.sv-sector-panel-body {
position: relative;
z-index: 2;
}
.sv-sector-name {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.85rem;
font-weight: 300;
line-height: 1.06;
letter-spacing: -0.03em;
color: #ffffff;
margin: 0 0 9px;
}
.sv-sector-text {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.76rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.76);
margin: 0 0 15px;
}
.sv-sector-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffffff;
}
.sv-sector-link .arrow { transition: transform 0.3s ease; }
.sv-sector-card:hover .sv-sector-link .arrow { transform: translateX(5px); }
@media (max-width: 920px) {
.sv-sectors-grid { grid-template-columns: 1fr; }
}
/* ── 6 + 9 · Diagonal CTA Banner ── */
.sv-banner {
position: relative;
background: #0e1a26;
color: #ffffff;
overflow: hidden;
padding: 80px 0;
}
.sv-banner-stripes {
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.04) 0px,
rgba(255, 255, 255, 0.04) 2px,
transparent 2px,
transparent 14px
);
opacity: 0.9;
}
.sv-banner-inner {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
}
.sv-banner-inner.has-form {
grid-template-columns: 1fr minmax(320px, 420px);
gap: 80px;
align-items: stretch;
}
.sv-banner-eyebrow {
display: block;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #6cffd5;
margin-bottom: 14px;
}
.sv-banner-text {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 300;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
max-width: 720px;
}
.sv-banner-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 32px;
background: #6cffd5;
color: #0e1a26;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: background 0.25s ease, transform 0.3s ease;
white-space: nowrap;
}
.sv-banner-cta:hover {
background: #8effe0;
transform: translateY(-1px);
}
.sv-banner-cta .arrow { transition: transform 0.3s ease; }
.sv-banner-cta:hover .arrow { transform: translateX(6px); }
/* ── Reto form (bloque 9 · embebido en el banner) ── */
.sv-banner-form-col { display: flex; align-items: center; }
.sv-retoform {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.sv-retoform input,
.sv-retoform textarea {
width: 100%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #ffffff;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.95rem;
padding: 14px 16px;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease;
resize: none;
}
.sv-retoform input::placeholder,
.sv-retoform textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.sv-retoform input:focus,
.sv-retoform textarea:focus {
border-color: #6cffd5;
background: rgba(255, 255, 255, 0.1);
}
.sv-retoform button {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
background: #6cffd5;
color: #0e1a26;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: background 0.25s ease;
}
.sv-retoform button:hover:not(:disabled) { background: #8effe0; }
.sv-retoform button:disabled { opacity: 0.6; cursor: not-allowed; }
.sv-retoform-error {
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.85rem;
color: #ffb4ae;
margin: 0;
}
.sv-retoform-success {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.1rem;
color: #ffffff;
line-height: 1.5;
}
.sv-retoform-success strong { color: #6cffd5; font-weight: 500; }
/* ── 8 · Fases del servicio · título sticky izq + cards que se enfocan ── */
.sv-svcphases { padding: 120px 0; background: #f2f5f8; }
.sv-svcphases-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 64px;
align-items: start;
}
.sv-svcphases-sticky {
position: sticky;
top: 130px;
}
.sv-svcphases-sticky .s-eyebrow { display: block; margin-bottom: 14px; }
.sv-svcphases-sticky h2 { margin: 0; }
.sv-svcphases-lead {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.92rem;
line-height: 1.75;
color: #647483;
max-width: 400px;
margin: 24px 0 0;
}
.sv-svcphases-count {
display: flex;
align-items: baseline;
gap: 14px;
margin-top: 34px;
padding-top: 26px;
border-top: 1px solid #dde3e9;
}
.sv-svcphases-count-num {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 2.6rem;
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
color: #0e1a26;
}
.sv-svcphases-count-label {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.74rem;
letter-spacing: 0.06em;
line-height: 1.5;
color: #8a9baa;
max-width: 180px;
}
.sv-svcphases-cards {
display: flex;
flex-direction: column;
gap: 28px;
}
.sv-svcphase {
background: #ffffff;
border: 1px solid #e8ecf0;
padding: 40px 36px 44px;
/* Inactiva por defecto · se enfoca al llegar al centro del viewport (JS) */
opacity: 0.38;
transform: scale(0.97);
transition: opacity 0.6s ease,
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-svcphase.is-active {
opacity: 1;
transform: scale(1);
}
/* Icono de fase · mismos trazos que el gráfico de metodología de la home */
.sv-svcphase-icon {
display: block;
margin-bottom: 26px;
}
.sv-svcphase-icon svg {
display: block;
height: 38px;
width: auto;
fill: none;
stroke: #647483;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.sv-svcphase-num {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.72rem;
letter-spacing: 0.14em;
color: #8a9baa;
}
.sv-svcphase-title {
font-family: 'Visuelt Pro', system-ui, sans-serif;
font-size: 1.7rem;
font-weight: 400;
letter-spacing: -0.02em;
color: #0e1a26;
margin: 22px 0 14px;
}
.sv-svcphase-text {
font-family: ui-monospace, 'PP Neue Montreal', monospace;
font-size: 0.84rem;
line-height: 1.7;
color: #647483;
max-width: 460px;
margin: 0;
}
/* Sin scroll-effect en reduced-motion · cards a opacidad plena */
@media (prefers-reduced-motion: reduce) {
.sv-svcphase { opacity: 1; transform: none; transition: none; }
}
/* ── 10 · Resources / Contenidos · reusa .s-resources-grid ── */
.sv-resources { padding: 120px 0; background: #ffffff; }
.sv-resources-header { margin-bottom: 56px; }
.sv-resources-header .s-eyebrow { display: block; margin-bottom: 18px; }
/* ── 11 · FAQ · pill rows full-width con + a la derecha ── */
/* Bloque "Preguntas frecuentes" · 2 columnas (cabecera izq + lista der),
filas planas con filete · replica servicio-realidad-extendida.html. */
.sv-faq {
padding: 80px 0;
background: #ffffff;
border-top: 1px solid rgba(100, 116, 131, 0.15);
}
.sv-faq-inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
.sv-faq-header .s-eyebrow { display: block; margin-bottom: 12px; }
.sv-faq-header h2 { margin: 0; }
.sv-faq .faq-list {
display: flex;
flex-direction: column;
}
.sv-faq .faq-item {
border-bottom: 1px solid rgba(100, 116, 131, 0.15);
}
.sv-faq .faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 0;
cursor: pointer;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 1rem;
font-weight: 500;
color: #647483;
transition: color 0.3s;
}
.sv-faq .faq-question:hover { color: #3a4f5f; }
.sv-faq .faq-icon {
font-size: 1.4rem;
line-height: 1;
color: #647483;
flex-shrink: 0;
margin-left: 16px;
transition: transform 0.3s;
}
.sv-faq .faq-item.active .faq-icon { transform: rotate(45deg); }
.sv-faq .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-faq .faq-answer-inner {
padding: 0 0 24px;
font-family: 'PP Neue Montreal', system-ui, sans-serif;
font-size: 0.95rem;
line-height: 1.8;
color: #8a9baa;
}
/* ── Responsive ServiceTemplate v3 ── */
@media (max-width: 1100px) {
.sv-phases-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 920px) {
.sv-hero .sv-hero-inner { grid-template-columns: 1fr; gap: 32px; }
.sv-overview-grid { grid-template-columns: 1fr; gap: 36px; }
.sv-subgrid-card { height: 420px; }
.sv-subgrid-sheet { padding: 22px; }
.sv-svcphases-grid { grid-template-columns: 1fr; gap: 32px; }
.sv-svcphases-sticky { position: static; }
.sv-banner-inner,
.sv-banner-inner.has-form {
grid-template-columns: 1fr;
gap: 32px;
}
.sv-banner { padding: 60px 0; }
.sv-faq-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
.sv-phases-strip { grid-template-columns: repeat(2, 1fr); }
.sv-phase-chip { padding: 12px 14px; }
}
/* ════════════════════════════════════════════════════════════════════════
███ IMASCONO INDUSTRIA · CAPA SECTORIAL ███
Estilos propios de la web estática sectorial. NO existen en el sitio
original: viven solo aquí. Reutilizan los tokens del sistema
(#647483 texto · #0e1a26 tinta · #8a9baa apagado · Visuelt Pro / mono).
════════════════════════════════════════════════════════════════════════ */
:root {
--ind-ink: #0e1a26;
--ind-text: #647483;
--ind-muted: #8a9baa;
--ind-line: rgba(200, 210, 220, 0.55);
--ind-mono: "DM Mono", ui-monospace, "PP Neue Montreal", monospace;
}
/* ── Helpers tipográficos ── */
.ind-eyebrow {
display: inline-block;
font-family: var(--ind-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ind-muted);
margin-bottom: 16px;
}
.ind-title {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--ind-text);
margin: 0;
font-size: clamp(2rem, 4vw, 3.4rem);
}
.ind-title em { font-style: normal; color: var(--ind-muted); }
.ind-lead {
font-size: 1.05rem;
line-height: 1.7;
color: var(--ind-text);
max-width: 60ch;
}
.ind-section { padding: 110px 0; }
.ind-section--tight { padding: 80px 0; }
/* Foto de cabecera de servicio: menos espacio con el texto de arriba */
.ind-section--tight:has(.ind-fotaza-img) { padding-top: 18px; }
.ind-section--dark { background: var(--ind-ink); }
.ind-section--dark .ind-title,
.ind-section--dark .ind-lead { color: #fff; }
.ind-section--dark .ind-eyebrow { color: rgba(255,255,255,0.55); }
.ind-section-head { margin-bottom: 54px; }
/* ── Placeholder [FOTAZA] ── */
.fotaza {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background:
repeating-linear-gradient(45deg, rgba(14,26,38,0.03) 0 10px, transparent 10px 20px),
#eef1f4;
border: 1px dashed rgba(14, 26, 38, 0.28);
color: var(--ind-muted);
min-height: 260px;
overflow: hidden;
}
.fotaza::before {
content: "▣";
position: absolute;
top: 14px; left: 16px;
font-size: 0.9rem;
color: rgba(14,26,38,0.35);
}
.fotaza-label {
font-family: var(--ind-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
line-height: 1.6;
padding: 28px;
max-width: 80%;
}
.fotaza-label strong {
display: block;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ind-ink);
margin-bottom: 8px;
}
.fotaza--hero { min-height: 520px; }
.fotaza--tall { min-height: 460px; height: 100%; }
.ind-section--dark .fotaza {
background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 20px),
rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.22);
color: rgba(255,255,255,0.7);
}
.ind-section--dark .fotaza-label strong { color: #fff; }
.ind-section--dark .fotaza::before { color: rgba(255,255,255,0.4); }
/* ── Dropdown "Servicios" en el header ── */
.ind-dd { position: relative; }
.ind-dd-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
font: inherit;
font-size: 0.8rem;
font-weight: 500;
color: #8a9baa;
text-transform: uppercase;
letter-spacing: 0.03em;
transition: color 0.2s;
}
.ind-dd-trigger:hover,
.ind-dd.open .ind-dd-trigger { color: var(--ind-text); }
.ind-dd-trigger::after {
content: "";
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.25s;
}
.ind-dd.open .ind-dd-trigger::after { transform: rotate(-135deg) translateY(-2px); }
/* ── Mega-menú "Servicios" a pantalla completa ── */
.ind-dd-panel {
position: fixed;
top: 73px;
left: 0;
right: 0;
width: 100vw;
height: calc(100vh - 73px);
min-width: 0;
margin: 0;
background: rgba(84, 104, 120, 0.97);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
padding: 72px max(40px, calc(50vw - 680px)) 48px;
opacity: 0;
pointer-events: none;
transform: translateY(-12px);
transition: opacity 0.32s ease, transform 0.32s ease;
box-shadow: none;
}
.ind-dd.open .ind-dd-panel {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Puente invisible que cubre el hueco botón↔panel para que no se cierre al bajar el ratón */
.ind-dd-panel::before {
content: "";
position: fixed;
left: 0;
right: 0;
top: 40px;
height: 40px;
}
/* Título grande "Servicios" a la izquierda */
.ind-dd-panel::after {
content: "Servicios";
position: absolute;
left: max(40px, calc(50vw - 680px));
top: 70px;
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.6rem, 6vw, 5.2rem);
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #ffffff;
pointer-events: none;
}
html[lang="en"] .ind-dd-panel::after { content: "Services"; }
/* Lista de servicios a la derecha, en filas separadas por líneas */
.ind-dd-panel a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin-left: 44%;
padding: 22px 4px;
color: #ffffff;
font-family: "Visuelt Pro", system-ui, sans-serif;
font-size: 0.92rem;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
border-bottom: 1px solid rgba(255, 255, 255, 0.55);
transition: padding-left 0.25s ease, color 0.2s ease, opacity 0.2s ease;
}
.ind-dd-panel a:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.55); }
.ind-dd-panel a:hover { background: transparent; color: #fff; opacity: 0.75; padding-left: 14px; }
.ind-dd-panel a span:last-child { color: inherit; }
/* ── HERO (home) ── */
.ind-hero {
position: relative;
padding: 150px 0 60px;
overflow: hidden;
display: flex;
align-items: center;
min-height: 68vh;
}
.ind-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ind-hero-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to right, rgba(14,26,38,0.67) 0%, rgba(14,26,38,0.67) 30%, rgba(14,26,38,0.34) 45%, rgba(14,26,38,0) 56%);
}
/* Reduce el contraste de la imagen en la misma zona del degradado (izquierda) */
.ind-hero-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
-webkit-backdrop-filter: contrast(0.5);
backdrop-filter: contrast(0.5);
-webkit-mask-image: linear-gradient(to right, #000 0, #000 30%, transparent 56%);
mask-image: linear-gradient(to right, #000 0, #000 30%, transparent 56%);
}
.ind-hero .container { position: relative; z-index: 1; width: 100%; }
.ind-hero-intro { max-width: min(50vw - 40px, 680px); }
.ind-hero .btn-outline { background: #fff; border-color: #fff; }
.ind-hero .btn-outline:hover { border-color: var(--ind-text); }
.ind-hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 60px;
align-items: center;
}
.ind-hero h1 {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.4rem, 4.6vw, 4.2rem);
line-height: 1.04;
letter-spacing: -0.035em;
color: #ffffff;
text-shadow: 0 1px 16px rgba(14, 26, 38, 0.45);
margin: 0;
}
.ind-hero h1 strong { font-weight: inherit; color: inherit; }
.ind-hero-sub {
font-family: var(--ind-mono);
font-size: 0.9rem;
line-height: 1.8;
letter-spacing: 0.01em;
color: #ffffff;
text-shadow: 0 1px 12px rgba(14, 26, 38, 0.45);
margin: 28px 0 28px;
max-width: 56ch;
}
.ind-hero-media { margin-top: 64px; width: 100%; }
.ind-hero-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
filter: brightness(0.8) saturate(0.95);
transform: translate3d(0, var(--py, 0px), 0) scale(1.18);
will-change: transform;
}
.ind-hero .ind-eyebrow { color: #ffffff; text-shadow: 0 1px 10px rgba(14, 26, 38, 0.4); }
.ind-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* ── Orden de bloques en la home: Hero → Servicios → resto ── */
.public-site main { display: flex; flex-direction: column; }
.public-site main > section { order: 3; }
.public-site main > .ind-hero { order: 1; }
.public-site main > #servicios { order: 2; }
#servicios { padding: 60px 0; }
#servicios .ind-title em { color: inherit; }
#proyectos .ind-title em { color: inherit; }
/* Espaciado uniforme entre bloques de la home (~120px de hueco) */
#proyectos { padding: 60px 0; }
.ind-manifesto { padding: 100px 0; }
#contacto { padding: 100px 0; background: #eef2f5; }
/* Selector de idioma: activo en gris oscuro con subrayado */
.header-actions .lang-link.active { color: #46535f; border-bottom-color: #46535f; }
/* ── Rejilla de servicios (home) ── */
.ind-serv-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
background: transparent;
border: 0;
}
/* CTA + rectángulo bajo los 6 servicios */
.ind-serv-cta {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 56px;
}
/* Hero de portfolio: texto a la izquierda, botón a la derecha */
.ind-page-hero-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 48px;
flex-wrap: wrap;
}
.ind-page-hero-cta { flex-shrink: 0; }
.ind-serv-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 36px 30px 30px;
background: #fff;
min-height: 230px;
overflow: hidden;
transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), filter 0.45s ease, box-shadow 0.45s ease, opacity 0.45s ease, background 0.3s ease;
}
/* Foto de fondo (solo tarjetas con imagen) */
.ind-serv-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
/* Tinte gris (#546878) al 25% sobre la foto */
box-shadow: inset 0 0 0 9999px rgba(84,104,120,0.25);
transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.ind-serv-card--img {
aspect-ratio: 16 / 9;
height: auto;
min-height: 0;
padding: 24px 26px;
justify-content: flex-end;
}
/* Degradado para leer el título sobre la foto nítida */
.ind-serv-card--img::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(42,50,58,0.44) 0%, rgba(42,50,58,0.32) 24%, rgba(42,50,58,0.09) 50%, rgba(42,50,58,0) 74%);
z-index: 1;
transition: background 0.45s ease;
}
.ind-serv-card--img > *:not(.ind-serv-bg) { position: relative; z-index: 2; }
/* Hover: la tarjeta crece y su foto se desenfoca */
.ind-serv-card:hover {
background: #f7f9fb;
transform: scale(1.03);
z-index: 5;
box-shadow: 0 18px 48px rgba(14,26,38,0.20);
}
.ind-serv-card--img:hover .ind-serv-bg { filter: none; transform: scale(1.08); }
/* El resto de tarjetas se desenfocan y desaturan un 30% */
.ind-serv-grid:hover .ind-serv-card:not(:hover) {
filter: saturate(0.55) brightness(0.82);
opacity: 0.92;
}
/* El desenfoque va sobre la imagen interior (recortada por el marco), no sobre la tarjeta:
así los bordes del marco se mantienen rígidos/nítidos. */
.ind-serv-grid:hover .ind-serv-card--img:not(:hover) .ind-serv-bg {
filter: blur(5.5px);
transform: none;
}
.ind-serv-num {
font-family: var(--ind-mono);
font-size: 0.74rem;
color: var(--ind-muted);
letter-spacing: 0.1em;
}
.ind-serv-card h3 {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--ind-ink);
margin: 0;
}
.ind-serv-card p {
font-size: 0.9rem;
line-height: 1.6;
color: var(--ind-text);
margin: 0;
flex: 1;
}
.ind-serv-card .ind-arrow {
font-family: var(--ind-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ind-ink);
}
.ind-serv-card .ind-arrow .arrow { transition: transform 0.3s ease; display: inline-block; }
.ind-serv-card:hover .ind-arrow .arrow { transform: translateX(5px); }
/* ── Texto sobre foto: blanco por defecto ── */
.ind-serv-card--img .ind-serv-num { color: rgba(255,255,255,0.85); text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
.ind-serv-card--img h3 {
color: #fff;
text-shadow: 0 1px 14px rgba(0,0,0,0.5);
transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), color 0.3s ease, text-shadow 0.3s ease;
}
/* Subtítulo y botón "Ver": ocultos, aparecen en hover siguiendo la misma animación del título */
.ind-serv-card--img p {
color: var(--ind-text);
flex: 0 0 auto;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(14px);
transition: max-height 0.9s cubic-bezier(0.22,1,0.36,1), opacity 0.75s ease, transform 0.9s cubic-bezier(0.22,1,0.36,1), color 0.3s ease;
transition-delay: 0.06s;
}
.ind-serv-card--img .ind-arrow {
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(14px);
transition: max-height 0.9s cubic-bezier(0.22,1,0.36,1), opacity 0.75s ease, transform 0.9s cubic-bezier(0.22,1,0.36,1), color 0.3s ease;
transition-delay: 0.14s;
}
/* Hover: degradado inferior oscuro y sutil (sin oscurecer toda la imagen) */
.ind-serv-card--img:hover::before {
background: linear-gradient(to top, rgba(14,26,38,0.6) 0%, rgba(14,26,38,0.22) 38%, rgba(14,26,38,0) 66%);
}
.ind-serv-card--img:hover h3 { color: #fff; text-shadow: none; transform: translateY(-4px); }
.ind-serv-card--img:hover .ind-serv-num { color: rgba(255,255,255,0.6); text-shadow: none; }
.ind-serv-card--img:hover p {
color: rgba(255,255,255,0.72);
max-height: 220px;
opacity: 1;
transform: none;
}
.ind-serv-card--img:hover .ind-arrow {
color: rgba(255,255,255,0.72);
max-height: 40px;
opacity: 1;
transform: none;
}
/* ── Clientes (marquee de texto) ── */
.ind-clients { padding: 60px 0; background: #fff; position: relative; }
/* Línea inferior a ancho de container (igual que la línea del bloque de datos) */
.ind-clients::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(calc(100% - 80px), 1360px);
border-top: 1px solid var(--ind-line);
}
.ind-fotaza-img {
display: block;
width: 100%;
min-height: 520px;
max-height: 620px;
object-fit: cover;
}
.ind-clients-title {
text-align: center;
font-family: var(--ind-mono);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ind-muted);
margin-bottom: 34px;
}
.ind-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.ind-marquee-track { display: flex; gap: 56px; width: max-content; animation: ind-scroll 32s linear infinite; will-change: transform; backface-visibility: hidden; }
.ind-marquee:hover .ind-marquee-track { animation-play-state: running; }
.ind-marquee-track span {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-size: 1.4rem;
font-weight: 300;
color: var(--ind-muted);
white-space: nowrap;
}
@keyframes ind-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.ind-marquee-track--logos { gap: 0; }
.ind-marquee-logos {
display: block;
height: 72px;
width: auto;
flex-shrink: 0;
margin-right: 20px;
opacity: 0.85;
}
/* ── Manifiesto "Humanizamos la tecnología industrial" ── */
.ind-manifesto-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.ind-manifiesto-img {
display: block;
width: 100%;
height: 100%;
min-height: 460px;
object-fit: cover;
}
.ind-manifesto h2 {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--ind-text);
margin: 0 0 26px;
}
.ind-manifesto p { margin: 0 0 18px; line-height: 1.75; color: var(--ind-text); }
/* ── 3 datos (reaprovecha .stats si se quiere; aquí versión propia) ── */
.ind-datos-section { background: #fff; padding: 60px 0 0; }
.ind-datos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
border-bottom: 1px solid var(--ind-line);
padding: 0 0 60px;
}
/* Variante con línea superior simétrica (páginas de servicio) */
.ind-datos-grid--framed {
border-top: 1px solid var(--ind-line);
padding-top: 60px;
}
.ind-dato { text-align: center; }
.ind-datos-grid--left { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ind-datos-grid--left .ind-dato { text-align: left; }
.ind-datos-grid--left .ind-dato-num { font-size: clamp(2.8rem, 4.2vw, 3.6rem); margin-bottom: 14px; }
.ind-datos-grid--left .ind-dato-desc { margin: 0; max-width: none; font-family: "Visuelt Pro", system-ui, sans-serif; color: #6a7888; }
/* Variante de una sola línea (usada en Hispanosuiza) */
.ind-datos-grid--nowrap .ind-dato-desc { white-space: nowrap; }
.ind-dato-num {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(3.2rem, 6vw, 5.5rem);
line-height: 1;
letter-spacing: -0.03em;
color: #7c8a96;
margin-bottom: 22px;
}
.ind-dato-desc {
font-family: var(--ind-mono);
font-size: 0.84rem;
line-height: 1.7;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7c8a96;
max-width: 30ch;
margin: 0 auto;
}
/* ── 6 características ── */
.ind-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(200,210,220,0.3); border: 1px solid rgba(200,210,220,0.3); }
.ind-feature { background: #fff; padding: 34px 28px; }
.ind-feature:nth-child(odd) { background: #fbfcfd; }
.ind-feature-num { font-family: var(--ind-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ind-muted); }
.ind-feature h4 {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 500;
font-size: 1.12rem;
letter-spacing: -0.01em;
color: var(--ind-ink);
margin: 14px 0 12px;
}
.ind-feature p { font-size: 0.88rem; line-height: 1.62; color: var(--ind-text); margin: 0; }
/* ── Propuesta de valor / Imascono Tech (split texto + media) ── */
.ind-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ind-split--rev .ind-split-text { order: 2; }
/* ── Proyectos (rejilla de tarjetas con overlay) ── */
.ind-proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ind-proj-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Dos casos a ancho completo del grid (servicio Proyectos a Medida) */
.ind-proj-grid--centered { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Portfolio: 2 columnas con tarjetas más horizontales (16:9), sin deformar */
.ind-proj-grid--wide { grid-template-columns: repeat(2, 1fr); }
.ind-proj-grid--wide .ind-proj-card { aspect-ratio: 16 / 9; }
.ind-proj-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ind-ink); color: #fff; }
.ind-proj-card .fotaza { position: absolute; inset: 0; min-height: 0; border: none; }
.ind-proj-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.ind-proj-card:hover .ind-proj-img { transform: scale(1.05); }
.ind-proj-overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 26px;
background: linear-gradient(to top, rgba(14,26,38,0.82) 0%, rgba(14,26,38,0.15) 55%, transparent 100%);
}
.ind-proj-sector { font-family: var(--ind-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 8px; }
.ind-proj-card h3 { font-family: "Visuelt Pro", system-ui, sans-serif; font-weight: 400; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; }
.ind-proj-link { font-family: var(--ind-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.ind-proj-card:hover .ind-proj-link { opacity: 1; transform: translateY(0); }
/* ── CTA "Ver más proyectos" ── */
.ind-cta-line { display: inline-flex; align-items: center; gap: 18px; margin-top: 48px; font-family: var(--ind-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ind-ink); }
.ind-cta-line .arrow { transition: transform 0.3s ease; }
.ind-cta-line:hover .arrow { transform: translateX(6px); }
/* ── Página de servicio / proyecto · hero ── */
.ind-page-hero { padding: 150px 0 70px; }
.ind-page-hero .ind-eyebrow { color: var(--ind-muted); }
.ind-page-hero h1 {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.2rem, 4.4vw, 3.8rem);
line-height: 1.05;
letter-spacing: -0.035em;
color: var(--ind-ink);
margin: 0 0 22px;
max-width: 18ch;
}
.ind-page-hero-sub { font-size: 1.05rem; line-height: 1.7; color: var(--ind-text); max-width: 62ch; }
.ind-breadcrumb { font-family: var(--ind-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ind-muted); margin-bottom: 28px; }
.ind-breadcrumb a { color: var(--ind-muted); }
.ind-breadcrumb a:hover { color: var(--ind-text); }
/* ── Hero de páginas de servicio: título gris + subtítulo mono, imagen 4:3 a la derecha, datos debajo ── */
/* Bloque "Propuesta de valor" de servicios: mismo gris que "características",
con línea separadora gris oscura al ancho de las guías (no a sangre). */
.ind-propuesta { background: #f7f9fb; position: relative; padding-bottom: 56px; }
/* Imagen 1/3 del ancho y texto 2/3 (la imagen va a la izquierda por --rev).
La columna de la imagen se estira a la altura del texto y la imagen se recorta
(cover) manteniéndose centrada, sin deformarse. */
.ind-propuesta .ind-split { align-items: start; grid-template-columns: 1fr 2fr; }
/* El subtítulo (lead) ocupa todo el ancho de su columna, igual que el título */
.ind-propuesta .ind-split-text .ind-lead { max-width: none; }
/* Espaciado reducido alrededor de la línea divisoria */
.ind-propuesta + .ind-section { padding-top: 56px; }
.ind-propuesta::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(calc(100% - 80px), 1360px);
border-top: 1px solid #4f5d68;
}
/* Bloque "Imascono Tech": fondo azul pizarra con patrón de puntos animado (efecto ola) */
.ind-section--dark.ind-tech-bg { position: relative; overflow: hidden; background: linear-gradient(160deg, #3d4b59 0%, #36434f 100%); }
.ind-tech-bg::before {
content: "";
position: absolute;
inset: -25%;
z-index: 1; /* puntos por encima del logo */
background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1.1px, transparent 1.7px);
background-size: 26px 26px;
/* Deriva acelerada por GPU (transform) → fluida, sin tirones.
-130px = 5×26, -78px = 3×26 → el patrón vuelve a coincidir: bucle perfecto. */
transform: translate3d(0, 0, 0);
animation: techDotsDrift 16s linear infinite;
will-change: transform;
}
@keyframes techDotsDrift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-130px, -78px, 0); }
}
@media (prefers-reduced-motion: reduce) {
.ind-tech-bg::before { animation: none; }
}
/* Logo Imascono ampliado a la derecha, recortado por los bordes del bloque:
puntos unidos por una malla fina (mismo grid de 26px), con la misma deriva que el fondo. */
.ind-tech-bg::after {
content: "";
position: absolute;
z-index: 0;
top: 50%;
right: -12%;
transform: translateY(calc(-50% + var(--logoPy, 0px)));
width: 60%;
height: 150%;
pointer-events: none;
z-index: 2; /* capa del logo por encima de los puntos (para difuminarlos) */
/* Logo: velo blanco tenue */
background-color: rgba(255,255,255,0.2);
-webkit-mask: url("../img/logo-imascono-tech.svg") right center / contain no-repeat;
mask: url("../img/logo-imascono-tech.svg") right center / contain no-repeat;
/* Borde suave + desenfoque del logo */
filter: blur(11px);
}
@media (prefers-reduced-motion: reduce) {
.ind-tech-bg::after { animation: none; }
}
.ind-tech-bg > .container { position: relative; z-index: 3; }
/* Degradado de desenfoque en los bordes superior e inferior del bloque:
el blur es pleno en los extremos y se desvanece hacia el centro (vía máscara). */
.ind-tech-edgeblur {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.35) 0, transparent 8%, transparent 78%, #000 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.35) 0, transparent 8%, transparent 78%, #000 100%);
}
.ind-tech-bg .fotaza { display: none; }
/* "tecnología" en blanco como el resto de la frase */
.ind-tech-bg .ind-title em { color: inherit; font-style: normal; }
/* Hero de la página de proyectos: banda gris clara, título gris y subtítulo a la derecha */
.ind-cases-hero { background: #eef2f5; padding: 130px 0 64px; }
.ind-cases-hero-row { display: flex; align-items: center; gap: 64px; flex-wrap: wrap; }
.ind-cases-hero h1 {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.6rem, 5.5vw, 4.8rem);
line-height: 1.0;
letter-spacing: -0.035em;
color: var(--ind-text);
margin: 0;
}
.ind-cases-hero-sub {
font-size: 1.05rem;
line-height: 1.55;
color: var(--ind-muted);
max-width: 34ch;
margin: 0;
}
/* Hero de caso de éxito a sangre con imagen de fondo y texto en el tercio inferior */
.ind-case-hero { position: relative; overflow: hidden; }
.ind-case-hero-bg { position: relative; line-height: 0; aspect-ratio: 16 / 7; }
.ind-case-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(0, var(--py, 0px), 0) scale(1.18); will-change: transform; }
.ind-case-hero-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(14,26,38,0.85) 0%, rgba(14,26,38,0.6) 16%, rgba(14,26,38,0.2) 36%, rgba(14,26,38,0) 56%);
}
.ind-case-hero .container { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: 2; padding-bottom: 56px; }
.ind-case-hero-inner { max-width: none; }
.ind-case-hero .ind-eyebrow { color: rgba(255,255,255,0.82); }
.ind-case-hero h1 {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(3rem, 6vw, 5.6rem);
line-height: 1.02;
letter-spacing: -0.035em;
color: #ffffff;
margin: 14px 0 0;
}
.ind-case-hero-sub {
margin-top: 24px;
font-size: 1.2rem;
line-height: 1.65;
color: rgba(255,255,255,0.88);
max-width: 50%;
}
.ind-serv-hero { padding-bottom: 90px; position: relative; overflow: hidden; }
/* Fondo del bloque: misma imagen del hero, con zoom, desenfocada y al 50% (contenida) */
.ind-serv-hero-bgimg { position: absolute; top: 72px; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1440px; box-sizing: border-box; overflow: hidden; z-index: 0; pointer-events: none; }
.ind-serv-hero-bgimg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(5px) saturate(0.75) brightness(0.75);
opacity: 0.26;
transform: translate3d(0, var(--py, 0px), 0) scale(1.14);
will-change: transform;
}
.ind-serv-hero-bgimg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, #ffffff 100%);
}
.ind-serv-hero > .container { position: relative; z-index: 1; }
/* Fila superior: título a la izquierda (50%), subtítulo a la derecha (50%), centrados */
.ind-serv-hero-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.ind-serv-hero h1 {
color: var(--ind-text);
width: min-content;
max-width: 100%;
overflow-wrap: normal;
font-size: clamp(3.4rem, 6.8vw, 5.8rem);
line-height: 1.0;
}
.ind-serv-hero .ind-page-hero-sub {
font-family: var(--ind-mono);
font-size: 0.98rem;
line-height: 1.7;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #546878;
max-width: none;
margin-top: 6rem; /* situado más abajo respecto al título */
}
/* Hero de servicio: tipografía en blanco (sobre el fondo de imagen) */
.ind-serv-hero .ind-breadcrumb,
.ind-serv-hero .ind-breadcrumb a { color: #546878; }
.ind-serv-hero .ind-serv-hero-datos .ind-dato-num { color: var(--ind-text); }
.ind-serv-hero .ind-serv-hero-datos .ind-dato-desc { color: #546878; }
/* Imagen del hero: debajo del texto, 16:7 a todo el ancho del grid, sin deformar */
.ind-serv-hero-media { margin-top: 40px; aspect-ratio: 16 / 7; overflow: hidden; }
.ind-serv-hero-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: translate3d(0, var(--py, 0px), 0) scale(1.14);
will-change: transform;
}
/* Datos debajo de la imagen, a todo el ancho (fila de 3) con línea separadora sutil */
.ind-serv-hero-datos {
grid-template-columns: repeat(3, 1fr);
gap: 56px;
margin-top: 48px;
border: 0;
padding: 0;
}
.ind-serv-hero-datos .ind-dato { position: relative; text-align: center; padding: 0; }
/* Línea separadora centrada en el hueco entre columnas (no afecta al ancho) */
.ind-serv-hero-datos .ind-dato + .ind-dato::before {
content: "";
position: absolute;
left: -28px;
top: 0;
bottom: 0;
border-left: 1px solid rgba(100, 116, 131, 0.25);
}
.ind-serv-hero-datos .ind-dato-num { font-size: clamp(2.8rem, 4.4vw, 4.2rem); font-weight: 300; margin-bottom: 10px; }
.ind-serv-hero-datos .ind-dato-desc { font-size: 0.74rem; text-align: center; margin: 0; max-width: none; letter-spacing: 0.06em; text-wrap: balance; }
@media (max-width: 980px) {
.ind-serv-hero-top { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}
@media (max-width: 600px) {
.ind-serv-hero-datos { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
.ind-serv-hero-datos { grid-template-columns: 1fr; gap: 32px; }
}
/* ── Ficha de proyecto · meta + brief ── */
.ind-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; border-top: 1px solid var(--ind-line); border-bottom: 1px solid var(--ind-line); padding: 36px 0; }
.ind-meta-cell .ind-meta-label { font-family: var(--ind-mono); font-size: 0.7625rem; letter-spacing: 0.12em; text-transform: uppercase; color: #73828f; margin-bottom: 8px; }
.ind-meta-cell .ind-meta-val { font-family: "Visuelt Pro", system-ui, sans-serif; font-weight: 300; font-size: 1.4825rem; line-height: 1.5; color: var(--ind-ink); }
.ind-brief { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 34px calc(50vw - 50%); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.ind-brief-label { font-family: var(--ind-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ind-text); }
/* Menos espacio entre la línea inferior del bloque META y el primer brief (Introducción) */
.ind-section--tight:has(.ind-meta-grid) { padding-bottom: 28px; }
.ind-section--tight:has(.ind-brief) { padding-top: 28px; padding-bottom: 28px; }
.ind-section--tight:has(.ind-brief) + .ind-datos-section { padding-top: 28px; }
/* Sin línea superior en el bloque de datos de las páginas de caso (la de encima de "+800") */
.ind-section--tight:has(.ind-brief) + .ind-datos-section .ind-datos-grid { border-top: none; padding-top: 0; }
/* Filas alternas del brief (Brief del cliente y Experiencia) con fondo gris claro, de línea a línea */
.ind-brief:nth-of-type(even) {
background: linear-gradient(to right,
#ffffff 0,
#f7f9fb max(50vw - 680px, 40px),
#f7f9fb calc(100% - max(50vw - 680px, 40px)),
#ffffff 100%);
}
.ind-brief-body { line-height: 1.75; color: var(--ind-text); }
/* ── Quote (alineada a la izquierda, grande, gris) ── */
.ind-quote { text-align: left; max-width: 1180px; margin: 0; }
.ind-quote blockquote {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(1.9rem, 3.6vw, 3.2rem);
line-height: 1.22;
letter-spacing: -0.025em;
color: var(--ind-text);
margin: 0 0 40px;
}
.ind-quote cite {
font-family: var(--ind-mono);
font-style: normal;
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ind-muted);
display: inline-flex;
align-items: center;
}
.ind-quote cite::before {
content: "";
width: 44px;
height: 1px;
background: var(--ind-muted);
margin-right: 18px;
}
/* ── Caso de éxito · plantilla ampliada (hero stat, intro 2col, media, franja CTA, metodología) ── */
.ind-case-hero-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 22px; margin-top: 16px; }
.ind-case-hero-stat-num {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(2.6rem, 5.4vw, 4.4rem);
line-height: 1;
letter-spacing: -0.03em;
color: #fff;
}
.ind-case-hero-stat-label {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-size: 0.967rem;
letter-spacing: 0;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.ind-case-intro { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; }
.ind-case-intro-lead {
font-family: "Visuelt Pro", system-ui, sans-serif;
font-weight: 300;
font-size: clamp(1.85rem, 2.9vw, 2.5rem);
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--ind-text);
margin: 0;
}
.ind-case-intro-left .ind-eyebrow { margin-bottom: 24px; }
.ind-case-intro-body { font-size: 1.125rem; line-height: 1.55; color: var(--ind-text); margin: 38px 0 0; }
.ind-case-media { overflow: hidden; aspect-ratio: 16 / 9; }
.ind-case-media img,
.ind-case-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ind-cta-section { background: #eef2f5; }
.ind-cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 48px; background: #fff; padding: 48px 56px; box-shadow: 0 18px 50px rgba(14, 26, 38, 0.07); }
.ind-cta-strip-body { flex: 1; min-width: 0; max-width: none; }
.ind-cta-strip-text { white-space: nowrap; }
.ind-cta-strip-text { font-family: "Visuelt Pro", system-ui, sans-serif; font-weight: 300; font-size: clamp(1.9rem, 2.8vw, 2.375rem); line-height: 1.28; letter-spacing: -0.02em; color: var(--ind-text); margin: 0; }
.ind-cta-strip-text strong { color: var(--ind-ink); font-weight: 300; font-size: 2.5625rem; }
.ind-cta-strip .ind-eyebrow { font-size: 0.72rem; }
.ind-cta-strip .btn-primary { white-space: nowrap; flex: none; font-size: 1.08rem; padding: 20px 38px; }
.ind-case-block-head { max-width: 60ch; margin-bottom: 34px; }
/* Bloque "El reto": contenido en la mitad derecha + imagen a sangre debajo */
.ind-case-reto { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.ind-case-step { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; font-family: var(--ind-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ind-muted); }
.ind-case-step-num { color: var(--ind-text); }
.ind-case-step-rule { width: 54px; height: 1px; background: var(--ind-line); }
.ind-case-reto-title { color: var(--ind-ink); margin: 0 0 28px; font-size: clamp(2rem, 3.4vw, 2.9rem); }
.ind-case-reto-main .ind-case-body { margin: 0; max-width: none; }
.ind-case-reto-media { margin-top: 64px; }
/* Placeholder para huecos de medios pendientes (vídeo / imágenes) */
.ind-media-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; background: repeating-linear-gradient(45deg, #eef2f5, #eef2f5 16px, #e6ebf0 16px, #e6ebf0 32px); color: #8a9baa; font-family: var(--ind-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--ind-line); box-sizing: border-box; }
.ind-case-reto-rule { height: 1px; background: var(--ind-line); margin-bottom: 56px; }
/* Cita estilo caso de éxito (más grande, interlineado compacto) */
.ind-quote--case blockquote { font-size: clamp(2.8rem, 4.85vw, 4.2rem); line-height: 1.12; margin-bottom: 60px; }
.ind-quote--case cite::before { width: 72px; }
.ind-quote--case cite { font-family: "Visuelt Pro", system-ui, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.9275rem; }
.ind-quote--case cite .ind-sep { margin: 0 0.55em; }
.ind-quote--case .ind-word { transition: opacity 0.25s ease-out; will-change: opacity; }
/* Servicio asociado: botón "Ver servicio" se oscurece y el texto se aclara al hover */
.ind-assoc .btn-outline:hover { background: var(--ind-ink); border-color: var(--ind-ink); color: #fff; }
@media (max-width: 900px) { .ind-case-reto { grid-template-columns: 1fr; gap: 0; } }
.ind-case-body { font-size: 1.02rem; line-height: 1.85; color: var(--ind-text); max-width: 70ch; margin: 0 0 38px; }
.ind-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.ind-method-col { border-top: 1px solid var(--ind-line); padding-top: 24px; }
.ind-method-col h3 { font-family: "Visuelt Pro", system-ui, sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ind-ink); margin: 0 0 14px; }
.ind-method-col p { font-size: 0.92rem; line-height: 1.72; color: var(--ind-text); margin: 0; }
@media (max-width: 900px) {
.ind-case-intro, .ind-method-grid { grid-template-columns: 1fr; gap: 28px; }
.ind-cta-strip { flex-direction: column; align-items: flex-start; gap: 24px; }
}
/* ── Servicio asociado / relacionados ── */
.ind-assoc { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: #f7f9fb; padding: 48px; }
.ind-assoc h3 { font-family: "Visuelt Pro", system-ui, sans-serif; font-weight: 400; font-size: 1.6rem; color: var(--ind-ink); margin: 0 0 14px; letter-spacing: -0.02em; }
.ind-assoc p { color: var(--ind-text); line-height: 1.65; margin: 0 0 20px; }
.ind-assoc-img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
/* Imagen de la propuesta de valor con capa gris oscura al 25% */
.ind-propuesta-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.ind-propuesta-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Capa: tinte gris 25% (sin degradado a blanco) */
.ind-propuesta-media::after {
content: "";
position: absolute;
inset: 0;
background: rgba(58, 70, 81, 0.25);
}
/* Espaciado compacto del bloque "Servicio asociado" y de los siguientes (relacionados / CTA) */
/* Menos hueco entre la cita y el bloque "Servicio asociado" */
.ind-section:has(.ind-quote) { padding-bottom: 40px; }
.ind-section--tight:has(.ind-assoc) { padding-top: 44px; padding-bottom: 44px; }
.ind-section--tight:has(.ind-assoc) + .ind-section { padding-top: 48px; padding-bottom: 48px; }
.ind-section--tight:has(.ind-assoc) + .ind-section + .ind-section--tight { padding-top: 36px; }
/* ── Formulario "Hablemos de tu proyecto" ── */
.ind-form-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.ind-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ind-field { display: flex; flex-direction: column; gap: 8px; }
.ind-field--full { grid-column: 1 / -1; }
.ind-field label { font-family: var(--ind-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.ind-field input,
.ind-field select,
.ind-field textarea {
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
font: inherit;
font-size: 0.98rem;
padding: 10px 0;
outline: none;
transition: border-color 0.25s;
}
.ind-field input::placeholder,
.ind-field textarea::placeholder { color: rgba(255,255,255,0.35); }
.ind-field input:focus,
.ind-field select:focus,
.ind-field textarea:focus { border-bottom-color: #fff; }
.ind-field select option { color: #0e1a26; }
.ind-field textarea { resize: vertical; min-height: 90px; }
.ind-form .ind-field--submit { grid-column: 1 / -1; }
/* ── Formulario de contacto: tema claro (referencia) ── */
.ind-contact { background: #ffffff; }
.ind-contact .ind-title { color: var(--ind-text); }
.ind-contact .ind-eyebrow { color: var(--ind-muted); }
.ind-form-sub {
font-family: var(--ind-mono);
font-size: 0.78rem;
line-height: 1.95;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ind-muted);
margin-top: 24px;
max-width: none;
}
.ind-contact .ind-form { grid-template-columns: 1fr; gap: 30px; }
.ind-contact .ind-field label {
font-family: "Visuelt Pro", system-ui, sans-serif;
text-transform: none;
letter-spacing: 0;
font-size: 0.98rem;
color: #4f5d68;
}
/* Etiqueta flotante: en reposo se sitúa sobre la línea escribible (como placeholder);
al enfocar / escribir / elegir opción sube reducida encima de la línea. */
.ind-contact .ind-field:not(.ind-consent) {
position: relative;
padding-top: 0;
gap: 0;
}
.ind-contact .ind-field:not(.ind-consent) > label {
position: absolute;
left: 0;
top: 10px;
margin: 0;
pointer-events: none;
color: #8a9baa;
transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease;
}
.ind-contact .ind-field:not(.ind-consent):focus-within > label,
.ind-contact .ind-field:not(.ind-consent):has(input:not(:placeholder-shown)) > label,
.ind-contact .ind-field:not(.ind-consent):has(textarea:not(:placeholder-shown)) > label,
.ind-contact .ind-field:not(.ind-consent):has(select:valid) > label {
top: -14px;
font-size: 0.72rem;
color: #4f5d68;
}
.ind-contact .ind-field input,
.ind-contact .ind-field select,
.ind-contact .ind-field textarea {
border-bottom: 1px solid rgba(120, 138, 150, 0.6);
color: var(--ind-text);
}
.ind-contact .ind-field input::placeholder,
.ind-contact .ind-field textarea::placeholder { color: transparent; }
.ind-contact .ind-field input:focus,
.ind-contact .ind-field select:focus,
.ind-contact .ind-field textarea:focus { border-bottom-color: var(--ind-text); }
.ind-contact .ind-field select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c8a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
background-size: 16px;
padding-right: 26px;
cursor: pointer;
}
.ind-contact .ind-field select option { color: #0e1a26; }
/* Asterisco de campo obligatorio */
.ind-contact .ind-field:not(.ind-consent) label::after { content: " *"; color: #4f5d68; }
.ind-contact .ind-consent input[required] + label::after { content: " *"; color: #4f5d68; }
/* Casillas de consentimiento */
.ind-consent { flex-direction: row; align-items: flex-start; gap: 12px; }
.ind-consent input {
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: 1px;
accent-color: #546878;
border: 1px solid var(--ind-line);
}
.ind-consent label {
font-family: var(--ind-mono);
font-size: 0.72rem;
line-height: 1.5;
letter-spacing: 0.02em;
text-transform: none;
color: var(--ind-muted);
}
/* Botón enviar gris oscuro */
.ind-contact .ind-field--submit .btn-primary { background: #44525d; color: #fff; border: none; }
.ind-contact .ind-field--submit .btn-primary:hover { background: #36424b; }
/* Mensaje de confirmación */
.ind-form-success {
grid-column: 1 / -1;
font-family: var(--ind-mono);
font-size: 0.8rem;
letter-spacing: 0.04em;
color: #2f7d55;
margin-top: 4px;
}
/* ── Footer Industria (ajustes sobre .footer existente) ── */
.ind-footer-tag { font-family: var(--ind-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ind-muted); margin-top: 18px; }
.ind-footer-tag a { color: var(--ind-text); border-bottom: 1px solid currentColor; }
/* ── Blog placeholder ── */
.ind-soon { text-align: center; padding: 160px 0; }
.ind-soon h1 { font-family: "Visuelt Pro", system-ui, sans-serif; font-weight: 300; font-size: clamp(2.4rem, 5vw, 4rem); color: var(--ind-ink); letter-spacing: -0.03em; margin: 0 0 18px; }
.ind-soon p { color: var(--ind-text); font-size: 1.05rem; }
/* ── Reveal base (por si el sitio base no lo cubriera en algún caso) ── */
/* Aparición al hacer scroll: sale de un mini desenfoque + semitransparencia.
El transform (parallax via --py) NO se transiciona: lo controla el scroll. */
.ind-reveal {
opacity: 0;
filter: blur(7px);
transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), filter 0.8s cubic-bezier(0.22,1,0.36,1);
will-change: opacity, filter;
}
.ind-reveal.visible { opacity: 1; filter: blur(0); }
/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 980px) {
.ind-hero-grid,
.ind-manifesto-grid,
.ind-split,
.ind-form-grid,
.ind-assoc { grid-template-columns: 1fr; gap: 40px; }
.ind-split--rev .ind-split-text { order: 0; }
.ind-serv-grid,
.ind-features-grid,
.ind-proj-grid,
.ind-proj-grid--2,
.ind-datos-grid,
.ind-meta-grid { grid-template-columns: 1fr 1fr; }
.ind-hero-intro { max-width: 100%; }
.ind-form { grid-template-columns: 1fr; }
.ind-brief { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 600px) {
.ind-serv-grid,
.ind-features-grid,
.ind-proj-grid,
.ind-proj-grid--2,
.ind-datos-grid,
.ind-meta-grid { grid-template-columns: 1fr; }
.ind-section { padding: 70px 0; }
.ind-hero { padding: 120px 0 60px; }
}
/* ── Industria · acordeón menú móvil + offset de anclas ── */
.nav-mobile-item .nav-mobile-sub { display: none; }
.nav-mobile-item.expanded .nav-mobile-sub { display: block; }
.nav-mobile-item.expanded .nav-mobile-chevron { transform: rotate(45deg); }
.nav-mobile-chevron { display: inline-block; transition: transform 0.25s; }
[id] { scroll-margin-top: 96px; }