/* ============================================
   CLARISSA CUNHA — MOBILE FIXES ULTRA PREMIUM
   Correções críticas para experiência mobile
   ============================================ */

/* ===== FASE 0: HEADER MOBILE FIX ===== */

/* 0. HEADER - GARANTIR VISIBILIDADE NO TOPO */
@media (max-width: 600px) {
  /* Forçar scroll para o topo ao carregar */
  html {
    scroll-behavior: auto !important;
  }
  
  body {
    padding-top: 84px !important;
    overflow-x: hidden !important;
  }
  
  .cc-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important;
    padding: 8px 16px !important;
    background: rgba(251, 247, 241, 0.95) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(42, 47, 58, 0.06) !important;
    min-height: 84px !important;
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  
  .cc-header.is-scrolled {
    padding: 6px 16px !important;
    background: rgba(251, 247, 241, 0.98) !important;
    box-shadow: 0 2px 12px rgba(42, 47, 58, 0.08) !important;
    min-height: 72px !important;
  }

  /* Logo — grande mas deixa espaço pro burger */
  .cc-header__logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .cc-header__logo img {
    height: 72px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Scrolled: reduz levemente */
  .cc-header.is-scrolled .cc-header__logo img {
    height: 60px !important;
  }

  /* Burger — nunca encolhe, sempre visível */
  .cc-header__burger {
    flex-shrink: 0 !important;
    width: 52px !important;
    height: 52px !important;
    display: inline-flex !important;
  }

  .cc-header__actions {
    flex-shrink: 0 !important;
  }
}

/* ===== FASE 1: CORREÇÕES CRÍTICAS ===== */

/* 1. ESPAÇAMENTOS GLOBAIS MELHORADOS */
@media (max-width: 600px) {
  :root {
    --container-pad: 24px; /* aumentado de 20px */
    --sp-11: 64px !important; /* reduzido de 80px */
    --sp-10: 56px !important; /* reduzido de 64px */
    --sp-9: 48px !important;
    --sp-8: 40px !important;
    --sp-7: 32px !important;
    --sp-6: 24px !important;
  }
  
  /* Padding lateral consistente */
  .container,
  .page-hero,
  .home-hero,
  .home-manifesto,
  .home-portfolio,
  .home-services,
  .home-testimonials,
  .home-cta {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  
  /* Reduzir padding vertical de seções */
  .section,
  .home-manifesto,
  .home-portfolio,
  .home-services,
  .home-testimonials,
  .home-revista,
  .home-cta {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  
  .home-portfolio {
    padding-top: 48px !important;
  }
}

/* 2. HERO SECTIONS - ALTURA E ESPAÇAMENTO */
@media (max-width: 600px) {
  .home-hero {
    min-height: 85vh !important; /* ajustado para mostrar mais conteúdo */
    padding-top: 24px !important; /* reduzido - body já tem padding-top */
    padding-bottom: 32px !important;
  }
  
  .page-hero {
    padding-top: 24px !important; /* reduzido - body já tem padding-top */
    padding-bottom: 40px !important;
  }
  
  /* Reduzir margin-bottom dos headings */
  .section-head {
    margin-bottom: 32px !important;
  }
  
  .home-portfolio__head {
    margin-bottom: 32px !important;
  }
  
  /* Remover espaço extra entre seções */
  .home-hero + * {
    margin-top: 0 !important;
    padding-top: 48px !important;
  }
}

/* 3. META STATS - GRID MELHORADO */
@media (max-width: 600px) {
  .home-hero__meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
    max-width: 100% !important;
    padding-top: 28px !important;
  }
  
  .home-hero__meta-item:last-child {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--cc-line) !important;
  }
  
  .home-hero__meta-item .num {
    font-size: 32px !important;
  }
  
  .home-hero__meta-item .lbl {
    font-size: 10px !important;
  }
}

/* 4. BOTÕES FULL-WIDTH EM MOBILE */
@media (max-width: 480px) {
  .home-hero__actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 16px !important; /* aumentado de 12px */
  }
  
  .home-hero__actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    margin: 0 !important; /* remover margem extra */
  }
  
  .home-cta__actions,
  .portfolio-cta__btns,
  .infantil-cta__btns,
  .sobre-cta__btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 16px !important; /* aumentado de 12px */
  }
  
  .home-cta__actions .btn,
  .portfolio-cta__btns .btn,
  .infantil-cta__btns .btn,
  .sobre-cta__btns .btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important; /* remover margem extra */
  }
}

