/* ═══════════════════════════════════════════════════════════
   RESPONSIVIDADE — PROJETO VIVA
   Regras específicas por componente, sem globais agressivos
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   PREVENÇÃO DE OVERFLOW GLOBAL
   ───────────────────────────────────────────────────────── */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────
   TABLET (max-width: 1024px)
   ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  
  /* Container */
  .container {
    padding-inline: 2rem;
  }
  
  /* Grids */
  .pilares-grid,
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ecossistema-preview__grid,
  .grid--asymmetric {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE (max-width: 768px)
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  
  /* ═══════════════════════════════════════════════════════
     CONTAINER
     ═══════════════════════════════════════════════════════ */
  
  .container {
    padding-inline: 1.25rem;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* ═══════════════════════════════════════════════════════
     NAVEGAÇÃO
     ═══════════════════════════════════════════════════════ */
  
  .nav {
    display: none;
  }
  
  .menu-toggle {
    display: flex;
  }
  
  .nav-mobile__link {
    font-size: 1.75rem;
  }
  
  /* ═══════════════════════════════════════════════════════
     HERO — HOME (index.html)
     ═══════════════════════════════════════════════════════ */
  
  .hero,
  .section--hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 3rem;
  }
  
  .hero__content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Label superior */
  .hero .text-label,
  .hero__content .text-label {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
  }
  
  /* Título principal */
  .hero__title,
  .hero .heading-hero,
  .hero__content h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  
  /* Subtítulo */
  .hero__subtitle,
  .hero__content .text-body,
  .hero .text-body {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 100%;
    margin-bottom: 1.5rem;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  
  /* Remover quebras forçadas */
  .hero__subtitle br,
  .hero .text-body br {
    display: none;
  }
  
  /* Botões do Hero */
  .hero__actions,
  .hero__buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }
  
  .hero__actions .btn,
  .hero__buttons .btn,
  .hero .btn {
    width: 100%;
    max-width: 100%;
    padding: 1rem 1.5rem;
    font-size: 0.8rem;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
  }
  
  /* Orb/Visual do Hero */
  .hero__visual,
  .hero__orb,
  .orb-container {
    order: 10;
    margin-top: 2rem;
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
  }
  
  /* Scroll indicator */
  .hero__scroll,
  .scroll-indicator {
    display: none;
  }
  
  /* ═══════════════════════════════════════════════════════
     HERO — PÁGINAS INTERNAS
     ═══════════════════════════════════════════════════════ */
  
  .section--hero-page,
  .page-hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 2.5rem;
  }
  
  .page-hero__title,
  .section--hero-page h1 {
    font-size: 2rem;
    line-height: 1.15;
    word-break: normal;
    hyphens: none;
  }
  
  .page-hero__subtitle,
  .section--hero-page .text-body {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 100%;
  }
  
  .page-hero__subtitle br,
  .section--hero-page .text-body br {
    display: none;
  }
  
  /* ═══════════════════════════════════════════════════════
     SEÇÕES GERAIS
     ═══════════════════════════════════════════════════════ */
  
  .section {
    padding-block: 3.5rem;
  }
  
  .section__header {
    margin-bottom: 2rem;
    text-align: center;
  }
  
  /* Títulos de seção */
  .section__title,
  .section h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    word-break: normal;
    hyphens: none;
  }
  
  .section h2 br {
    display: none;
  }
  
  /* ═══════════════════════════════════════════════════════
     VISÃO — HOME
     ═══════════════════════════════════════════════════════ */
  
  #visao,
  .visao-section {
    text-align: center;
    padding-block: 3rem;
  }
  
  #visao h2,
  .visao-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  #visao h2 br,
  .visao-section h2 br {
    display: none;
  }
  
  #visao .text-body,
  .visao-section .text-body {
    font-size: 1rem;
    max-width: 100%;
  }
  
  /* ═══════════════════════════════════════════════════════
     PILARES — HOME
     ═══════════════════════════════════════════════════════ */
  
  .pilares-grid,
  #pilares .grid,
  .grid--3 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .pilar,
  .pilar-card,
  .card {
    padding: 1.5rem;
  }
  
  .pilar__number,
  .pilar-card__number {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  .pilar__title,
  .pilar-card h3,
  .card__title {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
  }
  
  .pilar__text,
  .pilar-card p,
  .card__text {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  /* ═══════════════════════════════════════════════════════
     MINI-DIAGRAMA ECOSSISTEMA — HOME
     ═══════════════════════════════════════════════════════ */
  
  .ecossistema-preview,
  #ecossistema-preview,
  .ecosystem-preview {
    padding-block: 3rem;
  }
  
  .ecossistema-preview__grid,
  .ecosystem-preview__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .ecossistema-preview__content,
  .ecosystem-preview__content {
    text-align: center;
    order: 1;
  }
  
  .ecossistema-preview__content h2 br,
  .ecosystem-preview__content h2 br {
    display: none;
  }
  
  /* Mini-diagrama visual */
  .ecossistema-preview__diagram,
  .ecosystem-preview__diagram,
  .mini-ecosystem,
  .eco-mini {
    order: 2;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
  }
  
  .eco-mini__node,
  .mini-ecosystem__node,
  .eco-node-mini {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 220px;
  }
  
  .eco-mini__node-inner,
  .mini-ecosystem__node-inner {
    padding: 0.75rem 1rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  
  .eco-mini__title,
  .mini-ecosystem__title {
    font-size: 0.9rem;
    white-space: normal;
  }
  
  .eco-mini__subtitle,
  .mini-ecosystem__subtitle {
    font-size: 0.7rem;
  }
  
  /* Ocultar SVG de conexões no mobile */
  .eco-mini__connections,
  .mini-ecosystem__connections,
  .eco-connections-mini {
    display: none;
  }
  
  /* ═══════════════════════════════════════════════════════
     TIMELINE / CAMINHO — HOME
     ═══════════════════════════════════════════════════════ */
  
  .timeline,
  .caminho,
  #caminho,
  .journey {
    padding-block: 3rem;
  }
  
  .timeline h2,
  .caminho h2,
  #caminho h1,
  #caminho h2 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .timeline__items,
  .caminho__items,
  .journey__steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .timeline__item,
  .caminho__item,
  .journey__step {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(201, 162, 39, 0.3);
    position: relative;
  }
  
  .timeline__item::before,
  .caminho__item::before,
  .journey__step::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0;
    width: 8px;
    height: 8px;
    background: var(--color-gold, #c9a227);
    border-radius: 50%;
  }
  
  .timeline__label,
  .caminho__label,
  .journey__label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-gold, #c9a227);
  }
  
  .timeline__title,
  .caminho__title,
  .journey__title {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0;
  }
  
  .timeline__text,
  .caminho__text,
  .journey__text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }
  
  /* ═══════════════════════════════════════════════════════
     CTA / PRÓXIMO PASSO — HOME
     ═══════════════════════════════════════════════════════ */
  
  .cta-section,
  .next-step,
  #proximo-passo {
    padding-block: 3rem;
  }
  
  .cta-block,
  .next-step__content {
    padding: 2rem 1.5rem;
    text-align: center;
  }
  
  .cta-block h2,
  .next-step__title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  .cta-block .text-body,
  .next-step__text {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  
  /* ═══════════════════════════════════════════════════════
     PÁGINA ECOSSISTEMA
     ═══════════════════════════════════════════════════════ */
  
  /* Diagrama principal */
  .ecosystem-visual,
  .ecossistema-diagram,
  .eco-diagram {
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    max-width: 100%;
  }
  
  .eco-node,
  .ecossistema-node {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 260px;
  }
  
  .eco-node__inner {
    padding: 1rem;
    text-align: center;
  }
  
  .eco-node__label {
    font-size: 0.6rem;
  }
  
  .eco-node__title {
    font-size: 1rem;
    white-space: normal;
  }
  
  .eco-node__pulse {
    display: none;
  }
  
  .eco-connections {
    display: none;
  }
  
  /* Fluxo */
  .flow-section,
  #fluxo {
    padding-block: 3rem;
  }
  
  .flow-steps {
    max-width: 100%;
  }
  
  .flow-step {
    gap: 1rem;
    padding-bottom: 1.5rem;
  }
  
  .flow-step__number {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
    flex-shrink: 0;
  }
  
  .flow-step__title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }
  
  .flow-step__text {
    font-size: 0.875rem;
  }
  
  /* Integração */
  .integration-section,
  #integracao {
    text-align: center;
  }
  
  .integration-flow,
  .conhecimento-flow {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 1rem;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
  }
  
  /* ═══════════════════════════════════════════════════════
     PÁGINA PROJETO VIVA
     ═══════════════════════════════════════════════════════ */
  
  /* Manifesto */
  .manifesto {
    padding: 2rem 0;
  }
  
  .manifesto__quote {
    padding: 1.5rem 0.5rem;
  }
  
  .manifesto__quote::before,
  .manifesto__quote::after {
    font-size: 2rem;
    position: static;
    display: block;
    text-align: center;
    opacity: 0.5;
  }
  
  .manifesto__quote p,
  .manifesto__text {
    font-size: 1.1rem;
    line-height: 1.5;
  }
  
  /* Origem */
  .origem-section,
  #origem {
    padding-block: 3rem;
  }
  
  .origem-section .grid--asymmetric,
  #origem .grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .origem-section h2 br,
  #origem h2 br {
    display: none;
  }
  
  /* Fundamentos/Princípios */
  .fundamentos-grid,
  .principios-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .fundamento,
  .principio {
    padding: 1.25rem;
  }
  
  .fundamento__number,
  .principio__number {
    font-size: 1.25rem;
  }
  
  .fundamento__title,
  .principio__title {
    font-size: 1rem;
  }
  
  .fundamento__text,
  .principio__text {
    font-size: 0.875rem;
  }
  
  /* ═══════════════════════════════════════════════════════
     PÁGINA HOLDING
     ═══════════════════════════════════════════════════════ */
  
  .holding-hero {
    text-align: center;
  }
  
  .holding-hero__badge {
    width: 72px;
    height: 72px;
    margin-bottom: 1.25rem;
  }
  
  .holding-hero__badge svg {
    width: 44px;
    height: 44px;
  }
  
  /* Pilares Holding */
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .pillar {
    padding: 1.25rem;
  }
  
  .pillar__title {
    font-size: 1rem;
  }
  
  .pillar__text {
    font-size: 0.85rem;
  }
  
  /* Métricas */
  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  
  .metric {
    padding: 1rem;
  }
  
  .metric__value {
    font-size: 1.75rem;
  }
  
  .metric__label {
    font-size: 0.7rem;
  }
  
  /* Funções */
  .function-list {
    gap: 1rem;
  }
  
  .function-item {
    gap: 0.75rem;
  }
  
  .function-item__content strong {
    font-size: 0.9rem;
  }
  
  .function-item__content p {
    font-size: 0.8rem;
  }
  
  /* Portfolio */
  .portfolio-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
  }
  
  .portfolio-item__name {
    font-size: 1.125rem;
  }
  
  /* ═══════════════════════════════════════════════════════
     PÁGINA CONTATO
     ═══════════════════════════════════════════════════════ */
  
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .contact-info {
    text-align: center;
  }
  
  .contact-channel {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
  
  .contact-social {
    align-items: center;
  }
  
  .contact-social__links {
    justify-content: center;
  }
  
  .contact-form-wrapper {
    padding: 1.5rem;
  }
  
  .form-input {
    padding: 0.875rem;
    font-size: 16px; /* Previne zoom iOS */
  }
  
  /* ═══════════════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════════════ */
  
  .footer {
    padding-block: 3rem 2rem;
  }
  
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .footer__brand {
    text-align: center;
  }
  
  .footer__links {
    align-items: center;
  }
  
  .footer__bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  /* ═══════════════════════════════════════════════════════
     GOLDEN NETWORK (reduzir intensidade no mobile)
     ═══════════════════════════════════════════════════════ */
  
  .golden-network {
    opacity: 0.02;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE PEQUENO (max-width: 480px)
   ───────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  
  .container {
    padding-inline: 1rem;
  }
  
  /* Hero */
  .hero__title,
  .hero .heading-hero,
  .hero__content h1 {
    font-size: 2rem;
  }
  
  .hero__subtitle,
  .hero .text-body {
    font-size: 0.95rem;
  }
  
  .hero__actions .btn,
  .hero .btn {
    padding: 0.875rem 1.25rem;
    font-size: 0.75rem;
  }
  
  /* Seções */
  .section {
    padding-block: 2.5rem;
  }
  
  .section h2 {
    font-size: 1.375rem;
  }
  
  /* Cards */
  .pilar,
  .card,
  .pillar {
    padding: 1.25rem;
  }
  
  /* Timeline */
  .timeline h2,
  .caminho h2,
  #caminho h1 {
    font-size: 1.5rem;
  }
  
  .timeline__title,
  .caminho__title {
    font-size: 1rem;
  }
  
  /* Métricas */
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  /* Mini-diagrama */
  .eco-mini__node,
  .mini-ecosystem__node {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE EXTRA PEQUENO (max-width: 360px)
   ───────────────────────────────────────────────────────── */

@media (max-width: 360px) {
  
  .container {
    padding-inline: 0.875rem;
  }
  
  .hero__title,
  .hero .heading-hero {
    font-size: 1.75rem;
  }
  
  .hero__actions .btn {
    font-size: 0.7rem;
    padding: 0.75rem 1rem;
  }
  
  .section h2 {
    font-size: 1.25rem;
  }
  
  .nav-mobile__link {
    font-size: 1.5rem;
  }
}

/* ─────────────────────────────────────────────────────────
   PREFERÊNCIAS DO SISTEMA
   ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}


/* ═══════════════════════════════════════════════════════════
   HOME MOBILE — CORREÇÃO FINAL
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero { min-height:auto!important; padding-top:110px!important; padding-bottom:48px!important; overflow:hidden!important; }
  .hero__grid { display:flex!important; flex-direction:column!important; width:100%!important; gap:32px!important; }
  .hero__content { display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; }
  .hero__content .text-label { display:block!important; margin:0 0 12px!important; }
  .hero__title { display:block!important; width:100%!important; max-width:100%!important; margin:0 0 24px!important; font-size:clamp(3.6rem,18vw,5.2rem)!important; line-height:.88!important; letter-spacing:-.055em!important; white-space:normal!important; word-break:keep-all!important; overflow-wrap:normal!important; }
  .hero__subtitle { display:block!important; width:100%!important; max-width:100%!important; margin:0!important; font-size:1.05rem!important; line-height:1.65!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; }
  .hero__actions { display:flex!important; flex-direction:column!important; width:100%!important; margin-top:28px!important; gap:12px!important; }
  .hero__actions .btn { width:100%!important; min-width:0!important; white-space:normal!important; }
  .hero__orb { width:100%!important; max-width:100%!important; min-height:330px!important; margin:0 auto!important; }

  .ecosystem-preview { overflow:hidden!important; }
  .ecosystem-preview .grid--asymmetric { display:flex!important; flex-direction:column!important; width:100%!important; min-width:0!important; }
  .ecosystem-preview .text-large { width:100%!important; max-width:100%!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; }
  .mini-diagram { width:100%!important; max-width:100%!important; min-width:0!important; min-height:auto!important; padding:28px 18px!important; box-sizing:border-box!important; overflow:hidden!important; }
  .mini-row { display:flex!important; flex-direction:column!important; align-items:center!important; width:100%!important; gap:14px!important; }
  .mini-node { width:min(100%,250px)!important; max-width:250px!important; box-sizing:border-box!important; white-space:normal!important; }

  .journey { overflow:hidden!important; }
  .journey .section__header { position:relative!important; transform:none!important; margin-bottom:40px!important; }
  .journey h2 { position:relative!important; transform:none!important; width:100%!important; max-width:100%!important; margin:10px 0 0!important; padding:0!important; font-size:2rem!important; line-height:1.12!important; text-align:left!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; }
  .timeline { width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; overflow:visible!important; }
  .timeline__item { display:block!important; width:100%!important; padding:0 0 32px 32px!important; border-left:0!important; box-sizing:border-box!important; }
  .timeline__item strong, .timeline__item p { display:block!important; width:100%!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; }
}