/* =============================================================================
   Eric Matheus — link-in-bio  (original stylesheet, Bootstrap 5 as base)
   ============================================================================= */
:root{
  --brand:#212529;          /* cor primária dos botões (escuro, igual ao "Enviar solicitação") */
  --brand-hover:#1a1e21;
  --link:#0d6efd;           /* cor de links (ex.: "Ver no mapa") */
  --verified:#0095f6;       /* selo + categoria */
  --grey:#efefef;           /* botões secundários */
  --muted:#999ca4;
  --muted-2:#aaaaaa;
  --hero-h:27rem;
  --hero-focus:50% 18%;     /* object-position da foto do hero */
  --maxw:580px;
}

*{ -webkit-tap-highlight-color:transparent; }
html,body{ overflow-x:hidden; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#000; background:#fff;   /* branco (--bs-body-bg), igual à referência */
}
a{ text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; }

/* Loader bar (topo) */
.loader-bar{ display:none; height:.2rem; position:fixed; top:0; left:0; width:100%;
  z-index:9999; background:linear-gradient(90deg,var(--brand),var(--verified)); }

/* Mobile-first: no celular o cartão encosta nas bordas e o branco é CONTÍNUO
   até o rodapé (sem cantos arredondados embaixo mostrando o fundo — igual à
   referência mobile). O visual de "cartão flutuante" (cantos + sombra) fica só
   no desktop. */
.card-on-desktop{
  background:#fff;
}
@media (min-width:768px){
  .card-on-desktop{
    margin-top:4.5rem !important;
    border-radius:2rem !important;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:clip;
  }
}

/* ---------------------------------------------------------------- Hero ----- */
.profile-hero-container{ position:relative; width:100vw; margin-left:calc(-50vw + 50%); }
@media (min-width:768px){
  .profile-hero-container{ width:100%; max-width:768px; margin:0 auto; }
}
.hero-background{ position:relative; width:100%; height:var(--hero-h); overflow:hidden; }
.hero-background img{ width:100%; height:100%; object-fit:cover;
  object-position:var(--hero-focus); filter:brightness(.75); display:block; }
