/* p-redes.css · /redes/ · solo tokens (sin hex sueltos, sin sombras, sin degradados, sin rebotes) · prefijo rd- */

/* ---- marco con capas encima de una plantilla escalada ---- */
.rd-frame{position:relative;container-type:inline-size;min-width:0}
.rd-zn{position:absolute;inset:1px;pointer-events:none;opacity:0;overflow:hidden;border-radius:calc(var(--r-captura) - 1px);transition:opacity var(--dur-estado) var(--mov-estado)}
.rd-frame.on>.rd-zn,.rd-frame.fijo>.rd-zn{opacity:1}
/* las guías se dibujan sobre la pieza (siempre clara): usan blanco y tinta fijos, no los roles del tema */
.rd-lbl{display:inline-block;font-style:normal;font-weight:var(--bold);font-size:var(--t-12);line-height:1;padding:5px 9px;border-radius:var(--r-pill);background:var(--blanco);color:var(--tinta);border:var(--borde-ancho) solid var(--linea);white-space:nowrap}
.rd-b{position:absolute;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--tinta) 14%,transparent)}
.rd-box{position:absolute;outline:2px dashed var(--acento);outline-offset:4px}
.rd-box>.rd-lbl{position:absolute;left:8px;top:8px}
.rd-linea{position:absolute;left:0;right:0;border-top:2px dashed var(--tinta)}
.rd-linea>.rd-lbl{position:absolute;right:8px;top:-11px}

/* interruptor que enciende las zonas (la misma cápsula del logo) */
.rd-tog{display:inline-flex;align-items:center;gap:var(--s-12);min-height:var(--tocable);padding:0;border:0;background:transparent;font:inherit;font-size:var(--t-15);font-weight:var(--bold);color:var(--texto);cursor:pointer;text-align:left}
.rd-tog-sw{position:relative;display:block;width:24px;height:42px;border:var(--borde-encendido) solid var(--control-apagado);border-radius:var(--r-pill);flex:none;transition:border-color var(--dur-estado) var(--mov-estado)}
.rd-tog-sw b{position:absolute;left:50%;bottom:3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--control-apagado);transition:transform var(--dur-estado) var(--mov-estado),background var(--dur-estado) var(--mov-estado)}
.rd-tog[aria-checked="true"] .rd-tog-sw{border-color:var(--acento)}
.rd-tog[aria-checked="true"] .rd-tog-sw b{transform:translateY(-19px);background:var(--acento)}
.rd-tog small{display:block;font-size:var(--t-12);font-weight:var(--regular);color:var(--texto-2)}
.rd-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16) var(--s-32);margin-bottom:var(--s-24)}
.rd-ctl .filtros{margin:0}

/* lista de reglas: número, regla y su motivo en la misma frase */
.rd-reglas{list-style:none;margin:0;padding:0}
.rd-reglas li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s-12);padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-17);line-height:var(--lh-cuerpo);transition:background var(--dur-micro) var(--mov-micro)}
.rd-reglas li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.rd-reglas .n{font-variant-numeric:tabular-nums;font-weight:var(--bold);color:var(--texto-2)}
.rd-reglas b{color:var(--texto)}
.rd-reglas span:last-child{color:var(--texto-2)}
.rd-reglas li[data-mk]{cursor:default}
.rd-reglas li.hl{background:var(--superficie)}

/* marcas numeradas sobre una pieza */
.rd-mk{position:absolute;z-index:3;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--blanco);border:var(--borde-encendido) solid var(--tinta);color:var(--tinta);font-size:var(--t-12);font-weight:var(--bold);display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro)}
.rd-mk.hl{background:var(--tinta);color:var(--blanco)}

/* ---- portada de la idea ---- */
.rd-anat{grid-template-columns:340px minmax(0,1fr);align-items:center;gap:var(--s-48)}
.rd-anat .rd-frame{max-width:340px;width:100%}
@media (max-width:900px){.rd-anat{grid-template-columns:minmax(0,1fr)}}

