/* ═══════════════════════════════════════════════════════════════
   PANATTOS – Design System
   Tokens → Reset → Base → Layout → Components → Utilities
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Open+Sans:wght@400;500;600;700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Colors – Panattos Identity */
  --c-primary:         #A61E1E;
  --c-primary-light:   #C94A4A;
  --c-primary-dark:    #7D1515;
  --c-secondary:       #B8955A;
  --c-secondary-light: #D4B896;
  --c-accent:          #2C2C2C;
  --c-accent-light:    #444444;

  --c-cream:           #F8F7F5;
  --c-cream-mid:       #EFEFED;
  --c-cream-dark:      #E5E3DF;

  --c-dark:            #1A1A1A;
  --c-gray-800:        #2C2C2C;
  --c-gray-600:        #555555;
  --c-gray-400:        #888888;
  --c-gray-200:        #CCCCCC;
  --c-gray-100:        #F5F5F5;
  --c-white:           #FFFFFF;

  /* Typography – Panattos */
  --f-display: 'Lobster', cursive;
  --f-sans:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;
  --fs-6xl:  3.75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-base:   1.6;
  --lh-loose:  1.8;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs:  0 1px 4px rgba(0,0,0,0.06);
  --sh-sm:  0 2px 8px rgba(0,0,0,0.08);
  --sh-md:  0 4px 16px rgba(0,0,0,0.10);
  --sh-lg:  0 8px 32px rgba(0,0,0,0.12);
  --sh-xl:  0 16px 48px rgba(0,0,0,0.16);

  /* Transitions */
  --tr-fast: 150ms ease;
  --tr-base: 250ms ease;
  --tr-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1280px;
  --container-pad: var(--sp-6);
  --header-h:      72px;
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: calc(var(--header-h) + 24px); overflow-x: clip; }

body {
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-dark);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
input, textarea { font: inherit; }

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--sp-24);
}

.section--lg {
  padding-block: var(--sp-32);
}

section {
  position: relative;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
.heading-display {
  font-family: var(--f-display);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.heading-1 {
  font-family: var(--f-display);
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.heading-2 {
  font-family: var(--f-display);
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl));
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.heading-3 {
  font-family: var(--f-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--tr-base);
  white-space: nowrap;
}

.btn--primary {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 4px 16px rgba(166, 30, 30, 0.30);
}
.btn--primary:hover {
  background: var(--c-primary-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(166, 30, 30, 0.40);
}

.btn--secondary {
  background: transparent;
  color: var(--c-white);
  border: 2px solid rgba(255,255,255,0.6);
}
.btn--secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--c-white);
}

.btn--outline {
  background: transparent;
  color: var(--c-primary);
  border: 2px solid var(--c-primary);
}
.btn--outline:hover {
  background: var(--c-primary);
  color: var(--c-white);
}

.btn--dark {
  background: var(--c-dark);
  color: var(--c-white);
}
.btn--dark:hover {
  background: var(--c-gray-800);
  transform: translateY(-1px);
}

.btn--lg {
  padding: var(--sp-4) var(--sp-10);
  font-size: var(--fs-base);
}

/* ── HEADER ──────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-200);
  display: flex;
  align-items: center;
  transition: box-shadow var(--tr-base);
}

.site-header.scrolled {
  box-shadow: var(--sh-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  text-decoration: none;
}

.logo-img {
  display: block;
  max-height: 48px;
  width: auto;
}

.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--c-primary);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--c-white);
  font-size: 18px;
  font-weight: var(--fw-black);
  font-family: var(--f-display);
  letter-spacing: -1px;
}

.logo-text {
  font-size: var(--fs-xl);
  font-weight: 400;
  font-family: var(--f-display);
  color: var(--c-dark);
  letter-spacing: -0.03em;
}

.logo-text span {
  color: var(--c-primary);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.site-nav a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-gray-600);
  transition: color var(--tr-fast);
  position: relative;
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transition: transform var(--tr-base);
  border-radius: var(--r-full);
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--c-primary);
}

.site-nav a:hover::after,
.site-nav a.active::after {
  transform: scaleX(1);
}

/* Dropdown */
.nav-dropdown {
  position: relative;
  padding-block: var(--sp-6);
  margin-block: calc(var(--sp-6) * -1);
}

.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 20px;
  pointer-events: none;
}

.nav-dropdown:hover::after {
  pointer-events: auto;
}

.nav-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-gray-600);
  cursor: pointer;
  transition: color var(--tr-fast);
  text-decoration: none;
}

.nav-dropdown__trigger::after {
  display: none !important;
}

.nav-dropdown__trigger:hover,
.nav-dropdown:hover .nav-dropdown__trigger {
  color: var(--c-primary);
}

.nav-dropdown__trigger.active {
  color: var(--c-primary);
}

