<turbo-stream action="append" target="obras-grid"><template>
    <article data-controller="obra-modal" class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">

  <div class="px-4 pt-4 pb-3">
    <h3 class="text-sm font-extrabold text-green-dark uppercase leading-snug">
      Estacionamiento Sanatorio Santa Julia
    </h3>
  </div>

  <div class="overflow-hidden">
      <div class="w-full h-48 bg-slate-200 flex items-center justify-center">
        <i class="fas fa-image text-3xl text-slate-400"></i>
      </div>
  </div>

  <div class="px-4 pt-3 pb-4 flex flex-col flex-1">

      <p class="text-xs text-charcoal mb-3">
        <span class="font-semibold text-green-dark">Obra:</span> Pisos
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2017</p>
    </div>

    <div class="mt-auto">
        <button type="button" data-action="obra-modal#open" class="inline-block text-center font-bold uppercase tracking-wide transition-all duration-200 text-[10px] px-4 py-2 rounded-lg bg-brand-green text-white hover:bg-green-dark w-full block cursor-pointer">VER MÁS</button>

    </div>

  </div>

  <div data-obra-modal-target="modal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
     role="dialog" aria-modal="true">

  <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto relative">

    <button type="button"
            data-obra-modal-close
            aria-label="Cerrar"
            class="absolute top-3 right-3 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 text-charcoal hover:bg-green-dark hover:text-white transition-colors shadow">
      <i class="fas fa-times"></i>
    </button>

    <div class="overflow-hidden rounded-t-2xl">
        <img alt="Sin imagen disponible" class="w-full h-56 md:h-72 object-cover" loading="lazy" src="/assets/placeholder_obra-e59eac09.svg" />
    </div>

    <div class="p-6 md:p-8">
      <h3 class="text-xl md:text-2xl font-extrabold text-green-dark uppercase leading-tight mb-4">
        Estacionamiento Sanatorio Santa Julia
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">2.065 m², 100% sin juntas</p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-building text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Proyecto</p>
              <p class="text-sm font-semibold text-charcoal">Centros Logísticos</p>
            </div>
          </div>


          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-hard-hat text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Constructora</p>
              <p class="text-sm font-semibold text-charcoal">Tecinci</p>
            </div>
          </div>
      </div>

        <div class="mt-6">
          <p class="text-xs font-bold text-charcoal/50 uppercase tracking-widest mb-3">Categorías</p>
          <div class="flex flex-wrap gap-2">
              <span class="inline-block px-4 py-1.5 bg-brand-green/10 text-green-dark text-sm font-medium rounded-full border border-brand-green/30">
                Pisos superplanos
              </span>
          </div>
        </div>
    </div>

  </div>
</div>


</article>

    <article data-controller="obra-modal" class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">

  <div class="px-4 pt-4 pb-3">
    <h3 class="text-sm font-extrabold text-green-dark uppercase leading-snug">
      NGO
    </h3>
  </div>

  <div class="overflow-hidden">
      <div class="w-full h-48 bg-slate-200 flex items-center justify-center">
        <i class="fas fa-image text-3xl text-slate-400"></i>
      </div>
  </div>

  <div class="px-4 pt-3 pb-4 flex flex-col flex-1">

      <p class="text-xs text-charcoal mb-3">
        <span class="font-semibold text-green-dark">Obra:</span> Pisos
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2017</p>
    </div>

    <div class="mt-auto">
        <button type="button" data-action="obra-modal#open" class="inline-block text-center font-bold uppercase tracking-wide transition-all duration-200 text-[10px] px-4 py-2 rounded-lg bg-brand-green text-white hover:bg-green-dark w-full block cursor-pointer">VER MÁS</button>

    </div>

  </div>

  <div data-obra-modal-target="modal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
     role="dialog" aria-modal="true">

  <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto relative">

    <button type="button"
            data-obra-modal-close
            aria-label="Cerrar"
            class="absolute top-3 right-3 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 text-charcoal hover:bg-green-dark hover:text-white transition-colors shadow">
      <i class="fas fa-times"></i>
    </button>

    <div class="overflow-hidden rounded-t-2xl">
        <img alt="Sin imagen disponible" class="w-full h-56 md:h-72 object-cover" loading="lazy" src="/assets/placeholder_obra-e59eac09.svg" />
    </div>

    <div class="p-6 md:p-8">
      <h3 class="text-xl md:text-2xl font-extrabold text-green-dark uppercase leading-tight mb-4">
        NGO
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">2.300 m², 100% sin juntas</p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-building text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Proyecto</p>
              <p class="text-sm font-semibold text-charcoal">Centros Logísticos</p>
            </div>
          </div>


          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-hard-hat text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Constructora</p>
              <p class="text-sm font-semibold text-charcoal">Salum &amp; Wenz</p>
            </div>
          </div>
      </div>

        <div class="mt-6">
          <p class="text-xs font-bold text-charcoal/50 uppercase tracking-widest mb-3">Categorías</p>
          <div class="flex flex-wrap gap-2">
              <span class="inline-block px-4 py-1.5 bg-brand-green/10 text-green-dark text-sm font-medium rounded-full border border-brand-green/30">
                Pisos superplanos
              </span>
          </div>
        </div>
    </div>

  </div>
