/* ==========================================================================
   sections.css — layout de cada secao.
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   Fundo branco, muito respiro. Texto no alto a esquerda; frasco aberto e
   deitado com a tampa logo abaixo, no canto inferior esquerdo; mao a direita.
   A mancha de esmalte foi removida — volta quando a posicao for definida.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface);
  padding-top: calc(var(--nav-h) + var(--space-7));
  padding-bottom: var(--section-y);
  /* O hero sai do container de 1200px centralizado e usa uma margem estreita,
     como na referencia: o texto encosta na lateral, nao no meio da tela. */
  --hero-gutter: clamp(1.25rem, 6vw, 6.5rem);
  --frasco-w: 140px;
  --frasco-b: 11%;
  --spill-h: 620px;
}
.hero > .container { max-width: none; padding-inline: var(--hero-gutter); }

.hero__grid { position: relative; z-index: 2; display: grid; gap: var(--space-7); align-items: center; }
.hero .eyebrow + h1 { margin-top: var(--space-4); }
.hero h1 + .lead { margin-top: var(--space-5); }
.hero .btn-row { margin-top: var(--space-7); }

/* Props: alfa vem pronto do gerador, a sombra e do CSS (memoria.md D16) */
/* A mancha de esmalte: camada mais baixa, atras dos props e da mao */
/* Ancorada ao frasco, nao a viewport: left parte do bocal e a altura e fixa,
   entao o bocal e a mancha ficam colados em qualquer largura de tela.
   --frasco-w e --frasco-b espelham a largura e o bottom do frasco. */
.hero__spill {
  position: absolute; z-index: 0; display: none;
  /* width explicito: com left+right um SVG resolve width:auto para a largura
     intrinseca do viewBox e nao para o espaco disponivel — a mancha ficava
     cortada numa reta antes da borda da tela. */
  --spill-x: calc(var(--hero-gutter) + var(--frasco-w) * 0.80);
  left: var(--spill-x);
  width: calc(100% - var(--spill-x));
  /* 0.3065 = (620-430)/620: distancia do bocal ate a base do viewBox.
     Assim o bocal continua ancorado mesmo mudando --spill-h. */
  bottom: calc(var(--frasco-b) + var(--frasco-w) * 0.291 - var(--spill-h) * 0.3065);
  height: var(--spill-h);
  pointer-events: none;
}
.hero__spill-main { fill: var(--blush-100); }
/* Filme fino avancando na frente do liquido: borda dupla, nao vetor chapado */
.hero__spill-film { fill: var(--blush-100); opacity: 0.5; }


/* Box com a largura do container: os props alinham na mesma margem
   esquerda do texto, como na referencia. */
.hero__props {
  position: absolute; inset: 0 0 0 0; z-index: 1;
  width: 100%; padding-inline: var(--hero-gutter);
  pointer-events: none;
}
/* A tampa fica ATRAS e ABAIXO do frasco */
.hero__frasco { position: absolute; z-index: 2; }
.hero__tampa  { position: absolute; z-index: 1; }
.hero__frasco img { filter: drop-shadow(0 16px 20px rgba(142, 74, 84, 0.16)); }
.hero__tampa  img { filter: drop-shadow(0 12px 16px rgba(142, 74, 84, 0.14)); }

/* Mobile: abaixo do texto, na faixa da mao */
.hero__frasco { left: var(--hero-gutter); bottom: 11%; width: 140px; }
.hero__tampa  { left: calc(var(--hero-gutter) + 46px); bottom: 2%; width: 58px;
                transform: rotate(-8deg); }