.nav-dropdown__trigger svg {
  transition: transform var(--tr-base);
  flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown__trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown__all {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  transition: background var(--tr-fast);
}

.nav-dropdown__all:hover {
  background: rgba(166,30,30,0.06);
}

.nav-dropdown__all::after {
  display: none;
}

.nav-dropdown__divider {
  height: 1px;
  background: var(--c-gray-100);
  margin: var(--sp-2) var(--sp-4);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--c-white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: var(--sp-3);
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border: 1px solid var(--c-gray-200);
  transition: opacity var(--tr-base), transform var(--tr-base), visibility var(--tr-base);
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-gray-800);
  transition: background var(--tr-fast);
}

.nav-dropdown__menu a:hover {
  background: var(--c-gray-100);
  color: var(--c-primary);
}

.nav-dropdown__menu a::after {
  display: none;
}

.menu-category-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Mobile menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
}

.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--c-dark);
  border-radius: var(--r-full);
  transition: all var(--tr-base);
  transform-origin: center;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  display: flex;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--c-white);
  z-index: 99;
  padding: var(--sp-8) var(--container-pad);
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    visibility 0s linear 0.35s;
  border-top: 1px solid var(--c-gray-100);
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}

.mobile-nav.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    visibility 0s linear 0s;
}

.mobile-nav a {
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--c-gray-100);
  color: var(--c-gray-800);
  transition: color var(--tr-fast), padding-left var(--tr-fast);
}

.mobile-nav a:hover {
  color: var(--c-primary);
  padding-left: var(--sp-4);
}

.mobile-nav-section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gray-400);
  padding: var(--sp-6) var(--sp-2) var(--sp-2);
}

.mobile-nav-products-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
  border-bottom: 1px solid var(--c-gray-100);
  background: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--tr-fast);
}

.mobile-nav-products-row:hover,
.mobile-nav-products-row.active {
  color: var(--c-primary);
}

.mobile-nav-products-row svg {
  transition: transform var(--tr-base);
  flex-shrink: 0;
  color: var(--c-gray-400);
}

.mobile-nav-products-row[aria-expanded="true"] {
  color: var(--c-primary);
}

.mobile-nav-products-row[aria-expanded="true"] svg {
  transform: rotate(180deg);
  color: var(--c-primary);
}

.mobile-nav-sub-group {
  display: none;
  flex-direction: column;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--c-gray-100);
  background: var(--c-gray-100);
}

.mobile-nav-sub-group.open {
  display: flex;
}

.mobile-nav-sub--all {
  color: var(--c-primary) !important;
  font-weight: var(--fw-semibold) !important;
  border-bottom: 1px solid var(--c-cream-dark) !important;
  margin-bottom: var(--sp-1);
}

.mobile-nav-sub {
  padding: var(--sp-3) var(--sp-2) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--c-gray-600) !important;
  border-bottom: none !important;
}

.mobile-nav-sub:hover {
  color: var(--c-primary) !important;
  padding-left: var(--sp-4) !important;
}

.mobile-nav a.active {
  color: var(--c-primary);
}

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--c-accent);
  overflow: hidden;
  padding-top: var(--header-h);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(184, 149, 90, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(166, 30, 30, 0.15) 0%, transparent 50%),
    linear-gradient(160deg, #3A1515 0%, #4A1F1F 40%, #2D1010 100%);
}

.hero-pattern {
  position: absolute;
  inset: 0;
  /* background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.015) 40px,
      rgba(255,255,255,0.015) 41px
    ); */
    background: #3a1515;
}

.hero-decoration {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%) rotate(-18deg);
  font-size: clamp(320px, 52vw, 640px);
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  filter: saturate(1.4);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(184,149,90,0.4) 50%, transparent 100%);
  z-index: 2;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding-block: var(--sp-20);
}

.hero-image-wrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  overflow: hidden;
  pointer-events: none;
}

.hero-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #3A1515 0%, rgba(58,21,21,0.55) 35%, transparent 75%);
  z-index: 1;
  pointer-events: none;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(184, 149, 90, 0.15);
  border: 1px solid rgba(184, 149, 90, 0.3);
  border-radius: var(--r-full);
  color: var(--c-secondary-light);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-8);
}

.hero-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-secondary-light);
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(var(--fs-4xl), 7vw, 84px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-white);
  margin-bottom: var(--sp-8);
  text-shadow: 0 2px 40px rgba(0,0,0,0.3);
}

.hero-title em {
  font-style: normal;
  color: var(--c-secondary-light);
  position: relative;
}

/* .hero-title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 3px;
  background: var(--c-secondary);
  border-radius: var(--r-full);
  opacity: 0.4;
} */

.hero-subtitle {
  font-size: clamp(var(--fs-base), 2vw, var(--fs-xl));
  line-height: var(--lh-loose);
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin-bottom: var(--sp-10);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.hero-stats {
  margin-top: var(--sp-16);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-4);
  width: fit-content;
  max-width: 100%;
}

