/* As fontes Futura PT e Arsenica Antiqua Alt foram removidas: elas eram
   importadas via @import (bloqueando a renderização e baixando arquivos
   de fonte inteiros) mas nunca eram usadas em nenhuma declaração
   font-family — --display e --support já usam apenas fontes de sistema.
   Remover esse @import é o ganho de performance mais importante desta
   página, principalmente em conexões móveis. */

  :root{
    --orange: #14078a;
    --pink: #0d1980;
    --magenta: #4b57ff;
    --cream: #FFF6EF;
    --ink: #2B0E14;
    --ink-soft: #4A2530;
    --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --support: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  html,body{ background:var(--cream); color:var(--ink); font-family:var(--support); overflow-x:hidden; }

html {
    visibility: visible;
    opacity: 1;
}

body {
    opacity: 0;
    animation: aparecer .15s forwards;
    
}

@keyframes aparecer {
    to {
        opacity: 1;
    }
}
  .eyebrow{
    font-family:var(--support);
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-weight:600;
  }


  /* ---------- HERO / CAPA ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh; /* evita "pulo" causado pela barra de endereço em celulares */
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:34px 34px 46px;
    padding-top:max(34px, env(safe-area-inset-top));
    padding-bottom:max(46px, env(safe-area-inset-bottom));
    overflow:hidden;
    background:
      radial-gradient(120% 90% at 12% 8%, #0804fc 0%, transparent 55%),
      radial-gradient(90% 80% at 88% 18%, var(--pink) 0%, transparent 60%),
      radial-gradient(110% 100% at 30% 100%, var(--magenta) 0%, transparent 55%),
      linear-gradient(155deg, #290ec2 0%, var(--orange) 38%, var(--magenta) 78%, #0104a8 100%);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 22% 70%, rgba(91, 74, 247, 0.55), transparent 35%),
      radial-gradient(circle at 75% 85%, rgba(8, 0, 78, 0.4), transparent 40%);
    mix-blend-mode:screen;
    pointer-events:none;
  }

  .hero-top{
    position:relative; z-index:2;
    display:flex;
    justify-content:space-between;
    color:var(--cream);
    font-family:var(--support);
  }
  .hero-top .eyebrow{ opacity:.95; }

  .hero-mid{
    position:relative; z-index:2;
    flex:1;
    min-height:0; /* permite que o filho encolha corretamente dentro do flex no mobile */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 0;
  }
  .frame{
    border:none;
    border-radius:26px;
    width:100%;
    padding:1px 1px;
    text-align:center;
    background:transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  .image-p{
    display:block;
    width:100%;
    height:auto;
    max-height:85svh; /* rede de segurança apenas para imagens muito verticais no celular */
    object-fit:cover;
    border-radius:26px;
    transition: transform .25s ease;
    cursor:grab;
  }
  .image-p.dragging{
    cursor:grabbing;
    transition:none;
  }

  h1.name{
    font-family:var(--display);
    font-weight:400;
    color:var(--cream);
    font-size:clamp(52px, 10vw, 108px);
    line-height:0.98;
    letter-spacing:.005em;
  }

  .hero-bottom{
    position:relative; z-index:2;
    display:flex;
    justify-content:center;
  }

    .pill{
    color:var(--cream);
    border:1.5px solid var(--cream);
    background-color: transparent;
    border-radius:999px;
    padding:14px 28px; /* alvo de toque com pelo menos 44px de altura */
    display:inline-flex;
    align-items:center;
    min-height:44px;
    transition:
        background-color .50s ease,
        transform .50s ease;
    text-decoration:none;
    }

    .pill:hover{
    background-color: rgba(255, 246, 239, 0.1);
    cursor: pointer;
    transform: scale(1.15);
    }
  /* ---------- SECTION SHELL ---------- */
  section{ padding:110px 8vw; }
  .label-row{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--magenta);
    margin-bottom:22px;
    user-select: none;
  }
  .label-row .rule{
    height:1px; width:46px; background:var(--magenta); display:inline-block;
  }

  h2.section-title{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(32px, 5vw, 58px);
    line-height:1.04;
    color:var(--ink);
    margin-bottom:26px;
    user-select: none;
  }

  /* ---------- SOBRE ---------- */
  .about{
    background:var(--cream);
  }
  .about-grid{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:70px;
    align-items:start;
  }
  .about p.lead{
    font-family:var(--support);
    font-size:19px;
    line-height:1.65;
    color:var(--ink-soft);
    max-width:52ch;
    user-select: none;
  }
  .about-stats{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:30px;
    align-items:center;
    justify-content:center;
  }
  .stat{
    border:1.5px solid var(--orange);
    border-radius:18px;
    padding:60px 35px;
    background:#fff;
    user-select: none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .stat .num{
    font-family:var(--display);
    font-size:36px;
    color:var(--orange);
    line-height:1;
  }
  .stat .cap{
    margin-top:8px;
    font-size:11.5px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-soft);
    font-weight:600;
  }

  /* ---------- SERVIÇOS ---------- */
  .services{
    background: linear-gradient(160deg, var(--orange), var(--magenta));
    color: var(--cream);
  }
  .services .label-row{ color:white; }
  .services .label-row .rule{ background:white; }
  .services h2.section-title{ color:white; }

  .service-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    background-color:transparent;
    border:none;
    border-radius:22px;
    overflow:hidden;
    margin-top:10px;
  }
  .service-card{
    margin-right: 3px;
    background: rgba(255, 255, 255, 0.06);
    /* o blur pesado é reduzido em telas móveis (ver media query abaixo) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius:22px;
    border:1.5px solid rgba(255,246,239,.18);
    padding:34px 26px 30px;
    min-height:250px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition: background .35s ease, transform .35s ease;
    user-select: none;
  }
  @media (hover:hover) and (pointer:fine){
    .service-card:hover{ background: linear-gradient(160deg, var(--orange), var(--magenta)); transform:scale(1.01); }
  }
  .service-card h3{
    font-family:var(--display);
    font-weight:400;
    font-size:23px;
    margin:18px 0 10px;
    line-height:1.15;
  }
  .service-card p{
    font-size:14px;
    line-height:1.55;
    color:#E7C9CE;
  }

  /* ---------- PROJETOS ---------- */
  .projects{ background:var(--cream); }
  .project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin-top:10px;
  }
  .project-card{
    border-radius:22px;
    overflow:hidden;
    background:#fff;
    border:1.5px solid rgba(43,14,20,.08);
  }
  .project-thumb{
    height:auto;
    aspect-ratio: 4 / 3; /* reserva espaço e evita layout shift enquanto a imagem carrega */
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--support);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.85);
    font-weight:700;
    user-select: none;
  }
  .p1{ background:linear-gradient(135deg,var(--orange),#3b38e4); }
  .p2{ background:linear-gradient(135deg,var(--magenta),var(--pink)); }
  .p3{ background:linear-gradient(135deg,#412df1,var(--magenta)); }
  .project-body{ padding:22px 22px 26px; }
  .project-tag{
    font-size:10.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--magenta);
    font-weight:700;
    margin-bottom:8px;
    user-select: none;
  }
  .project-body h3{
    font-family:var(--display);
    font-weight:400;
    font-size:24px;
    margin-bottom:8px;
    user-select: none;
  }
  .project-body p{
    font-size:13.5px;
    line-height:1.55;
    color:var(--ink-soft);
    user-select: none;
  }

  /* ---------- CONTATO ---------- */
  .contact{
    background:
      radial-gradient(120% 140% at 15% 20%, #0d026d 0%, transparent 55%),
      radial-gradient(100% 120% at 85% 90%, var(--magenta) 0%, transparent 55%),
      linear-gradient(160deg, var(--orange), var(--magenta));
    color:var(--cream);
    padding-bottom:70px;
  }
  .contact .label-row{ color:var(--cream); opacity:.85; }
  .contact .label-row .rule{ background:var(--cream); }
  h2.contact-title{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(40px,7vw,82px);
    line-height:1.02;
    max-width:11ch;
    user-select: none;
  }
  .contact-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:40px;
    margin-top:50px;
  }
  .contact-links{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .contact-links a{
    color:var(--cream);
    text-decoration:none;
    font-size:16px;
    border-bottom:1px solid rgba(255,246,239,.5);
    padding-bottom:4px;
    width:fit-content;
  }
  .contact-links .cap{
    font-size:10.5px;
    letter-spacing:.2em;
    text-transform:uppercase;
    opacity:.75;
    margin-bottom:2px;
    font-weight:700;
    user-select: none;
  }

    .socials{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .social-btn {
        display: inline-flex;
        align-items:center;
        min-height:44px;
        color: var(--cream);
        border: 1.5px solid var(--cream);
        background: transparent;
        border-radius: 999px;
        padding: 10px 28px;
        text-decoration: none;
        transition: background .35s ease, transform .35s ease;
        user-select: none;
    }

    .social-btn-whats {
        display: inline-flex;
        align-items:center;
        min-height:44px;
        color: var(--cream);
        border: 1.5px solid var(--cream);
        background: transparent;
        border-radius: 999px;
        padding: 10px 28px;
        text-decoration: none;
        transition: background .35s ease, transform .35s ease;
        user-select: none;
    }

  @media (hover:hover) and (pointer:fine){
    .social-btn-whats:hover {
        background: rgba(11, 235, 60, 0.8);
        transform: scale(1.1) translateY(-3px);
    }

    .social-btn:hover {
        background: rgba(255,246,239,.1);
        transform: scale(1.1) translateY(-3px);
    }
  }

  @media (max-width:860px){
    .about-stats{
        grid-template-columns:repeat(2, minmax(0,1fr));
        justify-items:center;
    }
    .stat{
        width:100%;
        padding:36px 10px;
        text-align:center;
    }
    .about-grid{ grid-template-columns:1fr; gap:40px; }
    .service-grid{ grid-template-columns:repeat(2,1fr); }
    .project-grid{ grid-template-columns:1fr; }
    section{ padding:80px 6vw; }
  }

  /* Ajustes adicionais para telas pequenas de celular */
  @media (max-width:480px){
    section{ padding:64px 6vw; }
    .hero{ padding:22px 20px 34px; }
    h2.section-title{ font-size:clamp(28px,8vw,36px); }
    .about p.lead{ font-size:16.5px; }
    .about-stats{ grid-template-columns:repeat(2,1fr); gap:16px; }
    .stat{ padding:36px 18px; }
    .stat .num{ font-size:28px; }
    .service-grid{ grid-template-columns:1fr; }
    .service-card{ min-height:auto; margin-right:0; }
    .project-body h3{ font-size:20px; }
    h2.contact-title{ font-size:clamp(34px,10vw,46px); }
    .contact-row{ align-items:flex-start; }
    .social-btn, .social-btn-whats{ padding:10px 20px; }
  }

  /* Em telas de toque/menores, o backdrop-filter (blur) é um dos
     efeitos mais caros para a GPU do celular: reduz o custo mantendo
     a estética próxima do original */
  @media (max-width:600px), (pointer:coarse){
    .service-card{
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
  }

  /* Respeita quem prefere menos movimento e evita trabalho de
     animação desnecessário */
  @media (prefers-reduced-motion: reduce){
    *{
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  .project-card{
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    transform-style: preserve-3d;
    will-change: transform;
    transition: box-shadow .35s ease;
}

.project-card:hover{
    box-shadow:
        0 35px 60px rgba(0,0,0,.18);
}

.project-body{
    transform: translateZ(40px);
}

.project-thumb{
    transform: translateZ(70px);
}

.seo-text{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

.location{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

.project-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ---------- BOTÃO FLUTUANTE WHATSAPP ---------- */
.whats-float{
    position:fixed;
    right:22px;
    bottom:22px;
    bottom:max(22px, env(safe-area-inset-bottom));
    z-index:999;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
    text-decoration:none;
    animation: whatsFloatPulse 2.2s ease-in-out infinite;
    will-change: transform;
}
.whats-float svg{
    width:30px;
    height:30px;
    position:relative;
    z-index:2;
}
/* anel que "pulsa" chamando atenção, separado do botão para não
   distorcer o ícone */
.whats-float-ping{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25D366;
    opacity:.65;
    animation: whatsFloatPing 2.2s ease-out infinite;
}
@keyframes whatsFloatPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
}
@keyframes whatsFloatPing{
    0%{ transform:scale(1); opacity:.55; }
    80%{ transform:scale(1.9); opacity:0; }
    100%{ transform:scale(1.9); opacity:0; }
}
@media (hover:hover) and (pointer:fine){
    .whats-float:hover{ box-shadow:0 10px 30px rgba(0,0,0,.35); }
}
@media (max-width:480px){
    .whats-float{ width:54px; height:54px; right:16px; bottom:16px; bottom:max(16px, env(safe-area-inset-bottom)); }
    .whats-float svg{ width:27px; height:27px; }
}
@media (prefers-reduced-motion: reduce){
    .whats-float, .whats-float-ping{ animation:none; }
}