/* Mao recortada para as unhas: a mao inteira sozinha estoura a viewport */
.hero__stage {
  position: relative; height: 40vh; min-height: 260px; max-height: 380px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
}
.hero__hand { position: absolute; inset: 0; display: block; }
.hero__hand img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--nav-h) + var(--space-8));
    padding-bottom: 0;
  }
  /* Regra 1: texto no alto, como na referencia */
  .hero__grid { grid-template-columns: 48fr 52fr; gap: var(--space-8); min-height: 80vh; align-items: start; }

  /* Regra 2: frasco deitado no canto inferior esquerdo, tampa abaixo e a
     direita dele — a tampa acabou de sair do frasco. */
  /* Frasco na margem do texto; tampa abaixo dele e deslocada a direita,
     como na referencia. Ambos dentro da faixa livre sob as CTAs. */
  .hero { --frasco-w: 250px; --frasco-b: 128px; }
  .hero__spill { display: block; }
  .hero__frasco { left: var(--hero-gutter); bottom: var(--frasco-b); width: var(--frasco-w); }
  /* Tampa solta no meio do caminho, entre o frasco e a mao */
  .hero__tampa  { left: 37%; bottom: 23%; width: 112px; transform: rotate(-6deg); }

  .hero__stage { position: static; height: auto; min-height: 0; max-height: none;
                 overflow: visible; display: grid; place-items: end;
                 -webkit-mask-image: none; mask-image: none; }
  /* O antebraco e cortado na borda direita do PNG. Sangrar ate a borda da
     viewport joga esse corte para fora da tela — o .hero tem overflow:hidden. */
  .hero__hand { position: static; width: 100%; max-width: 640px;
                justify-self: end;
                /* sangra a folga lateral do container + a gutter, para o corte
                   cair fora da tela em qualquer largura */
                margin-right: calc(var(--hero-gutter) * -1); }
  .hero__hand img {
    height: auto; object-fit: fill;
    filter: drop-shadow(0 22px 34px rgba(142, 74, 84, 0.15));
  }
}

@media (min-width: 1440px) {
  .hero { --frasco-w: 300px; --frasco-b: 148px; }
  .hero__frasco { left: var(--hero-gutter); bottom: var(--frasco-b); width: var(--frasco-w); }
  .hero__tampa  { left: 37%; bottom: 24%; width: 124px; }
}

/* Secao de servicos mais compacta que o ritmo padrao: os cards com foto ja
   trazem peso visual proprio e nao precisam do respiro cheio. */
#servicos { padding-block: calc(var(--section-y) * 0.52); }

/* --- Servicos · card com foto + painel de precos --------------------------
   Ao abrir, o card ocupa a linha inteira: a foto encolhe para a esquerda e o
   painel aparece a direita. Os outros dois somem — mais simples de manter
   acessivel e nao quebra em 1024px.
   -------------------------------------------------------------------------- */
.services__grid { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 768px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

/* Enquanto um card esta aberto, os fechados saem de cena */
.services__grid[data-open] > .svc:not([data-open]) { display: none; }
.services__grid[data-open] { grid-template-columns: 1fr; }

.svc {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: box-shadow 400ms var(--ease), transform 400ms var(--ease);
}
/* Glow tingido de rosewood — liberado em design.md §13 (memoria.md D27) */
@media (hover: hover) {
  .svc:not([data-open]):hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -18px rgba(142, 74, 84, 0.45);
  }
  .svc:not([data-open]):hover .svc__media img { transform: scale(1.06); }
}

/* Fundo blush: enquanto pedicure e cilios nao forem gerados, o card mostra
   um bloco na proporcao certa em vez de imagem quebrada (memoria.md D13). */
.svc__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden;
              background: var(--blush-100); }
.svc__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
/* Scrim: texto sobre foto exige camada (design.md §8). Sobe forte na base
   para o branco passar folgado em contraste. */
.svc__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(46, 42, 43, 0.92) 0%,
              rgba(46, 42, 43, 0.72) 34%,
              rgba(46, 42, 43, 0.12) 68%,
              rgba(46, 42, 43, 0) 100%);
}
.svc__head {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--space-6);
  color: var(--white);
}
.svc__head h3 { color: var(--white); font-size: var(--fs-h3); font-weight: 500; }
.svc__head p {
  margin-top: var(--space-2); color: var(--blush-100);
  font-size: var(--fs-small); line-height: 1.6; max-width: 34ch;
}

