/* American Institute of Mental Health — v8.0 Awwwards Premium */
/* Design: Apple · Stripe · Linear · Spring Health tier */
/* Fonts: Manrope (headings) + Inter (body) */


/* ═══════════════════════════════════════════════════════════════
   §1  CSS VARIABLES
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Primary Blues ── */
    --primary: #1D4ED8;
    --primary-dark: #1E3A8A;
    --primary-light: #3B82F6;
    --primary-50: #EFF6FF;
    --primary-100: #DBEAFE;

    /* ── Greens (CTAs only) ── */
    --green: #10B981;
    --green-dark: #059669;
    --green-50: #ECFDF5;

    /* ── Neutrals ── */
    --secondary: #0F172A;
    --bg: #F8FAFC;
    --white: #FFFFFF;
    --text: #111827;
    --text-body: #4B5563;
    --text-secondary: #6B7280;
    --text-light: #9CA3AF;
    --text-muted: #D1D5DB;
    --border: #E5E7EB;
    --border-light: #F3F4F6;

    /* ── Typography ── */
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* ── Radii ── */
    --radius: 16px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --radius-full: 100px;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.1);

    /* ── Transitions ── */
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: all 0.5s cubic-bezier(0.4,0,0.2,1);

    /* ── Layout ── */
    --max-width: 1440px;
}


/* ═══════════════════════════════════════════════════════════════
   §2  RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    color: var(--text-body);
    line-height: 1.75;
    background-color: var(--white);
    overflow-x: hidden;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: -0.011em;
    position: relative;
}

h1, h2, h3, h4, h5, h6, .logo {
    font-family: var(--font-heading);
    color: var(--text);
    line-height: 1.15;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
}

h4 {
    font-size: 1.15rem;
    font-weight: 700;
}

h5, h6 {
    font-weight: 600;
}

p {
    font-family: var(--font-body);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

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

small {
    font-size: 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════
   §3  COMMON LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 4rem;
}

.text-center {
    text-align: center;
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ═══════════════════════════════════════════════════════════════
   §4  BADGE (pill label)
   ═══════════════════════════════════════════════════════════════ */
.badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--primary-50);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
    text-transform: none;
    border: 1px solid rgba(29,78,216,0.08);
    font-family: var(--font-body);
}


/* ═══════════════════════════════════════════════════════════════
   §5  BUTTONS
   ═══════════════════════════════════════════════════════════════ */

/* ── Green primary CTA — Schedule, Verify, main actions ── */
.btn-primary,
.btn-primary-small {
    display: inline-block;
    background: var(--green);
    color: var(--white);
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: var(--radius-full);
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(16,185,129,0.2);
    border: none;
    cursor: pointer;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    text-transform: none;
    overflow: hidden;
    text-align: center;
}

.btn-primary {
    padding: 1rem 2.25rem;
    font-size: 1rem;
}

.btn-primary-small {
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
}

.btn-primary:hover,
.btn-primary-small:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16,185,129,0.25);
    color: var(--white);
}

.btn-primary:active,
.btn-primary-small:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16,185,129,0.2);
}

/* ── Blue outline secondary CTA — Verify Insurance, Learn More ── */
.btn-secondary {
    display: inline-block;
    padding: 1rem 2.25rem;
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary);
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: var(--radius-full);
    transition: var(--transition);
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    text-transform: none;
    font-size: 1rem;
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29,78,216,0.2);
}

/* ── Text-only link button — "Learn More →" ── */
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.btn-text:hover {
    gap: 10px;
    color: var(--primary-dark);
}

.btn-text::after {
    content: '→';
    transition: var(--transition);
}


/* ═══════════════════════════════════════════════════════════════
   §6  ANIMATIONS & KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}

.slide-up {
    transform: translateY(30px);
}

.fade-in {
    transform: translateY(0);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
                transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

/* Staggered children animation */
.animate-on-scroll.visible:nth-child(2) {
    transition-delay: 0.1s;
}
.animate-on-scroll.visible:nth-child(3) {
    transition-delay: 0.2s;
}
.animate-on-scroll.visible:nth-child(4) {
    transition-delay: 0.3s;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.3); }
    50% { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
}

@keyframes pulse-cta {
    0%, 100% { box-shadow: 0 4px 16px rgba(16,185,129,0.2); }
    50% { box-shadow: 0 4px 24px rgba(16,185,129,0.35); }
}

@keyframes gradient-rotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(-10px, 15px) scale(0.95); }
    75% { transform: translate(-25px, -10px) scale(1.02); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════════════════════════
   §7  TOP INFO BAR
   ═══════════════════════════════════════════════════════════════ */
.top-bar {
    background: var(--secondary);
    padding: 0.5rem 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
}

.top-bar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
}

.top-bar a {
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
}

.top-bar a:hover {
    color: var(--white);
}

.top-bar .top-bar-cta {
    background: var(--primary);
    color: var(--white);
    padding: 0.3rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(29,78,216,0.2);
    transition: var(--transition);
}

.top-bar .top-bar-cta:hover {
    transform: translateY(-1px);
    background: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(29,78,216,0.3);
}


/* ═══════════════════════════════════════════════════════════════
   §8  LANGUAGE SWITCHER
   ═══════════════════════════════════════════════════════════════ */
.lang-switcher {
    position: relative;
    margin-right: auto;
}

.lang-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.lang-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.25);
    color: var(--white);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
    z-index: 1001;
    min-width: 140px;
}

.lang-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    color: var(--text-body);
    font-size: 0.85rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}

.lang-option:hover {
    background: var(--primary-50);
    color: var(--primary);
}

.lang-option.active {
    background: var(--primary-50);
    color: var(--primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §9  MOBILE LANGUAGE SWITCHER
   ═══════════════════════════════════════════════════════════════ */
.mobile-lang-item {
    display: none;
}

@media (max-width: 768px) {
    .mobile-lang-item {
        display: block;
        padding: 0.75rem 0;
        border-top: 1px solid var(--border);
        margin-top: 0.5rem;
    }

    .mobile-lang-switcher {
        padding: 0.5rem 0;
    }

    .mobile-lang-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
        padding-left: 0.5rem;
    }

    .mobile-lang-options {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .mobile-lang-options .lang-option {
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius-full);
        font-size: 0.8rem;
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text-body);
    }

    .mobile-lang-options .lang-option.active {
        background: var(--primary);
        color: var(--white);
        border-color: var(--primary);
        font-weight: 600;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §10  NAVBAR
   ═══════════════════════════════════════════════════════════════ */
.navbar {
    position: fixed;
    top: 36px; /* offset below .top-bar */
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.4s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.4s cubic-bezier(0.4,0,0.2,1),
                border-color 0.4s cubic-bezier(0.4,0,0.2,1),
                top 0.4s cubic-bezier(0.4,0,0.2,1);
    padding: 0;
}

.navbar.scrolled {
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--border);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2rem;
    height: 72px;
}

.logo {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-logo {
    height: 46px;
    width: 46px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    background: var(--white);
    padding: 2px;
}

.navbar.scrolled .nav-logo {
    height: 40px;
    width: 40px;
}

.logo-accent {
    color: var(--primary);
    font-weight: 800;
}

.logo-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    font-family: var(--font-heading);
}

.nav-menu {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    color: var(--text-body);
    position: relative;
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
    transition: color 0.3s;
    white-space: nowrap;
    letter-spacing: -0.01em;
    border-radius: var(--radius-sm);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
    border-radius: 2px;
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: calc(100% - 1.5rem);
}

.nav-link.active {
    color: var(--primary);
    font-weight: 600;
}

/* Hamburger toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    padding: 8px;
}

button.menu-toggle {
    background: none;
    border: none;
}

.menu-toggle .bar {
    width: 22px;
    height: 2px;
    background-color: var(--text);
    border-radius: 2px;
    transition: var(--transition);
}

/* Block mobile — visible on desktop, toggled on mobile */
.block-mobile {
    /* visible by default */
}


/* ═══════════════════════════════════════════════════════════════
   §11  HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    padding-top: 108px; /* top-bar (36px) + navbar (72px) */
    overflow: hidden;
    background: var(--white);
}

/* Two-column split hero container */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    width: 100%;
    flex: 1;
}

/* Right side image container for split hero */
.hero-image-wrapper {
    position: relative;
    overflow: hidden;
}

.hero-image-wrapper .hero-bg {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-image-wrapper img,
.hero-image-wrapper .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(29,78,216,0.10) 0%,
        rgba(29,78,216,0.04) 100%
    );
    pointer-events: none;
    z-index: 2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(15,23,42,0.1) 0%,
        rgba(29,78,216,0.12) 100%
    );
    z-index: 1;
}

/* Subtle radial glow on left content side */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background:
        radial-gradient(600px 400px at 20% 50%, rgba(29,78,216,0.03), transparent 60%);
    z-index: 0;
}

.hero-content {
    max-width: 640px;
    padding: 4rem 4rem 4rem 6%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--secondary);
    font-weight: 800;
}

.hero-content p {
    font-size: 1.15rem;
    color: var(--text-body);
    margin-bottom: 2.5rem;
    line-height: 1.75;
    font-weight: 400;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Hero trust chips */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-50);
    border: 1px solid rgba(29,78,216,0.1);
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}

.hero-chip svg {
    width: 16px;
    height: 16px;
    color: var(--green);
}


/* ── Hero Trust — "⭐ Trusted by Florida Families" ── */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.hero-trust .hero-stars {
    display: flex;
    gap: 2px;
    font-size: 1.1rem;
    line-height: 1;
    color: #FBBF24;
}

.hero-trust span:last-child {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   §12  STAT BAND
   ═══════════════════════════════════════════════════════════════ */
.stat-band {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-dark) 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    border-top: none;
    border-bottom: none;
}

/* Subtle dot-grid texture on stat band */
.stat-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 25%, rgba(59,130,246,0.08) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(59,130,246,0.06) 0%, transparent 50%);
    pointer-events: none;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.stat-item {
    text-align: center;
    padding: 0.75rem 1rem;
}

.stat-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1;
    color: var(--white);
}

.stat-num .suffix {
    color: var(--primary-light);
}

.stat-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    margin-top: 0.6rem;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §13  SECTIONS — General
   ═══════════════════════════════════════════════════════════════ */
.section {
    padding: 120px 0;
    background: var(--white);
}

.section:nth-child(even) {
    background: var(--bg);
}

.section-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
    position: relative;
    color: var(--text);
    font-weight: 700;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-header h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    color: var(--text);
    font-weight: 700;
}

.section-header p {
    color: var(--text-body);
    font-size: 1.125rem;
    line-height: 1.75;
    font-weight: 400;
}

