/* Identidade do funil: cozinha mediterrânea de casa.
   Azafrán é o campo da marca, noche (oliva quase preto) é o escuro, cal é o claro, tomate é a ação. */
:root {
  --cal: #f5f3ee;
  --blanco: #ffffff;
  --azafran: #f0b429;
  --azafran-claro: #f8d27a;
  --noche: #1b2014;
  --noche-2: #2a3120;
  --tinta: #1b2014;
  --tinta-suave: #4b5240;
  --hoja: #5e7a2e;
  --hoja-claro: #e4ead6;
  --tomate: #c8371c;
  --tomate-oscuro: #a32a12;
  --sobre-noche: #eef0e6;
  --sobre-noche-suave: #b9bfad;
  --sombra: 0 18px 40px -24px rgba(27, 32, 20, 0.45);

  --f-titulo: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-texto: 'Figtree', system-ui, sans-serif;

  --t-chico: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --t-texto: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-titulo: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --t-display: clamp(2.6rem, 1.2rem + 6vw, 6.5rem);

  --radio: 28px;
  --pildora: 999px;
  --ancho: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1,
h2,
h3 {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--tomate);
  outline-offset: 3px;
}

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Botões: pílula, cor chapada, nome da ação. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--pildora);
  background: var(--tomate);
  color: #fff;
  font-family: var(--f-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    background 0.2s;
}

.boton:hover {
  background: var(--tomate-oscuro);
}

.boton:active {
  transform: scale(0.97);
}

.boton--tinta {
  background: var(--noche);
}

.boton--tinta:hover {
  background: var(--noche-2);
}

.boton--claro {
  background: var(--blanco);
  color: var(--tinta);
}

.boton--claro:hover {
  background: var(--cal);
}

.boton--ancho {
  width: 100%;
}

.boton svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Faixa de rascunho: só aparece com CONFIG.borrador = true. */
.borrador {
  position: relative;
  z-index: 60;
  padding: 8px var(--gutter);
  background: repeating-linear-gradient(
    -45deg,
    var(--noche),
    var(--noche) 12px,
    var(--noche-2) 12px,
    var(--noche-2) 24px
  );
  color: var(--azafran);
  font-size: var(--t-chico);
  font-weight: 600;
  text-align: center;
}

.borrador a {
  color: #fff;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.marca__sello {
  width: 34px;
  height: 34px;
  flex: none;
}

/* Subconjunto do Animate.css 4.1.1 (fadeInUp, zoomIn), adaptado.
   animate.css - https://animate.style/ - Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
   Copyright (c) 2022 Animate.css */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes sello {
  0% {
    opacity: 0;
    transform: scale(1.8) rotate(-18deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.94) rotate(-8deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }
}

.entra {
  animation: fadeInUp 0.6s var(--ease) both;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}