/* ══════════════════════════════════════════════════════════════════════════════
   JU COOKIE DESIGNER · LANDING (/)
   Composições exclusivas da página principal. Tudo que é reutilizável
   (tokens, botões, cards, form, accordion, navbar, footer) mora em ds.css.
   ══════════════════════════════════════════════════════════════════════════ */

body{padding-top:var(--nav-h)}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(16px,3vw,64px) clamp(40px,6vw,88px);
  background:linear-gradient(168deg,var(--ju-cyan-100) 0%,var(--color-background) 46%,var(--ju-raspberry-50) 100%);
  border-bottom:var(--border-subtle);
}
.hero__grid{position:relative;display:grid;gap:var(--space-5);align-items:start}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:7px 14px;border-radius:var(--radius-pill);
  background:var(--color-surface-raised);border:var(--border-subtle);
  font-size:var(--text-label);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-text-tertiary);
}
.hero__eyebrow .pill__dot{background:var(--color-primary-strong);animation:juDot 2.4s ease-in-out infinite}
@keyframes juDot{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.22)}}

.hero__title{
  font-weight:300;font-size:clamp(33px,5.2vw,68px);line-height:1;letter-spacing:-.038em;
  margin-top:var(--space-4);text-wrap:balance;
}
.hero__lead{margin-top:0;font-size:17px;line-height:1.55;color:var(--color-text-secondary);max-width:46ch;text-wrap:pretty}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.hero__actions .btn{flex:1 1 260px}
.hero__micro{
  display:flex;gap:var(--space-3);margin-top:var(--space-4);
  font-size:var(--text-body-sm);line-height:1.55;color:var(--color-text-tertiary);max-width:44ch;
}
.hero__micro svg{flex:0 0 auto;margin-top:2px;color:var(--color-primary-strong)}
.hero__micro strong{color:var(--color-text-secondary);font-weight:700}

.hero__media{position:relative;margin:0}
.hero__frame{
  position:relative;overflow:hidden;background:var(--color-surface-sunken);
  box-shadow:var(--shadow-product);
  clip-path:polygon(var(--notch-xl) 0,100% 0,100% calc(100% - var(--notch-xl)),calc(100% - var(--notch-xl)) 100%,0 100%,0 var(--notch-xl));
}
/* no celular a foto entra logo depois do CTA e ainda aparece na primeira tela:
   o teto de altura garante que ela nunca vire uma parede antes do botão */
.hero__frame img{
  width:100%;height:auto;object-fit:cover;aspect-ratio:4/5;
  max-height:clamp(230px,38svh,400px);
}
.hero__sign{
  position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 20px);
  display:flex;align-items:center;gap:var(--space-3);
  padding:8px 14px 8px 8px;
  background:var(--color-surface-raised);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:var(--border-subtle);box-shadow:var(--shadow-card);
  clip-path:polygon(var(--notch-md) 0,100% 0,100% calc(100% - var(--notch-md)),calc(100% - var(--notch-md)) 100%,0 100%,0 var(--notch-md));
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero__sign{background:var(--ju-ink-0)}
}
.hero__sign img{width:46px;height:46px;flex:0 0 auto;border-radius:var(--radius-circle);object-fit:cover;object-position:50% 26%;border:2px solid var(--color-surface);box-shadow:var(--shadow-card)}
.hero__sign > span{display:flex;flex-direction:column;min-width:0}
.hero__sign-name{font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.2;color:var(--color-text-primary);white-space:nowrap}
.hero__sign-role{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-ink);white-space:nowrap}

/* 640px é o mesmo ponto de corte da direção de arte no <picture> do hero:
   daqui pra cima a foto volta a ser vertical — mas o teto de altura só sai
   quando o layout vira duas colunas (960px), senão a foto empurra o CTA. */
