<!DOCTYPE html><html lang="es"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.webmanifest"><meta name="generator" content="Astro v6.1.6"><title>Paracaídas Digital | Agencia Marketing Publicidad Guatemala</title><meta name="description" content="Toda gran Visión necesita un Aterrizaje Perfecto. Saltemos juntos: queremos que el Crecimiento de tu Negocio sea nuestro próximo Caso de Éxito"><!-- Preconnect para Google Fonts --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="/_astro/Layout.BCDizgQZ.css">
<style>.project-card[data-astro-cid-r2ibkex5]:hover .project-image[data-astro-cid-r2ibkex5]{transform:scale(1.05)}
</style></head> <body class="bg-background font-display text-white overflow-x-hidden antialiased selection:bg-primary selection:text-white"> <div class="relative flex min-h-screen w-full flex-col"> <header class="sticky top-0 z-50 border-b border-primary-muted/30 bg-background/80 backdrop-blur-md"> <div class="px-6 lg:px-12 py-4 flex items-center justify-between max-w-[1440px] mx-auto w-full"> <a href="/" class="flex items-center gap-4 text-white hover:opacity-80 transition-opacity"> <img src="/images/logo-pacaidas-digital.png" alt="Logo de Paracaídas Digital" class="w-10 h-10 object-contain" width="40" height="40" decoding="sync"> <h2 class="text-white text-xl font-bold tracking-tight">PARACAÍDAS DIGITAL</h2> </a> <nav class="hidden lg:flex items-center gap-10" aria-label="Navegación principal"> <a class="text-white/80 hover:text-gold-accent text-sm font-medium transition-colors hover:underline underline-offset-4" href="/#servicios"> Servicios </a><a class="text-white/80 hover:text-gold-accent text-sm font-medium transition-colors hover:underline underline-offset-4" href="/#proyectos"> Proyectos </a><a class="text-white/80 hover:text-gold-accent text-sm font-medium transition-colors hover:underline underline-offset-4" href="/#testimonios"> Testimonios </a><a class="text-white/80 hover:text-gold-accent text-sm font-medium transition-colors hover:underline underline-offset-4" href="/#metodologia"> Metodología </a> </nav> <div class="flex items-center gap-4"> <a href="#contacto" class="items-center justify-center font-semibold transition-all duration-300 cursor-pointer bg-primary text-white hover:bg-primary-light hover:scale-105 hover:shadow-[0_0_25px_rgba(147,17,212,0.5)] active:scale-95 shadow-[0_0_15px_rgba(147,17,212,0.3)] rounded-lg h-10 px-6 text-sm hidden lg:flex"><span>Contáctanos</span></a> <button id="mobile-menu-toggle" class="lg:hidden text-white p-2 -mr-2 transition-transform duration-300" aria-label="Toggle menu" aria-expanded="false"> <div id="menu-icon-open" class="block"> <span class="material-symbols-outlined icon-3xl outlined">menu</span> </div> <div id="menu-icon-close" class="hidden"> <span class="material-symbols-outlined icon-3xl outlined">close</span> </div> </button> </div> </div> <!-- Menú móvil desplegable --> <nav id="mobile-menu" class="lg:hidden grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out overflow-hidden" inert> <div class="overflow-hidden"> <div class="px-6 pb-6 pt-2 flex flex-col gap-4"> <a class="mobile-nav-link text-white/80 hover:text-gold-accent text-base font-medium transition-colors py-2" href="/#servicios"> Servicios </a><a class="mobile-nav-link text-white/80 hover:text-gold-accent text-base font-medium transition-colors py-2" href="/#proyectos"> Proyectos </a><a class="mobile-nav-link text-white/80 hover:text-gold-accent text-base font-medium transition-colors py-2" href="/#testimonios"> Testimonios </a><a class="mobile-nav-link text-white/80 hover:text-gold-accent text-base font-medium transition-colors py-2" href="/#metodologia"> Metodología </a> <div class="pt-2"> <a href="#contacto" class="flex items-center justify-center font-semibold transition-all duration-300 cursor-pointer bg-primary text-white hover:bg-primary-light hover:scale-105 hover:shadow-[0_0_25px_rgba(147,17,212,0.5)] active:scale-95 shadow-[0_0_15px_rgba(147,17,212,0.3)] rounded-lg h-14 px-8 text-base w-full"><span>Contáctanos</span></a> </div> </div> </div> </nav> </header> <script type="module">function l(){return{toggle:document.querySelector("#mobile-menu-toggle"),menu:document.querySelector("#mobile-menu"),iconOpen:document.querySelector("#menu-icon-open"),iconClose:document.querySelector("#menu-icon-close"),navLinks:document.querySelectorAll(".mobile-nav-link")}}function a(s){const{toggle:i,menu:e,iconOpen:t,iconClose:o}=s;if(!i||!e||!t||!o)return;const n=i.getAttribute("aria-expanded")==="true";i.setAttribute("aria-expanded",String(!n)),n?e.setAttribute("inert",""):e.removeAttribute("inert"),n?(e.classList.remove("grid-rows-[1fr]"),e.classList.add("grid-rows-[0fr]")):(e.classList.remove("grid-rows-[0fr]"),e.classList.add("grid-rows-[1fr]")),t.classList.toggle("hidden",!n),t.classList.toggle("block",n),o.classList.toggle("hidden",n),o.classList.toggle("block",!n)}function r(s){const{toggle:i,menu:e,iconOpen:t,iconClose:o}=s;!i||!e||!t||!o||(i.setAttribute("aria-expanded","false"),e.setAttribute("inert",""),e.classList.remove("grid-rows-[1fr]"),e.classList.add("grid-rows-[0fr]"),t.classList.remove("hidden"),t.classList.add("block"),o.classList.remove("block"),o.classList.add("hidden"))}function d(){const s=l(),{toggle:i,navLinks:e}=s;i&&(i.addEventListener("click",()=>a(s)),e.forEach(t=>{t.addEventListener("click",o=>{o.preventDefault();const n=t.getAttribute("href");r(s),requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(n&&n.startsWith("#")){const c=document.querySelector(n);c&&c.scrollIntoView({behavior:"smooth"})}})})})}),window.addEventListener("resize",()=>{window.innerWidth>=1024&&r(s)}),document.addEventListener("keydown",t=>{t.key==="Escape"&&i.getAttribute("aria-expanded")==="true"&&r(s)}))}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",d):d();</script> <main class="flex flex-col w-full max-w-[1440px] mx-auto">  <section class="relative flex flex-col items-center justify-center px-6 lg:px-20 py-24 lg:py-40 w-full overflow-hidden"> <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-primary/20 rounded-full blur-[120px] pointer-events-none"></div> <div class="relative z-10 max-w-5xl w-full text-center flex flex-col gap-8 items-center"> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-gold-accent/30 bg-gold-accent/5"> <span class="w-1.5 h-1.5 rounded-full bg-gold-accent"></span> <span class="text-xs font-semibold tracking-widest uppercase text-gold-accent">Socio Estratégico en tu Transformación Digital</span> </div> <h1 class="text-5xl md:text-7xl lg:text-8xl font-light tracking-tight text-white leading-[1.1]">
Tecnología Avanzada. <br> <span class="font-bold bg-clip-text text-transparent bg-linear-to-r from-white via-white to-white/50">Resultados Garantizados.</span> </h1> <p class="text-lg md:text-xl text-white/60 max-w-2xl font-light leading-relaxed">
Arquitectura digital enterprise con la agilidad de una boutique. Desarrollamos ecosistemas de alto rendimiento y diseños creativos que se ajustan a las necesidades de nuestros socios.
</p> <div class="flex flex-col sm:flex-row gap-6 mt-8"> <a href="#contacto" class="flex items-center justify-center font-semibold transition-all duration-300 cursor-pointer border border-gold-accent text-gold-accent hover:bg-gold-accent hover:text-black rounded-full h-14 px-8 text-base"><span>Solicita una Consultoría Estratégica</span><span class="material-symbols-outlined icon-lg">arrow_forward</span></a> </div> <div class="flex items-center gap-8 mt-8 text-sm text-white/50"> <span class="flex items-center gap-2"> <span class="text-gold-accent font-bold">+30</span> Proyectos Exitosos
</span> <span class="w-px h-4 bg-white/20"></span> <span class="flex items-center gap-2"> <span class="text-gold-accent font-bold">+22</span> Clientes Satisfechos
</span> <span class="w-px h-4 bg-white/20"></span> <span class="flex items-center gap-2"> <span class="text-gold-accent font-bold">+12</span> Industrias de Servicios
</span> </div> </div> </section> <div class="w-full h-px bg-linear-to-r from-transparent via-primary-muted to-transparent my-10"></div> <div id="servicios"> <section id="auditoria-seo" class="group py-24 px-6 lg:px-12 border-b border-white/5 hover:bg-white/2 transition-colors duration-500"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20"> <div class="lg:col-span-5 flex flex-col justify-between h-full"> <div> <span class="text-gold-accent text-sm font-mono tracking-widest mb-4 block">01 / ARQUITECTURA DIGITAL</span> <h2 class="text-4xl md:text-5xl lg:text-6xl font-light text-white mb-4 leading-none"> Auditoría Técnica y<br> <span class="font-bold text-white">SEO</span>  </h2> </div> <div class="hidden lg:block"> <span class="material-symbols-outlined icon-6xl outlined text-gold-accent/50 group-hover:text-gold-accent transition-colors duration-500">troubleshoot</span> </div> </div> <div class="lg:col-span-7 flex flex-col gap-10"> <p class="text-xl text-white/70 font-light leading-relaxed max-w-2xl"> Diagnóstico data-driven que detecta problemas en tu ecosistema digital. Transformamos tu arquitectura actual identificando áreas de optimización y errores que afectan tu posicionamiento en Google. </p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="p-6 rounded-lg bg-primary-card/40 border border-primary-border/30 hover:border-gold-accent/30 transition-all service-card-hover"> <span class="material-symbols-outlined icon-3xl outlined text-white/50 mb-4 service-icon transition-transform duration-300">insights</span> <h3 class="text-lg font-bold text-white mb-2">Diagnóstico Detallado</h3> <p class="text-sm text-white/50">Identificamos cada error técnico con las URLs exactas para que tu equipo sepa dónde trabajar.</p> </div><div class="p-6 rounded-lg bg-primary-card/40 border border-primary-border/30 hover:border-gold-accent/30 transition-all service-card-hover"> <span class="material-symbols-outlined icon-3xl outlined text-white/50 mb-4 service-icon transition-transform duration-300">assessment</span> <h3 class="text-lg font-bold text-white mb-2">Priorización Estratégica</h3> <p class="text-sm text-white/50">Problemas organizados por urgencia para optimizar recursos trabajando primero lo crítico.</p> </div> </div>  <a class="inline-flex items-center text-gold-accent font-semibold tracking-wide hover:opacity-80 transition-opacity w-fit mt-4" href="/contacto" rel="nofollow"> SOLICITAR TU AUDITORÍA <span class="material-symbols-outlined icon-base outlined ml-2">north_east</span> </a> </div> </div> </section><section id="desarrollo-web" class="group py-24 px-6 lg:px-12 border-b border-white/5 hover:bg-white/2 transition-colors duration-500"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20"> <div class="lg:col-span-5 flex flex-col justify-between h-full"> <div> <span class="text-gold-accent text-sm font-mono tracking-widest mb-4 block">02 / INFRAESTRUCTURA</span> <h2 class="text-4xl md:text-5xl lg:text-6xl font-light text-white mb-4 leading-none"> Desarrollo Web<br> <span class="font-bold text-white">Enterprise</span>  </h2> </div> <div class="hidden lg:block"> <span class="material-symbols-outlined icon-6xl outlined text-gold-accent/50 group-hover:text-gold-accent transition-colors duration-500">hub</span> </div> </div> <div class="lg:col-span-7 flex flex-col gap-10"> <p class="text-xl text-white/70 font-light leading-relaxed max-w-2xl"> Infraestructura web de alto rendimiento optimizada para conversión y SEO técnico avanzado. Implementamos soluciones escalables con tecnología de punta y Core Web Vitals optimizados para una máxima autoridad digital. </p>  <div class="w-full h-64 relative rounded-lg overflow-hidden group/image contain-layout"> <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover/image:scale-105 will-change-transform" style="background-image: url('/images/image-1.avif')" role="img" aria-label="Arquitectura técnica web"></div> <div class="absolute inset-0 bg-background/80 group-hover/image:bg-background/60 transition-colors duration-500"></div> <div class="absolute inset-0 flex items-center justify-around px-10">  <div class="text-center"> <p class="text-3xl font-bold text-white"><3s</p> <p class="text-xs text-gold-accent uppercase tracking-widest mt-1">Carga Rápida</p> </div> <div class="w-px h-16 bg-white/20"></div> <div class="text-center"> <p class="text-3xl font-bold text-white">100%</p> <p class="text-xs text-gold-accent uppercase tracking-widest mt-1">Responsive</p> </div> <div class="w-px h-16 bg-white/20"></div> <div class="text-center"> <p class="text-3xl font-bold text-white">SEO+</p> <p class="text-xs text-gold-accent uppercase tracking-widest mt-1">Técnico</p> </div>  </div> </div> <a class="inline-flex items-center text-gold-accent font-semibold tracking-wide hover:opacity-80 transition-opacity w-fit mt-4" href="/contacto" rel="nofollow"> SOLICITAR TU PROPUESTA WEB <span class="material-symbols-outlined icon-base outlined ml-2">north_east</span> </a> </div> </div> </section><section id="diseno-visual" class="group py-24 px-6 lg:px-12 border-b border-white/5 hover:bg-white/2 transition-colors duration-500"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20"> <div class="lg:col-span-5 flex flex-col justify-between h-full"> <div> <span class="text-gold-accent text-sm font-mono tracking-widest mb-4 block">03 / IDENTIDAD</span> <h2 class="text-4xl md:text-5xl lg:text-6xl font-light text-white mb-4 leading-none"> Diseño Visual<br> <span class="font-bold text-white">Estratégico</span>  </h2> </div> <div class="hidden lg:block"> <span class="material-symbols-outlined icon-6xl outlined text-gold-accent/50 group-hover:text-gold-accent transition-colors duration-500">brush</span> </div> </div> <div class="lg:col-span-7 flex flex-col gap-10"> <p class="text-xl text-white/70 font-light leading-relaxed max-w-2xl"> Soluciones de diseño profesional que transforman la identidad visual de tu marca. Creamos experiencias visuales impactantes que mejoran tu engagement y generan una conexión emocional con tu audiencia. </p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="p-6 rounded-lg bg-primary-card/40 border border-primary-border/30 hover:border-gold-accent/30 transition-all service-card-hover"> <span class="material-symbols-outlined icon-3xl outlined text-white/50 mb-4 service-icon transition-transform duration-300">palette</span> <h3 class="text-lg font-bold text-white mb-2">Diseño de Marca</h3> <p class="text-sm text-white/50">Creamos logos, sistemas visuales y manuales de marca. Que definen tu identidad y te diferencian.</p> </div><div class="p-6 rounded-lg bg-primary-card/40 border border-primary-border/30 hover:border-gold-accent/30 transition-all service-card-hover"> <span class="material-symbols-outlined icon-3xl outlined text-white/50 mb-4 service-icon transition-transform duration-300">description</span> <h3 class="text-lg font-bold text-white mb-2">Materiales de Marca</h3> <p class="text-sm text-white/50">Diseñamos tarjetas, hojas membretadas y elementos visuales tanto digital como impreso listos para producción.</p> </div> </div>  <a class="inline-flex items-center text-gold-accent font-semibold tracking-wide hover:opacity-80 transition-opacity w-fit mt-4" href="/contacto" rel="nofollow"> SOLICITAR TU PROYECTO DE MARCA <span class="material-symbols-outlined icon-base outlined ml-2">north_east</span> </a> </div> </div> </section> </div> <section id="proyectos" class="bg-background py-24 lg:py-32" data-astro-cid-r2ibkex5> <div class="mx-auto flex max-w-[1440px] flex-col gap-12 px-6 lg:px-12" data-astro-cid-r2ibkex5> <div class="flex flex-col justify-between gap-6 md:flex-row md:items-end" data-astro-cid-r2ibkex5> <div class="max-w-2xl" data-astro-cid-r2ibkex5> <span class="mb-2 block text-sm font-bold uppercase tracking-[0.2em] text-gold-accent" data-astro-cid-r2ibkex5>Proyectos</span> <h2 class="text-3xl font-medium text-white md:text-5xl" data-astro-cid-r2ibkex5>El Éxito de <span class="font-bold" data-astro-cid-r2ibkex5>Nuestros Socios</span></h2> <p class="text-white/60 mt-6 text-lg font-light" data-astro-cid-r2ibkex5>Donde la colaboración y la creatividad superan las expectativas.</p> </div> <a class="group flex items-center gap-2 text-white/80 hover:text-gold-accent transition-colors" href="/proyectos" data-astro-cid-r2ibkex5> <span class="text-sm font-bold uppercase tracking-wider" data-astro-cid-r2ibkex5>Ver proyectos destacados</span> <span class="material-symbols-outlined icon-xl outlined transition-transform group-hover:translate-x-1">arrow_forward</span> </a> </div> <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8" data-astro-cid-r2ibkex5> <div class="relative group row-span-2" data-astro-cid-r2ibkex5>  <div class="absolute -inset-2 bg-linear-to-tr from-gold-accent/30 to-transparent rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" data-astro-cid-r2ibkex5></div> <div class="relative overflow-hidden rounded-xl border border-white/5 bg-white/5 transition-all hover:border-gold-accent/50 contain-layout project-card h-full min-h-[500px]" data-astro-cid-r2ibkex5> <div class="absolute inset-0 z-0 bg-cover bg-center transition-all duration-700 group-hover:scale-105 will-change-transform project-image" data-alt="Plataforma e-commerce de productos artesanales" style="background-image: url(&#34;/images/proyectos.avif&#34;)" data-astro-cid-r2ibkex5> <div class="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent opacity-80" data-astro-cid-r2ibkex5></div> </div> <div class="relative z-10 flex h-full flex-col justify-end p-8" data-astro-cid-r2ibkex5> <span class="mb-2 text-xs font-bold uppercase tracking-widest text-gold-accent" data-astro-cid-r2ibkex5>E-COMMERCE | DESARROLLO WEB</span> <h3 class="text-2xl font-bold text-white" data-astro-cid-r2ibkex5>Velora Commerce</h3> <div class="mt-4 flex flex-wrap gap-2" data-astro-cid-r2ibkex5> <span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Core Web Vitals</span><span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>SEO Técnico</span><span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Arquitectura Enterprise</span> </div> <div class="mt-4 pt-4 border-t border-white/10" data-astro-cid-r2ibkex5> <div class="inline-block" data-astro-cid-r2ibkex5> <p class="text-gold-accent font-bold text-lg" data-astro-cid-r2ibkex5>1.2s</p> <p class="text-white/50 text-xs mt-1" data-astro-cid-r2ibkex5>Carga optimizada</p> </div><div class="mt-2 inline-block ml-4" data-astro-cid-r2ibkex5> <p class="text-gold-accent font-bold text-lg" data-astro-cid-r2ibkex5>147</p> <p class="text-white/50 text-xs mt-1" data-astro-cid-r2ibkex5>Errores corregidos</p> </div> </div> </div> </div> </div><div class="relative group" data-astro-cid-r2ibkex5>  <div class="absolute -inset-2 bg-linear-to-tr from-gold-accent/30 to-transparent rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" data-astro-cid-r2ibkex5></div> <div class="relative overflow-hidden rounded-xl border border-white/5 bg-white/5 transition-all hover:border-gold-accent/50 contain-layout project-card h-full min-h-[300px]" data-astro-cid-r2ibkex5> <div class="absolute inset-0 z-0 bg-cover bg-center transition-all duration-700 group-hover:scale-105 will-change-transform project-image" data-alt="Sistema de marca para clínica dental premium" style="background-image: url(&#34;/images/proyectos.avif&#34;)" data-astro-cid-r2ibkex5> <div class="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent opacity-80" data-astro-cid-r2ibkex5></div> </div> <div class="relative z-10 flex h-full flex-col justify-end p-8" data-astro-cid-r2ibkex5> <span class="mb-2 text-xs font-bold uppercase tracking-widest text-gold-accent" data-astro-cid-r2ibkex5>BRANDING | IDENTIDAD VISUAL</span> <h3 class="text-2xl font-bold text-white" data-astro-cid-r2ibkex5>Luminar Dental</h3> <div class="mt-4 flex flex-wrap gap-2" data-astro-cid-r2ibkex5> <span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Manual de Marca</span><span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Identidad Corporativa</span><span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Sistema Visual</span> </div> <div class="mt-4 pt-4 border-t border-white/10" data-astro-cid-r2ibkex5> <div class="inline-block" data-astro-cid-r2ibkex5> <p class="text-gold-accent font-bold text-lg" data-astro-cid-r2ibkex5>3</p> <p class="text-white/50 text-xs mt-1" data-astro-cid-r2ibkex5>Sucursales unificadas</p> </div><div class="mt-2 inline-block ml-4" data-astro-cid-r2ibkex5> <p class="text-gold-accent font-bold text-lg" data-astro-cid-r2ibkex5>12+</p> <p class="text-white/50 text-xs mt-1" data-astro-cid-r2ibkex5>Entregables de marca</p> </div> </div> </div> </div> </div><div class="relative group" data-astro-cid-r2ibkex5>  <div class="absolute -inset-2 bg-linear-to-tr from-gold-accent/30 to-transparent rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" data-astro-cid-r2ibkex5></div> <div class="relative overflow-hidden rounded-xl border border-white/5 bg-white/5 transition-all hover:border-gold-accent/50 contain-layout project-card h-full min-h-[300px]" data-astro-cid-r2ibkex5> <div class="absolute inset-0 z-0 bg-cover bg-center transition-all duration-700 group-hover:scale-105 will-change-transform project-image" data-alt="Portal inmobiliario con sistema de captación de leads" style="background-image: url(&#34;/images/proyectos.avif&#34;)" data-astro-cid-r2ibkex5> <div class="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent opacity-80" data-astro-cid-r2ibkex5></div> </div> <div class="relative z-10 flex h-full flex-col justify-end p-8" data-astro-cid-r2ibkex5> <span class="mb-2 text-xs font-bold uppercase tracking-widest text-gold-accent" data-astro-cid-r2ibkex5>DESARROLLO WEB | PERFORMANCE</span> <h3 class="text-2xl font-bold text-white" data-astro-cid-r2ibkex5>Valterra Living</h3> <div class="mt-4 flex flex-wrap gap-2" data-astro-cid-r2ibkex5> <span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Landing de Conversión</span><span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>CRM Integrado</span><span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Diseño Premium</span> </div> <div class="mt-4 pt-4 border-t border-white/10" data-astro-cid-r2ibkex5> <div class="inline-block" data-astro-cid-r2ibkex5> <p class="text-gold-accent font-bold text-lg" data-astro-cid-r2ibkex5>100%</p> <p class="text-white/50 text-xs mt-1" data-astro-cid-r2ibkex5>Responsive design</p> </div><div class="mt-2 inline-block ml-4" data-astro-cid-r2ibkex5> <p class="text-gold-accent font-bold text-lg" data-astro-cid-r2ibkex5>SEO+</p> <p class="text-white/50 text-xs mt-1" data-astro-cid-r2ibkex5>Optimización técnica</p> </div> </div> </div> </div> </div><div class="relative group col-span-1 md:col-span-2 lg:col-span-2" data-astro-cid-r2ibkex5>  <div class="absolute -inset-2 bg-linear-to-tr from-gold-accent/30 to-transparent rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" data-astro-cid-r2ibkex5></div> <div class="relative overflow-hidden rounded-xl border border-white/5 bg-white/5 transition-all hover:border-gold-accent/50 contain-layout project-card h-full min-h-[300px]" data-astro-cid-r2ibkex5> <div class="absolute inset-0 z-0 bg-cover bg-center transition-all duration-700 group-hover:scale-105 will-change-transform project-image" data-alt="Estrategia de contenido gastronómico profesional" style="background-image: url(&#34;/images/proyectos.avif&#34;)" data-astro-cid-r2ibkex5> <div class="absolute inset-0 bg-linear-to-t from-background via-transparent to-transparent opacity-80" data-astro-cid-r2ibkex5></div> </div> <div class="relative z-10 flex h-full flex-col justify-end p-8" data-astro-cid-r2ibkex5> <span class="mb-2 text-xs font-bold uppercase tracking-widest text-gold-accent" data-astro-cid-r2ibkex5>COMMUNITY MANAGER | CONTENIDOS</span> <h3 class="text-2xl font-bold text-white" data-astro-cid-r2ibkex5>Brasa &amp; Raíz</h3> <div class="mt-4 flex flex-wrap gap-2" data-astro-cid-r2ibkex5> <span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Calendario Editorial</span><span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Fotografía Gastronómica</span><span class="rounded-full bg-gold-accent/25 px-3 py-1 text-xs font-semibold text-gold-accent" data-astro-cid-r2ibkex5>Contenido Visual</span> </div> <div class="mt-4 pt-4 border-t border-white/10" data-astro-cid-r2ibkex5> <div class="inline-block" data-astro-cid-r2ibkex5> <p class="text-gold-accent font-bold text-lg" data-astro-cid-r2ibkex5>30+</p> <p class="text-white/50 text-xs mt-1" data-astro-cid-r2ibkex5>Piezas mensuales</p> </div><div class="mt-2 inline-block ml-4" data-astro-cid-r2ibkex5> <p class="text-gold-accent font-bold text-lg" data-astro-cid-r2ibkex5>4K+</p> <p class="text-white/50 text-xs mt-1" data-astro-cid-r2ibkex5>Resoluciones óptimas</p> </div> </div> </div> </div> </div> </div> </div> </section> <section id="testimonios" class="py-32 px-6 lg:px-12 relative border-t border-white/5 bg-background-alt content-visibility-auto"> <div class="max-w-[1440px] mx-auto"> <div class="flex flex-col mb-20"> <span class="text-gold-accent text-sm font-mono tracking-widest uppercase mb-4">Testimonios</span> <h2 class="text-3xl md:text-5xl text-white font-light">La Voz de la <span class="font-bold">Excelencia</span></h2> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-16 lg:gap-24"> <div class="flex flex-col relative pl-6 border-l border-gold-accent/20"> <span class="material-symbols-outlined icon-5xl outlined text-gold-accent absolute -top-8 -left-6 bg-background-alt p-2">format_quote</span> <blockquote class="text-xl lg:text-2xl text-white/80 font-light italic leading-relaxed mb-8 mt-8">
"Paracaídas Digital nos entregó un informe SEO completo que identificó errores técnicos que afectaban nuestro posicionamiento. Su diagnóstico detallado nos permitió transformar nuestra presencia online. Son un socio confiable que cumple lo que promete."
</blockquote> <div class="mt-auto"> <cite class="not-italic"> <span class="block text-white font-bold text-lg uppercase tracking-wide">Carlos M.</span> <span class="block text-gold-accent text-sm mt-1 uppercase tracking-wider">CEO, Retail Premium</span> </cite> </div> </div><div class="flex flex-col relative pl-6 border-l border-gold-accent/20"> <span class="material-symbols-outlined icon-5xl outlined text-gold-accent absolute -top-8 -left-6 bg-background-alt p-2">format_quote</span> <blockquote class="text-xl lg:text-2xl text-white/80 font-light italic leading-relaxed mb-8 mt-8">
"La identidad visual que diseñaron para nuestra marca mejoró significativamente como nos perciben nuestros clientes. Los materiales de marca crearon una conexión emocional que aumentó nuestro engagement. Un equipo de profesionales de primer nivel."
</blockquote> <div class="mt-auto"> <cite class="not-italic"> <span class="block text-white font-bold text-lg uppercase tracking-wide">Andrea V.</span> <span class="block text-gold-accent text-sm mt-1 uppercase tracking-wider">Directora, Grupo Financiero Horizon</span> </cite> </div> </div> </div> </div> </section> <section id="metodologia" class="relative bg-background-alt py-24 lg:py-32 overflow-hidden content-visibility-auto"> <!-- Decorative gradient blur --> <div class="absolute -left-[20%] top-0 h-[500px] w-[500px] rounded-full bg-primary/10 blur-[120px]"></div> <div class="absolute -right-[20%] bottom-0 h-[500px] w-[500px] rounded-full bg-primary/5 blur-[120px]"></div> <div class="relative mx-auto flex max-w-[1440px] flex-col gap-16 px-6 lg:px-12"> <div class="text-center"> <span class="mb-4 block text-sm font-bold uppercase tracking-[0.2em] text-gold-accent">Metodología Propia</span> <h2 class="text-3xl font-medium text-white md:text-5xl">ATERRIZAJE <span class="font-bold">SEGURO</span></h2> </div> <div class="grid grid-cols-1 gap-8 md:grid-cols-4"> <div class="group flex flex-col gap-6 rounded-2xl border border-white/5 bg-white/2 p-8 backdrop-blur-sm transition-all hover:-translate-y-1 hover:border-gold-accent/30 hover:bg-white/4"> <div class="flex size-14 items-center justify-center rounded-xl bg-gold-accent/10 text-gold-accent group-hover:bg-gold-accent group-hover:text-background transition-colors"> <span class="material-symbols-outlined icon-3xl outlined">search</span> </div> <div class="flex flex-col gap-3"> <h3 class="text-xl font-bold text-white">Diagnóstico</h3> <p class="leading-relaxed text-white/60">Analizamos profundamente tu situación actual para comprender tus necesidades, objetivos y el contexto de tu proyecto.</p> </div> </div><div class="group flex flex-col gap-6 rounded-2xl border border-white/5 bg-white/2 p-8 backdrop-blur-sm transition-all hover:-translate-y-1 hover:border-gold-accent/30 hover:bg-white/4"> <div class="flex size-14 items-center justify-center rounded-xl bg-gold-accent/10 text-gold-accent group-hover:bg-gold-accent group-hover:text-background transition-colors"> <span class="material-symbols-outlined icon-3xl outlined">architecture</span> </div> <div class="flex flex-col gap-3"> <h3 class="text-xl font-bold text-white">Estrategia</h3> <p class="leading-relaxed text-white/60">Diseñamos un plan personalizado que define el enfoque, dirección y soluciones específicas para tu proyecto.</p> </div> </div><div class="group flex flex-col gap-6 rounded-2xl border border-white/5 bg-white/2 p-8 backdrop-blur-sm transition-all hover:-translate-y-1 hover:border-gold-accent/30 hover:bg-white/4"> <div class="flex size-14 items-center justify-center rounded-xl bg-gold-accent/10 text-gold-accent group-hover:bg-gold-accent group-hover:text-background transition-colors"> <span class="material-symbols-outlined icon-3xl outlined">construction</span> </div> <div class="flex flex-col gap-3"> <h3 class="text-xl font-bold text-white">Ejecución</h3> <p class="leading-relaxed text-white/60">Implementamos el proyecto con precisión técnica y atención al detalle para entregar resultados de calidad.</p> </div> </div><div class="group flex flex-col gap-6 rounded-2xl border border-white/5 bg-white/2 p-8 backdrop-blur-sm transition-all hover:-translate-y-1 hover:border-gold-accent/30 hover:bg-white/4"> <div class="flex size-14 items-center justify-center rounded-xl bg-gold-accent/10 text-gold-accent group-hover:bg-gold-accent group-hover:text-background transition-colors"> <span class="material-symbols-outlined icon-3xl outlined">check_circle</span> </div> <div class="flex flex-col gap-3"> <h3 class="text-xl font-bold text-white">Entrega</h3> <p class="leading-relaxed text-white/60">Entregamos el proyecto completamente terminado, optimizado y listo para que tú lo uses de inmediato en tu marca.</p> </div> </div> </div> </div> </section> <section id="contacto" class="py-32 px-6 lg:px-20 relative overflow-hidden content-visibility-auto"> <div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(var(--color-primary-muted) 1px, transparent 1px); background-size: 32px 32px;"></div> <div class="absolute bottom-0 left-0 w-full h-full bg-linear-to-t from-background via-transparent to-transparent"></div> <div class="relative z-10 max-w-4xl mx-auto text-center flex flex-col items-center gap-8"> <span class="material-symbols-outlined icon-6xl outlined text-gold-accent mb-4">workspace_premium</span> <h2 class="text-4xl md:text-5xl lg:text-6xl font-semibold text-white tracking-tight">
¿Listo para tu salto al éxito?
</h2> <p class="text-lg text-white/60 max-w-2xl">
Soluciones enterprise adaptadas para tu negocio. Auditoría SEO, desarrollo web y diseño visual estratégico para posicionar tu marca como líder.
</p> <div class="flex flex-col sm:flex-row gap-6 mt-6"> <a href="/contacto" class="flex items-center justify-center font-semibold transition-all duration-300 cursor-pointer border border-gold-accent text-gold-accent hover:bg-gold-accent hover:text-black rounded-full h-14 px-8 text-base"><span>¡COMIENZA HOY!</span></a> <a href="/servicios" class="flex items-center justify-center font-semibold transition-all duration-300 cursor-pointer text-white hover:bg-white/5 rounded-lg h-14 px-8 text-base"><span>VER SERVICIOS</span></a> </div> </div> </section>  </main> <footer class="border-t border-primary-muted bg-background-alt pt-20 pb-10 px-6 lg:px-20"> <div class="max-w-[1440px] mx-auto grid grid-cols-1 md:grid-cols-4 gap-12 mb-16"> <div class="col-span-1 md:col-span-1"> <div class="flex items-center gap-3 text-white mb-6"> <img src="/images/logo-pacaidas-digital.png" alt="Paracaídas Digital" class="w-8 h-8 object-contain" width="32" height="32" loading="lazy" decoding="async"> <p class="text-lg font-bold tracking-tight">Paracaídas Digital</p> </div> <p class="text-white/60 text-sm leading-relaxed">
Socio estratégico en transformación digital y agencia enterprise con la agilidad de una boutique. Tu visión merece un aterrizaje perfecto.
</p> </div> <div class="flex flex-col gap-4"> <p class="text-white font-bold text-sm uppercase tracking-wider">Servicios</p> <a class="text-white/60 hover:text-primary transition-colors text-sm" href="/#auditoria-seo">Auditoría Técnica y SEO</a> <a class="text-white/60 hover:text-primary transition-colors text-sm" href="/#desarrollo-web">Desarrollo Web Enterprise</a> <a class="text-white/60 hover:text-primary transition-colors text-sm" href="/#diseno-visual">Diseño Visual Estratégico</a> </div> <div class="flex flex-col gap-4"> <p class="text-white font-bold text-sm uppercase tracking-wider">Empresa</p> <a class="text-white/60 hover:text-primary transition-colors text-sm" href="/servicios">Nuestros Servicios</a> <a class="text-white/60 hover:text-primary transition-colors text-sm" href="/faqs">Preguntas Frecuentes</a> <a class="text-white/60 hover:text-primary transition-colors text-sm" href="/nosotros">Sobre Nosotros</a> </div> <div class="flex flex-col gap-4"> <p class="text-white font-bold text-sm uppercase tracking-wider">Conectar</p> <div class="flex gap-3"> <a class="w-[30px] h-[30px] rounded-lg shadow-[0_0_15px_rgba(147,17,212,0.2)] flex items-center justify-center text-white/60 hover:text-primary hover:shadow-[0_0_20px_rgba(147,17,212,0.4)] transition-all" href="https://instagram.com/paracaidas.digital" aria-label="Instagram"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 50 50" fill="currentColor"><path d="M 16 3 C 8.83 3 3 8.83 3 16 L 3 34 C 3 41.17 8.83 47 16 47 L 34 47 C 41.17 47 47 41.17 47 34 L 47 16 C 47 8.83 41.17 3 34 3 L 16 3 z M 37 11 C 38.1 11 39 11.9 39 13 C 39 14.1 38.1 15 37 15 C 35.9 15 35 14.1 35 13 C 35 11.9 35.9 11 37 11 z M 25 14 C 31.07 14 36 18.93 36 25 C 36 31.07 31.07 36 25 36 C 18.93 36 14 31.07 14 25 C 14 18.93 18.93 14 25 14 z M 25 16 C 20.04 16 16 20.04 16 25 C 16 29.96 20.04 34 25 34 C 29.96 34 34 29.96 34 25 C 34 20.04 29.96 16 25 16 z"/></svg> </a><a class="w-[30px] h-[30px] rounded-lg shadow-[0_0_15px_rgba(147,17,212,0.2)] flex items-center justify-center text-white/60 hover:text-primary hover:shadow-[0_0_20px_rgba(147,17,212,0.4)] transition-all" href="https://facebook.com/paracaidas.digital" aria-label="Facebook"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 50 50" fill="currentColor"><path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M37,19h-2c-2.14,0-3,0.5-3,2 v3h5l-1,5h-4v15h-5V29h-4v-5h4v-3c0-4,2-7,6-7c2.9,0,4,1,4,1V19z"/></svg> </a><a class="w-[30px] h-[30px] rounded-lg shadow-[0_0_15px_rgba(147,17,212,0.2)] flex items-center justify-center text-white/60 hover:text-primary hover:shadow-[0_0_20px_rgba(147,17,212,0.4)] transition-all" href="https://tiktok.com/@paracaidas.digital" aria-label="TikTok"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 50 50" fill="currentColor"><path d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z"/></svg> </a><a class="w-[30px] h-[30px] rounded-lg shadow-[0_0_15px_rgba(147,17,212,0.2)] flex items-center justify-center text-white/60 hover:text-primary hover:shadow-[0_0_20px_rgba(147,17,212,0.4)] transition-all" href="https://wa.me/50250152574" aria-label="WhatsApp"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 50 50" fill="currentColor"><path d="M25,2C12.318,2,2,12.318,2,25c0,3.96,1.023,7.854,2.963,11.29L2.037,46.73c-0.096,0.343-0.003,0.711,0.245,0.966 C2.473,47.893,2.733,48,3,48c0.08,0,0.161-0.01,0.24-0.029l10.896-2.699C17.463,47.058,21.21,48,25,48c12.682,0,23-10.318,23-23 S37.682,2,25,2z M36.57,33.116c-0.492,1.362-2.852,2.605-3.986,2.772c-1.018,0.149-2.306,0.213-3.72-0.231 c-0.857-0.27-1.957-0.628-3.366-1.229c-5.923-2.526-9.791-8.415-10.087-8.804C15.116,25.235,13,22.463,13,19.594 s1.525-4.28,2.067-4.864c0.542-0.584,1.181-0.73,1.575-0.73s0.787,0.005,1.132,0.021c0.363,0.018,0.85-0.137,1.329,1.001 c0.492,1.168,1.673,4.037,1.819,4.33c0.148,0.292,0.246,0.633,0.05,1.022c-0.196,0.389-0.294,0.632-0.59,0.973 s-0.62,0.76-0.886,1.022c-0.296,0.291-0.603,0.606-0.259,1.19c0.344,0.584,1.529,2.493,3.285,4.039 c2.255,1.986,4.158,2.602,4.748,2.894c0.59,0.292,0.935,0.243,1.279-0.146c0.344-0.39,1.476-1.703,1.869-2.286 s0.787-0.487,1.329-0.292c0.542,0.194,3.445,1.604,4.035,1.896c0.59,0.292,0.984,0.438,1.132,0.681 C37.062,30.587,37.062,31.755,36.57,33.116z"/></svg> </a> </div> </div> </div> <div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> <p class="text-white/50 text-xs">© 2026 Paracaídas Digital. Todos los derechos reservados.</p> <div class="flex gap-6"> <a class="text-white/50 text-xs hover:text-white/70 transition-colors" href="/privacidad">Privacidad</a> <a class="text-white/50 text-xs hover:text-white/70 transition-colors" href="/terminos">Términos</a> <a class="text-white/50 text-xs hover:text-white/70 transition-colors" href="/cookies">Cookies</a> </div> </div> </footer> </div> </body></html>