.svc__toggle {
  margin-top: var(--space-5);
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); width: 100%; min-height: 48px;
  padding: 0 var(--space-4) 0 var(--space-5);
  font-size: var(--fs-btn); font-weight: 600; letter-spacing: var(--ls-btn);
  text-transform: uppercase; color: var(--white);
  background: rgba(253, 246, 244, 0.14);
  border: 1px solid rgba(253, 246, 244, 0.34);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
.svc__toggle svg { width: 18px; height: 18px; flex: none;
                   transition: transform var(--dur-hover) var(--ease); }
@media (hover: hover) {
  .svc__toggle:hover { background: rgba(253, 246, 244, 0.26); border-color: rgba(253, 246, 244, 0.6); }
  .svc__toggle:hover svg { transform: translateX(4px); }
}
.svc__toggle:focus-visible { outline-color: var(--white); }
.svc[data-open] .svc__toggle svg { transform: rotate(180deg); }

/* Painel de precos */
.svc__panel { padding: var(--space-6); }
.svc__panel h4 { margin-bottom: var(--space-5); }
.price { display: grid; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.price li { display: flex; align-items: baseline; gap: var(--space-3); }
.price__name { color: var(--ink-600); }
.price__dots {
  flex: 1; height: 1px; align-self: end; margin-bottom: 5px;
  background-image: linear-gradient(to right, var(--blush-200) 40%, transparent 0);
  background-size: 6px 1px; background-repeat: repeat-x;
}
.price__value { color: var(--ink-900); font-weight: 600; }
.price__note {
  margin-top: var(--space-5); font-size: var(--fs-small); color: var(--ink-600);
}
.svc__panel .btn--primary { margin-top: var(--space-6); }

@media (min-width: 768px) {
  /* Aberto: foto a esquerda, precos a direita. A altura e travada na mesma
     do card fechado — sem isso a secao crescia ao abrir. */
  .svc[data-open] { display: grid; grid-template-columns: 5fr 7fr;
                    height: var(--svc-h); }
  .svc[data-open] .svc__media { aspect-ratio: auto; height: 100%; }
  .svc[data-open] .svc__panel {
    padding: var(--space-5) var(--space-7);
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;                 /* sem barra de rolagem no card */
  }
  .svc[data-open] .svc__panel h4 { margin-bottom: var(--space-4); }
  .svc[data-open] .price { gap: var(--space-2); }
  .svc[data-open] .price__note { margin-top: var(--space-3); }
  .svc[data-open] .svc__panel .btn--primary { margin-top: var(--space-5); align-self: flex-start; }
}

/* --- Cuidado (diferenciais) ---------------------------------------------- */
.care__grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .care__grid { grid-template-columns: repeat(4, 1fr); } }
.care__item h3 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-h4); margin-top: var(--space-5); }
.care__item p { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--ink-600); line-height: 1.7; }

/* --- O espaco · hover-reveal ----------------------------------------------
   Ao passar o mouse sobre a grade, todos os cards recuam (escala menor, menos
   opacidade, leve desfoque) e so o card sob o cursor volta ao normal e avanca.
   Portado do conceito React para CSS puro (memoria.md D29).
   -------------------------------------------------------------------------- */
.space__grid { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .space__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .space__grid { grid-template-columns: repeat(3, 1fr); } }

.space-card {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 500ms var(--ease), opacity 500ms var(--ease),
              filter 500ms var(--ease), box-shadow 500ms var(--ease);
}
.space-card img { width: 100%; height: 100%; object-fit: cover; }

/* Scrim: texto sobre foto exige camada (design.md §8) */
.space-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(46, 42, 43, 0.88) 0%,
              rgba(46, 42, 43, 0.42) 42%,
              rgba(46, 42, 43, 0) 72%);
}
.space-card__body {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--space-5) var(--space-6);
  display: grid; gap: var(--space-1);
  color: var(--white);
}
.space-card__sub {
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--blush-200);
}
.space-card__title { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-h4); }

