/* ============================================================
   Danielle Caruzo — Mobile responsive overrides
   Loaded AFTER tokens.css + page-specific stylesheets.
   Two main breakpoints: ≤ 920px (tablet) and ≤ 640px (phone).
   ============================================================ */

/* ============================================================
   HEADER — hamburger on mobile, slide-down menu panel
   ============================================================ */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(241,241,241,.25);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  position: relative;
  justify-self: end;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-base);
}
.hamburger:hover { border-color: var(--dc-on-dark); }
.hamburger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--dc-on-dark);
  position: absolute;
  left: 50%; transform: translateX(-50%);
  transition: transform var(--dur-base) var(--ease-out),
              top var(--dur-base) var(--ease-out),
              opacity var(--dur-base);
}
.hamburger span:nth-child(1) { top: 17px; }
.hamburger span:nth-child(2) { top: 23px; }
.site-header.menu-open .hamburger span:nth-child(1) {
  top: 20px; transform: translateX(-50%) rotate(45deg);
}
.site-header.menu-open .hamburger span:nth-child(2) {
  top: 20px; transform: translateX(-50%) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #0A0A0A;
  color: var(--dc-on-dark);
  z-index: 49;
  padding: 88px var(--container-pad) 32px;
  display: flex; flex-direction: column;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  overflow-y: auto;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mm-nav { display: flex; flex-direction: column; }
.mm-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dc-on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(241,241,241,.08);
  transition: color var(--dur-fast);
}
.mm-nav a:hover, .mm-nav a.active { color: var(--dc-blue); }
.mm-nav a svg { opacity: .35; }
.mm-cta {
  margin-top: 32px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 22px;
  background: var(--dc-on-dark);
  color: var(--dc-ink);
  border-radius: 999px;
  font-family: var(--font-text);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-base), color var(--dur-base);
}
.mm-cta:hover { background: var(--dc-blue); color: var(--dc-on-dark); }
.mm-foot {
  margin-top: auto; padding-top: 32px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-text);
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dc-on-dark-muted);
}

/* ============================================================
   HEADER mobile activation
   ============================================================ */
@media (max-width: 760px) {
  .site-header .bar {
    grid-template-columns: 1fr auto;
    padding: 14px var(--container-pad);
  }
  .site-header .brand img { height: 26px; }
  .nav, .header-cta { display: none !important; }
  .hamburger { display: inline-flex; }
}

/* ============================================================
   HOME — hero, atuação, fluxograma, offers, cases, sobre, contact
   ============================================================ */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .hero-visual {
    aspect-ratio: 4 / 3;
    min-height: 180px;
    height: auto;
    width: 100%;
    /* keep visual (asterisk + word) visible below CTAs on mobile */
    display: block !important;
  }
  .atuacao { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .atuacao-visual { min-height: 320px; height: 320px; }
}

