/* =========================
   ANCHO GLOBAL
   ========================= */
.WaLayoutBody,
.zoneContent,
#id_Content,
.content,
.container {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#id_Content {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding-top: 0 !important;
}

/* =========================
   HEADER
   ========================= */
.WaLayoutHeader,
.zoneHeader,
.zoneHeader1,
.zoneHeader2 {
  padding-top: 12px !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
}

/* =========================
   LOGO
   ========================= */
.logo,
.WaGadgetLogo {
  margin: 0 !important;
  padding: 0 !important;
}

.logo img,
.WaGadgetLogo img {
  max-height: 86px !important;
  height: auto !important;
}

/* =========================
   MENÚ
   ========================= */
.menuBar,
.WaGadgetHorizontalMenu {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-top: 8px !important;
}

.menuBar a,
.WaGadgetHorizontalMenu a {
  font-weight: 600 !important;
  border-bottom: 3px solid transparent !important;
  padding: 10px 14px !important;
  transition: all 0.2s !important;
}

.menuBar a:hover,
.WaGadgetHorizontalMenu a:hover {
  border-bottom-color: #2dd4bf !important;
}

/* Botón Afiliarse */
.menuBar a[href*="filiarse"],
.menuBar a[href*="Afiliarse"],
.menuBar a[href*="page-1075173"],
.WaGadgetHorizontalMenu a[href*="filiarse"] {
  background: #2dd4bf !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  margin-left: 10px !important;
  border-bottom-color: transparent !important;
}

/* =========================
   HERO - ANCHO COMPLETO
   ========================= */
#heroId {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #0b1f33 !important;
  color: #ffffff !important;
  padding: 80px 0 !important;
  text-align: left !important;
  margin-top: 0 !important;
  margin-bottom: 60px !important;
}

#heroId > * {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#heroId p:first-of-type {
  display: inline-block !important;
  background: rgba(45, 212, 191, 0.15) !important;
  border: 1px solid #2dd4bf !important;
  color: #2dd4bf !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

#heroId h1 {
  color: #ffffff !important;
  font-size: 54px !important;
  line-height: 1.1 !important;
  margin: 18px 0 !important;
  letter-spacing: -0.5px !important;
}

#heroId p:not(:first-of-type) {
  color: rgba(255,255,255,0.78) !important;
  max-width: 560px !important;
  margin: 0 0 28px !important;
}

#heroId a {
  display: inline-block !important;
  background: #2dd4bf !important;
  color: #ffffff !important;
  padding: 14px 32px !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

#heroId a:hover {
  background: #14b8a6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3) !important;
}

/* =========================
   SECCIÓN FILOSOFÍA
   ========================= */
#filosofiaId {
  text-align: center;
  padding: 80px 40px 40px;
  max-width: 900px;
  margin: 0 auto;
}

#filosofiaId p:first-child {
  color: #2dd4bf !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

#filosofiaId h2 {
  font-size: 42px !important;
  font-weight: 700 !important;
  color: #0b1f33 !important;
  margin: 16px 0 !important;
}

#filosofiaId p:nth-child(3) {
  font-size: 18px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin-top: 16px !important;
}

/* =========================
   CAJAS MISIÓN Y VISIÓN
   ========================= */
.WaGadget2ColumnLayout {
  max-width: 1200px;
  margin: 60px auto !important;
  padding: 0 40px !important;
}

.WaGadget2ColumnLayout .column {
  background: #f8f9fa !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 40px !important;
}

.WaGadget2ColumnLayout h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0b1f33 !important;
  margin-bottom: 16px !important;
}

.WaGadget2ColumnLayout p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
}

/* =========================
   FOOTER - ANCHO COMPLETO IGUAL QUE HERO
   ========================= */
#id_Footer1 {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #0b1f33 !important;
  color: #ffffff !important;
  padding: 60px 0 40px !important;
  margin-top: 80px !important;
}

#id_Footer1 > * {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#id_Footer1,
#id_Footer1 p,
#id_Footer1 span,
#id_Footer1 h3,
#id_Footer1 a {
  color: #ffffff !important;
  text-align: left !important;
}

