/* ==========================================================================
   Componentes compartidos (web de ventas + portal)
   Clases públicas: .btn .pill .badge .card .stat .feature .faq-item .field
                    .dts-table .icon-badge .callout .seg
   ========================================================================== */

/* ---- Botones ---------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .82em 1.35em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .01em; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
  white-space: nowrap;
}
.btn .dts-ico { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--brand {
  --btn-bg: var(--brand); --btn-fg: var(--brand-ink); --btn-bd: var(--brand);
  box-shadow: var(--glow-sm);
  font-weight: 700;
}
.btn--brand:hover { box-shadow: var(--glow); background: #38f574; }
.btn--ghost { --btn-bg: rgba(242,242,242,.02); }
.btn--ghost:hover { --btn-bd: var(--line-brand); color: var(--brand); }
.btn--soft { --btn-bg: var(--bg-elev); --btn-bd: transparent; }
.btn--soft:hover { --btn-bd: var(--line-brand); }
.btn--lg { padding: 1.05em 1.8em; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn--link { border: 0; padding: .4em 0; color: var(--brand); border-radius: 0; }
.btn--link:hover { transform: none; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Pills / chips ---------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .85em; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--bg-elev); border: 1px solid var(--line);
}
.pill--brand { color: var(--brand); border-color: var(--line-brand); background: rgba(46,232,105,.07); }
.pill .dts-ico { width: 15px; height: 15px; }

/* ---- Badges de estado ------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .34em .7em; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em;
  border: 1px solid transparent;
}
.badge .dts-ico { width: 14px; height: 14px; }
.badge--ok { color: var(--brand); background: rgba(46,232,105,.12); border-color: var(--line-brand); }
.badge--danger { color: var(--danger); background: rgba(255,106,106,.12); border-color: rgba(255,106,106,.32); }
.badge--warn { color: var(--warn); background: rgba(255,207,92,.12); border-color: rgba(255,207,92,.30); }
.badge--muted { color: var(--ink-mute); background: var(--bg-elev); border-color: var(--line); }

/* ---- Cards ------------------------------------------------------------ */
.card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card--glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--glass-border); }
.card--hover:hover { transform: translateY(-4px); border-color: var(--line-brand); box-shadow: var(--shadow-sm); }
.card--brand { border-color: var(--line-brand); box-shadow: var(--glow-sm); }
.card__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h3); margin-bottom: 10px; }
.card__text { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---- Icon badge (círculo con icono) ----------------------------------- */
.icon-badge {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; border-radius: 14px;
  color: var(--brand);
  background: rgba(46,232,105,.10);
  border: 1px solid var(--line-brand);
}
.icon-badge .dts-ico { width: 26px; height: 26px; }
.icon-badge--sm { width: 42px; height: 42px; border-radius: 11px; }
.icon-badge--sm .dts-ico { width: 20px; height: 20px; }

/* ---- Feature (icon-box) ---------------------------------------------- */
.feature { display: grid; gap: 14px; }
.feature__title { font-weight: 700; font-size: 1.06rem; }
.feature__text { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---- Stat / KPI ------------------------------------------------------- */
.stat { display: grid; gap: 6px; }
.stat__value { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1; color: var(--ink); }
.stat__label { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-mute); text-transform: uppercase; }
.stat__delta { display: inline-flex; align-items: center; gap: .3em; font-size: var(--fs-xs); font-weight: 700; }
.stat__delta .dts-ico { width: 14px; height: 14px; }
.stat__delta.is-up { color: var(--brand); }
.stat__delta.is-down { color: var(--danger); }

/* ---- Lista con check -------------------------------------------------- */
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; align-items: flex-start; gap: 11px; color: var(--ink-soft); font-size: var(--fs-sm); }
.checklist .dts-ico { width: 20px; height: 20px; color: var(--brand); margin-top: 1px; flex: none; }

