/* ==========================================================================
   COMPARTIR — la tira social de cada pieza del archivo
   Fancy, digital-first: panel con corchetes en las esquinas, filete de acento,
   iconos de marca a color en reposo y unificación al acento en la interacción.

   🔴 DOS CONTEXTOS, UN SOLO CSS. Vive en el lienzo claro de la nota
   (`.pf-nota__hoja`, donde `tokens.css` remapea `--pf-k` a su variante AA sobre
   claro) y en la banda del sistema del especial (`.pf-lector-banda`, sobre
   `--pf-muro`). Por eso panel, etiquetas y borde usan SÓLO tokens de ROL y estilo
   CONTORNO —nunca relleno con `--pf-sobre-k`—: es la prudencia que ya costó el
   texto blanco sobre blanco del portal. El color de marca vive únicamente en el
   glifo (objeto gráfico, no texto); en la banda oscura se neutraliza con
   `.pf-compartir--banda`.

   🔴 Anima sólo transform/opacity y respeta prefers-reduced-motion.
   ========================================================================== */

.pf-compartir{
	position:relative;overflow:hidden;
	margin-top:2.6rem;
	padding:clamp(1.3rem,3.4vw,2rem) clamp(1.2rem,3.4vw,2.1rem);
	/* 🔴 Línea LITERAL, no `--pf-linea-f`: la hoja de lectura es siempre clara
	   pero NO remapea los tokens de línea, así que en tema oscuro `--pf-linea-f`
	   queda blanco e invisible aquí (el lector lo tolera; un panel no). En la
	   banda del especial se restituye el token de rol (ver `--banda`). */
	border:1px solid rgba(0,0,0,.14);
	background:color-mix(in srgb, var(--pf-k) 4%, transparent);
	transition:box-shadow .35s var(--pf-ease);
}
.pf-compartir:hover{
	box-shadow:0 0 0 1px color-mix(in srgb, var(--pf-k) 22%, transparent);
}

/* filete de acento que corona el bloque — gesto de firma del sistema */
.pf-compartir::before{
	content:"";position:absolute;left:0;top:0;height:2px;width:100%;
	background:linear-gradient(90deg, var(--pf-k), transparent 62%);
	pointer-events:none;
}

/* corchetes en las esquinas (el gesto V2, como el CTA) */
.pf-compartir__corner{
	position:absolute;width:14px;height:14px;border:2px solid var(--pf-k);
	pointer-events:none;z-index:2;
	transition:width .3s var(--pf-ease),height .3s var(--pf-ease);
}
.pf-compartir__corner--tl{top:7px;left:7px;border-right:0;border-bottom:0}
.pf-compartir__corner--tr{top:7px;right:7px;border-left:0;border-bottom:0}
.pf-compartir__corner--bl{bottom:7px;left:7px;border-right:0;border-top:0}
.pf-compartir__corner--br{bottom:7px;right:7px;border-left:0;border-top:0}
.pf-compartir:hover .pf-compartir__corner{width:22px;height:22px}

/* --- el encabezado / CTA ------------------------------------------------- */
.pf-compartir__cta{ position:relative;z-index:2;margin-bottom:1.15rem; }
.pf-compartir__k{
	display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem;
	font-family:var(--pf-mono);font-size:.64rem;letter-spacing:.18em;
	text-transform:uppercase;color:var(--pf-k);
}
.pf-compartir__blink{
	width:7px;height:7px;flex:0 0 auto;background:var(--pf-k);
	animation:pf-comp-par .9s step-end infinite;
}
@keyframes pf-comp-par{ 0%,49%{opacity:1} 50%,100%{opacity:.15} }

.pf-compartir__t{
	margin:0;font-family:var(--pf-cond, var(--pf-display));
	font-size:clamp(1.35rem,3.2vw,2rem);line-height:1.02;letter-spacing:-.01em;
	text-transform:uppercase;color:var(--pf-tinta);
}
.pf-compartir__t em{ font-style:normal;color:var(--pf-k); }
.pf-compartir__desc{
	margin:.5rem 0 0;max-width:42ch;
	font-family:var(--pf-mono);font-size:.72rem;line-height:1.55;
	color:var(--pf-tinta-3);
}

/* --- los botones --------------------------------------------------------- */
.pf-compartir__row{
	position:relative;z-index:2;
	display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;
}