</div>


</article>

    <article data-controller="obra-modal" class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">

  <div class="px-4 pt-4 pb-3">
    <h3 class="text-sm font-extrabold text-green-dark uppercase leading-snug">
      Corporación Textil D3
    </h3>
  </div>

  <div class="overflow-hidden">
      <div class="w-full h-48 bg-slate-200 flex items-center justify-center">
        <i class="fas fa-image text-3xl text-slate-400"></i>
      </div>
  </div>

  <div class="px-4 pt-3 pb-4 flex flex-col flex-1">

      <p class="text-xs text-charcoal mb-3">
        <span class="font-semibold text-green-dark">Obra:</span> Pisos
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2018</p>
    </div>

    <div class="mt-auto">
        <button type="button" data-action="obra-modal#open" class="inline-block text-center font-bold uppercase tracking-wide transition-all duration-200 text-[10px] px-4 py-2 rounded-lg bg-brand-green text-white hover:bg-green-dark w-full block cursor-pointer">VER MÁS</button>

    </div>

  </div>

  <div data-obra-modal-target="modal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
     role="dialog" aria-modal="true">

  <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto relative">

    <button type="button"
            data-obra-modal-close
            aria-label="Cerrar"
            class="absolute top-3 right-3 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 text-charcoal hover:bg-green-dark hover:text-white transition-colors shadow">
      <i class="fas fa-times"></i>
    </button>

    <div class="overflow-hidden rounded-t-2xl">
        <img alt="Sin imagen disponible" class="w-full h-56 md:h-72 object-cover" loading="lazy" src="/assets/placeholder_obra-e59eac09.svg" />
    </div>

    <div class="p-6 md:p-8">
      <h3 class="text-xl md:text-2xl font-extrabold text-green-dark uppercase leading-tight mb-4">
        Corporación Textil D3
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">1.375 m² sin juntas</p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-building text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Proyecto</p>
              <p class="text-sm font-semibold text-charcoal">Centros Logísticos</p>
            </div>
          </div>


          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-hard-hat text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Constructora</p>
              <p class="text-sm font-semibold text-charcoal">Arq. Lopatiuk</p>
            </div>
          </div>
      </div>

        <div class="mt-6">
          <p class="text-xs font-bold text-charcoal/50 uppercase tracking-widest mb-3">Categorías</p>
          <div class="flex flex-wrap gap-2">
              <span class="inline-block px-4 py-1.5 bg-brand-green/10 text-green-dark text-sm font-medium rounded-full border border-brand-green/30">
                Pisos superplanos
              </span>
          </div>
        </div>
    </div>

  </div>
</div>


