/* =========================================================
   VITOR ELETRICISTA — MOBILE OPTIMIZATIONS
   Touch-first layout, gestures, transitions & graphics
   ========================================================= */

/* ─── Touch target sizes (min 44×44px WCAG) ────────────── */
@media (max-width: 767px) {

  /* ── Prevent zoom on input focus (iOS) ─────────────────── */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* ── Header: tighter on small screens ──────────────────── */
  header nav {
    padding-inline: 1rem;
  }

  header .h-16 {
    height: 3.5rem;
  }

  /* Logo text: slightly smaller on tiny screens */
  header .font-syne.whitespace-nowrap {
    font-size: 0.95rem;
  }

  /* ── Mobile menu: smooth slide-down animation ───────────── */
  #mobileMenu {
    transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: top center;
  }

  #mobileMenu:not(.hidden) {
    animation: menuSlideDown 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Mobile menu links: bigger tap area */
  #mobileMenu nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding-block: 0.875rem;
    font-size: 1rem;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Touch: remove hover artifacts on mobile ────────────── */
  @media (hover: none) {
    .service-card:hover,
    .stat-card:hover,
    section#avaliacoes .bg-white.rounded-2xl:hover,
    section#portfolio .bg-white.rounded-2xl:hover,
    .portfolio-slide article:hover,
    .reviews-slide .bg-white:hover {
      transform: none !important;
      box-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
    }

    .btn-primary:hover,
    .btn-outline:hover {
      transform: none !important;
    }
  }

  /* Cards: active (tap) feedback */
  .service-card:active,
  section#avaliacoes .bg-white.rounded-2xl:active,
  section#portfolio .bg-white.rounded-2xl:active,
  section#servicos-complementares article:active {
    transform: scale(0.98) !important;
    transition: transform 0.12s ease !important;
  }

  .btn-primary:active,
  .btn-outline:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }

  /* ── Remove tap highlight globally ─────────────────────── */
  a, button, [role="button"], summary {
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Hero section ───────────────────────────────────────── */
  section.min-h-screen,
  section.flex.items-center.min-h-\[calc\(100vh-4rem\)\] {
    min-height: calc(100svh - 3.5rem);
    padding-block: 1.5rem;
  }

  /* Hero title: fluid size */
  section .text-4xl.font-syne,
  section h1.text-4xl {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 1rem;
  }

  /* Hero buttons: full-width stacked */
  section .flex.flex-col.sm\:flex-row.gap-4 {
    gap: 0.75rem;
  }

  section .flex.flex-col.sm\:flex-row.gap-4 > * {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 1rem;
  }

  /* Hero card (right column): tighter on mobile */
  section .bg-white.border.shadow-card.rounded-2xl.p-8 {
    padding: 1.25rem;
    margin-top: 0.5rem;
  }

  /* ── Stats bar ──────────────────────────────────────────── */
  .grid.grid-cols-2.lg\:grid-cols-4 {
    gap: 0.625rem;
  }

  .stat-card,
  .grid.grid-cols-2 > .bg-white.border {
    padding: 0.875rem 0.625rem;
  }

  .stat-card .font-syne,
  .grid.grid-cols-2 > .bg-white .font-syne.text-2xl {
    font-size: 1.1rem;
  }

  /* ── Section headings: scale down ──────────────────────── */
  h2.text-4xl, h2.text-4xl.md\:text-5xl {
    font-size: clamp(1.6rem, 7vw, 2.25rem) !important;
    line-height: 1.2;
  }

  h2.text-3xl {
    font-size: clamp(1.4rem, 6vw, 1.875rem) !important;
  }

  /* ── Section padding: breathe on mobile ────────────────── */
  section.py-16.md\:py-24,
  section.py-20.md\:py-28,
  section.md\:py-28.py-20,
  section.md\:py-24.py-16 {
    padding-block: 3rem;
    gap: 0 !important;
  }

  section.py-14,
  section.md\:py-20.py-8 {
    padding-block: 2rem;
    gap: 0 !important;
  }

  /* ── Service cards: tighter grid ───────────────────────── */
  .service-card {
    padding: 1.25rem;
  }

  .service-card .h-11.w-11 {
    height: 2.25rem;
    width: 2.25rem;
    margin-bottom: 0.875rem;
    border-radius: 0.625rem;
  }

  .service-card .h-11.w-11 svg {
    height: 1.25rem;
    width: 1.25rem;
  }

  .service-card h3 {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }

  /* ── Complementary services: tighter ───────────────────── */
  section#servicos-complementares article {
    padding: 1.125rem;
  }

  section#servicos-complementares article h3 {
    font-size: 0.975rem;
    margin-bottom: 0.5rem;
  }

  /* ── Carousel: full-width cards on mobile ───────────────── */
  .portfolio-slide,
  .reviews-slide {
    flex-shrink: 0;
    flex-grow: 0;
  }

  /* Carousel arrows: move inside visible area on mobile */
  button[onclick^="scrollCarousel"],
  button[onclick^="scrollPortfolioCarousel"] {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  /* Carousel: cursor feedback only — JS controla translateX */
  #portfolioCarousel,
  #reviewsCarousel {
    cursor: grab;
    touch-action: pan-y pinch-zoom;
  }

  #portfolioCarousel:active,
  #reviewsCarousel:active {
    cursor: grabbing;
  }

  /* ── Carousel dots: bigger tap target ──────────────────── */
  #reviewsDots button,
  #portfolioDots button,
  #reviewsDots span,
  #portfolioDots span {
    width: 0.625rem !important;
    height: 0.625rem !important;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Portfolio card image: taller on mobile ─────────────── */
  .portfolio-slide article .h-56 {
    height: 13rem;
  }

  /* ── Reviews carousel cards ─────────────────────────────── */
  .reviews-slide .bg-white,
  .reviews-slide article > div {
    height: auto !important;
  }

  /* ── FAQ: bigger tap area on summary ───────────────────── */
  .faq-item summary {
    padding: 1.125rem 1.25rem;
    min-height: 56px;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .faq-item summary h3 {
    font-size: 0.9375rem;
    line-height: 1.4;
  }

  .faq-item > div {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.9375rem;
  }

  /* ── Contact form ────────────────────────────────────────── */
  section#contato .bg-white.rounded-2xl.p-8 {
    padding: 1.25rem !important;
  }

  .input-field {
    min-height: 48px;
    font-size: 1rem !important;
    padding: 0.75rem 0.875rem;
  }

  textarea.input-field {
    min-height: 100px;
  }

  section#contato .grid.sm\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  section#contato .text-center.border-t.gap-4.grid.mt-8.pt-6.sm\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  footer .grid.md\:grid-cols-4 {
    gap: 2rem;
  }

  footer h4 {
    margin-bottom: 0.75rem;
    font-size: 0.7rem;
  }

  footer ul.space-y-2\.5 > li a,
  footer ul.space-y-2\.5 > li {
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  /* Ensure footer doesn't obscure floating button */
  footer {
    z-index: 40;
  }

  /* ── CTA section ─────────────────────────────────────────── */
  section.bg-electric-500 {
    padding-block: 2.5rem;
  }

  section.bg-electric-500 h2 {
    font-size: clamp(1.4rem, 6vw, 1.875rem) !important;
  }

  section.bg-electric-500 a.bg-white {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* ── Location map: compact on mobile ───────────────────── */
  section#localizacao .rounded-xl {
    height: 200px !important;
  }

  /* ── "Porque" section: single col on mobile ─────────────── */
  section#porque .lg\:grid-cols-\[0\.9fr_1\.1fr\] {
    grid-template-columns: 1fr;
  }

  /* ── Scroll-reveal: reduce motion on mobile for perf ─────── */
  @media (prefers-reduced-motion: no-preference) {
    .section-reveal {
      transition-duration: 0.45s;
    }
  }

}

