/* Letrada Marta Abril — animaciones (respeta prefers-reduced-motion) */

/* ============ Reveal on scroll ============ */
.js [data-animate] {
  opacity: 0;
  transition:
    opacity .8s var(--ease-out, ease-out),
    transform .8s var(--ease-out, ease-out),
    filter .8s var(--ease-out, ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

.js [data-animate="fade-up"]    { transform: translateY(32px); }
.js [data-animate="fade-down"]  { transform: translateY(-32px); }
/* En móvil: solo eje Y para no ensanchar el documento (overflow-x) */
.js [data-animate="fade-left"],
.js [data-animate="fade-right"] { transform: translateY(28px); }
.js [data-animate="zoom-in"]    { transform: scale(.94); }
.js [data-animate="blur-in"]    { filter: blur(10px); transform: translateY(16px); }

@media (min-width: 900px) {
  .js [data-animate="fade-left"]  { transform: translateX(40px); }
  .js [data-animate="fade-right"] { transform: translateX(-40px); }
}

.js [data-animate].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Si el JS falla: todo visible */
.no-anim [data-animate] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.card-hover {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-hover:hover,
.card-hover:focus-within {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.img-zoom { overflow: hidden; border-radius: var(--radius-md); }
.img-zoom img { transition: transform 1.2s var(--ease-out); }
.img-zoom:hover img { transform: scale(1.06); }

.card-hover:hover .icon-badge {
  transform: translateY(-3px) rotate(-4deg);
  background: var(--color-accent);
  color: #fff;
}
.icon-badge {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  font-size: 1.35rem;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.link-arrow i { transition: transform var(--transition); }
.link-arrow:hover i { transform: translateX(6px); }

.btn,
.btn-primary,
.btn-secondary {
  position: relative;
  overflow: hidden;
}

.site-header.is-scrolled {
  background: rgba(247, 245, 240, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

[data-parallax] { transform: translate3d(0, var(--parallax, 0px), 0); will-change: transform; }
/* El parallax no debe contribuir al scroll horizontal */
.cta-media [data-parallax],
[data-parallax].cta-media-bg {
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.hero__title,
.hero__text,
.hero__actions,
.hero__points {
  animation: heroIn 1s var(--ease-out) both;
}
.hero__text    { animation-delay: .15s; }
.hero__actions { animation-delay: .3s; }
.hero__points  { animation-delay: .45s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

body { animation: pageIn .6s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.is-leaving { opacity: 0; transition: opacity .25s ease; }

.line-draw {
  display: block;
  width: 0;
  height: 3px;
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 0;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 1s var(--ease-out) .2s;
}
.is-visible .line-draw,
.line-draw.is-visible { width: 64px; }
.section-title + .line-draw,
h2 + .line-draw,
h1 + .line-draw {
  margin-top: 1.35rem;
}

.faq__item { border-bottom: 1px solid rgba(26, 24, 22, .08); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  font-weight: 600;
  color: var(--color-ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { transition: transform var(--transition); color: var(--color-accent); }
.faq__item[open] summary i { transform: rotate(45deg); }
.faq__body {
  padding: 0 0 1.25rem;
  color: var(--color-text-muted);
  animation: faqIn .4s var(--ease-out);
}
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-animate],
  [data-animate] { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-parallax] { transform: none !important; }
  .hero__bg img { animation: none !important; }
}