/* Fonts */

@font-face {
  font-family: "Oswald";
  src: url("fonts/Oswald.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  
  /* Secciones */
  --bg-img-webp: url("imgs/bg.webp");
  --bg-img-jpg: url("imgs/bg.jpg");
  --bg-clr-1: #344A9A99;
  --bg-clr-2: #00000099;

  /* Containers  */
  --ctr-w: 90%;
  --ctr-p: 3rem 0; /* Este valor genera la separación entre secciones */

  /* Spacers */

  --sp: 0.5rem;
  --sp-1: calc(var(--sp)*2);
  --sp-2: calc(var(--sp)*4);

  /* Fonts */
  --ff-h: "Oswald", Arial;
  --ff-p: "Manrope", sans-serif;

  --fw-el: 200;
  --fw-l: 300;
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;
  --fw-eb: 800;

  --fs-h1: clamp(3rem, 2.488rem + 2.927vw, 6rem);
  --fs-h2: 2rem; /* ? No lo usé todavía */
  --fs-h3: 1.5rem; /* ? No lo usé todavía */

  --fs-p: clamp(1rem, 0.829rem + 0.976vw, 2rem);

  --fs-button: clamp(1rem, 0.915rem + 0.488vw, 1.5rem);

  /* Colors */
  --clr-1: #344A9A;
  --clr-2: #DE6535;
  --clr-acc-1: #8DC63F;
  --clr-neutral-1: #FFFFFF;
  --clr-neutral-2: #F2F2F2;
  --clr-neutral-3: #DDDFE3;
  --clr-neutral-4: #333333;
}

/* GENERAL CSS */

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

h1 {
  font-family: var(--ff-h);
  font-size: var(--fs-h1);
  font-weight: var(--fw-r);
  text-transform: uppercase;
}

p {
  font-family: var(--ff-p);
  font-size: var(--fs-p);
  font-weight: var(--fw-r);
}

button {
  border: none;
  font-family: var(--ff-p);
  font-size: var(--fs-button);
  font-weight: var(--fw-m);
  text-transform: uppercase;
  cursor: pointer;
  padding: 1em 3em;
  border-radius: 1em;
  color: var(--clr-neutral-1);
  background-color: var(--clr-2);
  transition: box-shadow 0.15s ease-in;
}
button:hover,
button:focus-visible {
  box-shadow: 0 0 0.5em rgba(255,255,255,0.5);
}

/* LAYOUT CSS */

body {
  background-color: var(--clr-neutral-1);
}

#hero {
  background-color: var(--clr-1);
  background-image: linear-gradient(to bottom, var(--bg-clr-2), var(--bg-clr-1)), var(--bg-img-webp);
  background-image: linear-gradient(to bottom, var(--bg-clr-2), var(--bg-clr-1)), var(--bg-img-jpg);
  background-size: cover;
  background-position: center;
}

.container {
  width: var(--ctr-w);
  padding: var(--ctr-p);
  margin-inline: auto;
}

/* HERO CSS */

#hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
}
#hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}


#hero .container .hero-title {
  display: flex;
  gap: var(--fs-p);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#hero .container .hero-title svg {
  width: calc(var(--fs-h1)*1.35);
  fill: var(--clr-neutral-1);
  stroke: var(--clr-neutral-1);
  stroke-width: 0.5em;
  filter: drop-shadow(0 0 0.2em #DE6535BB);
}
#hero .container .hero-title h1 {
  text-align: center;
  color: var(--clr-neutral-1);
  display: grid;
  line-height: 1;
}
#hero .container .hero-title h1 span {
  font-size: calc(var(--fs-h1)*0.45);
  color: var(--clr-neutral-3);
}
#hero .container p {
  color: var(--clr-neutral-1);
  line-height: 1.5em;
  text-align: center;
}




/* MEDIA QUERIES CSS */

@media only screen and (min-width: 576px) {
  #hero .container .hero-title svg {
    width: calc(var(--fs-h1)*1.1);
  }
  #hero .container .hero-title h1 {
    display: block;
  }
  #hero .container .hero-title h1 span {
    font-size: var(--fs-h1);
    color: var(--clr-neutral-1);
  }
}

@media only screen and (min-width: 992px) {
  :root {
    --ctr-w: 80%;
  }
}