/* Site da Carol Guerreiro | Nail Designer. Marca "Amêndoa clássica" (cereja, dourado, cetim). Celular primeiro. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fontes/cormorant.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 500; font-display: swap; src: url(fontes/cormorant-italico.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(fontes/montserrat.woff2) format("woff2"); }

:root {
  --perola: #FAF8FB; --cetim: #EEEBF3; --cetim-esc: #E2DDEA; --cereja: #A3124E; --cereja-esc: #860C3F;
  --dourado: #C9A24B; --dourado-texto: #8A6A22; --grafite: #2B2430; --texto: #4A4250; --linha: #E4DFE8;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Montserrat", system-ui, sans-serif;
  --cab: 64px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--cab); }
body { margin: 0; background: var(--perola); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.pular { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 50; }
.pular:focus { left: 8px; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 18px; }
.rot { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--cereja); font-weight: 500; margin: 0 0 10px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--grafite); line-height: 1.08; margin: 0; }
h1 { font-size: 34px; }
h2 { font-size: 32px; padding-right: 52px; }
h1 em, h2 em { font-style: italic; color: var(--cereja); }
.fio { width: 44px; height: 1px; background: var(--dourado); margin: 18px 0; }
.intro { margin: 14px 0 0; max-width: 36em; }

/* Botões */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--cereja); color: #fff; text-decoration: none; font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; transition: background .2s, color .2s; border: 1px solid var(--cereja); cursor: pointer; font-family: inherit; text-align: center; }
.btn:hover { background: var(--cereja-esc); border-color: var(--cereja-esc); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.claro { background: transparent; color: var(--grafite); border-color: var(--grafite); }
.btn.claro:hover { background: var(--grafite); color: #fff; }
.acoes { display: grid; gap: 10px; margin-top: 24px; }

/* Cabeçalho */
.cab { position: sticky; top: 0; z-index: 30; background: rgba(250,248,251,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.cab .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--cab); }
.cab .marca img { height: 32px; width: auto; }
.cab nav { display: none; }
.cab .agendar { min-height: 40px; padding: 0 16px; font-size: 11px; }

/* Topo */
.topo { padding: 22px 0 48px; }
.topo .wrap { display: grid; gap: 24px; }
.topo .lead { margin: 0; max-width: 34em; }
.topo .foto { position: relative; border-radius: 180px 180px 18px 18px; overflow: hidden; height: min(58svh, 460px); box-shadow: 0 18px 40px rgba(43,36,48,.14); }
.topo .foto img { width: 100%; height: 100%; object-fit: cover; }
.topo .selo { position: absolute; left: 12px; bottom: 12px; background: rgba(250,248,251,.95); border-radius: 999px; padding: 7px 14px; font-size: 12px; color: var(--grafite); display: flex; gap: 8px; align-items: center; }
.topo .selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--cereja); }

/* Faixa contínua */
.faixa { background: var(--grafite); color: var(--cetim); overflow: hidden; }
.faixa .trilho-f { display: flex; width: max-content; animation: faixa 38s linear infinite; }
.faixa ul { list-style: none; margin: 0; padding: 16px 0; display: flex; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.faixa li { padding: 0 22px; }
.faixa li::before { content: "✦"; color: var(--dourado); margin-right: 22px; }
@keyframes faixa { to { transform: translateX(-50%); } }

section.bloco { padding: 64px 0; }

/* Carrossel (serviços) */
.carrossel { position: relative; margin-top: 28px; }
.carrossel .itens { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -18px; padding: 4px 18px 8px; scroll-padding: 0 18px; }
.carrossel .itens::-webkit-scrollbar { display: none; }
.carrossel .itens > * { scroll-snap-align: start; }
.controles { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.controles button.seta { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--grafite); background: transparent; color: var(--grafite); font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.controles button.seta:disabled { opacity: .3; cursor: default; }
.bolinhas { display: flex; gap: 8px; }
.bolinhas button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--cetim-esc); cursor: pointer; }
.bolinhas button[aria-current="true"] { background: var(--cereja); width: 22px; border-radius: 4px; }

.servico { background: #fff; border: 1px solid var(--linha); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.servico img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.servico .txt { padding: 18px 20px 22px; }
.servico h3 { font-size: 24px; margin-bottom: 6px; }
.servico p { margin: 0; font-size: 15px; }
.servico .tag { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dourado-texto); margin-bottom: 6px; }