.hero-stat {
  text-align: center;
  padding: 0 var(--sp-6);
  position: relative;
}

.hero-stat + .hero-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(255,255,255,0.12);
}

.hero-stat__number {
  font-family: var(--f-display);
  font-size: var(--fs-4xl);
  font-weight: 400;
  color: var(--c-secondary-light);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-stat__label {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-2);
  white-space: nowrap;
}

/* ── SECTION HEADER ──────────────────────────────────────────── */
.section-header {
  margin-bottom: var(--sp-16);
  max-width: 720px;
}

.section-header--center {
  text-align: center;
  margin-inline: auto;
}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}

.section-header__eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--c-primary);
  border-radius: var(--r-full);
}

.section-header--center .section-header__eyebrow::before {
  display: none;
}

.section-header__title {
  font-family: var(--f-display);
  font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-4xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--c-dark);
}

.section-header__desc {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--c-gray-600);
  line-height: var(--lh-loose);
  max-width: 600px;
}

.section-header--center .section-header__desc {
  margin-inline: auto;
}

/* ── CATEGORIES GRID ─────────────────────────────────────────── */
.categories-section {
  background: var(--c-white);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.category-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: block;
  aspect-ratio: 4/3;
  transition: transform var(--tr-slow), box-shadow var(--tr-slow);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(166,30,30,0.18);
}

.category-card:hover .category-card__overlay {
  opacity: 1;
}

.category-card:hover .category-card__arrow {
  background: var(--c-secondary);
  transform: rotate(-45deg);
}

.category-card:hover .category-card__icon-wrap {
  transform: translate(-50%, -60%) scale(1.08) rotate(-6deg);
}

.category-card__bg {
  position: absolute;
  inset: 0;
  transition: transform var(--tr-slow);
}

.category-card:hover .category-card__bg {
  transform: scale(1.04);
}

.category-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--tr-slow);
  z-index: 1;
}

.category-card:hover .category-card__img {
  transform: scale(1.06);
}

.category-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.15) 100%);
  opacity: 1;
  transition: opacity var(--tr-base);
  z-index: 2;
}

.category-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-6) var(--sp-8) var(--sp-8);
  color: var(--c-white);
  z-index: 3;
}

.category-card__name {
  font-family: var(--f-display);
  font-size: clamp(var(--fs-2xl), 2.8vw, var(--fs-3xl));
  font-weight: 400;
  line-height: 1;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}

.category-card__tagline {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.8);
  line-height: var(--lh-snug);
  max-width: 88%;
}

.category-card__arrow {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  z-index: 3;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  color: var(--c-white);
  transition: all var(--tr-base);
  z-index: 1;
}

/* ── DIFFERENTIALS ───────────────────────────────────────────── */
.differentials-section {
  background: var(--c-cream);
}

.differentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.differential-card {
  background: var(--c-white);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  border: 1px solid var(--c-cream-dark);
  transition: all var(--tr-slow);
  position: relative;
  overflow: hidden;
}

.differential-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--c-primary);
  transition: width var(--tr-slow);
}

.differential-card:hover {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(166,30,30,0.12);
  transform: translateY(-4px);
}

.differential-card:hover::before {
  width: 100%;
}

.differential-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--c-cream) 0%, var(--c-cream-mid) 100%);
  display: grid;
  place-items: center;
  font-size: 26px;
  margin-bottom: var(--sp-5);
  transition: all var(--tr-slow);
}

.differential-card:hover .differential-icon {
  background: linear-gradient(135deg, rgba(166,30,30,0.08) 0%, rgba(184,149,90,0.12) 100%);
  transform: scale(1.08) rotate(-4deg);
}

.differential-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
  color: var(--c-dark);
  line-height: var(--lh-snug);
}

.differential-desc {
  font-size: var(--fs-sm);
  color: var(--c-gray-600);
  line-height: var(--lh-loose);
}

.differential-desc strong {
  color: var(--c-dark);
  font-weight: var(--fw-semibold);
}

/* ── ABOUT SECTION (TIJOLINHOS/TAGS FLUIDAS) ──────────────────── */
.about-section {
  background: var(--c-cream);
}

.principles-bricks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  max-width: 960px;
  margin-inline: auto;
}

.principle-tag {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-lg);
  padding: var(--sp-12) var(--sp-8) var(--sp-8);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-gray-800);
  line-height: 1.6;
  text-align: center;
  white-space: normal;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
  transition:
    transform var(--tr-base),
    box-shadow var(--tr-base),
    border-color var(--tr-base),
    background var(--tr-base);
}

/* Top decorative line: gold gradient fading in from both sides */
.principle-tag::before {
  content: '';
  position: absolute;
  top: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--c-secondary) 50%,
    transparent 100%
  );
  transition: width var(--tr-base), background var(--tr-base);
}

