/* ========= Base CSS Slim (sem Shopify) ========= */

/* --------- Variáveis --------- */
:root{
  /* Cores */
  --color-bg: 255,255,255;
  --color-fg: 20,23,28;
  --color-muted: 110,120,130;
  --color-link: 0,112,243;
  --color-primary: 0,112,243;
  --color-primary-text: 255,255,255;

  /* Layout */
  --page-width: 1200px;
  --spacing-section-mobile: 48px;
  --spacing-section-desktop: 72px;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);

  /* Tipografia */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --font-heading: var(--font-body);
  --font-scale: 1;

  /* Tempos */
  --dur-fast: .15s;
  --dur: .25s;
}

/* --------- Reset simples --------- */
*{box-sizing:border-box}
html{font-size:62.5%} /* 1rem = 10px */
body{
  margin:0;
  color: rgb(var(--color-fg));
  background: rgb(var(--color-bg));
  font: 400 1.6rem/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color: rgb(var(--color-link));text-decoration:underline;text-underline-offset:.2rem}
a:hover{opacity:.85}
button{font:inherit}

/* --------- Contêiner --------- */
.page-width{max-width:var(--page-width);margin:0 auto;padding:0 1.6rem}
.section + .section{margin-top: var(--spacing-section-mobile)}
@media (min-width:750px){
  .section + .section{margin-top: var(--spacing-section-desktop)}
}

/* --------- Tipografia --------- */
.h0{font-family:var(--font-heading);font-weight:700;font-size:calc(var(--font-scale)*4.0rem);line-height:1.15;margin:0 0 1.2rem}
h1,.h1{font-family:var(--font-heading);font-weight:700;font-size:calc(var(--font-scale)*3.2rem);line-height:1.2;margin:0 0 1.2rem}
h2,.h2{font-family:var(--font-heading);font-weight:700;font-size:calc(var(--font-scale)*2.4rem);line-height:1.25;margin:0 0 1rem}
h3,.h3{font-family:var(--font-heading);font-weight:600;font-size:calc(var(--font-scale)*2.0rem);line-height:1.3;margin:0 0 .8rem}
p{margin:0 0 1.2rem}
.small{font-size:1.4rem;color:rgb(var(--color-muted))}
.lead{font-size:1.8rem;line-height:1.7}

/* --------- Grid simples --------- */
.grid{
  display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0;
}
.grid__item{flex:1 1 100%}
@media (min-width:750px){
  .grid--2 .grid__item{flex-basis:calc(50% - 8px)}
  .grid--3 .grid__item{flex-basis:calc(33.333% - 11px)}
  .grid--4 .grid__item{flex-basis:calc(25% - 12px)}
}

/* --------- Cartões / blocos --------- */
.card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  background:#fff;
  overflow:hidden;
}
.card__media{position:relative;padding-bottom:56.25%;background:rgba(0,0,0,.04)}
.card__media > img, .card__media > video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.card__body{padding:16px}

/* --------- Mídia generica --------- */
.media{position:relative;background:rgba(0,0,0,.04);overflow:hidden}
.media--square{padding-bottom:100%}
.media--16-9{padding-bottom:56.25%}
.media > img, .media > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --------- Botões --------- */
.btn{
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-primary-text);
  display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;
  min-height:44px; padding:0 20px;
  border-radius:999px; border:0;
  color: rgb(var(--btn-fg));
  background: rgb(var(--btn-bg));
  text-decoration:none; cursor:pointer;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  box-shadow: 0 6px 18px rgba(0,112,243,.25);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--outline{
  --btn-bg: 255,255,255; --btn-fg: var(--color-fg);
  border:1px solid rgba(0,0,0,.12);
  background:#fff; box-shadow:none;
}
.btn--block{display:flex;width:100%}

/* --------- Formulários --------- */
.input, .select, .textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  min-height:44px;
  padding:10px 14px;
  font-size:1.6rem;
  background:#fff;
  transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.textarea{min-height:110px;resize:vertical}
.input:focus, .select:focus, .textarea:focus{
  outline:0; border-color: rgba(0,112,243,.5);
  box-shadow: 0 0 0 3px rgba(0,112,243,.15);
}
.label{display:block;margin:0 0 .6rem;font-weight:600}
.form-row{display:grid;gap:12px}
@media (min-width:750px){ .form-row--2{grid-template-columns:1fr 1fr} }

/* --------- Tabelas simples --------- */
table{width:100%;border-collapse:collapse;font-size:1.5rem}
th,td{padding:12px;border:1px solid rgba(0,0,0,.08);text-align:left}
thead th{background:#fafafa}

/* --------- Utilitários --------- */
.center{text-align:center}
.right{text-align:right}
.hidden{display:none!important}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.container{padding:24px;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.pt-0{padding-top:0}.pt-2{padding-top:16px}.pt-3{padding-top:24px}.pt-4{padding-top:32px}
.pb-0{padding-bottom:0}.pb-2{padding-bottom:16px}.pb-3{padding-bottom:24px}.pb-4{padding-bottom:32px}

hr{border:none;height:1px;background:rgba(0,0,0,.08);margin:24px 0}

/* --------- Seções de destaque --------- */
.section-hero{
  padding:56px 0;
  background:linear-gradient(180deg, rgba(0,112,243,.06), rgba(0,112,243,0));
  border-bottom:1px solid rgba(0,0,0,.06);
}
.section-hero .hero-card{
  display:grid; gap:24px; align-items:center;
}
@media (min-width:900px){
  .section-hero .hero-card{grid-template-columns:1.2fr .8fr}
}

/* --------- Animações leves --------- */
.fade-in{opacity:0;transform:translateY(8px);transition:opacity .4s ease, transform .4s ease}
.fade-in.is-visible{opacity:1;transform:none}

/* ========= Fim ========= */