/* Aguja Verde · capa de movimiento y vidrio (26-oct-2026). Sin librerías.
   Donde el navegador no soporta algo, la página queda como estaba. */
/* 1) Transiciones entre páginas (Chrome 126+, Safari 18.2+; Firefox navega normal) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
:root .top,
:root body > header { view-transition-name: av-top; }

/* 4) Tipografía: títulos en líneas parejas, párrafos sin viudas */
:root h1, :root h2, :root h3 { text-wrap: balance; }
:root p, :root li { text-wrap: pretty; }

/* Vidrio: solo en el marco (encabezado fijo y barra de compra), nunca sobre el texto */
:root {
  --av-glass: color-mix(in srgb, var(--card) 68%, transparent);
  --av-glass-edge: color-mix(in srgb, #ffffff 55%, transparent);
  --av-glass-shade: color-mix(in srgb, var(--ink) 12%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --av-glass: color-mix(in srgb, var(--card) 58%, transparent);
    --av-glass-edge: color-mix(in srgb, #ffffff 14%, transparent);
    --av-glass-shade: color-mix(in srgb, #000000 45%, transparent);
  }
}
:root[data-theme="dark"] {
  --av-glass: color-mix(in srgb, var(--card) 58%, transparent);
  --av-glass-edge: color-mix(in srgb, #ffffff 14%, transparent);
  --av-glass-shade: color-mix(in srgb, #000000 45%, transparent);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .top,
  :root body > header {
    background: var(--av-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    backdrop-filter: blur(16px) saturate(1.8);
    border-bottom: 1px solid var(--av-glass-edge);
    box-shadow: inset 0 1px 0 var(--av-glass-edge);
  }
  /* Refracción tipo Liquid Glass: solo Chromium la pinta (clase puesta por el script) */
  :root.av-chromium .top,
  :root.av-chromium body > header {
    backdrop-filter: url(#av-liquid) blur(10px) saturate(1.8);
  }
}

/* Sombra del encabezado que aparece al bajar (scroll-driven; Chrome 115+, Safari 26) */
@supports (animation-timeline: scroll()) {
  @keyframes av-lift { from { box-shadow: inset 0 1px 0 var(--av-glass-edge), 0 0 0 transparent; }
                       to   { box-shadow: inset 0 1px 0 var(--av-glass-edge), 0 10px 28px -14px var(--av-glass-shade); } }
  :root .top,
  :root body > header {
    animation: av-lift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 140px;
  }
}

/* 2) Barra de progreso de lectura en el artículo */
.av-progress { display: none; }
@supports (animation-timeline: scroll()) {
  :root .av-progress {
    display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300;
    background: var(--brand); transform-origin: 0 50%; transform: scaleX(0);
    animation: av-grow linear both; animation-timeline: scroll(root);
    top: env(safe-area-inset-top, 0px);
  }
  @keyframes av-grow { to { transform: scaleX(1); } }
}

/* 2) Entradas al hacer scroll: suben y se aclaran al entrar en pantalla.
   Arrancan visibles (opacidad .2), nunca en 0. Chrome 115+ y Safari 26 lo hacen con CSS;
   en los demás lo hace el script (clase av-io) con el mismo efecto. */
@supports (animation-timeline: view()) {
  @keyframes av-rise { from { opacity: .2; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
  :root .article-card,
  :root .card,
  :root .post,
  :root .panel,
  :root main article > h2,
  :root .highlight-box,
  :root .warning-box,
  :root .formula-box,
  :root .cta-section,
  :root section.band > .wrap > h2 {
    animation: av-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}
:root.av-io .av-r { opacity: .2; transform: translateY(40px) scale(.97);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
:root.av-io .av-r.av-in { opacity: 1; transform: none; }

/* 3) Microinteracciones */
:root .article-card,
:root .card,
:root .post,
:root .panel {
  transition: translate .28s cubic-bezier(.2,.7,.2,1), scale .15s ease, box-shadow .28s, border-color .28s;
}
@media (hover: hover) {
:root .article-card:hover,
:root .card:hover,
:root .post:hover,
:root .panel:hover {
  translate: 0 -4px;
  border-color: var(--brand-line);
  box-shadow: 0 14px 30px -18px var(--av-glass-shade);
}
}
/* En celular no hay cursor: la tarjeta responde al tocarla */
:root .article-card:active,
:root .card:active,
:root .post:active { scale: .985; border-color: var(--brand-line); }
:root .article-card .article-link-arrow { display: inline-block; transition: transform .25s; }
:root .article-card:hover .article-link-arrow { transform: translateX(4px); }
:root a.cta-button,
:root button[type="submit"],
:root .ladder a,
:root .av-buy a {
  transition: transform .15s ease, filter .2s ease, background-color .2s;
}
:root a.cta-button:hover,
:root button[type="submit"]:hover { filter: brightness(1.06); }
:root a.cta-button:active,
:root button[type="submit"]:active,
:root .ladder a:active,
:root .av-buy a:active { transform: scale(.97); }

/* Barra flotante de compra en el artículo (vidrio) */
.av-buy { display: none; }
:root .av-buy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: fixed; z-index: 250;
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin: 0 auto; padding: 10px 10px 10px 16px;
  border-radius: 16px; border: 1px solid var(--av-glass-edge);
  background: var(--av-glass); color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--av-glass-edge), 0 18px 40px -20px var(--av-glass-shade);
  font-size: .92rem; line-height: 1.3;
  transform: translateY(0); opacity: 1;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
}
:root .av-buy[data-hide="1"] { transform: translateY(140%); opacity: 0; pointer-events: none; }
.av-buy b { font-weight: 700; }
.av-buy span { min-width: 0; }
.av-buy a {
  flex: 0 0 auto; background: var(--brand); color: var(--on-brand); text-decoration: none;
  font-weight: 700; padding: 10px 16px; border-radius: 11px; white-space: nowrap;
}

/* 5) Quien pide menos movimiento en su sistema, lo recibe */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  :root .article-card, :root .card, :root .post, :root .panel, :root main article > h2, :root .highlight-box, :root .warning-box,
  :root .formula-box, :root .cta-section, :root section.band > .wrap > *, :root section.av-reveal { animation: none !important; }
  :root .article-card:hover, :root .card:hover, :root .post:hover, :root .panel:hover { translate: none !important; }
  :root.av-io .av-r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .av-buy { transition: none !important; }
}