/* Avimo: teléfono de demostración (compartido por las 3 direcciones).
   Todo se mide en cqw del teléfono, así escala solo en celular y compu. */

.pd-phone{
  --pd-acc:#E4572E; --pd-tint:#FFE6DA;
  container-type:inline-size;
  position:relative; width:100%; aspect-ratio:290/600;
  padding:3.4%; border-radius:16.5% / 8%;
  background:#0E0E10;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.07) inset, 0 50px 90px -30px rgba(0,0,0,.45), 0 18px 36px -18px rgba(0,0,0,.35);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.pd-screen{ position:relative; width:100%; height:100%; border-radius:12.5cqw; overflow:hidden; background:#FBFBF9; color:#15161A; isolation:isolate; }
.pd-island{ position:absolute; z-index:5; top:3.2cqw; left:50%; width:32cqw; height:9.4cqw; margin-left:-16cqw; border-radius:6cqw; background:#0E0E10; }
.pd-status{ position:absolute; z-index:4; top:0; left:0; right:0; height:16cqw; display:flex; align-items:center; justify-content:space-between; padding:1.2cqw 7.5cqw 0 9cqw; font-size:5cqw; font-weight:600; letter-spacing:-.01em; background:linear-gradient(#FBFBF9 70%, rgba(251,251,249,0)); }
.pd-status svg{ height:4.2cqw; width:auto; display:block; }
.pd-icons{ display:flex; gap:1.6cqw; align-items:center; }

.pd-view{ position:absolute; inset:0; overflow:hidden; }
.pd-page{ padding-top:17cqw; will-change:transform; transition:transform 2.6s cubic-bezier(.45,0,.25,1); }

.pd-url{ display:flex; align-items:center; justify-content:center; gap:1.4cqw; margin:0 auto 3cqw; width:fit-content; max-width:88%; padding:1.8cqw 4.2cqw; border-radius:99px; background:#EFEFEB; font-size:3.9cqw; font-weight:500; color:#55575E; white-space:nowrap; overflow:hidden; }
.pd-url span{ overflow:hidden; text-overflow:ellipsis; }
.pd-url svg{ width:3.2cqw; height:3.2cqw; flex:none; }

.pd-cover{ position:relative; margin:0 3.7cqw; height:56cqw; border-radius:7.4cqw; background:var(--pd-tint); overflow:hidden; transition:background-color .6s cubic-bezier(.4,0,.2,1); }
.pd-cover::before{ content:""; position:absolute; width:70%; aspect-ratio:1; right:-18%; top:-30%; border-radius:44% 56% 62% 38% / 45% 42% 58% 55%; background:rgba(255,255,255,.55); }
.pd-cover::after{ content:""; position:absolute; width:46%; aspect-ratio:1; left:-12%; bottom:-24%; border-radius:58% 42% 40% 60% / 52% 60% 40% 48%; background:var(--pd-acc); opacity:.12; transition:background-color .6s; }
.pd-art{ position:absolute; inset:0; display:grid; place-items:center; }
.pd-art svg{ width:84%; height:auto; overflow:visible; }

.pd-body{ padding:4.8cqw 5.9cqw 7cqw; }
.pd-name{ margin:0; font-size:8.2cqw; line-height:1.08; font-weight:800; letter-spacing:-.025em; min-height:1.08em; overflow-wrap:anywhere; }
.pd-meta{ display:flex; align-items:center; gap:2cqw; margin-top:1.8cqw; font-size:4.3cqw; color:#5D6068; font-weight:500; }
.pd-dot{ width:1cqw; height:1cqw; border-radius:50%; background:#B9BBC0; }
.pd-open{ display:inline-flex; align-items:center; gap:1.4cqw; color:#138A43; font-weight:600; }
.pd-open i{ width:1.8cqw; height:1.8cqw; border-radius:50%; background:#1DB954; box-shadow:0 0 0 1cqw rgba(29,185,84,.18); }
.pd-rating{ display:flex; align-items:center; gap:1.4cqw; margin-top:1.6cqw; font-size:4.3cqw; color:#5D6068; }
.pd-rating b{ color:#15161A; font-weight:700; }
.pd-stars{ display:flex; gap:.5cqw; }
.pd-stars svg{ width:3.6cqw; height:3.6cqw; fill:var(--pd-acc); transition:fill .6s; }

.pd-btns{ display:grid; grid-template-columns:1fr 1fr; gap:2.2cqw; margin-top:4.4cqw; }
.pd-btn{ height:13.4cqw; border-radius:99px; display:flex; align-items:center; justify-content:center; gap:1.6cqw; font-size:4.4cqw; font-weight:650; }
.pd-btn svg{ width:4.4cqw; height:4.4cqw; }
.pd-wa{ background:#128C4A; color:#fff; }
.pd-go{ background:#EDEDEA; color:#15161A; }

.pd-sec{ margin:6cqw 0 1cqw; font-size:4.6cqw; font-weight:750; letter-spacing:-.01em; }
.pd-list{ list-style:none; margin:0; padding:0; }
.pd-list li{ display:flex; justify-content:space-between; gap:3cqw; padding:3.1cqw 0; border-bottom:1px solid #ECECE8; font-size:4.4cqw; }
.pd-list li:last-child{ border-bottom:0; }
.pd-list b{ font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }

.pd-gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2cqw; margin-top:4.4cqw; }
.pd-gal i{ position:relative; display:block; aspect-ratio:1; border-radius:4.4cqw; background:var(--pd-tint); overflow:hidden; transition:background-color .6s; }
.pd-gal i::after{ content:""; position:absolute; inset:28%; border-radius:50%; background:var(--pd-acc); opacity:.8; transition:background-color .6s; }
.pd-gal i:nth-child(2)::after{ inset:30% 22%; border-radius:30%; transform:rotate(12deg); opacity:.55; }
.pd-gal i:nth-child(3)::after{ inset:24% 30% 30% 24%; border-radius:62% 38% 55% 45% / 48% 60% 40% 52%; opacity:.7; }

.pd-map{ position:relative; margin-top:4.4cqw; height:34cqw; border-radius:5.2cqw; background:#E9ECE6; overflow:hidden; }
.pd-map svg{ position:absolute; inset:0; width:100%; height:100%; }
.pd-foot{ margin-top:5cqw; text-align:center; font-size:3.7cqw; color:#9A9CA3; }

.pd-toast{ position:absolute; z-index:6; left:50%; bottom:6cqw; display:flex; align-items:center; gap:2.2cqw; padding:3cqw 4.6cqw 3cqw 3.2cqw; border-radius:99px; background:#15161A; color:#fff; font-size:4.4cqw; font-weight:600; white-space:nowrap; transform:translate(-50%, 180%); opacity:0; }
.pd-toast i{ display:grid; place-items:center; width:6.4cqw; height:6.4cqw; border-radius:50%; background:#1DB954; }
.pd-toast svg{ width:3.8cqw; height:3.8cqw; }

/* tarjetas mini para marquesinas de ejemplos */
.pd-mini{ container-type:inline-size; width:100%; border-radius:9cqw; background:#FBFBF9; overflow:hidden; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; color:#15161A; }
.pd-mini .pd-cover{ margin:4cqw 4cqw 0; height:62cqw; border-radius:7cqw; }
.pd-mini .pd-mini-b{ padding:5cqw 6cqw 7cqw; }
.pd-mini .pd-mini-n{ font-size:8.4cqw; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.pd-mini .pd-mini-c{ margin-top:1.6cqw; font-size:5.2cqw; color:#5D6068; font-weight:500; }
.pd-mini .pd-mini-u{ margin-top:4cqw; font-size:4.6cqw; color:#8A8D94; }

@media (prefers-reduced-motion: reduce){
  .pd-page, .pd-cover, .pd-gal i, .pd-stars svg{ transition:none; }
}