/* ---- el perfil: tres piezas en 3:4 (Instagram recorta ≈ 34 px por lado) ---- */
.rd-hero-vis{max-width:900px}
.rd-sub{margin:0;flex:1 1 320px}
.rd-hero-vis .rd-ctl{margin-bottom:var(--s-16)}
.rd-perfil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.rd-cel{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--superficie)}
.rd-cel>.scaled{position:absolute;top:0;left:-3.36%;width:106.72%;border:0;border-radius:0}
.rd-cel::after{content:"";position:absolute;inset:0;border:var(--borde-ancho) solid var(--borde);pointer-events:none}
.rd-cel .rd-l30{position:absolute;left:0;right:0;top:30.22%;border-top:2px dashed var(--tinta);opacity:0;z-index:2;transition:opacity var(--dur-estado) var(--mov-estado)}
.rd-perfil.on .rd-l30{opacity:1}
.rd-cel .rd-l30 .rd-lbl{position:absolute;right:8px;top:-11px}
.rd-perfil .rd-cel:not(:last-child) .rd-lbl{display:none}

/* ---- figuras con título y descargas ---- */
.rd-fig figcaption{margin-top:var(--s-12)}
.rd-fig figcaption p{margin:0;font-size:var(--t-15);color:var(--texto-2)}
.rd-fig figcaption .acciones{margin-top:var(--s-8)}
.rd-fig figcaption b{color:var(--texto);font-size:var(--t-17)}

/* ---- carrusel ---- */
.rd-car{--w:min(420px,80%)}
.rd-car .scaled{border-radius:var(--r-captura)}
.rd-car figure{margin:0;display:flex;flex-direction:column}
.rd-car figcaption{flex:1;display:flex;flex-direction:column}
.rd-car figcaption .acciones{margin-top:auto;padding-top:var(--s-8)}
.rd-car figcaption{margin-top:var(--s-12);font-size:var(--t-15);color:var(--texto-2)}
.rd-car figcaption b{display:block;color:var(--texto);font-size:var(--t-17);margin-bottom:2px}

/* ---- historias ---- */
.rd-hist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}
.rd-hist[data-modo="historia"] .m-reel,.rd-hist[data-modo="reel"] .m-hist{display:none}
.rd-b-top{left:0;right:0;top:0;height:14%;justify-content:flex-end;padding-right:3cqw}
.rd-b-bot{left:0;right:0;bottom:0;height:35%;justify-content:flex-end;padding-right:3cqw}
.rd-b-izq{left:0;top:14%;bottom:35%;width:6%}
.rd-b-der{right:0;top:14%;bottom:35%;width:6%}
.rd-b-rt{left:0;right:0;top:0;height:12.5%}
.rd-b-rb{left:0;right:0;bottom:0;height:12.5%}
.rd-box-h{left:7.41%;top:14.17%;width:85.19%;height:50.83%}
.rd-box-h>.rd-lbl{left:auto;top:auto;right:8px;bottom:-30px}
.rd-box.br>.rd-lbl{left:auto;top:auto;right:8px;bottom:8px}
.rd-hist-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-48);align-items:start}
@media (max-width:1180px){.rd-hist-split{grid-template-columns:minmax(0,1fr)}.rd-hist-split .rd-hist,.rd-hist-split .rd-hist-cap{max-width:560px}.rd-hist-split>div:last-child{display:contents}.rd-hist-split .rd-ctl{order:-1;margin-bottom:0}}
.rd-ui{position:absolute;inset:0}
.rd-ui i{position:absolute;display:block;font-style:normal}
.rd-ui .ui-prog{left:2.2cqw;right:2.2cqw;top:2.2cqw;height:.6cqw;border-radius:1cqw;background:var(--pizarra)}
.rd-ui .ui-cta{left:3cqw;top:5.5cqw;display:flex!important;align-items:center;gap:1.9cqw;font-size:3.1cqw;font-weight:var(--bold);color:var(--tinta);line-height:1}
.rd-ui .ui-cta u{display:block;width:7.8cqw;height:7.8cqw;border-radius:50%;background:var(--papel);border:.25cqw solid var(--linea)}
.rd-ui .ui-resp{left:3cqw;right:16cqw;bottom:4.44cqw;height:9.6cqw;border:.3cqw solid var(--pizarra);border-radius:5cqw;display:flex!important;align-items:center;padding:0 4cqw;font-size:3.1cqw;color:var(--tinta);background:color-mix(in srgb,var(--blanco) 70%,transparent)}
.rd-hist-cap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16);margin-top:var(--s-12);font-size:var(--t-15);color:var(--texto-2)}
.rd-hist-cap b{display:block;color:var(--texto);font-size:var(--t-17)}

