/* ==========================================================================
   AAOPM homepage, premium 2026 look (Nov 2026)
   Visual layer only: no markup, text or links change. Loaded by index.php
   after every other stylesheet. Selectors are prefixed with `html body` and
   some use !important because index.php and its includes carry inline
   <style> blocks and style="" attributes that load later in the document.
   Direction: graphite + white + warm off-white, one deep crimson used
   sparingly, light large headlines, small tracked uppercase labels,
   square buttons, hairline borders instead of shadows.
   ========================================================================== */

/* Geist is loaded by a <link> in index.php (faster than @import). */

/* ---------- Tokens (common.css defines these; inline styles reference them) ---------- */
html:root {
  --primary-color: #B3001B;
  --primary-color-opacity: #B3001Bbb;
  --primary-color-darker: #8C0015;
  --secondary-color: #141618;
  --secondary-color-darker: #0C0E10;
  --secondary-color-lighter: #3A3D41;
  --secondary-color-lighter-bg-with-opacity: #0C0E1011;
  --secondary-color-lighter-bg: #F4F3F1;
  --bg-secondary-color: #F4F3F1;
  --neutral-color-bg: #F4F3F1;
  --neutral-light-dark-color-bg: #E7E5E2;
  --neutral-light-darker-color-bg: #D6D3CF;
  --tertiary-color: #4A4D52;
  --border-radius: 6px;
  --border-radius-pill: 3px;
  --border-radius-xs: 2px;
  --pm-ink: #181A1C;
  --pm-ink-soft: #55595E;
  --pm-line: rgba(24, 26, 28, .10);
  --pm-line-dark: rgba(255, 255, 255, .10);
  --pm-graphite: #101214;
  --pm-graphite-2: #17191C;
  --pm-sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Typography ---------- */
html body,
html body p, html body li, html body a, html body span, html body div,
html body button, html body input, html body label, html body td, html body th,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
  font-family: var(--pm-sans);
}
html body .bi, html body [class^="bi-"], html body [class*=" bi-"] { font-family: bootstrap-icons !important; }

