/* =================================================================
   GLOBAL STYLES - Centro Xamânico
   Estética: Rústico elegante, natural, acolhedor
   ================================================================= */

:root {
  /* Cores - Paleta Noite Cerimonial */
  --color-green-deep: #182825;
  --color-green-leaf: #49665f;
  --color-warm-off-white: #e7e4dc;
  --color-wood: #7a5f49;
  --color-terracotta: #b45f4d;
  --color-warm-graphite: #2f2b28;
  --color-straw: #e4d3bd;
  --color-clay: #c89073;
  --color-earth-line: #bca991;

  --rgb-green-deep: 24, 40, 37;
  --rgb-green-leaf: 73, 102, 95;
  --rgb-warm-off-white: 231, 228, 220;
  --rgb-wood: 122, 95, 73;
  --rgb-terracotta: 180, 95, 77;
  --rgb-straw: 228, 211, 189;
  --rgb-clay: 200, 144, 115;
  --rgb-earth-line: 188, 169, 145;

  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Typography */
  --font-serif: "Georgia", "Garamond", serif;
  --font-sans: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
}

/* =================================================================
   RESET & BASE
   ================================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-warm-graphite);
  background-color: var(--color-warm-off-white);
  line-height: 1.6;
  font-weight: 400;
}

/* =================================================================
   TYPOGRAPHY
   ================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  color: var(--color-green-deep);
}

h1 {
  font-size: 3rem;
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: 2rem;
  margin-bottom: var(--spacing-lg);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
}

h4 {
  font-size: 1.25rem;
}

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-green-deep);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-green-leaf);
}

strong, b {
  font-weight: 600;
}

/* =================================================================
   LAYOUT
   ================================================================= */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

header {
  background-color: var(--color-warm-off-white);
  border-bottom: 1px solid rgba(var(--rgb-earth-line), 0.42);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

main {
  min-height: calc(100vh - 200px);
  padding: var(--spacing-xl) 0;
}

footer {
  background-color: var(--color-green-deep);
  color: var(--color-warm-off-white);
  padding: var(--spacing-2xl) 0;
  margin-top: var(--spacing-2xl);
}

.site-footer-main {
  display: grid;
  grid-template-columns: minmax(16rem, 1.15fr) minmax(13rem, 0.9fr) minmax(10rem, 0.55fr);
  gap: var(--spacing-xl);
  align-items: start;
  margin-bottom: var(--spacing-2xl);
}

.site-footer-brand,
.site-footer-contact,
.site-footer-social {
  color: var(--color-warm-off-white);
}

.site-footer-logo {
  display: block;
  width: min(8.5rem, 100%);
  height: auto;
  margin-bottom: var(--spacing-md);
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(var(--rgb-warm-off-white), 0.24);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 72% 82%, rgba(var(--rgb-warm-off-white), 0.86), rgba(var(--rgb-straw), 0.58) 38%, transparent 72%),
    linear-gradient(180deg, rgba(var(--rgb-green-deep), 0.96) 0%, rgba(var(--rgb-green-leaf), 0.78) 42%, rgba(var(--rgb-earth-line), 0.62) 100%);
  box-shadow: 0 10px 24px rgba(var(--rgb-green-deep), 0.24);
}

.site-footer-main h4 {
  color: var(--color-warm-off-white);
  font-size: 1.1rem;
}

.site-footer-main p {
  max-width: 28rem;
  margin-bottom: 0;
  color: rgba(var(--rgb-warm-off-white), 0.88);
}

.site-footer-contact strong {
  color: var(--color-straw);
}

.site-footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.site-footer-social-links a {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--rgb-warm-off-white), 0.24);
  border-radius: 50%;
  color: var(--color-warm-off-white);
  background: rgba(var(--rgb-warm-off-white), 0.08);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.site-footer-social-links a:hover {
  border-color: rgba(var(--rgb-clay), 0.78);
  color: var(--color-warm-off-white);
  background-color: rgba(var(--rgb-terracotta), 0.32);
  transform: translateY(-2px);
}

