/* ==========================================================================
   BotGT · Sistema de diseño compartido
   Landing, login y portal comparten esta base.
   ========================================================================== */

:root {
  /* Colores base */
  --bg-navy:    #0D1B2A;
  --bg-cream:   #F9F6EF;
  --bg-bone:    #F2E9D8;
  --text-ink:   #0D1B2A;
  --text-bone:  #F2E9D8;
  --coral:      #EF5A36;
  --gold:       #F4B000;
  --teal:       #007A8C;
  --purple:     #5A3F8C;

  /* Bordes y estados */
  --border-on-navy:  rgba(242,233,216,.14);
  --border-on-cream: rgba(13,27,42,.10);
  --muted-on-navy:   rgba(242,233,216,.55);
  --muted-on-cream:  rgba(13,27,42,.55);

  /* Estado de facturas */
  --status-paid:     #0D8A6A;
  --status-pending:  #B8860B;
  --status-overdue:  #C0392B;
  --status-open:     #B8860B;
  --status-resolved: #0D8A6A;

  /* Tipografías */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Radios */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* Sombras */
  --sh-soft: 0 1px 2px rgba(0,0,0,.05);
  --sh-card: 0 4px 18px rgba(13,27,42,.06);
}

/* --------------------------------------------------------------------------
   Reset minimal
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--text-ink);
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--coral); }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* --------------------------------------------------------------------------
   Tipografía utility
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -.015em;
  line-height: 1.1;
  margin: 0;
}
.text-mono {
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}
.text-muted { color: var(--muted-on-cream); }
.text-bone  { color: var(--text-bone); }
.text-sm    { font-size: 13.5px; }
.text-xs    { font-size: 11.5px; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--text-bone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--gold); color: var(--bg-navy); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--ghost {
  background: transparent;
  color: var(--text-bone);
  border: 1px solid rgba(242,233,216,.32);
}
.btn--ghost:hover {
  background: var(--text-bone);
  color: var(--bg-navy);
  border-color: var(--text-bone);
}
.btn--ink {
  background: var(--bg-navy);
  color: var(--text-bone);
}
.btn--ink:hover { background: var(--coral); color: var(--text-bone); }
.btn--sm { padding: 11px 18px; font-size: 11px; }

/* --------------------------------------------------------------------------
   Card / panel
   -------------------------------------------------------------------------- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--border-on-cream);
  border-radius: var(--r-lg);
  padding: 24px;
}
.card--navy { background: var(--bg-navy); color: var(--text-bone); border-color: var(--bg-navy); }

/* --------------------------------------------------------------------------
   Badges (status)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.badge--paid,
.badge--resolved {
  color: var(--status-paid);
  background: rgba(13,138,106,.12);
}
.badge--pending,
.badge--open {
  color: var(--status-pending);
  background: rgba(184,134,11,.16);
}
.badge--overdue {
  color: var(--status-overdue);
  background: rgba(192,57,43,.14);
}
.tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.tag--web   { color: var(--teal);   background: rgba(0,122,140,.10); }
.tag--sys   { color: var(--purple); background: rgba(90,63,140,.10); }
.tag--gold  { color: var(--bg-navy); background: rgba(244,176,0,.25); }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
.input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-on-cream);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-ink);
  background: #FFFFFF;
  outline: none;
  transition: border-color .15s ease;
}
.input:focus { border-color: var(--gold); }
.input--on-navy {
  border-color: rgba(242,233,216,.22);
  background: rgba(13,27,42,.5);
  color: var(--text-bone);
}
.input--on-navy:focus { border-color: var(--gold); }
.input--on-navy::placeholder { color: rgba(242,233,216,.35); }

label.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
label.field > .label-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-on-cream);
}
label.field > .label-text--on-navy { color: rgba(242,233,216,.6); }

/* --------------------------------------------------------------------------
   Logo BotGT
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.logo__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.015em;
  display: flex;
  gap: 3px;
}
.logo__text--gold-accent { color: var(--gold); }

/* --------------------------------------------------------------------------
   Animaciones suaves (las mismas que usa el .dc actual)
   -------------------------------------------------------------------------- */
