/**
 * Sistema de movimiento de AC Trenzas Studio.
 *
 * Solo anima opacity y transform para evitar recalculos de maquetacion. Los
 * efectos se desactivan si la persona ha pedido reducir el movimiento.
 */

:root {
  --ac-motion-fast: 180ms;
  --ac-motion-base: 460ms;
  --ac-motion-slow: 680ms;
  --ac-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --ac-motion-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: ac-page-out var(--ac-motion-fast) ease both;
}

::view-transition-new(root) {
  animation: ac-page-in 320ms var(--ac-motion-ease) both;
}

@keyframes ac-page-out {
  to {
    opacity: 0;
    transform: translate3d(0, -3px, 0);
  }
}

@keyframes ac-page-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
}

.ac-scroll-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .ac-scroll-progress {
    background: rgb(176 111 101 / 15%);
    display: block;
    height: 3px;
    inset: 0 0 auto;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 10020;
  }

  .ac-scroll-progress span {
    animation: ac-reading-progress auto linear both;
    animation-timeline: scroll(root block);
    background: linear-gradient(90deg, #9a8578, #b06f65 56%, #5f4334);
    display: block;
    height: 100%;
    transform-origin: left center;
  }
}

@keyframes ac-reading-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.ac-motion-ready .ac-motion-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--ac-motion-base) var(--ac-motion-ease),
    transform var(--ac-motion-slow) var(--ac-motion-ease-emphasized);
  transition-delay: var(--ac-motion-delay, 0ms);
  will-change: opacity, transform;
}

.ac-motion-ready .ac-motion-reveal[data-ac-motion="left"] {
  transform: translate3d(-24px, 0, 0);
}

.ac-motion-ready .ac-motion-reveal[data-ac-motion="right"] {
  transform: translate3d(24px, 0, 0);
}

.ac-motion-ready .ac-motion-reveal[data-ac-motion="media"] {
  transform: translate3d(0, 12px, 0) scale(0.985);
}

.ac-motion-ready .ac-motion-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .route-card,
    .featured-card,
    .related-links a,
    .prerequisite-route a,
    .care-route a,
    .article-next a
  ) {
    transition:
      border-color var(--ac-motion-base) var(--ac-motion-ease),
      box-shadow var(--ac-motion-base) var(--ac-motion-ease),
      transform var(--ac-motion-base) var(--ac-motion-ease-emphasized);
  }

  :is(
    .route-card,
    .featured-card,
    .related-links a,
    .prerequisite-route a,
    .care-route a,
    .article-next a
  ):hover {
    border-color: rgb(176 111 101 / 42%);
    box-shadow: 0 18px 44px rgb(59 46 40 / 11%);
    transform: translate3d(0, -4px, 0);
  }

  :is(.route-card, .featured-card) img {
    transition: transform var(--ac-motion-slow) var(--ac-motion-ease-emphasized);
  }

  :is(.route-card, .featured-card):hover img {
    transform: scale(1.025);
  }

  :is(
    a,
    button,
    .button,
    .hero-button,
    .card-link,
    input[type="button"],
    input[type="submit"]
  ) {
    transition-duration: var(--ac-motion-fast);
    transition-timing-function: var(--ac-motion-ease);
  }
}

.ac-cursor-ring,
.ac-cursor-dot {
  border-radius: 50%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translate3d(-100px, -100px, 0);
  z-index: 10030;
}

.ac-cursor-ring {
  background: radial-gradient(circle, rgb(216 178 174 / 38%) 0%, rgb(216 178 174 / 0%) 70%);
  border: 0;
  height: 46px;
  margin: -23px 0 0 -23px;
  transition:
    background var(--ac-motion-fast) ease,
    height var(--ac-motion-fast) var(--ac-motion-ease),
    margin var(--ac-motion-fast) var(--ac-motion-ease),
    opacity var(--ac-motion-fast) ease,
    width var(--ac-motion-fast) var(--ac-motion-ease);
  width: 46px;
}

.ac-cursor-dot {
  background: #b06f65;
  border: 1.5px solid #b06f65;
  box-shadow: none;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  transition:
    background-color var(--ac-motion-fast) ease,
    border-color var(--ac-motion-fast) ease,
    height var(--ac-motion-fast) var(--ac-motion-ease),
    margin var(--ac-motion-fast) var(--ac-motion-ease),
    width var(--ac-motion-fast) var(--ac-motion-ease),
    opacity var(--ac-motion-fast) ease,
    scale 90ms ease;
  width: 9px;
}

.ac-cursor-active,
.ac-cursor-active body,
.ac-cursor-active a,
.ac-cursor-active button,
.ac-cursor-active [role="button"],
.ac-cursor-active input[type="button"],
.ac-cursor-active input[type="submit"] {
  cursor: none !important;
}

