{{-- SECTION: Hero Banner Oferta --}}
<section class="w-full bg-[#EAF7FA]" id="oferta-hero">
    {{-- Banner Principal --}}
    <div class="relative w-full overflow-hidden">
        <img src="{{ Storage::url($oferta->imagen_portada) }}" alt="{{ $oferta->nombre }}"
            class="w-full h-full object-cover object-center hidden md:block" width="100%" />
        <img src="{{ Storage::url($oferta->portada_movil) }}" alt="{{ $oferta->nombre }}"
            class="w-full h-full object-cover object-center md:hidden" width="100%" />

        {{-- Contenido centrado --}}
        <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
            <div class="mb-1 lg:mb-4">
                <x-local-gorrito class="w-20 sm:w-20 md:w-24 lg:w-30  fill-white mx-auto" />
            </div>
            <h2 class="text-[#49d0ce] text-xl md:text-2xl font-semibold mb-2 tracking-widest ">Oferta Educativa</h2>
            <h1 class="text-white text-2xl sm:text-2xl md:text-2xl lg:text-5xl font-medium drop-shadow-lg">
                {{ $oferta->nombre }}
            </h1>
        </div>
    </div>
    {{-- @dd($oferta); --}}
    <div class="container">
        {{-- Info Modalidad y Botón --}}
        <p class="pt-2 text-[#007e7f] font-bold text-center text-base md:text-xl">Modalidad {{ $oferta->modalidad }}</p>
        <p class="pb-2 text-[#007e7f] font-normal text-center text-base md:text-xl">{{ $oferta->incorporacion }}</p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">

            <!-- Card -->
            <div class="info-card bg-[{{ $oferta->tipoEstudio->color ?? '#007e7f' }}] text-white px-6 py-8 flex items-center gap-4 shadow-md h-full"
                data-aos="fade-up" data-aos-delay="0"
                style="background-color: {{ $oferta->tipoEstudio->color ?? '#007e7f' }}">

                <x-local-gorrito class="w-16 lg:w-[72px] fill-white flex-shrink-0" />

                <div>
                    <h3 class="font-bold">Duración:</h3>
                    <p class="text-sm">{{ $oferta->duracion }}</p>
                </div>
            </div>

            <!-- Card -->
            <div class="info-card bg-[{{ $oferta->tipoEstudio->color ?? '#007e7f' }}] text-white px-6 py-8 flex items-center gap-4 shadow-md h-full"
                data-aos="fade-up" data-aos-delay="150"
                style="background-color: {{ $oferta->tipoEstudio->color ?? '#007e7f' }}">

                <x-local-tiempo class="w-16 lg:w-[72px] fill-white flex-shrink-0" />

                <div>
                    <h3 class="font-bold">Horarios:</h3>
                    <p class="text-sm">{{ $oferta->horarios }}</p>
                </div>
            </div>

            <!-- Card -->
            <div class="info-card bg-[{{ $oferta->tipoEstudio->color ?? '#007e7f' }}] text-white px-6 py-8 flex items-center gap-4 shadow-md h-full"
                data-aos="fade-up" data-aos-delay="300"
                style="background-color: {{ $oferta->tipoEstudio->color ?? '#007e7f' }}">

                <x-local-calendario class="w-16 lg:w-[72px] fill-white flex-shrink-0" />

                <div>
                    <h3 class="font-bold">Días:</h3>
                    <p class="text-sm">{{ $oferta->dias_clase }}</p>
                </div>
            </div>

        </div>
    </div>
</section>