/* ==========================================================================
   Velas Inspire — Curso Presencial
   Estilos customizados (fora do Tailwind)
   ========================================================================== */

:root{
  --cream:#FBF6ED;
  --sand:#EFE2CC;
  --clay:#C17F58;
  --clay-dark:#A2623F;
  --umber:#83624A;
  --ink:#3B2A1E;
  --line:#E2D3B8;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.font-display{ font-family:'Cormorant Garamond', serif; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* botanical line ornament — assinatura visual da marca,
   inspirada no traço pintado na parede do próprio ateliê */
.ornament{ stroke:var(--clay); stroke-width:1.1; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.ornament-soft{ stroke:var(--umber); opacity:.28; }

.chip{
  border:1px solid var(--line);
  background:rgba(255,255,255,0.55);
  backdrop-filter: blur(2px);
}

.btn-primary{
  background:var(--clay);
  color:#FBF6ED;
  transition:background .35s ease, transform .35s ease, box-shadow .35s ease;
  box-shadow: 0 10px 24px -10px rgba(161,98,63,.55);
}
.btn-primary:hover{
  background:var(--clay-dark);
  transform:translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(161,98,63,.65);
}
.btn-primary:disabled{
  cursor:not-allowed;
  opacity:.72;
  transform:none;
  box-shadow: 0 10px 24px -12px rgba(161,98,63,.45);
}

.underline-input{
  background:transparent;
  border:none;
  border-bottom:1.5px solid var(--line);
  transition:border-color .3s ease;
  padding:.65rem .1rem;
}
.underline-input:focus{ outline:none; border-color:var(--clay); }

.form-select{
  border-radius:0;
  color:var(--ink);
  cursor:pointer;
}
.form-select:invalid{ color:rgba(59,42,30,.45); }

.form-status{
  min-height:1.4rem;
  color:var(--umber);
}
.form-status.is-success{ color:var(--clay-dark); }
.form-status.is-error{ color:#8f3d2e; }

.sr-only-iframe{
  position:absolute;
  width:1px;
  height:1px;
  border:0;
  opacity:0;
  pointer-events:none;
}

.whatsapp-float{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:60;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:3rem;
  padding:.82rem 1.1rem;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:0 18px 34px -16px rgba(59,42,30,.55);
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.whatsapp-float:hover{
  background:var(--clay-dark);
  transform:translateY(-2px);
  box-shadow:0 22px 40px -16px rgba(59,42,30,.65);
}
.whatsapp-float svg{ flex:0 0 auto; }

.card-soft{
  background: #ffffff;
  border:1px solid var(--line);
  box-shadow: 0 18px 40px -28px rgba(59,42,30,0.25);
}

.divider-line{ height:1px; background: linear-gradient(to right, transparent, var(--line), transparent); }

.num-eyebrow{ letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; color:var(--clay-dark); font-weight:600; }

.flicker{ animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker{
  0%,100%{ opacity:1; transform:scaleY(1); }
  45%{ opacity:.85; transform:scaleY(.96); }
  55%{ opacity:.92; transform:scaleY(1.03); }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  .flicker{ animation:none; }
  .whatsapp-float{ transition:none; }
}

@media (max-width: 640px){
  .whatsapp-float{
    right:1rem;
    bottom:1rem;
    width:3.2rem;
    height:3.2rem;
    min-height:3.2rem;
    justify-content:center;
    padding:0;
  }
  .whatsapp-float span{ display:none; }
}

.img-frame{
  border-radius: 22px;
  overflow:hidden;
}

.grain::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;
}