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';
import BrochureModal from '../../components/BrochureModal.astro';

const locales = [
  {
    id: 'L1',
    ref: 'Local 1',
    address: 'C/Calatayud, 21',
    surface: '687,65 m²',
    floor: 'Planta baja',
    access: 'Fachada a 2 calles (Calatayud + Pasaje Burgos)',
    price: 5501,
    prime: true,
  },
  {
    id: 'L2',
    ref: 'Local 2',
    address: 'Po Cruz del Sur, 7',
    surface: '507,31 m²',
    floor: 'Planta semisotano',
    access: 'Acceso por pasaje Cruz del Sur',
    price: 4058,
    prime: false,
  },
  {
    id: 'L3',
    ref: 'Local 3',
    address: 'Po Cruz del Sur, 5',
    surface: '615,62 m²',
    floor: 'Planta semisotano',
    access: 'Doble acceso independiente',
    price: 4924,
    prime: false,
  },
];

const stats = [
  { value: '3', label: 'Locales disponibles' },
  { value: '1.810 m²', label: 'Superficie conjunta' },
  { value: '8 €/m²/mes', label: 'Precio arrendamiento' },
  { value: '54.498 hab.', label: 'Poblacion Huesca (2023)' },
  { value: '7%', label: 'Tasa paro (media nacional 12%)' },
  { value: '36.101 €', label: 'Renta media hogar Los Olivos' },
];

const marketData = [
  { value: '54.498 hab.', label: 'Poblacion Huesca Capital', highlight: false },
  { value: '7%', label: 'Tasa paro vs. 12% media nacional', highlight: true },
  { value: '36.101 €/hogar', label: 'Renta media Los Olivos', highlight: true },
  { value: 'Barrio nº1', label: 'Mayor crecimiento demografico Huesca', highlight: false },
  { value: 'AVE', label: 'Conexion Zaragoza y Madrid', highlight: false },
];

const formatPrice = (n: number) => n.toLocaleString('es-ES') + ' €/mes';

const commercialSchema = {
  "@context": "https://schema.org",
  "@type": "RealEstateListing",
  "name": "3 Locales Comerciales | Zona Los Olivos, Huesca Capital",
  "description": "Tres locales comerciales en arrendamiento en la Zona Los Olivos, Barrio San Lorenzo, Huesca. Superficie total 1.810,58 m². Disponibles conjuntamente o por separado.",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "C/Calatayud 21 · Pº Cruz del Sur 5 y 7",
    "addressLocality": "Huesca",
    "addressRegion": "Aragon",
    "addressCountry": "ES"
  },
  "floorSize": {
    "@type": "QuantitativeValue",
    "value": 1810.58,
    "unitCode": "MTK"
  },
  "offers": {
    "@type": "Offer",
    "price": 14483,
    "priceCurrency": "EUR",
    "description": "Precio conjunto mensual (8 €/m²/mes)",
    "seller": {
      "@type": "RealEstateAgent",
      "name": "Urban4",
      "telephone": "+34696073991",
      "url": "https://urban4.es"
    }
  }
};
---
<Base
  title="3 Locales Comerciales Los Olivos, Huesca | Arrendamiento | Urban4"
  description="Tres locales comerciales en arrendamiento en Zona Los Olivos, Huesca Capital. 1.810 m² en conjunto. 8 €/m²/mes. Barrio de mayor expansion de Huesca. Disponibles por separado."
  schemas={[commercialSchema]}
>

<div class="bg-urban-bg border-b border-slate-200">
    <div class="container-main py-3">
      <nav class="flex items-center gap-2 text-sm text-slate-500" aria-label="Breadcrumb">
        <a href="/" class="hover:text-urban-cyan transition-colors">Urban4</a>
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
        <a href="/retail" class="hover:text-urban-cyan transition-colors">Retail</a>
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
        <span class="text-urban-blue font-medium">Locales Los Olivos, Huesca</span>
      </nav>
    </div>
  </div>

<section class="bg-urban-bg" aria-label="Informacion principal del activo">
    <div class="container-main py-8 lg:py-12">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">

