/* ============================================================
   UBORATECH TV — pantalla tipo kiosco para Android TV / Fire TV
   Estructura: consejos (izq.) · video grande (centro) · próximos (der.)
   Escala con la altura real del navegador del TV (400px → 2160px)
   ============================================================ */

:root{
  --bg:#030d16;
  --bg2:#061a26;
  --panel:#071a27;
  --panel2:#0a2231;
  --line:rgba(56,160,190,.28);
  --accent:#25d7f0;
  --accent-2:#0ea5c4;
  --text:#eaf6fa;
  --muted:#9dbecd;
  --soft:#12405a;
  --radius:1.25rem;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

html{
  /* escala con la altura real del navegador del TV (540, 450, 400px…) sin desbordar */
  font-size:clamp(10px, 2.2vh, 34px);
  background:var(--bg);
}

body{
  height:100vh;height:100dvh;
  overflow:hidden;
  font-family:"Inter","Roboto","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(20,120,160,.30), transparent 60%),
    radial-gradient(900px 600px at 88% 110%, rgba(10,90,130,.35), transparent 62%),
    linear-gradient(160deg,#04121c 0%, #030d16 55%, #020a11 100%);
  cursor:default;
  user-select:none;
}
body.hide-cursor{cursor:none}

.glow{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.5}
.g1{width:38vmin;height:38vmin;left:-8vmin;bottom:-6vmin;background:rgba(37,215,240,.24)}
.g2{width:30vmin;height:30vmin;right:12vmin;top:-10vmin;background:rgba(37,215,240,.14)}

/* ============================ LAYOUT ============================ */
.app{
  position:relative;z-index:1;
  height:100vh;height:100dvh;
  display:grid;
  /* el centro (video) es la columna con más peso */
  grid-template-columns:minmax(0,.96fr) minmax(0,1.18fr) minmax(0,.9fr);
  gap:1rem;
  padding:1.1rem 1.2rem;
  min-width:0;
}

/* ============================ COLUMNA IZQUIERDA ============================ */
.side-left{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:.85rem;
  min-height:0;min-width:0;
}

.brand{
  display:flex;align-items:center;gap:.9rem;min-width:0;
  padding:.1rem .2rem;
}
.logo{
  width:8.4rem;max-width:52%;flex:0 0 auto;display:block;
  filter:drop-shadow(0 0 .6rem rgba(37,215,240,.25));
}
.logo-txt{font-size:1.7rem;font-weight:800;letter-spacing:.02em;color:#fff}
.tagline{
  font-size:.82rem;color:var(--muted);line-height:1.3;
  border-left:1px solid rgba(56,160,190,.35);padding-left:.8rem;
}

/* filtros compactos */
.nav{display:flex;flex-wrap:wrap;gap:.35rem;min-width:0}
.nav-item{
  display:flex;align-items:center;gap:.4rem;
  padding:.42rem .68rem;
  border:1px solid rgba(56,160,190,.22);border-radius:2rem;
  background:rgba(255,255,255,.02);color:#cfe6ef;
  font-size:.78rem;font-weight:600;font-family:inherit;
  cursor:pointer;transition:.2s ease;white-space:nowrap;
}
.nav-item .ico{width:.95rem;height:.95rem;flex:0 0 auto;opacity:.85}
.nav-item .ico svg{width:100%;height:100%;display:block}
.nav-item:hover{background:rgba(37,215,240,.1);color:#fff}
.nav-item.active{
  background:linear-gradient(100deg,var(--accent-2),var(--accent));
  color:#02202b;border-color:transparent;font-weight:800;
  box-shadow:0 0 1.2rem rgba(37,215,240,.35);
}

/* tarjeta de consejos / noticias */
.panel{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:1.15rem;
  padding:1rem 1.05rem .7rem;
  background:
    linear-gradient(165deg, rgba(10,40,58,.96), rgba(5,22,33,.97)),
    radial-gradient(120% 90% at 80% 100%, rgba(37,215,240,.22), transparent 60%);
  border:1px solid var(--line);
  box-shadow:0 1.2rem 2.2rem rgba(0,0,0,.45);
  overflow:hidden;
  min-height:0;
}
.panel:before{
  content:"";position:absolute;inset:0 0 auto 0;height:.16rem;
  background:linear-gradient(90deg,var(--accent),rgba(37,215,240,0));
  transform-origin:left center;z-index:3;
}
.panel-inner{
  position:relative;z-index:2;
  transition:opacity .35s ease, transform .35s ease;
  display:flex;flex-direction:column;
  min-height:0;flex:1 1 auto;overflow:hidden;
}
.panel-inner.out{opacity:0;transform:translateY(.4rem)}
.panel-inner > .badge,
.panel-inner > h2,
.panel-inner > .p-text{flex:0 0 auto}

/* mascota decorativa al fondo de la tarjeta */
.mascota{
  position:absolute;z-index:1;
  right:-8%;bottom:2.6rem;
  height:52%;width:auto;max-width:72%;
  object-fit:contain;
  opacity:.4;pointer-events:none;
  filter:drop-shadow(0 1rem 1.6rem rgba(0,0,0,.6));
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.15), #000 45%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.15), #000 45%);
}

.badge{
  align-self:flex-start;
  font-size:.7rem;font-weight:800;letter-spacing:.14em;
  padding:.3rem .6rem;border-radius:2rem;
  color:#9bebfb;background:rgba(37,215,240,.13);
  border:1px solid rgba(37,215,240,.32);
}
.badge.news{color:#ffd7a1;background:rgba(255,171,64,.13);border-color:rgba(255,171,64,.35)}

.panel h2{
  font-size:1.5rem;line-height:1.14;font-weight:800;
  margin:.6rem 0 .45rem;
  letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.p-text{
  font-size:.88rem;line-height:1.42;color:#d6eaf2;
  margin-bottom:.6rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}

.tips{
  list-style:none;display:flex;flex-direction:column;gap:.4rem;
  overflow:hidden;flex:1;justify-content:flex-start;min-height:0;
}
.tips li{
  display:flex;gap:.55rem;align-items:flex-start;
  flex:0 0 auto;
  padding:.55rem .6rem;
  border-radius:.65rem;
  background:rgba(37,215,240,.07);
  border:1px solid rgba(56,160,190,.22);
}
.tips .num{
  flex:0 0 auto;width:1.25rem;height:1.25rem;border-radius:50%;
  display:grid;place-items:center;
  font-size:.66rem;font-weight:800;color:#052b38;
  background:linear-gradient(140deg,#8fe9fa,var(--accent));
}
.tips .ico2{flex:0 0 auto;width:1.15rem;height:1.15rem;color:#7fd9ee;opacity:.9}
.tips .ico2 svg{width:100%;height:100%;display:block}
.tips b{display:block;font-size:.8rem;line-height:1.24;margin-bottom:.12rem}
.tips span.sub{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.74rem;line-height:1.32;color:#c6dfe9;
}
.tips li > div{min-width:0}

/* noticias: sin la lista de pasos */
.panel-inner.news{justify-content:center}
.panel-inner.news h2{
  font-size:1.36rem;-webkit-line-clamp:4;line-height:1.14;margin-top:.25rem;
}
.panel-inner.news .p-text{
  font-size:.84rem;-webkit-line-clamp:2;line-height:1.4;color:#c9e4ef;
  margin-bottom:.4rem;
}
.panel-inner.news .tips{display:none}
.panel-inner.news .p-more{display:flex;justify-content:flex-start;flex:0 0 auto}

.p-more{display:none;flex-direction:column;gap:.35rem;margin-top:.2rem;flex:1;min-height:0;overflow:hidden}
.p-more .pm-label{font-size:.62rem;font-weight:800;letter-spacing:.14em;color:#8fe9fa;margin-bottom:.1rem}
.p-more li{
  position:relative;padding-left:1rem;margin:0;
  font-size:.8rem;line-height:1.32;color:#e2f2f8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:600;
}
.p-more li:before{
  content:"";position:absolute;left:0;top:.44em;
  width:.34rem;height:.34rem;border-radius:50%;background:var(--accent);opacity:.85;
}

/* barra de tiempo y puntos dentro de la tarjeta */
.tip-bar{
  position:relative;z-index:3;
  height:.2rem;width:100%;margin-top:.55rem;
  border-radius:1rem;background:rgba(255,255,255,.1);overflow:hidden;flex:0 0 auto;
}
.tip-bar i{
  display:block;height:100%;width:0;border-radius:1rem;
  background:linear-gradient(90deg,rgba(37,215,240,.35),var(--accent));
  box-shadow:0 0 .6rem rgba(37,215,240,.5);
}
@keyframes tipFill{from{width:0}to{width:100%}}

.dots{
  position:relative;z-index:3;
  display:flex;gap:.26rem;justify-content:center;
  padding-top:.5rem;flex:0 0 auto;
}
.dots i{width:.34rem;height:.34rem;border-radius:50%;background:rgba(255,255,255,.34);transition:.3s}
.dots i.on{width:1rem;border-radius:1rem;background:var(--accent)}

/* promo al pie de la izquierda */
.panel-promo{
  display:flex;align-items:center;gap:.7rem;
  padding:.65rem .75rem;
  border-radius:.9rem;
  background:linear-gradient(115deg, rgba(37,215,240,.2), rgba(37,215,240,.05));
  border:1px solid rgba(37,215,240,.28);
  min-width:0;
}
.panel-promo .pp-ico{
  flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;color:#8fe9fa;
  background:rgba(37,215,240,.16);border:1px solid rgba(37,215,240,.35);
}
.panel-promo .pp-ico svg{width:1.25rem;height:1.25rem}
.panel-promo .pp-txt{min-width:0}
.panel-promo .pp-tag{
  display:block;font-size:.58rem;font-weight:800;letter-spacing:.14em;color:#8fe9fa;margin-bottom:.15rem;
}
.panel-promo strong{display:block;font-size:.9rem;line-height:1.2}
.panel-promo .pp-sub{display:block;font-size:.7rem;color:#b9dbe8;margin-top:.12rem}
.panel-promo .pp-cta{
  margin-left:auto;flex:0 0 auto;
  font-size:.8rem;font-weight:800;color:#04222e;
  background:linear-gradient(140deg,#8fe9fa,var(--accent));
  padding:.42rem .6rem;border-radius:.55rem;white-space:nowrap;
}

/* ============================ CENTRO: VIDEO ============================ */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-width:0;min-height:0;
  overflow:hidden;
}
.player-box{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.player-frame{
  position:relative;
  height:100%;
  aspect-ratio:9/16;
  max-width:100%;
  border-radius:1.1rem;
  overflow:hidden;
  background:#02121b;
  border:1px solid rgba(70,180,205,.4);
  box-shadow:0 1.6rem 3rem rgba(0,0,0,.6), 0 0 2.4rem rgba(37,215,240,.12) inset;
  cursor:pointer;
}

#video{
  position:relative;z-index:1;
  width:100%;height:100%;
  object-fit:contain;
  background:#02121b;
  display:block;
}

/* fotos: fundido + zoom lento (Ken Burns) */
.foto{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform-origin:center;
  transition:opacity .55s ease;
  pointer-events:none;
}
.foto.show{opacity:1;animation:kenburns var(--foto-s,7s) ease-out both}
.player-frame.foto-mode .video-shade{
  background:linear-gradient(to top, rgba(2,10,17,.9) 0%, rgba(2,10,17,0) 34%);
}

/* cortinilla de cambio entre video y foto */
.xfade{
  position:absolute;inset:0;z-index:3;
  background:#02121b;opacity:0;pointer-events:none;
}
.xfade.on{animation:xfade .6s ease}
@keyframes xfade{0%{opacity:0}40%{opacity:.92}100%{opacity:0}}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}

.video-shade{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(to top, rgba(2,10,17,.94) 0%, rgba(2,10,17,.35) 14%, rgba(2,10,17,0) 30%),
    linear-gradient(to bottom, rgba(2,10,17,.8) 0%, rgba(2,10,17,0) 22%);
}

.player-top{
  position:absolute;z-index:4;top:.75rem;left:.75rem;right:.75rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;pointer-events:none;
}
.chip{
  font-size:.72rem;font-weight:700;letter-spacing:.03em;
  padding:.38rem .7rem;border-radius:2rem;
  background:rgba(6,29,40,.72);color:#dff6fb;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  max-width:82%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chip.title{font-weight:800}
.chip.ghost{background:rgba(2,10,17,.55);color:#c9e6f0}
.dots-btn{
  pointer-events:auto;flex:0 0 auto;
  width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(6,29,40,.72);color:#dff6fb;
  cursor:pointer;backdrop-filter:blur(6px);
}
.dots-btn svg{width:1.1rem;height:1.1rem}

/* acciones laterales del video */
.actions{
  position:absolute;z-index:4;right:.55rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.85rem;
}
.act{
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  background:none;border:0;color:#eaf6fa;font-family:inherit;cursor:pointer;
}
.act svg{
  width:2.5rem;height:2.5rem;padding:.62rem;
  border-radius:50%;
  background:rgba(6,29,40,.62);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  transition:.2s ease;
}
.act small{font-size:.6rem;color:#cfe6ef;font-weight:600}
.act:hover svg{border-color:var(--accent);color:var(--accent)}
.act.on svg{background:linear-gradient(140deg,#8fe9fa,var(--accent));color:#04222e;border-color:transparent}
.act.on small{color:#8fe9fa}

.player-ctrl{
  position:absolute;z-index:4;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .7rem .6rem;
  transition:opacity .35s ease;
}
.player-frame.idle .player-ctrl{opacity:.3}
.ctrl-btn{
  width:1.6rem;height:1.6rem;flex:0 0 auto;
  display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:#fff;
  cursor:pointer;opacity:.95;
}
.ctrl-btn.small{width:1.3rem;height:1.3rem;opacity:.85}
.ctrl-btn:hover{color:var(--accent)}
.time{font-size:.7rem;color:#cfe6ef;font-variant-numeric:tabular-nums;min-width:1.9rem;text-align:center}
.bar{flex:1;height:.22rem;border-radius:1rem;background:rgba(255,255,255,.3);overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--accent);border-radius:1rem;transition:width .2s linear}

.start-overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:rgba(2,10,17,.82);border:0;color:#fff;font-family:inherit;cursor:pointer;
}
.start-overlay strong{font-size:1rem}
.start-overlay small{font-size:.75rem;color:var(--muted)}
.play-big{
  width:3.2rem;height:3.2rem;border-radius:50%;
  background:var(--accent);position:relative;
  box-shadow:0 0 2rem rgba(37,215,240,.6);
}
.play-big:after{
  content:"";position:absolute;left:36%;top:28%;
  border-left:1rem solid #032430;
  border-top:.66rem solid transparent;border-bottom:.66rem solid transparent;
}
.big-pause{
  position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(circle at center, rgba(2,10,17,.55), rgba(2,10,17,.15) 55%, transparent 72%);
  display:grid;place-items:center;
}
.big-pause:after{
  content:"";width:2.8rem;height:2.8rem;
  background:
    linear-gradient(#eaf6fa,#eaf6fa) left/38% 100% no-repeat,
    linear-gradient(#eaf6fa,#eaf6fa) right/38% 100% no-repeat;
  opacity:.9;border-radius:.2rem;
}

/* ============================ DERECHA: RELOJ + PRÓXIMOS ============================ */
.side-right{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:.85rem;
  min-height:0;min-width:0;
}

.clock{
  display:flex;align-items:center;justify-content:flex-end;gap:.7rem;
  padding:.1rem .2rem;
}
.clock strong{
  font-size:2.15rem;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.clock-date{
  display:flex;flex-direction:column;gap:.1rem;
  font-size:.72rem;color:var(--muted);line-height:1.25;
  border-left:1px solid rgba(56,160,190,.35);padding-left:.7rem;
}
.clock-date #clockDay{color:#eaf6fa;font-weight:700}

.next{
  display:flex;flex-direction:column;
  min-height:0;min-width:0;
  border-radius:1.15rem;
  padding:.9rem .8rem .75rem;
  background:linear-gradient(165deg, rgba(9,32,46,.92), rgba(4,18,27,.94));
  border:1px solid var(--line);
  box-shadow:0 1.2rem 2.2rem rgba(0,0,0,.4);
  overflow:hidden;
}
.next-head{
  display:flex;align-items:center;gap:.55rem;
  padding:0 .1rem .7rem;flex:0 0 auto;min-width:0;
}
.next-ico{
  flex:0 0 auto;width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;color:#04222e;
  background:linear-gradient(140deg,#8fe9fa,var(--accent));
}
.next-ico svg{width:1rem;height:1rem}
.next-head h3{font-size:1.02rem;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.rail-count{margin-left:auto;font-size:.7rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.rail-track{
  display:flex;flex-direction:column;gap:.5rem;
  flex:1;min-height:0;min-width:0;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;scroll-behavior:smooth;
  padding-bottom:.1rem;
}
.rail-track::-webkit-scrollbar{display:none}

.card{
  position:relative;flex:0 0 auto;
  display:grid;grid-template-columns:4.4rem minmax(0,1fr);align-items:center;gap:.7rem;
  width:100%;min-width:0;
  padding:.4rem;
  border-radius:.8rem;
  border:1px solid rgba(56,160,190,.2);
  background:rgba(255,255,255,.02);
  color:inherit;font-family:inherit;text-align:left;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s, background .2s;
}
.card img,
.card .thumb-empty{
  width:4.4rem;height:3.3rem;object-fit:cover;display:grid;place-items:center;
  border-radius:.55rem;background:#06202c;
  transition:transform .35s ease;
}
.card .thumb-empty{
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(37,215,240,.22), transparent 60%),
    linear-gradient(150deg,#0a2b3c,#06202c);
  color:rgba(143,233,250,.85);
}
.card .thumb-empty svg{width:1.3rem;height:1.3rem;filter:drop-shadow(0 0 .4rem rgba(37,215,240,.35))}
.card.sin-poster .cap{color:#dff6fb}
.card .cap{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.8rem;font-weight:700;line-height:1.25;color:#f2fbff;
}
.card .card-sub{
  display:block;
  font-size:.66rem;font-weight:500;color:#9dbecd;line-height:1.25;margin-top:.18rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card .dur{
  position:absolute;left:.42rem;bottom:.42rem;
  font-size:.6rem;font-weight:800;
  background:rgba(2,10,17,.82);border-radius:.35rem;
  padding:.08rem .28rem;color:#d8eef7;
}
.card .dot-play{
  position:absolute;left:.5rem;top:.5rem;width:.45rem;height:.45rem;border-radius:50%;
  background:var(--accent);opacity:0;transition:.2s;
  box-shadow:0 0 0 .24rem rgba(37,215,240,.2);
}
.card:hover{background:rgba(37,215,240,.08);border-color:rgba(37,215,240,.5);transform:translateX(-.15rem)}
.card.playing{
  background:linear-gradient(100deg, rgba(37,215,240,.16), rgba(37,215,240,.03));
  border-color:var(--accent);
  box-shadow:0 0 0 .08rem var(--accent), 0 .8rem 1.6rem rgba(3,20,30,.5);
}
.card.playing .dot-play{opacity:1}

.panel-foot{
  display:flex;align-items:center;gap:.5rem;
  padding:0 .2rem;
  font-size:.68rem;color:#b9d6e2;white-space:nowrap;overflow:hidden;
}
.panel-foot .pf-brand{font-weight:800;letter-spacing:.16em;color:#cdeaf4;font-size:.66rem}
.panel-foot .pf-sep{width:.26rem;height:.26rem;border-radius:50%;background:rgba(37,215,240,.6);flex:0 0 auto}
.panel-foot #pfCount{margin-left:auto;font-variant-numeric:tabular-nums}

/* ============================ RESPONSIVE ============================ */
/* pantallas más angostas (TV box con navegador raro, tablets) */
@media (max-aspect-ratio: 16/10){
  .app{grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr) minmax(0,.86fr);gap:.8rem;padding:.9rem 1rem}
  .panel h2{font-size:1.32rem}
  .clock strong{font-size:1.85rem}
  .card{grid-template-columns:3.9rem minmax(0,1fr)}
  .card img, .card .thumb-empty{width:3.9rem;height:3rem}
}
@media (max-aspect-ratio: 4/3){
  .app{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr)}
  .side-right{display:none}
}

/* pantallas de 720p */
@media (max-height: 780px){
  .app{gap:.7rem;padding:.8rem .85rem}
  .side-left{gap:.6rem}
  .logo{width:7.4rem}
  .tagline{font-size:.72rem}
  .nav-item{font-size:.72rem;padding:.36rem .58rem}
  .panel{padding:.85rem .9rem .6rem}
  .panel h2{font-size:1.36rem}
  .p-text{font-size:.82rem}
  .clock strong{font-size:1.8rem}
  .next{padding:.8rem .7rem .6rem}
  .next-head h3{font-size:.94rem}
  .mascota{height:48%;opacity:.36}
}
/* pantallas muy bajas (Fire TV en 960x540 CSS px) */
@media (max-height: 620px){
  .app{gap:.6rem;padding:.65rem .7rem}
  .side-left{gap:.5rem}
  .logo{width:6.4rem}
  .tagline{font-size:.66rem}
  .nav-item{font-size:.66rem;padding:.3rem .5rem}
  .nav-item .ico{width:.8rem;height:.8rem}
  .panel{padding:.7rem .75rem .5rem}
  .panel h2{font-size:1.18rem}
  .p-text{font-size:.76rem;-webkit-line-clamp:2}
  .tips li{padding:.42rem .48rem;gap:.42rem}
  .tips b{font-size:.74rem}
  .tips span.sub{font-size:.68rem;-webkit-line-clamp:1}
  .tips .ico2{display:none}
  .mascota{height:42%;opacity:.32}
  .panel-promo{padding:.5rem .6rem}
  .panel-promo strong{font-size:.8rem}
  .panel-promo .pp-sub{display:none}
  .clock strong{font-size:1.55rem}
  .clock-date{font-size:.62rem}
  .next{padding:.65rem .6rem .5rem}
  .next-head{gap:.4rem;padding-bottom:.5rem}
  .next-ico{width:1.4rem;height:1.4rem}
  .next-head h3{font-size:.82rem}
  .card{grid-template-columns:3.3rem minmax(0,1fr);padding:.32rem;gap:.5rem}
  .card img, .card .thumb-empty{width:3.3rem;height:2.5rem}
  .card .cap{font-size:.72rem}
  .card .card-sub{font-size:.6rem}
  .act svg{width:2.1rem;height:2.1rem;padding:.5rem}
  .act small{font-size:.54rem}
  .panel-foot{font-size:.6rem}
}
/* navegador con barras: 900x400 CSS px */
@media (max-height: 470px){
  .app{gap:.5rem;padding:.5rem .6rem}
  .tagline{display:none}
  .logo{width:8rem}
  .nav-item{font-size:.62rem;padding:.26rem .44rem}
  .panel h2{font-size:1.06rem;-webkit-line-clamp:2}
  .p-text{display:none}
  .tips li{padding:.34rem .4rem}
  .tips b{font-size:.7rem}
  .tips span.sub{display:none}
  .mascota{display:none}
  .panel-promo{display:none}
  .clock strong{font-size:1.3rem}
  .clock-date{font-size:.56rem}
  .next-head h3{font-size:.74rem}
  .card{grid-template-columns:2.8rem minmax(0,1fr)}
  .card img, .card .thumb-empty{width:2.8rem;height:2.1rem}
  .card .cap{font-size:.66rem;-webkit-line-clamp:1}
  .card .card-sub{display:none}
  .actions{display:none}
  .panel-foot{display:none}
}

/* mensaje cuando una categoría no tiene videos */
.rail-empty{
  align-self:center;
  font-size:.8rem;color:var(--muted);padding:.8rem .2rem;text-align:center;
}

/* ============================ animaciones ============================ */
@keyframes riseIn{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{0%{opacity:0;transform:scale(.86)}70%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-.8rem)}to{opacity:1;transform:translateX(0)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(255,171,64,.55);opacity:1}50%{box-shadow:0 0 0 .5rem rgba(255,171,64,0);opacity:.65}}
@keyframes sweep{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
@keyframes wordIn{from{opacity:0;transform:translateY(.42em) rotateX(-35deg)}to{opacity:1;transform:none}}
@keyframes shine{from{background-position:120% 0}to{background-position:-20% 0}}

/* texto de los consejos: aparece palabra por palabra */
.reveal-w{
  display:inline-block;opacity:0;transform:translateY(.42em);
  animation:wordIn .42s cubic-bezier(.2,.8,.3,1.15) both;
  will-change:transform,opacity;
}

/* titular con brillo que recorre la letra */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .panel h2{
    background:linear-gradient(100deg,#eaf6fa 0%,#eaf6fa 38%,#8fe9fa 50%,#eaf6fa 62%,#eaf6fa 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}

.panel-inner.anim .panel-badge,
.panel-inner.anim .badge{animation:popIn .42s cubic-bezier(.2,.9,.3,1.2) both}
.panel-inner.anim h2{animation:riseIn .5s .08s both, shine 6.5s linear infinite}
.panel-inner.anim .p-text{animation:riseIn .5s .16s both}
.panel-inner.anim .tips li:nth-child(1){animation:slideRight .45s .24s both}
.panel-inner.anim .tips li:nth-child(2){animation:slideRight .45s .32s both}
.panel-inner.anim .tips li:nth-child(3){animation:slideRight .45s .40s both}
.panel-inner.anim .tips li:nth-child(4){animation:slideRight .45s .48s both}
.panel-inner.anim .p-more .pm-label{animation:riseIn .4s .2s both}
.panel-inner.anim .p-more li:nth-child(2){animation:riseIn .45s .26s both}
.panel-inner.anim .p-more li:nth-child(3){animation:riseIn .45s .33s both}
.panel-inner.anim .p-more li:nth-child(4){animation:riseIn .45s .4s both}
.panel-inner.anim .tips .num{animation:popIn .4s both}
.panel-inner.anim .tips li:nth-child(1) .num{animation-delay:.28s}
.panel-inner.anim .tips li:nth-child(2) .num{animation-delay:.36s}
.panel-inner.anim .tips li:nth-child(3) .num{animation-delay:.44s}
.panel-inner.anim .tips li:nth-child(4) .num{animation-delay:.52s}

/* punto "en directo" en las noticias */
.badge.news{position:relative;padding-left:1.45rem}
.badge.news:before{
  content:"";position:absolute;left:.55rem;top:50%;margin-top:-.18rem;
  width:.36rem;height:.36rem;border-radius:50%;
  background:#ffb340;animation:pulseDot 2.2s ease-in-out infinite;
}
.tips .ico2{transition:transform .3s}
.tips li:hover .ico2{transform:scale(1.12)}