@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@500&family=Kanit:wght@400;600&family=Roboto+Condensed:wght@400;700&display=swap');

:root {
  /* --clr-bg: rgb(255, 255, 255); */
  --clr-bg: fafafa;
  --clrfnt: #050505;
  --clrfntw: white;
  --clrforta: rgb(22, 165, 162);
  --clrebe: rgb(0, 0, 51);
  --clrcc: rgb(153, 204, 204);
  --clrb: rgb(22, 165, 162);
  --clrbh: rgb(22, 165, 162);
  --clrbrix: rgb(0, 51, 102);
  --clrbrixr: #990033;
  --padx: 12%;
  --pady: 2rem;
  --wp-ico: 3.2rem;
  --fnt-size: 18px;
  --fnt-p: clamp(1rem, 2.4vw, 1.4rem);
  --fnt-h1: clamp(3.2rem, 6vw, 4.8rem);
  --fnt-h2: 3rem;
  --fnt-h3: 2.4rem;
  --fnt-h4: 1.6rem;
  --fnt-h5: 1.6rem;
  --ff-menu: "Kanit", sans-serif;
  --ff-p: "Roboto Condensed", sans-serif;
  --ff-h1: ;
  --ff-h2: "Cormorant SC", serif;
  --ff-h3: "Roboto Condensed", sans-serif;
  --ff-h4: "Roboto Condensed", sans-serif;
  --ff-h5: "Roboto Condensed", sans-serif;
  --fnt-prod: clamp(1.8rem, 2.8vw, 2.4rem);
  --navh: 88px;
  --navhr: 68px;
  --logomenu: 50px;
  --logomenur: 40px;
  --icored: 40px;
  --icoredr: 36px;
  --hambur: 32px;
}

@media (max-width: 1080px) {
  :root {
    --fnt-size: 16px;
    --padx: 8%;
  }
}

@media (max-width: 876px) {
  :root {
    --fnt-size: 14px;
    --padx: 6%;
  }
}

title {
  display: none;
}

body {
  overflow-x: hidden;
  position: relative;
  /* height: 100%; */
}

html {
  background: var(--clr-bg);
  font-family: "Kumbh Sans", Roboto, sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
  font-size: var(--fnt-size);
  color: var(--clr-fnt);
  scroll-behavior: smooth;
  font-family: var(--ff-p);
  height: 100%;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  color: inherit;
  box-sizing: inherit;
}

ul, li, a {
  text-decoration: none;
  /* list-style-type: none; */
}

a, button {
  cursor: pointer;
}

a, p, button, ul, li {
  font-size: var(--fnt-p);
}

li {
  margin-left: 1.25rem;
}

h1 {
  font-size: var(--fnt-h1);
}

h2 {
  font-family: var(--ff-h2);
  font-size: var(--fnt-h2);
  color: var(--clrforta);
  margin: 2rem;
}

h3 {
  font-family: var(--ff-h3);
  font-size: var(--fnt-h3);
}

h4 {
  font-family: var(--ff-h4);
  font-size: var(--fnt-h4);
}

h5 {
  font-family: var(--ff-h5);
  font-size: var(--fnt-h5);
}

h2, h3, h4, h5 {
  margin-bottom: 1.4rem;
  text-align: center;
}

.padx {
  padding-left: var(--padx);
  padding-right: var(--padx);
}

.pady {
  padding-top: var(--pady);
  padding-bottom: var(--pady);
}

.spacer {
  height: 2rem;
}

.flexo {
  display: flex;
}

.gap {
  gap: 2rem;
}

.minigap {
  gap: 1rem;
}

.unouno > * {
  flex: 1;
}

.aicenter {
  align-items: center;
}

.resp {
  max-width: 100%;
  height: auto;
}

.divmid {
  max-width: 50%;
}

.flexmid > * {
  flex: 1;
}

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

.txtc {
  text-align: center;
}

.txtr {
  text-align: right;
}

.bglineas {
  background-image: url('./img/SVG/lineas_fondo.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
}

.mbot {
  margin-bottom: 1.4rem;
}

.fadeIn {
  transition: filter ease-out 800ms, transform ease-out 500ms, opacity ease-out 400ms;
}

.fopa {
  opacity: 0;
  transition: opacity ease-out 1800ms !important;
}

.fblur {
  filter: blur(80px);
}

.fadeIn.fleft {
  transform: translate(-40px, 0);
}

.fadeIn.fright {
  transform: translate(40px, 0);
}

.fadeIn.fbot {
  transform: translate(0, 40px);
}

.inView {
  transform: translate(0, 0) !important;
  opacity: 1;
  filter: blur(0);
}

#buttonOnline a {
  position: fixed;
  bottom: 20%;
  right: 2rem;
  border-radius: 36px;
  background-color: var(--clrforta);
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2rem;
  z-index: 999;
  text-align: center;
  text-transform: uppercase;
  padding: 1rem 2rem 1rem 4rem;
  box-shadow: 0 6px 18px #113333aa;
  transition: background-color 150ms ease-out;
}

