/* ============================================================
   Refinamento de sofisticação e responsividade
   Conexão & Essência — página adicionada ao build final
   (não altera a lógica do bundle React)
   ============================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

/* ---------- Tipografia fluida (mobile → desktop) ---------- */
@supports (font-size: clamp(1rem, 2vw, 1rem)) {
  html {
    font-size: clamp(15px, 1.1vw + 12px, 16px);
  }
}

/* ---------- Base: anti-aliasing refinado ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Seleção em tom da marca ---------- */
::selection {
  background: rgb(192 153 101 / 35%);
  color: var(--offwhite);
}

/* ---------- CTAs dourados mais ricos ---------- */
.ce-cta {
  position: relative;
  letter-spacing: 0.1em;
  background-image: linear-gradient(#f5e2bb, #ddb983 14%, #c09965 45%, #a98654 78%, #8a6a3c);
  box-shadow:
    inset 0 1px #fff4d6,
    inset 0 -2px #50381673,
    0 14px 30px -18px rgb(192 153 101 / 75%),
    0 4px 12px -4px #00000066;
}

@media (hover: hover) and (min-width: 768px) {
  .ce-cta {
    transition:
      transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
      filter 0.18s cubic-bezier(0.23, 1, 0.32, 1),
      box-shadow 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .ce-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
      inset 0 1px #fff4d6,
      inset 0 -2px #50381673,
      0 20px 40px -20px rgb(192 153 101 / 85%),
      0 6px 16px -6px #00000073;
  }
  .ce-cta:active {
    transform: translateY(0);
    filter: brightness(0.97);
  }
}

/* Toque de brilho sutil no canto superior do CTA */
.ce-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 0%) 45%);
}

/* ---------- Cards mais elegantes ---------- */
.ce-card {
  box-shadow:
    inset 0 1px rgb(230 200 147 / 14%),
    0 20px 46px -30px rgb(192 153 101 / 45%),
    0 8px 20px -14px #00000080;
}

.ce-card-purple {
  box-shadow:
    inset 0 1px rgb(230 200 147 / 18%),
    0 24px 56px -32px rgb(72 34 88 / 90%),
    0 10px 24px -16px #00000080;
}

/* ---------- Halos de fundo mais suaves ---------- */
.ce-halo {
  background: radial-gradient(70% 50% at 50% 0%, rgb(72 34 88 / 20%), rgb(0 0 0 / 0%) 72%);
}

/* ---------- Badges com leve respiração dourada ---------- */
.ce-eyebrow {
  box-shadow: inset 0 0 16px rgb(192 153 101 / 8%), 0 8px 22px -14px rgb(192 153 101 / 45%);
  backdrop-filter: blur(2px);
}

/* ---------- Chips com reflexo interno ---------- */
.ce-chip {
  box-shadow: inset 0 1px rgb(230 200 147 / 10%), 0 6px 18px -12px #00000080;
}

/* ---------- Números de destaque ---------- */
.ce-numeral {
  text-shadow: 0 0 32px rgb(192 153 101 / 25%);
}

/* Texto dourado com leve brilho (preço) */
.ce-gold {
  text-shadow: 0 0 30px rgb(192 153 101 / 28%);
}

/* ---------- Preço em destaque com animação sutil ---------- */
@keyframes ce-price-glow {
  0%,
  100% {
    text-shadow: 0 0 34px rgb(192 153 101 / 28%);
  }
  50% {
    text-shadow: 0 0 48px rgb(192 153 101 / 42%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  #oferta [style*="2.8rem"],
  .ce-glow-pulse {
    animation: ce-price-glow 3.4s ease-in-out infinite;
  }
}

/* ---------- Linhas divisórias ornamentais ---------- */
hr.ce-divider {
  border: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgb(192 153 101 / 0%),
    rgb(192 153 101 / 40%) 50%,
    rgb(192 153 101 / 0%)
  );
  margin-top: 3rem;
}

/* ---------- Scroll reveal: degraus suaves entre itens ---------- */
@media (prefers-reduced-motion: no-preference) {
  li.ce-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.62s cubic-bezier(0.23, 1, 0.32, 1),
      transform 0.62s cubic-bezier(0.23, 1, 0.32, 1);
  }
  li.ce-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  ul > li.ce-reveal:nth-child(2) {
    transition-delay: 0.07s;
  }
  ul > li.ce-reveal:nth-child(3) {
    transition-delay: 0.14s;
  }
  ul > li.ce-reveal:nth-child(4) {
    transition-delay: 0.21s;
  }
  ul > li.ce-reveal:nth-child(5) {
    transition-delay: 0.28s;
  }
  ul > li.ce-reveal:nth-child(6) {
    transition-delay: 0.35s;
  }
  ol > li.ce-reveal:nth-child(2) {
    transition-delay: 0.08s;
  }
  ol > li.ce-reveal:nth-child(3) {
    transition-delay: 0.16s;
  }
  ol > li.ce-reveal:nth-child(4) {
    transition-delay: 0.24s;
  }
}

/* ---------- Acordeão FAQ com suavidade extra ---------- */
[data-radix-accordion-content] {
  overflow: hidden;
  transition: height 0.28s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Botão de foco visível e elegante ---------- */
:focus-visible {
  outline: 2px solid rgb(192 153 101 / 85%);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Responsividade mobile — ajustes finos
   ============================================================ */

/* Header mais compacto e legível em telas pequenas */
@media (max-width: 480px) {
  .ce-eyebrow {
    padding: 0.5rem 1.2rem;
    font-size: 0.72rem;
  }
}

/* Hero: imagem e CTA confortáveis em telas estreitas */
@media (max-width: 399px) {
  .ce-cta {
    padding: 0.95rem 1.5rem;
    font-size: 0.88rem;
  }
}

/* Garantia de escala segura para imagens em telas muito pequenas */
img {
  max-width: 100%;
  height: auto;
}

/* Ajustes em telas muito pequenas para evitar transbordamento */
@media (max-width: 360px) {
  .container,
  .mx-auto {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Textos fluidos em componentes chave */
@media (max-width: 480px) {
  [class*="text-\[2\.8rem"],
  [class*="text-\[2rem"] {
    letter-spacing: 0.005em;
  }
}

/* Evita zoom indesejado em inputs no iOS (quando houver) */
@media screen and (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Scrollbar customizada discreta (desktop) */
@media (min-width: 768px) {
  html {
    scrollbar-color: rgb(192 153 101 / 35%) #0a060a;
  }
  html::-webkit-scrollbar {
    width: 10px;
  }
  html::-webkit-scrollbar-track {
    background: #0a060a;
  }
  html::-webkit-scrollbar-thumb {
    background: rgb(192 153 101 / 35%);
    border-radius: 999px;
    border: 2px solid #0a060a;
  }
  html::-webkit-scrollbar-thumb:hover {
    background: rgb(192 153 101 / 55%);
  }
}