/* ACP Traductera – brand override stylesheet
   Bootstrap 5.3 handles all layout. Only brand tokens & components here.
   Contrast ratios verified for WCAG 2.1 AA (4.5:1 normal, 3:1 large text).

   Brand palette:
     #302683  indigo primary     – on white: 9.8:1 ✓
     #1f185a  indigo dark        – on white: 16.1:1 ✓
     #E30612  red accent         – on white: 4.86:1 ✓
     #ffffff  on #1f185a: 16.1:1 ✓
     #b8b4d0  on #1f185a: 7.1:1  ✓  (secondary text on dark)
     #9090b0  on #1f185a: 6.3:1  ✓  (muted text on dark)
     #5c5880  on white:   5.8:1  ✓  (secondary text on light)
     #6e6b8c  on white:   4.6:1  ✓  (muted text on light)
*/

/* ── 1. TOKENS ── */
:root {
  --tr-brand:        #302683;
  --tr-brand-dark:   #1f185a;
  --tr-brand-mid:    #3d3199;
  --tr-brand-pale:   #eeedf8;
  --tr-brand-tint:   #f5f4fb;
  --tr-accent:       #E30612;
  --tr-accent-dark:  #b80510;
  --tr-text:         #1f185a;
  --tr-text-2:       #5c5880;
  --tr-text-3:       #6e6b8c;
  --tr-on-dark:      #ffffff;
  --tr-on-hover:      #d11313;
  --tr-on-dark-2:    #b8b4d0;
  --tr-on-dark-3:    #9090b0;
  --tr-border:       rgba(48,38,131,.10);
  --tr-border-soft:  rgba(48,38,131,.05);
}

/* ── 2. BASE ── */
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--tr-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'DM Serif Display', Georgia, serif;
}

/* ── 3. SKIP LINK (accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .5rem 1.25rem;
  background: var(--tr-accent);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 .25rem .25rem;
  text-decoration: none;
  transition: top .1s;
}
.skip-link:focus { top: 0; color: #fff; }

/* ── 4. NAVBAR ── */
.navbar-top {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .8125rem;
  padding: .4rem 0;
}
.navbar-top a {
  color: var(--tr-on-dark-3);
  text-decoration: none;
  transition: color .12s;
}
.navbar-top a:hover, .navbar-top a:focus { color: var(--tr-on-hover); }
.navbar-top .separator { color: rgba(255,255,255,.15); }
.navbar { background-color: var(--tr-brand-dark); }
.navbar-brand img { height: 28px; width: auto; }
.navbar-nav .nav-link {
  color: rgba(255,255,255,.7) !important;
  font-weight: 500;
  padding: .5rem .9rem;
  border-radius: .3rem;
  transition: background .12s, color .12s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.09);
}
.navbar-toggler {
  border-color: rgba(255,255,255,.3);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── 5. BUTTONS ── */
.btn-accent {
  background: var(--tr-accent);
  border-color: var(--tr-accent);
  color: #fff;
  font-weight: 600;
}
.btn-accent:hover, .btn-accent:focus {
  background: var(--tr-accent-dark);
  border-color: var(--tr-accent-dark);
  color: #fff;
}
.btn-brand {
  background: var(--tr-brand);
  border-color: var(--tr-brand);
  color: #fff;
  font-weight: 600;
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--tr-brand-dark);
  border-color: var(--tr-brand-dark);
  color: #fff;
}
.btn-outline-light-custom {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.85);
  font-weight: 500;
}
.btn-outline-light-custom:hover, .btn-outline-light-custom:focus {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}

/* ── 6. UTILITY BACKGROUNDS / TEXT ── */
.bg-brand-dark  { background-color: var(--tr-brand-dark) !important; }
.bg-brand       { background-color: var(--tr-brand) !important; }
.bg-brand-tint  { background-color: var(--tr-brand-tint) !important; }
.bg-brand-pale  { background-color: var(--tr-brand-pale) !important; }
.text-brand     { color: var(--tr-brand) !important; }
.text-accent    { color: var(--tr-accent) !important; }
.text-on-dark   { color: var(--tr-on-dark) !important; }
.text-on-dark-2 { color: var(--tr-on-dark-2) !important; }
.text-on-dark-3 { color: var(--tr-on-dark-3) !important; }
.text-2         { color: var(--tr-text-2) !important; }
.text-3         { color: var(--tr-text-3) !important; }

/* ── 7. SECTION TAG ── */
.section-tag {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tr-accent);
  margin-bottom: .5rem;
}
.section-tag-light { color: var(--tr-on-dark-3); }

/* ── 8. HERO ── */
.hero { background-color: var(--tr-brand-dark); position: relative; overflow: hidden; }
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
  right: -120px; top: -120px;
}
.stat-box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .75rem;
  overflow: hidden;
}
.stat-cell {
  padding: 1.5rem;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.stat-cell:nth-child(2n)  { border-right: none; }
.stat-cell:nth-child(3), .stat-cell:nth-child(4) { border-bottom: none; }
.stat-num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 2.25rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -.03em;
}
.stat-num .ac { color: var(--tr-accent); }
.stat-label { font-size: .8125rem; color: var(--tr-on-dark-3); margin-top: .4rem; }

