/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* ======================================================================= 
   VARS
   ======================================================================= */
:root {
  /* Colors */
  --color-vsm-red: #CD0528;
  --color-vsm-yellow: #FAB900;
  --color-vsm-petrol: #28B9CD;
  --color-vsm-light-grey: #A7A7A7;
  --color-vsm-dark-grey: #404040;
  --color-gray-93: #ededed;
}



/* ======================================================================= 
   FONTS
   ======================================================================= */
@font-face {
    font-family: 'Beausite Classic';
    src: url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-LightItalic.eot');
    src: url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-LightItalic.woff2') format('woff2'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-LightItalic.woff') format('woff'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}


/* Beausite - Light */
@font-face {
    font-family: 'Beausite Classic';
    src: url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Light.eot');
    src: url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Light.eot?#iefix') format('embedded-opentype'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Light.woff2') format('woff2'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Light.woff') format('woff'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* Beausite - Semibold */
@font-face {
    font-family: 'Beausite Classic';
    src: url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Semibold.eot');
    src: url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Semibold.eot?#iefix') format('embedded-opentype'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Semibold.woff2') format('woff2'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Semibold.woff') format('woff'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* Beausite - Bold */
@font-face {
    font-family: 'Beausite Classic';
    src: url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Bold.eot');
    src: url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Bold.eot?#iefix') format('embedded-opentype'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Bold.woff2') format('woff2'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Bold.woff') format('woff'),
        url('https:%20//26724961.fs1.hubspotusercontent-eu1.net/hubfs/26724961/fuentes/BeausiteClassicWeb-Bold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* ======================================================================= 
   LANDING PAGE
   ======================================================================= */

/* ========================
   HEADER
   ======================== */
/* Logo */
.header--landing-page .header__container {
  justify-content: start !important; 
}

/* Para desactivar la funcionalidad "natural" del logo y ya no funcione como un link */
.header__logo a {
  /*pointer-events: none;
  cursor: default;*/
}


#hs_cos_wrapper_header_logo img {
  max-width: 160px;
}



/* ========================
   HERO 
   ======================== */
/* Hero main title */
#hs_cos_wrapper_dnd_area-module-5_ h2 {
    font-family: 'Beausite Classic', sans-serif;
    font-style: normal;
    font-weight: 800;
    text-decoration: none;
    color: #ffffff;
    font-size: 40px !important;
    letter-spacing: 0px;
    text-size-adjust: 100%;
    text-transform: uppercase;
    /*Utilizamos hyphens para obtener la mejor partición posible*/
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* Y seguidamente word-wrap como graceful degradation para los navegadores que no lo soporten */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Hero subtitle */
#hs_cos_wrapper_dnd_area-module-5_ p {
    font-family: 'Beausite Classic', sans-serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    color: #ffffff;
    font-size: 25px !important;
    letter-spacing: 0px;
    text-size-adjust: 100%;
}



/* =============================
   SLIDER (añadido a posteriori) 
   ============================= */
.splide__track img {
  width: 1920px !important;
}

.splide__controls {
  margin-bottom: 0.75rem;
}



/* ========================
   COPY
   ======================== */
/* Copy Title */
#hs_cos_wrapper_dnd_area-module-7_ h3 {
    font-family: 'Beausite Classic', sans-serif;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-vsm-red);
    font-size: 30px;
    letter-spacing: 0px;
    text-size-adjust: 100%;
}

/* Copy Text */
#hs_cos_wrapper_dnd_area-module-7_ p span {
    /*font-family: 'Beausite Classic', sans-serif;*/
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    color: var(--color-vsm-dark-grey);
    font-size: 18px;
    letter-spacing: 0px;
    text-size-adjust: 100%;
}



/* ========================
   BODY
   ======================== */
.dnd_area-row-1-padding {
  padding-left: 20% !important;
  padding-right: 20% !important;
}

@media only screen and (max-width: 1200px) {
  .dnd_area-row-1-padding {
      padding-left: 15% !important;
      padding-right: 15% !important;
  }
}

@media only screen and (max-width: 992px) {
  .dnd_area-row-1-padding {
      padding-left: 10% !important;
      padding-right: 10% !important;
  }
}

@media only screen and (max-width: 768px) {
  .dnd_area-row-1-padding {
      padding-left: 5% !important;
      padding-right: 5% !important;
  }
}

@media only screen and (max-width: 600px) {
  .dnd_area-row-1-padding {
      padding-left: 3% !important;
      padding-right: 3% !important;
  }
}



/* ========================
   FORM
   ======================== */
/* Form Title */
#hs_cos_wrapper_dnd_area-module-9 .form-title {
    font-family: 'Beausite Classic', sans-serif;
    font-size: 24px !important;
    font-weight: 600;
    color: #ffffff;
    background-color: var(--color-vsm-red);
}

/* Form Body */
form {
    background-color: #ffffff;
    padding: 25px 35px 40px;
    box-shadow: rgba(50, 50, 93, 0.15) 0px 30px 60px -12px, rgba(0, 0, 0, 0.2) 0px 18px 36px -18px;
    border-radius: 0px;
}


form *:focus {
  outline-color: var(--color-vsm-petrol) !important;
  background-color: transparent !important;
}

.form-title {
    border-radius: 0px;
}


/* Form Inputs */
form input.hs-input,
form select > option {
    color: var(--color-vsm-dark-grey);
}


/* Form Dropdown Arrow */
.hs-fieldtype-select .input:after {
  color: var(--color-vsm-red);
  font-size: 24px;
}


