/* ==========================================================================
   Aleh · Organização de Perfil do Instagram
   Aesthetic: refined editorial rosé — high-contrast serif display, airy
   spacing, hairline detailing, soft rose-tinted shadows.
   ========================================================================== */

:root{
  /* Palette */
  --ivory:      #FDF8F5;
  --ivory-warm: #FBF2EE;
  --blush:      #F6E4DF;
  --blush-deep: #EFD2CC;
  --rose:       #DFA7A6;
  --rose-deep:  #C2797E;
  --rose-ink:   #A45B62;
  --plum:       #46292F;
  --plum-soft:  #7B5A60;
  --gold:       #C6A484;
  --white:      #FFFFFF;

  /* Type */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Shadows — always rose-tinted, never neutral grey */
  --sh-sm: 0 2px 10px rgba(164,91,98,.07);
  --sh-md: 0 14px 40px -12px rgba(164,91,98,.20), 0 2px 8px rgba(164,91,98,.06);
  --sh-lg: 0 36px 80px -28px rgba(140,74,82,.34), 0 6px 18px rgba(164,91,98,.10);

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --wrap: 1180px;
}

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

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

body{
  margin:0;
  background:var(--ivory);
  color:var(--plum);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--plum);
  letter-spacing:-.012em;
  line-height:1.08;
  margin:0;
}
h1{ font-size:clamp(2.6rem,1.9rem + 3vw,4.05rem); }
h2{ font-size:clamp(2.1rem,1.5rem + 2.6vw,3.5rem); }
h3{ font-size:1.32rem; line-height:1.24; letter-spacing:-.005em; }
h1 em, h2 em{ font-style:italic; color:var(--rose-deep); font-weight:300; }

p{ margin:0; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--plum); color:var(--ivory); padding:.75rem 1.25rem; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

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

/* ---------- Eyebrow / small caps label ---------- */
.eyebrow{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-weight:400;
  color:var(--rose-ink);
  margin-bottom:1.5rem;
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{
  content:""; height:1px; flex:0 0 46px;
  background:linear-gradient(90deg,var(--rose),transparent);
}

/* ==========================  NAV  ========================== */
.nav{
  position:sticky; top:0; z-index:100;
  padding:1.1rem 0;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(253,248,245,.86);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 rgba(196,150,150,.18), var(--sh-sm);
  padding:.7rem 0;
}
.nav__inner{ display:flex; align-items:center; gap:2rem; }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand__mark{
  width:38px; height:38px; flex:0 0 38px;
  border-radius:12px;
  background:linear-gradient(145deg,var(--rose),var(--rose-deep));
  color:var(--white);
  font-family:var(--display); font-size:1.32rem; font-weight:500;
  display:grid; place-items:center;
  box-shadow:0 6px 16px -6px rgba(164,91,98,.55);
}
.brand__text{
  font-family:var(--display); font-size:1.42rem; line-height:1;
  letter-spacing:.01em;
  display:flex; flex-direction:column; gap:.22rem;
}
.brand__text em{
  font-family:var(--body); font-style:normal;
  font-size:.56rem; text-transform:uppercase; letter-spacing:.3em;
  color:var(--plum-soft);
}

.nav__links{ display:flex; gap:2.1rem; font-size:.855rem; letter-spacing:.04em; }
.nav__links a{ position:relative; color:var(--plum-soft); transition:color .3s var(--ease); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px;
  background:var(--rose-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--plum); }
.nav__links a:hover::after{ transform:scaleX(1); }

/* ==========================  BUTTONS  ========================== */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--body); font-size:.855rem; font-weight:400;
  letter-spacing:.09em; text-transform:uppercase;
  padding:1.02rem 1.85rem;
  border-radius:100px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
  will-change:transform;
}
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.btn--solid{
  background:linear-gradient(135deg,var(--rose-deep),var(--rose-ink) 60%,#8E4B53);
  color:var(--ivory);
  box-shadow:0 14px 34px -14px rgba(164,91,98,.75);
}
.btn--solid::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .85s var(--ease);
}
.btn--solid:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -16px rgba(164,91,98,.85); }
.btn--solid:hover::before{ transform:translateX(130%); }

.btn--ghost{
  background:rgba(255,255,255,.55);
  color:var(--plum);
  border:1px solid var(--blush-deep);
  padding:.82rem 1.4rem;
  font-size:.74rem;
  box-shadow:var(--sh-sm);
}
.btn--ghost:hover{ background:var(--white); border-color:var(--rose); transform:translateY(-2px); }

