/* ============================================================
   Rastra Elementor Theme — CSS principal
   Carregado depois de tokens.css
   ============================================================ */

/* ── Reset suave + base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rastra-bg-page);
  color: var(--rastra-text-primary);
  font-family: var(--rastra-font-sans);
  font-size: var(--rastra-size-body);
  line-height: 1.53;
  letter-spacing: var(--rastra-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

:focus-visible {
  outline: 2px solid var(--rastra-border-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--rastra-teal-100); color: var(--rastra-ink); }

a { color: var(--rastra-teal-600); text-decoration-color: rgba(2, 106, 104, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--rastra-teal-600); }

/* ── Tipografia ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .4em; color: var(--rastra-ink); font-weight: 400; }
h1, h2 {
  font-family: var(--rastra-font-serif);
  letter-spacing: var(--rastra-tracking-tight);
  line-height: 1.15;
}
h1 { font-size: clamp(2rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 1.75rem); }
h3 { font-size: 1.375rem; font-weight: 600; }
p  { margin: 0 0 1em; }

.rastra-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Skip link acessível */
.rastra-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--rastra-teal-600); color: var(--rastra-cream);
  padding: 12px 18px; z-index: 9999; border-radius: 0 0 8px 0;
}
.rastra-skip-link:focus { left: 0; }

/* ── Container ────────────────────────────────────────────── */
.rastra-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--rastra-space-6);
}
.rastra-section { padding-block: var(--rastra-space-16); }

/* ── Subhead ──────────────────────────────────────────────── */
.rastra-subhead {
  text-transform: uppercase;
  letter-spacing: var(--rastra-tracking-subhead);
  font-weight: 600;
  font-size: var(--rastra-size-subhead);
  color: var(--rastra-teal-600);
  margin: 0 0 var(--rastra-space-3);
}

/* ============================================================
   Header / Footer default (quando não há Theme Builder Elementor)
   ============================================================ */
.rastra-header {
  background: var(--rastra-cream);
  border-bottom: 1px solid var(--rastra-hairline);
  padding: var(--rastra-space-4) 0;
}
.rastra-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rastra-space-4);
}
.rastra-header__title {
  font-family: var(--rastra-font-serif); font-size: 22px; color: var(--rastra-teal-600); text-decoration: none;
}
.rastra-nav-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: var(--rastra-space-6); flex-wrap: wrap;
}
.rastra-nav-list a {
  color: var(--rastra-ink); text-decoration: none; font-weight: 500; font-size: 14px;
  transition: color var(--rastra-duration-base) var(--rastra-easing-default);
}
.rastra-nav-list a:hover { color: var(--rastra-teal-600); }

.rastra-footer {
  background: var(--rastra-ink); color: var(--rastra-cream);
  padding-block: var(--rastra-space-16) var(--rastra-space-10);
  margin-top: var(--rastra-space-20);
}
.rastra-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--rastra-space-10);
}
.rastra-footer__title { font-family: var(--rastra-font-serif); font-size: 22px; color: var(--rastra-cream); display: block; margin-bottom: var(--rastra-space-2); }
.rastra-footer h4, .rastra-footer .rastra-subhead { color: var(--rastra-cream); opacity: .8; }
.rastra-footer__list { list-style: none; padding: 0; margin: 0; }
.rastra-footer__list a { color: var(--rastra-cream); opacity: .85; text-decoration: none; padding: 4px 0; display: block; font-size: 13px; }
.rastra-footer__list a:hover { opacity: 1; }
.rastra-footer__legal { border-top: 1px solid var(--rastra-ink-2); margin-top: var(--rastra-space-10); padding-top: var(--rastra-space-4); font-size: 12px; opacity: .7; }

/* ============================================================
   Botões — usados pelos widgets e templates
   ============================================================ */
