/* THIELKE: product-led case study, framed by Pixel's editorial system. */
.thielke-case {
  --thielke-bg: var(--color-bg);
  --thielke-ink: var(--color-text);
  --thielke-muted: var(--color-text-muted);
  --thielke-accent: #D62828;
  --thielke-paper: var(--thielke-bg);
  color: var(--thielke-ink);
}

/* THIELKE-only header accents; no changes to the shared navigation. */
.thielke-case .site-header.is-compact .site-nav__cta,
.thielke-case .site-header[data-surface="dark"].is-compact .site-nav__cta,
.thielke-case .mobile-menu__cta {
  background: var(--thielke-accent);
  color: #fff;
}
.thielke-case .site-header.is-compact .site-nav__cta:hover,
.thielke-case .site-header.is-compact .site-nav__cta:focus-visible {
  box-shadow: 0 0 0 1px rgba(214, 40, 40, .3), 0 8px 22px rgba(214, 40, 40, .16);
}
.thielke-case .site-nav__cta:focus-visible,
.thielke-case .mobile-menu__cta:focus-visible {
  outline: 2px solid var(--thielke-accent);
  outline-offset: 3px;
}

/* The opening uses the same editorial intro/hero components as OZ and GPS. */
.thielke-intro,
.thielke-hero {
  background: var(--thielke-paper);
}
.thielke-hero__frame {
  background: transparent;
}
.thielke-eyebrow {
  color: var(--thielke-accent);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.thielke-work__directory figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 13px;
  color: var(--thielke-muted);
}

/* Introductory concept: same editorial hierarchy and dividers as other case studies. */
.thielke-principle { background: var(--thielke-bg); }
.thielke-principle__inner {
  border-top: 1px solid rgba(14, 14, 14, .14);
  border-bottom: 1px solid rgba(14, 14, 14, .14);
  padding: clamp(48px, 5vw, 72px) 0 clamp(54px, 5.5vw, 78px);
}
.thielke-principle__eyebrow { display: block; margin-bottom: 30px; }
.thielke-principle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(48px, 9vw, 140px);
  align-items: start;
}
.thielke-principle h2, .thielke-close h2 { margin: 0; max-width: 15ch; font-size: clamp(2.5rem, 5vw, 5.25rem); line-height: .98; letter-spacing: -.065em; }
.thielke-principle h2 { font-size: clamp(2.7rem, 4.65vw, 4.9rem); }
.thielke-principle__copy { max-width: 55ch; }
.thielke-principle__copy > p { margin: 0; color: var(--thielke-ink); font-size: clamp(1rem, 1.18vw, 1.125rem); line-height: 1.6; }
.thielke-principle__copy > p + p { margin-top: 18px; }
.thielke-principle__journey {
  display: flex;
  align-items: flex-start;
  width: min(100%, 480px);
  margin-top: clamp(28px, 3.2vw, 42px);
}
.thielke-principle__step { display: flex; flex: 0 0 86px; flex-direction: column; align-items: center; gap: 12px; }
.thielke-principle__icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(214, 40, 40, .4); border-radius: 50%; color: var(--thielke-accent); }
.thielke-principle__icon svg { width: 27px; height: 27px; }
.thielke-principle__step-label { font-size: .88rem; font-weight: 600; }
.thielke-principle__connector { flex: 1; min-width: 22px; height: 1px; margin-top: 28px; background: rgba(214, 40, 40, .38); }

/* Historial: same two-column editorial arrangement used for GPS feature blocks. */
/* 02 — Una narrativa compacta: historial, seguimiento y documentación. */
.thielke-record { background: var(--thielke-bg); }
.thielke-record__inner {
  position: relative;
  padding-block: clamp(56px, 6vw, 86px) clamp(66px, 7vw, 96px);
}
.thielke-record__inner::after {
  content: "";
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: 0;
  border-bottom: 1px solid rgba(14, 14, 14, .14);
}
.thielke-record__layout {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  align-items: start;
  gap: clamp(48px, 6.5vw, 104px);
}
.thielke-record__copy { min-width: 0; }
.thielke-record__copy > .meta { display: block; margin-bottom: 23px; }
.thielke-record__copy h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.1rem, 3.2vw, 3.85rem);
  line-height: 1.02;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.thielke-record__lead {
  margin: 22px 0 0;
  max-width: 47ch;
  font-size: clamp(1rem, 1.08vw, 1.15rem);
  line-height: 1.58;
}
.thielke-record__features {
  display: grid;
  gap: 14px;
  margin-top: clamp(38px, 4vw, 56px);
}
.thielke-record__feature {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 24px 22px;
  border: 1px solid rgba(14, 14, 14, .12);
  background: #fbfbf9;
}
.thielke-record__feature > svg { width: 24px; height: 24px; margin-top: 1px; color: var(--thielke-accent); }
.thielke-record__feature h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 650; line-height: 1.3; }
.thielke-record__feature p { max-width: 46ch; margin: 0; font-size: 1rem; line-height: 1.58; }
.thielke-record__screen { min-width: 0; width: min(100%, 720px); justify-self: end; margin: 0; }
.thielke-record__screen img { display: block; width: 100%; height: auto; border: 1px solid rgba(14, 14, 14, .14); }
.thielke-record__screen figcaption { padding-top: 12px; color: var(--thielke-muted); font-size: .64rem; }

