/* ==========================================================================
   KALLO — Mockups de iPhone
   Moldura desenhada em CSS. A tela tem exatamente 9 / 19.5 (proporção do
   iPhone 14/15/16 Pro) e todas as imagens em assets/images/screens/ foram
   normalizadas para 900 × 1950 px — ou seja, encaixam sem corte nenhum.
   ========================================================================== */

.iphone {
  position: relative;
  width: 100%;
  max-width: var(--iphone-w, 300px);
  margin-inline: auto;
  padding: 3.2%;

  /* raio elíptico: horizontal em % da largura, vertical em % da altura */
  border-radius: 16.3% / 7.6%;

  background:
    linear-gradient(148deg,
      #5b6350 0%,
      #2b3025 12%,
      #0e110b 34%,
      #1b1f15 52%,
      #454c3b 72%,
      #14180f 88%,
      #2a2f23 100%);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 34px 64px -22px rgba(0, 0, 0, 0.85),
    0 8px 22px -10px rgba(0, 0, 0, 0.6),
    /* halo verde: box-shadow não entra na área rolável do documento */
    0 0 90px -26px rgba(144, 242, 67, 0.55),
    0 24px 80px -30px rgba(144, 242, 67, 0.35);

  isolation: isolate;
}

/* fio preto entre a moldura e a tela */
.iphone::after {
  content: "";
  position: absolute;
  inset: 2.5%;
  border-radius: 14.6% / 6.8%;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.92);
  pointer-events: none;
  z-index: 4;
}

/* ---------- tela ---------- */
.iphone-screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 14% / 6.46%;
  overflow: hidden;
  background: #000;
  z-index: 1;
}

.iphone-screen > img,
.iphone-screen > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* proporção idêntica → preenche sem cortar nada */
  object-position: center top;
  border-radius: inherit;
}

/* ---------- dynamic island ---------- */
.iphone-island {
  position: absolute;
  top: 1.25%;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  aspect-ratio: 3.5;
  border-radius: 999px;
  background: #000;
  z-index: 3;
  pointer-events: none;
}
.iphone-island::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11%;
  transform: translateY(-50%);
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #38452f 0%, #10140c 62%, #050703 100%);
  box-shadow: inset 0 0 0 1px rgba(150, 190, 130, 0.22);
}

/* ---------- reflexo do vidro ---------- */
.iphone-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(116deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.05) 16%,
      rgba(255, 255, 255, 0.00) 34%,
      rgba(255, 255, 255, 0.00) 76%,
      rgba(255, 255, 255, 0.035) 100%);
  opacity: 0.6;
}

/* ---------- botões laterais ---------- */
.iphone-side {
  position: absolute;
  z-index: -2;
  border-radius: 2px;
  background: linear-gradient(90deg, #4d5442, #1d2117 55%, #0d100a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.iphone-side.left  { left: -1.1%;  width: 1.4%; }
.iphone-side.right { right: -1.1%; width: 1.4%;
  background: linear-gradient(-90deg, #4d5442, #1d2117 55%, #0d100a); }

.iphone-side.s-action { top: 15.5%; height: 4.2%; }
.iphone-side.s-up     { top: 22.5%; height: 7.4%; }
.iphone-side.s-down   { top: 31.5%; height: 7.4%; }
.iphone-side.s-power  { top: 25.0%; height: 11.5%; }

/* ==========================================================================
   Legenda e etiquetas flutuantes
   ========================================================================== */

.mock {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.mock-cap {
  max-width: 30ch;
  text-align: center;
}
.mock-cap b {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tx);
  margin-bottom: 6px;
}
.mock-cap span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--tx-3);
}

/* etiqueta que flutua ao lado do aparelho */
.mock-float {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border-radius: 14px;
  background: rgba(18, 22, 15, 0.88);
  border: 1px solid var(--accent-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  animation: floaty 5.5s ease-in-out infinite;
}
.mock-float .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(144, 242, 67, 0.16);
  flex-shrink: 0;
}
.mock-float b {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tx);
  letter-spacing: -0.01em;
}
.mock-float small {
  display: block;
  font-size: 0.71rem;
  color: var(--tx-3);
  letter-spacing: 0.02em;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-float { animation: none; }
}

/* ==========================================================================
   Trilhos de mockups
   ========================================================================== */

/* fileira de aparelhos, com escalonamento vertical */
.phone-rail {
  display: grid;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  justify-items: center;
}
.phone-rail.cols-2 { grid-template-columns: repeat(2, 1fr); }
.phone-rail.cols-3 { grid-template-columns: repeat(3, 1fr); }
.phone-rail.cols-4 { grid-template-columns: repeat(4, 1fr); }

.phone-rail .iphone { --iphone-w: 258px; }
.phone-rail.cols-4 .iphone { --iphone-w: 218px; }

/* escalonamento suave (apenas no desktop) */
@media (min-width: 981px) {
  .phone-rail .mock:nth-child(even) { transform: translateY(30px); }
  .phone-rail.cols-3 .mock:nth-child(2) { transform: translateY(-26px); }
}

/* ==========================================================================
   Bloco “vitrine”: texto + aparelho
   ========================================================================== */

.showcase {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}
.showcase.flip { grid-template-columns: 0.82fr 1fr; }
@media (min-width: 981px) {
  .showcase.flip .showcase-media { order: -1; }
}
.showcase-media { position: relative; }
.showcase .section-head { max-width: 100%; }

/* ==========================================================================
   Hero — aparelho com vídeo
   ========================================================================== */

.hero-device {
  position: relative;
  --iphone-w: min(290px, 33vh);
  /* mesma largura do aparelho: as etiquetas se posicionam a partir dele,
     e não da coluna inteira do hero */
  width: 100%;
  max-width: var(--iphone-w);
  margin-inline: auto;
}
/* ancoradas pela borda oposta: a etiqueta fica quase toda fora do aparelho
   e só encosta nele, em vez de cobrir o vídeo */
.hero-device .mock-float.f1 { top: 15%; right: 90%; left: auto; }
.hero-device .mock-float.f2 { bottom: 18%; left: 90%; right: auto; }

.hero-vidnote {
  margin-top: 22px;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.42);
  max-width: 34ch;
  margin-inline: auto;
}

