/* Celular Android de mockup (bisel fino, cámara perforada centrada) y las
   tarjetas flotantes que salen de él. Las capturas reales son 1080×2400 (9:20). */
.phone {
  --w: 300px;
  position: relative;
  width: var(--w);
  max-width: 100%;
  margin: 0;
  padding: calc(var(--w) * .028);
  border-radius: calc(var(--w) * .145);
  background:
    linear-gradient(145deg, #2b332f 0%, var(--bisel) 22%, var(--bisel) 78%, #2b332f 100%);
  box-shadow:
    var(--sombra-cel),
    inset 0 0 0 1.5px #3a443f,
    inset 0 0 0 3px var(--bisel);
  flex: none;
}
.phone img {
  width: 100%;
  aspect-ratio: 9 / 20;
  object-fit: cover;
  border-radius: calc(var(--w) * .118);
  background: var(--hundido);
}
/* cámara perforada */
.phone::before {
  content: "";
  position: absolute; z-index: 2;
  top: calc(var(--w) * .066); left: 50%;
  width: calc(var(--w) * .038); aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #34403b 0 18%, #050706 45%);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .05);
}
/* botones laterales: encendido + volumen */
.phone::after {
  content: "";
  position: absolute; right: -2.5px; top: 21%;
  width: 3px; height: 16%;
  border-radius: 0 3px 3px 0;
  background: #222a26;
  box-shadow: 0 calc(var(--w) * .33) 0 0 #222a26;
}
/* reflejo del vidrio */
.phone__glare {
  position: absolute; inset: calc(var(--w) * .028);
  border-radius: calc(var(--w) * .118);
  background: linear-gradient(115deg, rgb(255 255 255 / .14) 0%, rgb(255 255 255 / 0) 32%);
  pointer-events: none;
}

/* ── Tarjetas flotantes (piezas reales de la UI: superficie opaca + sombra
   flotante, regla 2 del sistema) ───────────────────────────────────── */
.flota {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: var(--r-card);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 18px 40px -12px rgb(13 42 27 / .35), 0 0 0 1px rgb(26 37 32 / .05);
  font-size: var(--t-small); line-height: 1.3;
  white-space: nowrap;
  animation: flotar 7s ease-in-out infinite;
}
.flota b { display: block; font-weight: 600; font-size: .92rem; }
.flota span { color: var(--tinta-2); }
.flota__ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--brote); color: var(--canopia-prof);
}
.flota__ico svg { width: 22px; height: 22px; }
.flota--alerta .flota__ico { background: var(--alerta-tinte); color: var(--alerta); }
.flota--ruta { padding: 14px 18px; display: block; }
.flota--ruta .big { font: 400 2.3rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.flota--ruta .big small { font: 500 1rem var(--f-ui); color: var(--tinta-2); margin-left: .3em; }
.flota--ruta span { display: block; margin-top: 4px; }

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Sello de pasaporte (PassportStamp): oro, tinta corrida, levemente girado */
.sello {
  position: absolute; z-index: 6;
  width: 132px; aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  border-radius: 50%;
  color: #8A6516;
  background: var(--oro-tinte);
  border: 2.5px solid var(--oro);
  box-shadow: inset 0 0 0 5px var(--oro-tinte), inset 0 0 0 6.5px var(--oro), 0 16px 32px -14px rgb(122 84 24 / .55);
  transform: rotate(-12deg);
  font: 700 .62rem/1.25 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
}
.sello i { display: block; font: italic 400 1.15rem/1 var(--f-display); letter-spacing: 0; text-transform: none; margin: 4px 0; }
.sello svg { width: 22px; height: 22px; margin: 0 auto 2px; }

@media (max-width: 560px) {
  .flota { font-size: .8rem; padding: 10px 12px 10px 10px; gap: 10px; }
  .flota__ico { width: 34px; height: 34px; }
  .flota--ruta .big { font-size: 1.8rem; }
  .sello { width: 104px; }
}