/* ---- LinkedIn ---- */
.rd-li-foto{position:absolute;left:2.1cqw;top:calc(100% - 7.1cqw);width:14.2cqw;height:14.2cqw;border-radius:50%;background:var(--papel);border:.6cqw solid var(--blanco);overflow:hidden;display:grid;place-items:center}
.rd-li-foto img{width:100%;height:100%;object-fit:cover}
.rd-li-foto.cuadro{border-radius:1cqw;width:8.5cqw;height:8.5cqw;top:calc(100% - 4.25cqw)}
.rd-li-foto.cuadro img{width:62%;height:auto;object-fit:contain}

/* ---- YouTube ---- */
.rd-yt{--x1:0%;--x2:100%;--y1:0%;--y2:100%}
.rd-yt[data-vista="pc"]{--x1:0%;--x2:100%;--y1:35.28%;--y2:64.65%}
.rd-yt[data-vista="cel"]{--x1:19.8%;--x2:80.2%;--y1:35.28%;--y2:64.65%}
.rd-yt .rd-dim{position:absolute;inset:0;background:color-mix(in srgb,var(--tinta) 45%,transparent);clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--x1) var(--y1),var(--x1) var(--y2),var(--x2) var(--y2),var(--x2) var(--y1),var(--x1) var(--y1));transition:opacity var(--dur-estado) var(--mov-estado),clip-path var(--dur-estado) var(--mov-estado)}
.rd-yt[data-vista="tv"] .rd-dim{opacity:0}
.rd-yt .rd-win{position:absolute;left:var(--x1);top:var(--y1);right:calc(100% - var(--x2));bottom:calc(100% - var(--y2));border:2px dashed var(--acento);transition:opacity var(--dur-estado) var(--mov-estado),left var(--dur-estado) var(--mov-estado),top var(--dur-estado) var(--mov-estado),right var(--dur-estado) var(--mov-estado),bottom var(--dur-estado) var(--mov-estado)}
.rd-yt[data-vista="tv"] .rd-win{opacity:0}
.rd-yt .rd-win .rd-lbl{position:absolute;left:8px;top:-13px}
.rd-yt-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-48);align-items:start}
@media (max-width:1180px){.rd-yt-split{grid-template-columns:minmax(0,1fr)}}
.rd-lee{min-height:3.2em;margin:var(--s-16) 0 0;color:var(--texto-2);font-size:var(--t-17)}
.rd-lee b{color:var(--texto)}
.rd-yt:not([data-vista="tv"]) ~ .rd-lee [data-v="tv"],.rd-yt:not([data-vista="pc"]) ~ .rd-lee [data-v="pc"],.rd-yt:not([data-vista="cel"]) ~ .rd-lee [data-v="cel"]{display:none}

