<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Alex Villalón — Diseño Web y Marketing Digital en Buenos Aires</title>
<meta name="description" content="Diseño web, e-commerce, landing pages, automatizaciones y publicidad digital para pymes y emprendedores en Buenos Aires. Proyectos 100% personalizados, sin plantillas ni intermediarios. Respuesta en 24hs.">
<meta name="keywords" content="diseño web buenos aires, desarrollo web argentina, marketing digital pymes, landing pages, tienda online, google ads, facebook ads, edición de video, freelance web">
<meta name="author" content="Alex Villalón">
<meta name="robots" content="index, follow">

<!-- Favicon -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a0a0a">
<link rel="canonical" href="https://alexvillalon.com/">
<link rel="sitemap" type="application/xml" href="/sitemap.xml">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Alex Villalón — Diseño Web y Marketing Digital">
<meta property="og:description" content="Soluciones digitales para emprendedores y pymes que quieren resultados reales: sitios a medida, e-commerce, landing pages y campañas que convierten.">
<meta property="og:url" content="https://alexvillalon.com/">
<meta property="og:locale" content="es_AR">
<meta property="og:site_name" content="Alex Villalón — Digital">

<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Alex Villalón — Diseño Web y Marketing Digital">
<meta name="twitter:description" content="Sitios web y campañas hechas a medida para pymes y emprendedores en Buenos Aires.">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">

<!-- Structured data: qué hace, dónde, y catálogo de servicios -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Alex Villalón — Digital",
  "description": "Diseño web, e-commerce, landing pages, automatizaciones y publicidad digital para pymes y emprendedores.",
  "url": "https://alexvillalon.com/",
  "email": "alex.villalon.av@gmail.com",
  "areaServed": { "@type": "City", "name": "Buenos Aires" },
  "address": { "@type": "PostalAddress", "addressLocality": "Buenos Aires", "addressCountry": "AR" },
  "makesOffer": [
    { "@type": "Offer", "url": "https://alexvillalon.com/servicios/paginas-web.html", "itemOffered": { "@type": "Service", "name": "Páginas web", "description": "Sitios completos, modernos y 100% personalizados." } },
    { "@type": "Offer", "url": "https://alexvillalon.com/servicios/ecommerce.html", "itemOffered": { "@type": "Service", "name": "E-commerce", "description": "Tiendas online con pagos, catálogo y envíos configurados." } },
    { "@type": "Offer", "url": "https://alexvillalon.com/servicios/landing-pages.html", "itemOffered": { "@type": "Service", "name": "Landing pages", "description": "Páginas diseñadas para convertir visitas en clientes." } },
    { "@type": "Offer", "url": "https://alexvillalon.com/servicios/automatizaciones.html", "itemOffered": { "@type": "Service", "name": "Automatizaciones", "description": "Flujos automáticos para leads, correos y facturación." } },
    { "@type": "Offer", "url": "https://alexvillalon.com/servicios/publicidad-digital.html", "itemOffered": { "@type": "Service", "name": "Publicidad digital", "description": "Campañas en Google, Facebook e Instagram." } },
    { "@type": "Offer", "url": "https://alexvillalon.com/servicios/edicion-video.html", "itemOffered": { "@type": "Service", "name": "Edición de video", "description": "Reels, videos publicitarios y animaciones." } }
  ]
}
</script>

<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a; --bg2:#111; --fg:#f0ece4; --fg2:rgba(240,236,228,0.42);
  --fg3:rgba(240,236,228,0.1); --fg4:rgba(240,236,228,0.06);
  --lime:#c8f53a; --lime2:rgba(200,245,58,0.12);
  --mono:'DM Mono',monospace; --display:'Archivo Black',sans-serif;
  --pad:clamp(1.25rem,5vw,2.5rem);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.skip-link{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--bg);padding:.6rem 1rem;z-index:9999;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:0}

body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.028;pointer-events:none;z-index:9990;
}

#progress{position:fixed;top:0;left:0;height:1.5px;background:var(--lime);width:0%;z-index:9999;transition:width .08s linear;box-shadow:0 0 8px rgba(200,245,58,.5)}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:1.1rem var(--pad);transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(10,10,10,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--fg3)}
.logo{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg2);text-decoration:none;line-height:1;transition:color .2s}
.logo:hover{color:var(--fg)}
.logo span{color:var(--lime)}
.nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none}
.nav-links a{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2);text-decoration:none;transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{transform:scaleX(1)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{display:block;width:20px;height:1px;background:var(--fg2);transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--fg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--fg)}

.mob-menu{display:none;position:fixed;inset:0;background:rgba(10,10,10,.97);z-index:400;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;opacity:0;pointer-events:none;transition:opacity .3s;padding:var(--pad)}
.mob-menu.open{opacity:1;pointer-events:all}
.mob-menu ul{list-style:none;width:100%}
.mob-menu a{font-family:var(--display);font-size:clamp(2rem,9vw,3.6rem);letter-spacing:-.025em;color:var(--fg2);text-decoration:none;transition:color .15s;border-bottom:1px solid var(--fg3);width:100%;padding:.9rem 0;display:flex;justify-content:space-between;align-items:center}
.mob-menu a::after{content:'↗';font-family:var(--mono);font-size:.9rem;color:var(--fg3)}
.mob-menu a:hover{color:var(--lime)}
.mob-menu a:hover::after{color:var(--lime)}
.mob-menu-foot{margin-top:3rem;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3)}

/* ── HERO ── */
.hero{min-height:100svh;padding:0 var(--pad);padding-top:clamp(8rem,15vw,10.5rem);padding-bottom:clamp(2.5rem,6vw,4rem);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.hero-bg-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);font-family:var(--display);font-size:min(42vw,540px);color:transparent;-webkit-text-stroke:1px rgba(240,236,228,0.028);line-height:1;user-select:none;letter-spacing:-.04em;white-space:nowrap;pointer-events:none}
.hero::before{content:'';position:absolute;width:60vw;height:60vw;max-width:700px;max-height:700px;background:radial-gradient(circle,rgba(200,245,58,.03) 0%,transparent 70%);top:20%;left:50%;transform:translateX(-50%);pointer-events:none}
.hero-top{position:absolute;top:0;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:flex-start;padding-top:clamp(4.5rem,11vw,6.5rem)}
.hero-status{font-size:.57rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg2);display:flex;align-items:center;gap:.55rem}
.status-dot{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:blink 2.6s ease infinite;flex-shrink:0;box-shadow:0 0 6px rgba(200,245,58,.6)}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 6px rgba(200,245,58,.6)}50%{opacity:.2;box-shadow:none}}
.hero-tag{font-size:.57rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);text-align:right;line-height:2.2}
.hero-h1{font-size:clamp(3rem,8.2vw,128px);line-height:.94;letter-spacing:-.032em;color:var(--fg);position:relative;z-index:1}
.hero-h1 .lime{color:var(--lime);text-shadow:0 0 60px rgba(200,245,58,.15)}
.hero-kicker{font-size:.7rem;letter-spacing:.06em;color:var(--fg2);margin-top:.75rem;max-width:520px;position:relative;z-index:1}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-top:clamp(1.5rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--fg3);position:relative;z-index:1}
.hero-desc{font-size:clamp(.7rem,.85vw,.8rem);line-height:2;color:var(--fg2);max-width:min(340px,90%)}
.hero-desc strong{color:var(--fg);font-weight:400}
.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.btn-lime{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;background:var(--lime);color:var(--bg);padding:.82rem 1.7rem;text-decoration:none;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;white-space:nowrap;position:relative;overflow:hidden;border:none;cursor:pointer;display:inline-block}
.btn-lime::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.15);transform:translateX(-100%);transition:transform .3s}
.btn-lime:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(200,245,58,.25)}
.btn-lime:hover::after{transform:translateX(0)}
.btn-outline{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg2);text-decoration:none;border-bottom:1px solid var(--fg3);padding-bottom:2px;transition:color .2s,border-color .2s}
.btn-outline:hover{color:var(--lime);border-color:var(--lime)}

/* ── TICKER ── */
.ticker{overflow:hidden;border-top:1px solid var(--fg3);border-bottom:1px solid var(--fg3);padding:.7rem 0;background:var(--bg2)}
.ticker-inner{display:flex;width:max-content;animation:tick 28s linear infinite;white-space:nowrap}
.ticker-inner:hover{animation-play-state:paused}
.ticker-inner span{font-family:var(--display);font-size:1rem;letter-spacing:.05em;color:var(--fg2);padding:0 2.5rem;flex-shrink:0;border-right:1px solid var(--fg3);transition:color .2s}
.ticker-inner span.hl{color:var(--lime)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--fg3)}
.stat-cell{padding:clamp(2rem,4vw,3.5rem) var(--pad);border-right:1px solid var(--fg3);display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;position:relative;overflow:hidden;transition:background .3s}
.stat-cell::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.stat-cell:hover{background:var(--fg4)}
.stat-cell:hover::before{transform:scaleX(1)}
.stat-cell:last-child{border-right:none}
.stat-num{font-family:var(--display);font-size:clamp(3.2rem,6.5vw,5.5rem);letter-spacing:-.04em;line-height:1;color:var(--fg)}
.stat-num .lime{color:var(--lime)}
.stat-label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2);line-height:1.7}

