:root{
  --bg:#080808; --bg2:#111; --text:#f2f2f2; --muted:#a8a8a8; --line:#303030;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Archivo,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.nav{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:34px 6vw;background:linear-gradient(#080808dd,#08080800)}
.logo{font-weight:900;letter-spacing:.08em;line-height:.9}
.nav nav{display:flex;gap:36px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#ddd}
.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:120px 6vw 70px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 75% 20%,#333 0,#111 25%,#080808 60%)}
.eyebrow,.tags,.number,.section-title span{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
h1{font-size:clamp(72px,12vw,170px);line-height:.82;margin:35px 0 24px;font-weight:900;letter-spacing:-.07em}
.lead{max-width:520px;color:#d0d0d0;font-size:18px;line-height:1.55}
.buttons{display:flex;gap:14px;margin-top:35px;flex-wrap:wrap}
.btn{border:1px solid #777;padding:17px 28px;text-transform:uppercase;font-size:12px;letter-spacing:.12em}
.btn--light{background:#f4f4f4;color:#111;border-color:#f4f4f4}
.hero__visual{min-height:520px;display:grid;place-items:center;position:relative;overflow:hidden}
.hero__visual:before{content:"";position:absolute;inset:6%;background:linear-gradient(130deg,#1b1b1b,#050505);box-shadow:0 0 80px #000}
.card{position:relative;width:260px;height:360px;background:#111;border:1px solid #333;display:grid;place-items:center;font-size:42px;font-weight:900;box-shadow:35px 45px 80px #000}
section{padding:90px 6vw;border-bottom:1px solid var(--line)}
.manifesto,.services,.projects,.about{display:grid;grid-template-columns:1fr 2fr;gap:70px}
h2{font-size:clamp(38px,5vw,78px);line-height:.98;margin:0;font-weight:400;letter-spacing:-.05em}
em{font-family:"Instrument Serif",serif;font-weight:400}
p{color:#c9c9c9;line-height:1.7}
.tags{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.service-grid article{border-left:1px solid var(--line);padding-left:22px}
.service-grid h3,.project-grid h3{font-size:22px;line-height:1;margin:22px 0 10px}
.service-grid p,.project-grid p{font-size:13px;color:var(--muted)}
.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.project-grid article{border:1px solid var(--line);padding:10px;background:#0d0d0d}
.project-img{height:310px;background:#222;margin-bottom:18px;background-size:cover;background-position:center}
.p1{background:linear-gradient(140deg,#151515,#393939)}


.p4{background:linear-gradient(140deg,#060606,#303030)}
.signature{font-family:"Instrument Serif",serif;font-size:32px;color:#fff}
.contact{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;align-items:end}
.contact-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.contact-links a{border:1px solid #555;padding:18px;text-align:center;text-transform:uppercase;font-size:12px;letter-spacing:.14em}
footer{display:flex;justify-content:space-between;gap:30px;padding:35px 6vw;color:#aaa;font-size:11px;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:900px){
  .nav nav{display:none}
  .hero,.manifesto,.services,.projects,.about,.contact{grid-template-columns:1fr}
  .hero{padding-top:110px}
  .hero__visual{min-height:360px}
  .service-grid,.project-grid,.contact-links{grid-template-columns:1fr}
  section{padding:70px 6vw}
}

/* Projeto clicável */
.project-card{display:block}
.project-card article{height:100%}
.project-card:hover .project-img{filter:brightness(1.08);transform:scale(1.015)}
.project-img{transition:.35s ease}

/* Fino Doce na capa */


/* Página Fino Doce */
.case-hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  padding:120px 6vw 80px;
  border-bottom:1px solid var(--line);
}
.fino-hero{
  background:radial-gradient(circle at 72% 35%,#4a321e 0,#16100b 32%,#080808 68%);
}
.case-logo-box{
  border:1px solid var(--line);
  background:#111;
  padding:18px;
  box-shadow:35px 45px 90px #000;
}
.case-logo-box img{
  width:100%;
  display:block;
  aspect-ratio:1/1;
  object-fit:cover;
}
.case-intro{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:70px;
}
.case-feature{
  padding:6vw;
}
.case-feature img{
  width:100%;
  max-height:760px;
  object-fit:cover;
  display:block;
  border:1px solid var(--line);
}
.case-gallery{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:70px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.gallery-grid img{
  width:100%;
  height:520px;
  object-fit:cover;
  display:block;
  border:1px solid var(--line);
  background:#111;
}
.gallery-grid img:first-child{
  object-position:center;
}

@media(max-width:900px){
  .case-hero,.case-intro,.case-gallery{grid-template-columns:1fr}
  .case-hero{padding-top:110px;min-height:auto}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid img{height:auto;max-height:none}
}

/* Fino Doce - card original */
.p3{
  background-image:url('assets/fino-doce/fino-logo.jpeg');
  background-size:cover;
  background-position:center;
}

/* Curadoria 33 */


/* Curadoria 33 nova capa */
.p-curadoria33{
  background-image:url('assets/curadoria33/curadoria33-cover.jpeg');
  background-size:cover;
  background-position:center;
}


/* Shi Concept - capa correta */




/* Shi Concept - capa corrigida */
.p2{
  background-image:url('assets/shi-concept/card.jpeg');
  background-size:cover;
  background-position:center;
}

.gallery-grid img{
  background:#111;
}


/* =========================================================
   HERO BRUTALISTA — Creative Nativo
   Atualização da página inicial
========================================================= */

.hero{
  position:relative;
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 35%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.15) 100%);
  z-index:0;
}

.hero > *{
  position:relative;
  z-index:1;
}

.hero-visual,
.hero-brutalista{
  border:0 !important;
  box-shadow:none !important;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.12)),
    url('assets/hero-brutalista.jpeg') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  min-height:560px;
  width:100%;
}

.hero-brutalista{
  filter:grayscale(.35) contrast(1.08) brightness(.82);
}

.hero h1{
  letter-spacing:-0.07em;
}

.hero p,
.lead{
  max-width:620px;
}

@media (min-width:900px){
  .hero{
    min-height:92vh;
  }

  .hero .container,
  .hero-inner{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(420px, .95fr);
    gap:48px;
    align-items:center;
  }

  .hero-visual,
  .hero-brutalista{
    min-height:72vh;
    border-radius:0;
  }
}

@media (max-width:899px){
  .hero::after{
    background:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.72));
  }

  .hero-visual,
  .hero-brutalista{
    min-height:360px;
    margin-top:32px;
  }
}



/* ===== HERO FULLSCREEN DESKTOP ===== */

.hero,
.hero-section{
    min-height:100vh !important;
    width:100% !important;
}

.hero .container,
.hero-inner{
    display:grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    align-items:stretch !important;
    gap:0 !important;
    min-height:100vh !important;
}

.hero-visual,
.hero-brutalista{
    width:100% !important;
    height:100vh !important;
    min-height:100vh !important;
    border-radius:0 !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.hero-content{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    padding:6vw !important;
}

.hero h1{
    font-size:clamp(5rem, 9vw, 10rem) !important;
    line-height:.9 !important;
    max-width:700px !important;
}

.hero p{
    max-width:520px !important;
    font-size:1.05rem !important;
}

@media(max-width:900px){

    .hero .container,
    .hero-inner{
        grid-template-columns:1fr !important;
    }

    .hero-visual,
    .hero-brutalista{
        height:45vh !important;
        min-height:45vh !important;
    }

    .hero h1{
        font-size:clamp(3rem, 14vw, 5rem) !important;
    }
}


/* =========================================================
   LIQUID GLASS BUTTONS — Apple inspired
   Aplicado em: Ver Portfólio, Iniciar Projeto, WhatsApp, E-mail, Instagram
========================================================= */

.btn,
.button,
.hero a,
.hero button,
.cta a,
.contact a,
.contact-links a,
footer a,
.whatsapp,
.email,
.instagram,
a[href*="wa.me"],
a[href*="whatsapp"],
a[href^="mailto:"],
a[href*="instagram"]{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:52px !important;
  padding:0 26px !important;
  border-radius:999px !important;
  color:rgba(255,255,255,.94) !important;
  text-decoration:none !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  font-size:.74rem !important;
  line-height:1 !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.055) 45%, rgba(255,255,255,.14)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 12px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.04) !important;
  backdrop-filter:blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(160%) !important;
  overflow:hidden !important;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease !important;
}

.btn::before,
.button::before,
.hero a::before,
.hero button::before,
.cta a::before,
.contact a::before,
.contact-links a::before,
footer a::before,
.whatsapp::before,
.email::before,
.instagram::before,
a[href*="wa.me"]::before,
a[href*="whatsapp"]::before,
a[href^="mailto:"]::before,
a[href*="instagram"]::before{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:inherit !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.78), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 48%) !important;
  opacity:.72 !important;
  pointer-events:none !important;
}

.btn::after,
.button::after,
.hero a::after,
.hero button::after,
.cta a::after,
.contact a::after,
.contact-links a::after,
footer a::after,
.whatsapp::after,
.email::after,
.instagram::after,
a[href*="wa.me"]::after,
a[href*="whatsapp"]::after,
a[href^="mailto:"]::after,
a[href*="instagram"]::after{
  content:"" !important;
  position:absolute !important;
  width:70px !important;
  height:140% !important;
  top:-20% !important;
  left:-90px !important;
  transform:rotate(18deg) !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent) !important;
  opacity:.45 !important;
  transition:left .7s cubic-bezier(.2,.8,.2,1) !important;
  pointer-events:none !important;
}

.btn:hover,
.button:hover,
.hero a:hover,
.hero button:hover,
.cta a:hover,
.contact a:hover,
.contact-links a:hover,
footer a:hover,
.whatsapp:hover,
.email:hover,
.instagram:hover,
a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover,
a[href^="mailto:"]:hover,
a[href*="instagram"]:hover{
  transform:translateY(-3px) scale(1.015) !important;
  border-color:rgba(255,255,255,.42) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.085) 45%, rgba(255,255,255,.18)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 20px 54px rgba(0,0,0,.48),
    0 0 34px rgba(255,255,255,.10) !important;
}

.btn:hover::after,
.button:hover::after,
.hero a:hover::after,
.hero button:hover::after,
.cta a:hover::after,
.contact a:hover::after,
.contact-links a:hover::after,
footer a:hover::after,
.whatsapp:hover::after,
.email:hover::after,
.instagram:hover::after,
a[href*="wa.me"]:hover::after,
a[href*="whatsapp"]:hover::after,
a[href^="mailto:"]:hover::after,
a[href*="instagram"]:hover::after{
  left:115% !important;
}

/* Botão principal levemente mais claro */
.hero a:first-of-type,
.btn-primary,
.primary{
  color:#050505 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.62) 48%, rgba(255,255,255,.86)) !important;
  border-color:rgba(255,255,255,.68) !important;
}

/* Grupo de botões */
.hero .buttons,
.hero-actions,
.cta,
.contact-links{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  align-items:center !important;
}

/* Contact buttons final */
.contact-links a{
  min-width:150px !important;
}

/* Mobile */
@media(max-width:700px){
  .btn,
  .button,
  .hero a,
  .hero button,
  .cta a,
  .contact a,
  .contact-links a,
  footer a{
    width:100% !important;
    min-height:54px !important;
  }

  .hero .buttons,
  .hero-actions,
  .cta,
  .contact-links{
    width:100% !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }
}



.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:24px;
}

.portfolio-card{
    background:#0b0b0b;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    overflow:hidden;
}

.portfolio-image img{
    width:100%;
    height:360px;
    object-fit:cover;
    display:block;
}

.portfolio-content{
    padding:22px;
}

.portfolio-content h3{
    margin:0 0 10px;
    color:#fff;
    font-size:2rem;
}

.portfolio-content p{
    color:#cfcfcf;
    line-height:1.5;
}


/* Genial+ dentro de Selected Projects */


.project-card{
  color:inherit;
  text-decoration:none;
  display:block;
}

.project-card article{
  height:100%;
}


/* Genial+ */


.genial-hero{
  background:
    radial-gradient(circle at 70% 25%, rgba(225,205,0,.22), transparent 35%),
    linear-gradient(to bottom,#070707,#050505);
}



/* Genial+ card em Selected Projects */
.p-genialmais{
  background-image:url('assets/genialmais/cover.jpeg') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

.project-card{
  display:block;
  color:inherit;
  text-decoration:none;
}

.project-card article{
  height:100%;
  cursor:pointer;
}

.project-card:hover .project-img{
  filter:brightness(1.08);
  transform:scale(1.015);
}


/* Selected Projects restored */

.p2{
  background-image:url('assets/shi-concept/card.jpeg');
  background-size:cover;
  background-position:center;
}

.p-curadoria33{
  background-image:url('assets/curadoria33/curadoria33-cover.jpeg');
  background-size:cover;
  background-position:center;
}

.p3{
  background-image:url('assets/fino-doce/fino-logo.jpeg');
  background-size:cover;
  background-position:center;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}

.project-card{
  display:block;
  color:inherit;
  text-decoration:none;
}

.project-card article{
  overflow:hidden;
}

.project-img{
  width:100%;
  height:360px;
  border-radius:28px;
  background-color:#111;
}


/* =========================================================
   CREATIVE NATIVO — PREMIUM EXPERIENCE UPGRADE
   Hero cinematic • Liquid glass • Hover premium • Footer
========================================================= */

html{
  scroll-behavior:smooth;
}

body{
  background:#050505;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.035), transparent 26%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.025), transparent 28%);
}

/* cinematic grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.075;
  mix-blend-mode:screen;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.45) 0 1px, transparent 1px 3px);
}

/* entrance animation */
@keyframes cnFadeUp{
  from{opacity:0; transform:translateY(28px); filter:blur(8px);}
  to{opacity:1; transform:translateY(0); filter:blur(0);}
}

@keyframes cnSlowZoom{
  from{transform:scale(1);}
  to{transform:scale(1.06);}
}

.hero h1,
.hero p,
.hero a,
.hero button{
  animation:cnFadeUp .9s cubic-bezier(.2,.8,.2,1) both;
}

.hero p{animation-delay:.12s;}
.hero a,
.hero button{animation-delay:.22s;}

.hero-visual,
.hero-brutalista{
  overflow:hidden;
  position:relative;
}

.hero-visual::after,
.hero-brutalista::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.75), transparent 48%),
    radial-gradient(circle at 55% 30%, rgba(255,255,255,.08), transparent 30%);
  pointer-events:none;
}

.hero-visual,
.hero-brutalista{
  animation:cnSlowZoom 18s ease-in-out infinite alternate;
  transform-origin:center;
}

/* section labels */
.section-kicker,
.eyebrow,
.projects .eyebrow{
  color:rgba(255,255,255,.55);
  font-size:.72rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:700;
}

/* About premium */
.about-premium{
  padding:120px 6vw 90px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns:.85fr 1.6fr;
  gap:60px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}

.about-premium h2{
  grid-column:2;
  font-size:clamp(2.4rem, 5vw, 6rem);
  line-height:.95;
  letter-spacing:-.06em;
  margin:0 0 34px;
  max-width:980px;
}

.about-premium .section-kicker{
  grid-column:1;
  grid-row:1 / span 3;
  align-self:start;
}

.about-premium p{
  grid-column:2;
  color:rgba(255,255,255,.68);
  font-size:clamp(1rem, 1.35vw, 1.25rem);
  line-height:1.7;
  max-width:780px;
}

/* Selected Projects refinement */
.projects{
  padding-top:120px;
}

.project-grid{
  align-items:stretch;
}

.project-card article{
  position:relative;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}

.project-card article::after{
  content:"↗";
  position:absolute;
  right:22px;
  bottom:20px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  opacity:.0;
  transform:translateY(8px);
  transition:.35s ease;
}

.project-card:hover article{
  transform:translateY(-8px);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 28px 70px rgba(0,0,0,.45);
}

.project-card:hover article::after{
  opacity:1;
  transform:translateY(0);
}

.project-img{
  overflow:hidden;
  transition:filter .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.project-card:hover .project-img{
  filter:brightness(1.08) contrast(1.05);
  transform:scale(1.018);
}

/* liquid glass buttons */
.btn,
.button,
.hero a,
.hero button,
.contact-links a,
.footer-actions a{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:52px !important;
  padding:0 26px !important;
  border-radius:999px !important;
  color:rgba(255,255,255,.94) !important;
  text-decoration:none !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  font-size:.72rem !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.055) 48%, rgba(255,255,255,.14)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 18px 45px rgba(0,0,0,.32) !important;
  backdrop-filter:blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(160%) !important;
  overflow:hidden !important;
  transition:.32s cubic-bezier(.2,.8,.2,1) !important;
}

.btn::before,
.button::before,
.hero a::before,
.hero button::before,
.contact-links a::before,
.footer-actions a::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:radial-gradient(circle at 18% 8%, rgba(255,255,255,.7), transparent 26%);
  opacity:.6;
  pointer-events:none;
}

.btn:hover,
.button:hover,
.hero a:hover,
.hero button:hover,
.contact-links a:hover,
.footer-actions a:hover{
  transform:translateY(-3px) scale(1.018) !important;
  border-color:rgba(255,255,255,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 24px 62px rgba(0,0,0,.52),
    0 0 34px rgba(255,255,255,.08) !important;
}

/* case pages refinement */
.case-hero,
.case-intro,
.case-gallery,
.case-feature,
.contact{
  animation:cnFadeUp .8s cubic-bezier(.2,.8,.2,1) both;
}

.gallery-grid img,
.case-feature img,
.case-logo-box img{
  transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}

.gallery-grid img:hover,
.case-feature img:hover{
  transform:scale(1.012);
  filter:brightness(1.06);
}

/* Footer premium */
.footer-premium{
  padding:90px 6vw 60px;
  border-top:1px solid rgba(255,255,255,.1);
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  align-items:start;
  background:
    radial-gradient(circle at 75% 10%, rgba(255,255,255,.045), transparent 30%),
    #050505;
}

.footer-premium strong{
  font-size:1.8rem;
  line-height:.92;
  letter-spacing:.03em;
}

.footer-premium p{
  margin-top:28px;
  color:rgba(255,255,255,.62);
  max-width:380px;
  line-height:1.6;
}

.footer-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.footer-premium small{
  grid-column:1 / -1;
  color:rgba(255,255,255,.38);
  padding-top:44px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Mobile polish */
@media(max-width:900px){
  .about-premium,
  .footer-premium{
    grid-template-columns:1fr;
    padding:80px 24px;
  }

  .about-premium h2,
  .about-premium p,
  .about-premium .section-kicker{
    grid-column:1;
  }

  .footer-actions{
    justify-content:flex-start;
  }

  .footer-actions a,
  .contact-links a{
    width:100%;
  }
}



/* =========================================================
   CINEMATIC MOTION UPGRADE
   Scroll reveal • lateral hero entry • floating projects
========================================================= */

:root{
  --motion-ease:cubic-bezier(.16, 1, .3, 1);
}

/* Movimento mais lento no hero */
.hero-visual,
.hero-brutalista{
  animation:cnSlowZoomUltra 42s ease-in-out infinite alternate !important;
  will-change:transform, filter, opacity;
}

@keyframes cnSlowZoomUltra{
  from{
    transform:scale(1.02) translateX(18px);
    filter:grayscale(.35) contrast(1.08) brightness(.78);
  }
  to{
    transform:scale(1.09) translateX(-10px);
    filter:grayscale(.2) contrast(1.12) brightness(.86);
  }
}

/* Fade de baixo para cima */
.reveal-up{
  opacity:0;
  transform:translateY(72px);
  filter:blur(14px);
  transition:
    opacity 1.25s var(--motion-ease) var(--delay, 0ms),
    transform 1.25s var(--motion-ease) var(--delay, 0ms),
    filter 1.25s var(--motion-ease) var(--delay, 0ms);
}

.reveal-up.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Imagem do prédio entrando da lateral */
.reveal-side{
  opacity:0;
  transform:translateX(90px) scale(1.03);
  filter:blur(18px) grayscale(.5) brightness(.72);
  transition:
    opacity 1.6s var(--motion-ease),
    transform 1.8s var(--motion-ease),
    filter 1.8s var(--motion-ease);
}

.reveal-side.is-visible{
  opacity:1;
  transform:translateX(0) scale(1.02);
  filter:blur(0) grayscale(.35) brightness(.82);
}

/* Selected Projects sobrepostos/flutuando */
.projects{
  overflow:visible;
}

.project-grid{
  perspective:1200px;
  align-items:start;
  gap:18px !important;
}

.project-card{
  position:relative;
  z-index:1;
  transform-style:preserve-3d;
  transition:
    transform 1.2s var(--motion-ease),
    opacity 1.2s var(--motion-ease),
    filter 1.2s var(--motion-ease);
}

.project-card:nth-child(1){
  margin-top:0;
  z-index:4;
}

.project-card:nth-child(2){
  margin-top:56px;
  margin-left:-24px;
  z-index:3;
}

.project-card:nth-child(3){
  margin-top:112px;
  margin-left:-48px;
  z-index:2;
}

.project-card article{
  border-radius:30px;
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.13);
}

.project-card:hover{
  z-index:20;
}

.project-card:hover article{
  transform:translateY(-18px) scale(1.025) rotateX(0deg) rotateY(0deg);
  box-shadow:
    0 44px 110px rgba(0,0,0,.62),
    0 0 38px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* Movimento leve contínuo nos cards */
.project-card.is-visible:nth-child(1){
  animation:floatCardOne 9s ease-in-out infinite alternate;
}

.project-card.is-visible:nth-child(2){
  animation:floatCardTwo 10s ease-in-out infinite alternate;
}

.project-card.is-visible:nth-child(3){
  animation:floatCardThree 11s ease-in-out infinite alternate;
}

@keyframes floatCardOne{
  from{transform:translateY(0);}
  to{transform:translateY(-10px);}
}

@keyframes floatCardTwo{
  from{transform:translateY(0) translateX(0);}
  to{transform:translateY(12px) translateX(4px);}
}

@keyframes floatCardThree{
  from{transform:translateY(0) translateX(0);}
  to{transform:translateY(-8px) translateX(-4px);}
}

/* Imagens entram com mais suavidade nas páginas internas */
.case-feature img,
.gallery-grid img,
.case-logo-box img{
  will-change:transform, opacity;
}

/* Menu mais calmo */
.nav,
header{
  transition:background .8s ease, backdrop-filter .8s ease;
}

/* Reduz movimento para quem prefere acessibilidade */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

  .reveal-up,
  .reveal-side{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* Mobile: sem sobreposição exagerada */
@media(max-width:900px){
  .project-card:nth-child(1),
  .project-card:nth-child(2),
  .project-card:nth-child(3){
    margin:0 !important;
  }

  .project-grid{
    gap:24px !important;
  }

  .project-card.is-visible:nth-child(1),
  .project-card.is-visible:nth-child(2),
  .project-card.is-visible:nth-child(3){
    animation:none !important;
  }

  .reveal-side{
    transform:translateY(40px) scale(1.02);
  }
}



/* Restore organized selected projects */
.project-grid{
  perspective:none !important;
  gap:28px !important;
  align-items:stretch !important;
}

.project-card{
  margin:0 !important;
  transform:none !important;
  animation:none !important;
  z-index:auto !important;
}

.project-card:nth-child(1),
.project-card:nth-child(2),
.project-card:nth-child(3){
  margin-top:0 !important;
  margin-left:0 !important;
}

.project-card article{
  background:#0b0b0b !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.35) !important;
}

.project-img{
  opacity:1 !important;
  filter:none !important;
  background-color:#111 !important;
}

.project-card:hover article{
  transform:translateY(-10px) scale(1.01) !important;
}

.project-card:hover .project-img{
  transform:scale(1.02) !important;
  filter:brightness(1.04) !important;
}


/* =========================================================
   PERFORMANCE + MOBILE HERO FIX
   Versão mais leve: sem animações pesadas/loops infinitos
========================================================= */

/* remove loops/blur/reveal pesado */
*,
*::before,
*::after{
  animation-duration:.01ms;
  animation-iteration-count:1;
}

body::before{
  display:none !important;
}

.reveal-up,
.reveal-side,
.reveal-up.is-visible,
.reveal-side.is-visible{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}

/* Hero mais leve */
.hero-visual,
.hero-brutalista{
  animation:none !important;
  transform:none !important;
  filter:none !important;
  will-change:auto !important;
  background-size:cover !important;
  background-position:center !important;
}

.hero-visual::after,
.hero-brutalista::after{
  background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.08)) !important;
}

/* Cards sem flutuação pesada */
.project-card,
.project-card.is-visible:nth-child(1),
.project-card.is-visible:nth-child(2),
.project-card.is-visible:nth-child(3){
  animation:none !important;
  transform:none !important;
  will-change:auto !important;
}

.project-card:hover article{
  transform:translateY(-6px) !important;
}

.project-card:hover .project-img{
  transform:none !important;
  filter:brightness(1.04) !important;
}

/* Mobile: imagem do prédio antes do texto */
@media(max-width:900px){
  .hero .container,
  .hero-inner{
    display:flex !important;
    flex-direction:column !important;
  }

  .hero-visual,
  .hero-brutalista{
    order:-1 !important;
    width:100% !important;
    height:42vh !important;
    min-height:340px !important;
    margin:88px 0 28px !important;
    border-radius:0 !important;
    background-position:center center !important;
  }

  .hero-content{
    order:2 !important;
    padding:0 24px 56px !important;
  }

  .hero h1{
    font-size:clamp(3.2rem, 15vw, 5.4rem) !important;
    line-height:.88 !important;
  }

  .hero p{
    font-size:1rem !important;
    max-width:100% !important;
  }
}

/* Desktop mantém texto + imagem lado a lado, sem movimento pesado */
@media(min-width:901px){
  .hero .container,
  .hero-inner{
    display:grid !important;
    grid-template-columns:1fr 1.05fr !important;
    align-items:center !important;
    gap:48px !important;
  }

  .hero-visual,
  .hero-brutalista{
    height:80vh !important;
    min-height:640px !important;
  }
}


/* =========================================================
   BOTÕES HOME — TRANSPARENTES ESTILO VÍDEO
   Ver Portfólio + Iniciar Projeto
========================================================= */

.hero .buttons a,
.hero-actions a,
.cta a,
.hero button{
  background:rgba(255,255,255,.045) !important;
  color:rgba(255,255,255,.94) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:999px !important;

  backdrop-filter:blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(120%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 28px rgba(0,0,0,.24) !important;

  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-weight:700 !important;

  transition:
    background .28s ease,
    border-color .28s ease,
    transform .28s ease,
    box-shadow .28s ease !important;
}

/* remove brilho excessivo dos estilos anteriores */
.hero .buttons a::before,
.hero .buttons a::after,
.hero-actions a::before,
.hero-actions a::after,
.cta a::before,
.cta a::after{
  display:none !important;
}

.hero .buttons a:hover,
.hero-actions a:hover,
.cta a:hover,
.hero button:hover{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.36) !important;
  transform:translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 34px rgba(0,0,0,.32) !important;
}


/* =========================================================
   CLEAN LAYOUT PATCH — Creative Nativo
   HTML final sem IDs duplicados, serviços preenchidos e mobile corrigido
========================================================= */

.hero__content{
  position:relative;
  z-index:2;
}

.manifesto{
  grid-template-columns:.35fr 1.05fr 1fr !important;
  align-items:start;
}

.manifesto-title{
  position:relative;
  min-height:360px;
}

.native-mark{
  width:min(280px, 64vw);
  aspect-ratio:1;
  margin-top:42px;
  opacity:.92;
  background:
    linear-gradient(45deg, transparent 43%, #ff4fb8 44% 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #ff4fb8 44% 56%, transparent 57%),
    radial-gradient(circle at center, transparent 0 23%, #ff4fb8 24% 27%, transparent 28%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,79,184,.38) 19px 21px, transparent 22px 40px);
  border:1px solid rgba(255,79,184,.32);
  border-radius:50%;
  filter:drop-shadow(0 0 36px rgba(255,79,184,.18));
  transform:rotate(-8deg);
}

.services{
  align-items:start;
}

.service-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:18px !important;
}

.service-grid article{
  min-height:260px;
  border:1px solid rgba(255,255,255,.1) !important;
  border-left:1px solid rgba(255,255,255,.1) !important;
  padding:26px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.service-grid article span{
  display:block;
  margin-bottom:70px;
  color:rgba(255,255,255,.38);
  font-size:.72rem;
  letter-spacing:.18em;
}

.projects{
  display:block !important;
}

.section-head{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:70px;
  align-items:end;
  margin-bottom:42px;
}

.project-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}

.p-genial{
  background-image:url('assets/genialmais/cover.jpeg');
  background-size:cover;
  background-position:center;
}

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

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

.footer-premium{
  grid-template-columns:1fr auto !important;
  align-items:end !important;
}

.footer-premium small{
  grid-column:auto !important;
  border-top:0 !important;
  padding-top:0 !important;
  text-align:right;
}

/* Corrige o mobile que antes mirava em .hero-content, mas o HTML usa .hero__content */
@media(max-width:900px){
  .nav{
    padding:24px;
  }

  .hero{
    display:flex !important;
    flex-direction:column !important;
    min-height:auto !important;
    padding:0 24px 72px !important;
  }

  .hero__visual{
    order:1 !important;
    width:100% !important;
    min-height:340px !important;
    height:42vh !important;
    margin:88px 0 28px !important;
  }

  .hero__content{
    order:2 !important;
    width:100% !important;
    padding:0 !important;
  }

  .hero h1{
    font-size:clamp(3.4rem, 16vw, 5.5rem) !important;
  }

  .manifesto,
  .services,
  .about,
  .contact,
  .section-head{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .manifesto-title{
    min-height:auto;
  }

  .native-mark{
    width:190px;
    margin-top:32px;
  }

  .service-grid,
  .project-grid,
  .contact-links{
    grid-template-columns:1fr !important;
  }

  .service-grid article{
    min-height:auto;
  }

  .service-grid article span{
    margin-bottom:34px;
  }

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

  .footer-premium small{
    text-align:left;
    padding-top:28px !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
}

/* =========================================================
   START PAGE — contato com foto de fundo + vidro
========================================================= */
.buttons--single{margin-top:38px}
.btn--start{min-width:170px;font-size:.78rem !important;letter-spacing:.18em !important}
.contact--minimal .contact-links{display:flex !important;grid-template-columns:none !important}

.start-page{min-height:100vh;background:#050505;color:#fff;overflow-x:hidden}
.nav--glass{background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(0,0,0,0))}
.start-hero{
  min-height:100vh;
  position:relative;
  display:grid;
  place-items:center;
  padding:120px 6vw 70px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.34),rgba(0,0,0,.78)),
    url('assets/hero-brutalista.jpeg');
  background-size:cover;
  background-position:center;
}
.start-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.16),transparent 34%),
    linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.72));
  pointer-events:none;
}
.start-panel{
  position:relative;
  z-index:1;
  width:min(880px,100%);
  padding:clamp(30px,5vw,70px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:34px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.045) 48%,rgba(255,255,255,.12));
  box-shadow:0 35px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  text-align:center;
}
.start-panel h1{
  margin:28px 0 18px;
  font-size:clamp(58px,10vw,142px);
  line-height:.85;
  letter-spacing:-.08em;
  text-transform:lowercase;
}
.start-panel .lead{margin:0 auto;max-width:610px;color:rgba(255,255,255,.80)}
.start-contact-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:42px;
}
.start-contact-links a{
  min-height:118px !important;
  padding:24px 18px !important;
  flex-direction:column !important;
  border-radius:26px !important;
  text-align:center;
}
.start-contact-links span{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.start-contact-links small{margin-top:10px;color:rgba(255,255,255,.64);font-size:.72rem;letter-spacing:.04em;text-transform:none;font-weight:500}
@media(max-width:760px){
  .start-hero{padding:110px 5vw 42px;place-items:end center}
  .start-panel{text-align:left;border-radius:26px}
  .start-panel .lead{margin:0}
  .start-contact-links{grid-template-columns:1fr;margin-top:30px}
  .start-contact-links a{min-height:86px !important;align-items:flex-start !important}
}