:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #ED1E35; /* #ff6a3e; */
  --primaryLight: #ffba43;
  --secondary: #ffba43;
  --secondaryLight: #ffba43;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

/* Fuente por defecto para toda la web */

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

*, *:before, *:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}


.cs-logo-container {
  text-align: center; 
  margin-top: 50px;
}

.cs-logo-container img {
  width: 400px;
  height: auto;
  max-width: 90%;
}



.botones-contacto {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.btn-contacto {
  display: flex;
  align-items: center;
  text-decoration: none;
  background-color: #25D366;
  color: #ffffff;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 30px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.btn-contacto img {
  width: 30px;
  height: 30px;
  margin-left: 8px;
}

.btn-contacto.telefono {
  background-color: var(--primary);
}

.btn-contacto:hover {
  transform: scale(1.25);
}

.contacto-numero {
  font-size: 14px;
}





.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}
                          

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-143 {
      /* Centers button */
      text-align: center;
      /* 144px - 300px - leaving extra space for the navigation */
      padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
      /* 130px - 450px */
      padding-bottom: clamp(12.125rem, 30.95vw, 28.125rem);
      position: relative;
      z-index: 1;
      /* Prevents white rectangle pseudos from overlapping the sections below */
      overflow: hidden;
  }
  #hero-143:before {
      /* Left side of the triangle */
      content: "";
      width: 31.25rem;
      /* make really long so it covers the whole screen all the way to desktop */
      height: 250rem;
      background: #fff;
      opacity: 1;
      transform: rotate(-67deg);
      transform-origin: center;
      position: absolute;
      display: block;
      bottom: -139.6875rem;
      /* this makes the right edge sit at the 50% line at all times */
      right: 50%;
      z-index: 0;
  }
  #hero-143:after {
      /* Right side of the triangle */
      content: "";
      width: 31.25rem;
      height: 250rem;
      background: #fff;
      opacity: 1;
      transform: rotate(67deg);
      transform-origin: center;
      position: absolute;
      display: block;
      bottom: -139.6875rem;
      /* this makes the left edge sit at the 50% line at all times */
      left: 50%;
      z-index: 0;
  }
  #hero-143 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
  }
  #hero-143 .cs-background:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.7;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 1;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
  }
  #hero-143 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  #hero-143 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
  }
  #hero-143 .cs-title {
      /* 39px - 61px */
      font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
      font-weight: 700;
      line-height: 1.2em;
      text-align: center;
      max-width: 51.8125rem;
      /* 16px - 24px */
      margin: 0 auto clamp(1rem, 4vw, 1.5rem);
      color: #fff;
      position: relative;
      text-transform: uppercase;
  }
  #hero-143 .cs-title:after {
      /* Divider Line */
      content: "";
      /* 60px - 100px */
      width: clamp(3.75rem, 9.5vw, 6.25rem);
      /* 4px - 8px */
      height: clamp(0.25rem, 0.8vw, 0.5rem);
      /* 16px - 24px */
      margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
      background: var(--primary);
      opacity: 1;
      position: relative;
      display: block;
  }
  #hero-143 .cs-subtitle {
    font-size: clamp(1.2375rem, 3.2vw, 1.9125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    /* 16px - 24px */
    margin: 0 auto clamp(1rem, 4vw, 1.5rem);
    color: #fff;
  }
  #hero-143 .cs-text {
      /* 16px - 25px */
      font-size: clamp(1rem, 1.95vw, 1.5625rem);
      line-height: 1.5em;
      text-align: center;
      width: 100%;
      /* 464px - 800px */
      max-width: clamp(29rem, 60vw, 50rem);
      margin: 0 auto;
      /* 40px - 48px */
      margin-bottom: clamp(2.5rem, 4vw, 3rem);
      color: #fff;
  }
  #hero-143 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      margin: auto;
      color: #1a1a1a;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
  }
  #hero-143 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #hero-143 .cs-button-solid:hover {
      color: #fff;
  }
  #hero-143 .cs-button-solid:hover:before {
      width: 100%;
  }
}
/* Desktop - 1300px (To make image background parallax) */
@media only screen and (min-width: 81.25rem) {
  #hero-143 {
      background: url("../img/fondo.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* makes the parallax effect */
      background-attachment: fixed;
  }
  #hero-143 .cs-background img {
      display: none;
  }
}

