/* ============================================================
   signature.css — Micro-interactions de marca (P2)
   ============================================================
   Detalles que la gente no ve conscientemente pero que hacen
   que la web "se sienta premium". Todos respetan reduced-motion.

   Incluye:
     1. Focus halo ámbar (replace del outline básico)
     2. Cursor custom en zonas hero (desktop only)
     3. Scroll progress bar ámbar (solo blog/ficha/categoría)
     4. Text reveal editorial H1 (clip-path fade-up)
     5. Botón primary "liquid" (glow ámbar creciente + label shift)
     6. Selección de texto cálida
   ============================================================ */

/* ── 1. Focus visible: outline sólido AA (9.2:1) + halo ámbar ──
   El outline sólido garantiza el mínimo 3:1 WCAG 2.4.7 aunque el halo
   translúcido no contraste sobre fondos claros. NO usar outline:none. */
:focus-visible {
    outline: 2px solid var(--color-amber);
    outline-offset: 3px;
    box-shadow: var(--shadow-amber-halo);
    border-radius: 4px;
    transition: box-shadow var(--dur-fast, 180ms) ease-out;
}
/* Botones e inputs conservan su borde propio, añaden outline sólido + halo */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-amber);
    outline-offset: 3px;
    box-shadow: var(--shadow-amber-halo);
}

/* ── 2. Cursor custom en hero ───────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .hero--signature,
    [data-signature-cursor] {
        cursor: none;
    }
    .signature-cursor {
        position: fixed;
        top: 0; left: 0;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--color-amber);
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
        transform: translate(-50%, -50%) scale(1);
        transition: transform 160ms ease-out, opacity 200ms ease;
        opacity: 0;
        will-change: transform;
    }
    .signature-cursor.is-visible { opacity: 1; }
    .signature-cursor.is-hover   { transform: translate(-50%, -50%) scale(2.2); }
    .signature-cursor.is-press   { transform: translate(-50%, -50%) scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
    .signature-cursor { display: none; }
    .hero--signature, [data-signature-cursor] { cursor: auto; }
}

/* ── 3. Scroll progress bar ámbar ──────────────────────────── */
.signature-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--color-amber-dark), var(--color-amber), var(--color-amber-light));
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(247, 200, 59, 0.5);
    transition: width 60ms linear, opacity 240ms ease;
    opacity: 0;
}
.signature-progress.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .signature-progress { display: none; }
}

/* ── 4. Text reveal editorial H1 ────────────────────────────── */
.reveal-text {
    display: inline-block;
    overflow: hidden;
    line-height: inherit;
}
.reveal-text > .reveal-text__inner {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    animation: signature-reveal 820ms var(--ease-editorial, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
.reveal-text.reveal-text--delay > .reveal-text__inner {
    animation-delay: 140ms;
}
@keyframes signature-reveal {
    0%   { transform: translateY(100%); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal-text > .reveal-text__inner {
        transform: none;
        opacity: 1;
        animation: none;
    }
}

/* ── 5. Botón primary liquid (upgrade del --color-gold base) ── */
.btn--primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--btn-x, 50%) var(--btn-y, 50%),
        #8fe98f 0%,
        var(--color-amber-light) 32%,
        var(--color-amber) 78%
    );
    opacity: 0;
    transition: opacity 280ms ease;
    z-index: -1;
}
.btn--primary:hover::before {
    opacity: 1;
}
.btn--primary:hover {
    box-shadow: var(--shadow-cta-hover);
    transform: translateY(-2px);
    border-color: var(--color-amber-light);
}
.btn--primary:active {
    transform: translateY(0) scale(0.985);
}
@media (prefers-reduced-motion: reduce) {
    .btn--primary::before { display: none; }
    .btn--primary:hover { transform: none; }
    .btn--primary:active { transform: none; }
}

/* ── 6. Selection + scrollbar consistentes con el ámbar ────── */
::selection {
    background: var(--color-amber);
    color: var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-amber); }

