@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  margin-top: 25px;
  margin-bottom: 150px;
  margin-left: 5%;
  justify-content: center;
  row-gap: 1.5625rem; }
  .grid button {
    background-color: #434343;
    color: #ffffff;
    text-transform: uppercase;
    padding: 5px;
    border: #434343;
    border-radius: 4px;
    margin: 5px 0px; }
  .grid button a {
    color: #ffffff;
    text-decoration: none; }
  .grid .precio {
    color: black;
    font-weight: 200px;
    margin-top: 5px;
    font-weight: 600;
    font-size: 15px; }
  .grid p {
    margin-bottom: 0; }
  .grid .remeras,
  .grid .vestidos,
  .grid .div-jeans,
  .grid .div-buzos,
  .grid .topybodies {
    color: #434343;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal; }

.section-titulos {
  background-color: #434343;
  color: #ffffff;
  padding: 5px;
  text-transform: uppercase;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal; }

.lineagris {
  background-color: #434343;
  padding: 15px;
  margin-bottom: 20px; }

.main-index .f-p {
  height: 32.5rem;
  background-image: url("../assets/img/fondo-principal.jpg");
  background-position: bottom;
  background-size: 100%;
  margin-bottom: 5rem; }

.main-index .contenedor-productos {
  display: flex;
  justify-content: space-evenly;
  margin-top: 60px;
  margin-bottom: 60px;
  flex-wrap: wrap; }
  .main-index .contenedor-productos .buzo-produ {
    background-color: rgba(255, 255, 255, 0.5);
    /* Color blanco con 50% de opacidad */
    opacity: 0.5;
    /* Opacidad general */ }
  .main-index .contenedor-productos .nombres-productos {
    background-color: #434343;
    width: 350px;
    text-align: center;
    padding: 5px 5px; }
    .main-index .contenedor-productos .nombres-productos .titulos-productos {
      color: #ffffff;
      text-decoration: none;
      font-family: "Roboto", sans-serif;
      font-weight: 500; }

.main-index .productos-destacados {
  background-color: #b5b5b57a;
  padding: 20px;
  text-align: center;
  margin-bottom: 60px; }
  .main-index .productos-destacados h2 {
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    color: #2a2929; }

.main-index .contenedor-productos2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 30px; }
  .main-index .contenedor-productos2 .camisa-desta, .main-index .contenedor-productos2 .buzos-desta, .main-index .contenedor-productos2 .jean-desta, .main-index .contenedor-productos2 .body-desta {
    height: 350px;
    width: 280px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 70px;
    object-fit: cover; }

.main-index .camisa-desta:hover, .main-index .jean-desta:hover, .main-index .buzos-desta:hover, .main-index .body-desta:hover {
  transform: scale(1.2); }

footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #434343;
  justify-content: space-around;
  padding: 40px;
  flex-wrap: wrap; }
  footer h2 {
    font-size: 55px; }
  footer .opciones-footer {
    list-style: none;
    display: flex;
    font-weight: 300; }
    footer .opciones-footer li a {
      color: #ffffff;
      text-decoration: none;
      list-style: none;
      margin: 50px; }
      footer .opciones-footer li a:hover {
        color: gray; }

.main-remeras .camisaverde,
.main-remeras .camisarosa,
.main-remeras .camisalino,
.main-remeras .remerabasica,
.main-remeras .remerafit {
  height: 350px;
  width: 280px; }

.main-vestidos .vestilargo,
.main-vestidos .vestilanilla,
.main-vestidos .vestisaten {
  height: 350px;
  width: 280px; }

.main-jeans .jeansally,
.main-jeans .jeanwide {
  height: 350px;
  width: 280px; }

.main-buzos .buzocamio,
.main-buzos .buzocap,
.main-buzos .buzohood2 {
  height: 350px;
  width: 280px; }

.main-topsybodies .bodyliso {
  height: 350px;
  width: 280px; }

.main-preguntasfrecuentes .titulo-pregfrecuentes {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 60px;
  border-bottom: 1px solid #434343;
  font-size: 25px; }

