@charset "UTF-8";
/* VARIABLES */
/* MAP */
.form__divBotones--reset {
  border-radius: 100px 20px 100px 150px; }

.form__divBotones--submit {
  border-radius: 20px 100px 150px; }

/* MAP GET */
/* MIXIN */
/* RESETEO CSS */
:root {
  --bs-link-color: inherit;
  --bs-link-hover-color: inherit; }

/* Quite el color azul de Bootstrap en los links */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box; }

html {
  font-size: 100%;
  line-height: 1.4; }

img, picture, video, iframe, figure {
  max-width: 100%;
  height: auto; }

p {
  margin-bottom: 0; }

/* Quita un margen inferior que da Bootstrap en algunos P como links */
ul, ol {
  list-style: none; }

a {
  text-decoration: none; }

form, input, textarea, select, button, label {
  font-family: inherit;
  font-size: inherit;
  hyphens: auto;
  color: inherit; }

/* ESTRUCTURA BASICA GENERAL */
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  background: linear-gradient(135deg, #21002e, #710085);
  color: whitesmoke;
  font-size: calc(0.8rem + 1vw);
  min-height: 100vh; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-style: italic; }

::selection {
  background-color: #660073; }

/* Modifica el color por defecto al seleccionar el texto */
/* LAYOUT GENERAL*/
.all__body--flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between; }

/* Flex para acomodar los hijos del body */
/* HEADER */
.header {
  background-color: #27004b;
  font-weight: 500;
  /* Logo de Shine */ }
  .header__logo {
    width: 30%;
    max-width: 150px; }
    .header__logo--borde {
      border-radius: 100px 20px; }
  .header__titulo--menu {
    font-size: calc(2rem + 1vw); }
  .header__li {
    font-size: calc(1.5rem + 1vw); }
    .header__li:hover {
      background-color: #660073;
      padding: 0 0.5rem;
      transition: 0.5s; }

/* MAIN GENERAL */
.main__div--color, .main__div--losAngeles, .main__div--puertoRico, .main__div--newYork, .main__div--chicago, .main__div--broadway {
  background: linear-gradient(135deg, #710085, #21002e);
  width: 90%;
  text-align: center;
  padding: 1rem;
  margin: 1.5rem; }

/* Fondo de color para divs dentro del main */
.main__div--flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: space-evenly;
  align-content: space-around; }

.main__h1 {
  background-color: #660073;
  font-size: calc(1.5rem + 1.5vw);
  grid-area: main__h1;
  margin-top: 2rem;
  padding: 1rem 2rem;
  justify-self: stretch; }

.main__h2 {
  text-align: center;
  font-size: calc(1.5rem + 1.5vw);
  margin: 1rem; }

.palabraDestacada {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-shadow: 1px 1px 3px black;
  font-style: italic; }

/* SECTION / ARTICLE */
section,
article {
  text-align: center;
  align-self: center;
  width: fit-content;
  font-style: italic;
  margin: 1rem 1rem 2rem; }

section {
  font-family: "Indie Flower", cursiva;
  font-size: calc(1.5rem + 1vw);
  text-shadow: 2px 2px 5px gold;
  grid-area: section;
  font-weight: bold; }

article {
  border: 0.5rem dashed #27004b;
  background-color: #660073;
  padding: 0.5rem;
  font-size: calc(1rem + 1vw);
  grid-area: article; }
  article span {
    text-decoration: underline; }

/* FOOTER */
footer {
  padding: 1.2rem;
  background-color: #27004b;
  text-align: center;
  overflow: hidden; }
  footer span {
    font-weight: bold;
    font-style: italic; }
  footer p:hover {
    transform: scale(1.1, 1.1);
    text-shadow: 3px 3px 3px black;
    transition: 0.5s; }
  footer .logoWhatsappFooter {
    width: 1.5em;
    margin: 0 0.5rem 0.25rem;
    filter: invert(0.9);
    /* invierte colores del icono, valores de 0 - 1 */ }

/* LAYOUT INDEX */
.index__main--layout {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-row-gap: 1rem;
  grid-template-areas: "main__h1"
 "div__presentacion"
 "main__img--inicio";
  justify-items: center;
  align-items: center; }

/* Layout del main del index */
/* MAIN - INDEX */
.div__presentacion {
  grid-area: div__presentacion;
  text-align: justify;
  margin: 1rem 0;
  font-weight: 300; }
  .div__presentacion--p {
    margin-left: 1.5rem;
    margin-right: 1.5rem; }
  .div__presentacion--ul {
    margin-left: 2rem;
    margin-right: 2rem; }
  .div__presentacion--li {
    margin: 1rem 0; }
    .div__presentacion--li::before {
      content: " ";
      display: inline-block;
      width: 1.5rem;
      height: 1.5rem;
      background-image: url(../multimedia/icono_estrella.png);
      /* Icono de las viñetas de lista en Index */
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      filter: invert(0.9);
      /* invierte colores del icono, valores de 0 - 1 */
      margin-right: 0.3rem; }
  .div__presentacion--ubicacion {
    margin-top: 2rem; }
  .div__presentacion span {
    font-style: italic; }