/* ── SECTION SHARED ── */
.section-eyebrow{font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--lime);margin-bottom:clamp(2rem,5vw,4rem);display:flex;align-items:center;gap:1.25rem}
.section-eyebrow::after{content:'';flex:1;height:1px;background:var(--fg3)}

/* ── SERVICIOS ── */
#servicios{padding:clamp(5rem,11vw,9rem) var(--pad) 0}
.svc-list{border-top:1px solid var(--fg3);list-style:none}
.svc-item{display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0;padding:clamp(1.25rem,2.8vw,2.1rem) 0;border-bottom:1px solid var(--fg3);position:relative;overflow:hidden}
.svc-item:focus-within,.svc-item:hover{outline:none}
@media(min-width:800px){.svc-item{grid-template-columns:3.5rem 1fr 27rem auto} .svc-desc{display:block}}
.svc-item::before{content:'';position:absolute;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:0}
.svc-item:hover::before,.svc-item:focus-within::before{transform:scaleX(1)}
.svc-item:hover .svc-n,.svc-item:hover .svc-name,.svc-item:hover .svc-desc,.svc-item:hover .svc-pill,
.svc-item:focus-within .svc-n,.svc-item:focus-within .svc-name,.svc-item:focus-within .svc-desc,.svc-item:focus-within .svc-pill{color:var(--bg)!important}
.svc-item:hover .svc-pill,.svc-item:focus-within .svc-pill{border-color:rgba(12,12,12,.18)}
.svc-n{font-size:.58rem;letter-spacing:.14em;color:var(--fg3);font-family:var(--mono);position:relative;z-index:1;transition:color .3s}
.svc-name{font-size:clamp(1.7rem,3.6vw,3.1rem);letter-spacing:-.028em;line-height:1;color:var(--fg);position:relative;z-index:1;transition:color .3s;text-decoration:none;display:block}
.svc-desc{display:none;font-size:.7rem;line-height:1.85;color:var(--fg2);padding:0 1.75rem;position:relative;z-index:1;transition:color .3s;margin:0}
.svc-pill{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);border:1px solid var(--fg3);padding:.32rem .75rem;justify-self:end;position:relative;z-index:1;transition:color .3s,border-color .3s;white-space:nowrap}
.svc-item>a{display:contents;text-decoration:none;color:inherit}

/* ── MANIFESTO / POR QUÉ ── */
#por-que{padding:clamp(5rem,11vw,9rem) var(--pad)}
.manifesto-top{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(2rem,5vw,4rem);flex-wrap:wrap;margin-bottom:clamp(3rem,6vw,5rem)}
.manifesto-h{font-size:clamp(2.8rem,7.5vw,7.5rem);line-height:.88;letter-spacing:-.032em;flex:1;min-width:min(100%,300px)}
.manifesto-h .lime{color:var(--lime)}
.manifesto-sub{font-size:.74rem;color:var(--fg2);line-height:2;max-width:280px;padding-top:.75rem;flex-shrink:0}
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border-top:1px solid var(--fg3);border-left:1px solid var(--fg3)}
.reason{padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.5rem);border-right:1px solid var(--fg3);border-bottom:1px solid var(--fg3);transition:background .25s;position:relative}
.reason:hover{background:var(--fg4)}
.reason-n{font-size:.55rem;letter-spacing:.22em;color:var(--lime);margin-bottom:1.5rem;font-family:var(--mono)}
.reason-title{font-size:1.05rem;letter-spacing:-.018em;color:var(--fg);margin-bottom:.6rem;line-height:1.1}
.reason-body{font-size:.69rem;color:var(--fg2);line-height:1.9;margin:0}

/* ── CLIENTES (nuevo) ── */
#clientes{padding:clamp(5rem,11vw,9rem) var(--pad) 0}
.client-ticker{overflow:hidden;border-top:1px solid var(--fg3);border-bottom:1px solid var(--fg3);padding:1.1rem 0;background:var(--bg2);margin-bottom:clamp(3rem,7vw,5rem)}
.client-ticker-inner{display:flex;width:max-content;animation:tick 32s linear infinite;white-space:nowrap;align-items:center}
.client-ticker-inner:hover{animation-play-state:paused}
.client-ticker-inner span{font-size:1.15rem;letter-spacing:.02em;color:var(--fg3);padding:0 2.75rem;flex-shrink:0;transition:color .25s}
.client-ticker-inner span:hover{color:var(--fg2)}

.test-slider{position:relative;max-width:760px;margin:0 auto}
.test-track{position:relative;min-height:clamp(220px,32vw,270px)}
.test-card{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;border:1px solid var(--fg3);padding:clamp(1.75rem,4vw,2.75rem);display:flex;flex-direction:column;justify-content:space-between;background:var(--bg2)}
.test-card.active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative}
.test-quote{font-size:clamp(.9rem,1.6vw,1.15rem);line-height:1.75;color:var(--fg);margin:0}
.test-quote::before{content:'“';color:var(--lime);font-family:var(--display);margin-right:.15em}
.test-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
.test-who{display:flex;flex-direction:column;gap:.2rem}
.test-name{font-size:.85rem;color:var(--fg);letter-spacing:-.01em}
.test-role{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.test-stars{font-size:.7rem;color:var(--lime);letter-spacing:.1em}
.test-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:2rem}
.test-arrow{background:none;border:1px solid var(--fg3);color:var(--fg2);width:38px;height:38px;cursor:pointer;font-family:var(--mono);font-size:.85rem;transition:border-color .2s,color .2s,background .2s;display:flex;align-items:center;justify-content:center}
.test-arrow:hover{border-color:var(--lime);color:var(--lime)}
.test-dots{display:flex;gap:.5rem;align-items:center}
.test-dot{width:6px;height:6px;border-radius:50%;background:var(--fg3);border:none;cursor:pointer;transition:background .3s,transform .3s;padding:0}
.test-dot.active{background:var(--lime);transform:scale(1.4)}
.client-note{text-align:center;font-size:.65rem;color:var(--fg3);margin-top:2rem;letter-spacing:.04em}

/* ── PROCESO ── */
#proceso{padding:clamp(5rem,11vw,9rem) var(--pad)}
.process-h{font-size:clamp(2.5rem,6vw,5.5rem);letter-spacing:-.032em;line-height:.88;margin-bottom:clamp(2rem,4vw,3.5rem)}
.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;background:var(--fg3)}
.pstep{background:var(--bg);padding:clamp(1.75rem,3.5vw,2.75rem) clamp(1.25rem,2vw,2rem);position:relative;overflow:hidden;transition:background .3s}
.pstep:hover{background:var(--bg2)}
.pstep-n{font-family:var(--display);font-size:clamp(3rem,5vw,4.5rem);line-height:1;letter-spacing:-.04em;margin-bottom:1.5rem;color:transparent;-webkit-text-stroke:1px var(--fg3);transition:-webkit-text-stroke-color .3s}
.pstep:hover .pstep-n{-webkit-text-stroke-color:rgba(200,245,58,.4)}
.pstep-title{font-size:clamp(1.1rem,2vw,1.3rem);letter-spacing:-.02em;color:var(--fg);margin-bottom:.65rem}
.pstep-body{font-size:.69rem;color:var(--fg2);line-height:1.9;margin:0}
.pstep-line{position:absolute;bottom:0;left:0;right:0;height:1.5px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.pstep:hover .pstep-line{transform:scaleX(1)}

/* ── BANNER DISPONIBILIDAD ── */
#unavailable-banner{background:rgba(200,245,58,.05);border-bottom:1px solid rgba(200,245,58,.18);padding:1rem var(--pad);display:none}
#unavailable-banner.show{display:block}
.unavail-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;max-width:900px;margin:0 auto}
.unavail-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex-shrink:0;animation:blink 2s infinite;box-shadow:0 0 6px rgba(200,245,58,.5)}
#unavailable-banner p{font-size:.72rem;color:var(--fg2);flex:1;min-width:200px;margin:0}
#unavailEmail{background:rgba(240,236,228,.04);border:1px solid var(--fg3);color:var(--fg);font-family:var(--mono);font-size:.7rem;padding:.48rem .82rem;outline:none;transition:border-color .2s}
#unavailEmail:focus{border-color:rgba(200,245,58,.35)}
#unavailable-banner button{background:var(--lime);color:var(--bg);border:none;cursor:pointer;font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;padding:.48rem 1rem;transition:background .2s;white-space:nowrap}
#unavailable-banner button:hover{background:#d4ff50}

