/* tellier50.com/redes — va después de estilo.css (usa sus colores, .kicker, .estado-vivo, .rayos/.chispas y la foto en
   capas .foto-capas). Pensada primero para el celular: una columna, links grandes para el dedo. Desde 960 px, el chibi y
   el nombre quedan fijos a la izquierda y los links a la derecha. Cada link es un panel inclinado como los de la
   transición, con la línea de su color abajo; al tocarlo lo barre el color de la plataforma. */

/* Lo que entra animado arranca escondido (solo con html.js: sin JS o con "reducir movimiento" se ve todo quieto) */
html.js .r-pag [data-a], html.js .r-pag .r-link, html.js .r-pag .r-chico, html.js .r-pag .r-grupo .kicker { visibility: hidden; }

.r-fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(80% 42% at 50% 0%, rgba(var(--v-rgb), .32), transparent 72%),
  radial-gradient(70% 40% at 50% 105%, rgba(var(--v-rgb), .14), transparent 70%), var(--fondo); }
.r-fondo-cuarto { position: absolute; left: -10%; right: -10%; top: -6%; height: 64vh; background: url(img/cuarto.webp) center top / cover;
                  opacity: .2; filter: blur(26px) saturate(1.25); -webkit-mask-image: linear-gradient(#000 25%, transparent); mask-image: linear-gradient(#000 25%, transparent); }

.r-main { position: relative; width: 100%; max-width: 520px; margin: 0 auto; padding: 22px 16px 34px; }

/* ── Arriba: el chibi saliendo del panel y TELLIER50 encima del pie de la foto ── */
.r-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.r-foto { width: min(60vw, 240px); margin-top: calc(min(60vw, 240px) * .3); }
.r-foto .foto-luz { width: 4px; }
.r-titulos { position: relative; z-index: 2; width: 100%; container-type: inline-size; display: flex; flex-direction: column; align-items: center; }
.r-nombre { --w: 125; margin: -.3em 0 0; font: 900 min(calc(100cqi / 7.12), 104px)/.84 'Anybody Cursiva', sans-serif; font-variation-settings: "wdth" var(--w);
            letter-spacing: -.01em; white-space: nowrap; text-shadow: 0 16px 40px rgba(0, 0, 0, .6); }
.r-apodo { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; color: var(--v-claro); font: 800 13px/1 'Anybody Cursiva', sans-serif; font-variation-settings: "wdth" 112;
           letter-spacing: .2em; text-transform: uppercase; }
.r-apodo::before, .r-apodo::after { content: ''; width: 26px; height: 2px; background: var(--v); box-shadow: 0 0 8px rgba(var(--v-rgb), .8); }
.r-vivo { margin: 18px 0 0; text-decoration: none; font-size: 11px; }
a.r-vivo:not(.apagado):hover { background: rgba(255, 46, 77, .26); }

/* ── Links ── */
.r-links { display: grid; gap: 26px; margin-top: 34px; }
.r-grupo { display: grid; gap: 10px; }
.r-grupo .kicker { margin: 0 0 2px 6px; font-size: 11px; }
.r-grupo .kicker::after { width: 40px; }

.r-link { --sobre: #fff; position: relative; display: block; height: 68px; margin: 0 6px; color: var(--texto); text-decoration: none; isolation: isolate; overflow: hidden;
          background: rgba(22, 22, 25, .86); box-shadow: inset 0 0 0 1px var(--borde); transform: skewX(-8deg);
          -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-tap-highlight-color: transparent; transition: box-shadow .3s, color .35s; }
.r-link::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.r-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c); opacity: .75; }
.r-link:hover::before, .r-link:focus-visible::before, .r-link:active::before { transform: scaleX(1); }
.r-link:hover, .r-link:focus-visible, .r-link:active { color: var(--sobre); outline: none; }
.r-in { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; height: 100%; padding: 0 16px 0 18px; transform: skewX(8deg); }
.r-logo { display: grid; place-items: center; color: var(--c); transition: color .35s; }
.r-logo svg { width: 30px; height: 30px; }
.r-link .tri { fill: rgb(22, 22, 25); }
.r-link:hover .tri, .r-link:active .tri { fill: var(--c); }
.r-link:hover .r-logo, .r-link:active .r-logo, .r-link:focus-visible .r-logo { color: var(--sobre); }
.r-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.r-txt b { font: 900 19px/1.05 'Anybody Cursiva', sans-serif; font-variation-settings: "wdth" 100; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-txt small, .r-dato small { margin-top: 3px; font: 500 12px/1.2 Inter, sans-serif; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .35s; }
.r-dato { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.r-dato b { font: 900 18px/1 'Anybody Cursiva', sans-serif; font-variation-settings: "wdth" 104; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-link:hover small, .r-link:active small, .r-link:focus-visible small { color: var(--sobre); opacity: .75; }
.r-flecha { display: grid; place-items: center; }
.r-flecha svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.r-link:hover .r-flecha svg { transform: translate(3px, -3px); }
/* En vivo: la fila se prende con un borde rojo y el cartelito que late */
.r-link.vivo { box-shadow: inset 0 0 0 1px rgba(255, 46, 77, .6), 0 0 28px rgba(255, 46, 77, .18); }
.r-envivo { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--vivo); color: #fff; font: 800 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.r-envivo .punto-vivo { width: 7px; height: 7px; background: #fff; }

/* tellier50.com: el panel violeta lleno; al tocarlo lo barre el blanco */
.r-destacado { height: 76px; background: linear-gradient(115deg, var(--v-oscuro), var(--v) 75%); box-shadow: 0 16px 40px rgba(var(--v-rgb), .35); }
.r-destacado::after { background: #fff; opacity: .9; }
.r-destacado .r-logo { color: #fff; }
.r-destacado .r-txt small { color: rgba(255, 255, 255, .78); }
.r-destacado .r-in { grid-template-columns: 38px minmax(0, 1fr) 20px; }
.r-destacado .r-txt b { text-transform: none; font-size: 21px; }

.r-chicos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 6px; }
.r-chico { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; color: var(--texto); text-decoration: none; isolation: isolate; overflow: hidden;
           background: rgba(22, 22, 25, .86); box-shadow: inset 0 0 0 1px var(--borde-2); transform: skewX(-8deg); font: 700 13px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
           -webkit-tap-highlight-color: transparent; transition: color .35s; }
.r-chico > * { transform: skewX(8deg); }
.r-chico svg { width: 18px; height: 18px; color: var(--v-claro); transition: color .35s; }
.r-chico::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; transform: scaleX(0) skewX(0); transform-origin: left; transition: transform .45s var(--ease); }
.r-chico:hover, .r-chico:active { color: var(--fondo); }
.r-chico:hover svg, .r-chico:active svg { color: var(--v-oscuro); }
.r-chico:hover::before, .r-chico:active::before { transform: scaleX(1); }

/* ── Pie ── */
.r-pie { margin-top: 44px; text-align: center; container-type: inline-size; color: var(--texto-3); font-size: 12px; }
.r-viva { margin: 0 0 14px; font: 900 calc(92cqi / 10.3)/1 'Anybody Cursiva', sans-serif; font-variation-settings: "wdth" 125; text-transform: uppercase; white-space: nowrap;
          color: transparent; background: linear-gradient(100deg, var(--v-oscuro), var(--v) 40%, var(--v-claro) 70%, #fff); -webkit-background-clip: text; background-clip: text; }
.r-pie p:last-child { margin: 0; }
.r-pie a { color: var(--texto-2); }

/* ── Compu: el chibi y el nombre fijos a la izquierda, los links a la derecha ── */
@media (min-width: 960px) {
  .r-main { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 72px; align-items: start; padding: 0 40px; }
  .r-hero { position: sticky; top: 0; height: 100vh; justify-content: center; }
  .r-foto { width: min(30vw, 360px); margin-top: calc(min(30vw, 360px) * .3); }
  .r-nombre { font-size: min(calc(100cqi / 7.12), 128px); }
  .r-apodo { font-size: 15px; }
  .r-links, .r-pie { grid-column: 2; }
  .r-links { margin-top: 0; padding-top: max(9vh, 64px); }
  .r-pie { padding-bottom: 48px; }
  .r-link { height: 74px; }
  .r-txt b { font-size: 21px; }
  .r-dato b { font-size: 20px; }
}