.btn--lg{ padding:1.22rem 2.5rem; font-size:.92rem; }

.link-quiet{
  font-size:.82rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--plum-soft);
  border-bottom:1px solid var(--rose);
  padding-bottom:3px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-quiet:hover{ color:var(--rose-deep); border-color:var(--rose-deep); }

/* ==========================  HERO  ========================== */
.hero{ position:relative; padding:clamp(3rem,6vw,6rem) 0 clamp(5rem,9vw,8.5rem); overflow:hidden; }
.hero__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg,rgba(253,248,245,.62) 0%,rgba(253,248,245,.9) 58%,var(--ivory) 100%),
    url("/.netlify/images?url=/img/texture-silk.jpg&w=1800&fm=webp&q=72") center/cover no-repeat;
}
.hero__bloom{
  position:absolute; z-index:-1;
  top:-18%; right:-12%; width:58vw; aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(223,167,166,.34),rgba(223,167,166,0) 68%);
  filter:blur(18px);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-4%,4%,0) scale(1.1); }
}

.hero__inner{
  display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
/* Sized in rem, not ch — the display face is far wider than the body face,
   so a ch-based cap squeezed the eyebrow onto two lines. */
.hero__copy{ max-width:36rem; }
.lead{
  margin-top:1.75rem;
  font-size:clamp(1.06rem,1rem + .45vw,1.28rem);
  line-height:1.66;
  color:var(--plum-soft);
  max-width:30rem;
}
.hero__actions{
  margin-top:2.6rem;
  display:flex; align-items:center; gap:clamp(1.25rem,3vw,2.25rem);
  flex-wrap:wrap;
}
.hero__notes{
  list-style:none; margin:3rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem;
  font-size:.79rem; letter-spacing:.05em; color:var(--plum-soft);
}
.hero__notes li{ display:flex; align-items:center; gap:.55rem; }
.hero__notes li::before{
  content:"✦"; color:var(--rose); font-size:.7rem;
}

/* ---- Phone mockup ---- */
.hero__visual{ position:relative; display:grid; place-items:center; padding:1.5rem 0; }
.phone{ position:relative; width:min(320px,74vw); animation:float 7s ease-in-out infinite; }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(-1.1deg); }
  50%    { transform:translateY(-14px) rotate(-1.1deg); }
}
.phone__glow{
  position:absolute; inset:-14% -18%;
  background:radial-gradient(ellipse at 50% 55%,rgba(194,121,126,.32),transparent 70%);
  filter:blur(26px);
}
.phone__body{
  position:relative;
  border-radius:40px;
  padding:9px;
  background:linear-gradient(150deg,#FFFFFF,var(--blush) 45%,#E6C3BE);
  box-shadow:var(--sh-lg), inset 0 0 0 1px rgba(255,255,255,.7);
}
.phone__notch{
  position:absolute; top:19px; left:50%; transform:translateX(-50%);
  width:62px; height:5px; border-radius:100px;
  background:rgba(70,41,47,.16); z-index:2;
}
.phone__body img{
  border-radius:33px;
  aspect-ratio:9/16.6;
  object-fit:cover; object-position:top center;
  width:100%;
}

.chip{
  position:absolute;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--rose-ink);
  border:1px solid rgba(223,167,166,.5);
  padding:.55rem 1rem;
  border-radius:100px;
  box-shadow:var(--sh-md);
  white-space:nowrap;
  animation:float 7s ease-in-out infinite;
}
.chip--a{ top:13%;  left:-6%;  animation-delay:-1.1s; }
.chip--b{ top:47%;  right:-9%; animation-delay:-3.4s; }
.chip--c{ bottom:12%; left:-2%; animation-delay:-5.2s; }