/* ---- miniaturas ---- */
.rd-mini-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-48);align-items:start}
@media (max-width:900px){.rd-mini-split{grid-template-columns:minmax(0,1fr)}}
.rd-mn-caja{left:6.25%;top:11.11%;width:50%;height:78.89%}
.rd-mn-img{left:60%;right:0;top:0;bottom:0;display:flex;align-items:flex-start;justify-content:center;padding-top:8px}
.rd-mn-dur{left:82.8%;right:0;top:83.3%;bottom:0}
.rd-linea.rd-mn-l30{top:30%;right:40%}
.rd-prueba{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16) var(--s-24);margin-bottom:var(--s-24)}
.rd-prueba label{font-size:var(--t-15);font-weight:var(--bold)}
.rd-prueba input[type="range"]{flex:1 1 220px;max-width:420px;accent-color:var(--acento);min-height:var(--tocable)}
.rd-prueba output{font-variant-numeric:tabular-nums;font-size:var(--t-15);color:var(--texto-2);min-width:5em}
.rd-min{--mw:504px;display:grid;grid-template-columns:repeat(auto-fill,min(var(--mw),100%));gap:var(--s-24);justify-content:start;align-items:start}
.rd-min figure{margin:0;min-width:0}
.rd-min figcaption{margin-top:var(--s-8);font-size:var(--t-15);color:var(--texto-2);line-height:1.35}
.rd-min figcaption b{color:var(--texto);display:block;font-size:var(--t-17)}
.rd-lista-dl{width:100%}
.rd-lista-dl td:last-child,.rd-lista-dl th:last-child{text-align:right;white-space:nowrap}
.rd-lista-dl .acciones{margin:0;justify-content:flex-end}
@media (max-width:700px){.rd-lista-dl td:last-child{text-align:left;white-space:normal}.rd-lista-dl .acciones{justify-content:flex-start}}

/* ---- avatar y favicon ---- */
.rd-av{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--medianil);align-items:start}
.rd-av-ph{height:128px;display:flex;align-items:flex-end}
@media (max-width:900px){.rd-av{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rd-av figure{margin:0;min-width:0;display:flex;flex-direction:column;gap:var(--s-12);align-items:flex-start}
.rd-av-im{width:var(--d,160px);height:var(--d,160px);overflow:hidden;border:var(--borde-ancho) solid var(--borde);background:var(--superficie);flex:none}
.rd-av-im img{width:100%;height:100%;object-fit:cover}
.rd-av-im.c{border-radius:50%}.rd-av-im.q{border-radius:var(--r-campo)}
.rd-av figcaption{font-size:var(--t-15);color:var(--texto-2);line-height:1.35}
.rd-av figcaption b{display:block;color:var(--texto);font-size:var(--t-17)}
.rd-fav-px{image-rendering:auto;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-campo);background:var(--superficie);padding:var(--s-8);display:flex;align-items:flex-end;gap:var(--s-12)}

/* ---- tamaños ---- */
.rd-medidas td:nth-child(2){white-space:nowrap}
.rd-medidas .copy{white-space:nowrap}

/* ---- bien y mal ---- */
.rd-bm .tabs{margin-bottom:var(--s-24)}
.rd-bm1 .pair{max-width:520px}.rd-bm2 .pair{max-width:620px}.rd-bm3 .pair{max-width:800px}
.rd-par h3{margin-bottom:var(--s-16);max-width:30em}
.rd-par .scaled{max-width:var(--mx,100%)}
.rd-par .do,.rd-par .dont{align-items:flex-start}
.rd-par .rd-frame{width:100%;max-width:var(--mx,100%)}
.rd-par .rd-frame .scaled{max-width:none}
@media (max-width:700px){.rd-bm1 .rd-frame{max-width:240px}.rd-bm2 .scaled{max-width:300px}}

.rd-ref{margin:0}
.rd-ref img{aspect-ratio:16/9;object-fit:contain;background:var(--superficie)}

/* ---- descargas ---- */
/* sin cuadrícula de 4: ahora son 5 (kit + 4 redes) */
.rd-dl-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--medianil)}
@media (max-width:1100px){.rd-dl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.rd-dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.rd-dl-grid{grid-template-columns:minmax(0,1fr)}}
.rd-dl-grid>div{border-top:var(--borde-encendido) solid var(--texto);padding-top:var(--s-16);display:flex;flex-direction:column}
.rd-dl-grid h3{font-size:var(--t-19);letter-spacing:var(--trk-19);margin-bottom:4px}
.rd-dl-grid p{font-size:var(--t-15);color:var(--texto-2);margin:0 0 var(--s-12)}
.rd-dl-grid .btn{width:100%;margin-top:auto}