#buttonOnline a::before {
  content: '';
  position: absolute;
  width: 2rem;
  height: 2rem;
  background: url("./img/cart.svg");
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 1.2rem;
  transform: translate(0, -55%);
  transition: background 150ms ease-out, transform 200ms ease-out;
}

#buttonOnline a:hover {
  background-color: white;
  color: var(--clrforta);
}

#buttonOnline a:hover::before {
  background: url("./img/shopf.svg");
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(8px, -55%);
}



/* NAVBAR */

#navbar {
  height: var(--navh);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: white;
  padding: 1rem var(--padx);
  z-index: 999;
  justify-content: space-between;
  align-items: center;
  transition: height ease-in-out 150ms, background ease-in 100ms;
}

#navLogo {
  width: var(--logomenu);
  min-width: 30px;
  transition: width ease-in-out 150ms, transform ease 150ms;
  align-self: center;
}

#navLogo:hover {
  transform: scale(1.1);
}

#navMenu ul {
  font-family: var(--ff-menu);
  list-style: none;
  font-weight: 400;
  align-items: center;
}

#navMenu a {
  font-size: clamp(14px, 2.8vw, 16px) !important;
  letter-spacing: 1px;
  position: relative;
}

#contactBtn {
  border: 3px solid white;
  padding: .5rem 1rem;
  border-radius: 55px;
  transition: padding ease-in-out 150ms, color ease 150ms, background ease 150ms;
}

#contactBtn:hover {
  color: var(--clrforta);
  background: white;
}

#igIco, #fbIco, #mailIco {
  width: var(--icored);
  height: var(--icored);
  transition: height ease-in-out 150ms, width ease-in-out 150ms, transform ease 150ms;
}

#igIco:hover, #fbIco:hover, #mailIco:hover {
  transform: scale(1.1);
}

#navbar.resize {
  height: var(--navhr);
  background: var(--clrforta);
}

#navLogo.resize {
  width: var(--logomenur);
}

#igIco.resize, #fbIco.resize, #mailIco.resize {
  width: var(--icoredr);
  height: var(--icoredr);
}

#contactBtn.resize {
  padding: .25rem 1rem;
}

#navMenu .hov::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background-color: white;
  opacity: 0;
  transition: opacity ease 200ms;
}

#navMenu .hov:hover::after {
  /* width: 100%; */
  opacity: 1;
}

.navMob {
  display: none;
}

.hambur {
  display: none;
}

@media (max-width: 768px) {
  #buttonOnline a {
    bottom: 0;
    right: 50%;
    transform: translate(50%, 0);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 0 12px #113333;
  }

  #navMenu {
    display: none;
  }
  #navRedes {
    display: none;
  }
  .hambur {
    display: block;
    width: var(--hambur);
    height: var(--hambur);
    cursor: pointer;
    z-index: 999;
  }
  .hambur span {
    display: block;
    width: var(--hambur);
    height: 3px;
    background-color: white;
    margin-bottom: 8px;
    border-radius: 8px;
    transition: transform ease 150ms;
    visibility: visible;
  }
  .selected span:first-child, .selected span:last-child {
    transform: rotate(45deg);
    transform-origin: left;
  }
  .selected span:last-child {
    transform: rotate(-45deg);
  }
  .selected span:nth-of-type(2) {
    visibility: hidden;
  }
  .navMob {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 0;
    width: 60vw;
    min-width: 300px;
    max-width: 600px;
    height: 100vh;
    background-color: var(--clrforta);
    justify-content: space-evenly;
    padding: 4rem 2rem;
    transform: translateX(610px);
    transition: transform ease-out 250ms;
  }
  .navMob.show {
    transform: translateX(0);
  }
  #navMenuMob {
    text-align: center;
    height: 100%;
  }
  #navMenuMob ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: 100%;
  }
  #navMenuMob ul li {
    list-style: none;
  }
  #navMenuMob a {
    font-size: clamp(2rem, 3vw, 3.6rem);
    font-weight: 600;
    padding: 1rem 0;
  }
  #navRedesMob {
    justify-content: center;
  }
}


