/* ==========================================================================
   AvatarX — Capa de mejoras (progressive enhancement)
   Animaciones estilo Apple + performance + accesibilidad.
   Se carga por encima del bundle sin modificarlo. Todo degrada con gracia:
   si el JS no corre, nada queda oculto.
   ========================================================================== */

:root{
  --ax-ease: cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out expresivo (Apple) */
  --ax-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ax-dur: 0.8s;
  --ax-accent: #38bdf8;
}

/* --- Scroll suave + offset para el header sticky en anclas --- */
html{ scroll-behavior: smooth; }
:where(section[id], [id].section, main [id]){ scroll-margin-top: 96px; }

/* --- Transición suave al cambiar de tema claro/oscuro --- */
html[data-theme] body,
html[data-theme] .site-header,
html[data-theme] .site-footer{
  transition: background-color .35s var(--ax-ease-soft),
              color .35s var(--ax-ease-soft),
              border-color .35s var(--ax-ease-soft);
}

/* --- Header: blur + sombra al hacer scroll (aparece con la clase de JS) --- */
.site-header{
  transition: background-color .3s ease, box-shadow .3s ease,
              backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.site-header.ax-scrolled{
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 10px 34px rgba(0,0,0,.28);
}
html[data-theme="light"] .site-header.ax-scrolled{
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.10);
}

/* ==========================================================================
   Reveal on scroll (solo activo cuando JS agrega .ax-reveal-ready al <html>)
   ========================================================================== */
html.ax-reveal-ready [data-ax-reveal]{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--ax-dur) var(--ax-ease),
              transform var(--ax-dur) var(--ax-ease);
  transition-delay: var(--ax-delay, 0s);
  will-change: opacity, transform;
}
html.ax-reveal-ready [data-ax-reveal="up-sm"]{ transform: translateY(18px); }
html.ax-reveal-ready [data-ax-reveal="scale"]{ transform: translateY(24px) scale(.965); transform-origin: center; }
html.ax-reveal-ready [data-ax-reveal="fade"]{ transform: none; }

html.ax-reveal-ready [data-ax-reveal].ax-in{
  opacity: 1;
  transform: none;
}
/* liberar la capa de composición una vez revelado */
html.ax-reveal-ready [data-ax-reveal].ax-done{ will-change: auto; }

/* --- Parallax sutil del hero (JS setea --ax-parallax) --- */
.hero .hero-media{ will-change: transform; }
.hero.ax-parallax .hero-media{
  transform: translate3d(0, var(--ax-parallax, 0px), 0) scale(1.06);
}

/* ==========================================================================
   Performance: no renderizar secciones fuera de viewport en una página larga
   (mejora notablemente el costo de scroll). Se excluye el hero.
   ========================================================================== */
main > section:not(.hero){
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

/* ==========================================================================
   Accesibilidad: foco visible consistente (guidelines Vercel)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--ax-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ==========================================================================
   Widget de chat: que no tape el contenido (se apoya por encima del bundle)
   ========================================================================== */
chat-widget{ z-index: 60 !important; }
@media (max-width: 768px){
  chat-widget{ margin-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ==========================================================================
   prefers-reduced-motion: respeto total (guidelines + Apple)
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  html.ax-reveal-ready [data-ax-reveal]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero.ax-parallax .hero-media{ transform: none !important; }
  .site-header{ transition: none !important; }
}

/* ==========================================================================
   Tabla de precios (se inyecta en /precios/ por enhancements.js)
   ========================================================================== */
.ax-pricing{ padding: clamp(48px,7vw,88px) 0; }
.ax-pricing .ax-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ax-pricing h2{ font-size: clamp(1.7rem,3vw,2.5rem); line-height:1.1; margin:0 0 10px; text-align:center; }
.ax-pricing .ax-sub{ opacity:.72; text-align:center; margin:0 auto 44px; max-width:620px; }
.ax-pricing .ax-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); align-items:stretch; }
.ax-plan{ position:relative; display:flex; flex-direction:column; padding:30px 24px 26px;
  border:1px solid var(--ax-plan-border,rgba(255,255,255,.12)); border-radius:18px;
  background:var(--ax-plan-bg,rgba(255,255,255,.035)); }
.ax-plan.ax-featured{ border-color:var(--ax-accent); box-shadow:0 0 0 1px var(--ax-accent), 0 24px 60px rgba(0,0,0,.4); }
.ax-badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--ax-accent); color:#04121c; font-weight:700; font-size:.68rem; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 14px; border-radius:999px; }
.ax-plan h3{ margin:0; font-size:1.12rem; }
.ax-plan .ax-price{ font-size:2.3rem; font-weight:800; line-height:1; margin:16px 0 2px; }
.ax-plan .ax-price span{ font-size:.9rem; font-weight:500; opacity:.65; }
.ax-plan .ax-tokens{ opacity:.85; font-size:.9rem; margin:2px 0 10px; }
.ax-plan .ax-desc{ opacity:.68; font-size:.86rem; line-height:1.5; margin:0 0 22px; flex:1; }
.ax-plan .button{ width:100%; display:inline-flex; justify-content:center; text-align:center; }
.ax-pricing .ax-foot{ text-align:center; opacity:.7; font-size:.86rem; margin-top:26px; }
html[data-theme="light"] .ax-plan{ --ax-plan-border:rgba(0,0,0,.12); --ax-plan-bg:rgba(0,0,0,.02); }

/* ==========================================================================
   Banner de consentimiento de cookies (inyectado por enhancements.js)
   ========================================================================== */
.ax-cookie{ position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px;
  padding:16px clamp(16px,4vw,44px); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  background:var(--ax-cookie-bg,#0f1522); color:var(--ax-cookie-fg,#e7eaf1);
  border-top:1px solid var(--ax-cookie-bd,rgba(255,255,255,.10));
  box-shadow:0 -10px 34px rgba(0,0,0,.30);
  transform:translateY(110%); transition:transform .5s var(--ax-ease); }
.ax-cookie.ax-show{ transform:none; }
.ax-cookie p{ margin:0; flex:1; min-width:250px; font-size:.9rem; line-height:1.55; opacity:.92; }
.ax-cookie a.ax-cookie-link{ color:var(--ax-accent); text-decoration:underline; }
.ax-cookie .ax-cookie-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.ax-cookie .ax-cookie-reject{ background:none; border:0; padding:0; color:inherit; opacity:.8;
  text-decoration:underline; cursor:pointer; font:inherit; }
.ax-cookie .ax-cookie-reject:hover{ opacity:1; }
.ax-cookie .ax-cookie-close{ position:absolute; top:8px; right:12px; background:none; border:0;
  color:inherit; font-size:1.2rem; line-height:1; cursor:pointer; opacity:.55; }
.ax-cookie .ax-cookie-close:hover{ opacity:1; }
html[data-theme="light"] .ax-cookie{ --ax-cookie-bg:#f2f2f5; --ax-cookie-fg:#1a1a22; --ax-cookie-bd:rgba(0,0,0,.08); }
@media (prefers-reduced-motion: reduce){ .ax-cookie{ transition:none; } }

/* ==========================================================================
   AX_MOBILE_HERO_CSS — En móvil no se reproduce el video del hero:
   se muestra únicamente el poster (arregla el LCP en 4G lenta).
   ========================================================================== */
@media (max-width: 768px){
  .hero video[data-ax-mobile-off]{
    width:100%; height:100%; object-fit:cover; object-position:center;
  }
  /* sin parallax en móvil: menos trabajo de composición al scrollear */
  .hero.ax-parallax .hero-media{ transform:none !important; }
}