/* Centered diamond accent sitting on the gold line */
.principle-tag::after {
  content: '';
  position: absolute;
  top: calc(var(--sp-6) - 3.5px);
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-white);
  transition: transform var(--tr-base), background var(--tr-base);
}

.principle-tag:hover {
  background: var(--c-white);
  border-color: rgba(166, 30, 30, 0.25);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -18px rgba(166, 30, 30, 0.28);
  color: var(--c-dark);
}

.principle-tag:hover::before {
  width: 96px;
}

.principle-tag:hover::after {
  background: var(--c-secondary);
  transform: translateX(-50%) rotate(45deg) scale(1.3);
}

/* ── LOCATION ───────────────────────────────────────────────── */
.location-section {
  background: var(--c-white);
  padding-top: var(--sp-16);
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "top map"
    "bot map";
  column-gap: var(--sp-16);
  row-gap: var(--sp-8);
}

.location-info-top {
  grid-area: top;
  align-self: start;
}

.location-info-top .section-header {
  margin-bottom: 0;
}

.location-info-bot {
  grid-area: bot;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-self: start;
}

.location-body {
  color: var(--c-gray-600);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.location-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--c-cream);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--c-primary);
  padding: var(--sp-6) var(--sp-8);
}

.location-address__block {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.location-icon {
  color: var(--c-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.location-address__block p {
  font-size: var(--fs-sm);
  color: var(--c-gray-800);
  line-height: var(--lh-snug);
}

.location-contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-cream-dark);
}

.location-contact a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-gray-800);
  transition: color var(--tr-fast);
}

.location-contact a:hover {
  color: var(--c-primary);
}

.location-note {
  font-size: var(--fs-xs);
  color: var(--c-gray-400);
  line-height: var(--lh-snug);
}

.location-btn {
  align-self: flex-start;
}

.location-map {
  grid-area: map;
  align-self: stretch;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
  min-height: 420px;
  position: relative;
}

.location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── TIMELINE ────────────────────────────────────────────────── */
.timeline-section {
  background: var(--c-dark);
  padding-block: var(--sp-24);
  overflow: hidden;
}

.timeline-section .section-header__eyebrow {
  color: var(--c-secondary);
}

.timeline-section .section-header__title {
  color: var(--c-white);
}

.timeline {
  position: relative;
  margin-top: var(--sp-16);
  padding-bottom: var(--sp-4);
}

.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    var(--c-primary) 0px,
    var(--c-primary) 8px,
    transparent 8px,
    transparent 18px
  );
  opacity: 0.4;
  pointer-events: none;
}

.timeline-item {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: var(--sp-10);
  opacity: 1;
  transform: none;
  position: relative;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-node {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.timeline-dot {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: var(--lh-tight);
  flex-shrink: 0;
  box-shadow:
    0 0 0 4px rgba(166, 30, 30, 0.25),
    0 4px 20px rgba(166, 30, 30, 0.45);
}

.timeline-dot__slash {
  opacity: 0.5;
  margin-inline: 1px;
}

.timeline-card {
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: background var(--tr-base), transform var(--tr-base), border-color var(--tr-base);
}

.timeline-card:hover {
  background: #2f2f2f;
  border-color: rgba(166, 30, 30, 0.3);
  transform: translateY(-2px);
}

.timeline-item--left .timeline-card {
  text-align: right;
}

.timeline-item--right .timeline-card {
  text-align: left;
}

.timeline-card__label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: var(--sp-3);
}

.timeline-card__text {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--lh-base);
  margin: 0;
}

/* ── CTA BAND ────────────────────────────────────────────────── */
.cta-band {
  background:
    linear-gradient(135deg, rgba(58,21,21,0.93) 0%, rgba(125,21,21,0.88) 50%, rgba(166,30,30,0.85) 100%),
    url('../img/cta-bg.jpg') center / cover no-repeat;
  background-color: #3A1515;
  padding-block: var(--sp-24);
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(184,149,90,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 0% 30%, rgba(255,255,255,0.08) 0%, transparent 60%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(255,255,255,0.025) 30px,
      rgba(255,255,255,0.025) 31px
    );
}

.cta-band::after {
  content: '🥖';
  position: absolute;
  right: -60px;
  bottom: -80px;
  font-size: 360px;
  opacity: 0.05;
  transform: rotate(-20deg);
  pointer-events: none;
  line-height: 1;
}

.cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  flex-wrap: wrap;
  z-index: 1;
}

.cta-band__text .section-header__eyebrow {
  color: var(--c-secondary-light);
}

.cta-band__text .section-header__title {
  color: var(--c-white);
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
}

.cta-band__text .section-header__desc {
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-lg);
}