/* Doble clase: gana a `.pf-nota__cuerpo a` (0,1,1), que si no impone acento +
   subrayado a los enlaces sociales y rompe la coherencia con los botones. */
.pf-compartir .pf-compartir__b{
	display:inline-flex;align-items:center;gap:.5rem;
	font-family:var(--pf-mono);font-size:.72rem;font-weight:600;line-height:1;
	letter-spacing:.04em;
	color:var(--pf-tinta);text-decoration:none;cursor:pointer;
	background:transparent;border:1px solid rgba(0,0,0,.18);
	padding:.6rem .85rem;
	transition:transform .2s var(--pf-ease),border-color .2s var(--pf-ease),
	           background-color .2s var(--pf-ease),color .2s var(--pf-ease);
}
.pf-compartir__ico{ display:inline-flex;flex:0 0 auto; }
.pf-compartir__ico svg{ width:17px;height:17px;display:block; }

/* Identidad de marca EN EL GLIFO (reposo), sobre el lienzo claro. Es un logo
   —objeto gráfico— así que su color no compite con la regla AA del texto. */
.pf-compartir__b--wa .pf-compartir__ico{ color:#25D366; }
.pf-compartir__b--x  .pf-compartir__ico{ color:#0A0A0A; }
.pf-compartir__b--fb .pf-compartir__ico{ color:#1877F2; }
.pf-compartir__b--tg .pf-compartir__ico{ color:#229ED9; }

/* En la interacción, el sistema habla con UN solo acento (como el lector y el
   CTA): borde, etiqueta e icono pasan a `--pf-k`, que es AA por construcción en
   los dos temas. Sólo transform + color; el `translateY` es el gesto vivo. */
.pf-compartir .pf-compartir__b:hover,
.pf-compartir .pf-compartir__b:focus-visible{
	transform:translateY(-2px);
	border-color:var(--pf-k);color:var(--pf-k);
	background-color:color-mix(in srgb, var(--pf-k) 8%, transparent);
	text-decoration:none;outline:none;
}
.pf-compartir .pf-compartir__b:hover .pf-compartir__ico,
.pf-compartir .pf-compartir__b:focus-visible .pf-compartir__ico{ color:var(--pf-k); }
.pf-compartir .pf-compartir__b:focus-visible{
	outline:var(--pf-focus);outline-offset:2px;
}

/* botón copiar: alterna icono link ↔ check al confirmar */
.pf-compartir__ico-ok{ display:none; }
.pf-compartir__copiar.is-copiado{ border-color:var(--pf-k);color:var(--pf-k); }
.pf-compartir__copiar.is-copiado .pf-compartir__ico-link{ display:none; }
.pf-compartir__copiar.is-copiado .pf-compartir__ico-ok{ display:inline-flex;color:var(--pf-k); }

/* --- banda oscura del especial: glifos neutros (el negro de X no se ve) --- */
.pf-compartir--banda{ margin-top:0;border-color:var(--pf-linea-f); }
/* En la banda SÍ vale el token de rol: gira con `--pf-muro` y queda visible en
   los dos temas. */
.pf-compartir--banda .pf-compartir__b{ border-color:var(--pf-linea-f); }
.pf-compartir--banda .pf-compartir__b--wa .pf-compartir__ico,
.pf-compartir--banda .pf-compartir__b--x  .pf-compartir__ico,
.pf-compartir--banda .pf-compartir__b--fb .pf-compartir__ico,
.pf-compartir--banda .pf-compartir__b--tg .pf-compartir__ico{ color:currentColor; }

/* --- móvil: los botones a lo ancho, zonas pulsables cómodas -------------- */
@media (max-width:520px){
	.pf-compartir__row{ gap:.5rem; }
	.pf-compartir .pf-compartir__b{ flex:1 1 auto;justify-content:center;padding:.72rem .6rem; }
}

@media (prefers-reduced-motion:reduce){
	.pf-compartir,.pf-compartir__corner,.pf-compartir .pf-compartir__b{ transition:none; }
	.pf-compartir .pf-compartir__b:hover,
	.pf-compartir .pf-compartir__b:focus-visible{ transform:none; }
	.pf-compartir__blink{ animation:none;opacity:1; }
}