/* Fuentes (pendiente de confirmar con la agencia) */
@font-face {
  font-family: "Bitter";
  src: url("../assets/fonts/bitter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colores (muestreados del diseño) */
  --color-texto: #3c3c3b;
  --color-fondo: #ffffff;
  --color-fondo-suave: #f7f7f7;
  --color-ocre: #b47500;
  --color-oliva: #465137;
  --color-azul: #a8b6c0;
  --color-linea: #d9d9d9; /* estimado */
  --color-linea-encabezado: #80807f;

  /* Tipografías */
  --fuente-titulos: "Bitter", Georgia, serif;
  --fuente-interfaz: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medidas */
  --ancho-contenedor: 1500px;
  --margen-lateral: 20px;
  --alto-encabezado: 96px;
  --alto-barra-movil: 48px;
  --punto-menu: 900px;
}

@media (min-width: 900px) {
  :root {
    --alto-encabezado: 102px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-interfaz);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar-contenido {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--color-oliva);
  color: #fff;
}

.saltar-contenido:focus {
  top: 8px;
}

:focus-visible {
  outline: 2px solid var(--color-ocre);
  outline-offset: 3px;
}

/* Círculos decorativos del menú móvil y del pie de página */
.fondo-circulos {
  background-color: var(--color-azul);
  background-image:
    radial-gradient(ellipse 150px 104px at calc(100% + 18px) 52px, #b0bec8 99.4%, transparent 100%),
    radial-gradient(ellipse 175px 122px at calc(100% + 0px) 80px, #a2b0ba 99.4%, transparent 100%),
    radial-gradient(ellipse 275px 206px at calc(100% - 22px) 112px, #b0bec8 99.4%, transparent 100%);
  background-repeat: no-repeat;
}