/* ── 7. Underline signature editorial ──────────────────────── */
/* Utilidad para links y chips que quieran un "hover premium" */
.link-signature {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}
.link-signature::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--color-amber);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 320ms var(--ease-editorial, cubic-bezier(0.22, 1, 0.36, 1));
}
.link-signature:hover::after,
.link-signature:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* ── 8. Eyebrows y dividers se pintan de ámbar signature ───── */
/* (el degradado del divider vive en editorial.css; aquí NO lo aplanamos) */
.eyebrow { color: var(--color-amber); }
.divider-editorial::before,
.divider-editorial::after { background: var(--color-amber); }

/* ════════════════════════════════════════════════════════════════════
   BRAND FX — upgrade visual épico (grano, aura ámbar, foil dorado)
   Todo compositable, sin CLS, respeta reduced-motion y perf móvil.
   ════════════════════════════════════════════════════════════════════ */

/* ── BFX-1. Grano de película (textura apothecary) ──────────────────
   Overlay estático muy sutil que rompe el negro plano y da tacto
   "impreso/premium". Solo desktop con puntero fino (perf móvil intacta).
   pointer-events:none → nunca intercepta clics. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 9998;              /* bajo cursor(9999) y progress(10000) */
        pointer-events: none;
        opacity: 0.04;
        mix-blend-mode: soft-light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 140px 140px;
    }
}

/* ── BFX-2. Aura ámbar del hero (bloom cálido tras el titular/CTA) ───
   Ancla la luz donde vive la conversión: dirige la vista al CTA y da
   profundidad "épica". Va detrás del texto (z-index -1 sobre el overlay). */
.hero--home::after {
    content: "";
    position: absolute;
    left: -8%;
    bottom: -18%;
    width: min(72%, 720px);
    height: 88%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(247, 200, 59, 0.22) 0%,
        rgba(247, 200, 59, 0.10) 38%,
        transparent 68%
    );
    filter: blur(26px);
    animation: bfx-aura-breathe 9s ease-in-out infinite;
}
@keyframes bfx-aura-breathe {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .hero--home::after { animation: none; }
}
@media (max-width: 767px) {
    /* En móvil, aura más contenida para no lavar el texto */
    .hero--home::after { left: -20%; width: 90%; filter: blur(20px); }
}

/* ── BFX-3. Foil dorado (gradient text-clip) para palabra clave ─────
   Acento editorial en el titular: un término clave brilla en miel→oro.
   Los tonos son claros → contraste AA holgado sobre fondo oscuro. */
.text-foil {
    background: linear-gradient(
        100deg,
        var(--color-amber-light) 0%,
        var(--color-gold-light) 45%,
        var(--color-amber) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-amber-light);   /* fallback si no hay clip */
    /* El clip vuelve el texto "transparente"; forzamos color solo tras el clip */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .text-foil { color: transparent; }
}

/* ── BFX-4. Divider editorial: nodo central con glow ───────────────
   El mark central (◆ / palabra) gana un halo ámbar sutil. */
.divider-editorial__mark {
    color: var(--color-amber);
    text-shadow: 0 0 12px rgba(247, 200, 59, 0.45);
}

/* ── 9. Hash anchors: scroll-margin + flash highlight ──────── */
/* Cuando entras a #section el navegador no tapa el título con el header sticky
   y la sección destaca brevemente en ámbar para confirmar el destino. */
:target {
    scroll-margin-top: 96px;
    animation: signature-target-flash 1.6s var(--ease-editorial, ease-out);
}
@keyframes signature-target-flash {
    0%   { background-color: rgba(247, 200, 59, 0.14); }
    60%  { background-color: rgba(247, 200, 59, 0.08); }
    100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    :target { animation: none; }
}

/* ── 15. Header hide-on-scroll-down ──────────────────────── */
.site-header {
    transition: transform .28s var(--ease-editorial, cubic-bezier(0.22, 1, 0.36, 1)),
                background-color .2s ease,
                box-shadow .2s ease,
                min-height .2s ease;
    will-change: transform;
}
.site-header.is-hidden {
    transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
    .site-header.is-hidden { transform: none; }
}

