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

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

<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<style type="text/css">
    ul{
        list-style: none;
    }
    a{
        text-decoration: none !important;
    }
    li.categoria a{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 35px;
        color: #333333;
    }
    a{
        text-decoration: none;
    }
    li.categoria:first-child{
        /*opacity: 0.65;*/
        border-top: 1px solid #E5E5E5;
    }
    li.categoria{
        border-bottom: 1px solid #E5E5E5;
    }
    /*li.categoria a.active{*/
    /*    color: #131313 !important;*/
    /*    line-height: 23px;*/
    /*}*/
    li.categoria.active a{
        /*background-color: #F5F5F5 !important;*/
        font-weight: 600 !important;
    }
    .header{
        margin-bottom: 40px;
    }
    .contenido{
        margin-bottom: 40px;
    }
    .nombre{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.01em;
        color: #020202;
    }
    .descripcion{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 25px;
        color: #000000;
    }
    .fotorama__thumb{
        border:1px solid #E5E5E5;
        padding: 10px;
    }
    .fotorama__stage {
        border: 0.5px solid #E5E5E5;
    }

    .fotorama__thumb-border{
        border: 2px solid #DC9724 !important;
    }
    .header{
        /* background-color: #F5F5F5; */
        background: rgba(147, 149, 152, 0.2);
    }
    .breadcrumb li a{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 13px;
        line-height: 16px;
        color: #000000;
        text-decoration: none !important;
    }
    .breadcrumb li.active a{
        font-weight: 400 !important;
    }
    .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 42px;
        line-height: 51px;
        color: #131313;
    }
    
    h4.caracteristicas{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
        letter-spacing: -0.01em;
        color: #020202;
    }
    
    .caracteristicas.texto{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 25px;
        color: #000000;
    }

    .presupuesto{
        padding: 13px 32px;
        background: #F38130;
        border-radius: 0px !important;
        border: 1px solid #F38130;
        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: all .3s ease;
    }

    .presupuesto:hover{
        background: #FFF !important;
        border: 1px solid #F38130 !important;
        transition: all .3s ease;
        color: #F38130 !important;
    }
    
    .fichaTecnica{
        padding: 13px 32px;
        background: #FFF !important;
        border: 1px solid #F38130 !important;
        color: #F38130 !important;
        border-radius: 0px !important;
        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: all .3s ease;
    }
    
    .datos_electricos .titulo, .datos_tecnicos .titulo{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
        letter-spacing: -0.01em;
        color: #020202;
    }
    
    .datos_tecnicos table{
        border: 0px !important;
    }
    .datos_tecnicos tr{
        border-left: 0px !important;
        border-right: 0px !important;
    }
    
    .datos_tecnicos tr:first-child{
        border-top: 1px solid #D8D8D8;
    }
    
    .datos_tecnicos tr{
        border-bottom: 1px solid #D8D8D8;
    }
    
    .datos_tecnicos tr td:first-child{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        color: #333333;
        opacity: 0.96;
    }
    
    .datos_tecnicos tr td:last-child{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 30px;
        text-align: right;
        color: #333333;
        opacity: 0.96;
    }
    
    .datos_electricos tr td:first-child{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        color: #333333;
        opacity: 0.96;
    }
    
    .datos_electricos tr td:last-child{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 30px;
        text-align: right;
        color: #333333;
        opacity: 0.96;
    }

    
    .foto{
         background-size: contain;
        background-position: center;
        /* height: 20vh; */
        height: 216px;
        background-repeat: no-repeat;
    }
    .card .foto {
        opacity: 1;
        display: block;
        /* width: 100%; */
        transition: .5s ease;
        backface-visibility: hidden;
    }

    .card:hover .foto {
        opacity: 0.5;
    }
    .card{
        border: none !important;
    }
    
    .fotorama__nav{
        text-align: left !important;
    }
    
    div.descripcion p{
        font-family: 'Inter';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
        line-height: 25px;
        color: #000000;
    }

    @media screen and (min-width: 992px){
        .menu > .container-fluid{
            align-items: flex-end !important;
        }
    }
    @media screen and (max-width: 768px){
        .contenido ul{
            padding-left: 0 !important;
            padding-right: 1rem !important;
        }
    }
</style>

<div class="header">
    <div class="container" class="mb-5">
        <nav class="breadcrumb-menu pt-2 pb-3" style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Inicio</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="