/* ============================================================================
   compartir.css — Botón «Compartir» de la tienda y de cada ficha.  v1.0 (2026-09-25, #0656)
   Solo tokens del layout (--card-2, --text, --line, --accent). Pares medidos en
   PALETA_PASALA.md (#0656). Objetivos táctiles de 44 px (ATLAS 2.6).
   ========================================================================= */

.comp-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card-2);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}
.comp-boton:hover { border-color: var(--accent); }
.comp-boton:focus-visible,
.comp-icono:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.comp-boton svg { flex: none; }

/* La línea de la página entera, debajo del video del hero. */
.comp-linea { margin: 0.9rem 0 0; }

/* El icono de cada ficha: arriba a la IZQUIERDA (a la derecha va la etiqueta «Más elegido»).
   Va FUERA del enlace de la tarjeta —un botón dentro de un <a> no es HTML válido— y encima
   de él (z-index 3: los personajes del catálogo van a 2). */
.card-serv .comp-icono {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3;
}
.comp-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card-2);
    color: var(--text);
    cursor: pointer;
}
.comp-icono:hover { border-color: var(--accent); }

/* Aviso breve tras compartir por WhatsApp (el enlace quedó copiado). */
.comp-aviso {
    position: fixed;
    left: 50%;
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4rem);
    transform: translateX(-50%);
    z-index: 70;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.7rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--card-2);
    color: var(--text);
    font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.comp-aviso[hidden] { display: none; }

@media print {
    .comp-boton, .comp-icono, .comp-aviso { display: none !important; }
}

/* # @ANCLA — ANC-133 · #0751 orden del socio: el latido lento (no destello) y su pausa con menos movimiento. */
/* #0745 — `arreglando136.txt`: «los iconos de compartir deberían parpadear… para que la gente
   relacione el compartir» con ganar puntos. Un latido lento con el anillo del acento (no un
   destello: menos de 3 por segundo, WCAG 2.3.1), y quieto si el visitante pidió menos movimiento. */
@keyframes comp-latido {
    0%, 70%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--line); }
    35% { box-shadow: 0 0 0 4px var(--accent); border-color: var(--accent); }
}
.comp-llama { animation: comp-latido 2.4s ease-in-out infinite; }
.comp-llama:hover, .comp-llama:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) { .comp-llama { animation: none; border-color: var(--accent); } }