<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">
      Edificio La Rural de Seguros
    </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> Hormigón Postensado
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2011</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">
        Edificio La Rural de Seguros
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">2.500 m², luces x 14,5 m</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">Edificios</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. Medina</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">
                Losas y vigas
              </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">
      Inverfin – Casa Matriz
    </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> Hormigón Postensado
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2011</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">
        Inverfin – Casa Matriz
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">6.500 m², losas de 10 x 10 m</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">Edificios</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">JG&amp;L</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">
                Losas y vigas
              </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">
      Shopping Paris (CDE)
    </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> Hormigón Postensado
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2012</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">
        Shopping Paris (CDE)
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">75.000 m²</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">Edificios</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">Rodríguez Const.</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">
                Losas y vigas
              </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">
      Vivienda Parana CP – CDE
    </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> Hormigón Postensado
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2012</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">
        Vivienda Parana CP – CDE
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">2 vigas colgantes de 14 mts</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">Edificios</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">
                Losas y vigas
              </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">
      Paraqvaria Torre 1
    </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> Hormigón Postensado
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2012</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">
        Paraqvaria Torre 1
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">4.000 m² en 11 niveles</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">Edificios</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">Gómez Abente</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">
                Losas y vigas
              </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">
      Biblioteca del Congreso
    </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> Hormigón Postensado
      </p>

    <div class="space-y-1 text-xs text-charcoal mb-4">
        <p><span class="font-semibold text-green-dark">Año:</span> 2012</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">
        Biblioteca del Congreso
      </h3>

        <p class="text-charcoal/80 leading-relaxed mb-6">856 m²</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">Edificios</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">Itasa</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">
                Losas y vigas
              </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=3">
  CARGAR MÁS
</a>
  </div>
</template></turbo-stream>