/* ============================================================== Landing pública de Maura Capital. Extiende los tokens de css/styles.css (paleta, fuentes, .marker). Todas las clases van prefijadas con .lp- para evitar colisiones con el portal de inversores. ============================================================== */ .lp-body { /* Anthracite de base: respaldo mientras carga la foto del fondo continuo y color que asoma bajo las secciones semitransparentes. La foto la pinta .lp-backdrop por encima de este fondo. */ background: var(--anthracite); color: var(--ink); } /* ───────────────────── SCROLL ───────────────────── El contenedor de scroll del documento es ; el scroll suave sirve para los enlaces de ancla de la cabecera. */ html { scroll-behavior: smooth; } /* ───────────────────── FONDO CONTINUO ───────────────────── La foto del skyline, fija tras toda la landing. Usamos un elemento real con position:fixed (no background-attachment:fixed, que tironea en iOS): rinde como capa propia del compositor. z-index -1 la deja detrás del contenido en flujo; el fondo anthracite del body sigue visible por debajo, así que nunca hay hueco en blanco. Las secciones, semitransparentes, dejan intuir la foto al pasar. */ .lp-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--anthracite); } .lp-backdrop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Mantén skyline + luna visibles al recortar en distintas alturas. */ object-position: 53% 42%; /* Tratamiento fotográfico: desaturación contenida + microcontraste. */ filter: saturate(0.72) contrast(1.04) brightness(0.93); /* Ken Burns continuo (sólo `scale`, propiedad individual del transform → compositor, 60fps). */ transform-origin: 52% 48%; scale: 1.08; animation: lp-kenburns 32s ease-in-out infinite; will-change: transform, scale; backface-visibility: hidden; } /* ───────────────────── BARRA DE PROGRESO ───────────────────── Placeholder visual; el JS la pinta dinámicamente en Parte 3. */ .lp-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--anthracite); z-index: 100; pointer-events: none; } /* ───────────────────── NAVBAR ───────────────────── Transparente sobre el hero. Conmuta a fondo anthracite sólido en cuanto el hero queda por encima del borde de la nav, vía la clase .lp-nav--scrolled (la añade/quita el IntersectionObserver de js/landing.js). Al ser oscura en ambos estados, el logo y los enlaces conservan su estilo "claro" y se leen siempre bien. */ .lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease; } .lp-nav.lp-nav--scrolled { background: rgba(28, 28, 26, 0.88); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom-color: rgba(239, 235, 227, 0.08); } .lp-nav-inner { max-width: 1280px; margin: 0 auto; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding .35s ease; } .lp-nav.lp-nav--scrolled .lp-nav-inner { padding: 16px 40px; } .lp-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--bone); transition: color .35s ease; } .lp-logo .marker { color: currentColor; } .lp-wordmark { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 300; letter-spacing: -0.01em; font-variation-settings: "opsz" 144; line-height: 1; } .lp-wordmark em { font-style: italic; color: var(--bone-dark); } .lp-nav-links { display: flex; align-items: center; gap: 28px; } .lp-nav-links a:not(.lp-cta) { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dark); text-decoration: none; transition: color .25s ease; } .lp-nav-links a:not(.lp-cta):hover { color: var(--bone); } .lp-cta { background: var(--bone); color: var(--anthracite); font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; padding: 11px 18px; border-radius: 3px; transition: background .2s, color .25s, transform .05s, box-shadow .25s; display: inline-block; } .lp-cta:hover { background: var(--paper); box-shadow: 0 6px 24px rgba(239,235,227,.15); } .lp-cta:active { transform: translateY(1px); } /* ───────────────────── HERO ───────────────────── El hero ya no contiene la imagen: es una sección transparente que deja ver el fondo continuo (.lp-backdrop). Sólo aporta el título y un velo uniforme para su legibilidad. */ .lp-hero { position: relative; min-height: 100vh; background: transparent; color: var(--bone); display: flex; flex-direction: column; justify-content: center; padding: 140px 40px 100px; isolation: isolate; } @keyframes lp-kenburns { 0%, 100% { scale: 1.06; } 50% { scale: 1.14; } } @media (prefers-reduced-motion: reduce) { /* Sin movimiento: la foto no se queda fija — vuelve a comportarse como un fondo del hero que se va con el scroll. Y sin Ken Burns. */ .lp-backdrop { position: absolute; bottom: auto; height: 100vh; } .lp-backdrop-img { animation: none; scale: 1.04; } } .lp-hero-overlay { /* Velo del hero + transición a "Lo que hacemos", en UNA sola capa. Tinte anthracite uniforme y tenue (0.34) en la franja del título; desde la mitad inferior del hero se oscurece de forma amortiguada hasta el 0.90 del fondo de la sección siguiente. Al ser una única capa que termina justo en el mismo valor que la sección, la unión es continua — sin línea ni escalón. */ position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, rgba(14, 14, 13, 0.34) 0%, rgba(14, 14, 13, 0.34) 56%, rgba(14, 14, 13, 0.39) 70%, rgba(14, 14, 13, 0.52) 81%, rgba(14, 14, 13, 0.70) 91%, rgba(14, 14, 13, 0.90) 100% ); } .lp-hero-inner { max-width: 1280px; margin: 0 auto; width: 100%; position: relative; z-index: 1; } .lp-hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; /* El JS escala opacity + translateY con el scroll (fade de salida del título). Sólo el compositor; se omite con reduced-motion. */ will-change: opacity, transform; } .lp-hero-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(56px, 11vw, 168px); line-height: 1; letter-spacing: -0.03em; color: var(--bone); font-variation-settings: "opsz" 144; } /* "Capital" en cursiva, igual que el em del logo de la cabecera (.lp-wordmark em): misma Fraunces 300, mismo font-style:italic. Sólo se iguala la tipografía — el color del hero se mantiene (var(--bone)), y el tamaño grande no se toca. */ .lp-hero-title em { font-style: italic; } .lp-hero-sub { font-family: 'IBM Plex Mono', monospace; font-size: clamp(11px, 1.1vw, 13px); font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--bone-dark); opacity: .85; } /* Indicador "Desliza" */ .lp-scroll-indicator { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 1; } .lp-scroll-line { width: 1px; height: 56px; background: linear-gradient(to bottom, transparent 0%, var(--bone-dark) 100%); opacity: .55; } .lp-scroll-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .35em; text-transform: uppercase; color: var(--bone-dark); opacity: .65; } /* ───────────────────── SECCIONES ───────────────────── Cada sección sube por encima del fondo continuo con un anthracite muy oscuro y SEMITRANSPARENTE: la foto no se ve nítida, sólo se intuye —da profundidad sin restar legibilidad. El alfa alto (≈0.9) garantiza contraste del texto; el fondo anthracite del body por debajo evita cualquier viraje de color si la foto no ha cargado. */ .lp-section { background: rgba(14, 14, 13, 0.90); padding: 140px 40px; position: relative; } .lp-section + .lp-section { border-top: 1px solid rgba(239, 235, 227, 0.07); } .lp-section.lp-section-light { /* "Contacto": anthracite algo más claro y un punto más translúcido, así la foto se siente un poco más que en la sección anterior. */ background: rgba(28, 28, 26, 0.84); } .lp-section-inner { max-width: 1280px; margin: 0 auto; width: 100%; } .lp-section-head { max-width: 880px; margin-bottom: 72px; } .lp-section-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .35em; text-transform: uppercase; color: var(--bone-dark); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .lp-section-eyebrow::before { content: "§"; font-family: 'Fraunces', serif; font-style: italic; color: var(--bone); font-size: 18px; letter-spacing: 0; opacity: .55; } .lp-section h2 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.022em; color: var(--bone); max-width: 22ch; font-variation-settings: "opsz" 144; margin-bottom: 30px; } .lp-section h2 em { font-style: italic; color: var(--bone-dark); opacity: .72; } .lp-lede { font-family: 'Inter Tight', sans-serif; font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--bone-dark); max-width: 62ch; } /* ── Pilares ── */ .lp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 100px; } .lp-pillar { border-top: 1px solid rgba(239, 235, 227, 0.16); padding-top: 28px; } .lp-pillar-num { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--bone-dark); opacity: .7; margin-bottom: 20px; } .lp-pillar h3 { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 400; letter-spacing: -0.012em; color: var(--bone); margin-bottom: 16px; font-variation-settings: "opsz" 144; } .lp-pillar h3 em { font-style: italic; color: var(--bone-dark); opacity: .72; } .lp-pillar p { font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--bone-dark); opacity: .78; } /* ── Credo ── */ .lp-credo { margin-top: 96px; padding: 40px 44px; border-left: 2px solid var(--bone); /* Película clara apenas perceptible: separa el credo del fondo de la sección sin romper la cohesión oscura. */ background: rgba(239, 235, 227, 0.05); border-radius: 0 4px 4px 0; display: flex; align-items: flex-start; gap: 26px; max-width: 880px; } .lp-credo .marker { color: var(--bone); margin-top: 6px; flex-shrink: 0; } .lp-credo p { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 300; line-height: 1.45; letter-spacing: -0.01em; color: var(--bone); font-variation-settings: "opsz" 144; } .lp-credo p em { font-style: italic; color: var(--bone-dark); opacity: .75; } /* ───────────────────── QUIÉNES SOMOS / QUÉ HACEMOS · ESCENA ───────────────────── Fondo anthracite SÓLIDO y opaco (.lp-section-solid): sin la foto del hero por detrás. anthracite-deep coincide con el final del degradado del hero, así el paso es continuo. PASO 1 — dos pantallas estáticas apiladas, sin pin ni animación. Cada pantalla es un grid de 2 columnas IGUALES (50/50): en una vive el círculo, en la otra el texto. Las columnas son compartimentos estancos (overflow:hidden) — ningún elemento puede invadir la columna contigua. Panel A: círculo izquierda · texto derecha. Panel B: a la inversa. */ .lp-section.lp-section-solid { background: var(--anthracite-deep); } .lp-scene { padding: 0; } .lp-scene-panel { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; /* 50 / 50 estricto */ } /* Cada columna es un compartimento estanco: su contenido no puede salir de ella → círculo y texto jamás se superponen. */ .lp-scene-col { display: flex; align-items: center; overflow: hidden; } .lp-scene-col--circle { justify-content: center; } .lp-scene-col--text { justify-content: center; padding: 0 clamp(32px, 5vw, 96px); } /* Círculo: dos anillos concéntricos finos, solo contorno, en bone. Grande pero acotado a 46vw → siempre cabe dentro de su columna (50vw) sin rozar la del texto. */ .lp-scene-circle { position: relative; flex: none; width: min(58vh, 46vw); height: min(58vh, 46vw); } .lp-scene-ring { position: absolute; border: 1px solid; border-radius: 50%; } .lp-scene-ring--lg { inset: 0; border-color: rgba(239, 235, 227, 0.18); } .lp-scene-ring--sm { inset: 19%; border-color: rgba(239, 235, 227, 0.10); } /* Texto: marker + título Fraunces + párrafo, dentro de su columna. */ .lp-scene-text { width: 100%; max-width: 460px; } .lp-scene-marker { display: flex; align-items: center; gap: 11px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; color: var(--bone-dark); margin-bottom: 28px; } .lp-scene-marker span { font-family: 'Fraunces', serif; font-style: italic; font-size: 19px; letter-spacing: 0; color: var(--bone); opacity: .6; } .lp-scene-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; letter-spacing: -0.025em; color: var(--bone); font-variation-settings: "opsz" 144; margin-bottom: 28px; } .lp-scene-desc { font-family: 'Inter Tight', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--bone-dark); max-width: 50ch; } /* ── PASO 2 · Modo escena pinneada (escritorio · lo activa el JS) ── El PIN lo hace position:sticky (nativo): libera solo, no inserta spacers ni deja position:fixed colgado. La sección mide 200vh fijos = 100vh de escena fijada + 100vh de margen antes de "Cómo lo hacemos". Los dos paneles se superponen; el círculo del panel A viaja y los textos viven en medias-columnas estancas. */ .lp-scene--pinned { height: 200vh; } .lp-scene--pinned .lp-scene-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; } .lp-scene--pinned .lp-scene-panel { position: absolute; inset: 0; min-height: 0; display: block; } /* Texto: cada uno en su media-columna estanca (overflow:hidden) — físicamente no puede salir de su 50%. */ .lp-scene--pinned .lp-scene-col--text { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; display: flex; align-items: center; } .lp-scene--pinned .lp-scene-panel--a .lp-scene-col--text { right: 0; /* "Quiénes somos" → derecha */ justify-content: flex-end; padding-right: clamp(40px, 6vw, 120px); } .lp-scene--pinned .lp-scene-panel--b .lp-scene-col--text { left: 0; /* "Qué hacemos" → izquierda */ justify-content: flex-start; padding-left: clamp(40px, 6vw, 120px); } .lp-scene--pinned .lp-scene-text { width: clamp(280px, 32vw, 460px); } /* Sólo viaja UN círculo: el del panel A. El del panel B se oculta. */ .lp-scene--pinned .lp-scene-panel--b .lp-scene-col--circle { display: none; } .lp-scene--pinned .lp-scene-panel--a .lp-scene-col--circle { position: absolute; inset: 0; overflow: visible; } .lp-scene--pinned .lp-scene-circle { position: absolute; top: 50%; left: 50%; will-change: transform; } /* ───────────────────── LO QUE HACEMOS · SCROLLYTELLING ───────────────────── Dos modos sobre la misma estructura: · Modo por defecto (móvil, sin JS, prefers-reduced-motion): sección normal — título arriba y los 5 pasos en columna vertical, visibles. · Modo .lp-steps--pinned (lo añade js/landing.js sólo en escritorio): .lp-steps-pin se fija (pin de ScrollTrigger) y ocupa la pantalla; el título se reduce y sube, y los pasos se revelan uno a uno con el scroll. El JS sólo escribe opacity/transform; el CSS define los estados de reposo. */ .lp-steps-head { width: 100%; margin: 0 0 76px; text-align: center; } .lp-steps-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(46px, 8.5vw, 120px); line-height: 1.05; letter-spacing: -0.03em; color: var(--bone); font-variation-settings: "opsz" 144; text-align: center; margin: 0; } .lp-steps-title em { font-style: italic; color: var(--bone-dark); opacity: .72; } .lp-steps-list { list-style: none; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 72px; } .lp-step { text-align: center; /* Tarjeta editorial: apenas un susurro de bone sobre el anthracite de la sección — se distingue del fondo sin perder el tono oscuro. Esquinas suaves, borde finísimo, padding generoso. Sin sombra: no es una "card de dashboard". */ background: rgba(239, 235, 227, 0.045); border: 1px solid rgba(239, 235, 227, 0.12); border-radius: 18px; padding: 52px 46px; } .lp-step-num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 400; letter-spacing: .5em; text-indent: .5em; /* compensa el tracking, recentra ópticamente */ color: var(--bone-dark); opacity: .5; margin-bottom: 24px; } /* Ilustración SVG del paso — line art fino (Parte 3). El trazo usa currentColor; vector-effect:non-scaling-stroke mantiene el grosor en 1,5px exactos a cualquier escala. Acompaña, no domina: tono bone-dark. */ .lp-step-icon { display: block; width: 80px; height: 80px; margin: 0 auto 24px; color: var(--bone-dark); } .lp-step-icon line, .lp-step-icon rect, .lp-step-icon circle, .lp-step-icon path { vector-effect: non-scaling-stroke; } .lp-step-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(24px, 3vw, 33px); letter-spacing: -0.015em; color: var(--bone); font-variation-settings: "opsz" 144; margin-bottom: 16px; } .lp-step-desc { font-family: 'Inter Tight', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.72; color: var(--bone-dark); opacity: .82; max-width: 44ch; margin: 0 auto; } /* ── Modo pinneado (escritorio · lo activa el JS) ── */ .lp-steps--pinned { padding: 0; /* el pin-box gestiona su propio espacio */ } .lp-steps--pinned .lp-steps-pin { position: relative; height: 100vh; overflow: hidden; /* recorta los pasos que entran/salen */ } .lp-steps--pinned .lp-steps-head { position: absolute; top: 88px; /* Anclada al VIEWPORT, no a .lp-steps-pin: el ancho es 100vw exacto y no depende del ancho que ScrollTrigger le calcule al pin. Con text-align:center el título queda centrado en la pantalla pase lo que pase con el contenedor pinneado. */ left: 0; right: auto; width: 100vw; margin: 0; padding: 0 40px; will-change: transform; } .lp-steps--pinned .lp-steps-title { transform-origin: 50% 0; /* se reduce anclada bajo el eyebrow */ will-change: transform; } .lp-steps--pinned .lp-steps-list { position: absolute; inset: 0; max-width: none; margin: 0; display: block; } .lp-steps--pinned .lp-step { position: absolute; /* 50vw = centro del viewport (no del contenedor pinneado). El JS aplica translate(-50%) → el paso queda centrado en pantalla con independencia del ancho de .lp-steps-pin. */ left: 50vw; top: 57%; width: min(600px, 86vw); opacity: 0; /* el JS lo revela — sin flash de 5 apilados */ will-change: opacity, transform; } /* ── Encabezado del proceso (antes del scrollytelling, fuera del pin) ── Vive dentro de la sección "Cómo lo hacemos" pero por delante de .lp-steps-pin; js/landing.js usa .lp-steps-pin como trigger del pin, así que el scrollytelling arranca después de este bloque y nunca lo pinea. Dos líneas centradas sobre el fondo anthracite de la sección. Centrado REAL: contenedor propio con width:100% y text-align:center; los selectores se cualifican con .lp-process-head para ganar a .lp-section h2 (que impone max-width:22ch y desplazaría el título). */ .lp-process-head { width: 100%; text-align: center; /* En modo pinneado la sección pierde su padding (.lp-steps--pinned { padding:0 }), así que este bloque gobierna su propio espacio. Aire generoso ARRIBA —separa de "Qué hacemos"—; abajo, en cambio, un margen corto: el paso 01 entra justo tras el subtítulo, sin un vacío largo en medio. El pin sigue enganchando sólo cuando .lp-steps-pin llega al borde superior, de modo que el subtítulo ya ha salido de pantalla cuando aparece el paso 01. padding-top alto (~46vh): empuja el bloque hacia abajo para que las dos líneas queden a la altura del centro del viewport cuando el usuario llega a leerlas, no pegadas al borde superior. */ padding: clamp(300px, 46vh, 580px) 40px clamp(44px, 6vh, 80px); } .lp-process-head-inner { max-width: 1280px; width: 100%; margin: 0 auto; text-align: center; } .lp-process-head .lp-process-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(40px, 6.6vw, 94px); line-height: 1.04; letter-spacing: -0.03em; color: var(--bone); font-variation-settings: "opsz" 144; max-width: none; /* anula el max-width:22ch de .lp-section h2 */ margin: 0; } .lp-process-head .lp-process-sub { font-family: 'Inter Tight', sans-serif; font-weight: 300; font-size: clamp(17px, 1.9vw, 24px); line-height: 1.45; letter-spacing: -0.004em; color: var(--bone-dark); max-width: none; /* Segunda línea justo debajo de la primera — espaciado armonioso. */ margin: clamp(16px, 1.7vw, 26px) 0 0; } /* ───────────────────── CONTACTO ───────────────────── */ /* "Contacto" pasa a ser el título principal de la sección: Fraunces prominente, sin eyebrow ni texto introductorio. El id en el selector gana en especificidad a .lp-section h2 (que impondría otro tamaño y un max-width:22ch). */ #contacto .lp-contact-title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(36px, 5.2vw, 68px); line-height: 1.05; letter-spacing: -0.025em; color: var(--bone); font-variation-settings: "opsz" 144; max-width: none; margin: 0; } /* Sin h2 largo ni lede, la cabecera sólo necesita un margen contenido hasta la info de contacto — un respiro armonioso, sin hueco enorme. */ #contacto .lp-section-head { margin-bottom: 44px; } .lp-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } .lp-contact-info { display: flex; flex-direction: column; gap: 28px; } .lp-contact-item { border-top: 1px solid rgba(239, 235, 227, 0.16); padding-top: 18px; } .lp-contact-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--bone-dark); opacity: .7; margin-bottom: 10px; } .lp-contact-value { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 400; letter-spacing: -0.01em; color: var(--bone); font-variation-settings: "opsz" 144; } .lp-contact-form { display: flex; flex-direction: column; gap: 22px; } .lp-form-field { display: flex; flex-direction: column; gap: 8px; } .lp-form-field label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--bone-dark); opacity: .8; } .lp-form-field input, .lp-form-field textarea { padding: 14px 16px; border: 1px solid rgba(239, 235, 227, 0.18); border-radius: 3px; background: rgba(239, 235, 227, 0.04); font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 300; color: var(--bone); outline: none; transition: border-color .15s, background .15s; } .lp-form-field input::placeholder, .lp-form-field textarea::placeholder { color: var(--bone-dark); opacity: .4; } .lp-form-field input:focus, .lp-form-field textarea:focus { border-color: var(--bone); background: rgba(239, 235, 227, 0.08); } .lp-form-field textarea { resize: vertical; min-height: 130px; line-height: 1.55; font-family: 'Inter Tight', sans-serif; } .lp-form-submit { align-self: flex-start; /* Botón claro sobre sección oscura: invierte el contraste como la CTA de la cabecera. */ background: var(--bone); color: var(--anthracite); border: none; border-radius: 3px; padding: 14px 28px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; cursor: pointer; transition: background .15s, transform .05s; margin-top: 6px; } .lp-form-submit:hover { background: var(--paper); } .lp-form-submit:active { transform: translateY(1px); } .lp-form-note { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--bone-dark); opacity: .7; line-height: 1.7; margin-top: 4px; } .lp-form-note a { color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(239, 235, 227, 0.3); transition: border-color .15s; } .lp-form-note a:hover { border-color: var(--bone); } /* ───────────────────── FOOTER ───────────────────── Discreto: anthracite, una sola fila con marca y enlaces. Mismo principio que las secciones — semitransparente para que la foto del fondo siga sintiéndose detrás; algo más opaco para anclar el cierre de la página. */ .lp-footer { background: rgba(14, 14, 13, 0.93); color: var(--bone-dark); padding: 56px 40px 32px; border-top: 1px solid rgba(239,235,227,.08); } .lp-footer-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .lp-footer-brand { display: flex; align-items: center; gap: 14px; color: var(--bone); } .lp-footer-brand .marker { color: var(--bone); } .lp-footer-brand .lp-wordmark { color: var(--bone); font-size: 18px; } .lp-footer-brand .lp-wordmark em { color: var(--bone-dark); } .lp-footer-brand-sub { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dark); opacity: .55; margin-top: 6px; } .lp-footer-meta { display: flex; gap: 28px; flex-wrap: wrap; } .lp-footer-meta a { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dark); text-decoration: none; transition: color .15s; } .lp-footer-meta a:hover { color: var(--bone); } .lp-footer-bottom { max-width: 1280px; margin: 36px auto 0; padding-top: 22px; border-top: 1px solid rgba(239,235,227,.1); font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--bone-dark); opacity: .55; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* ───────────────────── REVEALS DE SECCIÓN ───────────────────── Al entrar cada sección en pantalla, sus elementos aparecen con un fade + leve subida, escalonados. js/landing.js añade .lp-reveal (estado inicial oculto) y luego .lp-in cuando el elemento entra en viewport. El retardo de cascada de cada elemento llega vía la variable --lp-reveal-delay. Sólo se animan opacity y transform, así que el trabajo recae en el compositor (60fps). */ .lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .72s cubic-bezier(.22, .61, .36, 1), transform .72s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--lp-reveal-delay, 0ms); } .lp-reveal.lp-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { /* Sin movimiento: el contenido aparece directamente, sin fade ni desplazamiento. */ .lp-reveal { opacity: 1; transform: none; transition: none; } } /* ───────────────────── MOBILE ───────────────────── */ @media (max-width: 1024px) { .lp-pillars { grid-template-columns: repeat(2, 1fr); gap: 32px; } .lp-contact-grid { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 768px) { .lp-nav-inner { padding: 14px 18px; } .lp-nav.lp-nav--scrolled .lp-nav-inner { padding: 12px 18px; } .lp-nav-links { gap: 14px; } .lp-nav-links a:not(.lp-cta) { display: none; } .lp-cta { padding: 9px 14px; font-size: 9px; } .lp-wordmark { font-size: 18px; } .lp-hero { padding: 110px 22px 110px; min-height: 92vh; } .lp-hero-sub { letter-spacing: .32em; } .lp-scroll-indicator { bottom: 26px; } .lp-scroll-line { height: 42px; } .lp-section { padding: 90px 18px; } .lp-section-head { margin-bottom: 52px; } .lp-lede { font-size: 16px; } /* Escena "Quiénes somos / Qué hacemos" en móvil: sin efecto horizontal — el grid pasa a una sola columna, círculo encima del texto en cada pantalla. */ .lp-scene-panel { grid-template-columns: 1fr; min-height: auto; } .lp-scene-col { text-align: center; } .lp-scene-col--circle { padding: 70px 22px 0; } .lp-scene-col--text { padding: 34px 22px 78px; } /* el panel B tiene el texto antes en el DOM; en móvil reordenamos para que el círculo quede arriba también ahí. */ .lp-scene-panel--b .lp-scene-col--circle { order: -1; } .lp-scene-circle { width: 64vw; height: 64vw; } .lp-scene-text { max-width: 100%; } .lp-scene-marker { justify-content: center; } .lp-scene-desc { margin: 0 auto; } /* "Cómo lo hacemos" en móvil: columna vertical, sin pin. Tarjetas de ancho fluido y padding más contenido. */ .lp-steps-list { gap: 56px; } .lp-step { padding: 40px 26px; border-radius: 16px; } /* Encabezado del proceso: padding-top alto también en móvil para centrar el bloque en el viewport; laterales y base contenidos. */ .lp-process-head { padding: clamp(200px, 40vh, 420px) 18px 64px; } .lp-pillars { grid-template-columns: 1fr; gap: 30px; margin-bottom: 64px; } .lp-credo { margin-top: 64px; padding: 28px; gap: 18px; } .lp-credo p { font-size: 18px; } .lp-contact-grid { gap: 56px; } .lp-contact-value { font-size: 18px; } .lp-form-submit { padding: 13px 24px; font-size: 10px; } .lp-footer { padding: 48px 18px 28px; } .lp-footer-inner { flex-direction: column; align-items: flex-start; gap: 22px; } .lp-footer-bottom { flex-direction: column; gap: 8px; } }