html body {
  color: var(--pm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.003em;
}
html body main p, html body main li { line-height: 1.6; }

html body main h1, html body main .h1 {
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.04 !important;
}
html body main h2, html body main .h2 {
  font-weight: 500 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.12 !important;
}
html body main h3, html body main .h3,
html body main h4, html body main .h4 {
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
}
/* emphasis inside headlines: color carries it, not weight */
html body main h1 strong, html body main h2 strong, html body main h3 strong,
html body main h1 b, html body main h2 b, html body main h3 b { font-weight: 600 !important; }
html body main p strong, html body main li strong { font-weight: 600; }

/* ---------- Buttons: square, small, tracked uppercase ---------- */
html body #contenido-principal .btn,
html body .bottom-nav-container .btn,
html body .pathway-card-cta {
  border-radius: 3px !important;
  font-family: var(--pm-sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: .9rem 1.5rem !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
html body .btn img[src*="circle-arrow"] { width: 14px !important; height: 14px !important; opacity: .9; }
html body .btn-primary {
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  color: #fff !important;
}
html body .btn-primary:hover, html body .btn-primary:focus-visible {
  background: var(--primary-color-darker) !important;
  border-color: var(--primary-color-darker) !important;
}
html body .btn-outline-light {
  border: 1px solid rgba(255, 255, 255, .55) !important;
  background: transparent !important;
}
html body .btn-outline-light:hover { background: #fff !important; color: var(--pm-ink) !important; }
html body .btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

/* ---------- Top bar + sale strip ---------- */
html body .top-nav { background: var(--secondary-color-darker) !important; }
html body .top-nav, html body .top-nav a, html body .top-nav span { letter-spacing: .02em; }

/* ---------- Hero ---------- */
html body .hero-container { position: relative; }
html body .hero-container::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(12, 14, 16, .40);
}
html body .hero-container > * { position: relative; z-index: 1; }
html body .hero-container h1 {
  font-size: clamp(2rem, 4.2vw, 3.6rem) !important;
  max-width: 21ch; margin-left: auto; margin-right: auto;
}
@media (max-width: 575px) {
  html body #contenido-principal .btn { padding: .8rem 1.1rem !important; font-size: 12px !important; }
}

/* ---------- Dark sections: flat graphite instead of maroon gradients ---------- */
html body .value-prop-section,
html body .top-courses-section,
html body .nationwide-section,
html body .all-courses-section,
html body #memberships {
  background: var(--pm-graphite) !important;
  background-image: none !important;
}

/* small tracked uppercase labels (badges / eyebrows) */
html body .nationwide-badge,
html body .card-badge,
html body .floating-card .fc-text small {
  border-radius: 2px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
html body .nationwide-badge {
  background: transparent !important;
  border: 1px solid var(--pm-line-dark) !important;
  color: rgba(255, 255, 255, .75) !important;
}

/* ---------- Specialty cards (Aesthetics / Functional / Pain) ---------- */
html body .pathway-card {
  background: #fff !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: border-color .25s ease, transform .25s ease;
}
html body .pathway-card:hover { border-color: rgba(24, 26, 28, .28) !important; transform: translateY(-2px); }
html body .pathway-card-icon {
  background: transparent !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: 50% !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}
html body .pathway-card-title { font-weight: 500 !important; letter-spacing: -0.01em !important; }
html body .pathway-card-desc { color: var(--pm-ink-soft) !important; }
html body .pathway-card-cta {
  background: transparent !important;
  color: var(--pm-ink) !important;
  border: 1px solid var(--pm-line) !important;
  padding: .6rem 1rem !important;
}
html body .pathway-card-cta:hover { border-color: var(--pm-ink) !important; }

/* ---------- "We Don't Just Teach Procedures" ---------- */
html body .value-prop-title { font-weight: 500 !important; }
html body .value-prop-title span { color: #E0485C !important; }
html body .value-prop-quote { border-left: 1px solid rgba(255, 255, 255, .25) !important; }
html body .pain-point-card {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--pm-line-dark) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html body .icon-box {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 50% !important;
  color: #fff !important;
}
html body .floating-card {
  border-radius: 6px !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04) !important;
  border: 1px solid var(--pm-line) !important;
}
html body .fc-icon { background: var(--pm-ink) !important; border-radius: 4px !important; }
html body .value-prop-image-wrapper img { border-radius: 6px !important; }
html body .stat-number { font-weight: 500 !important; letter-spacing: -0.02em !important; }

/* ---------- Course cards (popular carousel + all courses) ---------- */
html body .top-course-card {
  background: var(--pm-graphite-2) !important;
  border: 1px solid var(--pm-line-dark) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: border-color .25s ease, transform .25s ease;
}
html body .top-course-card:hover { border-color: rgba(255, 255, 255, .28) !important; transform: translateY(-2px); }
html body .top-course-card .card-image { border-radius: 5px 5px 0 0 !important; }
html body .top-course-card .card-title { font-weight: 500 !important; letter-spacing: -0.01em !important; }
html body .top-course-card .card-badge { background: var(--primary-color) !important; }

/* ---------- Light sections: warm off-white, hairline cards ---------- */
html body main [style*="--neutral-color-bg"] { background-color: var(--neutral-color-bg) !important; }
html body main .card { border: 1px solid var(--pm-line) !important; box-shadow: none !important; border-radius: 6px !important; }
html body main .shadow, html body main .shadow-sm, html body main .shadow-lg { box-shadow: none !important; }

/* checkmark + small icons stay crisp */
html body main img[src*="checkmark-circle"] { filter: saturate(.9); }

/* ---------- Footer ---------- */
html body footer, html body .container-fluid.pt-5.pb-4 { background: var(--secondary-color-darker) !important; }
html body footer a:hover { color: #fff !important; }

/* ---------- Headline weight: beat .font-weight-bold / .fw-bold (both !important) ---------- */
html body #contenido-principal :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4, .value-prop-title, .nationwide-title) {
  font-weight: 500 !important;
}
html body #contenido-principal :is(h1, h2, h3) :is(b, strong) { font-weight: 600 !important; }

/* ---------- Gradient icon squares ("Why Healthcare Professionals Choose") ---------- */
html body #contenido-principal div[style*="#ca0625"] {
  background: transparent !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: 50% !important;
}
html body #contenido-principal div[style*="#ca0625"] svg { fill: var(--primary-color) !important; }
html body #contenido-principal div[style*="#ca0625"] svg path { fill: var(--primary-color) !important; }

/* ---------- Inline navy/maroon gradients (Why AAOPM, Memberships) ---------- */
html body #contenido-principal [style*="#1a1a2e"] {
  background: var(--pm-graphite) !important;
}

/* ---------- Membership cards ---------- */
html body #memberships .h-100[style*="box-shadow"] {
  box-shadow: none !important;
  border-radius: 6px !important;
  border-width: 1px !important;
}
html body #memberships .h-100[style*="--primary-color"] {
  border: 2px solid var(--primary-color) !important;
}

