:root{
    /* Fundo da página — azul-aço, ponto de partida da paleta */
    --color-primary: #7B95A6;
    --color-primary-rgb: 123,149,166;

    /* Tinta (texto) sobre o fundo azul-aço e sobre as superfícies claras */
    --color-ink: #16232c;
    --color-ink-soft: #33495a;
    --color-ink-faint: #55707f;

    /* Superfícies claras "vidro" — nav, pills, modal, dialog */
    --color-surface: rgba(255,255,255,.62);
    --color-surface-strong: rgba(255,255,255,.85);
    --color-surface-border: rgba(22,35,44,.12);

    /* Cor de destaque — complementar próxima (teal), usada em foco, hover e relógio */
    --color-accent: #1e7a6e;
    --color-accent-soft: rgba(30,122,110,.16);

    /* Paleta dos cards, derivada do fundo (hsl 204°, 19%, 57%) pela teoria das cores:
       terracota = complementar (204+180=24°) · teal = análoga fria (204-30=174°)
       malva = tríade (204+120=324°) · índigo = análoga fria 2 (204+30=234°) */
    --color-terracotta: hsl(24,62%,78%);
    --color-teal: hsl(174,45%,75%);
    --color-mauve: hsl(324,50%,80%);
    --color-indigo: hsl(234,55%,85%);
    --color-card-ink: var(--color-ink);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-h1: clamp(3.2rem, .5692rem + 8.238vw, 13.75rem);
    --font-h2-display: clamp(1.875rem, 1.301rem + 2.449vw, 3.95rem);
    --font-body: clamp(1rem, .8852rem + .4898vw, 1.375rem);
    --font-link: clamp(.875rem, .7985rem + .3265vw, 1.125rem);
    --spacing-l: max(2.652rem, calc(2.652rem + 42 * ((100vw - 375px) / 1225)));
    --spacing-xl: max(4rem, calc(4rem + 64 * ((100vw - 375px) / 1225)));
    --max-width: 1600px;
    --bounce: cubic-bezier(.175,.885,.32,1.275);
    --curve: cubic-bezier(0,.49,0,1.49);
    --shadow-lg: 0 50px 100px -20px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body,h1,h2,h3,p,figure,ul{margin:0}
html,body{
    font-family:var(--font);
    color:var(--color-ink-soft);
    background:var(--color-primary);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
}
body{min-height:100vh;position:relative}
h1,h2,h3{font-weight:700;color:var(--color-ink)}
p{font-size:var(--font-body);line-height:160%;color:var(--color-ink-soft);letter-spacing:-.3px}
a{color:inherit}

/* ---------- Aura (fundo animado) ---------- */
#aura{position:absolute;inset:0 0 auto 0;height:100vh;overflow:hidden;display:none;opacity:.85;z-index:1;pointer-events:none}
#aura canvas{position:absolute;inset:0;width:100%;height:100%}
#aura .mask{
    position:absolute;inset:0;
    background:linear-gradient(to bottom,
        rgba(var(--color-primary-rgb),0) 0%,
        rgba(var(--color-primary-rgb),.25) 35%,
        rgba(var(--color-primary-rgb),.65) 60%,
        rgba(var(--color-primary-rgb),.92) 80%,
        rgb(var(--color-primary-rgb)) 100%);
}
@media (min-width:768px){#aura{display:block}}

/* ---------- Header / nav ---------- */
header{position:fixed;z-index:1000;top:0;left:0;right:0;padding:0 1rem}
nav{display:flex;justify-content:center;align-items:center;max-width:var(--max-width);margin:1.25rem auto 0;position:relative;z-index:1000}
nav ul{
    display:flex;list-style:none;margin:0;padding:.625rem;border-radius:50px;
    background:var(--color-surface);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:0 1px 0 var(--color-surface-border),0 10px 30px rgba(22,35,44,.12);
    transition:all .2s linear;
}
nav ul.blur{background:var(--color-surface-strong);box-shadow:0 1px 0 var(--color-surface-border),0 14px 36px rgba(22,35,44,.18)}
nav li{display:flex;position:relative}
nav a,nav button{
    font:inherit;font-size:var(--font-link);color:var(--color-ink-soft);
    text-decoration:none;display:flex;align-items:center;border-radius:1.5rem;
    background:none;border:0;cursor:pointer;margin:0 3px;padding:.375rem .625rem;
    transition:all .2s ease-in-out;position:relative;z-index:2;
}
nav a:hover,nav button:hover,nav a.active{color:var(--color-accent)}
@media (min-width:768px){nav a,nav button{margin:0 5px;padding:.375rem 1.25rem}}
.slash{
    display:none;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;
    margin-left:.4rem;border-radius:6px;font-size:.75rem;color:var(--color-ink-soft);
    box-shadow:inset 0 0 0 2px var(--color-surface-border);
}
@media (min-width:768px){.slash{display:flex}}
.tab{
    position:absolute;top:calc(1.25rem + .625rem);height:40px;left:0;width:0;border-radius:1.5rem;
    background:var(--color-accent-soft);opacity:0;z-index:1;pointer-events:none;transition:all .2s ease-in-out;
}
.tab.visible{opacity:1}

/* ---------- Main / hero ---------- */
main{position:relative;z-index:50;width:100%}
.content{position:relative;z-index:10}
h1{
    text-align:center;font-size:var(--font-h1);line-height:100%;letter-spacing:-2px;
    padding:8rem 0 3rem;position:relative;
}
@media (min-width:768px){h1{padding:12rem 0 3rem;letter-spacing:-4px}}
h1 .holder{display:flex;justify-content:center;position:relative}
h1 .holder-content{position:relative}
.stars{position:absolute;transform:scale(.5);pointer-events:none}
@media (min-width:768px){.stars{transform:scale(1)}}
.stars.left{left:-8rem;bottom:-.5rem}
.stars.right{right:-5.5rem;top:-2rem}
.stars img{display:block}
.wrapper{padding:0 1.5rem;display:grid;grid-template-columns:1fr min(65ch,100%) 1fr;position:relative}
.wrapper>*{grid-column:2;text-align:center}
.h1-display{text-align:center;font-size:var(--font-h2-display);line-height:1.2;letter-spacing:-2px;padding-bottom:clamp(1rem,6%,3rem)}
@media (min-width:992px){.h1-display{letter-spacing:-4px}}
.principles{margin-top:var(--spacing-xl)}

/* ---------- Serviços (hero) ---------- */
.services{padding:1.5rem 1.5rem 0;text-align:center}
.pill-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;list-style:none;padding:0;margin:0 auto;max-width:900px}
.pill-list li{
    font-size:.9375rem;font-weight:600;padding:.55rem 1.25rem;border-radius:50px;
    background:var(--color-surface);color:var(--color-ink);backdrop-filter:blur(8px);
}
.services .note{margin:1.25rem 0 0;font-size:.9375rem;font-weight:600;color:var(--color-ink)}