/* ==========================  MARQUEE  ========================== */
.marquee{
  border-top:1px solid var(--blush-deep);
  border-bottom:1px solid var(--blush-deep);
  background:var(--ivory-warm);
  overflow:hidden; padding:1.05rem 0;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:2.1rem; width:max-content;
  animation:slide 38s linear infinite;
}
.marquee__track span{
  font-family:var(--display); font-size:1.18rem; font-style:italic;
  color:var(--plum-soft); white-space:nowrap;
}
.marquee__track i{ color:var(--rose); font-style:normal; font-size:.62rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ==========================  SECTIONS  ========================== */
.section{ padding:clamp(4.5rem,9vw,8rem) 0; }
.section--tinted{
  position:relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(246,228,223,.9),transparent 70%),
    var(--ivory-warm);
  border-top:1px solid rgba(239,210,204,.6);
  border-bottom:1px solid rgba(239,210,204,.6);
}
/* Soft rosé bokeh bleeding in from the top — adds depth behind the cards */
.section--tinted::before{
  content:""; position:absolute; inset:0 0 auto; height:60%;
  background:url("/.netlify/images?url=/img/texture-glow.jpg&w=1400&fm=webp&q=70") center/cover no-repeat;
  opacity:.34;
  mask-image:linear-gradient(180deg,#000,transparent);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
  pointer-events:none;
}
.section--tinted > .wrap{ position:relative; z-index:1; }
.sec-head{ max-width:44rem; margin:0 auto clamp(3rem,6vw,4.5rem); text-align:center; }
.sec-head .eyebrow{ justify-content:center; }
.sec-head .eyebrow::after{ display:none; }
.sec-sub{
  margin-top:1.5rem; color:var(--plum-soft);
  font-size:1.055rem; max-width:52ch; margin-inline:auto;
}

/* ---------- ANTES / DEPOIS ---------- */
.ba{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:clamp(1rem,2.5vw,2rem);
}
.ba__card{ margin:0; position:relative; }
.ba__tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  line-height:1.5; /* pinned so both tags are the same height and the frames align */
  padding:.5rem 1.15rem; border-radius:100px;
  margin-bottom:1.1rem;
}
.ba__tag--before{
  background:rgba(123,90,96,.09); color:var(--plum-soft);
  border:1px solid rgba(123,90,96,.18);
}
.ba__tag--after{
  background:linear-gradient(135deg,var(--rose-deep),var(--rose-ink));
  color:var(--ivory);
  box-shadow:0 8px 20px -8px rgba(164,91,98,.7);
}
.ba__tag--after::before{ content:"✦"; font-size:.62rem; letter-spacing:0; }

/* The frame is the swappable print slot — object-fit keeps any screenshot tidy */
.ba__frame{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(160deg,var(--white),var(--blush));
  padding:10px;
  box-shadow:var(--sh-md);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.ba__frame::after{
  content:""; position:absolute; inset:10px;
  border-radius:calc(var(--r-lg) - 12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  pointer-events:none;
}
.ba__frame img{
  border-radius:calc(var(--r-lg) - 12px);
  width:100%;
  aspect-ratio:9/15;
  object-fit:cover;
  object-position:top center;
}
.ba__card:hover .ba__frame{ transform:translateY(-8px); box-shadow:var(--sh-lg); }

.ba__card--after .ba__frame{
  background:linear-gradient(160deg,var(--white),var(--blush-deep));
  box-shadow:0 30px 70px -26px rgba(140,74,82,.4), 0 0 0 1px rgba(223,167,166,.35);
}

.ba__card figcaption{
  margin-top:1.4rem;
  font-size:.91rem; line-height:1.66; color:var(--plum-soft);
  max-width:38ch;
}

.ba__arrow{
  align-self:center;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  padding-top:4rem;
}
.ba__line{ width:1px; height:clamp(40px,7vw,80px); background:linear-gradient(180deg,transparent,var(--rose),transparent); }
.ba__diamond{
  width:11px; height:11px; background:var(--rose-deep);
  transform:rotate(45deg);
  box-shadow:0 0 0 7px rgba(223,167,166,.2);
  animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 7px rgba(223,167,166,.2); }
  50%    { box-shadow:0 0 0 13px rgba(223,167,166,.05); }
}

/* ---------- SERVICE CARDS ---------- */
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.6rem);
}
.card{
  position:relative;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(239,210,204,.85);
  border-radius:var(--r-md);
  padding:2.1rem 1.85rem 2.25rem;
  box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  background:var(--white);
  border-color:var(--rose);
  box-shadow:var(--sh-md);
}
.card:hover::before{ transform:scaleX(1); }

