/* HerenciasFácil — Nav CSS dedicado v1
   Archivo separado para evitar conflictos con articles.css */

/* ── RESET NAV ── */
header { background: #1E3D5A !important; padding: 0 40px !important; margin: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; height: 80px !important; }
header nav { background: transparent !important; flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* ── CONTENEDOR PRINCIPAL ── */
.nav-in {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 56px !important;
  box-sizing: border-box !important;
}

/* ── LOGO ── */
.nav-in a.logo,
a.logo {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  color: #ffffff !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
  line-height: 1.2 !important;
}
.nav-in a.logo span,
a.logo span {
  color: #D4A843 !important;
}

/* ── BOTÓN HAMBURGUESA ── */
button.mob-toggle {
  display: none !important;
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 22px !important;
  cursor: pointer !important;
  padding: 8px !important;
  margin-left: auto !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* ── NAV LINKS (desktop) ── */
.nav-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 !important;
}

/* ── DROPDOWN CONTAINER ── */
.nav-drop {
  position: relative !important;
}

/* ── BOTONES NAV ── */
.nav-links .nav-btn,
.nav-drop .nav-btn {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.88) !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: color .2s !important;
  letter-spacing: .01em !important;
  border-radius: 2px !important;
}
.nav-links .nav-btn:hover,
.nav-drop .nav-btn:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}

