@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --negro: #36373d;
    --blanco: #ffffff;
    --morado: #8047c1;
    --gris: #2D2D2D;
    --celeste: #00a8ce;
    --rosado: #d92c59;
}

* {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 1rem;
    padding: 0px;
    margin: 0px;
    transition: all 0.5s ease;
    color: var(--negro);
}
/*** CONST ****/
.btn {
    font-weight: 700;
    font-size: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn-cotizar {
    background-color: #00000000;
    border: var(--morado) solid 5px;
    color: var(--negro);
    font-size: 18px;
    text-align: center;
    display: block;
    width: fit-content;
    margin: 0 auto;
}
.btn-morado {
    background-color: var(--morado);
    color: var(--blanco);
}
.columna-completa {
    width: calc(100vw * 0.625);
    margin: 0 auto;
}
.divisor-3 {
    height: 7px;
}
.title-section {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
}
.title-section span {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: var(--morado);
}
.ul-cont-nav-mobil {
    display: none;
}
/*MOBILE MENU*/
.menu {
    display: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    height: fit-content;
    margin-left: 20px;
    margin-right: 5px;
  }
  .line {
    fill: none;
    stroke: var(--gris);
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }
  .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
  }
  .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }
  .opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
  .opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
  }
  .opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
.ul-cont-nav-mobil {
    display: none;
}
.ul-cont-nav-mobil li {
    margin: 20px 0;
}
.ul-cont-nav-mobil li a {
    text-decoration: none;
    color: var(--blanco);
    font-size: 20px;
    font-weight: 600;
}
/***HEADER**/
header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 500;
    width: 100%;
}
.header-act {
    background-color: var(--blanco);
    box-shadow: 0 8px 6px -6px rgba(85, 85, 85, 0.349);
}
.cont-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}
.logo-header {
    cursor: pointer;
    height: 45px;
    /*filter: brightness(0) invert(1);*/
}
.logo-header-act {
    height: 35px;
}
.nav-header ul {
    display: flex;
    list-style: none;
    align-items: center;
}
.nav-header ul li {
    margin-left: 50px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1.1rem;
}
.nav-header ul li a {
    text-decoration: none;
}
.li-header-act {
    color: var(--negro)!important;
}
.contactar-header {
    border: var(--gris) solid 2px;
    padding: 5px 15px;
    border-radius: 25px;
    background-color: #00000000;
    font-weight: 600;
    cursor: pointer;
    font-size: 1.1rem;
}
.contactar-header-act {
    border: none;
    background: linear-gradient(90deg, #009ee2, #38509e);
}
/**** INDEX ***/
/** SECCION PRINCIPAL**/
.index-seccion-header {
    height: 100vh;
    background-image: url('../resources/fondo-corporativo-1.webp');
    background-size: cover;
}
.cont-slider-principal {
    height: calc(100% - 105px);
}
.cont-sl-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.cont-sl-item img {
    max-width: 60%;
}
.cont-footer-seccion-header {
    background-color: var(--celeste);
}
.cont-barra-footer-header {
    display: flex;
    justify-content: space-between;
    height: 100px;
    align-items: center;
}
.cont-barra-footer-header p {
    width: 60%;
    font-weight: 500;
    color: var(--blanco);
}
.cont-barra-footer-header a {
    display: flex;
    align-items: center;
    height: fit-content;
    font-size: 16px;
}
.cont-barra-footer-header a div {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-barra-footer-header a svg {
    margin-right: 10px;
    height: 1.5em;
}
.cont-barra-footer-header a svg path {
    fill: var(--blanco);
}
.cont-top-sl-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
}
.title-section-pro-indx {
    font-size: 40px;
    font-weight: 800;
    text-transform: uppercase;
}
.title-section-pro-indx br {
    display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: -15px; /* change this to whatever height you want it */
 }
.title-section-pro-indx span {
    color: var(--morado);
    font-size: 40px;
    font-weight: 800;
    text-transform: uppercase;
}
.cont-top-sl-item p {
    width: 60%;
    font-weight: 500;
    font-size: 16px;
    text-align: justify;
}
/**PRINCIPALES SERVICIOS*/
.seccion-servicios-destacados {
    background-image: url('../resources/fondo-corporativo-2.webp');
}
.ssd-top {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--rosado);
}
.ssd-cont-productos {
    display: flex;
    margin-top: 50px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.ssd-producto {
    width: calc(((100vw * 0.625)/3) - 50px);
    height: calc(((100vw * 0.625)/3) - 50px);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    margin: 30px 0;
    background-color: #ffffff9f;
    border-radius: 15px;
}
.ssd-producto h3 {
    text-align: center;
    font-weight: 800;
    font-size: 15px;
    line-height: 100%;
    text-transform: uppercase;
    margin-top: 15px;
}
.ssd-producto span {
    color: var(--blanco);
    background-color: var(--morado);
    width: 100%;
    padding: 5px 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    border-radius: 15px;
}
/*** CLIENTES ***/
.seccion-nuestros-clientes {
    padding: 50px 0;
}
.snc-cont .title-section {
    margin: 50px 0;
}
.snc-cont p {
    text-align: center;
    font-weight: 500;
    margin-bottom: 30px;
}
.slider-image {
    height: 200px;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(1);
}
.slider-image:hover {
    filter: grayscale(0);
}
.slider-image-color {
    height: 200px;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.seccion-nuestros-clientes a {
    margin-top: 30px;
    margin-bottom: 30px;
}
/***FOOTER **/
footer {
    background-color: var(--celeste);
    padding: 50px 0;
}
.footer-cont-columnas {
    display: flex;
    justify-content: space-between;
}
.footer-columna {
    width: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo-footer {
    width: 80%;
    margin-bottom: 30px;
}
.des-footer {
    color: var(--blanco);
    font-weight: 500;
    font-size: 14px;
    text-align: justify;
}
.title-column-footer {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--blanco);
}
.footer-ul {
    list-style: none;
}
.footer-ul li {
    margin: 5px 0;
}
.footer-ul li a {
    text-decoration: none;
    color: var(--blanco);
    display: flex;
    align-items: center;
    font-size: 14px;
}
.footer-ul li a div {
    margin-right: 15px;
}
.footer-ul li a svg {
    height: 1.2rem;
}
.footer-ul li a svg path {
    fill: var(--blanco);
}
/*** TODAS PAGINAS **/
.seccion-header-pages {
    padding: 120px 0;
    background-image: url('../resources/fondo-corporativo-1.webp');
    background-size: cover;
}
.shp-cont-texto {
    display: flex;
    justify-content: center;
    align-items: center;
}
.shp-cont-texto h1 {
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 800;
    text-align: center;
}
.shp-cont-texto h1 span {
    color: var(--morado);
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 800;
}
.shp-cont-texto br {
    display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: -15px; /* change this to whatever height you want it */
 }
 /*** BUSES */
.title-spacer-bs {
    margin: 50px 0;
}
.bs-cont-caracteristicas {
    display: flex;
    justify-content: space-between;
}
.bs-cont-caracteristicas ul {
    width: 30%;
}
.bs-cont-caracteristicas ul li {
    font-weight: 500;
}
.bs-cont-caracteristicas ul li::marker {
    color: var(--rosado);
}
.frase-section {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
}
.frase-section span {
    color: var(--celeste);
    font-size: 25px;
    font-weight: 700;
}
.frase-section br {
    display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: -15px; /* change this to whatever height you want it */
}
.bs-img-feed {
    width: 100%;
}
.bs-cont-detalles {
    margin: 30px 0;
}
.bs-cont-detalles p {
    margin: 10px 0;
}
.spacer-bs {
    margin-top: 50px;
    margin-bottom: 50px;
}
/*** ACTIVACIONES*/
.ac-beneficio h4 {
    display: flex;
    align-items: center;
    font-size: 20px;
}
.ac-beneficio h4 div {
    display: flex;
    align-items: center;
}
.ac-beneficio h4 svg {
    margin-right: 15px;
}
.ac-beneficio h4 svg path {
    fill: var(--rosado);
}
.ac-beneficio p {
    margin: 20px 0 30px 20px;
    font-weight: 500;
}
.ac-cont-human-desc {
    display: flex;
    justify-content: space-between;
    height: 600px;
    align-items: center;
    flex-direction: row-reverse;
}
.ac-cont-human-desc img {
    height: 100%;
}
.ac-cont-human-desc .ac-cont-banner-info {
    width: 60%;
}
.ac-cont-human-desc .ac-cont-banner-info p {
    font-weight: 500;
}
.ac-cont-human-desc .ac-cont-banner-info ul {
    margin: 30px;
}
.ac-cont-human-desc .ac-cont-banner-info ul li {
    font-weight: 500;
}
.ac-cont-human-desc .ac-cont-banner-info ul li::marker {
    color: var(--rosado);
}
/*** GRAN FORMATO  */
.p-info-seccion {
    font-weight: 500;
}
.gf-cont-materiales {
    display: flex;
    justify-content: space-between;
}
.gf-cont-material {
    width: 33%;
    background-color: #59cbdf;
}
.gf-cont-material h4 {
    background-color: var(--rosado);
    color: var(--blanco);
    text-align: center;
    text-transform: uppercase;
    padding: 10px 0;
}
.gf-cont-material ul {
    margin-left: 50px;
    padding: 20px 0;
    font-weight: 500;
}
.gf-cont-material ul li::marker {
    color: var(--rosado);
}
/***ROTULACION ***/
.rot-cont-prod {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rot-cont-prod img {
    width: 50%;
}
.rot-cont-prod p {
    font-weight: 500;
}
.inv {
    flex-direction: row-reverse;
}
/** CONTACTOS ***/
.sc-cont-telefonos {
    background-color: var(--rosado);
}
.sc-contactos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
}
.sc-contactos .contacto {
    font-size: 20px;
    color: var(--blanco);
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
}
.sc-contactos .contacto > div {
    display: flex;
    align-items: center;
}
.sc-contactos .contacto svg path {
    fill: var(--blanco);
}
.cont-formulario form {
    margin: 0 auto;
    width: 70%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cont-formulario form .ct-cont-item-med {
    width: 45%;
    display: flex;
    flex-direction: column;
    margin: 15px 0;
}
.cont-formulario form .ct-cont-item-med label {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
}
.cont-formulario form .ct-cont-item-med input {
    border: none;
    border-radius: 50px;
    font-weight: 500;
    padding: 5px 10px;
    background-color: #e4e4e4;
}
.ct-cont-item-com {
    width: 100%;
}
.ct-cont-item-com textarea {
    border: none;
    border-radius: 25px;
    font-weight: 500;
    padding: 5px 10px;
    background-color: #e4e4e4;
    width: 100%;
    margin-top: 15px;
}
.ct-cont-item-com label {
    font-weight: 500;
    font-size: 14px;
}
/**** WS BUTTON ****/
.cont-btn-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 20;
    pointer-events: none;
  }
  .whatsapp-card {
    background-color: var(--blanco);
    border-radius: 15px;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
    margin-bottom: 15px;
    -webkit-font-smoothing: antialiased;
    transform: translate(120%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  .whatsapp-card-active {
    transform: translate(0, 0);
    pointer-events: all;
  }
  .card-header {
    display: flex;
    background-color: #24ac1f;
    color: var(--blanco);
    padding: 15px;
    border-radius: 15px 15px 0 0;
  }
  .card-header svg {
    margin-right: 20px;
  }
  .card-header h2 {
    font-size: 18px;
    color: var(--blanco);
  }
  .card-header p {
    font-size: 12px;
    color: var(--blanco);
  }
  .card-body {
    padding: 10px;
  }
  .cont-contact {
    padding: 10px;
    display: flex;
    background-color: #e9e9e9;
    border-radius: 10px;
    cursor: pointer;
    margin: 2px 0;
    align-items: center;
  }
  .cont-contact img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 100px;
  }
  .cont-contact h3 {
    font-size: 18px;
  }
  .cont-contact p {
    font-size: 12px;
  }
  .btn-ws-cont {
    position: relative;
    background-color: #24ac1f;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: 60px;
    height: 60px;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    cursor: pointer;
    pointer-events: all;
  }
  .btn-ws-cont .svg-ws {
    position: absolute;
    top: calc(50% - 1.5em);
    left: calc(50% - 1.3em);
    transform: rotate(0deg) scale(1);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  .btn-ws-cont-open {
    transform: rotate(360deg) scale(0)!important;
  }
  .btn-ws-cont .svg-close {
    transform: rotate(0deg) scale(0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  .svg-close-active {
    transform: rotate(360deg) scale(1)!important;
  }
  /**** SPIN ****/
#spin {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 400;
    justify-content: center;
    align-items: center;
    background-color: #ffffff9a;
  }
  
  @keyframes ldio-nl634peqss {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
  }
  .ldio-nl634peqss div { box-sizing: border-box!important }
  .ldio-nl634peqss > div {
    position: absolute;
    width: 107.88px;
    height: 107.88px;
    top: 8.06px;
    left: 8.06px;
    border-radius: 50%;
    border: 6.2px solid var(--celeste);
    border-color: var(--morado) transparent var(--morado) transparent;
    animation: ldio-nl634peqss 2.127659574468085s linear infinite;
  }
  
  .ldio-nl634peqss > div:nth-child(2), .ldio-nl634peqss > div:nth-child(4) {
    width: 93px;
    height: 93px;
    top: 15.5px;
    left: 15.5px;
    animation: ldio-nl634peqss 2.127659574468085s linear infinite reverse;
  }
  .ldio-nl634peqss > div:nth-child(2) {
    border-color: transparent var(--celeste) transparent var(--celeste)
  }
  .ldio-nl634peqss > div:nth-child(3) { border-color: transparent }
  .ldio-nl634peqss > div:nth-child(3) div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
  }
  .ldio-nl634peqss > div:nth-child(3) div:before, .ldio-nl634peqss > div:nth-child(3) div:after { 
    content: "";
    display: block;
    position: absolute;
    width: 6.2px;
    height: 6.2px;
    top: -6.2px;
    left: 44.64px;
    background: var(--morado);
    border-radius: 50%;
    box-shadow: 0 101.67999999999999px 0 0 var(--morado);
  }
  .ldio-nl634peqss > div:nth-child(3) div:after {
    left: -6.2px;
    top: 44.64px;
    box-shadow: 101.67999999999999px 0 0 0 var(--morado);
  }
  
  .ldio-nl634peqss > div:nth-child(4) { border-color: transparent; }
  .ldio-nl634peqss > div:nth-child(4) div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
  }
  .ldio-nl634peqss > div:nth-child(4) div:before, .ldio-nl634peqss > div:nth-child(4) div:after {
    content: "";
    display: block;
    position: absolute;
    width: 6.2px;
    height: 6.2px;
    top: -6.2px;
    left: 37.2px;
    background: var(--celeste);
    border-radius: 50%;
    box-shadow: 0 86.8px 0 0 var(--celeste);
  }
  .ldio-nl634peqss > div:nth-child(4) div:after {
    left: -6.2px;
    top: 37.2px;
    box-shadow: 86.8px 0 0 0 var(--celeste);
  }
  .loadingio-spinner-double-ring-yjs29i5x7wd {
    position: relative;
    left: calc(50% - 62px);
    top: calc(50% - 62px);
    width: 124px;
    height: 124px;
    display: inline-block;
    overflow: hidden;
  }
  .ldio-nl634peqss {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
  }
  .ldio-nl634peqss div { box-sizing: content-box; }
  
  .error-cuenta {
    margin-right: 10px;
  }
  .error-cuenta img {
    width: 15px;
    height: 15px;
}
#viewer-pdf {
    height: 600px;
    margin-bottom: 50px;
}