@media (max-width: 760px) {
  .hero { padding-top: 32px; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(38px, 9vw, 52px); }
  .hero .lead { font-size: 16px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; width: 100%; }

  .atuacao-visual { min-height: 280px; height: 280px; }
  .atuacao .body p.lead-1 { font-size: 26px; }
  .atuacao .body p { font-size: 16px; }

  /* Fluxograma — vertical stack with vertical connector arrows */
  .fluxo {
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: 16px;
  }
  .fluxo .step + .step { border-left: none !important; border-top: 1px solid var(--dc-line) !important; }
  .fluxo .conn { display: none !important; }
  .fluxo .step {
    padding: 28px 24px;
  }
  .fluxo .step h3 { font-size: 34px; }

  .method-connector { display: none !important; }
  .offers { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .offer { min-height: 0; padding: 26px 22px; }
  .offer h3 { font-size: 20px; }

  /* Cases head */
  .cases-head { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .cases-head h2 { font-size: 36px; }
  .cases-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .case .visual .ph-word { font-size: 32px; }
  .cases-footer { flex-direction: column; align-items: stretch; }
  .cases-footer .btn { justify-content: center; }

  /* Sobre */
  .sobre { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .sobre .portrait { min-height: 360px; height: auto; aspect-ratio: 4/5; }
  .sobre .copy h2 { font-size: 36px; }
  .sobre .pillars { padding: 18px 20px; }
  .sobre .pillars p { font-size: 15px; }
  .logos { margin-top: 56px; }
  .logos-grid { grid-template-columns: repeat(2, 1fr); }
  .logos-grid .logo-cell {
    border-right: 1px solid #2A2A2A !important;
    border-bottom: 1px solid #2A2A2A !important;
    font-size: 18px;
    padding: 22px 12px;
  }
  .logos-grid .logo-cell:nth-child(2n) { border-right: none !important; }

  /* Contact */
  .contact { grid-template-columns: minmax(0, 1fr) !important; padding: 28px 22px; gap: 28px !important; }
  .contact h2 { font-size: 36px; }
  .form .row { flex-direction: column; align-items: stretch; }
  .form .row .btn { justify-content: center; }

  /* Footer */
  .footer { padding-top: 56px; }
  .footer .row1 { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; padding-bottom: 32px; }
  .footer .col.right { text-align: left; }
  .footer .copy { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   CASES geral page
   ============================================================ */
@media (max-width: 920px) {
  .cases-opening .layout { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .cases-opening h1 { font-size: clamp(40px, 9vw, 64px); max-width: none; }
}
@media (max-width: 760px) {
  .cases-opening .hero-content { padding-top: 56px; padding-bottom: 80px; }
  .cases-opening .hero-bg .ph-label { font-size: 9px; padding: 5px 10px; }
  .cases-opening .hero-bg .ast-decor { display: none; }

  .cases-list-section { padding-block: 56px; }
  .cases-list-head--filters-only { padding-bottom: 16px; }
  .cases-list-head .filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 6px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: thin;
  }
  .cases-list-head .chip { flex-shrink: 0; }

  .cases-list { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .case-card h3 { font-size: 28px; }
  .case-card .visual .ph-name { font-size: 11px; }

  .cta-band { padding-block: 72px; margin-top: 64px; }
  .cta-band .layout { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .cta-band h2 { font-size: 38px; max-width: none; }
  .cta-band .right .actions { flex-direction: column; align-items: stretch; }
  .cta-band .right .actions .btn { justify-content: center; }
}

/* ============================================================
   COMO POSSO AJUDAR page
   ============================================================ */
@media (max-width: 920px) {
  .cpa-intro .layout { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .cpa-intro .intro-visual { min-height: 320px; height: 320px; }
  .cpa-offer .offer-layout,
  .cpa-offer .offer-layout.flip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  .cpa-offer .offer-layout.flip .text-side { order: 2; }
  .cpa-offer .offer-layout.flip .image-side { order: 1; }
  /* Always image-above on mobile per request */
  .cpa-offer .offer-layout .text-side { order: 2; }
  .cpa-offer .offer-layout .image-side { order: 1; }
  .cpa-offer .image-side { min-height: 280px; }
  .ph-dark--cpa { min-height: 280px; }
}
@media (max-width: 760px) {
  .cpa-opening .hero-content { padding-top: 56px; padding-bottom: 80px; }
  .cpa-opening h1 { font-size: clamp(48px, 11vw, 80px); }
  .cpa-intro .body p.lead-1 { font-size: 26px; }
  .cpa-identificar { padding-block: 56px; }
  .cpa-identificar .cards { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .cpa-identificar h2 { font-size: 30px; }
  .cpa-offer { padding-block: 56px; }
  .cpa-offer .text-side h2 { font-size: 32px; }
  .cpa-offer .checklist .item { font-size: 14.5px; gap: 14px; }
  .cpa-offer .image-side { min-height: 240px; }
  .ph-dark--cpa { min-height: 240px; }
}

/* ============================================================
   CASE individual template
   ============================================================ */
@media (max-width: 920px) {
  .case-hero .hero-image { aspect-ratio: 4 / 3; min-height: 360px; }
  .case-hero .case-name { font-size: clamp(40px, 11vw, 80px); }
  .case-title-block .layout { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; align-items: start; }
  .case-title-block h2 { font-size: clamp(28px, 6.5vw, 44px); }

  .case-ficha .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }

  .case-resumo p { font-size: clamp(22px, 5.5vw, 32px); }

  .case-text-image,
  .case-text-image.flip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }
  /* Always image-above on mobile per request */
  .case-text-image .text-side,
  .case-text-image.flip .text-side { order: 2; }
  .case-text-image .image-side,
  .case-text-image.flip .image-side { order: 1; }
  .case-text-image .image-side { min-height: 320px; aspect-ratio: 4/3; }

  .case-touchpoints { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .case-touchpoints .tp .image-side { min-height: 320px; }
  .case-touchpoints .tp h4 { font-size: 22px; }

  .case-full-gallery .tile { height: 360px; min-height: 360px; }

  .case-gallery .grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .case-gallery .tile { min-height: 320px; }
  .case-gallery h3 { font-size: 28px; }

  .case-cta-band { padding-block: 64px; margin-top: 48px; }
  .case-cta-band .layout { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .case-cta-band h2 { font-size: 38px; max-width: none; }
  .case-cta-band .right .actions { flex-direction: column; align-items: stretch; }
  .case-cta-band .right .actions .btn { justify-content: center; }

  .case-pager--minimal {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-block: 32px;
  }
  .case-pager--minimal .back {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
    order: 0;
  }
  .case-pager--minimal .left { order: 1; }
  .case-pager--minimal .right { order: 2; justify-self: end; }
  .case-pager--minimal a { font-size: 10px; gap: 10px; }
  .case-pager--minimal .arrow { width: 34px; height: 34px; }

  .case-transformacao p { font-size: clamp(18px, 4.5vw, 22px); }
  .case-text-only p { font-size: clamp(18px, 4.5vw, 22px); }
  .case-papel p { font-size: clamp(16px, 4.5vw, 20px); }
}

@media (max-width: 480px) {
  .case-ficha .grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================
   WhatsApp FAB — safer placement on mobile (above thumb area)
   ============================================================ */
@media (max-width: 760px) {
  .wpp { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  .wpp svg { width: 20px; height: 20px; }
}

/* ============================================================
   Generic typographic guards on phone
   ============================================================ */
@media (max-width: 540px) {
  :root {
    --container-pad: 18px;
  }
}


/* ============================================================
   Verifier patch — prevent intrinsic min-width overflow on phones
   ============================================================ */
@media (max-width: 920px) {
  .case-text-image .image-side,
  .case-text-image.flip .image-side,
  .case-touchpoints .tp .image-side,
  .case-gallery .tile,
  .case-full-gallery .tile,
  .hero-visual,
  .atuacao-visual,
  .cpa-intro .intro-visual,
  .cpa-offer .image-side,
  .sobre .portrait,
  .ph-dark--cpa,
  .case-card .visual {
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Ensure .ph-dark inside fills full width without intrinsic minimum */
  .ph-dark { min-width: 0 !important; max-width: 100% !important; }
  /* Hero placeholder image-area in Cases / Case detail / CPA */
  .case-hero .hero-image { width: 100%; }
}