/* ============================================================
   ENFERMERO.CL — main.css (Común / Layout)
   CSS unificado y optimizado para variables, resets, header y footer.
   ============================================================ */
header {
    position: relative;
    z-index: 9999; /* Un número muy alto para que nada lo tape */
}

/* Forzar el clic en el botón */
.hamburger {
    position: relative;
    z-index: 10000; /* Asegura que el botón sea el elemento más alto */
    cursor: pointer;
}


:root {
  --clr-navy:        #0d2c54;
  --clr-navy-deep:   #071929;
  --clr-navy-mid:    #122d4e;
  --clr-coral:       #bd4f2a;
  --clr-coral-light: #d96b42;
  --clr-coral-dim:   rgba(189,79,42,0.12);
  --clr-ink:         #0f1923;
  --clr-text:        #1e293b;
  --clr-muted:       #64748b;
  --clr-border:      #e2e8f0;
  --clr-surface:     #f8fafc;
  --clr-white:       #ffffff;
  --clr-ai-blue:     #1d6fa4;
  --clr-ai-glow:     rgba(29,111,164,0.25);
  
  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;
  
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  
  --shadow-lg:  0 12px 40px rgba(13,44,84,0.14), 0 4px 12px rgba(0,0,0,0.06);
  
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --duration-fast: 180ms;
  --duration-med:  320ms;
  --duration-slow: 500ms;
  
  --header-h: 72px;
  --glass-bg:        rgba(255,255,255,0.06);
  --glass-border:    rgba(255,255,255,0.12);
}

*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html { 
  scroll-behavior: smooth; 
}

body { 
  font-family: var(--font-body); 
  font-size: 16px; 
  line-height: 1.65; 
  color: var(--clr-text); 
  background: var(--clr-white); 
  -webkit-font-smoothing: antialiased; 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

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

ul, ol { 
  list-style: none; 
}

button { 
  cursor: pointer; 
  font-family: inherit; 
  border: none; 
  background: none;
}

.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 clamp(1.25rem, 4vw, 2.5rem); 
}

/* ── HEADER ── */
.site-header { 
  position: sticky; 
  top: 0; 
  z-index: 900; 
  height: var(--header-h); 
  background: rgba(255,255,255,0.92); 
  backdrop-filter: blur(16px) saturate(180%); 
  -webkit-backdrop-filter: blur(16px) saturate(180%); 
  border-bottom: 1px solid var(--clr-border); 
  transition: box-shadow var(--duration-med) var(--ease-out); 
}

.site-header.scrolled { 
  box-shadow: 0 2px 20px rgba(0,0,0,0.08); 
}

.header-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  height: var(--header-h); 
  gap: 2rem; 
}

.logo { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  flex-shrink: 0; 
}

.logo__mark { 
  width: 38px; 
  height: 38px; 
  background: linear-gradient(135deg, var(--clr-navy) 0%, var(--clr-ai-blue) 100%); 
  border-radius: 10px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
  overflow: hidden; 
  flex-shrink: 0; 
}

.logo__mark::after { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%); 
}

.logo__mark img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.logo__textblock { 
  line-height: 1.2; 
}

.logo__name { 
  font-family: var(--font-display); 
  font-weight: 700; 
  font-size: 1.05rem; 
  color: var(--clr-navy); 
  letter-spacing: -0.02em; 
}

.logo__name em { 
  font-style: normal; 
  color: var(--clr-coral); 
}

.logo__sub { 
  font-size: 0.6rem; 
  color: var(--clr-muted); 
  font-weight: 500; 
  letter-spacing: 0.07em; 
  text-transform: uppercase; 
}

.nav-primary { 
  display: flex; 
  align-items: center; 
  gap: 2px; 
}

.nav-primary a { 
  font-weight: 500; 
  font-size: 0.875rem; 
  color: var(--clr-text); 
  padding: 6px 13px; 
  border-radius: var(--radius-sm); 
  transition: color var(--duration-fast), background var(--duration-fast); 
  white-space: nowrap; 
}

.nav-primary a:hover { 
  color: var(--clr-coral); 
  background: var(--clr-coral-dim); 
}

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

.header-actions { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  flex-shrink: 0; 
}

.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px; 
  font-family: var(--font-body); 
  font-weight: 600; 
  font-size: 0.875rem; 
  border-radius: var(--radius-md); 
  cursor: pointer; 
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-med) var(--ease-out), background var(--duration-fast); 
  text-decoration: none; 
  white-space: nowrap; 
  line-height: 1; 
  border: none; 
}

