/* ==========================================================================
   Clara Bronze — estilos base e utilitários customizados
   Complementa o Tailwind (Play CDN). Mobile-first.
   ========================================================================== */

:root {
  --bg-top: #fef6ea;
  --bg-mid: #f7e3c8;
  --glow: rgba(255, 236, 205, 0.9);
  --ease: cubic-bezier(.22, .61, .36, 1); /* easing premium */
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: #4a2c18;
  background: #f3e2c9;
  overflow-x: hidden;
}

/* Container central estilo "biosite" (largura de celular) --------------- */
.phone {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  position: relative;
  min-height: 100vh;
}

/* Fundo: imagem fornecida (leve, JPEG) + cor de base sem emenda --------- */
.bg-glow {
  background-color: #f7cfa0; /* igual à base da imagem: transição invisível */
  background-image: url("../images/fundo.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

/* Raios de sol agora fazem parte da imagem de fundo (sun-rays sem efeito) */
.sun-rays::before { content: none; }

/* Gradientes de marca ---------------------------------------------------- */
.grad-bronze   { background: linear-gradient(135deg, #c98a4f 0%, #a15e28 55%, #8a4d22 100%); }
.grad-whatsapp { background: linear-gradient(135deg, #cf9350 0%, #b0702f 50%, #9c5c26 100%); }
.grad-card-dark{ background: linear-gradient(150deg, #4c2d18 0%, #3c2211 100%); }
.grad-card-mid { background: linear-gradient(150deg, #6a4023 0%, #4e2d17 100%); }

/* Texto com degradê cobre ----------------------------------------------- */
.text-grad-bronze {
  background: linear-gradient(90deg, #a85c26, #7c4420);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Botões ----------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  border-radius: 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover  { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(0); }

/* Chip circular de ícone social (igual ao original: cobre + aro fino) ---- */
.social-chip {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  color: #fff;
  background: linear-gradient(160deg, #bd7434 0%, #a1551f 100%);
  box-shadow:
    0 0 0 1.5px rgba(74, 44, 24, .35),   /* pequeno vão escuro */
    0 0 0 3.5px rgba(240, 206, 162, .55),/* aro cobre claro */
    0 8px 16px -6px rgba(120, 70, 30, .45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.social-chip:hover { transform: translateY(-3px) scale(1.05); filter: brightness(1.05); }

/* Seta circular do lado direito dos cards/CTAs -------------------------- */
.arrow-circle {
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,255,255,.55);
  flex-shrink: 0;
  transition: background .2s ease, transform .2s ease;
}
.group:hover .arrow-circle { background: rgba(255,255,255,.18); transform: translateX(3px); }

/* Card de link (grade 2x2) — camada de imagem + gradiente --------------- */
.link-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 26px -10px rgba(58,33,17,.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.link-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -10px rgba(58,33,17,.6); }
.link-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.link-card__overlay {
  position: absolute; inset: 0;
  z-index: 1;
}

/* Reveal on scroll (fade + slide + scale + blur, só na 1ª aparição) ------ */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  filter: blur(5px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* Divisor pontilhado ----------------------------------------------------- */
.dot-divider {
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(120,74,34,.35) 0 6px, transparent 6px 12px);
}

/* Ajuste fino de foto placeholder --------------------------------------- */
.img-fallback {
  background:
    radial-gradient(80% 80% at 70% 20%, #e9b784 0%, #c98a4f 45%, #8a4d22 100%);
}

/* ==========================================================================
   DESKTOP (≥1024px) — mesma identidade, layout reorganizado para telas grandes
   Tudo dentro de media queries: o mobile NÃO é afetado.
   ========================================================================== */
@media (min-width: 1024px) {

  /* Fundo full-bleed com iluminação suave (mesmo degradê da marca) ------- */
  body {
    background:
      radial-gradient(55% 45% at 12% -2%, rgba(255, 241, 217, .85), transparent 60%),
      radial-gradient(45% 40% at 92% 6%, rgba(255, 224, 188, .55), transparent 62%),
      radial-gradient(60% 50% at 50% 108%, rgba(255, 231, 200, .5), transparent 60%),
      linear-gradient(180deg, #fdf3e6 0%, #f5e2c8 55%, #f0d9bb 100%);
    background-attachment: fixed;
  }

  /* Container central, largura máxima (não ocupa largura infinita) ------- */
  .phone {
    max-width: 1180px;
    min-height: auto;
    padding-inline: 48px;
    /* remove a imagem de fundo mobile; o corpo cuida do fundo no desktop */
    background: none;
  }

  /* Seções centralizadas com respiro (ritmo de 8px) ---------------------- */
  .phone > section,
  .phone > footer { max-width: 1080px; margin-inline: auto; }
  .phone > section { margin-top: 40px; }
  .phone > footer  { margin-top: 56px; }

  /* -------------------- HERO em 2 colunas (todas as páginas) ------------ */
  .phone > header {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    align-items: center;
    column-gap: 64px;
    padding: 64px 48px 32px;
    min-height: 620px;
    max-width: 1180px;
    margin-inline: auto;
  }
  .phone > header > .relative { order: 1; z-index: 2; }        /* conteúdo à esquerda */
  .phone > header > .img-fallback {                            /* foto à direita     */
    order: 2;
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    height: 580px;
    border-radius: 1.75rem;
    box-shadow: 0 40px 80px -34px rgba(74, 44, 24, .6), 0 14px 30px -16px rgba(74, 44, 24, .4);
  }
  /* remove os degradês de mescla usados no mobile */
  .phone > header > .img-fallback > div { display: none; }

  /* Tipografia do hero — grande e elegante */
  .phone > header h1 { max-width: none; margin-top: 16px; letter-spacing: -0.015em; }
  .phone > header h1 span { font-size: clamp(3.5rem, 5.2vw, 5.5rem); line-height: 1.0; }
  .phone > header > .relative > p { max-width: 34rem; margin-top: 22px; font-size: 1.7rem; line-height: 1.45; }
  .phone > header > .relative > p span { font-size: inherit; } /* normaliza "+ avançada!" no desktop */

  /* Logo um pouco maior no topo do hero */
  .phone > header .drop-shadow-md,
  .phone > header .drop-shadow-lg { width: 132px; height: 132px; }

  /* -------------------- HOME: grade de cards premium (2x2 maiores) ------ */
  .phone > section.grid { gap: 28px; }
  .link-card { min-height: 210px; border-radius: 1.5rem; }
  .link-card .relative.z-10 { padding: 28px; }
  .link-card h3 { font-size: 1.5rem !important; }
  .link-card .arrow-circle { width: 40px; height: 40px; }
  .link-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 28px 50px -18px rgba(58, 33, 17, .62); }

  /* -------------------- Cards de conteúdo (páginas internas) ------------ */
  .grad-card-dark, .grad-card-mid { transition: transform .3s var(--ease, ease), box-shadow .3s ease; }
  .grad-card-dark:hover, .grad-card-mid:hover { transform: translateY(-3px); box-shadow: 0 26px 46px -20px rgba(58, 33, 17, .5); }

  /* Grades internas com mais respiro */
  .phone > section.grid { column-gap: 28px; row-gap: 28px; }

  /* -------------------- Botões / CTAs (centralizados e destacados) ------ */
  .btn:not(.\!w-auto) { max-width: 620px; margin-inline: auto; }
  .btn { border-radius: 1.25rem; }
  .btn .block.font-bold { font-size: 1.2rem; }

  /* CTA principal AGENDAR BRONZE — maior e mais destacado no desktop */
  .phone > section .btn[data-link="agendar"] {
    max-width: 780px;
    padding-block: 24px;
    padding-inline: 36px;
    border-radius: 1.5rem;
    gap: 1.25rem;
  }
  .phone > section .btn[data-link="agendar"] > span:first-child { width: 60px; height: 60px; border-radius: 1.1rem; }
  .phone > section .btn[data-link="agendar"] > span:first-child i { font-size: 1.6rem; }
  .phone > section .btn[data-link="agendar"] .block.font-bold { font-size: 1.6rem; }
  .phone > section .btn[data-link="agendar"] span.block:not(.font-bold) { font-size: 1.05rem; }
  .phone > section .btn[data-link="agendar"] .arrow-circle { width: 52px; height: 52px; }

  /* Seta com brilho no hover (premium) */
  .group:hover .arrow-circle,
  .btn:hover .arrow-circle {
    background: rgba(255, 255, 255, .2);
    transform: translateX(2px) scale(1.08);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1);
  }

  /* Chips sociais um pouco maiores */
  .social-chip { width: 54px; height: 54px; }

  /* Mapa (Localização) com mais destaque */
  .phone iframe[title="Mapa Clara Bronze"] { min-height: 300px; }
}

/* Monitores grandes (2K) ------------------------------------------------- */
@media (min-width: 1440px) {
  .phone,
  .phone > header { max-width: 1280px; }
  .phone > section, .phone > footer { max-width: 1160px; }
  .phone > header > .img-fallback { height: 620px; }
}

/* Monitores muito grandes / 4K — apenas centraliza, sem esticar --------- */
@media (min-width: 1920px) {
  .phone,
  .phone > header { max-width: 1360px; }
  .phone > section, .phone > footer { max-width: 1220px; }
}

/* ==========================================================================
   MICROINTERAÇÕES & ANIMAÇÕES PREMIUM (todas as telas)
   Apenas efeitos/transições — nenhum elemento visual em repouso é alterado.
   ========================================================================== */

/* Carregamento suave da página ----------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cbPageIn { from { opacity: 0; } to { opacity: 1; } }
  body { animation: cbPageIn .5s ease both; }
}

/* Estados de foco acessíveis (navegação por teclado) ------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.social-chip:focus-visible,
.link-card:focus-visible {
  outline: 3px solid rgba(184, 115, 51, .55);
  outline-offset: 3px;
  border-radius: 12px;
}
.btn:focus-visible { outline-color: rgba(255, 236, 210, .85); }

/* Botões: brilho passando (shine) + ripple + clique -------------------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  opacity: 0; z-index: 1; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:hover::after { animation: cbShine .8s ease; }
}
@keyframes cbShine {
  0%   { left: -80%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}
.btn:active { transform: scale(.985); }

/* Ripple gerado via JS (efeito de clique) */
.cb-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0); opacity: .6;
  pointer-events: none; z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .cb-ripple { animation: cbRipple .6s ease-out forwards; }
}
@keyframes cbRipple { to { transform: scale(2.6); opacity: 0; } }

/* Cards: toque no mobile (scale .97) + transição premium --------------- */
.link-card { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.link-card:active { transform: scale(.97); transition: transform .12s ease; }

/* Brilho passando (shine) também nos 4 cards da home ------------------- */
.link-card::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  opacity: 0; z-index: 2; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .link-card:hover::after { animation: cbShine .8s ease; }
}

/* Ícones: micro-interação no hover ------------------------------------- */
.social-chip i, .arrow-circle i, .btn > span:first-child i {
  transition: transform .3s var(--ease), opacity .3s ease;
}
.social-chip:hover i { transform: scale(1.12) rotate(-6deg); }
.btn:hover > span:first-child i { transform: scale(1.08); }

/* Imagem principal do hero: fade ao carregar + float/scale sutis ------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cbHeroIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes cbFloat {
    0%, 100% { transform: scale(1.045) translateY(-3px); }
    50%      { transform: scale(1.045) translateY(3px); }
  }
  .phone > header .img-fallback { animation: cbHeroIn .8s var(--ease) both; }
  .phone > header .img-fallback img { animation: cbFloat 7s ease-in-out infinite; }
}

/* Respeita quem prefere menos movimento -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  html { scroll-behavior: auto; }
}