.site-footer-social-links svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.site-footer-bottom {
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(var(--rgb-warm-off-white), 0.2);
  text-align: center;
}

.site-footer-bottom p {
  margin-bottom: 0;
  color: rgba(var(--rgb-warm-off-white), 0.7);
  font-size: 0.9rem;
}

/* =================================================================
   BUTTONS
   ================================================================= */

.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-green-deep);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-green-leaf);
  color: var(--color-white);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-green-deep);
  border: 2px solid var(--color-green-deep);
}

.btn-secondary:hover {
  background-color: var(--color-green-deep);
  color: var(--color-white);
}

.btn-terracotta {
  background-color: var(--color-terracotta);
  color: var(--color-white);
}

.btn-terracotta:hover {
  color: var(--color-white);
  opacity: 0.9;
}

/* =================================================================
   CARDS
   ================================================================= */

.card,
.panel-earth {
  background: linear-gradient(180deg, rgba(var(--rgb-warm-off-white), 0.72), rgba(var(--rgb-earth-line), 0.26));
  border: 1px solid rgba(var(--rgb-wood), 0.22);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  box-shadow: none;
}

.panel-earth {
  position: relative;
}

.panel-earth::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-terracotta), rgba(var(--rgb-wood), 0.28));
  content: "";
}

.panel-soft {
  background-color: rgba(188, 169, 145, 0.22);
  border: 1px solid rgba(var(--rgb-wood), 0.18);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
}

.panel-dark {
  background: rgba(var(--rgb-warm-off-white), 0.08);
  border: 1px solid rgba(var(--rgb-warm-off-white), 0.18);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  color: var(--color-warm-off-white);
}

.medicine-item {
  padding: var(--spacing-lg) 0;
  border-top: 1px solid rgba(var(--rgb-wood), 0.26);
}

.medicine-item h3 {
  color: var(--color-green-deep);
}

.text-link {
  color: var(--color-green-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(var(--rgb-terracotta), 0.45);
  text-underline-offset: 0.25em;
}

.home-resource-links {
  margin-bottom: var(--spacing-md);
}

.home-resource-links h4 {
  margin-bottom: var(--spacing-xs);
}

.home-resource-links p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-wood);
}

.home-resource-links div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.product-section {
  padding: var(--spacing-xl);
  border: 1px solid rgba(var(--rgb-wood), 0.16);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(var(--rgb-warm-off-white), 0.9), rgba(var(--rgb-earth-line), 0.28)),
    radial-gradient(circle at top left, rgba(var(--rgb-terracotta), 0.14), transparent 32%);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.product-card {
  overflow: hidden;
  border: 1px solid rgba(var(--rgb-wood), 0.2);
  border-radius: var(--radius-md);
  background-color: rgba(var(--rgb-warm-off-white), 0.72);
}

.product-image {
  min-height: 11rem;
  border-bottom: 1px solid rgba(var(--rgb-wood), 0.18);
  background:
    radial-gradient(circle at 38% 34%, rgba(var(--rgb-warm-off-white), 0.72), transparent 34%),
    linear-gradient(135deg, rgba(var(--rgb-green-deep), 0.9), rgba(var(--rgb-wood), 0.7));
}

.product-image-beads {
  background:
    radial-gradient(circle at 30% 34%, rgba(var(--rgb-terracotta), 0.9) 0 0.42rem, transparent 0.45rem),
    radial-gradient(circle at 46% 46%, rgba(var(--rgb-warm-off-white), 0.88) 0 0.36rem, transparent 0.39rem),
    radial-gradient(circle at 62% 35%, rgba(var(--rgb-green-leaf), 0.95) 0 0.42rem, transparent 0.45rem),
    radial-gradient(circle at 54% 61%, rgba(var(--rgb-clay), 0.95) 0 0.4rem, transparent 0.43rem),
    linear-gradient(135deg, rgba(var(--rgb-green-deep), 0.88), rgba(var(--rgb-wood), 0.74));
}

