/* ============================================================
   CRISTIANE MARTINS — Social Media para Médicos
   responsive.css — Media queries e adaptações mobile/tablet
   Depende de: style.css (deve ser carregado antes)
============================================================ */

/* ── Desktop largo (> 1260px) — alinha hero com o container ── */
@media (min-width: 1260px) {
  .hero__content {
    margin-left: calc((100vw - 1160px) / 2);
  }
}

/* ── Tablet (≤ 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
  .sobre__inner        { grid-template-columns: 1fr; gap: 48px; }
  .sobre__image-frame  { width: 300px; margin-inline: auto; }
  .stats               { grid-template-columns: repeat(2, 1fr); }
  .servicos__grid      { grid-template-columns: repeat(2, 1fr); }
  .contato__inner      { grid-template-columns: 1fr; gap: 48px; }
  .contato__form-wrap  { padding: 36px 28px; }
}

/* ── Phablet (≤ 860px) ────────────────────────────────────── */
@media (max-width: 860px) {
  .portfolio__grid    { grid-template-columns: repeat(2, 1fr); }
  .testimonial__card  { flex: 0 0 100%; width: 100%; }
}

/* ── Mobile (≤ 640px) ─────────────────────────────────────── */
@media (max-width: 640px) {
  .section { padding-block: 70px; }

  /* Header — sempre com fundo no mobile */
  .header {
    background: rgba(10,10,10,.98);
  }

  /* Header — ativa menu hambúrguer */
  .hamburger { display: flex; }
  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    width: 75%;
    max-width: 300px;
    background: rgba(17,17,17,.98);
    backdrop-filter: blur(12px);
    padding: 90px 32px 32px;
    transition: right .35s ease;
    border-left: 1px solid rgba(201,168,76,.1);
    z-index: 999;
  }
  .nav.open        { right: 0; }
  .nav__list       { flex-direction: column; gap: 28px; }
  .nav__link       { font-size: 1.1rem; }

  /* Hero */
  .carousel__btn      { display: none; }
  .hero__scroll-hint  { display: none; }
  .hero__title        { white-space: normal; font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .hero__content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-inline: 24px;
  }
  .slide__overlay {
    background: rgba(0,0,0,.78);
  }

  /* Fotos do carrossel no mobile */
  .slide__visual--1,
  .slide__visual--2,
  .slide__visual--3 {
    background-size: cover;
    background-position: 60% center;
  }
  /* Fade no mobile */
  .slide__visual::after {
    background:
      linear-gradient(to right,  var(--black) 0%, transparent 15%),
      linear-gradient(to left,   var(--black) 0%, transparent 15%),
      linear-gradient(to top,    var(--black) 0%, transparent 18%),
      linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 30%);
  }

  /* Sobre */
  .sobre__image-frame { width: 260px; }
  .sobre__badge       { right: -10px; bottom: -16px; }

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

  /* Portfólio */
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Serviços */
  .servicos__grid { grid-template-columns: 1fr; }

  /* Depoimentos */
  .testimonial__card { padding: 28px 22px; }

  /* Footer */
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__nav   { gap: 16px; }

  /* WhatsApp flutuante */
  .whatsapp-float     { bottom: 20px; right: 20px; width: 44px; height: 44px; }
  .whatsapp-float svg { width: 22px; height: 22px; }
}

/* ── Small mobile (≤ 400px) ───────────────────────────────── */
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}