.hero-background.no-img{ background:linear-gradient(135deg,#1f2937,#0b1220); }
@media (min-width:768px){
  .hero-image{ border-top-left-radius:2rem; border-top-right-radius:2rem; }
}
/* Fade branco SÓ na base da foto (igual ao Vozinha: height 70%, topo nítido) */
.hero-background::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:70%; pointer-events:none;
  background:
    linear-gradient(to top right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(to top left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(to top,       rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 25%),
    linear-gradient(to top,       rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);
}
.hero-icon{ position:absolute; top:1rem; z-index:2; }
.hero-icon-left{ left:1rem; } .hero-icon-right{ right:1rem; }
.hero-icon button, .hero-icon a{ outline:none!important; box-shadow:none!important; }
.icon-circle{ display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:50%; border:1px solid #c9c9c9; background:#fff; }
.icon-circle i{ font-size:.9rem; color:#000; }

/* ------------------------------------------------------------- Perfil ------ */
.profile-name{ font-weight:600; font-size:1.35rem; display:inline; letter-spacing:-.01em; }
.verified-badge{ width:1.05rem; height:1.05rem; vertical-align:baseline; margin-left:.4rem; }
.profile-category{ color:var(--verified); font-size:.9rem; text-decoration:none; }
.profile-bio{ font-size:.9rem; line-height:1.35; color:#000; }

/* Botões do cabeçalho */
.btn-header{
  border-radius:.55rem; font-weight:600; font-size:.95rem; padding:.5rem .5rem;
  border:1px solid transparent; background:var(--brand); color:#fff; width:100%;
  transition:filter .15s ease, background .15s ease;
}
.btn-header:hover{ background:var(--brand-hover); color:#fff; }
.btn-header-secondary{ background:var(--grey); color:#000; }
.btn-header-secondary:hover{ background:#e4e4e4; color:#000; }

/* Redes sociais */
.social-row{ font-size:1.55rem; }
.social-link{ margin-right:1rem; display:inline-block; }
.social-link:last-child{ margin-right:0; }
.social-link a{ color:#000; }        /* ícones pretos (igual à referência) */
.social-link a:hover{ color:#000; }
.social-link i{ transition:opacity .15s ease; }
.social-link:hover i{ opacity:.6; }

/* ---------------------------------------------------------- Tabs galeria --- */
.gallery-tabs{ border-bottom:none; gap:.25rem; }
.gallery-tabs .nav-link{
  color:#000; border:none; border-bottom:2px solid transparent; padding:.5rem .75rem;
  background:none; opacity:.55;
}
.gallery-tabs .nav-link:hover{ opacity:.85; }
.gallery-tabs .nav-link.active{ opacity:1; border-bottom-color:#000; background:none; color:#000; }
.gallery-tabs .nav-link i, .gallery-tabs .nav-link svg{ font-size:1.05rem; }
.tab-ico{ width:20px; height:20px; vertical-align:middle; }

/* Sombra usada nos cards de link */
.shadow-link{ box-shadow:0 .3rem .6rem rgba(0,0,0,.08); }
.thumb{ background-size:cover; background-position:center; background-color:#0b1220; }
.thumb.placeholder-thumb{ background:linear-gradient(135deg,#1f2937,#0b1220); }
.link-ico{ color:#fff; opacity:.9; background:transparent; border:none; padding:0;
  cursor:pointer; line-height:0; font-size:1.1rem; }
.link-ico:hover{ opacity:1; }
.link-ico i{ pointer-events:none; }
.hand-ico{ width:1.4rem; height:1.4rem; display:block; }   /* cursor mão clicando */

/* View: barras (horizontal) */
.v-bars .link-item{ display:block; margin-bottom:1.25rem; }
.v-bars .card{ border:1px solid rgba(0,0,0,.14); height:4rem; border-radius:.6rem; overflow:hidden; }
.v-bars .thumb{ width:100%; height:100%; border-radius:.6rem 0 0 .6rem; }
.v-bars .title{ font-weight:600; font-size:.9rem; color:#000; line-height:1.15; }
.v-bars .sub{ font-size:.72rem; color:var(--muted-2); }
.v-bars .dots{ color:var(--muted-2); }

/* View: cards */
.v-cards .card{ border:1px solid rgba(0,0,0,.14); border-radius:.7rem; overflow:hidden; height:14rem; }
.v-cards .thumb{ height:8rem; position:relative; }
.v-cards .thumb .link-ico{ position:absolute; top:.5rem; left:.6rem; }
.v-cards .title{ font-size:.8rem; font-weight:600; }
.v-cards .sub{ font-size:.72rem; color:var(--muted); }

/* View: quadrado */
.v-square .thumb{ position:relative; aspect-ratio:1; border-radius:.7rem; border:1px solid rgba(0,0,0,.14); }
.v-square .link-ico{ position:absolute; top:.6rem; left:.7rem; font-size:1.15rem; }
.v-square .dots{ position:absolute; top:.5rem; right:.6rem; color:#fff; }

/* View: vertical 16:9 (padrão) */
.v-vertical .link-item{ margin-bottom:1.25rem; }
.v-vertical .card{ position:relative; aspect-ratio:16/9; border:1px solid rgba(0,0,0,.14);
  border-radius:1rem; overflow:hidden; box-shadow:0 .4rem .9rem rgba(0,0,0,.13) !important; }
.v-vertical .thumb{ position:absolute; inset:0; }
.v-vertical .overlay{ position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 55%); }
.v-vertical .title{ position:absolute; left:1rem; right:2.5rem; bottom:.9rem;
  color:#fff; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-vertical .link-ico{ position:absolute; bottom:.9rem; right:1rem; }   /* correntinha no canto inferior direito (igual à referência) */
.v-vertical .dots{ position:absolute; top:.6rem; right:.8rem; color:#fff; }

/* View: grid do Instagram */
.ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.ig-item{ position:relative; aspect-ratio:1; overflow:hidden; }
/* O invólucro (link <a> OU banner CTA <div class="link-cta">) precisa preencher a
   célula; senão o thumb com height:100% colapsa e some a imagem dos banners CTA. */
.ig-item > a, .ig-item > .link-cta{ display:block; width:100%; height:100%; }
.ig-item .thumb{ width:100%; height:100%; }
.ig-item .cap{ position:absolute; left:0; right:0; bottom:0; padding:6px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.6)); opacity:0; transition:opacity .2s ease; }
.ig-item:hover .cap{ opacity:1; }
.ig-item .cap span{ color:#fff; font-size:.7rem; font-weight:500; }

/* --------------------------------------------------------- Rodapé fixo ----- */
#fixedFooter{ background:#fff; }
#fixedFooter .btn{ padding:.55rem .5rem; font-weight:600; border-radius:.55rem; }
#fixedFooter .btn-follow{ background:var(--brand); color:#fff; border:none; }
#fixedFooter .btn-signup{ background:var(--grey); color:#000; border:none; }

/* -------------------------------------------------------------- Modal ------ */
.modal-content-rounded{ position:relative; border-radius:1rem 1rem 0 0; border:none; }
@media (min-width:576px){ .modal-content-rounded{ border-radius:1rem; } }
/* Botão de fechar sempre no canto superior direito */
.close-x{ position:absolute; top:.85rem; right:1rem; z-index:5;
  background:transparent; border:none; color:#c4c4c4; padding:0; line-height:0; }
.close-x:hover{ color:#9a9a9a; }
.close-x i{ font-size:1.5rem; }
.modal-header .modal-title{ padding-right:1.75rem; }   /* reserva espaço p/ o X */
.avatar-initial{ width:30px; height:30px; border-radius:50%; background:var(--grey);
  display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; }
.form-hint{ font-size:.75rem; color:#888; }

/* -------------------------------------------------------- Collaborate ------ */
.section-label{ font-weight:700; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:#888; }

/* -------------------------------------------------- CTAs (labels longos) --- */
.btn-cta{ font-size:.82rem; line-height:1.15; padding-left:.35rem; padding-right:.35rem;
  white-space:normal; }
@media (max-width:360px){ .btn-cta{ font-size:.74rem; } }

/* --------------------------------------------------------- Campo WhatsApp -- */
.wa-group .form-select{ flex:0 0 auto; width:auto; min-width:92px; max-width:112px; }
.wa-group input[name="waDdd"]{ flex:0 0 auto; width:72px; text-align:center; }

/* Espaço para o rodapé fixo não cobrir o último banner.
   No mobile é branco (continua o cartão até o rodapé); no desktop deixa o fundo aparecer. */
.footer-clear{ height:5.5rem; background:#fff; }
@media (min-width:768px){ .footer-clear{ background:transparent; } }

/* ------------------------------------------------ Banner CTA (consultoria) - */
.link-cta{ cursor:pointer; }
.link-cta:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:1rem; }
.info-address{ background:#f7f8fa; border-radius:.6rem; padding:.75rem .9rem; line-height:1.45; }
.info-address .info-map{ display:inline-block; margin-top:.55rem; color:var(--link); font-weight:600; }
.info-list{ padding-left:1.15rem; margin-bottom:.7rem; }
.info-list li{ margin-bottom:.25rem; line-height:1.35; }