.cta-band__text .section-header {
  margin-bottom: 0;
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
  align-items: stretch;
}

.cta-band .btn--dark {
  background: var(--c-secondary);
  color: var(--c-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.cta-band .btn--dark:hover {
  background: var(--c-secondary-light);
  color: var(--c-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.cta-info {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.7);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ── NEWSLETTER ──────────────────────────────────────────────── */
.newsletter-section {
  background: var(--c-cream);
  padding-block: var(--sp-20);
  border-top: 1px solid var(--c-cream-dark);
}

.newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

.newsletter-text {
  flex: 1;
  min-width: 280px;
}

.newsletter-text .section-header__title {
  font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
}

.newsletter-form {
  display: flex;
  gap: var(--sp-3);
  flex: 1;
  min-width: 300px;
  max-width: 480px;
}

.newsletter-form input {
  flex: 1;
  padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--c-cream-dark);
  border-radius: var(--r-full);
  background: var(--c-white);
  font-size: var(--fs-sm);
  color: var(--c-dark);
  transition: all var(--tr-base);
  outline: none;
}

.newsletter-form input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(166,30,30,0.08);
}

.newsletter-form input::placeholder {
  color: var(--c-gray-400);
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--c-dark);
  color: var(--c-white);
  padding-top: var(--sp-16);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-12);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand__desc {
  color: rgba(255,255,255,0.55);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  margin-top: var(--sp-4);
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--c-white);
  text-decoration: none;
  transition: all var(--tr-fast);
}

.footer-social a:hover {
  background: var(--c-primary);
  transform: translateY(-4px);
}

.footer-logo-img {
  max-height: 44px;
  width: auto;
  display: block;
}

.footer-address {
  font-style: normal;
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.footer-address p {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.65);
  line-height: var(--lh-snug);
}

.footer-logo-text {
  font-size: var(--fs-xl);
  font-weight: 400;
  font-family: var(--f-display);
  letter-spacing: -0.03em;
}

.footer-logo-text span { color: var(--c-secondary-light); }

.footer-col__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--sp-5);
}

.footer-col__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-col__links a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.65);
  transition: color var(--tr-fast);
}

.footer-col__links a:hover {
  color: var(--c-white);
}

.footer-newsletter {
  padding: var(--sp-8) 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.footer-newsletter__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.footer-newsletter__sub {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.55);
  margin-top: var(--sp-1);
}

.footer-newsletter__form {
  display: flex;
  gap: var(--sp-3);
  flex: 1;
  max-width: 400px;
}

.footer-newsletter__form input {
  flex: 1;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.07);
  color: var(--c-white);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color var(--tr-base);
}

.footer-newsletter__form input::placeholder {
  color: rgba(255,255,255,0.35);
}

.footer-newsletter__form input:focus {
  border-color: var(--c-secondary-light);
}

.footer-bottom {
  padding-block: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.footer-bottom__copy {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.35);
}

/* ── PRODUCTS GRID ───────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.product-card {
  background: var(--c-white);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.07), 0 1px 2px rgba(26, 26, 26, 0.05);
  transition: transform var(--tr-slow), box-shadow var(--tr-slow);
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-secondary) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tr-slow);
  z-index: 2;
}

.product-card:hover {
  box-shadow: 0 20px 48px rgba(166,30,30,0.14);
  transform: translateY(-8px);
}

.product-card:hover::after {
  transform: scaleX(1);
}

.product-card__image {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.product-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.product-card__image-icon {
  font-size: 96px;
  opacity: 0.7;
  transition: transform var(--tr-slow), opacity var(--tr-base);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.2));
}

.product-card:hover .product-card__image-icon {
  transform: scale(1.15) rotate(-5deg);
  opacity: 0.85;
}

.product-card__quick-view {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--tr-base);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.product-card:hover .product-card__quick-view {
  opacity: 1;
}

.quick-view-btn {
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-white);
  color: var(--c-dark);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all var(--tr-fast);
  transform: translateY(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.product-card:hover .quick-view-btn {
  transform: translateY(0);
}

.quick-view-btn:hover {
  background: var(--c-primary);
  color: var(--c-white);
}

.product-card__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__code {
  font-size: var(--fs-xs);
  color: var(--c-gray-400);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}

.product-card__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-dark);
  margin-bottom: var(--sp-4);
  flex: 1;
}

.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tag {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--c-gray-100);
  color: var(--c-gray-600);
}

.tag--primary {
  background: rgba(166,30,30,0.08);
  color: var(--c-primary);
}

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-slow);
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--c-white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 820px;
  max-height: 90svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.98);
  transition: transform var(--tr-slow);
}

.modal-backdrop.open .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 220px;
  flex-shrink: 0;
}

.modal-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.modal-image-icon {
  font-size: 96px;
  opacity: 0.6;
  position: relative;
  z-index: 1;
}

.modal-info {
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--c-gray-100);
}

.modal-code {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}

.modal-name {
  font-family: var(--f-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-dark);
  margin-bottom: var(--sp-4);
}

.modal-weight-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-gray-100);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-gray-600);
  margin-bottom: var(--sp-4);
  width: fit-content;
}

.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--c-gray-600);
  transition: all var(--tr-fast);
  z-index: 10;
  box-shadow: var(--sh-sm);
}

.modal-close:hover {
  background: var(--c-white);
  color: var(--c-dark);
}

.modal-body {
  overflow-y: auto;
  flex: 1;
}

.modal-description {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--c-gray-100);
  font-size: var(--fs-base);
  color: var(--c-gray-600);
  line-height: var(--lh-loose);
}

/* Tabs */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-gray-200);
  padding-inline: var(--sp-8);
  gap: var(--sp-2);
  overflow-x: auto;
  flex-shrink: 0;
}