/* ---------- "View All … Courses" links ---------- */
html body .view-all-link {
  border-radius: 3px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: .9rem 1.5rem !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
}
html body .view-all-link:hover { background: #fff !important; color: var(--pm-ink) !important; }
html body .view-all-link:hover img { filter: invert(1); }

/* ---------- Nationwide chips + stats ---------- */
html body .nationwide-benefit {
  background: transparent !important;
  border: 1px solid var(--pm-line-dark) !important;
  border-radius: 3px !important;
  font-weight: 400 !important;
}
html body .nationwide-stat {
  background: rgba(255, 255, 255, .03) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--pm-line-dark) !important;
  border-radius: 6px !important;
}
html body .nationwide-stat-number { font-weight: 500 !important; letter-spacing: -0.02em; }
html body .nationwide-map-wrapper img { box-shadow: none !important; border-radius: 6px !important; }

/* ---------- All-courses grid cards (includes/all-courses.php) ---------- */
html body .course-card-modern {
  background: var(--pm-graphite-2) !important;
  border: 1px solid var(--pm-line-dark) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html body .course-card-modern:hover { border-color: rgba(255, 255, 255, .28) !important; }
html body .course-card-image { border-radius: 5px 5px 0 0 !important; }
html body .course-card-title { font-weight: 500 !important; letter-spacing: -0.01em !important; }
html body .course-card-badge {
  border-radius: 2px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  background: var(--primary-color) !important;
}
html body .course-card-formats span { border-radius: 2px !important; }
html body .course-category-title { font-weight: 500 !important; letter-spacing: -0.015em !important; }

/* ---------- One shape everywhere: rectangles (3px), no pills ---------- */
html body #saleBanner .btn,
html body .btn-secondary-color,
html body .btn-outline-light,
html body .nv2-reqinfo,
html body .nv2-search,
html body .mega-featured-badge,
html body .emt-cc__b,
html body #mainPopupModal button,
html body #mainPopupModal [style*="border-radius"] {
  border-radius: 3px !important;
}
html body #contenido-principal .btn-outline-light {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  padding: .9rem 1.5rem !important;
}
/* any other pill-radius button the scan might miss */
html body #contenido-principal a[class*="btn"], html body #contenido-principal button { border-radius: 3px !important; }

/* ---------- Memberships intro: flat warm off-white instead of fading swirl image ---------- */
html body #contenido-principal [style*="pioneers-in-the-worlds-first-membership-model-bg"] {
  background: var(--neutral-color-bg) !important;
}

/* ---------- USP strip + partner ticker (below the hero) ---------- */
html body .aaopm-usp { border-bottom: 1px solid var(--pm-line-dark); }
html body .aaopm-usp .aaopm-usp-num { font-weight: 500 !important; letter-spacing: -0.02em; font-size: 1.75rem !important; }
html body .aaopm-usp small { font-size: 11px !important; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
html body .tt-logos { background: #fff !important; border-bottom: 1px solid var(--pm-line) !important; }
html body .tt-logos .tt-logos-title { font-size: 11px !important; letter-spacing: .16em !important; color: var(--pm-ink-soft) !important; font-weight: 500 !important; }
@media (max-width: 575px) {
  html body .aaopm-usp .d-flex { gap: 1.25rem 0 !important; }
  html body .aaopm-usp .d-flex > div { flex: 0 0 50%; }
  html body .aaopm-usp .aaopm-usp-num { font-size: 1.5rem !important; }
  html body .aaopm-usp small { font-size: 10px !important; letter-spacing: .1em; }
}
/* "Get Access to All AAOPM Courses FREE" strip sits between the specialties and the dark value-prop section */
html body #contenido-principal > div[style="background-color:var(--secondary-color)"] { border-bottom: 1px solid var(--pm-line-dark); }

/* ---------- Consistent section rhythm + more white space ----------
   Every full section gets the same vertical padding; padding that lived on
   inner containers (py-4/py-5/py-7) is zeroed so the total is predictable.
   Compact bars (USP stats, partner ticker, membership strip) and the
   full-bleed "Why AAOPM" split block keep their own spacing. */
html:root { --pm-section-y: 128px; }
@media (max-width: 991px) { html:root { --pm-section-y: 96px; } }
@media (max-width: 575px) { html:root { --pm-section-y: 72px; } }

html body #contenido-principal > :is(div, section):not(.hero-container):not(.aaopm-usp):not(.tt-logos):not([style="background-color:var(--secondary-color)"]):not(:has(> .row.mx-0 > .order-md-1)) {
  padding-top: var(--pm-section-y) !important;
  padding-bottom: var(--pm-section-y) !important;
}
html body #contenido-principal > :is(div, section):not(.hero-container):not(.aaopm-usp):not(.tt-logos):not([style="background-color:var(--secondary-color)"]):not(:has(> .row.mx-0 > .order-md-1)) > :is(.container, .container-fluid, .row) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* last block in a section shouldn't add its own bottom gap */
html body #contenido-principal > :is(div, section) > .container > .row:last-child > [class*="col"]:last-child > :last-child { margin-bottom: 0 !important; }

/* section headings: consistent, roomier gap to the content */
html body #contenido-principal > :is(div, section) h2:not(.h3) { margin-bottom: 1.25rem !important; }
html body #contenido-principal > :is(div, section) .text-center > h2 + p,
html body #contenido-principal > :is(div, section) h2.text-center + p { margin-bottom: 3rem !important; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* full-bleed "Why AAOPM" split: give the text column the same rhythm */
html body #contenido-principal > div:has(> .row.mx-0 > .order-md-1) .order-md-1 {
  padding-top: var(--pm-section-y) !important;
  padding-bottom: var(--pm-section-y) !important;
}