</article>

    <article data-controller="obra-modal" class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">

  <div class="px-4 pt-4 pb-3">
    <h3 class="text-sm font-extrabold text-green-dark uppercase leading-snug">
      Cimplast
    </h3>
  </div>

  <div class="overflow-hidden">
      <div class="w-full h-48 bg-slate-200 flex items-center justify-center">
        <i class="fas fa-image text-3xl text-slate-400"></i>
      </div>
  </div>

  <div class="px-4 pt-3 pb-4 flex flex-col flex-1">

      <p class="text-xs text-charcoal mb-3">
        <span class="font-semibold text-green-dark">Obra:</span> Pisos
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2018</p>
    </div>

    <div class="mt-auto">
        <button type="button" data-action="obra-modal#open" class="inline-block text-center font-bold uppercase tracking-wide transition-all duration-200 text-[10px] px-4 py-2 rounded-lg bg-brand-green text-white hover:bg-green-dark w-full block cursor-pointer">VER MÁS</button>

    </div>

  </div>

  <div data-obra-modal-target="modal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
     role="dialog" aria-modal="true">

  <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto relative">

    <button type="button"
            data-obra-modal-close
            aria-label="Cerrar"
            class="absolute top-3 right-3 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 text-charcoal hover:bg-green-dark hover:text-white transition-colors shadow">
      <i class="fas fa-times"></i>
    </button>

    <div class="overflow-hidden rounded-t-2xl">
        <img alt="Sin imagen disponible" class="w-full h-56 md:h-72 object-cover" loading="lazy" src="/assets/placeholder_obra-e59eac09.svg" />
    </div>

    <div class="p-6 md:p-8">
      <h3 class="text-xl md:text-2xl font-extrabold text-green-dark uppercase leading-tight mb-4">
        Cimplast
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">2.750 m² sin juntas</p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-building text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Proyecto</p>
              <p class="text-sm font-semibold text-charcoal">Centros Logísticos</p>
            </div>
          </div>


          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-hard-hat text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Constructora</p>
              <p class="text-sm font-semibold text-charcoal">Top Floor</p>
            </div>
          </div>
      </div>

        <div class="mt-6">
          <p class="text-xs font-bold text-charcoal/50 uppercase tracking-widest mb-3">Categorías</p>
          <div class="flex flex-wrap gap-2">
              <span class="inline-block px-4 py-1.5 bg-brand-green/10 text-green-dark text-sm font-medium rounded-full border border-brand-green/30">
                Pisos superplanos
              </span>
          </div>
        </div>
    </div>

  </div>
</div>


</article>

    <article data-controller="obra-modal" class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">

  <div class="px-4 pt-4 pb-3">
    <h3 class="text-sm font-extrabold text-green-dark uppercase leading-snug">
      Puerto Caacupemi
    </h3>
  </div>

  <div class="overflow-hidden">
      <div class="w-full h-48 bg-slate-200 flex items-center justify-center">
        <i class="fas fa-image text-3xl text-slate-400"></i>
      </div>
  </div>

  <div class="px-4 pt-3 pb-4 flex flex-col flex-1">

      <p class="text-xs text-charcoal mb-3">
        <span class="font-semibold text-green-dark">Obra:</span> Pisos
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2018</p>
    </div>

    <div class="mt-auto">
        <button type="button" data-action="obra-modal#open" class="inline-block text-center font-bold uppercase tracking-wide transition-all duration-200 text-[10px] px-4 py-2 rounded-lg bg-brand-green text-white hover:bg-green-dark w-full block cursor-pointer">VER MÁS</button>

    </div>

  </div>

  <div data-obra-modal-target="modal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
     role="dialog" aria-modal="true">

  <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto relative">

    <button type="button"
            data-obra-modal-close
            aria-label="Cerrar"
            class="absolute top-3 right-3 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 text-charcoal hover:bg-green-dark hover:text-white transition-colors shadow">
      <i class="fas fa-times"></i>
    </button>

    <div class="overflow-hidden rounded-t-2xl">
        <img alt="Sin imagen disponible" class="w-full h-56 md:h-72 object-cover" loading="lazy" src="/assets/placeholder_obra-e59eac09.svg" />
    </div>

    <div class="p-6 md:p-8">
      <h3 class="text-xl md:text-2xl font-extrabold text-green-dark uppercase leading-tight mb-4">
        Puerto Caacupemi
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">1.200 m² H° antiguo, 1 capa</p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-building text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Proyecto</p>
              <p class="text-sm font-semibold text-charcoal">Centros Logísticos</p>
            </div>
          </div>

          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-ruler-combined text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Área</p>
              <p class="text-sm font-semibold text-charcoal">Centro logístico</p>
            </div>
          </div>

      </div>

        <div class="mt-6">
          <p class="text-xs font-bold text-charcoal/50 uppercase tracking-widest mb-3">Categorías</p>
          <div class="flex flex-wrap gap-2">
              <span class="inline-block px-4 py-1.5 bg-brand-green/10 text-green-dark text-sm font-medium rounded-full border border-brand-green/30">
                ASHFORD FORMULA
              </span>
          </div>
        </div>
    </div>

  </div>
