/* ================================================================
   STYLE.CSS — Lab Template Public Site  (v3 · modern redesign)
   Theme tokens (--color-primary, etc.) are injected by PHP inline.
   ================================================================ */

/* ───────────────────────────────────────────────
   1. DESIGN TOKENS / FALLBACKS
   ─────────────────────────────────────────────── */
:root {
    /* Color fallbacks — overridden by getThemeCssVars() */
    --color-primary:     #0056a8;
    --color-secondary:   #00a86b;
    --color-accent:      #ff6b35;

    /* Neutral scale */
    --color-ink:         #0b1220;
    --color-dark:        #0f172a;
    --color-text:        #334155;
    --color-muted:       #64748b;
    --color-soft:        #94a3b8;
    --color-line:        #e5e7eb;
    --color-bg:          #ffffff;
    --color-bg-soft:     #f7f9fc;
    --color-bg-mute:     #eef2f7;

    /* Glass / surface */
    --glass-bg:          rgba(255,255,255,.72);
    --glass-border:      rgba(255,255,255,.5);
    --shadow-xs:         0 1px 2px rgba(15,23,42,.06);
    --shadow-sm:         0 4px 14px rgba(15,23,42,.06);
    --shadow-md:         0 12px 30px rgba(15,23,42,.08);
    --shadow-lg:         0 24px 60px rgba(15,23,42,.12);
    --shadow-color:      0 18px 40px -12px rgba(0, 86, 168, .35);

    /* Radii */
    --r-sm: .5rem;
    --r-md: .85rem;
    --r-lg: 1.25rem;
    --r-xl: 1.75rem;
    --r-pill: 999px;

    /* Typography */
    --font-heading:      'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:         'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Motion */
    --t-fast:   .15s cubic-bezier(.4, 0, .2, 1);
    --t-base:   .28s cubic-bezier(.4, 0, .2, 1);
    --t-slow:   .55s cubic-bezier(.16, 1, .3, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Layout */
    --topbar-h:      40px;
    --nav-h:         68px;
    --navbar-height: calc(var(--topbar-h) + var(--nav-h));
}

/* ───────────────────────────────────────────────
   2. BASE / RESET
   ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.65;
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: -.015em;
}

a { color: var(--color-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: color-mix(in srgb, var(--color-primary) 70%, #000); }

img { max-width: 100%; height: auto; }

::selection { background: color-mix(in srgb, var(--color-primary) 25%, transparent); color: var(--color-ink); }

[class*="col-"] { min-width: 0; }

::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-soft); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-secondary)));
    border-radius: 50px;
    border: 2px solid var(--color-bg-soft);
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus rings for accessibility */
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ───────────────────────────────────────────────
   3. TOPBAR
   ─────────────────────────────────────────────── */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1031;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    font-size: .8rem;
    color: rgba(255,255,255,.9);
    background: linear-gradient(90deg,
        var(--color-primary) 0%,
        color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary)) 100%);
    transition: transform var(--t-base), opacity var(--t-base);
}
.topbar.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.topbar-contact a,
.topbar-contact span {
    color: rgba(255,255,255,.92);
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
}
.topbar-contact a:hover { color: #fff; }

/* ───────────────────────────────────────────────
   4. NAVBAR — glass + scroll state
   ─────────────────────────────────────────────── */
#mainNav {
    top: var(--topbar-h);
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(15,23,42,.06);
    padding: .55rem 0;
    min-height: var(--nav-h);
    transition: top var(--t-base), padding var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
#mainNav.scrolled {
    top: 0;
    padding: .35rem 0;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 28px rgba(15,23,42,.08);
}

.nav-logo { height: 44px; width: auto; object-fit: contain; }
.nav-brand-text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-primary);
    letter-spacing: -.02em;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar-nav .nav-link {
    font-weight: 500;
    font-size: .9rem;
    color: var(--color-ink) !important;
    padding: .5rem .9rem !important;
    border-radius: 8px;
    position: relative;
    transition: color var(--t-fast), background var(--t-fast);
}
.navbar-nav .nav-link:hover {
    color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.navbar-nav .nav-link.active {
    color: var(--color-primary) !important;
    font-weight: 600;
}
.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: .9rem; right: .9rem;
    bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}

[id] { scroll-margin-top: calc(var(--topbar-h) + var(--nav-h) + 12px); }

/* Scroll progress bar (top of viewport) */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    z-index: 2000;
    transition: width .12s linear;
    pointer-events: none;
}

/* ───────────────────────────────────────────────
   5. HERO (homepage carousel + static)
   ─────────────────────────────────────────────── */
#hero { padding-top: calc(var(--topbar-h) + var(--nav-h)); }

.hero-slide {
    height: clamp(540px, 88vh, 820px);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(0,0,0,.15) 0%, transparent 60%),
        linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.45) 100%);
}
.hero-content { position: relative; z-index: 2; }

.hero-title {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255,255,255,.94);
    margin: 1rem auto 0;
    max-width: 620px;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Static hero with mesh gradient */
.hero-static {
    height: clamp(520px, 88vh, 760px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(at 18% 22%, color-mix(in srgb, var(--color-primary) 70%, #000) 0%, transparent 50%),
        radial-gradient(at 82% 12%, var(--color-secondary) 0%, transparent 50%),
        radial-gradient(at 50% 95%, var(--color-accent) 0%, transparent 50%),
        linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, #000) 100%);
}
.hero-static::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 78%, rgba(255,255,255,.07) 0%, transparent 50%),
        radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0%, transparent 50%);
    pointer-events: none;
}
.hero-static::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 90px;
    background: #fff;
    clip-path: ellipse(60% 100% at 50% 100%);
}
.hero-static .hero-overlay { display: none; }

/* Hero CTA — fully driven by --color-accent */
.btn-hero {
    background: linear-gradient(135deg,
        var(--color-accent) 0%,
        color-mix(in srgb, var(--color-accent) 75%, #000) 100%);
    color: #fff;
    border: none;
    padding: .95rem 2.4rem;
    font-weight: 700;
    font-size: 1.02rem;
    border-radius: var(--r-pill);
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--color-accent) 45%, transparent),
        inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s var(--ease-out);
    z-index: -1;
}
.btn-hero:hover {
    color: #fff;
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.btn-hero:hover::after { transform: translateX(100%); }

/* Carousel indicators */
.carousel-indicators {
    margin-bottom: 1.5rem;
}
.carousel-indicators [data-bs-target] {
    width: 28px; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,.45);
    border: none; opacity: 1;
    margin: 0 4px;
    transition: background var(--t-base), width var(--t-base);
}
.carousel-indicators .active {
    background: #fff;
    width: 44px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 48px; height: 48px;
    background-color: rgba(255,255,255,.18);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    background-size: 50%;
}

/* ───────────────────────────────────────────────
   6. QUICK INFO BAR
   ─────────────────────────────────────────────── */