@keyframes bgRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bgDrift { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes bgDash { to { stroke-dashoffset: -32; } }

.rise { animation: bgRise .6s cubic-bezier(.2,.7,.2,1) both; }

/* --------------------------------------------------------------------------
   Utilidades varias
   -------------------------------------------------------------------------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-1 { gap: 8px; } .gap-2 { gap: 12px; } .gap-3 { gap: 16px; } .gap-4 { gap: 20px; } .gap-6 { gap: 28px; }
.mt-2 { margin-top: 12px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 22px; } .mt-6 { margin-top: 32px; }
.center { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }
.divider {
  height: 1px;
  background: var(--border-on-cream);
  border: none;
  margin: 16px 0;
}
.divider--navy { background: var(--border-on-navy); }

/* Scrollbar discreto (en el portal) */
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(13,27,42,.18);
  border-radius: var(--r-pill);
}

/* ==========================================================================
   Polished micro-interactions + accesibilidad WCAG 2.2
   Aplicado a web/ para armonizar con la landing principal.
   ========================================================================== */

/* Skip-to-content (visible al recibir foco) */
.bg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  padding: 12px 18px; background: #0D1B2A; color: #F4B000;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500;
  border-radius: 0 0 8px 0; text-decoration: none;
}
.bg-skip:focus, .bg-skip:focus-visible { left: 0; outline: 2px solid #F4B000; outline-offset: 0; }

/* Focus rings unificados */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px;
}

/* prefers-reduced-motion: desactiva animaciones no esenciales */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hero kinetic accent — el word gold respira */
@keyframes botGtBreathe { 0%, 100% { text-shadow: 0 0 0 rgba(244,176,0,0); } 50% { text-shadow: 0 0 28px rgba(244,176,0,.28); } }
.bg-breathe { animation: botGtBreathe 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bg-breathe { animation: none; } }

/* Header nav — underline animado al hover */
.bg-navlink { position: relative; transition: color .2s ease; padding: 4px 0; }
.bg-navlink::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold); transition: right .3s cubic-bezier(.2,.7,.2,1);
}
.bg-navlink:hover { color: var(--gold) !important; }
.bg-navlink:hover::after { right: 0; }

/* FAQ — badge numerado auto-incrementado (no requiere cambio de template) */
.bg-faq { counter-reset: faq-n; }
.bg-faq > div { counter-increment: faq-n; }
.bg-faq > div button > span:first-child::before {
  content: "0" counter(faq-n);
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; color: var(--teal);
  background: rgba(0,122,140,.1); padding: 5px 9px; border-radius: 5px;
  margin-right: 14px; line-height: 1.4; flex: none;
}

/* Portafolio — hover lift con borde gold */
.bg-portfolio-card {
  transition: transform .25s cubic-bezier(.2,.7,.2,1),
              box-shadow .25s ease,
              border-color .25s ease,
              background .25s ease;
}
.bg-portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px -16px rgba(13,27,42,.5);
  border-color: rgba(244,176,0,.32) !important;
  background: rgba(242,233,216,.08) !important;
}
.bg-portfolio-card:hover > div:last-child > div:nth-child(2) { color: var(--gold); }
.bg-portfolio-card > div:last-child > div:nth-child(2) { transition: color .2s ease; }

/* Paquete — hover lift + pill "MÁS ELEGIDO" en la card central */
.bg-paquete-card { position: relative; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.bg-paquete-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px -18px rgba(13,27,42,.5); }
.bg-paquete-card:nth-of-type(2)::before {
  content: "MÁS ELEGIDO";
  position: absolute; top: -10px; left: 24px; z-index: 2;
  padding: 5px 10px; background: var(--gold); color: var(--bg-navy);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(244,176,0,.18);
}
@media (max-width: 720px) {
  .bg-paquete-card:nth-of-type(2)::before { left: 16px; }
}