</div>


</article>

    <article data-controller="obra-modal" class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">

  <div class="px-4 pt-4 pb-3">
    <h3 class="text-sm font-extrabold text-green-dark uppercase leading-snug">
      Gandys
    </h3>
  </div>

  <div class="overflow-hidden">
      <div class="w-full h-48 bg-slate-200 flex items-center justify-center">
        <i class="fas fa-image text-3xl text-slate-400"></i>
      </div>
  </div>

  <div class="px-4 pt-3 pb-4 flex flex-col flex-1">

      <p class="text-xs text-charcoal mb-3">
        <span class="font-semibold text-green-dark">Obra:</span> Pisos
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2018</p>
    </div>

    <div class="mt-auto">
        <button type="button" data-action="obra-modal#open" class="inline-block text-center font-bold uppercase tracking-wide transition-all duration-200 text-[10px] px-4 py-2 rounded-lg bg-brand-green text-white hover:bg-green-dark w-full block cursor-pointer">VER MÁS</button>

    </div>

  </div>

  <div data-obra-modal-target="modal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
     role="dialog" aria-modal="true">

  <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto relative">

    <button type="button"
            data-obra-modal-close
            aria-label="Cerrar"
            class="absolute top-3 right-3 z-10 w-9 h-9 flex items-center justify-center rounded-full bg-white/90 text-charcoal hover:bg-green-dark hover:text-white transition-colors shadow">
      <i class="fas fa-times"></i>
    </button>

    <div class="overflow-hidden rounded-t-2xl">
        <img alt="Sin imagen disponible" class="w-full h-56 md:h-72 object-cover" loading="lazy" src="/assets/placeholder_obra-e59eac09.svg" />
    </div>

    <div class="p-6 md:p-8">
      <h3 class="text-xl md:text-2xl font-extrabold text-green-dark uppercase leading-tight mb-4">
        Gandys
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">600 m² H° antiguo, 1 capa</p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-building text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Proyecto</p>
              <p class="text-sm font-semibold text-charcoal">Centros Logísticos</p>
            </div>
          </div>

          <div class="flex items-start gap-3">
            <span class="mt-0.5 w-8 h-8 shrink-0 rounded-full bg-green-dark/10 flex items-center justify-center">
              <i class="fas fa-ruler-combined text-green-dark text-xs"></i>
            </span>
            <div>
              <p class="text-xs text-charcoal/50 font-medium">Área</p>
              <p class="text-sm font-semibold text-charcoal">2 losas de depósito</p>
            </div>
          </div>

      </div>

        <div class="mt-6">
          <p class="text-xs font-bold text-charcoal/50 uppercase tracking-widest mb-3">Categorías</p>
          <div class="flex flex-wrap gap-2">
              <span class="inline-block px-4 py-1.5 bg-brand-green/10 text-green-dark text-sm font-medium rounded-full border border-brand-green/30">
                ASHFORD FORMULA
              </span>
          </div>
        </div>
    </div>

  </div>
</div>


</article>

</template></turbo-stream>
<turbo-stream action="replace" target="obras-load-more"><template>
  <div id="obras-load-more" class="flex justify-center mt-10">
      <a class="px-10 py-3 bg-green-dark text-white text-xs font-bold uppercase tracking-widest rounded-full hover:opacity-90 transition-opacity" data-turbo-stream="true" href="/obras/mas?page=4&amp;proyecto=centros-logisticos">
  CARGAR MÁS
</a>
  </div>
</template></turbo-stream>