/* Reparo — brand utilities (shared landing + app) */
:root{
  /* paleta "Terracota": terracota + teal + ocre */
  --ph-violet:#B5563F; --ph-violet-700:#8F3D2C;
  --ph-fuchsia:#2E7D6B; --ph-coral:#D9A441; --ph-ink:#241C17;
  --ph-grad:linear-gradient(120deg,#C56A4E 0%,#B5563F 55%,#8F3D2C 100%);

  /* tokens de tema (RGB p/ suportar opacidade do Tailwind) */
  --c-bg: 244 239 232;       /* areia quente */
  --c-surface: 251 248 243;  /* cards creme */
  --c-ink: 36 28 23;         /* marrom-terra escuro */
  --c-line: 36 28 23;        /* bordas/divisores (baixa opacidade) */
}
html.dark{
  --c-bg: 26 21 18;          /* marrom-noite profundo */
  --c-surface: 36 28 23;     /* superfície escura */
  --c-ink: 236 227 218;      /* texto claro quente */
  --c-line: 239 230 220;     /* linhas claras em baixa opacidade */
}
html{ background-color: rgb(var(--c-bg)); color-scheme: light; }
html.dark{ color-scheme: dark; }
body{ color: rgb(var(--c-ink)); }

/* legibilidade no escuro: laranja-escuro de texto vira laranja claro */
html.dark .text-violet-700,
html.dark .text-violet-600,
html.dark .text-violet{ color:#E8A98E !important; }
/* idem p/ cores semânticas: tons -500/600/700/800 são escuros demais sobre superfície escura */
html.dark .text-fuchsia{ color:#7CC4B2 !important; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800{ color:#5BC48E !important; }
html.dark .text-red-500, html.dark .text-red-600, html.dark .text-red-700{ color:#F0938A !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800{ color:#E2B45C !important; }
html.dark .text-blue-600, html.dark .text-blue-700{ color:#92B9E8 !important; }
html.dark .card-shadow{ box-shadow:0 24px 60px -20px rgba(0,0,0,.6); }
html.dark .ring-soft{ box-shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -24px rgba(0,0,0,.65); }
html.dark .glass{ background-color: rgb(var(--c-surface) / .72) !important; }

.grad-brand{ background-image:var(--ph-grad); }
.grad-text{
  background-image:var(--ph-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.blob{ position:absolute; border-radius:9999px; filter:blur(64px); opacity:.55; z-index:0; }
.glass{ backdrop-filter:blur(14px); }
.card-shadow{ box-shadow:0 24px 60px -20px rgba(181,86,63,.45); }
body{ -webkit-font-smoothing:antialiased; }
[x-cloak]{ display:none !important; }

/* keyframes (mirror of tailwind config for non-CDN safety) */
@keyframes ph-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ph-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.animate-float{animation:ph-float 6s ease-in-out infinite}
.animate-marquee{animation:ph-marquee 22s linear infinite}

/* ===== auth / entrada ===== */
/* aurora: blobs que derivam devagar, dando vida ao painel de marca */
@keyframes ph-aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(8%,-6%,0) scale(1.12)}
  66%{transform:translate3d(-6%,8%,0) scale(.94)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.animate-aurora{animation:ph-aurora 18s ease-in-out infinite}

/* rise: entrada com fade + deslize, encadeada via --d */
@keyframes ph-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ph-rise{opacity:0;animation:ph-rise .7s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0ms)}

/* shimmer no botão primário ao passar o mouse */
@keyframes ph-shine{from{background-position:-160% 0}to{background-position:260% 0}}

/* grade pontilhada de fundo do painel de marca */
.ph-dotgrid{
  background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}

/* pincelada que se "desenha" no carregamento */
@keyframes ph-stroke{from{stroke-dashoffset:var(--len,1200)}to{stroke-dashoffset:0}}
.ph-stroke{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);animation:ph-stroke 1.6s cubic-bezier(.65,0,.35,1) forwards;animation-delay:var(--d,300ms)}

/* swatch de cor que "pinga" e balança */
@keyframes ph-swatch{0%{transform:translateY(-12px) scale(.6);opacity:0}60%{transform:translateY(2px) scale(1.05)}100%{transform:translateY(0) scale(1);opacity:1}}
.ph-swatch{opacity:0;animation:ph-swatch .8s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d,0ms)}

/* gota de tinta que escorre devagar */
@keyframes ph-drip{0%{transform:translateY(0);opacity:.9}80%{opacity:.9}100%{transform:translateY(26px);opacity:0}}
.ph-drip{animation:ph-drip 3.4s ease-in infinite;animation-delay:var(--d,0ms)}

/* anel de foco que pulsa no campo ativo */
.ph-field:focus-within{box-shadow:0 0 0 4px rgba(181,86,63,.14);border-color:var(--ph-violet)}

/* auth back action */
.auth-back-link{
  position:absolute; top:1.25rem; left:1.25rem; z-index:20;
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:2.5rem; padding:0 .95rem; border-radius:999px;
  color:rgb(var(--c-ink) / .72); font-size:.875rem; font-weight:700;
  background:rgb(var(--c-surface) / .82); border:1px solid rgb(var(--c-line) / .08);
  box-shadow:0 14px 35px -24px rgba(14,28,46,.55);
  backdrop-filter:blur(14px);
  transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.auth-back-link:hover{
  transform:translateX(-2px);
  color:rgb(var(--c-ink));
  background:rgb(var(--c-surface) / .96);
  box-shadow:0 18px 45px -26px rgba(181,86,63,.65);
}

/* explore hero search: fixed contrast across light/dark themes */
.search-hero{ isolation:isolate; }
.search-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  border-radius:1rem; /* casa com rounded-2xl: cantos arredondados sem overflow-hidden */
  background:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.20),transparent 26%),
    linear-gradient(90deg,rgba(14,28,46,.05),rgba(14,28,46,.16));
}

/* autocomplete de cidade (IBGE) — menu flutuante sobre o hero */
.city-suggest{
  position:absolute; top:calc(100% + .4rem); left:0; right:0; z-index:30;
  background:rgb(var(--c-surface)); color:rgb(var(--c-ink));
  border:1px solid rgb(var(--c-line) / .12);
  border-radius:1rem; padding:.35rem;
  box-shadow:0 20px 44px -14px rgba(14,28,46,.45);
  max-height:16rem; overflow:auto;
}
.city-suggest-item{
  display:flex; align-items:center; gap:.55rem; width:100%; text-align:left;
  padding:.55rem .7rem; border-radius:.7rem;
  font-size:.85rem; font-weight:600; color:rgb(var(--c-ink)); cursor:pointer;
}
.city-suggest-item:hover,.city-suggest-item:focus-visible{ background:rgb(var(--c-line) / .10); }
.city-suggest-item > i{ color:#B5563F; font-size:.82rem; }
.city-suggest-uf{
  margin-left:auto; font-size:.7rem; font-weight:800; letter-spacing:.02em;
  color:rgb(var(--c-ink) / .6); background:rgb(var(--c-line) / .14);
  border-radius:.5rem; padding:.12rem .42rem;
}
.city-suggest-empty{
  display:flex; align-items:center; gap:.4rem;
  padding:.65rem .7rem; font-size:.82rem; font-weight:600; color:rgb(var(--c-ink) / .55);
}
.search-hero-form{ position:relative; z-index:1; display:grid; gap:.6rem; }
.search-main-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.6rem; align-items:stretch; }
.search-field,
.search-select{
  width:100%; min-height:3.25rem; border:0; border-radius:1.25rem;
  background:#241C17; color:#fff; font-size:.95rem; font-weight:650;
  box-shadow:0 16px 34px -24px rgba(14,28,46,.85), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.search-field{ padding:.7rem 1rem .7rem 2.85rem; }
.search-field-main{ min-height:3.1rem; font-size:.95rem; }
.search-field-compact{ min-height:3rem; }
.search-field::placeholder{ color:rgba(255,255,255,.56); opacity:1; font-weight:600; }
.search-field-icon{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.62); pointer-events:none; z-index:1;
}
.search-field:focus,
.search-select:focus{
  outline:none; transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(255,255,255,.28),0 18px 36px -22px rgba(14,28,46,.95),inset 0 0 0 1px rgba(255,255,255,.12);
}
.search-select{
  appearance:none; -webkit-appearance:none; padding:.85rem 2.65rem .85rem 1rem;
}
.search-select option{ color:#241C17; background:#fff; font-weight:600; }
.search-select-icon{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.68); pointer-events:none; font-size:.8rem;
}
.search-filter-toggle,
.search-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:0; min-height:3.1rem; border-radius:1.15rem; font-weight:800;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.search-filter-toggle{
  padding:0 1.15rem; color:#fff; background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
}
.search-filter-toggle:hover,
.search-filter-toggle.is-open{ background:rgba(255,255,255,.28); transform:translateY(-1px); }
.search-filters{ display:grid; gap:.75rem; padding-top:.1rem; }
.search-filter-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(5.6rem,.22fr) minmax(0,1fr) minmax(0,.9fr); gap:.6rem; }
.search-submit{
  min-height:3.1rem; padding:0 1.5rem; color:#fff; background:#241C17;
  box-shadow:0 16px 30px -22px rgba(14,28,46,.95);
}
.search-filter-toggle{ padding:0 1rem; }
.search-submit:hover{ transform:translateY(-1px); background:#1D3328; }

@media (max-width: 768px){
  .auth-back-link{ top:1rem; left:1rem; min-height:2.35rem; padding:0 .8rem; }
  .guest-form-wrap{ max-width:calc(100vw - 2rem) !important; }
  /* busca mobile: input ocupa linha toda, filtros + buscar dividem a 2ª linha */
  .search-main-row{ grid-template-columns:1fr 1fr; gap:.5rem; }
  .search-main-row .sf-input{ grid-column:1 / -1; }
  .search-filter-toggle{ min-height:3rem; }
  .search-field,.search-select,.search-submit,.search-filter-toggle{ border-radius:1rem; }

  /* filtros compactos no mobile: 2 colunas, campos mais baixos, menos espaço */
  .search-hero-form{ gap:.6rem; }
  .search-filters{ gap:.6rem; }
  .search-filter-grid{ grid-template-columns:1fr 1fr; gap:.5rem; }
  .search-filter-grid .sf-city{ order:1; grid-column:1 / -1; }
  .search-filter-grid .sf-uf  { order:2; }
  .search-filter-grid .sf-sort{ order:3; }
  .search-filter-grid .sf-spec{ order:4; grid-column:1 / -1; }
  .search-field-main{ min-height:3.1rem; }
  .search-field-compact{ min-height:2.85rem; }
  .search-select{ min-height:2.85rem; font-size:.88rem; padding:.5rem 2.3rem .5rem .9rem; }
  .search-field{ padding-top:.5rem; padding-bottom:.5rem; }
  .search-field-compact{ font-size:.88rem; }
  .search-submit{ min-height:3rem; }
}

/* Tipo de conta: 3-up compacto (ícone em cima) também no mobile — economiza
   altura vs. os 3 cards empilhados. Garante encaixe em 375px. */
@media (max-width: 640px){
  .account-type-grid{ gap:.4rem; }
  .account-type-card{ padding:.6rem .35rem; min-height:0; }
  .account-type-card .bi{ font-size:1.15rem; margin-bottom:.2rem; }
}

/* ============================================================= */
/* ===== TINTA: poças, respingos, pincel desenhando cards ====== */
/* ============================================================= */

/* --- poça de tinta (pool): blob achatado, com brilho de "molhado" --- */
.ph-puddle{
  transform:scaleY(.46) rotate(var(--r,0deg));
  filter:drop-shadow(0 6px 8px rgba(14,28,46,.10));
  animation:ph-puddle 9s ease-in-out infinite; animation-delay:var(--d,0ms);
}
@keyframes ph-puddle{
  0%,100%{ transform:scaleY(.46) scaleX(1) rotate(var(--r,0deg)); }
  50%{ transform:scaleY(.49) scaleX(1.035) rotate(var(--r,0deg)); }
}

/* --- pincel passando que "desenha" o card ao revelar --- */
.brush-sweep{
  position:absolute; top:-12%; bottom:-12%; left:-72%; width:56%; pointer-events:none; opacity:0; z-index:5;
  background:linear-gradient(90deg,transparent,rgba(181,86,63,.0) 8%,rgba(143,61,44,.42) 50%,rgba(217,164,65,.0) 92%,transparent);
  filter:blur(6px);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 2px,rgba(0,0,0,.35) 2px 5px);
  mask-image:repeating-linear-gradient(90deg,#000 0 2px,rgba(0,0,0,.35) 2px 5px);
}
[data-reveal].in .brush-sweep{ animation:ph-brushpass 1s cubic-bezier(.22,1,.36,1) .05s forwards; }
@keyframes ph-brushpass{
  0%{ transform:translateX(0); opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateX(330%); opacity:0; }
}

/* --- respingo de tinta (splatter) surge com overshoot --- */
@keyframes ph-splat{
  0%{ transform:scale(0) rotate(var(--r,0deg)); opacity:0; }
  60%{ transform:scale(1.12) rotate(var(--r,0deg)); opacity:1; }
  100%{ transform:scale(1) rotate(var(--r,0deg)); opacity:1; }
}
.ph-splat{ opacity:0; animation:ph-splat .9s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay:var(--d,0ms); }
/* respingo que pulsa de leve em loop */
@keyframes ph-splat-idle{ 0%,100%{ transform:scale(1) rotate(var(--r,0deg)); } 50%{ transform:scale(1.06) rotate(var(--r,0deg)); } }
.ph-splat-idle{ animation:ph-splat-idle 6s ease-in-out infinite; animation-delay:var(--d,0ms); }

/* --- ladrilho "pintado" do mockup: textura de rolo + brilho no topo --- */
.paint-tile{ position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.paint-tile::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 46%); }
.paint-tile::after{ content:""; position:absolute; inset:0; mix-blend-mode:overlay;
  background:repeating-linear-gradient(116deg,rgba(255,255,255,.12) 0 4px,transparent 4px 12px); }

/* respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion: reduce){
  .animate-aurora,.animate-float,.animate-marquee,.ph-rise,.ph-stroke,.ph-swatch,.ph-drip,
  .ph-puddle,.brush-sweep,.ph-splat,.ph-splat-idle{animation:none!important}
  .brush-sweep{opacity:0}
  .ph-rise,.ph-swatch,.ph-splat{opacity:1}
  .ph-stroke{stroke-dashoffset:0}
}