/* ═════════════════════════════════════════════════════════════════════════
 * adaptive-fixes.css — Sellerion Landing · Adaptabilidade Fluida
 * ─────────────────────────────────────────────────────────────────────────
 * Carregar DEPOIS do style.css.
 *
 * Corrige:
 *   1. Saltos bruscos entre breakpoints (clamp + breakpoint intermediário 600px)
 *   2. BUG: line-height .1px em .name-value
 *   3. Hero-image transbordando em 769-900px
 *   4. Carrossel exagerado em mobile
 *   5. Contact-item height excessiva
 *   6. Backdrop-filter desnecessários (otimização)
 *   7. Tipografia fluida com clamp()
 * ═════════════════════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 1) BUGS CRÍTICOS                                                       ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

/* BUG: line-height .1px quebrava o name-value em desktop */
@media (min-width: 1025px) {
  .name-value {
    line-height: 1.1 !important;
  }
}

/* BUG: hero-image-container width fixo 420px transborda em 769-900px */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-image-container {
    width: clamp(280px, 38vw, 420px) !important;
    height: clamp(280px, 38vw, 420px) !important;
    max-width: 420px !important;
  }
  
  /* Badges ficam mais compactos nesse intervalo */
  .floating-badge {
    padding: .85rem 1rem !important;
  }
  .floating-badge i {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }
  .badge-title { font-size: .8rem !important; }
  .badge-libs { font-size: .65rem !important; }
  
  /* Badges um pouco mais perto do centro pra não vazar */
  .badge-1 { left: -15% !important; }
  .badge-2 { right: -15% !important; }
  .badge-3 { left: -15% !important; }
  .badge-4 { right: -15% !important; }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 2) TIPOGRAFIA FLUIDA — substitui os "saltos" por escala suave         ║
 * ║                                                                        ║
 * ║ clamp(MIN, IDEAL, MAX) → cresce suavemente entre os breakpoints       ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Hero title — fluido 32px (320px) até 80px (1280px+) */
.hero-name {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 4rem) !important;
}

.name-value {
  font-size: clamp(2rem, 1.4rem + 3vw, 5rem) !important;
  line-height: 1.1 !important;
}

.hero-title {
  font-size: clamp(.95rem, .85rem + .4vw, 1.5rem) !important;
}

.hero-description {
  font-size: clamp(.92rem, .85rem + .3vw, 1.2rem) !important;
}

/* Section title — fluido 24px até 48px */
.section-title {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem) !important;
}

/* Rolagem-palavras — fluido entre breakpoints */
.rolagem-palavras-interna h2 {
  font-size: clamp(24px, 18px + 4vw, 80px) !important;
}

.rolagem-palavras li {
  font-size: clamp(22px, 16px + 3.5vw, 70px) !important;
}

.titulo-2 .title-text {
  font-size: clamp(16px, 14px + 1vw, 40px) !important;
}