.rastra-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: var(--rastra-radius-md);
  font-family: var(--rastra-font-sans); font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--rastra-duration-base) var(--rastra-easing-default),
              color var(--rastra-duration-base) var(--rastra-easing-default);
  min-height: 44px;
}
.rastra-btn--primary { background: var(--rastra-teal-600); color: var(--rastra-cream); }
.rastra-btn--primary:hover { background: var(--rastra-teal-500); color: var(--rastra-cream); }
.rastra-btn--primary:active { background: var(--rastra-teal-700); }
.rastra-btn--outline { background: transparent; color: var(--rastra-teal-600); border-color: var(--rastra-teal-600); }
.rastra-btn--outline:hover { background: var(--rastra-teal-50); }
.rastra-btn--accent { background: var(--rastra-orange-500); color: var(--rastra-cream); }
.rastra-btn--accent:hover { background: var(--rastra-orange-600); color: var(--rastra-cream); }

/* ============================================================
   Widget · Rastra Hero
   ============================================================ */
.rastra-hero {
  text-align: center;
  background: var(--rastra-cream);
}
.rastra-hero__title {
  font-family: var(--rastra-font-serif);
  font-size: clamp(2rem, 6vw, 3.75rem);
  line-height: 1.1; letter-spacing: var(--rastra-tracking-tight);
  max-width: 720px; margin-inline: auto; margin-bottom: var(--rastra-space-5);
}
.rastra-hero__description {
  font-size: var(--rastra-size-h3); color: var(--rastra-ink-2);
  max-width: 580px; margin: 0 auto var(--rastra-space-10);
}
.rastra-hero__buttons {
  display: flex; gap: var(--rastra-space-3); justify-content: center; flex-wrap: wrap;
}

/* ============================================================
   Widget · Proof Numbers
   ============================================================ */
.rastra-proof {
  background: var(--rastra-cream-2);
  --rastra-cols: 4;
}
.rastra-proof__grid {
  display: grid;
  grid-template-columns: repeat(var(--rastra-cols), minmax(0, 1fr));
  gap: var(--rastra-space-10);
  max-width: 1200px; margin-inline: auto;
}
.rastra-proof__num {
  font-family: var(--rastra-font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: var(--rastra-tracking-tight);
  font-variant-numeric: tabular-nums;
}
.rastra-proof__num--orange { color: var(--rastra-orange-500); }
.rastra-proof__num--teal   { color: var(--rastra-teal-600); }
.rastra-proof__label {
  margin-top: var(--rastra-space-2);
  color: var(--rastra-ink-2);
  font-size: var(--rastra-size-body);
  max-width: 220px;
}

/* ============================================================
   Widget · Feature Cards
   ============================================================ */
.rastra-features {
  --rastra-cols: 3;
}
.rastra-features__title {
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--rastra-space-12);
}
.rastra-features__grid {
  display: grid;
  grid-template-columns: repeat(var(--rastra-cols), minmax(0, 1fr));
  gap: var(--rastra-space-4);
  max-width: 1200px; margin-inline: auto;
}
.rastra-feature-card {
  background: #FFFFFF;
  border: 1px solid var(--rastra-hairline);
  border-radius: var(--rastra-radius-lg);
  padding: var(--rastra-space-8);
  text-decoration: none; color: inherit;
  transition: transform var(--rastra-duration-base) var(--rastra-easing-default),
              box-shadow var(--rastra-duration-base) var(--rastra-easing-default);
  display: block;
}
.rastra-feature-card--linked:hover {
  transform: translateY(-2px);
  box-shadow: var(--rastra-shadow-elevated);
}
.rastra-feature-card__num {
  color: var(--rastra-teal-600);
  font-size: var(--rastra-size-subhead);
  font-weight: 600;
  letter-spacing: var(--rastra-tracking-subhead);
  text-transform: uppercase;
  margin-bottom: var(--rastra-space-2);
}
.rastra-feature-card__title {
  font-size: var(--rastra-size-h3);
  font-weight: 600;
  margin: 0 0 var(--rastra-space-2);
  color: var(--rastra-ink);
}
.rastra-feature-card__desc {
  color: var(--rastra-ink-2);
  font-size: var(--rastra-size-body);
  margin: 0;
}

/* ============================================================
   Widget · CTA
   ============================================================ */
.rastra-cta {
  text-align: center;
  max-width: none;
}
.rastra-cta__title {
  font-family: var(--rastra-font-serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.1; letter-spacing: var(--rastra-tracking-tight);
  max-width: 540px; margin: 0 auto var(--rastra-space-3);
}
.rastra-cta__description {
  max-width: 560px;
  margin: 0 auto var(--rastra-space-10);
  font-size: var(--rastra-size-body);
}
.rastra-cta--teal { background: var(--rastra-teal-600); color: var(--rastra-cream); }
.rastra-cta--teal .rastra-cta__title,
.rastra-cta--teal .rastra-cta__description { color: var(--rastra-cream); }
.rastra-cta--ink { background: var(--rastra-ink); color: var(--rastra-cream); }
.rastra-cta--ink .rastra-cta__title,
.rastra-cta--ink .rastra-cta__description { color: var(--rastra-cream); }
.rastra-cta--cream { background: var(--rastra-cream-2); color: var(--rastra-ink); }

/* ============================================================
   Templates — listagens, single, archive, 404
   ============================================================ */
.rastra-archive-header { margin-bottom: var(--rastra-space-12); }
.rastra-archive-title {
  font-family: var(--rastra-font-serif);
  font-size: clamp(2rem, 5vw, 2.5rem);
}
.rastra-archive-description { color: var(--rastra-ink-2); max-width: 60ch; }

.rastra-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rastra-space-6);
}
.rastra-card-post {
  background: #FFFFFF;
  border: 1px solid var(--rastra-hairline);
  border-radius: var(--rastra-radius-lg);
  overflow: hidden;
}
.rastra-card-post__media img { aspect-ratio: 4/3; object-fit: cover; }
.rastra-card-post__body { padding: var(--rastra-space-5); }
.rastra-card-post__title { font-size: var(--rastra-size-h3); font-weight: 600; margin-bottom: var(--rastra-space-2); }
.rastra-card-post__title a { color: var(--rastra-ink); text-decoration: none; }
.rastra-card-post__title a:hover { color: var(--rastra-teal-600); }
.rastra-card-post__excerpt { color: var(--rastra-ink-2); font-size: 14px; margin: 0 0 var(--rastra-space-3); }
.rastra-card-post__date { color: var(--rastra-ink-2); font-size: 13px; margin: 0; }

.rastra-single { max-width: 720px; margin-inline: auto; }
.rastra-single__header { margin-bottom: var(--rastra-space-8); }
.rastra-single__title { font-family: var(--rastra-font-serif); font-size: clamp(2rem, 5vw, 2.5rem); margin-bottom: var(--rastra-space-3); }
.rastra-single__meta { display: flex; gap: var(--rastra-space-3); color: var(--rastra-ink-2); font-size: 13px; }
.rastra-single__media { margin-bottom: var(--rastra-space-10); border-radius: var(--rastra-radius-lg); overflow: hidden; }
.rastra-single__media img { aspect-ratio: 16/9; object-fit: cover; }

.rastra-404 { text-align: center; max-width: 520px; margin-inline: auto; padding-block: var(--rastra-space-20); }
.rastra-404__title { font-family: var(--rastra-font-serif); font-size: clamp(2rem, 5vw, 2.5rem); margin-bottom: var(--rastra-space-4); }
.rastra-404__text { color: var(--rastra-ink-2); margin-bottom: var(--rastra-space-8); }
.rastra-404__actions { margin-bottom: var(--rastra-space-8); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .rastra-proof__grid,
  .rastra-features__grid,
  .rastra-post-grid { grid-template-columns: 1fr 1fr; }
  .rastra-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rastra-proof__grid,
  .rastra-features__grid,
  .rastra-post-grid { grid-template-columns: 1fr; }
}