.product-image-pipes {
  background:
    radial-gradient(ellipse at 62% 58%, rgba(var(--rgb-clay), 0.82) 0 12%, transparent 13%),
    linear-gradient(32deg, transparent 0 42%, rgba(var(--rgb-wood), 0.88) 43% 54%, transparent 55%),
    linear-gradient(135deg, rgba(var(--rgb-green-deep), 0.88), rgba(var(--rgb-wood), 0.74));
}

.product-image-applicators {
  background:
    linear-gradient(38deg, transparent 0 35%, rgba(var(--rgb-warm-off-white), 0.76) 36% 42%, transparent 43%),
    linear-gradient(142deg, transparent 0 44%, rgba(var(--rgb-clay), 0.86) 45% 51%, transparent 52%),
    radial-gradient(circle at 66% 34%, rgba(var(--rgb-terracotta), 0.62), transparent 18%),
    linear-gradient(135deg, rgba(var(--rgb-green-deep), 0.9), rgba(var(--rgb-wood), 0.72));
}

.product-image-maracas {
  background:
    radial-gradient(ellipse at 44% 38%, rgba(var(--rgb-clay), 0.9) 0 17%, transparent 18%),
    linear-gradient(78deg, transparent 0 50%, rgba(var(--rgb-wood), 0.82) 51% 56%, transparent 57%),
    radial-gradient(circle at 58% 48%, rgba(var(--rgb-warm-off-white), 0.34), transparent 20%),
    linear-gradient(135deg, rgba(var(--rgb-green-deep), 0.9), rgba(var(--rgb-wood), 0.72));
}

.product-card-content {
  padding: var(--spacing-md);
}

.product-card-content span {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--color-wood);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.product-card-content h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--color-green-deep);
  font-size: 1.2rem;
}

.product-card-content p {
  margin-bottom: 0;
  color: var(--color-warm-graphite);
}

.product-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(var(--rgb-wood), 0.22);
}

.product-note p {
  max-width: 38rem;
  margin-bottom: 0;
  color: var(--color-wood);
}

/* =================================================================
   INTERNAL PAGES
   ================================================================= */

.page-main {
  padding: 0;
}

.page-hero {
  padding: 8rem 0 var(--spacing-xl);
  color: var(--color-warm-off-white);
  background:
    linear-gradient(135deg, rgba(var(--rgb-green-deep), 0.96), rgba(var(--rgb-green-leaf), 0.9)),
    radial-gradient(circle at top right, rgba(var(--rgb-terracotta), 0.22), transparent 36%);
}

.page-hero h1 {
  max-width: 13ch;
  margin-bottom: var(--spacing-md);
  color: var(--color-warm-off-white);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.98;
}

.page-hero p {
  max-width: 42rem;
  color: rgba(var(--rgb-warm-off-white), 0.88);
  font-size: 1.1rem;
}

.page-kicker {
  margin-bottom: var(--spacing-sm);
  color: var(--color-clay);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-shell {
  display: grid;
  grid-template-columns: minmax(0, 48rem) minmax(16rem, 22rem);
  gap: var(--spacing-xl);
  align-items: start;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.page-content {
  font-size: 1.05rem;
}

.page-content h2 {
  margin-top: var(--spacing-xl);
}

.page-content h2:first-child {
  margin-top: 0;
}

.page-content h3 {
  margin-top: var(--spacing-lg);
}

.page-content ul,
.page-content ol {
  margin: 0 0 var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.page-content li + li {
  margin-top: 0.45rem;
}

.page-content a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(var(--rgb-terracotta), 0.45);
  text-underline-offset: 0.25em;
}

.page-featured-image,
.page-image-grid figure,
.page-inline-image {
  overflow: hidden;
  margin: var(--spacing-lg) 0;
  border: 1px solid rgba(var(--rgb-wood), 0.18);
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-earth-line), 0.16);
}

