/* ===========================================================
   TRAYE × WIZA — sections & components
   =========================================================== */

/* ---------------- PROMO ---------------- */
.promo {
  background: var(--deep-iris);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
}
.promo a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.promo .star { color: var(--lavender-glow); }

/* ---------------- FLOATING NAV ---------------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 60;
  padding: 12px 24px;
  transition: padding .28s cubic-bezier(.4,0,.2,1);
}
.nav-wrap.scrolled { padding: 12px 24px; }
.nav {
  max-width: var(--container);
  margin: 0 auto;
  height: 64px;
  background: transparent;
  border-radius: var(--r);
  box-shadow: 0 0 0 1px transparent;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 8px 0 12px;
  transition: background .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1), max-width .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1);
}
.nav-wrap.scrolled .nav {
  height: 56px;
  max-width: 980px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-sm);
  padding: 0 8px 0 16px;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand .mark {
  width: 26px; height: 26px; border-radius: var(--r);
  background: linear-gradient(150deg, #7fe6d4, #12b89c);
  display: grid; place-items: center;
}
.brand .mark svg { width: 14px; height: 14px; }
.logo-img { height: 50px; width: auto; display: block; }
/* nav brand: wordmark at top, isotype on scroll */
.brand { position: relative; }
.logo-full, .logo-icon { transition: opacity .26s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1); }
.logo-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 40px; opacity: 0; pointer-events: none; }
.nav-wrap.scrolled .logo-full { opacity: 0; }
.nav-wrap.scrolled .logo-icon { opacity: 1; }
.brand .word { font-family: var(--font-ui); font-weight: 700; font-size: 21px; letter-spacing: -.5px; color: var(--deep-iris); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--plum);
  padding: 8px 16px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { background: var(--mist-violet); color: var(--amethyst); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-right .login {
  font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--plum);
  padding: 8px 16px; border-radius: var(--r-pill); white-space: nowrap;
}
.nav-right .login:hover { color: var(--amethyst); }

/* ---------------- HERO ---------------- */
.hero {
  background: var(--hero-wash);
  padding-top: 72px;
  padding-bottom: 96px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 38% at 20% 8%, rgba(70,213,189,.32), transparent 70%),
    radial-gradient(50% 34% at 88% 4%, rgba(18,184,156,.16), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; text-align: center; max-width: 900px; margin: 0 auto; }
