/* ========================================================================== TECVIA · layout.css Contenedores, el riel de elevación de rack, nav, footer y la traza. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Contenedores El padding lateral incluye el ancho del riel en desktop, para que el contenido nunca se meta debajo de él. -------------------------------------------------------------------------- */ .l-shell { position: relative; width: 100%; } .l-container { width: 100%; max-width: calc(var(--w-max) + var(--gutter) * 2); margin-inline: auto; /* env() respeta el notch y las esquinas redondeadas en iPhone. El ya declara viewport-fit=cover, así que sin esto el contenido se metería debajo del notch en horizontal. */ padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } @media (min-width: 1080px) { .l-container { padding-left: calc(var(--gutter) + var(--rail-w)); } } /* Espaciado vertical de sección. Lo pone SIEMPRE la sección, nunca el hijo. */ .l-section { position: relative; padding-block: var(--sp-section); } .l-section--tight { padding-block: calc(var(--sp-section) * 0.62); } /* Encabezado de sección: eyebrow + título + lead */ .l-section-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-7); max-width: 46rem; } .l-section-head__eyebrow { display: flex; align-items: center; gap: var(--sp-3); } .l-section-head__eyebrow::after { content: ''; flex: 1; height: var(--bw-hair); background-color: var(--c-line); max-width: 8rem; } /* -------------------------------------------------------------------------- 2. El riel de elevación de rack Un diagrama de elevación de rack tiene posiciones U numeradas en el borde izquierdo. La página es el rack. El riel hace doble trabajo: indica posición y marca la sección activa que necesita el nav sticky. Se oculta por completo abajo de 1080px. -------------------------------------------------------------------------- */ .l-rail { display: none; } @media (min-width: 1080px) { .l-rail { display: block; position: fixed; top: 0; left: 0; width: var(--rail-w); height: 100svh; z-index: var(--z-rail); pointer-events: none; user-select: none; } /* La línea vertical del riel */ .l-rail::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: var(--bw-hair); background-color: var(--c-line); } .l-rail__ticks { position: absolute; inset: 0; right: 0; display: flex; flex-direction: column; justify-content: space-between; padding-block: 12vh; } .l-rail__tick { position: relative; height: var(--bw-hair); background-color: var(--c-line); margin-left: auto; width: 10px; } .l-rail__tick--major { width: 18px; background-color: var(--c-line-strong); } /* Lector de posición U */ .l-rail__readout { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-mono-label); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-text-faint); font-variant-numeric: tabular-nums; } .l-rail__readout b { font-weight: 500; color: var(--c-copper); } } /* Barra de progreso en móvil — reemplaza al riel */ .l-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-nav); background-color: transparent; pointer-events: none; } .l-progress__fill { height: 100%; width: 100%; background-color: var(--c-copper); transform: scaleX(0); transform-origin: left center; will-change: transform; } @media (min-width: 1080px) { .l-progress { display: none; } } /* -------------------------------------------------------------------------- 3. Navegación El estado compacto se hace con crossfade de dos capas apiladas, no cambiando la altura (eso dispararía layout). -------------------------------------------------------------------------- */ .l-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-h); } /* Capa de fondo del header, visible en todas las pantallas */ .l-nav__backdrop { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--c-scrim) 88%, transparent); background-image: linear-gradient( 180deg, color-mix(in srgb, var(--c-surface) 82%, transparent) 0%, color-mix(in srgb, var(--c-bg) 72%, transparent) 100% ); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: var(--bw-hair) solid var(--c-line); opacity: 1; transition: background-color var(--d-ui) var(--ease-out), border-color var(--d-ui) var(--ease-out); will-change: background-color, border-color; } .l-nav[data-scrolled='true'] .l-nav__backdrop { background-color: color-mix(in srgb, var(--c-scrim) 96%, transparent); border-bottom-color: var(--c-line-strong); } .l-nav__inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .l-nav__brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; } .l-nav__mark { width: 30px; height: 30px; flex: none; } .l-nav__wordmark { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; color: var(--c-text); } /* --- Links --- */ .l-nav__links { display: none; } @media (min-width: 900px) { .l-nav__links { display: flex; align-items: center; gap: var(--sp-1); } } .l-nav__link { position: relative; display: block; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); color: var(--c-text-muted); border-radius: var(--r-2); transition: color var(--d-micro) ease; } /* La tienda NO es una sección de esta página: es otro sitio, y es donde se compra. Si se viera igual que «Servicios» o «Casos», la gente asumiría que sólo la baja hasta un bloque más. El recuadro de cobre la separa sin competir con el botón de «Agenda una llamada», que sigue siendo la acción principal de la página. */ .l-nav__link--tienda { color: var(--c-text); border: var(--bw-hair) solid var(--c-copper-dim); transition: color var(--d-micro) ease, border-color var(--d-micro) ease; } .l-nav__link--tienda::after { display: none; /* el subrayado activo es para las secciones */ } @media (hover: hover) and (pointer: fine) { .l-nav__link--tienda:hover { border-color: var(--c-copper); } } /* Hairline de cobre para la sección activa. scaleX es transform puro. */ .l-nav__link::after { content: ''; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 2px; height: var(--bw-hair); background-color: var(--c-copper); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-hover) var(--ease-out); } .l-nav__link[aria-current='true'] { color: var(--c-text); } .l-nav__link[aria-current='true']::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .l-nav__link:hover { color: var(--c-text); } .l-nav__link:hover::after { transform: scaleX(1); } } /* --- Acciones --- */ .l-nav__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .l-nav__icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-2); color: var(--c-text-muted); border: var(--bw-hair) solid transparent; transition: color var(--d-micro) ease, border-color var(--d-micro) ease, transform var(--d-press) var(--ease-out); } .l-nav__icon-btn:active { transform: scale(0.94); } @media (hover: hover) and (pointer: fine) { .l-nav__icon-btn:hover { color: var(--c-copper); border-color: var(--c-line-strong); } } .l-nav__cta { display: none; } @media (min-width: 700px) { .l-nav__cta { display: inline-flex; min-height: 42px; padding-inline: var(--sp-4); } } /* Icono de tema: mostramos el del modo AL QUE VAS A CAMBIAR. En oscuro ves el sol (click = claro); en claro ves la luna. */ .l-nav__icon-btn .icon-moon { display: none; } [data-theme='light'] .l-nav__icon-btn .icon-moon { display: block; } [data-theme='light'] .l-nav__icon-btn .icon-sun { display: none; } /* --- Menú móvil --- */ .l-nav__toggle { display: grid; } @media (min-width: 900px) { .l-nav__toggle { display: none; } } /* Icono del botón de menú: hamburguesa cerrado, X abierto. Mismo patrón que el icono de tema (icon-moon / icon-sun) más arriba: main.js sólo tiene que alternar aria-expanded, el CSS hace el resto. */ .l-nav__toggle .icon-close { display: none; } .l-nav__toggle[aria-expanded='true'] .icon-open { display: none; } .l-nav__toggle[aria-expanded='true'] .icon-close { display: block; } .l-menu { position: fixed; inset: 0; /* Un nivel por debajo del nav: el header (con el botón de cerrar) tiene que quedar por encima del panel del menú, o su fondo opaco lo tapa por completo y la X nunca se ve, aunque el ícono sí esté ahí. */ z-index: calc(var(--z-nav) - 1); background-color: var(--c-bg); padding: calc(var(--nav-h) + var(--sp-6)) max(var(--gutter), env(safe-area-inset-right)) calc(var(--sp-7) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); display: flex; flex-direction: column; gap: var(--sp-5); overflow-y: auto; /* Sin esto, al llegar al final del menú el scroll se propaga a la página de atrás y el fondo se mueve debajo del overlay. */ overscroll-behavior: contain; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out), visibility 0s linear var(--d-ui); } .l-menu[data-open='true'] { opacity: 1; transform: translateY(0); visibility: visible; transition-delay: 0s; } .l-menu__link { display: flex; align-items: baseline; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: var(--bw-hair) solid var(--c-line); font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-display); } .l-menu__link span { font-family: var(--font-mono); font-size: var(--fs-mono-label); font-weight: 500; letter-spacing: var(--ls-mono); color: var(--c-copper); text-transform: none; } /* -------------------------------------------------------------------------- 4. La traza — elemento firma Una sola traza de cobre continua que baja toda la página. Siempre visible al 20%; lo que se anima (Fase 3) es un pulso que la recorre y las vías que se encienden a su paso. -------------------------------------------------------------------------- */ .l-trace { position: absolute; top: 0; left: 0; width: 64px; height: 100%; /* Por ENCIMA del contenido, no detrás. Cuando ScrollTrigger pinnea el Proceso, esa sección pasa a position:fixed con fondo opaco de ancho completo y tapaba la traza — precisamente en la sección donde más se nota. La traza vive en la columna izquierda, fuera del área de contenido, así que subirla no estorba: animations.js calcula su ancho para que nunca se cruce. */ z-index: var(--z-trace-over); pointer-events: none; overflow: hidden; /* Aísla el repintado de la traza del resto del documento */ contain: paint; } .l-trace__svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .l-trace__path { fill: none; stroke: var(--c-copper); stroke-width: 1.5; stroke-opacity: 0.28; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; } /* El tramo grueso: es cable físico, no dato. */ .l-trace__path--thick { stroke-width: 3; stroke-opacity: 0.4; } .l-trace__via { fill: none; stroke: var(--c-copper); stroke-width: 2; stroke-opacity: 0.28; vector-effect: non-scaling-stroke; } /* El pulso viajero. En Fase 2 está quieto en el origen. */ /* El pulso viajero: un punto de cobre encendido que recorre la traza. Su brillo es lo único que se mueve; la traza en sí está siempre quieta. */ .l-trace__pulse { fill: var(--c-copper-hi); opacity: 0; filter: drop-shadow(0 0 6px var(--c-copper)); } /* Con motion reducido la traza queda completa y visible, sin pulso. */ @media (prefers-reduced-motion: reduce) { .l-trace__pulse { display: none; } .l-trace__path, .l-trace__via { stroke-opacity: 0.32; } } /* En móvil la traza se simplifica a los segmentos principales */ @media (max-width: 719px) { .l-trace__svg--full { display: none; } } @media (min-width: 720px) { .l-trace__svg--mobile { display: none; } .l-trace { width: 200px; } } @media (min-width: 1080px) { .l-trace { width: calc(var(--rail-w) + 150px); } } /* Las vías son puntos de CSS, no del SVG: el SVG usa preserveAspectRatio="none" para estirarse a lo alto de la página, y eso convertiría cualquier círculo en un óvalo. */ .l-trace__vias { position: absolute; inset: 0; } .l-trace__via-dot { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border: 1.5px solid var(--c-copper); border-radius: 50%; opacity: 0.34; will-change: opacity, transform; } /* -------------------------------------------------------------------------- 5. Botón flotante de WhatsApp -------------------------------------------------------------------------- */ .l-fab { position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(var(--gutter), env(safe-area-inset-bottom)); z-index: var(--z-fab); display: inline-flex; align-items: center; gap: var(--sp-3); /* 52px: cómodo por encima del mínimo de touch de 44 */ min-height: 52px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill); background-color: var(--c-surface); border: var(--bw-hair) solid var(--c-line-strong); color: var(--c-text); font-family: var(--font-mono); font-size: var(--fs-mono-label); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; transition: transform var(--d-press) var(--ease-out), border-color var(--d-micro) ease; } .l-fab:active { transform: scale(0.96); } .l-fab__label { display: none; } @media (min-width: 520px) { .l-fab__label { display: inline; } } @media (hover: hover) and (pointer: fine) { .l-fab:hover { border-color: var(--c-signal); } } /* -------------------------------------------------------------------------- 6. Footer -------------------------------------------------------------------------- */ .l-footer { position: relative; border-top: var(--bw-hair) solid var(--c-line); padding-block: var(--sp-8) calc(var(--sp-6) + env(safe-area-inset-bottom)); background-color: var(--c-bg); } .l-footer__grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; } @media (min-width: 720px) { .l-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-6); } } .l-footer__brand { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 34ch; } /* Acceso rápido a la tienda desde el pie. Con la línea de abajo, porque un enlace que sólo dice «Tienda» no le dice a nadie qué va a encontrar. */ .l-footer__tienda { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border: var(--bw-hair) solid var(--c-copper-dim); border-radius: var(--r-2); color: var(--c-text); font-size: var(--fs-small); transition: border-color var(--d-micro) ease; } .l-footer__tienda-pie { font-family: var(--font-mono); font-size: var(--fs-mono-label); color: var(--c-text-faint); } @media (hover: hover) and (pointer: fine) { .l-footer__tienda:hover { border-color: var(--c-copper); } } .l-footer__col h3 { margin-bottom: var(--sp-4); } .l-footer__list { display: flex; flex-direction: column; gap: var(--sp-3); } .l-footer__link { display: inline-block; font-size: var(--fs-small); color: var(--c-text-muted); transition: color var(--d-micro) ease; } @media (hover: hover) and (pointer: fine) { .l-footer__link:hover { color: var(--c-copper); } } .l-footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: var(--bw-hair) solid var(--c-line); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }