/* Cocada da Maria — v2 editorial cinematográfico moody */

@layer reset, tokens, base, layout, components, pages, utilities, motion;

/* ============================================
   TOKENS
   ============================================ */
@layer tokens {
  :root {
    --cacau-950: #15090B;
    --cacau-900: #1F1310;
    --cacau-800: #2E1A14;
    --cacau-700: #43251B;
    --cacau-500: #6B3D2A;
    --cobre-600: #9B6A2E;
    --cobre-500: #C2864A;
    --cobre-400: #D9A56B;
    --manteiga-50: #FAF4E8;
    --manteiga-100: #F2E8D2;
    --manteiga-200: #E5D6B5;
    --terra-700: #5C3525;
    --whatsapp-500: #1FAD55;
    --whatsapp-600: #1A9648;
    --sinal-erro: #A03328;

    --bg-primary: var(--manteiga-50);
    --bg-elevated: var(--manteiga-100);
    --bg-cinematic: var(--cacau-900);
    --bg-deep: var(--cacau-950);
    --text-primary: var(--terra-700);
    --text-secondary: var(--cacau-500);
    --text-on-dark: var(--manteiga-50);
    --text-on-dark-muted: var(--manteiga-200);
    --accent-gold: var(--cobre-500);
    --accent-gold-on-dark: var(--cobre-400);
    --accent-gold-hover: var(--cobre-600);
    --divider: var(--manteiga-200);
    --divider-on-dark: var(--cacau-700);
    --link: var(--cobre-600);
    --link-hover: var(--cacau-900);
    --link-on-dark: var(--cobre-400);
    --cta-whatsapp: var(--whatsapp-500);
    --cta-whatsapp-hover: var(--whatsapp-600);
    --focus-ring: var(--cobre-400);

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --fs-caption: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);
    --fs-body-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
    --fs-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
    --fs-body-lg: clamp(1.125rem, 1.10rem + 0.10vw, 1.1875rem);
    --fs-lead: clamp(1.25rem, 1.13rem + 0.50vw, 1.5rem);
    --fs-h4: clamp(1.375rem, 1.20rem + 0.75vw, 1.75rem);
    --fs-h3: clamp(1.75rem, 1.40rem + 1.50vw, 2.5rem);
    --fs-h2: clamp(2.25rem, 1.60rem + 2.75vw, 3.75rem);
    --fs-h1: clamp(2.75rem, 1.50rem + 5.25vw, 5.5rem);
    --fs-display-massive: clamp(3.75rem, 1.40rem + 9.90vw, 9rem);

    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 12px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;
    --space-3xl: 144px;
    --space-4xl: 200px;

    --container-narrow: 680px;
    --container-content: 960px;
    --container-wide: 1200px;
    --gutter-mobile: 20px;
    --gutter-desktop: 48px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --radius-image: 2px;

    --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-editorial: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-glacial: cubic-bezier(0.4, 0, 0.6, 1);
    --dur-instant: 80ms;
    --dur-snap: 160ms;
    --dur-smooth: 320ms;
    --dur-cinematic: 720ms;
    --dur-glacial: 1400ms;

    --header-h: 64px;
    --shadow-sm: 0 1px 3px rgba(21, 9, 11, 0.10);
    --shadow-md: 0 6px 16px rgba(21, 9, 11, 0.14);
    --shadow-lg: 0 14px 36px rgba(21, 9, 11, 0.22);
  }
  @media (min-width: 1000px) {
    :root { --header-h: 80px; }
  }
}

/* ============================================
   RESET
   ============================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--header-h);
    overflow-x: clip;
  }
  @supports not (overflow: clip) {
    html { overflow-x: hidden; }
  }
  body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
  }
  img, svg, video, picture { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
  ul, ol { list-style: none; }
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  ::selection { background: var(--cobre-500); color: var(--manteiga-50); }
}

/* ============================================
   BASE
   ============================================ */
