/* p-referencias.css · prefijo rf- · solo tokens de tokens.css (sin hex, sin sombras, sin degradados, sin rebotes) */
.p-ref .wrap{max-width:1360px}
.p-ref .hero h1{max-width:15em}
.p-ref .sec-head h2{max-width:20em}
.p-ref [hidden]{display:none!important}

/* intro en tres líneas */
.rf-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32)}
.rf-pasos p{margin:0;font-size:var(--t-19);line-height:1.45;border-top:var(--borde-encendido) solid var(--texto);padding-top:var(--s-16);max-width:24em}
.rf-pasos b{display:block;margin-bottom:var(--s-8)}
@media (max-width:800px){.rf-pasos{grid-template-columns:minmax(0,1fr)}}

/* pestañas con cuenta */
.p-ref .tabs{margin-bottom:0;overflow-y:hidden}
.rf-tn{margin-left:6px;font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;font-weight:var(--regular)}

/* barra de filtros: todos los temas a la vista (sin chips escondidos); pegada arriba solo donde cabe */
.rf-bar{background:var(--fondo);margin:0 calc(var(--margen-web) * -1);padding:var(--s-12) var(--margen-web);border-bottom:var(--borde-ancho) solid var(--borde)}
@media (min-width:901px){.rf-bar{position:sticky;top:var(--cabecera);z-index:30}}
.rf-filtros{margin:0}
.rf-filtros button{white-space:nowrap;min-height:36px}
.rf-filtros button span{margin-left:6px;font-size:var(--t-12);font-variant-numeric:tabular-nums;opacity:.7}
.rf-lista{padding-top:var(--s-48)}

/* grupos */
.rf-grupo{margin-bottom:var(--s-96)}
.rf-grupo:not(:has([data-cat]:not([hidden]))){display:none}
.rf-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-24);margin:0 0 var(--s-32);padding-top:var(--s-24);border-top:var(--borde-encendido) solid var(--texto)}
.rf-cab h3{max-width:24em}
.rf-cab p{margin:var(--s-8) 0 0;color:var(--texto-2);font-size:var(--t-15);max-width:48em}
.rf-n{font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums;letter-spacing:var(--trk-eyebrow);font-weight:var(--bold);flex:none}

/* rejillas */
.rf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-32) var(--medianil);align-items:start}
.rf-grid .ref>img{height:auto;object-fit:cover;object-position:top center}
.rf-web .ref>img{aspect-ratio:16/10}
.rf-wide .ref>img{aspect-ratio:16/9}
.rf-port .ref>img{aspect-ratio:4/5}
.rf-contain>img{object-fit:contain!important;background:var(--superficie)}
.rf-mas{display:block;column-width:260px;column-gap:var(--medianil)}
.rf-mas .ref{break-inside:avoid;margin-bottom:var(--s-32)}
.rf-mas .ref>img{height:auto;aspect-ratio:auto}
.rf-c{margin:0;min-width:0}
.rf-c .ref-credit{margin:0}
.rf-c .ref-take{margin:0;font-size:var(--t-15);line-height:1.4}
.rf-lab{display:block;font-size:var(--t-12);font-weight:var(--bold);text-transform:uppercase;letter-spacing:var(--trk-eyebrow);color:var(--texto-2);margin-bottom:2px}
.rf-c>img{transition:border-color var(--dur-micro) var(--mov-micro)}
.rf-c>img:hover{border-color:var(--texto-2)}

/* video: texto + ritmo + cuadros */
.rf-video{margin-top:var(--s-64);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-24);min-width:0}
.rf-video>*,.rf-v-top>*{min-width:0}
.rf-video:first-of-type{margin-top:var(--s-48)}
.rf-v-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-32);align-items:start}
.rf-v-solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.rf-v-top{grid-template-columns:minmax(0,1fr)}}
.rf-v-canal{margin:0 0 var(--s-8);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--texto-2)}
.rf-video h4{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24);margin-bottom:var(--s-16)}
.rf-video h4 a{text-decoration:none}
.rf-video h4 a:hover{text-decoration:underline}
.rf-v-txt .ref-take{font-size:var(--t-15);line-height:1.45}
.rf-v-cr{margin:0}
.rf-video .car-track>*{flex:0 0 var(--w)}
.rf-fr>img{aspect-ratio:16/9;height:auto;object-fit:cover}

