/*
 * IKIGAI — camada mobile-first
 * Carregada após app.css e refinements.css para preservar o desktop
 * e corrigir proporções, leitura, toque e overflow em telas pequenas.
 */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 820px) {
    .site-shell,
    .page-shell {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Cabeçalho compacto e respirado. */
    .header-inner {
        height: auto;
        min-height: 66px;
        padding: 13px 18px;
        gap: 12px;
    }

    .brand {
        font-size: 19px;
        gap: 8px;
        flex: 0 0 auto;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
    }

    .tagline {
        max-width: 55%;
        font-size: 9px;
        line-height: 1.35;
        letter-spacing: .065em;
        text-align: right;
    }

    /* HERO — uma coluna de verdade no celular. */
    .garden-hero {
        min-height: 0;
        display: block;
        overflow: hidden;
    }

    .hero-texture {
        opacity: .22;
        mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 48%, transparent 100%);
    }

    .garden-hero-inner {
        width: 100%;
        max-width: 100%;
        padding: 38px 18px 24px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
    }

    .hero-copy {
        width: 100%;
        max-width: none;
    }

    .garden-eyebrow,
    .section-kicker,
    .form-kicker {
        font-size: 9.5px;
        line-height: 1.45;
        letter-spacing: .135em;
    }

    .garden-eyebrow {
        align-items: flex-start;
        gap: 9px;
    }

    .garden-eyebrow span {
        width: 28px;
        margin-top: 7px;
        flex: 0 0 28px;
    }

    .hero-copy h1 {
        width: 100%;
        max-width: none;
        margin: 18px 0 0;
        font-size: clamp(42px, 12vw, 54px);
        line-height: .96;
        letter-spacing: -.052em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .hero-lede {
        width: 100%;
        max-width: none;
        margin-top: 21px;
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-note {
        margin-top: 23px;
        gap: 8px;
        font-size: 10px;
        line-height: 1.45;
    }

    /* O diagrama vira uma peça central, sem sair da largura da viewport. */
    .hero-visual {
        position: relative;
        width: min(100%, 380px);
        height: 350px;
        margin: 6px auto 0;
        flex: 0 0 auto;
        overflow: visible;
    }

    .orbit-shadow {
        width: 82%;
        height: 60px;
        bottom: 4px;
        filter: blur(24px);
    }

    .orbit-circle {
        width: 158px;
        height: 158px;
        font-size: 11px;
        line-height: 1.24;
    }

    .orbit-top {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .orbit-left {
        top: 100px;
        left: 0;
    }

    .orbit-right {
        top: 100px;
        right: 0;
    }

    .orbit-bottom {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .orbit-center {
        width: 104px;
        height: 104px;
        left: 50%;
        top: 51%;
        transform: translate(-50%, -50%);
    }

    .orbit-center small {
        font-size: 11px;
    }

    .orbit-center span {
        font-size: 23px;
    }

    .orbit-center i {
        bottom: 18px;
    }

    .visual-caption {
        display: none;
    }

    .signal-inner {
        padding: 12px 18px;
        gap: 8px 12px;
        flex-wrap: wrap;
        font-size: 9px;
        line-height: 1.45;
        text-align: center;
    }

    .signal-inner i {
        width: 3px;
        height: 3px;
    }

    /* Início da jornada. */
    .start-section {
        width: 100%;
        max-width: 100%;
        padding: 54px 18px 60px;
        display: flex;
        flex-direction: column;
        gap: 34px;
        align-items: stretch;
    }

    .start-copy h2 {
        margin: 13px 0 18px;
        font-size: clamp(38px, 10.5vw, 50px);
        line-height: .98;
    }

    .start-copy > p {
        max-width: none;
        font-size: 15px;
        line-height: 1.7;
    }

    .dimension-list {
        margin-top: 24px;
        font-size: 13px;
        line-height: 1.45;
        gap: 10px 10px;
    }

    .start-form {
        width: 100%;
        padding: 27px 20px;
        border-radius: 14px;
        box-shadow: 0 14px 40px rgba(51,39,69,.09);
    }

    .start-form h2 {
        margin: 10px 0 11px;
        font-size: 31px;
        line-height: 1.03;
    }

    .start-form > p {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.62;
    }

    .start-form label,
    .paid-diagnostic-card label {
        font-size: 13px;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        min-height: 48px;
        padding: 13px 14px;
        font-size: 16px; /* Evita zoom automático no iPhone. */
        border-radius: 8px;
    }

    .button,
    .start-form .button.primary {
        width: 100%;
        min-height: 52px;
        padding: 14px 16px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.25;
        text-align: center;
    }

    .form-note,
    .payment-note {
        font-size: 10px;
        line-height: 1.55;
    }

    /* Filosofia e princípios. */
    .philosophy-section {
        padding: 58px 18px;
    }

    .philosophy-grid {
        margin-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .philosophy-grid h2 {
        font-size: clamp(38px, 10.5vw, 50px);
        line-height: 1;
    }

    .philosophy-grid > div {
        padding-top: 0;
        font-size: 14px;
        line-height: 1.72;
    }

    .quote-text {
        margin-top: 21px;
        font-size: 20px;
        line-height: 1.38;
    }

    .principles-grid {
        width: 100%;
        max-width: 100%;
        padding: 42px 18px 58px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .principle-card {
        width: 100%;
        min-height: 0;
        padding: 24px 21px 26px;
        border-radius: 12px;
    }

    .principle-card h3 {
        margin: 34px 0 11px;
        font-size: 29px;
        line-height: 1.02;
    }

    .principle-card p {
        max-width: none;
        font-size: 13px;
        line-height: 1.62;
    }

    /* Jornada de 30 perguntas. */
    .journey-stage {
        min-height: calc(100vh - 130px);
        display: block;
        padding: 18px 12px 38px;
    }

    .journey-card {
        width: 100%;
        max-width: 100%;
        padding: 25px 18px 22px;
        border-radius: 13px;
        box-shadow: 0 14px 42px rgba(32,22,44,.09);
    }

    .journey-progress {
        margin-bottom: 22px;
    }

    .journey-topline {
        gap: 12px;
    }

    .journey-topline strong {
        font-size: 19px;
        line-height: 1.15;
    }

    .journey-count {
        font-size: 10px;
    }

    .dimension-symbol {
        width: 44px;
        height: 44px;
        margin: 20px 0 15px;
    }

    .question-form h1 {
        max-width: none;
        font-size: clamp(32px, 9.2vw, 43px);
        line-height: 1.03;
        letter-spacing: -.04em;
    }

    .question-help {
        margin: 12px 0 19px;
        font-size: 14px;
        line-height: 1.6;
    }

    .question-form textarea {
        min-height: 155px;
        max-height: 44vh;
        font-size: 16px;
        line-height: 1.6;
        resize: vertical;
    }

    .scale {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        margin-top: 22px;
    }

    .scale label span {
        height: 48px;
        border-radius: 8px;
    }

    .scale-legend {
        font-size: 10px;
        line-height: 1.4;
    }

    .journey-footer {
        margin-top: 22px;
        padding-top: 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .journey-footer > span {
        max-width: none;
        font-size: 10.5px;
        line-height: 1.5;
    }

    .journey-footer .button {
        width: 100%;
        min-width: 0;
    }

    /* Resultado gratuito. */
    .result-hero {
        width: 100%;
        max-width: 100%;
        padding: 48px 18px 42px;
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: stretch;
    }

    .result-copy h1 {
        font-size: clamp(40px, 10.8vw, 54px) !important;
        line-height: .98 !important;
    }

    .result-score-orbit {
        width: 230px !important;
        height: 230px !important;
        margin: 0 auto;
    }

    .score-section,
    .reflection-section,
    .paid-diagnostic-section,
    .next-step-card {
        width: 100%;
        max-width: 100%;
    }

    .section-heading-row {
        display: flex !important;
        flex-direction: column;
        gap: 18px !important;
        align-items: stretch !important;
    }

    .section-heading-row h2,
    .reflection-intro h2,
    .paid-diagnostic-copy h2,
    .next-step-card h2 {
        font-size: clamp(35px, 9.5vw, 47px) !important;
        line-height: 1.01 !important;
    }

    .score-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .score-card {
        min-width: 0;
        padding: 19px 15px !important;
    }

    .score-card strong {
        font-size: 38px !important;
    }

    .reflection-section {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .reflection-list summary {
        gap: 12px;
        font-size: 13px;
        line-height: 1.48;
    }

    /* Oferta paga: transformar em um checkout claro e confortável no celular. */
    .paid-diagnostic-section {
        padding: 58px 18px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .paid-diagnostic-copy > p {
        max-width: none;
        font-size: 14px;
        line-height: 1.72;
    }

    .diagnostic-benefits {
        gap: 11px;
        font-size: 13px;
        line-height: 1.55;
    }

    .paid-diagnostic-card {
        width: 100%;
        padding: 25px 20px;
        border-radius: 13px;
    }

    .price-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .price-line strong {
        font-size: 38px;
    }

    .consent-row {
        grid-template-columns: 22px 1fr;
        font-size: 12px !important;
    }

    .next-step-card {
        padding: 48px 18px !important;
        display: flex !important;
        flex-direction: column;
        gap: 24px;
    }

    /* Diagnóstico completo. */
    .diagnostic-report-hero {
        width: 100%;
        max-width: 100%;
        padding: 50px 18px 42px;
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .diagnostic-report-hero h1 {
        margin: 13px 0 17px;
        font-size: clamp(40px, 10.6vw, 53px);
        line-height: .98;
    }

    .diagnostic-report-hero > div > p {
        font-size: 15px;
        line-height: 1.68;
    }

    .diagnostic-status-card {
        width: 210px;
        min-height: 210px;
        margin: 0 auto;
    }

    .diagnostic-status-card strong {
        font-size: 60px;
    }

    .diagnostic-summary,
    .diagnostic-two-column {
        width: auto;
        max-width: none;
        margin-left: 18px;
        margin-right: 18px;
    }

    .diagnostic-two-column {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .diagnostic-report-section {
        padding: 27px 21px;
        border-radius: 12px;
    }

    .diagnostic-report-section h2 {
        font-size: 31px;
        line-height: 1.03;
    }

    .diagnostic-paths-section {
        width: 100%;
        max-width: 100%;
        margin-top: 44px;
        padding: 0 18px;
    }

    .diagnostic-path-grid,
    .experiment-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .diagnostic-path-card {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .diagnostic-experiments-section {
        margin-top: 54px;
        padding: 54px 18px;
    }

    .diagnostic-experiments-section h2 {
        font-size: clamp(36px, 9.5vw, 46px);
    }

    .experiment-grid article {
        padding: 23px 20px;
        border-radius: 11px;
    }

    .diagnostic-closing-section {
        padding: 58px 18px;
    }

    .diagnostic-closing-section blockquote {
        font-size: clamp(34px, 9.3vw, 46px);
        line-height: 1.04;
    }

    /* Rodapé. */
    .site-footer {
        padding-left: 18px !important;
        padding-right: 18px !important;
        gap: 12px !important;
    }
}

@media (max-width: 420px) {
    .tagline {
        display: none;
    }

    .header-inner {
        min-height: 60px;
    }

    .hero-copy h1 {
        font-size: clamp(40px, 12vw, 49px);
    }

    .hero-visual {
        width: min(100%, 350px);
        height: 328px;
    }

    .orbit-circle {
        width: 145px;
        height: 145px;
        font-size: 10px;
    }

    .orbit-left,
    .orbit-right {
        top: 93px;
    }

    .orbit-center {
        width: 94px;
        height: 94px;
    }

    .orbit-center span {
        font-size: 21px;
    }

    .score-grid {
        grid-template-columns: 1fr !important;
    }

    .score-card {
        min-height: 122px !important;
    }
}