@media (min-width:640px){
  .hero__frame img{aspect-ratio:3/4;max-height:clamp(300px,42svh,460px)}
  .hero__sign{left:16px;bottom:16px}
  .hero__lead{font-size:var(--text-body-lg);line-height:1.65}
}
@media (min-width:960px){
  .hero{padding-block:clamp(40px,5vw,72px) clamp(64px,7vw,104px)}
  .hero__grid{
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    grid-template-areas:"head media" "body media";
    gap:var(--space-6) clamp(40px,5vw,72px);
    align-items:start;
  }
  .hero__head{grid-area:head}
  .hero__body{grid-area:body}
  .hero__media{grid-area:media;align-self:center}
  .hero__actions .btn{flex:0 0 auto}
  /* teto de altura no desktop: o hero inteiro cabe numa tela de 900px */
  .hero__frame img{max-height:clamp(420px,62svh,620px)}
  .hero__sign{
    position:absolute;left:-18px;bottom:26px;margin:0;
    max-width:min(84%,300px);background:var(--color-surface-raised);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
}

/* ─── FAIXA DE CONFIANÇA ─────────────────────────────────────────────────── */
.trust{background:var(--color-background-alt);border-bottom:var(--border-subtle);padding-block:var(--space-8)}
.trust__list{display:grid;gap:var(--space-5) var(--space-6);grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.trust__item{display:flex;gap:var(--space-3);align-items:flex-start}
.trust__icon{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--radius-circle);background:var(--color-primary-soft);
  border:1px solid var(--color-primary-strong);color:var(--color-primary-hover);
}
.trust__item:nth-child(even) .trust__icon{background:var(--color-accent-soft);border-color:var(--color-accent-strong);color:var(--color-accent-hover)}
.trust__title{display:block;font-size:var(--text-body-sm);font-weight:700;color:var(--color-text-primary);line-height:1.3}
.trust__note{display:block;margin-top:2px;font-size:var(--text-caption);line-height:1.5;color:var(--color-text-tertiary)}

/* ─── O QUE A JU CRIA ────────────────────────────────────────────────────── */
.creations{display:grid;gap:var(--gap-grid);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.creations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.creations{grid-template-columns:repeat(4,minmax(0,1fr))}}
.creation{gap:var(--space-4)}
.creation .card__media{aspect-ratio:4/3}
.creation .card__text{flex:1}
.creation__custom{
  display:flex;gap:var(--space-2);align-items:flex-start;
  font-size:var(--text-caption);line-height:1.5;color:var(--color-text-tertiary);
}
.creation__custom b{font-weight:700;color:var(--color-text-secondary)}
.creation .link-cta{margin-top:auto}

/* ─── OCASIÕES ───────────────────────────────────────────────────────────── */
.occasions__intro{
  display:grid;gap:var(--space-6);margin-bottom:var(--space-10);align-items:end;
}
.occasions__tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.occasions__tags .tag{font-size:var(--text-body-sm)}
.occasions__grid{display:grid;gap:var(--gap-grid);grid-template-columns:repeat(2,minmax(0,1fr))}
.occasions__grid .photo-card{aspect-ratio:3/4}
.occasions__grid .photo-card:first-child{grid-column:span 2;aspect-ratio:4/3}
@media (min-width:760px){
  .occasions__intro{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .occasions__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .occasions__grid .photo-card{grid-column:span 2;aspect-ratio:3/4}
  .occasions__grid .photo-card:nth-child(1),
  .occasions__grid .photo-card:nth-child(2){grid-column:span 3;aspect-ratio:4/3}
}

/* ─── PORTFÓLIO ──────────────────────────────────────────────────────────── */
/* mosaico em colunas: cada foto entra com o próprio enquadramento,
   sem recorte forçado e sem buraco na grade */
.portfolio{columns:2;column-gap:12px}
.p-tile{
  display:inline-block;width:100%;break-inside:avoid;margin:0 0 12px;
  position:relative;overflow:hidden;background:var(--color-surface-sunken);
  clip-path:polygon(var(--notch-md) 0,100% 0,100% calc(100% - var(--notch-md)),calc(100% - var(--notch-md)) 100%,0 100%,0 var(--notch-md));
  box-shadow:var(--shadow-card);
}
/* o teto de altura impede que uma foto muito vertical desequilibre a coluna */
.p-tile img{width:100%;height:auto;max-height:520px;object-fit:cover;transition:transform 700ms var(--easing-standard)}
.p-tile:hover img{transform:scale(1.04)}
.p-tile figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;
  font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1.35;color:#FFFCF8;
  background:linear-gradient(180deg,rgba(36,28,32,0) 0%,rgba(36,28,32,.62) 55%,rgba(36,28,32,.88) 100%);
  text-shadow:0 1px 4px rgba(24,16,20,.6);
}
@media (min-width:640px){
  .portfolio{columns:3;column-gap:var(--gap-grid)}
  .p-tile{margin-bottom:var(--gap-grid)}
}
@media (min-width:1100px){
  .portfolio{columns:4}
}
.portfolio__foot{
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;align-items:center;
  margin-top:var(--space-10);
}

/* ─── SOBRE A JU ─────────────────────────────────────────────────────────── */
.about{display:grid;gap:var(--space-8);align-items:center}
.about__media{position:relative;margin:0}
/* ATENÇÃO: `height:auto` é obrigatório. Os atributos width/height do <img> viram
   `height:1067px` na cascata e, sem isso, o aspect-ratio do CSS nunca é usado —
   foi o que fazia a foto renderizar na altura intrínseca e esticar a seção. */
.about__media img{
  width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 40%;
  min-height:240px;max-height:380px;
  box-shadow:var(--shadow-product);
  clip-path:polygon(var(--notch-xl) 0,100% 0,100% calc(100% - var(--notch-xl)),calc(100% - var(--notch-xl)) 100%,0 100%,0 var(--notch-xl));
}
.about__caption{
  position:absolute;left:18px;bottom:18px;padding:10px 16px;
  background:var(--color-surface-raised);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:var(--border-subtle);
  clip-path:polygon(var(--notch-sm) 0,100% 0,100% calc(100% - var(--notch-sm)),calc(100% - var(--notch-sm)) 100%,0 100%,0 var(--notch-sm));
}
.about__caption b{display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:19px;color:var(--color-text-primary)}
.about__caption span{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-ink)}
.about__text p{font-size:var(--text-body);line-height:1.75;color:var(--color-text-secondary);text-wrap:pretty}
.about__text p + p{margin-top:var(--space-4)}
.about__text strong{color:var(--color-text-primary);font-weight:700}
.about__quote{
  margin:var(--space-6) 0;padding:var(--space-5) var(--space-6);
  background:var(--color-surface);border-left:4px solid var(--color-accent-strong);
  font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.5;color:var(--color-text-primary);
  clip-path:polygon(var(--notch-md) 0,100% 0,100% calc(100% - var(--notch-md)),calc(100% - var(--notch-md)) 100%,0 100%,0 var(--notch-md));
}
.about__pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
@media (min-width:860px){
  .about{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,5vw,64px)}
  /* no desktop volta a ser vertical, mas com teto: quem manda na altura da
     seção é o texto, não a foto */
  .about__media img{aspect-ratio:4/5;min-height:0;max-height:560px}
}

