@extends('layouts.app')
@section('content')
@if($objCiencia!=null)
<main class="ciencia">
    <section class="section sec-banner">
        <div class="sxs-bansc">
            <div class="sxs-bansc__bg sos-absolute before after">
                <figure class="figure media-cover"><img loading="lazy" class="lazy loaded t-opacity" alt="" src="images/ciencia-banner.webp"></figure>
                <div class="sxs-bansc__wtm absolute size-full o_ring--after"></div>
            </div>
            <div class="sxs-container sxs-bansc__con0">
                <ol class="sxs-bcrm sxs-bansc__bcrm">
                    <li class="sxs-bcrm__ite"><a href="/" data-discover="true">Inicio</a></li>
                    <li class="sxs-bcrm__ite"><span>{{$objCiencia['sec_banner']['titulo']}}</span></li>
                </ol>
                <div class="sxs-bansc__con1">
                    <div class="sxs-bansc__con2">
                        <header class="sxs-headline sxs-bansc__hdr">
                            <h1 class="sxs-headline__tit sxs-headline__tit--shadowed sxs-headline__tit--align-start sxs-headline__tit--text-color-white sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-50">{{$objCiencia['sec_banner']['titulo']}}</h1>
                        </header>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section sec-tabs">
        <div class="sxs-container sec-tabs__con0">
            <div class="sec-tabs__con1 in-view">
                <div class="sxs-tabs">
                    <ul class="sxs-tabs__lis">
                        @php $v_o = 0; @endphp
                        @foreach($objCiencia['secciones'] as $a)
                        @php $v_o++; $valactiv=($v_o==1?"active":""); @endphp
                        <li class="sxs-tabs__tab {{$valactiv}}">
                            <button type="button" class="sxs-tabs__btn" data-tab="{{$a['slug']}}">{{$a['titulo']}}</button>
                        </li>
                        @endforeach
                        <li aria-hidden="true" class="sxs-tabs__ind"></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <div class="sec-panels w-full">
        @php $v_o = 0; @endphp
        @foreach($objCiencia['secciones'] as $a)
        @php $v_o++; $valactiv = ($v_o==1?"active":""); @endphp
        <div class="o_panel o_panel-t--opacity {{$valactiv}}" data-tab="{{$a['slug']}}">
            <section class="sec-des">
                <div class="sxs-container sec-des__con0">
                    <div class="sec-des__con1 row row--f">
                        <div class="sec-des__text col col--f in-view">
                            <header class="sxs-headline sec-des__hdr">
                                <h2 class="sxs-headline__tit sxs-headline__tit--align-start sxs-headline__tit--text-color-duller sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-40">{{$a['sec_descripcion']['titulo']}}</h2>
                            </header>
                            <div class="rich-text sas-it">
                                @if(isset($a['sec_descripcion']['bloques'][0]))
                                @php echo html_entity_decode($a['sec_descripcion']['bloques'][0]['enriquecido']) @endphp
                                @endif
                                @if(isset($a['sec_descripcion']['bloques'][1]))
                                <ul class="sas-ilis sas-ilis--v1 row row--f list-none">
                                    @foreach($a['sec_descripcion']['bloques'][1]['items'] as $b)
                                    <li class="sas-ilis__ite col col--f flex-w-auto">
                                        <span class="sxs-ltg">
                                            <span class="sxs-ltg__ico">
                                                <i class="icon icon-misc1 check"></i>
                                            </span>
                                            <span class="sxs-ltg__text">
                                                <div class="rich-text">
                                                    @php echo html_entity_decode($b['enriquecido']) @endphp
                                                </div>
                                            </span>
                                        </span>
                                    </li>
                                    @endforeach
                                </ul>
                                @endif
                            </div>
                            <header class="sxs-headline sec-des__acc-hdr">
                                <h2 class="sxs-headline__tit sxs-headline__tit--align-start sxs-headline__tit--text-color-duller sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-40">
                                    {{isset($a['sec_descripcion']['acordeon']['titulo'])?$a['sec_descripcion']['acordeon']['titulo']:''}}
                                </h2>
                            </header>
                            <div class="sas-accs in-view">
                                @foreach($a['sec_descripcion']['acordeon']['items'] as $b)
                                @php $v_tba = 0; @endphp
                                <div class="sxs-acc sxs-acc--v3" data-sub="id{{$v_tba}}" style="--_idx: {{$v_tba}};">
                                    <button aria-label="Abrir menú" role="button" class="sxs-acc__hdr is-closed before">
                                        <div class="sxs-acc__hdr-con0">
                                            <header class="sxs-headline sxs-acc__hdr-con1">
                                                <div class="sxs-headline__tit sxs-headline__tit--align-start sxs-headline__tit--text-color-duller sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-20 sxs-acc__hdr-tit">{{$b['titulo']}}</div>
                                            </header>
                                            <div class="sxs-acc__hdr-icon">
                                                <div class="sxs-acc__hdr-ico"><i class="icon icon-misc1 mas"></i></div>
                                            </div>
                                        </div>
                                    </button>
                                    <div class="sxs-acc__bod is-closed" style="overflow: hidden; max-height: 0px;">
                                        <div class="sxs-acc__bod-con0">
                                            @if(count($b['bloques'])===1)
                                            @if(isset($b['bloques'][0]['items']))
                                            <div class="rich-text sas-it">
                                                @foreach($b['bloques'][0]['items'] as $d)
                                                <p>@php echo html_entity_decode($d['enriquecido']) @endphp</p>
                                                @endforeach
                                            </div>
                                            @else
                                            <div class="rich-text sas-it">
                                                <p>@php echo html_entity_decode($b['bloques'][0]['enriquecido']) @endphp</p>
                                            </div>
                                            @endif
                                            @else
                                            @if(count($b['bloques'])===3)
                                            <div class="rich-text sas-it">
                                                <p>@php echo html_entity_decode($b['bloques'][0]['enriquecido']) @endphp</p>
                                            </div>
                                            @if(isset($b['bloques'][1]['items']))
                                            <ul class="sas-ilis sas-ilis--v2 row row--f list-none">
                                                @foreach($b['bloques'][1]['items'] as $d)
                                                @if(isset($d['icon']))
                                                <li class="sas-ilis__ite col col--f">
                                                    <div class="sxs-ritcrd">
                                                        <div class="sxs-ritcrd__ico">
                                                            <i class="icon icon-misc1 {{$d['icon']}}"></i>
                                                        </div>
                                                        <div class="sxs-ritcrd__tit">
                                                            @php echo html_entity_decode($d['titulo']) @endphp
                                                        </div>
                                                    </div>
                                                </li>
                                                @else
                                                <span class="sxs-ltg">
                                                    <span class="sxs-ltg__ico"><i class="icon icon-misc1 check"></i></span>
                                                    <span class="sxs-ltg__text">
                                                        <div class="rich-text">
                                                            @php echo html_entity_decode($d['enriquecido']) @endphp
                                                        </div>
                                                    </span>
                                                </span>
                                                @endif
                                                @endforeach
                                            </ul>
                                            @endif
                                            <div class="rich-text sas-it">
                                                <p>@php echo html_entity_decode($b['bloques'][2]['enriquecido']) @endphp</p>
                                            </div>
                                            @else
                                            <ul class="sas-ilis sas-ilis--v1 row row--f list-none">
                                                @foreach($b['bloques'] as $c)
                                                @if(isset($c['items']))
                                                @foreach($c as $d)
                                                @if(isset($d[0]['enriquecido']))
                                                @foreach($d as $da)
                                                <li class="sas-ilis__ite col col--f flex-w-auto">
                                                    <span class="sxs-ltg">
                                                        <span class="sxs-ltg__ico">
                                                            <i class="icon icon-misc1 check"></i>
                                                        </span>
                                                        <span class="sxs-ltg__text">
                                                            <div class="rich-text">@php echo html_entity_decode($da['enriquecido']) @endphp</div>
                                                        </span>
                                                    </span>
                                                </li>
                                                @endforeach
                                                @endif
                                                @endforeach
                                                @else
                                                <div class="rich-text sas-it">
                                                    @php echo html_entity_decode($c['enriquecido']) @endphp
                                                </div>
                                                @endif
                                                @endforeach
                                            </ul>
                                            @endif
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @php $v_tba++; @endphp
                                @endforeach
                            </div>
                        </div>
                        <div class="sec-des__samp col col--f in-view">
                            <figure class="figure media-con media-cover"><img loading="lazy" class="lazy loaded t-opacity" alt="" src="{{$a['sec_descripcion']['img']}}"></figure>
                        </div>
                    </div>
                </div>
            </section>            
            @if(isset($a['sec_items']))                         
            <section class="sec-items">
                <div class="sxs-container sec-items__con0">
                    <div class="sec-items__con1">
                        <header class="sxs-headline sec-items__hdr sxs-fdin anmt">
                            <h2 class="sxs-headline__tit sxs-headline__tit--align-center sxs-headline__tit--text-color-duller sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-40">{{$a['sec_items']['titulo']}}</h2> 
                        </header>
                        @if(isset($a['sec_items']['items']))
                        <div class="sxs-cardscar sxs-car">
                            <div class="sxs-cardscar__liswrp0">
                                <div class="sxs-cardscar__liswrp1">
                                    <ul class="sxs-cardscar__lis keen-slider">   
                                            @php $v_b = 0; @endphp                                           
                                            @foreach($a['sec_items']['items'] as $c)
                                                <li class="sxs-cardscar__ite keen-slider__slide">
                                                    <div class="size-full sxs-fdin anmt" style="--_idx: {{$v_b}};">
                                                        <div class="sxs-ritcrd">
                                                            <div class="sxs-ritcrd__ico">
                                                                <i class="icon icon-misc1 {{$c['icon']}}"></i>
                                                            </div>
                                                            <div class="sxs-ritcrd__tit">{{$c['titulo']}}</div>
                                                        </div>
                                                    </div>
                                                </li>     
                                            @php  $v_b++; @endphp                                       
                                            @endforeach                                       
                                    </ul>
                                </div>
                            </div>
                            @if($v_b > 4)
                            <div class="sxs-car__arws"><button type="button" aria-label="Cambiar al anterior slide"
                                    aria-disabled="false"
                                    class="sxs-arrbtn sxs-car__arws-arw sxs-car__arws-arw--prev sxs-arrbtn--v-1 sas-left">
                                    <div class="sxs-arrbtn__con0"><i class="icon icon-flecha1 izquierda"></i><i
                                            class="icon icon-flecha1 izquierda"></i></div>
                                </button><button type="button" aria-label="Cambiar al siguiente slide" aria-disabled="false"
                                    class="sxs-arrbtn sxs-car__arws-arw sxs-car__arws-arw--next sxs-arrbtn--v-1 sas-right">
                                    <div class="sxs-arrbtn__con0"><i class="icon icon-flecha1 derecha"></i><i
                                            class="icon icon-flecha1 derecha"></i></div>
                                </button>
                            </div>  
                            @endif                            
                        </div>
                        @endif
                    </div>
                </div>
            </section>
            @endif
            @if(isset($a['sec_pasos']))
            <section class="sec-steps">                
              <div class="sxs-container sec-steps__con0">
                <div class="sec-steps__con1">
                    <header class="sxs-headline sec-steps__hdr sxs-fdin anmt">
                        <h2 class="sxs-headline__tit sxs-headline__tit--align-center sxs-headline__tit--text-color-duller sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-40">{{$a['sec_pasos']['titulo']}}</h2>
                    </header>
                    @if(isset($a['sec_pasos']['enriquecido']))
                    <div class="sec-steps__des rich-text sxs-fdin anmt">@php echo html_entity_decode($a['sec_pasos']['enriquecido']) @endphp</div>
                    @endif
                    <div role="tablist" class="sxs-stabs anmt">
                        <ol role="presentation" class="sxs-stabs__lis">                                                                                                                             
                                @php $v_a = 1; $v_b = 0; @endphp                                    
                                @foreach($a['sec_pasos']['items'] as $z)                                        
                                    <li id="steps-tabpanel-{{$v_b}}" class="sxs-stabs__tab {{ $v_a == 1 ? 'active' : '' }}">
                                        <button id="steps-tab-{{$v_b}}" role="tab" type="button" aria-controls="steps-tab-{{$v_b}}" aria-selected="{{ $v_b == 0 ? 'true' : 'false' }}" tabindex="{{ $v_b == 0 ? '0' : '-1' }}" class="sxs-stabs__btn sxs-fdin anmt" style="--_idx: {{$v_a}};">  
                                            <div class="sxs-stabs__ord">{{$v_a}}</div>
                                            <div class="sxs-stabs__tit">{{$z['titulo']}}</div>
                                        </button>
                                    </li>
                                    @if(count($a['sec_pasos']['items'])>$v_a)
                                    <li aria-hidden="true" class="sxs-stabs__ln" style="--_idx: {{$v_b}};"></li>
                                    @endif
                                    @php  $v_a++; $v_b++; @endphp
                                @endforeach                                  
                        </ol>
                    </div>
                    <div class="sec-steps__con2 row row--f">
                        <div class="sec-steps__samp col col--f">
                            <ul class="sec-steps__samp-lis list-none">                                      
                                    @php $v_tb = 0;@endphp
                                    @foreach($a['sec_pasos']['items'] as $z)                                             
                                    @php $inview = ($v_tb==0?"in-view":""); @endphp
                                    <li aria-labelledby="steps-tab-{{$v_tb}}" class="sec-steps__samp-ite size-full absolute {{$inview}}">
                                        <figure class="figure media-cover"><img loading="lazy" class="lazy loaded t-opacity" alt="" src="{{$z['img']}}"></figure>
                                    </li>
                                    @php $v_tb++; @endphp
                                    @endforeach                                         
                            </ul>
                        </div>
                        <div class="sec-steps__text col col--f">
                            <ul class="sec-steps__text-lis list-none size-full">                                    
                                @if(isset($a['sec_pasos']))   
                                    @php $v_tb = 0;   @endphp
                                    @foreach($a['sec_pasos']['items'] as $z)    
                                    @php $inview=($v_tb==0?"in-view":""); @endphp                                
                                    <li aria-labelledby="steps-tab-{{$v_tb}}" class="sec-steps__text-ite size-full absolute {{$inview}}">
                                        <div class="sec-steps__text-con0 size-full">
                                            <div class="rich-text sas-it">
                                                @php echo html_entity_decode($z['bloques'][0]['enriquecido']) @endphp                                                    
                                            </div>
                                            
                                                    @if(isset($z['bloques'][1]))                                                        
                                                    @if($z['bloques'][1]['variante']=="1")     
                                                    <ul class="sas-ilis sas-ilis--v1 row row--f list-none">                                                   
                                                        @foreach($z['bloques'][1]['items'] as $x)
                                                            <li class="sas-ilis__ite col col--f flex-w-auto">
                                                                <span class="sxs-ltg">
                                                                    <span class="sxs-ltg__ico">
                                                                        <i class="icon icon-misc1 check"></i>
                                                                    </span>
                                                                    <span class="sxs-ltg__text">
                                                                        @if(isset($x['enriquecido']))
                                                                        <div class="rich-text">@php echo html_entity_decode($x['enriquecido']) @endphp</div>
                                                                        @endif
                                                                    </span>
                                                                </span>
                                                            </li>                                                                
                                                        @endforeach   
                                                    </ul>                    
                                                    @endif
                                                    @if($z['bloques'][1]['variante']=="2")   
                                                    <ul class="sas-ilis sas-ilis--v2 row row--f list-none">
                                                        @foreach($z['bloques'][1]['items'] as $x)                                                                                                                         
                                                            <li class="sas-ilis__ite col col--f">
                                                                <div class="sxs-ritcrd">
                                                                    <div class="sxs-ritcrd__ico">
                                                                        <i class="icon icon-misc1 {{$x['icon']}}"></i>
                                                                    </div>
                                                                    @if(isset($x['titulo']))
                                                                    <div class="sxs-ritcrd__tit">@php echo html_entity_decode($x['titulo']) @endphp</div>
                                                                    @endif
                                                                </div>
                                                            </li>                                                                                                                                          
                                                        @endforeach                                                                 
                                                    </ul>
                                                    @endif
                                                    @endif                                                                                           
                                            @if(isset($z['bloques'][2]))     
                                                <div class="rich-text sas-it"> @php echo html_entity_decode($z['bloques'][2]['enriquecido']) @endphp </div>
                                            @endif 
                                        </div>
                                    </li>
                                    @php $v_tb++; @endphp
                                    @endforeach  
                                @endif                                   
                            </ul>
                        </div>
                    </div>
                </div>
              </div>                
            </section>
            @endif 
             @if(isset($a['sec_detalle'])) 
             <section class="sec-des">
                <div class="sxs-container sec-des__con0">
                    <div class="sec-des__con1 row row--f">                        
                        <div class="sec-des__text col col--f in-view">
                            <div class="sas-accs in-view">                                                                 
                                    @php $v_tb = 0;@endphp
                                        @foreach($a['sec_detalle']['acordeon']['items'] as $z)                                             
                                        <div class="sxs-acc sxs-acc--v3" data-subv="id{{$v_tb}}" style="--_idx: {{$v_tb}};">
                                            <button aria-label="Abrir menú" role="button" class="sxs-acc__hdr is-closed before">
                                                <div class="sxs-acc__hdr-con0">
                                                    <header class="sxs-headline sxs-acc__hdr-con1">
                                                        <div class="sxs-headline__tit sxs-headline__tit--align-start sxs-headline__tit--text-color-duller sxs-headline__tit--text-weight-700 sxs-headline__tit--text-size-20 sxs-acc__hdr-tit">{{$z['titulo']}}</div>
                                                    </header>
                                                    <div class="sxs-acc__hdr-icon">
                                                        <div class="sxs-acc__hdr-ico"><i class="icon icon-misc1 mas"></i></div>
                                                    </div>
                                                </div>
                                            </button>                                         
                                            <div class="sxs-acc__bod is-closed" style="overflow: hidden; max-height: 0px;">
                                                <div class="sxs-acc__bod-con0">
                                                    <div class="rich-text sas-it">@php echo html_entity_decode($z['bloques'][0]['enriquecido']) @endphp</div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach                               
                            </div>
                        </div>
                        <div class="sec-des__samp col col--f in-view">  
                            <figure class="figure media-con media-cover">
                                <img loading="lazy" class="lazy loaded t-opacity" alt="" src="{{$a['sec_detalle']['img']}}">
                            </figure>
                        </div>
                    </div>
                </div>
             </section>
             @endif 
        </div>
        @endforeach
    </div>
</main>
@endif
@endsection
<script>
     document.addEventListener("DOMContentLoaded", function () {
    if (window.location.pathname.includes("ciencia")) {       
        let hash = window.location.hash ? window.location.hash.substring(1) : "";
        const defaultTab = "que-es-la-zona";
        if (!hash) {            
            history.replaceState(null, null, "#" + defaultTab);
        }
    }
});
</script>