.page-featured-image {
  margin-top: 0;
}

.page-featured-image img,
.page-image-grid img,
.page-inline-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-featured-image img {
  aspect-ratio: 16 / 9;
}

.page-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.page-image-grid figure {
  margin: 0;
}

.page-image-grid img {
  aspect-ratio: 4 / 3;
}

.page-inline-image {
  max-width: 20rem;
}

.page-inline-image-right {
  float: right;
  margin: 0 0 var(--spacing-md) var(--spacing-lg);
}

.map-embed {
  overflow: hidden;
  margin: var(--spacing-lg) 0;
  border: 1px solid rgba(var(--rgb-wood), 0.2);
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-earth-line), 0.16);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: min(28rem, 68vh);
  min-height: 20rem;
  border: 0;
}

.page-aside {
  position: sticky;
  top: 6.5rem;
  padding: var(--spacing-lg);
  border: 1px solid rgba(var(--rgb-wood), 0.18);
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-earth-line), 0.18);
}

.page-aside h2 {
  margin-bottom: var(--spacing-sm);
  font-size: 1.35rem;
}

.page-aside p {
  color: var(--color-wood);
}

.page-aside .btn {
  width: 100%;
  text-align: center;
}

.content-block {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
}

.content-block h3 {
  margin-bottom: var(--spacing-sm);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-block p:last-child,
.content-block ul:last-child {
  margin-bottom: 0;
}

.content-block-alert {
  border: 1px solid rgba(var(--rgb-terracotta), 0.4);
  background: rgba(var(--rgb-terracotta), 0.12);
}

.content-block-alert h3 {
  color: var(--color-terracotta);
}

.content-block-tip {
  border: 1px solid rgba(var(--rgb-green-leaf), 0.28);
  background: rgba(var(--rgb-green-leaf), 0.1);
}

.content-block-tip h3 {
  color: var(--color-green-leaf);
}

.content-block-checklist {
  border: 1px solid rgba(var(--rgb-wood), 0.24);
  background: rgba(var(--rgb-earth-line), 0.16);
}

.content-block-checklist h3 {
  color: var(--color-wood);
}

.content-block-checklist ul {
  padding-left: 0;
  list-style: none;
}

.content-block-checklist li {
  position: relative;
  padding-left: 1.75rem;
}

.content-block-checklist li::before {
  position: absolute;
  top: 0.08rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-terracotta);
  border-radius: var(--radius-sm);
  content: "";
}

/* =================================================================
   GRID
   ================================================================= */

.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* =================================================================
   UTILITIES
   ================================================================= */

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--color-wood);
}

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .container {
    padding: 0 var(--spacing-md);
  }

  main {
    padding: var(--spacing-lg) 0;
  }

  .main-content.container {
    padding-right: 0;
    padding-left: 0;
  }

  .home-section {
    margin-right: var(--spacing-md);
    margin-left: var(--spacing-md);
  }

  .home-section-contained {
    border-radius: var(--radius-md);
  }

  .home-section > .container {
    padding-right: 0;
    padding-left: 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .product-section {
    padding: var(--spacing-lg);
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-note {
    align-items: stretch;
    flex-direction: column;
  }

  .product-note .btn {
    width: 100%;
    text-align: center;
  }

  .page-hero {
    padding-top: 6.5rem;
  }

  .page-shell {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-2xl);
  }

  .page-aside {
    position: static;
  }

  .page-image-grid {
    grid-template-columns: 1fr;
  }

  .page-inline-image {
    max-width: none;
  }

  .page-inline-image-right {
    float: none;
    margin: var(--spacing-lg) 0;
  }

  .site-footer-main {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }

  .site-footer-logo {
    width: 7rem;
  }
}

@media (min-width: 769px) and (max-width: 1020px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}