/* ============================================================
   NotariaFácil Widgets — estilos compartidos de los 7 widgets
   (Hero, Trámites más buscados, Tarjetas de categoría, Paso a paso,
   Historias que ya lo resolvieron, Banner verificado, FAQ)
   ============================================================ */

.nf-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B0862B;
  margin-bottom: 10px;
}
.nf-eyebrow-dark { color: #E8C877; }

/* -- Hero con buscador -- */
.nf-hero { background-image: linear-gradient(135deg, #0E2A47, #123A5E); padding: 56px 0; color: #EAF0F6; }
.nf-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.nf-hero-copy { max-width: 640px; }
.nf-hero-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 36px; line-height: 1.18; color: #fff; margin: 6px 0 0; }
.nf-hero-sub { font-size: 16px; color: #C4D0DC; margin-top: 16px; line-height: 1.6; }
.nf-hero-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 14px 18px; margin-top: 24px; max-width: 560px; box-shadow: 0 16px 40px rgba(6,20,36,.3); }
.nf-hero-search-input { flex: 1; border: none; outline: none; font-size: 15px; color: #16232F; background: transparent; font-family: 'Public Sans', sans-serif; }
.nf-hero-search-btn { background-color: #C79A3E; color: #0E2A47; font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 8px; border: none; cursor: pointer; font-family: 'Public Sans', sans-serif; }
.nf-hero-search-note { font-size: 12px; color: #93A3B3; font-style: italic; max-width: 500px; margin-top: 8px; }
.nf-hero-buttons { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.nf-hero-btn { display: inline-block; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 8px; text-decoration: none; font-family: 'Public Sans', sans-serif; }
.nf-hero-btn-primary { background-color: #C79A3E; color: #0E2A47; }
.nf-hero-btn-secondary { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.nf-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 16px; margin-top: 36px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; max-width: 620px; }
.nf-hero-stat strong { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 22px; color: #C79A3E; }
.nf-hero-stat span { font-size: 11.5px; color: #AEBDCB; }

/* -- Trámites más buscados -- */
.nf-buscados-heading { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; color: #0E2A47; margin: 0 0 20px; }
.nf-buscados { display: grid; gap: 12px; }
.nf-buscados-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #EDE6D8; border-radius: 12px; padding: 14px 16px; text-decoration: none; color: #16232F; transition: border-color .15s ease, box-shadow .15s ease; }
.nf-buscados-item:hover { border-color: #C79A3E; box-shadow: 0 10px 22px rgba(14,42,71,.08); }
.nf-buscados-num { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 20px; color: #C79A3E; min-width: 24px; }
.nf-buscados-text { display: flex; flex-direction: column; flex: 1; font-size: 15px; }
.nf-buscados-text small { color: #8B96A1; font-size: 12px; }
.nf-arrow { color: #C79A3E; }

/* -- Tarjetas de categoría -- */
.nf-cats-heading { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; color: #0E2A47; margin: 0 0 20px; }
.nf-cats-grid { display: grid; gap: 20px; }
.nf-cat-card { display: block; background: #fff; border: 1px solid #EDE6D8; border-radius: 14px; padding: 26px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.nf-cat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(14,42,71,.08); }
.nf-cat-icon { font-size: 28px; display: block; margin-bottom: 12px; line-height: 1; }
.nf-cat-icon svg { width: 28px; height: 28px; fill: #0E2A47; }
.nf-cat-card h3 { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; color: #0E2A47; margin: 0 0 6px; }
.nf-cat-card p { font-size: 13.5px; color: #8B96A1; margin: 0; }

/* -- Paso a paso -- */
.nf-steps-heading { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; color: #0E2A47; margin: 0 0 24px; }
.nf-steps { display: grid; gap: 24px; }
.nf-step { text-align: center; }
.nf-step-num { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: #0E2A47; color: #C79A3E; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 24px; margin-bottom: 14px; }
.nf-step h3 { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.nf-step p { font-size: 14px; line-height: 1.55; margin: 0; }

/* -- Historias que ya lo resolvieron (testimonios) -- */
.nf-testimonios-heading { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; color: #0E2A47; margin: 0 0 20px; }
.nf-testimonials { display: grid; gap: 20px; }
.nf-testimonial { background: #fff; border: 1px solid #EDE6D8; border-radius: 14px; padding: 24px; }
.nf-stars { color: #C79A3E; margin-bottom: 12px; letter-spacing: 2px; }
.nf-testimonial p { font-size: 14px; color: #2A3A48; line-height: 1.6; margin: 0; }
.nf-testimonial-author { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.nf-avatar { width: 38px; height: 38px; border-radius: 50%; background-color: #0E2A47; color: #C79A3E; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.nf-testimonial-author strong { display: block; font-size: 14px; color: #16232F; }
.nf-testimonial-author small { display: block; color: #8B96A1; font-size: 12.5px; }

/* -- Banner información verificada -- */
.nf-verified-banner { display: flex; align-items: center; gap: 18px; background-image: linear-gradient(135deg, #0E2A47, #123A5E); color: #EAF0F6; border-radius: 16px; padding: 28px 32px; }
.nf-verified-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(199,154,62,.16); color: #C79A3E; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.nf-verified-banner h3 { font-family: 'Manrope', sans-serif; color: #fff; font-size: 20px; margin: 0 0 4px; }
.nf-verified-banner p { color: #B8C5D2; font-size: 14px; margin: 0; }

/* -- Preguntas frecuentes -- */
.nf-faq-heading { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; color: #0E2A47; margin: 0 0 20px; }
.nf-faq-list { display: flex; flex-direction: column; gap: 10px; }
.nf-faq-item { background: #fff; border: 1px solid #EDE6D8; border-radius: 12px; padding: 16px 20px; }
.nf-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15.5px; color: #16232F; }
.nf-faq-item summary::-webkit-details-marker { display: none; }
.nf-faq-item p { font-size: 14.5px; color: #5E6B78; line-height: 1.6; margin: 12px 0 0; }
.nf-faq-toggle { color: #C79A3E; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.nf-faq-item[open] .nf-faq-toggle { transform: rotate(45deg); display: inline-block; }

/* ============================================================
   RESPONSIVE — aplica a los grids de los 7 widgets.
   Breakpoints alineados con los que usa Elementor por defecto:
   Tablet <= 1024px, Móvil <= 767px.
   ============================================================ */
@media (max-width: 1024px) {
  .nf-cats-grid,
  .nf-testimonials,
  .nf-steps,
  .nf-buscados { grid-template-columns: repeat(2, 1fr) !important; }
  .nf-hero-stats { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
}
@media (max-width: 767px) {
  .nf-cats-grid,
  .nf-testimonials,
  .nf-steps,
  .nf-buscados { grid-template-columns: 1fr !important; }
  .nf-hero-stats { grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 12px; }
  .nf-hero-title { font-size: 27px; }
  .nf-hero-search { flex-wrap: wrap; }
  .nf-hero-search-btn { width: 100%; padding: 12px 18px; }
  .nf-hero-buttons { flex-direction: column; }
  .nf-hero-btn { text-align: center; }
  .nf-verified-banner { flex-direction: column; text-align: center; padding: 24px; }
}