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

    --color-background: #f8f8ea ;
    --color-primary:#f5f5dc;
    --color-subtitles: #e9dcc9;
    --color-titles: #b28348;

    --color-gold : #d4af37;
    --color-gold-tono: #ffeea3;

    --text-color: currentColor;
    --text-parrafos: 1.5rem;
    --text-parrafos-family: arial;
     --background-url: url(../images/FONDO.png);

}

html{scroll-behavior: smooth;}

body {
  background: var(--color-background);
}

a{text-decoration: none;}


/* Class fonts */

@font-face {
  font-family: "GreatVibes";
  src: url("../fonts/GreatVibes-Regular.ttf") format("truetype");
  font-weight:400;
  font-style: normal;
  font-display: swap;
}








/* Regla para fijar images IOS */
.unfix-ios-bg {
  @supports (-webkit-touch-callout: none) {
    background-attachment: initial !important;
  }
}

/* Background fixed-Absolute */
.background::before{
  content: "";
  position: fixed;
  width: 100%;
  min-height: 100svh; 
  background: var(--background-url);
  background-size: cover;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;

}


h1{

    font-family: "GreatVibes";
    color: var(--color-titles);
    font-size: 3rem;
}

.container-main{

  width: min(1200px, 100%);
  padding: 1rem;
  display: block;
  margin: 1rem auto;
}


footer {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-evenly;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background:linear-gradient(190deg, black, #211e09);
  background-position: center;
  background-size: cover;
  border-top: 7px outset var(--color-gold);

  h1 {
    font-size: 2rem;
    text-align: center;
  }

  img{

    width: min(100%,300px);
    object-fit: cover;
  }
}


/* Redes-Socials */
.redes {
  width: max-content;
  display: block;

  a {
    display: grid;
    gap: 0.3rem;
    color: white;
    filter: drop-shadow(0 0 5px var(--color-gold-tono));
    transition: ease 0.5s;
  }

  a:hover {
    filter: drop-shadow(0 0 100px);
    transform: scale(0.8);
  }

  svg {
    width: 3rem;
    height: 3rem;
    margin: auto;
    fill-opacity: 0.8;
      stroke: gold;
    stroke-width: 4px;
    fill: wheat;
    transition: transform ease 1s;
  }

  
}

.redes-items {
  display: flex;
  gap: 1rem;
  margin-block-start: 1rem;
}

/* Botó ir Arriba */
.btn-up {
  width: 2.5rem;
  height: 2.5rem;
  stroke-width: 3px;
  stroke: var(--color-gold-tono);
  fill: var(--color-gold);
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  transition: ease 1s;
  z-index: 5;
}

.btn-up:active {
  transform: scale(0.5) translateY(-2rem);
  opacity: 0.6;
}

/* Legal-Cookies */
.legal-cookies {
  text-align: center;
  height: auto;
  background: black;
  border-top: outset 1px var(--color-gold-tono);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 1rem;
  padding: 1rem;

  span {
    color: var(--color-gold-tono);
    font-size: large;
    transition: opacity ease 0.5s;
  }

  span:hover {
    opacity: 0.5;
    cursor: pointer;
    border-bottom: 1px solid gold;
  }


  p:nth-child(4) {
    color: gold;
    opacity: 0.7;
    font-size: 1.5rem;
    transform: scale(1);
  }
}