/* HEADER */

header {
  min-height: 100%;
  height: 100vh;
  background: var(--clrforta);
  position: relative;
}

.slide {
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 80px;
  width: 100%;
  height: 85vh;
  min-height: 85vh;
  max-height: 85vh;
  position: relative;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 1rem;
  color: white;
  font-weight: 600;
  font-size: 1.8rem;
  transition: 600ms ease;
  border-radius: 0 100px 100px 0;
  user-select: none;
  background: var(--clrforta);
}

.next {
  right: 0;
  border-radius: 50% 0 0 50%;
}

.prev:hover, .next:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--clrforta);
}

#dots {
  text-align: center;
  z-index: 990;
  position: absolute;
  bottom: 17%;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  cursor: pointer;
  height: 1rem;
  width: 1rem;
  margin: 0 2px;
  background: #bbb;
  outline: solid 1px #999;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 600ms ease;
}

.active, .dot:hover {
  background-color: var(--clrforta);
  outline: solid 1px #ddd;
  box-shadow: 0 0 12px white;
}

#ebeInicio {
  position: relative;
  display: flex;
  background: var(--clrbrix);
  width: 100vw;
  height: 15%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem var(--padx);
  min-width: 100vw;
  gap: 2rem;
}

#ebeInicio div {
  width: 100%;
}

#ebeInicio img {
  max-height: 100%;
  max-width: 100%;
  float: right;
}
.ebelogo img {
  float: left !important;
}

#ebeInicio div {
  height: 90%;
}

.ebelogo {
  min-width: 60%;
}

.brixusa img {
  max-height: 100px !important;
}

/* SLIDE 1 */

#slideOne {
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
  background-image: 
    linear-gradient(to right, #036C68 3%, transparent, #036C68 97%),
    radial-gradient(circle at top, #28bab7 0%, #036a66 40%, transparent),
    linear-gradient(#089a9700 63%, #089a97 65%, #2bbcb7 68%),
    linear-gradient(#036d69, #036d69);
}

.slideOneCont {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

.leftCol {
  height: 100%;
  min-width: 48%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  align-items: center;
}

.leftCol .flexo {
  flex-direction: column;
  gap: 2rem;
}

.slideLogo {
  margin-top: 2rem;
  width: 16vw;
  min-width: 180px;
  max-width: 400px;
}

.slidePic {
  padding: 2rem;
  width: 100%;
  max-height: 70%;
}

#slideOneOne p {
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  margin-bottom: 2rem;
}

#slideOneOne, #slideOneTwo {
  position: relative;
  text-align: left;
  color: white;
}

#slideOneTwo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 36%;
  background-color: white;
  transform: translateY(12px);
}

#slideOneTwo p {
  font-family: var(--ff-h2);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.8vw, 3.2rem);
}

#slideOneTwo p:first-child {
  font-size: clamp(2.6rem, 3.8vw, 4.2rem);
}

.slidePic img {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;

}

#slideOne div:nth-of-type(3) {
  justify-content: space-evenly;
  width: 100%;
  font-weight: 600;
}


/* SLIDE 2 */

#slideTwo, #slideThree {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: 
    linear-gradient(to right, #787878 3%, transparent, #787878 97%),
    radial-gradient(circle at top, #c0c0c0 0%, #7c7c7c 40%, transparent),
    linear-gradient(transparent 63%, #8f8f8f 65%, #c6c6c6 68%),
    linear-gradient(#747474, #747474);
}

.bgforta {
  background: var(--clrforta);
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: .5rem 1rem;
  font-weight: 600;
}

.bgforta .numbersq {
  padding: .2rem .65rem;
  font-weight: 400;
  border: solid 2px white;
  border-radius: 8px;
}

.principios {
  background-color: white;
  text-align: center;
  padding: .2rem .5rem;
  position: absolute;
  top: 110px;
  right: var(--padx);
}

/* SLIDE 4 */

#slideFour {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: linear-gradient(var(--clrforta) 80px, white 80px);
}

#slideFour .slidePic {
  background-color: white;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

#slideFour .slidePic img {
  max-height: 100%;
  width: auto;
  float: right;
}

#slideFour div p {
  font-weight: 600;
  /* text-align: center; */
}

.fadeSlider {
  animation-name: fadeSlider;
  animation-duration: 1500ms;
}

@keyframes fadeSlider {
  from { opacity: .4 }
  to { opacity: 1 }
}

#quees {
  text-align: center;
}

#quees p {
  margin-bottom: 1.4rem;  
}