.hs-fieldtype-select .input:focus:after {
  color: var(--color-vsm-petrol) !important;
}


/* Consent Checkbox Text */
form .inputs-list:not(.no-list) label > span p {
  color: var(--color-vsm-dark-grey);
}


/* Error Messages */
label.hs-error-msg,
label.hs-main-font-element {
  color: var(--color-vsm-red) !important;
}


/* Form Button */
.hs_submit {
  padding-top: 20px;
}

.hs_submit .actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs_submit .actions input[type='submit'] {
  width: 25%;
}

@media only screen and (max-width: 1200px) {
  .hs_submit .actions input[type='submit'] {
    width: 30%;
  }
}

@media only screen and (max-width: 992px) {
  .hs_submit .actions input[type='submit'] {
    width: 35%;
  }
}

@media only screen and (max-width: 768px) {
  .hs_submit .actions input[type='submit'] {
    width: 40%;
  }
}

@media only screen and (max-width: 600px) {
  .hs_submit .actions input[type='submit'] {
    width: 50%;
  }
}

@media only screen and (max-width: 490px) {
  .hs_submit .actions input[type='submit'] {
    width: 60%;
  }
}


form input[type='submit'], 
form input.hs-button,
form input[type='submit']:hover, 
form input.hs-button:hover {
    font-family: 'Beausite Classic', sans-serif;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    border-radius: 60px !important;
    fill: #FFFFFF;
    padding: 12px 44px;
    text-transform: uppercase;
    background-color: var(--color-vsm-petrol);
    -webkit-transition: background-color .2s ease-out;
    -moz-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
}

form input[type='submit']:hover, 
form input.hs-button:hover {
  background-color: var(--color-vsm-red);
}


/* PDF Mockup */
#hs_cos_wrapper_widget_1673608470684_ img {
  /*box-shadow: rgba(0, 0, 0, 0.35) 0px 25px 20px -20px;*/
}



/* ========================
   FOOTER
   ======================== */
footer.footer--landing-page {
   border: none;
   color: #ffffff;
   background-color: #000000;
   /*background-color: var(--color-vsm-dark-grey);*/
}

footer.footer--landing-page .footer__container {
  padding: 2.5rem 0 .1rem !important;
}

#hs_cos_wrapper_footer_copyright p {
   font-family: 'Beausite Classic', sans-serif !important;
    font-weight: 400;
}

footer ul.legal,
footer ul.social-links {
  list-style: none;
}

footer ul.legal,
footer ul.social-links,
footer ul.legal li,
footer ul.social-links li {
  display: inline;
}

footer ul.legal li a {
  color: #ffffff;
  transition: color .3s ease-in-out 0s,opacity .3s ease-in-out 0s,background-color .3s ease-in-out 0s,border-color .3s ease-in-out 0s,filter .3s ease-in-out 0s,font-weight .1s ease-in-out 0s;
}

footer ul.legal li a:hover {
  color: var(--color-vsm-red);
  cursor: pointer;
  text-decoration: none;
}


/* RRSS Icons */
footer ul.social-links li a {
  display: inline-flex;
  align-items: flex-end;
  /*background-color: var(--color-vsm-red);
  border-radius: 50%;*/
  transition: all .3s ease-in-out 0s,opacity .3s ease-in-out 0s,background-color .3s ease-in-out 0s,border-color .3s ease-in-out 0s,filter .3s ease-in-out 0s,font-weight .1s ease-in-out 0s;*/
}

footer ul.social-links li:nth-child(1) a {
  padding: 11px 9.75px !important;
}

footer ul.social-links li:nth-child(2) a {
  padding: 0px 12.25px !important;
}

footer ul.social-links li a span {
  text-align: center !important;
  height: 20px !important;
}

footer ul.social-links li a span svg {
  fill: #ffffff;
  height: 20px !important;
  width: auto !important;
  transition: all .3s ease-in-out 0s,opacity .3s ease-in-out 0s,background-color .3s ease-in-out 0s,border-color .3s ease-in-out 0s,filter .3s ease-in-out 0s,font-weight .1s ease-in-out 0s;
}

/* hover */
footer ul.social-links li:hover a {
 /* background-color: #ffffff;*/
}

footer ul.social-links li a:hover span svg {
  fill: var(--color-vsm-red);
}





/* ======================================================================= 
   THANK YOU PAGE (THP)
   ======================================================================= */
/* Button Wrapper */
#hs_cos_wrapper_widget_1673634416407 {
    text-align: center;
}






/* Button */
.button {
    font-family: 'Beausite Classic', sans-serif;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--color-vsm-petrol);
    border: none;
    border-radius: 60px !important;
    color: #FFFFFF;
    fill: #FFFFFF;
    font-size: 15px !important;
    padding: 18px 45px !important;
    text-transform: uppercase;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 25px 20px -20px;
    -webkit-transition: background-color .2s ease-out;
    -moz-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
}

button:hover, button:focus, .button:hover, .button:focus, button:active, .button:active {
    font-family: 'Beausite Classic', sans-serif;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background-color: var(--color-vsm-red);
    color: #FFFFFF;
}

a.button.button--small {
  background-color: var(--color-vsm-yellow);
}

a.button.button--small:hover {
  background-color: var(--color-vsm-red);
}


/* ========================
   POP-UP
   ======================== */
.leadinModal-content a.leadin-button {
  border-radius: 25px !important;
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
}

.leadinModal-content a.leadin-button:hover {
  color: var(--color-vsm-red) !important;
  font-weight: 700 !important;
}