.quick-bar {
    background: linear-gradient(90deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, #000) 100%);
    color: rgba(255,255,255,.94);
    padding: .85rem 0;
    font-size: .88rem;
    position: relative;
    z-index: 5;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 70%, #000);
}
.quick-bar-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 1.6rem;
}
.quick-bar-item + .quick-bar-item { border-left: 1px solid rgba(255,255,255,.18); }
.quick-bar-item a { color: rgba(255,255,255,.94); transition: color var(--t-fast); }
.quick-bar-item a:hover { color: #fff; }
.quick-bar-item i  { font-size: 1rem; opacity: .85; }

/* ───────────────────────────────────────────────
   7. SECTION HELPERS
   ─────────────────────────────────────────────── */
.section-padding { padding: clamp(64px, 9vw, 112px) 0; overflow-x: hidden; }

.section-label,
.section-label-light {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .85rem;
}
.section-label { color: var(--color-primary); }
.section-label-light { color: rgba(255,255,255,.78); }
.section-label::before,
.section-label::after,
.section-label-light::before,
.section-label-light::after {
    content: '';
    width: 24px;
    height: 2px;
    border-radius: 2px;
}
.section-label::before,
.section-label::after { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }
.section-label-light::before,
.section-label-light::after { background: rgba(255,255,255,.5); }

.section-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: var(--color-ink);
    margin: 0;
    letter-spacing: -.025em;
    line-height: 1.1;
}
.section-title.text-white { color: #fff; }

.section-content {
    font-size: 1.02rem;
    color: var(--color-text);
    line-height: 1.8;
    word-break: normal;
    overflow-wrap: break-word;
    min-width: 0;
}
.section-content h2 { font-size: 1.65rem; color: var(--color-ink); margin-top: 1.5rem; }
.section-content p { margin-bottom: 1rem; }
.text-center .section-content,
.text-center .section-content > * { text-align: center !important; }

.section-primary {
    background:
        radial-gradient(at 80% 0%, color-mix(in srgb, var(--color-secondary) 50%, var(--color-primary)) 0%, transparent 55%),
        var(--color-primary);
    color: #fff;
}
.section-secondary {
    background:
        radial-gradient(at 0% 100%, color-mix(in srgb, var(--color-secondary) 80%, #000) 0%, transparent 55%),
        var(--color-secondary);
    color: #fff;
}
.text-white-75 { color: rgba(255,255,255,.78); }

.bg-light { background: var(--color-bg-soft) !important; }

/* ───────────────────────────────────────────────
   8. PROMO CARDS
   ─────────────────────────────────────────────── */
.promo-section {
    background:
        radial-gradient(at 100% 0%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 50%),
        var(--color-bg-soft);
    position: relative;
}

.promo-card {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15,23,42,.04);
    transition: transform var(--t-base), box-shadow var(--t-base);
    will-change: transform;
}
.promo-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.promo-card-img {
    position: relative;
    /* contain (no crop) over a soft background that matches the card */
    aspect-ratio: 16 / 10;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft)),
            color-mix(in srgb, var(--color-secondary) 6%, var(--color-bg-soft)));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.promo-card-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .7s var(--ease-out);
    padding: .5rem;
}
.promo-card:hover .promo-card-img img { transform: scale(1.05); }
[data-theme="dark"] .promo-card-img {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-mute)),
            color-mix(in srgb, var(--color-secondary) 12%, var(--color-bg-mute)));
}

/* Promo modal image — never crops */
.promo-modal-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 340px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-soft)),
            color-mix(in srgb, var(--color-secondary) 6%, var(--color-bg-soft)));
    border-radius: var(--r-md);
    overflow: hidden;
}
.promo-modal-img-wrap img {
    max-width: 100%;
    max-height: 340px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
[data-theme="dark"] .promo-modal-img-wrap {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-mute)),
            color-mix(in srgb, var(--color-secondary) 12%, var(--color-bg-mute)));
}
.promo-card-no-img {
    height: 120px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.promo-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--color-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .35em .85em;
    border-radius: var(--r-pill);
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(255,107,53,.35);
}
.promo-badge-lg {
    position: static;
    font-size: 1.1rem;
    padding: .55em 1.3em;
}
.promo-card-body {
    padding: 1.4rem 1.5rem 1.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.promo-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: .5rem;
}
.promo-card-desc {
    font-size: .9rem;
    color: var(--color-muted);
    line-height: 1.65;
    flex: 1;
    margin-bottom: .75rem;
}
.promo-expiry {
    font-size: .8rem;
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-radius: var(--r-pill);
    width: max-content;
}
.btn-promo {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, var(--color-secondary)));
    color: #fff;
    border: none;
    padding: .55rem 1.25rem;
    border-radius: var(--r-pill);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--t-base), box-shadow var(--t-base);
    align-self: flex-start;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.btn-promo:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* ───────────────────────────────────────────────
   9. SERVICES
   ─────────────────────────────────────────────── */
.service-card {
    border-radius: var(--r-lg);
    border: 1px solid var(--color-line) !important;
    background: #fff;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 55%);
    opacity: 0;
    transition: opacity var(--t-base);
    z-index: -1;
}
.service-card:hover {
    transform: translateY(-10px);
    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
    box-shadow: var(--shadow-lg) !important;
}
.service-card:hover::before { opacity: 1; }
.service-card .card-body { padding: 2.25rem 1.5rem; }

.service-icon-wrap {
    width: 72px; height: 72px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--color-primary) 30%, transparent);
    transition: transform var(--t-slow);
}
.service-card:hover .service-icon-wrap {
    transform: rotate(-6deg) scale(1.08);
}
.service-icon { font-size: 1.75rem; color: #fff; }
.service-img  {
    width: 72px; height: 72px;
    object-fit: cover; border-radius: var(--r-lg);
    margin: 0 auto; display: block;
    box-shadow: var(--shadow-sm);
}

/* ───────────────────────────────────────────────
   10. SPECIAL SERVICES
   ─────────────────────────────────────────────── */
.special-card {
    padding: 1.85rem;
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--t-base), transform var(--t-base), border-color var(--t-base);
    height: 100%;
}
.special-card:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.3);
    transform: translateY(-6px);
}
.special-icon-wrap {
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    flex-shrink: 0;
}

/* ───────────────────────────────────────────────
   11. PRODUCTS
   ─────────────────────────────────────────────── */
.card.h-100 {
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--color-line) !important;
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.card.h-100:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg) !important;
}
.product-img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease-out);
}
.card:hover .product-img { transform: scale(1.06); }
.product-img-placeholder { height: 220px; }

/* ───────────────────────────────────────────────
   12. INSURERS (drag marquee)
   ─────────────────────────────────────────────── */
.insurers-track-wrap {
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.insurers-track-wrap.is-dragging { cursor: grabbing; }
.insurers-track {
    display: flex;
    gap: 3.5rem;
    align-items: center;
    width: max-content;
    padding: 0 1rem;
    will-change: transform;
}
.insurer-item {
    flex-shrink: 0;
    display: flex; flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
}
.insurer-item-name {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-muted);
    max-width: 120px;
    line-height: 1.25;
}
.insurer-logo {
    max-height: 56px;
    max-width: 130px;
    object-fit: contain;
    filter: grayscale(60%);
    opacity: .78;
    transition: filter var(--t-base), opacity var(--t-base), transform var(--t-base);
}
.insurer-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.12);
}

/* ───────────────────────────────────────────────
   13. TESTIMONIALS
   ─────────────────────────────────────────────── */
.testimonial-card {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-lg);
    padding: 2.15rem 2rem;
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background var(--t-base), transform var(--t-base), border-color var(--t-base);
    position: relative;
}
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -.3rem;
    right: 1.2rem;
    font-size: 6rem;
    line-height: 1;
    color: rgba(255,255,255,.12);
    font-family: Georgia, serif;
    pointer-events: none;
}
.testimonial-card:hover {
    background: rgba(255,255,255,.17);
    border-color: rgba(255,255,255,.32);
    transform: translateY(-6px);
}
.testimonial-quote { display: none; } /* replaced by ::before */
.testimonial-text {
    color: rgba(255,255,255,.94);
    font-style: italic;
    line-height: 1.75;
    font-size: 1rem;
    margin-bottom: 1.25rem;
}
.testimonial-stars {
    color: #fbbf24;
    font-size: .95rem;
    letter-spacing: .06em;
}
.testimonial-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.4);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.testimonial-avatar-initials {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.15));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem; color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.4);
}
.testimonial-controls { display: flex; gap: .75rem; justify-content: center; }
.testimonial-controls button {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    width: 46px; height: 46px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--t-base), transform var(--t-base);
}
.testimonial-controls button:hover {
    background: rgba(255,255,255,.28);
    transform: scale(1.08);
}

/* ───────────────────────────────────────────────
   14. CERTIFICATES
   ─────────────────────────────────────────────── */
.cert-item { transition: transform var(--t-base); }
.cert-item:hover { transform: translateY(-6px); }
.cert-item:hover .cert-img {
    transform: scale(1.06);
    box-shadow: var(--shadow-md);
}
.cert-img {
    border-radius: var(--r-md);
    transition: transform var(--t-base), box-shadow var(--t-base);
    border: 1px solid var(--color-line);
    max-height: 110px;
    object-fit: contain;
    padding: .65rem;
    background: #fff;
    box-shadow: var(--shadow-xs);
}

/* ───────────────────────────────────────────────
   15. BRANCHES
   ─────────────────────────────────────────────── */
.branch-card {
    border-radius: var(--r-lg);
    border: 1px solid var(--color-line) !important;
    background: #fff;
    transition: transform var(--t-base), box-shadow var(--t-base);
    overflow: hidden;
}
.branch-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg) !important;
}
.branch-header {
    background:
        radial-gradient(at 100% 0%, color-mix(in srgb, var(--color-accent) 35%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    padding: 1.4rem 1.5rem;
}
.branch-name {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
}
.branch-info { padding: 1.5rem; }
.branch-info ul { margin-bottom: 1.25rem !important; }
.branch-info li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem 0;
    font-size: .9rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-line);
}
.branch-info li:last-child { border-bottom: none; }
.branch-info li i { color: var(--color-primary); flex-shrink: 0; margin-top: 3px; }
.branch-info a { color: var(--color-text); }
.branch-info a:hover { color: var(--color-primary); }