.fortabg {
  background: var(--clrforta);
  color: var(--clrfntw);
}

#quees .fortabg {
  padding: var(--pady) var(--padx);
}

#pectina, #papaya {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.frutas {
  width: 40%;
  margin: 1rem auto;
  max-width: 400px;
}

#conoce {
  background: #878e96;
  background-image: url('./img/banner_gris.jpg');
  background-size: auto 100%;
  background-repeat: no-repeat;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  height: 240px;
  box-shadow: 0 0 28px #000000aa;
  z-index: 3;
}

#conoce p {
  font-weight: bold;
  color: var(--clrebe);
  font-size: clamp(1rem, 3.8vw, 3rem);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  #conoce {
    height: 10rem;
  }  
}

@media (max-width: 876px) {
  .flexmob {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  #conoce {
    height: 8rem;
  }
}

.fondoBlanco {
  background-image: 
    linear-gradient(to right, #787878 3%, transparent, #787878 97%),
    radial-gradient(circle at top, #c0c0c0 8%, #7c7c7c 36%, transparent 60%),
    linear-gradient(transparent 63%, #8f8f8f 65%, #c6c6c6 68%),
    linear-gradient(#747474, #747474);
  position: relative;
  padding: 2rem var(--padx);
  justify-content: space-between;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(#c6c6c6 10%, transparent);
    transform: translateY(48px);
  }
}

.prodName {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.prodImg {
  padding: 2rem;
  height: 600px;
}

.prodImg img {
  max-width: 60%;
  height: auto;
  max-height: 100%;
}

.prodName > p {
  text-align: center;
  font-family: var(--ff-h2);
  font-size: var(--fnt-prod);
  text-transform: uppercase;
  font-weight: 600;
}

.sndLine {
  font-size: clamp(2rem, 3vw, 3rem) !important;
}

.colorbg {
  background: var(--clrforta);
  padding: .1rem 1rem;
  color: white;
  font-size: clamp(2.4rem, 3.8vw, 3.8rem) !important;
  letter-spacing: 5px;
  margin-top: .75rem;
}

.bgr {
  background: var(--clrbrixr);
}

.bgb {
  background: var(--clrbrix);
}

.tm {
  position: relative;
}

.tm::after {
  content: 'TM';
  position: absolute;
  right: 0;
  top: 0;
  font-size: .75rem;
  transform: translate(1rem, 0);
  font-family: var(--ff-p);
  font-weight: 400;
}

.prodFloat {
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  background: var(--clrforta);
  padding: .5rem 1rem;
  font-family: var(--ff-p);
  align-items: center;
  z-index: 3;
  align-self: flex-start;


  &::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 600px;
    background: var(--clrforta);
    left: 0;
    top: 0;
    z-index: 2;
    transform: translateX(-598px);
  }
}

.numbersq {
  color: white;
  border: solid 2px white;
  padding: .7rem 1.2rem;
  border-radius: 12px;
}

.numbersq p {
  font-size: 1.6rem;
}

.ebeTech {
  color: white;
  font-weight: 600;
  background: var(--clrbrix);
  padding: .5rem;
}

.mobShow {
  display: none;
}

@media (max-width: 720px) {
  .prodFloat {
    align-self: center;
  }
  .mobShow {
    display: flex;
  }
  .deskShow {
    display: none;
  }
  .fondoBlanco {
    flex-direction: column;
  }
  .prodImg {
    height: 400px;
    width: 80%;
    align-self: center;
  }
}

#prodDesc {
  padding: var(--pady) var(--padx);
}

.prodOrient {
  font-weight: 600;
  text-align: center;
}

.subtitle {
  color: var(--clrforta);
  text-transform: uppercase;
  font-family: var(--ff-h2);
  font-weight: 600;
  font-size: var(--fnt-h4);
}

.cuadroEbe {
  border: 4px solid var(--clrebe);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 28px #00000055;
  margin: 2rem auto;
  margin-bottom: 4rem;
  max-width: 800px;
}

.cuadroEbe div:nth-child(1) {
  background: var(--clrebe);
  color: white;
  font-weight: 600;
  padding: 1rem;
}

.cuadroEbe div:nth-child(2) {
  padding: 1rem 2rem;
  background-color: white;
}

.funciones {
  display: flex;
  justify-content: stretch;
  gap: 2rem;
}

.funciones > * {
  flex: 1;
}

.funcion {
  display: flex;
  text-transform: uppercase;
  font-weight: 600;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.ico {
  min-width: 5rem;
}

@media (max-width: 720px) {
  .funciones {
    display: block;
  }
  .funcion {
    flex-direction: column;
    text-align: center;
    width: 50%;
    margin: 2rem auto;
  }
}


/* CASOS CLINICOS */

#casosClinicos {
  background: var(--clrcc);
  padding: 4rem var(--padx) 2rem;
}

#casosClinicos h2 {
  color: white;
}

.casosCont {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.casosCont .flexo {
  gap: 2rem;
  margin-bottom: 2rem;
  max-width: 1080px;
}

.caso {
  position: relative;
}

.caso img {
  border: solid 2px white;
}

.antes::after, .despues::after {
  content: 'Antes';
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 1.6rem;
  z-index: 3;
  color: white;
  font-weight: 600;
  text-shadow: 0 0 12px black;
}

.despues::after {
  content: 'Después';
  left: auto;
  right: 1rem;
}

.estudio {
  background: #eeeeee;
  text-align: center;
  padding: 1rem 2rem;
  width: 100%;
  max-width: 600px;
  margin: 1rem auto;
}

.buttonCont {
  margin: 2rem;
  display: flex;
  justify-content: center;
}

.button {
  padding: .5rem 2rem;
  text-transform: uppercase;
  color: white;
  background: var(--clrforta);
  transition: all ease 150ms;
  font-weight: 600;
}

.button:hover {
  background: white;
  color: var(--clrforta);
  outline: solid 2px var(--clrforta);
}

#cambio {
  position: relative;
  width: 100%;
  text-align: right;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  background-image: url('./img/img_final.jpg');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}


#cambio::after {
  content: '';
  width: 100%;
  position: absolute;
  height: 48px;
  background: linear-gradient(transparent 10%, white 100%);
  bottom: 0;
  left: 0;
}

#cambio p:nth-of-type(1) {
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.senti {
  margin: 2rem 0;
  font-family: var(--ff-h2);
}

.senti p {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  text-transform: uppercase;
}

.senti p:nth-of-type(1) {
  font-weight: 600;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem) !important;
}

