/* Holdera detail pages v2 — editorial product system */
:root {
  --paper: #f7f6f2;
  --cream: #eceae4;
  --olive: #9ba078;
  --olive-dark: #34382d;
}

body { background: var(--paper); }
.detail-nav { color: #171813; }
.detail-nav .detail-logo img { filter: invert(1); }
.detail-nav.is-scrolled { background: rgba(247, 246, 242, .94); }
.detail-nav:not(.is-scrolled) .detail-cta { background: #171813; color: #fff; }

.detail-hero {
  min-height: auto;
  padding: 132px 0 92px;
  background: var(--paper);
  color: #171813;
}
.detail-hero__grid { grid-template-columns: minmax(330px, .72fr) minmax(560px, 1.28fr); gap: 76px; }
.detail-crumb { color: rgba(23, 24, 19, .45); }
.detail-crumb a:hover { color: #171813; }
.detail-kicker { color: #737952; }
.detail-hero h1 { color: #171813; font-size: clamp(50px, 4.7vw, 72px); }
.detail-hero__lead { color: rgba(23, 24, 19, .61); }
.detail-hero__actions .detail-cta { background: #171813; color: #fff; }
.detail-text-link { color: rgba(23, 24, 19, .62); border-color: rgba(23, 24, 19, .25); }

.concept {
  min-height: 548px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: radial-gradient(circle at 52% 43%, #f5f5f2 0, #ebeae6 48%, #e2e1dd 100%);
  box-shadow: none;
  transform: none;
  overflow: hidden;
}
.concept::before { display: none; }
.concept__top { display: none; }
.concept__body {
  min-height: 548px;
  padding: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  overflow: visible;
}
.concept__body > .concept__bar,
.concept__body > .demo-note,
.concept__body > .ui-grid,
.concept__body > .ui-board,
.concept__body > .room-grid,
.concept__body > .kpi-row,
.concept__body > .timeline,
.concept__body > .spark,
.concept__body > .ui-phone { display: none; }

.demo-canvas {
  width: min(560px, 88%);
  min-height: 314px;
  padding: 18px;
  color: #20211d;
  border: 1px solid rgba(31, 32, 27, .11);
  border-radius: 8px;
  background: #fbfaf7;
  box-shadow: 0 18px 42px rgba(35, 37, 31, .10), 0 2px 7px rgba(35, 37, 31, .05);
  font-family: var(--sans);
  text-align: left;
}
.demo-canvas--phone { width: 226px; min-height: 410px; padding: 13px; border: 7px solid #252620; border-radius: 28px; }
.demo-canvas--brief { width: min(490px, 84%); }
.demo-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 13px; border-bottom: 1px solid rgba(31,32,27,.1); }
.demo-head__title { font: 500 12px/1 var(--sans); }
.demo-head__meta { color: #8a8b83; font-size: 8px; letter-spacing: .7px; text-transform: uppercase; }
.demo-toolbar { display: flex; align-items: center; gap: 5px; margin: 12px 0; }
.demo-pill { padding: 5px 8px; border: 1px solid rgba(31,32,27,.1); border-radius: 999px; color: #777970; background: #fff; font-size: 7px; }
.demo-pill.is-active { color: #fff; border-color: #30342a; background: #30342a; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.demo-grid--4 { grid-template-columns: repeat(4, 1fr); }
.demo-grid--2 { grid-template-columns: 1fr 1fr; }
.demo-card { min-height: 64px; padding: 9px; border: 1px solid rgba(31,32,27,.09); border-radius: 6px; background: #fff; font-size: 8px; }
.demo-card strong { display: block; font-size: 9px; font-weight: 500; }
.demo-card small { display: block; margin-top: 4px; color: #8a8c84; font-size: 7px; line-height: 1.3; }
.demo-card.is-dark { color: #fff; border-color: #35392f; background: #35392f; }
.demo-card.is-dark small { color: rgba(255,255,255,.55); }
.demo-card.is-tint { background: #eef0e7; }
.demo-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; min-height: 36px; border-bottom: 1px solid rgba(31,32,27,.08); font-size: 8px; }
.demo-row:last-child { border-bottom: 0; }
.demo-avatar { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #fff; background: #454a3b; font-size: 7px; }
.demo-row b { font-weight: 500; }
.demo-row small { display: block; margin-top: 1px; color: #90928a; font-size: 7px; }
.demo-state { padding: 4px 6px; border-radius: 999px; color: #556044; background: #e8ecdc; font-size: 6px; white-space: nowrap; }
.demo-state--dark { color: #fff; background: #33372d; }
.demo-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 9px; margin-top: 12px; }
.demo-panel { padding: 12px; border: 1px solid rgba(31,32,27,.09); border-radius: 6px; background: #fff; }
.demo-panel__label { color: #85877f; font-size: 7px; letter-spacing: .65px; text-transform: uppercase; }
.demo-number { margin-top: 5px; font: 400 25px/1 var(--serif); }
.demo-bars { height: 94px; display: flex; align-items: flex-end; gap: 5px; margin-top: 11px; border-bottom: 1px solid rgba(31,32,27,.09); }
.demo-bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: #3b3d36; }
.demo-bars i.is-soft { background: #b3b6a1; }
.demo-wave { height: 90px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.demo-wave i { width: 3px; height: var(--h); min-height: 7px; border-radius: 4px; background: #383b32; }
.demo-call { display: grid; place-items: center; width: 108px; height: 108px; margin: 20px auto 12px; border-radius: 25px; background: #fff; box-shadow: 0 12px 30px rgba(31,32,27,.12); }
.demo-call__icon { font: 400 30px/1 var(--serif); }
.demo-call-controls { display: flex; justify-content: center; gap: 8px; }
.demo-call-controls span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(31,32,27,.12); border-radius: 50%; font-size: 8px; }
.demo-call-controls span:last-child { color: #fff; background: #34372f; }
.demo-thread { display: grid; gap: 7px; padding: 16px 6px 5px; }
.demo-bubble { width: 76%; padding: 8px 10px; border-radius: 9px 9px 9px 2px; color: #5f615a; background: #efeee9; font-size: 8px; line-height: 1.35; }
.demo-bubble.is-own { justify-self: end; border-radius: 9px 9px 2px 9px; color: #fff; background: #353930; }
.demo-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.demo-column { min-height: 175px; padding: 8px; border-radius: 6px; background: #efeee9; }
.demo-column > b { display: block; margin-bottom: 8px; color: #787a72; font-size: 7px; letter-spacing: .5px; text-transform: uppercase; }
.demo-ticket { padding: 8px; margin-top: 5px; border: 1px solid rgba(31,32,27,.07); border-radius: 5px; background: #fff; font-size: 7px; }
.demo-ticket strong { display: block; font-size: 8px; font-weight: 500; }
.demo-ticket span { display: block; margin-top: 3px; color: #96978f; }
.demo-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.demo-day { min-height: 58px; padding: 7px 5px; border: 1px solid rgba(31,32,27,.08); border-radius: 5px; background: #fff; font-size: 7px; }
.demo-day b { display: block; font-size: 8px; font-weight: 500; }
.demo-day span { display: block; margin-top: 14px; color: #86887f; }
.demo-day.is-today { color: #fff; background: #363a30; }
.demo-day.is-today span { color: rgba(255,255,255,.6); }
.demo-standard { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(31,32,27,.08); font-size: 8px; }
.demo-standard:last-child { border-bottom: 0; }
.demo-standard span { color: #888a82; }
.demo-standard b { font-weight: 500; }
.demo-note-card { margin-top: 10px; padding: 10px 12px; border-left: 2px solid #9ba078; color: #66685f; background: #f0f1e9; font-size: 8px; line-height: 1.45; }
.demo-route { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 205px; }
.demo-route span { padding: 7px 9px; border: 1px solid rgba(31,32,27,.1); border-radius: 999px; background: #fff; font-size: 7px; }
.demo-route i { width: 28px; height: 1px; background: #b5b6ae; }
.demo-route strong { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; background: #353930; font: 400 18px/1 var(--serif); }
.demo-phone-notch { width: 55px; height: 5px; margin: -7px auto 15px; border-radius: 8px; background: #252620; }
.demo-bottom-action { margin-top: 13px; padding: 9px; border-radius: 999px; color: #fff; background: #353930; text-align: center; font-size: 8px; }

.intro-strip { padding: 45px 0; background: #eeece6; }
.intro-strip p { font-size: 22px; }
.mini-proof strong { font-size: 24px; }

.detail-section { padding: 108px 0; }
.section-head { margin-bottom: 70px; }
.feature-layout { grid-template-columns: .88fr 1.12fr; gap: 82px; }
.feature-visual { min-height: 610px; padding: 55px; display: grid; place-items: center; border-radius: 4px; background: #ecebe7; }
.feature-visual__inner { width: min(540px, 90%); min-height: auto; height: auto; padding: 22px; border-radius: 7px; background: #fbfaf7; box-shadow: 0 16px 40px rgba(37,39,33,.09); }
.feature-visual__inner .ui-grid { grid-template-columns: 1fr 1fr; }
.feature-visual__inner .ui-card,
.feature-visual__inner .ui-column,
.feature-visual__inner .ui-ticket,
.feature-visual__inner .ui-standards,
.feature-visual__inner .room,
.feature-visual__inner .kpi { border-radius: 5px; }
.detail-section--dark { background: #10110f; }
.step, .fit-card { border-radius: 5px; }
.detail-final { background: #b5bb8e; }
.detail-footer__bottom { color: rgba(255,255,255,.48); }

/* Wide hero compositions deliberately alternate with split ones. */
body[data-page="solution-operaciones"] .detail-hero__grid,
body[data-page="solution-direccion"] .detail-hero__grid,
body[data-page="product-paneles"] .detail-hero__grid,
body[data-page="product-preventive"] .detail-hero__grid,
body[data-page="product-direction"] .detail-hero__grid {
  grid-template-columns: 1fr;
  gap: 52px;
}
body[data-page="solution-operaciones"] .detail-hero__grid > div:first-child,
body[data-page="solution-direccion"] .detail-hero__grid > div:first-child,
body[data-page="product-paneles"] .detail-hero__grid > div:first-child,
body[data-page="product-preventive"] .detail-hero__grid > div:first-child,
body[data-page="product-direction"] .detail-hero__grid > div:first-child {
  max-width: 940px;
  text-align: center;
  margin-inline: auto;
}
body[data-page="solution-operaciones"] .detail-crumb,
body[data-page="solution-direccion"] .detail-crumb,
body[data-page="product-paneles"] .detail-crumb,
body[data-page="product-preventive"] .detail-crumb,
body[data-page="product-direction"] .detail-crumb,
body[data-page="solution-operaciones"] .detail-hero__actions,
body[data-page="solution-direccion"] .detail-hero__actions,
body[data-page="product-paneles"] .detail-hero__actions,
body[data-page="product-preventive"] .detail-hero__actions,
body[data-page="product-direction"] .detail-hero__actions { justify-content: center; }
body[data-page="solution-operaciones"] .detail-hero h1,
body[data-page="solution-direccion"] .detail-hero h1,
body[data-page="product-paneles"] .detail-hero h1,
body[data-page="product-preventive"] .detail-hero h1,
body[data-page="product-direction"] .detail-hero h1,
body[data-page="solution-operaciones"] .detail-hero__lead,
body[data-page="solution-direccion"] .detail-hero__lead,
body[data-page="product-paneles"] .detail-hero__lead,
body[data-page="product-preventive"] .detail-hero__lead,
body[data-page="product-direction"] .detail-hero__lead { margin-inline: auto; }
body[data-page="solution-operaciones"] .concept,
body[data-page="solution-direccion"] .concept,
body[data-page="product-paneles"] .concept,
body[data-page="product-preventive"] .concept,
body[data-page="product-direction"] .concept { min-height: 610px; }
body[data-page="solution-operaciones"] .concept__body,
body[data-page="solution-direccion"] .concept__body,
body[data-page="product-paneles"] .concept__body,
body[data-page="product-preventive"] .concept__body,
body[data-page="product-direction"] .concept__body { min-height: 610px; }

@media (max-width: 1024px) {
  .detail-nav { color: #171813; }
  .detail-hero { padding-top: 116px; }
  .detail-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .concept { width: 100%; }
  .feature-visual { padding: 38px; }
}

@media (max-width: 640px) {
  .detail-hero { padding: 96px 0 54px; }
  .detail-hero h1 { font-size: 47px; }
  .feature-layout { grid-template-columns: 1fr; gap: 42px; }
  .concept, .concept__body { min-height: 430px !important; }
  .concept__body { padding: 20px 10px; }
  .demo-canvas { width: 94%; min-height: 285px; padding: 12px; }
  .demo-canvas--phone { width: 214px; min-height: 390px; }
  .demo-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .demo-board { grid-template-columns: 1fr 1fr; }
  .demo-column:last-child { display: none; }
  .demo-split { grid-template-columns: 1fr; }
  .demo-split .demo-panel:last-child { display: none; }
  .demo-calendar { grid-template-columns: repeat(4, 1fr); }
  .demo-day:nth-child(n+5) { display: none; }
  .demo-route { flex-wrap: wrap; }
  .intro-strip { padding: 32px 0; }
  .feature-visual { min-height: 520px; padding: 22px 10px; }
  .feature-visual__inner { width: 94%; padding: 15px; }
}