.lead {
    font-size: 1.125rem;
    color: var(--primary);
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════════════════
   §14  ABOUT
   ═══════════════════════════════════════════════════════════════ */
.about {
    padding: 120px 0;
    background-color: var(--white);
    position: relative;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-list {
    list-style: none;
    margin-top: 2rem;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-weight: 500;
    color: var(--text);
    font-size: 1rem;
}

.icon-box {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-sm);
    background: var(--primary-50);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    border: 1px solid rgba(29,78,216,0.08);
}


/* ═══════════════════════════════════════════════════════════════
   §15  GLASS CARD
   ═══════════════════════════════════════════════════════════════ */
.glass-card {
    background: var(--primary-50);
    border: 1px solid var(--border);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.glass-card:hover {
    border-color: rgba(29,78,216,0.15);
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.glass-card h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin-bottom: 1rem;
    color: var(--text);
}

.gradient-line {
    height: 3px;
    width: 48px;
    background: var(--primary);
    margin-top: 1.5rem;
    border-radius: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   §16  SERVICES
   ═══════════════════════════════════════════════════════════════ */
.services {
    padding: 120px 0;
    background: var(--bg);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(29,78,216,0.15);
}

.service-image-container {
    height: 220px;
    overflow: hidden;
}

.service-image,
.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.service-card:hover .service-image,
.service-card:hover .service-img {
    transform: scale(1.04);
}

.service-content {
    padding: 2rem 2rem 2.5rem;
    flex-grow: 1;
}

.single-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2.5rem 2rem;
    background: var(--bg);
}

.service-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--primary-50);
    border: 1px solid rgba(29,78,216,0.08);
    border-radius: var(--radius-sm);
    color: var(--primary);
    line-height: 1;
}

.service-card h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    margin-bottom: 0.75rem;
    color: var(--text);
    font-weight: 700;
}

.service-card p {
    color: var(--text-body);
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §17  PROCESS TIMELINE (Card Grid)
   ═══════════════════════════════════════════════════════════════ */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    counter-reset: step;
    position: relative;
}

.process-step {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--shadow-sm);
}

.process-step:hover {
    transform: translateY(-6px);
    border-color: rgba(29,78,216,0.15);
    box-shadow: var(--shadow-lg);
}

.step-number,
.process-step .step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--white);
    background: var(--primary);
    box-shadow: 0 4px 12px rgba(29,78,216,0.2);
    margin-bottom: 1.25rem;
}

.step-connector {
    position: absolute;
    top: 50%;
    right: -24px;
    width: 24px;
    height: 2px;
    background: var(--border);
}

.process-step:last-child .step-connector {
    display: none;
}

.process-step h4 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.process-step p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.75;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §18  TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(29,78,216,0.15);
}

.testimonial-text {
    color: var(--text-body);
    font-size: 1rem;
    line-height: 1.75;
    flex-grow: 1;
    font-style: italic;
    font-weight: 400;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.star-rating {
    color: var(--primary);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-size: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   §19  TEAM
   ═══════════════════════════════════════════════════════════════ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.team-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(29,78,216,0.15);
}

.team-photo {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center top;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100);
    font-size: 4.5rem;
    color: var(--primary);
}

.team-info {
    padding: 2rem;
}

.team-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.team-role {
    font-size: 0.88rem;
    color: var(--primary);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.team-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
}

.team-link:hover {
    gap: 8px;
    color: var(--primary-dark);
}


/* ═══════════════════════════════════════════════════════════════
   §20  INSURANCE
   ═══════════════════════════════════════════════════════════════ */
.insurance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}

.insurance-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    padding: 1rem 1.5rem;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--border);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
    text-align: center;
}

.insurance-logo:hover {
    transform: translateY(-6px);
    border-color: rgba(29,78,216,0.15);
    box-shadow: var(--shadow-lg);
    color: var(--primary);
}

.insurance-logo img {
    max-height: 30px;
    max-width: 132px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: var(--transition);
}

.insurance-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* Insurance credentialing badge */
.insurance-coming-soon {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--primary-50);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid rgba(29,78,216,0.12);
    margin-top: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════
   §21  FAQ
   ═══════════════════════════════════════════════════════════════ */
.faq-section {
    padding: 120px 0;
    background: var(--bg);
}

.faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
    transition: var(--transition);
}

.faq-item:first-child {
    border-top: 1px solid var(--border);
}

.faq-item:hover {
    background: var(--primary-50);
}

.faq-question {
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
    font-size: 1.1rem;
    transition: var(--transition);
    gap: 1rem;
}

.faq-question:hover {
    color: var(--primary);
}

.faq-toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    color: var(--primary);
}

.faq-item.active .faq-toggle {
    background: var(--primary);
    color: var(--white);
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 0 1.5rem;
    color: var(--text-body);
    line-height: 1.75;
    font-weight: 400;
    font-size: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   §22  CONTACT
   ═══════════════════════════════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.contact-info {
    padding: 4rem;
    color: var(--white);
    position: relative;
    background: linear-gradient(160deg, var(--secondary) 0%, var(--primary-dark) 100%);
}

.contact-info::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse"><circle fill="rgba(59,130,246,0.06)" cx="12" cy="12" r="1"></circle></pattern></defs><rect x="0" y="0" width="100%" height="100%" fill="url(%23dots)"></rect></svg>');
    pointer-events: none;
}

.contact-info h2 {
    color: var(--white);
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    margin-bottom: 1rem;
    position: relative;
}

.contact-info p {
    color: rgba(255,255,255,0.7);
    margin-bottom: 3rem;
    font-size: 1.05rem;
    position: relative;
    font-weight: 400;
}

.contact-form {
    padding: 4rem;
    background: var(--white);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
    letter-spacing: -0.01em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.85rem 1.15rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition);
    background: var(--bg);
    color: var(--text);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(29,78,216,0.08);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}


/* ═══════════════════════════════════════════════════════════════
   §23  PAGE HEADER (interior pages)
   ═══════════════════════════════════════════════════════════════ */
.page-header {
    margin-top: 90px;
    padding: 5rem 0 4rem;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: orb-drift 15s ease-in-out infinite;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: orb-drift 20s ease-in-out infinite reverse;
}

.page-header h1 {
    color: var(--white);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
    position: relative;
    font-weight: 800;
}

.page-header p {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.75);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    line-height: 1.75;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §24  MAP
   ═══════════════════════════════════════════════════════════════ */
.map-wrapper {
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    border-bottom: none;
}

.map-wrapper iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
    filter: saturate(0.85) contrast(1.05);
}

.map-section {
    padding: 0;
    background: var(--bg);
}


/* ═══════════════════════════════════════════════════════════════
   §25  CTA SECTION
   ═══════════════════════════════════════════════════════════════ */
.cta-section {
    padding: 120px 0;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-section h2 {
    color: var(--white);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.cta-section p {
    color: rgba(255,255,255,0.75);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    font-weight: 400;
    z-index: 1;
    font-size: 1.125rem;
}

/* Green CTA button inside dark CTA section */
.cta-section .btn-primary {
    background: var(--green);
    box-shadow: 0 4px 16px rgba(16,185,129,0.3);
    position: relative;
    z-index: 1;
}

.cta-section .btn-primary:hover {
    background: var(--green-dark);
    box-shadow: 0 8px 28px rgba(16,185,129,0.35);
}

/* Checkmark row inside CTA section */
.cta-checks {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.cta-checks span {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* ═══════════════════════════════════════════════════════════════
   §26  FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
    background: var(--secondary);
    padding: 5rem 0 2.5rem;
    color: rgba(255,255,255,0.5);
    border-top: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
    text-align: left;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.footer-logo-img {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: var(--white);
    padding: 3px;
}

.footer-logo-text {
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 1rem;
}

.footer-col h4 {
    color: rgba(255,255,255,0.9);
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: rgba(255,255,255,0.45);
    transition: var(--transition);
    font-size: 0.9rem;
    font-weight: 400;
}

.footer-links a:hover {
    color: var(--white);
    padding-left: 4px;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 2rem;
    margin-top: 1rem;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

/* Footer social icons */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}

.footer-social svg {
    width: 16px;
    height: 16px;
}

/* HIPAA / compliance badge in footer */
.footer-hipaa,
.footer-compliance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
    padding: 0.6rem 1.25rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   §27  PROFILE / DETAIL
   ═══════════════════════════════════════════════════════════════ */
.profile-role {
    font-size: 1.05rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.profile-schedule {
    font-size: 0.95rem;
    color: var(--text-body);
    margin-bottom: 1rem;
    font-weight: 400;
}

.detail-label {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.detail-value {
    font-size: 1rem;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   §28  SKIP LINK (A11Y)
   ═══════════════════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-200%);
    top: 8px;
    z-index: 10002;
    background: var(--text);
    color: var(--white);
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 0.25s ease;
}

.skip-link:focus {
    transform: translateX(-50%) translateY(0);
    outline: 3px solid rgba(29,78,216,0.5);
}


/* ═══════════════════════════════════════════════════════════════
   §29  ACCESSIBLE FOCUS RING
   ═══════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.faq-question:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(29,78,216,0.4);
    outline-offset: 2px;
    border-radius: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   §30  SELECTION & SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */
::selection {
    background: rgba(29,78,216,0.12);
    color: var(--text);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(29,78,216,0.18);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(29,78,216,0.32);
}


/* ═══════════════════════════════════════════════════════════════
   §31  FLOATING CTA
   ═══════════════════════════════════════════════════════════════ */
.floating-cta {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.floating-cta a,
.floating-cta .float-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.3rem;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

/* Phone / call button — blue */
.floating-cta a:first-child,
.floating-cta .call-btn {
    background: var(--primary);
    animation: pulse-glow 3s ease-in-out infinite;
}

/* WhatsApp button — green */
.floating-cta a:last-child,
.floating-cta .whatsapp {
    background: #25D366;
    animation: pulse-glow 3s ease-in-out 1.5s infinite;
}

.floating-cta a:hover,
.floating-cta .float-btn:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: var(--shadow-xl);
    animation: none;
}

.floating-cta svg {
    width: 22px;
    height: 22px;
    color: currentColor;
}


/* ═══════════════════════════════════════════════════════════════
   §32  MEGA MENU
   ═══════════════════════════════════════════════════════════════ */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    padding: 2rem;
    min-width: 600px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1001;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.mega-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu a {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    color: var(--text);
    font-weight: 500;
    font-size: 0.9rem;
}

.mega-menu a:hover {
    background: var(--primary-50);
    color: var(--primary);
}

.mega-menu a span {
    display: block;
    font-size: 0.82rem;
    color: var(--text-light);
    font-weight: 400;
    margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   §33  TIMELINE (Horizontal)
   ═══════════════════════════════════════════════════════════════ */
.timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    padding: 2rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 3.5rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.timeline-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 1rem;
}

.timeline-step::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    margin: 0 auto 1.25rem;
    box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--primary);
}

.timeline-step h4 {
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.timeline-step p {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.65;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §34  APPROACH GRID
   ═══════════════════════════════════════════════════════════════ */
.approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.approach-step {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.approach-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(29,78,216,0.15);
}

.approach-step h4 {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.approach-step p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.75;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §35  STICKY MOBILE CTA
   ═══════════════════════════════════════════════════════════════ */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: none;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: rgba(15,23,42,0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.sticky-cta a {
    flex: 1;
    text-align: center;
    padding: 0.85rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.92rem;
}

.sticky-cta .sc-call {
    background: rgba(255,255,255,0.08);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.15);
}

.sticky-cta .sc-go {
    background: var(--green);
    color: var(--white);
}


/* ═══════════════════════════════════════════════════════════════
   §36  ACCREDITATION STRIP
   ═══════════════════════════════════════════════════════════════ */
.accred-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.accred {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.7rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.accred:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(29,78,216,0.12);
}

.accred i,
.accred svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}


/* ═══════════════════════════════════════════════════════════════
   §37  CREDENTIALS / WHY STRIP
   ═══════════════════════════════════════════════════════════════ */
.cred-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cred-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--shadow-sm);
}

.cred-card:hover {
    transform: translateY(-6px);
    border-color: rgba(29,78,216,0.15);
    box-shadow: var(--shadow-lg);
}

.cred-ico {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: var(--primary-50);
    border: 1px solid rgba(29,78,216,0.08);
    color: var(--primary);
}

.cred-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
    color: var(--text);
}

.cred-card p {
    font-size: 0.92rem;
    color: var(--text-body);
    line-height: 1.65;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §38  TESTIMONIALS (Legacy tst-*)
   ═══════════════════════════════════════════════════════════════ */
.tst-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tst-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
}

.tst-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(29,78,216,0.15);
}

.tst-stars {
    color: var(--primary);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.tst-quote {
    color: var(--text-body);
    font-size: 1rem;
    line-height: 1.75;
    flex-grow: 1;
    font-weight: 400;
}

.tst-author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.tst-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--white);
    background: var(--primary);
}

