@extends('layouts.plantilla')
@section('inicio', 'active')
@section('content')


<!-- Slick -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

<style>

    a{
        text-decoration: none !important;
    }

    .card .foto {
        opacity: 1;
        display: block;
        width: 100%;
        transition: .5s ease;
        backface-visibility: hidden;

    }

    .card:hover .foto {

        opacity: 0.5;
    }

    .foto{
        background-size: cover;
        height: 65vh;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .categoria .foto{
        height: 100%;
        width: 100%;
    }
    
    .card.categoria .foto{
        border: 1px solid #E1E1E1 !important;
    }

    .carousel-item .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 53px;
        line-height: 54px;
        color: #FFFFFF;
    }

    .carousel-item p{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 24px;
        color: #FFFFFF;
    }

    .carouselButton{
        background-color: #FABB8A !important;
        width: 37px !important;
        height: 6px !important;
        border-top: 0px !important;
        border-bottom: 0px !important;
        opacity: 1 !important;
        transition: ease opacity 1ms !important;
    }

    .carouselButton.active{
        background-color: #F38130 !important;
    }

    .productos.titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 39px;
        color: #4F4F4F;
    }

    .categoria {
        border: none !important;
        border-radius: 0px !important;
        border-bottom: 1px solid #939598 !important;
    }

    .categoria .nombre{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 21px;
        line-height: 25px;
        color: #131313;
    }
    
    .inicio__titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 50px;
        color: #333333;
    }
    
    .inicio__descripcion{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 189.5%;
        color: #333333;
    }
    
    .foto_carousel{
        background-size: cover;
        background-position: center;
        height: 75vh;
        background-repeat: no-repeat;
    }
    
    .gris{
        background-color: #F5F5F5 !important;
    }
    
    .foto__empresa{
        height: 100% !important;
    }
    
    .btn__empresa{
        background-color: #F38130 !important;
        border: 1px solid #F38130 !important;
        padding: 13px 32px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        letter-spacing: 0.03em;
        text-transform: capitalize;
        color: #FFFFFF;
        transition: 0.3s ease all;
    }
    
    .btn__empresa:hover{
        border: 1px solid #F38130 !important;
        background-color: #FFF !important;
        color: #F38130 !important;
    }
    
    h5.novedades{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 39px;
        color: #4F4F4F;
    }
    
    .novedad .card-title{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        color: #333333;
    }
    
    .novedad .card-subtitle{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        text-transform: uppercase;
        color: #F38130 !important;
    }
    
    .novedad .card-text{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 19px;
        color: #333333;
    }
    
    .novedad p.fecha{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        /*line-height: 19px;*/
        color: #898989;
    }
    
    .card.novedad{
        border-radius: 0px !important;
    }

    @media screen and (max-width: 768px){
        /*.contenido{*/
        /*    display: none !important;*/
        /*}*/
        .contenido .titulo{
            font-size:20px;
        }
        .contenido p{
            font-size:14px;
        }
        .carousel-indicators{
            margin-left: 0 !important;
        }
        .info{
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .empresa{
            padding-right: 0 !important;
        }
        .imgEmpresa{
            height: 75vh !important;
        }
        .solicitud{
            height: 75vh;
        }
        .foto{
            height: 60vh !important;
        }
    }
    @media screen and (min-width: 992px){
        .categorias{
            margin-bottom: 48px;
        }
        .container-carousel{
            padding-left: 42px; padding-right: 42px;
        }
        .carousel-indicators{
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .alignCenter_md{
                position: absolute;
                top: 50%;
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        }
    }
</style>

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
    <div class="carousel-inner">
            </div>
    <div class="carousel-indicators pb-md-4 pb-sm-2">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row">
        <div class="col-12 mb-3">
            <h5 class="productos titulo mb-0">Productos</h5>
        </div>
    </div>
    <div class="row">
            </div>
</div>


<div class="container-fluid pt-3">
    <div class="row">
        <div class="col-md-6 col-sm-12 px-0">
            <div class="foto foto__empresa" style="background-image: url('{{asset(Storage::url($inicio->foto))}}')"></div>
        </div>
        <div class="col-md-6 col-sm-12 p-md-5 gris">
            <div class="row">
                <div class="col-sm-12 col-md-10 px-md-4 py-5 offset-md-1">
                    <div>
                        <h5 class="inicio__titulo mb-4"></h5>
                        <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
                        <p class="inicio__descripcion"></p>

                        <a class="btn__empresa mt-4" href="