/*
  Content OS sample page
  Rule: portrait assets keep native ratio via width:100% + height:auto.
  Never set both width and height to 100% on images.
  Sticky topbar is 72px desktop / 64px mobile — hero must clear it.
*/
.cos-hero{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.78fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  /* clear sticky topbar (72px) + air */
  padding:calc(72px + 1.75rem) 24px 2rem;
}
.cos-hero__copy{min-width:0}
.cos-hero__copy h1{
  font-size:clamp(2.55rem,4.6vw,4.4rem);
  max-width:16ch;
  margin:0;
}
.cos-hero__copy .lede{
  max-width:34rem;
  margin-top:1.35rem;
}
.cos-hero__copy .actions{margin-top:1.8rem}
.cos-phone{
  margin:0;
  width:100%;
  max-width:360px;
  justify-self:end;
}
.cos-phone__frame{
  border:1px solid rgba(124,223,252,.32);
  background:#000;
  box-shadow:0 28px 60px rgba(0,0,0,.5);
  line-height:0;
  border-radius:2px;
  overflow:hidden;
}
.cos-phone__frame a{display:block}
.cos-phone__frame img{
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
}
.cos-phone__meta{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-top:.85rem;
  margin-bottom:.25rem;
  font:650 .58rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8fa0a8;
}
.cos-phone__meta b{color:var(--cyan-hi);font-weight:650}

/* space between phone block and audience strip */
.cos-hero + .qc-proof{
  margin-top:1.25rem;
  border-top:1px solid var(--line);
}

/* 5 labels: avoid orphan row looking "stuck" on mobile */
.muestra-page .qc-proof{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.muestra-page .qc-proof span{
  border-right:1px solid var(--line);
}
.muestra-page .qc-proof span:last-child{border-right:0}

.cos-strip{
  max-width:var(--max);
  margin:1.5rem auto 0;
  padding:0 24px 0;
}
.cos-strip__note{
  border:1px solid var(--line-hi);
  background:rgba(0,184,230,.05);
  padding:1.15rem 1.2rem;
  color:#b7c4c9;
  font-size:.98rem;
  line-height:1.55;
  margin:0;
}
.cos-strip__note strong{color:var(--text-strong);font-weight:650}
.cos-strip + .section{
  padding-top:clamp(3.5rem,6vw,5.5rem);
}

.cos-deck{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  max-width:var(--max);
  margin:0 auto;
}
.cos-card{
  margin:0;
  min-width:0;
  border:1px solid var(--line);
  background:#05080a;
  transition:border-color .2s ease, transform .25s var(--ease);
}
.cos-card:hover,
.cos-card:focus-within{
  border-color:rgba(0,184,230,.45);
  transform:translateY(-3px);
}
.cos-card a{display:block;color:inherit}
.cos-card__media{
  background:#000;
  line-height:0;
}
.cos-card__media img{
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
}
.cos-card figcaption{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  padding:.75rem .85rem;
  border-top:1px solid var(--line);
  font:650 .58rem var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#8fa0a8;
}
.cos-card figcaption span:last-child{color:var(--cyan-hi)}
.cos-checks{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line-hi);
  max-width:var(--max);
  margin:0 auto;
}
.cos-checks article{
  padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--panel);
  min-width:0;
}
.cos-checks article + article{border-left:1px solid var(--line)}
.cos-checks .micro{display:block;color:var(--cyan-hi);margin-bottom:.75rem}
.cos-checks h3{margin:0 0 .7rem;font-size:clamp(1.2rem,2vw,1.55rem)}
.cos-checks p{margin:0;color:var(--muted)}

/* anchors clear sticky header */
#deck,
#diagnostico,
#fit,
#problema{
  scroll-margin-top:calc(72px + 1rem);
}

@media (max-width:980px){
  .cos-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cos-checks{grid-template-columns:1fr}
  .cos-checks article + article{border-left:0;border-top:1px solid var(--line)}
  .muestra-page .qc-proof{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .muestra-page .qc-proof span:nth-child(2n){border-right:0}
  .muestra-page .qc-proof span:nth-child(n+3){border-top:1px solid var(--line)}
  /* 5th label spans full width so it doesn't look stuck alone */
  .muestra-page .qc-proof span:last-child{
    grid-column:1 / -1;
    border-right:0;
  }
}

@media (max-width:900px){
  .cos-hero{
    grid-template-columns:1fr;
    /* clear sticky topbar 64px mobile */
    padding:calc(64px + 1.35rem) 18px 1.75rem;
    gap:1.75rem;
  }
  .cos-hero__copy h1{
    max-width:none;
    font-size:clamp(2.35rem,9vw,3.1rem);
  }
  .cos-phone{
    max-width:min(100%,340px);
    justify-self:center;
    order:2;
    width:100%;
  }
  .cos-hero__copy{order:1}
  .cos-hero__copy .actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .cos-hero__copy .button{width:100%}
  .cos-hero + .qc-proof{margin-top:1.75rem}
  #deck,
  #diagnostico,
  #fit,
  #problema{
    scroll-margin-top:calc(64px + 0.85rem);
  }
}

@media (max-width:600px){
  .cos-hero{
    padding-left:18px;
    padding-right:18px;
  }
  .cos-strip{padding-inline:18px;margin-top:1.25rem}
  .cos-deck{gap:.7rem}
  .cos-card figcaption{font-size:.52rem;padding:.6rem .65rem}
  .muestra-page .qc-proof span{
    padding:.85rem .5rem;
    font-size:.58rem;
  }
}