<div class="space-y-4" data-animate>
          
          <div class="rounded-2xl overflow-hidden border border-slate-200 shadow-sm aspect-[16/10]">
            <iframe
              src="https://maps.google.com/maps?q=Los+Olivos+Huesca+Spain&t=&z=15&ie=UTF8&iwloc=&output=embed"
              width="100%"
              height="100%"
              style="border:0; height:100%; min-height:320px;"
              allowfullscreen=""
              loading="eager"
              title="Zona Los Olivos, Huesca Capital"
            ></iframe>
          </div>
          
          <div class="grid grid-cols-3 gap-3">
            {locales.map((l) => (
              <div class:list={['rounded-xl border p-3 text-center transition-all', l.prime ? 'border-urban-cyan/40 bg-urban-cyan/5' : 'border-slate-200 bg-white']}>
                <div class:list={['text-xs font-semibold uppercase tracking-wide mb-1', l.prime ? 'text-urban-cyan' : 'text-slate-400']}>{l.ref}</div>
                <div class="text-sm font-display font-bold text-urban-blue-dark">{l.surface}</div>
                <div class="text-xs text-slate-500 mt-0.5">{l.floor}</div>
              </div>
            ))}
          </div>
        </div>

<div class="flex flex-col" data-animate data-animate-delay="1">
          <div>
            <div class="flex items-center gap-3 mb-4">
              <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-urban-cyan/10 border border-urban-cyan/20 text-urban-cyan text-xs font-semibold uppercase tracking-wide">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                Huesca Capital
              </div>
              <span class="inline-flex items-center px-3 py-1 rounded-full bg-amber-50 border border-amber-200 text-amber-700 text-xs font-semibold uppercase tracking-wide">Arrendamiento</span>
            </div>
            <h1 class="font-display text-3xl sm:text-4xl font-bold text-urban-blue-dark tracking-tight leading-tight">
              3 Locales Comerciales<br />Zona Los Olivos
            </h1>
            <p class="mt-2 text-lg text-slate-500">
              Barrio San Lorenzo &middot; Huesca Capital
            </p>
          </div>

<div class="mt-6 p-5 rounded-xl bg-white border border-slate-200">
            <div class="flex items-baseline gap-2">
              <span class="text-3xl font-display font-bold text-urban-blue-dark">8 €/m²/mes</span>
            </div>
            <div class="mt-2 flex flex-wrap gap-4 text-sm text-slate-500">
              <span>Local 1: <strong class="text-urban-blue-dark">5.501 €/mes</strong></span>
              <span>Local 2: <strong class="text-urban-blue-dark">4.058 €/mes</strong></span>
              <span>Local 3: <strong class="text-urban-blue-dark">4.924 €/mes</strong></span>
            </div>
            <div class="mt-3 pt-3 border-t border-slate-100 text-sm text-slate-500">
              Disponibles en conjunto o por separado. Superficie total: <strong>1.810,58 m²</strong>
            </div>
          </div>

<div class="mt-6 grid grid-cols-3 gap-3">
            <div class="p-4 rounded-xl bg-white border border-slate-200 text-center">
              <div class="text-2xl font-display font-bold text-urban-blue-dark">3</div>
              <div class="text-xs text-slate-500 mt-1">Locales</div>
            </div>
            <div class="p-4 rounded-xl bg-white border border-slate-200 text-center">
              <div class="text-xl font-display font-bold text-urban-blue-dark">1.810</div>
              <div class="text-xs text-slate-500 mt-1">m² totales</div>
            </div>
            <div class="p-4 rounded-xl bg-white border border-slate-200 text-center">
              <div class="text-xl font-display font-bold text-urban-blue-dark">8 €</div>
              <div class="text-xs text-slate-500 mt-1">m²/mes</div>
            </div>
          </div>

<ul class="mt-6 space-y-3">
            <li class="flex items-start gap-3 text-slate-600 text-sm">
              <svg class="w-5 h-5 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              Zona de mayor expansion de Huesca -- carencia detectada de retail
            </li>
            <li class="flex items-start gap-3 text-slate-600 text-sm">
              <svg class="w-5 h-5 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              Renta alta, empleo cualificado, crecimiento demografico sostenido
            </li>
            <li class="flex items-start gap-3 text-slate-600 text-sm">
              <svg class="w-5 h-5 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              Proximidad AVE -- 5 min de la Estacion Intermodal de Huesca
            </li>
            <li class="flex items-start gap-3 text-slate-600 text-sm">
              <svg class="w-5 h-5 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              Cerca del Poligono Tecnologico Walqa y centro de datos Amazon AWS
            </li>
          </ul>