/* compact bars: a touch more air, still slim */
html body .aaopm-usp .container { padding-top: 2rem !important; padding-bottom: 2rem !important; }
html body .tt-logos { padding: 2.5rem 0 2.25rem !important; }
html body #contenido-principal > div[style="background-color:var(--secondary-color)"] .container { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }

/* ---------- Header CTAs: Request Info + Book a Call, identical size ---------- */
html body .nv2-reqinfo,
html body header .btn.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  min-width: 148px;
  padding: 0 1.25rem !important;
  border-radius: 3px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-family: var(--pm-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
html body .nv2-reqinfo { border-color: var(--pm-ink) !important; color: var(--pm-ink) !important; background: #fff !important; }
html body .nv2-reqinfo:hover { background: var(--pm-ink) !important; color: #fff !important; }

/* ==========================================================================
   Nationwide network map (index.php .nw-live): dot-matrix map, animated
   location nodes, connection arcs with moving signals, count-up stats.
   Only transform / opacity / stroke-dashoffset animate (compositor-friendly);
   infinite loops run only while the section is on screen (.nw-in).
   ========================================================================== */
html body .nw-map { position: relative; width: 100%; aspect-ratio: 648 / 353; }
html body .nw-map .nw-map-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: brightness(0) invert(1); opacity: .045;
  box-shadow: none !important; border-radius: 0 !important;
}
html body .nw-dots {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(circle, rgba(255, 255, 255, .34) 1.05px, transparent 1.45px) 0 0 / 7px 7px;
  -webkit-mask: url(/assets/img/aaopm-natiowide-map.webp) center / 100% 100% no-repeat;
          mask: url(/assets/img/aaopm-natiowide-map.webp) center / 100% 100% no-repeat;
}
/* arcs */
html body .nw-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html body .nw-arc {
  fill: none; stroke: rgba(224, 72, 92, .45); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 600; stroke-dashoffset: 600;
}
html body .nw-seen .nw-arc { transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(.45s + var(--i) * .07s); stroke-dashoffset: 0; }
html body .nw-flow {
  fill: none; stroke: #ff5a6e; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 600; stroke-dashoffset: 605; opacity: 0;
  animation: nwFlow 3.4s linear infinite; animation-delay: calc(var(--i) * -.53s); animation-play-state: paused;
}
html body .nw-seen .nw-flow { opacity: .9; transition: opacity .6s 2.2s; }
html body .nw-in .nw-flow { animation-play-state: running; }
@keyframes nwFlow { to { stroke-dashoffset: 0; } }

/* nodes */
html body .nw-nodes { position: absolute; inset: 0; }
html body .nw-node {
  position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: #E0485C; box-shadow: 0 0 0 2px rgba(224, 72, 92, .25), 0 0 14px rgba(224, 72, 92, .8);
  transform: scale(0); opacity: 0;
}
html body .nw-seen .nw-node { transform: scale(1); opacity: 1; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; transition-delay: calc(.15s + var(--i) * .06s); }
html body .nw-node::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(224, 72, 92, .7);
  opacity: 0; animation: nwPulse 2.8s ease-out infinite; animation-delay: calc(var(--i) * .37s); animation-play-state: paused;
}
html body .nw-in .nw-node::after { animation-play-state: running; }
@keyframes nwPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(5.5); opacity: 0; } }

/* stats: open, editorial numbers instead of boxes */
html body .nw-live .nationwide-stat-cards { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important; margin-top: 2.5rem !important; border-top: 1px solid var(--pm-line-dark); }
html body .nw-live .nationwide-stat {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; backdrop-filter: none !important;
  padding: 1.5rem 0 0 !important; text-align: left !important; min-width: 0 !important;
}
html body .nw-live .nationwide-stat + .nationwide-stat { border-left: 1px solid var(--pm-line-dark) !important; padding-left: 1.5rem !important; }
html body .nw-live .nationwide-stat-number {
  color: #fff !important; font-size: clamp(2.2rem, 3.6vw, 3.25rem) !important; font-weight: 400 !important;
  letter-spacing: -0.035em !important; line-height: 1 !important; font-variant-numeric: tabular-nums;
}
html body .nw-live .nationwide-stat-label {
  margin-top: .6rem; font-size: 11px !important; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55) !important;
}