/* ── DROPDOWN MENU ── */
.nav-drop .drop-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 0 !important;
  background: #ffffff !important;
  border: 1px solid #D8D3CA !important;
  border-top: 3px solid #D4A843 !important;
  min-width: 220px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  z-index: 9999 !important;
}
.nav-drop:hover .drop-menu {
  display: block !important;
}
.nav-drop .drop-menu a {
  display: block !important;
  padding: 10px 16px !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 13px !important;
  color: #1E3D5A !important;
  text-decoration: none !important;
  border-bottom: 1px solid #EDEAE4 !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
.nav-drop .drop-menu a:last-child { border-bottom: none !important; }
.nav-drop .drop-menu a:hover {
  background: #F7F4EA !important;
  padding-left: 22px !important;
}

/* ── MENÚ MÓVIL ── */
.mob-menu {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #1E3D5A !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  padding-top: 80px !important;
  padding-bottom: 40px !important;
}
.mob-menu.open {
  display: block !important;
}
.mob-menu a {
  display: block !important;
  padding: 13px 24px !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.mob-menu a:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #ffffff !important;
}
.mob-menu .mob-section {
  display: block !important;
  padding: 12px 24px 4px !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 10px !important;
  color: #D4A843 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-top: 6px !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .nav-links { display: none !important; }
  button.mob-toggle { display: block !important; }
  .nav-in { padding: 0 16px !important; }
}
@media (min-width: 861px) {
  .mob-menu { display: none !important; }
  button.mob-toggle { display: none !important; }
}

/* ── LOGO SUB ── */
.logo-sub {
  font-family: 'Open Sans', system-ui, sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(212,168,67,.8) !important;
  margin-top: 3px !important;
  line-height: 1 !important;
}

/* ── CTA NAV: ocultar en desktop (ya existe en header-cta) ── */
.nav-item.nav-right { display: none !important; }



/* ── CARD ALIGNMENT FIX ── */
.article-card{display:flex!important;flex-direction:column!important}
.article-body{flex:1!important;display:flex!important;flex-direction:column!important}
.article-excerpt{flex:1!important}
.article-footer{margin-top:auto!important}
.articles-grid{align-items:stretch!important}


/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE — FIXES COMPLETOS
   ═══════════════════════════════════════════════ */

/* ── Viewport fix — evitar scroll horizontal ── */
*, *::before, *::after { box-sizing: border-box !important; }
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

/* ── MENÚ MÓVIL — pantalla completa ── */
@media (max-width: 860px) {

  /* Menú overlay pantalla completa */
  .mob-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    padding-top: 70px !important;
    background: #1E3D5A !important;
    display: none !important;
  }
  .mob-menu.open {
    display: block !important;
  }

  /* Links del menú más grandes y cómodos */
  .mob-menu a {
    padding: 16px 28px !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    display: block !important;
  }

  /* Botón cerrar (X) visible */
  .mob-toggle {
    font-size: 24px !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    position: relative !important;
  }

  /* Header fijo */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  /* Espacio para el header fijo */
  body { padding-top: 80px !important; }

  /* Ocultar "Consulta gratuita" del header en móvil */
  .header-cta,
  a.header-cta {
    display: none !important;
  }

  /* NAV sistema nuevo — ocultar links de escritorio */
  .nav-links { display: none !important; }
  .nav-inner-wrap { display: none !important; }

  /* ── FOOTER MÓVIL — acordeón ── */
  footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Columnas de nav del footer — colapsables */
  footer .footer-grid > div:not(:first-child) {
    border-top: 1px solid rgba(255,255,255,.1) !important;
  }

  footer .footer-grid > div:not(:first-child) h3 {
    cursor: pointer !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  footer .footer-grid > div:not(:first-child) h3::after {
    content: '+' !important;
    font-size: 18px !important;
    color: #D4A843 !important;
  }

  footer .footer-grid > div:not(:first-child) h3.open::after {
    content: '−' !important;
  }

  footer .footer-grid > div:not(:first-child) a {
    display: none !important;
    padding: 8px 0 !important;
    border-bottom: none !important;
  }

  footer .footer-grid > div:not(:first-child) h3.open ~ a {
    display: block !important;
  }

  /* Footer brand — siempre visible */
  footer .footer-brand,
  footer .footer-grid > div:first-child {
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
  }

  /* Copyright footer — centrado */
  footer [style*="border-top"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* ── GENERAL RESPONSIVE — contenido ── */
@media (max-width: 768px) {

  /* Layout articles — 1 columna */
  .layout {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
    gap: 24px !important;
  }

  /* Sidebar debajo del prose */
  .sidebar {
    order: 2 !important;
  }

  /* Hero de artículos */
  .hero-in, .page-hero-inner {
    padding: 24px 16px !important;
  }

  /* Lead-bg formulario */
  .lead-in {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
    gap: 24px !important;
  }

  /* Trust grid */
  .trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Articles grid — 2 columnas en tablet, 1 en móvil */
  .articles-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Rel-grid — 1 columna en móvil */
  .rel-grid {
    flex-direction: column !important;
  }

  /* Stats section */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Una sola columna de cards */
  .articles-grid {
    grid-template-columns: 1fr !important;
  }
  .trust-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Padding general */
  .section, [class*="section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── FOOTER INLINE STYLE OVERRIDE ── */
@media (max-width: 768px) {
  footer > div > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  footer > div > div > div:not(:first-child) > h3 {
    cursor: pointer !important;
    padding: 14px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    position: relative !important;
  }
  footer [style*="border-top:1px solid rgba(255,255,255,.1)"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding-top: 16px !important;
  }
  footer [style*="display:flex;gap:20px"] {
    justify-content: center !important;
  }
  /* Ocultar .header-cta en móvil */
  .header-cta { display: none !important; }
  a.header-cta { display: none !important; }
}

/* ── SEARCH OVERLAY — garantizado visible ── */
#hf-search-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.65) !important;
  z-index: 99999 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 80px 16px 16px !important;
  backdrop-filter: blur(4px) !important;
  overflow-y: auto !important;
}
#hf-search-overlay[style*="flex"] {
  display: flex !important;
}
.hf-search-modal {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 680px !important;
  max-height: 76vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.25) !important;
  border-radius: 4px !important;
}
.hf-search-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #E4E0D8 !important;
  background: #fff !important;
  flex-shrink: 0 !important;
}
.hf-search-input-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #F6F3EE !important;
  padding: 10px 14px !important;
  border: 1px solid #D8D3CA !important;
}
.hf-search-input-wrap input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  font-family: 'Open Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  background: transparent !important;
  color: #1A1714 !important;
}
.hf-search-count {
  padding: 8px 20px !important;
  font-size: 11px !important;
  color: #5C5754 !important;
  font-family: 'Open Sans', system-ui, sans-serif !important;
  letter-spacing: .06em !important;
  border-bottom: 1px solid #F2EFE9 !important;
  background: #FAFAF8 !important;
  flex-shrink: 0 !important;
}
.hf-search-results {
  overflow-y: auto !important;
  flex: 1 !important;
  max-height: 60vh !important;
}
.hf-search-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid #F2EFE9 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
.hf-search-item:hover { background: #F7F4EA !important; }
.hf-search-title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 15px !important;
  color: #1E3D5A !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  margin-bottom: 4px !important;
}
.hf-search-desc {
  font-size: 12px !important;
  color: #6B6560 !important;
  line-height: 1.55 !important;
  font-family: 'Open Sans', system-ui, sans-serif !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.hf-search-close {
  background: none !important;
  border: none !important;
  font-size: 22px !important;
  color: #5C5754 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 600px) {
  #hf-search-overlay { padding: 0 !important; }
  .hf-search-modal { max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important; }
}

/* ── Dropdown sugerencias buscador hero ── */
#hero-suggest {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border: 1px solid #D8D3CA !important;
  border-top: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  z-index: 9998 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  border-radius: 0 0 4px 4px !important;
}
.hf-suggest-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #F2EFE9 !important;
  text-decoration: none !important;
  color: #1A1714 !important;
  background: #ffffff !important;
  font-family: "Open Sans", system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  transition: background .12s !important;
}
.hf-suggest-item:hover {
  background: #F7F4EA !important;
  color: #1E3D5A !important;
}
.hf-suggest-item:last-child {
  border-bottom: none !important;
}
.hf-suggest-item span {
  color: #1A1714 !important;
  font-size: 14px !important;
}
.hf-suggest-item strong {
  color: #1E3D5A !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
.hf-suggest-item svg {
  flex-shrink: 0 !important;
  color: #9B9590 !important;
}

/* ── HERO: centrado (calculadora eliminada) ── */
.hero-inner {
  grid-template-columns: 1fr !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  justify-items: center !important;
}
.hero-badge {
  justify-content: center !important;
}
.hero-desc {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-search {
  max-width: 560px !important;
  margin: 0 auto !important;
}
.hero-tags {
  justify-content: center !important;
}

/* ── Eliminar línea gris entre header y hero ── */
.statsbar {
  border-top: none !important;
}
header {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ── Botón WhatsApp flotante ── */
.hf-wa-wrap{position:fixed !important;bottom:24px !important;right:20px !important;z-index:8888 !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;gap:8px !important;}
.hf-wa-btn{width:52px !important;height:52px !important;background:#25D366 !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;box-shadow:0 4px 16px rgba(37,211,102,.4) !important;text-decoration:none !important;}
.hf-wa-btn svg{width:28px !important;height:28px !important;fill:#fff !important;max-width:28px !important;max-height:28px !important;}
.hf-wa-tip{background:#1E3D5A !important;color:#fff !important;padding:6px 12px !important;font-size:11px !important;font-family:'Open Sans',system-ui,sans-serif !important;border-radius:2px !important;white-space:nowrap !important;opacity:0 !important;pointer-events:none !important;}
.hf-wa-wrap:hover .hf-wa-tip{opacity:1 !important;}
@media(max-width:768px){.hf-wa-wrap{bottom:16px !important;right:14px !important;}}

/* ── Trust items: estilos explícitos en todos los viewports ── */
.trust-item {
  background: #ffffff !important;
  padding: clamp(16px, 2vw, 28px) clamp(14px, 2vw, 24px) !important;
  border: 1px solid #E4E0D8 !important;
  border-radius: 4px !important;
}
.trust-icon {
  font-size: 28px !important;
  margin-bottom: 10px !important;
  display: block !important;
}
.trust-title {
  font-family: Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1E3D5A !important;
  margin-bottom: 6px !important;
}
.trust-text {
  font-family: 'Open Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: #5A5550 !important;
  line-height: 1.6 !important;
}

/* ── Firma Elena Martínez ── */
.elena-firma {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px clamp(20px,4vw,40px) !important;
  border-top: 2px solid #D4A843 !important;
  margin: 0 !important;
  background: #fff !important;
}
.em-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important;
  flex-shrink: 0 !important;
}
.em-name {
  font-family: 'Open Sans', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #1E3D5A !important;
  margin-bottom: 4px !important;
}
.em-bio {
  font-family: 'Open Sans', system-ui, sans-serif !important;
  font-size: 11px !important;
  color: #5C5754 !important;
  line-height: 1.5 !important;
}