/* ================= FONTES AUTO-HOSPEDADAS =================
   Substituem o <link> para fonts.googleapis.com, que era um
   recurso bloqueante de render em outra origem (~870ms no mobile).
   Arquivos em /assets/fonts. Para atualizar, rebaixe do Google Fonts.
   ========================================================== */
/* Archivo normal latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo normal latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond italic latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond italic latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond normal latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond normal latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Meraki Yoga - estilos das landings de Nakshatra (pt / es / en)

   Arquivo unico compartilhado pelas tres paginas de idioma.
   Antes o CSS era copiado inline em cada uma, e as versoes es/en ficaram
   para tras (sem trava de scroll horizontal no mobile, sem os estilos da
   tela de carregamento). Editar aqui vale para os tres idiomas.
   ========================================================================== */

:root {
    /* Paleta do link da bio: rosado e coral sobre papel claro. Os NOMES antigos
       das variaveis continuam valendo porque o HTML aponta pra eles em styles
       inline; so o valor que elas guardam mudou.
       Todo par texto/fundo daqui foi medido: minimo 4.5:1. */
    --rose: #8A2F3A;
    /* vinho rosado dos titulos e botoes: medido sobre a parte mais escura
       da aguada (o ambar), onde precisa aguentar texto pequeno - 4.7:1 */
    --rose-forte: #7A2731;
    --coral: #B0603F;
    --rose-claro: #D9808A;
    --coral-claro: #E29A6A;
    --creme: #FBEFD9;

    /* Papel: quase branco, com um sopro de rosa. Nada de bege. */
    --bg-bege: #FDF0EA;
    --bg-white: #FFFFFF;
    --fg-dark: #41202A;
    /* ameixa - 13.4:1 no papel */
    --muted: #63414C;
    /* 5.0:1 sobre o ambar da aguada, 8.8:1 no papel */
    --line: rgba(65, 32, 42, 0.14);

    /* Nomes mantidos de proposito: o HTML e o GTM apontam pra eles. */
    --meraki-purple: #8A2F3A;
    --meraki-purple-hover: #7A2731;
    --chakra-orange: #B0603F;
    --chakra-blue: #D9808A;
    --chakra-green: #C9636F;
    --chakra-red: #E29A6A;

    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --maxw: 760px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Trava o scroll horizontal no mobile */
}

body {
    margin: 0;
    color: var(--fg-dark);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Trava o scroll horizontal no mobile */
    /* Aguada: manchas de rosa, laranja e amarelo com a borda sangrada por
       turbulencia, como aquarela em papel molhado. Fica presa a viewport, entao
       acompanha a rolagem sem esticar na pagina toda.
       Era um SVG com feTurbulence + feDisplacementMap + feGaussianBlur gerado em
       tempo de execucao, o que custava ~1,6s de render delay no mobile. Agora e
       a mesma imagem pre-renderizada em WebP (3KB). */
    background-color: #FDF6F2;
    background-image: url("/assets/img/bg/aquarela.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Grao de papel, bem discreto, pra nao ficar digital demais.
   Era um SVG feTurbulence inline: o navegador rasterizava o ruido a cada
   carregamento. Agora e um tile WebP de 128px, visualmente igual. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("/assets/img/bg/grao.webp");
    background-size: 128px 128px;
    background-repeat: repeat;
}

/* o conteudo fica acima do grao */
body>* {
    position: relative;
    z-index: 1;
}

h1,
h2,
h3 {
    font-family: var(--sans);
    font-weight: 800;
    font-stretch: 118%;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.05;
    margin: 0;
    color: var(--fg-dark);
}

/* o serif continua existindo pros trechos citados */
.serif {
    font-family: var(--serif);
    font-weight: 500;
    margin: 0;
}

p {
    margin: 0;
}

p+p {
    margin-top: 12px;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--rose);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 3px;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Header ---------- */
header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    /* Divisoria do menu no bordo da identidade (mesmo tom do botao e dos
       titulos), no lugar do cinza-ameixa quase invisivel de antes. */
    border-bottom: 1px solid var(--rose);
}

.header-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    height: 45px;
    width: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.header-logo:hover {
    opacity: 0.8;
}

