/* **************************** */
/* FUNCTIONS */
/* **************************** */
/* **************************** */
/* MIXINS */
/* **************************** */
/* **************************** */
/* VARIABLES */
/* **************************** */
/* **************************** */
/* TIPOGRAFIA */
/* **************************** */
@font-face {
  font-family: "arialregular";
  font-weight: normal;
  font-style: normal;
  src: url("../assets/font/arial-regular.woff2") format("woff2"), url("../assets/font/arial-regular.woff") format("woff");
}
@font-face {
  font-family: "arialblack";
  font-weight: normal;
  font-style: normal;
  src: url("../assets/font/arial-black.woff2") format("woff2"), url("../assets/font/arial-black.woff") format("woff");
}
body {
  font-family: "arialregular", sans-serif;
  font-size: 16px;
  color: black;
}

.logo__titulo {
  font-size: 36px;
}

.elemento__titulo {
  font-family: "arialblack";
  font-size: 36px;
  font-weight: bold;
}

/* **************************** */
/* HEADER */
/* **************************** */
.navegacion__navegacion-header {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.navegacion-header__link {
  flex-basis: 10ch;
}

.alineacion-derecha {
  text-align: right;
}

.alineacion-izquierda {
  text-align: left;
}

.alineacion-centro {
  text-align: center;
}

.link__button,
.link-banner__boton {
  padding: 0.625rem;
  color: white;
  background-color: #f2624a;
  font-size: 1.125rem;
}

.seleccionado {
  color: #f2624a;
  font-size: 1.125rem;
  font-weight: bold;
}

/* **************************** */
/* FOOTER */
/* **************************** */
.footer {
  background-color: #c4c4c4;
}

.alto__footer {
  height: 100%;
}

.negrita {
  font-family: "arialblack";
  font-size: 1.125rem;
  font-weight: bolder;
}

.empresa__empresa,
.comunidad__comunidad,
.contactar__contactar,
.redes__redes {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  gap: 1.25rem;
}

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

/* **************************** */
/* FORMS */
/* **************************** */
.formulario__form {
  display: flex;
  flex-direction: row;
}

.form__input {
  width: 100%;
  height: 2.3125rem;
  box-sizing: border-box;
  padding-top: 10px;
  padding-right: 0.5rem;
  padding-bottom: 10px;
  padding-left: 20px;
  border: 0px solid black;
  background-color: white;
  color: black;
}
.form__input::placeholder {
  font-family: "arialregular";
  color: #c4c4c4;
}

.form__button {
  color: white;
  background-color: #f2624a;
  border-radius: 1.5625rem;
  padding: 0.625rem;
  font-size: 1rem;
  margin-left: -50px;
}

/* **************************** */
/* GRIDS */
/* **************************** */
.header {
  display: grid;
  grid-template-columns: minmax(1200px, 1300px);
  grid-template-rows: auto;
  justify-content: center;
}

.header__ul-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 5rem;
  grid-template-areas: "l n c";
  width: 100%;
  height: 100%;
}

.ul-header__logo {
  grid-area: l;
  justify-self: flex-start;
  align-self: center;
}

.ul-header__navegacion {
  grid-area: n;
  align-self: center;
  height: 100%;
}

.ul-header__comprar {
  grid-area: c;
  justify-self: flex-end;
  align-self: center;
}

.main__banner {
  display: grid;
  grid-template-columns: minmax(1200px, 1300px);
  grid-template-rows: 36.25rem;
  justify-content: center;
}

.main__contenido {
  grid-area: conten;
}

.banner__contenido {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 36.25rem;
  grid-template-areas: "texto imagen";
  width: 100%;
  height: 100%;
  justify-content: center;
}

.contenido__texto {
  grid-area: texto;
  z-index: 2;
}

.contenido__imagen {
  grid-area: imagen;
  z-index: 1;
  align-self: center;
  justify-self: center;
}

.listado-parrafos__parrafo-uno,
.listado-parrafos__parrafo-dos {
  display: grid;
  grid-template-columns: minmax(1200px, 1300px);
  grid-template-rows: auto;
  grid-template-areas: "lo";
  width: 100%;
  height: 100%;
  justify-content: center;
}

.parrafo-uno__listado-parrafos {
  display: grid;
  grid-template-columns: 2fr auto auto 2fr;
  grid-template-rows: auto auto;
  grid-template-areas: "ia i i da" "ib i i db";
  height: 36.25rem;
  width: 100%;
  justify-self: center;
  align-self: center;
}

.centrado {
  justify-self: center;
  align-self: center;
}

.listado-parrafos__elemento-texto-izq-arriba {
  grid-area: ia;
}

.listado-parrafos__elemento-imagen {
  grid-area: i;
}

.listado-parrafos__elemento-texto-der-arriba {
  grid-area: da;
}

.listado-parrafos__elemento-texto-izq-abajo {
  grid-area: ib;
}

.listado-parrafos__elemento-texto-der-abajo {
  grid-area: db;
}

.parrafo-dos__figure {
  display: grid;
  grid-template-columns: 2fr 4fr;
  grid-template-rows: 36.25rem;
  grid-template-areas: "f x";
}

.figure__lentes {
  grid-area: f;
  align-self: center;
  justify-self: center;
}

.figure__texto {
  grid-area: x;
  align-self: center;
  justify-self: center;
  max-width: 43.75rem;
  font-size: 1.125rem;
  font-weight: bold;
}

/* FOOTER */
.footer {
  display: grid;
  grid-template-columns: minmax(1200px, 1300px);
  grid-template-rows: 4.8125rem 18rem;
  justify-content: center;
  grid-template-areas: "." "k";
}

.footer__listado {
  grid-area: k;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.5fr;
  grid-template-rows: 8.125rem 9.375rem;
  grid-template-areas: "n n n n n" "c c c c c";
  width: 100%;
  height: 100%;
  justify-items: flex-start;
  align-items: center;
}

.listado__copy {
  grid-area: c;
  align-self: center;
  justify-self: center;
}

/* **************************** */
/* SIDEBARS */
/* **************************** */
/* **************************** */
/* NAVIGATORS */
/* **************************** */
/* **************************** */
/* BOTONES */
/* **************************** */
/* **************************** */
/* DROPDOWNS */
/* **************************** */
/* **************************** */
/* SLIDERS */
/* **************************** */
/* **************************** */
/* INDEX */
/* **************************** */
body {
  width: 100vw;
  height: 100vh;
  background-color: white;
  color: black;
  overflow-x: hidden;
}

.main__banner {
  background-color: #ffe6d1;
}

.contenido__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5%;
}

.elemento__parrafo {
  max-width: 90%;
}

.imagen__picture-imagen {
  z-index: -1;
}

.listado-parrafos__parrafo-dos {
  background-color: #f8f6ee;
}

.formato-parrafo {
  box-sizing: border-box;
  width: 21.5rem;
}

/* **************************** */
/* CONTACT */
/* **************************** */
/* **************************** */
/* GALERIA */
/* **************************** */
/* **************************** */
/* BLOG */
/* **************************** */
/* **************************** */
/* PRODUCTOS */
/* **************************** */