/* =========================================================
   MODELO HARU NAILS — página pessoal de nail designer
   Azul-marinho e azul brilho da logo + azul do cabelo da Haru.
   Títulos em Fredoka (arredondada, como as letras "bolha" da logo); texto em Inter.
   ========================================================= */

@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/fredoka-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/fredoka-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format('woff2'); }

:root {
    --hn-marinho: #0A2E6E;
    --hn-azul: #1466D8;
    --hn-brilho: #3BA0FF;
    --hn-ceu: #EAF4FF;
    --hn-gelo: #F7FBFF;
    --hn-tinta: #0B1B3A;
    --hn-texto-2: #48597A;
    --hn-linha: #D4E6FB;
    --hn-raio: 24px;
    --hn-titulo: 'Fredoka', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hn-corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--hn-gelo); color: var(--hn-tinta); font: 400 16px/1.6 var(--hn-corpo); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hn-brilho); outline-offset: 3px; }

.hn-wrap { width: min(1080px, 100% - 40px); margin: 0 auto; }
.hn-sec { padding: 64px 0; }
.hn-title { font: 600 clamp(32px, 5.6vw, 52px)/1.05 var(--hn-titulo); color: var(--hn-marinho); letter-spacing: -.01em; margin: 0 0 14px; text-wrap: balance; }
.hn-title--sm { font-size: clamp(28px, 4.4vw, 40px); }
.hn-lead { color: var(--hn-texto-2); font-size: clamp(16px, 2vw, 18px); margin: 0 0 26px; max-width: 58ch; }

/* ---------- botões "bolha" (brilho como as letras da logo) ---------- */
.hn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; text-align: center; color: #fff; font: 600 18px/1.15 var(--hn-titulo); letter-spacing: .01em;
    background: linear-gradient(180deg, #4DAAFF 0%, var(--hn-azul) 55%, #0E4FB0 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(10, 46, 110, .35), 0 12px 26px -12px rgba(20, 102, 216, .8);
    transition: transform .15s, box-shadow .2s; }