/* ── PAQUETES ── */
#paquetes{padding:clamp(5rem,11vw,9rem) var(--pad)}
.pkg-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(2rem,5vw,4rem);flex-wrap:wrap;margin-bottom:clamp(3rem,6vw,5rem)}
.pkg-h{font-size:clamp(2.6rem,6.5vw,6.5rem);line-height:.88;letter-spacing:-.032em;flex:1;min-width:min(100%,280px)}
.pkg-sub{font-size:.74rem;color:var(--fg2);line-height:2;max-width:300px;flex-shrink:0;padding-top:.75rem}
.pkg-grid,.pkg-loading-state{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:var(--fg3);border:1px solid var(--fg3);margin-bottom:2rem}
.pkg-card{background:var(--bg);padding:clamp(1.75rem,3.5vw,2.5rem);display:flex;flex-direction:column;gap:0;transition:background .3s;position:relative;overflow:hidden}
.pkg-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:1.5px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pkg-card:hover{background:#0f0f0f}
.pkg-card:hover::before{transform:scaleX(1)}
.pkg-card-featured{background:#0e0e0e;border-left:1.5px solid rgba(200,245,58,.25);border-right:1.5px solid rgba(200,245,58,.25)}
.pkg-card-featured::after{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:var(--lime)}
.pkg-top{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.75rem}
.pkg-tag{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);font-family:var(--mono)}
.pkg-tag-dark{color:var(--bg);background:var(--lime);padding:.18rem .55rem;align-self:flex-start;font-size:.52rem}
.pkg-name{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2rem);letter-spacing:-.022em;color:var(--fg);line-height:1;margin-top:.25rem}
.pkg-price{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-.035em;color:var(--fg);line-height:1;margin-top:.4rem}
.pkg-num{color:var(--lime)}
.pkg-mo{font-size:1.1rem;color:var(--fg2);letter-spacing:-.01em}
.pkg-price-sub{font-size:.56rem;letter-spacing:.14em;color:var(--fg2);text-transform:uppercase;margin-top:.3rem}
.pkg-features{list-style:none;display:flex;flex-direction:column;gap:.65rem;flex:1;border-top:1px solid var(--fg3);padding-top:1.5rem;margin-bottom:1.75rem}
.pkg-features li{font-size:.7rem;color:var(--fg2);line-height:1.5;display:flex;gap:.65rem;align-items:flex-start}
.pkg-features li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--fg3);flex-shrink:0;margin-top:.45rem;transition:background .2s}
.pkg-card:hover .pkg-features li::before{background:rgba(200,245,58,.4)}
.pkg-card-featured .pkg-features li::before{background:rgba(200,245,58,.3)}
.btn-pkg{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:.85rem 1.25rem;border:none;cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s,box-shadow .25s;margin-top:auto;position:relative;overflow:hidden}
.btn-pkg-lime{background:var(--lime);color:var(--bg)}
.btn-pkg-lime:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(200,245,58,.2)}
.btn-pkg-fill{background:var(--fg);color:var(--bg)}
.btn-pkg-fill:hover{background:var(--lime);transform:translateY(-2px)}
.btn-pkg-disabled{background:var(--fg3)!important;color:var(--fg2)!important;cursor:not-allowed!important;opacity:.45}
.pkg-note{font-size:.68rem;color:var(--fg2);text-align:center;padding:1.25rem 0}
.pkg-note a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(200,245,58,.25)}
.pkg-note a:hover{border-color:var(--lime)}
.pkg-skel{background:var(--bg);height:340px;position:relative;overflow:hidden}
.pkg-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(240,236,228,.03) 50%,transparent 100%);animation:shimmer 1.8s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ── CONTACT ── */
#contacto-directo{background:var(--bg);color:var(--fg);padding:clamp(4rem,10vw,8rem) var(--pad);position:relative;overflow:hidden;border-top:1px solid var(--fg3)}
.contact-bg{position:absolute;top:-10%;right:-6%;font-family:var(--display);font-size:min(38vw,520px);color:transparent;-webkit-text-stroke:1px rgba(240,236,228,.035);line-height:1;user-select:none;letter-spacing:-.04em;pointer-events:none}
.contact-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.contact-h{font-size:clamp(2.8rem,8vw,8rem);letter-spacing:-.04em;line-height:.84;color:var(--fg)}
.contact-h em{font-style:normal;color:var(--lime)}
.contact-sub{font-size:.74rem;color:var(--fg2);line-height:2;margin-top:1.75rem;max-width:360px}
.contact-btns{display:flex;gap:.75rem;margin-top:2.5rem;flex-wrap:wrap}
.btn-dark{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;background:var(--lime);color:var(--bg);padding:.82rem 1.7rem;text-decoration:none;transition:background .2s,transform .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.btn-dark:hover{background:var(--fg);transform:translateY(-2px)}
.btn-stroke{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);border:1px solid var(--fg3);padding:.82rem 1.7rem;text-decoration:none;transition:border-color .2s,color .2s}
.btn-stroke:hover{border-color:rgba(240,236,228,.3);color:var(--fg)}
.c-label{font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg2);margin-bottom:1.25rem}
.c-social{display:flex;gap:1.75rem;flex-wrap:wrap;list-style:none}
.c-social a{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg2);text-decoration:none;border-bottom:1px solid var(--fg3);padding-bottom:2px;transition:color .2s,border-color .2s}
.c-social a:hover{color:var(--lime);border-color:rgba(200,245,58,.4)}

/* ── FOOTER ── */
footer{border-top:1px solid var(--fg3);padding:1.5rem var(--pad);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;background:var(--bg2)}
.footer-l{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
.footer-links{list-style:none;display:flex;gap:2rem;flex-wrap:wrap}
.footer-links a{font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg3);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--fg)}
.footer-r{font-size:.56rem;letter-spacing:.1em;color:var(--fg3)}

/* ── REVEAL ── */
.sr{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.sr.on{opacity:1;transform:translateY(0)}
.sr.d1{transition-delay:.12s}.sr.d2{transition-delay:.24s}.sr.d3{transition-delay:.36s}

/* ── WHATSAPP FLOAT ── */
.wa-float{position:fixed;right:clamp(1rem,4vw,1.75rem);bottom:clamp(1rem,4vw,1.75rem);z-index:600;display:flex;align-items:center;gap:.65rem;background:var(--lime);color:var(--bg);text-decoration:none;padding:.85rem 1.1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 10px 34px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,padding .25s}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(200,245,58,.3)}
.wa-float svg{width:20px;height:20px;flex-shrink:0}
.wa-float .wa-text{max-width:140px;overflow:hidden}
@media(max-width:520px){
  .wa-float{padding:.85rem;border-radius:50%}
  .wa-float .wa-text{display:none}
}

/* ── MODAL ── */
#modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:clamp(.75rem,3vw,1.5rem)}
#modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-box{position:relative;z-index:1;background:#0e0e0e;border:1px solid rgba(240,236,228,.12);width:100%;max-width:500px;max-height:92svh;overflow-y:auto;padding:clamp(1.5rem,5vw,2.75rem);animation:modalIn .35s cubic-bezier(.16,1,.3,1);scrollbar-width:thin;scrollbar-color:var(--fg3) transparent}
.modal-box::-webkit-scrollbar{width:3px}
.modal-box::-webkit-scrollbar-thumb{background:var(--fg3)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-steps{display:flex;align-items:center;gap:.5rem;margin-bottom:2rem}
.modal-step-dot{width:6px;height:6px;border-radius:50%;background:var(--fg3);transition:background .3s,transform .3s}
.modal-step-dot.active{background:var(--lime);transform:scale(1.4)}
.modal-step-dot.done{background:rgba(200,245,58,.4)}
.modal-step-line{flex:1;height:1px;background:var(--fg3)}
.modal-close{position:absolute;top:1.1rem;right:1.1rem;background:rgba(240,236,228,.05);border:1px solid var(--fg3);cursor:pointer;color:var(--fg2);font-size:.75rem;transition:background .2s,color .2s;padding:.3rem .55rem;line-height:1}
.modal-close:hover{background:rgba(240,236,228,.1);color:var(--fg)}
.modal-eyebrow{font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:.9rem}
.modal-h{font-size:clamp(1.9rem,5vw,2.6rem);letter-spacing:-.032em;line-height:.88;margin-bottom:1.25rem}
.modal-pkg-sel{font-size:.68rem;color:var(--fg2);background:rgba(200,245,58,.05);border:1px solid rgba(200,245,58,.12);padding:.55rem .85rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}
.modal-pkg-sel::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lime);flex-shrink:0}
.form-field{display:flex;flex-direction:column;gap:.38rem;margin-bottom:.9rem}
.form-field label{font-size:.57rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg2)}
.label-opt{color:var(--fg3)}
.form-field input,.form-field textarea{background:rgba(240,236,228,.03);border:1px solid var(--fg3);color:var(--fg);font-family:var(--mono);font-size:.76rem;padding:.72rem .9rem;outline:none;resize:vertical;transition:border-color .25s,background .25s;border-radius:0;-webkit-appearance:none;width:100%}
.form-field input:focus,.form-field textarea:focus{border-color:rgba(200,245,58,.35);background:rgba(200,245,58,.03)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--fg3);font-size:.72rem}
.form-field.error input,.form-field.error textarea{border-color:#e05a5a}
.form-error{font-size:.6rem;color:#e88;display:none}
.form-field.error .form-error{display:block}
.form-note{font-size:.62rem;color:var(--fg2);line-height:1.75;border-left:1.5px solid var(--lime);padding:.55rem .85rem;margin-bottom:1.25rem;background:rgba(200,245,58,.03)}
.btn-modal-next{width:100%;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;background:var(--lime);color:var(--bg);border:none;padding:.9rem;cursor:pointer;transition:background .2s,transform .2s;position:relative;overflow:hidden}
.btn-modal-next:hover{background:#d4ff50;transform:translateY(-1px)}
.payment-summary{border:1px solid var(--fg3);margin-bottom:1.25rem;overflow:hidden}
.pay-row{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--fg3);font-size:.72rem}
.pay-row:last-child{border-bottom:none}
.pay-row span{color:var(--fg2)}
.pay-row-hl{background:rgba(200,245,58,.06)}
.pay-row-hl strong{font-size:.9rem}
.pay-note{font-size:.63rem;color:var(--fg2);line-height:1.75;margin-bottom:1.25rem}
.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fg3);margin-bottom:1.1rem}
.btn-pay{background:#0e0e0e;border:none;cursor:pointer;padding:1rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.45rem;transition:background .2s;text-decoration:none}
.btn-pay:hover{background:rgba(200,245,58,.07)}
.pay-icon{font-size:1.2rem}
.btn-pay span:last-child{font-family:var(--mono);font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2)}
.btn-back{background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);padding:.4rem 0;display:block;transition:color .2s}
.btn-back:hover{color:var(--fg)}
.confirm-icon{width:48px;height:48px;border:1px solid rgba(200,245,58,.3);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-size:1.1rem;color:var(--lime);animation:confirmPop .5s cubic-bezier(.16,1,.3,1)}
@keyframes confirmPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.confirm-sub{font-size:.74rem;color:var(--fg2);line-height:1.85;margin-top:.85rem}
.transfer-box{background:rgba(240,236,228,.03);border:1px solid var(--fg3);padding:1rem 1.1rem;margin-top:1rem}
.transfer-row{display:flex;justify-content:space-between;font-size:.72rem;padding:.45rem 0;border-bottom:1px solid var(--fg3)}
.transfer-row:last-of-type{border-bottom:none}
.transfer-row span{color:var(--fg2)}