.navigate-btn {
    border-radius: var(--r-pill);
    padding: .65rem 1.25rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: none;
    color: #fff;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.navigate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ───────────────────────────────────────────────
   16. ABOUT IMAGE
   ─────────────────────────────────────────────── */
.about-img-wrap {
    position: relative;
    padding: 1rem;
}
.about-img-wrap::before {
    content: '';
    position: absolute;
    inset: -10px 30px 30px -10px;
    border-radius: calc(var(--r-lg) + 6px);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    opacity: .14;
    z-index: 0;
}
.about-img-wrap::after {
    content: '';
    position: absolute;
    width: 80px; height: 80px;
    bottom: -20px; right: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent), transparent 70%);
    opacity: .35;
    filter: blur(4px);
}
.about-img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border-radius: var(--r-lg);
}

/* ───────────────────────────────────────────────
   17. GALLERY
   ─────────────────────────────────────────────── */
.gallery-grid {
    columns: 2;
    column-gap: 1rem;
}
@media (min-width: 576px) { .gallery-grid { columns: 3; } }
@media (min-width: 992px) { .gallery-grid { columns: 4; } }

.gallery-item {
    break-inside: avoid;
    margin-bottom: 1rem;
    cursor: pointer;
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
    background: var(--color-bg-mute);
    box-shadow: var(--shadow-xs);
}
.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,.85), transparent 60%);
    opacity: 0;
    transition: opacity var(--t-base);
    display: flex;
    align-items: flex-end;
    padding: 1rem;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay-title {
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
}

/* ───────────────────────────────────────────────
   18. FOOTER
   ─────────────────────────────────────────────── */
.footer {
    /* hardcoded dark — must stay dark in both light and dark themes */
    background: #0b1220;
    color: rgba(255,255,255,.7);
    position: relative;
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--color-primary) 35%, transparent) 0%, transparent 40%),
        radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--color-secondary) 25%, transparent) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}
.footer > * { position: relative; z-index: 1; }

.footer-top {
    background:
        radial-gradient(at 100% 0%, color-mix(in srgb, var(--color-secondary) 60%, var(--color-primary)) 0%, transparent 60%),
        linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, var(--color-secondary)) 100%);
    padding: 3.5rem 0;
    color: #fff;
}
.footer-top-cta h3 {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
}
.footer-top-cta p {
    color: rgba(255,255,255,.85);
    font-size: .98rem;
    margin: 0;
}

.footer-main  { padding: 72px 0 56px; }
.footer-bottom {
    background: rgba(0,0,0,.35);
    padding: 1.15rem 0;
    font-size: .82rem;
    color: rgba(255,255,255,.5);
    border-top: 1px solid rgba(255,255,255,.06);
}
.footer-logo { max-height: 52px; width: auto; object-fit: contain; }
.footer-heading {
    color: rgba(255,255,255,.95);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    margin-bottom: 1.4rem;
    position: relative;
    padding-bottom: .75rem;
}
.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 30px; height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}
.footer-list li {
    display: flex; align-items: flex-start; gap: .65rem;
    margin-bottom: .75rem;
    font-size: .9rem;
    color: rgba(255,255,255,.7);
}
.footer-list li i {
    color: var(--color-secondary);
    flex-shrink: 0; margin-top: 3px;
}
.footer-list a {
    color: rgba(255,255,255,.7);
    transition: color var(--t-fast), transform var(--t-fast);
    display: inline-block;
}
.footer-list a:hover {
    color: #fff;
    transform: translateX(3px);
}

.social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    font-size: 1.05rem;
    border: 1px solid rgba(255,255,255,.12);
    transition: background var(--t-base), color var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.social-link:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    transform: translateY(-4px) rotate(-3deg);
    border-color: transparent;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff; border: none;
    padding: .8rem 1.5rem;
    border-radius: var(--r-pill);
    font-weight: 600; font-size: .92rem;
    display: inline-flex; align-items: center;
    transition: transform var(--t-base), box-shadow var(--t-base);
    box-shadow: 0 8px 22px rgba(37,211,102,.35);
}
.btn-whatsapp:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37,211,102,.5);
}

/* ───────────────────────────────────────────────
   19. WHATSAPP FLOAT
   ─────────────────────────────────────────────── */
.whatsapp-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 8px 28px rgba(37,211,102,.5);
    z-index: 1000;
    animation: waPulse 2.5s ease-in-out infinite;
    transition: transform var(--t-base), box-shadow var(--t-base), opacity var(--t-base);
}
.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(37,211,102,.4);
    animation: waRing 2.5s ease-out infinite;
    pointer-events: none;
}
.whatsapp-float:hover {
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 12px 36px rgba(37,211,102,.65);
    animation: none;
}
@keyframes waPulse {
    0%, 100% { box-shadow: 0 8px 28px rgba(37,211,102,.45); }
    50%      { box-shadow: 0 8px 36px rgba(37,211,102,.75); }
}
@keyframes waRing {
    0%   { transform: scale(.85); opacity: .8; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* ───────────────────────────────────────────────
   20. CATALOG PAGE
   ─────────────────────────────────────────────── */
.catalog-page #mainNav { margin-top: 0; }

.catalog-hero {
    margin-top: var(--navbar-height);
    background:
        radial-gradient(at 80% 30%, color-mix(in srgb, var(--color-secondary) 60%, var(--color-primary)) 0%, transparent 55%),
        radial-gradient(at 10% 90%, var(--color-accent) 0%, transparent 50%),
        linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary)));
    padding: 84px 0 68px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.catalog-hero::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 60px;
    background: #fff;
    clip-path: ellipse(80% 100% at 50% 100%);
}
.catalog-hero h1 {
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.2);
}

.catalog-search-wrap .form-control {
    border-radius: 0;
    border-color: transparent;
    box-shadow: none;
    font-size: 1rem;
}
.catalog-search-wrap .input-group { border-radius: var(--r-pill); overflow: hidden; box-shadow: var(--shadow-md); }
.catalog-search-wrap .input-group-text { border-color: transparent; background: #fff; padding-left: 1.25rem; }
.catalog-search-wrap .form-control:focus { box-shadow: none; border-color: transparent; }
.catalog-search-wrap .btn { border-color: transparent; }

.catalog-suggestions {
    position: absolute; left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--r-md);
    z-index: 100;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    margin-top: .35rem;
}
.suggestion-item {
    padding: .75rem 1.1rem;
    cursor: pointer;
    font-size: .92rem;
    transition: background var(--t-fast);
}
.suggestion-item:hover { background: var(--color-bg-soft); }
.suggestion-item mark { background: none; font-weight: 700; color: var(--color-primary); }

.filter-pill {
    background: #fff;
    border: 1.5px solid var(--color-line);
    border-radius: var(--r-pill);
    padding: .5rem 1.2rem;
    font-size: .87rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: all var(--t-base);
}
.filter-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.filter-pill.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.filter-pill .badge {
    background: rgba(0,0,0,.06);
    color: inherit;
    font-size: .7rem;
    border-radius: var(--r-pill);
    padding: .18em .5em;
}
.filter-pill.active .badge { background: rgba(255,255,255,.28); }

.category-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    padding: .7rem 1.15rem;
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.15rem;
}
.exam-count {
    margin-left: auto;
    background: var(--color-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    padding: .2em .75em;
    font-family: var(--font-body);
}

.exam-card {
    border: 1px solid var(--color-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
    background: #fff;
}
.exam-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-line));
}
.exam-card-header {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    flex-wrap: wrap;
    transition: background var(--t-fast);
}
.exam-card-header:hover { background: var(--color-bg-soft); }
.exam-name {
    font-weight: 600;
    font-size: .96rem;
    color: var(--color-ink);
    display: flex;
    align-items: center;
}
.exam-chevron {
    color: var(--color-muted);
    transition: transform var(--t-base);
    font-size: .9rem;
    margin-left: auto;
    flex-shrink: 0;
}
.exam-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.exam-badge {
    font-size: .72rem;
    padding: .25em .7em;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}
