/* ============================================================ DESIGN TOKENS (Manual de Marca Infiniti Group) ============================================================ */ :root{ /* Tokens de marca conectados a theme.json (Apariencia → Editor → Estilos). Cambiar un color global en el editor cambia estas variables y, con ellas, la página pública. El valor hex es solo el respaldo cuando WordPress no está presente. */ --background:var(--wp--preset--color--midnight,#0B1F3A); --foreground:var(--wp--preset--color--white,#FFFFFF); --ink:var(--wp--preset--color--midnight,#0B1F3A); /* Midnight Blue */ --royal:var(--wp--preset--color--royal,#2563EB); /* Royal Blue */ --emerald:var(--wp--preset--color--emerald,#10B981); /* Emerald */ --cyan:var(--wp--preset--color--cyan,#38BDF6); /* Cyan */ --purple:var(--wp--preset--color--purple,#885CF6); /* Purple */ --graphite:var(--wp--preset--color--graphite,#1F2937); /* Graphite */ --light-gray:var(--wp--preset--color--light-gray,#E5E7EB); /* Light Gray */ --pf-card:#1F2937; --cc-search:#0B1F3A; --paper:#FFFFFF; --paper-alt:#E5E7EB; --nav-ink:rgba(255,255,255,0.78); --cc-dark-ink:#FFFFFF; --cc-light-ink:#0B1F3A; --cc-light-muted:#64748B; /* Mismo lenguaje de vidrio que #music-toggle (el otro control flotante fijo sobre la escena): navy translúcido + borde cian tenue, no la barra blanca sólida anterior. */ --nav-surface:rgba(11,31,58,0.72); --nav-item:transparent; --nav-logo:#FFFFFF; --nav-cta:#2563EB; --nav-cta-ink:#FFFFFF; --nav-border:rgba(56,189,246,0.32); --nav-shadow:rgba(0,0,0,0.4); --glass-dark:rgba(40,36,33,0.55); --glass-border:rgba(255,255,255,0.12); --glass-border-soft:rgba(255,255,255,0.14); --hairline:rgba(255,255,255,0.28); --watermark:rgba(255,255,255,0.85); --card-violet:radial-gradient(95% 80% at 50% 28%, #E5E7EB 0%, #38BDF6 34%, #2563EB 66%, #0B1F3A 100%); --loader-glow:rgba(37,99,235,0.55); /* Radii */ --radius-btn:8px; --radius-card:3vmin; --radius-pf:2.5vmin; --radius-slider:1.6vmin; --radius-grid:12px; --radius-target:30px; /* Showreel geometry — DESKTOP defaults (also the no-JS fallback) */ --sr-card-w:42vmin; --sr-card-h:62vmin; --sr-carousel-r:27vmin; --sr-flyback:40vmin; --sr-hero-pad:8vmin; --sr-heading-1:18vmin; --sr-heading-2:24vmin; --sr-sphere-body-w:52vmin; --sr-sphere-body-text:2.4vmin; --sr-track-vh:2000vh; } /* Adaptive root font-size (rem scaling for UI only; most layout is vmin/vw/vh) */ html{ font-size:16px; } @media (max-width:1920px){ html{ font-size:0.833333vw; } } @media (max-width:1440px){ html{ font-size:1.111111vw; } } @media (max-width:1024px){ html{ font-size:1.5625vw; } } @media (max-width:640px){ html{ font-size:4.444444vw; } } *{ margin:0; box-sizing:border-box; } /* overflow-x:hidden en rompe position:sticky (probado y revertido antes: todo el Recorrido, incluida Presencia, depende de .sticky). overflow-x:clip SÍ recorta el ancho igual que hidden, pero —a diferencia de hidden/scroll/auto— la propia especificación de CSS dice que no convierte al elemento en "contenedor de scroll", así que no interfiere con el cálculo del ancestro de scroll que necesita sticky. overscroll-behavior-x corta además el rebote elástico lateral en iOS. */ html,body{ scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:none; overflow-x:clip; } html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; } body{ background:var(--background); color:var(--foreground); font-family:"Inter", sans-serif; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,nav,button,.font-poppins{ font-family:"Poppins", sans-serif; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } .mono{ font-family:"JetBrains Mono", monospace; } ::selection{ background:var(--royal); color:#fff; } :focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:2px; } /* Skip link + reduced-motion helper */ .skip-link{ position:fixed; left:1vmin; top:1vmin; z-index:300; background:var(--royal); color:#fff; padding:10px 16px; border-radius:8px; transform:translateY(-160%); transition:transform .2s ease; font-family:"Poppins",sans-serif; font-size:14px; } .skip-link:focus{ transform:translateY(0); } /* ============================================================ LOADER ============================================================ */ #loader{ position:fixed; inset:0; z-index:200; display:flex; place-items:center; justify-content:center; overflow:hidden; background:var(--ink); flex-direction:column; gap:4vmin; } #loader-bloom{ position:absolute; left:50%; top:44%; width:78vmin; height:78vmin; transform:translate(-50%,-50%); border-radius:9999px; filter:blur(80px); background:var(--card-violet); opacity:0; pointer-events:none; } #loader-mark{ position:relative; width:180px; height:132px; object-fit:contain; opacity:0; filter:drop-shadow(0 0 28px var(--loader-glow)); will-change:transform,opacity,filter; } #loader-ui{ position:absolute; left:0; right:0; bottom:8vmin; display:flex; flex-direction:column; align-items:center; gap:1.2vmin; color:rgba(255,255,255,0.85); } #loader-ui .sys{ font-size:12px; letter-spacing:0.4em; color:rgba(255,255,255,0.5); } #loader-ui .msg{ font-size:13px; letter-spacing:0.06em; color:rgba(255,255,255,0.75); } #loader-count{ font-size:26px; font-family:"JetBrains Mono",monospace; color:#fff; letter-spacing:0.08em; } /* ============================================================ SITE HEADER / NAV ============================================================ */ #site-header{ position:fixed; left:0; top:2vmin; z-index:100; display:flex; width:100%; flex-direction:column; align-items:center; pointer-events:none; opacity:0; transform:translateY(-10px); transition:opacity .7s ease-in-out, transform .7s ease-in-out; } #site-header.revealed{ opacity:1; transform:translateY(0); } /* Una sola cápsula de vidrio oscuro — mismo lenguaje que #music-toggle (el otro control flotante fijo sobre la escena inmersiva): fondo navy translúcido, borde cian tenue, blur. Reemplaza la barra de "chiclets" blancos, que rompía con el resto del sitio. */ #site-header nav{ pointer-events:auto; display:flex; align-items:center; gap:2px; border-radius:999px; background:var(--nav-surface); border:1px solid var(--nav-border); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); padding:6px 6px 6px 18px; box-shadow:0 20px 50px var(--nav-shadow), inset 0 1px 0 rgba(255,255,255,0.06); max-width:calc(100% - 6vmin); } .nav-tile{ border-radius:999px; height:44px; display:flex; align-items:center; justify-content:center; } .nav-logo-tile{ background:none; padding:0 16px 0 0; } .nav-logo-tile img{ height:20px; width:auto; object-fit:contain; } .nav-logo-tile .iso{ display:none; } .nav-links{ display:none; align-items:stretch; gap:2px; list-style:none; margin:0; padding:0; } .nav-links a{ width:auto; padding:0 16px; background:var(--nav-item); color:var(--nav-ink); font-family:"Poppins",sans-serif; font-size:14px; font-weight:500; white-space:nowrap; transition:background-color .2s ease, color .2s ease; } .nav-links a:hover{ background:rgba(255,255,255,0.08); color:#fff; } .nav-toggle{ width:44px; background:var(--nav-item); color:var(--nav-ink); border:none; cursor:pointer; } .nav-cta{ background:var(--nav-cta); color:var(--nav-cta-ink); padding:0 22px; font-family:"Poppins",sans-serif; font-size:14px; font-weight:600; margin-left:2px; transition:background-color .2s ease, transform .2s ease; } .nav-cta:hover{ background:#1e5ae0; transform:translateY(-1px); } #mobile-menu{ margin-top:1.2vmin; width:calc(100% - 8vmin); max-width:420px; overflow:hidden; border-radius:20px; background:var(--nav-surface); border:1px solid var(--nav-border); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); padding:8px; pointer-events:none; opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; box-shadow:0 20px 50px var(--nav-shadow); } #mobile-menu.open{ pointer-events:auto; opacity:1; transform:translateY(0); } #mobile-menu ul{ list-style:none; display:flex; flex-direction:column; gap:2px; } #mobile-menu a{ display:flex; align-items:center; height:46px; width:100%; border-radius:12px; padding:0 18px; background:var(--nav-item); color:var(--nav-ink); font-family:"Poppins",sans-serif; font-size:15px; transition:background-color .2s ease; } #mobile-menu a:hover{ background:rgba(255,255,255,0.08); } @media (min-width:640px){ .nav-links{ display:flex; } .nav-toggle{ display:none; } .nav-logo-tile{ padding:0 18px 0 2px; } } @media (max-width:760px){ .nav-links a{ padding:0 12px; font-size:13px; } .nav-cta{ padding:0 16px; font-size:13px; } } @media (max-width:640px){ .nav-logo-tile img.blanco{ display:none; } .nav-logo-tile img.iso{ display:block; height:26px; } } /* ============================================================ AURORA OVERLAY ============================================================ */ #aurora{ position:fixed; inset:0; pointer-events:none; z-index:30; opacity:0; } #aurora canvas{ width:100%; height:100%; display:block; } /* ============================================================ TRACK + STICKY STAGE ============================================================ */ .track{ position:relative; height:var(--sr-track-vh); } .sticky{ position:sticky; top:0; height:100vh; overflow:hidden; padding:4vmin; } /* Puramente decorativo (fondo blanco animado por opacidad, ver stageBackdropOpacity en journey.js) — pointer-events:none para que no bloquee clics cuando ya está invisible (opacity:0 no basta, un elemento transparente sigue recibiendo clics igual). */ #stage-backdrop{ position:absolute; inset:0; background:#fff; z-index:0; pointer-events:none; } #marquee-wrap{ position:absolute; left:0; top:50%; width:100vw; transform:translateY(-50%); pointer-events:none; z-index:1; } .marquee{ width:100%; overflow:hidden; } .marquee-row{ display:flex; width:max-content; animation:marquee 25s linear infinite; } .marquee-item{ padding:0 3vw; font-size:7vw; letter-spacing:-0.03em; color:#000; font-family:"Poppins",sans-serif; font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; } .marquee-bullet{ width:1.5vw; height:1.5vw; transform:translateY(0.8vw); border-radius:9999px; border:2px solid #000; display:inline-block; margin:0 1.5vw; } @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } #scene3d{ position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center; perspective:1500px; z-index:2; } #camera-rig{ position:absolute; inset:0; transform-style:preserve-3d; } #carousel{ position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center; transform-style:preserve-3d; } .card{ position:absolute; } #card1{ overflow:hidden; } #card2,#card3,#card4{ height:var(--sr-card-h); width:var(--sr-card-w); } #card4{ display:flex; align-items:center; justify-content:center; overflow:visible; } /* Grid tiles */ .grid-tile{ position:absolute; left:50%; top:50%; z-index:-1; overflow:hidden; background-size:cover; background-position:center; } /* Target block */ #target-block{ position:absolute; left:50%; top:50%; z-index:-1; height:100vh; width:100vw; overflow:hidden; background:var(--ink); } #target-block canvas{ position:absolute; inset:0; width:100%; height:100%; } /* Velo de legibilidad para el cierre (Presencia): la escena de esferas + degradado es mucho más clara y ocupada que el navy sólido que tenía la sección original — sin esto el título y las tarjetas se pierden contra el fondo. Más oscuro del lado donde vive el texto (izquierda), más transparente hacia la derecha para no tapar la escena entera (mismo criterio que .ig-hero__veil en el Hero). */ #target-veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(11,31,58,0.85) 0%, rgba(11,31,58,0.68) 34%, rgba(11,31,58,0.32) 64%, rgba(11,31,58,0.1) 100%); } #target-frame{ position:absolute; inset:-4vmin; z-index:3; border-radius:11vmin; border:8vmin solid #fff; pointer-events:none; opacity:0; } /* Carousel CTA */ #carousel-cta{ position:absolute; left:0; right:0; bottom:2vmin; z-index:3; display:flex; justify-content:center; padding:0 4vmin; pointer-events:none; } #carousel-cta a{ pointer-events:auto; border-radius:var(--radius-btn); background:var(--ink); padding:2vmin 4.2vmin; font-size:2.1vmin; color:var(--paper); font-family:"Poppins",sans-serif; } /* ============================================================ HERO CARD ============================================================ */ .hero-card{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:var(--radius-card); background:#000; } .hero-card canvas.hero-grad{ position:absolute; inset:0; z-index:1; width:100%; height:100%; } .hero-head{ position:absolute; inset:0; z-index:3; display:flex; padding:40px; pointer-events:none; } .hero-head h1{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; font-size:7vw; font-weight:400; line-height:0.95; letter-spacing:-0.03em; color:#fff; } .hero-head .l2{ opacity:0.4; } .hero-transition{ position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; pointer-events:none; } .hero-transition h2{ text-align:center; font-size:3.6vmin; font-weight:400; color:#fff; filter:drop-shadow(0 6px 12px rgba(0,0,0,0.5)); transform:rotate(-90deg); } .hero-img-card{ position:absolute; inset:0; z-index:6; perspective:1400px; pointer-events:none; } .hero-slider{ position:absolute; left:50%; top:50%; overflow:hidden; border-radius:var(--radius-slider); box-shadow:0 25px 50px -12px rgba(0,0,0,0.55); } .hero-slider img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; } .hero-slider img.b{ left:100%; transform:rotate(0deg); } .hero-bottom{ position:absolute; bottom:0; left:0; width:100%; padding:40px; z-index:6; display:flex; flex-direction:column; gap:1.5rem; color:#fff; font-weight:300; } .hero-bottom p.lead{ max-width:28rem; opacity:0.9; font-size:16px; line-height:1.6; } .hero-btns{ display:flex; align-items:center; gap:1rem; } .btn-glass{ padding:0.9rem 2rem; border-radius:8px; background:rgba(255,255,255,0.1); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.2); font-size:17px; font-family:"Poppins",sans-serif; cursor:pointer; } .btn-solid-white{ background:#fff; color:#000; font-weight:500; border:none; } .hero-divider{ width:100%; height:1px; background:rgba(255,255,255,0.3); margin:0.5rem 0; } .hero-humanai{ display:flex; flex-direction:column; gap:0.4rem; } .hero-humanai strong{ font-weight:600; } .hero-humanai span{ opacity:0.7; font-size:15px; max-width:30rem; } @media (max-width:640px){ .hero-head, .hero-bottom{ padding:20px; } .hero-head{ padding-top:72px; align-items:flex-start; } /* el título despeja la barra de navegación */ .hero-bottom{ gap:1rem; } .hero-bottom p.lead{ font-size:14px; } .hero-btns{ flex-direction:column; align-items:stretch; gap:0.75rem; } .btn-glass{ font-size:15px; padding:0.75rem 1.25rem; } .hero-divider, .hero-humanai{ display:none; } } /* ============================================================ SERVICE CARD ============================================================ */ .svc-card{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:var(--radius-card); } .svc-card.dark{ color:var(--cc-dark-ink); } .svc-card.light{ color:var(--cc-light-ink); } .svc-card > img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .svc-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; padding:3.2vmin; } .svc-top{ display:flex; align-items:center; justify-content:space-between; } .svc-logo{ width:3.4vmin; height:3.4vmin; border-radius:0.9vmin; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; } .svc-logo svg{ width:2.2vmin; height:2.2vmin; } .svc-url{ font-size:1.5vmin; letter-spacing:0.02em; opacity:0.85; } .svc-pill{ margin-top:2.6vmin; display:flex; align-items:center; justify-content:space-between; gap:1.5vmin; border-radius:4vmin; border:1px solid var(--glass-border); background:var(--glass-dark); padding:1.8vmin 2vmin; backdrop-filter:blur(10px); } .svc-pill .lbl{ display:flex; flex-direction:column; } .svc-pill .lbl small{ font-size:1.4vmin; opacity:0.6; } .svc-pill .lbl b{ font-size:2.2vmin; font-weight:400; } .svc-badge{ width:3vmin; height:3vmin; border-radius:9999px; background:var(--glass-border); display:flex; align-items:center; justify-content:center; } .svc-search{ margin:auto 0; display:flex; align-items:center; gap:1.4vmin; border-radius:5vmin; background:var(--cc-search); padding:2vmin 2.2vmin; color:var(--paper); } .svc-search .q{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.7vmin; opacity:0.8; } .svc-bottom{ margin-top:auto; } .svc-card.dark h3{ font-size:4.6vmin; font-weight:400; line-height:1.05; } .svc-card.dark h3 strong{ font-weight:700; color:#fff; } .svc-card.light p{ font-size:3.1vmin; line-height:1.2; color:var(--paper); } .svc-card.light p strong{ font-weight:700; color:#fff; } /* ============================================================ SPHERE CARD ============================================================ */ .sphere-face{ position:absolute; inset:0; overflow:hidden; border-radius:var(--radius-card); background:var(--card-violet); } .sphere-face .inner{ display:flex; width:100%; height:100%; flex-direction:column; padding:3.2vmin; color:var(--paper); } .sphere-face .top{ display:flex; align-items:center; justify-content:space-between; } .sphere-face .pill{ border-radius:9999px; border:1px solid var(--glass-border); background:var(--glass-dark); padding:0.8vmin 1.8vmin; font-size:1.4vmin; backdrop-filter:blur(10px); } .sphere-face .url{ font-size:1.5vmin; opacity:0.85; } .sphere-face h3{ margin-top:auto; max-width:88%; font-size:4.4vmin; line-height:1.05; font-weight:400; } .sphere-panel{ position:absolute; left:50%; top:50%; height:300vh; width:300vw; background:#0B1F3A; mask-position:center; -webkit-mask-position:center; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; } .sphere-scene{ position:absolute; left:50%; top:50%; height:100vh; width:100vw; } .sphere-canvas{ position:absolute; left:50%; top:50%; z-index:2; width:100%; height:100%; } .sphere-canvas canvas{ width:100%; height:100%; display:block; } .sphere-logo{ position:absolute; left:50%; top:50%; z-index:3; height:12vh; width:18vh; object-fit:contain; } .sphere-h-top{ position:absolute; left:4vmin; top:4vmin; z-index:4; font-size:var(--sr-heading-1); line-height:0.85; color:#fff; font-weight:700; } .sphere-h-bot{ position:absolute; bottom:4vmin; right:4vmin; z-index:4; display:flex; flex-direction:column; align-items:flex-end; text-align:right; font-size:var(--sr-heading-2); line-height:0.85; color:#fff; font-weight:700; } .sphere-body{ position:absolute; bottom:5vmin; left:4vmin; z-index:4; display:flex; max-width:var(--sr-sphere-body-w); flex-direction:column; gap:1.8vmin; font-size:var(--sr-sphere-body-text); font-weight:300; line-height:1.45; color:#fff; } /* ============================================================ CASOS DE ÉXITO ============================================================ */ #casos-de-exito{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; overflow:hidden; padding-top:9vmin; padding-bottom:8vmin; transform:translateY(100%); } #pf-heading{ position:absolute; left:4vmin; top:3vmin; z-index:2; font-size:5vmin; font-weight:700; color:#fff; } #pf-track{ display:flex; height:100%; gap:3vmin; padding-left:3vmin; will-change:transform; } .case-card{ position:relative; display:flex; height:100%; width:62vw; flex-shrink:0; flex-direction:column; justify-content:space-between; overflow:hidden; border-radius:var(--radius-pf); background:var(--pf-card); padding:3.5vmin; color:#fff; } .case-card canvas.case-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.85; } .case-logo-zone{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; padding:8vmin; pointer-events:none; } .case-logo-zone .logo-pad{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:2vmin; padding:5vmin; backdrop-filter:blur(4px); max-width:70%; } .case-logo-zone img{ width:100%; height:auto; max-height:26vh; object-fit:contain; } .case-top{ position:relative; z-index:2; } .case-tag{ font-family:"JetBrains Mono",monospace; font-size:1.6vmin; letter-spacing:0.2em; text-transform:uppercase; color:var(--cyan); } .case-name{ margin-top:1vmin; font-size:3.4vmin; font-weight:700; } .case-actions{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:1.4vmin; } .case-actions a{ display:inline-flex; align-items:center; gap:0.6vmin; border-radius:8px; padding:1.4vmin 2.4vmin; font-size:1.9vmin; font-family:"Poppins",sans-serif; } .case-actions a.fb{ background:rgba(37,99,235,0.18); border:1px solid rgba(37,99,235,0.5); color:#dbe6ff; } .case-actions a.ig{ background:rgba(136,92,246,0.18); border:1px solid rgba(136,92,246,0.5); color:#e7deff; } .case-actions a.go{ background:#fff; color:var(--ink); font-weight:600; } /* CtaBlock on target — cierre del recorrido: Presencia (países), no el CTA genérico original ("Tu desafío / nuestra próxima solución"). El bloque en sí sigue con pointer-events:none (así no interfiere mientras la cámara todavía está en vuelo); solo lo que debe ser clicable una vez que llega — la grilla y sus enlaces — lo reactiva. */ #cta-block{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6vmin; padding:9vmin; pointer-events:none; } #cta-block h2{ max-width:46vw; font-size:clamp(1.9rem,3.6vw,3.1rem); font-weight:700; line-height:1.08; letter-spacing:-0.02em; color:var(--paper); font-family:"Poppins",sans-serif; } #cta-block p{ max-width:30vw; font-size:1.05rem; line-height:1.5; color:rgba(255,255,255,0.7); margin-bottom:0.4vmin; } #cta-block a{ pointer-events:auto; margin-top:1.5vmin; display:inline-flex; border-radius:8px; background:var(--paper); padding:2.2vmin 4.6vmin; font-size:2.5vmin; color:var(--ink); font-family:"Poppins",sans-serif; font-weight:500; } #cta-block .presence-grid{ pointer-events:auto; margin-top:0.4vmin; max-width:46vw; grid-template-columns:repeat(2,1fr); gap:1rem; } #cta-block .presence-card{ pointer-events:auto; padding:1.4rem; } /* #cta-block a (más arriba) es el botón sólido pensado para un único CTA — sin esta regla, su selector (id+type) le gana en especificidad al de .presence-card a (clase+type) y las tarjetas de país heredan ese botón blanco en vez del enlace de texto simple. */ #cta-block .presence-card a{ pointer-events:auto; background:none; padding:0; border-radius:0; margin-top:1rem; display:inline-flex; align-items:center; gap:0.4vmin; color:var(--cyan); font-size:0.95rem; font-family:"Inter",sans-serif; font-weight:400; } #cta-block .presence-card a:hover{ text-decoration:underline; } @media (max-width:640px){ #cta-block h2{ max-width:88vw; font-size:7vw; } #cta-block p{ max-width:88vw; font-size:3.6vw; } #cta-block .presence-grid{ max-width:92vw; grid-template-columns:1fr 1fr; gap:0.7rem; } #cta-block .presence-card{ padding:1rem; } #cta-block .presence-card h3{ font-size:1.05rem; margin-top:0.6rem; } } /* ============================================================ SEMANTIC SECTIONS (presencia / contacto / footer) ============================================================ */ .section-pad{ position:relative; z-index:41; background:var(--ink); padding:12vh 6vw; } .section-pad.alt{ background:linear-gradient(180deg,#0B1F3A 0%, #0d1424 100%); } .eyebrow{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--cyan); margin-bottom:1.2rem; } .h-section{ font-family:"Poppins",sans-serif; font-weight:700; font-size:clamp(28px,5vw,56px); line-height:1.02; letter-spacing:-0.02em; max-width:20ch; } .sub-section{ margin-top:1.4rem; max-width:60ch; color:rgba(255,255,255,0.72); font-size:clamp(15px,1.3vw,18px); line-height:1.6; font-weight:300; } .presence-grid{ margin-top:5vh; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.4rem; } .presence-card{ position:relative; border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:2rem; background:rgba(255,255,255,0.02); overflow:hidden; transition:border-color .3s ease, transform .3s ease; } .presence-card:hover{ border-color:var(--royal); transform:translateY(-4px); } .presence-card .flagdot{ width:10px; height:10px; border-radius:50%; background:var(--emerald); box-shadow:0 0 12px var(--emerald); } .presence-card h3{ margin-top:1rem; font-size:1.4rem; } .presence-card a{ display:inline-flex; align-items:center; gap:0.4rem; margin-top:1rem; color:var(--cyan); font-size:0.95rem; } .presence-card a:hover{ text-decoration:underline; } /* Services grid — fichas quietas en reposo (un único acento por tarjeta, revelado al interactuar, no una pared de 9 colores) que entran en cascada, como una fila de fichas de dominó enderezándose una tras otra. La línea divisoria a ~40% de alto y la proporción más vertical son el guiño a la ficha física; el resto se queda deliberadamente sobrio. */ .svc-grid{ margin-top:5vh; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; } @media (max-width:900px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } } .svc-item{ position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,0.09); border-radius:4px; background:rgba(255,255,255,0.025); transform-origin:bottom center; transition:border-color .35s ease, transform .35s ease; /* Un elemento de grid no se encoge por debajo del ancho mínimo de su contenido a menos que se le indique lo contrario (min-width:auto es el valor por defecto) — con los títulos reales (más largos, en español) esto estiraba la columna más allá de la pantalla en móvil. */ min-width:0; } .svc-item:hover, .svc-item:focus-within{ border-color:var(--dot,var(--royal)); transform:translateY(-3px); } /* Cara de la ficha, como una franja baja de ficha de dominó — la foto real del servicio cuando existe (con un tinte duotono para que fotos sueltas no rompan la paleta), o el trazo propio del servicio, centrado sobre el mismo panel, mientras no haya foto. Alto FIJO (no proporcional al ancho): si el catálogo crece con más servicios, cada tarjeta sigue ocupando lo mismo en vez de crecer con el layout (columna angosta en móvil = tarjeta igual de alta que en escritorio). Mismo alto en ambos casos: la fila queda alineada aunque solo algunas tarjetas tengan imagen todavía. */ .svc-media{ position:relative; width:100%; height:104px; overflow:hidden; background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; } .svc-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(0.72); transition:filter .4s ease; } .svc-media::after{ content:""; position:absolute; inset:0; background:var(--dot,var(--royal)); mix-blend-mode:color; opacity:0.8; transition:opacity .4s ease; } .svc-item:hover .svc-media img, .svc-item:focus-within .svc-media img{ filter:grayscale(0.3) contrast(1.02) brightness(0.85); } .svc-item:hover .svc-media::after, .svc-item:focus-within .svc-media::after{ opacity:0.4; } .svc-mark{ position:relative; width:30px; height:30px; color:var(--dot,var(--royal)); } .svc-mark svg{ width:100%; height:100%; } .svc-item h4{ padding:1.3rem 1.4rem 0; font-size:1.1rem; font-weight:600; letter-spacing:-0.01em; overflow-wrap:break-word; } .svc-item .en{ font-family:"Poppins",sans-serif; } .svc-item .es{ display:block; padding:0.4rem 1.4rem 0; color:rgba(255,255,255,0.58); font-size:0.9rem; font-weight:300; line-height:1.5; overflow-wrap:break-word; } .svc-more{ align-self:flex-start; margin:1.1rem 1.4rem 1.5rem; padding:0 0 2px; border:0; background-color:transparent; cursor:pointer; font-family:"Inter",sans-serif; font-size:0.85rem; color:rgba(255,255,255,0.68); background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-size:0% 1px; background-position:0 100%; transition:background-size .3s ease, color .2s ease; } .svc-item:hover .svc-more, .svc-more:hover, .svc-more:focus-visible{ color:#fff; background-size:100% 1px; } .svc-item{ opacity:0; transform:perspective(1000px) rotateX(-60deg) translateY(6px); } .svc-grid.is-revealed .svc-item{ opacity:1; transform:perspective(1000px) rotateX(0deg) translateY(0); transition:opacity .5s ease calc(var(--i,0) * 70ms), transform .6s cubic-bezier(0.2,0.8,0.2,1) calc(var(--i,0) * 70ms); } @media (prefers-reduced-motion: reduce){ .svc-item{ opacity:1; transform:none; } .svc-grid.is-revealed .svc-item{ transition:none; } } /* Contact tabs */ .tabs{ margin-top:4vh; display:inline-flex; gap:0.5rem; padding:0.4rem; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); } .tab-btn{ padding:0.8rem 1.6rem; border-radius:9px; background:transparent; color:rgba(255,255,255,0.7); font-family:"Poppins",sans-serif; font-size:0.95rem; cursor:pointer; border:none; transition:background .25s, color .25s; } .tab-btn[aria-selected="true"]{ background:var(--royal); color:#fff; } .tab-btn.cand[aria-selected="true"]{ background:var(--emerald); } .panel{ margin-top:2.5vh; max-width:920px; } .panel[hidden]{ display:none; } .panel-note{ margin-bottom:1.5rem; padding:1rem 1.2rem; border-radius:10px; background:rgba(56,189,246,0.1); border:1px solid rgba(56,189,246,0.3); color:#cbe9ff; font-size:0.9rem; } form .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; } @media (max-width:640px){ form .grid2{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1rem; } .field label{ font-family:"JetBrains Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:rgba(255,255,255,0.65); } .field input:not([type="checkbox"]),.field select,.field textarea{ width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.16); border-radius:8px; color:#fff; font-family:"Inter",sans-serif; font-size:0.95rem; padding:0.8rem 0.9rem; transition:border-color .2s, background .2s; } .field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,0.3); } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--royal); background:rgba(255,255,255,0.07); } .field select option{ background:#0a1220; color:#fff; } .field textarea{ min-height:120px; resize:vertical; } .field .err{ color:#ff9d9d; font-size:0.78rem; font-family:"Inter",sans-serif; min-height:1em; display:none; } .field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#ff6b6b; } .field.invalid .err{ display:block; } .field-file small{ font-size:11px; color:rgba(255,255,255,0.45); font-family:"JetBrains Mono",monospace; } .iigc-consent label{ align-self:flex-start; } .iigc-consent input[type="checkbox"]{ flex:0 0 auto; width:16px; height:16px; accent-color:var(--royal); cursor:pointer; } /* El enlace "política de privacidad" heredaba el color casi-blanco del label (color:inherit en la regla global "a{color:inherit}") en vez del cyan que define theme.json para enlaces (styles.elements.link) — ese color de tema SÍ se aplica dentro del editor de bloques (otro orden de carga de CSS ahí), pero en el sitio publicado "a{color:inherit}" de app.css gana. */ .iigc-consent a{ color:var(--cyan); text-decoration:underline; } .iigc-consent a:hover{ opacity:0.8; } .field-file input[type="file"]{ cursor:pointer; } .field-file input[type="file"]::file-selector-button, .field-file input[type="file"]::-webkit-file-upload-button{ background:var(--royal); color:#fff; border:none; border-radius:6px; padding:0.55rem 1.1rem; margin-right:0.9rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:0.82rem; cursor:pointer; transition:background .2s ease; } .field-file input[type="file"]:hover::file-selector-button, .field-file input[type="file"]:hover::-webkit-file-upload-button{ background:#1e5ae0; } .form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:0.5rem; } .btn-primary{ background:#fff; color:var(--ink); border-radius:8px; padding:0.9rem 1.8rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:0.9rem; cursor:pointer; border:none; } .btn-primary[disabled]{ opacity:0.6; cursor:progress; } .btn-wa{ display:inline-flex; align-items:center; gap:0.5rem; border:1px solid rgba(37,211,102,0.6); color:#25D366; border-radius:8px; padding:0.85rem 1.3rem; font-family:"Poppins",sans-serif; font-weight:600; font-size:0.9rem; } .btn-wa:hover{ background:rgba(37,211,102,0.12); } .btn-wa svg{ width:16px; height:16px; } .form-status{ margin-top:1rem; font-size:0.85rem; min-height:1.2em; } .form-status.ok{ color:var(--emerald); } .form-status.warn{ color:var(--cyan); } /* Footer */ footer{ position:relative; z-index:41; background:#08152b; padding:8vh 6vw 4vh; border-top:1px solid rgba(255,255,255,0.08); } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; } @media (max-width:900px){ .footer-top{ grid-template-columns:1fr; gap:2rem; } } .footer-brand img{ height:34px; width:auto; margin-bottom:1.4rem; } .footer-brand p{ max-width:34ch; color:rgba(255,255,255,0.6); font-size:0.92rem; line-height:1.6; font-weight:300; } .footer-social{ margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:0.6rem; } .footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; flex-shrink:0; color:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,0.12); border-radius:50%; transition:color .2s ease, border-color .2s ease, background-color .2s ease; } .footer-social a svg{ width:1.1rem; height:1.1rem; } .footer-social a:hover{ color:#fff; border-color:rgba(255,255,255,0.3); background-color:rgba(255,255,255,0.08); } .footer-col h5{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:1rem; } .footer-col a, .footer-col span{ display:block; color:rgba(255,255,255,0.72); font-size:0.9rem; margin-bottom:0.6rem; } .footer-col a:hover{ color:#fff; } .footer-services{ margin-top:3rem; display:flex; flex-wrap:wrap; gap:0.6rem; } .footer-services span{ font-size:0.8rem; color:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:0.35rem 0.9rem; } .footer-bottom{ margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.08); display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; } .footer-bottom .legal{ display:flex; flex-wrap:wrap; gap:1.5rem; } .footer-bottom a{ font-size:0.8rem; color:rgba(255,255,255,0.5); } .footer-bottom .cr{ font-family:"JetBrains Mono",monospace; font-size:11px; color:rgba(255,255,255,0.4); } /* WhatsApp float */ #wa-float{ position:fixed; right:2.2vmin; bottom:2.2vmin; z-index:90; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,0.35); transition:transform .2s ease; } #wa-float:hover{ transform:scale(1.08); } #wa-float svg{ width:30px; height:30px; } /* ---- Botón de música de ambiente ---- */ #music-toggle{ position:fixed; left:2.2vmin; bottom:2.2vmin; z-index:90; width:52px; height:52px; border-radius:50%; background:rgba(11,31,58,0.72); border:1px solid rgba(56,189,246,0.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,0.35); transition:transform .2s ease, background .2s ease, border-color .2s ease; } #music-toggle:hover{ transform:scale(1.08); background:rgba(37,99,235,0.55); border-color:var(--cyan); } #music-toggle svg{ width:22px; height:22px; } #music-toggle .ic-on{ display:none; } #music-toggle.playing .ic-on{ display:block; } #music-toggle.playing .ic-off{ display:none; } #music-toggle.playing{ border-color:var(--cyan); background:rgba(37,99,235,0.5); } /* ===================================================================== NUEVO HERO EDITORIAL (aislado, prefijo .ig-hero). No afecta estilos globales. ===================================================================== */ .ig-hero{ position:relative; width:100%; min-height:100svh; background:var(--ink); overflow:hidden; isolation:isolate; } .ig-hero__media, .ig-hero__canvas, .ig-hero__veil{ position:absolute; inset:0; } .ig-hero__media{ z-index:1; } .ig-hero__img{ width:100%; height:100%; object-fit:cover; object-position:var(--ig-obj,50% 32%); transition:opacity .6s ease; } .ig-hero__canvas{ z-index:2; width:100%; height:100%; display:block; opacity:0; transition:opacity .6s ease; } .ig-hero.webgl-on .ig-hero__canvas{ opacity:1; } .ig-hero.webgl-on .ig-hero__img{ opacity:0; } /* solo puntos: la foto queda oculta (sigue siendo la fuente del halftone) */ /* Los puntos son solo la entrada (hero.js borra el patrón un instante después de revelarlo): al terminar, se ve la foto real, ya protegida por .ig-hero__veil para que el texto no compita contra un fondo animado todo el tiempo. */ .ig-hero.webgl-on.ig-photo-revealed .ig-hero__img{ opacity:1; } .ig-hero__veil{ z-index:3; pointer-events:none; background: linear-gradient(to top, rgba(11,31,58,0.96) 0%, rgba(11,31,58,0.82) 26%, rgba(11,31,58,0.40) 56%, rgba(11,31,58,0.14) 100%), linear-gradient(to right, rgba(11,31,58,0.74) 0%, rgba(11,31,58,0.16) 46%, rgba(11,31,58,0) 70%), linear-gradient(to bottom, rgba(11,31,58,0.38) 0%, rgba(11,31,58,0) 16%); } .ig-hero__inner{ position:relative; z-index:4; width:100%; max-width:1240px; margin:0 auto; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:16vh 6vw 9vh; gap:0; } .ig-hero__eyebrow{ font-family:"JetBrains Mono",monospace; font-size:clamp(10px,1.05vw,13px); letter-spacing:0.26em; text-transform:uppercase; color:var(--cyan); margin:0 0 1.1rem; display:inline-block; width:fit-content; background:rgba(255,255,255,0.5); border-radius:8px; padding:0.35rem 0.7rem; } .ig-hero__title{ font-family:"Poppins",sans-serif; font-weight:700; color:#fff; line-height:1.02; letter-spacing:-0.02em; font-size:clamp(2.3rem,6.2vw,5.6rem); margin:0 0 1.4rem; text-shadow:0 2px 30px rgba(0,0,0,0.5); max-width:18ch; } .ig-hero__title .ig-line{ display:block; } .ig-hero__title .ig-line:last-child{ color:#dbe6ff; } .ig-hero__text{ font-family:"Inter",sans-serif; font-weight:300; color:#fff; max-width:54ch; font-size:clamp(1rem,1.45vw,1.25rem); line-height:1.6; margin:0 0 1.8rem; } .ig-hero__cta{ display:flex; align-items:center; gap:1.4rem 1.6rem; flex-wrap:wrap; margin:0 0 2.4rem; } .ig-hero__btn{ font-family:"Poppins",sans-serif; font-weight:600; font-size:clamp(.95rem,1.15vw,1.05rem); color:#fff; background:var(--royal); border:none; border-radius:10px; padding:0.95rem 2.6rem; cursor:pointer; box-shadow:0 12px 30px -8px rgba(37,99,235,0.6); transition:transform .2s ease, background .2s ease, box-shadow .2s ease; } .ig-hero__btn:hover{ background:#1e5ae0; transform:translateY(-2px); box-shadow:0 16px 40px -8px rgba(37,99,235,0.78); } .ig-hero__phrase{ font-family:"Inter",sans-serif; font-size:clamp(.85rem,1.05vw,1rem); color:#fff; opacity:0.72; max-width:36ch; line-height:1.5; } .ig-hero__caps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; max-width:960px; } .ig-cap__dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--c,#fff); box-shadow:0 0 12px var(--c); margin-bottom:.6rem; } .ig-cap b{ display:block; font-family:"Poppins",sans-serif; font-weight:600; color:#fff; font-size:clamp(1rem,1.25vw,1.15rem); margin-bottom:.25rem; } .ig-cap small{ display:block; font-family:"Inter",sans-serif; font-weight:300; color:#fff; opacity:0.78; font-size:clamp(.78rem,.92vw,.9rem); line-height:1.45; } .ig-hero__cue{ position:absolute; left:50%; bottom:2.2vh; transform:translateX(-50%); z-index:4; } .ig-hero__cue span{ display:block; width:22px; height:36px; border:2px solid rgba(255,255,255,0.5); border-radius:12px; position:relative; } .ig-hero__cue span::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:igCue 1.6s ease-in-out infinite; } @keyframes igCue{ 0%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 100%{opacity:0; transform:translate(-50%,10px);} } /* Entrada cinematográfica (se dispara con .ig-in tras el loader) */ .ig-hero__eyebrow,.ig-hero__title .ig-line,.ig-hero__text,.ig-hero__cta,.ig-cap{ opacity:0; transform:translateY(18px); filter:blur(6px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease; transition-delay:var(--d,0s); } .ig-hero.ig-in .ig-hero__eyebrow{ opacity:1; transform:none; filter:none; --d:0s; } .ig-hero.ig-in .ig-hero__title .ig-line:nth-child(1){ opacity:1; transform:none; filter:none; --d:.12s; } .ig-hero.ig-in .ig-hero__title .ig-line:nth-child(2){ opacity:1; transform:none; filter:none; --d:.22s; } .ig-hero.ig-in .ig-hero__text{ opacity:.85; transform:none; filter:none; --d:.38s; } .ig-hero.ig-in .ig-hero__cta{ opacity:1; transform:none; filter:none; --d:.5s; } .ig-hero.ig-in .ig-cap:nth-child(1){ opacity:1; transform:none; filter:none; --d:.6s; } .ig-hero.ig-in .ig-cap:nth-child(2){ opacity:1; transform:none; filter:none; --d:.68s; } .ig-hero.ig-in .ig-cap:nth-child(3){ opacity:1; transform:none; filter:none; --d:.76s; } .ig-hero.ig-in .ig-cap:nth-child(4){ opacity:1; transform:none; filter:none; --d:.84s; } /* Móvil (<768px): imagen vertical, contenido apilado, título legible, CTA visible */ @media (max-width:767px){ .ig-hero__inner{ padding:14vh 6vw 12vh; } .ig-hero__title{ font-size:clamp(2rem,9vw,3rem); max-width:14ch; } .ig-hero__caps{ grid-template-columns:1fr 1fr; gap:1.1rem; } .ig-hero__veil{ background:linear-gradient(to top, rgba(11,31,58,0.96) 0%, rgba(11,31,58,0.82) 34%, rgba(11,31,58,0.4) 66%, rgba(11,31,58,0.15) 100%); } .ig-hero__cue{ display:none; } } @media (max-width:420px){ .ig-hero__caps{ grid-template-columns:1fr; gap:.9rem; } } /* Movimiento reducido: mostrar contenido final e imagen de inmediato, sin scrub */ @media (prefers-reduced-motion: reduce){ .ig-hero__eyebrow,.ig-hero__title .ig-line,.ig-hero__text,.ig-hero__cta,.ig-cap{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } .ig-hero.ig-in .ig-hero__text{ opacity:.85 !important; } .ig-hero__cue span::after{ animation:none; } } /* invitación sutil hasta la primera activación */ #music-toggle.hint::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(56,189,246,0.55); animation:mtPulse 2s ease-out infinite; } @keyframes mtPulse{ 0%{ transform:scale(1); opacity:0.7; } 100%{ transform:scale(1.5); opacity:0; } } #music-tip{ position:fixed; left:calc(2.2vmin + 62px); bottom:calc(2.2vmin + 12px); z-index:90; background:rgba(11,31,58,0.9); border:1px solid rgba(56,189,246,0.4); color:#fff; font-size:12px; padding:8px 12px; border-radius:10px; max-width:180px; box-shadow:0 8px 24px rgba(0,0,0,0.4); opacity:0; transform:translateX(-6px); transition:opacity .4s ease, transform .4s ease; pointer-events:none; } #music-tip.show{ opacity:1; transform:translateX(0); } @media (max-width:640px){ #music-tip{ display:none; } } @media (prefers-reduced-motion: reduce){ #music-toggle .eq i, #music-toggle.hint::after{ animation:none; } } /* No-JS / no-WebGL fallback banner */ #fallback-note{ display:none; } /* ---- Legibility: solid white titles + protective shadow ---- */ .hero-head h1, #cta-block h2, .sphere-h-top, .sphere-h-bot{ color:#fff; opacity:1; text-shadow:0 2px 30px rgba(0,0,0,0.55); } /* "Conectamos" (.sphere-h-top) queda sobre una zona de la textura de puntos de la esfera que en ciertos angulos de su rotacion animada se ve muy brillante/densa — el halo suave de 30px de la sombra de arriba no basta ahi, el texto blanco se pierde contra los puntos claros. Se refuerza SOLO este elemento con una sombra mas cerrada y opaca (confirmado que pasa igual en escritorio y en movil, no es un problema de tamano de pantalla). */ .sphere-h-top{ text-shadow:0 1px 4px rgba(0,0,0,0.95), 0 0 18px rgba(11,31,58,0.95), 0 0 34px rgba(11,31,58,0.75); } .hero-head{ z-index:8; } /* nunca cubierto por la imagen del hero */ .hero-head h1 .l2{ opacity:0.55; } /* Titular de la tarjeta del recorrido: reducido para que NO tape el texto pequeño de la izquierda. */ #card1 .hero-head{ display:flex; align-items:flex-start; } #card1 .hero-head h1{ font-size:clamp(0.85rem, 2.1vw, 1.5rem); line-height:1.12; max-width:46%; } .h-section{ color:#fff; opacity:1; } .sub-section{ opacity:0.85; } /* scrim suave detrás de la tarjeta de servicio (imagen) para textos sobre ella */ .svc-card .svc-bottom{ position:relative; z-index:2; } .svc-card::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(11,31,58,0.85) 0%, rgba(11,31,58,0.15) 45%, rgba(11,31,58,0) 70%); } .svc-card .svc-overlay{ position:relative; z-index:2; } /* ---- "Hablemos" modal ---- */ #hablemos-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:5vmin 4vmin; } #hablemos-modal.open{ display:flex; } .hm-backdrop{ position:absolute; inset:0; background:rgba(6,15,32,0.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .hm-card{ position:relative; z-index:1; width:min(560px,100%); max-height:90vh; overflow:auto; background:linear-gradient(165deg,#0e2650 0%, #0B1F3A 60%); border:1px solid rgba(56,189,246,0.35); border-radius:20px; padding:clamp(1.6rem,3.4vw,2.6rem); box-shadow:0 30px 80px rgba(0,0,0,0.6); animation:hmIn .35s cubic-bezier(0.16,1,0.3,1); } @keyframes hmIn{ from{ opacity:0; transform:translateY(18px) scale(0.97);} to{ opacity:1; transform:none;} } .hm-close{ position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,0.08); color:#fff; font-size:16px; cursor:pointer; transition:background .2s; } .hm-close:hover{ background:rgba(255,255,255,0.18); } .hm-eyebrow{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--cyan); margin-bottom:0.6rem; } .hm-card h2{ font-family:"Poppins",sans-serif; font-weight:700; font-size:clamp(1.4rem,3vw,2rem); color:#fff; line-height:1.1; } .hm-sub{ margin-top:0.6rem; margin-bottom:1.6rem; color:rgba(255,255,255,0.72); font-size:0.95rem; } .hm-options{ display:flex; flex-direction:column; gap:0.9rem; } .hm-option{ display:flex; align-items:center; gap:1rem; width:100%; text-align:left; padding:1.1rem 1.2rem; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); color:#fff; cursor:pointer; transition:border-color .2s, background .2s, transform .2s; } .hm-option:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.08); } .hm-option .hm-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; } .hm-option .hm-txt{ display:flex; flex-direction:column; flex:1; } .hm-option .hm-txt b{ font-family:"Poppins",sans-serif; font-weight:600; font-size:1rem; } .hm-option .hm-txt small{ color:rgba(255,255,255,0.6); font-size:0.82rem; margin-top:0.15rem; } .hm-option .hm-arrow{ font-size:1.2rem; opacity:0.7; transition:transform .2s; } .hm-option:hover .hm-arrow{ transform:translateX(4px); } .opt-empresa{ border-color:rgba(37,99,235,0.5); } .opt-empresa .hm-dot{ background:var(--royal); } .opt-empresa:hover{ border-color:var(--royal); } .opt-candidato{ border-color:rgba(16,185,129,0.5); } .opt-candidato .hm-dot{ background:var(--emerald); } .opt-candidato:hover{ border-color:var(--emerald); } .opt-wa{ border-color:rgba(37,211,102,0.5); } .opt-wa .hm-dot{ background:#25D366; } .opt-wa:hover{ border-color:#25D366; } /* ---- "Ver más" (detalle de servicio) modal — reutiliza .hm-backdrop/.hm-card/.hm-close/ .hm-eyebrow/.hm-sub del modal "Hablemos"; solo necesita su propio contenedor #svc-modal y los estilos de la lista + botón de solicitud, que no existen en el otro modal. ---- */ #svc-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:5vmin 4vmin; } #svc-modal.open{ display:flex; } .svc-modal-list{ list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-direction:column; gap:0.6rem; } .svc-modal-list li{ position:relative; padding-left:1.4em; color:rgba(255,255,255,0.78); font-weight:300; line-height:1.5; font-size:0.92rem; } .svc-modal-list li::before{ content:""; position:absolute; left:0; top:0.55em; width:6px; height:6px; border-radius:50%; background:var(--cyan); } .svc-modal-list li.svc-modal-empty{ padding-left:0; color:rgba(255,255,255,0.55); font-style:italic; } .svc-modal-list li.svc-modal-empty::before{ display:none; } /* ---- Hero (inicio): fondo más moderno ---- */ .hero-card::after{ /* rejilla técnica sutil, se desvanece hacia los bordes */ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(130% 95% at 50% 18%, #000 28%, transparent 82%); mask-image:radial-gradient(130% 95% at 50% 18%, #000 28%, transparent 82%); } .hero-card::before{ /* resplandores flotantes de marca (Emerald + Cyan) */ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0.9; background: radial-gradient(40vmin 40vmin at 16% 82%, rgba(16,185,129,0.22), transparent 68%), radial-gradient(46vmin 46vmin at 88% 26%, rgba(56,189,246,0.24), transparent 68%), radial-gradient(60vmin 40vmin at 50% -10%, rgba(37,99,235,0.28), transparent 70%); animation:heroGlow 14s ease-in-out infinite alternate; } @keyframes heroGlow{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(0,-2%,0) scale(1.06);} } /* marco premium de la imagen del hero */ .hero-slider{ border:1px solid rgba(255,255,255,0.18); box-shadow:0 40px 90px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(56,189,246,0.18), 0 0 60px rgba(37,99,235,0.25); } .hero-slider img{ object-position:center; } /* scrim de legibilidad detrás del texto inferior del hero */ .hero-bottom{ background:linear-gradient(to top, rgba(11,31,58,0.94) 0%, rgba(11,31,58,0.6) 55%, rgba(11,31,58,0) 100%); } @media (prefers-reduced-motion: reduce){ .hero-card::before{ animation:none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .marquee-row{ animation:none; } .presence-card{ transition:none; } } /* ---- Imagen editable por capacidad (v0.8.0) ---- Ambito EXCLUSIVO .ig-cap: no toca lienzos WebGL ni el recorrido. Sin imagen se conserva el punto de acento aprobado. */ .ig-cap__media{ display:block; width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin-bottom:.7rem; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); } .ig-cap__media picture{ display:block; width:100%; height:100%; } .ig-cap__media img{ display:block; width:100%; height:100%; object-fit:cover; } /* Sin imagen (fallback), el punto de acento heredaba el margin-bottom:.7rem pensado para fotos (.ig-cap__media), quedando en su propia fila lejos del título — se veía como si "saltara" a la siguiente línea en vez de acompañar a como su marcador. Se pone en línea justo antes del título (bullet + subtítulo) y sigue debajo como cuerpo. */ .ig-cap__media--fallback{ display:inline-block; width:auto; aspect-ratio:auto; margin:0 .55rem 0 0; vertical-align:middle; background:none; border:0; border-radius:0; overflow:visible; } .ig-cap__media--fallback .ig-cap__dot{ margin-bottom:0; } .ig-cap__media--fallback + b{ display:inline-block; vertical-align:middle; } /* (el texto de cuerpo) debe alinearse con el inicio de (el título), no con el punto — se indenta el ancho del punto + su margen derecho (10px + .55rem). */ .ig-cap__media--fallback + b + small{ margin-left:calc(10px + .55rem); } .ig-cap__link{ display:block; text-decoration:none; color:inherit; } .ig-cap__link:hover b{ text-decoration:underline; } @media (max-width:360px){ .ig-cap__media{ aspect-ratio:16/9; } } /* ---- Pulido movil/tablet (v0.9.0) ---- Reglas ACOTADAS a elementos concretos. No hay selectores globales (ni html, ni body, ni universal, ni canvas), por lo que no afectan al recorrido inmersivo ni al WebGL. */ /* 1) Campos >=16px en movil: evita el zoom automatico de iOS al enfocar. */ @media (max-width:767px){ .field input, .field select, .field textarea{ font-size:16px; } } /* 2) Areas seguras de iPhone (notch / barra de gestos) para los flotantes. */ #wa-float{ right:max(2.2vmin, env(safe-area-inset-right, 0px)); bottom:max(2.2vmin, calc(env(safe-area-inset-bottom, 0px) + 14px)); } #music-toggle{ bottom:max(2.2vmin, calc(env(safe-area-inset-bottom, 0px) + 14px)); } /* 3) Capacidades a 2 columnas en tablet (a 4 quedaban muy estrechas). */ @media (min-width:768px) and (max-width:1024px){ .ig-hero__caps{ grid-template-columns:repeat(2, 1fr); } } /* ============================================================ LEGIBILIDAD EN MOVIL (v0.10.0) El sitio dimensiona la tipografia en vmin/vw. En escritorio 1vmin = 9px, pero en un movil de 390x844 pasa a 3.9px, asi que muchos textos caian a 5-8px (ilegibles). Aqui se ponen SUELOS en px con max(), solo por debajo de 768px. Escritorio y tablet no se tocan: alli gana siempre el valor vmin/vw. No se modifica ninguna geometria 3D (transform, perspective, camara). ============================================================ */ @media (max-width:767px){ /* --- Recorrido: tarjeta 1 (hero) --- */ #card1 .hero-head h1{ font-size:clamp(1.35rem, 6.4vw, 2.1rem); max-width:88%; } .hero-card .lead{ font-size:max(14px, 1.9vmin); } /* --- Recorrido: tarjetas de servicios --- */ .svc-url{ font-size:max(11px, 1.5vmin); } .svc-pill .lbl small{ font-size:max(10px, 1.4vmin); } .svc-pill .lbl b{ font-size:max(14px, 2.2vmin); } .svc-search .q{ font-size:max(11px, 1.7vmin); white-space:normal; } .svc-bottom h3{ font-size:max(17px, 3.2vmin); } .svc-bottom p{ font-size:max(13px, 2.2vmin); } /* --- Recorrido: esfera --- */ .sphere-face .pill{ font-size:max(10px, 1.4vmin); } .sphere-face .url{ font-size:max(11px, 1.5vmin); } /* --- Recorrido: CTA superpuesto --- */ #carousel-cta a{ font-size:max(13px, 2.1vmin); padding:max(10px,2vmin) max(18px,4.2vmin); } /* --- Bloque final del recorrido --- La camara lo deja a escala 0.4 en movil, asi que el texto se veia a 10.9px (titulo) y 5.3px (parrafo). Se compensa SOLO el tamano de letra; no se toca la escala ni la posicion. */ /* Cierre del recorrido (Presencia): título de una sola frase, ya no las 2 líneas cortas ("Tu desafío" / "nuestra próxima solución") que pedían 15vw. */ #cta-block h2{ font-size:7.5vw; max-width:92%; line-height:1.15; } #cta-block p{ font-size:3.8vw; max-width:92%; line-height:1.4; } /* --- Esfera: titulo "personas/tecnologia" se superponia con el parrafo --- En escritorio, .sphere-h-bot (esquina inferior derecha) y .sphere-body (esquina inferior izquierda) conviven lado a lado porque hay ancho de sobra. En movil, journey.js (GEO_TABLE.mobile) ensancha .sphere-body a 82vmin (casi todo el ancho) para que el parrafo siga siendo legible, pero nunca se reubico .sphere-h-bot: ambos quedaban anclados casi al mismo "bottom" y el titulo caia literalmente encima del parrafo. Fix: subir .sphere-h-bot bastante mas arriba en movil para que quede SOBRE el parrafo (apilados verticalmente) en vez de intentar compartir la misma franja horizontal. Verificado sin solape en 320/375/430px de ancho. */ .sphere-h-bot{ bottom:65vmin; } .sphere-body{ bottom:4vmin; } /* --- "Conectamos" (.sphere-h-top) quedaba detras del header fijo --- Mismo problema que #pf-heading de Casos de exito (ver mas arriba): en escritorio left:4vmin/top:4vmin cae debajo del header con margen de sobra, pero en movil el header ocupa casi ese mismo rincon superior izquierdo (logo + nav), tapando casi todo el texto salvo "Co". */ .sphere-h-top{ top:max(64px, 4vmin); } /* --- Casos de exito (fuera del 3D) --- */ /* El header fijo (#site-header) queda por encima (z-index:100) del panel pineado de esta seccion (z-index:40): sin este ajuste, #pf-heading (top:3vmin en escritorio) queda oculto detras del pill de navegacion durante todo el scroll-jack en movil. */ #casos-de-exito{ padding-top:max(112px, 9vmin); } #pf-heading{ font-size:max(20px, 5vmin); top:max(64px, 3vmin); } .case-card{ width:88vw; padding:max(16px, 3.5vmin); } .case-tag{ font-size:max(10px, 1.6vmin); } .case-name{ font-size:max(16px, 3.4vmin); } .case-actions{ gap:max(8px, 1.4vmin); } .case-actions a{ font-size:max(12px, 1.9vmin); padding:max(9px,1.4vmin) max(14px,2.4vmin); } .case-logo-zone{ padding:max(24px, 8vmin); } .case-logo-zone .logo-pad{ padding:max(16px, 5vmin); } /* --- Microetiqueta del hero --- */ .ig-hero__eyebrow{ font-size:max(11px, 1.6vmin); } }