/* Page hero (subpages) */
.page-hero { background-color: var(--tr-brand-dark); padding: 4rem 0 3.5rem; }
.page-hero .breadcrumb-item a { color: var(--tr-on-dark-3); }
.page-hero .breadcrumb-item.active { color: var(--tr-on-dark-2); }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3); }

/* ── 9. CERT BAR ── */
.cert-bar {
  background: #f8f8fb;
  border-bottom: 1px solid var(--tr-border);
  padding: 1rem 0;
}
.cert-badge {
  display: inline-block;
  background: var(--tr-brand);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 3px;
  letter-spacing: .05em;
  vertical-align: middle;
}
.cert-badge-sm { font-size: .5625rem; }
.cert-sep { width: 1px; height: 22px; background: var(--tr-border); display: inline-block; vertical-align: middle; }

/* ── 10. SOLUTION / SERVICE CARDS ── */
.card-tr {
  border: 1px solid var(--tr-border);
  border-radius: .625rem;
  background: #fff;
  transition: background .15s, box-shadow .15s;
  height: 100%;
}
a.card-tr {
  text-decoration: none;
  color: inherit;
  display: block;
}
a.card-tr:hover {
  background: var(--tr-brand-tint);
  box-shadow: 0 2px 18px rgba(48,38,131,.08);
  color: inherit;
}
.card-tr-accent {
  width: 3px;
  height: 0;
  background: var(--tr-accent);
  border-radius: 0 0 3px 0;
  transition: height .18s;
  margin-bottom: 1.25rem;
}
a.card-tr:hover .card-tr-accent { height: 36px; }

.card-srv {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .625rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background .14s;
}
a.card-srv:hover { background: rgba(255,255,255,.07); color: inherit; }

/* ── 11. PROCESS STEPS ── */
.proc-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--tr-brand);
  flex-shrink: 0;
  transition: border-color .15s;
}
.proc-step:hover .proc-dot { border-color: var(--tr-accent); }
.proc-connector {
  flex: 1;
  height: 1px;
  background: var(--tr-border);
  margin-top: 22px;
}

/* ── 12. REFERENCE CARDS ── */
.ref-card {
  background: #fff;
  border: 1px solid var(--tr-border);
  border-top: 3px solid var(--tr-accent);
  border-radius: .625rem;
  height: 100%;
}

/* ── 13. QUALITY / CERT CARDS ── */
.qcert-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .5rem;
}
.qcert-badge {
  display: inline-block;
  background: var(--tr-accent);
  color: #fff;
  font-size: .5625rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 3px;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 14. FAQ ACCORDION ── */
.accordion-button {
  font-weight: 600;
  color: var(--tr-text);
  background: var(--tr-brand-tint);
}
.accordion-button:not(.collapsed) {
  color: var(--tr-brand);
  background: var(--tr-brand-pale);
  box-shadow: none;
}
.accordion-button::after {
  filter: none;
}
.accordion-button:focus {
  box-shadow: 0 0 0 .25rem rgba(48,38,131,.2);
}
.accordion-item {
  border-color: var(--tr-border);
  background: var(--tr-brand-tint);
  margin-bottom: .5rem;
  border-radius: .5rem !important;
  overflow: hidden;
}

/* ── 15. CLIENT LOGOS ── */
.client-name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.125rem;
  color: var(--tr-text-3);
  opacity: .4;
  transition: opacity .15s;
  cursor: default;
  user-select: none;
}
.client-name:hover { opacity: .72; }
.client-name-sm {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ── 16. FOOTER ── */
body > footer { background: #0f0d30; }
.footer-logo { height: 26px; filter: brightness(0) invert(1); }
.footer-heading {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
}
footer a { color: rgba(255,255,255,.45); text-decoration: none; transition: color .12s; }
footer a:hover { color: rgba(255,255,255,.8); }
.footer-divider { border-color: rgba(255,255,255,.07); }

/* ── 17. FORM ── */
.form-control:focus, .form-select:focus {
  border-color: var(--tr-brand);
  box-shadow: 0 0 0 .25rem rgba(48,38,131,.15);
}
.form-label { font-weight: 500; color: var(--tr-text); }
.required-star { color: var(--tr-accent); }

/* ── 18. ICON WRAPPER ── */
.icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: .5rem;
  background: var(--tr-brand-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.375rem;
  color: var(--tr-brand);
}
.icon-wrap-dark {
  background: rgba(255,255,255,.08);
  color: var(--tr-on-dark-2);
}

/* ── 19. MISC ── */
.border-brand { border-color: var(--tr-border) !important; }
.rounded-tr { border-radius: .625rem; }
a.text-brand:hover { color: var(--tr-brand-mid) !important; }

/* Link with arrow */
.link-arrow {
  font-weight: 600;
  color: var(--tr-brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .12s;
}
.link-arrow:hover { color: var(--tr-brand); gap: .55rem; }
.link-arrow-light { color: var(--tr-on-dark-2); }
.link-arrow-light:hover { color: #fff; }

/* ── 20. RESPONSIVE ── */
@media (max-width: 575.98px) {
  .hero h1, .page-hero h1 { font-size: 1.875rem; }
  section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
}
@media (min-width: 992px) {
  .navbar-nav .nav-link { padding: .45rem .85rem; }
}