.exam-badge-price {
    background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
    color: color-mix(in srgb, var(--color-secondary) 80%, #000);
}
.exam-card-body {
    padding: 1.1rem 1.35rem 1.2rem;
    border-top: 1px solid var(--color-line);
    background: var(--color-bg-soft);
    font-size: .92rem;
}
.exam-prep {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--r-sm);
    padding: .75rem 1rem;
    font-size: .88rem;
    margin-top: .65rem;
    color: #92400e;
}

.footer-mini { background: var(--color-bg-soft); }

/* ───────────────────────────────────────────────
   21. SUBPAGE HERO (citas, blog, vacantes, post)
   ─────────────────────────────────────────────── */
.subpage-hero {
    position: relative;
    margin-top: var(--navbar-height);
    padding: clamp(64px, 9vw, 108px) 0 clamp(56px, 8vw, 96px);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.subpage-hero-gradient {
    background:
        radial-gradient(at 80% 20%, color-mix(in srgb, var(--color-secondary) 55%, var(--color-primary)) 0%, transparent 55%),
        radial-gradient(at 10% 90%, color-mix(in srgb, var(--color-accent) 65%, var(--color-primary)) 0%, transparent 50%),
        linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, #000) 100%);
}
.subpage-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 60px;
    background: #fff;
    clip-path: ellipse(80% 100% at 50% 100%);
    z-index: 0;
}
.subpage-hero-blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}
.subpage-hero-blobs span {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .35;
}
.subpage-hero-blobs span:nth-child(1) {
    width: 320px; height: 320px;
    top: -80px; left: -80px;
    background: var(--color-accent);
    animation: blobFloat 14s ease-in-out infinite;
}
.subpage-hero-blobs span:nth-child(2) {
    width: 260px; height: 260px;
    top: 30%; right: -60px;
    background: var(--color-secondary);
    animation: blobFloat 18s ease-in-out infinite reverse;
}
.subpage-hero-blobs span:nth-child(3) {
    width: 200px; height: 200px;
    bottom: -40px; left: 30%;
    background: #fff;
    opacity: .12;
    animation: blobFloat 22s ease-in-out infinite;
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.1); }
    66%      { transform: translate(-30px, 30px) scale(.95); }
}
.subpage-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    padding: .35rem .9rem;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--r-pill);
    margin-bottom: 1.15rem;
    backdrop-filter: blur(8px);
}
.subpage-title {
    font-size: clamp(2.1rem, 4.5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.025em;
    margin: 0 0 1rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.18);
}
.subpage-lead {
    color: rgba(255,255,255,.9);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    max-width: 620px;
    margin: 0;
}
.subpage-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    padding: .4rem .9rem;
    border-radius: var(--r-pill);
    font-size: .85rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
    margin-bottom: 1rem;
    transition: background var(--t-fast), transform var(--t-fast);
}
.subpage-back:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateX(-3px); }

.subpage-search { max-width: 560px; }
.subpage-search .input-group { border-radius: var(--r-pill); overflow: hidden; box-shadow: var(--shadow-md); }
.subpage-search .form-control { border: 0; }
.subpage-search .input-group-text { border: 0; background: #fff; padding-left: 1.25rem; }
.subpage-search .btn { border: 0; border-radius: 0; }

/* ───────────────────────────────────────────────
   22. CITAS — form refinements
   ─────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: var(--r-sm);
    border: 1.5px solid var(--color-line);
    padding: .65rem .85rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    font-size: .95rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.form-label { color: var(--color-ink); font-size: .9rem; margin-bottom: .35rem; }

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 65%, var(--color-secondary)));
    border: none;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 25%, transparent);
    transition: transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 90%, #000), var(--color-primary));
    transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 38%, transparent);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
    color: var(--color-primary);
    background: transparent;
    transition: all var(--t-base);
}
.btn-outline-primary:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* ───────────────────────────────────────────────
   23. BLOG CARDS (lista)
   ─────────────────────────────────────────────── */
.blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    height: 100%;
    color: var(--color-text);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-line));
    color: var(--color-text);
}
.blog-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-mute);
}
.blog-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease-out);
}
.blog-card:hover .blog-card-media img { transform: scale(1.08); }
.blog-card-media-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-bg-mute), var(--color-bg-soft));
    color: var(--color-soft);
    font-size: 2.5rem;
}
.blog-card-cat {
    position: absolute;
    top: 12px; left: 12px;
    background: rgba(255,255,255,.95);
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 700;
    padding: .3em .8em;
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: .05em;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
}
.blog-card-body {
    padding: 1.35rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-card-title {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.35;
    margin: 0 0 .55rem;
}
.blog-card-excerpt {
    font-size: .9rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin: 0 0 .9rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .8rem;
    color: var(--color-soft);
    margin-bottom: .8rem;
}
.blog-card-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.blog-card-arrow {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: gap var(--t-base);
    margin-top: auto;
}
.blog-card:hover .blog-card-arrow { gap: .6rem; }

/* ───────────────────────────────────────────────
   24. POST (artículo individual)
   ─────────────────────────────────────────────── */
.post-title { max-width: 820px; }
.post-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .9rem;
    color: rgba(255,255,255,.85);
}
.post-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.post-content {
    font-size: 1.06rem;
    line-height: 1.85;
    max-width: 760px;
    margin: auto;
    color: var(--color-text);
}
.post-content h2 {
    font-size: 1.7rem;
    margin: 2rem 0 .9rem;
    color: var(--color-ink);
}
.post-content h3 {
    font-size: 1.35rem;
    margin: 1.6rem 0 .65rem;
    color: var(--color-ink);
}
.post-content img {
    max-width: 100%;
    border-radius: var(--r-md);
    margin: 1.25rem 0;
}
.post-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding: .35rem 0 .35rem 1.15rem;
    color: var(--color-muted);
    font-style: italic;
    background: var(--color-bg-soft);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin: 1.5rem 0;
}
.post-content ul, .post-content ol { padding-left: 1.5rem; }
.post-content p { margin-bottom: 1rem; }
.post-content a { color: var(--color-primary); border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); transition: border-color var(--t-fast); }
.post-content a:hover { border-bottom-color: var(--color-primary); }

.related-card {
    border: 1px solid var(--color-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base);
    background: #fff;
    box-shadow: var(--shadow-xs);
}
.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.related-card-img {
    height: 150px;
    object-fit: cover;
    width: 100%;
}

/* ───────────────────────────────────────────────
   25. VACANCIES
   ─────────────────────────────────────────────── */
.vacancy-card {
    border: 1px solid var(--color-line);
    border-left: 5px solid var(--color-primary);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base);
    background: #fff;
}
.vacancy-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--color-secondary);
}
.vacancy-contact {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
    border-radius: var(--r-md);
    padding: 1.1rem 1.35rem;
    margin-top: 1rem;
}
.vacancy-card .section-content ul,
.vacancy-card .section-content ol { padding-left: 1.5rem; }

/* ───────────────────────────────────────────────
   26. PAGINATION
   ─────────────────────────────────────────────── */
.pagination .page-link {
    border: 1px solid var(--color-line);
    color: var(--color-text);
    border-radius: var(--r-sm) !important;
    margin: 0 .15rem;
    padding: .55rem .95rem;
    font-weight: 500;
    transition: all var(--t-fast);
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.pagination .page-link:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    z-index: 1;
}

/* ───────────────────────────────────────────────
   27. MODALS
   ─────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--r-lg);
    border: none;
    box-shadow: 0 30px 80px rgba(15,23,42,.25);
}
.modal-header { padding: 1.25rem 1.5rem; }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; }
#navigationModal .modal-content { border-radius: var(--r-lg); }

/* Lightbox bg overlay darker */
#lightboxModal .modal-content { background: rgba(15,23,42,.92); }

/* ───────────────────────────────────────────────
   28. ALERTS
   ─────────────────────────────────────────────── */
