/*-------------------------------------------------------
FONTS
-------------------------------------------------------*/
/* Recoleta: headings */
@font-face {
  font-family: "Recoleta";
  src: url("../../fonts/recoletaregular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../../fonts/recoleta-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../../fonts/recoleta-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Chivo: body text */
@font-face {
  font-family: "Chivo";
  src: url("../../fonts/chivo-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chivo";
  src: url("../../fonts/chivo-lightitalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Chivo";
  src: url("../../fonts/chivo-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chivo";
  src: url("../../fonts/chivo-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Chivo";
  src: url("../../fonts/chivo-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chivo";
  src: url("../../fonts/chivo-mediumitalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Chivo";
  src: url("../../fonts/chivo-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chivo";
  src: url("../../fonts/chivo-bolditalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/*-------------------------------------------------------
RESET
-------------------------------------------------------*/
/* 0. Remove margins and padding */
html, body,
html *, body * {
	margin: 0;
	padding: 0;
	border: 0;	
}
/* 1. Box sizing global */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* 2. Previne o aumento automático de fontes em dispositivos móveis */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
/* 3. Remove margens padrão e define o comportamento do scroll */
body, h1, h2, h3, h4, h5, h6 p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}
/* 4. Remove estilos de lista apenas quando usamos o atributo 
   (Útil para acessibilidade sem perder o estilo padrão de textos longos) */
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 5. Configurações base do corpo do site */
html{
    font-size: 16px;
}
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Melhora a renderização no macOS/iOS */
}
/* 6. Melhora a legibilidade em títulos e elementos interativos */
h1, h2, h3, h4, h5, h6,
button, input, label {
  line-height: 1.1;
}
/* 8. Evita espaços estranhos abaixo das imagens */
img,
picture {  
  display: block;
}
/* 9. Faz com que inputs e botões herdem as fontes do projeto */
input,
button,
textarea,
select,
address {
  font: inherit;
}
/* 10. Garante que textareas sem atributo 'rows' tenham um tamanho mínimo decente */
textarea:not([rows]) {
  min-height: 5em;
}
/* 11. limpa propriedades de campos de formulários */
input,
select,
textarea,
button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;   
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    outline: none;  
    background-color: transparent;
    box-shadow: none; 
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}
textarea {
    resize: vertical; /* Oculta o arrasto horizontal para não quebrar o layout, permite só vertical */
}
/* Remove o "X" de limpar que o Chrome/Safari injeta nos inputs de pesquisa */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}
/* Remove a setinha padrão do select em navegadores da Microsoft */
select::-ms-expand {
    display: none;
}
/* 12. Rolagem suave nos links internos (âncoras); a seção para logo abaixo do header fixo
   (altura do header compacto: 60px no mobile, 80px a partir de 1024px) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 80px;
  }
}
/* 13. ACESSIBILIDADE: Respeita a preferência de movimento reduzido do utilizador */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*-------------------------------------------------------
VARIÁVEIS
-------------------------------------------------------*/
/* Tokens: only colors, font families, radii and shadows.
   font-size and spacing are written directly in each rule. */
:root {
  --color-bg: #f7e9de;
  --color-bg-soft: #f6f2ee;
  --color-sand: #eddccc;
  --color-text: #4a3b30;
  --color-text-soft: #5e4d41;
  --color-taupe: #766458;
  --color-primary: #f09159;
  --color-primary-dark: #c0683c;
  --color-line: #dcbfa9;
  --color-clay: #c48a64;
  --color-clay-soft: #E2ad8d;  
  --color-butter: #f2e0a6;
  --color-white: #ffffff;

  --font-heading: "Recoleta", Georgia, "Times New Roman", serif;
  --font-body: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 6px;
  --radius-pill: 999px;

  --shadow-panel: -12px 0 40px rgba(74, 59, 48, 0.12);
}

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

/* Sections focused by the anchor script (main.js) are not controls: no outline */
[tabindex="-1"]:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 16px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}
/*-------------------------------------------------------
ELEMENTOS PADRÃO
-------------------------------------------------------*/
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text);
}
h1{
    font-size: 2rem;
}
h2{
    font-size: 2.5rem;
}
a{	
    color: currentColor;
	text-decoration: none;
	transition: color 300ms ease, background 300ms ease, border 300ms ease;
}
strong{
	font-weight: 500;	
	}
em{
	font-style: italic;
}
p {
	line-height: 1.5;
	margin-bottom: 1rem;
}
p:last-child{
	margin-bottom: 0 !important;
}
.clearfix{
	clear:both;
}
.clearbox::after{
	content: "";
	display: table;
	clear:both;
}
img,
svg{
	display: block;
	height: auto;
}
svg path{
    transition: fill 300ms ease;
}
svg :is(path, polygon, rect, circle) {
	fill: currentColor;
}
.main {
	width: 100%;
	height: auto;		
	position: relative;	
    z-index: 10;	
}
section{	
	width: 100%;
	height: auto;
	position: relative;		
}
@media (min-width: 1024px) {
    h1{
        font-size: 2.4rem;
    }
    h2{
        font-size: 3rem;
    }
}