<html lang="es"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LBD Arquitectura — Diseñamos el espacio donde vivís tu vida</title>
<link rel="icon" type="image/png" href="LOGO_solo_dorado.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;family=Jost:wght@200;300;400;500&amp;display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --negro:    #0d0c0a;
    --negro2:   #171510;
    --negro3:   #1f1d18;
    --dorado:   #c9972e;
    --dorado2:  #e0b84a;
    --dorado-d: #8a6418;
    --crema:    #f5f0e8;
    --gris:     #7a7470;
    --linea:    rgba(201,151,46,0.18);
    --linea-c:  rgba(245,240,232,0.1);
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--negro);
    color: var(--crema);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
  }

  /* ── LOGO COMPONENT ── */
  .logo-svg { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
  .logo-wordmark { display: flex; flex-direction: column; line-height: 1; }
  .logo-lbd {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem; font-weight: 600; letter-spacing: .18em;
    color: var(--dorado);
  }
  .logo-arq {
    font-family: 'Jost', sans-serif;
    font-size: .48rem; letter-spacing: .35em; text-transform: uppercase;
    color: rgba(201,151,46,.6); margin-top: .15rem;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem 3.5rem;
    background: rgba(13,12,10,.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--linea);
  }
  .nav-cta {
    font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--dorado); text-decoration: none;
    border: 1px solid var(--linea);
    padding: .65rem 1.6rem;
    transition: background .3s, color .3s;
  }
  .nav-cta:hover { background: var(--dorado); color: var(--negro); }

  /* ── HERO ── */
  .hero {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr;
    padding-top: 80px;
    position: relative; overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 50%;
    background: var(--negro2); z-index: 0;
  }

  .hero-left {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; justify-content: center;
    padding: 5rem 4rem 5rem 3.5rem;
  }
  .hero-eyebrow {
    font-size: .6rem; letter-spacing: .25em; text-transform: uppercase;
    color: var(--dorado); margin-bottom: 2.5rem;
    display: flex; align-items: center; gap: 1rem;
  }
  .hero-eyebrow::before {
    content: ''; display: block; width: 2.5rem; height: 1px; background: var(--dorado);
  }
  h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 4.5vw, 5.5rem);
    font-weight: 300; line-height: 1.08;
    color: var(--crema); margin-bottom: 2.5rem;
  }
  h1 em { font-style: italic; color: var(--dorado); }
  .hero-desc {
    font-size: .88rem; line-height: 1.9; color: rgba(245,240,232,.5);
    max-width: 28rem; margin-bottom: 3.5rem;
  }
  .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
  .btn-gold {
    display: inline-block;
    background: var(--dorado); color: var(--negro);
    padding: .9rem 2.4rem;
    font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
    text-decoration: none; font-weight: 500;
    transition: background .3s; border: none; cursor: pointer;
    font-family: 'Jost', sans-serif;
  }
  .btn-gold:hover { background: var(--dorado2); }
  .btn-outline {
    display: inline-block;
    background: transparent; color: var(--crema);
    padding: .9rem 2.4rem;
    font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--linea-c);
    transition: border-color .3s, color .3s;
  }
  .btn-outline:hover { border-color: var(--dorado); color: var(--dorado); }

  .hero-stats {
    margin-top: 4rem;
    display: flex; justify-content: space-between;
    border-top: 1px solid var(--linea-c); padding-top: 2.5rem;
  }
  .stat-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
  .stat-n {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem; font-weight: 300; color: var(--dorado); line-height: 1;
  }
  .stat-l { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gris); }

  .hero-right {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 4rem 3.5rem 4rem 4rem;
  }
  .hero-visual {
    width: 100%; max-width: 520px;
    aspect-ratio: 4/5;
    background: var(--negro3);
    border: 1px solid var(--linea);
    position: relative; overflow: hidden;
  }
  .hero-visual::before {
    content: '';
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(201,151,46,.025) 40px, rgba(201,151,46,.025) 41px),
      repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(201,151,46,.025) 40px, rgba(201,151,46,.025) 41px);
  }
  .hero-visual-inner {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: center; padding: 2rem 2rem 2.2rem;
    background: linear-gradient(to top, rgba(13,12,10,.92) 0%, transparent 55%);
  }
  .hero-visual-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 1rem; line-height: 1.65;
    color: rgba(245,240,232,.75);
    text-align: center;
    border-top: 1px solid rgba(201,151,46,.45); padding-top: .9rem;
    width: 100%;
  }
  .hero-watermark {
    position: absolute; inset: 0;
    opacity: 1;
  }
  .hero-watermark img {
    width: 100% !important; height: 100% !important;
    object-fit: cover; display: block;
  }
  .hero-badge {
    position: absolute; top: 2.5rem; right: 2.5rem;
    width: 88px; height: 88px;
    border: 1px solid var(--linea);
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .1rem;
  }
  .hero-badge span { font-size: .45rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); line-height: 1.8; }
  .hero-badge strong { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: var(--dorado); }

  /* ── STRIP PROPÓSITO ── */
  .strip {
    background: var(--dorado);
    padding: 3.5rem 3.5rem;
    display: flex; gap: 4rem; align-items: center;
    overflow: hidden; position: relative;
  }
  .strip::after { display: none; }
  .strip p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 300;
    color: var(--negro); line-height: 1.5; max-width: 60rem;
  }
  .strip-icon { flex-shrink: 0; }

  /* ── HISTORIA ── */
  .section-historia {
    padding: 8rem 3.5rem;
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3.5rem;
    align-items: center;
  }
  .historia-text .label {
    font-size: .6rem; letter-spacing: .25em; text-transform: uppercase;
    color: var(--dorado); margin-bottom: 2rem;
    display: flex; align-items: center; gap: 1rem;
  }
  .historia-text .label::before {
    content: ''; display: block; width: 2.5rem; height: 1px; background: var(--dorado);
  }
  .historia-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 300;
    line-height: 1.1; margin-bottom: 2rem; color: var(--crema);
  }
  .historia-text h2 em { font-style: italic; color: var(--dorado); }
  .historia-text p { font-size: .88rem; line-height: 1.9; color: rgba(245,240,232,.5); margin-bottom: 1.2rem; }

  .historia-visual { position: relative; max-width: 500px; margin-left: auto; }
  .h-card-main {
    background: var(--negro3); border: 1px solid var(--linea);
    aspect-ratio: 3/4; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .h-card-main::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(201,151,46,.07) 0%, transparent 60%);
  }
  .h-card-float {
    position: absolute; bottom: -2.5rem; right: -2.5rem;
    width: 130px;
    background: var(--dorado);
    padding: 1.5rem; text-align: center;
  }
  .h-card-float strong {
    display: block; font-family: 'Cormorant Garamond', serif;
    font-size: 3rem; font-weight: 300; color: var(--negro); line-height: 1;
  }
  .h-card-float span { font-size: .52rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(13,12,10,.65); }

  /* ── SERVICIOS ── */
  .section-servicios { padding: 7rem 3.5rem; background: var(--negro2); }
  .servicios-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 4rem; padding-bottom: 2rem;
    border-bottom: 1px solid var(--linea);
  }
  .servicios-head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.5vw, 4rem); font-weight: 300; color: var(--crema);
  }
  .servicios-head p { font-size: .82rem; color: var(--gris); text-align: right; line-height: 1.8; white-space: nowrap; }
  .servicios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .servicio-item {
    background: var(--negro3);
    padding: 2.5rem; cursor: default;
    transition: background .35s; border: 1px solid transparent;
  }
  .servicio-item:hover { background: var(--negro); border-color: var(--linea); }
  .s-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem; font-weight: 300;
    color: rgba(201,151,46,.2);
    line-height: 1; margin-bottom: 1.5rem; transition: color .35s;
  }
  .servicio-item:hover .s-num { color: var(--dorado); }
  .s-title { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--crema); margin-bottom: 1rem; }
  .s-desc { font-size: .95rem; line-height: 1.85; color: var(--gris); }

  /* ── PROCESO ── */
  .section-proceso { padding: 8rem 3.5rem; }
  .proceso-head { margin-bottom: 5rem; }
  .proceso-head .ey { font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--dorado); margin-bottom: 1.5rem; }
  .proceso-head h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3.5vw, 4rem); font-weight: 300; color: var(--crema); }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea-c); }
  .step { padding: 2.5rem 2rem 2.5rem 2rem; cursor: default; background: var(--negro3); transition: background .35s; border: 1px solid transparent; border-right: 1px solid var(--linea-c); }
  .step:first-child { padding-left: 2rem; }
  .step:last-child { border-right: 1px solid transparent; }
  .step:hover { background: var(--negro); border-color: var(--linea); }
  .step-n { font-family: 'Cormorant Garamond', serif; font-size: 4.5rem; font-weight: 300; color: rgba(201,151,46,.2); line-height: 1; margin-bottom: 1.5rem; transition: color .35s; }
  .step:hover .step-n { color: var(--dorado); }
  .step-title { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--crema); margin-bottom: 1rem; }
  .step-desc { font-size: .95rem; line-height: 1.85; color: var(--gris); }

  /* ── FORM ── */
  .section-form { padding: 8rem 3.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: start; }
  .ft .ey { font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--dorado); margin-bottom: 2rem; }
  .ft h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 3vw, 3.5rem); font-weight: 300; color: var(--crema); line-height: 1.1; margin-bottom: 2rem; }
  .ft h2 em { font-style: italic; color: var(--dorado); }
  .ft p { font-size: .88rem; line-height: 1.9; color: var(--gris); }

  form { display: flex; flex-direction: column; gap: 1.4rem; }
  .fg { display: flex; flex-direction: column; gap: .5rem; }
  .fg label { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
  .fg input, .fg select, .fg textarea {
    background: transparent; border: none; border-bottom: 1px solid var(--linea-c);
    padding: .8rem 0; font-family: 'Jost', sans-serif; font-size: .88rem; font-weight: 300;
    color: var(--crema); outline: none; transition: border-color .3s; width: 100%;
  }
  .fg input::placeholder, .fg textarea::placeholder { color: rgba(245,240,232,.2); }
  .fg input:focus, .fg select:focus, .fg textarea:focus { border-bottom-color: var(--dorado); }
  .fg select option { background: var(--negro2); color: var(--crema); }
  .fg textarea { resize: vertical; min-height: 80px; }
  .field-error { display: none; font-size: .72rem; color: #e07070; margin-top: .3rem; }
  .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .btn-submit {
    align-self: flex-start; margin-top: .5rem;
    background: var(--dorado); color: var(--negro);
    border: none; padding: 1rem 2.8rem;
    font-family: 'Jost', sans-serif; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
    cursor: pointer; transition: background .3s;
  }
  .btn-submit:hover { background: var(--dorado2); }

  /* ── REDES SOCIALES ── */
  .social-links { display: flex; gap: .75rem; align-items: center; }
  .social-links a {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--linea);
    color: var(--gris);
    transition: border-color .3s, color .3s;
    flex-shrink: 0;
  }
  .social-links a:hover { border-color: var(--dorado); color: var(--dorado); }
  .social-links a svg { width: 16px; height: 16px; fill: currentColor; }

  .ft-social { margin-top: 2.5rem; }
  .ft-social .social-label {
    font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gris); margin-bottom: .9rem;
  }

  .form-bottom { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: .5rem; }
  .form-bottom .social-links { border-left: 1px solid var(--linea-c); padding-left: 1.5rem; }

  /* ── FOOTER ── */
  footer {
    background: var(--negro2); border-top: 1px solid var(--linea);
    padding: 2.5rem 3.5rem;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
  }
  footer p { font-size: .72rem; color: var(--gris); }

  /* ── ANIMACIONES ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-left > * { animation: fadeUp .85s ease both; }
  .hero-left > *:nth-child(1) { animation-delay: .05s; }
  .hero-left > *:nth-child(2) { animation-delay: .2s; }
  .hero-left > *:nth-child(3) { animation-delay: .35s; }
  .hero-left > *:nth-child(4) { animation-delay: .5s; }
  .hero-left > *:nth-child(5) { animation-delay: .65s; }
  .hero-right { animation: fadeUp .85s ease .4s both; }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 1.1rem 1.5rem; }
    .hero { grid-template-columns: 1fr; }
    .hero::before { display: none; }
    .hero-right { min-height: 55vw; padding: 2rem 1.5rem; }
    .hero-left { padding: 2rem 1.5rem 3rem; }
    .hero-stats { gap: 2rem; }
    .strip { padding: 2.5rem 1.5rem; }
    .section-historia { grid-template-columns: 1fr; padding: 5rem 1.5rem; gap: 3rem; }
    .h-card-float { display: none; }
    .servicios-grid { grid-template-columns: 1fr; }
    .servicios-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .servicios-head p { text-align: left; }
    .section-servicios { padding: 5rem 1.5rem; }
    .steps { grid-template-columns: 1fr 1fr; }
    .step { border-right: none; border-bottom: 1px solid var(--linea-c); padding: 2rem 0; }
    .section-proceso { padding: 5rem 1.5rem; }
    .section-form { grid-template-columns: 1fr; padding: 5rem 1.5rem; gap: 3rem; }
    .frow { grid-template-columns: 1fr; gap: 1.4rem; }
    footer { padding: 2rem 1.5rem; flex-direction: column; text-align: center; }
  }
</style>
</head>
<body>

<!-- ═══ NAV ═══ -->
<nav>
  <a href="#" class="logo-svg">
    <img src="LOGO LBD.png" alt="LBD Arquitectura" style="height:48px; width:auto; display:block;">
  </a>
  <a href="#contacto" class="nav-cta">Quiero mi proyecto</a>
</nav>

<!-- ═══ HERO ═══ -->
<section class="hero">
  <div class="hero-left">
    <p class="hero-eyebrow">Arquitectos de Espacios · Villa General Belgrano, Córdoba</p>
    <h1>Diseñamos el espacio<br>donde nacen <em>tus mejores recuerdos</em></h1>
    <p class="hero-desc">
      Diseñamos proyectos habitacionales en entornos naturales pensados para construir hogares, refugios de descanso y lugares donde la arquitectura convive con el paisaje, la tranquilidad y el tiempo.
    </p>
    <div class="hero-actions">
      <a href="#contacto" class="btn-gold">Contanos tu proyecto</a>
      <a href="#historia" class="btn-outline">Conocer el estudio</a>
    </div>
    <div class="hero-stats">
      <div class="stat-item">
        <span class="stat-n">13+</span>
        <span class="stat-l">Años de experiencia</span>
      </div>
      <div class="stat-item">
        <span class="stat-n">120+</span>
        <span class="stat-l">Proyectos realizados</span>
      </div>
      <div class="stat-item">
        <span class="stat-n">100%</span>
        <span class="stat-l">Compromiso</span>
      </div>
    </div>
  </div>

  <div class="hero-right">
    <div class="hero-visual">
      <div class="hero-watermark">
        <img src="IMG_4687.jpg" alt="LBD Arquitectura" style="width:200px; height:auto; display:block;">
      </div>
      <div class="hero-visual-inner">
        <p class="hero-visual-quote">
          "Cada espacio bien diseñado mejora la calidad de vida de quienes lo habitan."
        </p>
      </div>
      <div class="hero-badge">
        <strong>CBA</strong>
        <span>Est.<br>Arq.</span>
      </div>
    </div>
  </div>
</section>

<!-- ═══ STRIP ═══ -->
<div class="strip">
  <div class="strip-icon">
    <img src="LETRAS_solas.png" alt="" style="height:56px; width:auto; display:block;">
  </div>
  <p>
    Creemos que la arquitectura es el arte de hacer posible lo que parecía imposible. <br>Cada proyecto nace de una conversación honesta sobre cómo querés vivir.
  </p>
</div>

<!-- ═══ HISTORIA ═══ -->
<section class="section-historia" id="historia">
  <div class="historia-text">
    <p class="label">Nuestra historia</p>
    <h2>Un estudio fundado sobre<br><em>convicciones claras</em></h2>
    <p>LBD Arquitectura no empezó en una oficina, sino entre charlas de dos amigos. Venimos de caminos profesionales distintos, pero nos dimos cuenta de que compartimos una misma visión sobre el diseño y, más que todo, acerca de la forma de construir.</p>
    <p>Después de años de experiencia y muchos proyectos compartidos, decidimos dar el paso y crear este espacio en Villa General Belgrano que nos representa.</p>
    <p>¿Nuestro propósito? Transformar ideas en realidades sólidas, pero sobre todo, construir relaciones de confianza.</p>
    <p>Creemos que la arquitectura es mucho más que planos y ladrillos. Para nosotros, se trata de escuchar, entender qué necesitás y acompañarte de manera transparente.</p>
    <p>Nos unimos para ofrecerte una solución integral 360°: desde el diseño y la logística de materiales hasta la conducción técnica y administrativa de la obra. Queremos ocuparnos de todo el rompecabezas para que disfrutes el proceso mientras nosotros resolvemos la complejidad.</p>
    <p>Cada obra que firmamos es una declaración de principios: respeto por el entorno, atención al detalle y compromiso total con quienes nos eligen.</p>
    <p>Este es el primer paso de un gran camino juntos. ¡Bienvenidos a nuestro estudio!</p>
  </div>
  <div class="historia-visual">
    <div class="h-card-main">
      <img src="foto_casa_foa.jpeg" alt="Casa FOA — LBD Arquitectura" style="width:100%;height:100%;object-fit:cover;display:block;">
    </div>
    <div class="h-card-float">
      <strong>13+</strong>
      <span>años diseñando</span>
    </div>
  </div>
</section>

<!-- ═══ SERVICIOS ═══ -->
<section class="section-servicios">
  <div class="servicios-head">
    <h2>Lo que hacemos</h2>
    <p>Arquitectura habitacional en entornos naturales, desde el diseño hasta la obra.</p>
  </div>
  <div class="servicios-grid">
    <div class="servicio-item">
      <div class="s-num">01</div>
      <div class="s-title">Proyecto de viviendas</div>
      <p class="s-desc">Diseño y desarrollo integral de viviendas en entornos naturales, pensadas para habitar con comodidad, identidad y pertenencia al paisaje.</p>
    </div>
    <div class="servicio-item">
      <div class="s-num">02</div>
      <div class="s-title">Desarrollos inmobiliarios</div>
      <p class="s-desc">Gestión estratégica que transforma el suelo en activos de alto impacto económico y urbano. Creación de nuevos barrios con infraestructura.</p>
    </div>
    <div class="servicio-item">
      <div class="s-num">03</div>
      <div class="s-title">Unidades de negocios turísticos</div>
      <p class="s-desc">Dirección estratégica orientada a la comercialización y gestión de experiencias turísticas de valor.</p>
    </div>
    <div class="servicio-item">
      <div class="s-num">04</div>
      <div class="s-title">Dirección de Obra</div>
      <p class="s-desc">Supervisión técnica en sitio para garantizar que el resultado final sea fiel al diseño aprobado, en tiempo y forma.</p>
    </div>
    <div class="servicio-item">
      <div class="s-num">05</div>
      <div class="s-title">Renders &amp; Visualización</div>
      <p class="s-desc">Imágenes fotorrealistas y recorridos 3D para experimentar el proyecto antes de construirlo.</p>
    </div>
    <div class="servicio-item">
      <div class="s-num">06</div>
      <div class="s-title">Consultoría &amp; Asesoramiento</div>
      <p class="s-desc">Orientación para familias e inversores en la evaluación, planificación y viabilidad de sus proyectos habitacionales.</p>
    </div>
  </div>
</section>

<!-- ═══ PROCESO ═══ -->
<section class="section-proceso">
  <div class="proceso-head">
    <p class="ey">Cómo trabajamos</p>
    <h2>Un proceso claro,<br>sin sorpresas.</h2>
  </div>
  <div class="steps">
    <div class="step">
      <div class="step-n">01</div>
      <div class="step-title">Primera consulta</div>
      <p class="step-desc">Conversamos sobre tu proyecto, necesidades y expectativas. Sin cargo, sin compromiso.</p>
    </div>
    <div class="step">
      <div class="step-n">02</div>
      <div class="step-title">Propuesta</div>
      <p class="step-desc">Elaboramos una propuesta técnica y económica detallada, adaptada a tu realidad.</p>
    </div>
    <div class="step">
      <div class="step-n">03</div>
      <div class="step-title">Diseño</div>
      <p class="step-desc">Desarrollamos el proyecto con instancias de revisión y validación conjunta en cada etapa.</p>
    </div>
    <div class="step">
      <div class="step-n">04</div>
      <div class="step-title">Construcción</div>
      <p class="step-desc">Construimos y supervisamos la ejecución para que el resultado refleje con fidelidad el proyecto acordado.</p>
    </div>
  </div>
</section>

<!-- ═══ FORMULARIO ═══ -->
<section class="section-form" id="contacto">
  <div class="ft">
    <p class="ey">Hablemos</p>
    <h2>Tu próximo proyecto<br><em>comienza aquí</em></h2>
    <p>Contanos brevemente lo que tenés en mente. Nos pondremos en contacto en menos de 24 horas para coordinar una primera charla sin costo ni compromiso.</p>
    <div class="ft-social">
      <p class="social-label">Seguinos en redes</p>
      <div class="social-links">
        <a href="https://www.instagram.com/lbdarquitectura/" target="_blank" rel="noopener" title="Instagram">
          <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>
        </a>
        <a href="https://www.facebook.com/share/17G6HtwybE/?mibextid=wwXIfr" target="_blank" rel="noopener" title="Facebook">
          <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg>
        </a>
        <a href="https://www.tiktok.com/@lbd.arquitectura" target="_blank" rel="noopener" title="TikTok">
          <svg viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"></path></svg>
        </a>
        <a href="https://www.linkedin.com/company/lbd-arquitectura/" target="_blank" rel="noopener" title="LinkedIn">
          <svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
        </a>
        <a href="https://www.youtube.com/@lbdarquitectura" target="_blank" rel="noopener" title="YouTube">
          <svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
        </a>
        <a href="mailto:lbdarquitecturavgb@gmail.com" title="Email">
          <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"></path></svg>
        </a>
      </div>
    </div>
  </div>
  <form id="contact-form" novalidate="">
    <!-- Honeypot: si un bot lo completa, se descarta el envío -->
    <input type="text" name="botcheck" style="display:none;" tabindex="-1" autocomplete="off">

    <div class="frow">
      <div class="fg">
        <label for="f-nombre">Nombre *</label>
        <input id="f-nombre" name="nombre" type="text" placeholder="Tu nombre" autocomplete="given-name">
        <span class="field-error" id="err-nombre"></span>
      </div>
      <div class="fg">
        <label for="f-apellido">Apellido</label>
        <input id="f-apellido" name="apellido" type="text" placeholder="Tu apellido" autocomplete="family-name">
      </div>
    </div>
    <div class="fg">
      <label for="f-email">Email *</label>
      <input id="f-email" name="email" type="email" placeholder="tu@email.com" autocomplete="email">
      <span class="field-error" id="err-email"></span>
    </div>
    <div class="fg">
      <label for="f-tel">Teléfono / WhatsApp</label>
      <input id="f-tel" name="telefono" type="tel" placeholder="+54 9 3546 406786" autocomplete="tel">
    </div>
    <div class="fg">
      <label for="f-proyecto">Tipo de proyecto</label>
      <select id="f-proyecto" name="tipo_proyecto">
        <option value="">Seleccioná una opción</option>
        <option>Vivienda nueva</option>
        <option>Refugio / segunda residencia</option>
        <option>Proyecto habitacional</option>
        <option>Consultoría</option>
        <option>Otro</option>
      </select>
    </div>
    <div class="fg">
      <label for="f-origen">¿Cómo llegaste a nosotros?</label>
      <select id="f-origen" name="como_llegaste">
        <option value="">Seleccioná</option>
        <option>Instagram</option>
        <option>Facebook</option>
        <option>TikTok</option>
        <option>LinkedIn</option>
        <option>YouTube</option>
        <option>Recomendación</option>
        <option>Google</option>
      </select>
    </div>
    <div class="fg">
      <label for="f-mensaje">Contanos tu idea</label>
      <textarea id="f-mensaje" name="mensaje" placeholder="¿En qué etapa estás? ¿Tenés terreno? ¿Cuánto presupuesto estimás?"></textarea>
    </div>

    <div id="form-feedback" style="display:none;"></div>
    <button type="submit" class="btn-submit" id="btn-submit">Enviar consulta →</button>
  </form>
</section>

<!-- ═══ FOOTER ═══ -->
<footer>
  <a href="#" class="logo-svg" style="opacity:.7">
    <img src="LOGO LBD.png" alt="LBD Arquitectura" style="height:38px; width:auto; display:block;">
  </a>
  <p>San Martín 125 · Villa General Belgrano · +54 9 3546 406786 · Córdoba, Argentina</p>
  <p> copyright © 2025</p>
</footer>

<script>
(function () {
  const RATE_LIMIT_MS = 60 * 1000; // 1 minuto entre envíos
  const MAX_ATTEMPTS  = 3;         // máximo 3 envíos por hora
  const WINDOW_MS     = 60 * 60 * 1000;

  function getRateData() {
    try { return JSON.parse(localStorage.getItem('lbd_form') || '{}'); } catch { return {}; }
  }
  function setRateData(d) {
    try { localStorage.setItem('lbd_form', JSON.stringify(d)); } catch {}
  }

  function isRateLimited() {
    const d = getRateData();
    const now = Date.now();
    // Último envío demasiado reciente
    if (d.last && now - d.last < RATE_LIMIT_MS) return true;
    // Demasiados envíos en la última hora
    const attempts = (d.attempts || []).filter(t => now - t < WINDOW_MS);
    if (attempts.length >= MAX_ATTEMPTS) return true;
    return false;
  }

  function registerSend() {
    const d = getRateData();
    const now = Date.now();
    const attempts = (d.attempts || []).filter(t => now - t < WINDOW_MS);
    attempts.push(now);
    setRateData({ last: now, attempts });
  }

  function showError(id, msg) {
    const el = document.getElementById(id);
    if (el) { el.textContent = msg; el.style.display = msg ? 'block' : 'none'; }
  }

  function validateForm(form) {
    let ok = true;
    const nombre = form.nombre.value.trim();
    const email  = form.email.value.trim();
    showError('err-nombre', '');
    showError('err-email', '');

    if (!nombre || nombre.length < 2) {
      showError('err-nombre', 'Ingresá tu nombre (mínimo 2 caracteres).');
      ok = false;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      showError('err-email', 'Ingresá un email válido.');
      ok = false;
    }
    return ok;
  }

  function setFeedback(msg, isError) {
    const el = document.getElementById('form-feedback');
    el.textContent = msg;
    el.style.display = 'block';
    el.style.padding = '.8rem 1rem';
    el.style.marginBottom = '1rem';
    el.style.fontSize = '.82rem';
    el.style.background = isError ? 'rgba(180,40,40,.15)' : 'rgba(201,151,46,.12)';
    el.style.border = isError ? '1px solid rgba(180,40,40,.4)' : '1px solid rgba(201,151,46,.3)';
    el.style.color = isError ? '#e07070' : 'var(--dorado)';
  }

  document.getElementById('contact-form').addEventListener('submit', async function (e) {
    e.preventDefault();
    const form = e.target;
    const btn  = document.getElementById('btn-submit');

    // Honeypot
    if (form.botcheck && form.botcheck.value) return;

    // Validación
    if (!validateForm(form)) return;

    // Rate limiting
    if (isRateLimited()) {
      setFeedback('Por favor esperá un momento antes de volver a enviar el formulario.', true);
      return;
    }

    // Envío
    btn.disabled = true;
    btn.textContent = 'Enviando...';

    try {
      const fd = new FormData(form);
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          nombre:        fd.get('nombre'),
          apellido:      fd.get('apellido'),
          email:         fd.get('email'),
          telefono:      fd.get('telefono'),
          tipo_proyecto: fd.get('tipo_proyecto'),
          como_llegaste: fd.get('como_llegaste'),
          mensaje:       fd.get('mensaje'),
          botcheck:      fd.get('botcheck'),
        }),
      });
      const json = await res.json();

      if (json.success) {
        registerSend();
        form.reset();
        setFeedback('¡Mensaje recibido! Te contactamos en menos de 24 horas.', false);
        btn.textContent = '✓ Enviado';
        btn.style.background = 'var(--dorado-d)';
      } else {
        throw new Error(json.message || 'Error al enviar');
      }
    } catch (err) {
      setFeedback('Hubo un problema al enviar. Escribinos directamente a lbdarquitecturavgb@gmail.com', true);
      btn.disabled = false;
      btn.textContent = 'Enviar consulta →';
    }
  });
})();
</script>


</body></html>