@layer base {
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-style: italic;
    line-height: 1.1;
    color: var(--cacau-900);
    letter-spacing: 0;
  }
  h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: 0; line-height: 1.05; }
  h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: 1.10; }
  h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.20; }
  h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.30; }

  p { margin-block-end: var(--space-sm); }
  p:last-child { margin-block-end: 0; }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .eyebrow {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cobre-600);
    margin-block-end: var(--space-xs);
    display: inline-block;
  }
  [data-dark] .eyebrow,
  .is-dark .eyebrow { color: var(--cobre-400); }

  .lead {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-lead);
    line-height: 1.50;
    color: var(--text-secondary);
    max-width: var(--container-narrow);
  }
  [data-dark] .lead { color: var(--text-on-dark-muted); }

  blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.25;
    color: var(--cacau-900);
  }
}

/* ============================================
   LAYOUT
   ============================================ */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter-mobile);
  }
  .container--narrow { max-width: var(--container-narrow); }
  .container--content { max-width: var(--container-content); }
  @media (min-width: 1000px) {
    .container { padding-inline: var(--gutter-desktop); }
  }

  .section {
    padding-block: var(--space-xl);
  }
  .section--cinematic {
    background: var(--bg-cinematic);
    color: var(--text-on-dark);
  }
  .section--cinematic h1,
  .section--cinematic h2,
  .section--cinematic h3,
  .section--cinematic h4 { color: var(--text-on-dark); }
  .section--elevated { background: var(--bg-elevated); }
  .section--deep {
    background: var(--bg-deep);
    color: var(--text-on-dark);
  }
  .section--deep h1, .section--deep h2 { color: var(--text-on-dark); }
  .section--tight { padding-block: var(--space-lg); }
  .section--dramatic { padding-block: var(--space-2xl); }

  @media (min-width: 1000px) {
    .section { padding-block: var(--space-2xl); }
    .section--dramatic { padding-block: var(--space-3xl); }
    .section--tight { padding-block: var(--space-xl); }
  }

  .section__header {
    max-width: var(--container-content);
    margin-inline: auto;
    margin-block-end: var(--space-xl);
    text-align: center;
  }
  .section__header .lead { margin-inline: auto; margin-block-start: var(--space-sm); }
}

/* ============================================
   COMPONENTS
   ============================================ */
