<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Custmix — Indumentaria personalizada</title>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<style>
  :root {
    --navy: #111E35;
    --navy-mid: #1B2A4A;
    --blue: #2E4A8A;
    --blue-light: #3A5CAA;
    --white: #F7F8FA;
    --off: #E8EBF2;
    --gray: #8A93A8;
    --text: #1A1F2E;
    --accent: #FFFFFF;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Barlow', sans-serif; background: var(--white); color: var(--text); }

  /* NAV */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5%; height: 64px;
    background: rgba(17,30,53,0.97); backdrop-filter: blur(8px);
  }
  .nav-logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px; font-weight: 900; letter-spacing: 1px;
    color: var(--white); text-decoration: none;
  }
  .nav-logo span { color: var(--blue-light); }
  .nav-links { display: flex; gap: 32px; list-style: none; }
  .nav-links a { color: var(--gray); font-size: 14px; font-weight: 500; text-decoration: none; letter-spacing: 0.5px; transition: color 0.2s; }
  .nav-links a:hover { color: var(--white); }
  .nav-cta {
    background: var(--blue); color: var(--white);
    padding: 9px 20px; border-radius: 6px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--blue-light); }

  /* HERO */
  #hero {
    min-height: 100vh; background: var(--navy);
    display: flex; flex-direction: column; justify-content: center;
    padding: 120px 5% 80px;
    position: relative; overflow: hidden;
  }
  .hero-bg-lines {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
  }
  .hero-inner { max-width: 680px; position: relative; z-index: 2; }
  .hero-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 3px;
    color: var(--blue-light); text-transform: uppercase; margin-bottom: 20px;
  }
  .hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(56px, 9vw, 100px);
    font-weight: 900; line-height: 0.92;
    color: var(--white); text-transform: uppercase; letter-spacing: -1px;
    margin-bottom: 24px;
  }
  .hero-title em { color: var(--blue-light); font-style: normal; }
  .hero-sub {
    font-size: 18px; font-weight: 300; color: var(--gray);
    line-height: 1.6; max-width: 480px; margin-bottom: 40px;
  }
  .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
  .btn-primary {
    background: var(--blue); color: var(--white);
    padding: 14px 28px; border-radius: 6px;
    font-size: 15px; font-weight: 600; text-decoration: none;
    transition: background 0.2s; display: inline-flex; align-items: center; gap: 8px;
  }
  .btn-primary:hover { background: var(--blue-light); }
  .btn-outline {
    border: 1.5px solid rgba(255,255,255,0.2); color: var(--white);
    padding: 14px 28px; border-radius: 6px;
    font-size: 15px; font-weight: 500; text-decoration: none;
    transition: border-color 0.2s;
  }
  .btn-outline:hover { border-color: rgba(255,255,255,0.5); }
  .hero-badges {
    display: flex; gap: 32px; margin-top: 60px; flex-wrap: wrap;
  }
  .hero-badge { display: flex; flex-direction: column; }
  .hero-badge-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 36px; font-weight: 900; color: var(--white); line-height: 1;
  }
  .hero-badge-label { font-size: 12px; color: var(--gray); font-weight: 400; margin-top: 2px; }

  /* SECTIONS */
  section { padding: 90px 5%; }
  .section-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 3px;
    color: var(--blue); text-transform: uppercase; margin-bottom: 12px;
  }
  .section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(32px, 5vw, 52px); font-weight: 800;
    color: var(--navy); line-height: 1.05; text-transform: uppercase;
    margin-bottom: 16px;
  }
  .section-sub { font-size: 16px; color: #5A6478; line-height: 1.7; max-width: 540px; }

  /* NOSOTROS */
  #nosotros { background: var(--white); }
  .nosotros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 56px; }
  .nosotros-text p { font-size: 16px; color: #5A6478; line-height: 1.8; margin-bottom: 20px; }
  .nosotros-text strong { color: var(--navy); }
  .features { display: flex; flex-direction: column; gap: 20px; }
  .feature {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 20px; background: var(--off); border-radius: 10px;
  }
  .feature-icon {
    width: 40px; height: 40px; background: var(--navy-mid);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .feature-icon svg { width: 20px; height: 20px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; }
  .feature-title { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
  .feature-desc { font-size: 14px; color: var(--gray); line-height: 1.5; }

  /* SEGMENTOS */
  #segmentos { background: var(--navy); }
  #segmentos .section-title { color: var(--white); }
  #segmentos .section-sub { color: var(--gray); }
  .seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .seg-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 32px 28px;
    transition: background 0.2s, border-color 0.2s;
  }
  .seg-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(58,92,170,0.5); }
  .seg-icon {
    width: 48px; height: 48px; background: var(--navy-mid);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
  }
  .seg-icon svg { width: 24px; height: 24px; fill: none; stroke: #7A9FE8; stroke-width: 2; stroke-linecap: round; }
  .seg-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 800; color: var(--white);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
  }
  .seg-desc { font-size: 14px; color: var(--gray); line-height: 1.6; margin-bottom: 20px; }
  .seg-items { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .seg-items li { font-size: 13px; color: #8A93A8; display: flex; align-items: center; gap: 8px; }
  .seg-items li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-light); flex-shrink: 0; }

  /* CONFIGURADOR */
  #configurador { background: var(--off); }
  .config-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .config-widget {
    background: var(--white); border-radius: 16px;
    padding: 32px; box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  }
  .config-title-inner {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; font-weight: 700; color: var(--navy);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 20px;
  }
  .vista-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
  .vista-tab {
    flex: 1; padding: 8px; font-size: 13px; font-weight: 500;
    border: 1.5px solid var(--off); border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--gray); transition: all 0.15s;
  }
  .vista-tab.active { background: var(--navy-mid); color: white; border-color: var(--navy-mid); }
  .color-section { margin-bottom: 18px; }
  .color-label { font-size: 12px; color: var(--gray); margin-bottom: 8px; font-weight: 500; letter-spacing: 0.3px; }
  .color-row { display: flex; flex-wrap: wrap; gap: 7px; }
  .color-swatch {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid transparent; cursor: pointer;
    transition: transform 0.1s;
  }
  .color-swatch:hover { transform: scale(1.15); }
  .resumen-box {
    background: var(--off); border-radius: 8px; padding: 14px 16px;
    font-size: 13px; color: var(--gray); margin: 18px 0;
    line-height: 1.6;
  }
  .resumen-box strong { color: var(--navy); display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
  .wsp-btn {
    width: 100%; padding: 12px; background: #25D366; color: white;
    border: none; border-radius: 8px; font-size: 14px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 0.2s;
  }
  .wsp-btn:hover { background: #1fba58; }

  /* CATALOGO */
  #catalogo { background: var(--white); }
  .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .cat-card {
    border: 1px solid var(--off); border-radius: 12px; overflow: hidden;
    transition: box-shadow 0.2s;
  }
  .cat-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
  .cat-img {
    height: 200px; background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
  }
  .cat-img-placeholder {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 2px;
    color: rgba(255,255,255,0.2); text-transform: uppercase;
  }
  .cat-badge {
    position: absolute; top: 12px; right: 12px;
    background: var(--blue); color: white;
    font-size: 11px; font-weight: 600; padding: 4px 10px;
    border-radius: 20px; letter-spacing: 0.5px;
  }
  .cat-body { padding: 20px; }
  .cat-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 800; color: var(--navy);
    text-transform: uppercase; margin-bottom: 6px;
  }
  .cat-desc { font-size: 13px; color: var(--gray); line-height: 1.5; margin-bottom: 14px; }
  .cat-desde { font-size: 12px; color: var(--gray); }
  .cat-desde strong { font-size: 16px; color: var(--navy); }

  /* CLIENTES BANNER */
  #clientes { background: var(--off); padding: 60px 5%; }
  .clientes-inner { text-align: center; }
  .clientes-inner .section-title { color: var(--navy); margin-bottom: 12px; }
  .clientes-inner .section-sub { color: var(--gray); margin: 0 auto 48px; text-align: center; }
  .clientes-logos { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
  .cliente-logo {
    width: 120px; height: 64px; background: var(--white);
    border-radius: 10px; border: 1px solid var(--off);
    display: flex; align-items: center; justify-content: center;
  }
  .cliente-logo span { font-size: 12px; color: var(--gray); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 8px; }

  /* CONTACTO */
  #contacto { background: var(--navy); }
  #contacto .section-title { color: var(--white); }
  #contacto .section-sub { color: var(--gray); }
  .contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 48px; align-items: start; }
  .contacto-canales { display: flex; flex-direction: column; gap: 16px; }
  .canal {
    display: flex; gap: 16px; align-items: center;
    padding: 18px 20px; border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    text-decoration: none; transition: background 0.2s;
  }
  .canal:hover { background: rgba(255,255,255,0.08); }
  .canal-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .canal-icon svg { width: 22px; height: 22px; }
  .canal-title { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
  .canal-handle { font-size: 13px; color: var(--gray); }
  .form-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 32px;
  }
  .form-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 700; color: var(--white);
    text-transform: uppercase; margin-bottom: 24px;
  }
  .form-group { margin-bottom: 16px; }
  .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--gray); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    color: var(--white); font-family: 'Barlow', sans-serif; font-size: 14px;
    padding: 12px 14px; outline: none; transition: border-color 0.2s;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue-light); }
  .form-group select option { background: var(--navy-mid); }
  .form-group textarea { resize: vertical; min-height: 90px; }
  .form-submit {
    width: 100%; padding: 13px; background: var(--blue); color: white;
    border: none; border-radius: 8px; font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: 'Barlow', sans-serif; transition: background 0.2s;
  }
  .form-submit:hover { background: var(--blue-light); }

  /* FOOTER */
  footer {
    background: #0B1428; padding: 32px 5%;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
  }
  .footer-logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 900; color: var(--white); letter-spacing: 1px;
  }
  .footer-logo span { color: var(--blue-light); }
  .footer-copy { font-size: 13px; color: var(--gray); }
  .footer-links { display: flex; gap: 20px; }
  .footer-links a { font-size: 13px; color: var(--gray); text-decoration: none; transition: color 0.2s; }
  .footer-links a:hover { color: var(--white); }

  @media (max-width: 768px) {
    .nosotros-grid, .config-intro, .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
    .seg-grid, .cat-grid { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .hero-badges { gap: 24px; }
  }
</style>
</head>
<body>

<!-- NAV -->
<nav>
  <a href="#" class="nav-logo">CUST<span>MIX</span></a>
  <ul class="nav-links">
    <li><a href="#nosotros">Nosotros</a></li>
    <li><a href="#segmentos">Para quién</a></li>
    <li><a href="#configurador">Configurador</a></li>
    <li><a href="#catalogo">Catálogo</a></li>
    <li><a href="#contacto">Contacto</a></li>
  </ul>
  <a href="https://wa.me/+5491100000000" class="nav-cta" target="_blank">Pedí un presupuesto</a>
</nav>

<!-- HERO -->
<section id="hero">
  <svg class="hero-bg-lines" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
    <line x1="0" y1="200" x2="1200" y2="600" stroke="white" stroke-width="1"/>
    <line x1="200" y1="0" x2="800" y2="800" stroke="white" stroke-width="1"/>
    <line x1="600" y1="0" x2="1200" y2="400" stroke="white" stroke-width="0.5"/>
    <line x1="0" y1="500" x2="700" y2="100" stroke="white" stroke-width="0.5"/>
  </svg>
  <div class="hero-inner">
    <p class="hero-eyebrow">custmix.com — Indumentaria personalizada</p>
    <h1 class="hero-title">TU MARCA,<br>EN CADA<br><em>PRENDA.</em></h1>
    <p class="hero-sub">Diseñamos y producimos la indumentaria de tu club, colegio o empresa. Del concepto a la entrega.</p>
    <div class="hero-actions">
      <a href="#configurador" class="btn-primary">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
        Diseñá tu prenda
      </a>
      <a href="#catalogo" class="btn-outline">Ver catálogo</a>
    </div>
    <div class="hero-badges">
      <div class="hero-badge">
        <span class="hero-badge-num">100%</span>
        <span class="hero-badge-label">Personalizable</span>
      </div>
      <div class="hero-badge">
        <span class="hero-badge-num">+50</span>
        <span class="hero-badge-label">Colores disponibles</span>
      </div>
      <div class="hero-badge">
        <span class="hero-badge-num">24hs</span>
        <span class="hero-badge-label">Respuesta de presupuesto</span>
      </div>
    </div>
  </div>
</section>

<!-- NOSOTROS -->
<section id="nosotros">
  <div class="nosotros-grid">
    <div class="nosotros-text">
      <p class="section-eyebrow">Quiénes somos</p>
      <h2 class="section-title">Hechos para<br>destacar</h2>
      <p>Custmix nació con una idea simple: que cada institución, equipo y empresa pueda tener <strong>indumentaria a su medida</strong>, sin complicaciones y con resultados profesionales.</p>
      <p>Trabajamos directamente con clubes, colegios y empresas de la zona, acompañando cada pedido desde el diseño hasta la entrega. Vos elegís los colores, nosotros nos encargamos del resto.</p>
    </div>
    <div class="features">
      <div class="feature">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
        </div>
        <div>
          <p class="feature-title">Producción propia</p>
          <p class="feature-desc">Estampado y bordado en nuestro taller. Control total de cada detalle.</p>
        </div>
      </div>
      <div class="feature">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <div>
          <p class="feature-title">Calidad garantizada</p>
          <p class="feature-desc">Materiales deportivos de primer nivel. Prendas que duran temporada tras temporada.</p>
        </div>
      </div>
      <div class="feature">
        <div class="feature-icon">
          <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </div>
        <div>
          <p class="feature-title">Trato directo</p>
          <p class="feature-desc">Sin intermediarios. Hablás con quien diseña y produce tu pedido.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SEGMENTOS -->
<section id="segmentos">
  <p class="section-eyebrow" style="color:#7A9FE8;">Para quién trabajamos</p>
  <h2 class="section-title" style="color:var(--white);">Clubes, colegios<br>y empresas</h2>
  <p class="section-sub">Cada institución tiene necesidades distintas. Nosotros nos adaptamos a las tuyas.</p>
  <div class="seg-grid">
    <div class="seg-card">
      <div class="seg-icon">
        <svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
      </div>
      <p class="seg-name">Clubes deportivos</p>
      <p class="seg-desc">Vestimos a tus equipos con identidad y calidad deportiva real.</p>
      <ul class="seg-items">
        <li>Camisetas y shorts de entrenamiento</li>
        <li>Camperas y buzos institucionales</li>
        <li>Indumentaria de árbitros y staff</li>
        <li>Bolsos y accesorios con escudo</li>
      </ul>
    </div>
    <div class="seg-card">
      <div class="seg-icon">
        <svg viewBox="0 0 24 24"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
      </div>
      <p class="seg-name">Colegios</p>
      <p class="seg-desc">Uniformes y camperas que representan la identidad de tu institución.</p>
      <ul class="seg-items">
        <li>Camperas de egresados</li>
        <li>Uniforme de educación física</li>
        <li>Buzo institucional para docentes</li>
        <li>Remeras para eventos y actos</li>
      </ul>
    </div>
    <div class="seg-card">
      <div class="seg-icon">
        <svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
      </div>
      <p class="seg-name">Empresas</p>
      <p class="seg-desc">Tu marca en cada prenda. Uniforme corporativo que genera pertenencia.</p>
      <ul class="seg-items">
        <li>Uniformes para atención al público</li>
        <li>Remeras y buzos para eventos</li>
        <li>Kits de bienvenida para empleados</li>
        <li>Regalos corporativos de fin de año</li>
      </ul>
    </div>
  </div>
</section>

<!-- CONFIGURADOR -->
<section id="configurador">
  <div class="config-intro">
    <div>
      <p class="section-eyebrow">Configurador de prendas</p>
      <h2 class="section-title">Diseñá tu<br>prenda online</h2>
      <p class="section-sub">Elegí los colores, combiná como quieras y pedí tu presupuesto por WhatsApp en segundos.</p>
      <br><br>
      <p style="font-size:14px;color:var(--gray);line-height:1.7;">Próximamente vas a poder también subir el logo de tu institución y verlo aplicado directamente sobre la prenda.</p>
    </div>
    <div class="config-widget">
      <p class="config-title-inner">Campera deportiva</p>
      <div class="vista-tabs">
        <button class="vista-tab active" id="tab-frente" onclick="setVista('frente')">Frente</button>
        <button class="vista-tab" id="tab-dorso" onclick="setVista('dorso')">Dorso</button>
      </div>
      <svg id="svg-frente" viewBox="0 0 320 360" width="100%" xmlns="http://www.w3.org/2000/svg">
        <path id="f-cuerpo" d="M100 68 C78 62 44 80 22 102 L2 195 L44 206 L46 340 Q46 350 56 350 L264 350 Q274 350 274 340 L276 206 L318 195 L298 102 C276 80 242 62 220 68 Q210 48 196 40 C184 34 170 32 160 32 C150 32 136 34 124 40 Q110 48 100 68Z" fill="#111E35" stroke="#060e1f" stroke-width="1.5"/>
        <path id="f-rec-izq" d="M100 68 C78 62 44 80 22 102 L2 195 L44 206 L46 260 C60 220 80 180 105 155 L108 68 Q104 66 100 68Z" fill="#2E4A8A" stroke="#1a2f60" stroke-width="1"/>
        <path id="f-rec-der" d="M220 68 C242 62 276 80 298 102 L318 195 L276 206 L274 260 C260 220 240 180 215 155 L212 68 Q216 66 220 68Z" fill="#2E4A8A" stroke="#1a2f60" stroke-width="1"/>
        <path id="f-cuello" d="M124 40 C128 28 140 20 160 18 C180 20 192 28 196 40 C188 38 178 36 170 36 L170 62 C166 66 163 68 160 68 C157 68 154 66 150 62 L150 36 C142 36 132 38 124 40Z" fill="#2E4A8A" stroke="#1a2f60" stroke-width="1"/>
        <line x1="160" y1="42" x2="160" y2="340" stroke="#555" stroke-width="1.5" stroke-dasharray="5,3" opacity="0.4"/>
        <path d="M60 295 L80 293 L82 313 L60 315Z" fill="none" stroke="#060e1f" stroke-width="1" opacity="0.4"/>
        <path d="M260 295 L240 293 L238 313 L260 315Z" fill="none" stroke="#060e1f" stroke-width="1" opacity="0.4"/>
        <text id="f-logo" x="102" y="175" text-anchor="middle" font-family="'Barlow Condensed',sans-serif" font-size="9" font-weight="700" fill="white" opacity="0.85" letter-spacing="0.5">CUSTMIX</text>
      </svg>
      <svg id="svg-dorso" viewBox="0 0 320 360" width="100%" xmlns="http://www.w3.org/2000/svg" style="display:none;">
        <path id="d-cuerpo" d="M100 68 C78 62 44 80 22 102 L2 195 L44 206 L46 340 Q46 350 56 350 L264 350 Q274 350 274 340 L276 206 L318 195 L298 102 C276 80 242 62 220 68 Q210 48 196 40 C184 34 170 32 160 32 C150 32 136 34 124 40 Q110 48 100 68Z" fill="#111E35" stroke="#060e1f" stroke-width="1.5"/>
        <path id="d-rec" d="M100 68 Q110 48 124 40 C136 34 150 32 160 32 C170 32 184 34 196 40 Q210 48 220 68 C242 62 276 80 298 102 L318 195 L276 206 L274 280 C248 235 210 200 160 188 C110 200 72 235 46 280 L44 206 L2 195 L22 102 C44 80 78 62 100 68Z" fill="#2E4A8A" stroke="#1a2f60" stroke-width="1"/>
        <path id="d-cuello" d="M124 40 C128 28 140 20 160 18 C180 20 192 28 196 40 C188 38 178 36 170 36 L170 58 C166 64 163 66 160 66 C157 66 154 64 150 58 L150 36 C142 36 132 38 124 40Z" fill="#2E4A8A" stroke="#1a2f60" stroke-width="1"/>
      </svg>

      <div class="color-section">
        <p class="color-label">Cuerpo</p>
        <div class="color-row" id="cr-main"></div>
      </div>
      <div class="color-section">
        <p class="color-label">Recortes y cuello</p>
        <div class="color-row" id="cr-accent"></div>
      </div>
      <div class="color-section">
        <p class="color-label">Logo</p>
        <div class="color-row" id="cr-logo"></div>
      </div>
      <div class="resumen-box">
        <strong>Tu combinación</strong>
        <span id="resumen-txt">Cuerpo: Azul marino · Recortes: Azul medio · Logo: Blanco</span>
      </div>
      <button class="wsp-btn" onclick="pedirWsp()">
        <svg width="18" height="18" fill="white" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.126 1.528 5.855L0 24l6.335-1.508A11.956 11.956 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.818 9.818 0 01-5.006-1.37l-.36-.214-3.727.977.995-3.634-.235-.373A9.818 9.818 0 1112 21.818z"/></svg>
        Pedir presupuesto por WhatsApp
      </button>
    </div>
  </div>
</section>

<!-- CATALOGO -->
<section id="catalogo">
  <p class="section-eyebrow">Catálogo</p>
  <h2 class="section-title">Lo que hacemos</h2>
  <p class="section-sub">Todas las prendas son 100% personalizables en colores, cortes y estampado.</p>
  <div class="cat-grid">
    <div class="cat-card">
      <div class="cat-img" style="background:linear-gradient(135deg,#111E35,#1B2A4A);">
        <span class="cat-img-placeholder">Foto próximamente</span>
        <span class="cat-badge">⭐ Top ventas</span>
      </div>
      <div class="cat-body">
        <p class="cat-name">Campera deportiva</p>
        <p class="cat-desc">Campera técnica con recortes personalizables. Ideal para clubes y colegios.</p>
        <p class="cat-desde">Desde <strong>consultar precio</strong> por unidad</p>
      </div>
    </div>
    <div class="cat-card">
      <div class="cat-img" style="background:linear-gradient(135deg,#1B2A4A,#2E4A8A);">
        <span class="cat-img-placeholder">Foto próximamente</span>
      </div>
      <div class="cat-body">
        <p class="cat-name">Buzo térmico</p>
        <p class="cat-desc">Media cremallera, tela técnica. Perfecto para entrenamiento en clima frío.</p>
        <p class="cat-desde">Desde <strong>consultar precio</strong> por unidad</p>
      </div>
    </div>
    <div class="cat-card">
      <div class="cat-img" style="background:linear-gradient(135deg,#111E35,#3A52A0);">
        <span class="cat-img-placeholder">Foto próximamente</span>
      </div>
      <div class="cat-body">
        <p class="cat-name">Remera deportiva</p>
        <p class="cat-desc">Tela transpirable, corte moderno. Con tu logo bordado o estampado.</p>
        <p class="cat-desde">Desde <strong>consultar precio</strong> por unidad</p>
      </div>
    </div>
    <div class="cat-card">
      <div class="cat-img" style="background:linear-gradient(135deg,#1B2A4A,#111E35);">
        <span class="cat-img-placeholder">Foto próximamente</span>
        <span class="cat-badge">Nuevo</span>
      </div>
      <div class="cat-body">
        <p class="cat-name">Campera egresados</p>
        <p class="cat-desc">La prenda más recordada de la vida estudiantil. Diseño exclusivo para tu promoción.</p>
        <p class="cat-desde">Desde <strong>consultar precio</strong> por unidad</p>
      </div>
    </div>
    <div class="cat-card">
      <div class="cat-img" style="background:linear-gradient(135deg,#2E4A8A,#1B2A4A);">
        <span class="cat-img-placeholder">Foto próximamente</span>
      </div>
      <div class="cat-body">
        <p class="cat-name">Short deportivo</p>
        <p class="cat-desc">Con bolsillos, elástico ajustable y tela de secado rápido.</p>
        <p class="cat-desde">Desde <strong>consultar precio</strong> por unidad</p>
      </div>
    </div>
    <div class="cat-card">
      <div class="cat-img" style="background:linear-gradient(135deg,#111E35,#2E4A8A);">
        <span class="cat-img-placeholder">Foto próximamente</span>
      </div>
      <div class="cat-body">
        <p class="cat-name">Uniforme corporativo</p>
        <p class="cat-desc">Remera o polo con el logo de tu empresa. Para atención al cliente y eventos.</p>
        <p class="cat-desde">Desde <strong>consultar precio</strong> por unidad</p>
      </div>
    </div>
  </div>
</section>

<!-- CLIENTES -->
<section id="clientes" style="background:var(--off);padding:70px 5%;">
  <div class="clientes-inner">
    <p class="section-eyebrow">Clientes</p>
    <h2 class="section-title">Ya confían en Custmix</h2>
    <p class="section-sub">Clubes, colegios y empresas de la zona que eligieron vestirse diferente.</p>
    <div class="clientes-logos">
      <div class="cliente-logo"><span>Tu logo acá</span></div>
      <div class="cliente-logo"><span>Tu logo acá</span></div>
      <div class="cliente-logo"><span>Tu logo acá</span></div>
      <div class="cliente-logo"><span>Tu logo acá</span></div>
      <div class="cliente-logo"><span>Tu logo acá</span></div>
    </div>
  </div>
</section>

<!-- CONTACTO -->
<section id="contacto">
  <p class="section-eyebrow" style="color:#7A9FE8;">Hablemos</p>
  <h2 class="section-title" style="color:var(--white);">¿Listo para<br>empezar?</h2>
  <p class="section-sub">Contanos qué necesitás y te respondemos en menos de 24 horas.</p>
  <div class="contacto-grid">
    <div class="contacto-canales">
      <a href="https://wa.me/+5491100000000" class="canal" target="_blank">
        <div class="canal-icon" style="background:#25D366;">
          <svg width="22" height="22" fill="white" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.126 1.528 5.855L0 24l6.335-1.508A11.956 11.956 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.818 9.818 0 01-5.006-1.37l-.36-.214-3.727.977.995-3.634-.235-.373A9.818 9.818 0 1112 21.818z"/></svg>
        </div>
        <div>
          <p class="canal-title">WhatsApp</p>
          <p class="canal-handle">Respuesta en minutos</p>
        </div>
      </a>
      <a href="https://instagram.com/custmix" class="canal" target="_blank">
        <div class="canal-icon" style="background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);">
          <svg width="22" height="22" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="5"/><circle cx="17.5" cy="6.5" r="1.5" fill="white" stroke="none"/></svg>
        </div>
        <div>
          <p class="canal-title">Instagram</p>
          <p class="canal-handle">@custmix</p>
        </div>
      </a>
      <a href="mailto:info@custmix.com" class="canal">
        <div class="canal-icon" style="background:var(--blue);">
          <svg width="22" height="22" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        </div>
        <div>
          <p class="canal-title">Email</p>
          <p class="canal-handle">info@custmix.com</p>
        </div>
      </a>
    </div>
    <div class="form-card">
      <h3>Pedí tu presupuesto</h3>
      <div class="form-group">
        <label>Nombre / Institución</label>
        <input type="text" placeholder="Ej: Club Atlético San Martín"/>
      </div>
      <div class="form-group">
        <label>Tipo de cliente</label>
        <select>
          <option value="">Seleccioná una opción</option>
          <option>Club deportivo</option>
          <option>Colegio</option>
          <option>Empresa</option>
          <option>Otro</option>
        </select>
      </div>
      <div class="form-group">
        <label>¿Qué necesitás?</label>
        <textarea placeholder="Contanos qué prenda, cantidad aproximada y en qué fecha lo necesitás..."></textarea>
      </div>
      <button class="form-submit">Enviar consulta</button>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <span class="footer-logo">CUST<span>MIX</span></span>
  <span class="footer-copy">© 2026 Custmix — custmix.com</span>
  <div class="footer-links">
    <a href="#nosotros">Nosotros</a>
    <a href="#catalogo">Catálogo</a>
    <a href="#contacto">Contacto</a>
  </div>
</footer>

<script>
const colors = [
  { name:"Azul marino", hex:"#111E35", stroke:"#060e1f" },
  { name:"Azul medio", hex:"#2E4A8A", stroke:"#1a2f60" },
  { name:"Celeste", hex:"#5B9BD5", stroke:"#3a7ab5" },
  { name:"Negro", hex:"#111111", stroke:"#000000" },
  { name:"Gris", hex:"#4A4A4A", stroke:"#2a2a2a" },
  { name:"Blanco", hex:"#F5F5F5", stroke:"#cccccc" },
  { name:"Rojo", hex:"#C0392B", stroke:"#8e1a10" },
  { name:"Verde", hex:"#1E7A3E", stroke:"#0f4a22" },
  { name:"Naranja", hex:"#E07820", stroke:"#a04f0a" },
  { name:"Bordo", hex:"#7B1E2E", stroke:"#4a0d18" },
  { name:"Amarillo", hex:"#D4B800", stroke:"#9a8300" },
  { name:"Rosa", hex:"#D45A8A", stroke:"#a03060" },
];
let sel = { main:0, accent:1, logo:5 };
let vista = "frente";

function buildSwatches(id, key) {
  const el = document.getElementById(id);
  colors.forEach((c,i) => {
    const b = document.createElement("button");
    b.className = "color-swatch";
    b.style.background = c.hex;
    b.style.borderColor = sel[key]===i ? c.stroke : "transparent";
    b.title = c.name;
    b.onclick = () => { sel[key]=i; updateAll(); };
    el.appendChild(b);
  });
}

function setEl(id, fill, stroke) {
  const el = document.getElementById(id);
  if(!el) return;
  el.setAttribute("fill", fill);
  if(stroke) el.setAttribute("stroke", stroke);
}

function updateAll() {
  const m = colors[sel.main], a = colors[sel.accent], l = colors[sel.logo];
  setEl("f-cuerpo", m.hex, m.stroke);
  setEl("f-rec-izq", a.hex, a.stroke);
  setEl("f-rec-der", a.hex, a.stroke);
  setEl("f-cuello", a.hex, a.stroke);
  const fl = document.getElementById("f-logo");
  if(fl) fl.setAttribute("fill", l.hex);
  setEl("d-cuerpo", m.hex, m.stroke);
  setEl("d-rec", a.hex, a.stroke);
  setEl("d-cuello", a.hex, a.stroke);

  ["cr-main","cr-accent","cr-logo"].forEach((id,ki) => {
    const key = ["main","accent","logo"][ki];
    Array.from(document.getElementById(id).children).forEach((b,i) => {
      b.style.borderColor = sel[key]===i ? colors[i].stroke : "transparent";
    });
  });

  const t1 = document.getElementById("tab-frente"), t2 = document.getElementById("tab-dorso");
  if(t1) { t1.style.background = vista==="frente" ? m.hex : "transparent"; t1.style.color = vista==="frente" ? "white" : ""; t1.style.borderColor = vista==="frente" ? m.hex : ""; }
  if(t2) { t2.style.background = vista==="dorso" ? m.hex : "transparent"; t2.style.color = vista==="dorso" ? "white" : ""; t2.style.borderColor = vista==="dorso" ? m.hex : ""; }

  document.getElementById("resumen-txt").textContent = `Cuerpo: ${m.name} · Recortes: ${a.name} · Logo: ${l.name}`;
}

function setVista(v) {
  vista = v;
  document.getElementById("svg-frente").style.display = v==="frente" ? "block" : "none";
  document.getElementById("svg-dorso").style.display = v==="dorso" ? "block" : "none";
  const t1 = document.getElementById("tab-frente"), t2 = document.getElementById("tab-dorso");
  t1.classList.toggle("active", v==="frente");
  t2.classList.toggle("active", v==="dorso");
  updateAll();
}

function pedirWsp() {
  const m = colors[sel.main].name, a = colors[sel.accent].name, l = colors[sel.logo].name;
  const msg = encodeURIComponent(`Hola Custmix! Quiero pedir una campera con:\n- Cuerpo: ${m}\n- Recortes: ${a}\n- Logo: ${l}\n\n¿Me podés dar un presupuesto?`);
  window.open(`https://wa.me/+5491100000000?text=${msg}`,"_blank");
}

buildSwatches("cr-main","main");
buildSwatches("cr-accent","accent");
buildSwatches("cr-logo","logo");
updateAll();
</script>
</body>
</html>