.btn:active { 
  transform: scale(0.97); 
}

.btn--primary { 
  background: linear-gradient(135deg, var(--clr-coral) 0%, #c94a22 100%); 
  color: white; 
  padding: 11px 22px; 
  box-shadow: 0 2px 12px rgba(189,79,42,0.3); 
}

.btn--primary:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 6px 24px rgba(189,79,42,0.42); 
}

.btn--ghost { 
  background: transparent; 
  color: var(--clr-text); 
  padding: 9px 18px; 
  border: 1.5px solid var(--clr-border); 
}

.btn--ghost:hover { 
  border-color: var(--clr-navy); 
  background: rgba(13,44,84,0.04); 
  color: var(--clr-navy); 
}

.btn--ghost-white { 
  background: transparent; 
  color: white; 
  padding: 13px 28px; 
  border: 1.5px solid rgba(255,255,255,0.3); 
}

.btn--ghost-white:hover { 
  border-color: rgba(255,255,255,0.7); 
  background: rgba(255,255,255,0.08); 
}

.btn--lg { 
  font-size: 1rem; 
  padding: 16px 36px; 
  border-radius: var(--radius-lg); 
}

.hamburger { 
  display: none; 
  width: 36px; 
  height: 36px; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  gap: 5px; 
  background: none; 
  border: none; 
  cursor: pointer; 
  border-radius: var(--radius-sm); 
  transition: background var(--duration-fast);
}

.hamburger:hover {
  background: var(--clr-surface);
}

.hamburger span { 
  display: block; 
  width: 22px; 
  height: 2px; 
  background: var(--clr-text); 
  border-radius: 2px; 
  transition: transform var(--duration-med) var(--ease-out), opacity var(--duration-fast); 
}

.hamburger.open span:nth-child(1) { 
  transform: translateY(7px) rotate(45deg); 
}

.hamburger.open span:nth-child(2) { 
  opacity: 0; 
}

.hamburger.open span:nth-child(3) { 
  transform: translateY(-7px) rotate(-45deg); 
}

.mobile-nav { 
  display: none; 
  position: fixed; 
  inset: 0; 
  top: var(--header-h); 
  background: rgba(7,25,41,0.97); 
  z-index: 800; 
  flex-direction: column; 
  padding: 1.5rem 1.25rem; 
  gap: 4px; 
  overflow-y: auto; 
  transform: translateX(100%); 
  transition: transform var(--duration-med) var(--ease-out); 
}

.mobile-nav.open { 
  display: flex; 
  transform: translateX(0); 
}

.mobile-nav a { 
  color: rgba(255,255,255,0.8); 
  font-size: 1.05rem; 
  font-weight: 500; 
  padding: 13px 15px; 
  border-radius: var(--radius-md); 
  transition: background var(--duration-fast), color var(--duration-fast); 
}

.mobile-nav a:hover, .mobile-nav a.active { 
  background: rgba(255,255,255,0.08); 
  color: white; 
}

.mobile-nav__label { 
  font-size: 0.7rem; 
  font-weight: 700; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  color: var(--clr-muted); 
  padding: 16px 15px 6px; 
}

.mobile-nav__divider { 
  height: 1px; 
  background: rgba(255,255,255,0.07); 
  margin: 8px 0; 
}

/* ── FOOTER ── */
.site-footer { 
  background: var(--clr-ink); 
  color: rgba(255,255,255,0.65); 
  padding-top: 4.5rem; 
}

.footer-grid { 
  display: grid; 
  grid-template-columns: 2fr 1.5fr 1fr 1.5fr; 
  gap: 3rem; 
  padding-bottom: 3rem; 
  border-bottom: 1px solid rgba(255,255,255,0.08); 
}

.footer-col h5 { 
  font-family: var(--font-display); 
  font-size: 0.75rem; 
  font-weight: 700; 
  letter-spacing: 0.09em; 
  text-transform: uppercase; 
  color: rgba(255,255,255,0.35); 
  margin-bottom: 1.25rem; 
}

.footer-brand__logo { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 1rem; 
}

.footer-brand__mark { 
  width: 34px; 
  height: 34px; 
  background: linear-gradient(135deg, var(--clr-navy) 0%, var(--clr-ai-blue) 100%); 
  border-radius: 8px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative;
  overflow: hidden;
}

.footer-brand__mark img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.footer-brand__name { 
  font-family: var(--font-display); 
  font-weight: 700; 
  font-size: 0.975rem; 
  color: white; 
}

.footer-brand__name em { 
  font-style: normal; 
  color: var(--clr-coral); 
}