/* celular: la tabla de medidas pasa a lista (sin columnas escondidas) y el par de historias se desliza */
@media (max-width:700px){
  .rd-medidas thead{display:none}
  .rd-medidas,.rd-medidas tbody,.rd-medidas tr,.rd-medidas td{display:block;width:100%}
  .rd-medidas tr{padding:var(--s-12) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
  .rd-medidas td{border:0;padding:2px 0}
  .rd-medidas td:first-child{font-size:var(--t-17)}
  .rd-medidas td:nth-child(3)::before{content:"Se lee en: ";color:var(--texto-2)}
  .rd-medidas td:nth-child(4){color:var(--texto-2)}
}
@media (max-width:620px){
  .rd-hist{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}
  .rd-hist>.rd-frame{max-width:240px}
  .rd-lbl{font-size:10px;padding:3px 6px}
  .rd-hist-cap{grid-template-columns:minmax(0,1fr)}
  .rd-box.br>.rd-lbl{display:none}
}
/* celular: marcas numeradas más chicas (rd-mk) */
@media (max-width:620px){.rd-mk{width:18px;height:18px;margin:-9px 0 0 -9px;font-size:10px}}

/* ---- página compacta: menos aire entre secciones, cabeceras en una línea, lo técnico en <details> ---- */
.rd-pg .hero{padding:var(--s-48) 0 var(--s-32)}
.rd-pg .sec{padding:calc(var(--s-32) + var(--s-8)) 0}
.rd-pg .rd-hero-vis+.sec{border-top:0}
.rd-pg #descargas{padding-bottom:0}
.rd-pg .sec-head{max-width:none;margin-bottom:var(--s-16)}
.rd-pg .sec-head .lede{margin-top:var(--s-8)}
.rd-pg details.mas{margin-top:var(--s-16)}
.rd-pg .rd-reglas+details.mas{border-top:0;margin-top:0;padding-top:var(--s-16)}
.rd-pg details.mas .acciones{margin-top:var(--s-16)}
/* las dos columnas con regla y pieza: la regla se alinea arriba, la pieza manda la altura */
.rd-hist-split .rd-ctl,.rd-yt-split .rd-reglas{margin-top:0}
.rd-hist-split .rd-ctl{margin-bottom:var(--s-16)}
.rd-hist-cap{margin-top:var(--s-12)}
.rd-hist-cap>div{display:flex;flex-direction:column}
.rd-hist-cap .acciones{margin-top:auto;padding-top:var(--s-8)}

/* carrusel: en pantalla ancha se ven los cuatro cuadros juntos; en celular, se desliza */
.rd-car{container-type:inline-size}
@container (min-width:860px){
  .rd-car .car-track{--w:calc((100% - 3 * var(--s-16)) / 4);overflow-x:visible}
  .rd-car .car-bar{display:none}
}

/* LinkedIn: banner a la izquierda, su texto y sus botones a la derecha */
.rd-li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-24);align-items:start}
.rd-li+.rd-li{margin-top:var(--s-24)}
.rd-li figcaption{margin-top:0}
.rd-li figcaption b{display:block;color:var(--texto);font-size:var(--t-17);margin-bottom:4px}
.rd-li figcaption p{margin:0 0 var(--s-8);font-size:var(--t-15);color:var(--texto-2)}
@media (max-width:900px){.rd-li{grid-template-columns:minmax(0,1fr);gap:var(--s-12)}}

/* YouTube: reglas y descargas a la derecha del banner */
.rd-yt-split .acciones{margin-top:var(--s-16)}