.main-preguntasfrecuentes .seccion-pregfrecuentes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  font-size: 20px;
  align-items: center; }
  .main-preguntasfrecuentes .seccion-pregfrecuentes .titulo-pf {
    margin-bottom: 11px;
    margin-top: 20px; }
  .main-preguntasfrecuentes .seccion-pregfrecuentes .article-metodopago, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-envios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-cambios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-pedidos {
    margin-bottom: 40px;
    margin-right: 5%;
    background-color: #F4F4F4;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding: 5px 60px 30px 50px;
    margin-left: 5%; }
  .main-preguntasfrecuentes .seccion-pregfrecuentes .article-envios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-cambios {
    margin-left: 5%;
    padding: 20px 60px 45px 50px; }
  .main-preguntasfrecuentes .seccion-pregfrecuentes .article-pedidos {
    padding: 20px 60px 55px 50px; }
  .main-preguntasfrecuentes .seccion-pregfrecuentes .article-cambios {
    padding: 35px 60px 50px 50px; }

.footer-pregfrecuentes {
  margin-top: 100px; }

.footer-registrar {
  margin-top: 100px; }

.footer-contactanos {
  margin-top: 100px; }

.footer-sobrenosotros {
  margin-top: 220px; }

.main-registrar .grid-registro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  place-items: center; }
  .main-registrar .grid-registro .section-registrado {
    background-color: #F4F4F4;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
    .main-registrar .grid-registro .section-registrado h2 {
      margin-bottom: 35px;
      text-align: center;
      padding-bottom: 15px;
      border-bottom: 1px solid #434343; }
    .main-registrar .grid-registro .section-registrado .form-registrado {
      display: flex;
      flex-direction: column;
      align-items: center; }
  .main-registrar .grid-registro .section-registrarse {
    background-color: #F4F4F4;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
    .main-registrar .grid-registro .section-registrarse h2 {
      margin-bottom: 35px;
      text-align: center;
      padding-bottom: 15px;
      border-bottom: 1px solid #434343; }
    .main-registrar .grid-registro .section-registrarse .form-registrarse {
      display: flex;
      flex-direction: column;
      align-items: center; }
      .main-registrar .grid-registro .section-registrarse .form-registrarse label {
        align-self: start;
        margin-bottom: 5px; }

.main-registrar .controls {
  width: 300px;
  padding: 5px;
  margin-bottom: 16px;
  background-color: #F4F4F4; }

.main-registrar input::placeholder {
  font-size: 13px;
  font-style: oblique; }

.main-registrar .submit {
  padding: 6px;
  width: 50%;
  text-transform: uppercase;
  color: #ffffff;
  background-color: #434343; }

.main-contactanos h2 {
  text-transform: uppercase;
  font-size: 40px;
  margin-left: 100px;
  margin-bottom: 40px;
  border-bottom: 1px solid #434343;
  margin-right: 73%; }

.main-contactanos .section-contactanos {
  display: flex;
  justify-content: space-around; }
  .main-contactanos .section-contactanos .div-contactanos {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 39px;
    border: 1px solid #43434339;
    background-color: #e4e4e4b0;
    padding-right: 400px;
    margin-left: 100px; }
    .main-contactanos .section-contactanos .div-contactanos p {
      margin-bottom: 0; }
  .main-contactanos .section-contactanos .imgwpp,
  .main-contactanos .section-contactanos .imgemail,
  .main-contactanos .section-contactanos .imgubication,
  .main-contactanos .section-contactanos .f-contactanos,
  .main-contactanos .section-contactanos .i-contactanos {
    width: 30px; }

.main-contactanos .img-googlemaps {
  width: 600px;
  margin-right: 100px; }

.main-sobrenosotros h2 {
  text-transform: uppercase;
  margin-left: 100px;
  margin-bottom: 60px;
  border-bottom: 1px solid #434343;
  margin-right: 71%; }

.main-sobrenosotros .contenedor-sobrenosotros {
  background-color: #F4F4F4; }
  .main-sobrenosotros .contenedor-sobrenosotros h3 {
    margin-bottom: 30px;
    margin-left: 100px;
    text-transform: uppercase; }
    .main-sobrenosotros .contenedor-sobrenosotros h3:first-child {
      font-weight: bold; }

header {
  /*la barra de navegacion*/ }
  header .dropdown-menu {
    background-color: #F4F4F4; }
  header .container-fluid {
    gap: 25%; }
  header .navbar-brand {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal; }
  header h1 {
    font-size: 50px;
    font-weight: 400; }
  header .navbar-nav {
    font-size: 16px;
    gap: 40px; }
  header .carritodecompras,
  header .persona-index {
    width: 25px; }

@media (max-width: 1024px) and (max-width: 1024px) {
  header .header-input {
    display: none; }
  .main-index .f-p {
    background-image: url(../assets/img/fondodektops.jpg);
    height: 450px;
    background-repeat: no-repeat; }
  .main-index .header-input {
    display: none; }
  .main-index .remera-produ,
  .main-index .buzo-produ,
  .main-index .jean-produ,
  .main-index .vestido-produ {
    width: 250px; }
  .main-index .contenedor-productos .nombres-productos {
    width: auto; }
  .main-index .contenedor-productos2 .buzos-desta,
  .main-index .contenedor-productos2 .camisa-desta,
  .main-index .contenedor-productos2 .jean-desta,
  .main-index .contenedor-productos2 .body-desta,
  .main-index .contenedor-productos2 .vestido-desta {
    width: 250px;
    height: 300px; }
  footer {
    display: flex;
    flex-direction: row; }
    footer .opciones-footer {
      display: flex;
      flex-direction: column; } }

@media (max-width: 1024px) {
  /*pages*/
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr; }
  /*contactanos*/
  .main-contactanos h2 {
    font-size: 32px;
    margin-right: 74%;
    margin-left: 20px; }
  .main-contactanos .section-contactanos .div-contactanos {
    padding-right: 100px;
    margin-left: 0; }
  .main-contactanos .img-googlemaps {
    width: 550px;
    margin-right: 0; }
  /*sobre nosotros*/
  .main-sobrenosotros h2 {
    margin-right: 60%; } }

@media (max-width: 768px) and (max-width: 768px) {
  header .navbar-nav {
    font-size: 16px;
    gap: 10px; }
  header .dropdown-menu {
    background-color: #F4F4F4; }
  header .persona-index,
  header .carritodecompras {
    width: 30px; }
  .main-index .f-p {
    background-image: url(../assets/img/fondotablet.jpg);
    background-position: right;
    height: 350px; }
  .main-index .contenedor-productos {
    gap: 50px; }
  .main-index .productos-destacados h2 {
    font-size: 24px;
    padding: 2px;
    margin-bottom: 0; }
  .main-index .contenedor-productos2 {
    gap: 10px;
    place-items: center; }
  /*paginas*/
  .grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 50px; }
  .section-titulos {
    text-align: center; }
  /*contactanos*/
  .main-contactanos h2 {
    font-size: 24px;
    margin-right: 38%;
    margin-left: 38%; }
  .main-contactanos .section-contactanos {
    flex-direction: column; }
  .main-contactanos .img-googlemaps {
    width: 770px;
    margin-right: 0; }
  /*preguntas frecuentes*/
  .titulo-pregfrecuentes {
    font-size: 20px; }
  .article-envios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-cambios {
    padding: 10px 60px 24px 50px; }
  .article-pedidos {
    padding: 20px 60px 35px 50px; }
  /*sobre nosotros*/
  .main-sobrenosotros h2 {
    font-size: 24px;
    margin-right: 55%; }
  .main-sobrenosotros h3 {
    font-size: 24px; } }

@media (max-width: 426px) and (max-width: 426px) {
  .main-index .f-p {
    background-image: url(../assets/img/fotoparamovil.jpg);
    height: 250px;
    background-position: top; }
  .main-index .contenedor-productos {
    display: flex;
    gap: 20px;
    margin-bottom: 0; }
  .main-index .productos-destacados {
    margin-top: 30px; }
    .main-index .productos-destacados h2 {
      font-size: 16px; }
  .main-index .contenedor-productos2 .buzos-desta,
  .main-index .contenedor-productos2 .camisa-desta,
  .main-index .contenedor-productos2 .jean-desta,
  .main-index .contenedor-productos2 .body-desta,
  .main-index .contenedor-productos2 .vestido-desta {
    width: 150px;
    height: 200px; }
  footer .opciones-footer {
    text-align: center;
    padding-left: 0; }
  footer .f-fc,
  footer .f-ig {
    width: 40px; }
  /*pages*/
  .main-remeras .camisaverde, .main-remeras .camisarosa, .main-remeras .camisalino, .main-remeras .remerabasica, .main-remeras .remerafit, .main-remeras .camisacrepe {
    width: 150px;
    height: 200px; }
  .main-vestidos .vestilargo,
  .main-vestidos .vestilanilla,
  .main-vestidos .vestisaten {
    width: 150px;
    height: 200px; }
  .main-jeans .jeansally, .main-jeans .jeanwide, .main-jeans .jean-mom {
    width: 150px;
    height: 200px; }
  .main-buzos .buzocamio, .main-buzos .buzo-rustico, .main-buzos .buzored, .main-buzos .buzohood2 {
    width: 150px;
    height: 200px; }
  .main-topsybodies .bodyliso, .main-topsybodies .topelasticos {
    width: 150px;
    height: 200px; }
  .remeras,
  .vestidos,
  .div-jeans,
  .div-buzos,
  .precio,
  .topybodies {
    font-size: 12px; }
  button a {
    font-size: 12px; }
  /*contactanos*/
  .main-contactanos .section-contactanos {
    display: flex;
    flex-direction: column; }
    .main-contactanos .section-contactanos .div-contactanos {
      padding: 20px; }
  .main-contactanos h2 {
    font-size: 16px;
    margin-right: 33%; }
  .main-contactanos .img-googlemaps {
    width: 425px; }
  /*preguntas frecuentes*/
  .main-preguntasfrecuentes .titulo-pregfrecuentes {
    font-size: 16px; }
  .main-preguntasfrecuentes .seccion-pregfrecuentes {
    display: flex;
    flex-direction: column;
    font-size: 16px; }
    .main-preguntasfrecuentes .seccion-pregfrecuentes .article-cambios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-envios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-cambios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-metodopago, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-envios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-cambios, .main-preguntasfrecuentes .seccion-pregfrecuentes .article-pedidos,
    .main-preguntasfrecuentes .seccion-pregfrecuentes .article-pedidos {
      padding: 5px 60px 30px 50px; }
  /*registro*/
  .main-registrar .grid-registro {
    display: flex;
    flex-direction: column;
    gap: 30px; }
  /*sobre nosotros*/
  .main-sobrenosotros h2 {
    font-size: 16px;
    margin-right: 55%;
    margin-left: 35px; }
  .main-sobrenosotros .contenedor-sobrenosotros h3 {
    font-size: 16px;
    margin-left: 35px; } }

@media (max-width: 376px) and (max-width: 376px) {
  .grid {
    gap: 15px; }
  .main-contactanos h2 {
    margin-right: 28%; }
  .main-contactanos .img-googlemaps {
    width: 375px; }
  .main-index .contenedor-productos {
    display: flex;
    flex-direction: column;
    gap: 20px;
    place-items: center; }
  footer .opciones-footer li a {
    margin: 0; }
  /*sobre nosotros*/
  .main-sobrenosotros h2 {
    font-size: 16px;
    margin-right: 55%;
    margin-left: 10px; }
  .main-sobrenosotros .contenedor-sobrenosotros h3 {
    font-size: 16px;
    margin-left: 10px; } }

@media (max-width: 321px) and (max-width: 321px) {
  header h1 {
    font-size: 35px; }
  .main-index .contenedor-productos {
    place-items: center;
    margin-bottom: 30px; }
    .main-index .contenedor-productos .titulos-productos {
      font-size: 12px; }
    .main-index .contenedor-productos .nombres-productos {
      padding: 1px; }
  .main-index .productos-destacados h2 {
    font-size: 16px;
    padding: 0; }
  .main-index .contenedor-productos2 {
    justify-content: center; }
  /*pages*/
  .section-titulos h2 {
    font-size: 16px; }
  .grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    place-items: center; }
  .main-remeras .camisaverde, .main-remeras .camisarosa, .main-remeras .camisalino, .main-remeras .remerabasica, .main-remeras .remerafit, .main-remeras .camisacrepe {
    height: 230px;
    width: 180px; }
  /*contactanos*/
  .main-contactanos h2 {
    margin-right: 30%;
    margin-left: 30%; }
  .main-contactanos .section-contactanos .div-contactanos {
    padding: 10px; }
  .main-contactanos .img-googlemaps {
    width: 320px; }
  .opciones-footer li a {
    margin: 15px; }
  /*registro*/
  .main-registrar .grid-registro {
    display: flex;
    align-items: stretch; }
  .submit {
    font-size: 15px; }
  /*preguntas frecuentes*/
  .titulo-pregfrecuentes {
    font-size: 13px; }
  /*sobre nosotros*/
  .main-sobrenosotros h2 {
    font-size: 16px;
    margin-right: 48%;
    margin-left: 5px; }
  .main-sobrenosotros .contenedor-sobrenosotros h3 {
    font-size: 16px;
    margin-left: 5px; }
  footer {
    height: auto;
    flex-wrap: wrap; } }