.hero .tag { margin-bottom: 22px; box-shadow: var(--shadow-sm); background: #fff; color: var(--amethyst); }
.hero h1.display { max-width: 16ch; margin: 0 auto; }
.hero h1 .grad {
  background: linear-gradient(95deg, #0f9e88, #14b89c 55%, #2bd0b0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { margin: 24px auto 0; max-width: 50ch; font-size: 18px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--ash); }

/* ---------------- PRODUCT FRAME (dashboard) ---------------- */
.frame-wrap { position: relative; max-width: 1060px; margin: 56px auto 0; }
.frame {
  position: relative; z-index: 2;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mist);
  background: #fff;
}
.frame-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #e3e1ea; }
.frame-bar .addr {
  margin-left: 12px; flex: 1;
  font-size: 12px; color: var(--ash);
  background: var(--paper); border-radius: var(--r-pill);
  padding: 5px 14px;
}
.dash { display: grid; grid-template-columns: 200px 1fr; }
/* sidebar */
.dash-side { border-right: 1px solid var(--mist); padding: 16px; background: var(--canvas); }
.side-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 16px; }
.side-brand .m { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(150deg,#7fe6d4,#12b89c); }
.side-brand .w { font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: var(--deep-iris); }
.side-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--slate); }
.side-item svg { width: 16px; height: 16px; stroke: var(--ash); }
.side-item.active { background: var(--mist-violet); color: var(--amethyst); }
.side-item.active svg { stroke: var(--amethyst); }
.side-sep { height: 1px; background: var(--mist); margin: 12px 4px; }
/* main */
.dash-main { padding: 20px; background: var(--paper); }
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dash-head .t { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--deep-iris); }
.dash-head .range { font-size: 12px; font-weight: 500; color: var(--slate); background: #fff; border: 1px solid var(--mist); border-radius: var(--r-pill); padding: 6px 14px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.kpi { background: #fff; border: 1px solid var(--mist); border-radius: var(--r); padding: 14px 16px; }
.kpi .l { font-size: 12px; color: var(--slate); font-weight: 500; }
.kpi .v { font-family: var(--font-display); font-weight: 500; font-size: 24px; color: var(--deep-iris); margin-top: 6px; letter-spacing: -.5px; }
.kpi .d { font-size: 12px; font-weight: 500; margin-top: 4px; color: var(--amethyst); }
.kpi .d.warn { color: #b25a00; }
.kpi.accent { background: var(--mist-violet); border-color: #dcd9ff; }

.dash-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.panel { background: #fff; border: 1px solid var(--mist); border-radius: var(--r); padding: 16px; }
.panel .ph { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.panel .ph .pt { font-size: 13px; font-weight: 700; color: var(--deep-iris); }
.panel .ph .pn { font-size: 13px; font-weight: 700; color: var(--deep-iris); }
.chart svg { width: 100%; height: 110px; }

/* table */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 11px; font-weight: 500; color: var(--slate); text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--mist);
}
.tbl th.r, .tbl td.r { text-align: right; }
.tbl td { font-size: 13px; color: var(--deep-iris); padding: 11px 0; border-bottom: 1px solid var(--mist); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .who { display: flex; align-items: center; gap: 10px; }
.tbl .av { width: 26px; height: 26px; border-radius: 50%; background: var(--mist-violet); color: var(--amethyst); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.tbl .nm { font-weight: 500; }
.tbl .amt { font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; border-radius: var(--r-pill); padding: 4px 10px; }
.status .d { width: 6px; height: 6px; border-radius: 50%; }
.status.ok { background: var(--mist-violet); color: var(--amethyst); }
.status.ok .d { background: var(--amethyst); }
.status.soon { background: #fff1e6; color: #b25a00; }
.status.soon .d { background: #ee8a3a; }

/* floating profile chips over frame */
.float-chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: var(--r);
  box-shadow: var(--shadow-feature);
  padding: 10px 14px;
}
.float-chip .ico { width: 28px; height: 28px; border-radius: 7px; background: var(--mist-violet); display: grid; place-items: center; flex: none; }
.float-chip .ico svg { width: 15px; height: 15px; stroke: var(--amethyst); }
.float-chip .ct { font-size: 12px; font-weight: 700; color: var(--deep-iris); line-height: 1.25; }
.float-chip .cs { font-size: 11px; color: var(--slate); }
.chip-a { left: -28px; top: 120px; }
.chip-b { right: -26px; bottom: 64px; }
@media (max-width: 1120px) { .float-chip { display: none; } }

/* ---------------- TRUST BAR ---------------- */
.trust { padding: 48px 0; }
.trust .cap { text-align: center; font-size: 13px; font-weight: 500; color: var(--ash); margin-bottom: 24px; }
.logo-row { display: flex; align-items: center; justify-content: center; gap: 52px; flex-wrap: wrap; }
.logo-row .lg { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--charcoal); opacity: .55; letter-spacing: -.3px; }
.ratings { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }
.rating {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--mist); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); padding: 8px 16px;
}
.rating .stars { color: #f5b800; font-size: 13px; letter-spacing: 1px; }
.rating .sc { font-size: 14px; font-weight: 500; color: var(--deep-iris); }
.rating .pl { font-size: 12px; color: var(--slate); }

/* ---------------- TINTED SECTION ---------------- */
.tinted { background: linear-gradient(180deg, #ffffff, #f5f3ff 60%, #edecff); }
.tinted-flat { background: var(--paper); }

/* ---------------- PROBLEMA ---------------- */
.prob-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.prob {
  background: #fff; border: 1px solid var(--mist); border-radius: var(--r);
  box-shadow: var(--shadow-sm); padding: 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.prob .ic { flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--mist-violet); display: grid; place-items: center; }
.prob .ic svg { width: 20px; height: 20px; stroke: var(--amethyst); }
.prob h4 { font-size: 18px; margin-bottom: 6px; }
.prob p { font-size: 14px; color: var(--slate); line-height: 1.5; }

/* ---------------- FEATURES ---------------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.feat {
  background: #fff; border: 1px solid var(--mist); border-radius: var(--r);
  box-shadow: var(--shadow-sm); padding: 24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.feat:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.feat .ic { width: 40px; height: 40px; border-radius: var(--r); background: var(--mist-violet); display: grid; place-items: center; margin-bottom: 18px; }
.feat .ic svg { width: 20px; height: 20px; stroke: var(--amethyst); }
.feat h3 { font-size: 22px; margin-bottom: 8px; }
.feat p { font-size: 14px; color: var(--slate); line-height: 1.5; }
.feat.wide {
  grid-column: span 3;
  display: flex; gap: 24px; align-items: center;
  background: linear-gradient(100deg, #f3fcfa, #e6f8f4);
  border-color: #cdeee7;
}
.feat.wide .ic { margin-bottom: 0; width: 48px; height: 48px; }
.feat.wide .secondary-tag { margin-bottom: 8px; }
.feat.wide h3 { font-size: 24px; margin-bottom: 6px; }
.feat.wide .lead { font-size: 16px; max-width: 60ch; }

/* ---------------- CONCILIACIÓN SHOWCASE ---------------- */
.show-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.show-feats { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.show-feat { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r); transition: background .18s ease; }
.show-feat:hover { background: var(--mist-violet); }
.show-feat .ck { flex: none; width: 32px; height: 32px; border-radius: var(--r); background: var(--mist-violet); display: grid; place-items: center; }
.show-feat:hover .ck { background: #fff; }
.show-feat .ck svg { width: 16px; height: 16px; stroke: var(--amethyst); }
.show-feat h4 { font-size: 18px; margin-bottom: 4px; }
.show-feat p { font-size: 14px; color: var(--slate); line-height: 1.5; }

.recon {
  background: #fff; border: 1px solid var(--mist); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 24px;
}
.recon .rc-title { font-size: 12px; font-weight: 500; color: var(--slate); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.recon-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r); margin-bottom: 10px; }
.recon-row.matched { border-color: #ddd6ff; background: #faf9ff; }
.recon-row .ck { width: 26px; height: 26px; border-radius: 50%; background: var(--mist-violet); display: grid; place-items: center; flex: none; }
.recon-row .ck svg { width: 13px; height: 13px; stroke: var(--amethyst); }
.recon-row .desc { font-size: 13px; color: var(--deep-iris); font-weight: 500; }
.recon-row .desc small { display: block; font-size: 12px; color: var(--slate); font-weight: 400; }
.recon-row .val { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--deep-iris); }
.recon-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--slate); }
.recon-foot b { color: var(--amethyst); }

/* ---------------- CÓMO FUNCIONA ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.step { background: #fff; border: 1px solid var(--mist); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 24px; position: relative; }
.step .num { width: 36px; height: 36px; border-radius: var(--r); background: var(--deep-iris); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: 16px; margin-bottom: 18px; }
.step h3 { font-size: 22px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--slate); line-height: 1.5; }
.step .conn { position: absolute; top: 42px; right: -8px; width: 16px; height: 2px; background: var(--mist); z-index: 1; }
@media (max-width: 980px) { .step .conn { display: none; } }

/* ---------------- TESTIMONIAL ---------------- */
.quote-card {
  background: #fff; border: 1px solid var(--mist); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 48px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
}
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.12; color: var(--deep-iris); }
.quote-card blockquote .amethyst { color: var(--amethyst); }
.quote-meta { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.quote-meta .ph { width: 48px; height: 48px; border-radius: 50%; background: var(--mist-violet); color: var(--amethyst); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.quote-meta .who { font-weight: 700; font-size: 14px; color: var(--deep-iris); }
.quote-meta .role { font-size: 13px; color: var(--slate); }
.metrics { display: flex; flex-direction: column; gap: 12px; }
.metric { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r); padding: 20px 22px; }
.metric .big { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1; color: var(--deep-iris); }
.metric .big .amethyst { color: var(--amethyst); }
.metric .lbl { font-size: 13px; color: var(--slate); margin-top: 8px; }

/* ---------------- CTA FINAL ---------------- */
.cta-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #08332e 0%, #0c5147 52%, #119e88 100%);
  border-radius: var(--r-lg);
  padding: 72px 48px;
  text-align: center;
}
.cta-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 18% 0%, rgba(70,213,189,.38), transparent 70%),
    radial-gradient(46% 60% at 86% 110%, rgba(127,230,212,.22), transparent 70%);
  pointer-events: none;
}
.cta-card .tag { background: rgba(255,255,255,.14); color: #d6f7ef; backdrop-filter: blur(4px); }
.cta-card h2 { color: #fff; position: relative; max-width: 18ch; margin: 18px auto 0; }
.cta-card h2 .grad { background: linear-gradient(95deg,#7fe6d4,#c4fff0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-card p { position: relative; color: #c5ddd7; font-size: 18px; margin: 18px auto 0; max-width: 48ch; }
.cta-actions { position: relative; display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.cta-card .btn-filled { background: #fff; color: var(--deep-iris); }
.cta-card .btn-filled:hover { background: #e6f8f4; }
.cta-card .btn-ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.cta-card .btn-ghost:hover { background: rgba(255,255,255,.08); }
.cta-card .note { position: relative; color: #9fbbb4; font-size: 13px; margin-top: 20px; }

/* ---------------- FOOTER ---------------- */
.footer { background: var(--paper); border-top: 1px solid var(--mist); padding: 64px 0 36px; }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--mist); }
.footer .brand .word { color: var(--deep-iris); }
.footer-blurb { font-size: 14px; line-height: 1.55; color: var(--slate); margin-top: 16px; max-width: 32ch; }
.footer-col h5 { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--deep-iris); margin: 0 0 14px; }
.footer-col a { display: block; font-size: 14px; padding: 6px 0; color: var(--slate); transition: color .15s ease; }
.footer-col a:hover { color: var(--amethyst); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; font-size: 13px; color: var(--ash); flex-wrap: wrap; gap: 12px; }
.footer-bottom .socials { display: flex; gap: 10px; }
.footer-bottom .socials a { width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--mist); display: grid; place-items: center; color: var(--slate); transition: border-color .15s ease, color .15s ease; }
.footer-bottom .socials a:hover { border-color: var(--amethyst); color: var(--amethyst); }
.footer-bottom .socials svg { width: 16px; height: 16px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .prob-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat.wide { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .show-grid { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: 1fr; }
  .quote-card { grid-template-columns: 1fr; padding: 32px; }
  .quote-card blockquote { font-size: 26px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-cols { grid-template-columns: 1fr; }
  .cta-card { padding: 48px 24px; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .hero { padding-top: 48px; }
}