/* daezpro.com — 09-service-hero-audience.css
   Plantilla de servicio: breadcrumbs, barra de anclas (.secnav), badge [MOCK], hero de servicio, 'para quien es' (.audience). */

/* ============================================================================
   PLANTILLA DE SERVICIO (F1 · fundación para /servicios/*, /simuladores/*…)
   Componentes nuevos únicamente. Prefijos: .crumbs .secnav .mock .audience
   .deliver .method (reusa .delivery-steps) .cmp .case .refs .rel
   Reutiliza .wrap .sec .kicker .h1 .h2 .lead .btn .checks .card .card--lift
   .ph .faq-item .ctc-* sin redefinirlas.
   ============================================================================ */

/* ---------------------------------------------------------- BREADCRUMBS */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:28px;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--text-body);
}
.crumbs a{ color:var(--text-body); transition:color .16s ease; }
.crumbs a:hover{ color:var(--accent-strong); }
.crumbs__sep{ opacity:.5; }
.crumbs [aria-current="page"]{ color:var(--text-strong); }
.sec--dark .crumbs,.sec--dark .crumbs a{ color:var(--text-muted); }
.sec--dark .crumbs [aria-current="page"]{ color:var(--text-strong); }

/* ---------------------------------------------------- BARRA DE ANCLAS */
.secnav{
  position:sticky;
  top:73px; /* justo bajo .nav (72px + hairline) */
  z-index:40;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
          backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.secnav__inner{
  display:flex;
  gap:clamp(16px,2vw,28px);
  overflow-x:auto;
  scrollbar-width:none;
  padding-block:14px;
}
.secnav__inner::-webkit-scrollbar{ display:none; }
.secnav a{
  flex:0 0 auto;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-body);
  white-space:nowrap;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.secnav a:hover{ color:var(--text-strong); }
.secnav a.is-active{ color:var(--text-strong); border-color:var(--accent); }

/* ---------------------------------------------------------- MOCK BADGE */
.mock{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px 3px 7px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  vertical-align:middle;
}
.mock::before{ content:"◆"; font-size:var(--fs-2xs); }
.mock-block{
  position:relative;
  border:1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--accent) 5%, transparent);
}
.mock-block__tag{
  position:absolute;
  top:-11px; left:16px;
  padding:2px 9px;
  background:var(--surface);
}
.sec--deep .mock-block__tag{ background:var(--bg-canvas); }

/* ---------------------------------------------------- HERO DE SERVICIO */
.svc-hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,5vw,64px);
  align-items:center;
}
.svc-hero__cta{ display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:32px; }
.svc-teaser{ padding:clamp(22px,2.4vw,30px); }
.svc-teaser__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.svc-teaser__k{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-strong);
}
.svc-teaser__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(34px,3.6vw,44px);
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--text-strong);
}
.svc-teaser__num .u{ font-size:.42em; font-weight:600; color:var(--text-body); margin-left:4px; }
.svc-teaser__note{ margin-top:8px; font-size:var(--fs-sm); color:var(--text-body); line-height:1.5; }
.svc-teaser__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  font-weight:600;
  font-size:var(--fs-body);
  color:var(--accent-strong);
}
.svc-teaser__link:hover{ text-decoration:underline; }

/* ---------------------------------------------- "PARA USTED SI…" (audience) */
.audience{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  margin-top:clamp(36px,4vw,52px);
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
}
.audience__item{
  display:flex;
  gap:16px;
  padding:26px 28px;
  background:var(--surface);
}
.audience__mark{
  flex:0 0 auto;
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-family:var(--font-mono);
  font-size:var(--fs-xs); font-weight:700;
}
.audience__txt{ font-size:var(--fs-title); line-height:1.5; color:var(--text-body); padding-top:3px; }
.audience__txt b{ color:var(--text-strong); font-weight:600; }