@charset "UTF-8";

/* =============================================================================
   Dra. Vitória Rego da Silva — Link in Bio

   As cores e as proporções abaixo foram medidas nas peças da identidade
   (monograma, lockup e cartão de visita), não estimadas:
     creme  #F0E0D0   azul #607C94   dourado: rampa metálica, nunca chapado.
   O dourado existe em um lugar só, o monograma. Ele é o único elemento
   autoral da marca e o resto da página é o silêncio em volta dele.
   ========================================================================== */

/* --- Tipografia da marca -------------------------------------------------- */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('../fonts/poppins-200.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-500.woff2') format('woff2');
}

/* --- Tokens --------------------------------------------------------------- */
:root {
    /* Superfícies: a identidade tem duas, e elas se invertem. Não há terceira. */
    --paper: #F0E0D0;

    /* Tinta azul. Cada tom existe por causa de um contraste calculado sobre o creme. */
    --blue: #607C94;         /* 3,39:1 — só borda e display grande */
    --blue-deep: #4A6076;    /* 5,05:1 — preenchimento do CTA principal */
    --blue-deeper: #3E5468;  /* 6,09:1 */
    --ink-1: #2F4356;        /* 8,61:1 — nome */
    --ink-2: #3E5468;        /* 6,09:1 — rótulos dos CTAs */
    --ink-3: #4A6076;        /* 5,05:1 — descritor, CRO, rodapé */

    --rule: rgba(96, 124, 148, .22);

    --col: 468px;
    --crest-h: 150px;   /* 3 ladrilhos de 50px: a escada cai na malha do padrão */
    --pad-x: clamp(24px, 7vw, 32px);
    --radius: 14px;

    --t-fast: 140ms;
    --t-base: 240ms;
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* Não existe uma única sombra nas peças da marca. O token é um lembrete. */
    --shadow: none;
}

/* --- Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-2);
    font-family: 'Poppins', 'Avenir Next', 'Century Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1,
h2,
p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* O WebKit do iOS só aplica :active se houver handler de toque, e a página não
   tem nenhum. Sem o realce nativo o botão não daria retorno algum ao dedo —
   e o toque aqui abre outro app, então o retorno importa. */
.cta,
.social__link {
    -webkit-tap-highlight-color: rgba(74, 96, 118, .16);
}

svg {
    display: block;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--ink-1);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Estrutura ------------------------------------------------------------ */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.page__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
    max-width: calc(var(--col) + 2 * var(--pad-x));
    margin-inline: auto;
    padding-inline: var(--pad-x);
    padding-top: calc(clamp(52px, 13vw, 84px) + env(safe-area-inset-top));
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
}

.main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

/* --- Marca ---------------------------------------------------------------- */
.brand {
    text-align: center;
}

.brand__mark {
    width: clamp(118px, 31vw, 138px);
    margin-inline: auto;
}

.brand__mark svg {
    width: 100%;
    height: auto;
}

/* Área de proteção do logo: metade da altura do monograma, livre de tudo. */
.brand__name {
    margin-top: clamp(44px, 11vw, 56px);
    font-size: clamp(25px, 6.4vw, 30px);
    font-weight: 200;
    line-height: 1.16;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-1);
}

.brand__name-lead,
.brand__name-tail {
    display: block;
}

.brand__name-tail {
    font-size: .74em;
    letter-spacing: .17em;
    text-indent: .17em;
}

/* O tracking largo do descritor é a assinatura tipográfica do lockup dela:
   nas peças, esta linha tem a mesma largura do nome. O text-indent devolve o
   espaço que o letter-spacing joga depois da última letra — sem ele a linha
   fica à esquerda do centro. */
