/* ============================================================
   Amorena Decorações — landing
   Paleta tirada da logo: rosa, amarelo, verde, azul
   Sem framework. Sem componentes prontos. Tudo na unha.
   ============================================================ */

:root{
  --rosa: #F4A6C0;
  --rosa-d: #E07AA0;
  --amarelo: #FFD56B;
  --verde: #8FD49B;
  --azul: #7FC8E8;
  --azul-d: #4FA3CC;

  --cream: #FEFCF8;
  --cream-2: #FFF6EE;
  --ink: #3D3140;       /* cinza-roxo escuro, mais quente que preto */
  --ink-soft: #6E5F70;
  --line: #EEE3DA;

  --shadow-soft: 0 8px 30px rgba(106, 79, 90, .08);
  --shadow-card: 0 18px 40px -18px rgba(106, 79, 90, .25);

  --radius-blob: 38% 62% 55% 45% / 50% 40% 60% 50%;
  --radius-blob-2: 60% 40% 35% 65% / 55% 45% 55% 45%;
  --radius-blob-3: 45% 55% 65% 35% / 35% 65% 35% 65%;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }

body{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}

img{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }

/* ===== Ícones inline (substitutos dos emojis) ===== */
.icon-inline{
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 0.15em;
  flex-shrink: 0;
}
.icon-inline--amarelo{ color: var(--amarelo); }
.icon-inline--rosa{ color: var(--rosa-d); }
.icon-inline--azul{ color: var(--azul-d); }
.icon-inline--verde{ color: var(--verde); }

/* ============ TIPOGRAFIA UTILITÁRIA ============ */

.kicker{
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: var(--rosa-d);
  letter-spacing: .5px;
  margin-bottom: .4rem;
  transform: rotate(-1.5deg);
  display: inline-block;
}

.handfont, .handwritten{
  font-family: 'Caveat', cursive;
  font-weight: 700;
}

.handwritten{
  font-size: 1.45rem;
  color: var(--azul-d);
  margin-top: 1.5rem;
}

.section-title{
  font-family: 'Bagel Fat One', system-ui;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -.5px;
  font-weight: 400;
}

.section-sub{
  margin-top: 1rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

.section-head{
  margin-bottom: 3rem;
}
.section-head--center{
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.section-head--center .section-title{ max-width: 22ch; }

/* ============ BOTÕES ============ */

.btn{
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform .2s, box-shadow .2s, background .2s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.btn--primary{
  background: #25D366;
  color: white;
  box-shadow: 0 12px 24px -8px rgba(37, 211, 102, .55);
}
.btn--primary:hover{
  transform: translateY(-2px) rotate(-.5deg);
  box-shadow: 0 16px 28px -8px rgba(37, 211, 102, .7);
}

.btn--white{
  background: white;
  color: #25D366;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.2);
  font-size: 1.1rem;
  padding: 1.2rem 1.8rem;
}
.btn--white:hover{ transform: translateY(-2px) scale(1.02); }

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border: 2px dashed var(--ink-soft);
}
.btn--ghost:hover{ background: var(--cream-2); border-style: solid; }

/* ============ NAV (DESKTOP) ============ */

.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem clamp(1.2rem, 4vw, 3rem);
  z-index: 50;
  transition: background .3s, box-shadow .3s, padding .3s;
}
.nav.is-scrolled{
  background: rgba(254, 252, 248, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(106, 79, 90, .06);
  padding-top: .65rem;
  padding-bottom: .65rem;
}

.nav__brand{
  display: flex; align-items: center; gap: .7rem;
}
.nav__brand img{
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
  transition: transform .3s;
}
.nav__brand:hover img{ transform: rotate(-8deg) scale(1.05); }

.nav__brand-text{
  font-family: 'Bagel Fat One', system-ui;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink);
  display: flex; flex-direction: column;
  letter-spacing: -.3px;
}
.nav__brand-text small{
  font-family: 'Caveat', cursive;
  font-size: .85rem;
  color: var(--rosa-d);
  margin-top: 2px;
  letter-spacing: 1px;
}

.nav__links{
  display: flex; gap: 1.8rem; align-items: center;
}
.nav__links a{
  font-weight: 500;
  font-size: .98rem;
  position: relative;
  padding: .35rem 0;
  transition: color .2s;
}
.nav__links a:not(.nav__cta)::after{
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--rosa), var(--amarelo), var(--verde), var(--azul));
  border-radius: 2px;
  transition: width .3s;
}
.nav__links a:not(.nav__cta):hover::after{ width: 100%; }
.nav__links a:not(.nav__cta):hover{ color: var(--ink); }

