* {
    box-sizing: border-box;
    overflow-x: none;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --cyan: #00ECF8;
  --cyan2: #00CBD6;
  --verde: #005357;
  --verde-oscuro: rgb(0 62 65);
  --naranja: #E84621;
  --naranja-oscuro: rgb(174 53 25);
  --gris: #D4D8DA;
  --gris-claro: #eeeeee;
  --blanco: #FBFBFB;
  --negro: #2E2D2C;
  --rounded: 0.5rem;
}

html, body {scroll-behavior: smooth;}

body {font-kerning: normal;
}

.body {
  background-color: #f7f7f7;
}

h1, h2, h3, h4, h5, h6, p, label, a {
  font-family: "Open Sans", sans-serif;
  color: var(--negro);
  letter-spacing: 0.2px;
}

button>a {color: var(--blanco);}

small {
  font-family: "Open Sans", sans-serif;
  color: var(--negro);
  letter-spacing: 0.1px;
}

strong {letter-spacing: 0.2px;}

h1 { font-size: 2.25rem; font-weight: 600;}
h2 { font-size: 1.75rem; font-weight: 600;}
h3 { font-size: 1.75rem; font-weight: 600;}
h4 { font-size: 1.5rem; font-weight: 600;}
h5 { font-size: 1.125rem; font-weight: 600;}
h6 { font-size: 2rem; font-weight: 500;}
p {font-size: 1.125rem; }
small {font-size: 0.875rem;}
label {font-size: 0.938rem; font-weight: 600; text-align: left;}

input, textarea { font-family: "Open Sans", sans-serif; color: var(--negro); font-size: 1rem; font-weight: 500;}

.regular-big {font-size: 1.25rem;}
.regular-small {font-size: 1rem;}

.t-blanco {color: var(--blanco); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
.t-blanco2 {color: var(--blanco);}
.t-naranja {color: var(--naranja);}
.t-verde {color: var(--verde);}
.t-cyan {color: var(--cyan2);}
.t-cyan2 {color: var(--cyan);}


body {background-color: var(--blanco); z-index: 0}

button {
    font-size: 1.125rem; 
    font-weight: 700; 
    width: 100%; 
    border: none;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.25);
    color: var(--blanco);
    border-radius: var(--rounded);
    padding: 0.625rem 1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);

}

.btn-verde { background-color: var(--verde);}
.btn-verde:hover { background-color: var(--verde-oscuro); transition-duration: 400ms;}

.btn-naranja { background-color: var(--naranja);}
.btn-naranja:hover { background-color: var(--naranja-oscuro); transition-duration: 400ms;}

.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.btn-icon2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.btn-icon>img{
  height: 1.25rem;
}

.btn-icon2>img {
  height: 1rem;
}







.bg-gracias {
  background-image: url('../img/slider5.1.jpg');
  height: 50rem;
}

.bg-gracias {
    position: relative; 
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}


.bg-gracias::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
    z-index: -1;
}


.icon-gracias {
  border-radius: 50%;
  margin: auto;
  width: 6.5rem;
  height: 6.5rem;
  background-image: url('../img/lg-calidad.svg');
  background-position: center;
  background-size: 145%;
  box-shadow: 0px 0px 20px 5px var(--cyan2);
}

/* footer */

.footer {
  padding: 2rem 0rem 0.5rem;
  background-color: var(--verde);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.main-footer {
  width: 53rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.5rem;
  text-align: left;
}

.nav-f>a, .nav-services>h5, .nav-services>a, .info-c-f>h5, .info-c-f>a  {color: var(--blanco); font-size: 0.8rem; margin: 0; padding: 0;}

.nav-f>a:hover, .nav-services>a:hover, .info-c-f>a:hover, .copyright>small>a:hover {color: var(--cyan); text-decoration-line: underline;}

.lg-footer {
    width: 10rem;
    height: 4rem;
    background-image: url('../img/logotipo-denomicación-3.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

.nav-f {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.nav-services {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contact-f {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: solid 1px var(--blanco);
  padding-left: 0.7rem;
}

.info-c-f {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.copyright {
  width: 53rem;
  text-align: center;
}

.copyright>small {
  font-size: 0.75rem;
  color: var(--blanco);
}

.copyright>small>a {color: var(--blanco);}



/* DEGRADADOS EN IMÁGENES */

.d-verde-i, .d-verde, .d-naranja, .d-negro, .d-nv, .dh-verde, .dh-naranja, .d-desenfoque {
    position: relative;
    isolation: isolate;
    z-index: 0;
}

.d-verde-i::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.0) 20%, var(--verde) 90% );
    mix-blend-mode: multiply;
    z-index: 2;   /* SI FALLA EN OTRAS IMÁGENES EL CAMBIO ESTPA AQUI, ESTABA EN -1 */
    opacity: 0.9;
}


.d-verde::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.0) 20%, var(--verde) 65% );
    mix-blend-mode: multiply;
    z-index: -1;   /* SI FALLA EN OTRAS IMÁGENES EL CAMBIO ESTPA AQUI, ESTABA EN -1 */
    opacity: 0.7;
}