.ac-cursor-active :is(input, textarea, select, [contenteditable="true"], #wpadminbar, #wpadminbar *) {
  cursor: auto !important;
}

.ac-cursor-active input:is([type="text"], [type="email"], [type="search"], [type="url"]),
.ac-cursor-active textarea,
.ac-cursor-active [contenteditable="true"] {
  cursor: text !important;
}

.ac-cursor-active .ac-cursor-ring,
.ac-cursor-active .ac-cursor-dot {
  opacity: 1;
}

.ac-cursor-ring.is-interactive {
  background: radial-gradient(circle, rgb(176 111 101 / 28%) 0%, rgb(176 111 101 / 0%) 72%);
  height: 68px;
  margin: -34px 0 0 -34px;
  width: 68px;
}

.ac-cursor-dot.is-interactive {
  background: transparent;
  border-color: #5f4334;
  height: 20px;
  margin: -10px 0 0 -10px;
  width: 20px;
}

.ac-cursor-dot.is-pressed {
  scale: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .ac-motion-ready .ac-motion-reveal,
  .ac-motion-ready .ac-motion-reveal[data-ac-motion] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ac-scroll-progress,
  .ac-cursor-ring,
  .ac-cursor-dot {
    display: none !important;
  }

  :is(
    .route-card,
    .featured-card,
    .related-links a,
    .prerequisite-route a,
    .care-route a,
    .article-next a
  ) {
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================================
   Pulido global v0.8.0: navegación fija, enlaces vivos y microinteracciones.
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:1000;background:rgb(247 241 236 / 90%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgb(59 46 40 / 8%)}
body.admin-bar .site-header{top:32px}
.desktop-nav a{position:relative;text-decoration:none}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#b06f65;transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,0,0,1)}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.desktop-nav a[aria-current]::after{transform:scaleX(1)}
.site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0;padding:0}
.site-footer nav a{color:inherit;text-decoration:none}
.site-footer nav a:hover,.site-footer nav a:focus-visible{color:#b06f65;text-decoration:underline;text-underline-offset:3px}
.footer-navigation ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0;padding:0}
::selection{background:#e7cfc6;color:#3b2e28}
:focus-visible{outline:2px solid #b06f65;outline-offset:2px;border-radius:2px}
html{scroll-behavior:smooth}
.ac-submit,.button{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.ac-submit:hover,.button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgb(59 46 40 / 18%)}
.related-posts .post-grid article,.post-navigation a{transition:transform .25s var(--ac-motion-ease),box-shadow .25s ease}
.related-posts .post-grid article:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgb(59 46 40 / 12%)}
.post-navigation a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgb(59 46 40 / 12%)}
.entry-content figure.wp-block-image img{transition:transform .5s var(--ac-motion-ease)}
.entry-content figure.wp-block-image:hover img{transform:scale(1.02)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.site-header{position:static}.desktop-nav a::after{transition:none}}

/* =============================================================================
   Componentes globales v0.9.0: volver arriba, índice de contenidos, anclas
   bajo cabecera fija y hoja de impresión limpia.
   ========================================================================== */
h2[id],
h3[id] { scroll-margin-top: 118px; }

.ac-top-link {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgb(59 46 40 / 25%);
  border-radius: 50%;
  background: rgb(255 253 252 / 92%);
  color: #5f4334;
  box-shadow: 0 10px 26px rgb(59 46 40 / 16%);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, 0, 0, 1), background-color .2s ease, border-color .2s ease, color .2s ease;
  backdrop-filter: blur(6px);
}

.ac-top-link.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ac-top-link:hover,
.ac-top-link:focus-visible {
  background: #b06f65;
  border-color: #b06f65;
  color: #fdf8f1;
}

.ac-toc {
  margin: 0 0 2.2rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgb(59 46 40 / 16%);
  border-left: 3px solid #b06f65;
  background: rgb(255 253 252 / 85%);
}

.ac-toc-title {
  margin: 0 0 .6rem;
  color: #8a4c40;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ac-toc ol {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: .35rem;
}

.ac-toc a {
  color: #5f4334;
  font-size: .92rem;
  text-decoration: none;
}

.ac-toc a:hover,
.ac-toc a:focus-visible {
  color: #b06f65;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-meta .reading-time { white-space: nowrap; }

@media (max-width: 560px) {
  .ac-top-link {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ac-top-link {
    transform: none;
    transition: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .preview-note,
  .breadcrumbs,
  .post-navigation,
  .related-posts,
  .comments-area,
  .ac-top-link,
  .ac-scroll-progress,
  .ac-cursor-ring,
  .ac-cursor-dot,
  #wpadminbar { display: none !important; }

  body {
    background: #fff;
    color: #000;
  }

  .entry-content a {
    color: #000;
    text-decoration: none;
  }

  .entry-content figure { break-inside: avoid; }
}