/* 5. STAMP CIRCULAR - POSICIONAMENTO MELHORADO */
@media (max-width: 600px) {
  .home-hero__stamp {
    width: 100px !important;
    height: 100px !important;
    font-size: 10px !important;
    bottom: -16px !important;
    right: 20px !important;
    left: auto !important;
  }
  
  .home-hero__stamp strong {
    font-size: 22px !important;
  }
}

/* 6. TYPOGRAPHY - ESCALAS OTIMIZADAS */
@media (max-width: 600px) {
  .home-hero h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.02em !important;
  }
  
  .home-hero__lede {
    font-size: clamp(15px, 3.8vw, 18px) !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
  }
  
  .page-hero h1 {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
  
  .page-hero__lede {
    font-size: clamp(15px, 4vw, 19px) !important;
    margin-top: 20px !important;
    line-height: 1.6 !important;
  }
  
  .section-head h2 {
    font-size: clamp(26px, 6.5vw, 36px) !important;
    line-height: 1.2 !important;
  }
  
  /* Ajustes específicos para páginas de blog/diário */
  .blog-hero h1,
  .revista-hero h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
}

/* 7. MANIFESTO - GRID SIMPLIFICADO */
@media (max-width: 900px) {
  .home-manifesto__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  
  .home-manifesto__label {
    position: static !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
  }
  
  .home-manifesto__label .num {
    font-size: 48px !important;
  }
  
  /* Portfolio head mobile */
  .home-portfolio__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }
  
  .home-portfolio__head h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.1 !important;
  }
}

