/* ══════════════════════════════════════════════
   RESPONSIVE.CSS — Compra Turbo
   Breakpoints mobile-first + estrategia mobile + print
   Dependencias: tokens.css, layout.css, components.css
   ══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   TABLET (768px - 1024px)
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Grids colapsam para 2 colunas */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Metricas — 2 colunas */
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Metric stage (Home) — tablet: mantem assimetria, reduz escalas */
  .metric-stage__grid {
    column-gap: var(--space-lg);
  }
  .metric-stage__value {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
  }
  .metric-stage__item--hero .metric-stage__value {
    font-size: clamp(3rem, 7vw, 5rem);
  }
  .metric-stage__halo {
    width: clamp(240px, 30vw, 360px);
    height: clamp(240px, 30vw, 360px);
  }

  /* Team card — tablet: reduz padding, portrait square */
  .team-card {
    padding: var(--space-xl);
  }
  .team-card__portrait {
    aspect-ratio: 1 / 1;
  }

  /* Editorial — menos gap */
  .editorial {
    gap: var(--space-2xl);
  }

  /* Pillars — stack direto 3→1 (evita etapa 2-col, inadequada com 3 itens) */
  .pillars__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
  .pillars__header {
    margin-bottom: var(--space-3xl);
  }
  /* Acento central desativado no stack — nao faz sentido vertical */
  .pillar:nth-child(2)::before {
    display: none;
  }

  /* Footer — 4 colunas */
  .footer__grid {
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: var(--space-lg);
  }

  /* Decorativos — reduzir alcance */
  .corner-dots::before { left: 40px; }
  .corner-dots::after { right: 40px; }
  .edge-lines::before { left: 40px; }
  .edge-lines::after { right: 40px; }

  /* UPGRADE v4 — Tablet: desativar efeitos desktop-only */
  .page-grid::before { display: none; }
  .section-number { display: none; }
  .card-tilt { transform: none !important; }
  .btn--magnetic { transform: none !important; }
  .hero-mesh::after {
    background:
      radial-gradient(ellipse at 20% 50%, rgba(212,80,10,0.07) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 30%, rgba(180,50,5,0.04) 0%, transparent 40%);
  }
  .noise-heavy::before { opacity: 0.5; }
  .bleed-left { margin-left: 0; }
  .bleed-right { margin-right: 0; }

  /* UPGRADE VISUAL v2 — Tablet */
  .glass-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .glass-grid__hero {
    grid-column: 1 / 3;
  }

  /* UPGRADE VISUAL v3 — Tablet */
  .bento {
    grid-template-columns: 1fr 1fr;
  }

  .bento__hero {
    grid-row: auto;
    grid-column: 1 / 3;
  }

  .manifesto {
    grid-template-columns: 1fr;
  }

  .manifesto__dim::after {
    display: none;
  }

  .split-asym,
  .split-asym--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .hero-metrics {
    flex-wrap: wrap;
    gap: var(--space-lg);
  }
}

