@font-face {
  font-family: bebas_neue;
      src: url(../font/bebas_neue/BebasNeue-Regular.ttf);
}
@font-face {
  font-family: CreatoDisplay-Black;
      src: url(../font/creato_display/CreatoDisplay-Black.otf);
}

@font-face {
  font-family: CreatoDisplay-Bold;
      src: url(../font/creato_display/CreatoDisplay-Bold.otf);
}

@font-face {
  font-family: CreatoDisplay-ExtraBold;
      src: url(../font/creato_display/CreatoDisplay-ExtraBold.otf);
}

@font-face {
  font-family: CreatoDisplay-Light;
      src: url(../font/creato_display/CreatoDisplay-Light.otf);
}

@font-face {
  font-family: CreatoDisplay-Medium;
      src: url(../font/creato_display/CreatoDisplay-Medium.otf);
}

@font-face {
  font-family: CreatoDisplay-Regular;
      src: url(../font/creato_display/CreatoDisplay-Regular.otf);
}

@font-face {
  font-family: CreatoDisplay-Thin;
      src: url(../font/creato_display/CreatoDisplay-Thin.otf);
}


@font-face {
  font-family: LouisGeorgeCafeBold;
      src: url(../font/louis_george_cafe/LouisGeorgeCafeBold.ttf);
}

@font-face {
  font-family: LouisGeorgeCafeLight;
      src: url(../font/louis_george_cafe/LouisGeorgeCafeLight.ttf);
}

@font-face {
  font-family: LouisGeorgeCafe;
      src: url(../font/louis_george_cafe/LouisGeorgeCafe.ttf);
}

@font-face {
  font-family: Nexa-ExtraLight;
      src: url(../font/nexa/Nexa-ExtraLight.ttf);
}

@font-face {
  font-family: Nexa-Heavy;
      src: url(../font/nexa/Nexa-Heavy.ttf);
}


html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: CreatoDisplay-Light;
}

body, html {
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

a {
    text-decoration: none; /* Quita el subrayado */
    color: inherit; /* Usa el color del elemento padre */
    cursor: default; /* Mantiene el cursor predeterminado, como el de una flecha */
}

a:link,
a:visited,
a:hover,
a:active,
a:focus {
    color: #fff; /* Mantiene el color en todos los estados */
    outline: none; /* Opcional: elimina el contorno de enfoque */
    cursor: default; /* Asegura que el cursor no cambie en ningún estado */
}

p {
  margin: 10px 20px;
  text-align: justify;
  font-size: 1.1em;
}

h1 {
  font-family: CreatoDisplay-Bold;
  font-size: 3em;
  text-align: center;
  line-height: 0.9em;
  margin-top: 10px;
  margin-bottom: 20px;



}

.banner {
      width: 100%;
      object-fit: cover;
      object-position: center; /* Asegura que la imagen se centre al recortarse */
      margin: 0 auto; /* Centra horizontalmente */

}

.slide {
    margin-top: 60px;
    position: relative;
    width: 100vw;
    margin-bottom: 100px;

}


.btn {
  margin: 10px 5px;
  padding: 5px 7px;
  display: inline-block;
  background-color: #2b1c1b;
  letter-spacing: 2px;
  font-family: bebas_neue;
  font-size: 19px;
  color: #fff;
}

.icon_menu {
  position: relative;
  top: 10px;
  padding: 0px 10px;
  color: #fff;
  font-size: 24px;
}

.titulo {
  text-align: center;
  font-size: 24px;
  font-family: CreatoDisplay-Bold;
  padding: 10px 20px;
  margin-top: 60px;
}

.comentario {
  text-align: justify;
  font-size: 0.9em;
  padding-left: 20px;
  padding-right: 20px;
}

.negro {
  background-color: #2b1c1b;
}

.negra {
  color: #2b1c1b;
}

.durazna {
  color: #fe9f99;
}
.durazno {
  background-color: #fe9f99;
}

.naranja {
  color: #ed742f;
}

.naranjo {
  background-color: #ed742f;
}

.gris {
  background-color: #f1f1f3;
}

.roja {
  color: #f6335f;
}

.rojo {
  background-color: #f6335f;
}

.rosa {
  color: #f4cfd7;
}

.roso {
  background-color: #f4cfd7;
}

.blanca {
  color: #f6eff7;
}

.vainilla {
  color: #fde4cc;
}

.vainillo {
  background-color: #fde4cc;
}

.violeta {
  color: #ded8fd;
}
.violeto {
  background-color: #ded8fd;
}

.morada {
  color: #2e328f;
}
.morado {
  background-color: #2e328f;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
		  position: relative;
		  min-height: 1px;
		  float: left;
		}
		.col-12 {
		  width: 100%;
		}
		.col-11 {
		  width: 91.66666667%;
		}
		.col-10 {
		  width: 83.33333333%;
		}
		.col-9 {
		  width: 75%;
		}
		.col-8 {
		  width: 66.66666667%;
		}
		.col-7 {
		  width: 58.33333333%;
		}
		.col-6 {
		  width: 50%;
		}
		.col-5 {
		  width: 41.66666667%;
		}
		.col-4 {
		  width: 33.33333333%;
		}
		.col-3 {
		  width: 25%;
		}
		.col-2 {
		  width: 16.66666667%;
		}
		.col-1 {
		  width: 8.33333333%;
    }


.pie {
  padding: 5px 10px;

  position: fixed;
  z-index: 1000;
  background-color: #2b1c1b;
  height: 100px;
  width: 100%;
  bottom: 0px
}