*{
    box-sizing: border-box;
}
body{
    margin: 0;
    --color-primario: #2B4A62;
    --color-secundario: #3A6588;
    --color-texto: #3692CF;
    --degradado-dorado-vertical: linear-gradient(0deg, rgba(195,164,91,1) 0%, rgb(154, 126, 62) 100%);
    --degradado-dorado-horizontal: linear-gradient(45deg, rgba(195,164,91,1) 0%, rgba(127,107,59,1) 100%);
    --color-dorado: #bea059;
    --color-contraste-1: #ffffff;
    --color-contraste-2: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
body::-webkit-scrollbar{
    width: 1px;
    display: none;
}
/* section, 
section.titulo.contenedor{
    max-width: 550px;
} */
section.titulo{
    width: 100%;
    aspect-ratio: 3/2;
    background-color: var(--color-primario);
    background: linear-gradient(90deg, #3a678b 0%, #264259 100%);
    display: flex;
    align-items: center;
    max-height: 100vh;
    position: relative;
}
section.titulo .contenedor{
    width: 100%;
    display: flex;
    min-height: 60%;
    max-height: 60%;
}
section.titulo .img{
    width: 45%;
    padding-right: 12px;
    margin-left: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
section.titulo .img div{
    aspect-ratio: 2/2;
    height: 100%;
}
section.titulo .img div img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
section.titulo .txt{
    width: 55%;
    padding-left: 1.2vw;
    margin: 0 8px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
section.titulo .txt h3{
    margin: 0;
    font-size: clamp(16px, 3vw,  35px);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 1.6vw;
    text-align: end;
    color: var(--color-dorado);
    text-transform: uppercase;
}
section.titulo .txt P{
    margin: 0;
}
section.titulo .txt .frase{
    font-size: clamp(13px, 3.4vw,  50px);
    letter-spacing: .5vw;
    font-weight: 500;
    text-align: justify;
    margin-top: .9vw;
    color: #ffffff;
    text-transform: uppercase;
}
section.titulo .txt .expli{
    font-size: clamp(16px, 2.95vw,  32px);
    margin-top: 1.4vw;
    color: #ffffffc9;
}
section.titulo .botones{
    display: flex;
    margin-top: 3.7vw;
    padding-right: 8px;
}
section.titulo .botones a{
    display: flex;
    padding: .8vw 1.4vw;
    flex-grow: 1;
    color: #ffffffe8;
    text-decoration: none;
    font-size: clamp(10px, 2.6vw, 32px);
    align-content: center;
    letter-spacing: .2vw;
    font-weight: 100;
}
section.titulo .botones .trabajo{
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #fff;
    margin-right: 1.5vw;
    justify-content: space-between;
    
}
section.titulo .botones .contactar{
    border: none;
    justify-content:center;
    background: var(--color-dorado);
    background: var(--degradado-dorado-horizontal);
}
section.titulo .botones .contactar a{
    text-align: center;
}
section.titulo div.introduccion {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 10;
}
section.titulo div.introduccion .contenedor-intro{
    width: 85%;
    padding: 2vw;
    background: var(--color-dorado);
    background: var(--degradado-dorado-vertical);
 }
section.titulo div.introduccion .contenedor-intro h1{
    text-transform: uppercase;
    letter-spacing: .5vw;
    font-weight: 500;
    text-align: center;
    font-size: clamp(17px, 4.2vw,  45px);
    margin: 0;
    color: #fff;
 }
section.titulo div.introduccion .contenedor-intro h2{
    text-align: center;
    margin: 0;
    color: #6b6868;
    font-size: clamp(18px, 2.7vw,  40px);
 }
section.titulo div.introduccion .contenedor-intro article{
    color: #000000;
    font-size: clamp(16px, 2.95vw,  32px);
    margin: 1.4vw 12px 0 12px ;
    margin-top: 1.4vw;
 }
section.metodologia{
    width: 100%;
 }
section.metodologia h2{
    color: var(--color-contraste-1);
    font-size: clamp(10px, 4vw, 30px);
    margin: 12px;
}
section.metodologia .contenedor{
    display: flex;
 }
section.metodologia .triangulo{
    width: 35%;
    background-color: #3a678b;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
 }
section.metodologia .pasos{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    width: 65%;
 }
section.metodologia .pasos .paso {
    margin: 12px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
 }
section.metodologia .pasos .paso .info{
    height: 100%;
    display: flex;
    flex-direction: column;
}
section.metodologia .pasos .paso .info h3{
    margin: 0;
    font-size: clamp(14px, 3.4vw,  25px);
    text-transform: uppercase;
    color: var(--color-texto);
}
section.metodologia .pasos .paso .info p{
    margin: 0;
    align-self: center;
    font-size: clamp(16px, 2.95vw,  22px);
    margin-top: 1.2vw;
    flex-grow: 1;
    align-content: center;
    overflow-y: scroll;
    overflow-x: hidden;
}
section.metodologia .pasos .paso .info p::-webkit-scrollbar {
    width: 2px;
}
section.metodologia .pasos .paso .info p::-webkit-scrollbar-track {
    background: #ffffff;
}
section.metodologia .pasos .paso .info p::-webkit-scrollbar-thumb {
    background-color: var(--color-texto);
    border-radius: 25px;
    border: 0px none #ffffff;
}
section.metodologia .pasos .paso .icono{
    background-color: var(--color-secundario);
    height: 30%;
    aspect-ratio: 2/2;
    border-radius: 100px;
    margin-right: 12px;
}
section.tall-conf{
    width: 100%;
    display: flex;
    margin: 20px 0;
}
section.tall-conf > div{
    width: 50%;
}
section.tall-conf .talleres{
    border-right: 1.5px solid var(--color-primario);
}
section.tall-conf > div h2{
    color: var(--color-secundario);
    text-transform: uppercase;
    font-size: clamp(20px, 4.3vw, 35px);
    text-align: center;
    margin: 0;
}
section.tall-conf > div ul{
    margin: 0;
    padding: 12px;
}
section.tall-conf > div ul li{
    margin-left: 12px;
    color: var(--color-texto);
}
section.tall-conf > div ul li details{
    position: relative;
    display: flex;
    flex-direction: row;
    list-style-type: none;
}
section.tall-conf > div ul li details summary{
    display: flex;
    justify-content: space-between;
    align-items: end;
    cursor: pointer;
    list-style: none;
    margin: 4px 0;
    font-size: clamp(17px, 3.5vw,  28px);
    list-style-type: none;
}
section.tall-conf > div ul li details summary::marker{
    display: none;
}
section.tall-conf > div ul li details summary::after{
    content: "▼";
    display: inline-block;
    font-size: clamp(15px, 3.5vw,  28px);
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
    color: var(--color-texto);
}
section.tall-conf > div ul li details[open] summary::after{
    transform: rotate(0deg);
}
section.tall-conf > div ul li details .parrafo{
    color: var(--color-contraste-2);
    margin: 8px 0 2px 0;
    max-height: 85px;
    overflow: hidden;
    position: relative;
}
section.tall-conf > div ul li details .parrafo h3{
    margin: 0;
    font-weight: 700;
    font-size: clamp(16px, 3.1vw,  24px);
    color: var(--color-secundario);
}
section.tall-conf > div ul li details .parrafo ul{
    margin: 0;
    padding: 0;
}
section.tall-conf > div ul li details .parrafo ul li{
    color: var(--color-contraste-2);
    margin: 0;
    font-size: clamp(16px, 2.95vw,  22px);
    max-height: 85px;
    overflow: hidden;
    list-style: circle;
}
section.tall-conf > div ul li details .parrafo .div-overflow{
    background: linear-gradient(transparent 70%, #ffffff);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
section.tall-conf > div ul li details .contenedor-btn{
    width: 100%;
    display: flex;
    justify-content: end;
}
section.tall-conf > div ul li details .contenedor-btn button{
    color: var(--color-secundario);
    border: none;
    background-color: transparent;
    border-bottom: var(--color-secundario) 1px solid;
    padding: 0 8px;
    margin: 0 0 2.5vw 0;
    font-size: clamp(16px, 2.8vw,  22px);
}
section.paquetes{
    width: 100%;
}
section.paquetes .titulo{
    width: 100%;
    padding: 20px;
    background-color: var(--color-dorado);
    display: flex;
    justify-content: center;
    margin: 40px 0;
}
section.paquetes .titulo h2{
    text-transform: uppercase;
    color: #fff;
    margin: 8px;
    font-size: clamp(13px, 7vw,  50px);
    letter-spacing: 1.4vw;
    font-weight: 100;
}
section.paquetes .paquete{
    width: 100%;
    border-bottom: var(--color-secundario) 3px solid;
    padding: 16px 0 20px 0;
    display: flex;
    flex-direction: column;

    margin-bottom: 20px;
}
section.paquetes .paquete .nombre{
    width: 65%;
    background-color: var(--color-secundario);
    padding: 8px;
    margin-bottom: 15px;
}
section.paquetes .paquete .nombre h3{
    text-transform: uppercase;
    margin: 0;
    font-size: clamp(15px, 6vw, 60px);
    letter-spacing: .8vw;
    font-weight: 100;
    text-align: center;
}
section.paquetes .paquete .imagen{
    width: 100%;
    position: relative;
}
section.paquetes .paquete .imagen .cont-img{
    width: 100%;
    aspect-ratio: 3.5/2;
}
section.paquetes .paquete .imagen .cont-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section.paquetes .paquete .imagen .descripcion{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #3a678b44;
    backdrop-filter: blur(30px);
    position: absolute;
    height: 100%;
    width: 50%;
    top: 17px;
    left: 17px;
    padding: 12px;
}
section.paquetes .paquete .imagen .descripcion::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translate(5px);
    margin-top: 12px;
    border-bottom: #aeaeae 2px solid;
    border-right: #aeaeae 2px solid;
    z-index: -1;
}
section.paquetes .paquete .imagen .descripcion::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: 15px;
    transform: translateX(5px);
    transform: translateY(5px);
    border-bottom: var(--color-dorado) 2px solid;
    border-right: var(--color-dorado) 2px solid;
    z-index: -1;
}
section.paquetes .paquete .imagen .descripcion h4{
    margin: 16px 0 0 0;
    text-align: center;
    font-size: clamp(15px, 6vw, 60px);
    text-transform: uppercase;
    font-weight: 100;
    color: var(--color-contraste-1);
}
section.paquetes .paquete .imagen .descripcion p{
    margin: 12px 0 1px 0;
    color: var(--color-contraste-1);
    font-size: clamp(16px, 2.95vw,  22px);
    overflow: scroll;
    filter: opacity(.87);
}
section.paquetes .paquete .imagen .descripcion p::-webkit-scrollbar{
    width: 1px;
    display: none;
}
section.paquetes .paquete .objetivo{
    display: flex;
    justify-content: end;
    width: 100%;
    margin-top: calc(30px + 5vw);
}
section.paquetes .paquete .objetivo .contenedor{
    width: 80%;
    background-color: var(--color-secundario);
    padding: 20px;
}
section.paquetes .paquete .objetivo .contenedor h4{
    text-align: center;
    margin: 0;
    font-size: clamp(15px, 6vw, 60px);
    text-transform: uppercase;
    font-weight: 100;
    color: var(--color-contraste-1);
}
section.paquetes .paquete .objetivo .contenedor p{
    font-size: clamp(16px, 2.95vw,  22px);
    color: var(--color-contraste-1);
    filter: opacity(.87);
}
section.paquetes .paquete .modulos h4{
    font-size: clamp(15px, 6vw, 60px);
    text-transform: uppercase;
    color: var(--color-secundario);
    margin: 30px 0 12px 17px;
    font-weight: 100;
}
section.paquetes .paquete .modulos ol{
    padding-left: 33px;
    margin: 0;
}
section.paquetes .paquete .modulos ol li{
    color: var(--color-secundario);
}

section.paquetes .paquete .modulos .contenedor{
    width: 100%;
    background-color: var(--color-secundario);
    padding: 12px;
    margin-top: 30px;
}
section.paquetes .paquete .modulos .contenedor h5{
    margin: 0;
    color: var(--color-contraste-1);
    font-size: clamp(15px, 4vw, 50px);
    letter-spacing: .3vw;
    text-transform: uppercase;
    font-weight: 100;
    text-align: center;
}
section.paquetes .paquete .modulos ul{
    padding-left: 33px;
    padding-right: 12px;
}
section.paquetes .paquete .modulos ul li{
    font-size: clamp(15px, 3.5vw,  28px);
    color: var(--color-secundario);
}
section.paquetes .paquete .cotizar {
    font-size: 17px;
    background: transparent;
    border: none;
    padding: 1em 1.5em;
    color: var(--color-secundario);
    text-transform: uppercase;
    position: relative;
    transition: 0.5s ease;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  
  section.paquetes .paquete .cotizar::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: var(--color-secundario);
    transition: 0.5s ease;
  }
  
  section.paquetes .paquete .cotizar:hover {
    color: var(--color-contraste-1);
    transition-delay: 0.5s;
  }
  
  section.paquetes .paquete .cotizar:hover::before {
    width: 100%;
  }
  
  section.paquetes .paquete .cotizar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    background-color: var(--color-secundario);
    transition: 0.4s ease;
    z-index: -1;
  }
  
  section.paquetes .paquete .cotizar:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: aliceblue;
  }
section.sobre-pietro{
    width: 100%;
    padding: 4vw;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(59,102,136,1) 100%);
    display: flex;
    flex-direction: column;
}
section.sobre-pietro .tarjeta{
    width: 100%;
    display: flex;
    margin-top: 5vw;

}
section.sobre-pietro .tarjeta .info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    margin-right: 6px;
}
section.sobre-pietro .tarjeta .info p, section.sobre-pietro .tarjeta .info h2{
    text-transform: uppercase;
    margin: .2vw 0;
}
section.sobre-pietro .tarjeta .info .ad{
    color: var(--color-texto);
    font-size: clamp(15px, 3.8vw, 30px);
    letter-spacing: .2vw;
}
section.sobre-pietro .tarjeta .info .pm{
    color: var(--color-secundario);
    font-size: clamp(15px, 5.6vw, 60px);
    letter-spacing: .4vw;
    font-weight: 200;
}
section.sobre-pietro .tarjeta .info .mc{
    color: var(--color-dorado);
    font-size: clamp(15px, 3.6vw, 30px);
    letter-spacing: .8vw;
}
section.sobre-pietro .tarjeta .info .cont-btn{
    margin-top: 2.3vw;
}
section.sobre-pietro .tarjeta .info .cont-btn .contactar{
    text-transform: uppercase;
    background-color: var(--color-texto);
    border: none;
    color: var(--color-contraste-1);
    font-weight: 100;
    font-size: clamp(13px, 2vw, 25px);
    letter-spacing: .15vw;
    padding: 1vw 1.5vw;
    text-decoration: none;
}
section.sobre-pietro .tarjeta .foto{
    aspect-ratio: 2/2;
    width: 50%;
    margin-left: 6px;
    position: relative;
}
section.sobre-pietro .tarjeta .foto .hexagono{
    clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background: linear-gradient(180deg,#386284 0%, #233d53 100%);
    width: 90%;
    aspect-ratio: 2/2;
    position: absolute;
    margin: 5%;
}
section.sobre-pietro .tarjeta .foto .contenedor{
    width: 90%;
    aspect-ratio: 2/2;
    position: absolute;
    margin: 5%;
    z-index: -1;
    transform: translateX(1.5vw) translateY(1.5vw);
    filter: blur(6px);
}
section.sobre-pietro .tarjeta .foto .contenedor .sombra{
    clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background: #0000009d;
    width: 100%;
    height: 100%;
}
section.sobre-pietro .tarjeta .foto .img{
    width: 99%;
    height: 99%;
    z-index: 10;
    position: absolute;

    transform:translateY(-20%);
}
section.sobre-pietro .tarjeta .foto .img img{
    width: 100%;
    mask-image: linear-gradient(
        black 90%,
        transparent
    );
}
section.sobre-pietro .caracteristicas{
    margin-top: 35px;
    align-self: center;
    display: flex;
    flex-direction: column;
}
section.sobre-pietro .caracteristicas h3{
    text-transform: uppercase;
    color: var(--color-dorado);
    font-size: clamp(15px, 4.5vw, 40px);
    font-weight: 100;
    letter-spacing: .7vw;
    margin: 0;
}
section.sobre-pietro .caracteristicas ul{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 250px));
    gap: 12px;
    max-width: 90vw;
    padding: 0;
    margin-top: 45px;
    align-self: center;

}
section.sobre-pietro .caracteristicas ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    aspect-ratio: 2/2;
    padding: 8px;
    background-color: #ffffff8e;
    backdrop-filter: blur(2px);
    border: 2px solid var(--color-dorado);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.189);
}
section.sobre-pietro .caracteristicas ul li p{
    margin: 0;
    text-align: left;
    font-size: clamp(10px, 100%, 30px);
    color: var(--color-secundario);
}
section.sobre-pietro .titulos {
    margin-top: 35px;
    align-self: center;
}

section.sobre-pietro .titulos h3 {
    text-transform: uppercase;
    color: var(--color-dorado);
    font-size: clamp(15px, 4.5vw, 40px);
    font-weight: 100;
    letter-spacing: .7vw;
    margin: 0;
}

section.sobre-pietro .titulos {
    width: 92vw;
    margin: auto;
}
section.sobre-pietro .titulos .contenedor{
    margin-top: 40px;
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;

}
section.sobre-pietro .titulos .contenedor ul {
    padding: 0;
    margin: 0;
    display: inline-block;
    overflow: hidden;
    animation: 5s deslizar infinite linear;
}
section.sobre-pietro .titulos .contenedor ul li{
    transition: all .8s ease;
    display: inline-block;
    list-style: none;
    height: 150px;
    margin: 6px;
    filter: brightness(.8) grayscale(.9) opacity(1);
}
section.sobre-pietro .titulos .contenedor ul li img{
    height: 100%;
}
.info-proy{
    display: flex;
    background-color: rgba(0, 0, 0, 0.164);
    backdrop-filter: blur(3px);
    width: 100vw;
    height: 100vh;
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.info-proy .cont{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background-color: #ffffff;
    width: 90vw;
    height: 95vh;
}
.info-proy .cont h2{
    color: var(--color-secundario);
    align-self: center;
}
.info-proy .cont h3{
    margin: 12px 0 0 0;
    color: var(--color-texto);
}
.info-proy .cont p{
    margin: 6px 0 0 0;
    color: var(--color-primario);
}
.info-proy .cont ul{
    padding-left: 20px;
}
.info-proy .cont .cerrar{
    width: 30px;
    aspect-ratio: 2/2;
    border-radius: 40px;
    background-color: #233d53a1;
    position: absolute;
    top: -15px;
    left: -15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-proy .cont .cerrar div{
    height: 3px;
    width: 80%;
    position: absolute;
    background-color: hsl(0, 0%, 100%);
}
.info-proy .cont .cerrar div:first-child{
    rotate: 45deg;
}
.info-proy .cont .cerrar div:nth-child(2){
    rotate: -45deg;
}
@keyframes deslizar{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}

/* section.sobre-pietro .titulos .contenedor:hover ul{
    animation-play-state: paused;
}
section.sobre-pietro .titulos .contenedor:hover ul li{
    transition: all .8s ease;
    height: 250px;
    filter: grayscale(0) brightness(1);
} */


 /* @media (max-width: 506px){
}