/* Aerotv web v9: brief de ajustes estéticos (movimiento, bordes, fondos provisorios, móvil) y trabajos con play. */

:root { --r: 14px; --r-sm: 10px; --ease: cubic-bezier(.2, .7, .2, 1); }

/* 2. Bordes más suaves: 14 px en tarjetas, imágenes y reproductores; 10 px en botones y campos */
.work, .feature, .vertical, .project__media, .ai-item, .compare-ai figure, .how__video,
.reel video, .nosotros img, .air video, .statement__clip .vertical, .process__clip .vertical,
.reel-split .vertical, .paths a, .modes article, .compare article, .allies article,
.cards, .ops, .roles, .services, .how__steps, .logos, .split__media video {
  border-radius: var(--r); overflow: hidden;
}
.btn, .form input, .form select, .form textarea, .filters button, .nav__toggle, .badge { border-radius: var(--r-sm); }
.work__info { border-top-right-radius: var(--r-sm); }
.paths { gap: 12px; padding: 0 var(--pad); }
.paths--spec { margin-top: 12px !important; }

/* Transiciones suaves en botones, enlaces y tarjetas */
.btn { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
a { transition: color .2s var(--ease); }
.paths a, .work, .feature, .vertical, .ai-item, .project__media { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
@media (hover: hover) {
  .paths a:hover, .work:hover, .vertical:hover, .ai-item:hover, .project__media:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
}

/* 1. Animaciones al bajar */
.js .reveal { opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal--text { transform: translateY(16px); }
.js .reveal--card { transform: translateY(24px); }
.js .reveal--media { transform: scale(1.035); transition-duration: .9s; }
.js .reveal.in { opacity: 1; transform: none; }

.clients-logos { grid-template-columns: repeat(8, 1fr); max-width: none; }
@media (max-width: 1100px) { .clients-logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .clients-logos { grid-template-columns: repeat(4, 1fr); } }
.works--3 { grid-template-columns: repeat(3, 1fr); }
.works--3 .work { aspect-ratio: 16 / 10; }
.verticals { grid-template-columns: repeat(auto-fit, minmax(0, 340px)); }
@media (max-width: 860px) { .works--3 { grid-template-columns: 1fr; } }

/* Trabajos con botón de play */
.work-play { position: relative; }
.work-play video { cursor: pointer; }
.play {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(10, 10, 10, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.play::before {
  content: ""; position: absolute; left: 31px; top: 25px;
  border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--white);
}
.play:hover, .play:focus-visible { background: var(--blue); border-color: var(--blue); transform: scale(1.06); }
.play:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.work-play.is-playing .play, .work-play.is-playing .work__info { opacity: 0; pointer-events: none; }
.work-play .work__info { transition: opacity .3s var(--ease); }

/* 3. Fondos audiovisuales (PROVISORIOS: para evaluar, se aprueban o reemplazan) */
.bgfx { position: relative; isolation: isolate; overflow: hidden; }
.bgfx__media { position: absolute; inset: 0; z-index: -1; }
.bgfx__media img, .bgfx__media video { width: 100%; height: 100%; object-fit: cover; }
.bgfx__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.78) 45%, rgba(10,10,10,.55) 100%); }
.bgfx--deep .bgfx__media::after { background: linear-gradient(180deg, rgba(10,10,10,.88), rgba(10,10,10,.8) 50%, rgba(10,10,10,.92)); }
.bgfx--right .bgfx__media img, .bgfx--right .bgfx__media video { object-position: 75% center; }
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,.82), rgba(10,10,10,.9)), url("assets/fotos/f8.jpg") center 60% / cover no-repeat; }
/* Etiqueta visible solo en modo revisión (agregar ?revision al link) */
.revision [data-provisorio]::before, .revision .cta-band::after {
  content: "Fondo provisorio · " attr(data-provisorio);
  position: absolute; top: 12px; left: 12px; z-index: 5;
  padding: 4px 10px; border-radius: 999px; background: #ffcf33; color: #0a0a0a; font-size: 11px; font-weight: 600;
}
.revision .cta-band::after { content: "Fondo provisorio · foto f8 (King Air en plataforma, Aerotv)"; }

/* 5. Prioridad móvil */
@media (max-width: 860px) {
  .btn { min-height: 48px; display: inline-flex; align-items: center; }
  .nav__menu a { min-height: 48px; display: flex; align-items: center; }
  .play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .play::before { left: 26px; top: 20px; border-width: 12px 0 12px 19px; }
  .bgfx__media::after { background: linear-gradient(180deg, rgba(10,10,10,.82), rgba(10,10,10,.9)); }
  .paths { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .paths a:hover, .work:hover, .vertical:hover, .ai-item:hover, .project__media:hover { transform: none; }
}