.card__icon{
  display:grid; place-items:center;
  width:50px; height:50px; margin-bottom:1.5rem;
  border-radius:15px;
  background:linear-gradient(150deg,var(--blush),var(--ivory));
  border:1px solid rgba(223,167,166,.45);
  transition:background .5s var(--ease);
}
.card:hover .card__icon{ background:linear-gradient(150deg,var(--blush-deep),var(--blush)); }
.card__icon svg{
  width:24px; height:24px;
  fill:none; stroke:var(--rose-ink); stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
}
.card h3{ margin-bottom:.75rem; }
.card p{ font-size:.93rem; line-height:1.68; color:var(--plum-soft); }

/* ==========================  CTA  ========================== */
.cta{ position:relative; padding:clamp(5rem,10vw,9rem) 0; overflow:hidden; text-align:center; }
.cta__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,rgba(253,248,245,.72),rgba(251,242,238,.58)),
    url("/.netlify/images?url=/img/texture-petals.jpg&w=1800&fm=webp&q=72") center/cover no-repeat;
}
.cta__inner{ max-width:40rem; }
.cta__flourish{
  display:block; color:var(--rose-deep); font-size:1.1rem;
  margin-bottom:1.75rem; letter-spacing:.6em;
}
.cta h2{ margin-bottom:1.5rem; }
.cta__inner > p{
  color:var(--plum-soft);
  font-size:clamp(1.04rem,1rem + .35vw,1.2rem);
  max-width:34ch; margin:0 auto 2.75rem;
}
.cta__note{
  margin-top:1.5rem !important;
  font-size:.76rem !important; letter-spacing:.09em;
  color:var(--plum-soft); opacity:.8;
}

/* ==========================  FOOTER  ========================== */
.foot{
  background:var(--plum);
  color:rgba(253,248,245,.78);
  padding:clamp(3rem,5vw,4.25rem) 0 1.75rem;
}
.foot__inner{
  display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
  padding-bottom:2.25rem;
  border-bottom:1px solid rgba(253,248,245,.14);
}
.brand--foot{ margin-right:auto; color:var(--ivory); }
.brand--foot .brand__text em{ color:rgba(253,248,245,.55); }
.foot__tag{ font-size:.88rem; max-width:30ch; }
.foot__wa{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(253,248,245,.3);
  padding:.8rem 1.5rem; border-radius:100px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.foot__wa:hover{ background:var(--ivory); color:var(--plum); border-color:var(--ivory); }
.foot__base{
  text-align:center; margin-top:1.75rem;
  font-size:.74rem; letter-spacing:.1em; color:rgba(253,248,245,.45);
}

/* ==========================  FLOATING WHATSAPP  ========================== */
.float-wa{
  position:fixed; z-index:90;
  right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--rose-deep),var(--rose-ink));
  box-shadow:0 14px 32px -10px rgba(140,74,82,.7);
  opacity:0; transform:translateY(20px) scale(.85); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .4s var(--ease);
}
.float-wa.is-on{ opacity:1; transform:none; pointer-events:auto; }
.float-wa:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 20px 42px -10px rgba(140,74,82,.85); }
.float-wa svg{ width:29px; height:29px; fill:var(--ivory); }

/* ==========================  REVEAL  ========================== */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================  RESPONSIVE  ========================== */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ max-width:none; margin-inline:auto; }
  .hero__copy .eyebrow{ justify-content:center; }
  .hero__copy .eyebrow::after{ display:none; }
  .lead{ margin-inline:auto; }
  .hero__actions,.hero__notes{ justify-content:center; }
  /* Once the hero stacks, shrink the visual to the phone's own width so the
     floating chips stay anchored to the phone instead of the full column. */
  .hero__visual{ order:-1; width:min(320px,74vw); margin-inline:auto; }
  .phone{ width:100%; }
  .cards{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  /* Prints stack one above the other on phones */
  .ba{ grid-template-columns:1fr; gap:2.5rem; justify-items:center; }
  .ba__card{ width:100%; max-width:430px; }
  .ba__card figcaption{ max-width:none; }
  .ba__arrow{ padding-top:0; flex-direction:row; }
  .ba__line{ width:clamp(40px,14vw,90px); height:1px; background:linear-gradient(90deg,transparent,var(--rose),transparent); }
}

@media (max-width:640px){
  .nav__cta{ display:none; }
  .cards{ grid-template-columns:1fr; }
  .chip{ font-size:.63rem; padding:.45rem .8rem; }
  .chip--c{ display:none; }
  .foot__inner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .brand--foot{ margin-right:0; }
}

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