/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #h-services-143 {
      /* 40px - 100px */
      position: relative;
      /* give a higher z index than the hero so it can sit on top */
      z-index: 10;
  }
  #h-services-143 .cs-card-group {
      width: 100%;
      max-width: 29.0625rem;
      margin: 0 auto 0;
      /* negative margin pulls it up on top of the hero section */
      /* -46px to -76px - we're calculating whatever clamp is and multiplying by -1
          to make the value negative since clamp doesn't work with negative values */
      margin-top: calc(clamp(5rem, 13vw, 4.75rem) * -1);
      /* 40px - 60px top and bottom, 16px - 44px left & right */
      padding: clamp(2.5rem, 4.7vw, 3.75rem) clamp(1rem, 5.3vw, 2.75rem);
      box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
      border-radius: 0.3125rem;
      border-top: 8px solid var(--primary);
      background-color: #fff;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
  }
  #h-services-143 .cs-item {
      list-style: none;
      margin: 0 auto 2rem;
      width: 100%;
      max-width: 22.5rem;
  }
  #h-services-143 .cs-item:last-of-type {
      margin-bottom: 0;
  }
  #h-services-143 .cs-icon {
      /* 68px - 88px */
      width: clamp(4.25rem, 8.8vw, 5.5rem);
      /* 68px - 88px */
      height: clamp(4.25rem, 8.8vw, 5.5rem);
      margin: auto;
      /* 20px - 24px */
      margin-bottom: clamp(1.25rem, 5vw, 1.5rem);
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  #h-services-143 .cs-icon img {
      /* 44px - 52px */
      width: clamp(2.75rem, 5.8vw, 3.25rem);
      height: auto;
  }
  #h-services-143 .cs-title {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: center;
      margin: 0 auto 0.5rem;
      color: var(--headerColor);
  }
  #h-services-143 .cs-text {
      font-size: 1rem;
      text-align: center;
      line-height: 1.5em;
      max-width: 22.5rem;
      margin: 0 auto;
      color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #h-services-143 .cs-card-group {
      max-width: 49rem;
      /* -76px to -320px - we're calculating whatever clamp is and multiplying by -1
             to make the value negative since clamp doesn't work with negative values */
      margin-top: calc(clamp(4.75rem, 20vw, 20rem) * -1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      column-gap: 2.5rem;
  }
  #h-services-143 .cs-item {
      width: 45%;
      max-width: 19.625rem;
  }
  #h-services-143 .cs-item:last-of-type {
      margin-bottom: 2rem;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #h-services-143 .cs-card-group {
      max-width: 80rem;
      flex-wrap: nowrap;
  }
  #h-services-143 .cs-item {
      margin: 0;
  }
  #h-services-143 .cs-item:last-of-type {
      margin-bottom: 0;
  }
}

                              





