/* Mandoplay — sitio público. Sin frameworks. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/figtree-latin.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/manrope-800-latin.woff2) format("woff2")}

:root{
  --noche:#121417;
  --noche-2:#1B1E23;
  --noche-3:#252930;
  --linea:#2F343C;
  --boton:#FF5A36;
  --boton-osc:#B33A1E;
  --play-osc:#FF7A59;
  --papel:#F6F3EE;
  --papel-2:#ECE7DF;
  --gris:#A9ADB4;      /* 8.3:1 sobre Noche */
  --gris-papel:#55524D;/* 7.3:1 sobre Papel */
  --ancho:1120px;
  --radio:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--noche);color:var(--papel);font-family:"Figtree",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--play-osc);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:"Manrope",system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0}
h2{font-size:clamp(1.9rem,4.2vw,2.9rem)}
h3{font-size:1.2rem;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--boton);outline-offset:3px;border-radius:6px}
.papel :focus-visible{outline-color:var(--boton-osc)}
.salto{position:absolute;left:16px;top:-60px;background:var(--papel);color:var(--noche);padding:10px 14px;border-radius:8px;font-weight:600;z-index:10}
.salto:focus{top:12px}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 20px}
@media (min-width:720px){.envoltura{padding:0 32px}}

/* Marca */
.marca{font-family:"Manrope",system-ui,sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--papel)}
.marca b{font-weight:800;color:var(--play-osc)}
.papel .marca{color:var(--noche)}
.papel .marca b{color:var(--boton-osc)}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:5;background:rgba(18,20,23,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.cabecera .envoltura{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.cabecera .logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.cabecera .logo svg{width:30px;height:30px}
.cabecera .logo .marca{font-size:1.45rem}
.cabecera nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
.cabecera nav a{color:var(--papel);text-decoration:none;font-weight:500;padding:8px 12px;border-radius:8px;font-size:.98rem}
.cabecera nav a:hover{background:var(--noche-3)}
.cabecera nav .opcional{display:none}
@media (min-width:760px){.cabecera nav .opcional{display:block}}
.cabecera nav a.boton-mini{background:var(--boton);color:var(--noche);font-weight:600}
.cabecera nav a.boton-mini:hover{background:var(--play-osc)}

/* Botones */
.botones{display:flex;flex-wrap:wrap;gap:12px}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:1.05rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit}
.boton-primario{background:var(--boton);color:var(--noche)}
.boton-primario:hover{background:var(--play-osc)}
.boton-secundario{border-color:#4A505A;color:var(--papel);background:transparent}
.boton-secundario:hover{border-color:var(--papel)}

/* Hero */
.hero{padding:56px 0 72px;text-align:center;overflow:hidden}
@media (min-width:900px){.hero{padding:88px 0 112px}}
.hero-logo{display:flex;flex-direction:column;align-items:center;gap:6px}
.mp-stage{width:clamp(150px,34vw,230px);aspect-ratio:1}
.mp-stage svg{width:100%;height:100%;overflow:visible}
.hero h1{font-size:clamp(3.2rem,11vw,6.2rem)}
.hero .entrada{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:28px}
.hero .lema{font-size:clamp(1.15rem,2.4vw,1.4rem);max-width:34em;color:var(--papel)}
.hero .lema span{display:block;color:var(--gris);font-size:.88em;margin-top:6px}
.hero .botones{justify-content:center}

/* Animación del logo: 3,6 s, una vez, se queda quieta al final */
@keyframes mp-rise{0%{transform:translateY(70px) rotate(-10deg);opacity:0}17%{transform:translateY(0) rotate(-10deg);opacity:1}27%,100%{transform:translateY(0) rotate(0deg);opacity:1}}
@keyframes mp-body{0%,36%{opacity:1;transform:scale(1)}58%,100%{opacity:0;transform:scale(.86)}}
@keyframes mp-press{0%,25%{transform:scale(1)}30%{transform:scale(.8)}36%{transform:scale(1.06)}40%,100%{transform:scale(1)}}
@keyframes mp-btnbg{0%,38%{opacity:1}54%,100%{opacity:0}}
@keyframes mp-play{0%,36%{transform:translate(4px,-16px) scale(.34);fill:#FFFFFF}58%,100%{transform:translate(0,0) scale(1);fill:#FF5A36}}
@keyframes mp-wave1{0%,55%{opacity:0;transform:translate(-8px,8px)}68%,100%{opacity:1;transform:translate(0,0)}}
@keyframes mp-wave2{0%,62%{opacity:0;transform:translate(-8px,8px)}75%,100%{opacity:.55;transform:translate(0,0)}}
@keyframes mp-word{0%,64%{opacity:0;transform:translateX(-16px)}80%,100%{opacity:1;transform:translateX(0)}}
@keyframes mp-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mp-stage{animation:mp-rise 3.6s cubic-bezier(.2,.9,.25,1) both;transform-origin:50% 90%}
.mp-body{animation:mp-body 3.6s cubic-bezier(.4,0,.2,1) both;transform-box:view-box;transform-origin:60px 60px}
.mp-btn{animation:mp-press 3.6s cubic-bezier(.3,.7,.3,1) both;transform-box:view-box;transform-origin:60px 42px}
.mp-btnbg{animation:mp-btnbg 3.6s ease-out both}
.mp-play{animation:mp-play 3.6s cubic-bezier(.5,0,.15,1) both;transform-box:view-box;transform-origin:57px 58px}
.mp-w1{animation:mp-wave1 3.6s cubic-bezier(.2,.9,.25,1) both}
.mp-w2{animation:mp-wave2 3.6s cubic-bezier(.2,.9,.25,1) both}
.mp-word{animation:mp-word 3.6s cubic-bezier(.2,.9,.25,1) both}
.hero .entrada{animation:mp-fade .7s 2.7s cubic-bezier(.2,.9,.25,1) both}
@media (prefers-reduced-motion:reduce){
  .mp-stage,.mp-body,.mp-btn,.mp-btnbg,.mp-play,.mp-w1,.mp-w2,.mp-word,.hero .entrada{animation:none}
  .mp-body,.mp-btnbg{opacity:0}
  .mp-play{fill:#FF5A36}
  .mp-w2{opacity:.55}
}

/* Secciones */
.seccion{padding:80px 0}
@media (min-width:900px){.seccion{padding:112px 0}}
.seccion.papel{background:var(--papel);color:var(--noche)}
.seccion.papel a{color:var(--boton-osc)}
.antetitulo{font-weight:600;font-size:.95rem;color:var(--play-osc);margin-bottom:12px;letter-spacing:.01em}
.papel .antetitulo{color:var(--boton-osc)}
.cabeza{max-width:40em;margin-bottom:44px}
.cabeza p{margin-top:16px;color:var(--gris);font-size:1.1rem}
.papel .cabeza p{color:var(--gris-papel)}

/* Pantallas de la app (maqueta en HTML) */
.pantallas{display:grid;gap:40px}
.pantalla figcaption{margin-top:14px;color:var(--gris);font-size:.98rem}
.pantalla figcaption strong{color:var(--papel);font-weight:600}
.pantalla{margin:0}
@media (min-width:960px){
  .pantallas{grid-template-columns:repeat(2,1fr);gap:48px 40px}
  .pantalla.grande{grid-column:1/-1}
}
.tele{background:#050607;border-radius:14px;padding:clamp(6px,1.2%,14px);box-shadow:0 0 0 1px #2A2E35,0 30px 60px -30px rgba(0,0,0,.8)}
.tele-pie{width:22%;height:10px;margin:0 auto;background:#1E2126;border-radius:0 0 8px 8px}
.ui{container-type:inline-size;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#15171B;color:#F6F3EE;font-family:"Figtree",system-ui,sans-serif;position:relative}
.ui *{line-height:1.25}
.ui-barra{display:flex;align-items:center;gap:3cqw;padding:2.2cqw 3.4cqw;font-size:1.55cqw}
.ui-barra svg{width:3.4cqw;height:3.4cqw;flex:none}
.ui-barra .pest{color:#A9ADB4;font-weight:500}
.ui-barra .pest.activa{color:#F6F3EE;font-weight:600;border-bottom:.3cqw solid #FF5A36;padding-bottom:.4cqw}
.ui-barra .hora{margin-left:auto;color:#A9ADB4;font-variant-numeric:tabular-nums}
.ui-dest{margin:0 3.4cqw;height:29.5cqw;border-radius:1.4cqw;padding:3.4cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:1cqw;
  background:#20242B;position:relative;overflow:hidden}
.ui-dest::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60cqw 30cqw at 85% 20%,#3A3F48 0,transparent 70%),
  linear-gradient(90deg,#1A1D22 25%,transparent 75%)}
.ui-dest>*{position:relative}
.ui-dest .canal{font-size:1.4cqw;color:#FF7A59;font-weight:600}
.ui-dest .titulo{font-family:"Manrope",sans-serif;font-weight:800;font-size:4cqw;letter-spacing:-.03em}
.ui-dest .meta{font-size:1.5cqw;color:#C9CCD1}
.ui-dest .prog{width:26cqw;height:.6cqw;background:#3A3F48;border-radius:1cqw;margin-top:.6cqw;overflow:hidden}
.ui-dest .prog i{display:block;height:100%;width:62%;background:#FF5A36}
.ui-dest .acciones{display:flex;gap:1.2cqw;margin-top:1.4cqw}
.ui-dest .acciones span{font-size:1.4cqw;font-weight:600;padding:.9cqw 2cqw;border-radius:5cqw;background:#F6F3EE;color:#121417}
.ui-dest .acciones span+span{background:#2E333B;color:#F6F3EE}
.ui-fila{padding:2.2cqw 3.4cqw 0}
.ui-fila h4{margin:0 0 1.3cqw;font-size:1.6cqw;font-weight:600}
.ui-tarjetas{display:flex;gap:1.6cqw}
.ui-tarjeta{flex:1 1 0;min-width:0;aspect-ratio:16/10;border-radius:1cqw;background:#23272E;display:flex;flex-direction:column;justify-content:space-between;padding:1.2cqw;font-size:1.25cqw}
.ui-tarjeta .nombre{font-family:"Manrope",sans-serif;font-weight:800;font-size:2.1cqw;letter-spacing:-.03em}
.ui-tarjeta .ahora{color:#A9ADB4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-tarjeta.foco{box-shadow:0 0 0 .45cqw #FF5A36;transform:scale(1.06);background:#2C3139}
/* Guía (pantalla pequeña: todo más grande) */
.ui.peq .ui-barra{font-size:2.5cqw;gap:3.6cqw;padding:2.8cqw 4cqw}
.ui.peq .ui-barra svg{width:5cqw;height:5cqw}
.ui.peq .ui-barra .pest.activa{border-bottom-width:.45cqw}
.ui-guia{margin:0 4cqw;display:grid;grid-template-columns:17cqw 1fr;gap:1.2cqw;font-size:2.3cqw}
.ui-guia .horas{grid-column:2;display:grid;grid-template-columns:repeat(4,1fr);color:#A9ADB4;font-variant-numeric:tabular-nums;padding-bottom:.4cqw}
.ui-guia .cn{background:#1E2227;border-radius:1cqw;padding:1.8cqw 1.6cqw;font-family:"Manrope",sans-serif;font-weight:800;font-size:2.5cqw;letter-spacing:-.03em;display:flex;align-items:center}
.ui-guia .progs{display:flex;gap:1cqw;min-width:0}
.ui-guia .progs span{min-width:0;background:#23272E;border-radius:1cqw;padding:1.8cqw 1.6cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#D5D8DC}
.ui-guia .progs span.ya{background:#2B3038;color:#F6F3EE}
.ui-guia .progs span.foco{box-shadow:0 0 0 .55cqw #FF5A36 inset;background:#2E2420;color:#F6F3EE;font-weight:600}
.ui-ficha{position:absolute;left:4cqw;right:4cqw;bottom:3cqw;display:flex;justify-content:space-between;align-items:flex-end;font-size:2.2cqw;color:#C9CCD1}
.ui-ficha b{display:block;font-family:"Manrope",sans-serif;font-weight:800;font-size:3.4cqw;color:#F6F3EE;letter-spacing:-.03em;margin-bottom:.4cqw}
/* Tema claro + PIN */
.ui.claro{background:#F6F3EE;color:#121417}
.ui.claro .ui-barra .pest{color:#55524D}
.ui.claro .ui-barra .pest.activa{color:#121417;border-color:#B33A1E}
.ui.claro .ui-barra .hora{color:#55524D}
.ui-ajustes{display:grid;grid-template-columns:28cqw 1fr;gap:3cqw;padding:1cqw 4cqw}
.ui-menu{display:flex;flex-direction:column;gap:.8cqw;font-size:2.3cqw}
.ui-menu span{padding:1.5cqw 2cqw;border-radius:1cqw;color:#3B3936}
.ui-menu span.sel{background:#121417;color:#F6F3EE;font-weight:600}
.ui-panel{background:#FFFFFF;border-radius:1.6cqw;padding:3.4cqw;box-shadow:0 .3cqw 1.6cqw rgba(18,20,23,.08)}
.ui-panel h5{margin:0;font-family:"Manrope",sans-serif;font-weight:800;font-size:3.8cqw;letter-spacing:-.03em}
.ui-panel p{font-size:2.2cqw;color:#55524D;margin-top:1cqw}
.ui-pin{display:flex;gap:1.6cqw;margin-top:2.6cqw}
.ui-pin span{width:8cqw;height:9cqw;border-radius:1.2cqw;background:#ECE7DF;display:grid;place-items:center;font-size:4cqw;color:#121417}
.ui-pin span.foco{box-shadow:0 0 0 .55cqw #FF5A36;background:#FFF}
.ui-teclado{display:grid;grid-template-columns:repeat(5,6.6cqw);gap:1cqw;margin-top:2.6cqw;font-size:2.4cqw;font-weight:600}
.ui-teclado span{height:5.6cqw;border-radius:1cqw;background:#ECE7DF;display:grid;place-items:center}
.ui-teclado span.foco{background:#121417;color:#F6F3EE;box-shadow:0 0 0 .5cqw #FF5A36}

/* Qué hace */
.funciones{display:grid;gap:14px;list-style:none;margin:0;padding:0}
@media (min-width:640px){.funciones{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.funciones{grid-template-columns:repeat(4,1fr)}}
.funciones li{background:#FFFFFF;border-radius:var(--radio);padding:24px 22px 26px;border:1px solid #E3DDD3}
.funciones svg{width:30px;height:30px;margin-bottom:16px;color:var(--boton-osc)}
.funciones p{margin-top:8px;color:var(--gris-papel);font-size:1rem;line-height:1.55}

/* Dónde funciona */
.dispositivos{display:grid;gap:14px;list-style:none;margin:0;padding:0}
@media (min-width:760px){.dispositivos{grid-template-columns:repeat(3,1fr)}}
.dispositivos li{border:1px solid var(--linea);border-radius:var(--radio);padding:24px;background:var(--noche-2)}
.dispositivos p{margin-top:8px;color:var(--gris);font-size:1rem}
.nota-tele{margin-top:14px;border-radius:var(--radio);padding:24px;background:var(--noche-3);display:grid;gap:8px}
@media (min-width:760px){.nota-tele{grid-template-columns:auto 1fr;gap:24px;align-items:center}}
.nota-tele h3{white-space:nowrap}
.nota-tele p{color:#D5D8DC}

/* Instalar */
.pasos{list-style:none;counter-reset:paso;margin:0 0 40px;padding:0;display:grid;gap:12px}
@media (min-width:860px){.pasos{grid-template-columns:repeat(3,1fr);gap:20px}}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;color:#2B2A27}
.pasos li::before{content:counter(paso);width:40px;height:40px;border-radius:50%;background:var(--noche);color:var(--papel);display:grid;place-items:center;font-family:"Manrope",sans-serif;font-weight:800}
.pasos strong{color:var(--noche)}
.codigos{display:grid;gap:18px}
@media (min-width:860px){.codigos{grid-template-columns:1fr 1fr;gap:24px}}
.codigo{background:var(--noche);color:var(--papel);border-radius:18px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:18px}
.codigo h3{font-size:1.25rem}
.codigo .para{color:var(--gris);font-size:.98rem;margin-top:4px}
.codigo-fila{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.codigo-num{font-family:"Manrope",sans-serif;font-weight:800;font-size:clamp(2.6rem,9vw,3.6rem);letter-spacing:.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--papel)}
.copiar{min-height:48px;padding:0 20px;border-radius:999px;border:2px solid #4A505A;background:transparent;color:var(--papel);font:600 1rem "Figtree",sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.copiar:hover{border-color:var(--papel)}
.copiar.hecho{border-color:var(--boton);color:var(--play-osc)}
.copiar svg{width:18px;height:18px}
.enlace-directo{font-size:.98rem;color:var(--gris);border-top:1px solid var(--linea);padding-top:16px}
.codigo .enlace-directo a{color:var(--play-osc);word-break:break-all}
.ayuda{margin-top:32px;color:var(--gris-papel);max-width:44em}

/* Cuenta */
.cuenta{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.cuenta{grid-template-columns:1.1fr 1fr;gap:64px}}
.cuenta .texto p{color:#D5D8DC;margin-top:16px;font-size:1.1rem}
.cuenta .texto p.fuerte{color:var(--papel);font-size:1.3rem;font-weight:500;margin-top:20px}
.formatos{display:grid;gap:12px}
.formato{border:1px solid var(--linea);border-radius:var(--radio);padding:20px 22px;background:var(--noche-2)}
.formato code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;color:var(--play-osc)}
.formato p{color:var(--gris);font-size:1rem;margin-top:6px}

/* Pie */
.pie{border-top:1px solid var(--linea);padding:32px 0 40px;color:var(--gris);font-size:.98rem}
.pie .envoltura{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.pie .marca{font-size:1.3rem}
.pie ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0}
.pie a{color:var(--papel)}

/* Página de privacidad */
.legal{background:var(--papel);color:var(--noche);padding:56px 0 88px}
.legal .envoltura{max-width:760px}
.legal h1{font-size:clamp(2.2rem,6vw,3.2rem)}
.legal .fecha{color:var(--gris-papel);margin-top:12px}
.legal .resumen{margin:32px 0 8px;background:#FFFFFF;border:1px solid #E3DDD3;border-radius:var(--radio);padding:22px 24px}
.legal .resumen p+p{margin-top:8px}
.legal h2{font-size:1.5rem;margin:48px 0 12px;letter-spacing:-.02em}
.legal h3{font-size:1.08rem;margin:24px 0 6px}
.legal p,.legal li{color:#2B2A27}
.legal p+p{margin-top:12px}
.legal ul{padding-left:1.2em;margin:10px 0 0}
.legal li{margin-top:6px}
.legal a{color:var(--boton-osc)}
.legal strong{color:var(--noche)}
.tabla{width:100%;border-collapse:collapse;margin-top:14px;font-size:.98rem}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid #DDD6CB}
.tabla th{font-weight:600;color:var(--noche);background:var(--papel-2)}
@media (max-width:640px){
  .tabla thead{display:none}
  .tabla tr{display:block;border-bottom:1px solid #DDD6CB;padding:10px 0}
  .tabla td{display:block;border:0;padding:4px 0}
  .tabla td::before{content:attr(data-t);display:block;font-weight:600;color:var(--gris-papel);font-size:.85rem}
}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.legal ul+p{margin-top:14px}

/* Contacto */
.contacto-caja{display:grid;gap:32px}
@media (min-width:900px){.contacto-caja{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start}}
.formulario{display:grid;gap:16px;background:var(--noche-2);border:1px solid var(--linea);border-radius:20px;padding:24px}
.campo{display:grid;gap:6px}
.campo label{font-weight:600;font-size:.95rem}
.campo input,.campo select,.campo textarea{font:inherit;color:var(--papel);background:var(--noche);border:1px solid var(--linea);border-radius:12px;padding:12px 14px;min-height:48px;box-sizing:border-box;width:100%}
.campo textarea{resize:vertical}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible,.acepto input:focus-visible{outline:3px solid var(--boton);outline-offset:2px}
.acepto{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--gris)}
.acepto input{width:20px;height:20px;margin-top:2px;accent-color:var(--boton)}
.acepto a{color:var(--papel)}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formulario .boton{justify-self:start;border:0;cursor:pointer;font:inherit}
.estado{margin:0;min-height:1.5em;color:var(--gris)}
.estado.ok{color:#7FD8A4}.estado.error{color:#FF9B85}
.busqueda{margin:0 0 40px;max-width:720px}
.busqueda img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 18px 44px rgba(18,20,23,.18)}
.busqueda figcaption{margin-top:14px;color:#2B2A27;line-height:1.5}
.busqueda strong{color:var(--noche)}