/* ============================================================
   RSO DIGITAL — RESPONSIVE TEXT & LAYOUT HARDENING
   Objetivos:
   - impedir cortes/estouro horizontal em telas estreitas;
   - evitar palavras partidas de forma artificial;
   - equilibrar quebras de títulos;
   - preservar CTAs e itens da navbar em uma única linha quando couber.
   ============================================================ */

html{
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  max-width:100%;
  overflow-x:clip;
}

/* Flex/grid children precisam poder encolher sem empurrar a página. */
.nav__inner > *,
.hero__inner > *,
.services__inner > *,
.service-card__body > *,
.sites-hero__inner > *,
.sites-head > *,
.editorial-split > *,
.case-live > *,
.contact-hero__inner > *,
.contact-layout > *,
.privacy-layout > *,
.thanks-hero__inner > *,
.rso-footer__hero > *,
.rso-footer__meta > *{
  min-width:0;
}

img,video,canvas{
  max-width:100%;
}

/* Nunca separar uma palavra no meio só para fazê-la caber. */
h1,h2,h3,h4,h5,h6,
p,li,summary,label,
.nav__link,.nav__cta,
.service-card__title,.service-card__desc,
.sites-hero__title,.sites-hero__lead,
.sites-head__title,.sites-head__copy,
.sites-card__title,.sites-card__text,
.contact-hero__title,.contact-hero__lead,
.contact-process__heading,.contact-process__copy,
.privacy-title,.privacy-lead,
.thanks-hero__title,.thanks-hero__lead,
.rso-footer__headline,.rso-footer__text{
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

/* Quebras de linha visualmente mais equilibradas nos títulos. */
h1,h2,h3,
.hero__heading h1,
.services__heading,
.why__heading,
.testimonials__title,
.pricing__heading,
.blog__title,
.cta__heading,
.sites-hero__title,
.sites-head__title,
.contact-hero__title,
.contact-process__heading,
.privacy-title,
.thanks-hero__title,
.rso-footer__headline{
  text-wrap:balance;
}

p,li,.body,
.hero__subtitle,
.sites-hero__lead,
.sites-head__copy,
.contact-hero__lead,
.contact-process__copy,
.privacy-lead,
.rso-footer__text{
  text-wrap:pretty;
}

/* Navegação não deve quebrar em duas linhas no desktop. */
.nav__link,
.nav__cta,
.nav__cta > span{
  white-space:nowrap;
}

/* URLs/e-mails são exceção: podem quebrar para não gerar scroll lateral. */
a[href^="mailto:"],
a[href^="tel:"],
.privacy-contact-card__value{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* Evita que conteúdo com largura fixa escape de cards e formulários. */
input,textarea,select,button{
  max-width:100%;
}

@media (max-width:1024px){
  .nav__inner{width:100%;}
  .sites-hero__inner,
  .contact-hero__inner,
  .thanks-hero__inner,
  .privacy-hero__inner{
    width:min(100%,1200px);
  }
}

@media (max-width:768px){
  /* No mobile a navbar vira menu; cada opção continua inteira. */
  .nav__link{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Headings se adaptam antes de encostar nas bordas. */
  .sites-hero__title,
  .contact-hero__title,
  .privacy-title,
  .thanks-hero__title{
    font-size:clamp(38px,12vw,60px) !important;
    line-height:1 !important;
    letter-spacing:-.05em !important;
  }

  .sites-head__title,
  .contact-process__heading,
  .rso-footer__headline{
    font-size:clamp(32px,9.8vw,48px) !important;
    line-height:1.03 !important;
  }

  .sites-hero__lead,
  .sites-head__copy,
  .contact-hero__lead,
  .privacy-lead,
  .thanks-hero__lead{
    font-size:clamp(15px,4.2vw,18px) !important;
    line-height:1.55 !important;
  }

  /* Ações podem reorganizar o bloco, sem cortar o texto do botão. */
  .sites-hero__actions,
  .sites-cta__action,
  .thanks-hero__actions{
    max-width:100%;
    flex-wrap:wrap;
  }

  .sites-primary,
  .sites-secondary,
  .thanks-primary,
  .thanks-secondary,
  .hero__cta,
  .rso-footer__cta{
    max-width:100%;
    min-width:0;
  }

  .sites-primary > span,
  .sites-secondary > span,
  .thanks-primary > span,
  .thanks-secondary > span,
  .rso-footer__cta > span:first-child{
    white-space:nowrap;
  }

  /* Cards e linhas editoriais passam a respeitar a largura útil. */
  .sites-card,
  .process-row,
  .case-live,
  .contact-form-card,
  .contact-direct,
  .privacy-section,
  .privacy-contact-card{
    max-width:100%;
  }
}

@media (max-width:420px){
  .nav__link{font-size:14px !important;}

  .sites-primary,
  .sites-secondary,
  .thanks-primary,
  .thanks-secondary,
  .hero__cta,
  .rso-footer__cta{
    font-size:13px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .rso-footer__cta > span:first-child,
  .sites-primary > span,
  .sites-secondary > span,
  .thanks-primary > span,
  .thanks-secondary > span{
    font-size:inherit;
  }
}

@media (max-width:340px){
  .sites-primary,
  .sites-secondary,
  .thanks-primary,
  .thanks-secondary,
  .hero__cta,
  .rso-footer__cta{
    font-size:12px !important;
    padding-left:11px !important;
    padding-right:11px !important;
    gap:6px !important;
  }
}

/* ============================================================
   RSO DIGITAL — WORD WRAP HARDENING (2026-09-22)
   Mantém cada palavra inteira. Quando falta espaço, a palavra
   seguinte desce por completo em vez de ser cortada no meio.
   ============================================================ */
h1,h2,h3,h4,h5,h6,
h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,
p,li,summary,label,
.body,.hero__subtitle,.sites-hero__lead,.sites-head__copy,
.sites-card__text,.contact-hero__lead,.contact-process__copy,
.privacy-lead,.thanks-hero__lead,.rso-footer__text,
.sites-hero__title,.sites-hero__title *,
.sites-head__title,.sites-head__title *,
.editorial-split__title,.editorial-split__title *,
.contact-hero__title,.contact-hero__title *,
.privacy-title,.privacy-title *,
.thanks-hero__title,.thanks-hero__title *,
.article-hero h1,.article-hero h1 *,
.rso-footer__headline,.rso-footer__headline *{
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

/* O span usado para mudar a cor do trecho do título continua
   participando da quebra normal entre palavras. */
.sites-hero__title span,
.sites-head__title span,
.editorial-split__title span,
.contact-hero__title span,
.privacy-title span,
.thanks-hero__title span,
.rso-footer__headline span,
.article-hero h1 span{
  white-space:normal !important;
}

/* Em tablets/celulares, reduzimos um pouco títulos editoriais antes
   de faltar largura. Isso evita cortes sem deixar o texto pequeno. */
@media (max-width:768px){
  .sites-head__title{
    font-size:clamp(34px,8vw,46px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
  }
  .editorial-split__title{
    font-size:clamp(34px,8vw,46px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
  }
}

@media (max-width:390px){
  .sites-head__title,
  .editorial-split__title{
    font-size:clamp(31px,9vw,36px) !important;
  }
}


@media (max-width:768px){
  .nav__inner{
    /* Navbar mobile mais compacta e bem preenchida */
    width:92% !important;
    max-width:430px;
    min-height:68px;
    margin-left:auto;
    margin-right:auto;
    padding:8px 10px !important;

    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) 44px;
    align-items:center;
    column-gap:8px;
  }

  /* Logo fixa à esquerda */
  .nav__logo{
    grid-column:1;
    justify-self:start;
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    min-width:0;
  }

  .nav__logo img{
    width:56px !important;
    height:56px !important;
    max-width:none !important;
    object-fit:contain;
  }
}

/* ============================================================
   MOBILE NAV — WhatsApp compacto + abertura refinada do menu
   Mantém o desktop e todo o restante do site inalterados.
   ============================================================ */
.nav__wa-mobile{display:none}

@media (max-width:768px){
  /* CTA ocupa o espaço livre entre a marca e o menu sem alargar a navbar. */
  .nav__wa-mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    grid-column:2;
    width:100% !important;
    max-width:none;
    min-width:0;
    height:44px;
    margin:0 !important;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.055));
    color:#fff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 8px 22px rgba(0,0,0,.18);
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:600;
    letter-spacing:-.01em;
    white-space:nowrap;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:
      transform .22s cubic-bezier(.16,1,.3,1),
      border-color .22s ease,
      background .22s ease,
      box-shadow .22s ease;
  }
  .nav__wa-mobile svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
    color:#fff;
  }
  .nav__wa-mobile:active{
    transform:scale(.97);
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.24);
  }

  /* O botão do menu fica ao lado do CTA, sem empurrá-lo para a esquerda. */
  .nav__burger{
    grid-column:3;
    justify-self:end;
    width:44px;
    height:44px;
    margin:0 !important;
    flex:0 0 44px;
    transition:
      transform .3s cubic-bezier(.16,1,.3,1),
      background .3s ease,
      border-color .3s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .nav__burger span{
    transform-origin:center;
    transition:
      transform .34s cubic-bezier(.16,1,.3,1),
      opacity .2s ease,
      width .3s ease;
  }
  .nav__burger[aria-expanded="true"]{
    transform:rotate(90deg);
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.2);
  }
  .nav__burger[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  .nav__burger[aria-expanded="true"] span:nth-child(2){
    opacity:0;
    transform:scaleX(.35);
  }
  .nav__burger[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  /* O painel fica montado para permitir animação, mas invisível quando fechado. */
  .nav__links,
  .nav__links.is-open{
    display:flex !important;
  }
  .nav__links{
    grid-column:1 / -1;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.985);
    transform-origin:top right;
    transition:
      opacity .24s ease,
      transform .34s cubic-bezier(.16,1,.3,1),
      visibility 0s linear .34s;
  }
  .nav__links.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    transition:
      opacity .24s ease,
      transform .34s cubic-bezier(.16,1,.3,1),
      visibility 0s;
  }

  /* Entrada sutil em sequência: visual premium sem pesar no mobile. */
  .nav__links > *{
    opacity:0;
    transform:translateY(-6px);
    transition:
      opacity .24s ease,
      transform .32s cubic-bezier(.16,1,.3,1);
  }
  .nav__links.is-open > *{
    opacity:1;
    transform:translateY(0);
  }
  .nav__links.is-open > *:nth-child(1){transition-delay:.04s}
  .nav__links.is-open > *:nth-child(2){transition-delay:.07s}
  .nav__links.is-open > *:nth-child(3){transition-delay:.10s}
  .nav__links.is-open > *:nth-child(4){transition-delay:.13s}
  .nav__links.is-open > *:nth-child(5){transition-delay:.16s}
}

@media (max-width:420px){
  .nav__inner{
    width:94% !important;
    grid-template-columns:52px minmax(0,1fr) 42px;
    column-gap:7px;
    min-height:66px;
    padding:7px 8px !important;
  }

  .nav__logo{
    width:52px;
    height:52px;
  }

  .nav__logo img{
    width:52px !important;
    height:52px !important;
  }

  .nav__wa-mobile{
    width:100% !important;
    max-width:none;
    height:42px;
    padding:0 11px;
    gap:7px;
    font-size:12.5px;
  }

  .nav__burger{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
}

@media (max-width:350px){
  .nav__inner{
    width:96% !important;
    grid-template-columns:48px minmax(0,1fr) 40px;
    column-gap:6px;
    padding:6px 7px !important;
  }

  .nav__logo{
    width:48px;
    height:48px;
  }

  .nav__logo img{
    width:48px !important;
    height:48px !important;
  }

  .nav__wa-mobile{
    width:100% !important;
    max-width:none;
    height:40px;
    padding:0 8px;
    gap:6px;
    font-size:12px;
  }

  .nav__burger{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
}

/* ============================================================
   MOBILE MENU — PAINEL PREMIUM INTEGRADO À NAVBAR
   ============================================================ */
@media (max-width:768px){

  .nav__inner{
    position:relative;
  }

  .nav__links,
  .nav__links.is-open{
    display:flex !important;
  }

  .nav__links{
    position:absolute !important;

    top:calc(100% + 10px) !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:10px !important;

    flex-direction:column;
    gap:4px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;

    background:
      linear-gradient(
        180deg,
        rgba(20,20,23,.97),
        rgba(10,10,12,.96)
      );

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    box-shadow:
      0 20px 60px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.06);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:
      translateY(-10px)
      scale(.97);

    transform-origin:top center;

    transition:
      opacity .22s ease,
      transform .38s cubic-bezier(.16,1,.3,1),
      visibility 0s linear .38s;

    overflow:hidden;
    z-index:9999;
  }

  .nav__links.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:
      translateY(0)
      scale(1);

    transition:
      opacity .22s ease,
      transform .38s cubic-bezier(.16,1,.3,1),
      visibility 0s;
  }

  /* Cada opção */
  .nav__links > a,
  .nav__links > .nav__item > a,
  .nav__links > .nav__dropdown > a,
  .nav__links .nav__link{
    width:100%;

    min-height:48px;

    display:flex;
    align-items:center;

    padding:0 15px !important;

    border-radius:14px;

    color:rgba(255,255,255,.82) !important;

    font-size:14px;
    font-weight:500;

    text-decoration:none;

    transition:
      background .2s ease,
      color .2s ease,
      transform .2s ease;
  }

  .nav__links > a:hover,
  .nav__links .nav__link:hover{
    color:#fff !important;
    background:rgba(255,255,255,.07);
  }

  .nav__links > a:active,
  .nav__links .nav__link:active{
    transform:scale(.985);
  }

  /* Entrada sequencial */
  .nav__links > *{
    opacity:0;
    transform:translateY(-8px);

    transition:
      opacity .28s ease,
      transform .36s cubic-bezier(.16,1,.3,1);
  }

  .nav__links.is-open > *{
    opacity:1;
    transform:translateY(0);
  }

  .nav__links.is-open > *:nth-child(1){
    transition-delay:.03s;
  }

  .nav__links.is-open > *:nth-child(2){
    transition-delay:.06s;
  }

  .nav__links.is-open > *:nth-child(3){
    transition-delay:.09s;
  }

  .nav__links.is-open > *:nth-child(4){
    transition-delay:.12s;
  }

  .nav__links.is-open > *:nth-child(5){
    transition-delay:.15s;
  }
}