@php
    use function Modules\Core\Settings\Helpers\setting;
@endphp
<section class="bg-[#e8f7f7] py-14" id="admisiones-pasos">
    <div class="container mx-auto px-4 md:px-[6%]">

        {{-- Título principal --}}
        <h2 class="text-[#007e7f] text-center text-2xl md:text-3xl font-bold mb-10">
            4 Sencillos pasos para asegurar tu lugar
        </h2>
        {{-- Lista de pasos --}}
        <div class="flex flex-col gap-1 md:gap-6 max-w-auto mx-auto">
            {{-- Paso 1 --}}
            <div class="bg-white rounded-2xl shadow-[0_0px_6px_7px_#cff2f2] my-2 md:my-2 p-4 md:p-6 flex items-center gap-0 md:gap-6" id="admisiones-paso-1" data-aos="fade-right" data-aos-delay="150">
                {{-- Número --}}
                <span class="text-[#3cb4b1] text-4xl md:text-6xl font-semibold leading-none w-10 md:w-12 shrink-0 flex items-center justify-center">
                    1
                </span>

                {{-- Contenedor derecho --}}
                <div class="flex flex-col md:flex-row items-center md:items-start gap-3 md:gap-4 w-full">

                    {{-- Ícono --}}
                    <div class="shrink-0 flex justify-center md:justify-start w-full md:w-auto">
                        <x-local-navegador class="h-16 w-16 md:h-36 md:w-36 fill-[#7ebbe6]" data-aos="zoom-in" data-aos-delay="200"/>
                    </div>

                    {{-- Contenido --}}
                    <div class="flex flex-col gap-2 text-center md:text-left">
                        <h3 class="text-[#007e7f] text-xl md:text-3xl font-bold">
                            Llena tu formulario de preinscripción
                        </h3>
                        <p class="font-medium text-[#007e7f] text-lg md:text-2xl leading-relaxed">
                            Completa el formulario para solicitar tu ficha de admisión.
                        </p>
                        <div>
                            <a href="{{ setting('site.enlace_admisiones') }}" target="_blank"
                            class="inline-block mt-2 bg-[#7ebbe6] hover:bg-[#007e7f] text-white text-sm font-semibold px-5 py-2 rounded-md transition-colors duration-200">
                                Formulario
                            </a>
                        </div>
                    </div>

                </div>

            </div>

            {{-- Paso 2 --}}
            <div class="bg-white rounded-2xl shadow-[0_0px_6px_7px_#cff2f2] my-2 md:my-2 p-4 md:p-6 flex items-center gap-4 md:gap-6" id="admisiones-paso-2"  data-aos="fade-left" data-aos-delay="250">

                <span class="text-[#3cb4b1] text-4xl md:text-6xl font-semibold leading-none w-10 md:w-12 shrink-0 flex items-center justify-center">
                    2
                </span>

                <div class="flex flex-col md:flex-row items-center md:items-start gap-3 md:gap-4 w-full">

                    <div class="shrink-0 flex justify-center md:justify-start w-full md:w-auto">
                        <x-local-telefono-inteligente class="h-16 w-16 md:h-36 md:w-36 fill-[#7ebbe6]" data-aos="zoom-in" data-aos-delay="200"/>
                    </div>

                    <div class="flex flex-col gap-2 text-center md:text-left">
                        <h3 class="text-[#007e7f] text-xl md:text-3xl font-bold">
                            Confirma tu registro por WhatsApp
                        </h3>
                        <p class="font-medium text-[#007e7f] text-lg md:text-2xl leading-relaxed">
                            Te enviaremos un mensaje para validar tu solicitud y brindarte indicaciones.
                        </p>
                    </div>

                </div>

            </div>

            {{-- Paso 3 --}}
            <div class="bg-white rounded-2xl shadow-[0_0px_6px_7px_#cff2f2] my-2 md:my-2 p-4 md:p-6 flex items-center gap-4 md:gap-6" id="admisiones-paso-3"  data-aos="fade-right" data-aos-delay="350">

                <span class="text-[#3cb4b1] text-4xl md:text-6xl font-semibold leading-none w-10 md:w-12 shrink-0 flex items-center justify-center">
                    3
                </span>

                <div class="flex flex-col md:flex-row items-center md:items-start gap-3 md:gap-4 w-full">

                    <div class="shrink-0 flex justify-center md:justify-start w-full md:w-auto">
                        <x-local-administrar class="h-16 w-16 md:h-36 md:w-36 fill-[#7ebbe6]" data-aos="zoom-in" data-aos-delay="200"/>
                    </div>

                    <div class="flex flex-col gap-2 text-center md:text-left">
                        <h3 class="text-[#007e7f] text-xl md:text-3xl font-bold">
                            Entrega tu documentación y realiza el pago
                        </h3>
                        <p class="font-medium text-[#007e7f] text-lg md:text-2xl leading-relaxed">
                            Acude a la institución con los documentos solicitados, realiza el pago de tu ficha
                            y envía tu comprobante al área de admisiones.
                        </p>
                    </div>

                </div>

            </div>

            {{-- Paso 4 --}}
            <div class="bg-white rounded-2xl shadow-[0_0px_6px_7px_#cff2f2] my-2 md:my-2 p-4 md:p-6 flex items-center gap-4 md:gap-6" id="admisiones-paso-4"  data-aos="fade-left" data-aos-delay="500">

                <span class="text-[#3cb4b1] text-4xl md:text-6xl font-semibold leading-none w-10 md:w-12 shrink-0 flex items-center justify-center">
                    4
                </span>

                <div class="flex flex-col md:flex-row items-center md:items-start gap-3 md:gap-4 w-full">

                    <div class="shrink-0 flex justify-center md:justify-start w-full md:w-auto">
                        <x-local-enfermerab class="h-16 w-16 md:h-36 md:w-36 fill-[#7ebbe6]" data-aos="zoom-in" data-aos-delay="200"/>
                    </div>

                    <div class="flex flex-col gap-2 text-center md:text-left">
                        <h3 class="text-[#007e7f] text-xl md:text-3xl font-bold">
                            ¡Listo!
                        </h3>
                        <p class="font-medium text-[#007e7f] text-lg md:text-2xl leading-relaxed">
                            Una vez completado el proceso, estarás listo para formar parte de nuestra gran comunidad.
                        </p>
                    </div>

                </div>

            </div>

        </div>{{-- /flex pasos --}}
    </div>{{-- /container --}}
</section>