/* ─── DIFERENCIAIS ───────────────────────────────────────────────────────── */
/* mobile: título → diferenciais → foto (a mensagem principal não espera a foto) */
.edge{display:grid;gap:var(--space-8);align-items:center}
.edge__media{margin:0;position:relative}
.edge__media img{
  width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 45%;
  min-height:240px;max-height:340px;
  box-shadow:var(--shadow-product);
  clip-path:polygon(var(--notch-xl) 0,100% 0,100% calc(100% - var(--notch-xl)),calc(100% - var(--notch-xl)) 100%,0 100%,0 var(--notch-xl));
}
.edge__list{display:grid;gap:var(--space-4)}
.edge__item{display:flex;gap:var(--space-4);align-items:flex-start}
.edge__check{
  flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;margin-top:1px;
  border-radius:var(--radius-circle);background:var(--color-success-surface);color:var(--color-success);
}
.edge__item h3{font-size:var(--text-body);font-weight:700;color:var(--color-text-primary);line-height:1.35}
.edge__item p{margin-top:3px;font-size:var(--text-body-sm);line-height:1.6;color:var(--color-text-secondary);text-wrap:pretty}
@media (min-width:860px){
  /* grid-area devolve a foto para a esquerda sem inverter a ordem do DOM */
  .edge{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    grid-template-areas:"media conteudo";
    gap:clamp(40px,5vw,64px);
  }
  .edge__content{grid-area:conteudo}
  .edge__media{grid-area:media}
  .edge__media img{aspect-ratio:4/5;min-height:0;max-height:520px}
  .edge__list{gap:var(--space-5)}
}