.logoFinal {
  width: 30%;
  min-width: 300px;
}

@media (max-width: 840px) {
  #cambio {
    background-size: auto 80%;
    background-position: left bottom;
  }
  .logoFinal {
    min-width: 50%;
  }
}
@media (max-width: 678px) {
  #cambio {
    background-size: auto 60%;
    height: 50%;
  }
}

/* contacto */

.contactCont {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

@media (max-width: 720px) {
  .contactCont {
    flex-direction: column;
  }
}

#mailto {
  padding: 1rem;
  font-weight: 600;
  color: var(--clrbrix);
}

#form {
  width: 100%;
  background: var(--clrforta);
  color: white;
  font-weight: 600;
  font-family: var(ff-p);
  padding: 1rem;
  border-radius: 12px;
}

#form div {
  margin-bottom: 1rem;
}

.form input, .form textarea {
  border-radius: 18px;
  width: 100%;
  height: 2rem;
  border: none;
  outline: none;
  color: var(--clrfnt);
  padding: .75rem 1.5rem;
  margin-top: .5rem;
}

.form textarea {
  height: 6rem;
  resize: none;
}

.submitCont input {
  background: #ffffff;
  border: none;
  color: var(--clrforta);
  width: 6rem;
  height: 2rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0;
  cursor: pointer;
  transition: all 150ms ease;
}

.submitCont input:hover {
  background: var(--clrforta);
  color: white;
  outline: solid 2px white;
}

.confirmationP {
  font-size: 1.25rem;
}

#desarrollado {
  background: var(--clrbrixr);
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1rem;
  text-align: center;
  margin: 2rem auto;
  max-width: 800px;
  font-family: Kanit, sans-serif;
}

#somos {
  text-align: center;
  font-family: Kanit, sans-serif;
}


/* FOOTER */

#footer {
  background:
            linear-gradient(transparent 95%, var(--clrforta) 95%),
            linear-gradient(90deg, transparent 30%, #adadad 50%),
            url("./img/fondo_brix.jpg"),
            #adadad;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

#footer .flexo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.flag {
  width: 150px;
}

.empresa {
  text-align: right;
}

.empresa p:first-child {
  font-weight: 600;
}

#footer > #navRedes {
  width: 190px;
  padding: .75rem;
  background-color: var(--clrforta);
  justify-content: center;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 680px) {
  #footer .flexo {
    flex-direction: column;
    justify-content: center;
  }
  #footer p {
    text-align: center;
  }
  #footer > #navRedes {
    flex-direction: row;
  }
}