/* ============================================================
   Auditas — Subpáginas de servicios
   Hero oscuro + secciones de contenido. Reutiliza: header, pills
   (services.css), FAQ (faq.css), form (form.css) y footer.
   ============================================================ */

/* ---- Sub-hero ---- */
.subhero {
  position: relative;
  background: linear-gradient(126.63deg, var(--black60) 4.2%, var(--black90) 94.4%);
  overflow: hidden;
  isolation: isolate;
  /* El header fijo (65px) siempre está visible en subpáginas */
  padding: calc(var(--header-h) + clamp(44px, 7vw, 76px)) 0 clamp(44px, 6vw, 68px);
}
.subhero__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.subhero__deco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.55;
}
.subhero__inner {
  position: relative;
  z-index: 1;
  /* Misma columna editorial que .subsection__inner (820px) para que el
     hero quede alineado con el resto del contenido a cualquier resolución. */
  max-width: 820px;
  margin-inline: auto;
}

.subhero__breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-body);
  font-size: var(--fs-mini);
  color: var(--gray40);
  /* Recuadro de hover: padding + borde siempre presentes (transparentes),
     compensados con margen negativo para no desplazar el layout ni el título. */
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  margin: -7px 0 13px -13px;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.subhero__breadcrumb:hover {
  background: rgba(36, 43, 60, 0.95);
  border-color: rgba(255, 255, 255, 0.28);
}
.subhero__breadcrumb a { color: var(--gray40); transition: color var(--t-fast) var(--ease-out); }
.subhero__breadcrumb a:hover { color: var(--yelludit); }
.subhero__breadcrumb .sep { color: var(--gray60); }
.subhero__breadcrumb [aria-current="page"] { color: var(--yelludit); }

.subhero__title {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 5vw, 47px);
  color: var(--whitef);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-16);
  text-wrap: balance;
}
.subhero__rule {
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-yellow-h);
  margin-bottom: var(--sp-20);
}
.subhero__tags { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* ---- Secciones de contenido ---- */
.subsection { position: relative; }
.subsection--white { background: var(--whitef); }
.subsection--light { background: var(--gray10); }
.subsection--dark {
  background: linear-gradient(to top, var(--black90) 4%, var(--black70) 90%);
}
.subsection__inner {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 76px) var(--container-pad);
}

.subsection__heading {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.35;
  color: var(--blackdit);
  border-left: 3px solid var(--yelludit);
  padding-left: 20px;
  margin-bottom: var(--sp-28);
  text-wrap: balance;
}
.subsection--dark .subsection__heading { color: var(--whitef); }

.subsection__body {
  padding-left: 23px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.subsection__body p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--blackdit);
}
.subsection--dark .subsection__body p { color: var(--gray30); }

/* Subtítulos dentro de una sección (p. ej. modalidades de capacitación) */
.subsection__subtitle {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--yelludit);
  margin-top: var(--sp-8);
}

/* ---- Lista "Lo que recibe" ---- */
.sublist {
  padding-left: 23px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.sublist__item { display: flex; gap: var(--sp-12); align-items: flex-start; }
.sublist__item img { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.sublist__item span {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--whitef);
}
.sublist + .subsection__subtitle { margin-top: var(--sp-28); }
.subsection__subtitle + .sublist { margin-top: var(--sp-8); }

/* Nota destacada (p. ej. planes de acompañamiento por horas) */
.subnote {
  margin: var(--sp-28) 0 0 23px;
  background: var(--black80);
  border: 1px solid var(--gray70);
  border-radius: var(--r-m);
  padding: var(--sp-20);
  display: flex;
  gap: var(--sp-12);
  align-items: flex-start;
}
.subnote img { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.subnote p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--grayudit);
}

/* ---- Overrides de FAQ en subpáginas (fondo claro, como el mockup) ---- */
body.subpage .faq { background: var(--whitef); }
body.subpage .faq__title { color: var(--blackdit); }
body.subpage .faq-item { border-color: var(--gray30); }

/* ---- Responsive ---- */
@media (max-width: 560px) {
  .subsection__body, .sublist { padding-left: 0; margin-left: 0; }
  .subsection__heading { padding-left: 14px; }
}

/* ============================================================
   V2 — Propuesta elevada (piloto: Revisoría Fiscal)
   ============================================================ */

/* Barra de progreso de lectura (bajo el header fijo) */
.sp-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 999;
  background: transparent;
  pointer-events: none;
}
.sp-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-yellow-h);
  border-radius: 0 3px 3px 0;
  transition: width 0.08s linear;
}

