/* ==========================================================================
   RESPONSIVE — RC Studio
   --------------------------------------------------------------------------
   Mobile-first fixes layered em cima do design desktop definido em style.css
   (que não é alterado). Cascata "desktop -> pequeno ecrã": cada bloco usa
   max-width e é colocado do maior para o menor breakpoint, para que as
   regras mais específicas (telemóveis pequenos) vençam sempre por último.

   Breakpoints cobertos: 1920 · 1440 · 1200 · 992 · 768 · 576 · 480 · 414 · 390 · 320
   ========================================================================== */

/* ==========================================================================
   1920px / 1440px — Ecrãs grandes e ultra-wide
   O layout já está centrado num .container com largura máxima, por isso o
   design "desktop" mantém-se inalterado; estas queries só existem para
   garantir que nada esticado ou desalinhado aparece em monitores grandes.
   ========================================================================== */
@media (min-width: 1441px) {
  .hero .container {
    gap: 64px;
  }

  .float-stack {
    right: 40px;
    bottom: 40px;
  }
}

/* ==========================================================================
   1200px — Ligeira compressão antes do breakpoint de tablet
   ========================================================================== */
@media (max-width: 1200px) {
  :root {
    --section-pad: 120px;
  }

  .container {
    padding-inline: 28px;
  }

  .hero .container {
    gap: 24px;
  }

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

  .referral-panel {
    padding: 56px;
  }
}

/* ==========================================================================
   992px — Tablet / iPad (ativa o menu hambúrguer)
   ========================================================================== */