/* ritmo en vivo: cada corte, en su segundo */
.rf-ritmo{display:block;justify-items:stretch;padding:var(--s-24) var(--s-24) 56px}
.rf-st{display:grid;gap:var(--s-24);width:100%}
.rf-fila-c{display:flex;justify-content:space-between;gap:var(--s-16);margin:0 0 6px;font-size:var(--t-15)}
.rf-fila-c span{color:var(--texto-2);font-variant-numeric:tabular-nums}
.rf-fila-c output{display:inline-block;min-width:2ch;text-align:right;font-weight:var(--bold);color:var(--texto)}
.rf-svg{display:block;width:100%;height:44px;overflow:visible}
.rf-eje{stroke:var(--borde);stroke-width:1.5;vector-effect:non-scaling-stroke}
.rf-t{stroke:var(--texto);stroke-width:2;vector-effect:non-scaling-stroke}
.rf-s{fill:var(--texto-3)}
.rf-ph{stroke:var(--acento);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0}
.rf-fila-p{margin:6px 0 0;font-size:var(--t-12);color:var(--texto-2)}
.is-playing .rf-t,.is-playing .rf-s{animation:rf-in 1ms linear both;animation-delay:var(--d)}
.is-playing .rf-ph{animation:rf-ph var(--dur) linear both}
@keyframes rf-in{from{opacity:0}to{opacity:1}}
@keyframes rf-ph{from{opacity:1;transform:translateX(0)}to{opacity:1;transform:translateX(var(--rec))}}

/* comparador de cortes por minuto */
.rf-comp{display:block;justify-items:stretch;padding:var(--s-24) var(--s-24) 56px}
.rf-cmp{width:100%}
.rf-leyenda{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24);margin:0 0 var(--s-16);font-size:var(--t-12);color:var(--texto-2)}
.rf-leyenda i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.rf-b1{background:var(--texto)}
.rf-b2{background:var(--texto-3)}
.rf-cmp-f{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);column-gap:var(--s-24);row-gap:4px;padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde)}
.rf-cmp-n{grid-row:1/3;margin:0;font-size:var(--t-15)}
.rf-cmp-n b,.rf-cmp-n span{display:block}
.rf-cmp-n span{font-size:var(--t-12);color:var(--texto-2)}
.rf-cmp-b{display:flex;align-items:center;gap:var(--s-8)}
.rf-cmp-b i{display:block;height:10px;border-radius:2px;width:var(--w);transform-origin:left center}
.rf-cmp-b em{font-style:normal;font-size:var(--t-12);font-variant-numeric:tabular-nums;color:var(--texto-2)}
.is-playing .rf-cmp-b i{animation:rf-barra var(--dur-dato) var(--mov-entrada) both}
@keyframes rf-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:620px){.rf-cmp-f{grid-template-columns:minmax(0,1fr)}.rf-cmp-n{grid-row:auto}}
.rf-nota{margin:var(--s-16) 0 0}

/* subtítulos dentro de un grupo */
.rf-sub{margin:var(--s-64) 0 var(--s-24)}
.rf-sub:first-of-type{margin-top:0}
.rf-sub h4,.rf-sub-t{font-size:var(--t-19);letter-spacing:var(--trk-19)}
.rf-sub p{margin:4px 0 0;color:var(--texto-2);font-size:var(--t-15);max-width:48em}
.rf-sub-t{margin:var(--s-64) 0 var(--s-24)}
.rf-resto{margin-top:0}

/* lightbox: pie de varias líneas */
.p-ref .lightbox p{padding:0 var(--s-64);line-height:1.4;bottom:var(--s-16)}
@media (max-width:620px){.rf-bar{margin:0 calc(var(--margen-web) * -1)}.rf-cab{align-items:flex-start}.p-ref .lightbox p{padding:0 var(--s-16)}.rf-tl{display:none}.p-ref .tabs button{padding:var(--s-12) var(--s-8)}}

/* entradas de la portada y tarjeta de ejemplo */
.rf-entradas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--medianil);margin-top:var(--s-48)}
.rf-ent{display:grid;grid-template-rows:auto auto 1fr;gap:var(--s-12);padding:var(--s-16);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--superficie);text-decoration:none;color:var(--texto);min-width:0;transition:border-color var(--dur-micro) var(--mov-micro)}
.rf-ent:hover{border-color:var(--texto-2)}
.rf-ent-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.rf-ent-mini img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px;border:var(--borde-ancho) solid var(--borde);background:var(--elevado)}
.rf-ent-t{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-12);margin-top:var(--s-8)}
.rf-ent-t b{font-size:var(--t-19);letter-spacing:var(--trk-19)}
.rf-ent-t i{font-style:normal;font-size:var(--t-15);color:var(--texto-2);font-variant-numeric:tabular-nums}
.rf-ent-d{font-size:var(--t-15);color:var(--texto-2);line-height:1.4}
@media (max-width:900px){.rf-entradas{grid-template-columns:minmax(0,1fr)}}
.rf-como{align-items:start}
.rf-como .rf-pasos{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}
.rf-ejemplo .ref>img{aspect-ratio:16/10;height:auto;object-fit:cover;object-position:top}
.rf-ejemplo .ref{margin:0}
.rf-ejemplo>p{margin:var(--s-12) 0 0}