/*header*/

.public-topbar { background: var(--gio-primary); color: #fff; min-height: 46px; display: flex; align-items: center; }
.public-topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.topbar-contact { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.topbar-contact a, .topbar-hours { display: inline-flex; align-items: center; gap: 8px; opacity: .96; }
.topbar-contact i { color: #b9efec; }
.topbar-social { display: flex; height: 46px; }
.topbar-social a { width: 46px; display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.12); transition: .2s; }
.topbar-social a:last-child { border-right: 1px solid rgba(255,255,255,.12); }
.topbar-social a:hover { background: rgba(255,255,255,.1); }

.public-header { background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(219,232,239,.85); position: sticky; top: 0; z-index: 50; transition: box-shadow .2s ease, transform .2s ease; backdrop-filter: blur(10px); }
.public-header.is-scrolled { box-shadow: 0 12px 30px rgba(18,55,77,.08); }

/* ============================================
   MEJORA: Nav más espaciada
   ============================================ */
.nav-shell { min-height: 96px; display: flex; align-items: center; gap: 26px; }

.brand-logo { width: 155px; min-width: 155px; display: flex; align-items: center; }
.brand-logo img { width: 130px; max-height: 80px; object-fit: contain; }

.public-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }

.public-nav a { position: relative; font-size: 15px; font-weight: 600; color: #263a46; white-space: nowrap; transition: color .2s; }
.public-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; background: var(--gio-secondary); transform: scaleX(0); transition: .2s; }
.public-nav a:hover, .public-nav a.active { color: var(--gio-primary); }
.public-nav a:hover::after, .public-nav a.active::after { transform: scaleX(1); }

/* ============================================
   MEJORA: Botón reservar cita más destacado
   ============================================ */
.nav-appointment { 
    min-height: 48px; 
    padding: 0 20px; 
    display: inline-flex; 
    align-items: center; 
    gap: 9px; 
    color: #fff; 
    background: var(--gio-secondary); 
    border-radius: 10px; 
    font-size: 14px; 
    font-weight: 700; 
    white-space: nowrap; 
    transition: .25s; 
    box-shadow: 0 8px 20px rgba(22,166,161,.25);
}
.nav-appointment:hover { 
    background: var(--gio-secondary-dark); 
    transform: translateY(-2px); 
    box-shadow: 0 12px 26px rgba(22,166,161,.35);
}

.mobile-menu-button { display: none; margin-left: auto; width: 48px; height: 44px; border: 0; border-radius: 10px; background: #eef7fa; padding: 10px; cursor: pointer; }
.mobile-menu-button span { display: block; height: 2px; background: var(--gio-primary); margin: 5px 0; border-radius: 99px; transition: .2s; }