/* ---------- Página Sobre ---------- */
.about-content{max-width:760px;margin:0 auto;padding:0 1.5rem 6rem;display:flex;flex-direction:column;gap:3rem}
.about-content h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.5rem);letter-spacing:-1px;color:var(--color-ink);margin-bottom:1rem}
.about-content .eyebrow{font-size:.9375rem;font-weight:700;color:var(--color-accent);margin-bottom:.75rem}
.about-content p{margin:0 0 1rem}
.about-content p:last-child{margin-bottom:0}

/* ---------- Cards ---------- */
.cards{margin-top:var(--spacing-l);padding:0 1.875rem 4rem}
@media (min-width:768px){.cards{padding-bottom:8rem}}
.cards-content{
    display:grid;max-width:var(--max-width);margin:0 auto;width:100%;
    grid-template-columns:repeat(25,1fr);grid-row-gap:4rem;
}
@media (min-width:992px){.cards-content{grid-row-gap:10rem}}
.card{
    --_background:var(--background,var(--color-terracotta));
    --_color:var(--color,var(--color-card-ink));
    --_start:var(--grid-column-start,1);
    --_end:var(--grid-column-end,26);
    width:100%;color:var(--_color);background:var(--_background);
    border-radius:1.5rem;position:relative;grid-column:1 / 26;cursor:pointer;
    transition:all .5s var(--bounce);display:flex;flex-direction:column;
    text-decoration:none;text-align:left;font:inherit;border:0;padding:0;
}
@media (min-width:992px){
    .card{border-radius:4rem;grid-column-start:var(--_start);grid-column-end:var(--_end);min-height:26rem}
}
@media (min-width:544px){.card:hover{transform:translate3d(0,-3px,0);box-shadow:var(--shadow-lg);filter:saturate(1.2)}}
.card:active{transform:none;box-shadow:none}
.card:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}
.card-wrap{
    width:100%;height:100%;position:relative;overflow:hidden;border-radius:1.5rem;padding:1.5rem;
    display:flex;flex-direction:column;
}
@media (min-width:992px){.card-wrap{padding:2.652rem 4rem;border-radius:4rem}}
.info{text-align:right;display:flex;flex-direction:column;z-index:100}
.info span{font-size:.9375rem;text-transform:uppercase;letter-spacing:3px;font-weight:500}
.info h2{font-size:var(--font-h2-display);line-height:1.1;letter-spacing:-2px;color:inherit}
.inner{
    position:relative;z-index:50;transition:all .8s var(--bounce);display:flex;flex:1;
    flex-direction:column;justify-content:flex-end;gap:1.25rem;margin-top:2.652rem;
}
.card:hover .inner{transform:translate3d(0,1rem,0)}
.card .summary{color:inherit;opacity:.85;font-size:clamp(1rem,.9rem + .4vw,1.25rem);max-width:38ch}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0 0 1.5rem}
.chips li{
    font-size:.875rem;font-weight:600;padding:.35rem .9rem;border-radius:50px;
    background:rgba(255,255,255,.45);
}
.more{font-size:.9375rem;font-weight:700;letter-spacing:.5px;padding-bottom:1.5rem}
.card-flourish{position:absolute;inset:0;pointer-events:none;display:none}
@media (min-width:1600px){.card-flourish{display:flex}}
.card-flourish img{position:absolute;opacity:0;transition:all .2s ease-in-out;transform:translate3d(0,10px,0)}
.card:hover .card-flourish img{transform:none;opacity:1}