.main__img--inicio {
  width: 70%;
  max-width: 600px;
  grid-area: main__img--inicio;
  margin: 1rem;
  background-image: url(../multimedia/accesorios_baile_background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* Index img animada */ }
  .main__img--inicio img {
    animation-name: imgInicio;
    animation-duration: 25s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

@keyframes imgInicio {
  0% {
    filter: opacity(1); }
  5% {
    filter: opacity(1); }
  10% {
    filter: opacity(1); }
  15% {
    filter: opacity(1); }
  20% {
    filter: opacity(0.75); }
  25% {
    filter: opacity(0.5); }
  30% {
    filter: opacity(0.25); }
  35% {
    filter: opacity(0); }
  40% {
    filter: opacity(0); }
  45% {
    filter: opacity(0); }
  50% {
    filter: opacity(0); }
  55% {
    filter: opacity(0); }
  60% {
    filter: opacity(0); }
  65% {
    filter: opacity(0); }
  70% {
    filter: opacity(0.25); }
  75% {
    filter: opacity(0.5); }
  80% {
    filter: opacity(0.75); }
  85% {
    filter: opacity(1); }
  90% {
    filter: opacity(1); }
  95% {
    filter: opacity(1); }
  100% {
    filter: opacity(1); } }

/* Animacion index */
/* LAYOUT CALZADO */
.calzado__main--layout {
  display: grid;
  grid-template-rows: repeat(6, auto);
  grid-row-gap: 1rem;
  grid-template-areas: "main__h1"
 "main__div--losAngeles"
 "main__div--puertoRico"
 "main__div--newYork"
 "main__div--chicago"
 "main__div--broadway";
  justify-items: center;
  align-items: center; }

/* Layout del main de calzado */
/* MAIN - CALZADO */
.main__div--losAngeles {
  grid-area: main__div--losAngeles;
  max-width: 500px; }

/* Sandalias los Angeles (negras) */
.main__div--puertoRico {
  grid-area: main__div--puertoRico;
  max-width: 500px; }

/* Sandalias puerto rico (camel) */
.main__div--newYork {
  grid-area: main__div--newYork;
  max-width: 500px; }

/* Zapatos hombre new york */
.main__div--chicago {
  grid-area: main__div--chicago;
  max-width: 500px; }

/* Botitas chicago */
.main__div--broadway {
  grid-area: main__div--broadway;
  max-width: 500px; }

/* Sandalias decoradas broadway linea glamm */
.main__img--calzado {
  width: 60vw;
  max-width: 350px;
  margin-bottom: 3rem; }

.textoBroadway {
  font-size: calc(1rem + 1vw);
  margin-top: -2rem;
  padding-bottom: 2.5rem; }

#indicadoresBroadway {
  margin-top: -1rem; }

/* LAYOUT AROS Y APLIQUES */
.aros__main--layout {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-row-gap: 1rem;
  grid-template-areas: "main__h1"
 "main__div--aros"
 "main__div--apliques";
  justify-items: center;
  align-items: center; }

/* Layout del main de aros y apliques */
/* MAIN - AROS Y APLIQUES */
.main__div--aros {
  grid-area: main__div--aros; }

.main__div--apliques {
  grid-area: main__div--apliques; }

.div__arosApliques {
  text-align: center;
  /* contenedor color figure - figcaption (card) */
  /* Tamaño de img y tamaño maximo la imagen escala sin ser cortada para que pueda ajustarse */ }
  .div__arosApliques--background {
    background-color: rgba(0, 0, 0, 0.7);
    width: 40%;
    max-width: 12rem;
    height: 60vw;
    max-height: 300px;
    padding: 0 0.5rem;
    padding-bottom: 0.8rem;
    margin: 1rem 0.5rem;
    text-shadow: 1px 1px 5px #ffe134;
    border-radius: 5px; }
  .div__arosApliques--img {
    width: 90%;
    height: 50vw;
    max-height: 250px;
    object-fit: contain; }
  .div__arosApliques--figcaption {
    margin-top: -0.5rem; }

/* LAYOUT OTROS PRODUCTOS */
.productos__main--layout {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-row-gap: 1rem;
  grid-template-areas: "main__h1"
 "divDecoracionCristales"
 "divPack"
 "pgs__gridArea";
  justify-items: center;
  align-items: center; }

/* Layout del main de otros productos y servicios */
/* MAIN - OTROS PORDUCTOS Y SERVICIOS */
.divDecoracionCristales {
  grid-area: divDecoracionCristales;
  width: 80vw; }
  .divDecoracionCristales__h3 {
    font-size: calc(1.2rem + 1.5vw);
    text-shadow: 1px 1px 5px #ffe134; }
  .divDecoracionCristales__img {
    margin: 1.5rem;
    padding: 0;
    width: auto;
    height: 50vw;
    max-height: 300px; }

.divPack {
  grid-area: divPack;
  text-align: center;
  width: 80vw;
  max-width: 500px;
  /* Contenedor del producto pack */ }
  .divPack__img {
    margin: 0 2rem;
    width: 50vw;
    max-width: 350px;
    height: auto; }
  .divPack ul {
    margin: 1rem 0 0 0;
    padding: 0; }

.div__pgs--grupal {
  grid-area: pgs__gridArea;
  /* Contenedor individual pestañas, glitter y strass */ }
  .div__pgs--grupal .pgs__individual {
    width: 80vw;
    max-width: 450px;
    text-align: center; }
    .div__pgs--grupal .pgs__individual--img {
      height: 60vw;
      max-height: 350px;
      width: auto;
      max-width: 90%;
      object-fit: cover; }
    .div__pgs--grupal .pgs__individual figcaption {
      width: 50vw;
      max-width: 300px;
      margin: 1rem auto 0;
      font-weight: 300; }

/* Contenedor grupal pestañas, glitter y strass */
/* LAYOUT CONTACTO */
.contacto__main--layout {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  min-height: 80vh;
  font-size: calc(0.8em + 1vw); }

/* Layout del main de cntacto */
/* MAIN - CONTACTO */
.textoEncabezadoContacto {
  font-size: calc(1em + 1vw);
  margin: 1rem 1rem;
  align-self: center; }

.contacto {
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-items: left;
  align-items: center;
  align-self: center; }
  .contacto__logo {
    margin: 1rem;
    width: 2.5em;
    filter: invert(0.9);
    /* invierte colores del icono, valores de 0 - 1 */ }
  .contacto__texto {
    margin: 0.5rem;
    padding: 0.5rem 0.25rem 0; }
    .contacto__texto--cursor {
      cursor: pointer; }

/* Subrayado con animacion de redes sociales */
.fancy__undeline {
  background-repeat: no-repeat;
  background-size: 100% 0.3em;
  background-position: 0 90%;
  transition: background-size 0.25s ease-in; }
  .fancy__undeline--face {
    background-image: linear-gradient(120deg, #77A1D3, #79CBCA, #E684AE 100%); }
    .fancy__undeline--face:hover {
      background-size: 100% 88% !important; }
  .fancy__undeline--insta {
    background-image: linear-gradient(120deg, #DA22FF, #9733EE 100%); }
    .fancy__undeline--insta:hover {
      background-size: 100% 88% !important; }
  .fancy__undeline--whats {
    background-image: linear-gradient(120deg, #16A085, #F4D03F 100%); }
    .fancy__undeline--whats:hover {
      background-size: 100% 88% !important; }

.containerFace {
  margin-bottom: 2rem; }

/* MEDIA QUERIES */
@media screen and (min-width: 481px) and (orientation: landscape) {
  .index__main--layout {
    grid-template-rows: repeat(2, auto);
    grid-row-gap: 1rem;
    grid-template-columns: repeat(2, auto);
    grid-template-areas: "main__h1                   main__h1"
 "div__presentacion          main__img--inicio"; } }

@media screen and (min-width: 961px) {
  .header__li {
    font-size: calc(0.8rem + 1vw); }
    .header__li:hover {
      padding: 0; }
  .div__pgs--grupal .pgs__individual {
    max-width: 350px; } }

@media screen and (min-width: 961px) and (orientation: landscape) {
  .header {
    justify-content: space-between; }
    .header__logo {
      margin: 1rem 0 1rem 5rem; }
    .header__li {
      margin: 0.2rem; }
  .contacto {
    display: inline-block; }
    .contacto__texto {
      display: none; } }

@media screen and (min-width: 1024px) and (orientation: landscape) {
  .calzado__main--layout {
    grid-template-rows: repeat(4, auto);
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 1rem;
    grid-template-areas: "main__h1 main__h1"
 "main__div--losAngeles main__div--puertoRico"
 "main__div--newYork main__div--chicago"
 "main__div--broadway main__div--broadway";
    justify-items: center;
    align-items: center; }
  .main__div--losAngeles {
    justify-self: end;
    margin: 3vw; }
  .main__div--puertoRico {
    justify-self: start;
    margin: 3vw; }
  .main__div--newYork {
    justify-self: end;
    margin: 3vw; }
  .main__div--chicago {
    justify-self: start;
    margin: 3vw; } }