.hn-btn:hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(10, 46, 110, .35), 0 18px 30px -12px rgba(20, 102, 216, .9); }
.hn-btn svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hn-btn--wa { background: #fff; color: var(--hn-marinho); box-shadow: inset 0 0 0 2px var(--hn-linha), 0 10px 22px -16px rgba(10, 46, 110, .6); }
.hn-btn--wa svg { fill: #1FAF5A; stroke: none; }
.hn-btn--wa:hover { box-shadow: inset 0 0 0 2px var(--hn-brilho), 0 14px 26px -16px rgba(10, 46, 110, .7); }
.hn-btn--mapa svg { fill: none; stroke: #D93025; stroke-width: 2.2; }
.hn-btn--claro { background: var(--hn-marinho); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 12px 26px -14px rgba(10, 46, 110, .8); }
.hn-btn--cheio { width: 100%; }

/* ---------- 1. topo ---------- */
.hn-hero { position: relative; overflow: hidden; padding: 34px 0 70px; background: radial-gradient(80% 70% at 85% 30%, rgba(59, 160, 255, .28), transparent 65%), linear-gradient(180deg, var(--hn-ceu) 0%, var(--hn-gelo) 100%); }
.hn-hero-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.hn-logo { width: min(300px, 70%); height: auto; margin: 0 0 22px -6px; filter: drop-shadow(0 8px 18px rgba(20, 102, 216, .25)); }
.hn-botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hn-info { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; color: var(--hn-texto-2); font-size: 15px; }
.hn-info span, .hn-info a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.hn-info a:hover { color: var(--hn-azul); }
.hn-info svg, .hn-endereco svg { width: 19px; height: 19px; fill: none; stroke: var(--hn-azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.hn-foto { position: relative; margin: 0; justify-self: center; width: min(430px, 100%); }
.hn-foto-moldura { display: block; aspect-ratio: 1 / 1.12; border-radius: 999px 999px 40px 40px; overflow: hidden; background: var(--hn-ceu); box-shadow: 0 0 0 8px #fff, 0 0 0 11px var(--hn-linha), 0 40px 60px -30px rgba(10, 46, 110, .55); }
.hn-foto-moldura img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hn-foto figcaption { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); background: #fff; border-radius: 999px; padding: 10px 22px; box-shadow: 0 14px 30px -16px rgba(10, 46, 110, .6); text-align: center; white-space: nowrap; }
.hn-foto figcaption strong { display: block; font: 600 19px/1.1 var(--hn-titulo); color: var(--hn-marinho); }
.hn-foto figcaption span { font-size: 12.5px; color: var(--hn-texto-2); }
.hn-brilho { position: absolute; width: 46px; height: 46px; fill: var(--hn-brilho); filter: drop-shadow(0 4px 10px rgba(59, 160, 255, .5)); top: 8%; right: -4%; animation: hnPisca 3.2s ease-in-out infinite; }
.hn-brilho--2 { width: 26px; height: 26px; top: 26%; right: -10%; animation-delay: .8s; }
.hn-brilho--3 { width: 32px; height: 32px; top: auto; bottom: 22%; right: auto; left: -8%; fill: var(--hn-azul); animation-delay: 1.6s; }
@keyframes hnPisca { 50% { transform: scale(.7) rotate(20deg); opacity: .6; } }

/* ---------- 2. vídeo ---------- */
.hn-video-sec { text-align: center; }
.hn-video { position: relative; aspect-ratio: 16 / 9; max-width: 820px; margin: 0 auto; border-radius: var(--hn-raio); overflow: hidden; background: #000; box-shadow: 0 0 0 6px #fff, 0 30px 60px -30px rgba(10, 46, 110, .6); }
.hn-video iframe, .hn-play, .hn-play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hn-play { padding: 0; cursor: pointer; background: #000; }
.hn-play img { object-fit: cover; opacity: .9; }
.hn-play-icon { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #4DAAFF, var(--hn-azul)); box-shadow: 0 0 0 10px rgba(255, 255, 255, .35); }
.hn-play-icon svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }

/* ---------- 3. serviços ---------- */
.hn-servicos { background: #fff; border-top: 1px solid var(--hn-linha); border-bottom: 1px solid var(--hn-linha); }
.hn-serv-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hn-serv { background: var(--hn-gelo); border: 1px solid var(--hn-linha); border-radius: var(--hn-raio); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.hn-serv-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--hn-ceu); margin-bottom: 6px; }
.hn-serv-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--hn-azul); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hn-serv h3 { margin: 0; font: 600 21px/1.2 var(--hn-titulo); color: var(--hn-marinho); }
.hn-serv p { margin: 0 0 8px; color: var(--hn-texto-2); font-size: 15px; }
.hn-serv a { margin-top: auto; align-self: flex-start; justify-self: start; font: 600 15px/1 var(--hn-titulo); color: var(--hn-azul); text-decoration: none; border-bottom: 2px solid var(--hn-brilho); padding-bottom: 3px; }
.hn-serv a:hover { color: var(--hn-marinho); }

/* ---------- 4. catálogo ---------- */
.hn-catalogo { text-align: center; }
.hn-catalogo .hn-lead { margin-left: auto; margin-right: auto; }
.hn-artes { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hn-artes a { position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; box-shadow: 0 14px 30px -22px rgba(10, 46, 110, .7); }
.hn-artes img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s; }
.hn-artes a:hover img { transform: scale(1.05); }
.hn-artes span { position: absolute; left: 8px; bottom: 8px; background: rgba(255, 255, 255, .92); color: var(--hn-marinho); font: 600 13px/1 var(--hn-titulo); padding: 7px 11px; border-radius: 999px; }

/* ---------- 5. como agendar ---------- */
.hn-passos-sec { background: var(--hn-marinho); color: #fff; text-align: center; }
.hn-passos-sec .hn-title { color: #fff; }
.hn-passos { list-style: none; counter-reset: passo; margin: 10px 0 30px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.hn-passos li { counter-increment: passo; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--hn-raio); padding: 22px; }
.hn-passos li::before { content: counter(passo); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: linear-gradient(180deg, #4DAAFF, var(--hn-azul)); font: 700 19px/1 var(--hn-titulo); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.hn-passos strong { display: block; font: 600 20px/1.2 var(--hn-titulo); margin-bottom: 4px; }
.hn-passos span { color: rgba(255, 255, 255, .78); font-size: 15px; }

/* ---------- 6. estúdio ---------- */
.hn-estudio-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.hn-estudio-grade > img { width: 100%; border-radius: var(--hn-raio); aspect-ratio: 1 / 1.1; object-fit: cover; box-shadow: 0 0 0 6px #fff, 0 30px 50px -30px rgba(10, 46, 110, .6); }
.hn-endereco { display: flex; align-items: center; gap: 8px; margin: -6px 0 22px; font-weight: 600; color: var(--hn-marinho); }

/* ---------- blocos padrão ---------- */
.hn-sec.sac-dl, .hn-sec.sac-dep, .hn-sec.sac-g { text-align: center; }

/* ---------- formulário ---------- */
.hn-form-sec { text-align: center; background: linear-gradient(180deg, var(--hn-gelo), var(--hn-ceu)); }
.hn-form-sec .hn-lead { margin-left: auto; margin-right: auto; }
.hn-card { max-width: 520px; margin: 0 auto; text-align: left; background: #fff; border-radius: var(--hn-raio); padding: 26px 22px; box-shadow: 0 30px 60px -36px rgba(10, 46, 110, .6); }
.hn-field { display: block; margin-bottom: 16px; }
.hn-field span { display: block; margin-bottom: 6px; font: 600 14px/1.3 var(--hn-corpo); }
.hn-field input { width: 100%; height: 52px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--hn-linha); background: var(--hn-gelo); color: var(--hn-tinta); font: 400 16px var(--hn-corpo); }
.hn-field input:focus { outline: none; border-color: var(--hn-brilho); box-shadow: 0 0 0 3px rgba(59, 160, 255, .22); background: #fff; }
.hn-field input[aria-invalid="true"] { border-color: #D93025; }
.hn-card .sac-lgpd { color: var(--hn-texto-2); accent-color: var(--hn-azul); }
.hn-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #FDECEC; color: #9B1C1C; font-size: 14px; }
.hn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hn-success { text-align: center; padding: 10px 0; }
.hn-success .vx-success-text { margin: 0 0 16px; font: 600 20px/1.35 var(--hn-titulo); color: var(--hn-marinho); }
.hn-link { color: var(--hn-azul); font-weight: 600; }

/* ---------- rodapé e botão flutuante ---------- */
.hn-foot { padding: 40px 20px 100px; text-align: center; color: var(--hn-texto-2); font-size: 14px; background: #fff; border-top: 1px solid var(--hn-linha); }
.hn-foot img { margin: 0 auto 10px; width: 160px; height: auto; }
.hn-foot p { margin: 4px 0; }
.hn-foot-links { display: flex; justify-content: center; gap: 18px; margin-top: 10px !important; }
.hn-foot a { color: var(--hn-marinho); font-weight: 600; }
.hn-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 999px; color: #fff; text-decoration: none; font: 600 16px/1 var(--hn-titulo);
    background: linear-gradient(180deg, #4DAAFF, var(--hn-azul)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 14px 30px -10px rgba(20, 102, 216, .8); }
.hn-flutuante { transition: opacity .25s, transform .25s; }
.hn-flutuante.is-oculto { opacity: 0; transform: translateY(20px); pointer-events: none; }
.hn-flutuante svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- página indisponível ---------- */
.hn-off { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; text-align: center; background: var(--hn-ceu); }
.hn-off img { margin: 0 auto 24px; width: 220px; height: auto; }

/* ---------- celular e tablet ---------- */
@media (max-width: 900px) {
    .hn-hero-grade, .hn-estudio-grade { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .hn-hero-texto { text-align: center; }
    .hn-hero-texto .hn-lead { margin-left: auto; margin-right: auto; }
    .hn-logo { margin: 0 auto 16px; }
    .hn-botoes, .hn-info { justify-content: center; }
    .hn-foto { order: -1; width: min(300px, 80%); margin-bottom: 18px; }
    .hn-serv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hn-artes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hn-passos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .hn-sec { padding: 48px 0; }
    .hn-serv-grade { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .hn-serv { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; }
    .hn-serv-ico { grid-row: span 3; margin: 0; }
    .hn-serv p { margin-bottom: 4px; }
    .hn-botoes .hn-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .hn-brilho { animation: none; } .hn-btn, .hn-artes img { transition: none; } }