/* ─── VAMOS CRIAR SUA ENCOMENDA? · seção única de conversão ──────────────── */
.quote-band{
  position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--ju-raspberry-100) 0%,var(--color-background) 52%,var(--ju-cyan-100) 100%);
  border-top:var(--border-subtle);
}
.quote{position:relative;display:grid;gap:var(--space-8);align-items:start}
.quote__pitch .lead{margin-top:var(--space-4);font-size:var(--text-body);line-height:1.6;max-width:44ch}
.quote__helper{display:grid;gap:var(--space-2);margin-top:var(--space-5)}
.quote__helper li{display:flex;gap:var(--space-3);align-items:baseline;font-size:var(--text-body-sm);line-height:1.5;color:var(--color-text-secondary)}
.quote__helper li::before{
  content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--color-accent-strong);
}
.quote__cta{margin-top:var(--space-6);width:100%}
.quote__micro{margin-top:var(--space-3);font-size:var(--text-caption);line-height:1.55;color:var(--color-text-tertiary);max-width:42ch}

.quote__form{
  display:grid;gap:var(--space-3);padding:var(--space-4) var(--card-pad) var(--card-pad);
  background:var(--color-surface);border:var(--border-subtle);box-shadow:var(--shadow-card);
  clip-path:polygon(var(--notch-lg) 0,100% 0,100% calc(100% - var(--notch-lg)),calc(100% - var(--notch-lg)) 100%,0 100%,0 var(--notch-lg));
}
.quote__details{border:0}
.quote__summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:48px;padding:var(--space-2) 0;cursor:pointer;list-style:none;
}
.quote__summary::-webkit-details-marker{display:none}
.quote__summary-text{display:flex;flex-direction:column;min-width:0}
.quote__summary-text strong{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:var(--text-h4);color:var(--color-text-primary)}
.quote__summary-text span{font-size:var(--text-caption);color:var(--color-text-tertiary)}
.quote__summary-sign{
  flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;
  font-size:21px;line-height:1;color:var(--color-accent-hover);
  border:var(--border-subtle);border-radius:var(--radius-circle);
  transition:transform var(--duration-standard) var(--easing-standard);
}
.quote__details[open] .quote__summary-sign{transform:rotate(45deg)}
.quote__fields{display:grid;gap:var(--space-4);padding-top:var(--space-4);border-top:var(--border-subtle)}
.quote__row{display:grid;gap:var(--space-4)}
.quote__note{font-size:var(--text-caption);line-height:1.55;color:var(--color-text-tertiary)}
.quote__fallback{font-size:var(--text-body-sm);color:var(--color-text-secondary);text-align:center;text-wrap:pretty}
.quote__fallback a{font-weight:700}
@media (min-width:520px){.quote__cta{width:auto}}
@media (min-width:640px){.quote__row{grid-template-columns:1fr 1fr}}
@media (min-width:960px){
  .quote{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,5vw,64px)}
  .quote__pitch .lead{font-size:var(--text-body-lg);line-height:1.65}
}

/* ─── DEPOIMENTOS (estrutura pronta, oculta até haver material real) ─────── */
.testimonials{display:grid;gap:var(--gap-grid);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.testimonial{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--card-pad);
  background:var(--color-surface);border:var(--border-subtle);border-radius:var(--radius-md)}
.testimonial blockquote{margin:0;font-size:var(--text-body);line-height:1.65;color:var(--color-text-secondary)}
.testimonial figcaption{display:flex;flex-direction:column;font-size:var(--text-body-sm);font-weight:600;color:var(--color-text-primary)}
.testimonial figcaption span{font-size:var(--text-caption);font-weight:400;color:var(--color-text-tertiary)}

/* ─── AJUSTES FINOS DE CELULAR ───────────────────────────────────────────── */
@media (max-width:400px){
  :root{--gap-grid:14px}
  .hero__actions .btn{flex:1 1 100%}
  .p-tile figcaption{font-size:10px;padding:22px 9px 8px}
}
/* densidade: no celular o cabeçalho de seção não precisa de 48px de respiro */
@media (max-width:640px){
  .section-head{margin-bottom:var(--space-8)}
  .occasions__intro{margin-bottom:var(--space-8)}
}
/* O CTA fixo se esconde sobre o rodapé (data-sticky-hide), então o rodapé
   NÃO precisa de padding extra — isso só criaria altura duplicada no fim. */