/* ─── Small phones (< 380px) ───────────────────────────── */
@media (max-width: 379px) {
  header .font-syne.whitespace-nowrap {
    font-size: 0.85rem;
  }

  header img.h-12 {
    height: 2.25rem;
  }

  section h1.text-4xl,
  section .text-4xl.font-syne {
    font-size: clamp(1.55rem, 9vw, 2rem);
  }

  .stat-card .font-syne.text-2xl,
  .grid.grid-cols-2 > .bg-white .font-syne.text-2xl {
    font-size: 1rem;
  }

  .service-card {
    padding: 1rem;
  }
}

/* ─── Large phones / small tablets (480–767px) ─────────── */
@media (min-width: 480px) and (max-width: 767px) {
  section h1.text-4xl,
  section .text-4xl.font-syne {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }
}

/* ─── Page transitions: optimized for mobile ────────────── */
@media (max-width: 767px) {
  body {
    animation-duration: 0.38s !important;
  }

  body.page-exit {
    animation-duration: 0.2s !important;
  }

  /* Reduce section-reveal travel distance on mobile */
  .section-reveal {
    transform: translateY(18px) !important;
  }

  .section-reveal .stagger-child {
    transform: translateY(12px) !important;
  }
}

/* ─── Safe-area insets (notch/home bar) ─────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  header.fixed {
    padding-top: env(safe-area-inset-top);
  }
}

/* ─── Momentum scroll on iOS ────────────────────────────── */
#portfolioCarousel,
#reviewsCarousel {
  -webkit-overflow-scrolling: touch;
}

/* ─── Touch ripple on buttons (amber) ──────────────────── */
@media (max-width: 767px) {
  .btn-primary,
  .btn-outline {
    position: relative;
    overflow: hidden;
  }

  .btn-primary::after,
  .btn-outline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  .btn-primary:active::after,
  .btn-outline:active::after {
    opacity: 1;
  }
}