/* Stat number (preços) fluido */
.stat-number {
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 3rem) !important;
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 3) BREAKPOINT INTERMEDIÁRIO 600px (tablets pequenos)                  ║
 * ║                                                                        ║
 * ║ Suaviza a transição entre mobile (480) e tablet/desktop (769)         ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (min-width: 600px) and (max-width: 768px) {
  
  /* Header um pouco maior */
  .brand-logo-img {
    height: 56px !important;
  }
  
  /* Nav drawer mais largo (mais conforto pra tocar) */
  .nav-menu {
    width: 60% !important;
    max-width: 360px !important;
  }
  
  /* Hero: ainda 1 coluna, mas espaçamento melhor */
  .hero-section {
    padding: 6rem 0 3rem !important;
  }
  
  .hero-container {
    padding: 0 2rem !important;
    gap: 3rem !important;
  }
  
  /* Imagem do hero maior em tablets pequenos */
  .hero-image-container {
    max-width: 320px !important;
  }
  
  .profile-image-frame,
  .profile-image-glow {
    width: 280px !important;
    height: 280px !important;
  }
  
  /* Botões hero voltam a ficar horizontais */
  .hero-buttons {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1.5rem !important;
  }
  
  .btn {
    width: auto !important;
    min-width: 180px !important;
  }
  
  /* Sections com padding intermediário */
  .section {
    padding: 4rem 0 !important;
  }
  
  .section-container {
    padding: 0 2rem !important;
  }
  
  /* Skills (funcionalidades): ainda 1 coluna mas espaçado */
  .skill-category {
    flex-direction: column !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }
  
  /* Cards (planos/blog): 2 colunas em tablet pequeno */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  
  /* No #plans, mantém 1 coluna pra cards ficarem maiores */
  #plans .projects-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
  
  /* Carrossel: max-width controlada */
  .carousel-wrapper {
    padding: 1.5rem !important;
  }
  
  .carousel-track {
    min-height: 360px !important;
  }
  
  /* Contato: 2 colunas se couber */
  .contact-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  /* Footer */
  .footer-content {
    flex-direction: row !important;
    text-align: left !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 4) MOBILE — correções específicas                                      ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 599px) {
  
  /* Section padding fluido */
  .section {
    padding: clamp(2rem, 5vw + 1rem, 4rem) 0 !important;
  }
  
  .section-container {
    padding: 0 clamp(1rem, 3vw, 1.5rem) !important;
  }
  
  /* Hero padding compacto em telas pequenas */
  .hero-section {
    padding: clamp(4rem, 8vw + 2rem, 6rem) 0 2rem !important;
  }
  
  /* Carrossel: reduz altura mínima no mobile (estava 420px enorme!) */
  .carousel-track {
    min-height: 320px !important;
  }
  
  .carousel-slide {
    padding: 1.25rem 1rem !important;
  }
  
  .feedback-text {
    font-size: 14px !important;
  }
  
  /* Profile image dentro do círculo: maior (era 70%, fica 90%) */
  .profile-image img {
    max-width: 90% !important;
    max-height: 90% !important;
  }
  
  /* Badges mais compactos */
  .floating-badge {
    padding: 8px 10px !important;
  }
  
  .floating-badge i {
    width: 30px !important;
    height: 30px !important;
    font-size: .9rem !important;
  }
  
  /* Botões altura mínima 48px (touch-friendly) */
  .btn {
    min-height: 48px !important;
    padding: .9rem 1.75rem !important;
  }
  
  /* Form inputs touch-friendly */
  .form-input,
  .form-textarea {
    min-height: 48px !important;
  }
  
  /* Contact icon menor */
  .contact-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1rem !important;
  }
  
  .contact-item {
    padding: 1rem !important;
    gap: .85rem !important;
  }
  
  /* Footer social mais compacto */
  .footer-social-link {
    width: 38px !important;
    height: 38px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 5) MOBILE PEQUENO ≤360px (iPhone SE, Galaxy S5)                       ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 360px) {
  
  /* Header ainda mais compacto */
  .brand-logo-img {
    height: 40px !important;
  }
  
  .nav-container {
    padding: 0 .75rem !important;
  }
  
  .nav-toggle {
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Drawer ocupa quase tudo (sobrava muito espaço lateral) */
  .nav-menu {
    width: 90% !important;
    padding: 5rem 1.5rem 1.5rem !important;
  }
  
  /* Hero image menor */
  .profile-image-frame,
  .profile-image-glow {
    width: 180px !important;
    height: 180px !important;
  }
  
  /* Badges em layout grid 2 colunas (mais compacto) */
  .hero-image-wrapper {
    padding: 12px !important;
  }
  
  /* Carrossel ainda mais enxuto */
  .carousel-track {
    min-height: 280px !important;
  }
  
  /* Tags menores nos cards */
  .tag {
    font-size: .7rem !important;
    padding: .3rem .6rem !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 6) TABLET LANDSCAPE / DESKTOP PEQUENO (1025-1199px)                    ║
 * ║                                                                        ║
 * ║ Suaviza o salto que existia entre 769px e 1025px                      ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (min-width: 1025px) and (max-width: 1199px) {
  
  .brand-logo-img {
    height: 70px !important;
  }
  
  /* Section padding intermediário */
  .section {
    padding: 5.5rem 0 !important;
  }
  
  /* Hero-image maior mas não enorme */
  .hero-image-container {
    width: 380px !important;
    height: 380px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 7) OTIMIZAÇÕES DE PERFORMANCE                                          ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

/* Header: backdrop-filter inútil (bg sólido) — remove pra economizar GPU */
.main-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Project-card: blur 30px era pesado em Android antigo */
.project-card,
.timeline-content,
.contact-item {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Mobile: desativa blur (ganho de performance significativo) */
@media (max-width: 768px) {
  .project-card,
  .timeline-content,
  .contact-item,
  .floating-badge,
  .carousel-slide {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Reduz a complexidade do background animado em mobile */
  body::before {
    background-size: 32px 32px !important;
    opacity: .6 !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 8) CONTACT-ITEM — corrige height 20vh exagerada                       ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (min-width: 769px) {
  .contact-item {
    height: auto !important;
    min-height: 96px !important;
    padding: 1.5rem 2rem !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
 * ║ 9) ROLAGEM-PALAVRAS — title "Por que..." não some atrás do header     ║
 * ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (min-width: 769px) and (max-width: 1024px) {
  .titulo-2 .title-text {
    position: static !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
    display: block !important;
  }
}