/* LDC Multimedia — PRUEBA DE IDENTIDAD (forma fija, color libre).
   Capa encima de estilo.css. Solo la usa prueba-marca.html; la portada no se toca.
   Base: Negro Control Room #0B0F14 · Blanco Señal #F2F4F7 · Gris técnico #5B6573 · Rojo En Vivo #E0262F
   Tipografía: Barlow Condensed (display) + Inter (texto). Elementos: el corte (45°) y la ranura. */

:root{
  --bg:#0B0F14; --bg2:#121821; --bg3:#1A2230; --field:#161E29;
  --tx:#F2F4F7; --tx2:#B4BCC8; --tx3:#7D8794; --gris:#5B6573;
  --red:#E0262F; --green:#2BD46B;
  --y:#FFC21A; --on:#0B0F14;
  --y-tx:color-mix(in oklab,var(--y),#fff 28%);
  --fh:'Barlow Condensed','Inter',system-ui,sans-serif;
  --cut:14px;
}
html[data-accent=senal]{--y:#2F6BFF;--on:#fff}
html[data-accent=cancha]{--y:#FF6B1F;--on:#fff}
html[data-accent=foco]{--y:#FFC21A;--on:#0B0F14}
html[data-accent=chroma]{--y:#1FC77E;--on:#0B0F14}
html[data-accent=estudio]{--y:#7B4DFF;--on:#fff}
html[data-accent=caribe]{--y:#00B3C4;--on:#0B0F14}
html{transition:none}
body{background:var(--bg);color:var(--tx)}
::selection{color:var(--on)}

/* ---------- tipografía: condensada, en mayúsculas, sin "bailar" ---------- */
h1,h2,h3{font-family:var(--fh);font-weight:800;text-transform:uppercase;line-height:.95}
h1,h2,h3,.rd__num,.step__n,.mq span,.foot__big,.contact__num,.menu__links a{letter-spacing:-.005em!important}
.hero__title{font-size:clamp(54px,16vw,96px);line-height:.88}
@media (min-width:901px){.hero__title{font-size:clamp(64px,8.6vw,148px)}}
.rd__head h2,.pf__head h2,.contact__t,.ys h2{font-size:clamp(38px,5.4vw,80px)}
.onair h2{font-size:clamp(36px,5.6vw,80px)}
.rd__text h3{font-size:clamp(34px,4vw,62px)}
.step__n,.rd__num{font-weight:800}
.btn{font:700 17px/1.1 var(--fh);letter-spacing:.06em;text-transform:uppercase}
.btn--sm{font-size:15px}.btn--lg{font-size:18px}.btn--xl{font-size:22px}
.nav__links a{font:600 18px/1 var(--fh);letter-spacing:.06em;text-transform:uppercase}
.brand__txt{font:700 15px/1 var(--fh);letter-spacing:.34em}
.mq span,.mq i{font-family:var(--fh);text-transform:uppercase}
.mq span{font-size:clamp(30px,4.4vw,66px)}
.filters button,.pick span,.rd__bar button{font-family:var(--fh);font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.pf__cap{font:700 19px/1.15 var(--fh);letter-spacing:.03em;text-transform:uppercase}
.lb figcaption,.contact__web,.foot__nav a,.foot__tel,.dock__b,.menu__tel{font-family:var(--fh);letter-spacing:.04em}
.foot__big{font-family:var(--fh);font-size:clamp(60px,15vw,250px)}
.mv__clock .tc,.tc,.mv__tc,.live{font-variant-numeric:tabular-nums}

/* ---------- color: un acento por pieza, sin neón ---------- */
.eyebrow,.rot,.pf__cap small,.lb__count,.contact__lbl,.mv__clock .tc,.rd__bar button.is-on b{color:var(--y-tx)}
.eyebrow--dark{color:var(--on)}
.rd__num{-webkit-text-stroke-color:var(--y)}
.hero{background:radial-gradient(55% 60% at 80% 45%,color-mix(in srgb,var(--y) 13%,transparent),transparent 70%),var(--bg)}
.hero::after{background:repeating-linear-gradient(0deg,rgba(242,244,247,.02) 0 1px,transparent 1px 4px)}
.mv{box-shadow:0 0 0 1px rgba(242,244,247,.07),0 50px 120px -40px rgba(0,0,0,.9)}
.nav.is-solid{background:color-mix(in srgb,var(--bg) 85%,transparent)}
.foot{background:#070A0E}

/* texto encima del acento: blanco o negro según el canal */
.btn--y,.skip,.cursor__lbl,.ticks .i,.lt__bar,.dock__b--y,.filters button[aria-pressed="true"],.pick input:checked+span,.lb__nav:hover,.lb__close:hover{color:var(--on)}
.btn--y,.btn--y:hover{box-shadow:none}
.btn--y:hover{--b:color-mix(in oklab,var(--y),#fff 14%)}
.nav__burger span{background:var(--on)}
.nav__burger[aria-expanded="true"]{background:var(--bg)}
.menu,.nav.is-menu .brand,.nav.is-menu .brand__logo{color:var(--on)}
.menu__login{background:var(--bg)!important}
.pf__btn:hover .pf__cap small{color:var(--on)}
.hero__title .l2>span{color:var(--on);animation:none}
.ys{color:var(--on)}
.step{border-top-color:currentColor}
.ys__caps li{background:var(--bg)}

/* ---------- EL CORTE: la diagonal de 45° del ícono de cámara ---------- */
.btn{background:transparent;isolation:isolate;border-radius:0}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--b);border-radius:3px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);transition:background-color .2s}
.btn--sm{--cut:11px}.btn--xl{--cut:18px}
.hero__title .l2>span{padding:.02em .9em .06em .14em}
.hero__title .l2>span::before{transform:none;clip-path:polygon(0 0,100% 0,calc(100% - .78em) 100%,0 100%);animation:ldcCut .7s var(--ease-io) .35s both;transform-origin:0 50%}
@keyframes ldcCut{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lt__bar{font:800 clamp(16px,1.7vw,23px)/1 var(--fh);letter-spacing:.06em;padding:10px 2.2em 10px 16px;clip-path:polygon(0 0,100% 0,calc(100% - 1.7em) 100%,0 100%)}
.rd__media,.pf__btn,.ys__photo,.form,.rd__panel{clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.mv__tile{border-radius:2px}
.mv__big{clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}

/* ---------- LA RANURA: la apertura horizontal de la C ---------- */
.eyebrow::before{width:30px;height:5px;border-radius:3px}
.lt__txt{border-left:5px solid var(--y);background:rgba(11,15,20,.88)}
.nav__ink,.nav__progress span{height:3px;border-radius:2px}

/* ---------- EN VIVO: rojo fijo, idéntico en todo uso ---------- */
.live__pill,.rd__live,.tag--r,.wall__hint b{background:var(--red)}
.live__pill,.rd__live{border-radius:3px;font-family:var(--fh);font-size:15px;letter-spacing:.14em}
.onair.is-live .onair__sign{box-shadow:inset 0 0 0 4px rgba(255,255,255,.25),0 0 40px rgba(224,38,47,.55)}
.onair__sign{font-family:var(--fh);border-radius:4px}

/* ---------- multiview: cámaras de juego con nombre de ángulo ---------- */
.mv__lbl{font-family:var(--fh);font-size:12px;letter-spacing:.1em}
.mv__big .mv__lbl{font-size:15px}
.mv__lbl em{font-style:normal;color:var(--tx3);margin-left:2px}
@media (max-width:760px){.mv__lbl{font-size:9px}.mv__lbl em{display:none}.mv__big .mv__lbl{font-size:12px}}

/* ---------- galería de producciones: blanco y negro → color ---------- */
.pf__hint{max-width:300px;color:var(--tx3);font:600 14px/1.4 var(--fh);letter-spacing:.06em;text-transform:uppercase}
.pf__btn img{filter:grayscale(1) brightness(.85);transition:transform .8s var(--ease),filter .6s var(--ease)}
.pf__btn::before{display:none}
.pf__btn:hover img,.pf__btn:focus-visible img,.pf__btn:active img,.pf__item.is-color .pf__btn img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
.pf__btn:hover .pf__cap small{color:var(--y-tx)}
.pf__vf{background:linear-gradient(var(--y),var(--y)) 0 0/22px 3px no-repeat,linear-gradient(var(--y),var(--y)) 0 0/3px 22px no-repeat,linear-gradient(var(--y),var(--y)) 100% 0/22px 3px no-repeat,linear-gradient(var(--y),var(--y)) 100% 0/3px 22px no-repeat,linear-gradient(var(--y),var(--y)) 0 100%/22px 3px no-repeat,linear-gradient(var(--y),var(--y)) 0 100%/3px 22px no-repeat,linear-gradient(var(--y),var(--y)) 100% 100%/22px 3px no-repeat,linear-gradient(var(--y),var(--y)) 100% 100%/3px 22px no-repeat}
.lb__fig img{filter:none}
@media (hover:none){.pf__btn img{transition-duration:.9s}}

/* ---------- botón de idioma ES / EN ---------- */
.lang{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:38px;padding:0 10px;margin-right:8px;border-radius:4px;background:rgba(242,244,247,.08);box-shadow:inset 0 0 0 1px rgba(242,244,247,.22);color:var(--tx);font:700 15px/1 var(--fh);letter-spacing:.12em;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s}
.lang:hover{background:var(--y);color:var(--on);box-shadow:none}
.lang:focus-visible{outline:2px solid var(--y);outline-offset:2px}
@media (max-width:900px){.lang{margin-left:auto;height:40px}}

/* ---------- Capacidades (lo que incluye cada transmisión) ---------- */
.cap{background:var(--bg)}
.cap__head{display:grid;gap:18px 64px;align-items:end;margin-bottom:40px}
@media (min-width:901px){.cap__head{grid-template-columns:1.2fr 1fr}}
.cap__head h2{font-size:clamp(38px,5.4vw,80px)}
.cap__head .lead{margin:0;color:var(--tx2)}
.cap__grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:600px){.cap__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.cap__grid{grid-template-columns:repeat(4,1fr)}}
.cap__i{position:relative;padding:24px 22px 26px;background:var(--bg3);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);transition:transform .45s var(--ease),background-color .3s}
.cap__i:hover{transform:translateY(-4px);background:color-mix(in srgb,var(--bg3) 86%,var(--y))}
.cap__i b{display:block;font:800 14px/1 var(--fh);letter-spacing:.12em;color:var(--y-tx);margin-bottom:14px}
.cap__i h3{font:800 clamp(21px,1.9vw,26px)/1.05 var(--fh);text-transform:uppercase;margin:0 0 8px}
.cap__i p{margin:0;color:var(--tx2);line-height:1.5;font-size:15px}
.cap__i--y{background:var(--y);color:var(--on)}
.cap__i--y:hover{background:var(--y)}
.cap__i--y b,.cap__i--y p{color:var(--on)}
.cap__i--y p{opacity:.85}
.cap__tag{position:absolute;top:20px;right:20px;padding:4px 8px;background:var(--bg);color:#fff;font:700 11px/1 var(--fh);letter-spacing:.14em;text-transform:uppercase}

/* ---------- Lumen Studios: estudio de fotografía y video ---------- */
.lumen{background:var(--bg2)}
.lumen__head{display:grid;gap:28px 64px;align-items:end;margin-bottom:44px}
@media (min-width:901px){.lumen__head{grid-template-columns:1.05fr 1fr}}
.lumen__logo{display:block;width:clamp(170px,22vw,260px);height:auto;margin:6px 0 18px;opacity:.95}
.lumen__head h2{font-size:clamp(38px,5.4vw,80px)}
.lumen__txt .lead{margin:0 0 20px;color:var(--tx2)}
.lumen__txt .ticks{margin:0 0 26px}
.lumen__grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,34vw,230px);list-style:none;padding:0;margin:0}
@media (min-width:901px){.lumen__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(170px,15vw,240px)}}
.lu{position:relative;overflow:hidden;background:var(--bg3);clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.lu img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.lu:hover img{transform:scale(1.05)}
.lu span{position:absolute;left:10px;bottom:10px;padding:6px 10px;background:rgba(11,15,20,.82);border-left:4px solid var(--y);font:700 13px/1 var(--fh);letter-spacing:.1em;text-transform:uppercase;color:var(--tx)}
.lu--a{grid-column:span 2;grid-row:span 2}
.lu--b{grid-row:span 2}
.lu--c{grid-column:span 2}
@media (max-width:900px){.lu--b{grid-row:span 2}}

/* ---------- panel de prueba (no forma parte del diseño) ---------- */
.tp{position:fixed;z-index:260;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:rgba(11,15,20,.92);box-shadow:0 0 0 1px rgba(242,244,247,.12),0 18px 40px -12px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:700 12px/1 var(--fh);letter-spacing:.14em;color:var(--tx2)}
.tp b{color:var(--tx)}
.tp__s{display:flex;gap:6px}
.tp__s button{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);transition:transform .2s}
.tp__s button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #fff;transform:scale(1.08)}
.tp a{margin-left:4px;padding:7px 10px;border-radius:999px;background:rgba(242,244,247,.1);color:var(--tx)}
.tp a:hover{background:rgba(242,244,247,.2)}
.has-cursor .tp,.has-cursor .tp *{cursor:pointer}
@media (max-width:760px){.tp{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));justify-content:space-between;border-radius:16px}.tp>span:first-child{display:none}}