/* ═══════════════════════════════════════════════
   MOBILE (< 768px)
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV MOBILE ──────────────────────────── */
  .header__nav {
    display: none;
  }

  .header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── GRIDS → STACK ───────────────────────── */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Metricas — 1 coluna */
  .metric-grid {
    grid-template-columns: 1fr;
  }

  /* Metric stage (Home) — mobile: stack vertical, hero no meio
     mantem escala maior que laterais mas diferenca menos extrema */
  .metric-stage__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-3xl);
  }
  .metric-stage__value {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }
  .metric-stage__item--hero .metric-stage__value {
    font-size: clamp(3.5rem, 14vw, 5rem);
  }
  .metric-stage__halo {
    width: 280px;
    height: 280px;
  }
  /* No mobile, eyebrow com margem menor */
  .metric-stage__eyebrow {
    margin-bottom: var(--space-2xl);
  }

  /* Team card — mobile: padding reduzido, portrait mantem 1:1 */
  .team-card {
    padding: var(--space-xl) var(--space-lg);
  }
  .team-card__portrait {
    aspect-ratio: 1 / 1;
  }

  /* Editorial — stack vertical */
  .editorial,
  .editorial--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  /* Pillars — mobile: padding horizontal zerado.
     Tamanho do numeral ja e fluido via clamp() em components.css */
  .pillar {
    padding: var(--space-xl) 0;
  }

  /* Compare pairs — mobile: CT em cima, Seller embaixo (stack vertical).
     Divisoria vertical vira linha horizontal no meio. */
  .compare__pair {
    grid-template-columns: 1fr;
  }
  .compare__pair::before {
    top: 50%;
    bottom: auto;
    left: 18%;
    right: 18%;
    width: auto;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--brand-orange) 50%,
      transparent
    );
  }
  .compare__side {
    padding: var(--space-lg) var(--space-xl);
  }
  .compare__marker {
    top: var(--space-md);
    font-size: 22px;
  }
  .compare__side--ct .compare__marker { right: var(--space-md); }
  .compare__side--seller .compare__marker { left: var(--space-md); }

  /* ── FOOTER MOBILE ───────────────────────── */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ── SECOES — padding menor ──────────────── */
  .section {
    padding: clamp(56px, 8vw, 96px) 0;
  }

  /* ── SCROLL HORIZONTAL — mostrar hint ────── */
  .scroll-h-hint {
    display: block;
  }

  /* ── CURSOR CUSTOMIZADO — DESATIVADO ─────── */
  .cursor {
    display: none;
  }

  body {
    cursor: auto;
  }

  a, button, input, select, textarea, label {
    cursor: auto;
  }

  /* ── HERO GLOW — DESATIVADO ──────────────── */
  .hero-glow__circle {
    display: none;
  }

  /* ── PARALLAX — DESATIVADO ───────────────── */
  .parallax {
    transform: none !important;
  }

  /* ── DECORATIVOS — SIMPLIFICADOS ─────────── */
  .corner-dots::before,
  .corner-dots::after,
  .edge-lines::before,
  .edge-lines::after {
    display: none;
  }

  /* Watermark — menor */
  .watermark {
    font-size: clamp(80px, 20vw, 160px);
    opacity: 0.012;
  }

  /* ── PROGRESS DOTS — escondidos em mobile ──
     Area util e pequena demais para justificar um
     indicador lateral. Navegacao primaria ja esta
     no menu hamburger */
  .progress-dots {
    display: none;
  }

  /* ── LOADING SCREEN — simplificada ───────── */
  .loading-screen__bar {
    width: 80px;
  }

  /* ── COOKIE BANNER — stack ───────────────── */
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  .cookie-banner__actions {
    justify-content: stretch;
  }

  .cookie-banner__btn {
    flex: 1;
    text-align: center;
  }

  /* ── TABS — scroll horizontal ────────────── */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs__btn {
    white-space: nowrap;
  }

  /* ── PARTICULAS — DESATIVADO ─────────────── */
  #hero-canvas,
  .hero-particles {
    display: none;
  }

  /* UPGRADE VISUAL v2 — Mobile */
  .glass-grid {
    grid-template-columns: 1fr;
  }

  /* UPGRADE v4 — Mobile: performance + legibilidade */
  .noise-heavy::before { opacity: 0.3; }
  .hero-mesh::after {
    background: radial-gradient(ellipse at 30% 50%, rgba(212,80,10,0.06) 0%, transparent 60%);
  }
  .section-letter { font-size: clamp(150px, 40vw, 280px); }
  .text-reveal { clip-path: none; opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .text-reveal--visible { opacity: 1; transform: translateY(0); }
  .scroll-progress { height: 2px; }
  .eyebrow--wide { letter-spacing: 0.3em; }

  /* UPGRADE VISUAL v3 — Mobile editorial */
  .bento {
    grid-template-columns: 1fr;
  }

  .bento__hero {
    grid-column: 1;
    grid-row: auto;
  }

  .manifesto {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .manifesto__dim,
  .manifesto__highlight {
    padding: var(--space-2xl) 0;
  }

  .hero-metrics {
    flex-direction: column;
    gap: var(--space-md);
  }

  .number-art {
    font-size: clamp(60px, 15vw, 120px);
  }

  .number-art--visible {
    font-size: clamp(48px, 10vw, 96px);
  }

  .glass-grid__hero {
    grid-column: 1;
  }

  /* Stagger mais curto em mobile */
  .stagger-1 { transition-delay: 0.15s; }
  .stagger-2 { transition-delay: 0.3s; }
  .stagger-3 { transition-delay: 0.45s; }
  .stagger-4 { transition-delay: 0.6s; }
  .stagger-5 { transition-delay: 0.75s; }
  .stagger-6 { transition-delay: 0.9s; }
}

/* ═══════════════════════════════════════════════
   MOBILE ULTRA-SMALL (<= 375px)
   iPhone SE, Galaxy A10 e modelos antigos
   ═══════════════════════════════════════════════ */
@media (max-width: 375px) {
  /* Reduz gutter para maximizar area util */
  :root {
    --gutter: 16px;
  }

  /* Hero: titulo e subtitulo mais compactos */
  .hero h1 {
    font-size: clamp(32px, 9vw, 42px) !important;
  }

  /* Pilares: numeral ainda menor para nao dominar */
  .pillar__numeral {
    font-size: 36px;
  }

  /* Cards: padding reduzido mantendo legibilidade */
  .card,
  .team-card,
  .channel-card {
    padding: var(--space-md);
  }

  /* Metric stage: mantem impacto mas dentro da viewport */
  .metric-stage__halo {
    width: 240px;
    height: 240px;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE SMALL (< 480px)
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Padding ainda menor */
  .section {
    padding: clamp(48px, 6vw, 72px) 0;
  }

  /* Cards — padding ajustado mas mantendo legibilidade */
  .card {
    padding: var(--space-lg) var(--space-lg);
  }

  /* Timeline — menos padding esquerdo */
  .timeline {
    padding-left: var(--space-2xl);
  }

  .timeline__dot {
    left: calc(-1 * var(--space-2xl) + 5px);
  }

  /* Botoes — full width */
  .btn--primary {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════
   LANDSCAPE MOBILE
   ═══════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .section {
    padding: var(--space-2xl) 0;
  }

  .loading-screen {
    gap: var(--space-md);
  }
}

/* ═══════════════════════════════════════════════
   DESKTOP LARGE (> 1600px)
   ═══════════════════════════════════════════════ */
@media (min-width: 1600px) {
  /* UPGRADE v4 — Wide screens */
  .page-grid::before {
    background-image: repeating-linear-gradient(
      90deg, var(--watermark-alpha) 0px, transparent 1px, transparent 250px
    );
  }
}

/* Nota: particulas/canvas desativadas no bloco @media 768px acima */

/* ═══════════════════════════════════════════════
   PRINT STYLESHEET
   Para executivos salvarem paginas como PDF
   ═══════════════════════════════════════════════ */
@media print {

  /* Remover elementos interativos/fixos */
  .header,
  .mobile-menu,
  .whatsapp-btn,
  .cookie-banner,
  .loading-screen,
  .cursor,
  .progress-dots,
  .hero-glow,
  .hero-particles,
  #hero-canvas {
    display: none !important;
  }

  /* Cores para impressao */
  body {
    background: white !important;
    color: #111 !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  .section--dark,
  .section--dark-alt {
    background: white !important;
    color: #111 !important;
  }

  .section--cta {
    background: #F5F5F5 !important;
    color: #111 !important;
  }

  /* Remover animacoes */
  .reveal,
  .draw-line,
  .parallax,
  .watermark {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Links — mostrar URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
    word-break: break-all;
  }

  /* Nao mostrar URL em links de navegacao interna */
  .header__link::after,
  .footer__links a::after,
  .footer__legal a::after,
  .mobile-menu__link::after {
    display: none;
  }

  /* Cards — borda visivel */
  .card {
    border: 1px solid #DDD !important;
    break-inside: avoid;
  }

  /* Imagens */
  img {
    max-width: 100% !important;
    break-inside: avoid;
  }

  /* Quebras de pagina limpas */
  .section {
    break-before: auto;
    break-inside: avoid;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
    color: #111 !important;
  }

  /* Eyebrow — visivel em print */
  .eyebrow {
    color: #D4500A !important;
  }

  /* Footer para impressao */
  .footer {
    background: white !important;
    border-top: 1px solid #DDD !important;
  }

  .footer__watermark {
    display: none;
  }

  /* Adicionar URL do site no rodape */
  body::after {
    content: "compraturbo.com.br";
    display: block;
    text-align: center;
    font-size: 9pt;
    color: #999;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #EEE;
  }
}