/* ---- FAQ / acordeón --------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.08rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.4rem; color: var(--brand);
  transition: transform var(--t) var(--ease); flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 4px 24px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.7; max-width: 760px; }

/* ---- Formularios ------------------------------------------------------ */
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > label { font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
.field input, .field textarea, .field select {
  width: 100%; padding: .85em 1em;
  background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--ink); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46,232,105,.18);
}
.field textarea { min-height: 120px; resize: vertical; }
.field--error input, .field--error textarea { border-color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--ink-mute); }

/* ---- Tabla de datos --------------------------------------------------- */
.dts-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dts-table th, .dts-table td { padding: 13px 14px; text-align: left; }
.dts-table thead th {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-mute); border-bottom: 1px solid var(--line-strong);
}
.dts-table tbody tr { border-bottom: 1px solid var(--line); }
.dts-table tbody tr:hover { background: rgba(242,242,242,.02); }
.dts-table td.num, .dts-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Callout ---------------------------------------------------------- */
.callout {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--r);
  background: rgba(46,232,105,.06); border: 1px solid var(--line-brand);
  color: var(--ink-soft); font-size: var(--fs-sm);
}
.callout .dts-ico { color: var(--brand); flex: none; }

/* ---- Segmented control (tabs/selector) -------------------------------- */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-pill); }
.seg button {
  padding: .55em 1.05em; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-mute); transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.seg button.is-active { color: var(--brand-ink); background: var(--brand); }
.seg button:hover:not(.is-active) { color: var(--ink); }

/* ---- Divider ---------------------------------------------------------- */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ==========================================================================
   Chrome global (cabecera, marca, nav, pie) — cargado en TODAS las páginas
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(51, 48, 51, .72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled { background: rgba(43, 40, 43, .9); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px; }

.brand { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand__mark { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .04em; color: var(--ink); }
.brand__mark--lg { font-size: 1.3rem; }
.brand__sep { color: var(--brand); margin: 0 .04em; }
.brand__by { display: inline-flex; align-items: center; gap: 6px; }
.brand__by-txt { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.brand__by img { height: 13px; width: auto; opacity: .85; }

/* Logo Virtux como marca (cabecera, pie, portal) */
.brand__logo { display: block; width: auto; height: auto; max-width: 150px; }
.site-footer__logo { display: block; width: auto; height: auto; max-width: 165px; }
.pt-login__brand .brand__logo { max-width: 178px; margin-inline: auto; }
.pt-side__brand .brand__logo { max-width: 152px; }
.mock__brand { display: block; width: auto; height: auto; max-width: 96px; }

.nav { display: flex; align-items: center; }
.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__link { padding: .55em .85em; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); transition: color var(--t) var(--ease), background var(--t) var(--ease); }
.nav__link:hover { color: var(--ink); background: rgba(242,242,242,.04); }
.nav__cta-mobile { display: none; }
.nav__toggle { display: none; padding: 8px; border-radius: var(--r-sm); color: var(--ink); }
.site-header__login { flex: none; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .site-header__login { display: none; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 14px var(--pad-x) 22px;
    background: rgba(43,40,43,.98); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .nav.is-open .nav__menu { transform: none; opacity: 1; pointer-events: auto; }
  .nav__link { padding: .8em .4em; border-radius: var(--r-sm); }
  .nav__cta-mobile { display: block; margin-top: 8px; }
  .nav__cta-mobile .btn { width: 100%; }
}

/* Pie */
.site-footer { padding-block: clamp(48px, 6vw, 78px) 34px; border-top: 1px solid var(--line); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__brand { max-width: 360px; display: grid; gap: 16px; }
.site-footer__brand p { font-size: var(--fs-sm); }
.site-footer__virtux img { opacity: .8; }
.site-footer__col { display: grid; gap: 12px; align-content: start; }
.site-footer__col h4 { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.site-footer__col a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-soft); transition: color var(--t) var(--ease); }
.site-footer__col a:hover { color: var(--brand); }
.site-footer__col a .dts-ico { width: 17px; height: 17px; color: var(--ink-mute); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: var(--fs-xs); }

@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Páginas estándar (prose) */
.prose { color: var(--ink-soft); line-height: 1.75; }
.prose h2, .prose h3 { color: var(--ink); margin: 1.4em 0 .5em; }
.prose p { margin-bottom: 1em; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }