/* iSenda · página "en construcción" (isenda.app). Misma paleta que el prototipo de Bolt.
   Secuencia: slogan por frases (0 s) · línea de la senda (0.8 s) · brillo de iSenda (1.2 s)
   · subtítulo (1.5 s) · botón (2 s) · rastro de puntos (1.9–2.5 s). */
:root {
  --deep: #0b2a4a;
  --ocean-50: #eff5fc; --ocean-100: #d8e6f7; --ocean-500: #1e5fab; --ocean-600: #174a8c;
  --sky-50: #f0f9ff; --sky-400: #38bdf8; --sky-500: #0ea5e9; --sky-600: #0284c7; --sky-700: #0369a1;
  --tq-50: #f0fdfa; --tq-400: #2dd4bf; --tq-500: #14b8a6;
  --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--deep);
  background: #f0f5fb; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* Fondo */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(to bottom right, var(--ocean-50), var(--sky-50), var(--tq-50)); }
.bg-trails { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; }
.bg-trails path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 12 8; }
.blob { position: absolute; border-radius: 9999px; filter: blur(64px); }
.blob-a { top: 80px; right: 40px; width: 288px; height: 288px; background: rgba(186, 230, 253, .35); }
.blob-b { bottom: 40px; left: 40px; width: 240px; height: 240px; background: rgba(153, 246, 228, .3); }

/* Marca */
.top { padding: 20px 16px; max-width: 80rem; width: 100%; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 36px; height: 36px; }
.brand span { font-size: 20px; font-weight: 800; letter-spacing: -.025em; color: var(--deep); }

/* Contenido */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px 48px; max-width: 64rem; width: 100%; margin: 0 auto; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 28px; padding: 8px 16px; border-radius: 9999px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--ocean-100); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ocean-600);
  animation: fadeUp .6s ease-out both;
}
.badge-dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--tq-400); }
.badge-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--tq-400); animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite; }

.slogan { margin: 0; font-size: clamp(32px, 6.6vw, 64px); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; color: var(--deep); }
.phrase { display: block; text-wrap: balance; animation: fadeUp .7s cubic-bezier(.2, .7, .2, 1) both; }
.p2 { animation-delay: .2s; }
.p3 { animation-delay: .4s; }

/* Punto pegado a la palabra (la fuente deja aire antes del punto) */
.dot { margin-left: -.06em; }

/* "senda" con la línea curva que se dibuja debajo */
.senda { position: relative; display: inline-block; background: linear-gradient(to right, var(--ocean-500), var(--sky-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.senda-line { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .28em; overflow: visible; }
.senda-line path { fill: none; stroke: var(--tq-400); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s ease-in-out .8s forwards; }

/* "iSenda": cambio de color y brillo leve al final */
.brand-word { position: relative; display: inline-block; background: linear-gradient(to right, var(--ocean-500), var(--sky-500), var(--tq-500)); -webkit-background-clip: text; background-clip: text; color: var(--deep); animation: reveal .7s ease-out 1.2s forwards; }
.brand-word::after {
  content: ""; position: absolute; inset: -.1em -.25em; z-index: -1; border-radius: .4em;
  background: radial-gradient(closest-side, rgba(56, 189, 248, .35), transparent); opacity: 0; animation: glow 1.4s ease-out 1.2s forwards;
}

.subtitle { margin: 28px 0 0; font-size: clamp(17px, 2.4vw, 22px); line-height: 1.5; font-weight: 500; color: var(--slate-600); animation: fadeUp .6s ease-out 1.5s both; }
.rastro { position: relative; display: inline-block; font-weight: 700; color: var(--deep); }
.rastro-dots { position: absolute; left: -2px; right: -2px; bottom: -.7em; width: calc(100% + 4px); height: .7em; overflow: visible; z-index: -1; }
.rastro-dots circle { fill: var(--sky-400); opacity: 0; transform-box: fill-box; transform-origin: center; animation: dotLoop 2s ease-out infinite; }
.rastro-dots circle:nth-child(1) { animation-delay: 1.90s; }
.rastro-dots circle:nth-child(2) { animation-delay: 1.96s; }
.rastro-dots circle:nth-child(3) { animation-delay: 2.02s; }
.rastro-dots circle:nth-child(4) { animation-delay: 2.08s; }
.rastro-dots circle:nth-child(5) { animation-delay: 2.14s; }
.rastro-dots circle:nth-child(6) { animation-delay: 2.20s; }
.rastro-dots circle:nth-child(7) { animation-delay: 2.26s; }
.rastro-dots circle:nth-child(8) { animation-delay: 2.32s; }
.rastro-dots circle:nth-child(9) { animation-delay: 2.38s; fill: var(--tq-400); }

/* Iglesia (meta del camino) */
.church { position: relative; width: 96px; height: 88px; margin-top: 36px; animation: fadeUp .6s ease-out 2s both; }
.church svg { position: relative; width: 100%; height: 100%; display: block; }
.church-glow { position: absolute; left: 50%; top: 55%; width: 170px; height: 170px; transform: translate(-50%, -50%) scale(.8); border-radius: 9999px; background: radial-gradient(closest-side, rgba(45, 212, 191, .35), transparent); opacity: .25; transition: opacity .8s ease, transform .8s ease; }
.church.is-arrived .church-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
.church.is-arrived svg { animation: arrive .9s ease-out; }
@keyframes arrive { 0% { transform: translateY(0); } 35% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

/* Pisadas de fondo (las dibuja isenda-construccion.js) */
.steps { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.steps .foot-print { fill: #1e5fab; }
.steps .ripple { fill: none; stroke: #38bdf8; stroke-width: 1.4; }

.foot { padding: 24px 16px; text-align: center; font-size: 12px; font-weight: 500; color: var(--slate-500); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes reveal { to { color: transparent; } }
@keyframes glow { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .35; } }
/* Rastro en bucle: cada 2 s los puntos aparecen uno tras otro y se desvanecen */
@keyframes dotLoop { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: .9; transform: scale(1.1); } 22% { transform: scale(1); } 65% { opacity: .9; } 100% { opacity: 0; transform: scale(1); } }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

@media (min-width: 768px) {
  .top { padding: 24px 32px; }
  .phrase { display: block; }
}

/* Celular: el contenido sube y deja más recorrido a las pisadas bajo la iglesia */
@media (max-width: 767px) {
  .hero { justify-content: flex-start; padding: 28px 16px 32px; }
  .badge { margin-bottom: 22px; }
  .subtitle { margin-top: 22px; }
  .church { margin-top: 30px; }
}

/* Quien prefiere menos movimiento ve todo de inmediato */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .senda-line path { stroke-dashoffset: 0; }
  .brand-word { color: transparent; }
  .brand-word::after { opacity: .35; }
  .rastro-dots circle { opacity: .9; }
}