/* Animaciones y transiciones. Propietario: agente «estructura y movimiento».
   Reglas: solo transform/opacity (sin saltos de maquetación); los estados ocultos solo existen con la clase «js» (sin JS todo se ve);
   la carta pública (body[data-lite]) solo lleva la entrada suave; prefers-reduced-motion lo desactiva casi todo. */
:root{--t-fast:120ms;--t-med:220ms;--t-slow:420ms;--ease:cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;scroll-padding-top:5rem}

  /* Navegación entre páginas: el navegador funde la página y deja quietas cabecera y pestañas (Chrome/Edge/Safari; el resto, sin efecto). */
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  .panel-nav{view-transition-name:panel-nav}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms}

  /* Entrada de página (sin JS): fundido + ligero deslizamiento. La carta pública, solo fundido. */
  @keyframes page-in{from{opacity:0;transform:translateY(8px)}}
  @keyframes page-fade{from{opacity:0}}
  body > main{animation:page-in var(--t-slow) var(--ease) backwards}
  body[data-lite] > main{animation:page-fade 260ms ease backwards}

  /* Avisos: entran deslizando. */
  @keyframes alert-in{from{opacity:0;transform:translateY(-8px)}}
  .alert{animation:alert-in var(--t-med) var(--ease) backwards}

  /* Insignias: pequeña pulsación al aparecer. */
  @keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
  body:not([data-lite]) .badge{animation:pop 360ms var(--ease) backwards}

  /* Botones: elevación al pasar, pulsación al hundir, brillo sutil. */
  .btn{position:relative;overflow:hidden;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease)}
  .btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(3,44,76,.45)}
  .btn:not(:disabled):active{transform:translateY(0) scale(.98);box-shadow:none}
  .btn::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
  .btn:not(:disabled):hover::before{transform:translateX(120%);transition:transform 650ms var(--ease)}
  body[data-lite] .btn::before{display:none}

  /* Enlaces del texto: el subrayado engrosa con suavidad. */
  main a:not(.btn){text-underline-offset:.18em;text-decoration-thickness:1px;transition:color var(--t-fast),text-decoration-thickness var(--t-fast)}
  main a:not(.btn):hover{text-decoration-thickness:2px}

  /* Tarjetas: levantan un poco al pasar el ratón (no en la carta pública). */
  body:not([data-lite]) .card,body:not([data-lite]) .section-card{transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med)}
  @media (hover:hover){
    body:not([data-lite]) .section-card:hover,body:not([data-lite]) .plan:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(3,44,76,.45)}
  }

  /* Pestañas del panel. */
  .panel-nav a{transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast) var(--ease)}
  .panel-nav a:not([aria-current]):hover{transform:translateY(-1px)}

  /* Menú desplegable (<details>): el contenido aparece deslizando; en navegadores nuevos también anima la altura. */
  body:not([data-lite]) details[open] > :not(summary){animation:page-in var(--t-med) var(--ease) backwards}
  @supports selector(::details-content){
    body:not([data-lite]) details{interpolate-size:allow-keywords}
    body:not([data-lite]) details::details-content{height:0;overflow:clip;transition:height var(--t-med) var(--ease),content-visibility var(--t-med) allow-discrete}
    body:not([data-lite]) details[open]::details-content{height:auto}
  }

  /* Aparición escalonada al hacer scroll: motion.js marca con .rv lo que está por debajo del pliegue. */
  .js .rv{opacity:0;transform:translateY(16px)}
  .js .rv.rv-in{opacity:1;transform:none;transition:opacity 480ms var(--ease) var(--rv-delay,0ms),transform 480ms var(--ease) var(--rv-delay,0ms)}

  /* Indicador deslizante de la pestaña activa. */
  .panel-nav .tab-ind{position:absolute;z-index:0;top:6px;left:0;height:var(--hit);width:0;border-radius:var(--r-pill);background:var(--c-ink);pointer-events:none;transition:transform 320ms var(--ease),width 320ms var(--ease)}
  .panel-nav.ind-ready .tab-ind{opacity:1}

  /* Barra de progreso: crece despacio hasta el 85 % mientras carga la página siguiente. */
  .nav-progress.go .nav-progress-bar{transition:transform 8s cubic-bezier(.1,.6,.2,1) 120ms;transform:scaleX(.85)}
  .nav-progress.done .nav-progress-bar{transition:transform 150ms ease-out;transform:scaleX(1)}
  .nav-progress{transition:opacity 200ms ease}

  /* Cierre de avisos. */
  .alert.is-leaving{opacity:0;transform:translateY(-6px);transition:opacity var(--t-med),transform var(--t-med)}
  /* Spinner de botón ocupado. */
  @keyframes spin{to{transform:rotate(360deg)}}
  .btn.is-busy::after{animation:spin .7s linear infinite}
}

/* ---- Partes que no dependen del movimiento (también con «reducir movimiento») ---- */
.panel-nav .tab-ind{opacity:0}
.panel-nav.has-ind a[aria-current=page]{background:transparent;border-color:transparent;color:var(--c-bg)}
.panel-nav.has-ind a[aria-current=page]:hover{background:transparent;color:var(--c-bg)}
.panel-nav.ind-ready .tab-ind{opacity:1}
.panel-nav.has-ind.ind-moving a[aria-current=page]{color:var(--c-ink)}
.panel-nav.fade-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.25rem);mask-image:linear-gradient(to right,transparent,#000 2.25rem)}
.panel-nav.fade-r{-webkit-mask-image:linear-gradient(to left,transparent,#000 2.25rem);mask-image:linear-gradient(to left,transparent,#000 2.25rem)}
.panel-nav.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.25rem,#000 calc(100% - 2.25rem),transparent);mask-image:linear-gradient(to right,transparent,#000 2.25rem,#000 calc(100% - 2.25rem),transparent)}

/* Barra de progreso superior (la crea motion.js). */
.nav-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;pointer-events:none;opacity:0}
.nav-progress.go,.nav-progress.done{opacity:1}
.nav-progress-bar{height:100%;background:var(--c-cta);transform:scaleX(0);transform-origin:left;box-shadow:0 0 8px var(--c-cta)}
.nav-progress.go .nav-progress-bar{transform:scaleX(.7)}
.nav-progress.done{opacity:0}

/* Aviso con botón de cierre (lo añade motion.js). */
.alert[data-flash].has-close{position:relative;padding-right:3.25rem}
.alert-close{position:absolute;top:0;right:0;width:var(--hit);height:var(--hit);display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-md);background:transparent;color:inherit;font:700 1.25rem/1 var(--f-sans);cursor:pointer}
.alert-close:hover{background:var(--c-surface-2)}

/* Botón ocupado: spinner + texto «Guardando…»; sin doble envío (el botón queda desactivado). */
.btn.is-busy{cursor:progress;opacity:.85}
.btn.is-busy::after{content:"";width:1em;height:1em;margin-left:.6em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;flex:none}

/* Movimiento reducido: sin desplazamientos ni brillos; los avisos y estados siguen siendo visibles y claros. */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .btn::before{display:none}
  .panel-nav .tab-ind{transition:none}
  .nav-progress-bar{transition:none!important}
  .nav-progress.go .nav-progress-bar{transform:scaleX(.7)}
  .btn.is-busy::after{border-right-color:currentColor}
}