@media (hover: hover) {
  /* Todos recuam quando o ponteiro entra na grade... */
  .space__grid:hover .space-card {
    transform: scale(0.97); opacity: 0.55; filter: blur(2px);
  }
  /* ...menos o que esta sob o cursor */
  .space__grid .space-card:hover {
    transform: scale(1.04); opacity: 1; filter: none;
    box-shadow: 0 28px 64px -20px rgba(142, 74, 84, 0.5);
    z-index: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .space__grid:hover .space-card,
  .space__grid .space-card:hover { transform: none; opacity: 1; filter: none; }
}

/* --- Sobre · 2 colunas assimetricas 5/7 no desktop ----------------------- */
.about__grid { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) {
  .about__grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); }
}
.about__text .eyebrow + h2 { margin-top: var(--space-2); }
.about__text h2 + p { margin-top: var(--space-4); }
.about__text p + p { margin-top: var(--space-4); }
.about__text strong { color: var(--ink-900); font-weight: 600; }

/* Credenciais da profissional */
.about__creds {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: grid; gap: var(--space-4);
}
@media (min-width: 640px) { .about__creds { grid-template-columns: repeat(3, 1fr); } }
.about__creds dt {
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--rosewood-800);
}
.about__creds dd { margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--ink-600); }

/* Assinatura · design.md §3.1 permite Style Script no bloco Sobre */
.about__sign {
  margin-top: var(--space-6);
  font-size: 2.25rem; line-height: 1.3; color: var(--rosewood-800);
}

/* --- Localizacao ---------------------------------------------------------- */
.place__grid { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .place__grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }
.place__list { margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.place__list dt { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--rosewood-800); }
.place__list dd { margin: var(--space-2) 0 0; color: var(--ink-600); }

/* Marcador de dado pendente. Visivel de proposito: e um lugar onde o salao
   comprador ve exatamente onde os dados dele entram. */
.todo {
  display: inline-block;
  padding: 2px 10px; border-radius: var(--radius-sm);
  background: var(--blush-100); color: var(--ink-600);
  font-size: var(--fs-small); font-weight: 500;
  border: 1px dashed var(--rose-300);
}

/* --- Faixa de ambiente · esteira horizontal --------------------------------
   A faixa em si virou a esteira: cartoes 16:9 deslizando continuamente.
   A fita tem duas copias da lista e vai ate -50% (menos meio gap), onde a
   segunda copia esta exatamente onde a primeira comecou — o loop nao salta.
   A copia leva alt="" e aria-hidden para o leitor nao ler tudo duas vezes.
   Pausa no hover, no foco e pelo botao (WCAG 2.2.2). Ver memoria.md D30.
   -------------------------------------------------------------------------- */
.band { padding: 0; overflow: hidden; }
.band__viewport {
  position: relative;
  padding-block: var(--space-6);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex; width: max-content; gap: var(--space-5);
  padding-inline: var(--space-5);
  animation: marquee-desliza 48s linear infinite;
}
@keyframes marquee-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--space-5) / 2)); }
}
.band__viewport:hover .marquee__track,
.band__viewport:focus-within .marquee__track,
.band__viewport[data-paused] .marquee__track { animation-play-state: paused; }

.marquee__item {
  position: relative; flex: none;
  width: 78vw; max-width: 560px; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--blush-100);
  box-shadow: var(--shadow-md);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .marquee__item:hover {
    transform: scale(1.03);
    box-shadow: 0 28px 64px -20px rgba(142, 74, 84, 0.45);
  }
}
@media (min-width: 1024px) { .marquee__item { width: 520px; max-width: none; } }

.marquee__pause {
  position: absolute; right: var(--space-6); bottom: var(--space-6); z-index: 2;
  display: none; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink-900);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.js-marquee .marquee__pause { display: grid; }