.modal-tab {
  padding: var(--sp-4) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-gray-400);
  border-bottom: 2px solid transparent;
  transition: all var(--tr-base);
  white-space: nowrap;
  cursor: pointer;
}

.modal-tab.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

.modal-tab:hover:not(.active) {
  color: var(--c-gray-800);
}

.modal-panels {
  padding: var(--sp-8);
}

.modal-panel {
  display: none;
}

.modal-panel.active {
  display: block;
}

.modal-panel p {
  font-size: var(--fs-sm);
  color: var(--c-gray-600);
  line-height: var(--lh-loose);
}

/* Nutrition table */
.nutrition-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.nutrition-table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-gray-100);
  font-weight: var(--fw-semibold);
  color: var(--c-gray-600);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nutrition-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-gray-100);
  color: var(--c-gray-800);
}

.nutrition-table tr:last-child td {
  border-bottom: none;
}

.nutrition-serving {
  font-size: var(--fs-xs);
  color: var(--c-gray-400);
  margin-bottom: var(--sp-4);
}

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.page-header {
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-12);
  background: var(--c-dark);
  color: var(--c-white);
}

.page-header--categories {
  background:
    linear-gradient(160deg, rgba(26,26,26,0.96) 0%, rgba(44,44,44,0.90) 100%),
    url('img/hero.jpg') center / cover no-repeat;
  background-color: var(--c-dark);
  padding-bottom: var(--sp-16);
}

.page-header__body {
  max-width: 640px;
}

.page-header__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-secondary-light);
  margin-bottom: var(--sp-3);
  display: block;
}

.page-header__title {
  font-family: var(--f-display);
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  margin-top: var(--sp-3);
}

.page-header__desc {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.65);
  line-height: var(--lh-loose);
  max-width: 560px;
}

.back-to-categories {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.6);
  transition: color var(--tr-fast), gap var(--tr-fast);
  text-decoration: none;
}

.back-to-categories:hover {
  color: var(--c-white);
  gap: var(--sp-3);
}

.categories-cta {
  text-align: center;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-cream-dark);
}

.categories-grid--full {
  grid-template-columns: repeat(3, 1fr);
}

.modal-image--no-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image--no-img::after {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--sp-6);
}

.breadcrumb a {
  color: rgba(255,255,255,0.6);
  transition: color var(--tr-fast);
}

.breadcrumb a:hover {
  color: var(--c-white);
}

.breadcrumb-sep {
  color: rgba(255,255,255,0.25);
}

/* ── CATEGORY PAGE ───────────────────────────────────────────── */
.category-products-section {
  background: var(--c-cream);
  padding-block: var(--sp-16);
}

.category-filters {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
  flex-wrap: wrap;
}

.filter-btn {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 2px solid var(--c-gray-200);
  background: var(--c-white);
  color: var(--c-gray-600);
  transition: all var(--tr-base);
  cursor: pointer;
}

.filter-btn:hover,
.filter-btn.active {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: rgba(166,30,30,0.04);
}

/* Other categories band */
.other-categories {
  background: var(--c-white);
  padding-block: var(--sp-16);
}

.other-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

/* ── WORK WITH US ────────────────────────────────────────────── */
.work-hero {
  padding-top: calc(var(--header-h) + var(--sp-20));
  padding-bottom: var(--sp-20);
  background: linear-gradient(160deg, #3A1515 0%, #4A1F1F 100%);
  color: var(--c-white);
}

.work-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.work-hero__kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.work-kpi {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

.work-kpi__number {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  color: var(--c-secondary-light);
  line-height: 1;
}

.work-kpi__label {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.55);
  margin-top: var(--sp-2);
  line-height: var(--lh-snug);
}

.jobs-section {
  background: var(--c-cream);
  padding-block: var(--sp-20);
}

.open-roles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}

.role-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  transition: all var(--tr-base);
}

.role-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--sh-md);
}

.role-card__info {}

