Cuidado: Estas editando codigo Astro. Si rompes la sintaxis, la pagina dejara de cargarse hasta que la arregles. Cada guardado crea un backup en el directorio de copias de seguridad de la web.

---
import Base from '../layouts/Base.astro';
---
<Base
  title="Nosotros -- Agencia Inmobiliaria Boutique desde 2015 | Inmobiliaria Premium"
  description="Inmobiliaria Premium es una agencia inmobiliaria boutique fundada en 2015 en Alicante. Especialistas en retail, living y oficinas con operaciones en Madrid y Zaragoza."
>

<section class="gradient-bg-blue section-padding relative overflow-hidden" aria-label="Hero Nosotros">
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(12,77,162,0.3),transparent_60%)]"></div>
    <div class="container-main relative z-10">
      <div class="max-w-3xl mx-auto text-center">
        <h1 class="heading-xl !text-white" data-animate>
          Conoce <span class="text-urban-cyan">nuestra firma</span>
        </h1>
        <p class="mt-6 text-xl text-slate-300 max-w-2xl mx-auto" data-animate data-animate-delay="1">
          Agencia inmobiliaria boutique fundada en 2015. Especialistas en operaciones de alto valor en los segmentos de retail, living y oficinas.
        </p>
      </div>
    </div>
  </section>

<section class="section-padding bg-urban-bg" aria-label="Nuestra historia">
    <div class="container-main">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div data-animate>
          <h2 class="heading-lg">Nuestra historia</h2>
          <p class="mt-6 text-lg text-slate-600 leading-relaxed">
            Nuestra firma nace en 2015 en Alicante con la vision de crear una agencia inmobiliaria diferente: boutique, especializada y orientada a resultados.
          </p>
          <p class="mt-4 text-body">
            Desde el primer dia, nuestro enfoque ha sido la calidad frente a la cantidad. No buscamos volumen de operaciones, sino maximizar el valor de cada una de ellas. Esto nos ha permitido construir relaciones de largo plazo con inversores, promotores y empresas que confian en nuestro criterio.
          </p>
          <p class="mt-4 text-body">
            Hoy operamos principalmente en Madrid y Zaragoza, dos mercados que conocemos en profundidad y donde mantenemos una red de contactos solida y activa.
          </p>
        </div>
        <div class="grid grid-cols-2 gap-4" data-animate data-animate-delay="1">
          <div class="card text-center">
            <div class="text-3xl font-display font-bold text-urban-cyan">2015</div>
            <div class="mt-1 text-sm text-slate-500">Fundacion</div>
          </div>
          <div class="card text-center">
            <div class="text-3xl font-display font-bold text-urban-cyan">+500</div>
            <div class="mt-1 text-sm text-slate-500">Operaciones</div>
          </div>
          <div class="card text-center">
            <div class="text-3xl font-display font-bold text-urban-cyan">3</div>
            <div class="mt-1 text-sm text-slate-500">Verticales</div>
          </div>
          <div class="card text-center">
            <div class="text-3xl font-display font-bold text-urban-cyan">2</div>
            <div class="mt-1 text-sm text-slate-500">Mercados activos</div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="section-padding bg-urban-bg-section" aria-label="Equipo">
    <div class="container-main">
      <div class="text-center mb-12" data-animate>
        <h2 class="heading-lg">Nuestro equipo</h2>
        <p class="mt-4 text-body max-w-2xl mx-auto">Un equipo reducido y altamente especializado. Cada miembro aporta experiencia directa en los mercados donde operamos.</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
        <div class="service-card text-center" data-animate data-animate-delay="1">
          <div class="w-20 h-20 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-6">
            <svg class="w-10 h-10 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-lg">CEO</h3>
          <p class="text-urban-cyan text-sm mt-1">Direccion y estrategia</p>
          <p class="text-slate-500 text-sm mt-3">Vision de negocio y relaciones institucionales. Mas de 25 anos de experiencia en el sector inmobiliario.</p>
        </div>
        <div class="service-card text-center" data-animate data-animate-delay="2">
          <div class="w-20 h-20 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-6">
            <svg class="w-10 h-10 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-lg">Agente Inmobiliario</h3>
          <p class="text-urban-cyan text-sm mt-1">Operaciones y clientes</p>
          <p class="text-slate-500 text-sm mt-3">Gestion directa de operaciones, negociacion y cierre. Especialista en retail y oficinas en Madrid y Zaragoza.</p>
        </div>
        <div class="service-card text-center" data-animate data-animate-delay="3">
          <div class="w-20 h-20 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-6">
            <svg class="w-10 h-10 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-lg">Gerente</h3>
          <p class="text-urban-cyan text-sm mt-1">Administracion y operaciones</p>
          <p class="text-slate-500 text-sm mt-3">Coordinacion de operaciones, gestion administrativa y soporte al equipo comercial.</p>
        </div>
      </div>
    </div>
  </section>