/* 03 — Composición asimétrica: directorio a la izquierda y explicación a la derecha. */
.thielke-work { background: var(--thielke-bg); }
.thielke-work__inner {
  position: relative;
  padding-block: clamp(64px, 7vw, 96px) clamp(70px, 8vw, 108px);
}
.thielke-work__inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--page-pad);
  right: var(--page-pad);
  border-bottom: 1px solid rgba(14, 14, 14, .14);
}
.thielke-work__heading { margin-bottom: clamp(24px, 3vw, 38px); }
.thielke-work__heading > .thielke-eyebrow { display: block; margin-bottom: 24px; }
.thielke-work__heading h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.25rem, 3.15vw, 3.4rem);
  line-height: 1.015;
  letter-spacing: -.062em;
  text-wrap: balance;
}
.thielke-work__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.thielke-work__directory { min-width: 0; margin: 0; }
.thielke-work__directory img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(14, 14, 14, .14);
}
.thielke-work__details { min-width: 0; padding-top: 0; }
.thielke-work__note {
  max-width: 39ch;
  margin: 0;
  font-size: clamp(1.02rem, 1.15vw, 1.14rem);
  line-height: 1.68;
  color: var(--thielke-ink);
}
.thielke-work__capabilities {
  display: grid;
  gap: 0;
  margin: clamp(28px, 3.5vw, 46px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(14, 14, 14, .16);
}
.thielke-work__capabilities li {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(14, 14, 14, .16);
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  line-height: 1.45;
}
.thielke-work__capabilities svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--thielke-accent);
}

/* 04 — Cierre editorial en fondo claro, alineado al sistema de OZ/GPS. */
.thielke-close { background: var(--thielke-bg); color: var(--thielke-ink); }
.thielke-close__inner {
  position: relative;
  padding-block: clamp(64px, 7vw, 96px) clamp(46px, 5vw, 66px);
}
.thielke-close__top {
  display: block;
}
.thielke-close__intro {
  display: block;
}
.thielke-close__intro .thielke-eyebrow {
  display: block;
  margin-bottom: 16px;
}
.thielke-close h2 {
  margin: 0;
  max-width: 15.5ch;
  font-size: clamp(2.35rem, 3.55vw, 4.05rem);
  line-height: .98;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.thielke-close__lead {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: clamp(1rem, 1.12vw, 1.14rem);
  line-height: 1.62;
}
.thielke-close__cards {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(28px, 3vw, 40px);
  padding-block: clamp(20px, 2vw, 28px);
  border-top: 0;
  border-bottom: 0;
}
.thielke-close__techcard,
.thielke-close__statuscard {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
}
.thielke-close__techcard {
  align-self: start;
  justify-self: start;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid rgba(14, 14, 14, .13);
  background: transparent;
}
.thielke-close__techcard-label {
  display: block;
  margin-bottom: 13px;
  color: var(--thielke-accent);
}
.thielke-close__techcard p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--thielke-ink);
}
.thielke-close__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 11px;
  border: 1px solid var(--color-line);
  border-radius: 99px;
  color: var(--thielke-ink);
  font-size: .67rem;
}
.thielke-close__statusdot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #008a50;
  border-radius: 50%;
}
.thielke-close__statuscard h3 {
  margin: 13px 0 8px;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.35;
}
.thielke-close__statuscard p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.thielke-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(36px, 4vw, 52px) 0 0;
  border-top: 1px solid rgba(14, 14, 14, .14);
  border-bottom: 1px solid rgba(14, 14, 14, .14);
}
.thielke-snapshot > div {
  position: relative;
  min-width: 0;
  padding: 28px 24px 30px 0;
}
.thielke-snapshot > div + div {
  padding-left: 32px;
}
.thielke-snapshot > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(14, 14, 14, .11);
}
.thielke-snapshot dd {
  margin: 0;
  font-size: clamp(2.7rem, 4.2vw, 4.6rem);
  line-height: .92;
  letter-spacing: -.07em;
  color: var(--thielke-ink);
}
.thielke-snapshot dt {
  margin-top: 12px;
  font-size: 1.04rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--thielke-ink);
}
.thielke-snapshot p {
  margin: 12px 0 0;
  max-width: 24ch;
  font-size: .98rem;
  line-height: 1.58;
  color: var(--thielke-muted);
}
.thielke-close__caption {
  margin: 18px 0 0;
  color: var(--thielke-muted);
  font-size: .86rem;
  line-height: 1.55;
  opacity: .8;
}
.thielke-pagination .case-pagination__next { display: inline-flex; }

