:root{
  --primary:#5c4761;
  --gray:#9d9d9d;

  --ink: rgba(16,18,24,.92);
  --muted: rgba(16,18,24,.64);

  --radius: 26px;
  --shadow: 0 18px 60px rgba(0,0,0,.14);
  --inner: min(560px, 92vw);
  --pad: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(92,71,97,.14), transparent 60%),
    radial-gradient(900px 520px at 82% 55%, rgba(157,157,157,.14), transparent 60%),
    linear-gradient(180deg, #fff 0%, #f6f6f8 55%, #fff 100%);
}

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: var(--pad);
}

.card{
  width: var(--inner);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px 16px;
  text-align:center;
  overflow:hidden;
}

/* =========================
   LOGO “ESCREVENDO” (imagem)
   ========================= */
.logo-write{
  width: min(250px, 72vw);
  height:auto;
  display:block;
  margin: 2px auto 12px;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.14));
  user-select:none;
  -webkit-user-drag:none;

  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 72%);
  -webkit-mask-size: 220% 100%;
  -webkit-mask-position: 120% 0;

  mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 72%);
  mask-size: 220% 100%;
  mask-position: 120% 0;

  opacity:0;
  transform: translateY(6px) scale(.99);
  animation: logoWrite 1.25s ease-out .10s both;
  position:relative;
}

.logo-write::after{
  content:"";
  position:absolute;
  inset:-6px;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.58) 50%,
    rgba(255,255,255,0) 65%,
    transparent 100%);
  transform: translateX(-35%) skewX(-14deg);
  filter: blur(1px);
  animation: logoShine 1.05s ease-out .22s both;
}

@keyframes logoWrite{
  0%{
    opacity:0;
    transform: translateY(8px) scale(.985);
    -webkit-mask-position: 120% 0;
    mask-position: 120% 0;
  }
  100%{
    opacity:1;
    transform: translateY(0) scale(1);
    -webkit-mask-position: -10% 0;
    mask-position: -10% 0;
  }
}

@keyframes logoShine{
  0%{ opacity:0; transform: translateX(-35%) skewX(-14deg); }
  15%{ opacity:.9; }
  100%{ opacity:0; transform: translateX(85%) skewX(-14deg); }
}

/* =========================
   REVEAL SEQUENCIAL (conteúdo)
   ========================= */
.title,
.text,
.actions,
.foot{
  opacity:0;
  transform: translateY(10px);
  filter: blur(5px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
  will-change: transform, opacity, filter;
}

.is-in{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

/* ✅ TÍTULO MAIOR + 2 LINHAS (quebra vem do JS) */
.title{
  margin: 8px 0 10px;
  font-size: clamp(24px, 4.6vw, 34px); /* ✅ maior */
  letter-spacing: .2px;
  color: #6d6d6d;
  line-height: 1.12;

  /* reserva espaço de 2 linhas SEM depender do wrap */
  min-height: calc(1.12em * 2);
}

/* cursor typing */
.title .caret{
  display:inline-block;
  width: 10px;
  margin-left: 4px;
  border-right: 2px solid rgba(109,109,109,.85);
  transform: translateY(1px);
  animation: blink 1s steps(2,end) infinite;
}
@keyframes blink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

.text{
  margin: 0 auto 14px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 48ch;
  font-size: 14px;
}

/* =========================
   BOTÕES ÍCONE (minimal)
   ========================= */
.actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 6px;
}

.icon-btn{
  position:relative;
  overflow:hidden;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.94);
  display:grid;
  place-items:center;
  color: rgba(16,18,24,.80);
  text-decoration:none;
  cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.icon-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  border-color: rgba(92,71,97,.22);
}
.icon-btn:active{ transform: translateY(0) scale(.995); }

.icon-btn i{ font-size: 19px; }

#btnWhats{ color: #1aa85a; }
#btnInsta{ color: var(--primary); }

/* shine (flash passando) */
.shine::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-60%;
  width: 38%;
  height: 140%;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,0) 80%,
    transparent 100%
  );
  opacity: 0;
  pointer-events:none;
}

@keyframes shineSweep{
  0%{ left:-60%; opacity:0; }
  12%{ opacity:.9; }
  100%{ left:130%; opacity:0; }
}

.shine:hover::before{
  animation: shineSweep .75s ease-out;
  opacity: 1;
}

.hint{
  display:block;
  min-height: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(16,18,24,.50);
}

.foot{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(16,18,24,.45);
  font-weight: 700;
}

@media (max-width: 420px){
  .card{ padding: 22px 16px 14px; }
  .logo-write{ width: min(230px, 76vw); }
  .actions{ gap: 10px; }
  .icon-btn{ width: 48px; height: 48px; }
  .text{ font-size: 13.5px; }

  .title{
    font-size: 28px; /* ✅ maior no mobile também */
    min-height: calc(1.12em * 2);
  }
}

@media (prefers-reduced-motion: reduce){
  .logo-write{ animation:none; opacity:1; transform:none; -webkit-mask:none; mask:none; }
  .logo-write::after{ display:none; }
  .title, .text, .actions{ opacity:1; transform:none; filter:none; transition:none; }
  .title .caret{ animation:none; }
  .shine::before{ display:none; }
}