/* 8. PORTFOLIO GRID - HIERARQUIA MANTIDA */
@media (max-width: 800px) {
  .home-portfolio__grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 240px !important;
    gap: 16px !important;
  }
  
  .pf-card--1 {
    grid-row: span 2 !important;
    grid-column: 1 / -1 !important;
  }
  
  .pf-card--2,
  .pf-card--3,
  .pf-card--4,
  .pf-card--5,
  .pf-card--6 {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  
  /* Overlay sempre visível no mobile */
  .pf-card__overlay {
    opacity: 1 !important;
    background: linear-gradient(180deg, transparent 30%, rgba(42,47,58,0.85) 100%) !important;
  }
  
  .pf-card__meta {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 9. SERVICES GRID - BREATHING ROOM */
@media (max-width: 600px) {
  .home-services__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .svc {
    padding: 36px 28px !important;
    min-height: 280px !important;
  }
}

/* 10. TESTIMONIALS - ESPAÇAMENTO */
@media (max-width: 900px) {
  .home-testimonials__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .testim {
    padding: 36px 28px !important;
  }
  
  .testim::before {
    font-size: 100px !important;
    top: 24px !important;
    right: 20px !important;
  }
}

/* 11. TOUCH TARGETS - MÍNIMO 44x44px */
@media (max-width: 600px) {
  .btn {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 11px !important;
  }
  
  .cc-nav__link,
  .filter-btn {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }
  
  .home-hero__dots button {
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px !important;
  }
  
  .home-hero__dots button.is-active {
    width: 32px !important;
  }
}

/* 12. CASAMENTOS PAGE - FEATURED CARD */
@media (max-width: 600px) {
  .wedding-featured__card {
    aspect-ratio: 4/5 !important;
    border-radius: 16px !important;
  }
  
  .wedding-featured__overlay {
    padding: 28px 24px !important;
  }
  
  .wedding-featured__info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  
  .wedding-featured__meta {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* 13. MAGAZINE GRIDS - TABLET TRANSITION */
@media (min-width: 601px) and (max-width: 900px) {
  .portfolio-grid,
  .infantil-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 280px !important;
    gap: 16px !important;
  }
  
  .p-card--a,
  .i-card--1 {
    grid-column: 1 / -1 !important;
    grid-row: span 2 !important;
  }
}

/* 14. FORMS - INPUTS MAIORES */
@media (max-width: 600px) {
  .field input,
  .field textarea,
  .field select {
    font-size: 16px !important; /* previne zoom iOS */
    padding: 14px 16px !important;
    min-height: 48px !important;
  }
  
  .field textarea {
    min-height: 140px !important;
  }
  
  .field > label {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }
}

/* 15. SERVICE OPTIONS - CARDS MAIORES */
@media (max-width: 600px) {
  .service-opts {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .opt {
    padding: 20px 18px !important;
    min-height: 100px !important;
  }
  
  .opt .opt-title {
    font-size: 19px !important;
  }
  
  .opt .opt-sub {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

/* 16. SOBRE PAGE - TIMELINE */
@media (max-width: 900px) {
  .timeline {
    grid-template-columns: 1fr !important;
  }
  
  .timeline::before {
    left: 24px !important;
  }
  
  .timeline-item,
  .timeline-item:nth-child(even) {
    padding: 28px 24px 28px 56px !important;
    text-align: left !important;
  }
  
  .timeline-item::after,
  .timeline-item:nth-child(even)::after {
    left: 18px !important;
    right: auto !important;
  }
}

/* 17. TEAM GRID - MELHOR PROPORÇÃO */
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  
  .team-card__img {
    aspect-ratio: 3/4 !important;
  }
  
  .team-card__name {
    font-size: 17px !important;
  }
}

/* 18. MIDIA PAGE - CLIPS GRID */
@media (max-width: 600px) {
  .clips-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .clip-card__img {
    aspect-ratio: 16/9 !important;
  }
  
  .new-clips-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* 19. ASSESSORIA ONLINE - HERO */
@media (max-width: 600px) {
  .ao-hero {
    padding-top: 24px !important; /* reduzido - body já tem padding-top */
    padding-bottom: 56px !important;
    min-height: auto !important;
  }
  
  .ao-hero__badge-float {
    width: 80px !important;
    height: 80px !important;
    right: 12px !important;
    bottom: 12px !important;
  }
  
  .ao-hero__badge-float .off {
    font-size: 24px !important;
  }
  
  .ao-hero__price .now {
    font-size: clamp(40px, 10vw, 56px) !important;
  }
}

/* 20. TRUST BAR - GRID MELHORADO */
@media (max-width: 600px) {
  .ao-trust__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }
  
  .ao-trust__item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}

/* 21. BORDER RADIUS - REDUZIDO NO MOBILE */
@media (max-width: 600px) {
  .pf-card,
  .svc,
  .testim,
  .clip-card,
  .dest-card,
  .i-card,
  .tipo-card,
  .sidebar-card,
  .opt {
    border-radius: 16px !important;
  }
  
  .home-hero__media-main,
  .home-hero__accent {
    border-radius: 16px 40px 16px 40px !important;
  }
}

/* 22. FOOTER - MELHOR LEGIBILIDADE E ORGANIZAÇÃO MOBILE */
@media (max-width: 600px) {
  .cc-footer {
    padding: 56px 24px 40px !important;
  }
  
  .cc-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding-bottom: 28px !important;
  }
  
  .cc-footer__lead {
    grid-column: 1 !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(251,247,241,0.12) !important;
  }
  
  .cc-footer__lead h3 {
    font-size: clamp(26px, 7vw, 32px) !important;
    margin-bottom: 16px !important;
    line-height: 1.2 !important;
  }
  
  .cc-footer__lead p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }
  
  .cc-footer__lead .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .cc-footer__col {
    padding: 0 !important;
  }
  
  .cc-footer__col h4 {
    font-size: 10px !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.28em !important;
  }
  
  .cc-footer__col ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .cc-footer__col li {
    margin-bottom: 0 !important;
  }
  
  .cc-footer__col a {
    font-size: 14px !important;
    line-height: 1.8 !important;
    display: block !important;
    padding: 4px 0 !important;
  }
  
  .cc-footer__bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding-top: 20px !important;
    font-size: 10px !important;
  }
  
  /* Footer watermark - ajustar para mobile */
  .cc-footer::before {
    font-size: clamp(60px, 20vw, 120px) !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

/* 23. WHATSAPP FLOAT - POSIÇÃO OTIMIZADA */
@media (max-width: 600px) {
  .wa-float {
    bottom: 24px !important;
    right: 24px !important;
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 6px 24px rgba(37,211,102,0.5) !important;
  }
}

/* 24. STAT ROW - MELHOR PROPORÇÃO */
@media (max-width: 600px) {
  .stat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
    margin: 32px 0 !important;
  }
  
  .stat-cell {
    padding: 24px 20px !important;
  }
  
  .stat-cell .v {
    font-size: 36px !important;
  }
  
  .stat-cell .l {
    font-size: 10px !important;
  }
}

/* 25. FILTER BAR - TOUCH FRIENDLY */
@media (max-width: 600px) {
  .filter-bar {
    gap: 10px !important;
    padding: 0 24px !important;
    margin-bottom: 48px !important;
  }
  
  .filter-btn {
    padding: 10px 16px !important;
    font-size: 10px !important;
    min-height: 40px !important;
  }
}

/* ===== ANIMAÇÕES REDUZIDAS NO MOBILE ===== */
@media (max-width: 600px) {
  * {
    transition-duration: 0.3s !important;
  }
  
  [data-reveal] {
    transition-duration: 0.6s !important;
  }
  
  /* Desabilitar parallax em mobile */
  [data-parallax] {
    transform: none !important;
  }
}

/* ===== ACESSIBILIDADE - FOCUS STATES ===== */
@media (max-width: 600px) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 3px solid var(--cc-teal) !important;
    outline-offset: 4px !important;
  }
}

/* ===== PERFORMANCE - WILL-CHANGE ===== */
@media (max-width: 600px) {
  .home-hero__media-main img,
  .pf-card__img,
  .cc-cursor {
    will-change: transform !important;
  }
}


/* ===== MENU MOBILE - ULTRA PREMIUM NOVO ===== */
@media (max-width: 1100px) {
  .cc-menu {
    padding: 100px 24px 80px !important;
  }
  
  .cc-menu__primary {
    max-width: 100% !important;
    gap: 12px !important;
  }
  
  .cc-menu__primary a {
    font-size: clamp(26px, 6.5vw, 38px) !important;
    padding: 18px 24px !important;
    border-radius: 18px !important;
  }
  
  .cc-menu__primary a .num {
    font-size: 10px !important;
  }
  
  .cc-menu__close {
    top: 24px !important;
    right: 24px !important;
  }
  
  .cc-menu__side {
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  .cc-menu {
    padding: 90px 20px 60px !important;
  }
  
  .cc-menu__primary {
    gap: 10px !important;
  }
  
  .cc-menu__primary a {
    font-size: clamp(22px, 6vw, 32px) !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
  }
  
  .cc-menu__close {
    top: 20px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* Header burger - ULTRA PREMIUM */
@media (max-width: 1100px) {
  .cc-header__burger {
    width: 52px !important;
    height: 52px !important;
    display: inline-flex !important;
    transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    background: var(--cc-ink) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(42,47,58,0.15) !important;
    z-index: 100000 !important;
  }
  
  .cc-header__burger span {
    width: 20px !important;
    height: 2px !important;
    background: var(--cc-cream) !important;
    transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-radius: 2px !important;
  }
  
  .cc-header__burger span::before,
  .cc-header__burger span::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 2px !important;
    background: var(--cc-cream) !important;
    transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-radius: 2px !important;
  }
  
  .cc-header__burger span::before {
    top: calc(50% - 6px) !important;
  }
  
  .cc-header__burger span::after {
    top: calc(50% + 6px) !important;
  }
  
  /* Estado ABERTO - X elegante */
  .is-menu-open .cc-header__burger {
    background: rgba(255,255,255,0.95) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 32px rgba(42,47,58,0.12) !important;
  }
  
  .is-menu-open .cc-header__burger span {
    background: transparent !important;
  }
  
  .is-menu-open .cc-header__burger span::before {
    top: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    background: var(--cc-teal-deep) !important;
  }
  
  .is-menu-open .cc-header__burger span::after {
    top: 50% !important;
    transform: translateX(-50%) rotate(-45deg) !important;
    background: var(--cc-teal-deep) !important;
  }
}

/* Scroll lock quando menu aberto */
body.is-menu-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Garantir que o botão de fechar sempre funcione */
.cc-menu__close {
  position: fixed !important;
  z-index: 100001 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(107,166,161,0.2) !important;
  touch-action: manipulation !important;
}


/* ===== HOME PAGE ULTRA PREMIUM MOBILE ===== */
@media (max-width: 600px) {
  /* Hero com glassmorphism */
  .home-hero__media-main {
    border-radius: 20px 48px 20px 48px !important;
    box-shadow: 0 24px 64px rgba(42,47,58,0.35) !important;
  }
  
  .home-hero__accent {
    border-radius: 48px 20px 48px 20px !important;
    box-shadow: 0 20px 48px rgba(42,47,58,0.4) !important;
  }
  
  .home-hero__stamp {
    box-shadow: 0 12px 32px rgba(42,47,58,0.25) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  
  /* Portfolio cards com depth */
  .pf-card {
    box-shadow: 0 8px 32px rgba(42,47,58,0.18) !important;
    border-radius: 20px !important;
  }
  
  .pf-card:active {
    transform: scale(0.98) !important;
  }
  
  /* Services com glassmorphism */
  .svc {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(42,47,58,0.12) !important;
    border-radius: 20px !important;
  }
  
  /* Testimonials premium */
  .testim {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(42,47,58,0.15) !important;
    border-radius: 20px !important;
  }
  
  /* Buttons com depth */
  .btn {
    box-shadow: 0 4px 16px rgba(42,47,58,0.15) !important;
    border-radius: 24px !important;
  }
  
  .btn:active {
    transform: scale(0.96) translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(42,47,58,0.2) !important;
  }
  
  .btn--primary {
    box-shadow: 0 6px 20px rgba(42,47,58,0.25) !important;
  }
  
  /* Manifesto com breathing room */
  .home-manifesto {
    padding: 80px 24px !important;
  }
  
  .home-manifesto__text {
    text-shadow: 0 1px 2px rgba(42,47,58,0.05);
  }
}

/* ===== TOUCH FEEDBACK ULTRA PREMIUM ===== */
@media (max-width: 600px) {
  a, button, .btn, .pf-card, .svc, .testim {
    -webkit-tap-highlight-color: rgba(107,166,161,0.1) !important;
  }
  
  /* Ripple effect visual */
  a:active, button:active {
    position: relative;
  }
  
  a:active::after, button:active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(107,166,161,0.2), transparent);
    pointer-events: none;
    animation: ripple 600ms ease-out;
  }
  
  @keyframes ripple {
    from {
      opacity: 1;
      transform: scale(0);
    }
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
}

/* ===== SCROLL ANIMATIONS SUAVES ===== */
@media (max-width: 600px) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), 
                transform 800ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SAFE AREAS PARA NOTCH ===== */
@supports (padding: max(0px)) {
  @media (max-width: 600px) {
    body {
      padding-top: max(84px, env(safe-area-inset-top) + 84px) !important;
    }
    
    .home-hero,
    .page-hero {
      padding-top: max(24px, env(safe-area-inset-top) + 24px) !important;
    }    
    .cc-footer {
      padding-bottom: max(48px, env(safe-area-inset-bottom) + 28px) !important;
    }
  }
}


/* ===== REDUÇÃO DE ESPAÇOS VAZIOS MOBILE ===== */
@media (max-width: 600px) {
  /* Remover espaços antes de seções */
  .home-portfolio::before {
    height: 40px !important; /* reduzido de 80px */
    margin-bottom: 32px !important; /* reduzido */
  }
  
  /* Reduzir gaps entre elementos */
  .home-hero__actions {
    margin-bottom: 40px !important; /* reduzido de 56px */
  }
  
  .home-hero__meta {
    padding-top: 20px !important; /* reduzido de 28px */
  }
  
  /* Reduzir espaçamento entre cards */
  .home-services__head {
    margin-bottom: 48px !important; /* reduzido de 80px */
  }
  
  .home-testimonials__grid {
    gap: 20px !important; /* reduzido de 24px */
  }
  
  /* Reduzir padding do footer */
  .cc-footer {
    padding-top: 56px !important; /* reduzido de 64px */
    padding-bottom: 40px !important; /* reduzido de 48px */
  }
  
  .cc-footer__grid {
    padding-bottom: 32px !important; /* reduzido */
    gap: 32px !important; /* reduzido de 40px */
  }
  
  /* Manifesto mais compacto */
  .home-manifesto__signature {
    margin-top: 32px !important; /* reduzido de 48px */
  }
  
  /* Services mais compactos */
  .svc {
    padding: 32px 24px !important; /* reduzido */
    min-height: 240px !important; /* reduzido de 280px */
  }
  
  /* Testimonials mais compactos */
  .testim {
    padding: 32px 24px !important; /* reduzido de 36px 28px */
  }
}

/* ===== AJUSTES ESPECÍFICOS PARA ÁREAS VAZIAS ===== */
@media (max-width: 600px) {
  /* Remover espaço extra no topo das páginas */
  main {
    padding-top: 0 !important;
  }
  
  /* Compactar seção de revista */
  .home-revista {
    padding: 56px 24px !important;
  }
  
  /* Compactar press strip */
  .home-press {
    padding: 32px 24px !important; /* reduzido */
  }
  
  /* Compactar marquee */
  .home-marquee {
    padding: 16px 0 !important; /* reduzido de 20px */
  }
}

/* ===== CASAMENTO PAGES — BOTÕES CTA MOBILE ===== */
@media (max-width: 600px) {
  /* Afastar botões das bordas nas páginas de portfolio */
  .wg-cta {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .wg-cta__btns {
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
    padding: 0 4px !important;
  }

  .wg-cta__btns .btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 16px 24px !important;
    min-height: 52px !important;
  }

  /* Nav de próximo/anterior */
  .wg-nav {
    grid-template-columns: 1fr !important;
  }

  .wn-item {
    padding: 24px 24px !important;
  }

  /* Story section */
  .wg-story {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Mosaic section */
  .wg-mosaic {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}