/* =====================================================
   COMO MEDIR — Caixa Kennel
   Arquivo: /assets/css/como-medir.css

   Objetivo:
   - 100% responsivo (mobile-first)
   - Sem quebrar JS (não altera classes/IDs)
   - Sem border-radius (zero em tudo)
   - Visual profissional e consistente
   ===================================================== */

/* ─────────────────────────────────────────────
   Reset local seguro
───────────────────────────────────────────── */
:root{
  --cm-max: 1100px;
  --cm-muted: rgba(0,0,0,.70);
  --cm-border: rgba(0,0,0,.12);
  --cm-shadow: 0 10px 28px rgba(0,0,0,.08);
  --cm-shadow-sm: 0 6px 18px rgba(0,0,0,.07);
  --cm-gap: clamp(14px, 2.6vw, 22px);
}

.como-medir-page img { margin-bottom: 0; }
.como-medir-page main { display: block; }
.como-medir-page a { -webkit-tap-highlight-color: transparent; }

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tipografia e legibilidade do artigo */
.guia-wrap{
  max-width: var(--cm-max);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) var(--spacing-md) var(--spacing-2xl);
}

.guia-content{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* =====================================================
   HERO
===================================================== */
.guia-hero{
  background: #000;
  padding: clamp(26px, 6vw, 70px) var(--spacing-md) clamp(18px, 4vw, 44px);
  text-align: center;
}

.guia-hero-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.guia-hero h1{
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5.4vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.5;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-md);
  text-wrap: balance;
}

.guia-hero h1 em{
  font-style: normal;
  font-family: var(--font-impact);
  color: var(--color-primary);
  text-transform: uppercase;
  word-spacing: -9px;
}

/* ===================================
   PRODUTOS HERO DESC — moderno e discreto
   =================================== */

.guia-hero-sub{
  max-width: 68ch;
  margin: 14px auto 0;
  padding: 14px 18px;

  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  line-height: 1.85;
  letter-spacing: .01em;

  color: rgba(255,255,255,.78);      /* assume hero escuro */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}

/* Barra vermelha animada */
.guia-hero-sub:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:100%;
  background:var(--color-primary);
  transform:scaleY(0);
  transform-origin:top;
  animation:barraGrow 900ms cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes barraGrow{
  to{
    transform:scaleY(1);
  }
}

.guia-hero-sub strong{
  color: #fff;
  font-weight: 800;
}

@media (max-width: 768px){
  .guia-hero-sub{
    max-width: 92vw;
    margin-top: 12px;
    padding: 12px 14px;
    line-height: 1.75;
  }
}

@media (prefers-reduced-motion: reduce){
  .guia-hero-sub{ transition: none !important; }
}

/* ========================================
   GUIA HERO DEC - BARRA DEGRADÊ
   ======================================== */

.guia-hero-dec {
  height: 50px;
  background: linear-gradient(to bottom, #000 0%, #fff 100%);
}

/* =====================================================
   Cards
===================================================== */
.guia-card{
  background: #fff;
  border: 1px solid var(--cm-border);
  box-shadow: var(--cm-shadow-sm);
  padding: clamp(16px, 3vw, 26px);
  border-radius: 0;
}

.guia-card h2{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.22rem, 3.6vw, 1.9rem);
  line-height: 1.9;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.guia-card h3{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 3vw, 1.2rem);
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.guia-card p{
  color: var(--cm-muted);
  line-height: 1.85;
  margin: 0 0 12px;
  text-wrap: pretty;
}

.guia-card p:last-child{ margin-bottom: 0; }

/* Badge A/C/D no H3 */
.h3-badge{
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 0;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}

/* Callout */
.guia-callout{
  margin-top: 16px;
  border-left: 3px solid var(--color-primary);
  background: rgba(196,0,0,.06);
  padding: 14px 16px;
  border-radius: 0;
}

.guia-callout p{
  margin: 0;
  color: rgba(0,0,0,.78);
  line-height: 1.75;
}

/* =====================================================
   Grid (conteúdo + lateral)
===================================================== */
.guia-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: var(--cm-gap);
  align-items: start;
}

