/* UYARIQ SALUD · Hub (portada del demo) — tema oscuro comprometido */

body.app-hub {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(30, 139, 148, .17), transparent 65%),
    radial-gradient(700px 420px at -10% 110%, rgba(232, 160, 32, .07), transparent 60%),
    var(--bg);
  overflow-x: hidden;
}

.hub-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 32px 80px; }

/* ---- Barra superior ---- */
.hub-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--petrol-700); display: grid; place-items: center; box-shadow: 0 4px 18px rgba(30,139,148,.35); }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .01em; }
.brand-name span { color: var(--petrol-300); font-weight: 400; }
.hub-top .ctx { font-size: var(--fs-small); color: var(--muted); text-align: right; }

/* ---- Héroe ---- */
.hero { position: relative; padding: 84px 0 56px; max-width: 720px; }
.hero .eyebrow { color: var(--petrol-300); }
.hero h1 {
  font-size: var(--fs-hero); font-weight: 800; line-height: 1.08;
  letter-spacing: -.015em; margin: 18px 0 20px;
}
.hero h1 em { font-style: normal; color: var(--petrol-300); }
.hero .lede { color: var(--ink-2); font-size: 17px; max-width: 56ch; text-wrap: pretty; }

/* línea de pulso decorativa */
.pulse-line { position: absolute; right: -260px; top: 30px; width: 560px; opacity: .5; pointer-events: none; }
.pulse-line path { stroke: var(--petrol-500); stroke-width: 2; fill: none; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dash 2.4s .3s var(--ease-out) forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }

/* ---- Capas ---- */
.layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.layer {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; position: relative; overflow: hidden;
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.layer:hover { transform: translateY(-5px); border-color: var(--petrol-500); box-shadow: var(--shadow-float); }
.layer .n {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--petrol-300); letter-spacing: .06em;
}
.layer h3 { margin: 10px 0 8px; font-size: 18px; }
.layer p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }
.layer .safe { margin-top: 12px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gamify); }

/* ---- Cinta de interoperabilidad ---- */
.interop {
  margin-top: 18px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px dashed var(--petrol-500); border-radius: var(--r-md);
  padding: 14px 20px;
}
.interop .io-tag {
  flex: none; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--petrol-300);
}
.interop p { margin: 0; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
.interop strong { color: var(--ink); }

/* ---- Selección de rol ---- */
.roles-head { margin: 64px 0 18px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.role {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px 24px;
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.role:hover { transform: translateY(-6px); border-color: var(--petrol-500); box-shadow: var(--shadow-float); }
.role .icon { font-size: 30px; }
.role h3 { font-size: 20px; }
.role p { color: var(--ink-2); font-size: var(--fs-small); flex: 1; }
.role .go { color: var(--petrol-300); font-weight: 700; font-size: var(--fs-small); display: flex; align-items: center; gap: 6px; }
.role:hover .go { color: var(--gamify); }
.role.locked { opacity: .75; }
.role.locked:hover { transform: none; border-color: var(--line); box-shadow: none; }
.role .phase-tag {
  align-self: flex-start; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gamify); background: var(--gamify-soft);
  padding: 3px 10px; border-radius: var(--r-pill);
}

/* ---- Cinta de cifras ---- */
.stats-strip {
  margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  border-top: 1px solid var(--line); padding-top: 28px;
}
.stat .v { font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--petrol-300); }
.stat .k { color: var(--muted); font-size: var(--fs-small); margin-top: 4px; max-width: 30ch; }

/* ---- Animación de entrada escalonada ---- */
.fade-up { opacity: 0; transform: translateY(16px); animation: fade-up .6s var(--ease-out) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .25s; }
.d4 { animation-delay: .35s; } .d5 { animation-delay: .45s; }
@keyframes fade-up { to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .layers, .roles, .stats-strip { grid-template-columns: 1fr; }
  .hero { padding-top: 48px; }
  .pulse-line { display: none; }
  .hub-wrap { padding: 20px 18px 70px; }
}