/* =========================================================
   Bianca Barbara — Link na Bio
   ========================================================= */

:root{
  --cream:#F7E8DB;
  --card:#F9EDE2;
  --pink:#BD8380;
  --green:#07B452;
  --green-dark:#059A46;
  --ink:#000000;
  --line:#DBCEC2;
  --muted:#8A8582;
  --muted-2:#ADADAD;

  --shell:1056px;
  --gutter:20px;

  --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Prata',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:min(var(--shell),100% - var(--gutter)*2);
  margin-inline:auto;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.hero{display:block}
.hero img{
  width:100%;
  aspect-ratio:5760/2610;
  max-height:calc(100svh - 62px);
  object-fit:cover;
  object-position:center top;
}

/* ---------------------------------------------------------
   FAIXA ANIMADA
   --------------------------------------------------------- */
.marquee{
  background:var(--pink);
  height:62px;
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
  z-index:2;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:slide 46s linear infinite;
}
.marquee__group{
  display:flex;
  align-items:center;
  gap:50px;
  margin:0;
  padding:0 25px;
  list-style:none;
}
.marquee__group li{
  color:#fff;
  font-size:16px;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}
@keyframes slide{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ---------------------------------------------------------
   BOTÃO
   --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:266px;
  height:58px;
  border-radius:6px;
  background:var(--green);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 2px 10px rgba(7,180,82,.28);
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.btn:hover{
  background:var(--green-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(7,180,82,.34);
}
.btn:active{transform:translateY(0)}

/* ---------------------------------------------------------
   CARD WHATSAPP
   --------------------------------------------------------- */
/* card + mapa: empilhados por padrao, lado a lado no desktop */
.wrap--row{
  margin-top:100px;
  display:flex;
  flex-direction:column;
  gap:102px;
}

.card{
  position:relative;
  flex:0 0 auto;
  container-type:inline-size;
  aspect-ratio:1056/450;
  border-radius:24px;
  overflow:hidden;
  background:var(--card);
  transition:box-shadow .35s ease,transform .35s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px -24px rgba(115,70,60,.45);
}
.card__bg{position:absolute;inset:0}
.card__bg img{width:100%;height:100%;object-fit:cover;object-position:center}

.card__content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:8.52cqw 42cqw 0 6.63cqw;
}
.card__title{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:max(40px,6.72cqw);
  line-height:1;
  color:var(--pink);
}
.card__name{
  margin:0.68cqw 0 0;
  font-size:max(14px,2.18cqw);
  font-weight:400;
  line-height:1;
  color:var(--pink);
}
.card__text{
  margin:3.03cqw 0 0;
  font-size:max(12.5px,1.89cqw);
  font-weight:400;
  line-height:1.2;
  color:var(--ink);
}
.card .btn{
  margin-top:2.94cqw;
  width:max(186px,25.19cqw);
  height:max(42px,5.49cqw);
  border-radius:.57cqw;
  font-size:max(10.5px,1.23cqw);
  box-shadow:0 .2cqw .95cqw rgba(7,180,82,.28);
}

/* ---------------------------------------------------------
   MAPA
   --------------------------------------------------------- */
.map{
  flex:1 1 auto;
  position:relative;
  aspect-ratio:1056/486;
  border-radius:24px;
  overflow:hidden;
  background:#EDE9E4;
  transition:box-shadow .35s ease,transform .35s ease;
}
.map:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px -24px rgba(115,70,60,.45);
}
.map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.map__cta{
  position:absolute;
  right:16px;
  bottom:16px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:38px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--pink);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 4px 16px rgba(80,50,40,.18);
  backdrop-filter:blur(6px);
  transition:background .25s ease,transform .25s ease,color .25s ease;
}
.map__cta svg{width:14px;height:14px;fill:currentColor}
.map__cta:hover{background:var(--pink);color:#fff;transform:translateY(-2px)}

/* ---------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------- */
.footer{
  margin-top:96px;
  padding-bottom:89px;
}
.footer__inner{
  width:min(758px,100% - var(--gutter)*2);
  margin-inline:auto;
  padding:40px 30px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.footer__brand{
  display:inline-flex;
  align-items:center;
  gap:16px;
}
.ig{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  border-radius:50%;
  background:var(--pink);
  transition:transform .3s ease,box-shadow .3s ease;
}
.ig svg{width:21px;height:21px;fill:#fff}
.footer__brand:hover .ig{
  transform:scale(1.07);
  box-shadow:0 6px 18px rgba(189,131,128,.45);
}
.footer__id{display:flex;flex-direction:column;gap:2px}
.footer__id strong{
  font-size:16px;
  font-weight:600;
  line-height:1.25;
  color:var(--ink);
}
.footer__id em{
  font-size:13px;
  font-style:normal;
  font-weight:400;
  line-height:1.25;
  color:var(--muted);
  transition:color .25s ease;
}
.footer__brand:hover .footer__id em{color:var(--pink)}

.footer__place{
  font-size:16px;
  font-weight:400;
  color:var(--muted-2);
  transition:color .25s ease;
}
.footer__place:hover{color:var(--pink)}

/* ---------------------------------------------------------
   ENTRADA
   --------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  animation:rise .9s cubic-bezier(.22,.7,.3,1) forwards;
  animation-delay:var(--d,0s);
}
/* com JS: espera o bloco entrar na tela */
.reveal--wait{animation:none}
.reveal--in{
  animation:rise .9s cubic-bezier(.22,.7,.3,1) forwards;
  animation-delay:0s;
}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------------------------------------------------------
   RESPONSIVO — TABLET
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   DESKTOP LARGO — card e mapa lado a lado
   --------------------------------------------------------- */
@media (min-width:1280px){
  .wrap--row{
    width:min(1750px,100% - 120px);
    flex-direction:row;
    align-items:stretch;
    gap:2%;
  }
  .card{flex:0 0 53%}
  .map{aspect-ratio:auto}
}

@media (max-width:1000px){
  .wrap--row{margin-top:72px;gap:72px}
  .footer{margin-top:72px}
}

/* ---------------------------------------------------------
   RESPONSIVO — MOBILE
   --------------------------------------------------------- */
@media (max-width:700px){
  :root{--gutter:18px}

  .hero img{
    aspect-ratio:3240/4362;
    max-height:calc(100svh - 54px);
    object-position:center top;
  }
  .marquee{height:54px}
  .marquee__group{gap:30px;padding:0 15px}
  .marquee__group li{font-size:11px;letter-spacing:.26em}
  .marquee__track{animation-duration:34s}

  .btn{width:100%;max-width:320px;height:54px;font-size:12.5px}

  /* card — arte vertical, texto no topo */
  .wrap--row{margin-top:40px;gap:44px}
  .card{
    container-type:normal;
    aspect-ratio:1926/2829;
    border-radius:18px;
  }
  .card:hover{transform:none;box-shadow:none}
  .card__bg img{object-position:center top}
  .card__content{
    z-index:1;
    width:100%;
    padding:30px 24px 0;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
  }
  .card__title{font-size:34px}
  .card__name{margin-top:5px;font-size:14px}
  .card__text{margin-top:16px;font-size:13px;line-height:1.45}
  .card .btn{
    margin-top:18px;
    width:auto;
    max-width:none;
    height:42px;
    padding:0 28px;
    border-radius:6px;
    font-size:11px;
    letter-spacing:.09em;
    box-shadow:0 2px 10px rgba(7,180,82,.28);
  }

  /* mapa */
  .map{aspect-ratio:4/3;border-radius:18px}
  .map:hover{transform:none;box-shadow:none}
  .map__cta{right:12px;bottom:26px;height:34px;font-size:10.5px;padding:0 13px}

  /* rodapé */
  .footer{margin-top:52px;padding-bottom:52px}
  .footer__inner{
    padding:30px 4px;
    gap:14px;
  }
  .footer__brand{gap:13px}
  .ig{width:40px;height:40px}
  .ig svg{width:19px;height:19px}
  .footer__id strong{font-size:15px}
  .footer__id em{font-size:13px}
  .footer__place{font-size:14px;text-align:right}
}

/* ---------------------------------------------------------
   ACESSIBILIDADE
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto}
  .reveal,.reveal--wait,.reveal--in{opacity:1;transform:none;animation:none}
  .marquee__track{animation:none}
}