/* left column: gentle reveal (only when JS is present, so content never hides without it) */
html.nw-js body .nationwide-section .col-lg-6:first-child > * { opacity: 0; transform: translateY(18px); }
html.nw-js body .nationwide-section.nw-seen .col-lg-6:first-child > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.nw-js body .nationwide-section.nw-seen .col-lg-6:first-child > :nth-child(2) { transition-delay: .08s; }
html.nw-js body .nationwide-section.nw-seen .col-lg-6:first-child > :nth-child(3) { transition-delay: .16s; }
html.nw-js body .nationwide-section.nw-seen .col-lg-6:first-child > :nth-child(4) { transition-delay: .24s; }
html.nw-js body .nationwide-section.nw-seen .col-lg-6:first-child > :nth-child(5) { transition-delay: .32s; }
html body .nationwide-title { font-size: clamp(2rem, 3.4vw, 3rem) !important; }

@media (max-width: 575px) {
  html body .nw-live .nationwide-stat + .nationwide-stat { padding-left: 1rem !important; }
  html body .nw-dots { background-size: 5px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .nw-flow, html body .nw-node::after { animation: none !important; display: none; }
  html body .nw-arc { stroke-dashoffset: 0 !important; }
  html body .nw-node { transform: none !important; opacity: 1 !important; }
  html.nw-js body .nationwide-section .col-lg-6:first-child > * { opacity: 1 !important; transform: none !important; }
}
/* bigger, bolder network on desktop */
@media (min-width: 992px) {
  html body .nw-map { width: 114%; margin-left: -4%; }
  /* the 114% map bleeds past the viewport on laptops under ~1500px wide and made the page scroll sideways */
  html body .nationwide-section { overflow-x: clip; }
}
html body .nw-arc { stroke: rgba(224, 72, 92, .6); stroke-width: 1.25; }
html body .nw-node { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
html body .aaopm-usp .aaopm-usp-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   The AAOPM Method (index.php #aaopm-method): scroll-driven framework.
   Desktop (>=992px, JS adds .am-pinned): tall section + sticky stage; the
   script maps scroll to the active step, ring progress and node states.
   Mobile / no JS / reduced motion: steps render as a normal stacked list.
   ========================================================================== */
html body .aaopm-method { background: #0E1012 !important; color: #fff; }
html body .aaopm-method .am-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--primary-color); padding: .45rem .8rem; border-radius: 2px; margin-bottom: 1.5rem;
}
html body .aaopm-method .am-title { color: #fff; font-size: clamp(2rem, 3.4vw, 3rem) !important; margin-bottom: 2rem !important; max-width: 16ch; }
html body .aaopm-method .am-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 2rem; }
html body .aaopm-method .am-bars i { display: block; height: 2px; background: rgba(255, 255, 255, .14); position: relative; overflow: hidden; }
html body .aaopm-method .am-bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
html body .aaopm-method .am-bars i.done::after { transform: scaleX(1); background: rgba(255, 255, 255, .7); }
html body .aaopm-method .am-bars i.on::after { transform: scaleX(1); background: var(--primary-color); }
html body .aaopm-method .am-steps { list-style: none; padding: 0; margin: 0; }
html body .aaopm-method .am-step { padding: 1.75rem 0; border-top: 1px solid var(--pm-line-dark); }
html body .aaopm-method .am-step-num { display: block; font-size: 12px; letter-spacing: .14em; color: #fff; margin-bottom: .9rem; font-variant-numeric: tabular-nums; }
html body .aaopm-method .am-step-num span { color: rgba(255, 255, 255, .4); }
html body .aaopm-method .am-step-title { color: #fff; font-size: clamp(1.5rem, 2.3vw, 2.1rem) !important; line-height: 1.12 !important; margin-bottom: 1rem !important; }
html body .aaopm-method .am-step-body { color: rgba(255, 255, 255, .68); font-size: 16px; line-height: 1.65; max-width: 46ch; margin-bottom: 0; }
html body .aaopm-method .am-step-cta { margin-top: 1.75rem; }

/* framework ring */
html body .aaopm-method .am-visual { display: flex; justify-content: center; }
html body .aaopm-method .am-ring { width: 100%; max-width: 600px; height: auto; overflow: visible; font-family: var(--pm-sans); }
html body .aaopm-method .am-track { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.5; }
html body .aaopm-method .am-progress { fill: none; stroke: var(--primary-color); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
html body .aaopm-method:not(.am-pinned) .am-progress { stroke-dashoffset: 0 !important; opacity: .55; }
html body .aaopm-method .am-arc-label { fill: rgba(255, 255, 255, .42); font-size: 11px; letter-spacing: .32em; font-weight: 500; }
html body .aaopm-method .am-web line { stroke: rgba(255, 255, 255, .08); stroke-width: 1; stroke-dasharray: 3 7; }
html body .aaopm-method.am-pinned .am-web line { animation: amWeb 18s linear infinite; }
@keyframes amWeb { to { stroke-dashoffset: -200; } }
html body .aaopm-method .am-core { fill: #141618; stroke: rgba(255, 255, 255, .08); }
html body .aaopm-method .am-core-kicker { fill: rgba(255, 255, 255, .5); font-size: 10.5px; letter-spacing: .26em; text-anchor: middle; font-weight: 500; }
html body .aaopm-method .am-core-title { fill: #fff; font-size: 30px; text-anchor: middle; font-weight: 400; letter-spacing: -.02em; }
html body .aaopm-method .am-node-bg { fill: #191B1E; transition: fill .45s ease; }
html body .aaopm-method .am-node-ring { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.25; transition: stroke .45s ease, stroke-width .45s ease; }
html body .aaopm-method .am-node text { text-anchor: middle; transition: fill .45s ease; }
html body .aaopm-method .am-node-num { fill: rgba(255, 255, 255, .35); font-size: 11px; letter-spacing: .14em; }
html body .aaopm-method .am-node-lab { fill: rgba(255, 255, 255, .88); font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
html body .aaopm-method .am-node-sub { fill: rgba(255, 255, 255, .45); font-size: 10.5px; letter-spacing: .04em; }
html body .aaopm-method .am-node.is-done .am-node-ring { stroke: rgba(224, 72, 92, .55); }
html body .aaopm-method .am-node.is-active .am-node-bg { fill: #2A0D13; }
html body .aaopm-method .am-node.is-active .am-node-ring { stroke: #E0485C; stroke-width: 2; filter: drop-shadow(0 0 10px rgba(224, 72, 92, .7)); }
html body .aaopm-method .am-node.is-active .am-node-num { fill: #E0485C; }
html body .aaopm-method .am-node.is-active .am-node-lab { fill: #fff; }
html body .aaopm-method .am-node.is-active .am-node-sub { fill: rgba(255, 255, 255, .75); }

/* pinned desktop mode */
html body #contenido-principal > section.aaopm-method.am-pinned { height: 460vh; padding: 0 !important; }
html body .aaopm-method.am-pinned .am-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 110px; overflow: hidden; }
html body .aaopm-method.am-pinned .am-steps { position: relative; min-height: 340px; }
html body .aaopm-method.am-pinned .am-step {
  position: absolute; top: 0; left: 0; right: 0; border-top: 0; padding: 0;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
html body .aaopm-method.am-pinned .am-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
html body .aaopm-method.am-pinned .am-step.is-done { transform: translateY(-16px); }

/* mobile / static */
@media (max-width: 991px) {
  html body .aaopm-method .am-visual { order: -1; margin-bottom: 2.5rem; }
  html body .aaopm-method .am-ring { max-width: 440px; }
  html body .aaopm-method .am-bars { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body .aaopm-method .am-web line { animation: none !important; }
}
html body .aaopm-method .am-arc-label { fill: rgba(255, 255, 255, .5); font-size: 12px; letter-spacing: .34em; }
@media (max-width: 991px) { html body .aaopm-method .am-ring { width: calc(100% - 56px); margin: 0 auto; } }

/* ---------- The AAOPM Method: light mode (Yurik, Nov 12 2026) ---------- */
html body .aaopm-method { background: #fff !important; color: var(--pm-ink); }
html body .aaopm-method .am-title,
html body .aaopm-method .am-step-title { color: var(--pm-ink); }
html body .aaopm-method .am-step-num { color: var(--pm-ink); }
html body .aaopm-method .am-step-num span { color: rgba(24, 26, 28, .4); }
html body .aaopm-method .am-step-body { color: var(--pm-ink-soft); }
html body .aaopm-method .am-step { border-top-color: var(--pm-line); }
html body .aaopm-method .am-bars i { background: rgba(24, 26, 28, .12); }
html body .aaopm-method .am-bars i.done::after { background: var(--pm-ink); }
html body .aaopm-method .am-track { stroke: rgba(24, 26, 28, .1); }
html body .aaopm-method .am-arc-label { fill: rgba(24, 26, 28, .5); }
html body .aaopm-method .am-web line { stroke: rgba(24, 26, 28, .1); }
html body .aaopm-method .am-core { fill: #F4F3F1; stroke: rgba(24, 26, 28, .08); }
html body .aaopm-method .am-core-kicker { fill: rgba(24, 26, 28, .5); }
html body .aaopm-method .am-core-title { fill: var(--pm-ink); }
html body .aaopm-method .am-node-bg { fill: #fff; }
html body .aaopm-method .am-node-ring { stroke: rgba(24, 26, 28, .14); }
html body .aaopm-method .am-node-num { fill: rgba(24, 26, 28, .4); }
html body .aaopm-method .am-node-lab { fill: var(--pm-ink); }
html body .aaopm-method .am-node-sub { fill: rgba(24, 26, 28, .5); }
html body .aaopm-method .am-node.is-done .am-node-ring { stroke: rgba(179, 0, 27, .45); }
html body .aaopm-method .am-node.is-active .am-node-bg { fill: #FBEDEF; }
html body .aaopm-method .am-node.is-active .am-node-ring { stroke: var(--primary-color); filter: drop-shadow(0 0 8px rgba(179, 0, 27, .25)); }
html body .aaopm-method .am-node.is-active .am-node-num { fill: var(--primary-color); }
html body .aaopm-method .am-node.is-active .am-node-lab { fill: var(--pm-ink); }
html body .aaopm-method .am-node.is-active .am-node-sub { fill: var(--pm-ink-soft); }
html body .aaopm-method:not(.am-pinned) .am-progress { opacity: .35; }

/* ---------- Training option cards: light / graphite pair (Nov 12 2026) ---------- */
html body .train-card { position: relative; display: flex; flex-direction: column; padding: 3.25rem !important; border-radius: 6px !important; transition: transform .25s ease; }
html body .train-card:hover { transform: translateY(-3px); }
html body .train-card > .d-flex:first-child { flex-direction: column; align-items: flex-start !important; margin-bottom: 1.25rem !important; }
html body .train-card > .d-flex:first-child svg {
  width: 56px !important; height: 56px !important; padding: 15px; margin: 0 0 1.75rem !important;
  border: 1px solid var(--pm-line); border-radius: 50%;
}
html body .train-card h3 { font-size: clamp(1.5rem, 2.1vw, 1.85rem) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; }
html body .train-card > p { color: var(--pm-ink-soft) !important; font-size: 15.5px; line-height: 1.7 !important; margin-bottom: 2rem !important; }
html body .train-card ul { margin-bottom: 2.25rem !important; border-top: 1px solid var(--pm-line); }
html body .train-card ul li { margin: 0 !important; padding: .8rem 0; border-bottom: 1px solid var(--pm-line); font-size: 15px; align-items: center !important; }
html body .train-card ul li img { width: 16px !important; height: 16px !important; margin-top: 0 !important; margin-right: .75rem !important; }
html body .train-card .btn { margin-top: auto; align-self: flex-start; }
/* graphite variant */
html body main .train-card.train-card--dark[style], html body .train-card.train-card--dark[style] { background-color: var(--pm-graphite) !important; color: #fff; }
html body .train-card--dark h3 { color: #fff !important; }
html body .train-card--dark > p { color: rgba(255, 255, 255, .68) !important; }
html body .train-card--dark > .d-flex:first-child svg { border-color: rgba(255, 255, 255, .18); }
html body .train-card--dark > .d-flex:first-child svg path { fill: #fff !important; }
html body .train-card--dark ul { border-top-color: rgba(255, 255, 255, .1); }
html body .train-card--dark ul li { color: rgba(255, 255, 255, .88); border-bottom-color: rgba(255, 255, 255, .1); }
html body .train-card--dark .btn-primary { background: #fff !important; border-color: #fff !important; color: var(--pm-ink) !important; }
html body .train-card--dark .btn-primary img { filter: invert(1); }
html body .train-card--dark .btn-primary:hover { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; }
html body .train-card--dark .btn-primary:hover img { filter: none; }
@media (max-width: 767px) { html body .train-card { padding: 2.25rem 1.5rem !important; } }

/* ---------- All courses: category tabs (homepage) ---------- */
html body .ac-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); margin: 0 auto 3rem; max-width: 760px; }
html body .ac-tabs[hidden] { display: none; }
html body .ac-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 1rem 0 .95rem;
  color: rgba(255, 255, 255, .55); font: 500 15px/1.2 var(--pm-sans); letter-spacing: 0; cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
html body .ac-tab:hover { color: #fff; }
html body .ac-tab.is-active { color: #fff; border-bottom-color: var(--primary-color); }
html body .ac-tab:focus { outline: none; }
html body .ac-tab:focus-visible { outline: 2px solid rgba(255, 255, 255, .35); outline-offset: 4px; }
html body .ac-tab-count { font-size: 12px; color: rgba(255, 255, 255, .4); margin-left: .25rem; font-variant-numeric: tabular-nums; }
html body .ac-tab.is-active .ac-tab-count { color: rgba(255, 255, 255, .6); }
html body .ac-tabbed .category-section { display: none; }
html body .ac-tabbed .category-section.is-active { display: block; animation: acFade .35s ease; }
/* the tab names the category, so the repeated category heading is visually hidden (kept for SEO + screen readers) */
html body .ac-tabbed .course-category-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes acFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 575px) {
  html body .ac-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 0 1.5rem; scrollbar-width: none; }
  html body .ac-tabs::-webkit-scrollbar { display: none; }
  html body .ac-tab { white-space: nowrap; flex: 0 0 auto; }
}

/* ---------- "We Don't Just Teach Procedures": cut-out portrait on graphite (Nov 12 2026) ---------- */
html body .value-prop-image.vp-cutout { background: none !important; box-shadow: none !important; overflow: visible; }
html body .value-prop-image.vp-cutout img.vp-model {
  display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; border-radius: 0 !important; box-shadow: none !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
html body .vp-cutout + .floating-card-top { top: 18% !important; right: -10px !important; }
html body .vp-cutout ~ .floating-card-bottom { bottom: 22% !important; left: -10px !important; }
@media (max-width: 991px) { html body .value-prop-image.vp-cutout img.vp-model { max-width: 420px; margin-top: 2rem; } }

/* ---------- "We Don't Just Teach Procedures": light mode (Yurik, Nov 12 2026) ---------- */
html body section.value-prop-section { background: var(--neutral-color-bg) !important; background-image: none !important; }
html body .value-prop-section .value-prop-title { color: var(--pm-ink) !important; }
html body .value-prop-section .value-prop-title span { color: var(--primary-color) !important; }
html body .value-prop-section .value-prop-lead { color: var(--pm-ink-soft) !important; }
html body .value-prop-section .value-prop-lead :is(b, strong) { color: var(--pm-ink) !important; }
html body .value-prop-section .value-prop-quote { border-left: 1px solid var(--pm-line) !important; }
html body .value-prop-section .value-prop-quote p { color: var(--pm-ink) !important; }
html body .value-prop-section .value-prop-quote cite { color: var(--pm-ink-soft) !important; }
html body .value-prop-section h3[style*="color:#fff"] { color: var(--pm-ink) !important; }
html body .value-prop-section .pain-point-card { background: #fff !important; border: 1px solid var(--pm-line) !important; }
html body .value-prop-section .pain-point-card:hover { border-color: rgba(24, 26, 28, .28) !important; }
html body .value-prop-section .pain-point-card .icon-box { border: 1px solid var(--pm-line) !important; color: var(--primary-color) !important; background: transparent !important; }
html body .value-prop-section .pain-point-card .icon-box svg { color: var(--primary-color) !important; fill: currentColor; }
html body .value-prop-section .pain-point-card h4 { color: var(--pm-ink) !important; }
html body .value-prop-section .pain-point-card p { color: var(--pm-ink-soft) !important; }
html body .value-prop-section .value-prop-stats * { color: var(--pm-ink) !important; }
html body .value-prop-section .value-prop-ctas .btn-outline-light { border-color: var(--pm-ink) !important; color: var(--pm-ink) !important; }
html body .value-prop-section .value-prop-ctas .btn-outline-light:hover { background: var(--pm-ink) !important; color: #fff !important; }
html body .value-prop-section .floating-card { border: 1px solid var(--pm-line) !important; }

/* ---------- Memberships intro: cut-out team standing on the section's bottom edge (Nov 12 2026) ---------- */
html body .mship-intro { overflow: hidden; }
/* the section-rhythm rule above is very specific (:not() chain), so the class is repeated to outrank it */
html body #contenido-principal > div.mship-intro.mship-intro.mship-intro.mship-intro.mship-intro.mship-intro.mship-intro { padding-bottom: 0 !important; }
html body .mship-intro > .container { padding-bottom: 0 !important; }
html body .mship-intro .row { align-items: stretch !important; }
html body .mship-intro .row > .col-lg-6:not(.mship-media) { padding-bottom: 5rem; }
html body .mship-intro .mship-media { display: flex; align-items: flex-end; justify-content: center; align-self: stretch !important; }
html body .mship-intro .mship-team { display: block; width: 125%; max-width: none; height: auto; margin: 0 -12.5% 0; border-radius: 0 !important; vertical-align: bottom; }
@media (max-width: 991px) {
  html body .mship-intro .row > .col-lg-6:not(.mship-media) { padding-bottom: 2rem; }
  html body .mship-intro .mship-team { width: 112%; margin: 0 -6%; }
}