/* Hero v2: más aire + check de marca gigante con parallax */
.subhero--v2 {
  padding: calc(var(--header-h) + clamp(56px, 9vw, 104px)) 0 clamp(56px, 8vw, 92px);
}
.subhero--v2::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--grad-yellow-h);
  opacity: 0.85;
}
.subhero__brandcheck {
  position: absolute;
  top: 50%;
  right: clamp(-340px, -18vw, -120px);
  width: clamp(420px, 52vw, 780px);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.subhero__brandcheck img { width: 100%; height: auto; }
.subhero--v2 .subhero__title { font-size: clamp(49px, 6vw, 56px); }
.subhero__cta { margin-top: var(--sp-28); display: flex; }

/* Sección "contexto": statement editorial + párrafo líder + textura de puntos */
.subsection--dots::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: min(440px, 52%);
  height: 240px;
  background-image: radial-gradient(rgba(36, 43, 46, 0.12) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(215deg, #000 20%, transparent 75%);
  mask-image: linear-gradient(215deg, #000 20%, transparent 75%);
  pointer-events: none;
}
.subsection__heading--xl {
  font-size: clamp(25px, 3.4vw, 34px);
  line-height: 1.3;
  border-left-width: 4px;
  padding-left: 19px; /* 4px borde + 19px = 23px → alinea el texto con el del cuerpo */
}
/* Sección "método": título sticky que acompaña la lectura */
.subsection__inner--wide { max-width: 1080px; }
.subsection__grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.subsection__stickycol {
  position: sticky;
  top: calc(var(--header-h) + 28px);
}
.subsection__rule {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-yellow-h);
  margin-bottom: var(--sp-16);
}
.subsection__heading--bare {
  border-left: 0;
  padding-left: 0;
  margin-bottom: 0;
  font-size: clamp(21px, 2.4vw, 26px);
}
.subsection__body--flush { padding-left: 0; }

/* Tarjeta de vidrio con anillo dorado (eco de la burbuja destacada del home) */
.spcard {
  position: relative;
  border: 4px solid transparent;
  border-radius: 16px;
  padding: clamp(28px, 4.5vw, 48px);
  background:
    radial-gradient(120% 80% at 24% 12%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%) padding-box,
    rgba(20, 22, 28, 0.55) padding-box;
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 14px 16px 34px rgba(0, 0, 0, 0.50);
}
.spcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(180deg, var(--seyedit) 0%, var(--yelludit) 50%, var(--grayudit) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.spcard__title {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--yelludit);
  margin-bottom: var(--sp-24);
}
.spcard .sublist { padding-left: 0; gap: var(--sp-16); }
.spcard .sublist__item span { font-size: 16px; }
/* Dentro de la tarjeta el check-bullet arranca en 0 (sin el padding-left del
   layout plano); alinear la burbuja de nota al mismo borde. */
.spcard .subnote { margin-left: 0; }

/* Fondo decorativo con parallax en secciones oscuras */
.subdeco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.subdeco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
.subsection--dark .subsection__inner { position: relative; z-index: 1; }

/* ---- Responsive V2 ---- */
@media (max-width: 880px) {
  .subsection__grid { grid-template-columns: 1fr; }
  .subsection__stickycol { position: static; }
  .subhero__brandcheck { opacity: 0.3; width: 420px; right: -220px; }
}

/* ============================================================
   V2.1 — Hero con líneas interactivas + icono de servicio,
          Método con puntos en loop automático,
          y banda de imagen de ruta tras el formulario.
   ============================================================ */

/* Hero: canvas de líneas (encima del icono) + icono grande "medio cortado" */
.subhero--lines { position: relative; overflow: hidden; isolation: isolate; }
.subhero--lines .ilines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.subhero__icon {
  position: absolute;
  top: 50%;
  right: clamp(-170px, -7vw, -48px);
  width: clamp(300px, 42vw, 580px);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 22px 55px rgba(0, 0, 0, 0.55));
}
.subhero__icon img { display: block; width: 100%; height: auto; }
.subhero--lines .subhero__inner { position: relative; z-index: 2; }

/* Método: cuadrícula de puntos con animación automática en loop */
.subsection--dots-auto { position: relative; overflow: hidden; isolation: isolate; }
.subsection--dots-auto .method-dots {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.subsection--dots-auto .subsection__inner { position: relative; z-index: 1; }

/* Banda de imagen de ruta (full-bleed) tras el formulario */
.ruta { position: relative; width: 100%; line-height: 0; background: var(--black90); }
.ruta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--grad-yellow-h); opacity: 0.85; z-index: 1;
}
.ruta__img {
  display: block; width: 100%;
  height: clamp(200px, 32vw, 440px);
  object-fit: cover; object-position: center 42%;
}

/* Responsive V2.1 */
@media (max-width: 880px) {
  .subhero__icon { opacity: 0.5; width: clamp(240px, 62vw, 360px); right: -110px; }
}
@media (max-width: 560px) {
  .subhero__icon { opacity: 0.35; right: -140px; }
  .ruta__img { height: clamp(170px, 46vw, 240px); }
}