/**
 * Responsividade — Mobile-first 390px
 * Breakpoints: 320px | 360px | 390px | 768px | 1024px
 */

/* === BASE: 320px+ === */
html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* === SM: 360px+ === */
@media (min-width: 360px) {
  html {
    font-size: 15px;
  }
}

/* === MD: 768px+ === */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* === LG: 1024px+ === */
@media (min-width: 1024px) {
  html {
    font-size: 16px;
  }
}

/* === Tipografia fluida com clamp() === */
.text-fluid-xs { font-size: clamp(0.6875rem, 2vw, 0.75rem); }
.text-fluid-sm { font-size: clamp(0.8125rem, 2.5vw, 0.875rem); }
.text-fluid-base { font-size: clamp(0.875rem, 2.5vw, 1rem); }
.text-fluid-lg { font-size: clamp(1rem, 3vw, 1.125rem); }
.text-fluid-xl { font-size: clamp(1.125rem, 3.5vw, 1.25rem); }
.text-fluid-2xl { font-size: clamp(1.25rem, 4vw, 1.5rem); }
.text-fluid-3xl { font-size: clamp(1.5rem, 5vw, 2rem); }
.text-fluid-4xl { font-size: clamp(1.75rem, 6vw, 2.5rem); }
.text-fluid-5xl { font-size: clamp(2rem, 8vw, 3rem); }
.text-fluid-6xl { font-size: clamp(2.25rem, 10vw, 4rem); }
.text-fluid-hero { font-size: clamp(2.5rem, 12vw, 4.5rem); }

/* === Espaçamento responsivo === */
.p-safe { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.px-safe { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pt-safe { padding-top: env(safe-area-inset-top); }

/* === Scene: padding adaptativo (calc soma padding + safe area no Safari iOS) === */
.scene {
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 360px) {
  .scene {
    padding-left: calc(1.25rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 768px) {
  .scene {
    padding-left: calc(1.5rem + env(safe-area-inset-left, 0px));
    padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
  }
}

/* === Containers full-bleed === */
.container-scene {
  width: 100%;
  max-width: 100%;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

@media (min-width: 768px) {
  .container-scene {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) {
  .container-scene {
    max-width: 48rem;
  }
}

/* === Altura mínima segura === */
.min-h-safe {
  min-height: 100vh;
  min-height: 100dvh;
}

/* === Botões: confortáveis em mobile === */
@media (max-width: 359px) {
  button, .touch-target {
    min-height: 48px;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.9375rem;
  }
}

/* === Overflow === */
.overflow-x-hidden {
  overflow-x: hidden;
}

/* === Landscape mobile === */
@media (max-height: 500px) {
  .scene {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  [data-final-content] {
    padding-bottom: 1rem;
  }
  [data-final-btns] {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
  }
}

/* === Mobile: cards === */
@media (max-width: 767px) {
  .principe-card,
  .casais-card,
  .vignette-card {
    padding: 1.25rem 1.5rem !important;
    max-width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }

  [data-principe-tap],
  [data-principe-content],
  [data-vignette-content],
  [data-casais-tap] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    max-width: 100%;
  }

  .principe-card p,
  [data-principe-phrase] {
    font-size: clamp(0.85rem, 3.8vw, 1.05rem) !important;
    line-height: 1.55;
    padding: 0 0.125rem;
  }

  .vignette-card [data-vignette-text] {
    font-size: clamp(0.95rem, 4.2vw, 1.2rem) !important;
    line-height: 1.5;
  }

  .vignette-card [data-vignette-icon] {
    font-size: 1.75rem !important;
  }

  .vignette-icon-wrap {
    width: 3rem !important;
    height: 3rem !important;
  }

  .vignette-icon-wrap::before {
    inset: -5px !important;
  }

  .vignette-card .flex.flex-col.items-center.mb-6 {
    margin-bottom: 1rem !important;
  }

  .vignette-card .vignette-divider {
    margin-bottom: 1rem !important;
  }

  .vignette-card .vignette-icon-wrap {
    margin-bottom: 0.75rem !important;
  }

  .vignette-slide-num {
    font-size: 0.55rem !important;
    opacity: 0.4 !important;
  }

  [data-principe-moon] {
    width: 5rem !important;
    height: 5rem !important;
    top: 12% !important;
    right: 10% !important;
  }

  .principe-card > div.absolute {
    font-size: 0.65rem;
  }

  .principe-card .absolute.top-5.left-6,
  .principe-card .absolute.top-5.right-6 {
    top: 0.5rem !important;
    font-size: 0.65rem !important;
    opacity: 0.2;
  }

  .principe-card .absolute.top-5.left-6 {
    left: 0.75rem !important;
  }

  .principe-card .absolute.top-5.right-6 {
    right: 0.75rem !important;
  }

  [data-casais-name] {
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
  }

  button.touch-target {
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
  }

  .btn-continuar-tour {
    background: rgba(124, 58, 237, 0.25) !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
    color: #F9FAFB !important;
  }

  .btn-continuar-tour:hover,
  .btn-continuar-tour:active {
    background: rgba(124, 58, 237, 0.35) !important;
    border-color: rgba(124, 58, 237, 0.5) !important;
  }

  .luar-card {
    padding: 1.25rem 1.5rem !important;
    max-width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .luar-phrase {
    font-size: clamp(0.85rem, 3.8vw, 1.05rem) !important;
    line-height: 1.55;
  }

  .luar-moon {
    width: 5rem !important;
    height: 5rem !important;
    top: 12% !important;
    right: 10% !important;
  }

  .polaroid-frame {
    width: min(75vw, 280px);
  }

  .polaroid-caption-text {
    font-size: clamp(0.75rem, 2.5vw, 0.88rem);
  }
}

@media (max-width: 359px) {
  .principe-card,
  .casais-card,
  .vignette-card {
    padding: 1rem 1.25rem !important;
    max-width: calc(100% - 1.5rem);
  }

  .principe-card p,
  [data-principe-phrase] {
    font-size: clamp(0.8rem, 3.5vw, 0.95rem) !important;
  }

  [data-principe-moon] {
    width: 4rem !important;
    height: 4rem !important;
    right: 5% !important;
  }

  .vignette-dots .vignette-dot {
    width: 6px !important;
    height: 6px !important;
  }

  .polaroid-frame {
    width: min(78vw, 260px);
    padding: 8px 8px 0;
  }

  .polaroid-caption {
    padding: 8px 6px 10px;
  }
}

/* === Memories === */
@media (max-width: 767px) {
  [data-memories-list] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 6rem;
  }

  [data-memory-card] {
    margin-bottom: 1.5rem;
  }

  [data-memory-card] p {
    font-size: 0.9rem;
    padding: 0 0.25rem;
  }
}

/* === Evitar overflow === */
.scene,
[data-principe-tap],
[data-principe-content],
[data-vignette-content],
[data-casais-tap] {
  max-width: 100%;
  box-sizing: border-box;
}

.principe-card p,
[data-vignette-text],
[data-principe-phrase] {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}