.nav__cta{
  background: #25D366;
  color: white !important;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600;
  box-shadow: 0 8px 16px -6px rgba(37, 211, 102, .55);
  transition: transform .2s, box-shadow .2s;
}
.nav__cta:hover{
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 0 12px 22px -6px rgba(37, 211, 102, .7);
}
.nav__cta::after{ display: none !important; }

/* hambúrguer */
.nav__burger{
  display: none;
  width: 44px; height: 44px;
  background: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  padding: 0;
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: transform .2s, background .2s;
}
.nav__burger:hover{ transform: scale(1.05); }
.nav__burger span{
  position: absolute;
  left: 50%; top: 50%;
  width: 20px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: all .3s;
}
.nav__burger span:nth-child(1){ transform: translate(-50%, -8px); }
.nav__burger span:nth-child(3){ transform: translate(-50%, 8px); }
.nav__burger.is-open span:nth-child(1){ transform: translate(-50%, -50%) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity: 0; }
.nav__burger.is-open span:nth-child(3){ transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 860px){
  .nav__links{ display: none; }
  .nav__burger{ display: block; }
  .nav__brand img{ width: 42px; height: 42px; }
  .nav__brand-text{ font-size: 1.1rem; }
  .nav__brand-text small{ font-size: .75rem; }
}

/* ============ MOBILE MENU OVERLAY ============ */