@media (max-width: 1024px){
  .guia-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   Imagem + legenda
===================================================== */
.guia-imgbox{
  border: 1px solid var(--cm-border);
  background: #fff;
  box-shadow: var(--cm-shadow-sm);
  border-radius: 0;
  overflow: hidden;
}

.guia-imgbox figure{ margin: 0; }
.guia-imgbox img{ width: 100%; }

.guia-imgbox figcaption{
  padding: 12px 14px;
  color: var(--cm-muted);
  font-size: .92rem;
  line-height: 1.6;
  border-top: 1px solid rgba(0,0,0,.10);
}

/* =====================================================
   Checklist
===================================================== */
.guia-checklist{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.guia-checklist li{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  color: var(--cm-muted);
  line-height: 1.65;
  font-size: .97rem;
  align-items: start;
}

.check-icon{
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 0;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

/* =====================================================
   Passo a passo numerado (corrigido: era "display:flex" + grid-template)
===================================================== */
.guia-steps{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: step;
}

.guia-steps li{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  color: var(--cm-muted);
  line-height: 1.75;
  font-size: .98rem;
  counter-increment: step;
}

.guia-steps li::before{
  content: counter(step);
  width: 30px;
  height: 30px;
  background: #000;
  color: #fff;
  border-radius: 0; /* sem radius */
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .95rem;
  margin-top: 2px;
}

.guia-steps li strong{ color: #000; }

/* =====================================================
   Erros comuns
===================================================== */
.guia-errors{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.guia-errors li{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(196,0,0,.18);
  background: rgba(196,0,0,.03);
  border-radius: 0;
  color: var(--cm-muted);
  line-height: 1.65;
  font-size: .97rem;
}

.err-icon{
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 2px;
}

/* =====================================================
   Links do guia
===================================================== */
.guia-link{
  color: var(--color-primary);
  font-weight: 900;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.guia-link:hover{ text-decoration: underline; }

/* =====================================================
   CTA Row (botões)
   Obs: mantém .btn-cta do seu shared-ui/styles.css.
===================================================== */
.guia-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  align-items: stretch;
}

@media (max-width: 640px){
  .guia-cta-row{ flex-direction: column; }
  .guia-cta-row .btn-cta{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* =====================================================
   FAQ (details/summary)
===================================================== */
.guia-faq{ margin-top: 8px; }

.guia-faq details{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  margin-top: 10px;
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
  border-radius: 0;
  overflow: hidden;
}

.guia-faq summary{
  cursor: pointer;
  list-style: none;
  padding: 16px 56px 16px 16px;
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.25;
}

.guia-faq summary::-webkit-details-marker{ display: none; }

.guia-faq summary::after{
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(196,0,0,.06);
  color: var(--color-primary);
  font-weight: 900;
  border-radius: 0;
}

.guia-faq details[open] summary::after{ content: "–"; }

.guia-faq .faq-answer{
  padding: 0 16px 16px;
  color: var(--cm-muted);
  line-height: 1.85;
  word-break: break-word;
}

/* =====================================================
   Toques finais: mobile e acessibilidade
===================================================== */
@media (max-width: 420px){
  .guia-card{ padding: 16px; }
  .guia-faq summary{ font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* =========================================
   PASSO A PASSO — versão canônica (número nativo do <ol>)
   ========================================= */

#passo-a-passo .guia-steps{
  list-style: disc;
  list-style-position: outside;

  margin: 16px 0 0 !important;
  padding-left: 1.25rem !important; /* recuo controlado */
  
  display: block !important;        /* não deixa virar grid/flex por acidente */
  counter-reset: none !important;   /* mata counter antigo */
}

#passo-a-passo .guia-steps > li{
  display: list-item !important;    /* força comportamento correto */
  margin: 0 0 25px 0 !important;
  padding: 0 !important;

  color: var(--cm-muted);
  line-height: 1.85;
  font-size: .98rem;

  /* evita o texto “explodir” pra fora */
  overflow-wrap: anywhere;
}

/* remove o número fake (se existir de versões anteriores) */
#passo-a-passo .guia-steps > li::before{
  content: none !important;
  display: none !important;
}

/* deixa o número com cara premium */
#passo-a-passo .guia-steps > li::marker{
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 900;
}

/* mobile: recuo menor e respiro melhor */
@media (max-width: 520px){
  #passo-a-passo .guia-steps{
    padding-left: 0.9rem !important;
  }
  #passo-a-passo .guia-steps > li{
    font-size: .97rem;
    margin-bottom: 12px !important;
  }
}