/* IBR Hospital — Médicos */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #f0f4f8; color: #0d1f3c; }
a { text-decoration: none; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ── Topbar ── */
.topbar { background: linear-gradient(90deg,#060f1e,#0d2550); border-bottom:1px solid rgba(255,255,255,.06); position:fixed; top:0; left:0; right:0; z-index:1001; height:40px; }
.topbar-inner { max-width:1200px; margin:0 auto; padding:0 32px; height:100%; display:flex; align-items:center; justify-content:space-between; }
.topbar-left { display:flex; align-items:center; gap:20px; }
.topbar-item { display:inline-flex; align-items:center; gap:7px; font-size:.75rem; font-weight:500; color:rgba(255,255,255,.6); transition:color .2s; letter-spacing:.02em; }
.topbar-item:hover { color:#fff; }
.topbar-divider { width:1px; height:16px; background:rgba(255,255,255,.12); }
.topbar-right { display:flex; align-items:center; gap:6px; }
.topbar-social { width:28px; height:28px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); transition:all .2s; }
.topbar-social:hover { background:#1a5ccc; border-color:#1a5ccc; color:#fff; transform:translateY(-1px); }

/* ── Navbar ── */
.navbar { position:fixed; top:40px; left:0; right:0; z-index:1000; height:68px; background:transparent; transition:background .3s,box-shadow .3s; }
.navbar.scrolled { background:rgba(255,255,255,.97); backdrop-filter:blur(16px); box-shadow:0 2px 20px rgba(13,32,68,.1); }
.navbar.scrolled .nav-link { color:#0d1f3c; }
.navbar.scrolled .logo-text { color:#1a5ccc; }
.navbar.scrolled .logo-sub { color:#7a90b3; }
.navbar.scrolled .nav-hamburger span { background:#0d1f3c; }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 32px; height:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; }
.logo-mark { display:flex; flex-direction:column; line-height:1; }
.logo-text { font-size:1.8rem; font-weight:800; color:#fff; letter-spacing:-.02em; transition:color .3s; }
.logo-sub { font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); transition:color .3s; }
.nav-right { display:flex; align-items:center; gap:4px; }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-link { display:inline-flex; align-items:center; gap:4px; padding:8px 13px; font-size:.875rem; font-weight:500; color:rgba(255,255,255,.88); border-radius:6px; transition:all .2s; white-space:nowrap; }
.nav-link:hover { background:rgba(255,255,255,.1); color:#fff; }
.nav-link--active { color:#fff !important; font-weight:700; }
.navbar.scrolled .nav-link--active { color:#1a5ccc !important; }
.nav-dropdown { position:relative; }
.nav-dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown-menu { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-8px); background:#fff; border-radius:10px; box-shadow:0 8px 32px rgba(13,32,68,.12); padding:8px; min-width:240px; opacity:0; visibility:hidden; transition:all .2s; z-index:10; max-height:320px; overflow-y:auto; }
.dropdown-menu a { display:block; padding:10px 16px; font-size:.875rem; color:#0d1f3c; border-radius:6px; transition:all .2s; }
.dropdown-menu a:hover { background:#f0f6ff; color:#1a5ccc; }
.dropdown-menu::-webkit-scrollbar { width:6px; }
.dropdown-menu::-webkit-scrollbar-track { background:transparent; }
.dropdown-menu::-webkit-scrollbar-thumb { background:#c7d7f3; border-radius:10px; }
.dropdown-menu::-webkit-scrollbar-thumb:hover { background:#1a5ccc; }
.nav-actions { margin-left:16px; }
.btn-primary { display:inline-flex; align-items:center; background:#1a5ccc; color:#fff; padding:10px 22px; border-radius:50px; font-size:.875rem; font-weight:700; transition:all .2s; }
.btn-primary:hover { background:#2e7ae0; box-shadow:0 4px 14px rgba(26,92,204,.35); }
.nav-hamburger { display:none; flex-direction:column; gap:5px; padding:4px; cursor:pointer; background:none; border:none; }
.nav-hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }

/* ── Hero ── */
.hero { position:relative; padding:160px 0 80px; background:linear-gradient(145deg,#060f1e 0%,#0d2550 60%,#103060 100%); overflow:hidden; text-align:center; }
.hero::before { content:''; position:absolute; top:-150px; right:-150px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(26,92,204,.15) 0%,transparent 70%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-100px; left:-100px; width:350px; height:350px; border-radius:50%; background:radial-gradient(circle,rgba(26,92,204,.08) 0%,transparent 70%); pointer-events:none; }
.hero-content { position:relative; z-index:2; max-width:680px; margin:0 auto; padding:0 24px; }
.hero-eyebrow { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#5a9ef0; background:rgba(90,158,240,.12); border:1px solid rgba(90,158,240,.25); padding:6px 16px; border-radius:50px; margin-bottom:20px; }
.hero h1 { font-size:clamp(2rem,4vw,3rem); font-weight:800; color:#fff; margin-bottom:16px; letter-spacing:-.02em; }
.hero p { font-size:.95rem; color:rgba(255,255,255,.6); line-height:1.8; }

/* ── Médicos section ── */
.medicos-section { padding:56px 0 80px; }

/* ── Filtros ── */
.filtros-wrap { background:#fff; border-radius:16px; padding:20px 24px; box-shadow:0 4px 24px rgba(13,32,68,.07); border:1px solid #edf0f7; margin-bottom:36px; }
.filtros-top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.filtros-search { flex:1; min-width:260px; position:relative; display:flex; align-items:center; }
.filtros-search svg { position:absolute; left:16px; color:#7a90b3; pointer-events:none; }
.filtros-search input { width:100%; padding:12px 16px 12px 46px; border:1.5px solid #e8edf5; border-radius:10px; font-size:.9rem; font-family:inherit; color:#0d1f3c; background:#f8fafc; outline:none; transition:all .2s; }
.filtros-search input:focus { border-color:#1a5ccc; background:#fff; box-shadow:0 0 0 3px rgba(26,92,204,.08); }
.filtros-select { display:flex; align-items:center; gap:8px; padding:0 16px; height:46px; background:#f8fafc; border:1.5px solid #e8edf5; border-radius:10px; }
.filtros-select label { font-size:.7rem; font-weight:700; color:#7a90b3; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.filtros-select select { border:none; background:transparent; font-size:.875rem; font-family:inherit; color:#0d1f3c; font-weight:600; outline:none; cursor:pointer; min-width:180px; }
.result-count { font-size:.78rem; font-weight:600; color:#7a90b3; white-space:nowrap; padding:8px 14px; background:#f4f7fc; border-radius:50px; border:1px solid #e8edf5; }

/* ── Grid ── */
.medicos-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.skeleton-card { height:220px; border-radius:14px; background:linear-gradient(90deg,#e8edf5 25%,#f0f4f8 50%,#e8edf5 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ── Card ── */
.medico-card { background:#fff; border-radius:14px; overflow:hidden; border:1.5px solid #e8edf5; box-shadow:0 2px 10px rgba(13,32,68,.05); transition:all .25s; cursor:pointer; }
.medico-card:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(26,92,204,.13); border-color:#c0d4f8; }
.medico-avatar { width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.medico-avatar img { width:100%; height:100%; object-fit:cover; }
.medico-initials { font-size:2rem; font-weight:800; color:rgba(255,255,255,.9); letter-spacing:-.02em; }
.medico-body { padding:14px; }
.medico-nome { font-size:.88rem; font-weight:700; color:#0d1f3c; margin-bottom:3px; line-height:1.3; }
.medico-esp { font-size:.75rem; color:#7a90b3; margin-bottom:10px; line-height:1.4; }
.medico-badge { display:inline-block; font-size:.68rem; font-weight:700; background:#deeafd; color:#1a5ccc; padding:3px 10px; border-radius:50px; }

/* Empty state */
.empty-state { text-align:center; padding:64px 24px; color:#7a90b3; }
.empty-state svg { margin:0 auto 16px; display:block; opacity:.3; }
.empty-state h3 { font-size:1.1rem; font-weight:700; color:#3d5175; margin-bottom:8px; }
.empty-state p { font-size:.9rem; }

/* ── Footer ── */
.footer { background:#060f1e; position:relative; overflow:hidden; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,#1a5ccc,transparent); }
.footer::after { content:''; position:absolute; top:-200px; right:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(26,92,204,.08) 0%,transparent 70%); pointer-events:none; }
.footer-top { padding:72px 0 56px; position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1.3fr 1.5fr; gap:56px; }
.footer-brand .footer-logo { margin-bottom:16px; }
.footer-logo-img { height:90px; width:auto; max-width:100%; }
.footer-ona { margin-bottom:14px; }
.footer-selo-img { height:120px; width:auto; }
.footer-brand .logo-text { font-size:2.2rem; font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1; }
.footer-brand .logo-sub { font-size:.58rem; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:#5a9ef0; margin-top:2px; }
.footer-tagline { font-size:.85rem; color:rgba(255,255,255,.35); margin-bottom:24px; line-height:1.6; }
.footer-social { display:flex; gap:8px; }
.social-link { width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); transition:all .2s; }
.social-link:hover { background:#1a5ccc; border-color:#1a5ccc; color:#fff; transform:translateY(-2px); }
.footer-col h4 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:#5a9ef0; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:.875rem; color:rgba(255,255,255,.5); transition:all .2s; display:inline-flex; align-items:center; gap:6px; }
.footer-col ul li a:hover { color:#fff; padding-left:4px; }
.footer-contact { display:flex; flex-direction:column; gap:16px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:12px; color:rgba(255,255,255,.5); }
.footer-contact-item svg { flex-shrink:0; margin-top:1px; color:#5a9ef0; }
.footer-contact-item a, .footer-contact-item span { font-size:.875rem; line-height:1.65; transition:color .2s; color:rgba(255,255,255,.5); }
.footer-contact-item a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.05); padding:20px 0; position:relative; z-index:1; background:rgba(0,0,0,.2); }
.footer-bottom .container { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-bottom p { font-size:.78rem; color:rgba(255,255,255,.25); }

.whatsapp-float { position:fixed; bottom:28px; left:28px; width:52px; height:52px; background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 4px 16px rgba(37,211,102,.4); z-index:500; transition:all .2s; }
.whatsapp-float:hover { transform:scale(1.1); }

@media(max-width:1200px){ .medicos-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:900px){ .medicos-grid { grid-template-columns:repeat(3,1fr); } .footer-grid { grid-template-columns:1fr 1fr; gap:32px; } }

@media(max-width:768px){
  /* ✅ Esconde topbar */
  .topbar { display:none; }
  .navbar { top:0; }
  .container { padding:0 20px; }
  .nav-inner { padding:0 16px; }

  /* ✅ Hamburguer */
  .nav-hamburger { display:flex; margin-left:auto; }
  .nav-actions { display:none; }

  /* ✅ Menu mobile */
  .nav-links {
    display:none;
    position:fixed;
    top:68px;
    left:0; right:0;
    background:#fff;
    padding:16px 24px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    box-shadow:0 8px 32px rgba(13,32,68,.12);
    z-index:999;
    max-height:calc(100vh - 68px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .nav-links.open { display:flex; }
  .nav-link { color:#0d1f3c !important; width:100%; padding:12px 16px; border-radius:0; }
  .nav-link--active { color:#1a5ccc !important; font-weight:700; }
  .nav-dropdown { width:100%; }
  .dropdown-menu {
    position:static;
    transform:none;
    opacity:0;
    visibility:hidden;
    max-height:0;
    overflow:hidden;
    box-shadow:none;
    padding:0 0 0 16px;
    background:transparent;
    transition:max-height 0.35s ease, opacity 0.25s ease;
  }
  .nav-dropdown.open .dropdown-menu {
    opacity:1;
    visibility:visible;
    max-height:400px;
    overflow-y:auto;
    padding:8px 0 8px 16px;
  }
  .nav-dropdown:hover .dropdown-menu { opacity:0; visibility:hidden; transform:none; }
  .dropdown-menu a { color:#0d1f3c; }

  .hero { padding:120px 0 56px; }
  .medicos-grid { grid-template-columns:repeat(2,1fr); }
  .filtros-top { flex-direction:column; align-items:flex-start; }

  /* ✅ Footer mobile */
  .footer-top { padding:40px 0 32px; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-logo-img { height:70px; }
  .footer-selo-img { height:80px; }
  .footer-bottom .container { flex-direction:column; text-align:center; gap:8px; }
  .footer-bottom p { font-size:.72rem; }
  .footer-social { flex-wrap:wrap; }
}

@media(max-width:480px){
  .container { padding:0 20px; }
  .medicos-grid { grid-template-columns:repeat(2,1fr); }
}