.tst-name {
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
}

.tst-role {
    font-size: 0.78rem;
    color: var(--text-light);
    font-family: var(--font-body);
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §39  INSURANCE CHIPS (Legacy ins-*)
   ═══════════════════════════════════════════════════════════════ */
.ins-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    min-height: 78px;
    padding: 1rem 1.75rem;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--border);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.ins-chip:hover {
    transform: translateY(-6px);
    border-color: rgba(29,78,216,0.15);
    box-shadow: var(--shadow-lg);
}

.ins-name {
    font-weight: 700;
    color: var(--text);
    font-size: 0.98rem;
    letter-spacing: -0.2px;
    font-family: var(--font-body);
}

.ins-chip:hover .ins-name {
    color: var(--primary);
}

.ins-logo-img {
    display: none;
    max-height: 30px;
    max-width: 132px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    transition: var(--transition);
}

.ins-chip:hover .ins-logo-img {
    filter: grayscale(0);
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════
   §40  TRUST BAR
   ═══════════════════════════════════════════════════════════════ */
.trust-mini {
    color: rgba(255,255,255,0.6) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §41  TRUST GRID — "Why Choose Us"
   ═══════════════════════════════════════════════════════════════ */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    background: var(--white);
    border: 1px solid var(--border-light);
}

.trust-item:hover {
    background: var(--primary-50);
    border-color: rgba(29,78,216,0.12);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.trust-item > span:first-child {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 2px;
}

.trust-item h4 {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.trust-item p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.65;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   §42  TIPS & RESOURCES
   ═══════════════════════════════════════════════════════════════ */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tip-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.25rem 2rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    flex-direction: column;
}

.tip-card:hover {
    transform: translateY(-6px);
    border-color: rgba(29,78,216,0.15);
    box-shadow: var(--shadow-lg);
}

.tip-ico {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    background: var(--primary-50);
    border: 1px solid rgba(29,78,216,0.08);
    color: var(--primary);
}

.tip-card h4 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.tip-card > p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.65;
    margin-bottom: 1.25rem;
    font-weight: 400;
}

.tip-links {
    list-style: none;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tip-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

.tip-links li:last-child a {
    border-bottom: none;
    padding-bottom: 0;
}

.tip-links a::before {
    content: '›';
    color: var(--primary);
    font-weight: 700;
    transition: var(--transition);
}

.tip-links a:hover {
    color: var(--primary);
}

.tip-links a:hover::before {
    transform: translateX(3px);
}


/* ═══════════════════════════════════════════════════════════════
   §43  DUAL CTA / HIRING
   ═══════════════════════════════════════════════════════════════ */
.cta-hiring {
    margin-top: 1.75rem;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.7);
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.cta-hiring a {
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

.cta-hiring a:hover {
    color: var(--white);
}


/* ═══════════════════════════════════════════════════════════════
   §44  CONTACT EXTRAS
   ═══════════════════════════════════════════════════════════════ */
.glass-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.contact-form-container {
    padding: 4rem;
    background: var(--white);
}

.contact-section {
    padding: 120px 0;
    background: var(--bg);
}

.info-block {
    margin-bottom: 2rem;
    position: relative;
}

.info-block h4 {
    color: var(--primary-light);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}

.info-block p,
.info-block a {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 400;
}

.info-block a:hover {
    color: var(--white);
}

.info-item {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    color: rgba(255,255,255,0.8);
    font-weight: 400;
}

.btn-submit {
    width: 100%;
    padding: 1rem;
    background: var(--green);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: -0.01em;
    font-family: var(--font-body);
}

.btn-submit:hover {
    box-shadow: 0 8px 24px rgba(16,185,129,0.25);
    transform: translateY(-2px);
    background: var(--green-dark);
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1.25rem;
    color: var(--primary);
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition);
}

.btn-link:hover {
    color: var(--primary-dark);
    gap: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   §45  UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

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

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §46  RESPONSIVE — 1200px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .container {
        max-width: 1040px;
        padding: 0 3rem;
    }

    .nav-container {
        padding: 0 3rem;
    }

    .top-bar-inner {
        padding: 0 3rem;
    }

    .mega-menu {
        min-width: 500px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section {
        padding: 100px 0;
    }

    .about,
    .services {
        padding: 100px 0;
    }

    .cta-section,
    .faq-section,
    .contact-section {
        padding: 100px 0;
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §47  RESPONSIVE — 1024px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .about-grid,
    .glass-panel,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .nav-container {
        flex-wrap: wrap;
    }

    .approach-grid {
        grid-template-columns: 1fr 1fr;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero split stacks vertically */
    .hero-split {
        grid-template-columns: 1fr;
    }

    .hero,
    .hero-split {
        min-height: auto;
    }

    .hero-image-wrapper {
        min-height: 50vh;
    }

    .hero-content {
        padding: 8rem 4rem 4rem;
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: clamp(2.25rem, 5vw, 3rem);
    }

    .mega-menu {
        min-width: 100%;
        left: 0;
        transform: translateY(-8px);
    }

    .mega-menu.active {
        transform: translateY(0);
    }

    .trust-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .section {
        padding: 100px 0;
    }

    .about,
    .services {
        padding: 100px 0;
    }

    .cta-section,
    .faq-section,
    .contact-section {
        padding: 100px 0;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §48  RESPONSIVE — 900px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hero-content {
        margin-left: 0;
        text-align: center;
        margin: 0 auto;
        padding: 6rem 2rem 3rem;
        max-width: 90%;
    }

    .hero-overlay {
        background: linear-gradient(
            135deg,
            rgba(15,23,42,0.8) 0%,
            rgba(29,78,216,0.65) 100%
        );
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-chips {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
    }

    .hero-content h1 {
        font-size: clamp(2rem, 5vw, 2.75rem);
    }

    .section-title,
    .section-header h2 {
        font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    }

    .page-header h1 {
        font-size: clamp(1.75rem, 4vw, 2.25rem);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr 1fr;
    }

    .step-connector {
        display: none;
    }

    .cred-grid {
        grid-template-columns: 1fr;
    }

    .tst-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .tips-grid {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .timeline {
        flex-direction: column;
        align-items: stretch;
    }

    .timeline::before {
        top: 0;
        bottom: 0;
        left: 1rem;
        right: auto;
        width: 2px;
        height: 100%;
    }

    .timeline-step {
        text-align: left;
        padding-left: 3rem;
        padding-bottom: 2rem;
    }

    .timeline-step::before {
        position: absolute;
        left: 0.25rem;
        top: 0;
        margin: 0;
    }

    .approach-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 80px 0;
    }

    .about,
    .services {
        padding: 80px 0;
    }

    .cta-section,
    .faq-section,
    .contact-section {
        padding: 80px 0;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §49  RESPONSIVE — 768px (Mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body {
        font-size: 1rem;
        padding-bottom: 72px;
    }

    .container {
        padding: 0 1.5rem;
    }

    .nav-container {
        padding: 0 1.5rem;
    }

    .menu-toggle {
        display: flex;
    }

    /* Full-screen mobile menu overlay */
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: var(--white);
        flex-direction: column;
        padding: 6rem 2rem 2rem;
        transition: 0.4s cubic-bezier(0.4,0,0.2,1);
        box-shadow: none;
        border-top: none;
        gap: 0.5rem;
        opacity: 0;
        visibility: hidden;
        z-index: 999;
        justify-content: flex-start;
        align-items: center;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
    }

    .nav-menu .nav-link {
        font-size: 1.25rem;
        padding: 0.75rem 1rem;
        width: 100%;
        text-align: center;
    }

    .nav-menu .btn-primary {
        margin-top: auto;
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    .contact-info,
    .contact-form-container,
    .contact-form {
        padding: 2.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-col[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .sticky-cta {
        display: flex;
    }

    .floating-cta {
        bottom: 5rem;
        right: 1rem;
    }

    .floating-cta a,
    .floating-cta .float-btn {
        width: 48px;
        height: 48px;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .insurance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mega-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0.5rem 0 0.5rem 1rem;
        min-width: auto;
        grid-template-columns: 1fr;
        gap: 0;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .mega-menu.active {
        display: grid;
        transform: none;
    }

    .block-mobile {
        display: block;
        width: 100%;
        text-align: center;
    }

    .section {
        padding: 72px 0;
    }

    .about,
    .services {
        padding: 72px 0;
    }

    .cta-section,
    .faq-section,
    .contact-section {
        padding: 72px 0;
    }

    .section-header {
        margin: 0 auto 3rem;
    }

    .hero-trust {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §50  RESPONSIVE — 560px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    .process-grid {
        grid-template-columns: 1fr;
    }

    .cta-checks {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §51  RESPONSIVE — 480px (Small Mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    body {
        font-size: 1rem;
    }

    .container {
        padding: 0 1.25rem;
    }

    .hero-content h1 {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .section {
        padding: 64px 0;
    }

    .about,
    .services {
        padding: 64px 0;
    }

    .cta-section,
    .faq-section,
    .contact-section {
        padding: 64px 0;
    }

    .glass-card {
        padding: 2rem;
    }

    .contact-info,
    .contact-form-container,
    .contact-form {
        padding: 2rem;
    }

    .page-header {
        padding: 4rem 0 3rem;
    }

    .page-header h1 {
        font-size: clamp(1.5rem, 6vw, 1.8rem);
    }

    .section-title,
    .section-header h2 {
        font-size: clamp(1.5rem, 5vw, 1.75rem);
    }

    .stat-num {
        font-size: clamp(2rem, 6vw, 2.5rem);
    }

    .insurance-grid {
        grid-template-columns: 1fr;
    }

    .floating-cta a,
    .floating-cta .float-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .stat-band {
        padding: 3.5rem 0;
    }

    .hero {
        min-height: 80vh;
    }

    .hero-split {
        min-height: 80vh;
    }

    .trust-grid {
        gap: 0.75rem;
    }

    .btn-primary {
        padding: 0.85rem 1.75rem;
        font-size: 0.95rem;
    }

    .btn-secondary {
        padding: 0.85rem 1.75rem;
        font-size: 0.95rem;
    }

    .faq-question {
        font-size: 1rem;
    }

    .hero-content {
        padding: 5rem 1.5rem 2.5rem;
    }

    .service-content {
        padding: 1.5rem;
    }

    .team-info {
        padding: 1.5rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   §52  PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */
@media print {
    .navbar,
    .top-bar,
    .floating-cta,
    .sticky-cta,
    .skip-link {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
    }

    .section {
        padding: 2rem 0;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   §COMPAT — legacy variable aliases (pre-v8 pages keep working)
   ═══════════════════════════════════════════════════════════════ */
:root {
    --blue: #1D4ED8; --blue-600: #1E3A8A; --blue-50: #EFF6FF;
    --mint: #10B981; --mint-50: #ECFDF5;
    --sun: #F59E0B;  --sun-50: #FEF3C7;
    --ink: #0F172A;  --ink-2: #1E293B;
    --mist: #F8FAFC; --bg-light: #F8FAFC; --bg-warm: #EFF6FF;
    --accent: #1D4ED8; --accent-light: #3B82F6; --accent-warm: #1D4ED8;
    --text-dark: #111827;
    --teal: #1D4ED8; --teal-600: #1E3A8A; --teal-50: #EFF6FF;
    --grad-blue: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    --grad-teal: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    --border-strong: #D1D5DB;
    --radius-md: 16px; --radius-xl: 24px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
    --shadow-float: 0 24px 64px rgba(0,0,0,0.12);
    --glow-gold: 0 0 0 rgba(0,0,0,0);
    --font-display: 'Manrope', sans-serif; --font-ui: 'Manrope', sans-serif;
    --success: #10B981;
}

/* ═══════════════════════════════════════════════════════════════
   §NEWS / COMMUNITY / TEAM MODULE (public pages + home strip)
   ═══════════════════════════════════════════════════════════════ */
.nw-controls { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:2rem; }
.nw-search { flex:1; min-width:240px; padding:0.85rem 1.1rem; border:1.5px solid var(--border); border-radius: var(--radius-full); font:inherit; font-size:0.95rem; background:#fff; color:var(--text); }
.nw-search:focus { outline:none; border-color: var(--primary); box-shadow:0 0 0 4px var(--primary-50); }
.nw-chips { display:flex; gap:0.5rem; flex-wrap:wrap; }
.nw-chip { border:1.5px solid var(--border); background:#fff; color:var(--text-body); padding:0.5rem 1rem; border-radius: var(--radius-full); font-size:0.85rem; font-weight:600; cursor:pointer; transition:var(--transition); text-decoration:none; display:inline-block; }
.nw-chip:hover { border-color: var(--primary); color: var(--primary); }
.nw-chip.active { background: var(--primary); border-color: var(--primary); color:#fff; }

.nw-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.nw-grid-3 { grid-template-columns:repeat(3,1fr); }
.nw-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; text-decoration:none; box-shadow: var(--shadow-sm); transition: var(--transition); }
.nw-card:hover { transform:translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-100); }
.nw-cover { height:180px; overflow:hidden; background: var(--primary-50); }
.nw-cover img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.nw-card:hover .nw-cover img { transform:scale(1.05); }
.nw-cover-ph { display:flex; align-items:center; justify-content:center; font-size:2.5rem; opacity:0.5; }
.nw-body { padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.nw-meta { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.nw-cat { font-size:0.72rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--primary); background:var(--primary-50); padding:0.25rem 0.7rem; border-radius:var(--radius-full); }
.nw-pin { font-size:0.72rem; font-weight:700; color:#854F0B; background:#FEF3C7; padding:0.25rem 0.7rem; border-radius:var(--radius-full); }
.nw-card h3 { font-family:var(--font-heading); font-size:1.15rem; line-height:1.35; color:var(--text); margin:0.25rem 0 0; }
.nw-card p { font-size:0.9rem; color:var(--text-body); line-height:1.65; flex:1; }
.nw-foot { display:flex; justify-content:space-between; gap:1rem; font-size:0.78rem; color:var(--text-light); margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid var(--border-light); }
.nw-empty { text-align:center; padding:3rem 1rem; color:var(--text-light); }
.nw-empty span { font-size:2.5rem; display:block; margin-bottom:0.75rem; }

/* single article */
.art-cover { border-radius: var(--radius-lg); overflow:hidden; margin-bottom:2rem; box-shadow: var(--shadow-md); }
.art-cover img { width:100%; max-height:420px; object-fit:cover; display:block; }
.art-head h1 { font-family:var(--font-heading); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.2; margin:0.75rem 0 0.5rem; color:var(--text); }
.art-byline { color:var(--text-light); font-size:0.9rem; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
.article-body { font-size:1.05rem; line-height:1.85; color:var(--text-body); }
.article-body h2 { font-family:var(--font-heading); font-size:1.5rem; color:var(--text); margin:2rem 0 0.75rem; }
.article-body h3 { font-family:var(--font-heading); font-size:1.2rem; color:var(--text); margin:1.5rem 0 0.5rem; }
.article-body p { margin:0.9rem 0; }
.article-body ul, .article-body ol { margin:0.9rem 0 0.9rem 1.5rem; }
.article-body li { margin:0.4rem 0; }
.article-body blockquote { border-left:3px solid var(--primary); background:var(--primary-50); padding:0.75rem 1.25rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:1.25rem 0; }
.article-body img { max-width:100%; border-radius: var(--radius-sm); margin:1rem 0; box-shadow: var(--shadow-md); }
.article-body a { color: var(--primary); font-weight:600; }
.article-body hr { border:none; border-top:1px solid var(--border); margin:2rem 0; }
.art-share { display:flex; gap:0.6rem; flex-wrap:wrap; margin:2.5rem 0 0; padding-top:1.5rem; border-top:1px solid var(--border); }
.art-related { margin-top:3rem; }
.art-related h2 { font-family:var(--font-heading); font-size:1.3rem; margin-bottom:1.25rem; }
.nw-card-sm .nw-cover { height:120px; }
.nw-card-sm h3 { font-size:1rem; }

/* community feed */
.fd-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding:1.4rem 1.5rem; margin-bottom:1.25rem; }
.fd-head { display:flex; gap:0.8rem; align-items:center; margin-bottom:1rem; }
.fd-avatar { width:46px; height:46px; border-radius:12px; object-fit:cover; border:1px solid var(--border); background:#fff; }
.fd-name { font-weight:700; color:var(--text); font-size:0.95rem; font-family:var(--font-heading); }
.fd-date { font-size:0.78rem; color:var(--text-light); }
.fd-text { color:var(--text-body); line-height:1.75; font-size:0.98rem; word-wrap:break-word; }
.fd-photos { display:grid; gap:0.5rem; margin-top:1rem; border-radius: var(--radius-sm); overflow:hidden; }
.fd-photos img { width:100%; height:100%; object-fit:cover; display:block; max-height:420px; }
.fd-n2, .fd-n4 { grid-template-columns:1fr 1fr; }
.fd-n3 { grid-template-columns:1fr 1fr 1fr; }
.fd-actions { display:flex; gap:0.6rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-light); }
.fd-like, .fd-share { border:1.5px solid var(--border); background:#fff; border-radius: var(--radius-full); padding:0.45rem 1rem; font-size:0.85rem; font-weight:600; color:var(--text-body); cursor:pointer; transition: var(--transition); }
.fd-like:hover, .fd-share:hover { border-color: var(--primary); color: var(--primary); }
.fd-like.liked { background:#FCE8F0; border-color:#D4537E; color:#992D56; }
.fd-like .hh { font-size:1rem; }
.fd-followup { text-align:center; background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:2.5rem 2rem; margin-top:2.5rem; box-shadow: var(--shadow-sm); }
.fd-followup h3 { font-family:var(--font-heading); font-size:1.3rem; margin-bottom:0.5rem; }
.fd-followup p { color:var(--text-body); max-width:480px; margin:0 auto; }

/* modal (team bios) */
.aimh-modal-ov { position:fixed; inset:0; background:rgba(15,23,42,0.55); z-index:1200; display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.aimh-modal { background:#fff; border-radius: var(--radius-lg); padding:2.25rem; max-width:520px; width:100%; position:relative; box-shadow: var(--shadow-xl); }
.aimh-modal h3 { font-family:var(--font-heading); font-size:1.35rem; margin-bottom:0.25rem; }
.aimh-modal-x { position:absolute; top:0.9rem; right:0.9rem; border:none; background:var(--bg); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:0.9rem; color:var(--text-body); }

@media (max-width: 900px) { .nw-grid-3 { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════
   §99  AIMH THEME 2026 — brand artwork background (navy · teal · icy)
   ═══════════════════════════════════════════════════════════════ */
:root {
    --primary: #1E4290;
    --primary-dark: #16336E;
    --primary-light: #3B6BC9;
    --primary-50: #EDF3FA;
    --primary-100: #DCE8F5;
    --secondary: #142E63;
    --bg: rgba(238,244,249,0.35);      /* translucent so the artwork shows through */
    --bg-solid: #EEF4F9;
    --teal: #4F8E8A;
    --teal-dark: #3E7571;
    --teal-light: #A9CCC9;
    --green: #3E8580;                  /* CTAs teal to match brand */
    --green-dark: #316B67;
    --green-50: #EAF4F3;
    --lavender: #DCD6EC;
}

/* The actual brand artwork as a fixed, full-viewport canvas */
body {
    background: #EEF4F9 url('../assets/images/brand-bg.jpg') center / cover no-repeat fixed;
}
@media (max-width: 768px) {
    body { background-attachment: scroll; }
}

/* Interior page headers: navy gradient + wave into the artwork */
.page-header {
    background: linear-gradient(150deg, #142E63 0%, #1E4290 55%, #2A55A8 100%);
}
.page-header::before {
    top: auto; right: 0; left: 0; bottom: -1px; width: 100%; height: 64px;
    border-radius: 0; animation: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,72 C240,128 480,8 760,44 C1040,80 1240,116 1440,60 L1440,120 L0,120 Z' fill='%234F8E8A' opacity='0.55'/%3E%3Cpath d='M0,88 C260,140 520,24 780,56 C1060,92 1260,124 1440,76 L1440,120 L0,120 Z' fill='%23EEF4F9' fill-opacity='0.92'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.page-header::after {
    top: -60%; left: auto; right: -15%; width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(169,204,201,0.28) 0%, transparent 70%);
}

/* Footer: deep navy (continues the bottom-right navy wave of the artwork) */
.footer {
    background: linear-gradient(165deg, #16336E 0%, #122A5C 60%, #0F2450 100%);
    position: relative;
    overflow: visible;
    margin-top: 64px;
}
.footer::before {
    content: '';
    position: absolute;
    top: -63px; left: 0; width: 100%; height: 64px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C280,116 560,4 840,40 C1120,76 1300,110 1440,56 L1440,120 L0,120 Z' fill='%234F8E8A' opacity='0.5'/%3E%3Cpath d='M0,78 C300,128 600,20 880,52 C1160,84 1320,116 1440,72 L1440,120 L0,120 Z' fill='%2316336E'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

/* Let the artwork read through: hero + white sections become translucent */
.hero { background: transparent; }
section[style*="background: var(--white)"], section[style*="background:var(--white)"] { background: rgba(255,255,255,0.55) !important; }

/* Cards & panels: crisp frosted white so text stays readable */
.glass-panel, .adm-card, .pol, .sp-card, .service-card, .info-card, .value-card, .team-card, .faq-item, .contact-form-container {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
}

/* Navbar: frosted so the artwork peeks through at the top */
.navbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); }

a { color: var(--primary); }
.footer a, .top-bar a { color: inherit; }
.navbar a:not([class*="btn"]) { color: inherit; }
/* Buttons must never inherit surrounding text color */
.btn-primary, .btn-primary-small, .btn-primary:hover, .btn-primary-small:hover { color: var(--white); }

/* Skip-link: fixed to viewport so body offset (margin collapse) can't reveal it */
.skip-link { position: fixed; }

/* Step icon tiles — icono estético con chip de número (usable en todo el sitio) */
.stp-wrap { position: relative; width: 76px; margin: 0 auto 1.1rem; }
.stp-ico { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; border-radius: 24px; background: linear-gradient(135deg, var(--primary-50, #EDF3FA), #DCEBE9); border: 1px solid var(--primary-100, #DCE8F5); box-shadow: 0 10px 26px rgba(22,51,110,0.10); }
.stp-num { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary, #1E4290), var(--primary-light, #3B6BC9)); color: #fff; font-weight: 800; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(22,51,110,0.25); }

/* Team cards: foto completa (contenedor cuadrado = misma proporción que el retrato) */
.team-photo { height: auto; aspect-ratio: 1 / 1; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Emails en botones: nunca cortados — se envuelven en varias líneas */
a.btn-primary[href^="mailto:"], a.btn-secondary[href^="mailto:"], a.btn-primary-small[href^="mailto:"], .btn-primary[href^="mailto:"] {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-height: 1.45;
    max-width: 100%;
    text-align: center;
}

/* FAQ: fondo transparente — el wallpaper de marca se ve detrás del texto */
.faq-item, .faq-question, .faq-answer { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; }
.faq-item { border-bottom: 1px solid rgba(22,51,110,0.12); }

/* Hero: entrada en cascada estilo Apple + flotado sutil de la imagen */
@keyframes aimhFadeUp { from { opacity:0; transform:translateY(26px); filter:blur(6px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes aimhFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.hero-content .badge, .hero-content h1, .hero-content > p, .hero-content .hero-buttons, .hero-content .hero-trust {
    animation: aimhFadeUp .85s cubic-bezier(.22,1,.36,1) both;
}
.hero-content .badge { animation-delay:.05s; } .hero-content h1 { animation-delay:.15s; }
.hero-content > p { animation-delay:.28s; } .hero-content .hero-buttons { animation-delay:.4s; }
.hero-content .hero-trust { animation-delay:.52s; }
.hero-image { animation: aimhFloat 7s ease-in-out 1.2s infinite; }

/* Micro-interacciones: iconos que saltan al pasar el mouse */
.service-icon, .area-icon, .stp-ico, .hiw-ico { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.service-card:hover .service-icon, .area-card:hover .area-icon { transform: translateY(-6px) scale(1.12) rotate(-3deg); }

/* Tarjetas con elevación suave y borde teal al hover */
.service-card, .area-card, .team-card, .nw-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s; }
.service-card:hover, .team-card:hover { transform: translateY(-7px); box-shadow: 0 18px 44px rgba(22,51,110,.14); border-color: var(--teal-light,#A9CCC9); }

@media (prefers-reduced-motion: reduce) {
    .hero-content .badge, .hero-content h1, .hero-content > p, .hero-content .hero-buttons, .hero-content .hero-trust, .hero-image { animation: none !important; }
}

/* Badges premium: pastilla blanca con icono, borde degradado y sombra suave */
.section-header .badge, .page-header .badge {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.92) !important;
    color: var(--primary, #1E4290) !important;
    border: 1px solid var(--primary-100, #DCE8F5);
    box-shadow: 0 6px 18px rgba(22,51,110,.10);
    padding: .55rem 1.2rem; border-radius: 999px;
    font-weight: 700; letter-spacing: .4px;
    backdrop-filter: blur(6px);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.section-header .badge:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 28px rgba(22,51,110,.16); }

/* Emails y URLs siempre completos: nunca truncados en ningún lugar del sitio */
a[href^="mailto:"] { overflow-wrap: anywhere; word-break: normal; hyphens: none; }
/* Los correos escritos en negrita sin ser enlace (compliance@americaninstitute…)
   no tienen punto de corte y desbordaban la pantalla en móvil. */
b, strong { overflow-wrap: anywhere; }
/* Y también en texto corrido: en policies.html el correo iba suelto dentro de un <p>.
   break-word solo parte cuando la palabra por sí sola no cabe en la línea. */
p, li, dd, td { overflow-wrap: break-word; }
.legal-content p, .legal-content li, .sc-card p, .sc-card li { overflow-wrap: anywhere; }

/* Home: los 4 líderes en una fila */
#home-team { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Pill de Instagram profesional — bonita, con el degradado de IG */
.team-ig-pill {
    display: inline-flex; align-items: center; gap: .38rem;
    margin-top: .65rem; padding: .34rem .85rem;
    border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .2px;
    color: #fff !important;
    background: linear-gradient(45deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
    box-shadow: 0 5px 14px rgba(221, 42, 123, .28);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    text-decoration: none;
}
.team-ig-pill:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 9px 20px rgba(221,42,123,.38); color: #fff !important; }

/* Pill de Threads — negra, a juego con la de Instagram */
.team-th-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    margin: .65rem 0 0 .4rem; padding: .34rem .8rem;
    border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .2px;
    color: #fff !important; background: #101010;
    box-shadow: 0 5px 14px rgba(0,0,0,.25);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    text-decoration: none;
}
.team-th-pill:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 9px 20px rgba(0,0,0,.35); color: #fff !important; }

/* Pills de redes en perfiles — cada red con su color oficial */
.team-so-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .38rem .9rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700; letter-spacing: .2px;
    color: #fff !important; text-decoration: none;
    box-shadow: 0 5px 14px rgba(0,0,0,.18);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.team-so-pill:hover { transform: translateY(-2px) scale(1.05); color: #fff !important; }
.so-ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.so-th { background: #101010; }
.so-fb { background: #1877F2; }
.so-li { background: #0A66C2; }
.so-x  { background: #000; }
.so-tt { background: #010101; border: 1px solid #2af0ea55; }
.so-yt { background: #FF0000; }

/* nav con 12 items: compactar progresivamente para que nada se corte */
@media (min-width: 993px) and (max-width: 1600px) {
    .nav-container { padding: 0 1rem; max-width: 100%; }
    .nav-menu { gap: 0; flex-wrap: nowrap; }
    .nav-link { padding: 0.5rem 0.5rem; font-size: 0.86rem; white-space: nowrap; }
    .nav-menu .btn-primary-small { padding: 0.5rem 0.85rem; font-size: 0.83rem; white-space: nowrap; }
    .logo-text { font-size: 0.95rem; }
    .nav-logo { height: 38px; width: 38px; }
}
/* rango crítico: el menú completo no cabe — se compacta al máximo */
@media (min-width: 993px) and (max-width: 1330px) {
    .nav-container { padding: 0 0.6rem; gap: 0.4rem; }
    .nav-link { padding: 0.45rem 0.34rem; font-size: 0.79rem; letter-spacing: -0.01em; }
    .nav-menu .btn-primary-small { padding: 0.45rem 0.7rem; font-size: 0.78rem; }
    .logo-text { font-size: 0; }                    /* solo el logo, sin texto */
    .logo-text .logo-accent { font-size: 0; }
    .nav-logo { height: 36px; width: 36px; }
    #ss-btn { padding: 0.3rem 0.25rem; font-size: 0.95rem; }
}
/* la barra superior nunca desborda */
.top-bar-inner { max-width: 100%; overflow: hidden; }
.top-bar-inner a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1601px) {
    .nav-container { padding: 0 2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   §  MENÚS DESPLEGABLES DE LA NAVEGACIÓN
   El título sigue siendo un enlace: se puede entrar a la sección
   sin pasar por el desplegable. La flecha es un botón aparte, así
   que en móvil y con teclado se puede abrir sin navegar.
   ═══════════════════════════════════════════════════════════════ */
.has-drop { position: relative; }
.drop-head { display: flex; align-items: center; gap: 0.1rem; }
.drop-toggle {
    background: none; border: 0; padding: 0.35rem 0.3rem; cursor: pointer;
    color: inherit; line-height: 1; display: inline-flex; align-items: center;
    border-radius: 6px;
}
.drop-toggle svg { width: 11px; height: 11px; transition: transform 0.22s ease; }
.has-drop.open > .drop-head .drop-toggle svg { transform: rotate(180deg); }
.drop-toggle:focus-visible { outline: 2px solid var(--primary, #1D4ED8); outline-offset: 2px; }

.drop-menu {
    position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 250px;
    background: #fff; border: 1px solid var(--border, #E5E7EB); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 42, 90, 0.14);
    padding: 0.5rem; margin: 0; list-style: none; z-index: 1200;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.has-drop:hover > .drop-menu,
.has-drop:focus-within > .drop-menu,
.has-drop.open > .drop-menu { opacity: 1; visibility: visible; transform: none; }
.drop-menu li { margin: 0; }
.drop-menu a {
    display: block; padding: 0.6rem 0.8rem; border-radius: 9px;
    font-size: 0.88rem; font-weight: 600; color: var(--text, #111827);
    text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.drop-menu a:hover, .drop-menu a:focus-visible { background: var(--primary-50, #EFF6FF); color: var(--primary, #1D4ED8); }
.drop-menu .drop-all { border-top: 1px solid var(--border-light, #F3F4F6); margin-top: 0.35rem; padding-top: 0.5rem; }
.drop-menu .drop-all a { color: var(--primary, #1D4ED8); }

/* En móvil el desplegable se despliega en vertical dentro del menú,
   sin flotar: una capa flotante dentro de un panel a pantalla completa
   se sale de la pantalla en cuanto la lista es larga. */
/* (el bloque de 968 se reemplazó por el de 1100, más abajo) */

/* ═══════════════════════════════════════════════════════════════
   §  TABLET — el menú pasa a hamburguesa antes de que se estropee
   ───────────────────────────────────────────────────────────────
   El menú de escritorio tiene doce entradas más el botón de cita.
   A 1024 px (iPad apaisado) el último enlace quedaba debajo del
   botón verde, así que el usuario no podía pulsar «Contact».
   Por eso la hamburguesa entra a 1100 y no a 768.
   Además, los estilos móviles del desplegable estaban en 968 y los
   del menú en 768: entre medias el desplegable se pintaba en modo
   móvil dentro de un menú de escritorio. Ahora comparten frontera.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1100px) {
    .menu-toggle { display: flex; }

    .nav-menu {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        width: 100%; height: 100vh; height: 100dvh;
        background: var(--white); flex-direction: column;
        padding: 6rem 2rem 2rem; gap: 0.5rem;
        transition: 0.4s cubic-bezier(0.4,0,0.2,1);
        box-shadow: none; border-top: none;
        opacity: 0; visibility: hidden; z-index: 999;
        justify-content: flex-start; align-items: center;
        overflow-y: auto;
    }
    .nav-menu.active { opacity: 1; visibility: visible; }
    .nav-menu .nav-link { font-size: 1.25rem; padding: 0.75rem 1rem; width: 100%; text-align: center; }
    .nav-menu .btn-primary-small,
    .nav-menu .btn-primary { margin-top: 1rem; width: 100%; max-width: 320px; text-align: center; }
}

/* El desplegable sigue al menú: en cuanto el menú es de pantalla
   completa, el submenú se despliega en vertical en vez de flotar. */
@media (max-width: 1100px) {
    .has-drop { width: 100%; }
    .drop-head { justify-content: center; }
    .drop-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; background: transparent; padding: 0;
        min-width: 0; max-height: 0; overflow: hidden; transition: max-height 0.28s ease;
    }
    .has-drop:hover > .drop-menu { max-height: 0; }
    .has-drop.open > .drop-menu { max-height: 34rem; }
    .drop-menu a { text-align: center; padding: 0.6rem; font-size: 0.95rem; }
}

/* Objetivos táctiles: un dedo no acierta en 9 píxeles.
   El punto sigue viéndose pequeño, pero la zona que responde es de 24. */
.drop-toggle { min-width: 30px; min-height: 30px; justify-content: center; }
.cz-dots .cz-dot { position: relative; }
.cz-dots .cz-dot::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 26px; height: 26px; transform: translate(-50%, -50%);
}

/* ═══════════════════════════════════════════════════════════════════════
   Iconos
   -----------------------------------------------------------------------
   Sustituyen a los emojis que había antes. Un emoji lo dibuja cada sistema
   a su manera —redondo en un iPhone, plano en Windows, distinto en
   Android— y eso hacía que la misma página pareciera hecha a trozos según
   quién la abriera. Estos son siempre los mismos.

   El tamaño va en `em`, no en píxeles: así el icono crece con el texto que
   lo acompaña. Donde antes había un emoji grande dentro de un titular, el
   icono sale grande sin tener que decírselo. Un solo tamaño para todo el
   sitio, y se ajusta solo.
   ═══════════════════════════════════════════════════════════════════════ */
.ic-img {
    width: 1.15em;
    height: 1.15em;
    object-fit: contain;
    display: inline-block;
    /* Alinea el icono con la línea de base del texto. Sin esto se apoya
       en el suelo del renglón y queda un dedo más abajo de lo que debe. */
    vertical-align: -0.22em;
    /* Dentro de una caja flexible, que no lo aplasten ni lo estiren. */
    flex: none;
}

/* Cuando el icono es lo único que hay en su contenedor —las burbujas de
   los servicios, los pasos de "cómo funciona"— no debe llevar el hueco de
   línea de texto detrás. */
.team-avatar > .ic-img,
.step-icon > .ic-img,
.feature-icon > .ic-img,
.service-icon > .ic-img {
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

/* ═══════════════════════════════════════════════════════════════════════
   Modo oscuro
   -----------------------------------------------------------------------
   Cómo decide qué tema poner, por orden:

     1. Si la persona ha pulsado el interruptor, manda su elección. Queda
        guardada en su navegador y se respeta en todas las visitas.
     2. Si no ha tocado nada, se sigue lo que tenga puesto su móvil u
        ordenador. Quien lleva el sistema en oscuro casi siempre quiere la
        web en oscuro también, y no hay que preguntárselo.

   El interruptor pone `data-tema="oscuro"` o `"claro"` en la etiqueta
   <html>. Esas dos reglas ganan a la del sistema, que es lo que hace que
   la elección manual tenga la última palabra.

   Nota sobre el oscuro que se ha elegido: NO es negro. El negro puro sobre
   una pantalla encendida cansa la vista y hace que el texto blanco vibre.
   Se usa un azul muy oscuro emparentado con el azul de la marca, que es lo
   que hacen las aplicaciones que se leen de noche.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --bg: #0E1626;
        --bg-light: #0E1626;
        --bg-warm: #16213A;
        --mist: #0E1626;
        --white: #16213A;          /* las tarjetas, que antes eran blancas */
        --superficie: #16213A;
        --superficie-2: #1D2B47;

        --text: #EAF0F8;
        --text-dark: #EAF0F8;
        --text-body: #C2CEDF;
        --text-secondary: #9FB0C7;
        --text-light: #7C8DA6;
        --text-muted: #5E6E85;

        --border: #27354F;
        --border-light: #1D2B47;
        --border-strong: #35486A;

        /* El azul de la marca se aclara: el original sobre fondo oscuro
           queda apagado y pierde contraste con el texto. */
        --primary: #6E9BFF;
        --primary-dark: #4E7FE8;
        --primary-light: #93B6FF;
        --primary-50: #16213A;
        --primary-100: #1D2B47;
        --blue: #6E9BFF; --blue-600: #4E7FE8; --blue-50: #16213A;
        --accent: #6E9BFF; --accent-light: #93B6FF; --accent-warm: #6E9BFF;
        --teal: #6E9BFF; --teal-600: #4E7FE8; --teal-50: #16213A;

        --green: #34D399; --green-dark: #10B981; --green-50: #10241E;
        --mint: #34D399; --mint-50: #10241E;
        --success: #34D399;
        --sun: #FBBF24; --sun-50: #2A2210;

        --secondary: #EAF0F8;
        --ink: #EAF0F8; --ink-2: #C2CEDF;

        /* Sobre fondo oscuro una sombra negra no se ve. Lo que da relieve
           es un borde tenue claro, no una sombra más fuerte. */
        --shadow-xs: 0 0 0 1px rgba(255,255,255,0.04);
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
        --shadow-lg: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
        --shadow-xl: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
        --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
        --shadow-float: 0 24px 64px rgba(0,0,0,0.6);

        --grad-blue: linear-gradient(135deg, #2B4C8F 0%, #1B3468 100%);
        --grad-teal: linear-gradient(135deg, #2B4C8F 0%, #1B3468 100%);

        color-scheme: dark;
    }
}

/* La elección manual. Repite los valores porque tiene que ganar a la regla
   del sistema aunque el sistema diga lo contrario. */
:root[data-tema="oscuro"] {
    --bg: #0E1626; --bg-light: #0E1626; --bg-warm: #16213A; --mist: #0E1626;
    --white: #16213A; --superficie: #16213A; --superficie-2: #1D2B47;
    --text: #EAF0F8; --text-dark: #EAF0F8; --text-body: #C2CEDF;
    --text-secondary: #9FB0C7; --text-light: #7C8DA6; --text-muted: #5E6E85;
    --border: #27354F; --border-light: #1D2B47; --border-strong: #35486A;
    --primary: #6E9BFF; --primary-dark: #4E7FE8; --primary-light: #93B6FF;
    --primary-50: #16213A; --primary-100: #1D2B47;
    --blue: #6E9BFF; --blue-600: #4E7FE8; --blue-50: #16213A;
    --accent: #6E9BFF; --accent-light: #93B6FF; --accent-warm: #6E9BFF;
    --teal: #6E9BFF; --teal-600: #4E7FE8; --teal-50: #16213A;
    --green: #34D399; --green-dark: #10B981; --green-50: #10241E;
    --mint: #34D399; --mint-50: #10241E; --success: #34D399;
    --sun: #FBBF24; --sun-50: #2A2210;
    --secondary: #EAF0F8; --ink: #EAF0F8; --ink-2: #C2CEDF;
    --shadow-xs: 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-float: 0 24px 64px rgba(0,0,0,0.6);
    --grad-blue: linear-gradient(135deg, #2B4C8F 0%, #1B3468 100%);
    --grad-teal: linear-gradient(135deg, #2B4C8F 0%, #1B3468 100%);
    color-scheme: dark;
}

/* En claro, `--superficie` es simplemente el blanco de siempre. Existe para
   que los colores que estaban escritos a mano en el HTML tengan un nombre
   al que agarrarse. */
:root { --superficie: #FFFFFF; --superficie-2: #F8FAFC; }

/* ── Cosas que el cambio de variables no arregla solo ─────────────────── */
:root[data-tema="oscuro"] img:not(.ic-img):not(.nav-logo):not(.footer-logo-img),
:root:not([data-tema="claro"]) img:not(.ic-img):not(.nav-logo):not(.footer-logo-img) {
    /* Las fotografías se dejan intactas. Solo se rebaja un pelo el brillo,
       porque una foto a pleno brillo en una pantalla oscura deslumbra. */
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .nav-logo,
    :root:not([data-tema="claro"]) .footer-logo-img { background: #FFFFFF; border-radius: 50%; }
}
:root[data-tema="oscuro"] .nav-logo,
:root[data-tema="oscuro"] .footer-logo-img { background: #FFFFFF; border-radius: 50%; }

/* El sello está dibujado para ir sobre blanco: sobre azul oscuro sus letras
   azul marino desaparecen. Se le pone su propio fondo blanco redondo. */

/* Botón del interruptor */
.tema-boton {
    background: none;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    border-radius: 50%;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
    flex: none;
}
.tema-boton:hover { border-color: var(--primary); color: var(--primary); }
.tema-boton svg { width: 19px; height: 19px; }

/* ── Nombres para los colores que estaban escritos a mano en el HTML ────
   Estos valores son EXACTAMENTE los que ya había. En claro no cambia ni un
   píxel; existen para que el modo oscuro tenga dónde agarrarse. */
:root {
    --sup: #FFFFFF;          /* fondos que eran blancos */
    --sup-2: #F8FAFC;        /* fondos grises muy claros */
    --sup-3: #F8FBFF;
    --marca: #1E4290;        /* el azul de la marca tal cual estaba */
    --txt-1: #111827;
    --txt-2: #374151;
    --txt-3: #64748b;
    --txt-4: #6B7280;
    --linea: #DCE8F5;
    --linea-2: #E5E7EB;
    --peligro: #a32d2d;
    --peligro-2: #e74c3c;
}
:root[data-tema="oscuro"] {
    --sup: #16213A; --sup-2: #0E1626; --sup-3: #16213A;
    --marca: #6E9BFF;
    --txt-1: #EAF0F8; --txt-2: #C2CEDF; --txt-3: #9FB0C7; --txt-4: #9FB0C7;
    --linea: #27354F; --linea-2: #27354F;
    --peligro: #FF8A8A; --peligro-2: #FF7A6B;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --sup: #16213A; --sup-2: #0E1626; --sup-3: #16213A;
        --marca: #6E9BFF;
        --txt-1: #EAF0F8; --txt-2: #C2CEDF; --txt-3: #9FB0C7; --txt-4: #9FB0C7;
        --linea: #27354F; --linea-2: #27354F;
        --peligro: #FF8A8A; --peligro-2: #FF7A6B;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Red de seguridad: el contenido NUNCA depende de una animación
   -----------------------------------------------------------------------
   Los bloques con `animate-on-scroll` nacen invisibles y se muestran cuando
   JavaScript detecta que entran en pantalla. Es bonito, pero tiene un fallo
   de diseño grave: si ese JavaScript no corre —por un error en otro fichero,
   por un bloqueador, por una versión vieja de navegador— la página se queda
   EN BLANCO. El texto está ahí, pero nadie lo ve.

   Eso le pasó hoy a la portada. En una web donde una madre busca ayuda para
   su hijo, eso no es un fallo estético: es la clínica desaparecida.

   Estas dos reglas lo impiden para siempre:

   1. Quien haya pedido menos movimiento en su sistema ve todo desde el
      principio, sin animación. Es además lo correcto en accesibilidad.
   2. Pasados tres segundos, el contenido aparece SOLO, sin ayuda de nadie.
      Si la animación funcionó, ya está visible y esto no hace nada. Si no
      funcionó, la página se salva sola.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@keyframes aimhRescate {
    to { opacity: 1; transform: none; }
}
.animate-on-scroll {
    /* Espera 3 s y aparece. Si JavaScript ya le puso `visible`, la regla de
       abajo gana y esto ni se nota. */
    animation: aimhRescate 0.6s ease 3s forwards;
}
.animate-on-scroll.visible {
    animation: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Modo oscuro · segunda pasada: los componentes
   -----------------------------------------------------------------------
   La primera pasada cambió las variables de color, y eso arregló todo lo
   que ya las usaba. Pero las piezas grandes del sitio —el fondo, la barra,
   las tarjetas, las pastillas— tenían el color escrito dentro de la regla:
   `rgba(255,255,255,0.85)`, `#fff`, y un fondo que es una FOTOGRAFÍA clara.
   Nada de eso obedece a una variable, y por eso la página salía a medias.

   En vez de repetir cada regla dos veces (una para el modo automático y
   otra para el manual), se crean variables nuevas para esas piezas. Las
   reglas se escriben UNA vez y son los valores los que cambian de tema.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --velo-nav: rgba(255,255,255,0.85);      /* barra de navegación */
    --velo-nav-fija: rgba(255,255,255,0.96); /* la misma, ya con scroll */
    --panel: rgba(255,255,255,0.9);          /* tarjetas de cristal */
    --panel-solido: #FFFFFF;
    --pastilla: rgba(255,255,255,.92);       /* las etiquetas de sección */
    --pastilla-texto: #1E4290;
    --fondo-foto: url('../assets/images/brand-bg.jpg');
    --fondo-base: #EEF4F9;
    --fondo-velo: transparent;               /* nada por encima de la foto */
    --linea-sutil: rgba(22,51,110,0.12);
}

:root[data-tema="oscuro"] {
    --velo-nav: rgba(16,25,44,0.82);
    --velo-nav-fija: rgba(13,21,38,0.95);
    --panel: rgba(26,38,63,0.82);
    --panel-solido: #16213A;
    --pastilla: rgba(37,53,86,0.9);
    --pastilla-texto: #A9C6FF;
    --fondo-base: #0B1220;
    /* La foto de fondo es clara y de día se ve preciosa; de noche deslumbra.
       No se quita: se le pone un velo oscuro encima y se deja asomar un 12%.
       Así la marca sigue estando y la vista descansa. */
    --fondo-velo: linear-gradient(rgba(11,18,32,0.88), rgba(11,18,32,0.88));
    --linea-sutil: rgba(160,190,240,0.14);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --velo-nav: rgba(16,25,44,0.82);
        --velo-nav-fija: rgba(13,21,38,0.95);
        --panel: rgba(26,38,63,0.82);
        --panel-solido: #16213A;
        --pastilla: rgba(37,53,86,0.9);
        --pastilla-texto: #A9C6FF;
        --fondo-base: #0B1220;
        --fondo-velo: linear-gradient(rgba(11,18,32,0.88), rgba(11,18,32,0.88));
        --linea-sutil: rgba(160,190,240,0.14);
    }
}

/* ── Las reglas, escritas una sola vez ────────────────────────────────── */
body {
    background: var(--fondo-velo), var(--fondo-base) var(--fondo-foto) center / cover no-repeat fixed;
}
.navbar { background: var(--velo-nav); }
.navbar.scrolled { background: var(--velo-nav-fija); }

.glass-panel, .adm-card, .pol, .sp-card, .service-card, .inf,
.trust-item, .team-card, .nw-card, .faq-section .faq-item {
    background: var(--panel);
}
.nw-card, .btn-secondary { background: var(--panel-solido); }

.section-header .badge, .page-header .badge {
    background: var(--pastilla) !important;
    color: var(--pastilla-texto) !important;
    border-color: var(--linea-sutil) !important;
}
.faq-item { border-bottom: 1px solid var(--linea-sutil); }

/* ── Retoques que solo tienen sentido de noche ────────────────────────── */
:root[data-tema="oscuro"] .hero,
:root[data-tema="oscuro"] .section,
:root[data-tema="oscuro"] .faq-section { background: transparent; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .hero,
    :root:not([data-tema="claro"]) .section,
    :root:not([data-tema="claro"]) .faq-section { background: transparent; }
}

/* La barra superior fina va sobre azul marino en los dos temas: su texto
   claro ya funciona y no se toca. */

/* Las fotografías se dejan tal cual. Bajarles el brillo "para que peguen"
   es un error clásico: la cara de una persona no debe verse apagada. */

/* ── Arreglo: la barra fina de arriba ──────────────────────────────────
   Usa `--secondary` como FONDO (azul casi negro con texto claro encima).
   En la primera pasada lo cambié a un color claro dando por hecho que era
   texto, y la barra se volvió blanca con letras blancas. De noche tiene que
   seguir siendo oscuro. */
:root[data-tema="oscuro"] { --secondary: #0B1220; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) { --secondary: #0B1220; }
}

/* ── Variables para los colores que viven dentro del JavaScript ──────── */
:root {
    --sup-4: #EDF3FA;
    --txt-5: #12263F;
    --txt-6: #4B5563;
    --txt-7: #5B6B7F;
    --marca-2: #1D4ED8;
    --marca-3: #1E3A8A;
    --linea-3: #B9CFEA;
}
:root[data-tema="oscuro"] {
    --sup-4: #1B2842;
    --txt-5: #EAF0F8; --txt-6: #C2CEDF; --txt-7: #9FB0C7;
    --marca-2: #6E9BFF; --marca-3: #93B6FF;
    --linea-3: #35486A;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --sup-4: #1B2842;
        --txt-5: #EAF0F8; --txt-6: #C2CEDF; --txt-7: #9FB0C7;
        --marca-2: #6E9BFF; --marca-3: #93B6FF;
        --linea-3: #35486A;
    }
}

/* ── El pie: texto legible ─────────────────────────────────────────────
   Los enlaces estaban al 45% de opacidad sobre azul marino. De día ya
   costaba; de noche, con el resto de la página más oscura que el pie, se
   volvían fantasmas. Un pie es donde están el teléfono, la dirección y el
   aviso de HIPAA: tiene que leerse, no insinuarse. */
.footer-links a { color: rgba(255,255,255,0.78); }
.footer-links a:hover { color: #FFFFFF; }
.footer-col h4 { color: rgba(255,255,255,0.96); }
.footer p, .footer span { color: rgba(255,255,255,0.72) !important; }
.footer-bottom, .footer-bottom p, .footer-bottom a { color: rgba(255,255,255,0.62); }
.footer-social a { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.18); }
.footer-compliance, .footer-hipaa { color: rgba(255,255,255,0.85); }

/* ═══════════════════════════════════════════════════════════════════════
   Formularios
   -----------------------------------------------------------------------
   Las casillas seguían blancas con el texto claro encima: se escribía a
   ciegas. Y en un formulario de referido, donde una madre pone el nombre y
   la fecha de nacimiento de su hijo, escribir a ciegas significa errores en
   datos que luego hay que perseguir por teléfono.

   Van con variables para escribirlo una sola vez, igual que el resto.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --campo: #FFFFFF;
    --campo-texto: #111827;
    --campo-borde: #D1D5DB;
    --campo-pista: #9CA3AF;      /* el texto de ejemplo dentro de la casilla */
    --campo-foco: #1D4ED8;
    --campo-apagado: #F3F4F6;
}
:root[data-tema="oscuro"] {
    --campo: #101B31;
    --campo-texto: #EAF0F8;
    --campo-borde: #35486A;
    --campo-pista: #7C8DA6;
    --campo-foco: #6E9BFF;
    --campo-apagado: #16213A;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --campo: #101B31;
        --campo-texto: #EAF0F8;
        --campo-borde: #35486A;
        --campo-pista: #7C8DA6;
        --campo-foco: #6E9BFF;
        --campo-apagado: #16213A;
    }
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], input[type="time"],
input[type="password"], input:not([type]), select, textarea {
    background: var(--campo) !important;
    color: var(--campo-texto) !important;
    border-color: var(--campo-borde) !important;
}
input::placeholder, textarea::placeholder { color: var(--campo-pista) !important; opacity: 1; }
input:focus, select:focus, textarea:focus {
    border-color: var(--campo-foco) !important;
    outline: 2px solid var(--campo-foco);
    outline-offset: 1px;
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
    background: var(--campo-apagado) !important;
    color: var(--campo-pista) !important;
}
/* Las etiquetas y los textos de ayuda: el gris claro sobre azul oscuro no
   se lee, y son justo los que dicen qué va en cada casilla. */
label, .form-label, .campo-label, legend, .form-hint, small.hint {
    color: var(--text-body);
}
/* El calendario y las flechas de los desplegables los dibuja el navegador
   en negro. Esto le dice que use su versión clara. */
:root[data-tema="oscuro"] input[type="date"],
:root[data-tema="oscuro"] input[type="time"],
:root[data-tema="oscuro"] select { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) input[type="date"],
    :root:not([data-tema="claro"]) input[type="time"],
    :root:not([data-tema="claro"]) select { color-scheme: dark; }
}
/* Casillas de verificación y opciones, que si no salen blancas y planas. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--campo-foco); }

/* ═══════════════════════════════════════════════════════════════════════
   Modo oscuro · armonía  —  esta capa manda sobre todo lo anterior
   -----------------------------------------------------------------------
   Las capas de antes las fui añadiendo por parches, arreglando lo que iba
   saliendo, y el resultado era un mosaico: tarjetas lavanda, texto blanco
   puro, contrastes de 16:1 que cansan la vista.

   Un modo oscuro que se lee bien de noche se construye con TRES niveles de
   superficie y un texto que NO es blanco:

       #0F1729   el fondo, lo más lejano
       #18223A   tarjetas y paneles
       #212D4A   lo que va encima de una tarjeta

   Y el texto en #D5DEEC. Blanco puro sobre azul oscuro "vibra": las letras
   parecen moverse y cansan a los diez minutos. Con este gris azulado el
   contraste baja de 16:1 a unos 11:1 — de sobra para leer, y descansado.

   Se define una sola vez en un grupo de selectores, para que el modo
   automático y el manual no se puedan desincronizar nunca.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-tema="oscuro"] {
    --bg: #0F1729; --bg-light: #0F1729; --mist: #0F1729; --fondo-base: #0F1729;
    --bg-warm: #18223A;
    --white: #18223A; --superficie: #18223A; --sup: #18223A;
    --superficie-2: #212D4A; --sup-2: #141D31; --sup-3: #18223A; --sup-4: #212D4A;
    --panel: #18223A; --panel-solido: #18223A;
    --velo-nav: rgba(15,23,41,0.88); --velo-nav-fija: rgba(15,23,41,0.97);
    --pastilla: #212D4A; --pastilla-texto: #9DB9F0;

    --text: #D5DEEC; --text-dark: #D5DEEC; --txt-1: #D5DEEC; --txt-5: #D5DEEC;
    --ink: #D5DEEC; --secondary: #0B1220;
    --text-body: #AFBDD2; --txt-2: #AFBDD2; --txt-6: #AFBDD2; --ink-2: #AFBDD2;
    --text-secondary: #8E9EB8; --txt-3: #8E9EB8; --txt-4: #8E9EB8; --txt-7: #8E9EB8;
    --text-light: #74839C; --text-muted: #5C6980;

    --border: #2A3752; --border-light: #212D4A; --border-strong: #3A4A6B;
    --linea: #2A3752; --linea-2: #2A3752; --linea-3: #3A4A6B; --linea-sutil: #2A3752;

    /* El azul de marca, un punto menos saturado que antes: brillaba
       demasiado sobre el fondo oscuro. */
    --primary: #7FA3F0; --primary-dark: #6389DB; --primary-light: #9DB9F0;
    --primary-50: #18223A; --primary-100: #212D4A;
    --blue: #7FA3F0; --blue-600: #6389DB; --blue-50: #18223A;
    --accent: #7FA3F0; --accent-light: #9DB9F0; --accent-warm: #7FA3F0;
    --teal: #7FA3F0; --teal-600: #6389DB; --teal-50: #18223A;
    --marca: #7FA3F0; --marca-2: #7FA3F0; --marca-3: #9DB9F0;

    /* El verde de los botones: el anterior era fluorescente. */
    --green: #4ADE9B; --green-dark: #34C88A; --green-50: #12301F;
    --mint: #4ADE9B; --mint-50: #12301F; --success: #4ADE9B;
    --sun: #E8B84B; --sun-50: #2A2210;
    --peligro: #F09090; --peligro-2: #EE8A7B;

    /* La foto del fondo, casi tapada: se intuye, no compite. */
    --fondo-velo: linear-gradient(rgba(15,23,41,0.95), rgba(15,23,41,0.95));

    --campo: #131C30; --campo-texto: #D5DEEC; --campo-borde: #2E3C5C;
    --campo-pista: #74839C; --campo-foco: #7FA3F0; --campo-apagado: #18223A;

    /* En oscuro el relieve no lo da la sombra, lo da un borde tenue. */
    --shadow-xs: 0 0 0 1px rgba(150,180,230,0.06);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(150,180,230,0.07);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.32), 0 0 0 1px rgba(150,180,230,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.36), 0 0 0 1px rgba(150,180,230,0.08);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(150,180,230,0.09);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(150,180,230,0.08);
    --shadow-float: 0 20px 50px rgba(0,0,0,0.45);
    --grad-blue: linear-gradient(135deg, #2E4A82 0%, #223867 100%);
    --grad-teal: linear-gradient(135deg, #2E4A82 0%, #223867 100%);
    color-scheme: dark;
}

/* Lo mismo para quien lo lleva automático desde su sistema. Se hereda del
   bloque de arriba copiando la declaración: CSS no permite reutilizarla,
   pero al estar juntas y en el mismo orden se ven de un vistazo. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --bg: #0F1729; --bg-light: #0F1729; --mist: #0F1729; --fondo-base: #0F1729;
        --bg-warm: #18223A;
        --white: #18223A; --superficie: #18223A; --sup: #18223A;
        --superficie-2: #212D4A; --sup-2: #141D31; --sup-3: #18223A; --sup-4: #212D4A;
        --panel: #18223A; --panel-solido: #18223A;
        --velo-nav: rgba(15,23,41,0.88); --velo-nav-fija: rgba(15,23,41,0.97);
        --pastilla: #212D4A; --pastilla-texto: #9DB9F0;
        --text: #D5DEEC; --text-dark: #D5DEEC; --txt-1: #D5DEEC; --txt-5: #D5DEEC;
        --ink: #D5DEEC; --secondary: #0B1220;
        --text-body: #AFBDD2; --txt-2: #AFBDD2; --txt-6: #AFBDD2; --ink-2: #AFBDD2;
        --text-secondary: #8E9EB8; --txt-3: #8E9EB8; --txt-4: #8E9EB8; --txt-7: #8E9EB8;
        --text-light: #74839C; --text-muted: #5C6980;
        --border: #2A3752; --border-light: #212D4A; --border-strong: #3A4A6B;
        --linea: #2A3752; --linea-2: #2A3752; --linea-3: #3A4A6B; --linea-sutil: #2A3752;
        --primary: #7FA3F0; --primary-dark: #6389DB; --primary-light: #9DB9F0;
        --primary-50: #18223A; --primary-100: #212D4A;
        --blue: #7FA3F0; --blue-600: #6389DB; --blue-50: #18223A;
        --accent: #7FA3F0; --accent-light: #9DB9F0; --accent-warm: #7FA3F0;
        --teal: #7FA3F0; --teal-600: #6389DB; --teal-50: #18223A;
        --marca: #7FA3F0; --marca-2: #7FA3F0; --marca-3: #9DB9F0;
        --green: #4ADE9B; --green-dark: #34C88A; --green-50: #12301F;
        --mint: #4ADE9B; --mint-50: #12301F; --success: #4ADE9B;
        --sun: #E8B84B; --sun-50: #2A2210;
        --peligro: #F09090; --peligro-2: #EE8A7B;
        --fondo-velo: linear-gradient(rgba(15,23,41,0.95), rgba(15,23,41,0.95));
        --campo: #131C30; --campo-texto: #D5DEEC; --campo-borde: #2E3C5C;
        --campo-pista: #74839C; --campo-foco: #7FA3F0; --campo-apagado: #18223A;
        --shadow-xs: 0 0 0 1px rgba(150,180,230,0.06);
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(150,180,230,0.07);
        --shadow-md: 0 4px 14px rgba(0,0,0,0.32), 0 0 0 1px rgba(150,180,230,0.08);
        --shadow-lg: 0 10px 30px rgba(0,0,0,0.36), 0 0 0 1px rgba(150,180,230,0.08);
        --shadow-xl: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(150,180,230,0.09);
        --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(150,180,230,0.08);
        --shadow-float: 0 20px 50px rgba(0,0,0,0.45);
        --grad-blue: linear-gradient(135deg, #2E4A82 0%, #223867 100%);
        --grad-teal: linear-gradient(135deg, #2E4A82 0%, #223867 100%);
        color-scheme: dark;
    }
}

/* ── La red que caza lo que se me haya escapado ────────────────────────
   Cualquier caja que siga con fondo blanco o casi blanco escrito a mano,
   venga de donde venga, pasa a superficie oscura. Es una regla ancha, y a
   propósito: después de un día entero de parches, prefiero una red que
   sobre-cubra a dejar otra tarjeta lavanda con letras blancas encima. */
:root[data-tema="oscuro"] [style*="background:#fff"],
:root[data-tema="oscuro"] [style*="background: #fff"],
:root[data-tema="oscuro"] [style*="background:#FFF"],
:root[data-tema="oscuro"] [style*="background:rgba(255,255,255"],
:root[data-tema="oscuro"] [style*="background: rgba(255,255,255"],
:root[data-tema="oscuro"] [style*="background:#EDF3FA"],
:root[data-tema="oscuro"] [style*="background:#F8FAFC"],
:root[data-tema="oscuro"] [style*="background:linear-gradient(135deg,#EDF3FA"] {
    background: var(--panel) !important;
    border-color: var(--border) !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) [style*="background:#fff"],
    :root:not([data-tema="claro"]) [style*="background: #fff"],
    :root:not([data-tema="claro"]) [style*="background:#FFF"],
    :root:not([data-tema="claro"]) [style*="background:rgba(255,255,255"],
    :root:not([data-tema="claro"]) [style*="background: rgba(255,255,255"],
    :root:not([data-tema="claro"]) [style*="background:#EDF3FA"],
    :root:not([data-tema="claro"]) [style*="background:#F8FAFC"],
    :root:not([data-tema="claro"]) [style*="background:linear-gradient(135deg,#EDF3FA"] {
        background: var(--panel) !important;
        border-color: var(--border) !important;
    }
}

/* ── Lo que vive dentro de un <style> en la propia página ──────────────
   Esas reglas van después de esta hoja, así que ganan por orden. Para
   alcanzarlas hace falta `!important`. Son pocas y están localizadas: los
   cuadrados de "How It Works", sus puntos y la barra de progreso. */
:root[data-tema="oscuro"] .hiw-ico,
:root[data-tema="oscuro"] .hiw-dot {
    background: var(--superficie-2) !important;
    border-color: var(--border) !important;
}
:root[data-tema="oscuro"] .hiw-track { background: var(--border) !important; }
:root[data-tema="oscuro"] .section[style*="background: var(--white)"],
:root[data-tema="oscuro"] .section[style*="background:var(--white)"],
:root[data-tema="oscuro"] .section[style*="background: var(--bg)"],
:root[data-tema="oscuro"] .section[style*="background:var(--bg)"] {
    background: transparent !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .hiw-ico,
    :root:not([data-tema="claro"]) .hiw-dot {
        background: var(--superficie-2) !important;
        border-color: var(--border) !important;
    }
    :root:not([data-tema="claro"]) .hiw-track { background: var(--border) !important; }
    :root:not([data-tema="claro"]) .section[style*="background: var(--white)"],
    :root:not([data-tema="claro"]) .section[style*="background:var(--white)"],
    :root:not([data-tema="claro"]) .section[style*="background: var(--bg)"],
    :root:not([data-tema="claro"]) .section[style*="background:var(--bg)"] {
        background: transparent !important;
    }
}

/* La banda de cifras: el número salía en oscuro sobre el azul de marca. */
:root[data-tema="oscuro"] .stat-band,
:root[data-tema="oscuro"] .stat-band .stat-num,
:root[data-tema="oscuro"] .stat-band .stat-label { color: #EAF1FB !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .stat-band,
    :root:not([data-tema="claro"]) .stat-band .stat-num,
    :root:not([data-tema="claro"]) .stat-band .stat-label { color: #EAF1FB !important; }
}

/* ── Última red: las tarjetas de los formularios ───────────────────────
   Quedaban contenedores con degradados claros escritos a mano (`#F7FBFF`,
   `#F4FAF9`) y bordes azules de día. Se cazan por el patrón del atributo,
   igual que los anteriores. */
:root[data-tema="oscuro"] [style*="#F7FBFF"],
:root[data-tema="oscuro"] [style*="#F4FAF9"],
:root[data-tema="oscuro"] [style*="#f8fafc"],
:root[data-tema="oscuro"] [style*="#F8FBFF"],
:root[data-tema="oscuro"] .frm-paso,
:root[data-tema="oscuro"] .sms-cta,
:root[data-tema="oscuro"] .glass-panel {
    background: var(--panel) !important;
    border-color: var(--border) !important;
    color: var(--text-body);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) [style*="#F7FBFF"],
    :root:not([data-tema="claro"]) [style*="#F4FAF9"],
    :root:not([data-tema="claro"]) [style*="#f8fafc"],
    :root:not([data-tema="claro"]) [style*="#F8FBFF"],
    :root:not([data-tema="claro"]) .frm-paso,
    :root:not([data-tema="claro"]) .sms-cta,
    :root:not([data-tema="claro"]) .glass-panel {
        background: var(--panel) !important;
        border-color: var(--border) !important;
        color: var(--text-body);
    }
}