@layer components {
  /* Skip link */
  .u-skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--space-sm);
    z-index: 999;
    background: var(--cacau-900);
    color: var(--manteiga-50);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: inset-block-start var(--dur-snap) var(--ease-editorial);
  }
  .u-skip-link:focus { inset-block-start: var(--space-sm); }

  /* Header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: rgba(250, 244, 232, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur-smooth), box-shadow var(--dur-smooth), background var(--dur-smooth);
  }
  .site-header.is-scrolled {
    background: rgba(250, 244, 232, 0.95);
    border-block-end-color: var(--divider);
    box-shadow: var(--shadow-sm);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: var(--space-md);
    padding-inline: var(--gutter-mobile);
    max-width: var(--container-wide);
    margin-inline: auto;
  }
  @media (min-width: 1000px) {
    .site-header__inner { padding-inline: var(--gutter-desktop); gap: var(--space-lg); }
  }

  .site-header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header__logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--cobre-400), var(--cobre-600) 70%, var(--cacau-700));
    flex-shrink: 0;
    box-shadow: inset 0 -1px 2px rgba(21, 9, 11, 0.30);
  }
  .site-header__logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
  }
  .site-header__logo-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-body-lg);
    color: var(--cacau-900);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-header__logo-tagline {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cobre-600);
    margin-block-start: 2px;
    font-style: normal;
    font-weight: 600;
  }

  .site-nav { display: none; }
  @media (min-width: 1000px) { .site-nav { display: block; } }
  .site-nav__list {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
  }
  .site-nav__link {
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--text-primary);
    position: relative;
    padding-block: var(--space-2xs);
    transition: color var(--dur-snap);
  }
  .site-nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 0;
    height: 1.5px;
    background: var(--cobre-600);
    transition: width var(--dur-smooth) var(--ease-editorial);
  }
  .site-nav__link:hover { color: var(--cobre-600); }
  .site-nav__link:hover::after { width: 100%; }
  .site-nav__link.is-active { color: var(--cobre-600); }
  .site-nav__link.is-active::after { width: 100%; }

  .site-header .site-header__cta { display: none; }
  @media (min-width: 1000px) { .site-header .site-header__cta { display: inline-flex; } }

  /* Mobile toggle + drawer */
  .mobile-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-inline-start: auto;
    border-radius: var(--radius-pill);
  }
  @media (min-width: 1000px) { .mobile-toggle { display: none; } }
  .mobile-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cacau-900);
    transition: transform var(--dur-smooth), opacity var(--dur-snap);
  }
  .mobile-toggle[aria-expanded="true"] .mobile-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-toggle[aria-expanded="true"] .mobile-toggle__bar:nth-child(2) { opacity: 0; }
  .mobile-toggle[aria-expanded="true"] .mobile-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    inset-block-end: 0;
    background: var(--bg-cinematic);
    color: var(--text-on-dark);
    z-index: 99;
    padding: var(--space-xl) var(--gutter-mobile);
    transform: translateX(100%);
    transition: transform var(--dur-smooth) var(--ease-cinematic);
    overflow-y: auto;
  }
  .mobile-menu.is-open { transform: translateX(0); }
  @media (min-width: 1000px) { .mobile-menu { display: none; } }
  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-end: var(--space-xl);
  }
  .mobile-menu__link {
    display: block;
    padding-block: var(--space-md);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-h3);
    color: var(--text-on-dark);
    border-block-end: 1px solid var(--divider-on-dark);
    transition: color var(--dur-snap);
  }
  .mobile-menu__link:hover { color: var(--cobre-400); }
  .mobile-menu__link.is-active { color: var(--cobre-400); }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: var(--radius-pill);
    transition: transform var(--dur-snap), background var(--dur-smooth), box-shadow var(--dur-smooth), color var(--dur-smooth);
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    min-height: 48px;
  }
  .btn:active { transform: translateY(1px); }
  .btn--lg { padding: 18px 36px; font-size: var(--fs-body-sm); min-height: 56px; }
  .btn--block { width: 100%; }
  .btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

  .btn--pill-gold {
    background: var(--accent-gold);
    color: var(--cacau-900);
  }
  .btn--pill-gold:hover {
    background: var(--accent-gold-hover);
    color: var(--manteiga-50);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .btn--pill-whatsapp {
    background: var(--cta-whatsapp);
    color: white;
    box-shadow: var(--shadow-sm);
  }
  .btn--pill-whatsapp:hover {
    background: var(--cta-whatsapp-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .btn--ghost {
    background: transparent;
    color: var(--cobre-600);
    border: 1.5px solid var(--cobre-600);
  }
  .btn--ghost:hover { background: var(--cobre-600); color: var(--manteiga-50); }
  .section--cinematic .btn--ghost,
  .section--deep .btn--ghost {
    color: var(--cobre-400);
    border-color: var(--cobre-400);
  }
  .section--cinematic .btn--ghost:hover,
  .section--deep .btn--ghost:hover { background: var(--cobre-400); color: var(--cacau-900); }

  /* Arrow link */
  .btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-body-lg);
    color: var(--cobre-600);
    transition: gap var(--dur-smooth) var(--ease-snap);
  }
  .btn-arrow:hover { gap: var(--space-lg); }
  .btn-arrow__line {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 1.5px;
    background: currentColor;
    transition: width var(--dur-smooth) var(--ease-snap);
  }
  .btn-arrow:hover .btn-arrow__line { width: 64px; }
  .btn-arrow__line::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 50%;
    width: 9px;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-100%) rotate(45deg);
    transform-origin: right;
  }
  .btn-arrow__line::before {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 50%;
    width: 9px;
    height: 1.5px;
    background: currentColor;
    transform: translateY(0%) rotate(-45deg);
    transform-origin: right;
  }
  .section--cinematic .btn-arrow,
  .section--deep .btn-arrow { color: var(--cobre-400); }

  /* Hero cinematic */
  .hero {
    position: relative;
    width: 100%;
    height: 580px;
    height: min(85svh, 680px);
    overflow: hidden;
    background: var(--bg-cinematic);
    color: var(--text-on-dark);
  }
  @media (min-width: 1000px) {
    .hero {
      height: 720px;
      height: min(92svh, 800px);
    }
  }
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero__media picture,
  .hero__media video,
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero__media img { object-position: center; }
  .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
      rgba(21, 9, 11, 0.35) 0%,
      rgba(21, 9, 11, 0.10) 30%,
      rgba(21, 9, 11, 0.55) 70%,
      rgba(21, 9, 11, 0.92) 100%);
  }
  .hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter-mobile);
    padding-block-end: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  @media (min-width: 1000px) {
    .hero__content {
      padding-inline: var(--gutter-desktop);
      padding-block-end: var(--space-2xl);
    }
  }
  .hero__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cobre-400);
    margin-block-end: var(--space-sm);
  }
  .hero__title {
    color: var(--text-on-dark);
    font-size: var(--fs-display-massive);
    font-weight: 600;
    font-style: italic;
    line-height: 0.95;
    letter-spacing: 0;
    margin-block-end: var(--space-md);
    max-width: 14ch;
  }
  .hero__subtitle {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-body-lg);
    color: var(--text-on-dark-muted);
    max-width: 56ch;
    line-height: 1.55;
    margin-block-end: var(--space-lg);
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
  }
  .hero__scroll-cue {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: var(--space-md);
    z-index: 2;
    width: 1px;
    height: 56px;
    background: var(--cobre-400);
    opacity: 0.6;
    transform: translateX(-50%);
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero__scroll-cue::after {
      content: "";
      position: absolute;
      inset-inline-start: -2px;
      inset-block-start: 0;
      width: 5px;
      height: 5px;
      background: var(--cobre-400);
      border-radius: 50%;
      animation: scroll-pulse 2.4s ease-in-out infinite;
    }
  }
  @keyframes scroll-pulse {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(40px); opacity: 1; }
  }

  /* Page header (variante leve pra páginas internas) */
  .page-header {
    padding-block: var(--space-2xl) var(--space-lg);
    text-align: left;
  }
  .page-header__inner {
    max-width: var(--container-content);
    margin-inline: auto;
    padding-inline: var(--gutter-mobile);
  }
  .page-header__title {
    margin-block-end: var(--space-sm);
  }
  .page-header__subtitle {
    font-family: var(--font-body);
    color: var(--text-secondary);
    font-size: var(--fs-body-lg);
    max-width: 56ch;
  }
  .section--cinematic .page-header__subtitle { color: var(--text-on-dark-muted); }
  @media (min-width: 1000px) {
    .page-header { padding-block: var(--space-3xl) var(--space-xl); }
    .page-header__inner { padding-inline: var(--gutter-desktop); }
  }

  /* Sabor cards (home compacto) */
  .sabores-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  @media (min-width: 768px) {
    .sabores-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  }
  @media (min-width: 1000px) {
    .sabores-grid { gap: var(--space-lg); }
  }
  .sabor-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    color: inherit;
  }
  .sabor-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-image);
  }
  .sabor-card__media picture,
  .sabor-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-cinematic) var(--ease-cinematic), filter var(--dur-cinematic);
    filter: saturate(0.95);
  }
  .sabor-card__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cacau-800), var(--cacau-950));
  }
  .sabor-card__placeholder--maracuja { background: linear-gradient(135deg, var(--cobre-500), var(--cacau-800)); }
  .sabor-card__placeholder--coco { background: linear-gradient(135deg, var(--cacau-700), var(--cacau-950)); }
  .sabor-card__placeholder--leite { background: linear-gradient(135deg, var(--manteiga-200), var(--cobre-500)); }
  .sabor-card:hover .sabor-card__media img { transform: scale(1.04); filter: saturate(1.10); }
  .sabor-card__body { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .sabor-card__eyebrow {
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cobre-600);
  }
  .sabor-card__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-h3);
    color: var(--cacau-900);
    line-height: 1.10;
    transition: transform var(--dur-smooth) var(--ease-editorial);
  }
  .sabor-card:hover .sabor-card__title { transform: translateX(4px); }
  .sabor-card__desc {
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    line-height: 1.60;
    max-width: 38ch;
  }
  .sabor-card__price {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-body-lg);
    color: var(--cobre-600);
    margin-block-start: var(--space-2xs);
  }
  .section--cinematic .sabor-card__title { color: var(--text-on-dark); }
  .section--cinematic .sabor-card__desc { color: var(--text-on-dark-muted); }
  .section--cinematic .sabor-card__price { color: var(--cobre-400); }
  .section--cinematic .sabor-card__eyebrow { color: var(--cobre-400); }

  /* Sabor spread (/sabores expandido) */
  .sabor-spread {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
    padding-block: var(--space-xl);
  }
  .sabor-spread--invert .sabor-spread__media { order: 1; }
  .sabor-spread--invert .sabor-spread__body { order: 2; }
  @media (min-width: 1000px) {
    .sabor-spread {
      grid-template-columns: 7fr 5fr;
      gap: var(--space-2xl);
      padding-block: var(--space-2xl);
    }
    .sabor-spread--invert { grid-template-columns: 5fr 7fr; }
    .sabor-spread--invert .sabor-spread__media { order: 2; }
    .sabor-spread--invert .sabor-spread__body { order: 1; }
  }
  .sabor-spread__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
  }
  .sabor-spread__media--vertical { aspect-ratio: 5 / 7; }
  .sabor-spread__media picture,
  .sabor-spread__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sabor-spread__body { display: flex; flex-direction: column; gap: var(--space-md); }
  .sabor-spread__eyebrow-massive {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--cobre-500);
    line-height: 1;
    letter-spacing: 0;
    margin-block-end: var(--space-xs);
    opacity: 0.92;
  }
  .section--cinematic .sabor-spread__eyebrow-massive { color: var(--cobre-400); }
  .sabor-spread__title { margin-block-end: var(--space-xs); }
  .sabor-spread__desc {
    font-size: var(--fs-body-lg);
    line-height: 1.65;
    max-width: 50ch;
  }
  .section--cinematic .sabor-spread__desc { color: var(--text-on-dark-muted); }
  .sabor-spread__ingredients {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    padding-block: var(--space-sm);
    border-block-start: 1px solid var(--divider);
    border-block-end: 1px solid var(--divider);
  }
  .section--cinematic .sabor-spread__ingredients {
    color: var(--text-on-dark-muted);
    border-color: var(--divider-on-dark);
  }
  .sabor-spread__price {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-h2);
    color: var(--cobre-600);
    line-height: 1;
  }
  .section--cinematic .sabor-spread__price { color: var(--cobre-400); }
  .sabor-spread__divider { border-color: var(--divider); border-style: solid; border-width: 0 0 1px 0; }
  .section--cinematic .sabor-spread__divider { border-color: var(--divider-on-dark); }

  /* Pullquote editorial */
  .pullquote {
    position: relative;
    max-width: 880px;
    margin-inline: auto;
    margin-block: var(--space-2xl);
    padding-inline: var(--space-lg);
    text-align: center;
  }
  .pullquote__text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.25;
    color: var(--cacau-900);
  }
  .section--cinematic .pullquote__text { color: var(--text-on-dark); }
  .pullquote::before,
  .pullquote::after {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(4rem, 10vw, 7rem);
    color: var(--cobre-500);
    opacity: 0.75;
    line-height: 1;
    position: absolute;
  }
  .pullquote::before { content: "\201C"; inset-block-start: -36px; inset-inline-start: 0; }
  .pullquote::after { content: "\201D"; inset-block-end: -56px; inset-inline-end: 0; }
  .pullquote__attribution {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cobre-600);
    margin-block-start: var(--space-lg);
  }
  .section--cinematic .pullquote__attribution { color: var(--cobre-400); }

  /* Drop cap */
  .has-drop-cap > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(4.5rem, 9vw, 7rem);
    line-height: 0.82;
    float: left;
    margin-block-start: 6px;
    margin-inline-end: 14px;
    margin-block-end: -8px;
    color: var(--cobre-500);
    letter-spacing: 0;
  }

  /* Editorial narrative body */
  .editorial-body {
    max-width: var(--container-narrow);
    margin-inline: auto;
    font-size: var(--fs-body-lg);
    line-height: 1.75;
    color: var(--text-primary);
  }
  .editorial-body p { margin-block-end: var(--space-md); }

  /* Timeline vertical */
  .timeline {
    max-width: var(--container-content);
    margin-inline: auto;
    margin-block: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  @media (min-width: 768px) {
    .timeline {
      grid-template-columns: minmax(120px, 180px) 1fr;
      column-gap: var(--space-lg);
      row-gap: var(--space-2xl);
    }
  }
  .timeline__year {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--cobre-500);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  @media (min-width: 768px) {
    .timeline__year { text-align: end; }
  }
  .section--cinematic .timeline__year { color: var(--cobre-400); }
  .timeline__body { display: flex; flex-direction: column; gap: var(--space-xs); }
  .timeline__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-h4);
    color: var(--cacau-900);
  }
  .section--cinematic .timeline__title { color: var(--text-on-dark); }
  .timeline__desc {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 55ch;
  }
  .section--cinematic .timeline__desc { color: var(--text-on-dark-muted); }

  /* Process stepper */
  .stepper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: var(--container-wide);
    margin-inline: auto;
  }
  @media (min-width: 1000px) {
    .stepper { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
  }
  .stepper__item { display: flex; flex-direction: column; gap: var(--space-sm); }
  .stepper__num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(3rem, 6vw, 4.5rem);
    color: var(--cobre-500);
    opacity: 0.85;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .section--cinematic .stepper__num { color: var(--cobre-400); }
  .stepper__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-h4);
    color: var(--cacau-900);
  }
  .section--cinematic .stepper__title { color: var(--text-on-dark); }
  .stepper__desc {
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    line-height: 1.65;
  }
  .section--cinematic .stepper__desc { color: var(--text-on-dark-muted); }

  /* FAQ accordion editorial */
  .faq {
    max-width: var(--container-narrow);
    margin-inline: auto;
  }
  .faq__item {
    border-block-end: 1px solid var(--divider);
    padding-block: var(--space-md);
  }
  .faq__item[open] { border-block-end-color: var(--cobre-500); border-block-end-width: 2px; }
  .faq__question {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    align-items: baseline;
    transition: color var(--dur-snap);
  }
  .faq__item[open] .faq__question { color: var(--cobre-600); }
  .faq__question:hover { color: var(--cobre-600); }
  .faq__qno {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cobre-600);
  }
  .faq__item[open] .faq__qno::before { content: ""; }
  .faq__qno::after { content: " · Q"; }
  .faq__item[open] .faq__qno::after { content: " · A"; }
  .faq__qtext {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-h4);
    color: var(--cacau-900);
  }
  .faq__item[open] .faq__qtext { color: var(--cobre-600); }
  .faq__answer {
    padding-block-start: var(--space-md);
    padding-inline-start: 0;
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: 1.75;
    max-width: 60ch;
  }
  @media (min-width: 768px) {
    .faq__answer { padding-inline-start: calc(var(--space-md) + 4ch); }
  }

  /* Manifesto block (home pullquote section) */
  .manifesto {
    max-width: var(--container-content);
    margin-inline: auto;
    text-align: center;
  }
  .manifesto__title {
    margin-block-end: var(--space-md);
  }
  .manifesto__body {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-lead);
    line-height: 1.50;
    color: var(--text-secondary);
    max-width: 56ch;
    margin-inline: auto;
  }

  /* Tradition split (home dark) */
  .tradition {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
  }
  @media (min-width: 1000px) {
    .tradition { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); }
  }
  .tradition__body { display: flex; flex-direction: column; gap: var(--space-md); }
  .tradition__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
  }
  .tradition__media img,
  .evento__media img,
  .historia-maos img,
  .historia-final img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Combo card */
  .combo-card {
    max-width: 720px;
    margin-inline: auto;
    background: linear-gradient(135deg, var(--cacau-900), var(--cacau-700));
    color: var(--text-on-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .combo-card::before {
    content: "";
    position: absolute;
    inset-block-start: -50%;
    inset-inline-end: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(217, 165, 107, 0.20) 0%, transparent 60%);
    pointer-events: none;
  }
  .combo-card__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
  .combo-card__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cobre-400);
  }
  .combo-card__title { color: var(--text-on-dark); margin-block-end: var(--space-xs); }
  .combo-card__desc {
    font-family: var(--font-body);
    color: var(--text-on-dark-muted);
    max-width: 48ch;
    line-height: 1.65;
  }
  .combo-card__price {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-h2);
    color: var(--cobre-400);
    line-height: 1;
  }
  .combo-card__price-from {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-body-sm);
    color: var(--text-on-dark-muted);
    text-decoration: line-through;
    margin-block-start: -4px;
  }

  /* Selos / reassurance trio */
  .selos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: var(--container-content);
    margin-inline: auto;
  }
  @media (min-width: 768px) {
    .selos { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  }
  .selo { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .selo__title {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cobre-600);
  }
  .section--cinematic .selo__title { color: var(--cobre-400); }
  .selo__headline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-h4);
    color: var(--cacau-900);
  }
  .section--cinematic .selo__headline { color: var(--text-on-dark); }
  .selo__desc {
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 38ch;
  }
  .section--cinematic .selo__desc { color: var(--text-on-dark-muted); }

  /* Bairros list (pedidos) */
  .bairros {
    display: flex;
    flex-direction: column;
  }
  .bairros__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    align-items: baseline;
    padding-block: var(--space-md);
    border-block-end: 1px solid var(--divider);
  }
  .bairros__item:last-child { border-block-end: 0; }
  .bairros__bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cobre-500);
    align-self: center;
  }
  .bairros__name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-body-lg);
    color: var(--cacau-900);
  }
  .bairros__note {
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    margin-block-start: 2px;
  }

  /* Mapa SVG estilizado */
  .mapa-svg {
    aspect-ratio: 4 / 3;
    width: 100%;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--divider);
  }
  .mapa-svg svg {
    width: 80%;
    height: 80%;
    color: var(--cobre-500);
  }

  /* Eventos grid (encomenda) */
  .eventos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  @media (min-width: 768px) {
    .eventos {
      grid-template-columns: 8fr 5fr;
      grid-template-rows: auto auto;
      gap: var(--space-xl);
    }
    .evento--corporativo { grid-column: 1 / -1; }
  }
  .evento {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .evento__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--cacau-800), var(--cacau-950));
  }
  .evento--aniversario .evento__media { aspect-ratio: 1 / 1; }
  .evento--corporativo .evento__media { aspect-ratio: 21 / 9; }
  .evento__body { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .evento__eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cobre-600);
  }
  .evento__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-h3);
    color: var(--cacau-900);
  }
  .evento__desc {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 50ch;
  }

  /* CTA final immersive */
  .cta-final {
    position: relative;
    padding-block: var(--space-3xl);
    background: var(--bg-deep);
    color: var(--text-on-dark);
    overflow: hidden;
    text-align: center;
  }
  .cta-final::before {
    content: "";
    position: absolute;
    inset-block-start: -30%;
    inset-inline-start: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(217, 165, 107, 0.12) 0%, transparent 60%);
    pointer-events: none;
  }
  .cta-final::after {
    content: "";
    position: absolute;
    inset-block-end: -30%;
    inset-inline-end: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(194, 134, 74, 0.15) 0%, transparent 60%);
    pointer-events: none;
  }
  .cta-final__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--gutter-mobile);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }
  .cta-final__title { color: var(--text-on-dark); }
  .cta-final__desc {
    color: var(--text-on-dark-muted);
    font-size: var(--fs-body-lg);
    max-width: 50ch;
  }

  /* Footer */
  .site-footer {
    background: var(--bg-deep);
    color: var(--text-on-dark);
    padding-block: var(--space-2xl) var(--space-lg);
  }
  .site-footer__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter-mobile);
  }
  @media (min-width: 1000px) {
    .site-footer__inner { padding-inline: var(--gutter-desktop); }
  }
  .site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-block-end: var(--space-xl);
  }
  @media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg); }
  }
  .site-footer__brand-col { display: flex; flex-direction: column; gap: var(--space-md); }
  .site-footer__brand { display: flex; flex-direction: column; gap: 2px; }
  .site-footer__brand-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: var(--fs-h4);
    color: var(--text-on-dark);
    line-height: 1;
  }
  .site-footer__brand-tagline {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--cobre-400);
  }
  .site-footer__tagline {
    color: var(--text-on-dark-muted);
    font-size: var(--fs-body-sm);
    max-width: 36ch;
    line-height: 1.65;
  }
  .site-footer__heading {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cobre-400);
    margin-block-end: var(--space-md);
  }
  .site-footer__list { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .site-footer__list a,
  .site-footer__list li {
    color: var(--text-on-dark-muted);
    font-size: var(--fs-body-sm);
    transition: color var(--dur-snap);
  }
  .site-footer__list a:hover { color: var(--cobre-400); }
  .site-footer__bottom {
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--divider-on-dark);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
    color: var(--text-on-dark-muted);
    font-size: var(--fs-caption);
    opacity: 0.7;
  }
  @media (min-width: 768px) {
    .site-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
  }

  /* FAB WhatsApp */
  .fab-whatsapp {
    position: fixed;
    inset-block-end: var(--space-md);
    inset-inline-end: var(--space-md);
    z-index: 90;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cta-whatsapp);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-snap), box-shadow var(--dur-smooth);
  }
  .fab-whatsapp.is-visible { display: inline-flex; }
  .fab-whatsapp:hover { transform: scale(1.08); box-shadow: var(--shadow-lg); }
  .fab-whatsapp:active { transform: scale(0.96); }
  .fab-whatsapp__icon { width: 28px; height: 28px; }
  @media (prefers-reduced-motion: no-preference) {
    .fab-whatsapp.is-visible { animation: fab-pulse 2.8s var(--ease-glacial) infinite; }
  }
  @keyframes fab-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
  }
}

