/* A experiência principal acontece no celular. Desktop conserva a composição do estúdio. */
@media (max-width: 650px) {
  html {
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .app-shell {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .app-header {
    padding: 16px 18px;
    gap: 10px;
  }

  .brand { min-width: 0; gap: 8px; }
  .brand img { width: 46px; height: 46px; flex-shrink: 0; }
  .brand strong { font-size: 24px; }
  .brand small { font-size: 8px; letter-spacing: 2.3px; }
  .header-socials { flex-shrink: 0; gap: 4px; }
  .header-socials .social-link { width: 44px; min-height: 44px; padding: 10px; }

  .review-bar { font-size: 10px; }
  .review-options button,
  .review-options select { min-height: 44px; font-size: 12px; padding: 8px 10px; }

  #main { padding: 28px 20px 32px; }
  .page-title h1 { font-size: clamp(40px, 11.5vw, 48px); }
  .page-title .intro { font-size: 14px; line-height: 1.8; }

  body[data-design] .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 30px;
  }

  .hero-copy { padding: 0; }
  body[data-design] .hero h1 {
    font-size: clamp(48px, 14vw, 58px);
    line-height: 1.02;
    letter-spacing: -1.4px;
    margin-top: 15px;
  }
  body[data-design] .hero .eyebrow { font-size: 9px; letter-spacing: 1.8px; }
  body[data-design] .hero .intro {
    max-width: 34em;
    font-size: 14px;
    line-height: 1.8;
    margin: 18px 0 22px;
  }
  body[data-design] .hero .primary { width: 100%; min-height: 50px; font-size: 14px; }
  body[data-design] .hero .hero-footnote { max-width: none; font-size: 11px; line-height: 1.7; }
  .studio-pill { max-width: none; font-size: 10px; align-items: center; }
  .studio-pill::before { margin-top: 0; }
  .hero-picture { width: 100%; max-width: none; }
  .hero-photo { aspect-ratio: 3 / 2; border-radius: 22px; }
  .hero-picture figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
  .hero-picture figcaption span { font-size: 10px; }

  .section-heading { align-items: center; flex-wrap: wrap; gap: 8px 14px; }
  .section-heading h2 { font-size: 34px; }
  .section-heading a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .tabs { gap: 7px; }
  .tabs button { min-height: 46px; font-size: 12px; padding: 10px 12px; }
  .section-sub.photo-context { font-size: 11px; line-height: 1.8; }

  .service-grid { gap: 22px; }
  .service-name { font-size: 34px; }
  .service-category { font-size: 10px; letter-spacing: 1.2px; }
  .service-tagline { font-size: 12px; }
  .service-description { font-size: 13px; line-height: 1.85; }
  .service-card-price { font-size: 21px; }
  .service-card-price small { font-size: 10px; line-height: 1.7; }
  .service-book { min-height: 46px; font-size: 12px; padding: 12px 13px; }
  .photo-detail-hint { min-height: 32px; font-size: 10px; }
  .photo-credit { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; margin-top: 5px; }

  .feature-note { font-size: 13px; }
  .feature-note p { font-size: 12px; line-height: 1.8; }
  .payment-tags span { font-size: 11px; }
  .studio-story { gap: 20px; }
  .studio-story h2 { font-size: 35px; line-height: 1.05; }
  .studio-story .eyebrow { font-size: 9px; }
  .studio-story p { font-size: 13px; line-height: 1.85; }
  .story-actions a { min-height: 46px; font-size: 12px; }

  .primary, .secondary { min-height: 48px; font-size: 13px; }
  .selected-service strong { font-size: 14px; }
  .selected-service small { font-size: 12px; }
  .selected-service button { min-height: 44px; font-size: 12px; }
  .date-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
  .date-heading h2 { font-size: 28px; text-align: center; }
  .date-heading button { width: 44px; min-height: 44px; font-size: 25px; }
  .days { gap: 6px; }
  .day { min-height: 76px; }
  .day span { font-size: 11px; }
  .time { min-height: 48px; font-size: 14px; }
  .time-title { font-size: 14px; line-height: 1.6; }
  .action-row { gap: 10px; }
  .action-row > .primary, .action-row > .secondary { flex: 1 1 140px; min-height: 48px; }
  .demo-note, .action-row > p { font-size: 12px; line-height: 1.8; }
  .summary-panel .summary-label { font-size: 11px; }
  .summary-panel .summary-value { font-size: 14px; }
  .bill > div { font-size: 13px; }
  .bill > div.total { font-size: 18px; }
  .bill small { font-size: 12px; }
  .payment-options label { min-height: 48px; font-size: 14px; }
  .review-card p, .review-detail small, .detail-note { font-size: 12px; }

  input:not([type="radio"]):not([type="checkbox"]), select { font-size: 16px; }
  .service-dialog { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
  .dialog-close { width: 44px; min-height: 44px; }
  .dialog-photo > img { height: auto; max-height: 330px; object-fit: contain; }
  .dialog-copy { padding: 24px 20px; }
  .dialog-copy .eyebrow { font-size: 10px; }
  .dialog-copy .detail-description { font-size: 13px; line-height: 1.85; }
  .detail-meta small { font-size: 11px; }
  .detail-note { font-size: 12px; line-height: 1.8; }
  .dialog-copy .primary { min-height: 48px; font-size: 13px; }

  .app-nav { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
  .app-nav a { min-height: 52px; font-size: 10px; line-height: 1.3; }
  .app-footer { margin-left: 20px; margin-right: 20px; padding-bottom: 20px; }
  .app-footer span, .app-footer div > span { font-size: 11px; line-height: 1.8; }
}

@media (max-width: 360px) {
  .app-header { padding-left: 14px; padding-right: 14px; gap: 6px; }
  .brand img { width: 38px; height: 38px; }
  .brand strong { font-size: 21px; }
  .brand small { font-size: 7px; letter-spacing: 2px; }
  #main { padding-left: 18px; padding-right: 18px; }
  body[data-design] .hero h1 { font-size: 48px; }
  .hero-picture figcaption { flex-direction: column; gap: 1px; }
  .section-heading h2 { font-size: 31px; }
  .tabs button { font-size: 11px; padding-left: 10px; padding-right: 10px; }
  .service-content { padding: 18px; }
  .service-card-footer { flex-direction: column; align-items: stretch; gap: 12px; }
  .service-book { width: 100%; }
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .date-heading h2 { font-size: 25px; }
  .story-actions a { width: 100%; }
}