/* ========================================================================== RUBIK LABS LLC · Design System "NEON VIBRA" Paleta extraída del banner de referencia: magenta #FF02FF · amarillo #FFFF00 · cyan #00D8EC · negro #000207 ========================================================================== */ /* ---------- 1. TOKENS ---------- La web es siempre oscura: no hay tema claro ni selector. La identidad neón depende del fondo negro, así que no se ofrece una variante que la debilite. Por eso los tokens viven directo en :root y no cuelgan de [data-theme]. */ :root { /* Neones — identidad de marca */ --neon-magenta: #FF00E4; --neon-magenta-hot: #FF02FF; --neon-magenta-deep:#C11A9E; --neon-yellow: #EFFF00; --neon-yellow-hot: #FFFF00; --neon-cyan: #00D8EC; --neon-violet: #8B2BFF; /* Azul eléctrico de RUBIK GROWTH. Sale del anillo del logo de la división (#0073E0 en el núcleo, halo más claro alrededor). Se aclara a #3D8BFF para el texto: el azul del anillo puro sobre el negro del sitio queda en 3.4:1 y no llega a AA; este llega a 6:1 y sigue leyéndose como el mismo azul. */ --neon-blue: #3D8BFF; --neon-blue-hot: #0073E0; /* Glow de los textos neón. Se bajó a poco menos de la mitad de lo que era (.9/.55/.25 con radios 6/22/48): a plena intensidad el halo desbordaba las letras, ensuciaba el fondo alrededor y en los titulares de dos líneas se montaba sobre la línea de arriba. Con estos valores el neón se sigue leyendo como neón pero el texto queda limpio. */ --glow-magenta: 0 0 4px rgba(255,0,228,.5), 0 0 14px rgba(255,0,228,.26), 0 0 32px rgba(255,0,228,.12); --glow-yellow: 0 0 4px rgba(239,255,0,.46), 0 0 14px rgba(239,255,0,.24), 0 0 32px rgba(239,255,0,.1); --glow-cyan: 0 0 4px rgba(0,216,236,.46), 0 0 14px rgba(0,216,236,.24), 0 0 32px rgba(0,216,236,.1); --glow-blue: 0 0 4px rgba(61,139,255,.5), 0 0 14px rgba(61,139,255,.26), 0 0 32px rgba(61,139,255,.12); --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --radius: 14px; --radius-lg: 22px; --maxw: 1200px; --ease: cubic-bezier(.22,.61,.36,1); /* Superficies y texto (fiel al banner) */ --bg-primary: #06060C; --bg-secondary: #0D0A18; --bg-tertiary: #150F24; --surface: rgba(18,12,32,.72); --surface-solid: #110B1E; --text-primary: #FFFFFF; --text-secondary:#B9AFCE; --text-muted: #7C7191; --border: rgba(255,0,228,.22); --border-soft: rgba(255,255,255,.09); --accent: var(--neon-magenta); --accent-hover: var(--neon-magenta-hot); --accent-text: #FFFFFF; --danger: #FF4D6D; --success: #2BFF88; --warning: var(--neon-yellow); --shadow: rgba(0,0,0,.6); --grid-line: rgba(255,0,228,.13); --ripple-color: rgba(255,255,255,.35); } /* ---------- 2. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; -moz-user-select: text; user-select: text; } html { scroll-behavior: smooth; /* Le avisa al navegador que la UI nativa (scrollbars, autocompletado de formularios, controles de fecha) también tiene que renderizarse oscura. */ color-scheme: dark; } body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; } /* height:auto es obligatorio: los atributos width/height del HTML entran como hint de presentación y, si el CSS solo pisa el ancho, la imagen se estira. */ img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } button { cursor: pointer; font-family: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 600; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- 3. TIPOGRAFÍA DE MARCA ---------- */ .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; /* .86 no dejaba lugar a los acentos de las mayúsculas (Í, É, Á), que en titulares de dos líneas se montaban sobre la línea anterior */ line-height: .93; letter-spacing: .005em; -webkit-font-smoothing: antialiased; } .label-cond { font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; line-height: 1.15; } .eyebrow { font-family: var(--font-cond); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--neon-magenta); text-shadow: var(--glow-magenta); } .txt-yellow { color: var(--neon-yellow); text-shadow: var(--glow-yellow); } .txt-magenta{ color: var(--neon-magenta); text-shadow: var(--glow-magenta); } .txt-cyan { color: var(--neon-cyan); text-shadow: var(--glow-cyan); } .txt-blue { color: var(--neon-blue); text-shadow: var(--glow-blue); } /* Caja magenta sólida detrás del texto (como "APPS & SOFTWARE" del banner) */ .box-magenta { display: inline-block; background: var(--neon-magenta-deep); color: #fff; padding: .18em .5em .24em; box-shadow: var(--glow-magenta); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } /* Nota: acá había una textura grunge con ::after + mix-blend-mode que imitaba el desgaste del banner. Se quitó porque el pseudo-elemento cubre TODA la caja del titular (no solo las letras) y sobre los halos del fondo se veía como un recuadro gris translúcido. El peso tipográfico y el glow neón ya sostienen la estética. Para recuperar el desgaste habría que enmascarar el ruido al texto con background-clip:text, lo que obliga a resignar el color y el glow por línea. */ /* ---------- 4. FONDO AMBIENTE (circuitos + grilla + halos) ---------- */ .bg-fx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* fallback de inset para Safari <14.1 */ inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-fx .circuit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23FF00E4' stroke-width='1' opacity='.34'%3E%3Cpath d='M0 40h60l18 18h72M260 88h-54l-20-20h-58'/%3E%3Cpath d='M40 260v-62l20-20v-40M212 0v54l-18 18v66l22 22h44'/%3E%3Cpath d='M96 260v-46l24-24h50'/%3E%3C/g%3E%3Cg fill='%2300D8EC' opacity='.4'%3E%3Ccircle cx='60' cy='40' r='2.6'/%3E%3Ccircle cx='206' cy='88' r='2.6'/%3E%3Ccircle cx='170' cy='190' r='2.6'/%3E%3C/g%3E%3Cg fill='%23EFFF00' opacity='.34'%3E%3Ccircle cx='120' cy='190' r='2.2'/%3E%3Ccircle cx='194' cy='72' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 260px 260px; } /* Piso en perspectiva (como el grid del banner) */ .bg-fx .floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 62vh; background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 84px), repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 60px); transform: perspective(340px) rotateX(64deg); transform-origin: bottom center; mask-image: linear-gradient(to top, #000 0%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%); } .bg-fx .halo { position: absolute; border-radius: 50%; filter: blur(90px); } .bg-fx .halo-1 { width: 46vw; height: 46vw; top: -14vw; left: -10vw; background: rgba(255,0,228,.30); } .bg-fx .halo-2 { width: 38vw; height: 38vw; top: 32vh; right: -12vw; background: rgba(139,43,255,.26); } .bg-fx .halo-3 { width: 30vw; height: 30vw; bottom: 4vh; left: 24vw; background: rgba(0,216,236,.14); } /* Barras diagonales amarillas (detalle superior derecho del banner) */ .stripes { width: 62px; height: 16px; background: repeating-linear-gradient(115deg, var(--neon-yellow) 0 6px, transparent 6px 13px); filter: drop-shadow(0 0 6px rgba(239,255,0,0.435)); flex-shrink: 0; } /* ---------- 5. LAYOUT ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } .section { position: relative; z-index: 1; padding: 5.5rem 0; } .section-tight { padding: 3.5rem 0; } main { position: relative; z-index: 1; } .section-head { margin-bottom: 3rem; max-width: 720px; } .section-head h2 { font-family: var(--font-display); font-size: clamp(2.1rem, 6vw, 3.6rem); text-transform: uppercase; /* .92 dejaba el glow de una línea derramándose sobre la siguiente */ line-height: .99; margin: .5rem 0 .9rem; } .section-head p { color: var(--text-secondary); font-size: 1.02rem; } /* Composición asimétrica: la grilla nunca es pareja */ .grid-asym { display: grid; gap: 1.25rem; } @media (min-width: 900px) { .grid-asym-7-5 { grid-template-columns: 7fr 5fr; } .grid-asym-5-7 { grid-template-columns: 5fr 7fr; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } } @media (max-width: 899px) { .grid-3, .grid-4 { display: grid; grid-template-columns: 1fr; gap: 1rem; } } /* ---------- 6. MARCO NEÓN (base de todos los componentes) ---------- */ .neon-frame { position: relative; border: 2px solid var(--neon-magenta); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px rgba(255,0,228,0.104), 0 0 18px rgba(255,0,228,0.244), inset 0 0 22px rgba(255,0,228,.12); backdrop-filter: blur(6px); } .neon-frame--yellow { border-color: var(--neon-yellow); box-shadow: 0 0 0 1px rgba(239,255,0,0.104), 0 0 18px rgba(239,255,0,0.22), inset 0 0 22px rgba(239,255,0,.10); } .neon-frame--cyan { border-color: var(--neon-cyan); box-shadow: 0 0 0 1px rgba(0,216,236,0.104), 0 0 18px rgba(0,216,236,0.209), inset 0 0 22px rgba(0,216,236,.10); } .neon-frame--blue { border-color: var(--neon-blue); box-shadow: 0 0 0 1px rgba(61,139,255,0.104), 0 0 18px rgba(61,139,255,0.209), inset 0 0 22px rgba(61,139,255,.10); } /* ---------- 7. BOTONES ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px; padding: .85rem 1.9rem; border: 2px solid transparent; border-radius: 999px; font-family: var(--font-cond); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; overflow: hidden; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .btn:active { transform: scale(.97); } .btn i, .btn svg { width: 19px; height: 19px; flex-shrink: 0; } /* Los halos de los botones bajaron junto con los de los textos. El reposo quedó cerca de la mitad y el hover sigue siendo claramente más intenso que el reposo: la diferencia entre los dos estados es lo que hace que el botón se sienta vivo, así que se conservó el salto aunque los dos sean más suaves. */ .btn-primary { background: var(--neon-magenta); color: #fff; border-color: var(--neon-magenta-hot); box-shadow: 0 0 16px rgba(255,0,228,0.348), 0 6px 22px rgba(255,0,228,0.162); } .btn-primary:hover { background: var(--neon-magenta-hot); box-shadow: 0 0 26px rgba(255,0,228,0.493), 0 8px 30px rgba(255,0,228,0.232); } .btn-yellow { background: var(--neon-yellow); color: #0B0812; border-color: var(--neon-yellow-hot); box-shadow: 0 0 16px rgba(239,255,0,0.319), 0 6px 22px rgba(239,255,0,0.128); } .btn-yellow:hover { box-shadow: 0 0 26px rgba(239,255,0,0.464), 0 8px 30px rgba(239,255,0,0.197); } /* Contorno neón, relleno transparente — el CTA grande del banner */ .btn-outline { background: transparent; color: var(--text-primary); border-color: var(--neon-magenta); box-shadow: 0 0 14px rgba(255,0,228,0.261), inset 0 0 14px rgba(255,0,228,0.093); } .btn-outline:hover { border-color: var(--neon-magenta-hot); box-shadow: 0 0 24px rgba(255,0,228,0.406), inset 0 0 20px rgba(255,0,228,0.139); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-soft); } .btn-ghost:hover { color: var(--text-primary); border-color: var(--accent); } .btn-block { width: 100%; } .btn-lg { min-height: 66px; font-size: 21px; padding: 1rem 2.4rem; } /* CTA WhatsApp gigante (réplica del bloque inferior del banner) */ .cta-whatsapp { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; padding: 1.35rem 1.75rem; border: 2px solid var(--neon-magenta); border-radius: var(--radius-lg); background: rgba(10,6,20,.6); box-shadow: 0 0 22px rgba(255,0,228,0.29), inset 0 0 26px rgba(255,0,228,0.081); transition: box-shadow .25s var(--ease), transform .18s var(--ease); } .cta-whatsapp:hover { box-shadow: 0 0 36px rgba(255,0,228,0.464), inset 0 0 32px rgba(255,0,228,0.116); transform: translateY(-2px); } .cta-whatsapp .wa-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--neon-yellow); display: flex; align-items: center; justify-content: center; color: var(--neon-yellow); box-shadow: var(--glow-yellow); } .cta-whatsapp .wa-icon svg { width: 28px; height: 28px; } .cta-whatsapp .wa-text { font-family: var(--font-display); font-size: clamp(1.3rem, 4.4vw, 2.1rem); line-height: .95; text-transform: uppercase; color: #fff; } .cta-whatsapp .wa-text span { display: block; color: var(--neon-yellow); text-shadow: var(--glow-yellow); } /* Ripple */ .ripple { position: relative; overflow: hidden; } .ripple-wave { position: absolute; border-radius: 50%; background: var(--ripple-color); transform: scale(0); animation: ripple-anim .6s linear; pointer-events: none; } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } /* ---------- 8. HEADER ---------- */ .site-header { position: sticky; top: 0; z-index: 900; border-bottom: 1px solid var(--border-soft); background: var(--bg-primary); /* fallback sólido si no hay color-mix */ background: color-mix(in srgb, var(--bg-primary) 82%, transparent); backdrop-filter: blur(14px); } .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon-magenta), var(--neon-yellow), transparent); opacity: .7; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; } .brand { display: flex; align-items: center; gap: .7rem; } /* Emblema circular real de Rubik Labs. El alto va fijo (no auto) porque es cuadrado y así no depende de los atributos width/height del HTML. */ .brand-mark { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; filter: drop-shadow(0 0 7px rgba(0,216,236,0.29)); } .brand-name { font-family: var(--font-display); font-size: 22px; line-height: .82; text-transform: uppercase; color: var(--text-primary); } .brand-name small { display: block; font-family: var(--font-cond); font-size: 11px; font-weight: 600; letter-spacing: .34em; color: var(--neon-magenta); text-shadow: var(--glow-magenta); } .nav-desktop { display: none; align-items: center; gap: .3rem; } @media (min-width: 1000px) { .nav-desktop { display: flex; } } .nav-link { position: relative; padding: .5rem .9rem; font-family: var(--font-cond); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); border-radius: 8px; transition: color .2s var(--ease); } .nav-link:hover { color: var(--text-primary); } .nav-link.active { color: var(--neon-yellow); text-shadow: var(--glow-yellow); } .nav-link.active::after { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: 2px; height: 2px; background: var(--neon-yellow); box-shadow: var(--glow-yellow); } .header-actions { display: flex; align-items: center; gap: .5rem; } .icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-soft); border-radius: 12px; background: transparent; color: var(--text-secondary); transition: all .2s var(--ease); } .icon-btn:hover { color: var(--neon-magenta); border-color: var(--neon-magenta); box-shadow: 0 0 12px rgba(255,0,228,0.203); } .icon-btn i { width: 20px; height: 20px; } /* La hamburguesa solo hace falta en tablet: en desktop está el nav completo y en mobile (≤768px) el acceso a todo está en el "Ver más" del footer fijo. */ .nav-toggle { display: flex; } @media (min-width: 1000px), (max-width: 768px) { .nav-toggle { display: none; } } /* ---------- 9. HERO ---------- */ .hero { position: relative; z-index: 1; padding: 3rem 0 4.5rem; overflow: hidden; } /* Mobile: una columna en el orden titular -> arte -> texto y CTAs. El arte va pegado al titular porque es lo que sostiene el impacto; antes quedaba al final, después de toda la bajada. */ .hero-grid { display: grid; gap: 2rem; align-items: center; } .hero-pitch { display: block; } /* Desktop: dos columnas. El arte ocupa la columna derecha completa y el texto se reparte arriba y abajo en la izquierda. */ @media (min-width: 1000px) { .hero { padding: 4.5rem 0 6rem; } .hero-grid { grid-template-columns: 1.08fr .92fr; grid-template-areas: "copy art" "pitch art"; align-content: center; gap: 0 2.5rem; } .hero-copy { grid-area: copy; } .hero-art { grid-area: art; align-self: center; } .hero-pitch { grid-area: pitch; } } .hero-eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } /* Filete que ocupa lo que sobra de la fila: sin él, el eyebrow terminaba a un tercio del ancho y el resto quedaba en blanco. */ .eyebrow-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--neon-magenta), transparent); opacity: .6; } .hero-title { font-family: var(--font-display); text-transform: uppercase; /* .82 apretaba tanto que el glow de REALIDAD se montaba sobre APP */ line-height: .9; margin-bottom: 1.5rem; } /* En desktop las tres líneas quedaban pegadas: medido sobre el render, entre el pie de APP y el techo de REALIDAD había 1 px. Pasa porque con line-height .9 la caja de línea es más chica que el cuerpo de la Anton, así que a 152 px de APP las cajas se solapan. En mobile no se toca: ahí el titular es un póster que tiene que llenar el ancho y el apretado es parte del efecto. */ @media (min-width: 1000px) { .hero-title { line-height: .98; } .hero-title .l2 { margin-top: .06em; } .hero-title .l3 { margin-top: .12em; } } /* Escala de póster: los coeficientes vw son altos a propósito para que en mobile el titular llene el ancho como en el banner (antes ocupaba el 40% de la columna y dejaba media pantalla vacía). En pantallas grandes no cambia nada: el tope en rem del clamp entra mucho antes. */ /* El tamaño para teléfonos NO se define acá sino en el bloque mobile del final: estos coeficientes vw solo entran por debajo de los ~450px de ancho (más arriba manda el tope en rem del clamp), o sea siempre dentro de mobile, y allá se los pisa con una fórmula que además mira el alto de la pantalla. */ .hero-title .l1 { display: block; font-size: clamp(1.6rem, 10.2vw, 3.1rem); color: var(--text-primary); letter-spacing: .01em; } .hero-title .l2 { display: block; font-size: clamp(4.6rem, 32vw, 9.5rem); color: var(--text-primary); text-shadow: 0 0 30px rgba(255,255,255,.28); } .hero-title .l3 { display: block; font-size: clamp(2.6rem, 19vw, 5.7rem); color: var(--neon-yellow); text-shadow: var(--glow-yellow); } .hero-sub { margin-bottom: 2rem; } .hero-sub .line1 { font-family: var(--font-cond); font-size: clamp(1rem, 2.6vw, 1.35rem); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--text-primary); margin-bottom: .4rem; } .hero-sub .line2 { font-family: var(--font-display); font-size: clamp(1.35rem, 7vw, 2.1rem); text-transform: uppercase; } .hero-lead { color: var(--text-secondary); font-size: 1.05rem; max-width: 46ch; margin-bottom: 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; } /* Lista de features del hero (icono neón + label + regla magenta). En desktop va en dos columnas: apilada empujaba el hero muy por debajo del pliegue y dejaba la regla magenta estirada a lo ancho de toda la columna. */ .feature-list { margin-top: 2.75rem; display: grid; gap: 1.1rem; max-width: 480px; } @media (min-width: 1000px) { .feature-list { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; max-width: none; } } .feature-row { display: flex; align-items: center; gap: 1.1rem; } .feature-ico { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--neon-magenta); border-radius: 14px; color: var(--neon-yellow); box-shadow: 0 0 14px rgba(255,0,228,0.261), inset 0 0 14px rgba(255,0,228,0.081); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .feature-ico i { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(239,255,0,0.406)); } .feature-row:hover .feature-ico { transform: translateY(-3px); box-shadow: 0 0 24px rgba(255,0,228,0.406), inset 0 0 18px rgba(255,0,228,0.116); } .feature-txt { font-family: var(--font-cond); font-size: 1.12rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.12; color: var(--text-primary); padding-bottom: .45rem; border-bottom: 2px solid var(--neon-magenta); box-shadow: 0 1px 10px -4px var(--neon-magenta); flex: 1; } /* Arte del hero: el personaje dentro de un marco neón tipo teléfono. El marco envuelve la imagen (antes iba detrás y quedaba tapado, porque el arte tiene fondo negro sólido). */ .hero-art { position: relative; display: flex; justify-content: center; align-items: center; padding: 0 0 1.5rem; } /* Sin borde propio: la ilustración YA trae dibujado su marco neón de teléfono. Agregarle uno por CSS daba dos marcos anidados. Queda solo el resplandor magenta que la despega del fondo. */ .hero-frame { position: relative; z-index: 2; width: 100%; max-width: 400px; border-radius: 26px; /* El anillo de 1px define el canto para que no parezca un rectángulo pegado; es demasiado fino para leerse como un segundo marco. */ box-shadow: 0 0 0 1px rgba(255,0,228,0.162), 0 0 38px rgba(255,0,228,0.22), 0 24px 55px rgba(0,0,0,.55); } .hero-img { width: 100%; height: auto; /* imprescindible: sin esto el atributo height la estira */ border-radius: 26px; display: block; } /* Tarjeta flotante "VENDE MÁS" — pisa la esquina del marco, como en el banner */ .float-card { position: absolute; z-index: 3; right: -16px; bottom: 34px; padding: .9rem 1.1rem; border: 2px solid var(--neon-yellow); border-radius: 14px; background: rgba(8,5,16,.85); box-shadow: 0 0 20px rgba(239,255,0,0.29), inset 0 0 18px rgba(239,255,0,.1); font-family: var(--font-display); font-size: clamp(.92rem, 2.4vw, 1.15rem); line-height: 1.05; text-transform: uppercase; text-align: center; color: #fff; animation: float-y 5s ease-in-out infinite; } .float-card em { font-style: normal; display: block; color: var(--neon-yellow); text-shadow: var(--glow-yellow); } @keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ---------- 10. MARQUEE DE STACK ---------- */ .marquee { position: relative; z-index: 1; overflow: hidden; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: var(--bg-secondary); padding: .9rem 0; } .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-item { display: flex; align-items: center; gap: .6rem; padding: 0 1.6rem; font-family: var(--font-cond); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-secondary); white-space: nowrap; } .marquee-item::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--neon-magenta); box-shadow: var(--glow-magenta); } .marquee-item:nth-child(3n)::before { background: var(--neon-yellow); box-shadow: var(--glow-yellow); } .marquee-item:nth-child(3n+1)::before { background: var(--neon-cyan); box-shadow: var(--glow-cyan); } /* ---------- 11. CARDS DE SERVICIO ---------- */ .card { position: relative; padding: 1.75rem 1.5rem; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--neon-magenta), var(--neon-yellow)); opacity: 0; transition: opacity .3s var(--ease); } .card:hover { transform: translateY(-6px); border-color: var(--neon-magenta); box-shadow: 0 0 24px rgba(255,0,228,0.203), 0 18px 40px rgba(0,0,0,.4); } .card:hover::before { opacity: 1; } .card-ico { width: 52px; height: 52px; margin-bottom: 1.1rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--neon-magenta); border-radius: 13px; color: var(--neon-yellow); box-shadow: 0 0 12px rgba(255,0,228,0.232), inset 0 0 12px rgba(255,0,228,.12); } .card-ico i { width: 24px; height: 24px; } .card h3 { font-family: var(--font-cond); font-size: 1.32rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; color: var(--text-primary); } .card p { color: var(--text-secondary); font-size: .95rem; } .card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; } .tag { padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-cond); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); } /* Card destacada, rompe la grilla */ .card-feature { grid-column: span 1; } @media (min-width: 900px) { .card-feature { grid-column: span 2; display: flex; gap: 1.75rem; align-items: flex-start; } .card-feature .card-ico { margin-bottom: 0; } } /* ---------- 12. PROCESO (timeline) ---------- */ .steps { display: grid; gap: 1rem; counter-reset: step; } @media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; padding: 1.5rem 1.25rem 1.25rem; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); transition: border-color .3s var(--ease), transform .3s var(--ease); } .step:hover { border-color: var(--neon-yellow); transform: translateY(-4px); } .step-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--neon-magenta); text-stroke: 2px var(--neon-magenta); margin-bottom: .6rem; } .step h4 { font-family: var(--font-cond); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; } .step p { color: var(--text-secondary); font-size: .92rem; } /* ---------- 13. FORMULARIO ---------- */ .form-grid { display: grid; gap: 1rem; } @media (min-width: 700px) { .form-grid .col-2 { grid-column: span 2; } .form-grid { grid-template-columns: 1fr 1fr; } } .field label { display: block; margin-bottom: .4rem; font-family: var(--font-cond); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); } .field label .req { color: var(--neon-magenta); } .field input, .field textarea, .field select { width: 100%; padding: .85rem 1rem; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--neon-magenta); box-shadow: 0 0 0 3px rgba(255,0,228,0.093), 0 0 14px rgba(255,0,228,0.162); } .field input::placeholder, .field textarea::placeholder { color: var(--text-muted); } .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); } .field .err { display: none; margin-top: .35rem; font-size: 12px; color: var(--danger); } .field.has-error .err { display: block; } .chip-group { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { padding: .5rem 1rem; border: 1px solid var(--border-soft); border-radius: 999px; background: transparent; color: var(--text-secondary); font-family: var(--font-cond); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; transition: all .2s var(--ease); } .chip[aria-pressed="true"] { border-color: var(--neon-magenta); color: var(--text-primary); background: rgba(255,0,228,.12); box-shadow: 0 0 12px rgba(255,0,228,0.174); } /* Password con ojo */ .password-field { position: relative; } .password-field input { padding-right: 3rem; } .toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; } .toggle-password i { width: 19px; height: 19px; } /* ---------- 14. ESTADOS ---------- */ .empty-state, .error-state { text-align: center; padding: 3.5rem 1.5rem; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface); } .empty-icon { color: var(--neon-magenta); margin-bottom: 1rem; } .empty-icon i { width: 42px; height: 42px; } .empty-state h3, .error-state h3 { font-family: var(--font-cond); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; } .empty-state p, .error-state p { color: var(--text-secondary); margin-bottom: 1.25rem; } .skeleton { border-radius: 10px; background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } @keyframes shimmer { to { background-position: -200% 0; } } /* ---------- 15. TOAST ---------- */ .toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(10px); z-index: 9999; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 2rem); padding: .8rem 1.3rem; border-radius: 12px; font-family: var(--font-cond); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: 0; pointer-events: none; animation: toast-in .3s var(--ease) forwards; } .toast i { width: 18px; height: 18px; flex-shrink: 0; } @keyframes toast-in { to { opacity: 1; transform: translateX(-50%) translateY(0); } } .toast-error { background: var(--danger); color: #fff; box-shadow: 0 0 20px rgba(255,77,109,.5); } .toast-success { background: var(--success); color: #06060C; box-shadow: 0 0 20px rgba(43,255,136,.45); } .toast-warning { background: var(--warning); color: #06060C; box-shadow: var(--glow-yellow); } /* ---------- 16. MODAL ---------- */ .modal-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 1000; background: rgba(4,2,10,.78); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fade-in .2s var(--ease); } @keyframes fade-in { from { opacity: 0; } } .modal { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 90vh; border: 2px solid var(--neon-magenta); border-radius: var(--radius-lg); background: var(--surface-solid); box-shadow: 0 0 34px rgba(255,0,228,0.232), 0 24px 60px rgba(0,0,0,.6); animation: modal-in .28s var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.98); } } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border-soft); } .modal-header h3 { font-family: var(--font-cond); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .modal-body { flex: 1; overflow-y: auto; padding: 1.5rem; } .modal-footer { display: flex; gap: .75rem; justify-content: flex-end; padding: 1rem 1.5rem; border-top: 1px solid var(--border-soft); background: var(--surface-solid); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } @media (max-width: 768px) { .modal-wrapper { align-items: flex-end; padding: 0; } .modal { max-width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none; } .modal-footer { border-radius: 0; } .modal-footer .btn { flex: 1; } } /* Grid del menú "Ver más" */ .menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.1rem .5rem; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-cond); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; text-align: center; transition: all .2s var(--ease); } .menu-item i { width: 24px; height: 24px; color: var(--neon-magenta); } .menu-item:hover, .menu-item.active { border-color: var(--neon-magenta); box-shadow: 0 0 14px rgba(255,0,228,0.174); } /* ---------- 17. FLOTANTES · WHATSAPP + LUZIO ---------- */ .wa-float-cta { position: fixed; z-index: 996; right: 16px; bottom: 160px; min-height: 44px; display: inline-flex; align-items: center; gap: .55rem; padding: .65rem .9rem; border: 1px solid var(--success); border-radius: 999px; background: rgba(8, 42, 27, .96); color: #fff; box-shadow: 0 0 8px rgba(43,255,136,.42), 0 0 24px rgba(43,255,136,.2), 0 8px 24px rgba(0,0,0,.45); font-family: var(--font-cond); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; transition: transform .2s var(--ease), box-shadow .25s var(--ease), opacity .2s var(--ease); } .wa-float-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 0 12px rgba(43,255,136,.58), 0 0 32px rgba(43,255,136,.3), 0 10px 26px rgba(0,0,0,.5); } .wa-float-cta i, .wa-float-cta svg { width: 19px; height: 19px; color: var(--success); flex-shrink: 0; } .wa-float-cta.is-chat-open { opacity: 0; pointer-events: none; transform: translateY(8px); } .float-btn { position: fixed; z-index: 998; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .2s var(--ease), box-shadow .25s var(--ease); } .float-btn:hover { transform: scale(1.07); } .float-btn svg, .float-btn i { width: 27px; height: 27px; } #ai-float-btn { right: 16px; bottom: 88px; background: var(--neon-magenta); color: #fff; border-color: var(--neon-magenta-hot); box-shadow: 0 0 20px rgba(255,0,228,0.377), 0 6px 22px rgba(0,0,0,.45); } #ai-float-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Anillo que late: da señal de "hay alguien" sin animar el avatar. */ .float-pulse { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--neon-magenta-hot); animation: floma-pulse 2.6s var(--ease) infinite; pointer-events: none; } @keyframes floma-pulse { 0% { transform: scale(1); opacity: .85; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .float-pulse { animation: none; opacity: 0; } } /* Burbuja de enganche */ #ai-nudge { position: fixed; z-index: 997; right: 84px; bottom: 92px; max-width: min(230px, calc(100vw - 110px)); padding: .7rem .9rem .75rem; border: 1px solid var(--neon-magenta); border-radius: 14px 14px 2px 14px; background: var(--surface-solid); box-shadow: 0 0 20px rgba(255,0,228,0.203), 0 10px 26px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); } #ai-nudge.show { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; } #ai-nudge strong { display: block; font-family: var(--font-cond); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--neon-magenta); } #ai-nudge span { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); } .ai-nudge-x { position: absolute; top: 2px; right: 6px; background: none; border: none; color: var(--text-muted); font-size: 17px; line-height: 1; padding: 2px 4px; } @media (min-width: 769px) { .wa-float-cta { bottom: 96px; } #ai-float-btn { bottom: 24px; } #ai-nudge { bottom: 30px; } } /* ---------- Panel de chat ---------- */ .chat-panel { position: fixed; z-index: 999; right: 16px; bottom: 160px; width: min(360px, calc(100vw - 32px)); max-height: min(72vh, 520px); display: none; flex-direction: column; border: 2px solid var(--neon-magenta); border-radius: var(--radius-lg); background: var(--surface-solid); box-shadow: 0 0 28px rgba(255,0,228,0.232), 0 18px 44px rgba(0,0,0,.55); overflow: hidden; } .chat-panel.open { display: flex; animation: chat-in .22s var(--ease); } @keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.97); } } @media (min-width: 769px) { .chat-panel { bottom: 96px; } } .chat-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-bottom: 1px solid var(--border-soft); background: linear-gradient(90deg, rgba(255,0,228,.16), transparent 70%); } .chat-head-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--neon-magenta); flex-shrink: 0; background: var(--bg-secondary); } .chat-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; } .chat-head-txt > span { font-family: var(--font-cond); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } /* El punto verde dice "está disponible": baja la fricción para escribir. */ .chat-head-txt small { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; margin-top: 2px; } .chat-head-txt small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); } .chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; min-height: 180px; } .chat-foot { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border-soft); } .chat-foot input { flex: 1; min-width: 0; padding: .55rem .8rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: 16px; outline: none; } .chat-foot input:focus { border-color: var(--neon-magenta); } @media (min-width: 769px) { .chat-foot input { font-size: 13px; } } .msg { padding: .55rem .8rem; border-radius: 12px; font-size: 13px; max-width: 88%; line-height: 1.5; white-space: pre-wrap; } .msg-user { background: var(--neon-magenta); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; } .msg-bot { background: var(--bg-secondary); color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 3px; } /* Puntos de "escribiendo" */ .msg-typing { display: flex; gap: 4px; align-items: center; padding: .7rem .85rem; } .msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-magenta); animation: typing-dot 1.1s infinite ease-in-out; } .msg-typing span:nth-child(2) { animation-delay: .15s; } .msg-typing span:nth-child(3) { animation-delay: .3s; } @keyframes typing-dot { 0%,60%,100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Atajos de consulta: el visitante arranca sin tener que redactar */ .chat-chips { display: none; flex-wrap: wrap; gap: .4rem; padding: 0 .75rem .5rem; } .chat-chips.show { display: flex; } .chat-chip { padding: .38rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,0,228,.07); color: var(--text-secondary); font-size: 12px; line-height: 1.3; transition: all .18s var(--ease); } .chat-chip:hover { border-color: var(--neon-magenta); color: var(--text-primary); background: rgba(255,0,228,.16); } /* Cierre comercial dentro del chat */ .chat-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; } .btn-sm { min-height: 40px; padding: .5rem 1rem; font-size: 13px; letter-spacing: .06em; } .btn-sm i, .btn-sm svg { width: 15px; height: 15px; } .chat-lead { display: flex; flex-direction: column; gap: .55rem; margin-top: .3rem; } .chat-lead label { display: flex; flex-direction: column; gap: .25rem; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); } .chat-lead input { padding: .55rem .7rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: 16px; outline: none; text-transform: none; letter-spacing: normal; } .chat-lead input:focus { border-color: var(--neon-magenta); } @media (min-width: 769px) { .chat-lead input { font-size: 13px; } } /* Error de validación del formulario de entrada al chat */ .chat-lead-error { margin: 0; padding: .45rem .65rem; border-radius: 8px; background: rgba(255,77,109,.14); border: 1px solid rgba(255,77,109,.42); color: #FFB3C1; font-size: 12px; line-height: 1.45; text-transform: none; letter-spacing: normal; } /* Campo de texto bloqueado mientras no dejó sus datos */ #ai-input:disabled, #ai-send:disabled { opacity: .45; cursor: not-allowed; } /* ---------- 18. FOOTER ---------- */ .site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border-soft); background: var(--bg-secondary); padding: 3.5rem 0 2rem; } .footer-grid { display: grid; gap: 2rem; margin-bottom: 2.5rem; } @media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .footer-col h5 { font-family: var(--font-cond); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--neon-magenta); margin-bottom: 1rem; } .footer-col li { margin-bottom: .55rem; } .footer-col a, .footer-col p { color: var(--text-secondary); font-size: .93rem; } .footer-col a:hover { color: var(--neon-yellow); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: .85rem; } /* ---------- 19. NAV MOBILE FIJA ---------- */ .app-footer-nav { display: none; } @media (max-width: 768px) { .app-footer-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; height: 64px; background: var(--bg-primary); /* fallback sólido si no hay color-mix */ background: color-mix(in srgb, var(--bg-primary) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--border-soft); padding-bottom: env(safe-area-inset-bottom); } .app-footer-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--neon-magenta), var(--neon-yellow), transparent); } .app-footer-nav a { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-family: var(--font-cond); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .app-footer-nav a i { width: 21px; height: 21px; } .app-footer-nav a.active { color: var(--neon-magenta); } .app-footer-nav a.active i { filter: drop-shadow(0 0 6px rgba(255,0,228,0.464)); } body { padding-bottom: 64px; } .section { padding: 3.5rem 0; } .container { padding: 0 1rem; } /* En mobile el header muestra solo el emblema, más grande: el logo real ya dice "RUBIK LABS" adentro, así que repetir el texto al lado era redundante y además apretaba la fila junto al botón Cotizar. En el footer el wordmark se mantiene, ahí sí hay lugar. */ .site-header .brand-mark { width: 52px; height: 52px; } /* a la par del alto del CTA */ .site-header .brand-name { display: none; } /* Con el titular a escala de póster el bloque de arriba ya llena la pantalla, así que se recorta el aire sobrante para que el arte suba y no quede un hueco muerto entre el texto y la imagen. */ .hero { padding: 1.75rem 0 3rem; } .hero-grid { gap: 1.5rem; } /* Los márgenes propios se anulan y el reparto lo hace el flex del bloque (space-evenly, más abajo). Con márgenes fijos MÁS reparto automático, el aire quedaba desparejo: sumaban los dos y cada hueco medía distinto. */ .hero-eyebrow { margin-bottom: 0; } .hero-title { margin-bottom: 0; } .hero-sub { margin-bottom: 0; } /* El titular deja de estar apretado. El line-height .9 del póster hacía que IDEA y REALIDAD casi se tocaran, y en pantalla chica eso se lee como un bloque macizo, no como tres líneas. Se afloja apenas: lo justo para que respiren sin perder la forma de póster. */ .hero-title { line-height: .95; } .hero-title .l2 { margin-top: .05em; } .hero-title .l3 { margin-top: .07em; } /* ---- Las tres líneas terminan a la misma altura ---- Medido sobre el render: con un mismo tamaño de fuente, HACEMOS TU ocupa 4.69 em de ancho, IDEA 1.585 y REALIDAD 3.436. Por eso, con los tamaños de antes, cada línea moría en un lugar distinto —56%, 59% y 71% del ancho útil— y el borde derecho quedaba dentado con un hueco grande. Los coeficientes de abajo son justamente el inverso de esos anchos: cada uno da 82.5% del ancho de pantalla, o sea ~90% de la caja de texto. Las tres líneas cierran parejas contra el margen derecho, que es como se ve un titular de póster. El segundo valor de cada min() es un techo por ALTURA. Sin él, en un teléfono angosto y bajo (un SE, por ejemplo) el titular crecería a lo ancho hasta empujar todo lo de abajo fuera de la pantalla: el ancho manda mientras haya alto de sobra, y si no lo hay, gana el alto. Las tres declaraciones son una escalera de respaldo — vw solo para navegadores sin min(), después vh, y svh para los que lo tengan. svh y no dvh: dvh cambia cuando se esconde la barra del navegador, y un titular que se reacomoda mientras scrolleás marea. */ .hero-title .l1 { font-size: 17.6vw; font-size: min(17.6vw, 8.2vh); font-size: min(17.6vw, 8.2svh); } .hero-title .l2 { font-size: 52vw; font-size: min(52vw, 24vh); font-size: min(52vw, 24svh); } .hero-title .l3 { font-size: 24vw; font-size: min(24vw, 11vh); font-size: min(24vw, 11svh); } /* ---- Primera pantalla completa ---------------------------------------- El titular se queda con TODO el primer visor y el arte arranca recién abajo. Antes la cabeza del personaje asomaba unos centímetros contra el nav de abajo: ni se veía la imagen ni se leía limpio el titular, y esa franja cortada era lo primero que uno miraba. La cuenta descuenta lo que tapa el visor: 72px de header (sticky, ocupa lugar) y 64px del nav fijo de abajo, más el aire propio del hero. dvh y no vh: en mobile, vh mide la pantalla con la barra del navegador escondida, así que con la barra a la vista el bloque queda más alto que el visor real y vuelve a asomar lo de abajo — justo lo que hay que evitar. Se deja vh primero como respaldo para los navegadores viejos. */ .hero-copy { position: relative; min-height: calc(100vh - 72px - 64px - 1.75rem); min-height: calc(100dvh - 72px - 64px - 1.75rem); display: flex; flex-direction: column; /* Repartido, no centrado. Centrado, los tres bloques quedaban pegados en un grumo en el medio con aire muerto arriba y abajo. Con space-evenly el sobrante se reparte en huecos iguales y el texto ocupa la pantalla. */ justify-content: space-evenly; /* Aire reservado para la pista, que va suelta al pie: sin esto el último renglón se le mete abajo. */ padding-bottom: 3.5rem; } /* El contenido por encima de los meteoritos. Se excluye la pista porque va absoluta y este selector, que pesa más que su propia regla, le devolvería el position: relative y la sacaría del pie. */ .hero-copy > *:not(.hero-meteoros):not(.hero-hint) { position: relative; z-index: 1; } /* ---- Pista de scroll ---- */ .hero-hint { /* Fuera del flujo, apoyada en el pie del bloque. Si fuera un hijo más del flex, su margen automático le ganaría al justify-content y el titular dejaría de estar centrado: quedaría pegado arriba. */ position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: max-content; z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem 1rem; min-height: 44px; /* objetivo táctil */ background: none; border: 0; color: var(--text-muted); font-family: var(--font-cond); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; animation: hero-hint-latido 2.4s ease-in-out infinite; } .hero-hint i { width: 18px; height: 18px; } @keyframes hero-hint-latido { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } } /* ---- Meteoritos ---- Cada uno es una raya inclinada que viaja en la dirección en la que apunta: el translateY se aplica sobre el eje YA rotado, así que la estela siempre queda atrás sola, sin tener que sincronizar dos ángulos. Solo animan transform y opacity —nada de top/left— para que el compositor las resuelva sin recalcular el layout en cada cuadro. */ .hero-meteoros { position: absolute; inset: -1.5rem -1rem; overflow: hidden; pointer-events: none; z-index: 0; } .hero-meteoros i { position: absolute; top: -120px; width: 1px; height: 90px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55)); opacity: 0; animation: meteorito 5.5s linear infinite; } /* La cabeza brillante, en la punta de avance. */ .hero-meteoros i::after { content: ''; position: absolute; bottom: -1px; left: -1px; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 1px rgba(255,255,255,.85); } /* Cada uno con su carril, su ritmo y su demora: con todos iguales se ve el patrón y deja de parecer un cielo. */ /* La inclinación va como variable y no como transform: mientras la animación corre, sus keyframes pisan cualquier transform declarado acá, así que el ángulo tiene que entrar DENTRO del keyframe. */ .hero-meteoros i:nth-child(1) { left: 8%; --giro: 16deg; animation-duration: 5.2s; animation-delay: 0s; } .hero-meteoros i:nth-child(2) { left: 24%; --giro: 19deg; animation-duration: 7.4s; animation-delay: 1.3s; } .hero-meteoros i:nth-child(3) { left: 41%; --giro: 15deg; animation-duration: 6.1s; animation-delay: 2.9s; } .hero-meteoros i:nth-child(4) { left: 57%; --giro: 21deg; animation-duration: 8.3s; animation-delay: .7s; } .hero-meteoros i:nth-child(5) { left: 72%; --giro: 17deg; animation-duration: 5.9s; animation-delay: 3.6s; } .hero-meteoros i:nth-child(6) { left: 88%; --giro: 20deg; animation-duration: 7.1s; animation-delay: 2.1s; } .hero-meteoros i:nth-child(7) { left: 33%; --giro: 18deg; animation-duration: 9.2s; animation-delay: 4.8s; } /* Dos en color de marca: el cielo queda de la casa y no genérico. */ .hero-meteoros i:nth-child(3) { background: linear-gradient(180deg, rgba(0,216,236,0), rgba(0,216,236,.6)); } .hero-meteoros i:nth-child(3)::after { background: var(--neon-cyan); box-shadow: 0 0 8px 1px rgba(0,216,236,.9); } .hero-meteoros i:nth-child(6) { background: linear-gradient(180deg, rgba(255,0,228,0), rgba(255,0,228,.55)); } .hero-meteoros i:nth-child(6)::after { background: var(--neon-magenta); box-shadow: 0 0 8px 1px rgba(255,0,228,.9); } @keyframes meteorito { 0% { transform: translateY(0) rotate(var(--giro, 18deg)); opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(115vh) rotate(var(--giro, 18deg)); opacity: 0; } } } /* Nada de esto existe en desktop: ahí el arte va al lado del titular y la pantalla nunca queda vacía. */ @media (min-width: 769px) { .hero-hint, .hero-meteoros { display: none; } } /* Quien pidió menos movimiento no ve ni meteoritos ni rebote. */ @media (prefers-reduced-motion: reduce) { .hero-meteoros { display: none; } .hero-hint { animation: none; } } /* ---------- 20. SPLASH ---------- */ /* Aparece en cada carga y no se puede saltear: se va solo cuando terminó de cargar todo. Arranca oculto y lo enciende la clase js-on, que el script del agrega antes del primer pintado — así no hay parpadeo, y si el visitante no tiene JavaScript el splash nunca aparece y no le tapa el contenido del