.mobile-menu{
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #FFF8F4 0%, #FFEEF4 40%, #EAF6FE 100%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition: opacity .35s, transform .35s;
  overflow: hidden;
}
.mobile-menu.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu__close{
  position: absolute;
  top: 1.2rem; right: 1.5rem;
  width: 48px; height: 48px;
  background: white;
  border: none;
  border-radius: 14px;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.mobile-menu__nav{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}
.mobile-menu__nav a{
  font-family: 'Bagel Fat One', system-ui;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s;
  display: inline-block;
}
.mobile-menu__nav a[data-color="rosa"]{ color: var(--rosa-d); }
.mobile-menu__nav a[data-color="amarelo"]{ color: #B88800; }
.mobile-menu__nav a[data-color="verde"]{ color: #4A9F62; }
.mobile-menu__nav a[data-color="azul"]{ color: var(--azul-d); }
.mobile-menu__nav a:active{ transform: scale(.96); }

.mobile-menu__cta{
  margin-top: 1rem;
  padding: 1.1rem 1.8rem;
  font-size: 1.1rem;
}

.mobile-menu__sub{
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-top: .5rem;
}

.cloud--mm-a{
  position: absolute;
  top: 8%; left: -5%;
  width: 200px;
  opacity: .6;
  animation: floatSlow 6s ease-in-out infinite;
}
.cloud--mm-b{
  position: absolute;
  bottom: 5%; right: -5%;
  width: 240px;
  opacity: .5;
  animation: floatSlow 8s ease-in-out infinite reverse;
}

/* stagger reveal dos links quando abre */
.mobile-menu.is-open .mobile-menu__nav a{
  animation: slideInUp .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(1){ animation-delay: .05s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(2){ animation-delay: .1s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(3){ animation-delay: .15s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(4){ animation-delay: .2s; }
.mobile-menu.is-open .mobile-menu__cta{
  animation: slideInUp .5s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: .3s;
}
@keyframes slideInUp{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ============ HERO ============ */

.hero{
  position: relative;
  min-height: 100vh;
  padding: 9rem clamp(1.2rem, 4vw, 3rem) 8rem;
  background:
    radial-gradient(ellipse at 80% 10%, #FFF0E8 0%, transparent 50%),
    radial-gradient(ellipse at 10% 90%, #E8F4FB 0%, transparent 50%),
    var(--cream);
  overflow: hidden;
}

.hero__grid{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .hero{ padding-top: 7rem; padding-bottom: 6rem; }
}

.hero__photo{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-blob);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transform: rotate(-2deg);
  animation: floatSlow 8s ease-in-out infinite;
}
.hero__photo img{
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__sticker{
  position: absolute;
  background: white;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: var(--shadow-soft);
  z-index: 2;
}
.hero__sticker svg{ width: 18px; height: 18px; color: var(--rosa-d); }

.hero__sticker--a{
  top: 8%; left: -12%;
  color: var(--rosa-d);
  transform: rotate(-8deg);
}
.hero__sticker--b{
  bottom: 8%; right: -8%;
  color: var(--azul-d);
  transform: rotate(5deg);
}

@media (max-width: 900px){
  .hero__sticker--a{ left: 2%; }
  .hero__sticker--b{ right: 2%; }
}

.hero__title{
  font-family: 'Bagel Fat One', system-ui;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -1.5px;
  margin-bottom: 1.5rem;
  font-weight: 400;
}
.hero__title em{
  font-style: normal;
  color: var(--rosa-d);
  position: relative;
  display: inline-block;
  transform: rotate(-2deg);
}
.rainbow-stroke{
  display: inline-block;
  position: relative;
  background: linear-gradient(90deg, var(--rosa) 0%, var(--amarelo) 33%, var(--verde) 66%, var(--azul) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.hero__actions{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============ NUVENS ============ */

.cloud{
  position: absolute;
  width: 160px;
  height: 80px;
  z-index: 1;
  opacity: .7;
  animation: floatSlow 12s ease-in-out infinite;
  pointer-events: none;
}
.cloud--a{ top: 12%; left: 5%; width: 220px; animation-delay: 0s; }
.cloud--b{ top: 50%; right: 8%; width: 150px; animation-delay: 2s; opacity: .55; }
.cloud--c{ bottom: 25%; left: 35%; width: 110px; animation-delay: 4s; opacity: .45; animation-duration: 9s; }
.cloud--d{ top: 5%; left: 80%; width: 140px; opacity: .5; }
.cloud--e{ bottom: 15%; left: 3%; width: 180px; opacity: .6; }
.cloud--f{ top: 30%; left: 55%; width: 90px; opacity: .35; animation-delay: 1s; animation-duration: 14s; }
.cloud--g{ top: 70%; left: 20%; width: 120px; opacity: .4; animation-delay: 3s; animation-duration: 11s; }

@keyframes floatSlow{
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(8px); }
}

@keyframes driftHorizontal{
  0% { transform: translateX(-20px); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(-20px); }
}

/* ============ ARCO-ÍRIS FLUTUANTE ============ */

.rainbow-floater{
  position: absolute;
  top: 18%;
  right: -3%;
  width: 200px;
  height: 120px;
  z-index: 1;
  opacity: .85;
  animation: rainbowBob 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rainbowBob{
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-12px) rotate(-4deg); }
}
@media (max-width: 900px){
  .rainbow-floater{ width: 130px; top: 14%; right: -10%; opacity: .7; }
}

/* ============ CONFETES / BALÕES / ESTRELAS (festive layer) ============ */

.festive-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.confetti{
  position: absolute;
  top: -20px;
  width: 12px; height: 16px;
  border-radius: 2px;
  opacity: .85;
  animation: confettiFall linear infinite;
}
@keyframes confettiFall{
  0%{ transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%{ opacity: 1; }
  100%{ transform: translateY(110vh) rotate(720deg); opacity: .6; }
}

.balloon{
  position: absolute;
  bottom: -120px;
  width: 36px; height: 46px;
  border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
  opacity: .65;
  animation: balloonRise linear infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.08));
}
.balloon::after{
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  width: 1.5px;
  height: 50px;
  background: rgba(80, 60, 70, .25);
  transform: translateX(-50%);
}
.balloon::before{
  content: '';
  position: absolute;
  left: 25%; top: 18%;
  width: 8px; height: 10px;
  background: rgba(255,255,255,.5);
  border-radius: 50%;
  filter: blur(2px);
}
@keyframes balloonRise{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  10%{ opacity: .7; }
  100%{ transform: translateY(-130vh) translateX(40px); opacity: 0; }
}

.sparkle{
  position: absolute;
  width: 10px; height: 10px;
  background: radial-gradient(circle, var(--amarelo) 0%, transparent 70%);
  border-radius: 50%;
  animation: twinkle 2.5s ease-in-out infinite;
}
.sparkle::before, .sparkle::after{
  content: '';
  position: absolute;
  background: currentColor;
  color: var(--amarelo);
}
@keyframes twinkle{
  0%, 100%{ opacity: 0; transform: scale(.5); }
  50%{ opacity: 1; transform: scale(1.2); }
}

/* ============ DIVISOR ARCO-ÍRIS ============ */

.rainbow-divider{
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  width: 100%;
  height: 200px;
  display: block;
  z-index: 3;
}

.rainbow-path{
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation: drawRainbow 2.2s cubic-bezier(.4, 0, .2, 1) forwards;
}
.rainbow-path--1{ animation-delay: .2s; }
.rainbow-path--2{ animation-delay: .35s; }
.rainbow-path--3{ animation-delay: .5s; }
.rainbow-path--4{ animation-delay: .65s; }

@keyframes drawRainbow{
  to{ stroke-dashoffset: 0; }
}

@media (max-width: 900px){
  .rainbow-divider{ height: 130px; }
}

/* ============ SOBRE ============ */

.sobre{
  padding: 8rem clamp(1.2rem, 4vw, 3rem) 6rem;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
}
@media (max-width: 900px){
  .sobre{ grid-template-columns: 1fr; gap: 3rem; }
}

.sobre__col--media{
  position: relative;
  min-height: 480px;
}

.polaroid{
  position: absolute;
  background: white;
  padding: 14px 14px 50px;
  box-shadow: var(--shadow-card);
  border-radius: 4px;
  width: 60%;
}
.polaroid img{
  width: 100%;
  aspect-ratio: 1/1.1;
  object-fit: cover;
}
.polaroid span{
  display: block;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: var(--ink);
  padding-top: 8px;
}
.polaroid--a{
  top: 0; left: 5%;
  transform: rotate(-6deg);
  z-index: 2;
}
.polaroid--b{
  bottom: 0; right: 5%;
  transform: rotate(5deg);
  z-index: 1;
}

.float-star{
  position: absolute;
  width: 50px; height: 50px;
  color: var(--amarelo);
  top: 5%;
  right: 0;
  animation: spin 8s linear infinite;
}
@keyframes spin{
  100%{ transform: rotate(360deg); }
}

.sobre__col--text p{
  margin-bottom: 1.2rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.sobre__col--text p b{ color: var(--ink); }

.section-title .handfont{
  color: var(--rosa-d);
  font-size: 1.1em;
  display: inline-block;
  transform: rotate(-3deg);
}

.sobre__pills{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 2rem;
}
.sobre__pills li{
  background: white;
  border: 1.5px solid var(--line);
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
}
.sobre__pills li{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.sobre__pills li .icon-inline{
  width: 1.05em; height: 1.05em;
  margin: 0;
}
.sobre__pills li:nth-child(1){ border-color: var(--rosa); color: var(--rosa-d); }
.sobre__pills li:nth-child(2){ border-color: var(--amarelo); color: #B88800; }
.sobre__pills li:nth-child(3){ border-color: var(--verde); color: #4A9F62; }
.sobre__pills li:nth-child(4){ border-color: var(--azul); color: var(--azul-d); }

/* ============ CATÁLOGO ============ */

.catalogo{
  padding: 6rem clamp(1.2rem, 4vw, 3rem) 5rem;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

/* === Catálogo: rail/carrossel horizontal === */
.catalogo__rail{
  position: relative;
  margin-top: 1.5rem;
}

.catalogo__scroller{
  --visible: 3;
  --gap: 1.4rem;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1rem 0 2rem;
  scroll-padding: 0;
}
.catalogo__scroller::-webkit-scrollbar{ display: none; }

/* Cada card ocupa exatamente 1/visible do espaço, descontando os gaps */
.catalogo__scroller .card{
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  scroll-snap-align: start;
  margin: 0;
}

/* Tablet: 2 cards visíveis */
@media (max-width: 1024px){
  .catalogo__scroller{ --visible: 2; }
}

/* Mobile: 1 card visível, sem borda do próximo */
@media (max-width: 760px){
  .catalogo__scroller{ --visible: 1; --gap: 1rem; }
}

/* setas */
.rail-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: white;
  border: none;
  font-size: 1.8rem;
  color: var(--ink);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 8px 22px -6px rgba(106, 79, 90, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-bottom: 4px;
  transition: transform .2s, box-shadow .2s, opacity .25s;
}
.rail-arrow:hover{
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 28px -6px rgba(106, 79, 90, .5);
}
.rail-arrow:active{ transform: translateY(-50%) scale(.95); }
.rail-arrow--prev{ left: -22px; }
.rail-arrow--next{ right: -22px; }
.rail-arrow.is-disabled{
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 900px){
  .rail-arrow--prev{ left: 6px; }
  .rail-arrow--next{ right: 6px; }
}
@media (max-width: 500px){
  .rail-arrow{ display: none; }
}

/* barrinha de progresso do scroll */
.catalogo__progress{
  max-width: 220px;
  height: 5px;
  background: var(--cream-2);
  border-radius: 999px;
  margin: 0 auto 1rem;
  overflow: hidden;
}
.catalogo__progress span{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rosa), var(--amarelo), var(--verde), var(--azul));
  border-radius: 999px;
  transition: width .15s linear;
}

.card{
  background: white;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -18px rgba(106, 79, 90, .3);
}

/* destaque card "favorito" e "premium" */
.card--featured{
  border: 2.5px solid var(--amarelo);
}
.card--premium{
  border: 2.5px solid var(--azul);
}

.card__media{
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #FFF2EE 0%, #FFEFF5 50%, #EAF6FE 100%);
}
/* esconder alt text quando a imagem ainda não foi adicionada */
.card__media img,
.masonry__item img{
  color: transparent;
}
.card__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.card:hover .card__media img{ transform: scale(1.06); }

.card__badge{
  position: absolute;
  top: 12px; left: 12px;
  background: white;
  padding: .35rem .8rem .35rem .65rem;
  border-radius: 999px;
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transform: rotate(-3deg);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  z-index: 2;
}
.card__badge .icon-inline{
  color: var(--amarelo);
  width: 1.1em; height: 1.1em;
  margin: 0;
}
.card--premium .card__badge{ color: var(--azul-d); }
.card--premium .card__badge .icon-inline{ color: var(--azul); }

.card__body{
  padding: 1.3rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  flex: 1;
}

.card__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.card__body h3{
  font-family: 'Bagel Fat One', system-ui;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -.3px;
  flex: 1;
}

.card__price{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--rosa-d);
  background: #FFF0F5;
  padding: .35rem .7rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.card__price--consult{
  color: var(--ink-soft);
  background: var(--cream-2);
  font-weight: 500;
  font-size: .85rem;
}

.card__desc{
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.card__tags span{
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--cream-2);
  padding: .15rem .65rem;
  border-radius: 999px;
  line-height: 1.3;
}

.card__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #25D366;
  color: white !important;
  padding: .85rem 1.2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  margin-top: .3rem;
  transition: transform .2s, background .2s, box-shadow .2s;
  box-shadow: 0 6px 14px -6px rgba(37, 211, 102, .6);
}
.card__cta svg{ width: 18px; height: 18px; }
.card__cta:hover{
  transform: translateY(-1px);
  background: #1FB856;
  box-shadow: 0 10px 18px -6px rgba(37, 211, 102, .8);
}

.catalogo__foot{
  text-align: center;
  margin-top: 3rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.catalogo__foot .handfont{
  color: var(--rosa-d);
  font-size: 1.3em;
}

/* Mobile catálogo */
@media (max-width: 760px){
  .catalogo{ padding: 4.5rem 1rem 3rem; }
  .catalogo__grid{
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .card__body{ padding: 1.1rem 1.2rem 1.2rem; }
  .card__body h3{ font-size: 1.2rem; }
  .card__head{ flex-direction: column; gap: .4rem; }
  .card__price{ align-self: flex-start; }
}

/* Mobile pequeno: cards um pouco mais compactos */
@media (max-width: 380px){
  .card__body{ padding: 1rem; }
  .card__media{ aspect-ratio: 16/10; }
}

/* ============ PORTFÓLIO ============ */

.portfolio{
  padding: 6rem clamp(1.2rem, 4vw, 3rem);
  background: var(--cream-2);
  position: relative;
  overflow: hidden;
}
.portfolio > .section-head{ position: relative; z-index: 2; }

/* === Masonry real (estilo Pinterest, sem buracos) === */
.masonry{
  max-width: 1280px;
  margin: 3rem auto 0;
  column-count: 4;
  column-gap: 14px;
  position: relative;
  z-index: 2;
}

.masonry__item{
  break-inside: avoid;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
  position: relative;
  background: linear-gradient(135deg, #FFF2EE 0%, #FFEFF5 50%, #EAF6FE 100%);
  transition: transform .35s ease, box-shadow .35s ease;
  display: block;
}
.masonry__item::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35) 100%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.masonry__item:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(106, 79, 90, .3);
}
.masonry__item:hover::after{ opacity: 1; }

.masonry__item img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .6s ease;
}
.masonry__item:hover img{ transform: scale(1.05); }

/* aspect-ratios variados — pra dar movimento orgânico ao masonry */
.masonry__item.ar-1x1 img{ aspect-ratio: 1/1; object-fit: cover; }
.masonry__item.ar-3x4 img{ aspect-ratio: 3/4; object-fit: cover; }
.masonry__item.ar-4x5 img{ aspect-ratio: 4/5; object-fit: cover; }
.masonry__item.ar-4x3 img{ aspect-ratio: 4/3; object-fit: cover; }

@media (max-width: 1100px){
  .masonry{ column-count: 3; }
}
@media (max-width: 760px){
  .masonry{ column-count: 2; column-gap: 10px; }
  .masonry__item{ margin-bottom: 10px; }
}

/* ============ CTA ============ */

.cta{
  position: relative;
  padding: 6rem clamp(1.2rem, 4vw, 3rem);
  text-align: center;
  background:
    linear-gradient(135deg, var(--rosa) 0%, var(--amarelo) 33%, var(--verde) 66%, var(--azul) 100%);
  color: white;
  overflow: hidden;
}
.cta::before{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.1) 100%);
}
.cta__inner{
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.cta h2{
  font-family: 'Bagel Fat One', system-ui;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin-bottom: 1rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.cta h2 .handfont{
  color: white;
  font-size: 1.15em;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: white;
  text-underline-offset: 8px;
}
.cta p{
  margin-bottom: 2rem;
  font-size: 1.15rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.cta__small{
  margin-top: 1.5rem;
  font-size: 1rem;
}
.cta__small a{ text-decoration: underline; }

/* ============ FOOTER ============ */

.footer{
  background: var(--ink);
  color: var(--cream);
  padding: 3rem clamp(1.2rem, 4vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.footer__brand img{
  width: 70px; height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.footer__info p{ font-size: .95rem; opacity: .9; }
.footer__info a{ color: var(--rosa); transition: color .2s; }
.footer__info a:hover{ color: var(--amarelo); }
.footer__credit{
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  opacity: .6;
  margin-top: 1rem;
}

/* ============ LIGHTBOX ============ */

.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
  cursor: zoom-out;
}
.lightbox.is-open{ display: flex; }
.lightbox img{
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lightbox__close{
  position: absolute;
  top: 1rem; right: 1.5rem;
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  line-height: 1;
}

/* ============ ANIMAÇÕES REVEAL ============ */

.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============ FOOTER LINK PRIVACIDADE ============ */

.footer__link{
  background: none;
  border: none;
  color: var(--rosa);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  transition: color .2s;
}
.footer__link:hover{ color: var(--amarelo); }

/* ============ MODAL PRIVACIDADE ============ */

.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 1rem;
  opacity: 0;
  transition: opacity .25s;
}
.modal.is-open{
  display: flex;
  opacity: 1;
}
.modal__panel{
  background: var(--cream);
  border-radius: 24px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2.5rem 2rem;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  animation: modalIn .35s cubic-bezier(.2, .8, .2, 1);
}
@keyframes modalIn{
  from{ opacity: 0; transform: translateY(20px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.modal__close{
  position: absolute;
  top: 1rem; right: 1.2rem;
  background: var(--cream-2);
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.modal__panel h3{
  font-family: 'Bagel Fat One', system-ui;
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--ink);
  margin-bottom: .25rem;
}
.modal__panel h4{
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--rosa-d);
  margin: 1.5rem 0 .5rem;
}
.modal__panel p, .modal__panel li{
  color: var(--ink-soft);
  font-size: .95rem;
  margin-bottom: .6rem;
  line-height: 1.6;
}
.modal__panel ul{ padding-left: 1.2rem; margin-bottom: .8rem; list-style: disc; }
.modal__panel ul li{ margin-bottom: .3rem; }
.modal__panel a{ color: var(--azul-d); text-decoration: underline; }
.modal__date{
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem !important;
}
.modal__foot{
  margin-top: 2rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-style: italic;
}

/* ============================================================
   MOBILE — refinamentos finos pro público que vem do Instagram
   ============================================================ */

@media (max-width: 760px){

  body{ font-size: 16px; }

  /* HERO mobile */
  .hero{
    padding: 6.5rem 1.2rem 5rem;
    min-height: auto;
  }
  .hero__grid{ gap: 2rem; }
  .hero__photo{
    aspect-ratio: 4/4.4;
    border-radius: 32px 60px 32px 60px;
    transform: rotate(-1deg);
    max-width: 90%;
    margin: 0 auto;
  }
  .hero__sticker{
    font-size: 1rem;
    padding: .35rem .75rem;
  }
  .hero__sticker--a{ top: 4%; left: 2%; }
  .hero__sticker--b{ bottom: 4%; right: 2%; }

  .hero__title{
    font-size: 2.6rem;
    line-height: 1.05;
  }
  .hero__sub{ font-size: 1.05rem; }

  .hero__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn{
    justify-content: center;
    width: 100%;
    padding: 1rem 1.2rem;
  }
  .handwritten{ text-align: center; }

  /* SOBRE mobile */
  .sobre{
    padding: 5rem 1.2rem 3.5rem;
    gap: 2rem;
  }
  .sobre__col--media{
    min-height: 420px;
    margin: 0 auto;
    max-width: 380px;
    width: 100%;
  }
  .polaroid{ width: 65%; }
  .polaroid--a{ top: 0; left: 3%; }
  .polaroid--b{ bottom: 0; right: 3%; }
  .float-star{ width: 36px; height: 36px; top: 8%; right: 5%; }

  /* SERVIÇOS mobile */
  .servicos{ padding: 4rem 1.2rem 3rem; }
  .servicos__grid{ gap: 2rem; }
  .servico h3{ font-size: 1.4rem; }
  .servico__shape{ width: 78%; }

  /* PORTFÓLIO mobile */
  .portfolio{ padding: 4rem 1rem; }
  .masonry{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: .7rem;
  }
  .section-head{ margin-bottom: 2rem; }
  .section-head--center .section-title{ font-size: 1.9rem; }

  /* CTA final mobile */
  .cta{ padding: 4.5rem 1.2rem; }
  .cta h2{ font-size: 2.2rem; }
  .cta .btn--white{
    width: 100%;
    justify-content: center;
    font-size: 1.05rem;
    padding: 1.1rem 1.4rem;
  }

  /* FOOTER mobile */
  .footer{ padding: 2.5rem 1.2rem 5rem; }
  .footer__info p{ font-size: .9rem; }

  /* tira parallax pesado em mobile pra performar */
  .cloud{ animation-duration: 14s; }

  /* modal mobile */
  .modal__panel{
    padding: 2rem 1.3rem;
    border-radius: 18px;
    max-height: 92vh;
  }
  .modal__panel h3{ font-size: 1.5rem; }
}

/* telas BEM pequenas (Instagram in-app browser ~ 360px) */
@media (max-width: 380px){
  .hero__title{ font-size: 2.2rem; }
  .hero__sticker--a{ display: none; }
  .nav__brand-text{ display: none; }
  .section-title{ font-size: 1.7rem; }
  .cta h2{ font-size: 1.9rem; }
  .mobile-menu__nav a{ font-size: 1.9rem; }
}

/* respeitar usuários que querem menos movimento */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
  }
  .confetti, .balloon, .sparkle{ display: none !important; }
  .rainbow-path{ stroke-dashoffset: 0 !important; }
}