.brand__role {
    margin-top: 14px;
    font-size: clamp(11px, 3vw, 12.5px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: .63em;
    text-indent: .63em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.brand__cro {
    margin-top: 16px;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .2em;
    text-indent: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* O único fio dourado da página. O ouro da marca é tinta de traço: aqui ele
   aparece como filete de gravação, nunca como preenchimento ou brilho. */
.rule-gold {
    width: 48px;
    height: 1px;
    margin: clamp(36px, 9vw, 46px) auto 0;
    border: 0;
    background: linear-gradient(90deg, #B4843C, #D8B472 46%, #E8D3A0 62%, #B4843C);
}

/* --- Ações ---------------------------------------------------------------- */
.actions {
    margin-top: clamp(32px, 8vw, 40px);
}

.actions__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 18px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.icon--wa {
    width: 13px;
    height: 13px;
    opacity: .85;
}

.cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: clamp(13.5px, 3.65vw, 15px);
    line-height: 1.32;
    letter-spacing: 0;
    text-wrap: balance;
    text-align: center;
    transition:
        background-color var(--t-base) var(--ease),
        border-color var(--t-base) var(--ease),
        color var(--t-base) var(--ease),
        transform var(--t-fast) var(--ease);
}

.cta + .cta {
    margin-top: 13px;
}

/* 1. Paciente modelo — a única superfície preenchida da página.
   O filete dourado por dentro é o gesto de gravação em papel timbrado: é o
   mesmo ouro do monograma, em traço de 1px, e é ele que faz este botão ser
   inconfundivelmente o principal sem precisar de cor gritante nem de seta. */
.cta--primary {
    min-height: 68px;
    background: var(--blue-deep);
    color: var(--paper);
    font-weight: 500;
}

.cta--primary::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(216, 180, 114, .42);
    border-radius: 9px;
    pointer-events: none;
    transition: border-color var(--t-base) var(--ease), inset var(--t-base) var(--ease);
}

/* 2 e 3. A mesma peça desenhada como traço — a identidade inteira é linha
   aberta, então a versão de contorno é vocabulário da marca, não invenção. */
.cta--secondary,
.cta--tertiary {
    min-height: 58px;
    border-color: var(--blue);
    color: var(--ink-2);
}

.cta--secondary {
    background: rgba(96, 124, 148, .05);
}

.cta--tertiary {
    background: transparent;
}

@media (hover: hover) {
    .cta--primary:hover {
        background: var(--blue-deeper);
    }

    .cta--primary:hover::after {
        border-color: rgba(232, 211, 160, .72);
        inset: 5px;
    }

    .cta--secondary:hover,
    .cta--tertiary:hover {
        background: rgba(96, 124, 148, .11);
        border-color: var(--blue-deep);
    }
}

/* Papel afunda, não levita: a pressão é o gesto certo para esta marca. */
.cta:active {
    transform: translateY(1px);
}

/* No toque, a cor de pressão precisa chegar dentro dos ~100 ms do dedo: sem
   zerar a transição de 240 ms ela nunca aparece. */
@media (hover: none) {
    .cta:active,
    .social__link:active {
        transition-duration: 0s;
    }

    .cta--primary:active {
        background: var(--blue-deeper);
    }

    .cta--secondary:active,
    .cta--tertiary:active {
        background: rgba(96, 124, 148, .13);
    }
}

/* --- Instagram (ação secundária) ------------------------------------------ */
.social {
    margin-top: clamp(34px, 9vw, 46px);
    padding-top: clamp(26px, 7vw, 32px);
    border-top: 1px solid var(--rule);
    text-align: center;
}

.social__title {
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    margin-top: 6px;
    padding-inline: 10px;
    font-size: 13.5px;
    letter-spacing: .04em;
    color: var(--ink-2);
    transition: color var(--t-base) var(--ease);
}

.social__icon {
    width: 17px;
    height: 17px;
    color: var(--ink-3);
    transition: color var(--t-base) var(--ease);
}

.social__handle {
    position: relative;
}

/* Sublinhado que cresce do centro: o mesmo gesto de traço da marca. */
.social__handle::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 1px;
    background: currentColor;
    opacity: .5;
    transform: scaleX(0);
    transition: transform var(--t-base) var(--ease);
}

.social__arrow {
    width: 12px;
    height: 12px;
    color: var(--ink-3);
    transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

@media (hover: hover) {
    .social__link:hover {
        color: var(--ink-1);
    }

    .social__link:hover .social__icon,
    .social__link:hover .social__arrow {
        color: var(--ink-1);
    }

    .social__link:hover .social__arrow {
        transform: translate(2px, -2px);
    }

    .social__link:hover .social__handle::after {
        transform: scaleX(1);
    }
}

.social__link:focus-visible .social__handle::after {
    transform: scaleX(1);
}

/* --- Rodapé --------------------------------------------------------------- */
.footer {
    margin-top: clamp(46px, 12vw, 70px);
    margin-bottom: var(--crest-h);
    padding-top: 18px;
    text-align: center;
}

.footer__line {
    font-size: 9.5px;
    line-height: 1.7;
    letter-spacing: .15em;
    text-indent: .15em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Assinatura de quem desenvolveu. Discreta por definição: fica abaixo dos
   dados da profissional, em caixa baixa (registro diferente do resto do
   rodapé) e com opacidade reduzida. .62 e não .5 como manda o styleguide da
   Kyn porque, sobre este creme, .5 dá 3,36:1 e reprova em contraste. */
.kyn-credito {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: 12px;
    padding: 7px 4px;   /* mantém o alvo de toque em 24px mesmo com o texto miúdo */
    font-size: 6.3px;
    line-height: 1;
    letter-spacing: .02em;
    color: #0B1020;
    opacity: .62;
    transition: opacity var(--t-base) var(--ease);
}

.kyn-credito:hover,
.kyn-credito:focus-visible {
    opacity: 1;
}

.kyn-credito__logo {
    flex: none;
    width: 20.4px;
    height: 9.84px;
}

/* --- Faixa do monograma --------------------------------------------------- */
/* O verso do cartão de visita traz o monograma ladrilhado em meia-queda, com a
   borda do bloco terminando em escada — não em corte reto nem em esfumado.
   É o único elemento decorativo da página, e ele é dela. */
.crest {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: var(--crest-h);
    color: var(--blue);
    opacity: .22;
    pointer-events: none;
    /* Degraus de um ladrilho inteiro (58 x 50), medidos da esquerda porque é lá
       que fica a origem do <pattern>. Assim nenhum monograma é cortado ao meio,
       como no verso do cartão de visita. */
    clip-path: polygon(
        0 100%, 100% 100%, 100% 0,
        348px 0, 348px 50px,
        232px 50px, 232px 100px,
        116px 100px, 116px 150px,
        0 150px
    );
}

.crest use {
    fill: currentColor;
}

/* --- Entrada -------------------------------------------------------------- */
/* Sem gatilho por JavaScript: se o script falhar, o conteúdo continua visível. */
@keyframes vr-rise {
    from {
        opacity: 0;
        transform: translateY(9px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* O monograma não sobe junto com o resto: ele é revelado por uma varredura
   diagonal, no mesmo eixo do degradê dourado — a luz entra por onde ela já
   entra na marca. É o único momento de espetáculo da página. */
@keyframes vr-unveil {
    from {
        clip-path: polygon(-100% 0, -6% 0, -52% 100%, -100% 100%);
        opacity: .12;
    }
    to {
        clip-path: polygon(-100% 0, 200% 0, 154% 100%, -100% 100%);
        opacity: 1;
    }
}

@keyframes vr-rule {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes vr-crest {
    from { opacity: 0; }
    to   { opacity: .22; }
}

.brand__mark {
    animation: vr-unveil 1000ms cubic-bezier(.55, .06, .25, 1) both;
}

.brand__name,
.brand__role,
.brand__cro,
.actions__eyebrow,
.cta,
.social,
.footer {
    animation: vr-rise 620ms var(--ease) both;
}

.rule-gold {
    animation: vr-rule 700ms var(--ease) 380ms both;
}

.crest {
    animation: vr-crest 1500ms var(--ease) 620ms both;
}

.brand__name      { animation-delay: 250ms; }
.brand__role      { animation-delay: 310ms; }
.brand__cro       { animation-delay: 360ms; }
.actions__eyebrow { animation-delay: 440ms; }
.cta--primary     { animation-delay: 500ms; }
.cta--secondary   { animation-delay: 560ms; }
.cta--tertiary    { animation-delay: 620ms; }
.social           { animation-delay: 690ms; }
.footer           { animation-delay: 750ms; }

/* --- Telas maiores -------------------------------------------------------- */
/* No desktop a página continua sendo a mesma coluna: a marca não vira banner. */
@media (min-width: 900px) {
    :root {
        --crest-h: 200px;   /* 4 ladrilhos */
    }

    .page__inner {
        padding-top: clamp(84px, 9vh, 120px);
    }

    .crest {
        clip-path: polygon(
            0 100%, 100% 100%, 100% 0,
            464px 0, 464px 50px,
            348px 50px, 348px 100px,
            232px 100px, 232px 150px,
            116px 150px, 116px 200px,
            0 200px
        );
    }
}

/* Todo o ritmo vertical escala com a LARGURA. Em tela baixa isso empurra os
   CTAs para fora da dobra, então aqui ele responde à altura. */
@media (max-width: 899px) and (max-height: 700px) {
    .page__inner {
        padding-top: calc(36px + env(safe-area-inset-top));
    }

    .rule-gold {
        margin-top: 26px;
    }

    .actions {
        margin-top: 24px;
    }

    .actions__eyebrow {
        margin-bottom: 14px;
    }
}

/* Celular deitado: sobra largura e falta altura. O monograma encolhe até o
   limite do legível e a área de proteção acompanha (metade da altura dele). */
@media (max-height: 560px) and (orientation: landscape) {
    :root {
        --crest-h: 100px;
    }

    .page__inner {
        padding-top: calc(24px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .brand__mark {
        width: clamp(84px, 12vh, 104px);
    }

    .brand__name {
        margin-top: 34px;
    }

    .brand__cro {
        margin-top: 12px;
    }

    .rule-gold {
        margin-top: 22px;
    }

    .actions {
        margin-top: 20px;
    }

    .social {
        margin-top: 26px;
        padding-top: 22px;
    }

    .footer {
        margin-top: 30px;
    }

    .crest {
        clip-path: polygon(
            0 100%, 100% 100%, 100% 0,
            232px 0, 232px 50px,
            116px 50px, 116px 100px,
            0 100px
        );
    }
}

@media (min-height: 900px) {
    .page__inner {
        justify-content: center;
    }

    .main {
        flex: 0 0 auto;
    }
}

/* --- Movimento reduzido --------------------------------------------------- */
/* Sem o animation-delay zerado, `both` mantém o conteúdo invisível até 510 ms
   e ele aparece de estalo — exatamente o que quem pediu movimento reduzido
   não quer ver. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-delay: 0ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}