/* ---------- Modal (detalhes do projeto) ---------- */
dialog{
    border:0;padding:0;border-radius:2rem;max-width:min(720px,92vw);width:100%;max-height:86vh;
    color:var(--color-ink-soft);
    background:var(--color-surface-strong);
    backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
    box-shadow:0 1px 0 var(--color-surface-border),var(--shadow-lg);
}
dialog::backdrop{background:rgba(22,35,44,.4);backdrop-filter:blur(6px)}
.modal-body{padding:2rem;overflow-y:auto;max-height:86vh}
@media (min-width:768px){.modal-body{padding:2.652rem 3rem}}
.modal-body h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.8rem);letter-spacing:-1px;line-height:1.15;margin-bottom:1rem;color:var(--color-ink)}
.modal-body h3{font-size:.9375rem;text-transform:uppercase;letter-spacing:3px;margin:1.5rem 0 .25rem;color:var(--color-accent)}
.modal-body p{font-size:1.0625rem}
.modal-close{
    position:sticky;top:0;float:right;font:inherit;cursor:pointer;color:var(--color-ink);
    background:rgba(22,35,44,.08);border:0;border-radius:50px;padding:.4rem 1rem;
}
.modal-close:hover{background:rgba(22,35,44,.14)}

/* ---------- Footer ---------- */
footer{display:grid;max-width:var(--max-width);margin:0 auto;width:100%;grid-template-columns:repeat(25,1fr);padding:var(--spacing-xl) 0 2rem;position:relative;z-index:40}
footer .fun{grid-column:3 / 24}
footer .list{grid-column:4 / 12;list-style:none;padding:0;margin-top:var(--spacing-l)}
footer .contacts{grid-column:14 / 25}
@media (min-width:768px){
    footer .fun{grid-column:5 / 15}
    footer .list{margin-top:0}
    footer .elsewheres{grid-column:17 / 20}
    footer .contacts{grid-column:20 / 23}
}
footer .legal{display:none;color:var(--color-ink-soft);font-size:var(--font-link);gap:10px}
@media (min-width:768px){footer .legal{display:flex}}
footer .dot{opacity:.5;color:var(--color-ink)}
footer .h6{font-size:var(--font-link);font-weight:600;margin-bottom:.4rem;color:var(--color-ink)}
footer li{font-size:var(--font-link)}
footer li a,footer li button{
    display:block;padding:.625rem 0;color:var(--color-ink-soft);text-decoration:none;
    background:none;border:0;font:inherit;cursor:pointer;transition:color .2s ease-in-out;
}
footer li a:hover,footer li button:hover{color:var(--color-accent)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}