/* ========================================
   FUENTES
======================================== */

@import url("https://fonts.googleapis.com/css2?family=Caprasimo&family=Poppins:wght@300;400;500;600;700&display=swap");


/* ========================================
   PALETA
======================================== */

:root {
  --color1: #e9e3d7;
  --color2: #fd8d0f;
  --color3: #ba5e15;
  --color4: #883404;
  --color5: #412a1d;
  --color6: #e6cfb8;
  --color7: #f2ebde;
  --color8: #fafafa;
  --color9: #e98009;
  --color10: #a75515;
  --color11: #722c05;
  --color12: #d3d3d3;
  --color13: #0f1125;
  --color14: #f5f5f5;

  --max-width: 1280px;

  --page-padding-mobile: 1.5rem;
  --page-padding-tablet: 2.5rem;
  --page-padding-desktop: 2rem;

  --header-mobile: 76px;
  --header-desktop: 100px;
}


/* ========================================
   RESET
======================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: "Poppins", sans-serif;
  color: var(--color5);
  background-color: var(--color1);
}

body,
button,
a {
  font-family: "Poppins", sans-serif;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: "Caprasimo", serif;
}


/* ========================================
   ACCESIBILIDAD / INTERACCIÓN
======================================== */

a:focus-visible,
button:focus-visible,
.icon-menu:focus-visible,
.icon-cross:focus-visible {
  outline: 2px solid var(--color2);
  outline-offset: 4px;
}


/* ========================================
   SCROLL DE SECCIONES
======================================== */

section {
  scroll-margin-top: var(--header-mobile);
}


/* ========================================
   DESKTOP
======================================== */

@media screen and (min-width: 1024px) {

  section {
    scroll-margin-top: var(--header-desktop);
  }

}