@media (max-width: 780px) {
  .thielke-record__layout { grid-template-columns: 1fr; gap: 30px; }
  .thielke-record__copy h2 { max-width: 17ch; }
  .thielke-record__screen { width: min(100%, 680px); justify-self: start; }




  .thielke-principle__grid { grid-template-columns: 1fr; gap: 26px; }

  .thielke-principle h2, .thielke-close h2 { font-size: clamp(2.55rem, 11vw, 4rem); }
  .thielke-close__top { display: block; }
  .thielke-close__intro { display: block; }
  .thielke-close__cards { grid-template-columns: 1fr; gap: 24px; }
  .thielke-close__statuscard { padding-top: 22px; border-top: 1px solid rgba(14, 14, 14, .1); }
  .thielke-principle__grid { gap: 26px; }
  .thielke-principle__eyebrow { margin-bottom: 24px; }
  .thielke-principle__journey { margin-top: 36px; }
  .thielke-work__layout { gap: 24px; }
  .thielke-work__heading { margin-bottom: 22px; }
  .thielke-work__heading h2 { font-size: clamp(2rem, 4.15vw, 2.8rem); }
  .thielke-work__note { font-size: 1rem; }
  .thielke-work__capabilities { margin-top: 24px; }
  .thielke-work__capabilities li { gap: 12px; padding-block: 14px; font-size: .94rem; }
  .thielke-snapshot { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .thielke-snapshot > div { padding: 22px 18px 24px 0; }
  .thielke-snapshot > div:nth-child(odd) { padding-left: 0; }
  .thielke-snapshot > div:nth-child(even) { padding-left: 22px; }
  .thielke-snapshot > div:nth-child(n+3) { border-top: 1px solid rgba(14, 14, 14, .11); }
  .thielke-snapshot > div:nth-child(odd)::before { display: none; }
  .thielke-close__caption { margin-top: 16px; }
}

@media (max-width: 520px) {
  .thielke-record__inner { padding-block: 52px 64px; }
  .thielke-record__copy h2 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .thielke-record__features { gap: 12px; }
  .thielke-record__feature { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .thielke-record__feature > svg { width: 21px; height: 21px; }
  .thielke-record__feature h3 { font-size: 1rem; }
  .thielke-record__feature p { font-size: .95rem; }



  .thielke-work__inner { padding-block: 52px 66px; }
  .thielke-work__heading h2 { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .thielke-work__capabilities li { gap: 13px; padding-block: 16px; }
  .thielke-work__capabilities svg { width: 22px; height: 22px; flex-basis: 22px; }


  .thielke-close__inner { padding-block: 54px 58px; }
  .thielke-close__lead { margin-top: 20px; }
  .thielke-close__statuscard { padding-inline: 0; }
  .thielke-close__techcard { width: 100%; padding: 16px 18px; }
  .thielke-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .thielke-snapshot > div { padding: 18px 14px 20px 0; }
  .thielke-snapshot > div:nth-child(odd) { padding-left: 0; }
  .thielke-snapshot > div:nth-child(even) { padding-left: 16px; }
  .thielke-snapshot > div:nth-child(odd)::before { display: none; }
  .thielke-snapshot > div:nth-child(n+3) { border-top: 1px solid rgba(14, 14, 14, .11); }
  .thielke-snapshot dd { font-size: clamp(2.45rem, 12vw, 3.25rem); }
  .thielke-snapshot dt { margin-top: 10px; font-size: .98rem; }
  .thielke-snapshot p { margin-top: 10px; font-size: .92rem; line-height: 1.5; }
  .thielke-principle__inner { padding-block: 42px 54px; }
  .thielke-principle__step { flex-basis: 74px; }
  .thielke-principle__icon { width: 50px; height: 50px; }
  .thielke-principle__connector { margin-top: 25px; }

  .thielke-pagination .case-pagination__inner { align-items: flex-start; }
}


@media (max-width: 380px) {
  .thielke-snapshot { grid-template-columns: 1fr; }
  .thielke-snapshot > div { padding: 18px 0 20px; }
  .thielke-snapshot > div + div { border-top: 1px solid rgba(14, 14, 14, .11); }
  .thielke-snapshot > div::before { display: none; }
  .thielke-snapshot dd { font-size: clamp(2.5rem, 14vw, 3.4rem); }
}

/* A single-column reading order on phones and narrow tablets. */
@media (max-width: 700px) {
  .thielke-work__layout { display: flex; flex-direction: column; gap: 30px; }
  .thielke-work__details { order: 0; width: 100%; max-width: none; }
  .thielke-work__directory { order: 1; width: 100%; }
  .thielke-work__heading h2 { max-width: 17ch; font-size: clamp(2.35rem, 8.5vw, 3.5rem); }
  .thielke-work__note { max-width: 55ch; }
}