.d-naranja::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.0) 20%, var(--naranja) 75% );
    mix-blend-mode:multiply;
    z-index: -1;
    opacity: 0.7;
}

.d-negro::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 1.0) 75% );
    mix-blend-mode:multiply;
    z-index: -1;
    opacity: 0.7;
}


.d-nv::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(var(--naranja) 35%, var(--verde) 65% );
    mix-blend-mode:multiply;
    z-index: -1;
    opacity: 0.7;
}

.dh-verde::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, var(--verde) 80% );
    mix-blend-mode: multiply;
    z-index: -1;
    opacity: 1;
}

.dh-naranja::before {

  content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, var(--naranja) 80% );
    mix-blend-mode: multiply;
    z-index: -1;
    opacity: 1;

}

.d-desenfoque::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: var(--negro);
    mix-blend-mode: multiply;
    filter: blur(5px);

    z-index: -1;
    opacity: 0.4;
}


.ds-verde {
    position: relative;
    isolation: isolate;
    z-index: 0;
}

.ds-verde::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.0) 0%, var(--verde) 60% );
    mix-blend-mode:multiply;
    z-index: -1;
    opacity: 0.9;
}




.ds-cyan {
    position: relative;
    isolation: isolate;
    z-index: 0;
}

.ds-cyan::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.0) 0%, var(--cyan2) 60% );
    mix-blend-mode: multiply;
    z-index: -1;
    opacity: 0.9;
}




.ds-naranja {
    position: relative;
    isolation: isolate;
    z-index: 0;
}

.ds-naranja::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.0) 0%, var(--naranja) 60% );
    mix-blend-mode: multiply;
    z-index: -1;
    opacity: 0.9;
}



/* WTPP */

.wtpp-btn {
  width: 4.5rem;
  height: 4.5rem;
  background-color: var(--verde);
  border-radius: 50%;
  position: fixed;
  bottom: 10%;
  right: 10%;
  z-index: 99;
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
  background-image: url('../img/whatsapp-icon.webp');background-size: cover;
    background-size: contain;
    background-position: center center;
    
}

/*IDs Scrolls  */

#servicios, #servicio {
  height: 5rem;
}


@media (max-width: 992px) { 

  h1 { font-size: 2rem; font-weight: 600;}
  h2 { font-size: 1.75rem; font-weight: 600;}
  h3 { font-size: 1.5rem; font-weight: 600;}
  h4 { font-size: 1.5rem; font-weight: 600;}
  h5 { font-size: 1rem; font-weight: 600;}
  h6 { font-size: 2rem; font-weight: 500;}
  p {font-size: 1.1rem; }

  .regular-big {font-size: 1.2rem;}
  .regular-small {font-size: 0.9rem;}




  .footer {
  padding: 2rem 0rem 0.5rem;
  background-color: var(--verde);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
  justify-content: center;
}

  .main-footer {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}

  .nav-f {display: none;}
  .nav-services {display: none;}

  .contact-f {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  border-left: none;
  padding-left: 0;
}

  .info-c-f>h5, .info-c-f>a  {color: var(--blanco); font-size: 1rem; margin: 0; padding: 0;}

  .copyright {
  width: 90%;
  text-align: center;
}
  .copyright>small{font-size: 0.85rem;}

  .wtpp-btn {
    width: 4rem;
    height: 4rem;
    bottom: 7%;
  }
}