/* ---------- Lang Switcher & Controls ---------- */
.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lang-switcher a {
    font-size: 1.2rem;
    opacity: 0.4;
    transition: opacity 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    filter: grayscale(100%);
}

.lang-switcher a:hover {
    opacity: 0.8;
    transform: scale(1.1);
    filter: grayscale(50%);
}

.lang-switcher a.active {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

.btn-anchor {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rose);
    border: 2px solid var(--rose);
    padding: 10px 20px;
    transition: background 0.25s ease, color 0.25s ease;
}

.btn-anchor:hover {
    background: var(--rose);
    color: #fff;
}

/* ---------- Aquarela SVG Decorativa ---------- */
.aquarela {
    position: absolute;
    pointer-events: none;
    filter: url(#watercolor) blur(6px);
    opacity: 0.16;
    z-index: 0;
}

/* ---------- Hero ---------- */
section.hero {
    position: relative;
    padding: 100px 0 30px;
    /* Reduzido de 80px para 30px para diminuir o espaço */
    overflow: hidden;
}

.eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 20px;
    display: block;
    font-weight: 600;
    letter-spacing: 0.24em;
    font-size: 0.7rem;
}

h1.hero-title {
    font-weight: 900;
    font-stretch: 125%;
    font-size: clamp(2rem, 4.6vw, 3.3rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
    margin-bottom: 32px;
}

.hero-copy {
    color: var(--muted);
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.hero-copy strong {
    color: var(--fg-dark);
    font-weight: 600;
}

.destaque-copy {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--fg-dark);
    border-left: 3px solid var(--rose);
    padding-left: 20px;
    margin: 32px 0;
}

/* ---------- Quiz Formulário ---------- */
section.quiz-section {
    padding: 0 0 100px;
    position: relative;
}

.quiz-card {
    background: var(--bg-white);
    color: var(--fg-dark);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 48px 40px;
    margin-top: 0;
    box-shadow: 0 14px 40px rgba(65, 32, 42, 0.10);
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

/* dentro do cartao a tinta volta a ser escura sobre papel */
.quiz-card h1,
.quiz-card h2,
.quiz-card h3 {
    color: var(--fg-dark);
}

.progress-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 40px;
}

.progress-dots span {
    height: 4px;
    flex: 1;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.progress-dots span i {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--chakra-green);
    transition: width 0.4s ease;
}

.quiz-step {
    display: none;
    animation: fadein 0.5s ease;
    flex-grow: 1;
}

.quiz-step.active {
    display: block;
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-transition {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--fg-dark);
    margin-bottom: 24px;
}

.quiz-card .eyebrow {
    color: var(--meraki-purple);
    opacity: 1;
}

.input-group {
    margin-bottom: 24px;
}

label.q-label {
    display: block;
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.confirmacao-header {
    background-color: rgba(168, 67, 79, 0.07);
    padding: 12px 16px;
    font-weight: 500;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
    border-radius: 6px 6px 0 0;
}

.radio-group {
    display: flex;
    flex-direction: column;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    font-size: 1.05rem;
    color: var(--fg-dark);
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: background 0.2s ease;
}

.radio-label:last-child {
    border-bottom: none;
}

.radio-label:hover {
    background-color: rgba(168, 67, 79, 0.05);
}

.radio-label input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--meraki-purple);
    cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"] {
    width: 100%;
    font-family: var(--sans);
    font-size: 1.05rem;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg-bege);
    color: var(--fg-dark);
    font-weight: 400;
    transition: border-color 0.3s;
}

input:focus {
    border-color: var(--meraki-purple);
    background: var(--bg-white);
}

.hint {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 6px;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
}

