/* ===== DISPLAY ANIMADO — contenido que rota dentro de la pantalla ===== */
.hf-display{position:absolute;inset:0;overflow:hidden;background:#101826;
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:#fff;container-type:size}
.hf-app{position:absolute;inset:0;opacity:0;animation:hfCiclo 15s infinite}
.hf-app:nth-child(1){opacity:1}
.hf-app:nth-child(1){animation-delay:0s}
.hf-app:nth-child(2){animation-delay:5s}
.hf-app:nth-child(3){animation-delay:10s}
@keyframes hfCiclo{0%,34%{opacity:1}40%,100%{opacity:0}}

/* barra de estado comun */
.hf-bar{position:absolute;top:0;left:0;right:0;height:9%;display:flex;align-items:center;
  justify-content:space-between;padding:0 3%;font-size:4cqh;color:#cfd4dc;z-index:4;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.hf-bar .izq,.hf-bar .der{display:flex;gap:.6em;align-items:center}

/* ---------- 1. NAVEGACION ---------- */
.hf-maps{background:#1b2a36}
.hf-maps .mapa{position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 46%,#3d5566 46%,#3d5566 54%,transparent 54%),
    linear-gradient(72deg,transparent 60%,#33495a 60%,#33495a 66%,transparent 66%),
    radial-gradient(circle at 78% 22%,#24404f 0 18%,transparent 18%),
    radial-gradient(circle at 20% 80%,#243f4d 0 14%,transparent 14%),
    #16242e}
.hf-maps .ruta{position:absolute;left:8%;bottom:6%;width:58%;height:70%;
  border-left:1.6cqh solid #4da3ff;border-top:1.6cqh solid #4da3ff;
  border-radius:0 14cqh 0 0;filter:drop-shadow(0 0 1.4cqh rgba(77,163,255,.75))}
.hf-maps .pin{position:absolute;left:7%;bottom:5%;width:4.4cqh;height:4.4cqh;border-radius:50%;
  background:#4da3ff;box-shadow:0 0 0 1.4cqh rgba(77,163,255,.26)}
.hf-maps .tarjeta{position:absolute;left:4%;top:16%;padding:2cqh 3cqh;border-radius:2cqh;
  background:rgba(10,16,22,.82);backdrop-filter:blur(8px)}
.hf-maps .giro{font-size:7cqh;font-weight:800;line-height:1}
.hf-maps .calle{font-size:3.6cqh;color:#9fb4c4;margin-top:.3em}
.hf-maps .eta{position:absolute;right:4%;bottom:6%;text-align:right}
.hf-maps .eta b{display:block;font-size:7.5cqh;font-weight:800;color:#5ee08a;line-height:1}
.hf-maps .eta span{font-size:3.4cqh;color:#9fb4c4}

/* ---------- 2. MUSICA ---------- */
.hf-music{background:linear-gradient(135deg,#2a1b3d,#141020 60%,#0d0a14)}
.hf-music .cover{position:absolute;left:5%;top:20%;width:38cqh;height:38cqh;border-radius:2.4cqh;
  background:linear-gradient(145deg,#ff7a59,#c2439b 55%,#6f3bd1);
  box-shadow:0 2cqh 5cqh rgba(0,0,0,.55)}
.hf-music .cover::after{content:'';position:absolute;inset:34%;border-radius:50%;
  background:#0d0a14;box-shadow:inset 0 0 0 .8cqh rgba(255,255,255,.18)}
.hf-music .info{position:absolute;left:calc(5% + 44cqh);top:24%;right:5%}
.hf-music .tit{font-size:7cqh;font-weight:800;line-height:1.1}
.hf-music .art{font-size:4cqh;color:#b9a7d4;margin-top:.35em}
.hf-music .barra{position:absolute;left:calc(5% + 44cqh);right:5%;bottom:26%;height:1.2cqh;
  border-radius:1cqh;background:rgba(255,255,255,.16);overflow:hidden}
.hf-music .barra i{display:block;height:100%;width:38%;border-radius:1cqh;
  background:linear-gradient(90deg,#ff7a59,#c2439b);animation:hfProg 5s linear infinite}
@keyframes hfProg{from{width:22%}to{width:74%}}
.hf-music .ctrl{position:absolute;left:calc(5% + 44cqh);bottom:9%;display:flex;gap:4cqh;
  align-items:center;font-size:5cqh;color:#d9cdf0}
.hf-music .play{width:9cqh;height:9cqh;border-radius:50%;background:#fff;color:#1a1024;
  display:grid;place-items:center;font-size:4.4cqh}
.hf-music .eq{position:absolute;right:5%;bottom:9%;display:flex;gap:.9cqh;align-items:flex-end;height:11cqh}
.hf-music .eq i{width:1.6cqh;background:linear-gradient(180deg,#ff7a59,#6f3bd1);border-radius:1cqh;
  animation:hfEq .9s ease-in-out infinite alternate}
.hf-music .eq i:nth-child(2){animation-delay:.15s}
.hf-music .eq i:nth-child(3){animation-delay:.3s}
.hf-music .eq i:nth-child(4){animation-delay:.45s}
.hf-music .eq i:nth-child(5){animation-delay:.6s}
@keyframes hfEq{from{height:18%}to{height:100%}}

/* ---------- 3. VIDEO / YOUTUBE ---------- */
.hf-video{background:#0b0b0d}
.hf-video .player{position:absolute;inset:9% 4% 22% 4%;border-radius:1.6cqh;overflow:hidden;
  background:radial-gradient(ellipse at 50% 42%,#2b3a52,#0e141d 72%)}
.hf-video .carretera{position:absolute;left:50%;bottom:0;width:62%;height:68%;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(120,170,255,.16));
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}
.hf-video .linea{position:absolute;left:50%;width:1.3cqh;height:7cqh;background:rgba(255,255,255,.75);
  border-radius:1cqh;transform:translateX(-50%);animation:hfVia 1.5s linear infinite}
.hf-video .linea:nth-child(2){animation-delay:.5s}
.hf-video .linea:nth-child(3){animation-delay:1s}
@keyframes hfVia{from{bottom:72%;opacity:0;transform:translateX(-50%) scale(.45)}
  25%{opacity:1}to{bottom:-8%;opacity:0;transform:translateX(-50%) scale(1.5)}}
.hf-video .auto{position:absolute;left:50%;bottom:15%;width:30cqh;height:15cqh;transform:translateX(-50%);
  border-radius:3.4cqh 3.4cqh 1.2cqh 1.2cqh;
  background:linear-gradient(180deg,#5a6882 0%,#3a4458 42%,#222a38 100%);
  box-shadow:0 0 6cqh rgba(120,170,255,.45), inset 0 .6cqh 1.2cqh rgba(255,255,255,.14)}
/* medallon / ventana trasera */
.hf-video .auto::before{content:'';position:absolute;left:14%;right:14%;top:12%;height:38%;
  border-radius:2.2cqh 2.2cqh .8cqh .8cqh;
  background:linear-gradient(180deg,rgba(170,215,255,.42),rgba(90,130,190,.16))}
/* calaveras */
.hf-video .auto::after{content:'';position:absolute;left:7%;right:7%;bottom:18%;height:2.6cqh;
  border-radius:1.4cqh;
  background:linear-gradient(90deg,#ff2d3d 0 22%,transparent 22% 78%,#ff2d3d 78% 100%);
  box-shadow:0 0 2.4cqh rgba(255,45,61,.85);animation:hfStop 2.6s ease-in-out infinite}
@keyframes hfStop{0%,72%{opacity:.78}78%,88%{opacity:1}94%,100%{opacity:.78}}
/* faros del auto sobre el asfalto */
.hf-video .haz{position:absolute;left:50%;bottom:26%;width:46cqh;height:30cqh;transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 70% at 50% 100%,rgba(190,220,255,.22),transparent 70%);
  pointer-events:none}
.hf-video .ctrlv{position:absolute;left:4%;right:4%;bottom:9%}
.hf-video .seek{height:1.1cqh;border-radius:1cqh;background:rgba(255,255,255,.18);overflow:hidden}
.hf-video .seek i{display:block;height:100%;background:#E20613;animation:hfSeek 5s linear infinite}
@keyframes hfSeek{from{width:12%}to{width:88%}}
.hf-video .meta{display:flex;justify-content:space-between;margin-top:1.6cqh;
  font-size:3.4cqh;color:#9aa4b2}