/* ============================================
   PAGES — signature por página
   ============================================ */
@layer pages {
  /* /historia — foto âncora full-bleed + parallax */
  .historia-ancora {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cacau-800), var(--cacau-950));
    margin-block-end: var(--space-2xl);
  }
  .historia-ancora__media {
    position: absolute;
    inset: 0;
    will-change: transform;
    transform: translateY(var(--parallax-y, 0));
  }
  .historia-ancora__media picture,
  .historia-ancora__media img,
  .historia-ancora__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .historia-ancora__placeholder {
    background:
      radial-gradient(circle at 30% 40%, rgba(194, 134, 74, 0.35) 0%, transparent 50%),
      radial-gradient(circle at 70% 70%, rgba(217, 165, 107, 0.20) 0%, transparent 60%),
      linear-gradient(135deg, var(--cacau-700), var(--cacau-950));
  }

  /* /historia — foto inline mãos */
  .historia-maos {
    aspect-ratio: 5 / 7;
    overflow: hidden;
    margin-block: var(--space-xl);
    background: linear-gradient(135deg, var(--cacau-700), var(--cacau-900));
  }
  @media (min-width: 1000px) {
    .historia-maos {
      float: inline-start;
      width: 40%;
      margin-inline-end: var(--space-lg);
      margin-block-start: 0;
    }
  }

  /* /historia — foto final tacho */
  .historia-final {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cobre-600), var(--cacau-900));
    margin-block: var(--space-2xl) var(--space-md);
  }
  .historia-final__caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    text-align: center;
  }
}

/* ============================================
   UTILITIES
   ============================================ */
@layer utilities {
  .u-text-center { text-align: center; }
  .u-italic { font-style: italic; }
  .u-mt-md { margin-block-start: var(--space-md); }
  .u-mt-lg { margin-block-start: var(--space-lg); }
  .u-mt-xl { margin-block-start: var(--space-xl); }
  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .u-no-margin { margin: 0; }
  .u-mx-auto { margin-inline: auto; }
  .u-display-block { display: block; }
}

/* ============================================
   MOTION
   ============================================ */
@layer motion {
  [data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity var(--dur-cinematic) var(--ease-cinematic),
      transform var(--dur-cinematic) var(--ease-cinematic);
  }
  [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  [data-reveal-delay="1"] { transition-delay: 80ms; }
  [data-reveal-delay="2"] { transition-delay: 160ms; }
  [data-reveal-delay="3"] { transition-delay: 240ms; }
  [data-reveal-delay="4"] { transition-delay: 320ms; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    [data-parallax] { transform: none !important; }
    .hero__scroll-cue::after { animation: none !important; }
    .fab-whatsapp.is-visible { animation: none !important; }
  }
}