@media (max-width: 992px) {
  :root {
    --section-pad: 96px;
    --nav-h: 76px;
  }

  /* ---------- Navbar ---------- */
  .nav-links,
  .navbar-actions .nav-cta,
  .navbar-actions .lang-switch {
    display: none;
  }

  .nav-burger {
    display: block;
  }

  .navbar-actions {
    gap: 14px;
  }

  /* ---------- Hero ---------- */
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-image {
    order: -1;
    max-height: 420px;
    justify-self: stretch;
  }

  .hero-content {
    text-align: center;
  }

  .hero .buttons {
    justify-content: center;
  }

  .hero .description {
    margin-inline: auto;
  }

  .scroll-indicator {
    display: none;
  }

  /* ---------- About ---------- */
  .about .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-image {
    aspect-ratio: 16 / 9;
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }

  .about-lede,
  .about-content > p {
    margin-inline: auto;
  }

  .about-content {
    text-align: center;
  }

  .about-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  /* ---------- Process / timeline ---------- */
  .timeline {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 48px;
  }

  .timeline::before {
    display: none;
  }

  /* ---------- Grids diversas ---------- */
  .services-grid,
  .reviews-grid,
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---------- Galeria ---------- */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .gallery-item.large {
    grid-column: span 2;
  }

  /* Corrige o bug do item "wide" que ficava deslocado (translateX) e
     criava espaços vazios / corte de imagem em ecrãs mais estreitos. */
  .gallery-item.wide {
    grid-column: span 2;
    transform: none;
  }

  /* ---------- Preços ---------- */
  .pricing-panel {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* ---------- Traz um amigo ---------- */
  .referral-panel {
    grid-template-columns: 1fr;
    padding: 44px;
    gap: 36px;
  }

  /* ---------- Contacto ---------- */
  .contact-wrapper {
    grid-template-columns: 1fr;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .map-frame iframe {
    height: 360px;
  }

  /* ---------- Footer ---------- */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   768px — Tablet retrato / phablet
   ========================================================================== */
@media (max-width: 768px) {
  .container {
    padding-inline: 24px;
  }

  .section-title {
    margin-bottom: 48px;
  }

  .services-grid,
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: left;
  }

  .footer-brand,
  .footer-nav,
  .footer-contact {
    grid-column: 1 / -1;
  }

  .referral-panel {
    text-align: center;
  }

  .referral-copy .btn {
    margin-inline: auto;
  }

  .contact-form {
    padding: 36px;
  }

  .contact-card {
    padding: 36px;
  }
}

/* ==========================================================================
   576px — Telemóveis grandes (transição para layout de telemóvel)
   ========================================================================== */
@media (max-width: 576px) {
  :root {
    --section-pad: 76px;
  }

  .container {
    padding-inline: 20px;
  }

  h1 {
    font-size: clamp(2.6rem, 12vw, 3.6rem);
  }

  h2 {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .section-title {
    margin-bottom: 40px;
  }

  /* ---------- Hero ---------- */
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 56px;
  }

  .hero-glow {
    width: 380px;
    height: 380px;
  }

  .hero h1 .line-mark {
    white-space: normal;
  }

  .hero .buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero .buttons .btn {
    width: 100%;
  }

  /* ---------- Grids ---------- */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .timeline {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

  /* ---------- Galeria ---------- */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
    gap: 12px;
  }

  .gallery-item.large,
  .gallery-item.wide {
    grid-column: span 2;
  }

  /* ---------- Reviews ---------- */
  .reviews-badge {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ---------- Preços ---------- */
  .pricing-tabs {
    gap: 8px;
  }

  .pricing-tab {
    padding: 10px 18px;
    font-size: 0.82rem;
  }

  /* ---------- Contacto ---------- */
  .contact-form {
    padding: 28px;
    gap: 16px;
  }

  .contact-card {
    padding: 28px;
  }

  .contact-socials {
    flex-direction: column;
  }

  .map-frame iframe {
    height: 280px;
  }

  /* ---------- Footer ---------- */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ---------- Botões flutuantes ---------- */
  .float-stack {
    right: 16px;
    bottom: 16px;
    gap: 12px;
  }

  .float-btn {
    width: 50px;
    height: 50px;
  }
}

/* ==========================================================================
   480px — Telemóveis médios
   ========================================================================== */
@media (max-width: 480px) {
  .btn {
    padding: 15px 26px;
    font-size: 0.9rem;
  }

  .hero .tag {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
  }

  .hero .description {
    font-size: 1rem;
  }

  .about-grid {
    gap: 1px;
  }

  .about-card,
  .service-card,
  .price-box,
  .review-card {
    padding: 26px 22px;
  }

  .stat {
    padding: 36px 20px;
  }

  .price-big {
    font-size: 3rem;
  }

  /* ---------- FAQ: boa área de toque em ecrãs pequenos ---------- */
  .faq-question {
    padding-block: 22px;
    gap: 14px;
  }

  .faq-question h3 {
    font-size: 0.98rem;
  }

  /* ---------- Menu mobile (drawer mais estreito) ---------- */
  .mobile-menu a {
    font-size: 1.9rem;
  }

  /* ---------- Rodapé ---------- */
  .footer {
    padding-top: 72px;
  }

  .footer-bottom {
    margin-top: 56px;
  }
}

/* ==========================================================================
   414px / 390px — iPhones comuns (Pro Max, 12/13/14, etc.)
   ========================================================================== */
@media (max-width: 414px) {
  .container {
    padding-inline: 18px;
  }

  .navbar-inner {
    padding-inline: 18px;
  }

  .logo {
    font-size: 1.5rem;
  }

  .price-row {
    font-size: 0.9rem;
  }

  .price-row strong {
    font-size: 1.25rem;
  }

  .form-field label {
    font-size: 0.76rem;
  }

  .referral-step {
    padding: 16px 18px;
    gap: 14px;
  }
}

/* ==========================================================================
   375px — iPhone SE (2ª/3ª geração), iPhone 8 e similares
   ========================================================================== */
@media (max-width: 375px) {
  .hero .tag {
    font-size: 0.7rem;
  }

  .btn {
    padding: 14px 22px;
    font-size: 0.86rem;
  }

  .price-box,
  .service-card,
  .review-card,
  .about-card {
    padding: 24px 20px;
  }

  .referral-panel {
    padding: 28px 20px;
  }

  .gallery-grid {
    gap: 10px;
    grid-auto-rows: 140px;
  }
}

/* ==========================================================================
   320px — o telemóvel mais pequeno em uso comum (iPhone SE 1ª geração)
   ========================================================================== */
@media (max-width: 320px) {
  .container {
    padding-inline: 16px;
  }

  h1 {
    font-size: clamp(2.2rem, 13vw, 3rem);
  }

  h2 {
    font-size: clamp(1.7rem, 9vw, 2.1rem);
  }

  .lang-switch-mobile .lang-btn {
    padding: 8px 12px;
    font-size: 0.86rem;
  }

  .mobile-menu a {
    font-size: 1.7rem;
  }

  .stat .counter-row {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .price-big {
    font-size: 2.6rem;
  }
}

/* ==========================================================================
   Ajustes transversais (aplicam-se a todos os ecrãs de telemóvel/tablet)
   ========================================================================== */
@media (max-width: 992px) {
  /* Nenhum cartão deve sair do ecrã — protege contra overflow horizontal
     causado por palavras longas, números ou traduções mais compridas. */
  .about-card,
  .service-card,
  .price-box,
  .review-card,
  .referral-step,
  .faq-item,
  .stat,
  .contact-card,
  .contact-form {
    min-width: 0;
    overflow-wrap: break-word;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  /* Mapa do Google totalmente responsivo em qualquer largura. */
  .map-frame {
    width: 100%;
  }

  .map-frame iframe {
    width: 100%;
    display: block;
  }

  /* WhatsApp / botão de topo com margem de segurança em ecrãs com "notch". */
  .float-stack {
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}