.footer-tagline { 
  font-size: 0.85rem; 
  line-height: 1.6; 
  color: rgba(255,255,255,0.4); 
  margin-bottom: 1.25rem; 
}

.footer-social { 
  display: flex; 
  gap: 8px; 
}

.footer-social a { 
  width: 34px; 
  height: 34px; 
  background: rgba(255,255,255,0.06); 
  border-radius: var(--radius-sm); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 0.875rem; 
  transition: background var(--duration-fast), color var(--duration-fast); 
  color: rgba(255,255,255,0.4); 
}

.footer-social a:hover { 
  background: rgba(189,79,42,0.22); 
  color: var(--clr-coral); 
}

.footer-links-list { 
  display: flex; 
  flex-direction: column; 
  gap: 9px; 
}

.footer-links-list a { 
  font-size: 0.875rem; 
  color: rgba(255,255,255,0.5); 
  transition: color var(--duration-fast), padding-left var(--duration-fast); 
}

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

.footer-recent-posts { 
  display: flex; 
  flex-direction: column; 
  gap: 14px; 
}

.footer-post-item { 
  display: flex; 
  gap: 10px; 
  align-items: flex-start; 
}

.footer-post-thumb { 
  width: 48px; 
  height: 40px; 
  background: rgba(255,255,255,0.05); 
  border-radius: var(--radius-sm); 
  flex-shrink: 0; 
  border: 1px solid rgba(255,255,255,0.07); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 0.9rem; 
  color: var(--clr-muted);
}

.footer-post-info a { 
  font-size: 0.8rem; 
  color: rgba(255,255,255,0.6); 
  line-height: 1.4; 
  display: block; 
  transition: color var(--duration-fast); 
}

.footer-post-info a:hover { 
  color: white; 
}

.footer-post-info span { 
  font-size: 0.68rem; 
  color: rgba(255,255,255,0.28); 
  margin-top: 2px; 
  display: block; 
}

.footer-telegram { 
  background: rgba(255,255,255,0.04); 
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: var(--radius-md); 
  padding: 1.25rem; 
}

.footer-telegram__header { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  color: white; 
  font-weight: 600; 
  font-size: 0.875rem; 
  margin-bottom: 8px; 
}

.tg-icon { 
  width: 26px; 
  height: 26px; 
  background: #2AABEE; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 0.7rem; 
  color: white; 
  flex-shrink: 0; 
}

.footer-telegram p { 
  font-size: 0.8rem; 
  color: rgba(255,255,255,0.4); 
  line-height: 1.5; 
  margin-bottom: 12px; 
}

.btn-telegram { 
  display: block; 
  width: 100%; 
  padding: 9px; 
  background: rgba(42,171,238,0.12); 
  border: 1px solid rgba(42,171,238,0.28); 
  color: #2AABEE; 
  border-radius: var(--radius-sm); 
  font-size: 0.8rem; 
  font-weight: 600; 
  text-align: center; 
  cursor: pointer; 
  transition: background var(--duration-fast); 
  text-decoration: none; 
}

.btn-telegram:hover { 
  background: rgba(42,171,238,0.22); 
}

.footer-bottom { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 1.5rem 0; 
  gap: 1rem; 
  flex-wrap: wrap; 
}

.footer-bottom__copy { 
  font-size: 0.8rem; 
  color: rgba(255,255,255,0.28); 
}

.footer-bottom__links { 
  display: flex; 
  gap: 18px; 
}

.footer-bottom__links a { 
  font-size: 0.8rem; 
  color: rgba(255,255,255,0.28); 
  transition: color var(--duration-fast); 
}

.footer-bottom__links a:hover { 
  color: rgba(255,255,255,0.6); 
}

/* ── REVEAL ANIMATIONS ── */
.reveal { 
  opacity: 0; 
  transform: translateY(22px); 
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); 
}

.reveal.visible { 
  opacity: 1; 
  transform: translateY(0); 
}

.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ── RESPONSIVE BARS ── */
@media (max-width: 900px) {
  .footer-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 2.5rem; 
  }
}

@media (max-width: 768px) {
  :root { 
    --header-h: 64px; 
  }
  .nav-primary, .header-actions .btn--ghost { 
    display: none; 
  }
  .hamburger { 
    display: flex; 
  }
}

@media (max-width: 560px) {
  .footer-grid { 
    grid-template-columns: 1fr; 
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { 
    animation-duration: 0.01ms !important; 
    transition-duration: 0.01ms !important; 
  }
  .reveal { 
    opacity: 1; 
    transform: none; 
  }
}