<section class="section-padding bg-urban-bg" aria-label="Valores">
    <div class="container-main">
      <div class="text-center mb-12" data-animate>
        <h2 class="heading-lg">Nuestros valores</h2>
        <p class="mt-4 text-body max-w-2xl mx-auto">Los principios que guian cada operacion y cada relacion con nuestros clientes.</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
        <div class="card text-center" data-animate data-animate-delay="1">
          <div class="w-14 h-14 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-7 h-7 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-xl mb-2">Experiencia</h3>
          <p class="text-slate-500 text-sm">Mas de 25 anos en el sector inmobiliario nos permiten anticipar oportunidades y gestionar riesgos con criterio.</p>
        </div>
        <div class="card text-center" data-animate data-animate-delay="2">
          <div class="w-14 h-14 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-7 h-7 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-xl mb-2">Confianza</h3>
          <p class="text-slate-500 text-sm">Relaciones de largo plazo basadas en la transparencia, la honestidad y el compromiso con los intereses del cliente.</p>
        </div>
        <div class="card text-center" data-animate data-animate-delay="3">
          <div class="w-14 h-14 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-7 h-7 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-xl mb-2">Resultados</h3>
          <p class="text-slate-500 text-sm">Orientacion clara a resultados. Cada operacion se mide por el valor generado para el cliente, no por el volumen.</p>
        </div>
      </div>
    </div>
  </section>

<section class="section-padding bg-urban-bg-section" aria-label="Ubicaciones">
    <div class="container-main">
      <div class="text-center mb-12" data-animate>
        <h2 class="heading-lg">Donde operamos</h2>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
        <div class="service-card text-center" data-animate data-animate-delay="1">
          <div class="w-12 h-12 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-6 h-6 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-lg">Alicante</h3>
          <p class="text-urban-cyan text-xs mt-1">Sede central</p>
          <p class="text-slate-500 text-sm mt-2">Sede central. Direccion y coordinacion general.</p>
        </div>
        <div class="service-card text-center" data-animate data-animate-delay="2">
          <div class="w-12 h-12 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-6 h-6 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-lg">Madrid</h3>
          <p class="text-urban-cyan text-xs mt-1">Mercado principal</p>
          <p class="text-slate-500 text-sm mt-2">Operaciones de retail, living y oficinas en la capital y su area metropolitana.</p>
        </div>
        <div class="service-card text-center" data-animate data-animate-delay="3">
          <div class="w-12 h-12 rounded-full bg-urban-cyan/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-6 h-6 text-urban-cyan" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 class="font-display font-bold text-urban-blue-dark text-lg">Zaragoza</h3>
          <p class="text-urban-cyan text-xs mt-1">Mercado activo</p>
          <p class="text-slate-500 text-sm mt-2">Mercado dinamico con costes competitivos y excelente posicion logistica.</p>
        </div>
      </div>
    </div>
  </section>

<section class="section-padding gradient-bg-blue" aria-label="Contacto">
    <div class="container-main text-center" data-animate>
      <h2 class="heading-lg !text-white">Trabajemos juntos</h2>
      <p class="mt-4 text-body-light max-w-xl mx-auto">Cuentanos tu proyecto y descubre como nuestra inmobiliaria puede ayudarte a alcanzar tus objetivos inmobiliarios.</p>
      <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/contacto" class="btn-primary text-lg px-8 py-4">Contactar</a>
        <a href="https://wa.me/34600000000" class="btn-secondary-light text-lg px-8 py-4">WhatsApp</a>
      </div>
    </div>
  </section>

</Base>