.checkbox-group input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--meraki-purple);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-group label {
    font-size: 0.95rem;
    color: var(--muted);
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-group label {
    font-size: 0.9rem;
    color: var(--muted);
}

.quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.btn-primary {
    background: var(--rose);
    color: #fff;
    border: 2px solid var(--meraki-purple);
    padding: 15px 30px;
    border-radius: 0;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    text-align: center;
    display: inline-block;
}

.btn-primary:hover {
    background: transparent;
    color: var(--meraki-purple);
}

.btn-text {
    background: none;
    border: none;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px;
}

.btn-text:disabled {
    visibility: hidden;
}

/* ---------- Serviços (Com que mapa eu vou?) ---------- */
section.servicos {
    background: var(--bg-white);
    color: var(--fg-dark);
    padding: 100px 0;
    border-top: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

h2.section-title {
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    margin-bottom: 16px;
    line-height: 1.08;
    color: var(--meraki-purple);
}

.servicos-intro {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 650px;
    margin-bottom: 48px;
}

.servicos-intro strong {
    color: var(--fg-dark);
    font-weight: 600;
}

.pricing-table {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pricing-card {
    background: var(--bg-bege);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(65, 32, 42, 0.10);
    background: var(--bg-white);
}

.pricing-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
}

.pricing-name {
    font-family: var(--sans);
    font-weight: 800;
    font-stretch: 114%;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.2rem;
    color: var(--fg-dark);
}

.pricing-subtitle {
    font-family: var(--serif);
    font-style: italic;
    color: var(--meraki-purple);
    font-size: 1.2rem;
}

.pricing-value {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--meraki-purple);
    font-variant-numeric: tabular-nums;
}

.pricing-desc {
    color: var(--muted);
    font-size: 1rem;
}

.pricing-tag {
    display: inline-block;
    background: rgba(168, 67, 79, 0.10);
    color: var(--meraki-purple);
    padding: 5px 12px;
    border-radius: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 8px;
}

.logistics-box {
    margin-top: 48px;
    padding: 24px;
    background: var(--bg-bege);
    border: 1px dashed var(--line);
    border-radius: 2px;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
}

/* ---------- FAQ ---------- */
.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 24px 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--fg-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.faq-item.open .faq-a {
    grid-template-rows: 1fr;
}

.faq-a-inner {
    overflow: hidden;
    color: var(--muted);
    font-size: 1rem;
    max-width: 680px;
}

.faq-a-content {
    padding-bottom: 24px;
}

.faq-contato {
    text-align: center;
    margin-top: 80px;
    padding: 40px;
    background: var(--bg-white);
    border-radius: 2px;
    border: 1px solid var(--line);
}

/* nada aqui pode depender de heranca de cor: essas faixas sao claras */
.faq-contato,
.faq-contato p,
.faq-item,
.logistics-box,
.pricing-card,
.quiz-card {
    color: var(--fg-dark);
}

.faq-contato p,
.logistics-box {
    color: var(--muted);
}

.faq-contato h3 {
    font-size: 1.4rem;
    margin-bottom: 16px;
    color: var(--meraki-purple);
}

footer {
    text-align: center;
    padding: 60px 0;
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
    .quiz-card {
        padding: 32px 20px;
        margin-top: 24px;
    }

    input[type="text"],
    input[type="email"],
    input[type="date"],
    input[type="time"] {
        font-size: 16px !important;
    }

    .quiz-nav {
        flex-direction: column-reverse;
        gap: 16px;
        align-items: stretch;
        margin-top: 32px;
    }

    .btn-primary {
        width: 100%;
        padding: 16px 24px;
        /* Aumenta a área de clique no mobile */
    }

    .btn-text {
        width: 100%;
        padding: 12px;
    }

    .pricing-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .header-controls {
        flex-direction: column-reverse;
        gap: 8px;
        align-items: flex-end;
    }

    .faq-contato {
        padding: 32px 24px;
    }

    input[type="date"],
    input[type="time"] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        display: block;
        appearance: none;
        -webkit-appearance: none;
    }

}

.loading-state {
    display: none;
    text-align: center;
    padding: 32px 0 40px;
    flex-grow: 1;
}

.chart-wrap {
    width: 200px;
    height: 200px;
    margin: 0 auto 36px;
}

.chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-line {
    stroke: var(--meraki-purple);
    stroke-width: 1;
    opacity: 0.28;
    fill: none;
}

.chart-house {
    fill: var(--meraki-purple);
    opacity: 0.22;
}

.chart-graha {
    fill: var(--chakra-orange);
}

.chart-halo {
    fill: var(--chakra-orange);
    opacity: 0.22;
}

.loading-msg {
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--fg-dark);
    font-style: italic;
    min-height: 3.6em;
    max-width: 400px;
    margin: 0 auto 24px;
    transition: opacity 0.6s ease;
}

.loading-warn {
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0.05em;
}