/* ── MOBILE ── */
@media(max-width:700px){
  .nav-links{display:none}
  .burger{display:flex}
  .mob-menu{display:flex}
  .hero-tag{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .hero-actions{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .stats-row{grid-template-columns:1fr 1fr}
  .stat-cell:last-child{grid-column:1/-1;border-right:none;border-top:1px solid var(--fg3)}
  .stat-cell{border-right:1px solid var(--fg3)}
  .stat-cell:nth-child(2){border-right:none}
  .manifesto-sub{max-width:100%}
  .contact-inner{grid-template-columns:1fr}
  .contact-bg{display:none}
  footer{flex-direction:column;align-items:flex-start;gap:.5rem}
  .footer-links{display:none}
  .pay-methods{grid-template-columns:1fr}
  .pkg-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ticker-inner,.client-ticker-inner,.status-dot,.unavail-dot,.pkg-skel::after{animation:none!important}
  .sr{transition:none;opacity:1;transform:none}
  .test-card{transition:none}
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Saltar al contenido</a>
<div id="progress"></div>

<nav aria-label="Navegación principal">
  <a href="#top" class="logo">AV<span>.</span></a>
  <ul class="nav-links">
    <li><a href="#servicios">Servicios</a></li>
    <li><a href="#por-que">Acerca</a></li>
    <li><a href="/clientes.html">Clientes</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="#proceso">Proceso</a></li>
    <li><a href="#paquetes">Paquetes</a></li>
    <li><a href="#contacto-directo">Contacto</a></li>
  </ul>
  <button class="burger" id="burger" aria-label="Abrir menú" aria-expanded="false" aria-controls="mobMenu">
    <span></span><span></span><span></span>
  </button>
</nav>

<div class="mob-menu" id="mobMenu">
  <ul>
    <li><a href="#servicios">Servicios</a></li>
    <li><a href="#por-que">Acerca</a></li>
    <li><a href="/clientes.html">Clientes</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="#proceso">Proceso</a></li>
    <li><a href="#paquetes">Paquetes</a></li>
    <li><a href="#contacto-directo">Contacto</a></li>
  </ul>
  <p class="mob-menu-foot">alex.villalon.av@gmail.com · Buenos Aires</p>
</div>

<div id="unavailable-banner" role="status">
  <div class="unavail-inner">
    <span class="unavail-dot" aria-hidden="true"></span>
    <p id="unavailMsg">No estoy tomando proyectos nuevos por el momento. Dejame tu email y te aviso cuando abra lugar.</p>
    <input type="email" id="unavailEmail" placeholder="tu@email.com" aria-label="Tu email">
    <button type="button" onclick="submitWaitlist()">Anotarme →</button>
  </div>
</div>

<main id="main">

<header class="hero" id="top">
  <span class="hero-bg-num" aria-hidden="true">AV</span>
  <div class="hero-top">
    <span class="hero-status"><span class="status-dot" aria-hidden="true"></span>Disponible — Buenos Aires</span>
    <span class="hero-tag">Diseño web<br>Marketing digital<br>Video</span>
  </div>
  <h1 class="hero-h1">Hacemos<br>tu web<br><span class="lime">vender.</span></h1>
  <p class="hero-kicker">Diseño y desarrollo web, e-commerce y marketing digital para pymes y emprendedores en Buenos Aires.</p>
  <div class="hero-foot">
    <p class="hero-desc">Soluciones digitales para emprendedores y pymes que quieren resultados reales — no plantillas genéricas, no promesas vacías.</p>
    <div class="hero-actions">
      <button class="btn-lime" type="button" onclick="scrollToId('paquetes')">Empezar un proyecto</button>
      <a class="btn-outline" href="#servicios">Ver servicios ↓</a>
    </div>
  </div>
</header>

<div class="ticker" aria-hidden="true">
  <div class="ticker-inner">
    <span>Páginas web</span><span class="hl">E-commerce</span><span>Landing pages</span><span>Automatizaciones</span><span class="hl">Google Ads</span><span>Facebook &amp; Instagram</span><span>Edición de video</span><span class="hl">SEO</span>
    <span>Páginas web</span><span class="hl">E-commerce</span><span>Landing pages</span><span>Automatizaciones</span><span class="hl">Google Ads</span><span>Facebook &amp; Instagram</span><span>Edición de video</span><span class="hl">SEO</span>
  </div>
</div>

<section class="stats-row" aria-label="Números">
  <div class="stat-cell sr"><span class="stat-num"><span class="lime" data-target="40" data-suffix="+">0+</span></span><span class="stat-label">Proyectos<br>entregados</span></div>
  <div class="stat-cell sr d1"><span class="stat-num"><span class="lime" data-target="100" data-suffix="%">0%</span></span><span class="stat-label">Proyectos<br>personalizados</span></div>
  <div class="stat-cell sr d2"><span class="stat-num">24hs</span><span class="stat-label">Tiempo de<br>respuesta</span></div>
</section>

<section id="servicios" aria-labelledby="servicios-h">
  <p class="section-eyebrow">Servicios — 01</p>
  <h2 id="servicios-h" class="sr" style="font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.03em;margin-bottom:2rem">Lo que hago</h2>
  <ul class="svc-list">
    <li class="svc-item sr" id="paginas-web"><a href="/servicios/paginas-web.html" aria-label="Ver todo sobre Páginas web">
      <span class="svc-n">01</span>
      <h3 class="svc-name">Páginas web</h3>
      <p class="svc-desc">Sitios completos, modernos y 100% personalizados. Web institucional, plataformas, portales — lo que tu negocio necesita.</p>
      <span class="svc-pill">Diseño &amp; Dev</span>
    </a></li>
    <li class="svc-item sr" id="ecommerce"><a href="/servicios/ecommerce.html" aria-label="Ver todo sobre E-commerce">
      <span class="svc-n">02</span>
      <h3 class="svc-name">E-commerce</h3>
      <p class="svc-desc">Tiendas online con pagos, catálogo y envíos configurados. Todo listo para vender desde el día uno.</p>
      <span class="svc-pill">Tienda online</span>
    </a></li>
    <li class="svc-item sr" id="landing-pages"><a href="/servicios/landing-pages.html" aria-label="Ver todo sobre Landing pages">
      <span class="svc-n">03</span>
      <h3 class="svc-name">Landing pages</h3>
      <p class="svc-desc">Páginas diseñadas para convertir visitas en clientes. Ideales para campañas, lanzamientos y promos.</p>
      <span class="svc-pill">Conversión</span>
    </a></li>
    <li class="svc-item sr" id="automatizaciones"><a href="/servicios/automatizaciones.html" aria-label="Ver todo sobre Automatizaciones">
      <span class="svc-n">04</span>
      <h3 class="svc-name">Automatizaciones</h3>
      <p class="svc-desc">Flujos automáticos para responder leads, gestionar correos, facturar y ahorrar tiempo real.</p>
      <span class="svc-pill">Flujos &amp; CRM</span>
    </a></li>
    <li class="svc-item sr" id="publicidad-digital"><a href="/servicios/publicidad-digital.html" aria-label="Ver todo sobre Publicidad digital">
      <span class="svc-n">05</span>
      <h3 class="svc-name">Publicidad digital</h3>
      <p class="svc-desc">Campañas en Google, Facebook e Instagram. Segmentación precisa. Inversión que rinde de verdad.</p>
      <span class="svc-pill">Ads &amp; ROI</span>
    </a></li>
    <li class="svc-item sr" id="edicion-video"><a href="/servicios/edicion-video.html" aria-label="Ver todo sobre Edición de video">
      <span class="svc-n">06</span>
      <h3 class="svc-name">Edición de video</h3>
      <p class="svc-desc">Reels, videos publicitarios y animaciones para redes, anuncios y web. Contenido que engancha.</p>
      <span class="svc-pill">Video &amp; Reels</span>
    </a></li>
  </ul>
</section>

<section id="por-que" aria-labelledby="por-que-h">
  <p class="section-eyebrow">Por qué — 02</p>
  <div class="manifesto-top">
    <h2 id="por-que-h" class="manifesto-h sr">Sin agencias.<br>Sin vueltas.<br><span class="lime">Sin excusas.</span></h2>
    <p class="manifesto-sub sr d1">Trabajo directo con cada cliente — sin intermediarios, sin paquetes inflados. Cada proyecto tiene mi atención completa, de principio a fin.</p>
  </div>
  <div class="reasons">
    <div class="reason sr"><p class="reason-n">01</p><h3 class="reason-title">SEO desde el inicio</h3><p class="reason-body">Tu web está estructurada para Google desde el día uno. No como un extra.</p></div>
    <div class="reason sr d1"><p class="reason-n">02</p><h3 class="reason-title">Diseño con propósito</h3><p class="reason-body">Cada decisión visual tiene un objetivo: convertir. No solo verse bien.</p></div>
    <div class="reason sr d2"><p class="reason-n">03</p><h3 class="reason-title">Sin tecnicismos</h3><p class="reason-body">Te explico todo en lenguaje humano. Sabés qué se hace y por qué.</p></div>
    <div class="reason sr d3"><p class="reason-n">04</p><h3 class="reason-title">Escala con vos</h3><p class="reason-body">Empezamos con lo que necesitás. Crecemos a tu ritmo, sin presión.</p></div>
    <div class="reason sr"><p class="reason-n">05</p><h3 class="reason-title">Entrega real</h3><p class="reason-body">Tiempos cumplidos. Sin demoras eternas ni excusas de último momento.</p></div>
  </div>
</section>

<section id="clientes" aria-labelledby="clientes-h">
  <p class="section-eyebrow">Clientes — 03</p>
  <div class="manifesto-top">
    <h2 id="clientes-h" class="manifesto-h sr" style="font-size:clamp(2.4rem,6.5vw,6rem)">Con quienes<br><span class="lime">ya trabajé.</span></h2>
    <p class="manifesto-sub sr d1">Pymes y emprendedores de distintos rubros que confiaron en el proyecto. Estos son ejemplos — pedime referencias reales cuando quieras.</p>
  </div>

  <div class="client-ticker" aria-hidden="true">
    <div class="client-ticker-inner" id="clientTickerInner"></div>
  </div>

  <div class="test-slider sr" role="region" aria-label="Testimonios de clientes" aria-roledescription="carrusel">
    <div class="test-track" id="testTrack"></div>
    <div class="test-controls">
      <button class="test-arrow" id="testPrev" aria-label="Testimonio anterior">←</button>
      <div class="test-dots" id="testDots"></div>
      <button class="test-arrow" id="testNext" aria-label="Testimonio siguiente">→</button>
    </div>
  </div>
  <p class="client-note">Nombres de ejemplo — reemplazalos por tus clientes reales en <code>CLIENTES_FALLBACK</code>.</p>
  <p class="client-note" style="margin-top:.6rem"><a href="/clientes.html" class="btn-outline">Ver todos los clientes →</a></p>
</section>

<section id="proceso" aria-labelledby="proceso-h">
  <p class="section-eyebrow">Proceso — 04</p>
  <h2 id="proceso-h" class="process-h sr">Cómo<br>trabajo</h2>
  <div class="process-steps">
    <div class="pstep sr"><p class="pstep-n">01</p><h3 class="pstep-title">Diagnóstico</h3><p class="pstep-body">Entiendo tu negocio, objetivos y competencia antes de tocar una sola línea.</p><span class="pstep-line"></span></div>
    <div class="pstep sr d1"><p class="pstep-n">02</p><h3 class="pstep-title">Propuesta</h3><p class="pstep-body">Alcance definido, tiempos reales y precio claro. Sin sorpresas.</p><span class="pstep-line"></span></div>
    <div class="pstep sr d2"><p class="pstep-n">03</p><h3 class="pstep-title">Ejecución</h3><p class="pstep-body">Desarrollo con foco en performance y conversión. Te mantengo informado.</p><span class="pstep-line"></span></div>
    <div class="pstep sr d3"><p class="pstep-n">04</p><h3 class="pstep-title">Lanzamiento</h3><p class="pstep-body">Revisamos juntos, ajustamos y lanzamos. Soporte post-entrega incluido.</p><span class="pstep-line"></span></div>
  </div>
</section>

<section id="paquetes" aria-labelledby="paquetes-h">
  <p class="section-eyebrow">Paquetes — 05</p>
  <div class="pkg-intro">
    <h2 id="paquetes-h" class="pkg-h sr">Elegí tu paquete.<br>Pagá el <span class="lime">50%.</span><br>Arrancamos.</h2>
    <p class="pkg-sub sr d1">Sin reuniones previas. Completás el brief, pagás la mitad y arranco. El saldo al entregar.</p>
  </div>
  <div class="pkg-loading-state" id="pkgLoading">
    <div class="pkg-skel"></div><div class="pkg-skel"></div><div class="pkg-skel"></div><div class="pkg-skel"></div>
  </div>
  <div class="pkg-grid" id="pkgGrid" style="display:none"></div>
  <p class="pkg-note">¿Proyecto fuera de estos paquetes? <a href="#contacto-directo">Escribime directo →</a></p>
</section>

<section id="contacto-directo" aria-labelledby="contacto-h">
  <span class="contact-bg" aria-hidden="true">AV</span>
  <div class="contact-inner">
    <div>
      <h2 id="contacto-h" class="contact-h sr">¿Proyecto<br><em>a medida?</em></h2>
      <p class="contact-sub sr d1">Para proyectos fuera de los paquetes estándar, escribime directamente.</p>
      <div class="contact-btns">
        <a class="btn-dark sr d1" id="contactWaBtn" href="#" target="_blank" rel="noopener">
          <svg viewBox="0 0 32 32" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M16 3C9 3 3.3 8.6 3.3 15.5c0 2.7.9 5.2 2.4 7.3L4 29l6.4-1.7c2 1.1 4.3 1.7 6.6 1.7 7 0 12.7-5.6 12.7-12.5S23 3 16 3zm0 22.8c-2 0-4-.5-5.7-1.6l-.4-.2-4.2 1.1 1.1-4-.3-.4a10.1 10.1 0 0 1-1.7-5.6c0-5.6 4.6-10.1 10.2-10.1s10.2 4.5 10.2 10.1S21.6 25.8 16 25.8zm5.6-7.6c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-1.7-.7-2.9-1.6-4-3.2-.2-.3 0-.5.2-.7.2-.2.4-.5.6-.7.2-.2.3-.4.1-.7-.1-.3-1-2.3-1.2-2.7-.2-.4-.4-.3-.6-.3h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.7s1.2 3.2 1.4 3.4c.2.2 2.3 3.5 5.7 4.9 2.9 1.1 3.3.9 3.9.8.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.2-.6-.4z"/></svg>
          WhatsApp
        </a>
        <a class="btn-stroke sr d2" href="mailto:alex.villalon.av@gmail.com">Email</a>
      </div>
    </div>
    <div>
      <p class="c-label sr">Redes</p>
      <ul class="c-social sr d1">
        <li><a href="https://www.instagram.com/alex_villalon.ok/" target="_blank" rel="noopener">Instagram</a></li>
        <li><a href="https://www.tiktok.com/@alex_villalon.ok" target="_blank" rel="noopener">TikTok</a></li>
      </ul>
    </div>
  </div>
</section>

</main>

<footer>
  <p class="footer-l">Alex Villalón — Digital</p>
  <ul class="footer-links">
    <li><a href="#servicios">Servicios</a></li>
    <li><a href="#por-que">Acerca</a></li>
    <li><a href="/clientes.html">Clientes</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="#paquetes">Paquetes</a></li>
    <li><a href="#contacto-directo">Contacto</a></li>
  </ul>
  <p class="footer-r">© <span id="year">2026</span> — Buenos Aires, AR</p>
</footer>

<!-- WhatsApp flotante -->
<a class="wa-float" id="waFloat" href="#" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
  <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16 3C9 3 3.3 8.6 3.3 15.5c0 2.7.9 5.2 2.4 7.3L4 29l6.4-1.7c2 1.1 4.3 1.7 6.6 1.7 7 0 12.7-5.6 12.7-12.5S23 3 16 3zm0 22.8c-2 0-4-.5-5.7-1.6l-.4-.2-4.2 1.1 1.1-4-.3-.4a10.1 10.1 0 0 1-1.7-5.6c0-5.6 4.6-10.1 10.2-10.1s10.2 4.5 10.2 10.1S21.6 25.8 16 25.8zm5.6-7.6c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-1.7-.7-2.9-1.6-4-3.2-.2-.3 0-.5.2-.7.2-.2.4-.5.6-.7.2-.2.3-.4.1-.7-.1-.3-1-2.3-1.2-2.7-.2-.4-.4-.3-.6-.3h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.7s1.2 3.2 1.4 3.4c.2.2 2.3 3.5 5.7 4.9 2.9 1.1 3.3.9 3.9.8.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.2-.6-.4z"/></svg>
  <span class="wa-text">Escribime</span>
</a>

<!-- ── MODAL ── -->
<div id="modal">
  <div class="modal-backdrop" onclick="closeModal()"></div>
  <div class="modal-box" role="dialog" aria-modal="true" aria-labelledby="modal-h-live">
    <button class="modal-close" onclick="closeModal()" aria-label="Cerrar">✕</button>

    <div class="modal-steps" id="modalSteps">
      <div class="modal-step-dot active" id="sdot1"></div>
      <div class="modal-step-line"></div>
      <div class="modal-step-dot" id="sdot2"></div>
      <div class="modal-step-line"></div>
      <div class="modal-step-dot" id="sdot3"></div>
    </div>

    <!-- STEP 1: BRIEF -->
    <div id="step1">
      <p class="modal-eyebrow">Paso 1 de 2 — Brief</p>
      <h3 class="modal-h" id="modal-h-live">Contanos tu<br><span class="lime">proyecto</span></h3>
      <p class="modal-pkg-sel">Paquete: <strong id="modalPkgName">—</strong> · USD <strong id="modalPkgPrice">—</strong></p>

      <div class="form-field" id="fld-nombre">
        <label for="fNombre">Tu nombre</label>
        <input type="text" id="fNombre" placeholder="Ej: María García">
        <span class="form-error">Contanos tu nombre.</span>
      </div>
      <div class="form-field">
        <label for="fNegocio">Tu negocio / rubro</label>
        <input type="text" id="fNegocio" placeholder="Ej: Tienda de ropa, consultora…">
      </div>
      <div class="form-field" id="fld-email">
        <label for="fEmail">Tu email</label>
        <input type="email" id="fEmail" placeholder="hola@tunegocio.com">
        <span class="form-error">Ingresá un email válido.</span>
      </div>
      <div class="form-field" id="fld-brief">
        <label for="fBrief">¿Qué necesitás lograr?</label>
        <textarea id="fBrief" rows="3" placeholder="Objetivo principal, referencias de estilo, colores de marca…"></textarea>
        <span class="form-error">Contanos brevemente tu proyecto.</span>
      </div>
      <div class="form-field">
        <label for="fHosting">¿Tenés dominio y hosting? <span class="label-opt">(opcional)</span></label>
        <input type="text" id="fHosting" placeholder="Ej: Sí, en Hostinger / No, necesito ayuda">
      </div>
      <p class="form-note">Al avanzar vas a elegir el método de pago del 50%. Una vez confirmado el pago arranco con tu proyecto.</p>
      <button class="btn-modal-next" id="btnStep2" onclick="goStep2()">Continuar al pago →</button>
    </div>

    <!-- STEP 2: PAGO -->
    <div id="step2" style="display:none">
      <p class="modal-eyebrow">Paso 2 de 2 — Pago</p>
      <h3 class="modal-h">Confirmá el<br><span class="lime">50%</span></h3>
      <div class="payment-summary">
        <div class="pay-row"><span>Paquete</span><strong id="payPkg">—</strong></div>
        <div class="pay-row"><span>Total</span><strong id="payTotal">USD —</strong></div>
        <div class="pay-row pay-row-hl"><span>A pagar ahora (50%)</span><strong id="payNow" class="lime">USD —</strong></div>
        <div class="pay-row"><span>Al entregar</span><strong id="payLater">USD —</strong></div>
      </div>
      <p class="pay-note">Elegí cómo pagar. En todos los casos te contacto en menos de 24 hs para coordinar el inicio.</p>
      <div class="pay-methods">
        <a id="btnMP" href="https://link.mercadopago.com.ar/alexvillalon" target="_blank" rel="noopener" class="btn-pay" onclick="confirmPay('Mercado Pago')">
          <span class="pay-icon" aria-hidden="true">💳</span><span>Mercado Pago</span>
        </a>
        <button type="button" class="btn-pay" onclick="confirmPay('Transferencia')">
          <span class="pay-icon" aria-hidden="true">🏦</span><span>Transferencia / PayPal</span>
        </button>
        <button type="button" class="btn-pay" onclick="confirmPay('Wise / Cripto')">
          <span class="pay-icon" aria-hidden="true">🌐</span><span>Wise / Cripto</span>
        </button>
      </div>
      <p class="pay-note" style="margin-top:-.75rem">💡 Mercado Pago cobra en pesos argentinos al tipo de cambio del día. Transferencia y Wise/Cripto quedan en USD.</p>
      <button type="button" class="btn-back" onclick="goStep1()">← Volver al brief</button>
    </div>

    <!-- STEP 3: CONFIRMACIÓN -->
    <div id="step3" style="display:none">
      <div class="confirm-icon" aria-hidden="true">✓</div>
      <h3 class="modal-h">¡Proyecto<br><span class="lime">recibido!</span></h3>
      <p class="confirm-sub" id="confirmMsg">Tu pedido quedó registrado.</p>
      <div id="transferData" style="display:none" class="transfer-box">
        <p class="c-label" style="margin-bottom:.75rem">Datos para transferencia</p>
        <div class="transfer-row"><span>Alias</span><strong>alex.villalon</strong></div>
        <div class="transfer-row"><span>Banco</span><strong>Mercado Pago / cualquier banco ARG</strong></div>
        <p style="font-size:.65rem;color:var(--fg2);margin-top:.75rem">Enviá el comprobante a <strong>alex.villalon.av@gmail.com</strong> con tu nombre y paquete en el asunto.</p>
      </div>
      <a id="mpFinalBtn" href="https://link.mercadopago.com.ar/alexvillalon" target="_blank" rel="noopener" class="btn-modal-next" style="display:none;text-align:center;margin-top:1rem;text-decoration:none">Ir a Mercado Pago →</a>
      <a id="waConfirmBtn" href="#" target="_blank" rel="noopener" class="btn-modal-next" style="display:none;text-align:center;margin-top:.75rem;text-decoration:none;background:transparent;border:1px solid rgba(200,245,58,.35);color:var(--lime)">Avisarme también por WhatsApp →</a>
      <button type="button" class="btn-modal-next" style="margin-top:.75rem;background:transparent;border:1px solid var(--fg3);color:var(--fg2)" onclick="closeModal()">Cerrar</button>
    </div>
  </div>
</div>

<script>
/* ─────────────────────────────────────────────
   CONFIG — editá estas constantes
───────────────────────────────────────────── */
const APPS_SCRIPT_URL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTxLsYc93oipe4-r2FdzJ0X9-cinfxYp2UXl-zWoHUFmUZc3JB764VRwqwpk0zzaGYT3JEZOILsDLX8/pub?output=csv';
// ↑ Este mismo Apps Script sirve los precios (doGet) y recibe pedidos/waitlist (doPost).
// Con el nuevo apps-script.gs NO hace falta crear ninguna pestaña a mano: la primera vez
// que lo uses (menú "⚙️ Web" en la Sheet → "Generar hojas y datos de ejemplo", o directamente
// la primera visita a la web) se crean solas las pestañas Config / Paquetes / Pedidos / Waitlist,
// con datos de ejemplo. Para cambiar un precio: abrí la Sheet → pestaña "Paquetes" → editá "precio".
// No hace falta tocar este código ni volver a deployar. Ver apps-script.gs para el detalle.

// ← Reemplazá con tu número real de WhatsApp: código país + área + número, sin "+" ni espacios ni guiones.
const WHATSAPP_NUMBER = '5491157741618';
const WHATSAPP_MSG = 'Hola Alex! Vi tu web y quiero armar mi proyecto 🚀';

/* ─── PAQUETES FALLBACK (mientras no tenés Sheets o hay error) ─── */
const PAQUETES_FALLBACK = [
  { id:'1', nombre:'Landing Pro', precio:350, tag:'Más popular', featured:false,
    features:['Landing page 1 página','Diseño 100% a medida','Formulario de contacto','SEO básico incluido','Mobile-first responsive','Entrega en 7 días hábiles'] },
  { id:'2', nombre:'Web Completa', precio:800, tag:'★ Recomendado', featured:true,
    features:['Sitio web hasta 5 páginas','Diseño editorial personalizado','CMS para editar contenido','SEO on-page completo','Analytics integrado','Formularios y automatizaciones','Mobile-first responsive','Entrega en 14 días hábiles'] },
  { id:'3', nombre:'Tienda Online', precio:1200, tag:'E-commerce', featured:false,
    features:['Tienda online completa','Hasta 50 productos cargados','Pagos online integrados','Gestión de envíos','Panel de administración','SEO para productos','Mobile-first responsive','Entrega en 21 días hábiles'] },
  { id:'4', nombre:'Marketing + Web', precio:600, tag:'Presencia total', featured:false, monthly:true,
    features:['Web incluida sin costo extra','Gestión de Google Ads','Facebook & Instagram Ads','Reportes mensuales','Optimización continua','Soporte por WhatsApp','Sin permanencia mínima'] },
];

/* ─── CLIENTES / TESTIMONIOS (placeholder — reemplazá con clientes reales) ─── */
const CLIENTES_FALLBACK = [
  { nombre:'Bazar Once', rol:'Retail — E-commerce', rating:5, quote:'La tienda quedó lista en dos semanas y desde el primer mes empezamos a vender online. Todo el proceso fue claro, sin vueltas.' },
  { nombre:'Estudio Craft', rol:'Arquitectura', rating:5, quote:'Necesitábamos una web que se viera tan prolija como nuestros proyectos. Alex entendió eso desde la primera charla.' },
  { nombre:'Fisio Norte', rol:'Salud — Clínica', rating:5, quote:'Las campañas de Google Ads nos trajeron consultas reales desde la primera semana. Reportes claros, sin relleno.' },
  { nombre:'Café del Puerto', rol:'Gastronomía', rating:5, quote:'La landing para el lanzamiento convirtió mucho mejor que lo que esperábamos. Se notó el trabajo de SEO desde el día uno.' },
  { nombre:'Molino Textil', rol:'Indumentaria', rating:5, quote:'Las automatizaciones nos ahorran horas por semana respondiendo pedidos. Un cambio real para el equipo.' },
];
const CLIENT_LOGO_NAMES = CLIENTES_FALLBACK.map(c => c.nombre);

/* ─── HELPERS ─── */
function scrollToId(id){
  const el = document.getElementById(id);
  if(el) el.scrollIntoView({behavior:'smooth', block:'start'});
}
function esc(str){
  return String(str ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

/* ─── WHATSAPP LINKS ─── */
function buildWaLink(msg){
  return `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(msg || WHATSAPP_MSG)}`;
}
document.getElementById('waFloat').href = buildWaLink();
document.getElementById('contactWaBtn').href = buildWaLink('Hola Alex! Quiero contarte sobre un proyecto a medida.');

/* ─── CLIENT LOGO TICKER ─── */
(function renderClientTicker(){
  const wrap = document.getElementById('clientTickerInner');
  const doubled = CLIENT_LOGO_NAMES.concat(CLIENT_LOGO_NAMES);
  wrap.innerHTML = doubled.map(n => `<span>${esc(n)}</span>`).join('');
})();

/* ─── TESTIMONIAL CAROUSEL ─── */
let testIndex = 0;
let testTimer = null;
function renderTestimonials(){
  const track = document.getElementById('testTrack');
  const dots = document.getElementById('testDots');
  track.innerHTML = CLIENTES_FALLBACK.map((c,i) => `
    <div class="test-card${i===0?' active':''}" data-i="${i}">
      <p class="test-quote">${esc(c.quote)}</p>
      <div class="test-meta">
        <div class="test-who">
          <span class="test-name">${esc(c.nombre)}</span>
          <span class="test-role">${esc(c.rol)}</span>
        </div>
        <span class="test-stars" aria-hidden="true">${'★'.repeat(c.rating || 5)}</span>
      </div>
    </div>
  `).join('');
  dots.innerHTML = CLIENTES_FALLBACK.map((_,i) => `<button type="button" class="test-dot${i===0?' active':''}" data-i="${i}" aria-label="Ver testimonio ${i+1}"></button>`).join('');
  dots.querySelectorAll('.test-dot').forEach(btn => btn.addEventListener('click', () => goToTest(+btn.dataset.i)));
}
function goToTest(i){
  const cards = document.querySelectorAll('.test-card');
  const dots = document.querySelectorAll('.test-dot');
  testIndex = (i + cards.length) % cards.length;
  cards.forEach((c,idx) => c.classList.toggle('active', idx===testIndex));
  dots.forEach((d,idx) => d.classList.toggle('active', idx===testIndex));
  restartTestAutoplay();
}
function restartTestAutoplay(){
  clearInterval(testTimer);
  testTimer = setInterval(() => goToTest(testIndex+1), 6000);
}
document.getElementById('testPrev').addEventListener('click', () => goToTest(testIndex-1));
document.getElementById('testNext').addEventListener('click', () => goToTest(testIndex+1));
renderTestimonials();
restartTestAutoplay();
// pausar autoplay si el usuario interactúa con el slider (hover/foco) o pestaña oculta
document.getElementById('testTrack').closest('.test-slider').addEventListener('mouseenter', () => clearInterval(testTimer));
document.getElementById('testTrack').closest('.test-slider').addEventListener('mouseleave', restartTestAutoplay);
document.addEventListener('visibilitychange', () => { if(document.hidden) clearInterval(testTimer); else restartTestAutoplay(); });
// swipe táctil simple
(function(){
  const el = document.getElementById('testTrack');
  let startX = null;
  el.addEventListener('touchstart', e => startX = e.touches[0].clientX, {passive:true});
  el.addEventListener('touchend', e => {
    if(startX === null) return;
    const dx = e.changedTouches[0].clientX - startX;
    if(Math.abs(dx) > 40) goToTest(testIndex + (dx < 0 ? 1 : -1));
    startX = null;
  }, {passive:true});
})();

function parseCsvPackages(csvText){
  const rows = [];
  let row = [];
  let value = '';
  let inQuotes = false;

  const pushValue = () => {
    row.push(value);
    value = '';
  };

  for(let i = 0; i < csvText.length; i++){
    const ch = csvText[i];
    if(ch === '"'){
      if(inQuotes && csvText[i + 1] === '"'){
        value += '"';
        i++;
      } else {
        inQuotes = !inQuotes;
      }
    } else if(ch === ',' && !inQuotes){
      pushValue();
    } else if((ch === '\n' || ch === '\r') && !inQuotes){
      if(ch === '\r' && csvText[i + 1] === '\n') i++;
      pushValue();
      if(row.some(v => String(v).trim())) rows.push(row);
      row = [];
    } else {
      value += ch;
    }
  }

  if(value.length || row.length) {
    pushValue();
    if(row.some(v => String(v).trim())) rows.push(row);
  }

  if(!rows.length) return [];

  const headers = rows[0].map(h => String(h).trim().toLowerCase());
  return rows.slice(1).filter(r => r.some(v => String(v || '').trim())).map(r => {
    const values = headers.reduce((acc, header, idx) => {
      acc[header] = r[idx] ?? '';
      return acc;
    }, {});

    const nombre = values.nombre || values['package name'] || values.paquete || values['package'] || '';
    const precio = Number(values.precio || values.price || values['precio usd'] || values['price usd'] || values.usd || 0);
    const tag = values.tag || values.etiqueta || values['package type'] || values['tipo'] || 'Destacado';
    const featured = String(values.featured || values.destacado || values['featured?'] || '').trim().toLowerCase() === 'true';
    const monthly = String(values.monthly || values.mensual || '').trim().toLowerCase() === 'true';
    const featuresRaw = values.features || values['caracteristicas'] || values.beneficios || values['benefits'] || '';
    const features = String(featuresRaw).split('|').map(s => s.trim()).filter(Boolean);

    return {
      id: values.id || values['id'] || '',
      nombre,
      precio: Number.isFinite(precio) ? precio : 0,
      tag,
      featured,
      monthly,
      features,
    };
  }).filter(p => p.nombre);
}

/* ─── LEER PRECIOS/DISPONIBILIDAD DESDE LA FUENTE DE DATOS ─── */
async function loadFromSheets(){
  try {
    if(!APPS_SCRIPT_URL || APPS_SCRIPT_URL.includes('TU_URL_DE_APPS_SCRIPT')){
      renderPaquetes(PAQUETES_FALLBACK, true, '');
      return;
    }

    const res = await fetch(APPS_SCRIPT_URL, { method:'GET' });
    if(!res.ok) throw new Error(`HTTP ${res.status}`);

    const contentType = (res.headers.get('content-type') || '').toLowerCase();
    if(contentType.includes('application/json')){
      const data = await res.json();
      if(data.error) throw new Error(data.error);
      const paquetes = Array.isArray(data.paquetes) ? data.paquetes : [];
      renderPaquetes(paquetes.length ? paquetes : PAQUETES_FALLBACK, data.disponible !== false, data.mensaje || '');
      return;
    }

    const csvText = await res.text();
    const paquetes = parseCsvPackages(csvText);
    renderPaquetes(paquetes.length ? paquetes : PAQUETES_FALLBACK, true, '');
  } catch(e){
    console.warn('No se pudo leer la fuente de datos, usando fallback', e);
    renderPaquetes(PAQUETES_FALLBACK, true, '');
  }
}

function renderPaquetes(paquetes, disponible, mensajeNo){
  const banner = document.getElementById('unavailable-banner');
  if(!disponible){
    banner.classList.add('show');
    if(mensajeNo) document.getElementById('unavailMsg').textContent = mensajeNo;
  }

  const grid = document.getElementById('pkgGrid');
  const loading = document.getElementById('pkgLoading');

  grid.innerHTML = paquetes.map(p => `
    <div class="pkg-card sr${p.featured ? ' pkg-card-featured' : ''}">
      <div class="pkg-top">
        <span class="pkg-tag${p.featured ? ' pkg-tag-dark' : ''}">${esc(p.tag||'')}</span>
        <h3 class="pkg-name">${esc(p.nombre)}</h3>
        <p class="pkg-price"><span class="pkg-num">USD ${Number(p.precio).toLocaleString('es-AR')}</span>${p.monthly ? '<span class="pkg-mo">/mes</span>' : ''}</p>
        <p class="pkg-price-sub">50% ahora · 50% al entregar</p>
      </div>
      <ul class="pkg-features">
        ${p.features.map(f => `<li>${esc(f)}</li>`).join('')}
      </ul>
      ${disponible
        ? `<button type="button" class="btn-pkg ${p.featured ? 'btn-pkg-lime' : 'btn-pkg-fill'}" onclick="openModal('${esc(p.nombre).replace(/'/g,"\\'")}', ${Number(p.precio)})">Contratar ahora →</button>`
        : `<button type="button" class="btn-pkg btn-pkg-disabled" disabled>No disponible</button>`
      }
    </div>
  `).join('');

  loading.style.display = 'none';
  grid.style.display = 'grid';
  document.querySelectorAll('.pkg-card.sr:not(.on)').forEach(el => obs.observe(el));
}

function submitWaitlist(){
  const email = document.getElementById('unavailEmail').value.trim();
  if(!email || !email.includes('@')){
    document.getElementById('unavailEmail').focus();
    return;
  }

  if(APPS_SCRIPT_URL.includes('docs.google.com') || APPS_SCRIPT_URL.includes('pub?output=csv')){
    document.getElementById('unavailMsg').textContent = '¡Listo! Te aviso apenas tenga lugar. Gracias por escribir.';
    document.getElementById('unavailEmail').style.display = 'none';
    document.querySelector('#unavailable-banner button').style.display = 'none';
    return;
  }

  fetch(APPS_SCRIPT_URL, {
    method:'POST', mode:'no-cors',
    headers:{'Content-Type':'text/plain;charset=utf-8'},
    body: JSON.stringify({ tipo:'waitlist', email })
  }).catch(()=>{});
  document.getElementById('unavailMsg').textContent = '¡Listo! Te aviso apenas tenga lugar. Gracias por escribir.';
  document.getElementById('unavailEmail').style.display = 'none';
  document.querySelector('#unavailable-banner button').style.display = 'none';
}

/* ─── SCROLL PROGRESS + NAV ─── */
const prog = document.getElementById('progress');
const navEl = document.querySelector('nav');
window.addEventListener('scroll', () => {
  const pct = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
  prog.style.width = Math.min(pct,100) + '%';
  navEl.classList.toggle('scrolled', window.scrollY > 60);
}, {passive:true});

/* ─── REVEAL ─── */
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('on'); });
}, {threshold:.08});
document.querySelectorAll('.sr').forEach(el => obs.observe(el));

/* ─── COUNTERS ─── */
function animCount(el){
  const target = +el.dataset.target, suffix = el.dataset.suffix || '';
  const inc = target / (1200/16);
  let cur = 0;
  const t = setInterval(() => {
    cur = Math.min(cur+inc, target);
    el.textContent = Math.round(cur) + suffix;
    if(cur >= target) clearInterval(t);
  }, 16);
}
const countObs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if(e.isIntersecting && e.target.dataset.target){ animCount(e.target); countObs.unobserve(e.target); }
  });
}, {threshold:.5});
document.querySelectorAll('[data-target]').forEach(el => countObs.observe(el));

/* ─── HAMBURGER ─── */
const burger = document.getElementById('burger');
const mob = document.getElementById('mobMenu');
function closeMob(){
  mob.classList.remove('open'); burger.classList.remove('open');
  burger.setAttribute('aria-expanded','false'); document.body.style.overflow = '';
}
burger.addEventListener('click', () => {
  const o = mob.classList.toggle('open');
  burger.classList.toggle('open', o);
  burger.setAttribute('aria-expanded', o);
  document.body.style.overflow = o ? 'hidden' : '';
});
mob.querySelectorAll('a').forEach(a => a.addEventListener('click', closeMob));

/* ─── MODAL ─── */
let currentPkg = '', currentPrice = 0;
function openModal(pkg, price){
  currentPkg = pkg; currentPrice = price;
  document.getElementById('modalPkgName').textContent = pkg;
  document.getElementById('modalPkgPrice').textContent = Number(price).toLocaleString('es-AR');
  showStep(1);
  document.getElementById('modal').classList.add('open');
  document.body.style.overflow = 'hidden';
  setTimeout(() => document.getElementById('fNombre').focus(), 60);
}
function closeModal(){
  document.getElementById('modal').classList.remove('open');
  document.body.style.overflow = '';
}
function showStep(n){
  [1,2,3].forEach(i => {
    document.getElementById('step'+i).style.display = (i===n ? 'block' : 'none');
    const dot = document.getElementById('sdot'+i);
    dot.classList.remove('active','done');
    if(i===n) dot.classList.add('active');
    else if(i<n) dot.classList.add('done');
  });
}
function clearFieldErrors(){
  ['fld-nombre','fld-email','fld-brief'].forEach(id => document.getElementById(id).classList.remove('error'));
}
function goStep1(){ showStep(1); }
function goStep2(){
  clearFieldErrors();
  const nombre = document.getElementById('fNombre').value.trim();
  const email = document.getElementById('fEmail').value.trim();
  const brief = document.getElementById('fBrief').value.trim();
  let ok = true;
  if(!nombre){ document.getElementById('fld-nombre').classList.add('error'); ok = false; }
  if(!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){ document.getElementById('fld-email').classList.add('error'); ok = false; }
  if(!brief){ document.getElementById('fld-brief').classList.add('error'); ok = false; }
  if(!ok) return;

  const half = Math.round(currentPrice/2);
  document.getElementById('payPkg').textContent = currentPkg;
  document.getElementById('payTotal').textContent = 'USD ' + currentPrice.toLocaleString('es-AR');
  document.getElementById('payNow').textContent = 'USD ' + half.toLocaleString('es-AR');
  document.getElementById('payLater').textContent = 'USD ' + (currentPrice-half).toLocaleString('es-AR');
  showStep(2);
  const h2 = document.querySelector('#step2 .modal-h');
  if(h2){ h2.setAttribute('tabindex','-1'); h2.focus(); }
}
function confirmPay(metodo){
  const payload = {
    tipo: 'pedido',
    paquete: currentPkg,
    precio: currentPrice,
    nombre: document.getElementById('fNombre').value.trim(),
    email: document.getElementById('fEmail').value.trim(),
    negocio: document.getElementById('fNegocio').value.trim(),
    hosting: document.getElementById('fHosting').value.trim(),
    brief: document.getElementById('fBrief').value.trim(),
    metodo,
  };

  // Se manda a la Sheet en modo no-cors: no podemos confirmar si llegó bien.
  // Por eso además dejamos armado un WhatsApp de respaldo (botón en el paso 3),
  // así el pedido nunca se pierde aunque falle el registro automático.
  fetch(APPS_SCRIPT_URL, {
    method:'POST', mode:'no-cors',
    headers:{'Content-Type':'text/plain;charset=utf-8'},
    body: JSON.stringify(payload)
  }).catch(()=>{});

  const half = Math.round(currentPrice/2);
  const msgs = {
    'Mercado Pago': `Te llevamos a Mercado Pago para pagar el equivalente en pesos a USD ${half.toLocaleString('es-AR')}. Te escribo por email en menos de 24hs para coordinar todo.`,
    'Transferencia': `Transferí USD ${half.toLocaleString('es-AR')} (o su equivalente en pesos) usando los datos de abajo y enviame el comprobante.`,
    'Wise / Cripto': `Te contacto por email en las próximas horas para coordinar el pago de USD ${half.toLocaleString('es-AR')} por Wise o cripto.`,
  };
  document.getElementById('confirmMsg').textContent = msgs[metodo] || 'Tu pedido quedó registrado. Te contacto pronto.';
  document.getElementById('transferData').style.display = (metodo === 'Transferencia') ? 'block' : 'none';
  document.getElementById('mpFinalBtn').style.display = (metodo === 'Mercado Pago') ? 'block' : 'none';

  const waMsg = `Hola Alex! Quiero confirmar mi pedido 🚀\n\n`
    + `Paquete: ${payload.paquete}\n`
    + `Nombre: ${payload.nombre}\n`
    + `Email: ${payload.email}\n`
    + `Método de pago: ${payload.metodo}\n`
    + `A pagar ahora: USD ${half.toLocaleString('es-AR')}`;
  const waBtn = document.getElementById('waConfirmBtn');
  waBtn.href = buildWaLink(waMsg);
  waBtn.style.display = 'block';

  showStep(3);
  const h3 = document.querySelector('#step3 .modal-h');
  if(h3){ h3.setAttribute('tabindex','-1'); h3.focus(); }
}
document.addEventListener('keydown', e => { if(e.key === 'Escape') closeModal(); });

/* ─── FOOTER YEAR ─── */
document.getElementById('year').textContent = new Date().getFullYear();

/* ─── INICIAR ─── */
loadFromSheets();
</script>
</body>
</html>