* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

ul {
  list-style: none; }

a {
  text-decoration: none; }

input {
  outline: none; }

span {
  font-weight: bold; }

header {
  background-color: #0e0e0e;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: normal; }
  header nav {
    justify-content: space-between; }
    header nav div a img {
      width: 148px; }
    header nav div div ul li a {
      color: #f6f5e9; }
      header nav div div ul li a:hover {
        color: #FFB400 !important; }

main {
  background-color: #f6f5e9;
  color: #0e0e0e;
  font-family: 'Inter', sans-serif; }
  main .primerImagen {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    background-image: url(../img/inicio.jpg);
    background-repeat: no-repeat;
    height: 850px;
    flex-direction: column;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }
    main .primerImagen h1 {
      font-size: 140px;
      color: #f6f5e9;
      font-style: normal;
      font-family: 'Belleza', sans-serif; }
    main .primerImagen p {
      margin-top: -19px;
      margin-bottom: 50px;
      color: #f6f5e9a2;
      font-size: 25px;
      font-weight: 340; }
  main .presentacionFragancias .primerDiv {
    display: grid;
    width: 100%;
    grid-template-rows: auto;
    grid-template-columns: 1fr 500px;
    grid-template-areas: "primerTexto primerFoto";
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center; }
    main .presentacionFragancias .primerDiv .primerTexto {
      text-align: justify;
      font-size: 30px;
      padding: 0px 150px 0px 150px; }
  main .presentacionFragancias .segundoDiv {
    display: grid;
    width: 100%;
    grid-template-rows: auto;
    grid-template-columns: 500px 1fr;
    grid-template-areas: "segundaFoto segundoTexto";
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }
    main .presentacionFragancias .segundoDiv .segundoTexto {
      text-align: justify;
      font-size: 30px;
      padding: 0px 150px 0px 150px;
      display: flex;
      align-self: center; }
  main .presentacionFragancias .fraganciasInicio {
    width: 500px; }
  main .titulo {
    font-size: 40px;
    text-align: center;
    font-style: italic;
    margin: 0px;
    padding: 8px 0px 8px 0px; }
  main .newCollection {
    display: flex;
    justify-content: center;
    align-items: center; }
    main .newCollection img {
      width: 1200px;
      margin-bottom: 20px; }
  main .fragancias {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "men ocean sunset night"; }
    main .fragancias .divPerfumes {
      width: 440px;
      height: auto;
      border: 2px #0e0e0e solid;
      margin: 16px 0px 16px 0px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      justify-self: center;
      box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }
      main .fragancias .divPerfumes h2 {
        margin: 5px; }
      main .fragancias .divPerfumes .perfumes {
        margin: 1px;
        width: 400px; }
      main .fragancias .divPerfumes a {
        background-color: #32dd32;
        color: #0e0e0e;
        font-size: 21px;
        padding: 8px;
        margin: 8px;
        transition: 300ms; }
        main .fragancias .divPerfumes a:hover {
          background-color: #26ff26;
          color: #0e0e0e; }
      main .fragancias .divPerfumes p {
        text-align: justify;
        width: 400px; }
    main .fragancias .men, main .fragancias .night, main .fragancias .goldMin {
      position: relative; }
    main .fragancias .new {
      position: absolute;
      top: 20px;
      right: 0; }
    main .fragancias .goldMin {
      display: none; }
  main .gold {
    margin-top: 50px;
    padding-bottom: 50px;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    main .gold h2 {
      font-size: 70px;
      font-style: bold;
      margin: 0px;
      padding: 8px 0px 8px 0px; }
    main .gold img {
      width: 1300px; }
    main .gold div {
      width: 1300px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 20px; }
    main .gold a {
      color: #0e0e0e;
      transition: 300ms; }
      main .gold a:hover {
        color: #FFB400; }
  main .texto {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: justify;
    padding-bottom: 20px; }
    main .texto .textoPre {
      width: 1100px; }
    main .texto div {
      width: 1100px; }
      main .texto div p {
        font-size: 24px; }
  main .formularioContacto {
    padding-bottom: 20px; }
    main .formularioContacto .card {
      background-color: #f6f5e9;
      border: #0e0e0e solid 2px; }
      main .formularioContacto .card div form div .btn {
        border: #0e0e0e solid 2px;
        color: #0e0e0e; }
        main .formularioContacto .card div form div .btn:hover {
          background-color: #0e0e0e;
          color: #f6f5e9; }
  main .accordion {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 45px; }
    main .accordion .accordion-item {
      width: 1100px;
      background-color: #f6f5e9; }
      main .accordion .accordion-item .accordion-header .accordion-button {
        font-size: 26px;
        font-weight: bold;
        background-color: #f6f5e9;
        color: #0e0e0e; }
      main .accordion .accordion-item .accordion-collapse {
        background-color: #f6f5e9;
        color: #0e0e0e; }
        main .accordion .accordion-item .accordion-collapse .accordion-body {
          font-size: 22px;
          font-weight: normal;
          text-align: justify;
          background-color: #f6f5e9;
          color: #0e0e0e; }
          main .accordion .accordion-item .accordion-collapse .accordion-body ul li {
            list-style: disc; }

footer {
  padding-top: 50px;
  padding-bottom: 50px;
  font-family: 'Inter', sans-serif;
  color: #f6f5e9;
  font-size: 20px;
  background-color: #0e0e0e;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "navFooter redesSociales extra";
  place-items: start center; }
  footer .navFooter .tituloFooter, footer .redesSociales .tituloFooter, footer .extra .tituloFooter {
    color: #f6f5e9;
    margin-bottom: 8px; }
  footer .navFooter li a, footer .redesSociales li a, footer .extra li a {
    color: #a0a0a0;
    transition: 330ms; }
    footer .navFooter li a:hover, footer .redesSociales li a:hover, footer .extra li a:hover {
      color: #f6f5e9;
      font-size: 20.4px; }

@media screen and (max-width: 1800px) {
  main .fragancias {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat 2, 1fr;
    grid-template-areas: "men ocean"
 "sunset night"; } }

@media screen and (max-width: 1500px) {
  main .newCollection img {
    width: 1000px; }
  main .gold img {
    width: 1000px; }
  main .gold div {
    width: 1000px; } }

@media screen and (max-width: 1420px) {
  main .texto p {
    width: 1000px; }
  main .texto .textoPre {
    width: 1000px; }
  main .texto div {
    width: 1000px; }
    main .texto div p {
      width: 1000px; } }

@media screen and (max-width: 1300px) {
  main .presentacionFragancias .primerDiv .primerTexto {
    font-size: 30px;
    padding: 0px 100px 0px 100px; }
  main .presentacionFragancias .segundoDiv .segundoTexto {
    font-size: 30px;
    padding: 0px 100px 0px 100px; } }

@media screen and (max-width: 1180px) {
  main .accordion .accordion-item {
    width: 900px; } }

@media screen and (max-width: 1170px) {
  main .newCollection img {
    width: 900px; }
  main .fragancias .divPerfumes {
    width: 360px; }
    main .fragancias .divPerfumes a {
      font-size: 18px; }
    main .fragancias .divPerfumes p {
      width: 300px; }
    main .fragancias .divPerfumes .perfumes {
      width: 300px; }
  main .gold {
    margin-top: 20px;
    padding-bottom: 20px; }
    main .gold img {
      width: 900px; }
    main .gold div {
      width: 900px; } }

@media screen and (max-width: 1150px) {
  main .titulo {
    font-size: 30px; }
  main .texto .titulo {
    font-size: 30px; }
  main .presentacionFragancias .primerDiv {
    grid-template-columns: 1fr 300px; }
    main .presentacionFragancias .primerDiv img {
      width: 300px; }
    main .presentacionFragancias .primerDiv .primerTexto {
      font-size: 26px;
      padding: 0px 80px 0px 80px; }
  main .presentacionFragancias .segundoDiv {
    grid-template-columns: 300px 1fr; }
    main .presentacionFragancias .segundoDiv img {
      width: 300px; }
    main .presentacionFragancias .segundoDiv .segundoTexto {
      font-size: 26px;
      padding: 0px 80px 0px 80px; }
  main .texto div {
    width: 900px; }
    main .texto div p {
      font-size: 18px;
      width: 900px; } }

@media screen and (max-width: 1050px) {
  main .texto p {
    width: 880px; }
  main .texto div p {
    width: 880px; }
  main .texto .textoPre {
    width: 900px; } }

@media screen and (max-width: 1000px) {
  main .accordion .accordion-item {
    width: 750px; }
    main .accordion .accordion-item .collapse .accordion-body {
      font-size: 18px; } }

@media screen and (max-width: 991px) {
  main .primerImagen {
    height: 500px;
    width: auto; }
    main .primerImagen h2 {
      font-size: 100px; }
    main .primerImagen p {
      font-size: 20px; }
  main .presentacionFragancias .primerDiv {
    grid-template-columns: 1fr 250px; }
    main .presentacionFragancias .primerDiv img {
      width: 250px; }
    main .presentacionFragancias .primerDiv .primerTexto {
      font-size: 22px;
      padding: 0px 60px 0px 60px; }
  main .presentacionFragancias .segundoDiv {
    grid-template-columns: 250px 1fr; }
    main .presentacionFragancias .segundoDiv img {
      width: 250px; }
    main .presentacionFragancias .segundoDiv .segundoTexto {
      font-size: 22px;
      padding: 0px 60px 0px 60px; }
  main .texto div {
    width: 870px; }
    main .texto div p {
      font-size: 16px; }
  footer {
    font-size: 15px; } }

@media screen and (max-width: 960px) {
  main .texto h3 {
    font-size: 20px; }
  main .texto p {
    width: 700px; }
  main .texto .textoPre {
    width: 700px; } }

@media screen and (max-width: 950px) {
  main .newCollection img {
    width: 800px; }
  main .fragancias .divPerfumes {
    width: 350px; }
    main .fragancias .divPerfumes p {
      width: 290px; }
    main .fragancias .divPerfumes .perfumes {
      width: 290px; }
  main .gold {
    margin-top: 15px;
    padding-bottom: 15px; }
    main .gold img {
      width: 800px; }
    main .gold div {
      width: 800px; }
  main .texto div {
    width: 840px; }
    main .texto div p {
      font-size: 16px;
      width: 840px; } }

@media screen and (max-width: 900px) {
  main .texto .titulo {
    font-size: 22px; }
  main .texto div {
    width: 800px; }
    main .texto div .titulo {
      font-size: 22px; }
    main .texto div p {
      width: 800px; } }

@media screen and (max-width: 850px) {
  main .newCollection img {
    width: 700px; }
  main .fragancias {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "men"
 "ocean"
 "sunset"
 "night"; }
    main .fragancias .divPerfumes {
      width: 340px; }
      main .fragancias .divPerfumes p {
        width: 280px; }
      main .fragancias .divPerfumes .perfumes {
        width: 280px; }
  main .gold {
    margin-top: 11px;
    padding-bottom: 11px; }
    main .gold img {
      width: 700px; }
    main .gold div {
      width: 700px; } }

@media screen and (max-width: 820px) {
  main .texto div {
    width: 700px; }
    main .texto div p {
      font-size: 15px;
      width: 700px; } }

@media screen and (max-width: 800px) {
  header {
    font-size: 15px; }
    header nav div a img {
      width: 120px; }
  main .accordion .accordion-item {
    width: 600px; }
    main .accordion .accordion-item .collapse .accordion-body {
      font-size: 16px; }
  main .presentacionFragancias .primerDiv {
    grid-template-columns: 1fr 200px; }
    main .presentacionFragancias .primerDiv .primerTexto {
      font-size: 18px;
      padding: 0px 50px 0px 50px; }
    main .presentacionFragancias .primerDiv img {
      width: 200px; }
  main .presentacionFragancias .segundoDiv {
    grid-template-columns: 200px 1fr; }
    main .presentacionFragancias .segundoDiv .segundoTexto {
      font-size: 18px;
      padding: 0px 50px 0px 50px; }
    main .presentacionFragancias .segundoDiv img {
      width: 200px; } }

@media screen and (max-width: 785px) {
  main .texto p {
    width: 550px; }
  main .texto .textoPre {
    width: 550px; } }

@media screen and (max-width: 750px) {
  main .newCollection img {
    width: 500px; }
  main .gold {
    margin-top: 8px;
    padding-bottom: 8px; }
    main .gold h3 {
      font-size: 40px; }
    main .gold img {
      width: 500px; }
    main .gold div {
      width: 500px; }
      main .gold div p {
        font-size: 15px; } }

@media screen and (max-width: 720px) {
  main .texto div {
    width: 550px; }
    main .texto div p {
      width: 550px; } }

@media screen and (max-width: 700px) {
  main .primerImagen {
    background-image: none;
    height: 400px; }
    main .primerImagen h1 {
      font-size: 80px; }
    main .primerImagen p {
      font-size: 18px;
      margin-bottom: 0px; }
  main .presentacionFragancias .primerDiv {
    grid-template-columns: 1fr 200px; }
    main .presentacionFragancias .primerDiv .primerTexto {
      font-size: 15px;
      padding: 0px 40px 0px 40px; }
    main .presentacionFragancias .primerDiv img {
      width: 200px; }
  main .presentacionFragancias .segundoDiv {
    grid-template-columns: 200px 1fr; }
    main .presentacionFragancias .segundoDiv .segundoTexto {
      font-size: 15px;
      padding: 0px 40px 0px 40px; }
    main .presentacionFragancias .segundoDiv img {
      width: 200px; } }

@media screen and (max-width: 630px) {
  main .accordion .accordion-item {
    width: 500px; }
    main .accordion .accordion-item .accordion-header .accordion-button {
      font-size: 22px; }
    main .accordion .accordion-item .collapse .accordion-body {
      font-size: 15px; } }

@media screen and (max-width: 585px) {
  main .texto p {
    width: 400px; }
  main .texto .textoPre {
    width: 400px; } }

@media screen and (max-width: 580px) {
  main .texto div {
    width: 450px; }
    main .texto div p {
      font-size: 14px;
      width: 450px; } }

@media screen and (max-width: 550px) {
  main .primerImagen {
    height: 200px; }
    main .primerImagen h1 {
      font-size: 50px; }
    main .primerImagen p {
      font-size: 12px; }
  main .presentacionFragancias .primerDiv {
    grid-template-columns: 1fr 150px; }
    main .presentacionFragancias .primerDiv .primerTexto {
      font-size: 12px;
      padding: 0px 20px 0px 20px; }
    main .presentacionFragancias .primerDiv img {
      width: 150px; }
  main .presentacionFragancias .segundoDiv {
    grid-template-columns: 150px 1fr; }
    main .presentacionFragancias .segundoDiv .segundoTexto {
      font-size: 12px;
      padding: 0px 20px 0px 20px; }
    main .presentacionFragancias .segundoDiv img {
      width: 150px; } }

@media screen and (max-width: 520px) {
  main .accordion .accordion-item {
    width: 380px; }
    main .accordion .accordion-item .accordion-header .accordion-button {
      font-size: 20px; }
    main .accordion .accordion-item div .accordion-body {
      font-size: 14px; }
  main .newCollection {
    display: none; }
  main .fragancias .divPerfumes {
    box-shadow: none; }
  main .fragancias .goldMin {
    display: inline-flex; }
  main .gold {
    display: none; } }

@media screen and (max-width: 480px) {
  main .texto div {
    width: 400px; }
    main .texto div p {
      font-size: 16px;
      width: 400px; } }

@media screen and (max-width: 450px) {
  header {
    font-size: 12px; }
    header nav div a img {
      width: 100px; }
  main .texto p {
    width: 340px; }
  main .texto .textoPre {
    width: 340px; }
  main .accordion .accordion-item {
    width: 340px; }
    main .accordion .accordion-item .accordion-header .accordion-button {
      font-size: 16px; }
    main .accordion .accordion-item div .accordion-body {
      font-size: 12px; }
  main .primerImagen {
    height: 120px; }
    main .primerImagen h1 {
      font-size: 40px; }
    main .primerImagen p {
      font-size: 9px;
      margin-top: -10px; }
  main .presentacionFragancias .primerDiv {
    grid-template-columns: 1fr 120px; }
    main .presentacionFragancias .primerDiv .primerTexto {
      font-size: 10px;
      padding: 0px 16px 0px 16px; }
    main .presentacionFragancias .primerDiv img {
      width: 120px; }
  main .presentacionFragancias .segundoDiv {
    grid-template-columns: 120px 1fr; }
    main .presentacionFragancias .segundoDiv .segundoTexto {
      font-size: 10px;
      padding: 0px 16px 0px 16px; }
    main .presentacionFragancias .segundoDiv img {
      width: 120px; }
  main .fragancias .divPerfumes {
    width: 330px; }
    main .fragancias .divPerfumes a {
      font-size: 14px; }
    main .fragancias .divPerfumes p {
      width: 260px; }
    main .fragancias .divPerfumes .perfumes {
      width: 260px; }
  footer {
    font-size: 10px; } }

@media screen and (max-width: 430px) {
  main .texto div {
    width: 300px; }
    main .texto div p {
      font-size: 18px;
      width: 300px; } }

@media screen and (max-width: 400px) {
  header {
    font-size: 10px; }
    header nav div a img {
      width: 90px; }
  main .primerImagen {
    height: 100px; }
    main .primerImagen h1 {
      font-size: 35px; }
    main .primerImagen p {
      font-size: 7px;
      margin-bottom: 0px;
      margin-top: -12px; }
  main .presentacionFragancias .primerDiv .primerTexto {
    font-size: 10px;
    padding: 0px 16px 0px 16px; }
  main .presentacionFragancias .segundoDiv .segundoTexto {
    font-size: 10px;
    padding: 0px 16px 0px 16px; }
  main .texto div {
    margin: 0px;
    width: 290px; }
    main .texto div p {
      font-size: 14px; } }