<div class="mt-8 flex flex-col sm:flex-row gap-3">
            <BrochureModal assetSlug="locales-los-olivos-huesca" campaignSlug="locales-los-olivos-huesca" label="Descargar dossier" />
            <a href="/contacto" class="btn-primary flex-1 text-center">Solicitar informacion</a>
            <a
              href="https://wa.me/34696073991?text=Hola%2C%20me%20interesan%20los%20locales%20comerciales%20de%20Los%20Olivos%2C%20Huesca"
              class="btn-secondary flex-1 text-center"
              target="_blank"
              rel="noopener"
            >
              <svg class="w-5 h-5 mr-2" fill="currentColor" 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-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
              WhatsApp
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="bg-white border-y border-slate-200" aria-label="Descripcion del activo">
    <div class="container-main py-12 lg:py-16">
      <div class="max-w-3xl" data-animate>
        <h2 class="heading-md">Sobre el activo</h2>
        <div class="mt-6 space-y-4 text-slate-600 leading-relaxed">
          <p>
            Tres locales comerciales en <strong>planta baja y semisotano</strong> ubicados en el eje residencial de mayor crecimiento de Huesca: la <strong>Zona Los Olivos</strong>, dentro del Barrio San Lorenzo. Disponibles de forma conjunta o por separado, con superficie total de <strong>1.810,58 m²</strong>.
          </p>
          <p>
            El <strong>Local 1</strong> (C/Calatayud 21) es el mas amplio con 687,65 m², con fachada a dos calles y excelente visibilidad. El <strong>Local 2</strong> (Po Cruz del Sur 7) ofrece 507,31 m² en planta semisotano con acceso por pasaje. El <strong>Local 3</strong> (Po Cruz del Sur 5) suma 615,62 m² tambien en semisotano, con doble acceso independiente.
          </p>
          <p>
            La zona concentra una notable carencia de retail, alimentacion, servicios y ocio, generando una <strong>oportunidad de captacion de clientela estable</strong> en un entorno de renta alta, empleo cualificado y crecimiento demografico sostenido. Huesca es la puerta a los Pirineos y cuenta con conexion AVE directa a Zaragoza y Madrid.
          </p>
        </div>
      </div>
    </div>
  </section>