/* Trabalhos */
.trabalhos { background: var(--cetim); }
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 24px -18px 0; padding: 0 18px 4px; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--grafite); background: transparent; color: var(--grafite); font: 500 12px var(--sans); letter-spacing: .08em; cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--grafite); color: #fff; }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.grade figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #fff; }
.grade figure.grande { grid-column: span 2; }
.grade figure[hidden] { display: none; }
.grade button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.grade button:focus-visible { outline: 2px solid var(--cereja); outline-offset: -2px; }
.grade img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s; }
.grade figcaption { position: absolute; left: 8px; bottom: 8px; font-size: 11px; color: var(--grafite); background: rgba(250,248,251,.92); padding: 5px 10px; border-radius: 999px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.trabalhos .mais-ig { margin-top: 22px; }

dialog.zoom { border: 0; padding: 0; background: transparent; max-width: min(92vw, 720px); width: 100%; overflow: visible; }
dialog.zoom::backdrop { background: rgba(20,16,24,.86); }
dialog.zoom img { width: 100%; height: auto; border-radius: 14px; }
dialog.zoom p { color: #fff; text-align: center; margin: 10px 0 0; font-size: 14px; }
dialog.zoom .fechar { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(250,248,251,.95); font-size: 22px; cursor: pointer; color: var(--grafite); }

/* Quem atende */
.sobre .wrap { display: grid; gap: 28px; }
.sobre .retrato { width: 100%; max-width: 340px; aspect-ratio: 4 / 5; border-radius: 170px 170px 18px 18px; overflow: hidden; border: 1px solid var(--dourado); padding: 6px; background: #fff; }
.sobre .retrato img { width: 100%; height: 100%; border-radius: 164px 164px 13px 13px; object-fit: cover; object-position: 50% 12%; }
.sobre p { margin: 0 0 14px; }
.sobre ul.fatos { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 8px; }
.sobre ul.fatos li { padding-left: 22px; position: relative; }
.sobre ul.fatos li::before { content: "✦"; position: absolute; left: 0; color: var(--dourado); }
blockquote.frase { margin: 0; padding: 26px 0 0; border-top: 1px solid var(--linha); font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.25; color: var(--grafite); }
blockquote.frase cite { display: block; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cereja); margin-top: 12px; }

/* Cursos (chamada na inicial) */
.chamada-curso { background: var(--grafite); color: var(--cetim); }
.chamada-curso .wrap { display: grid; gap: 26px; }
.chamada-curso h2 { color: #fff; }
.chamada-curso h2 em { color: var(--dourado); }
.chamada-curso .rot { color: var(--dourado); }
.chamada-curso img { border-radius: 18px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.chamada-curso .btn.claro { color: #fff; border-color: #fff; }
.chamada-curso .btn.claro:hover { background: #fff; color: var(--grafite); }

/* Passos */
.passos ol { list-style: none; margin: 28px 0 0; padding: 0; display: grid; }
.passos li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 24px; position: relative; }
.passos li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: 6px; width: 1px; background: var(--dourado); opacity: .6; }
.passos .n { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dourado); display: grid; place-items: center; font-family: var(--serif); font-size: 22px; color: var(--cereja); background: #fff; }
.passos h3 { font-size: 22px; margin: 8px 0 4px; }
.passos p { margin: 0; font-size: 15px; }

/* Onde */
.onde { background: #fff; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.onde .wrap { display: grid; gap: 24px; }
.onde address { font-style: normal; font-size: 17px; color: var(--grafite); margin: 14px 0 6px; }
.onde .obs { font-size: 14px; margin: 0; }
.onde .mapa { border-radius: 18px; overflow: hidden; border: 1px solid var(--linha); aspect-ratio: 4 / 3; background: var(--cetim); }
.onde iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Perguntas */
.faq details { border-bottom: 1px solid var(--linha); padding: 16px 0; }
.faq summary { cursor: pointer; list-style: none; font-family: var(--serif); font-size: 21px; line-height: 1.25; color: var(--grafite); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cereja); font-family: var(--sans); font-size: 22px; line-height: 1.1; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0; font-size: 15px; }
.faq .lista { margin-top: 22px; }

/* Página de cursos */
.migalha ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 14px; font-size: 12px; }
.migalha li + li::before { content: "›"; margin-right: 6px; color: var(--dourado-texto); }
.migalha a { text-decoration: none; color: var(--cereja); }
.lista-curso { display: grid; gap: 12px; margin-top: 26px; }
.lista-curso .item { background: #fff; border: 1px solid var(--linha); border-radius: 18px; padding: 20px; }
.lista-curso h3 { font-size: 23px; margin-bottom: 6px; }
.lista-curso p { margin: 0; font-size: 15px; }
.resultados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.resultados figure { margin: 0; border-radius: 14px; overflow: hidden; }
.resultados figure:first-child { grid-column: span 2; }
.resultados img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.aviso-turma { margin-top: 26px; border: 1px solid var(--dourado); border-radius: 18px; padding: 20px; background: #fff; }
.aviso-turma p { margin: 0 0 16px; }

/* Final e rodapé */
.final { background: var(--grafite); color: var(--cetim); padding: 64px 0; }
.final h2 { color: #fff; }
.final h2 em { color: var(--dourado); }
.final p { margin: 14px 0 0; max-width: 30em; }
.rodape { background: #221C26; color: #b9b1bf; font-size: 14px; padding: 36px 0 calc(100px + env(safe-area-inset-bottom)); text-align: center; }
.rodape .wrap { display: grid; gap: 14px; justify-items: center; }
.rodape img { height: 46px; width: auto; }
.rodape p { margin: 0; }
.rodape nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: #fff; }
.rodape .credito { font-size: 12px; opacity: .8; }

/* Botão flutuante do WhatsApp */
.wa-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--cereja); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(134,12,63,.38); animation: pulso 2.6s ease-in-out infinite; }
.wa-flutuante svg { width: 28px; height: 28px; }
@keyframes pulso { 0%, 100% { box-shadow: 0 10px 28px rgba(134,12,63,.38), 0 0 0 0 rgba(163,18,78,.35); } 50% { box-shadow: 0 10px 28px rgba(134,12,63,.38), 0 0 0 10px rgba(163,18,78,0); } }

/* Revelar ao rolar (só com JS) */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .rv.vis { opacity: 1; transform: none; }

/* 404 */
.erro { min-height: 60vh; display: grid; align-content: center; padding: 64px 0; }

@media (hover: hover) {
  .grade figure:hover img { transform: scale(1.04); }
}

@media (min-width: 768px) {
  h1 { font-size: 54px; }
  h2 { font-size: 42px; padding-right: 0; }
  .wrap { padding: 0 28px; }
  .acoes { display: flex; flex-wrap: wrap; gap: 12px; }
  .acoes .btn { display: inline-flex; white-space: nowrap; }
  .topo { padding: 56px 0 84px; }
  .topo .wrap { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; }
  .topo .foto { height: auto; aspect-ratio: 4 / 5; max-height: 640px; }
  section.bloco { padding: 96px 0; }
  .carrossel .itens { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; margin: 0; padding: 0; gap: 18px; }
  .carrossel .controles { display: none; }
  .filtros { margin: 28px 0 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .grade { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .grade figure.grande { grid-column: span 1; }
  .sobre .wrap { grid-template-columns: 320px 1fr; align-items: center; gap: 56px; }
  .sobre blockquote.frase { grid-column: 1 / -1; text-align: center; font-size: 32px; max-width: 760px; margin: 0 auto; width: 100%; }
  .chamada-curso .wrap { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
  .passos ol { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .passos li { grid-template-columns: 1fr; gap: 10px; }
  .passos li::after { display: none; }
  .onde .wrap { grid-template-columns: 1fr 1.2fr; align-items: center; gap: 56px; }
  .faq .wrap { max-width: 860px; }
  .lista-curso { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .resultados { grid-template-columns: repeat(3, 1fr); }
  .resultados figure:first-child { grid-column: span 1; }
  .rodape { padding-bottom: 40px; }
}
@media (min-width: 1024px) {
  .carrossel .itens { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1180px) {
  :root { --cab: 76px; }
  .cab .marca img { height: 40px; }
  .cab nav { display: flex; gap: 26px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
  .cab nav a { text-decoration: none; }
  .cab nav a:hover, .cab nav a[aria-current="page"] { color: var(--cereja); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faixa .trilho-f, .wa-flutuante { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .grade img { transition: none; }
}