.marquee__pause svg { width: 18px; height: 18px; }
@media (hover: hover) { .marquee__pause:hover { background: var(--white); } }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .band__viewport { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* --- CTA final · painel escuro solido, 15.6:1 ---------------------------- */
.cta { text-align: center; }
.cta .lead { color: var(--blush-100); margin-inline: auto; }
.cta .eyebrow + h2 { margin-top: var(--space-4); }
.cta h2 + .lead { margin-top: var(--space-5); }
.cta .btn-row { margin-top: var(--space-7); justify-content: center; }

/* --- Rodape --------------------------------------------------------------- */
.footer { background: var(--surface-dark); color: var(--blush-100); padding-block: var(--space-9) var(--space-6); }
.footer a { color: var(--blush-100); }
.footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); } }
.footer h2 { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--rose-300); margin-bottom: var(--space-4); }
.footer__list { display: grid; gap: var(--space-3); }
.footer__list a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: var(--fs-small); text-decoration: none;
}
.place__list dd a { display: inline-flex; align-items: center; min-height: 40px; }
/* No toque, o alvo cresce para os 44px de site.md §11 */
@media (hover: none) {
  .footer__list a, .place__list dd a { min-height: 48px; }
}
@media (hover: hover) { .footer a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.footer__bottom {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid rgba(251, 237, 233, 0.16);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: var(--fs-small); color: var(--rose-300);
}
.footer :focus-visible { outline-color: var(--rose-300); }

/* Telas grandes: sem isto o hero fica com tudo em tamanho de 1440 e o
   conteudo parece perdido no meio de 1920px. Amplia a escala, nao o espaco. */
@media (min-width: 1600px) {
  .hero {
    --fs-h1: clamp(4rem, 1.5rem + 3.1vw, 5.25rem);
    --fs-lead: 1.3125rem;
    --frasco-w: 340px;
    --frasco-b: 172px;
    --spill-h: 700px;
  }
  .hero__frasco { width: var(--frasco-w); bottom: var(--frasco-b); }
  .hero__tampa  { left: 37%; bottom: 25%; width: 138px; }
  .hero__hand   { max-width: 760px; }
  .hero .btn    { min-height: 60px; padding-inline: 2.5rem; font-size: 0.9375rem; }
}

/* Animacao de expansao do card de servico ---------------------------------- */
@keyframes svc-abre {
  from { opacity: 0.35; transform: scale(0.982); }
  to   { opacity: 1;     transform: none; }
}
@keyframes svc-sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.svc[data-open] { animation: svc-abre 420ms var(--ease) both; }
.svc[data-open] .svc__media img { animation: svc-abre 520ms var(--ease) both; }
/* Conteudo do painel entra escalonado, de cima para baixo */
.svc[data-open] .svc__panel > * { animation: svc-sobe 460ms var(--ease) both; }
.svc[data-open] .svc__panel > *:nth-child(1) { animation-delay: 90ms; }
.svc[data-open] .svc__panel > *:nth-child(2) { animation-delay: 150ms; }
.svc[data-open] .svc__panel > *:nth-child(3) { animation-delay: 210ms; }
.svc[data-open] .svc__panel > *:nth-child(4) { animation-delay: 270ms; }
.svc[data-open] .price li { animation: svc-sobe 420ms var(--ease) both; }
.svc[data-open] .price li:nth-child(1) { animation-delay: 180ms; }
.svc[data-open] .price li:nth-child(2) { animation-delay: 215ms; }
.svc[data-open] .price li:nth-child(3) { animation-delay: 250ms; }
.svc[data-open] .price li:nth-child(4) { animation-delay: 285ms; }
.svc[data-open] .price li:nth-child(5) { animation-delay: 320ms; }
.svc[data-open] .price li:nth-child(6) { animation-delay: 355ms; }

@media (prefers-reduced-motion: reduce) {
  .svc[data-open],
  .svc[data-open] .svc__media img,
  .svc[data-open] .svc__panel > *,
  .svc[data-open] .price li { animation: none; }
}