#id_Footer1 h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

#id_Footer1 p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.8) !important;
}

#id_Footer1 a {
  text-decoration: none !important;
  transition: color 0.2s !important;
}

#id_Footer1 a:hover {
  color: #2dd4bf !important;
}

/* Copyright / Footer inferior */
#id_Footer1 .footerText,
#id_Footer1 .copyright {
  text-align: center !important;
  padding-top: 40px !important;
  margin-top: 40px !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px !important;
}

/* =========================
   PÁGINA DE NOTICIAS/BLOG
   ========================= */
.blogListContainer,
.WaGadgetBlogPostList,
#BlogId {
  background: #f8fafc !important;
  padding: 60px 40px !important;
}

#BlogId .itemsListUl {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 32px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 1400px !important;
}

#BlogId .itemContainer {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
  margin: 0 !important;
}

#BlogId .itemContainer:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 25px rgba(0,0,0,0.1) !important;
}

#BlogId .itemImageContainer {
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
}

#BlogId .itemImageContainer img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#BlogId .itemContentContainer {
  padding: 24px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

#BlogId .itemTitle,
#BlogId .itemTitle a {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  text-decoration: none !important;
}

#BlogId .itemTitle a:hover {
  color: #2dd4bf !important;
}

#BlogId .itemDescription {
  color: #64748b !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  flex: 1 !important;
}

#BlogId .itemMoreLink a {
  color: #2dd4bf !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: auto !important;
}

#BlogId .itemMoreLink a::after {
  content: ' →' !important;
  margin-left: 5px !important;
}

#BlogId .itemMoreLink a:hover {
  color: #14b8a6 !important;
}

#BlogId .itemHeader,
#BlogId .itemAuthor {
  display: none !important;
}

/* =========================
   OCULTAR ELEMENTOS
   ========================= */
.WaGadgetContactInfo,
.contactBox,
.WaGadgetBanner .loader,
.loading-spinner,
.spinner {
  display: none !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 768px) {
  #heroId {
    padding: 64px 0 !important;
  }
  
  #heroId h1 {
    font-size: 36px !important;
  }
  
  #filosofiaId {
    padding: 60px 24px 24px;
  }
  
  #filosofiaId h2 {
    font-size: 32px !important;
  }
  
  .WaGadget2ColumnLayout {
    padding: 0 24px !important;
  }
  
  .WaGadget2ColumnLayout .column {
    padding: 24px !important;
    margin-bottom: 20px !important;
  }
  
  #BlogId {
    padding: 40px 24px !important;
  }
  
  #BlogId .itemsListUl {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  #id_Footer1 {
    padding: 40px 0 24px !important;
  }
}

#idFooterPoweredByContainer,
#idFooterPoweredByContainer * {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
}

/* =========================
   NOTICIAS - FONDO COMPLETO COMO HERO
   ========================= */

#BlogId,
.noticias-grid {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #f8fafc !important;
  padding: 80px 0 !important;
}

/* Contenido del blog limitado y centrado */
#BlogId > *,
#BlogId .itemsListUl,
.noticias-grid > *,
.noticias-grid .itemsListUl {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* =========================
   QUITAR ESPACIO ENTRE NOTICIAS Y FOOTER
   ========================= */

#BlogId,
.noticias-grid {
  margin-bottom: 0 !important;
}

#id_Footer1 {
  margin-top: 0 !important;
}

/* 1) Asegura que el contenedor sea referencia del dropdown */
.loginContainer.authenticated {
  position: relative;
  overflow: visible;
}

/* 2) Oculta el panel por defecto */
.loginContainer.authenticated .loginPanel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 99999;

  display: none;
  visibility: hidden;
  opacity: 0;
}

/* 3) Muestra el panel al pasar el mouse */
.loginContainer.authenticated:hover .loginPanel {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* 4) Muestra el panel también al hacer click (focus) en desktop/mobile */
.loginContainer.authenticated:focus-within .loginPanel {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* 5) Que el link de nombre tenga “cursor” de menú */
.loginContainer.authenticated .loginLink {
  cursor: pointer;
}