/* ICMB - Header compartido y Hero de Inicio. Cargar al final de los CSS. */
:root { --icmb-header-height: 80px; }
body { padding-top: var(--icmb-header-height); }
.header {
  position: fixed; top: 0; left: 0; z-index: 1000;
  width: 100%; height: var(--icmb-header-height);
  background: #fff; border-bottom: 1px solid var(--color-border, #e5e2df);
  box-shadow: none;
}
.header .nav {
  width: min(100% - 48px, 1200px); max-width: 1200px;
  height: 100%; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.header .logo-container { padding: 0; margin: 0; flex-shrink: 0; }
.header .logo-link { display: inline-flex; align-items: center; border-radius: 8px; }
.header .logo-img { display: block; width: auto; height: 56px; max-width: 180px; object-fit: contain; }
.header .nav_menu {
  display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 0; list-style: none;
  position: static; width: auto; height: auto;
  background: transparent; overflow: visible;
}
.header .nav_menu_item { margin: 0; line-height: normal; font-size: 14px; text-transform: none; width: auto; }
.header .nav_menu_link,
.header .nav_menu_link.nav_link,
.header .nav_menu_link.navmobile {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 14px;
  color: var(--color-text, #202124); font: 500 14px/1.4 var(--font-family, Inter, Arial, sans-serif);
  text-transform: none; text-shadow: none; text-decoration: none;
  border-radius: 8px; background: transparent;
  transition: color .2s ease, background-color .2s ease;
}
.header .nav_menu_link:hover:not([aria-current="page"]) { color: var(--color-text, #202124); background: #f4f4f4; }
.header .nav_menu_link[aria-current="page"],
.header .nav_menu_link[aria-current="page"]:hover {
  color: var(--color-primary, #a91d2a); background: #f8eeee; font-weight: 600;
}
.header .nav_toggle { display: none; }
/* Hero permanece con la imagen y los versículos actuales. */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: min(660px, 75vh); padding: 96px 24px;
  background-image: linear-gradient(rgba(19, 17, 17, .54), rgba(19, 17, 17, .54)), url('../img/Hero01.jpg');
  background-position: center; background-size: cover;
}
.hero .hero-text {
  position: static; transform: none; width: min(100%, 800px);
  margin-inline: auto; text-align: center; color: #fff;
}
.hero .bienvenida-titulo { margin: 0 0 20px; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.15; font-weight: 700; color: #fff; text-shadow: none; }
.hero .bienvenida-texto { margin: 0 0 24px; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; color: #fff; }
.hero .bienvenida-versiculo { margin: 0; font-size: clamp(.95rem, 1.5vw, 1.0625rem); line-height: 1.8; color: #f5eeee; }
@media (max-width: 900px) {
  :root { --icmb-header-height: 68px; }
  .header .nav { width: min(100% - 32px, 1200px); }
  .header .logo-img { height: 48px; }
  .header .nav_toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; line-height: 1;
    color: var(--color-text, #202124); background: transparent;
    border: 1px solid var(--color-border, #e5e2df); border-radius: 8px;
    cursor: pointer; font-size: 22px;
  }
  .header .nav_menu {
    position: fixed; top: var(--icmb-header-height); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    width: 100%; height: auto; max-height: calc(100dvh - var(--icmb-header-height));
    padding: 16px; overflow-y: auto; margin: 0;
    background: #fff; border-bottom: 1px solid var(--color-border, #e5e2df);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .08);
  }
  .header .nav_menu.nav_menu_v { display: flex; left: 0; }
  .header .nav_menu_item { width: 100%; line-height: normal; }
  .header .nav_menu_link,
  .header .nav_menu_link.nav_link,
  .header .nav_menu_link.navmobile { width: 100%; justify-content: flex-start; padding: 12px 16px; font-size: 16px; }
  .hero { min-height: 480px; padding: 72px 20px; }
}
@media (max-width: 480px) {
  .hero { min-height: 430px; padding: 60px 20px; }
  .hero .bienvenida-titulo { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .header .nav_menu_link { transition: none; }
}

/* Ícono SVG del menú responsive */
.header .nav_toggle_icon {
    display: block;
    width: 26px;
    height: 26px;
    color: #202124;
    flex-shrink: 0;
}

/* Asegurar que el botón centre su contenido */
.header .nav_toggle {
    align-items: center;
    justify-content: center;
}