.alert {
    border-radius: var(--r-md);
    border: 1px solid transparent;
    padding: 1rem 1.15rem;
}
.alert-danger {
    background: color-mix(in srgb, #dc3545 8%, white);
    border-color: color-mix(in srgb, #dc3545 25%, transparent);
    color: #842029;
}
.alert-success {
    background: color-mix(in srgb, #198754 8%, white);
    border-color: color-mix(in srgb, #198754 25%, transparent);
    color: #0f5132;
}

/* ───────────────────────────────────────────────
   29. SCROLL-REVEAL UTILITY
   ─────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    will-change: opacity, transform;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ───────────────────────────────────────────────
   30. UTILITY: performance hints
   ─────────────────────────────────────────────── */
/* content-visibility: auto used to be set here. Removed: it estimates an
   off-screen section's height (contain-intrinsic-size: 600px) until the
   section is actually laid out, and the homepage stacks 13 of them. A header
   link or banner button to an anchor deep in the page (Sedes, Galeria...)
   computes its scroll target from that underestimated total height, and
   window.scrollTo() clamps the result to the page's current (also
   underestimated) max scroll extent - landing the visitor at the bottom of
   the document, i.e. the footer, instead of the section they clicked.
   Confirmed with real content: Sedes landed at 7011px instead of its real
   5850px, identical to Galeria's landing spot - both clamped to the same
   footer-adjacent maximum. Severity depends on how much content sits above
   the target, which is why it only showed up on some sites. 13 sections is
   not the scale this optimisation is meant for; correctness here matters
   more than the marginal paint saving. */

/* ───────────────────────────────────────────────
   31. RESPONSIVE
   ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #mainNav { padding: .55rem 0; }
    .navbar-collapse {
        background: #fff;
        margin-top: .65rem;
        padding: 1rem;
        border-radius: var(--r-md);
        box-shadow: var(--shadow-md);
    }
    .navbar-nav .nav-link.active::after { display: none; }
}

@media (max-width: 767.98px) {
    .hero-slide,
    .hero-static { height: clamp(440px, 78vh, 620px); }
    .section-padding { padding: 64px 0; }
    .quick-bar-item { padding: .2rem .85rem; font-size: .82rem; }
    .quick-bar-item + .quick-bar-item { border-left: none; }
    .whatsapp-float {
        width: 54px; height: 54px;
        font-size: 1.5rem;
        bottom: 20px; right: 20px;
    }
    .footer-top {
        padding: 2.75rem 0;
        text-align: center;
    }
    .footer-main { padding: 56px 0 40px; }
    .testimonial-card { padding: 1.6rem 1.4rem; }
    .subpage-hero { padding: 72px 0 64px; }
}

@media (max-width: 575.98px) {
    .hero-title { font-size: 1.95rem; }
    .hero-subtitle { font-size: .98rem; }
    .section-title { font-size: 1.65rem; }
    .catalog-hero {
        padding: 56px 0 40px;
    }
    .catalog-hero::after { height: 36px; }
    .subpage-title { font-size: 1.85rem; }
}

/* Hide topbar entirely on very small screens to save space */
@media (max-width: 480px) {
    .topbar { display: none; }
    #mainNav { top: 0 !important; }
    :root { --topbar-h: 0px; }
}

/* Print friendly */
@media print {
    .topbar, #mainNav, .whatsapp-float, .footer, .subpage-hero-blobs,
    .carousel-indicators, .carousel-control-prev, .carousel-control-next,
    .scroll-progress, .theme-toggle { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
    .section-padding { padding: 24px 0; }
}

/* ───────────────────────────────────────────────
   32. THEME TOGGLE BUTTON
   ─────────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
    padding: 0;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    transform: rotate(20deg);
}
.theme-toggle .bi-moon-stars-fill { display: none; }
.theme-toggle .bi-sun-fill        { display: inline-block; }
[data-theme="dark"] .theme-toggle .bi-sun-fill        { display: none; }
[data-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: inline-block; }

/* ───────────────────────────────────────────────
   33. DARK MODE OVERRIDES
   ─────────────────────────────────────────────── */
[data-theme="dark"] {
    --color-ink:       #f1f5f9;
    --color-dark:      #e2e8f0;
    --color-text:      #cbd5e1;
    --color-muted:     #94a3b8;
    --color-soft:      #64748b;
    --color-line:      #1f2937;
    --color-bg:        #0b1220;
    --color-bg-soft:   #111a2e;
    --color-bg-mute:   #1a2440;
    --glass-bg:        rgba(17,26,46,.72);
    --glass-border:    rgba(255,255,255,.06);
    --shadow-xs:       0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:       0 4px 14px rgba(0,0,0,.35);
    --shadow-md:       0 12px 30px rgba(0,0,0,.45);
    --shadow-lg:       0 24px 60px rgba(0,0,0,.55);
    color-scheme: dark;
}

/* Body + scrollbar */
[data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg-soft); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { border-color: var(--color-bg-soft); }

/* Navbar — frosted dark */
[data-theme="dark"] #mainNav {
    background: rgba(11,18,32,.78);
    border-bottom-color: rgba(255,255,255,.06);
}
[data-theme="dark"] #mainNav.scrolled {
    background: rgba(11,18,32,.95);
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
[data-theme="dark"] .navbar-nav .nav-link {
    color: var(--color-text) !important;
}
[data-theme="dark"] .navbar-nav .nav-link:hover {
    background: rgba(255,255,255,.06);
    color: #fff !important;
}

/* Mobile collapsed nav background */
@media (max-width: 991.98px) {
    [data-theme="dark"] .navbar-collapse {
        background: var(--color-bg-soft);
        box-shadow: 0 8px 28px rgba(0,0,0,.5);
    }
}

/* Cards & surfaces (override hardcoded #fff backgrounds) */
[data-theme="dark"] .promo-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .branch-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .vacancy-card,
[data-theme="dark"] .related-card,
[data-theme="dark"] .exam-card,
[data-theme="dark"] .card,
[data-theme="dark"] .card.h-100 {
    background: var(--color-bg-soft);
    border-color: var(--color-line) !important;
    color: var(--color-text);
}
[data-theme="dark"] .exam-card-header:hover { background: var(--color-bg-mute); }
[data-theme="dark"] .exam-card-body { background: var(--color-bg-mute); border-top-color: var(--color-line); }
[data-theme="dark"] .cert-img { background: var(--color-bg-soft); border-color: var(--color-line); }
[data-theme="dark"] .filter-pill {
    background: var(--color-bg-soft);
    border-color: var(--color-line);
    color: var(--color-text);
}
[data-theme="dark"] .filter-pill .badge { background: rgba(255,255,255,.08); }

/* Light backgrounds (.bg-light) → dark */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .promo-section,
[data-theme="dark"] .footer-mini {
    background: var(--color-bg-soft) !important;
}
[data-theme="dark"] .bg-white { background: var(--color-bg-soft) !important; }

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--color-bg-mute);
    border-color: var(--color-line);
    color: var(--color-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--color-soft); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--color-bg-mute);
    border-color: var(--color-primary);
    color: var(--color-text);
}
[data-theme="dark"] .form-label { color: var(--color-ink); }
[data-theme="dark"] .form-text  { color: var(--color-muted); }
[data-theme="dark"] .input-group-text {
    background: var(--color-bg-mute);
    border-color: var(--color-line);
    color: var(--color-text);
}

/* Catalog search-bar (white-on-light → white-on-dark) */
[data-theme="dark"] .catalog-search-wrap .input-group-text,
[data-theme="dark"] .catalog-search-wrap .form-control,
[data-theme="dark"] .subpage-search .input-group-text,
[data-theme="dark"] .subpage-search .form-control {
    background: var(--color-bg-soft);
    color: var(--color-text);
}
[data-theme="dark"] .suggestion-item:hover { background: var(--color-bg-mute); }
[data-theme="dark"] .catalog-suggestions {
    background: var(--color-bg-soft);
    border-color: var(--color-line);
}

/* Buttons */
[data-theme="dark"] .btn-outline-primary {
    color: color-mix(in srgb, var(--color-primary) 80%, #fff);
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
[data-theme="dark"] .btn-outline-secondary {
    color: var(--color-text);
    border-color: var(--color-line);
    background: transparent;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--color-bg-mute);
    color: var(--color-ink);
}
[data-theme="dark"] .btn-light {
    background: var(--color-bg-soft);
    color: var(--color-ink);
    border-color: var(--color-line);
}

/* Tables, alerts, code */
[data-theme="dark"] .alert-danger {
    background: color-mix(in srgb, #dc3545 15%, var(--color-bg-soft));
    color: #fecaca;
    border-color: color-mix(in srgb, #dc3545 35%, transparent);
}
[data-theme="dark"] .alert-success {
    background: color-mix(in srgb, #198754 15%, var(--color-bg-soft));
    color: #bbf7d0;
    border-color: color-mix(in srgb, #198754 35%, transparent);
}

/* Pagination */
[data-theme="dark"] .pagination .page-link {
    background: var(--color-bg-soft);
    color: var(--color-text);
    border-color: var(--color-line);
}
[data-theme="dark"] .pagination .page-link:hover {
    background: var(--color-bg-mute);
    color: var(--color-ink);
}

/* Modal */
[data-theme="dark"] .modal-content {
    background: var(--color-bg-soft);
    color: var(--color-text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--color-line) !important; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.5); }

/* Exam prep highlight — keep yellow but tone for dark */
[data-theme="dark"] .exam-prep {
    background: color-mix(in srgb, #fde68a 12%, var(--color-bg-mute));
    border-color: color-mix(in srgb, #fde68a 30%, transparent);
    color: #fde68a;
}

/* About frame */
[data-theme="dark"] .about-img-wrap::before { opacity: .22; }

/* Insurers — invert grayscale logic so dark logos show */
[data-theme="dark"] .insurer-logo { filter: grayscale(40%) brightness(1.15); }
[data-theme="dark"] .insurer-logo:hover { filter: grayscale(0) brightness(1.15); }

/* Hero static — keep gradient but darken */
[data-theme="dark"] .hero-static::after { background: var(--color-bg); }
[data-theme="dark"] .catalog-hero::after,
[data-theme="dark"] .subpage-hero::after { background: var(--color-bg); }

/* Vacancy contact tint */
[data-theme="dark"] .vacancy-contact {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-mute));
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* Footer keeps its dark gradient; just nudge text */
[data-theme="dark"] .footer-mini .text-muted { color: var(--color-muted) !important; }

/* Bootstrap utility overrides — prevent dark-on-dark unreadability */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-black {
    color: var(--color-text) !important;
}
[data-theme="dark"] .text-muted {
    color: var(--color-muted) !important;
}
[data-theme="dark"] .text-secondary {
    color: var(--color-soft) !important;
}
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border-start { border-color: var(--color-line) !important; }
[data-theme="dark"] hr { border-top-color: var(--color-line) !important; opacity: 1; }

/* Subtle Bootstrap subtle backgrounds (e.g. bg-primary-subtle) */
[data-theme="dark"] .bg-primary-subtle {
    background: color-mix(in srgb, var(--color-primary) 25%, var(--color-bg-mute)) !important;
    color: color-mix(in srgb, var(--color-primary) 70%, #fff) !important;
}
[data-theme="dark"] .bg-success-subtle {
    background: color-mix(in srgb, var(--color-secondary) 25%, var(--color-bg-mute)) !important;
}
[data-theme="dark"] .bg-danger-subtle  { background: color-mix(in srgb, #dc3545 25%, var(--color-bg-mute)) !important; }
[data-theme="dark"] .bg-warning-subtle { background: color-mix(in srgb, #ffc107 25%, var(--color-bg-mute)) !important; }
[data-theme="dark"] .bg-info-subtle    { background: color-mix(in srgb, #0dcaf0 25%, var(--color-bg-mute)) !important; }
[data-theme="dark"] .text-primary { color: color-mix(in srgb, var(--color-primary) 60%, #fff) !important; }
[data-theme="dark"] .text-success { color: color-mix(in srgb, var(--color-secondary) 60%, #fff) !important; }

/* Vacancy contact: had .text-dark inline → now readable */
[data-theme="dark"] .vacancy-contact .text-dark { color: var(--color-ink) !important; }

/* Service / product cards titles & paragraphs */
[data-theme="dark"] .service-card .card-body,
[data-theme="dark"] .service-card .card-body * { color: var(--color-text); }
[data-theme="dark"] .service-card h1, [data-theme="dark"] .service-card h2,
[data-theme="dark"] .service-card h3, [data-theme="dark"] .service-card h4,
[data-theme="dark"] .service-card h5, [data-theme="dark"] .service-card h6,
[data-theme="dark"] .branch-card  h1, [data-theme="dark"] .branch-card  h2,
[data-theme="dark"] .branch-card  h3, [data-theme="dark"] .branch-card  h4,
[data-theme="dark"] .branch-card  h5, [data-theme="dark"] .branch-card  h6,
[data-theme="dark"] .promo-card-title,
[data-theme="dark"] .blog-card-title { color: var(--color-ink); }

/* Section title in dark — explicit (the .text-white modifier still wins) */
[data-theme="dark"] .section-title:not(.text-white) { color: var(--color-ink); }

/* Section content (RSE, Quiénes somos, Calidad) text */
[data-theme="dark"] .section-content,
[data-theme="dark"] .section-content * { color: var(--color-text); }
[data-theme="dark"] .section-content h1, [data-theme="dark"] .section-content h2,
[data-theme="dark"] .section-content h3, [data-theme="dark"] .section-content h4 { color: var(--color-ink); }

/* Branch info icons + text */
[data-theme="dark"] .branch-info li { color: var(--color-text); border-bottom-color: var(--color-line); }
[data-theme="dark"] .branch-info a  { color: var(--color-text); }
[data-theme="dark"] .branch-info a:hover { color: var(--color-primary); }

/* Promo description, expiry */
[data-theme="dark"] .promo-card-desc { color: var(--color-muted); }
[data-theme="dark"] .promo-expiry    { background: var(--color-bg-mute); color: var(--color-muted); }

/* Blog card meta */
[data-theme="dark"] .blog-card-meta { color: var(--color-soft); }
[data-theme="dark"] .blog-card-excerpt { color: var(--color-muted); }
[data-theme="dark"] .blog-card-cat { background: var(--color-bg-mute); color: color-mix(in srgb, var(--color-primary) 60%, #fff); }

/* Exam card text */
[data-theme="dark"] .exam-name { color: var(--color-ink); }
[data-theme="dark"] .exam-card-body p { color: var(--color-muted); }
[data-theme="dark"] .exam-card-body p.text-muted { color: var(--color-muted) !important; }
[data-theme="dark"] .category-heading {
    color: color-mix(in srgb, var(--color-primary) 70%, #fff);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-mute));
}

/* Pagination active text */
[data-theme="dark"] .pagination .page-item.active .page-link { color: #fff; }

/* Smooth transitions while toggling (skip if reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    body,
    .promo-card, .service-card, .branch-card, .blog-card, .exam-card, .vacancy-card,
    .card, .form-control, .form-select, .filter-pill, .modal-content {
        transition:
            background-color .35s ease,
            border-color    .35s ease,
            color           .35s ease,
            box-shadow      .35s ease;
    }
}

/* ───────────────────────────────────────────────
   LAYOUT VARIANTS (admin-selectable — Tema y Colores)
   .layout-classic = default look (no overrides needed)
   .layout-modern  = left-aligned headers, accent bar, flat bordered cards, compact
   .layout-minimal = airy, light typography, no shadows, hairline cards
   ─────────────────────────────────────────────── */

/* ── MODERN ─────────────────────────────────── */
body.layout-modern {
    --r-xs: 2px !important;
    --r-sm: 2px !important;
    --r-md: 4px !important;
    --r-lg: 6px !important;
    --r-xl: 8px !important;
    --r-pill: 4px !important;
}
.layout-modern .section-padding { padding: clamp(52px, 7vw, 88px) 0 !important; }

/* Left-align the section headers (label + title blocks) */
.layout-modern .section-padding > .container > .text-center {
    text-align: left !important;
    max-width: 760px;
    margin-left: 0;
}
.layout-modern .section-title {
    letter-spacing: -.03em !important;
    font-weight: 800 !important;
}
/* Accent bar under every section title */
.layout-modern .section-padding > .container > .text-center .section-title::after {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    margin-top: .85rem;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}
/* Section label becomes a solid block */
.layout-modern .section-label {
    padding: .35rem .95rem !important;
    border-radius: 2px !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
    letter-spacing: .15em !important;
    display: inline-block !important;
}
.layout-modern .section-label::before,
.layout-modern .section-label::after { display: none !important; }

/* Flat, squared cards.
   These used to be 2px near-black outlines with a hard 4px black offset
   shadow on hover. At full strength --color-ink (#0b1220) reads as an
   unstyled wireframe box: it out-weighs both the brand colour and the text,
   and the offset shadow made cards look misaligned. The look below keeps the
   theme's flat, editorial structure — squared corners, no glossy shadows —
   but carries it with a hairline rule and a brand accent instead of black. */
.layout-modern .service-card,
.layout-modern .branch-card,
.layout-modern .blog-card,
.layout-modern .testimonial-card,
.layout-modern .promo-card,
.layout-modern .exam-card,
.layout-modern .vacancy-card,
.layout-modern .card.border-0,
.layout-modern .card.shadow-sm {
    box-shadow: none !important;
    border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent) !important;
    border-radius: 0 !important;
    position: relative;
}

/* Brand accent along the top edge — the structural cue that replaces the
   black outline. Sits flush with the hairline border. */
.layout-modern .service-card::after,
.layout-modern .branch-card::after,
.layout-modern .blog-card::after,
.layout-modern .promo-card::after,
.layout-modern .vacancy-card::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
.layout-modern .service-card:hover::after,
.layout-modern .branch-card:hover::after,
.layout-modern .blog-card:hover::after,
.layout-modern .promo-card:hover::after,
.layout-modern .vacancy-card:hover::after {
    transform: scaleX(1);
}

.layout-modern .service-card:hover,
.layout-modern .branch-card:hover,
.layout-modern .blog-card:hover,
.layout-modern .testimonial-card:hover,
.layout-modern .promo-card:hover,
.layout-modern .exam-card:hover,
.layout-modern .vacancy-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-ink) 10%, transparent) !important;
}

/* Dark mode: the hairline has to lift off the dark surface, not sink into it. */
[data-theme="dark"] .layout-modern .service-card,
[data-theme="dark"] .layout-modern .branch-card,
[data-theme="dark"] .layout-modern .blog-card,
[data-theme="dark"] .layout-modern .testimonial-card,
[data-theme="dark"] .layout-modern .promo-card,
[data-theme="dark"] .layout-modern .exam-card,
[data-theme="dark"] .layout-modern .vacancy-card,
[data-theme="dark"] .layout-modern .card.border-0,
[data-theme="dark"] .layout-modern .card.shadow-sm {
    border-color: rgba(255, 255, 255, .12) !important;
}
[data-theme="dark"] .layout-modern .service-card:hover,
[data-theme="dark"] .layout-modern .branch-card:hover,
[data-theme="dark"] .layout-modern .blog-card:hover,
[data-theme="dark"] .layout-modern .promo-card:hover,
[data-theme="dark"] .layout-modern .exam-card:hover,
[data-theme="dark"] .layout-modern .vacancy-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 55%, transparent) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35) !important;
}

/* ── MINIMAL ────────────────────────────────── */
body.layout-minimal {
    --color-bg-soft: #ffffff;
    --r-xs: 0px !important;
    --r-sm: 0px !important;
    --r-md: 0px !important;
    --r-lg: 0px !important;
    --r-xl: 0px !important;
    --r-pill: 0px !important;
}
.layout-minimal .section-padding { padding: clamp(96px, 12vw, 160px) 0 !important; }

.layout-minimal h1, .layout-minimal h2, .layout-minimal h3, .layout-minimal h4, .layout-minimal .section-title {
    font-weight: 300 !important;
    letter-spacing: -.02em !important;
}
.layout-minimal .hero-title { font-weight: 300 !important; }

/* Plain, undecorated eyebrow labels */
.layout-minimal .section-label {
    color: var(--color-muted) !important;
    letter-spacing: .25em !important;
    font-weight: 400 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
}
.layout-minimal .section-label::before,
.layout-minimal .section-label::after,
.layout-minimal .section-label-light::before,
.layout-minimal .section-label-light::after { display: none !important; }

/* Hairline bottom borders only - clean architectural look */
.layout-minimal .service-card,
.layout-minimal .branch-card,
.layout-minimal .blog-card,
.layout-minimal .testimonial-card,
.layout-minimal .promo-card,
.layout-minimal .exam-card,
.layout-minimal .card.border-0,
.layout-minimal .card.shadow-sm {
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent) !important;
    border-radius: 0px !important;
    background: transparent !important;
}
.layout-minimal .service-card:hover,
.layout-minimal .branch-card:hover,
.layout-minimal .blog-card:hover,
.layout-minimal .testimonial-card:hover,
.layout-minimal .promo-card:hover,
.layout-minimal .exam-card:hover {
    transform: none !important;
    border-bottom-color: var(--color-primary) !important;
    box-shadow: none !important;
}

/* ── GLASSMORPHIC (NEW) ── */
body.layout-glass {
    --r-xs: 8px !important;
    --r-sm: 12px !important;
    --r-md: 20px !important;
    --r-lg: 28px !important;
    --r-xl: 32px !important;
    --r-pill: 999px !important;
}

/* Frosted tint for ordinary page sections only.
   Sub-page heroes (.subpage-hero, .catalog-hero) are deliberately NOT listed
   here: like .section-primary they are inverted surfaces whose title, eyebrow
   and lead are hardcoded white, so replacing their gradient with this almost
   transparent tint left white text on a white page in Catálogo, Blog,
   Vacantes, Citas and las entradas del blog. See section 23b. */
.layout-glass section.section-padding {
    background: radial-gradient(at 10% 20%, rgba(var(--color-primary-rgb), 0.03), transparent 60%),
                radial-gradient(at 90% 80%, rgba(var(--color-secondary-rgb), 0.03), transparent 60%) !important;
    position: relative;
}

.layout-glass .service-card,
.layout-glass .branch-card,
.layout-glass .blog-card,
.layout-glass .testimonial-card,
.layout-glass .promo-card,
.layout-glass .exam-card,
.layout-glass .card.border-0,
.layout-glass .card.shadow-sm {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px 0 rgba(var(--color-primary-rgb), 0.04) !important;
}

[data-theme="dark"] .layout-glass .service-card,
[data-theme="dark"] .layout-glass .branch-card,
[data-theme="dark"] .layout-glass .blog-card,
[data-theme="dark"] .layout-glass .testimonial-card,
[data-theme="dark"] .layout-glass .promo-card,
[data-theme="dark"] .layout-glass .exam-card,
[data-theme="dark"] .layout-glass .card.border-0,
[data-theme="dark"] .layout-glass .card.shadow-sm {
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
}

.layout-glass .service-card:hover,
.layout-glass .branch-card:hover,
.layout-glass .blog-card:hover,
.layout-glass .testimonial-card:hover,
.layout-glass .promo-card:hover,
.layout-glass .exam-card:hover {
    transform: translateY(-8px) !important;
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(var(--color-primary-rgb), 0.45) !important;
    box-shadow: 0 16px 40px 0 rgba(var(--color-primary-rgb), 0.12) !important;
}

[data-theme="dark"] .layout-glass .service-card:hover,
[data-theme="dark"] .layout-glass .branch-card:hover,
[data-theme="dark"] .layout-glass .blog-card:hover,
[data-theme="dark"] .layout-glass .testimonial-card:hover,
[data-theme="dark"] .layout-glass .promo-card:hover,
[data-theme="dark"] .layout-glass .exam-card:hover {
    background: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(var(--color-primary-rgb), 0.3) !important;
    box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.4) !important;
}

.layout-glass .section-label {
    padding: .4rem 1.15rem !important;
    border-radius: var(--r-pill) !important;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08), rgba(var(--color-secondary-rgb), 0.08)) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.2) !important;
    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.05) !important;
    color: var(--color-primary) !important;
}
.layout-glass .section-label::before,
.layout-glass .section-label::after { display: none !important; }

.layout-glass .quick-bar {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="dark"] .layout-glass .quick-bar {
    background: rgba(15, 23, 42, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ───────────────────────────────────────────────
   23b. INVERTED BANDS — shared by every layout variant
   ───────────────────────────────────────────────
   .section-primary / .section-secondary are full-bleed brand-coloured bands
   whose markup hardcodes light text (.text-white, .section-label-light).
   Their contrast therefore depends on the coloured background surviving.

   The glass variant used to repaint every `section.section-padding` with a
   near-transparent gradient, which also caught these bands: the colour
   disappeared, the white text stayed, and the testimonials section rendered
   white-on-white. The rules below restore the band in all variants and give
   the cards inside them a light-on-colour treatment, so each theme keeps its
   own personality without ever losing legibility.

   Placed after the layout blocks so equal-specificity rules resolve here.
   Classic is untouched: these selectors only re-assert its original look.
   ─────────────────────────────────────────────── */

/* 1. The band keeps its colour no matter which layout is active. */
.layout-glass section.section-primary,
.layout-glass section.section-secondary {
    background:
        radial-gradient(at 80% 0%, color-mix(in srgb, var(--color-secondary) 50%, var(--color-primary)) 0%, transparent 55%),
        var(--color-primary) !important;
}
.layout-glass section.section-secondary {
    background:
        radial-gradient(at 0% 100%, color-mix(in srgb, var(--color-secondary) 80%, #000) 0%, transparent 55%),
        var(--color-secondary) !important;
}

/* 2. Cards inside a band are frosted white-on-colour, never page-coloured.
      This overrides the light-mode AND dark-mode variant rules, because the
      band is brand-coloured in both themes. */
.layout-glass .section-primary .testimonial-card,
.layout-glass .section-secondary .testimonial-card,
.layout-glass .section-primary .special-card,
.layout-glass .section-secondary .special-card,
[data-theme="dark"] .layout-glass .section-primary .testimonial-card,
[data-theme="dark"] .layout-glass .section-secondary .testimonial-card,
[data-theme="dark"] .layout-glass .section-primary .special-card,
[data-theme="dark"] .layout-glass .section-secondary .special-card {
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .14) !important;
}
.layout-glass .section-primary .testimonial-card:hover,
.layout-glass .section-secondary .testimonial-card:hover,
.layout-glass .section-primary .special-card:hover,
.layout-glass .section-secondary .special-card:hover,
[data-theme="dark"] .layout-glass .section-primary .testimonial-card:hover,
[data-theme="dark"] .layout-glass .section-secondary .testimonial-card:hover,
[data-theme="dark"] .layout-glass .section-primary .special-card:hover,
[data-theme="dark"] .layout-glass .section-secondary .special-card:hover {
    background: rgba(255, 255, 255, .22) !important;
    border-color: rgba(255, 255, 255, .38) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .2) !important;
}

/* 3. Modern's hairline is a tint of --color-ink, which disappears against a
      brand-coloured band. Use the band's own light ink instead, and make the
      accent bar white so it stays visible over the colour. */
.layout-modern .section-primary .testimonial-card,
.layout-modern .section-secondary .testimonial-card,
.layout-modern .section-primary .special-card,
.layout-modern .section-secondary .special-card {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
}
.layout-modern .section-primary .testimonial-card:hover,
.layout-modern .section-secondary .testimonial-card:hover,
.layout-modern .section-primary .special-card:hover,
.layout-modern .section-secondary .special-card:hover {
    border-color: rgba(255, 255, 255, .75) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
}
.layout-modern .section-primary [class$="-card"]::after,
.layout-modern .section-secondary [class$="-card"]::after {
    background: rgba(255, 255, 255, .7) !important;
}

/* 4. Minimal's hairline is --color-ink at 8% — invisible on a coloured band. */
.layout-minimal .section-primary .testimonial-card,
.layout-minimal .section-secondary .testimonial-card,
.layout-minimal .section-primary .special-card,
.layout-minimal .section-secondary .special-card {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .28) !important;
}
.layout-minimal .section-primary .testimonial-card:hover,
.layout-minimal .section-secondary .testimonial-card:hover,
.layout-minimal .section-primary .special-card:hover,
.layout-minimal .section-secondary .special-card:hover {
    border-bottom-color: rgba(255, 255, 255, .7) !important;
}

/* 5. Text inside a band stays light whatever a layout or dark-mode card rule
      would otherwise impose. The markup already sets .text-white /
      .text-white-75 on names and roles; these two only cover the elements
      whose colour comes from CSS rather than a utility class. */
.section-primary .testimonial-text,
.section-secondary .testimonial-text {
    color: rgba(255, 255, 255, .94) !important;
}
.section-primary .testimonial-card::before,
.section-secondary .testimonial-card::before {
    color: rgba(255, 255, 255, .12) !important;  /* same value as the base rule */
}

/* ───────────────────────────────────────────────
   24. PREMIUM MICROMOTIONS & HOVER EFFECT LIFTS
   ─────────────────────────────────────────────── */
.service-card, .promo-card, .branch-card, .testimonial-card, .exam-card, .vacancy-card, .blog-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-card:hover, .promo-card:hover, .branch-card:hover, .testimonial-card:hover, .vacancy-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px color-mix(in srgb, var(--color-primary) 6%, rgba(0, 0, 0, 0.08)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

/* Specific hover scaling for images inside cards */
.service-img, .promo-card-img img, .product-img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-img,
.promo-card:hover .promo-card-img img,
.product-card:hover .product-img {
    transform: scale(1.05);
}

/* Scroll progress bar with custom gradient */
.scroll-progress {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
    height: 4px !important;
}

/* Pre-loading Skeleton Shimmer placeholder class */
.image-loading-bg {
    position: relative;
    overflow: hidden;
    background-color: #f1f5f9;
}
.image-loading-bg::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    100% { transform: translateX(100%); }
}


/* ───────────────────────────────────────────────
   32. UTILITIES REPLACING INLINE style="" ATTRIBUTES
   ───────────────────────────────────────────────
   Content-Security-Policy nonces apply to <style> elements but NOT to style
   attributes, so every inline style had to become a class before
   'unsafe-inline' could be dropped from style-src. These are the small,
   one-off declarations that used to live in the templates.
   ─────────────────────────────────────────────── */

/* Icon sizing */
.icon-1_5x { font-size: 1.5rem; }
.icon-2_5x { font-size: 2.5rem; }
.icon-3x   { font-size: 3rem; }
.icon-3_5x { font-size: 3.5rem; }
.icon-4x   { font-size: 4rem; }

/* Visibility toggled by scripts (Bootstrap's .d-none is not always usable
   because these elements are shown again with style.display = 'block'). */
.is-hidden { display: none; }

/* Layout helpers */
.cursor-pointer     { cursor: pointer; }
.stack-above        { position: relative; z-index: 2; }
.measure-680        { max-width: 680px; }
.measure-800        { max-width: 800px; margin-inline: auto; }
.measure-560        { max-width: 560px; }
.text-underline     { text-decoration: underline; }
.fs-075             { font-size: .75rem; }

/* Media caps */
.img-cap-62  { max-height: 62px; }
.img-cap-420 { max-height: 420px; object-fit: cover; }
.lightbox-img { max-height: 85vh; width: auto; margin: auto; display: block; }

/* Round icon/nav buttons */
.btn-round-44 { width: 44px; height: 44px; padding: 0; }

/* Success check medallion on the appointment confirmation */
.success-medallion {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: color-mix(in srgb, #198754 12%, transparent);
}

/* Card radius used by the appointment confirmation card */
.radius-125 { border-radius: 1.25rem; }

/* Honeypot field: present for bots, unreachable for people. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Admin-only maintenance banner on public pages */
.maintenance-strip {
    background: #dc3545;
    color: #fff;
    padding: .55rem 1rem;
    text-align: center;
    font-size: .875rem;
    position: relative;
    z-index: 9999;
}

/* Chevron rotation for the catalogue accordion (was an inline transform). */
.exam-chevron { transition: transform .25s ease; }
.exam-chevron.is-flipped { transform: rotate(180deg); }

/* ───────────────────────────────────────────────
   33. QUESTION / ANSWER CONTENT BLOCKS
   ───────────────────────────────────────────────
   Used by content blocks whose type is "preguntas": the questions are always
   visible and each answer opens underneath when its question is activated.
   ─────────────────────────────────────────────── */

.faq-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .5rem;
}

.faq-item {
    border: 1px solid var(--color-line);
    border-radius: var(--r-md);
    background: var(--color-bg-soft);
    overflow: hidden;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.faq-item:has(.faq-question[aria-expanded="true"]) {
    border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    font-weight: 600;
    color: var(--color-ink);
    cursor: pointer;
}
.faq-question:hover   { color: var(--color-primary); }
.faq-question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.faq-chevron {
    flex-shrink: 0;
    font-size: .9rem;
    color: var(--color-primary);
    transition: transform .25s ease;
}
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    padding: 0 1.15rem 1.15rem;
    color: var(--color-text);
    line-height: 1.7;
}
.faq-answer > :last-child { margin-bottom: 0; }

/* Inside an inverted band the neutral surface would disappear. */
.section-primary .faq-item,
.section-secondary .faq-item {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
}
.section-primary .faq-question,
.section-secondary .faq-question { color: #fff; }
.section-primary .faq-chevron,
.section-secondary .faq-chevron  { color: rgba(255, 255, 255, .8); }
.section-primary .faq-answer,
.section-secondary .faq-answer   { color: rgba(255, 255, 255, .9); }

/* A question list reads as a list, not as centred prose — override the
   text-center the parent column applies when the block has no image. */
.faq-list,
.faq-list .faq-question,
.faq-list .faq-answer { text-align: left !important; }