/* Complejo Campo y Mar — movimiento: entradas, apariciones, transiciones y estados al pasar el mouse */

@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--cream-55); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Inicio ---------- */
.hero__media img { animation: heroZoom 14s var(--ease-soft) both; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; }
.js .hero__title .line > span { animation: lineUp 1.1s var(--ease) both; }
.js .hero__title .line:nth-child(2) > span { animation-delay: .1s; }
.js .hero__title .line:nth-child(3) > span { animation-delay: .2s; }
.js .badge, .js .hero__lead, .js .quick, .js .hero__meta { animation: rise 1s var(--ease) both; }
.js .badge { animation-delay: 0s; }
.js .hero__lead { animation-delay: .3s; }
.js .quick { animation-delay: .42s; }
.js .hero__meta { animation-delay: .54s; }
.hero-done .hero__title .line > span,
.hero-done .badge, .hero-done .hero__lead, .hero-done .quick, .hero-done .hero__meta { animation: none !important; opacity: 1; transform: none; }
.badge__dot { animation: pulse 2.4s ease-in-out infinite; }
.hero__scroll span { animation: drip 2.4s var(--ease-soft) infinite; }

/* ---------- Franja ---------- */
.ticker__track { animation: ticker 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ---------- Aparición al hacer scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .cards .reveal:nth-child(3n+2), .js .reviews .reveal:nth-child(2), .js .steps .reveal:nth-child(2) { transition-delay: .1s; }
.js .cards .reveal:nth-child(3n), .js .reviews .reveal:nth-child(3), .js .steps .reveal:nth-child(3) { transition-delay: .2s; }

/* Cortina: la foto se descubre de abajo hacia arriba */
.js .curtain { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); }
.js .curtain img { transform: scale(1.15); transition: transform 1.8s var(--ease); }
.js .curtain.is-in { clip-path: inset(0 0 0 0); }
.js .curtain.is-in img { transform: none; }
.js .frame--small.curtain { transition-delay: .25s; }

/* ---------- Transiciones y estados ---------- */
.btn { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn--light:hover { background: var(--white); }
.btn--dark:hover { background: var(--green-deep); }
.btn--ghost:hover { background: var(--cream-12); border-color: var(--cream); }
.btn--outline:hover { background: var(--green); color: var(--cream); }

.site-header .nav a:not(.nav__cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-header .nav a:not(.nav__cta):hover::after { transform: scaleX(1); }
.nav__cta { transition: background-color .3s, color .3s, border-color .3s; }
.site-header:not(.is-solid) .nav__cta:hover { background: var(--cream); color: var(--green); }

.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { transition: transform .35s var(--ease), background-color .2s; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) { .nav { transition: opacity .4s var(--ease-soft), visibility .4s; } }

.card { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--sand-deep); }
.card__icon { transition: transform .45s var(--ease), color .45s var(--ease); }
.card:hover .card__icon { transform: translateY(-3px); color: var(--green); }

.unit__photo img, .shot img { transition: transform 1.2s var(--ease); }
.unit__photo:hover img, .shot:hover img { transform: scale(1.04); }
.unit__more { transition: background-color .3s, color .3s; }
.unit__photo:hover .unit__more { background: var(--green); color: var(--cream); }

.filter { transition: background-color .3s, color .3s, border-color .3s; }
.filter:hover { border-color: var(--green); }

.review, .step { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.review:hover, .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }

.postcard { transition: transform .9s var(--ease); }
.consult__card:hover .postcard { transform: rotateY(-6deg) rotateX(3deg) rotateZ(-1deg); }

.field input, .field select, .field textarea { transition: border-color .25s, box-shadow .25s; }

.acc__panel { transition: max-height .5s var(--ease); }
.acc__btn::before, .acc__btn::after { transition: transform .35s var(--ease); }

.lightbox { transition: opacity .35s var(--ease-soft), visibility .35s; }
.lightbox__btn { transition: background-color .25s; }
.lightbox__btn:hover { background: var(--cream-12); }

.wa-float { transition: transform .5s var(--ease); }
.toast { transition: transform .5s var(--ease), opacity .5s var(--ease); }
.progress span { transition: transform .1s linear; }

/* Movimiento reducido: solo se apagan los efectos intrusivos (zoom, franja, cortinas, goteo) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__media img, .hero__scroll span, .badge__dot, .ticker__track { animation: none; }
  .js .curtain, .js .curtain img { clip-path: none; transform: none; transition: none; }
}