/* ══════════════════════ TIPOGRAFIAS ══════════════════════ Alojadas aqui, no en Google Fonts. Antes la web pedia las fuentes a fonts.googleapis.com y fonts.gstatic.com, con lo que Google recibia la IP de cada visitante: un tercero que habia que declarar y dos conexiones extra antes de poder pintar texto. Ahora salen del mismo servidor. Son fuentes VARIABLES (font-weight: 400 700 en una sola declaracion), asi que un unico archivo cubre todos los pesos en vez de uno por peso. Los `unicode-range` son los que devuelve Google, copiados tal cual: gracias a ellos el navegador solo descarga el subconjunto que la pagina usa. En una web en espanol los «-ext» no llegan a pedirse nunca. font-display: swap — el texto se ve desde el primer momento con la tipografia del sistema y cambia cuando llega la definitiva. Nunca hay texto invisible esperando. Licencias SIL OFL 1.1 en assets/fuentes/. No se borran: la licencia obliga. */ /* Inter — latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fuentes/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter — latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fuentes/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Space Grotesk — latin-ext */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fuentes/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Space Grotesk — latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fuentes/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #07080F; --bg2: #0C1019; --bg3: #111827; --card: rgba(15, 23, 42, 0.85); --border: rgba(56, 189, 248, 0.14); --primary: #2563EB; --accent: #38BDF8; --grad: linear-gradient(135deg, #1D4ED8, #38BDF8); --grad-r: linear-gradient(135deg, #38BDF8, #1D4ED8); --text: #F0F4F8; --text2: #CBD5E1; --muted: #64748B; --green: #10B981; --r: 16px; --r-sm: 8px; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; } h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; line-height: 1.15; } a { color: inherit; text-decoration: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .95rem; cursor: pointer; border: none; transition: all .25s ease; } .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 4px 20px rgba(37,99,235,.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(37,99,235,.5); } .btn-outline { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); } .btn-outline:hover { background: rgba(255,255,255,.07); border-color: var(--accent); color: var(--accent); } /* ── ANIMATIONS ── */ .reveal { opacity:0; transform:translateY(32px); transition:opacity .75s ease, transform .75s ease; } .reveal-left { opacity:0; transform:translateX(-44px); transition:opacity .75s ease, transform .75s ease; } .reveal-right { opacity:0; transform:translateX(44px); transition:opacity .75s ease, transform .75s ease; } .reveal-scale { opacity:0; transform:scale(.92); transition:opacity .65s ease, transform .65s ease; } .reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { opacity:1; transform:none; } /* ── NAV ── */ nav { position: fixed; top:0; left:0; right:0; z-index:1000; transition: all .3s ease; } nav.scrolled { background: rgba(7,8,15,.9); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .nav-inner { max-width:1200px; margin:0 auto; padding:0 28px; height:70px; display:flex; align-items:center; justify-content:space-between; } .nav-logo { display:flex; align-items:center; gap:10px; } .nav-logo-icon { width:36px; height:36px; background:var(--grad); border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:.8rem; color:#fff; } .nav-logo-name { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; } .nav-logo-name span { color:var(--accent); } .nav-links { display:flex; align-items:center; gap:4px; list-style:none; } /* Sin esto el menú "cabe" partiéndose en dos líneas, que es peor que no caber. */ .nav-links a { white-space:nowrap; } .nav-links a { padding:8px 14px; border-radius:8px; font-size:.875rem; font-weight:500; color:var(--text2); transition:all .2s; } .nav-links a:hover { color:var(--text); background:rgba(255,255,255,.06); } .nav-cta { background:var(--grad) !important; color:#fff !important; padding:9px 20px !important; border-radius:8px !important; font-weight:600 !important; } .nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; } .nav-hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:all .3s; } /* ── HERO – SCROLL VIDEO ── */ .scroll-video-hero { height:500vh; position:relative; } .scroll-video-sticky { position:sticky; top:0; height:100vh; width:100%; overflow:hidden; } #heroVideo { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; } .hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, rgba(7,8,15,.78) 0%, rgba(13,20,45,.65) 100%); } .hero-content { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; } .hero-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 18px; border-radius:100px; margin-bottom:28px; background:rgba(37,99,235,.18); border:1px solid rgba(56,189,248,.38); color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; backdrop-filter:blur(10px); } .badge-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:blink 2s infinite; } @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} } .hero-title { font-size:clamp(2.4rem,6vw,4.8rem); font-weight:800; color:#fff; max-width:800px; margin-bottom:20px; } .grad-text { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-sub { font-size:clamp(.95rem,1.8vw,1.2rem); color:rgba(255,255,255,.72); max-width:540px; margin-bottom:40px; line-height:1.75; } .hero-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .scroll-hint { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.42); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; } .scroll-arrow { width:18px; height:18px; border-right:2px solid rgba(255,255,255,.35); border-bottom:2px solid rgba(255,255,255,.35); transform:rotate(45deg); animation:bounce 2s infinite; } @keyframes bounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(6px)} } .progress-bar { position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(255,255,255,.1); z-index:3; } .progress-fill { height:100%; width:0%; background:var(--grad); transition:width .05s linear; } /* ── STRIP ── */ .strip { background:linear-gradient(90deg,#1D4ED8,#0EA5E9,#1D4ED8); background-size:200% 100%; animation:shimmer 5s linear infinite; padding:13px 24px; text-align:center; font-size:.82rem; font-weight:700; letter-spacing:.05em; color:#fff; } @keyframes shimmer { 0%{background-position:0 50%} 100%{background-position:200% 50%} } /* ── SECTIONS COMMON ── */ section { padding:120px 0; } .sec-label { display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .sec-title { font-size:clamp(1.75rem,4vw,2.9rem); font-weight:800; margin-bottom:16px; } .sec-sub { font-size:1rem; color:var(--text2); max-width:560px; line-height:1.75; } /* ── SOBRE NOSOTROS ── */ .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .about-features { margin-top:36px; display:flex; flex-direction:column; gap:14px; } .about-feat { display:flex; align-items:flex-start; gap:14px; padding:16px 20px; border-radius:var(--r-sm); background:var(--card); border:1px solid var(--border); transition:border-color .3s, transform .3s; } .about-feat:hover { border-color:rgba(56,189,248,.38); transform:translateX(5px); } .feat-icon { width:40px; height:40px; border-radius:8px; flex-shrink:0; background:rgba(37,99,235,.14); display:flex; align-items:center; justify-content:center; color:var(--accent); } .feat-body h4 { font-size:.92rem; font-weight:700; margin-bottom:2px; } .feat-body p { font-size:.82rem; color:var(--muted); } .kit-card { background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:32px; position:relative; overflow:hidden; } .kit-card::before { content:''; position:absolute; top:-80px; right:-80px; width:260px; height:260px; background:radial-gradient(circle, rgba(37,99,235,.18), transparent 70%); border-radius:50%; pointer-events:none; } .kit-logo { display:flex; align-items:center; gap:12px; margin-bottom:20px; } .kit-logo-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; } .kit-logo-title small { display:block; font-size:.72rem; color:var(--muted); font-weight:400; margin-top:1px; } .kit-desc { font-size:.88rem; color:var(--text2); line-height:1.75; margin-bottom:22px; } .kit-checks { display:flex; flex-direction:column; gap:10px; } .kit-check { display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--text2); } .check-ok { color:var(--green); flex-shrink:0; } .eu-footer { display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); font-size:.76rem; color:var(--muted); } .eu-flag { width:32px; height:22px; background:#003399; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:.55rem; color:#FFD700; letter-spacing:2px; flex-shrink:0; } /* ── SOFTWARE A MEDIDA ── */ .software-sec { background:var(--bg2); position:relative; overflow:hidden; } .software-sec::before { content:''; position:absolute; top:-250px; left:-250px; width:700px; height:700px; background:radial-gradient(circle,rgba(37,99,235,.07),transparent 70%); pointer-events:none; } .software-sec::after { content:''; position:absolute; bottom:-250px; right:-250px; width:600px; height:600px; background:radial-gradient(circle,rgba(56,189,248,.05),transparent 70%); pointer-events:none; } .sec-header { text-align:center; margin-bottom:72px; } .sec-header .sec-sub { margin:0 auto; } .sw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px; } .sw-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:28px; position:relative; overflow:hidden; transition:border-color .35s, transform .35s, box-shadow .35s; } .sw-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; } .sw-card:hover { border-color:rgba(56,189,248,.32); transform:translateY(-5px); box-shadow:0 20px 45px rgba(0,0,0,.35); } .sw-card:hover::before { transform:scaleX(1); } .sw-icon { width:48px; height:48px; border-radius:12px; margin-bottom:16px; background:rgba(37,99,235,.12); border:1px solid rgba(56,189,248,.2); display:flex; align-items:center; justify-content:center; color:var(--accent); } .sw-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; } .sw-card p { font-size:.865rem; color:var(--muted); line-height:1.65; } .tech-label { text-align:center; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; } .tech-stack { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:52px; } .tech-badge { padding:8px 18px; border-radius:8px; background:var(--card); border:1px solid var(--border); font-family:'Space Grotesk',monospace; font-size:.84rem; font-weight:600; color:var(--text2); transition:all .25s; } .tech-badge:hover { border-color:var(--accent); color:var(--accent); background:rgba(56,189,248,.05); } .sw-cta { text-align:center; } /* ── PÁGINAS WEB ── */ .web-sec { background:var(--bg); position:relative; overflow:hidden; } .web-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } .web-checks { display:flex; flex-direction:column; gap:14px; margin-top:28px; } .wc-item { display:flex; align-items:flex-start; gap:14px; } .wc-icon { width:22px; height:22px; border-radius:50%; flex-shrink:0; margin-top:1px; background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.38); display:flex; align-items:center; justify-content:center; } .wc-text strong { display:block; font-size:.92rem; font-weight:600; margin-bottom:1px; } .wc-text span { font-size:.8rem; color:var(--muted); } .web-btns { display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; } /* portfolio cards */ .portfolio-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .p-card { border-radius:var(--r); overflow:hidden; border:1px solid var(--border); background:var(--bg3); transition:transform .35s, border-color .35s, box-shadow .35s; } .p-card:hover { transform:translateY(-5px); border-color:rgba(56,189,248,.3); box-shadow:0 20px 40px rgba(0,0,0,.35); } .browser-bar { background:var(--bg2); padding:8px 12px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--border); } .bd { width:8px; height:8px; border-radius:50%; } .burl { flex:1; height:14px; background:rgba(255,255,255,.06); border-radius:4px; margin-left:6px; } .p-preview { height:110px; display:flex; align-items:center; justify-content:center; position:relative; } .p-preview svg { opacity:.55; } .p-label { padding:9px 12px; font-size:.76rem; font-weight:600; color:var(--muted); } /* ── KIT DIGITAL ── */ .kd-sec { background:var(--bg2); } .kd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .kd-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:28px; display:flex; flex-direction:column; transition:border-color .3s, transform .3s, box-shadow .3s; } .kd-card:hover { border-color:rgba(56,189,248,.3); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.28); } .kd-icon { width:46px; height:46px; border-radius:10px; margin-bottom:18px; background:rgba(37,99,235,.12); border:1px solid rgba(56,189,248,.18); display:flex; align-items:center; justify-content:center; color:var(--accent); } .kd-card h3 { font-size:1.02rem; font-weight:700; margin-bottom:8px; } .kd-card p { font-size:.865rem; color:var(--muted); line-height:1.65; flex:1; margin-bottom:20px; } .kd-price { display:flex; align-items:baseline; gap:5px; } .kd-price .from { font-size:.72rem; color:var(--muted); } .kd-price .amount { font-family:'Space Grotesk',sans-serif; font-size:1.45rem; font-weight:700; } .kd-price .sub { font-size:.7rem; color:var(--green); margin-left:4px; } /* ── CONTACTO ── */ .ct-sec { background:var(--bg); } .ct-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } .ct-form { display:flex; flex-direction:column; gap:16px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .fg { display:flex; flex-direction:column; gap:6px; } .fg label { font-size:.8rem; font-weight:600; color:var(--text2); } .fg input, .fg textarea, .fg select { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 16px; color:var(--text); font-family:'Inter',sans-serif; font-size:.9rem; transition:border-color .25s; outline:none; -webkit-appearance:none; } .fg input:focus, .fg textarea:focus, .fg select:focus { border-color:var(--accent); } .fg textarea { resize:vertical; min-height:120px; } .fg select option { background:var(--bg3); color:var(--text); } .ct-info h3 { font-size:1.45rem; font-weight:700; margin-bottom:10px; } .ct-info > p { color:var(--muted); line-height:1.75; margin-bottom:36px; } .ct-items { display:flex; flex-direction:column; gap:20px; } .ct-item { display:flex; align-items:flex-start; gap:16px; } .ct-i-icon { width:44px; height:44px; border-radius:10px; flex-shrink:0; background:rgba(37,99,235,.12); border:1px solid rgba(56,189,248,.2); display:flex; align-items:center; justify-content:center; color:var(--accent); } .ct-i-text span { font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .ct-i-text strong { display:block; font-size:.94rem; margin-top:2px; } .kit-cta-box { margin-top:36px; padding:20px; border-radius:12px; background:rgba(37,99,235,.08); border:1px solid rgba(56,189,248,.2); } .kit-cta-box p { font-size:.82rem; color:var(--muted); line-height:1.75; } .kit-cta-box strong { color:var(--accent); } /* ── LOGOS STRIP ── */ .logos-strip { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 28px; text-align: center; } .logos-strip p { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; } .logos-strip img { max-width: 100%; height: auto; opacity: .75; filter: brightness(1.15); transition: opacity .3s; margin: 0 auto; } .logos-strip img:hover { opacity: 1; } /* ── FOOTER ── */ footer { background:var(--bg2); border-top:1px solid var(--border); padding:64px 0 32px; } .ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; } .ft-brand p { font-size:.875rem; color:var(--muted); line-height:1.75; margin-top:14px; max-width:270px; } .ft-col h3, .ft-col h4 { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text2); margin-bottom:16px; } .ft-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; } .ft-col a { font-size:.875rem; color:var(--muted); transition:color .2s; } .ft-col a:hover { color:var(--accent); } .ft-bottom { border-top:1px solid var(--border); padding-top:28px; display:flex; align-items:center; justify-content:space-between; font-size:.78rem; color:var(--muted); } /* ── RESPONSIVE ── */ @media (max-width:1024px) { .sw-grid { grid-template-columns:repeat(2,1fr); } .kd-grid { grid-template-columns:repeat(2,1fr); } .ft-grid { grid-template-columns:1fr 1fr; gap:36px; } } @media (max-width:768px) { section { padding:80px 0; } .nav-links { display:none; } .nav-hamburger { display:flex; } .about-grid, .web-grid, .ct-grid { grid-template-columns:1fr; gap:48px; } .sw-grid, .kd-grid { grid-template-columns:1fr; } .portfolio-grid { grid-template-columns:1fr 1fr; } .form-row { grid-template-columns:1fr; } .ft-grid { grid-template-columns:1fr; gap:32px; } .ft-bottom { flex-direction:column; gap:8px; text-align:center; } .scroll-video-hero { height:100vh; } .scroll-video-sticky { position:relative; } } /* El menú de escritorio pasó de 5 entradas a 7 en agosto de 2026. Medido, necesita 1101 px para caber en una sola línea; por debajo de eso, hamburguesa. El valor sale de medirlo, no de elegir un punto de corte redondo. */ @media (max-width:1100px) { .nav-links { display:none; } .nav-hamburger { display:flex; } } @media (prefers-reduced-motion:reduce) { .scroll-video-hero { height:100vh; } .reveal,.reveal-left,.reveal-right,.reveal-scale { opacity:1; transform:none; transition:none; } } /* ============================================================ Páginas de contenido (servicios, FAQ, legales). Añadido en la corrección AEO de agosto de 2026. Reutiliza las variables de arriba: no introduce colores nuevos. ============================================================ */ .pagina { max-width: 860px; margin: 0 auto; padding: 120px 24px 80px; } /* La miga de pan es un