/* ── 14. Image LQIP — fondo cálido mientras carga ────────── */
/* Aplica a imgs dentro de cards de producto/pack/blog para evitar
   parpadeo blanco en LCP/CLS. Se remueve visualmente al cargar la imagen. */
.product-card__img,
.blog-card__img,
.quiz-product img,
.pack-thumb,
.mini-cart__item img {
    background-color: var(--color-bg-elevated);
    background-image: linear-gradient(
        135deg,
        rgba(247, 200, 59, 0.03) 0%,
        rgba(226, 190, 101, 0.05) 50%,
        rgba(13, 11, 8, 0.1) 100%
    );
}

/* ── 13. Loading skeleton shimmer ────────────────────────── */
/* Uso: <div class="skeleton skeleton--card"></div> o .skeleton--text */
.skeleton {
    display: block;
    background: var(--color-bg-soft);
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(247, 200, 59, 0.06) 50%,
        transparent 100%
    );
    animation: skeleton-shimmer 1.5s infinite;
    transform: translateX(-100%);
}
.skeleton--text { height: 1em; margin: 0.3em 0; }
.skeleton--card { aspect-ratio: 1/1; }
.skeleton--line-short { width: 60%; }
.skeleton--line-long { width: 95%; }
@keyframes skeleton-shimmer {
    to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; opacity: 0.1; }
}

/* ── 12. Blog TOC auto-generado ─────────────────────────── */
.blog-toc {
    margin: 0 0 var(--space-4);
    padding: 18px 22px;
    background: var(--color-bg-soft);
    border-left: 2px solid var(--color-amber);
    border-radius: 2px;
}
.blog-toc__title {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-amber);
    margin: 0 0 10px;
    font-weight: 500;
}
.blog-toc__list {
    margin: 0; padding: 0;
    list-style: decimal inside;
    counter-reset: toc;
}
.blog-toc__list li {
    padding: 4px 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.blog-toc__list li::marker { color: var(--color-text-dim); font-weight: 500; }
.blog-toc__list a {
    color: var(--color-text);
    text-decoration: none;
    transition: color .15s;
    border-bottom: 1px dashed transparent;
}
.blog-toc__list a:hover {
    color: var(--color-amber);
    border-bottom-color: var(--color-amber);
}

/* ── 11. Back-to-top flotante ──────────────────────────────
   Borrado: tercera copia del mismo botón, esta con el ámbar del tema
   anterior. La declaración única está en components.css, incluidas las
   reglas de movimiento reducido y de impresión que había aquí.
   ────────────────────────────────────────────────────────── */

/* ── 10. Print stylesheet — recibos, fichas, políticas ─────── */
@media print {
    /* Oculta nav, footer, popups, CTA flotantes */
    header, footer, nav,
    .site-header, .site-footer,
    .floating-cta, .cookie-banner, .age-gate, .exit-intent,
    .shake-modal, .resume-banner, .signature-cursor, .signature-progress,
    [data-signature-cursor],
    .btn--primary, .btn--secondary, .btn--ghost,
    .product-gallery__zoom, .product-gallery__video-badge,
    .product-share, .quiz-wrap, .sobre-faq__chev,
    .social-proof, .recently-viewed,
    [data-quiz-root], [data-abandoned-cart] {
        display: none !important;
    }
    /* Reset cromático a blanco/negro para ahorrar tinta */
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-color: #999 !important;
    }
    body { font-family: Georgia, 'Times New Roman', serif !important; font-size: 11pt; line-height: 1.45; }
    h1, h2, h3, h4 { font-family: Georgia, serif !important; page-break-after: avoid; }
    a { text-decoration: underline; color: #000 !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; font-weight: normal; }
    /* Cuerpo del doc que sí queremos imprimir */
    main, .container, article, section, .editorial-prose {
        width: 100% !important; max-width: 100% !important;
        padding: 0 !important; margin: 0 !important;
    }
    img { max-width: 100% !important; page-break-inside: avoid; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #666 !important; padding: 4px 6px; }
    /* Blog posts y fichas de producto se imprimen bien por defecto */
    .product-info__name, .blog-post h1 { font-size: 18pt; }
    /* Ahorra páginas al final */
    @page { margin: 2cm; }
}