<section class="section-padding bg-urban-bg" aria-label="Detalle de locales">
    <div class="container-main">
      <div class="mb-10" data-animate>
        <h2 class="heading-md">Locales disponibles</h2>
        <p class="mt-3 text-slate-500">Tres unidades comerciales configurables en conjunto o por separado segun necesidad del operador.</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        {locales.map((l, i) => (
          <div
            class:list={[
              'bg-white rounded-2xl border p-6 hover:shadow-lg transition-all',
              l.prime ? 'border-urban-cyan/40 hover:shadow-urban-cyan/10' : 'border-slate-200 hover:border-urban-cyan/30 hover:shadow-urban-cyan/5'
            ]}
            data-animate
            data-animate-delay={String(i + 1)}
          >
            <div class="flex items-center justify-between mb-4">
              <span class="text-lg font-display font-bold text-urban-blue-dark">{l.ref}</span>
              {l.prime && (
                <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-urban-cyan/10 text-urban-cyan">Prime</span>
              )}
            </div>
            <div class="text-sm text-slate-500 font-medium mb-4">{l.address}</div>

<div class="space-y-3 text-sm">
              <div class="flex items-start gap-2.5">
                <svg class="w-4 h-4 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>
                <span class="text-slate-600"><strong>{l.surface}</strong> &middot; {l.floor}</span>
              </div>
              <div class="flex items-start gap-2.5">
                <svg class="w-4 h-4 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
                <span class="text-slate-600">{l.access}</span>
              </div>
            </div>

<div class="mt-5 pt-5 border-t border-slate-100">
              <div class="text-xl font-display font-bold text-urban-blue-dark">{formatPrice(l.price)}</div>
              <div class="text-xs text-slate-400 mt-0.5">8 €/m²/mes</div>
            </div>
          </div>
        ))}
      </div>
      <div class="mt-8 p-5 rounded-xl bg-white border border-slate-200" data-animate>
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <div class="text-sm font-semibold text-urban-blue-dark">Precio total en conjunto</div>
            <div class="text-2xl font-display font-bold text-urban-blue-dark mt-1">14.483 €/mes</div>
            <div class="text-sm text-slate-500 mt-1">1.810,58 m² &times; 8 €/m²/mes</div>
          </div>
          <div class="flex flex-col sm:flex-row gap-3">
            <BrochureModal assetSlug="locales-los-olivos-huesca" campaignSlug="locales-los-olivos-huesca" label="Descargar dossier" />
            <a href="/contacto" class="btn-primary text-center">Solicitar propuesta</a>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="section-padding bg-white border-y border-slate-200" aria-label="Ubicacion">
    <div class="container-main">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start">
        <div data-animate>
          <h2 class="heading-md">Ubicacion estrategica</h2>
          <p class="mt-4 text-slate-600 leading-relaxed">
            La <strong>Zona Los Olivos</strong>, en el Barrio San Lorenzo, es el eje de mayor expansion residencial de Huesca Capital. Un entorno de nueva construccion con alta densidad de hogares de renta elevada, profesionales cualificados y familias jovenes.
          </p>
          <ul class="mt-6 space-y-3">
            <li class="flex items-start gap-3 text-slate-600 text-sm">
              <svg class="w-5 h-5 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
              Zona Los Olivos &ndash; Barrio San Lorenzo, Huesca Capital
            </li>
            <li class="flex items-start gap-3 text-slate-600 text-sm">
              <svg class="w-5 h-5 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
              5 min andando de la Estacion Intermodal de Huesca (AVE Zaragoza-Madrid)
            </li>
            <li class="flex items-start gap-3 text-slate-600 text-sm">
              <svg class="w-5 h-5 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
              Proximidad al Poligono Tecnologico Walqa y centro de datos Amazon AWS
            </li>
            <li class="flex items-start gap-3 text-slate-600 text-sm">
              <svg class="w-5 h-5 text-urban-cyan mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
              Barrio n&ordm;1 en crecimiento demografico de Huesca
            </li>
          </ul>
          <div class="mt-6 p-4 rounded-xl bg-urban-bg border border-slate-200">
            <div class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Demanda detectada en la zona</div>
            <div class="flex flex-wrap gap-2">
              {['Alimentacion', 'Hosteleria', 'Salud y belleza', 'Servicios cotidianos', 'Ocio y entretenimiento'].map(tag => (
                <span class="px-3 py-1 rounded-full bg-white border border-slate-200 text-xs font-medium text-slate-600">{tag}</span>
              ))}
            </div>
          </div>
        </div>
        <div class="rounded-2xl overflow-hidden border border-slate-200 shadow-sm" data-animate data-animate-delay="1">
          <iframe
            src="https://maps.google.com/maps?q=Los+Olivos+Huesca+Spain&t=&z=15&ie=UTF8&iwloc=&output=embed"
            width="100%"
            height="400"
            style="border:0;"
            allowfullscreen=""
            loading="lazy"
            title="Zona Los Olivos, Huesca Capital"
          ></iframe>
        </div>
      </div>
    </div>
  </section>

<section class="py-12 bg-urban-blue" aria-label="Contexto de mercado">
    <div class="container-main">
      <div class="text-center mb-8" data-animate>
        <h3 class="text-xl font-display font-bold text-white">Contexto socioeconomico</h3>
        <p class="mt-2 text-sm text-blue-200">Huesca Capital &ndash; Zona Los Olivos, Barrio San Lorenzo</p>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-5 gap-4" data-animate data-animate-delay="1">
        {marketData.map((item) => (
          <div class="text-center p-4">
            <div class:list={['text-xl font-display font-bold', item.highlight ? 'text-urban-cyan' : 'text-white']}>{item.value}</div>
            <div class="mt-1 text-xs text-blue-200 leading-tight">{item.label}</div>
          </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">Te interesa este activo?</h2>
      <p class="mt-4 text-lg text-slate-300 max-w-xl mx-auto leading-relaxed">
        Solicita el dossier completo, informacion de la zona o agenda una visita a los locales.
      </p>
      <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
        <BrochureModal assetSlug="locales-los-olivos-huesca" campaignSlug="locales-los-olivos-huesca" label="Descargar dossier" />
        <a href="/contacto" class="btn-primary text-lg px-8 py-4">Solicitar informacion</a>
        <a
          href="https://wa.me/34696073991?text=Hola%2C%20me%20interesan%20los%20locales%20comerciales%20de%20Los%20Olivos%2C%20Huesca"
          class="btn-secondary-light text-lg px-8 py-4"
          target="_blank"
          rel="noopener"
        >WhatsApp</a>
      </div>
    </div>
  </section>

</Base>