.role-card__dept {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-1);
}

.role-card__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-dark);
  margin-bottom: var(--sp-2);
}

.role-card__meta {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-gray-500);
}

.role-card__meta span {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.spontaneous-cta {
  background: var(--c-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
  color: var(--c-white);
}

.spontaneous-cta__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}

.spontaneous-cta__sub {
  color: rgba(255,255,255,0.55);
  font-size: var(--fs-sm);
}

/* Values section */
.values-section {
  background: var(--c-white);
  padding-block: var(--sp-20);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.value-card {
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--c-cream);
}

.value-icon {
  font-size: 36px;
  margin-bottom: var(--sp-4);
}

.value-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-3);
}

.value-desc {
  font-size: var(--fs-sm);
  color: var(--c-gray-600);
  line-height: var(--lh-loose);
}

/* ── UTILITIES ───────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-center { text-align: center; }
.text-white  { color: var(--c-white); }
.text-cream  { color: var(--c-cream); }

.mt-auto { margin-top: auto; }

.page-content {
  padding-top: var(--header-h);
}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--c-dark);
  color: var(--c-white);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  z-index: 300;
  box-shadow: var(--sh-xl);
  transition: transform var(--tr-slow);
  white-space: nowrap;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .categories-grid--full {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .hero {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    min-height: auto;
  }

  .hero-image-wrap {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 55vh;
    /* order: -1; */
    /* background: linear-gradient(160deg, #3A1515 0%, #4A1F1F 100%); */
  }

  .hero-image-wrap::after {
    display: none;
  }

  .hero-image {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  }

  .hero-content {
    max-width: 100%;
    padding: 0 0 var(--sp-20);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .section {
    padding-block: var(--sp-16);
  }

  .section--lg {
    padding-block: var(--sp-20);
  }

.principles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --container-pad: var(--sp-5);
    --header-h: 64px;
  }

  .site-nav,
  .header-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .logo-img {
    max-height: 34px;
  }

  .hero-image-wrap {
    height: 45vh;
  }

  .hero-content {
    max-width: 100%;
  }

  .location-map {
    aspect-ratio: 4/3;
  }

  .hero-title {
    margin-bottom: var(--sp-6);
  }

  .hero-subtitle {
    margin-bottom: var(--sp-8);
  }

  .hero-actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .about-principles {
    padding: var(--sp-8);
  }

  .hero-stat__number {
    font-size: var(--fs-3xl);
  }

  .hero-stat__label {
    font-size: 9px;
    letter-spacing: 0.04em;
    white-space: normal;
    margin-top: var(--sp-1);
  }

  .hero-decoration {
    font-size: 320px;
    right: -20%;
    opacity: 0.04;
  }

  .categories-grid,
  .categories-grid--full {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .category-card {
    aspect-ratio: 16/10;
  }

  .category-card__body {
    padding: var(--sp-5) var(--sp-6);
  }

  .differentials-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .differential-card {
    padding: var(--sp-6);
  }

  .products-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .product-card__body {
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
  }

  .product-card__name {
    font-size: var(--fs-sm);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .location-section {
    padding-top: var(--sp-12);
  }

  .location-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "map"
      "bot";
    row-gap: var(--sp-8);
    column-gap: 0;
  }

  .location-map {
    aspect-ratio: 16/9;
    min-height: auto;
  }

  .location-btn {
    align-self: stretch;
    justify-content: center;
  }

  .timeline-section {
    padding-block: var(--sp-16);
  }

  /* ── hide the straight central track on mobile ── */
  .timeline-track { display: none; }

  /* ── per-item: remove old margin, use padding for connector space ── */
  .timeline-item--left,
  .timeline-item--right {
    align-items: start;
    margin-bottom: 0;
  }

  .timeline-item:not(:last-child) {
    padding-bottom: var(--sp-10);
  }

  /* Left item: card left, dot right */
  .timeline-item--left {
    grid-template-columns: 1fr 52px;
    grid-template-areas: "card node";
  }

  .timeline-item--left .timeline-card { grid-area: card; text-align: left; }
  .timeline-item--left .timeline-node { grid-area: node; }
  .timeline-item--left .timeline-gap  { display: none; }

  /* Right item: dot left, card right */
  .timeline-item--right {
    grid-template-columns: 52px 1fr;
    grid-template-areas: "node card";
  }

  .timeline-item--right .timeline-card { grid-area: card; text-align: left; }
  .timeline-item--right .timeline-node { grid-area: node; }
  .timeline-item--right .timeline-gap  { display: none; }

  .timeline-dot {
    width: 44px;
    height: 44px;
    font-size: 10px;
  }

  .timeline-card {
    padding: var(--sp-5) var(--sp-4);
    position: relative;
    z-index: 1;
  }

  /*
   * Zigzag connector: each non-last item draws an L-shaped path using
   * borders on ::after. The box spans from one dot center to the other
   * horizontally, and vertically from the current dot center down to the
   * next item's dot center (22px into the next item).
   *
   * Dot column = 52px wide → dot center = 26px from that edge.
   * Dot height = 44px → dot center Y = 22px from top.
   * Padding-bottom = var(--sp-10) = 40px (the gap between items).
   * bottom: -22px → overshoots 22px into next item → lands at next dot center Y.
   */

  /* Left item connector: vertical down from RIGHT dot, horizontal to left */
  .timeline-item--left:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 26px;
    right: 26px;
    bottom: -22px;
    border-right: 2px dashed rgba(166, 30, 30, 0.5);
    border-bottom: 2px dashed rgba(166, 30, 30, 0.5);
    border-bottom-right-radius: 12px;
    pointer-events: none;
  }

  /* Right item connector: vertical down from LEFT dot, horizontal to right */
  .timeline-item--right:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 26px;
    right: 26px;
    bottom: -22px;
    border-left: 2px dashed rgba(166, 30, 30, 0.5);
    border-bottom: 2px dashed rgba(166, 30, 30, 0.5);
    border-bottom-left-radius: 12px;
    pointer-events: none;
  }

  .cta-band {
    padding-block: var(--sp-16);
  }

  .cta-band__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-8);
  }

  .cta-band__actions .btn {
    justify-content: center;
  }

  .newsletter-inner {
    flex-direction: column;
    gap: var(--sp-6);
    align-items: stretch;
  }

  .newsletter-form {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
  }

  .newsletter-form .btn {
    justify-content: center;
  }

  .footer-newsletter__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .footer-newsletter__form {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
  }

  .footer-newsletter__form .btn {
    justify-content: center;
  }

  .modal {
    max-height: 92svh;
  }

  .modal-header {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .modal-image {
    min-height: 200px;
    aspect-ratio: 16/9;
  }

  .modal-info {
    border-left: none;
    border-top: 1px solid var(--c-gray-100);
    padding: var(--sp-6);
  }

  .modal-name {
    font-size: var(--fs-xl);
  }

  .modal-tabs {
    padding-inline: var(--sp-5);
  }

  .modal-description {
    padding: var(--sp-5) var(--sp-5);
  }

  .modal-panels {
    padding: var(--sp-5);
  }

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

  .other-categories-grid {
    grid-template-columns: 1fr;
  }

  .spontaneous-cta {
    flex-direction: column;
    padding: var(--sp-8);
    align-items: stretch;
    text-align: center;
  }

  .spontaneous-cta .btn {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .page-header {
    padding-top: calc(var(--header-h) + var(--sp-10));
    padding-bottom: var(--sp-10);
  }

  .role-card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-5) var(--sp-6);
  }

  .role-card .btn {
    justify-content: center;
  }

  .role-card__meta {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .category-filters {
    gap: var(--sp-2);
  }

  .filter-btn {
    font-size: var(--fs-xs);
    padding: var(--sp-2) var(--sp-4);
  }

.principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .principle-card {
    min-height: 120px;
  }

  .principles-grid-clean {
    grid-template-columns: 1fr;
  }


.principles-bricks {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    max-width: 560px;
  }

  .principles-card-grid {
    grid-template-columns: repeat(2, 1fr); /* Mantém os cartões 2 a 2, mais organizado */
    gap: var(--sp-3); /* Reduz um pouco o espaçamento no mobile */
  }
  
  .principle-card {
    padding: var(--sp-4);
  }
  
  .principle-card p {
    font-size: var(--fs-sm);
  }
  
  .principle-tag {
    padding: var(--sp-10) var(--sp-5) var(--sp-6);
    font-size: var(--fs-sm);
    min-height: 120px;
  }

  .principle-tag::before {
    top: var(--sp-5);
    width: 44px;
  }

  .principle-tag::after {
    top: calc(var(--sp-5) - 3px);
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: clamp(var(--fs-4xl), 10vw, var(--fs-5xl));
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stat__number {
    font-size: var(--fs-2xl);
  }

  .hero-stat__label {
    font-size: 9px;
  }

  .modal {
    border-radius: var(--r-lg);
  }

  .modal-panels {
    padding: var(--sp-4);
  }

  .modal-tabs {
    padding-inline: var(--sp-4);
  }

  .modal-description {
    padding: var(--sp-4);
  }

  .work-hero__kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .work-kpi {
    padding: var(--sp-4);
  }

  .work-kpi__number {
    font-size: var(--fs-3xl);
  }

.principles-grid {
    grid-template-columns: 1fr;
  }
  .principle-card {
    min-height: auto;
  }
}
/* Breakpoint para telas menores (Tablets grandes) */
@media (max-width: 1200px) {
  .principles-card-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 colunas, flui melhor */
  }
}