/* ==========================================================================
     FONTES — Mazzard (cortes usados no layout do Figma)
     ========================================================================== */
  @font-face{
    font-family:'Mazzard H';
    src:url('../fonts/MazzardH-BlackItalic.woff2') format('woff2'),
        url('../fonts/MazzardH-BlackItalic.woff') format('woff');
    font-weight:900; font-style:italic; font-display:swap;
  }
  @font-face{
    font-family:'Mazzard M';
    src:url('../fonts/MazzardM-Regular.woff2') format('woff2'),
        url('../fonts/MazzardM-Regular.woff') format('woff');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Mazzard M';
    src:url('../fonts/MazzardM-Italic.woff2') format('woff2'),
        url('../fonts/MazzardM-Italic.woff') format('woff');
    font-weight:400; font-style:italic; font-display:swap;
  }
  @font-face{
    font-family:'Mazzard M';
    src:url('../fonts/MazzardM-Light.woff2') format('woff2'),
        url('../fonts/MazzardM-Light.woff') format('woff');
    font-weight:300; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Mazzard M';
    src:url('../fonts/MazzardM-MediumItalic.woff2') format('woff2'),
        url('../fonts/MazzardM-MediumItalic.woff') format('woff');
    font-weight:500; font-style:italic; font-display:swap;
  }
  @font-face{
    font-family:'Mazzard M';
    src:url('../fonts/MazzardM-Bold.woff2') format('woff2'),
        url('../fonts/MazzardM-Bold.woff') format('woff');
    font-weight:700; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Mazzard M';
    src:url('../fonts/MazzardM-BoldItalic.woff2') format('woff2'),
        url('../fonts/MazzardM-BoldItalic.woff') format('woff');
    font-weight:700; font-style:italic; font-display:swap;
  }
  @font-face{
    font-family:'Mazzard M';
    src:url('../fonts/MazzardM-BlackItalic.woff2') format('woff2'),
        url('../fonts/MazzardM-BlackItalic.woff') format('woff');
    font-weight:900; font-style:italic; font-display:swap;
  }

  /* ==========================================================================
     DESIGN TOKENS — extraídos do arquivo Figma "PAGINA-DIVULGA"
     ========================================================================== */
  :root{
    --color-orange:  #F37435;
    --color-blue:    #2957A4;
    --color-cyan:    #00AFEF;
    --color-white:   #FFFFFF;
    --color-green:   #2E9E5B;
    --color-red:     #D94F4F;

    --font-display: 'Mazzard H', Arial, sans-serif;   /* black italic — títulos hero/destaque */
    --font-heading: 'Mazzard M', Arial, sans-serif;   /* uso geral M */

    --container-max: 1280px;
    --frame-pad: 22px;
    --header-pad: 40px;
    --gutter: 132px;   /* padding lateral do conteúdo, igual ao Figma */

    --radius-sm:  5px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 40px;
    --radius-pill: 999px;
  }

  /* ==========================================================================
     RESET / BASE
     ========================================================================== */
  *, *::before, *::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; }
  body{
    margin:0;
    overflow-x:hidden;
    font-family:var(--font-heading);
    font-weight:400;
    color:var(--color-blue);
    background:var(--color-orange);
    line-height:1.4;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  p{ margin:0; }
  h1,h2,h3{ margin:0; }
  button, a{ font-family:inherit; }
  ul{ list-style:none; margin:0; padding:0; }

  /* ==========================================================================
     FRAME — fundo laranja + cartão branco arredondado (igual ao Figma)
     ========================================================================== */
  .page{ padding: var(--frame-pad); }
  .site-card{
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .container{
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--gutter);
  }

  /* ==========================================================================
     COMPONENTE — pill com ícone circular (CTAs)
     ========================================================================== */
  .btn-pill{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    height:44px;
    min-width:150px;
    padding: 0 6px 0 22px;
    border-radius: var(--radius-sm);
    border:none;
    cursor:pointer;
    color:#fff;
    font-family:var(--font-heading);
    font-weight:700;
    font-size:15px;
    letter-spacing:.01em;
    text-transform:uppercase;
    text-decoration:none;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
    white-space:nowrap;
    box-shadow:0 4px 10px rgba(22,35,61,.2);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  /* Sem ícone (.btn-pill__icon), o padding/justify assimétrico acima foi
     pensado pra texto+ícone, o texto sozinho fica puxado pra esquerda.
     Centraliza automaticamente qualquer botão que não tenha o slot de ícone. */
  .btn-pill:not(:has(.btn-pill__icon)){ justify-content:center; padding:0 22px; }
  .btn-pill--orange{ background:var(--color-orange); }
  .btn-pill--cyan{ background:var(--color-cyan); }
  .btn-pill--whatsapp{ background:#25D366; }
  .btn-pill:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(22,35,61,.3); filter:brightness(1.05); }
  .btn-pill:active{ transform:translateY(0); filter:brightness(.97); }
  .btn-pill__icon{
    flex-shrink:0;
    width:32px; height:32px;
    border-radius:4px;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .btn-pill__icon img{ width:14px; height:14px; transform:rotate(135deg); }
  .btn-pill__icon svg{ width:16px; height:16px; color:var(--color-blue); }

  /* ==========================================================================
     COMPONENTE — tag em duas cores empilhadas (marcadores de seção)
     ========================================================================== */
  .tag-pill{
    position:relative;
    z-index:0;
    display:inline-flex;
    align-items:center;
    height:34px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    color:#fff;
    font-family:var(--font-heading);
    font-weight:700;
    font-size:13.5px;
    text-transform:uppercase;
    letter-spacing:.02em;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
    background:var(--color-orange);
  }
  .tag-pill::after{
    content:'';
    position:absolute;
    top:0; bottom:0;
    left:9px; right:-9px;
    border-radius: var(--radius-sm);
    background:var(--color-cyan);
    z-index:-1;
  }
  .tag-pill--blue{ background:var(--color-blue); color:#fff; }
  .tag-pill--lg{
    height:40px;
    padding:0 22px;
    font-size:15px;
  }

  /* ==========================================================================
     HEADER / NAV
     ========================================================================== */
  .site-header{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 24px;
    padding-block: 20px;
    padding-inline: var(--header-pad);
    max-width:none;
    margin-inline:0;
  }
  .logo__img{ width:130px; height:auto; }

  .nav-tabs{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    gap:2px;
    background: var(--color-blue);
    border-radius:7px;
    padding:2px 20px 2px 2px;
    height:39px;
  }
  .nav-tabs a{
    display:flex;
    align-items:center;
    justify-content:center;
    height:34px;
    padding:0 14px;
    border-radius: var(--radius-sm);
    font-family:var(--font-heading);
    font-weight:700;
    font-size:13.5px;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
    white-space:nowrap;
  }
  .nav-tabs a.is-active{ background:#fff; color:var(--color-blue); padding-inline:16px; }
  /* Cópia de Log in/Sair pro menu mobile (ver auth-shared.js) — só some no
     desktop, onde a versão de verdade continua em .header__auth.
     Especificidade igual/maior que ".nav-tabs a" (que já dá display:flex
     pros links do menu), senão essa regra perde e o link fica visível. */
  .nav-tabs a.nav-tabs__login, .nav-tabs__login{ display:none; }

  .header__actions{
    display:flex;
    align-items:center;
    gap:24px;
    flex-shrink:0;
  }
  .header__auth{
    display:flex;
    align-items:center;
    gap:2px;
    background:#EFF1F5;
    border-radius:var(--radius-pill);
    padding:5px 16px;
  }
  /* Só quando o botão "Sair" está visível (logado) o padding fica assimétrico,
     pra encostar o chip branco na borda direita. Deslogado, só sobra o texto
     "Log in" — sem isso ele ficava puxado pra um lado dentro do pill. */
  .header__auth:has(.login-link--ghost:not([hidden])){
    padding:5px 5px 5px 16px;
  }
  .login-link{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:var(--color-blue);
    text-decoration:none;
    white-space:nowrap;
  }
  .login-link--ghost{
    background:#fff;
    border:0;
    height:26px;
    padding:0 12px;
    margin-left:8px;
    border-radius:var(--radius-pill);
    font-size:10.5px;
    color:var(--color-blue);
    opacity:.55;
    cursor:pointer;
    box-shadow:0 1px 2px rgba(41,87,164,.06);
    transition:opacity .15s ease, box-shadow .15s ease;
  }
  .login-link--ghost:hover{ opacity:1; box-shadow:0 2px 6px rgba(41,87,164,.14); }

  .text-link{
    display:inline-block; border:0; background:none; padding:0; margin:-4px 0 14px;
    color:var(--color-blue); opacity:.65; font-family:var(--font-heading); font-weight:700;
    font-size:.76rem; text-decoration:underline; cursor:pointer;
  }
  .text-link:hover{ opacity:1; }

  /* Diálogo de login — mesmo componente usado no catálogo (PROJETO OUTDOOR/styles.css),
     portado aqui pra também funcionar na home (que não tinha nenhum diálogo de login). */
  .login-dialog{
    border:0; padding:0; color:var(--color-blue); box-shadow:0 30px 100px rgba(0,0,0,.3);
    border-radius:var(--radius-lg); width:min(440px, calc(100% - 28px));
  }
  .login-dialog::backdrop{ background:rgba(16,26,46,.72); backdrop-filter:blur(4px); }
  .login-panel{ padding:40px 32px 32px; }
  .login-panel__title{
    margin:16px 0 0; font-family:var(--font-display); font-style:italic; font-weight:900;
    text-transform:uppercase; font-size:1.6rem; color:var(--color-blue);
  }
  .login-panel__text{ color:var(--color-blue); opacity:.7; font-size:.85rem; margin:8px 0 20px; }
  .login-panel .quote-form{ padding:0; }
  .login-panel__error{
    display:none; color:#D0392F; font-size:.78rem; font-weight:700; margin:0 0 12px;
  }
  .login-panel__error.is-visible{ display:block; }

  .nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:40px; height:40px;
    background:transparent;
    border:2px solid var(--color-blue);
    border-radius: var(--radius-sm);
    cursor:pointer;
    flex-shrink:0;
  }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    content:'';
    display:block;
    width:18px; height:2px;
    background:var(--color-blue);
    border-radius:2px;
    transition:transform .3s ease, opacity .3s ease;
  }
  .nav-toggle__bar{ position:relative; }
  .nav-toggle__bar::before{ position:absolute; top:-6px; }
  .nav-toggle__bar::after{ position:absolute; top:6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{ top:0; transform:rotate(-45deg); }

  /* ==========================================================================
     HERO
     ========================================================================== */
  .hero{
    position:relative;
    display:grid;
    grid-template-columns: 1.15fr 1fr;
    align-items:start;
    gap:24px;
    padding-top:28px;
  }
  /* padding-bottom compensa a linha removida (antiga .hero__subheading) —
     o mascote (.hero__image) é position:absolute e não muda de posição
     sozinho, mas a altura do .hero encolhe se não repormos esse espaço,
     fazendo ele "afundar" mais na faixa cyan das estatísticas. */
  .hero__content{ padding-bottom:40px; }
  .hero__content > .tag-pill{ margin-bottom:18px; }

  .hero__title{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:clamp(2.4rem, 4.6vw, 4.7rem);
    line-height:.9;
    text-transform:uppercase;
    text-wrap:balance;
  }
  .hero__title .is-orange{ color:var(--color-orange); }

  .hero__subheading{
    font-family:var(--font-heading);
    font-style:italic;
    font-weight:500;
    font-size:clamp(1.6rem, 3.2vw, 3.25rem);
    line-height:.9;
    color:var(--color-orange);
    text-transform:uppercase;
    margin-top:6px;
  }

  .hero__text{
    font-family:var(--font-heading);
    font-weight:300;
    font-size:clamp(.95rem, 1.35vw, 1.3125rem);
    line-height:1.35;
    color:var(--color-blue);
    max-width:38ch;
    margin-top:22px;
  }

  .hero__actions{
    display:flex;
    gap:12px;
    margin-top:24px;
  }

  .hero__image{
    grid-column:2 / 3;
    grid-row:1 / 2;
    position:absolute;
    z-index:2;
    top:-130px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    pointer-events:none;
  }
  .hero__image img{ width:44vw; max-width:660px; height:auto; display:block; }

  /* ==========================================================================
     ESTATÍSTICAS
     ========================================================================== */
  .stats{
    position:relative;
    z-index:1;
    background:var(--color-cyan);
    display:grid;
    grid-template-columns: 1.15fr 1fr;
    padding:26px var(--gutter);
    margin-top:40px;
  }
  .stats__row{ display:flex; justify-content:space-between; }
  .stats__item + .stats__item{ border-left:1px solid rgba(255,255,255,.35); padding-left:32px; }
  .stats__number{
    display:block;
    font-family:var(--font-heading);
    font-weight:900;
    font-style:italic;
    font-size:clamp(1.9rem, 3.2vw, 4rem);
    color:#fff;
    line-height:1;
  }
  .stats__label{
    display:block;
    font-family:var(--font-heading);
    font-weight:900;
    font-style:italic;
    font-size:.625rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#fff;
    margin-top:6px;
  }

  /* ==========================================================================
     SOBRE NÓS + COMO TRABALHAMOS
     ========================================================================== */
  .about{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:48px;
    align-items:start;
    padding-block:56px;
  }

  .about__title{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:clamp(1.6rem, 2.6vw, 2.25rem);
    line-height:1.05;
    text-transform:uppercase;
    text-wrap:balance;
    color:var(--color-blue);
    margin-top:16px;
  }
  .about__title .is-orange{ color:var(--color-orange); }

  .about__text{
    font-family:var(--font-heading);
    font-weight:400;
    font-size:1.0625rem;
    line-height:1.6;
    color:var(--color-blue);
    margin-top:20px;
  }
  .about__text p + p{ margin-top:1em; }

  .work-card{
    position:relative;
    background:#EFF1F5 url('../images/card-como-trabalhamos-bg.svg') center/cover no-repeat;
    border-radius:var(--radius-md);
    padding:24px 24px 20px;
    overflow:hidden;
  }
  .work-card__header{
    display:inline-flex;
    margin-bottom:22px;
  }
  .work-steps{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .work-steps li{
    display:flex;
    align-items:flex-start;
    gap:14px;
  }
  .work-steps__icon{
    flex-shrink:0;
    width:38px; height:38px;
    border-radius:5px;
    background:var(--color-orange);
    display:flex; align-items:center; justify-content:center;
  }
  .work-steps__icon img{ width:18px; height:18px; }
  .work-steps__title{
    font-family:var(--font-heading);
    font-weight:700;
    font-style:italic;
    font-size:1.05rem;
    color:var(--color-blue);
    text-transform:capitalize;
  }
  .work-steps__desc{
    font-family:var(--font-heading);
    font-weight:300;
    font-size:.8rem;
    color:var(--color-blue);
    margin-top:2px;
    line-height:1.35;
  }

  /* ==========================================================================
     PROVA SOCIAL — LOGOS DE CLIENTES
     ========================================================================== */
  .proof{ padding-block:64px; }
  .proof__label{
    font-family:var(--font-heading);
    font-weight:900;
    font-size:1.05rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--color-blue);
    opacity:1;
    text-align:center;
    margin-bottom:36px;
  }
  /* Carrossel infinito (mesmo padrão de .reviews__marquee/.reviews__track) —
     resolve dois problemas do grid antigo: com muitos clientes o número nem
     sempre fecha em linhas redondas, e agora cabe sem precisar redesenhar
     toda vez que um cliente novo entra. */
  .proof__marquee{
    margin-top:8px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .proof__track{
    display:flex;
    align-items:center;
    gap:56px;
    width:max-content;
    animation:proof-scroll 32s linear infinite;
  }
  .proof__marquee:hover .proof__track{ animation-play-state:paused; }
  @keyframes proof-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .proof__track{ animation:none; }
    .proof__marquee{ overflow-x:auto; }
  }
  .proof__track img{
    flex:0 0 auto;
    height:56px;
    width:170px;
    object-fit:contain;
    filter:brightness(0) invert(.28);
    opacity:.75;
    transition:opacity .2s ease, filter .2s ease;
  }
  .proof__track img:hover{ filter:brightness(0) invert(.12); opacity:1; }

  /* ==========================================================================
     AVALIAÇÕES NO GOOGLE
     ========================================================================== */
  .reviews{ padding-block:24px 56px; overflow:hidden; }
  .reviews__head{ position:relative; text-align:center; max-width:640px; margin-inline:auto; }
  .reviews__mascot{
    position:absolute;
    top:0;
    bottom:0;
    left:100%;
    margin-left:-9px;
    width:auto;
    height:100%;
    transform:rotate(-5deg);
    filter:drop-shadow(0 10px 22px rgba(22,35,61,.22));
    pointer-events:none;
    z-index:2;
  }
  @media (max-width:1100px){
    .reviews__mascot{ display:none; }
  }
  .reviews__title-main{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:clamp(1.8rem, 3.2vw, 2.6rem);
    line-height:1.05;
    color:var(--color-blue);
    text-transform:uppercase;
    margin-top:16px;
  }
  .reviews__title-main .is-orange{ color:var(--color-orange); }
  .reviews__subtitle{
    font-family:var(--font-heading);
    font-size:.95rem;
    color:var(--color-blue);
    opacity:.75;
    margin-top:10px;
  }
  .reviews__subtitle a{ color:var(--color-blue); opacity:1; font-weight:700; text-decoration:underline; }

  .reviews__marquee{
    margin-top:36px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .reviews__track{
    display:flex;
    gap:20px;
    width:max-content;
    animation:reviews-scroll 46s linear infinite;
  }
  .reviews__marquee:hover .reviews__track{ animation-play-state:paused; }
  @keyframes reviews-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .reviews__track{ animation:none; }
    .reviews__marquee{ overflow-x:auto; }
  }

  .review-card{
    flex:0 0 320px;
    background:#fff;
    border:1.5px solid #EDEFF3;
    border-radius:var(--radius-md);
    padding:22px;
    box-shadow:0 10px 26px rgba(41,87,164,.06);
  }
  .review-card__head{ display:flex; align-items:center; gap:12px; }
  .review-card__avatar{
    flex-shrink:0;
    width:42px; height:42px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-family:var(--font-heading);
    font-weight:700;
    font-size:.85rem;
  }
  .review-card__who{ flex:1 1 auto; min-width:0; }
  .review-card__name{
    font-family:var(--font-heading);
    font-weight:700;
    font-size:.88rem;
    color:var(--color-blue);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .review-card__stars{ color:#F5A623; font-size:.8rem; letter-spacing:1px; margin-top:2px; }
  .review-card__google{
    flex-shrink:0;
    width:22px; height:22px;
    border-radius:50%;
    background:#fff;
    border:1px solid #EDEFF3;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-heading);
    font-weight:900;
    font-size:.7rem;
    color:#4285F4;
  }
  .review-card__text{
    font-family:var(--font-heading);
    font-size:.85rem;
    line-height:1.55;
    color:var(--color-blue);
    opacity:.85;
    margin-top:14px;
  }

  /* ==========================================================================
     PORTFÓLIO
     ========================================================================== */
  .portfolio{ position:relative; padding-block:48px 8px; }
  .portfolio__head{ max-width:640px; }
  .portfolio__title{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:clamp(1.5rem, 2.6vw, 2.2rem);
    line-height:1.1;
    text-transform:uppercase;
    text-wrap:balance;
    color:var(--color-blue);
    margin-top:16px;
  }
  .portfolio__title .is-orange{ color:var(--color-orange); }
  .portfolio__subtitle{
    font-family:var(--font-heading);
    font-weight:400;
    font-size:1rem;
    line-height:1.5;
    color:var(--color-blue);
    margin-top:12px;
  }
  .portfolio__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:28px;
  }
  .portfolio__item{
    position:relative;
    margin:0;
    border-radius:var(--radius-md);
    overflow:hidden;
    aspect-ratio:4/3;
    background:#EFF1F5;
  }
  .portfolio__item img{ width:100%; height:100%; object-fit:cover; }
  .portfolio__item-frame{
    position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .6s ease;
  }
  .portfolio__item-frame.is-active-frame{ opacity:1; }
  .portfolio__item-before{
    position:absolute; inset:0; z-index:1;
    clip-path:inset(0 calc(100% - var(--reveal, 0%)) 0 0);
  }
  .portfolio__before-badge{
    position:absolute; top:12px; left:12px; z-index:2;
    background:rgba(20,30,50,.75); color:#fff; font-family:var(--font-heading); font-weight:700;
    font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px;
    border-radius:var(--radius-pill); opacity:0; transition:opacity .2s ease; pointer-events:none;
  }
  .portfolio__item.is-revealing .portfolio__before-badge{ opacity:1; }
  .portfolio__item figcaption{
    position:absolute;
    z-index:2;
    left:0; right:0; bottom:0;
    padding:8px 12px;
    background:linear-gradient(to top, rgba(22,35,61,.75), transparent);
    color:#fff;
    font-family:var(--font-heading);
    font-weight:700;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.02em;
  }

  /* ==========================================================================
     COMUNICAÇÃO VISUAL SOB DEMANDA
     ========================================================================== */
  .showcase{ position:relative; padding-bottom:56px; }
  .showcase__panel{
    position:relative;
    background: var(--color-blue) url('../images/panel-comunicacao-visual-bg.svg') center/cover no-repeat;
    border-radius: var(--radius-xl);
    padding: 48px var(--gutter) 56px;
  }
  .showcase__head{
    text-align:center;
    max-width:720px;
    margin-inline:auto;
  }
  .showcase__title{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:clamp(1.5rem, 2.8vw, 2.4rem);
    line-height:1.1;
    color:#fff;
    text-transform:uppercase;
    text-wrap:balance;
    margin-top:18px;
  }
  .showcase__subtitle{
    font-family:var(--font-heading);
    font-weight:400;
    font-size:clamp(.95rem, 1.4vw, 1.35rem);
    line-height:1.4;
    color:#fff;
    margin-top:16px;
  }

  .service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:40px;
  }
  .service-card{
    background:var(--color-cyan);
    border-radius:13px;
    padding:20px 18px;
  }
  .service-card__icon{
    width:40px; height:37px;
    border-radius:6px;
    background:var(--color-orange);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
  }
  .service-card__icon img{ width:18px; height:18px; }
  .service-card__title{
    font-family:var(--font-heading);
    font-weight:900;
    font-style:italic;
    font-size:.85rem;
    color:#fff;
    text-transform:uppercase;
    line-height:1.25;
  }
  .service-card__desc{
    font-family:var(--font-heading);
    font-weight:400;
    font-style:italic;
    font-size:.8rem;
    color:#fff;
    margin-top:8px;
    line-height:1.3;
  }

  /* ==========================================================================
     MÍDIA OOH
     ========================================================================== */
  .media{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
    padding-block:56px 72px;
  }
  .media__title{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:clamp(1.4rem, 2.3vw, 2rem);
    line-height:1.15;
    text-transform:uppercase;
    text-wrap:balance;
    color:var(--color-blue);
    margin-top:16px;
  }
  .media__title .is-orange{ color:var(--color-orange); }
  .media__text{
    font-family:var(--font-heading);
    font-weight:400;
    font-size:1rem;
    line-height:1.55;
    color:var(--color-blue);
    margin-top:16px;
    max-width:34ch;
  }
  .media__panel{
    position:relative;
    background:var(--color-blue);
    border-radius:var(--radius-xl);
    aspect-ratio:16/9;
    overflow:hidden;
  }
  .media__video{ width:100%; height:100%; object-fit:contain; display:block; background:var(--color-blue); }
  .media__actions{ margin-top:24px; }

  .media__options{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:28px;
  }
  .media__option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:#EFF1F5;
    border-radius:var(--radius-md);
    padding:16px 20px;
    text-decoration:none;
    transition:background-color .2s ease, transform .2s ease;
  }
  .media__option:hover{ background:#E2E7F0; transform:translateX(4px); }
  .media__option-text{ display:flex; flex-direction:column; gap:3px; }
  .media__option-title{
    font-family:var(--font-heading);
    font-weight:900;
    font-style:italic;
    font-size:1rem;
    color:var(--color-blue);
    text-transform:uppercase;
  }
  .media__option-desc{
    font-family:var(--font-heading);
    font-weight:400;
    font-size:.8rem;
    color:var(--color-blue);
    opacity:.7;
  }
  .media__option-live{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-heading);
    font-weight:700;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#0B6B3F;
  }
  .media__option-live-dot{
    width:6px; height:6px; border-radius:50%; background:#1FB477; flex-shrink:0;
    animation:media-live-pulse 1.8s ease-in-out infinite;
  }
  @keyframes media-live-pulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(31,180,119,.35); }
    50%{ box-shadow:0 0 0 4px rgba(31,180,119,0); }
  }
  @media (prefers-reduced-motion: reduce){
    .media__option-live-dot{ animation:none; }
  }
  .media__option-arrow{
    flex-shrink:0;
    width:32px; height:32px;
    border-radius:50%;
    background:var(--color-orange);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
    transition:transform .2s ease;
  }
  .media__option:hover .media__option-arrow{ transform:translateX(3px); }

  /* ==========================================================================
     ORÇAMENTO
     ========================================================================== */
  .quote{ position:relative; padding-block:8px 56px; }
  .quote__panel{
    background: var(--color-blue) url('../images/panel-comunicacao-visual-bg.svg') center/cover no-repeat;
    border-radius:var(--radius-xl);
    padding:48px var(--gutter) 56px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:stretch;
  }
  .quote__panel--solo{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; }
  .quote__head{ display:flex; flex-direction:column; align-items:flex-start; }
  .quote__title{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:900;
    font-size:clamp(1.6rem, 2.8vw, 2.4rem);
    line-height:1.1;
    color:#fff;
    text-transform:uppercase;
    text-wrap:balance;
    margin-top:18px;
  }
  .quote__title .is-orange{ color:var(--color-orange); }
  .quote__text{
    font-family:var(--font-heading);
    font-weight:400;
    font-size:1rem;
    line-height:1.5;
    color:#fff;
    margin-top:14px;
    max-width:36ch;
  }
  .quote__direct{
    margin-top:auto;
    padding-top:28px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .quote__direct .btn-pill{ justify-content:space-between; }

  .quote-form{ background:#fff; border-radius:var(--radius-md); padding:28px; }
  .quote-form__row{ margin-bottom:16px; }
  .quote-form label{
    display:block;
    font-family:var(--font-heading); font-weight:700; font-size:.75rem;
    color:var(--color-blue); text-transform:uppercase; letter-spacing:.02em;
    margin-bottom:6px;
  }
  .quote-form input, .quote-form select, .quote-form textarea{
    width:100%;
    border:1.5px solid #D8DEE9;
    border-radius:var(--radius-sm);
    padding:10px 12px;
    font-family:var(--font-heading);
    font-size:.95rem;
    color:var(--color-blue);
    background:#fff;
  }
  .password-field{ position:relative; }
  .password-field input{ padding-right:42px; }
  .password-toggle{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; background:none; border:0; padding:0; cursor:pointer;
    color:var(--color-blue); opacity:.5; border-radius:var(--radius-sm);
  }
  .password-toggle:hover{ opacity:1; background:#F1F3F8; }
  .password-toggle__slash{ opacity:0; transition:opacity .1s ease; }
  .password-toggle.is-visible .password-toggle__slash{ opacity:1; }

  .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
    outline:2px solid var(--color-cyan); outline-offset:1px; border-color:var(--color-cyan);
  }
  .quote-form textarea{ resize:vertical; min-height:78px; }
  .quote-form__checkbox{
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-family:var(--font-heading);
    font-size:.78rem;
    font-weight:400;
    text-transform:none;
    letter-spacing:normal;
    color:var(--color-blue);
    cursor:pointer;
  }
  .quote-form__checkbox input{
    width:16px; height:16px;
    margin-top:2px;
    accent-color:var(--color-cyan);
    flex-shrink:0;
  }
  .quote-form__checkbox a{ color:var(--color-blue); font-weight:700; text-decoration:underline; }
  .quote-form__row.has-error input,
  .quote-form__row.has-error select{ border-color:#D0392F; }
  .quote-form__row--checkbox.has-error .quote-form__checkbox{ color:#D0392F; }
  .quote-form__error{ display:none; color:#D0392F; font-size:.75rem; margin-top:4px; font-weight:700; }
  .quote-form__row.has-error .quote-form__error{ display:block; }
  .quote-form__submit{ width:100%; justify-content:center; height:44px; font-size:.85rem; margin-top:6px; }
  .quote-form__status{ margin-top:12px; font-size:.8rem; font-weight:700; color:var(--color-blue); display:none; }
  .quote-form__status.is-visible{ display:block; }

  /* ==========================================================================
     PORTFÓLIO — modal de detalhe, selos, comparador arrastável, admin
     ========================================================================== */
  .portfolio-detail-dialog{
    border:0; padding:0; width:min(720px, calc(100% - 28px)); max-height:90vh; overflow:auto;
    border-radius:var(--radius-lg); box-shadow:0 30px 100px rgba(0,0,0,.3);
  }
  .portfolio-detail-dialog::backdrop{ background:rgba(16,26,46,.72); backdrop-filter:blur(4px); }
  .dialog-close{
    position:absolute; top:14px; right:14px; z-index:5; width:36px; height:36px; border:0; border-radius:50%;
    background:var(--color-blue); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(22,35,61,.35);
    transition:opacity .2s ease, transform .2s ease;
  }
  .dialog-close:hover{ opacity:.85; transform:scale(1.05); }
  .portfolio-detail__body{ padding:36px; position:relative; }
  .portfolio-detail__body h3{
    font-family:var(--font-display); font-style:italic; font-weight:900; text-transform:uppercase;
    color:var(--color-blue); font-size:1.4rem; margin:14px 0 0; text-wrap:balance;
  }
  .portfolio-detail__client{ font-family:var(--font-heading); color:var(--color-blue); opacity:.6; font-size:.82rem; margin-top:4px; }
  .portfolio-detail__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
  .portfolio-tag{
    display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:var(--radius-pill);
    color:#fff; font-family:var(--font-heading); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.02em;
  }
  .portfolio-tag--0{ background:var(--color-orange); }
  .portfolio-tag--1{ background:var(--color-blue); }
  .portfolio-tag--2{ background:var(--color-cyan); }
  .portfolio-detail__testimonial{
    margin-top:20px; padding:18px 20px; background:#F7F9FC; border-left:4px solid var(--color-orange);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-family:var(--font-heading); font-style:italic;
    color:var(--color-blue); font-size:.92rem; line-height:1.6;
  }
  .portfolio-detail__testimonial cite{ display:block; margin-top:10px; font-style:normal; font-weight:700; font-size:.8rem; opacity:.65; }
  .portfolio-detail__single{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-md); margin-top:20px; }

  .portfolio-gallery__thumbs{
    display:flex; gap:10px; margin-top:20px; overflow-x:auto; padding-bottom:4px;
  }
  .portfolio-gallery__thumb{
    flex:0 0 auto; width:88px; height:66px; object-fit:cover; border-radius:var(--radius-sm);
    cursor:pointer; transition:transform .2s ease, opacity .2s ease;
  }
  .portfolio-gallery__thumb:hover{ transform:scale(1.05); opacity:.9; }

  .portfolio-lightbox{
    border:0; padding:28px; max-width:100vw; max-height:100vh; background:transparent; box-shadow:none;
  }
  .portfolio-lightbox[open]{ display:flex; align-items:center; justify-content:center; }
  .portfolio-lightbox::backdrop{ background:rgba(16,26,46,.88); backdrop-filter:blur(4px); }
  .portfolio-lightbox img{
    max-width:min(1100px, 100%); max-height:88vh; border-radius:var(--radius-md);
    box-shadow:0 30px 100px rgba(0,0,0,.4); object-fit:contain;
  }

  .portfolio-compare{
    position:relative; width:100%; aspect-ratio:4/3; margin-top:20px;
    border-radius:var(--radius-md); overflow:hidden; cursor:ew-resize; user-select:none; touch-action:none;
  }
  .portfolio-compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .portfolio-compare__before{ clip-path:inset(0 calc(100% - var(--reveal, 50%)) 0 0); }
  .portfolio-compare__label{
    position:absolute; top:12px; font-family:var(--font-heading); font-weight:700; font-size:.62rem;
    letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(20,30,50,.75);
    padding:4px 10px; border-radius:var(--radius-pill); pointer-events:none;
  }
  .portfolio-compare__label--before{ left:12px; }
  .portfolio-compare__label--after{ right:12px; }
  .portfolio-compare__handle{
    position:absolute; top:0; bottom:0; left:var(--reveal, 50%); width:3px; background:#fff;
    transform:translateX(-50%); box-shadow:0 0 10px rgba(0,0,0,.35); pointer-events:none;
  }
  .portfolio-compare__handle::after{
    content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:38px; height:38px; border-radius:50%; background:#fff; color:var(--color-blue);
    display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 4px 14px rgba(0,0,0,.28);
  }

  .portfolio-edit-fab{
    position:fixed; bottom:88px; right:20px; z-index:60;
    height:44px; padding:0 18px; border-radius:var(--radius-pill); border:0; cursor:pointer;
    background:var(--color-blue); color:#fff; font-family:var(--font-heading); font-weight:700; font-size:.8rem;
    box-shadow:0 10px 24px rgba(22,35,61,.3);
  }

  .portfolio-manage-dialog{
    width:min(1000px, calc(100% - 28px)); max-height:90vh; padding:36px; overflow:auto;
    border:0; border-radius:var(--radius-lg); box-shadow:0 30px 100px rgba(0,0,0,.3);
  }
  .portfolio-manage-dialog::backdrop{ background:rgba(16,26,46,.72); backdrop-filter:blur(4px); }
  .portfolio-new__grid{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; }
  .portfolio-new__grid input{
    height:42px; border:1.5px solid #D8DEE9; border-radius:var(--radius-sm); padding:0 11px; font-family:var(--font-heading);
  }
  .portfolio-manage-list{ display:grid; gap:12px; margin-top:22px; }
  .portfolio-row{ display:grid; gap:10px; padding:18px; border:1.5px solid #EDEFF3; border-radius:var(--radius-md); }
  .portfolio-row.is-inactive{ opacity:.55; }
  .portfolio-row__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .portfolio-row input[type="text"], .portfolio-row textarea{
    width:100%; border:1.5px solid #D8DEE9; border-radius:var(--radius-sm); padding:9px 11px;
    font-family:var(--font-heading); font-size:.85rem; color:var(--color-blue);
  }
  .portfolio-row textarea{ min-height:56px; resize:vertical; }
  .portfolio-row__label{
    display:block; margin-bottom:5px; font-family:var(--font-heading); font-weight:800; font-size:.62rem;
    text-transform:uppercase; letter-spacing:.03em; color:var(--color-blue); opacity:.6;
  }
  .portfolio-row__tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .portfolio-tag-toggle{
    border:1.5px solid #D8DEE9; background:#fff; color:var(--color-blue); border-radius:var(--radius-pill);
    padding:5px 12px; font-family:var(--font-heading); font-weight:700; font-size:.68rem; text-transform:uppercase; cursor:pointer;
  }
  .portfolio-tag-toggle.is-active{ background:var(--color-blue); border-color:var(--color-blue); color:#fff; }
  .portfolio-row__tag-add{ display:flex; gap:8px; margin-top:10px; }
  .portfolio-row__tag-add .new-tag-input{
    flex:1; height:34px; padding:0 12px; border-radius:var(--radius-sm); border:1.5px solid #D8DEE9;
    font-family:var(--font-heading); font-size:.8rem; color:var(--color-blue);
  }
  .portfolio-row__gallery{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
  .portfolio-row__gallery-thumb{ position:relative; width:72px; height:56px; }
  .portfolio-row__gallery-thumb img{
    width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm); background:#EEF3FB;
  }
  .portfolio-row__gallery-remove{
    position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; border:0;
    background:var(--color-blue); color:#fff; font-size:.8rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .portfolio-row__gallery-add{
    display:grid; place-items:center; width:fit-content; min-height:32px; padding:0 14px;
    border-radius:var(--radius-sm); color:#fff; background:var(--color-blue); cursor:pointer;
    text-align:center; font-size:.68rem; font-weight:700; font-family:var(--font-heading); text-transform:uppercase;
  }
  .portfolio-row__gallery-add input{ display:none; }
  .portfolio-row__photos{ display:flex; gap:14px; flex-wrap:wrap; }
  .portfolio-row__photo-slot{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
  .portfolio-row__photo-slot img{ width:96px; height:72px; object-fit:cover; border-radius:var(--radius-sm); background:#EEF3FB; }
  .portfolio-row__photo-slot .file-button{
    display:grid; place-items:center; min-height:32px; padding:0 10px; border-radius:var(--radius-sm); color:#fff;
    background:var(--color-blue); cursor:pointer; text-align:center; font-size:.68rem; font-weight:700;
    font-family:var(--font-heading); text-transform:uppercase;
  }
  .portfolio-row__photo-slot .file-button input{ display:none; }
  .portfolio-row__actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

  /* ==========================================================================
     WHATSAPP FLUTUANTE
     ========================================================================== */
  .whatsapp-float{
    position:fixed;
    bottom:20px; right:20px;
    z-index:60;
    width:56px; height:56px;
    border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
    transition:transform .2s ease;
  }
  .whatsapp-float:hover{ transform:scale(1.08); }
  .whatsapp-float svg{ width:28px; height:28px; }

  /* ==========================================================================
     RODAPÉ
     ========================================================================== */
  .site-footer{
    background:var(--color-blue);
    padding-block:48px 24px;
  }
  .footer__grid{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr 1fr;
    gap:32px;
  }
  .footer__logo{ width:110px; margin-bottom:12px; filter:brightness(0) invert(1); }
  .footer__tagline{ font-family:var(--font-heading); font-size:.85rem; line-height:1.5; color:rgba(255,255,255,.8); max-width:26ch; }
  .footer__heading{
    font-family:var(--font-heading); font-weight:700; font-size:.75rem;
    text-transform:uppercase; letter-spacing:.04em; color:var(--color-cyan); margin-bottom:12px;
  }
  .footer__list{ display:flex; flex-direction:column; gap:8px; }
  .footer__list a, .footer__list span{
    font-family:var(--font-heading); color:#fff; font-size:.85rem; text-decoration:none; opacity:.9;
  }
  .footer__list a:hover{ opacity:1; text-decoration:underline; }
  .footer__bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18);
    font-family:var(--font-heading); font-size:.75rem; color:rgba(255,255,255,.7);
  }
  .footer__bottom a{ color:rgba(255,255,255,.7); text-decoration:none; }
  .footer__bottom a:hover{ text-decoration:underline; }
  .footer__credit{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .footer__credit-logo{
    height:14px;
    width:auto;
    filter:brightness(0) invert(1);
    opacity:.9;
  }

  /* ==========================================================================
     INTERAÇÕES — hover e rolagem
     ========================================================================== */
  .nav-tabs a{ transition:background-color .2s ease, color .2s ease; }
  .nav-tabs a:not(.is-active):hover{ background:rgba(255,255,255,.16); }

  .logo{ display:inline-flex; transition:transform .2s ease; }
  .logo:hover{ transform:translateY(-1px); }

  .service-card{ transition:transform .3s ease, box-shadow .3s ease; }
  .service-card:hover{ transform:translateY(-5px); box-shadow:0 16px 30px rgba(22,35,61,.28); }

  .work-steps li{ transition:transform .2s ease; }
  .work-steps__icon{ transition:transform .25s ease; }
  .work-steps li:hover .work-steps__icon{ transform:scale(1.1) rotate(-4deg); }

  .portfolio__item{ transition:transform .3s ease, box-shadow .3s ease; cursor:pointer; }
  .portfolio__item img{ transition:transform .5s ease; }
  .portfolio__item:hover{ transform:translateY(-5px); box-shadow:0 18px 32px rgba(22,35,61,.3); }
  .portfolio__item:hover img{ transform:scale(1.07); }

  .quote-form__submit{ transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; }

  /* ==========================================================================
     ELEMENTOS DECORATIVOS
     ========================================================================== */
  .page{ position:relative; }
  .deco-badge-wrap{
    position:absolute;
    z-index:40;
    width:300px;
    height:300px;
    pointer-events:none;
    opacity:0;
    transition:opacity .4s ease;
  }
  .deco-badge-wrap.is-positioned{ opacity:1; }
  .deco-badge-wrap[data-side="left"]{ left:var(--frame-pad); transform:translateX(-50%); }
  .deco-badge-wrap[data-side="right"]{ right:var(--frame-pad); transform:translateX(50%); }
  .deco-badge{ display:block; width:100%; height:100%; filter:drop-shadow(0 6px 14px rgba(22,35,61,.25)); }

  @media (max-width:1200px){
    .deco-badge-wrap{ display:none; }
  }

  @media (prefers-reduced-motion: no-preference){
    .reveal{
      opacity:0;
      transform:translateY(28px);
      transition:opacity .6s ease, transform .6s ease;
    }
    .reveal.is-visible{ opacity:1; transform:none; }

    .portfolio__item:nth-child(1){ transition-delay:.02s; }
    .portfolio__item:nth-child(2){ transition-delay:.07s; }
    .portfolio__item:nth-child(3){ transition-delay:.12s; }
    .portfolio__item:nth-child(4){ transition-delay:.17s; }
    .portfolio__item:nth-child(5){ transition-delay:.22s; }
    .portfolio__item:nth-child(6){ transition-delay:.27s; }
    .portfolio__item:nth-child(7){ transition-delay:.32s; }
    .portfolio__item:nth-child(8){ transition-delay:.37s; }
    .portfolio__item:nth-child(9){ transition-delay:.42s; }

    .service-card:nth-child(1){ transition-delay:.02s; }
    .service-card:nth-child(2){ transition-delay:.07s; }
    .service-card:nth-child(3){ transition-delay:.12s; }
    .service-card:nth-child(4){ transition-delay:.17s; }
    .service-card:nth-child(5){ transition-delay:.22s; }
    .service-card:nth-child(6){ transition-delay:.27s; }
  }

  /* ==========================================================================
     RESPONSIVO — TABLET (≤1024px)
     ========================================================================== */
  @media (max-width:1024px){
    :root{ --gutter:40px; --header-pad:24px; }

    .nav-tabs{
      position:absolute;
      top:calc(100% + 8px);
      left:0; right:0;
      transform:none;
      max-width:none;
      height:auto;
      flex-direction:column;
      align-items:stretch;
      background:#fff;
      box-shadow:0 12px 28px rgba(41,87,164,.18);
      overflow:hidden;
      max-height:0;
      opacity:0;
      padding:0;
      border-radius:var(--radius-md);
      transition:max-height .35s ease, opacity .3s ease, padding .35s ease;
      z-index:30;
    }
    .nav-tabs.is-open{ max-height:260px; opacity:1; padding:8px; }
    .nav-tabs a{ color:var(--color-blue); justify-content:flex-start; flex:none; }
    .nav-tabs a.is-active{ background:var(--color-blue); color:#fff; }
    .nav-tabs a.nav-tabs__login:not([hidden]), .nav-tabs__login:not([hidden]){
      display:flex; justify-content:flex-start; height:34px; padding:0 14px;
      border-radius:var(--radius-sm); font-family:var(--font-heading); font-weight:700;
      font-size:13.5px; text-transform:uppercase; text-decoration:none; border:0;
      background:none; cursor:pointer; color:var(--color-blue); margin-top:4px;
    }
    .nav-tabs__login--ghost{ opacity:.6; margin-top:0; }
    .header__auth{ display:none; }
    .nav-toggle{ display:flex; }

    .hero{ grid-template-columns:1fr; }
    .hero__content{ order:1; padding-bottom:24px; position:relative; z-index:2; }
    .hero__image{
      grid-column:auto;
      grid-row:auto;
      position:relative;
      z-index:1;
      order:0;
      top:auto;
      width:auto;
      max-width:none;
      margin-bottom:-160px;
      display:flex;
      justify-content:center;
    }
    .hero__image img{
      max-width:260px; margin-inline:auto; width:100%;
      -webkit-mask-image:linear-gradient(to bottom, #000 44%, transparent 78%);
      mask-image:linear-gradient(to bottom, #000 44%, transparent 78%);
    }
    .hero__text{ max-width:none; }

    .about{ grid-template-columns:1fr; gap:32px; }

    .service-grid{ grid-template-columns:repeat(2,1fr); }

    .portfolio__grid{ grid-template-columns:repeat(2,1fr); }

    .media{ grid-template-columns:1fr; }
    .media__panel{ order:-1; aspect-ratio:16/9; }

    .quote__panel{ grid-template-columns:1fr; padding:36px 24px 40px; }
    .footer__grid{ grid-template-columns:1fr 1fr; }
  }

  /* ==========================================================================
     RESPONSIVO — CELULAR (≤640px)
     ========================================================================== */
  @media (max-width:640px){
    :root{ --gutter:20px; --frame-pad:8px; --header-pad:16px; }
    .site-card{ border-radius:var(--radius-md); }
    .header__actions{ gap:8px 12px; flex-wrap:wrap; justify-content:flex-end; flex-shrink:1; min-width:0; }
    .service-grid{ grid-template-columns:1fr; }
    .portfolio__grid{ grid-template-columns:1fr; gap:12px; }
    .proof__track{ gap:36px; }
    .proof__track img{ height:38px; width:120px; }
    .review-card{ flex-basis:270px; }
    .showcase__panel{ padding:36px 20px 40px; border-radius:var(--radius-lg); }
    .stats{ grid-template-columns:1fr; }
    .stats__row{ flex-direction:column; gap:14px; }
    .stats__item + .stats__item{ border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.35); padding-top:14px; }

    .footer__grid{ grid-template-columns:1fr; gap:24px; }
    .footer__bottom{ flex-direction:column; align-items:flex-start; }
    .whatsapp-float{ width:52px; height:52px; bottom:16px; right:16px; }
  }