*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Reset heading defaults so our classes fully control typography */ h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; line-height: inherit; } :root { --black: #282828; --white: #FBF9F8; --navy: #1D2A38; --steel: #8892A4; --olive: #7D8B42; --lime: #C4CF60; --cream: #F7F5F0; --mid: #787068; --muted: #A8A29A; --border: #E2DED8; --display: 'Wonderland', serif; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Libre Franklin', system-ui, sans-serif; --fz-h1: clamp(60px, 9vw, 130px); --g: clamp(20px, 5vw, 72px); --line-navy: rgba(255,255,255,.08); } html { scroll-behavior: smooth; } /* El lienzo va en navy, el color del footer. El fondo del body es blanco y, sin fondo en , ese blanco es el que pinta el lienzo: cualquier zona que quede fuera del documento —rebote de scroll al final, o un frame stale del compositor al mover la ventana entre monitores con distinto DPR— se ve blanca justo debajo del footer navy. Con el lienzo en navy ese asomo es del mismo color que el footer y deja de notarse. El body sigue en blanco, así que dentro del documento nada cambia. */ html { background: var(--navy); } body { background: var(--white); color: var(--black); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ════ ANIMATIONS ════ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s ease, transform .85s ease; } .reveal.in { opacity: 1; transform: none; } .d1 { transition-delay: .12s; } .d2 { transition-delay: .24s; } .d3 { transition-delay: .36s; } .d4 { transition-delay: .48s; } /* ════ NAV ════ */ #nav { position: fixed; inset: 0 0 auto; z-index: 200; padding: 36px var(--g); display: flex; align-items: center; justify-content: space-between; transition: background .45s, padding .3s, border-color .45s; border-bottom: 1px solid transparent; } #nav.on { background: rgba(247,245,240,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 18px var(--g); border-bottom-color: var(--border); } /* Scrim para asegurar contraste del logo/menú sobre vídeo, antes de que el nav pase a .on */ #nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0)); opacity: 1; transition: opacity .45s; pointer-events: none; } #nav.on::before { opacity: 0; } .nav-logo { display: block; color: var(--white); transition: color .4s; line-height: 0; } #nav.on .nav-logo { color: var(--black); } .nav-logo svg { height: 22px; width: auto; } .nav-right { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-right a { font-size: 15px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,.82); transition: color .3s; } #nav.on .nav-right a { color: var(--mid); } .nav-right a:hover { color: var(--white); font-weight: 600; } #nav.on .nav-right a:hover { color: var(--black); font-weight: 600; } .nav-right a.active { color: #fff; font-weight: 500; } #nav.on .nav-right a.active { color: var(--black); font-weight: 600; } /* Subrayado animado: aparece en hover, permanece fijo en la sección activa */ .nav-right li a:not(.nav-lang) { position: relative; } .nav-right li a:not(.nav-lang)::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .nav-right li a:not(.nav-lang):hover::after, .nav-right li a.active::after { transform: scaleX(1); } .nav-lang { color: rgba(255,255,255,.42) !important; letter-spacing: .12em; } #nav.on .nav-lang { color: var(--muted) !important; } /* Selector de idioma: dos enlaces reales (WPML). El idioma activo va destacado y el otro atenuado, para que se vea cuál está puesto. */ .nav-lang-wrap { display: flex; align-items: center; gap: 4px; } .nav-lang { color: rgba(255,255,255,.42) !important; letter-spacing: .12em; } .nav-lang.nav-lang-on { color: rgba(255,255,255,.95) !important; font-weight: 500; } #nav.on .nav-lang, #nav.nav-solid .nav-lang { color: var(--muted) !important; } #nav.on .nav-lang.nav-lang-on, #nav.nav-solid .nav-lang.nav-lang-on { color: var(--black) !important; } .mobile-nav-lang a { text-decoration: none; } .mobile-nav-lang .nav-lang-on { color: rgba(255,255,255,.95) !important; } .nav-sep { margin: 0 1px; opacity: .5; } /* ════ HAMBURGER ════ */ .nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 4px; flex-direction: column; gap: 5px; z-index: 210; } .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: background .3s; } #nav.on .nav-burger span { background: var(--black); } /* ════ MOBILE NAV OVERLAY ════ */ .mobile-nav { position: fixed; inset: 0; background: var(--black); z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; transform: translateY(-100%); transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .mobile-nav.open { transform: none; pointer-events: auto; } .mobile-nav ul { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 24px; padding: 0; margin: 0; } .mobile-nav li a { position: relative; font-family: var(--display); font-size: 32px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--white); text-decoration: none; } .mobile-nav li a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .mobile-nav li a.active::after { transform: scaleX(1); } .mobile-nav-close { position: absolute; top: 32px; right: 32px; background: none; border: none; cursor: pointer; font-size: 28px; color: var(--white); line-height: 1; } .mobile-nav-lang { font-size: 13px; letter-spacing: .2em; color: rgba(255,255,255,.4); } @media (max-width: 768px) { .nav-right { display: none; } .nav-burger { display: flex; } } /* ════ HERO ════ */ .ct-hero { min-height: 100svh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 4vw, 64px); padding: clamp(100px, 14vh, 160px) var(--g) clamp(64px, 9vh, 110px); } .ct-headline { position: relative; z-index: 2; flex: 1 1 auto; } .ct-form-wrap { position: relative; z-index: 2; flex-shrink: 0; width: clamp(360px, 46vw, 580px); } .ct-bg { position: absolute; inset: 0; z-index: 0; } .ct-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .ct-overlay { position: absolute; inset: 0; background: linear-gradient( 150deg, rgba(10,8,6,.70) 0%, rgba(10,8,6,.42) 45%, rgba(10,8,6,.75) 100% ); } /* Headline */ .ct-headline {} @keyframes ct-from-left { from { opacity: 0; filter: blur(14px); transform: translateX(-260px) scale(0.88); } to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); } } @keyframes ct-from-right { from { opacity: 0; filter: blur(14px); transform: translateX(260px) scale(0.88); } to { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); } } .ct-hw { display: block; opacity: 0; } .ct-hw-1.in { animation: ct-from-left 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .ct-hw-2.in { animation: ct-from-right 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .ct-hw-3.in { animation: ct-from-left 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .ct-hw-4.in { animation: ct-from-right 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .ct-hl-title { font-family: var(--display); /* 6vw en vez de 7.5vw: con 7.5 el titular llegaba al tope de 108px ya en 1440px, así que de ahí en adelante no bajaba nada. Con 6 el tope se alcanza a partir de 1800px y los anchos intermedios (portátiles) reciben un titular proporcionado — 90px a 1500px. */ font-size: clamp(52px, 6vw, 108px); font-weight: 600; line-height: 1.08; color: var(--white); text-transform: uppercase; letter-spacing: .04em; } .ct-hl-serif { font-family: var(--serif); font-weight: 300; letter-spacing: .04em; } .ct-honored-wrap { position: relative; display: inline-block; } .ct-honored-ul { position: absolute; left: -4%; bottom: -4px; width: 108%; height: 12px; pointer-events: none; overflow: visible; } .ct-hl-olive { color: var(--lime); font-style: italic; } /* Form */ .ct-form-wrap { background: rgba(29, 38, 61, 0.50); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: clamp(36px, 5vh, 60px) clamp(32px, 4vw, 52px); border-radius: 20px; } .ct-form { display: flex; flex-direction: column; gap: clamp(16px, 2.2vh, 26px); } .ct-field { display: flex; flex-direction: column; gap: 6px; } .ct-label { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--white); } .ct-input, .ct-textarea { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.25); color: var(--white); font-family: var(--sans); font-size: 15px; font-weight: 300; padding: 10px 0; width: 100%; outline: none; transition: border-color .3s; border-radius: 0; -webkit-appearance: none; } .ct-input::placeholder, .ct-textarea::placeholder { color: rgba(255,255,255,.55); } .ct-input:focus, .ct-textarea:focus { border-bottom-color: rgba(255,255,255,.75); } .ct-textarea { resize: none; min-height: 110px; } .ct-privacy { display: flex; align-items: flex-start; gap: 12px; } .ct-checkbox { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; accent-color: var(--lime); cursor: pointer; } .ct-privacy-text { font-family: var(--sans); font-size: 11px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.42); } .ct-privacy-text a { color: rgba(255,255,255,.65); text-decoration: underline; text-underline-offset: 2px; } .ct-submit { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--white); font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .06em; cursor: pointer; padding: 0; margin-top: 4px; align-self: flex-end; transition: opacity .3s; } .ct-submit:hover { opacity: .6; } .ct-submit-arrow { font-size: 20px; line-height: 1; transition: transform .3s cubic-bezier(0.2, 0, 0, 1); } .ct-submit:hover .ct-submit-arrow { transform: translate(3px, -3px); } /* ════ SOCIAL ════ */ .ct-social { background: var(--white); padding: clamp(64px, 9vh, 110px) var(--g); border-top: 1px solid var(--border); } .ct-social-label { font-family: var(--display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--black); margin-bottom: clamp(28px, 4vh, 48px); margin-top: 0; } .ct-social-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ct-social-link { display: flex; align-items: center; justify-content: space-between; padding: clamp(18px, 2.4vh, 26px) clamp(20px, 2.5vw, 36px); text-decoration: none; color: var(--black); border: 1px solid var(--border); border-radius: 4px; transition: background .35s, color .35s, border-color .35s; } .ct-social-link:hover { background: var(--black); color: var(--white); border-color: var(--black); } .ct-social-name { font-family: var(--display); font-size: 14px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; margin: 0; } .ct-social-arrow { font-size: 20px; font-weight: 300; transition: transform .3s cubic-bezier(0.2, 0, 0, 1); } .ct-social-link:hover .ct-social-arrow { transform: translate(3px, -3px); } /* ════ LOCATIONS ════ */ .ct-locations { background: var(--white); padding: clamp(64px, 9vh, 110px) 0 clamp(80px, 12vh, 140px); } .ct-locations-header { padding: 0 var(--g); margin-bottom: clamp(32px, 4.5vh, 52px); } .ct-locations-label { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mid); margin: 0; } .ct-cards-track { display: flex; gap: 10px; overflow-x: auto; padding: 0 var(--g); scrollbar-width: none; -ms-overflow-style: none; cursor: grab; -webkit-overflow-scrolling: touch; user-select: none; } .ct-cards-track:active { cursor: grabbing; } .ct-cards-track::-webkit-scrollbar { display: none; } .ct-loc-card { flex-shrink: 0; width: clamp(220px, 26vw, 360px); aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; position: relative; } .ct-loc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(65%); transition: transform .6s cubic-bezier(0.2, 0, 0, 1), filter .4s ease; } .ct-loc-card:hover .ct-loc-bg { transform: scale(1.05); filter: grayscale(20%); } .ct-loc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,6,4,.88) 0%, rgba(8,6,4,.28) 55%, rgba(8,6,4,.12) 100%); } .ct-loc-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(18px, 2.2vw, 30px); } .ct-loc-code { font-family: var(--display); font-size: clamp(56px, 5.5vw, 80px); font-weight: 600; color: var(--white); letter-spacing: .04em; line-height: 1; margin-bottom: 10px; } .ct-loc-city { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; white-space: nowrap; } .ct-loc-role { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--white); white-space: nowrap; } /* Card gradient backgrounds */ .loc-agp { background: linear-gradient(160deg, #3A2418 0%, #6A4A2A 45%, #9A7A58 100%); } .loc-mad { background: linear-gradient(155deg, #181828 0%, #28304A 45%, #48506A 100%); } .loc-cdmx { background: linear-gradient(150deg, #182018 0%, #2A3A28 45%, #3A5038 100%); } .loc-cun { background: linear-gradient(160deg, #0A2830 0%, #144040 45%, #1E5858 100%); } .loc-world { background: var(--navy); } /* ════ SERVICES / LITTLE BIG WORLD ════ */ .services { background: var(--white); padding-top: clamp(80px, 10vh, 120px); } .svc-header { display: flex; padding: 0 var(--g) clamp(32px, 5vh, 56px); } .svc-header-logo { display: flex; align-items: flex-end; gap: clamp(12px, 1.5vw, 20px); } /* clip muestra solo LITTLE BIG (y 0–30 de un SVG 248×61) */ .littlebig-clip { display: block; overflow: hidden; width: clamp(180px, 22vw, 320px); aspect-ratio: 248 / 30; flex-shrink: 0; } .littlebig-logo { display: block; width: 100%; height: auto; } .littlebig-world { font-family: var(--display); font-size: 48px; font-weight: 600; color: var(--black); text-transform: uppercase; letter-spacing: .06em; line-height: 1; margin: 0; flex-shrink: 0; } @media (max-width: 768px) { /* logo Little Big se achica a 180px fijo en mobile — WORLD debe seguirle el alto, no quedar a 48px fijo */ .littlebig-world { font-size: 27px; } } .svc-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 0 var(--g) clamp(40px, 6vh, 64px); } .svc-item { display: flex; flex-direction: column; gap: 14px; } .svc-label { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; text-align: center; color: var(--black); } .svc-card { position: relative; width: 100%; /* Formato vertical (el que tenía servicios). Antes era height:500px fijo, que además anulaba cualquier aspect-ratio. */ aspect-ratio: 1396/3171; border-radius: 18px; overflow: hidden; background: #2e2b28; display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; } .svc-card img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: transform .6s cubic-bezier(0.2, 0, 0, 1); } .svc-card:hover img:first-child { transform: scale(1.08); } .svc-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(22,20,16,.05) 0%, rgba(22,20,16,.45) 100%); z-index: 1; } .svc-logo { position: relative; z-index: 2; height: clamp(10px, 1vw, 14px); width: auto; object-fit: contain; filter: brightness(0) invert(1); } .svc-arrow { position: absolute; bottom: 14px; right: 16px; font-size: 50px; font-weight: 100; color: #fff; z-index: 2; line-height: 1; } .svc-c1 { background: #2c2825; } .svc-c2 { background: #282828; } .svc-c2 img:first-child { filter: none; } .svc-c2 .svc-arrow { display: none; } .svc-c3 { background: #2e2c28; } .svc-c4 { background: #2a2a2a; } .svc-c5 { background: #2c2c2c; } .svc-c6 { background: #282828; } /* Descripción de cada marca: siempre visible bajo la tarjeta (antes solo aparecía en hover, superpuesta sobre la imagen). */ .svc-desc { margin: 0; font-family: var(--sans); font-size: clamp(11px, .9vw, 13px); font-weight: 400; line-height: 1.6; color: rgba(20, 18, 14, .72); text-align: center; } @media (max-width: 1024px) { .svc-row { grid-template-columns: repeat(3, 1fr); } /* labels de hasta 3 lineas conviven en la misma fila (font 16px, columnas angostas) — reservar ese alto para que las tarjetas arranquen a la misma altura, texto pegado abajo (cerca de la imagen) */ .svc-label { min-height: 3.9em; line-height: 1.3; display: flex; flex-direction: column; justify-content: flex-end; } } @media (max-width: 580px) { .svc-row { grid-template-columns: repeat(2, 1fr); } } /* ════ FOOTER ════ */ .foot { background: var(--navy); color: #fff; padding: clamp(54px,6vw,90px) var(--g) clamp(26px,3vw,40px); } .foot-grid { display: grid; grid-template-columns: repeat(3,1fr) auto; gap: clamp(28px,3vw,48px); } .ftitle { grid-column: 1 / -1; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; margin-bottom: clamp(20px,2.4vw,30px); } /* .ws puede ser (oficinas con ficha en Google Maps) o
(las "Coming soon", sin enlace). display:block porque contiene divs. */ .ws { margin-bottom: clamp(26px,3vw,42px); display: block; color: inherit; text-decoration: none; } a.ws { transition: opacity .3s; } a.ws:hover { opacity: .62; } .ws .city { font-family: var(--sans); font-size: clamp(15px,1.3vw,19px); font-weight: 300; letter-spacing: .01em; text-transform: uppercase; margin-bottom: .7em; } .ws .addr { font-family: var(--sans); font-weight: 300; font-size: 14.5px; line-height: 1.5; color: #fff; max-width: 24ch; } .foot-talk { justify-self: end; text-align: right; } .foot-talk .lt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; margin-bottom: clamp(18px,2vw,26px); } .foot-talk a { font-family: var(--sans); font-weight: 300; display: block; font-size: 14.5px; color: #fff; text-decoration: none; margin-bottom: .85em; letter-spacing: .04em; transition: opacity .3s; } .foot-talk a:hover { opacity: .7; } .foot-rule { height: 1px; background: var(--line-navy); margin: clamp(30px,3.6vw,52px) 0 clamp(18px,2vw,26px); } .foot-bot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .foot-brand { font-family: var(--sans); font-weight: 300; letter-spacing: .42em; font-size: 15px; padding-left: .42em; text-transform: uppercase; color: #fff; } .foot-brand svg { height: 16px; width: auto; display: block; } .foot-legal { font-family: var(--sans); font-weight: 300; display: flex; gap: 14px; align-items: center; font-size: 13.5px; color: #fff; } .foot-legal a { color: inherit; text-decoration: none; transition: opacity .3s; } .foot-legal a:hover { opacity: .7; } @media (max-width: 768px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-talk { grid-column: 1/-1; justify-self: start; text-align: left; } .ct-hero { flex-direction: column; justify-content: flex-start; align-items: flex-start; } .ct-form-wrap { width: 100%; flex-shrink: 1; } } @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } .ws .addr { font-size: 11px; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ════ CURTAIN ════ */ #page-curtain { position: fixed; inset: 0; background: var(--navy); z-index: 9000; display: flex; align-items: center; justify-content: center; transition: transform 1.6s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; } #page-curtain.away { transform: translateY(-100%); } .curtain-label { font-family: var(--display); font-size: clamp(36px, 6vw, 80px); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--white); opacity: 0; animation: curtainLogo .8s cubic-bezier(0.16, 1, 0.3, 1) .2s forwards; } @keyframes curtainLogo { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ════ BACK TO TOP ════ */ .back-top { position: fixed; bottom: 36px; right: 36px; width: 48px; height: 48px; border-radius: 50%; background: var(--black); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 999; opacity: 0; transform: translateY(16px); transition: opacity .45s cubic-bezier(0.2,0,0,1), transform .45s cubic-bezier(0.2,0,0,1), background .25s ease; pointer-events: none; } .back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-top:hover { background: #333; } .back-top-arrow { transition: transform .3s cubic-bezier(0.2,0,0,1); display: flex; } .back-top:hover .back-top-arrow { transform: translateY(-3px); } /* ════ RESPONSIVE ════ */ @media (max-width: 900px) { .ct-form-wrap { width: min(100%, 480px); } .ct-social-links { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .ct-social-links { grid-template-columns: 1fr; } .ct-loc-card { width: clamp(200px, 78vw, 300px); } } /* Pantallas anchas: el hero reparte con space-between, así que el titular queda pegado al margen izquierdo y el formulario al derecho. Como el titular topa a 108px (no crece más) y el formulario estaba clavado en 580px, todo el ancho extra por encima de 1920px caía en medio como hueco muerto. Aquí el formulario pasa a crecer con el viewport a partir de 1920 (0,75px por cada px de más) hasta 960px, y el padding interior sube con él para que los campos no queden como líneas interminables. */ @media (min-width: 1921px) { .ct-form-wrap { width: clamp(580px, calc(580px + (100vw - 1920px) * 0.75), 960px); padding: clamp(44px, 5vh, 68px) clamp(52px, 3.2vw, 76px); } } /* ── Custom Cursor ── */ @media (pointer: fine) { *, a, button, input, textarea, select, label { cursor: none !important; } } .crsr { position: fixed; width: 30px; height: 30px; border: 1.5px solid rgba(40,40,40,.65); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%,-50%); transition: width .35s cubic-bezier(0.16,1,0.3,1), height .35s cubic-bezier(0.16,1,0.3,1), border-color .35s, opacity .4s; opacity: 0; } .crsr.active { opacity: 1; } .crsr.hovering { width: 56px; height: 56px; border-color: rgba(40,40,40,.3); } .crsr.on-dark { border-color: rgba(251,249,248,.75); } .crsr.on-dark.hovering { border-color: rgba(251,249,248,.35); } .crsr-dot.on-dark { background: #FBF9F8; } .crsr-dot { position: fixed; width: 5px; height: 5px; background: #282828; border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%,-50%); opacity: 0; transition: opacity .4s; } .crsr-dot.active { opacity: 1; } /* ═══════════════════════════════════════════════════════════ WS Form (contacto) — override para calcar el diseño del mockup. El form se monta client-side con clases wsf-*; lo reestilamos dentro de .ct-form-wrap sobre el hero oscuro. ═══════════════════════════════════════════════════════════ */ .ct-form-wrap .wsf-form { background: transparent !important; box-shadow: none !important; } .ct-form-wrap .wsf-form, .ct-form-wrap .wsf-form * { box-sizing: border-box; } .ct-form-wrap .wsf-field-wrapper { margin: 0 0 clamp(16px, 2.2vh, 26px) 0 !important; padding: 0 !important; } .ct-form-wrap .wsf-label { font-family: var(--sans) !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--white) !important; margin: 0 0 6px 0 !important; padding: 0 !important; } /* Solo campos de texto: excluir checkbox/radio, que con appearance:none y sin borde quedaban invisibles (el consentimiento GDPR no se veía). */ .ct-form-wrap input.wsf-field:not([type="checkbox"]):not([type="radio"]), .ct-form-wrap textarea.wsf-field, .ct-form-wrap select.wsf-field { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.25) !important; border-radius: 0 !important; color: var(--white) !important; font-family: var(--sans) !important; font-size: 15px !important; font-weight: 300 !important; padding: 10px 0 !important; width: 100% !important; height: auto !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; transition: border-color .3s; } .ct-form-wrap input.wsf-field::placeholder, .ct-form-wrap textarea.wsf-field::placeholder { color: rgba(255,255,255,.55) !important; } .ct-form-wrap input.wsf-field:not([type="checkbox"]):not([type="radio"]):focus, .ct-form-wrap textarea.wsf-field:focus, .ct-form-wrap select.wsf-field:focus { border-bottom-color: rgba(255,255,255,.75) !important; outline: none !important; box-shadow: none !important; } .ct-form-wrap textarea.wsf-field { resize: none; min-height: 110px; } /* ── Checkbox GDPR / privacidad ──────────────────────────────────────────── WS Form monta la fila así: