:root{--colorLogo:#375573;--colorTextoPrincipal:#1F2A35;--colorTextoSecundario:#6da1d4;--colorE:#4CAF50;--colorBtnNaranja:#F2A65A;--colorBtnNaranjaHover:#D98E45;--colorBtnAzul:#375573;--colorBtnAzulHover:#4A6D91;--colorBtnAzulHoverDos:#375573;--colorFondoGrisAzulado:#F4F7FA;--colorFondoDos:#E6EDF3}body{margin:0;padding:0;background-color:var(--colorFondoGrisAzulado);background-image:url(/pictures/post-zincado-azul.webp);background-repeat:no-repeat;background-size:cover;font-family:"Assistant";scroll-behavior:smooth}h2{font-size:28px;margin:0}a{text-decoration:none}.principalContainer{display:flex;align-items:center;flex-direction:column;justify-content:center;position:absolute;z-index:5;width:100dvw;height:100dvh;background-color:rgb(0 0 0 / .85);gap:10px;padding:15px;box-sizing:border-box;& svg{padding:15px;max-width:100dvw;box-sizing:border-box}.min-desc-container{max-width:800px;color:var(--colorLogo);& .desc{margin:10px 0}}& .botones .btn{color:var(--colorBtnAzul);&:hover{background-color:var(--colorBtnAzulHoverDos);color:#fff}}& .portada-container{display:flex;width:stretch;flex-direction:column;align-items:center;& .logo{filter:drop-shadow(0 0 5px #ffffff)}&>*{filter:drop-shadow(0 0 5px #000000);opacity:0;animation:aparecer 1s ease-out forwards}&>*:nth-child(1){animation-delay:0.1s}&>*:nth-child(2){animation-delay:0.4s}&>*:nth-child(3){animation-delay:0.6s}}}.service-container{display:flex;align-items:center;position:relative;overflow:hidden;& .desc-service-container{width:100%;height:-webkit-fill-available;display:flex;position:absolute;z-index:1;pointer-events:none;color:var(--colorTextoSecundario);align-items:center;text-align:left;filter:drop-shadow(0 0 5px #000000);background-color:rgb(0 0 0 / .35);padding:45px 75px;box-sizing:border-box;flex-direction:row;justify-content:space-between;& h2{text-transform:uppercase;font-weight:100}p{max-width:300px}& .contact-btn-container{display:flex;& .contact-btn{pointer-events:all;padding:10px 25px;gap:15px;border-radius:5px;border:2px solid;display:flex;justify-content:space-between;flex-direction:row;color:var(--colorBtnNaranja);text-transform:uppercase;font-size:16px;align-items:center;transition:background-color 0.3s ease;&:hover{background-color:var(--colorBtnNaranjaHover);color:#fff}}}}}.contact-container{width:stretch;max-width:1100px;display:flex;flex-direction:column;text-align:left;gap:5px;& h2{color:var(--colorBtnNaranja);text-align:left}p{color:#fff;margin:0}& .botones{display:grid;grid-template-columns:repeat(auto-fit,minmax(305px,1fr));& .btn{&,& p{color:var(--colorBtnNaranja)}& .texto-final{display:none;font-size:14px}&:hover{background-color:var(--colorBtnNaranjaHover);&,& p{color:#fff}& .texto-final{display:block}& .texto-inicial{display:none}}}}}.botones{display:flex;gap:10px;& .btn{text-decoration:none;display:flex;font-weight:100;font-size:16px;text-transform:uppercase;border-radius:5px;border:solid 2px;padding:8px 20px;filter:drop-shadow(0 0 5px #000000);cursor:pointer;align-items:center;gap:2px;transition:background-color 0.3s ease;& svg{padding:0}}}.btn-wsp{display:flex;align-items:center;position:absolute;right:0;bottom:0;z-index:11;margin:10px;gap:5px;filter:drop-shadow(0 0 5px #000000);& p{display:flex;background-color:#fff;padding:4px 10px;border-radius:10px;position:relative;align-items:center;font-size:14px;z-index:1}}img-comparison-slider{visibility:hidden}img-comparison-slider [slot='second']{display:none}img-comparison-slider.rendered{visibility:inherit}img-comparison-slider.rendered [slot='second']{display:unset}img-comparison-slider{--default-handle-width:100px;outline:none;&:focus{--default-handle-opacity:0}& img{filter:drop-shadow(0 0 5px #000000)}}img-comparison-slider,img-comparison-slider img{height:calc(100dvh / 3);overflow:hidden;min-width:100dvw;display:flex;align-items:center}img{object-fit:cover;min-width:100dvw}.swiper{width:100%;height:100%}.swiper-slide{text-align:center;font-size:18px;justify-content:center;align-items:center;overflow:hidden;& .img-comparison-container{display:flex;flex-direction:column}}@media (width < 720px){.botones .btn{font-size:14px}}@media (width < 450px){.botones{flex-direction:column;width:-webkit-fill-available;& .btn{justify-content:center}}.min-desc-container .desc{font-size:16px}.service-container .desc-service-container{padding:45px;align-items:center;text-align:center;flex-direction:column;justify-content:center;& h2{justify-content:center;font-size:24px}& p{font-size:16px}& .contact-btn-container .contact-btn{font-size:14px}}.btn-wsp{margin:0}}@keyframes aparecer{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}