/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-296 {
      padding: var(--sectionPadding);
  }
  #services-296 .cs-container {
      width: 100%;
      /* changes to 1440px on desktop */
      max-width: 43.75rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-296 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #services-296 .cs-title {
      max-width: 30ch;
  }
  #services-296 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #services-296 .cs-item {
      list-style: none;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 2rem;
      background-color: #f7f7f7;
      border-radius: 1rem;
      /* clips image corners */
      overflow: hidden;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      transition: background-color 0.3s;
  }
  #services-296 .cs-item:hover {
      cursor: pointer;
  }
  #services-296 .cs-item:hover .cs-image {
      opacity: 1;
  }
  #services-296 .cs-item:hover .cs-image img {
      transform: scale(1.1);
  }
  #services-296 .cs-item:hover .cs-icon {
      /* turns it white */
      filter: grayscale(1) brightness(1000%);
  }
  #services-296 .cs-item:hover .cs-h3,
  #services-296 .cs-item:hover .cs-item-text {
      color: #fff;
  }
  #services-296 .cs-image {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      z-index: -1;
      background-color: var(--primary);
      transition: opacity 0.3s;
  }
  #services-296 .cs-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: 0.4;
      object-fit: cover;
      transition: transform 0.6s;
  }
  #services-296 .cs-link {
      text-decoration: none;
  }
  #services-296 .cs-icon {
      width: auto;
      height: 3rem;
      margin-bottom: 1.5rem;
      display: block;
  }
  #services-296 .cs-icon path {
      transition: fill 0.3s;
  }
  #services-296 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.5625rem);
      line-height: 1.2em;
      margin: 0;
      margin-bottom: 1rem;
      color: var(--headerColor);
      transition: color 0.3s;
      font-weight: bold;
  }
  #services-296 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      transition: color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-296 .cs-card-group {
      justify-content: space-between;
      /* makes sure every box "stretches" to be the same height as the tallest box */
      align-items: stretch;
      flex-direction: row;
      flex-wrap: wrap;
  }
  #services-296 .cs-item {
      width: 48.6%;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-296 .cs-container {
      max-width: 90rem;
  }
  #services-296 .cs-card-group {
      justify-content: center;
  }
  #services-296 .cs-item {
      /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
      width: clamp(23.84%, 22.5vw, 23.95%);
  }
}

                              

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-274 {
      padding: var(--sectionPadding);
      /* Navigation Links */
  }
  #cs-footer-274 .cs-container {
      width: 100%;
      /* reset on tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      column-gap: 5.5rem;
      row-gap: 2rem;
      border-top: solid 10px var(--primary);
  }
  #cs-footer-274 .cs-logo-group {
      /* takes up all the space, lets the other ul's wrap below it */
      width: 100%;
      position: relative;
  }
  #cs-footer-274 .cs-logo-group {
      /* 44px - 52px */
      margin-bottom: clamp(2.75rem, 6.8vw, 3.25rem);
  }
  #cs-footer-274 .cs-logo {
      /* 210px - 240px */
      width: clamp(13.125rem, 8vw, 15rem);
      height: auto;
      display: block;
  }
  #cs-footer-274 .cs-logo-img {
      width: 100%;
      height: auto;
  }
  #cs-footer-274 .cs-social {
      display: inline-flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.75rem;
      position: absolute;
      top: 0;
      right: 0;
  }
  #cs-footer-274 .cs-social-link {
      width: 1.5rem;
      height: 1.5rem;
      background-color: #4e4b66;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      transition:
          transform 0.3s,
          background-color 0.3s;
  }
  #cs-footer-274 .cs-social-link:hover {
      background-color: var(--primary);
      transform: translateY(-0.1875rem);
  }
  #cs-footer-274 .cs-logo-img {
    top: -30px;
    position: relative;
  }
  #cs-footer-274 .cs-nav {
      padding: 0;
      margin: 0;
  }
  #cs-footer-274 .cs-nav-li {
      list-style: none;
      margin: 0;
      color: var(--bodyTextColor);
  }
  #cs-footer-274 .cs-header {
      font-size: 1rem;
      line-height: 1.5em;
      font-weight: 700;
      /* 16px - 20px */
      margin-bottom: clamp(1rem, 2.7vw, 1.25rem);
      color: var(--bodyTextColor);
      position: relative;
      display: block;
  }
  #cs-footer-274 .cs-nav-link {
      font-size: 1rem;
      text-decoration: none;
      line-height: 1.5em;
      color: var(--bodyTextColor);
      position: relative;
  }
  #cs-footer-274 .cs-nav-link:before {
      /* underline */
      content: "";
      width: 0%;
      height: 0.125rem;
      background: var(--bodyTextColor);
      opacity: 1;
      position: absolute;
      display: block;
      bottom: -0.125rem;
      left: 0;
      transition: width 0.3s;
  }
  #cs-footer-274 .cs-nav-link:hover:before {
      width: 100%;
  }
  
  #cs-footer-274 .cs-container {
      max-width: 80rem;
      row-gap: 0;
      /* 44px - 88px */
      column-gap: clamp(2.75rem, calc(6%), 5.5rem);
  }
  #cs-footer-274 .cs-logo-group {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
  }
  #cs-footer-274 .cs-social {
      flex-direction: row;
      position: relative;
      top: auto;
      right: auto;
  }
}

                              





/* LAST STYLESHEET */



.mt-30 {
  margin-top: 30px !important;
}
.logo-difuminado {
  border-radius: 50%; /* Hace que el logo sea perfectamente redondo */
  box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.6); /* Sombra roja difuminada */
}