/* ==========================================================================
   Prato brasileiro — grade de alimentos (substitui a foto placeholder)
   ========================================================================== */

.food-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.food-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.food-chip:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}
.food-chip .emoji {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}
.food-chip b {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.food-chip span {
  display: block;
  font-size: 0.76rem;
  color: var(--tx-4);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 980px) {
  .showcase,
  .showcase.flip { grid-template-columns: 1fr; }

  .phone-rail.cols-3,
  .phone-rail.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .phone-rail .iphone { --iphone-w: 230px; }

  .hero-device { --iphone-w: 280px; margin-top: 12px; }
  .hero-device .mock-float.f1 { top: 13%; right: 88%; left: auto; }
  .hero-device .mock-float.f2 { bottom: 16%; left: 88%; right: auto; }
}

@media (max-width: 620px) {
  /* no celular os trilhos viram carrossel horizontal — empilhar 3 ou 4
     aparelhos deixaria a página quilométrica */
  .phone-rail.cols-2,
  .phone-rail.cols-3,
  .phone-rail.cols-4 {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 18px;
    /* sangra até a borda da tela, mantendo o alinhamento do conteúdo */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 8px;
  }
  .phone-rail::-webkit-scrollbar { display: none; }

  .phone-rail .mock {
    flex: 0 0 72%;
    max-width: 260px;
    scroll-snap-align: center;
    transform: none !important;
  }
  .phone-rail .iphone { --iphone-w: 100%; }
  .phone-rail .mock-cap { max-width: 100%; }

  .food-grid { grid-template-columns: 1fr; }

  .hero-device { --iphone-w: 258px; }
  /* sem espaço lateral no celular: as etiquetas sairiam da tela */
  .hero-device .mock-float { display: none; }
}

/* ==========================================================================
   Ajustes do Saldo Kallo quando ele divide espaço com um aparelho
   ========================================================================== */

.showcase .saldo { padding: clamp(22px, 3vw, 34px); }
.showcase .saldo-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.showcase .saldo-cell.main { grid-column: 1 / -1; }
.showcase .saldo-cell { padding: 18px 16px; }
.showcase .saldo-cell .k { font-size: 0.6rem; letter-spacing: 0.12em; margin-bottom: 9px; }
.showcase .saldo-cell .v { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.showcase .saldo-cell .u { font-size: 0.72rem; margin-top: 6px; }
.showcase .saldo-cell.main .v { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }

/* no celular a grade continua em 3 colunas — 3 cartões empilhados
   deixariam a seção longa demais */
@media (max-width: 560px) {
  .showcase .saldo { padding: 20px 16px; }
  .showcase .saldo-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .showcase .saldo-cell { padding: 14px 11px; }
  .showcase .saldo-cell .k { font-size: 0.55rem; letter-spacing: 0.08em; }
  .showcase .saldo-cell .v { font-size: 1.6rem; }
  .showcase .saldo-cell .u { font-size: 0.66rem; }
}