/* Asistencia de Visas HN — perfil, animaciones y transiciones */

/* =========================================================
   Perfil de Modesto
   ========================================================= */
.profile-media { position: relative; max-width: 460px; margin: 0 auto; width: 100%; }
/* El marco dorado solo rodea la foto; las redes quedan fuera y no se tocan con nada. */
.profile-photo { position: relative; isolation: isolate; margin: 14px 0 0 14px; }
.profile-photo::before {
  content: ""; position: absolute; inset: -14px 14px 14px -14px; border-radius: 30px; z-index: -1;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
}
.profile-frame {
  position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 4;
  box-shadow: var(--shadow); isolation: isolate;
}
.profile-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(11,22,40,.6));
}
.profile-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.profile-media:hover .profile-frame img { transform: scale(1.04); }
/* Tarjeta del nombre anclada dentro de la foto */
.profile-card {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 12px; max-width: max-content; margin: 0 auto;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  padding: 8px 20px 8px 8px; border-radius: 999px; box-shadow: var(--shadow);
}
.profile-card img { width: 44px; height: 44px; flex: none; }
.profile-card div { min-width: 0; }
.profile-card b { display: block; font-family: var(--display); color: var(--navy-800); font-size: 1.05rem; line-height: 1.15; }
.profile-card span { display: block; font-size: .8rem; color: var(--gold-700); font-weight: 600; letter-spacing: .04em; }
/* Redes: siempre 3 columnas del mismo ancho, sin saltos de línea raros */
.profile-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.profile-socials a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0;
  padding: 9px 8px; border-radius: 12px;
  background: var(--ivory); border: 1px solid var(--line); text-decoration: none; color: var(--muted); font-size: .78rem;
  transition: border-color .2s, transform .2s, background .2s;
}
.profile-socials a b { color: var(--navy-800); font-size: .88rem; }
.profile-socials a, .profile-socials a b { overflow-wrap: anywhere; }
.profile-socials a:hover { border-color: var(--gold-500); background: var(--gold-50); transform: translateY(-2px); }
@media (max-width: 420px) {
  .profile-card { padding-right: 16px; gap: 10px; }
  .profile-card img { width: 38px; height: 38px; }
  .profile-card b { font-size: .95rem; }
  .profile-socials a { font-size: .72rem; padding: 8px 4px; }
  .profile-socials a b { font-size: .82rem; }
}

/* =========================================================
   Transición entre páginas (View Transitions API)
   ========================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s ease both; }
::view-transition-new(root) { animation: vt-in .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* =========================================================
   Portada
   ========================================================= */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

.hero-bg { animation: kenburns 14s cubic-bezier(.2,.6,.3,1) both, fade 1.4s ease both; }
.hero-inner > div > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-inner > div > :nth-child(2) { animation-delay: .1s; }
.hero-inner > div > :nth-child(3) { animation-delay: .2s; }
.hero-inner > div > :nth-child(4) { animation-delay: .3s; }
.hero-inner > div > :nth-child(5) { animation-delay: .4s; }
.hero-card { animation: rise 1s .35s cubic-bezier(.2,.7,.2,1) both; }
.hero-card li { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-card li:nth-child(1) { animation-delay: .6s; }
.hero-card li:nth-child(2) { animation-delay: .7s; }
.hero-card li:nth-child(3) { animation-delay: .8s; }
.hero-card li:nth-child(4) { animation-delay: .9s; }

/* Brillo del botón dorado */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: shine 4.5s 1.5s ease-in-out infinite;
}
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn:hover:not([disabled]) { transform: translateY(-2px); }
.btn-gold:hover { box-shadow: 0 14px 28px -12px rgba(194,154,75,.9); }

/* =========================================================
   Aparición al hacer scroll (site.js agrega .reveal y .is-visible)
   ========================================================= */
.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delay, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-left { transform: translateX(-36px); }
.js .reveal-right { transform: translateX(36px); }
.js .reveal-zoom { transform: scale(.94); }

/* Encabezado que se compacta al bajar */
.site-header { transition: box-shadow .3s, background .3s; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(11,22,40,.35); }
.header-inner { transition: min-height .3s; }
.site-header.is-scrolled .header-inner { min-height: 62px; }
.brand img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.site-nav a:not(.btn) { position: relative; }
.site-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--gold-500); transition: right .3s; }
.site-nav a:not(.btn):hover::after { right: 0; }
@media (max-width: 900px) {
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav.open { animation: rise .3s ease both; }
}

/* WhatsApp flotante con pulso */
.wa-float { animation: rise .6s 1.2s both; transition: transform .2s; isolation: isolate; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wa); z-index: -1; animation: pulse 2.6s 2s infinite; }
.wa-float:hover { transform: scale(1.08); }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }

/* Tarjetas y bloques */
.card-icon { transition: transform .4s cubic-bezier(.2,.7,.2,1), background .3s, color .3s; }
.card:hover .card-icon { transform: rotate(-6deg) scale(1.08); background: var(--gold-600); color: #fff; }
.country { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.country:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.steps li { transition: background .3s, border-color .3s, transform .3s; }
.steps li:hover { background: rgba(255,255,255,.09); border-color: rgba(212,176,106,.5); transform: translateY(-4px); }
.split-media { overflow: visible; }
.split-media img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.split-media:hover img { transform: scale(1.02); }
.faq details > p { animation: rise .4s ease both; }

/* =========================================================
   Flujo: cuestionario, agenda, pago, confirmación
   ========================================================= */
.js .q-step.is-active { animation: step-in .45s cubic-bezier(.2,.7,.2,1) both; }
.js .q-step.is-active.from-back { animation-name: step-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes step-back { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
.option { transition: border-color .15s, background .15s, transform .15s; }
.option:active { transform: scale(.99); }
.option input:checked + .radio::after { animation: pop .25s cubic-bezier(.3,1.6,.5,1) both; }

.flow .panel, .flow .result, .flow .ticket, .flow .summary { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.flow .summary { animation-delay: .12s; }
.slots .slot { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.days .day { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.ticket-check { animation: pop .6s .4s cubic-bezier(.3,1.6,.5,1) both; }
.band { animation: fade .6s .9s both; }

/* Confeti de la confirmación */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .btn-gold::after, .wa-float::before, .confetti { display: none; }
}