/* ═══════════════════════════════════════════════════════════
   Páginas interiores. Se carga encima de onda.css y reutiliza
   sus tokens, la barra, el pie y las capas de ambiente.
   ═══════════════════════════════════════════════════════════ */

.pag{overflow-x:hidden}
.pag .nav{transform:none;border-bottom-color:var(--line)}
.pag main{padding-top:clamp(70px,9vh,96px)}

/* ── cabecera de página ─────────────────────────────────── */
.pag-hero{padding-bottom:0}
.miga{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--muted);margin-bottom:clamp(20px,3vh,34px);
}
.miga a{transition:color .3s ease}
.miga a:hover{color:var(--c1)}
.miga span[aria-current]{color:var(--dim)}

.pag-h1{
  font-size:clamp(2rem,6vw,4.2rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.04;
  max-width:18ch;
}
.pag-lead{
  margin-top:22px;max-width:52ch;
  color:var(--dim);font-size:clamp(1.02rem,2.1vw,1.28rem);
}
/* Banda de onda: la firma de ONDA, en versión corta. */
.onda-band{
  height:clamp(90px,13vh,160px);
  margin:clamp(26px,4vh,50px) calc(50% - 50vw) 0;
  width:100vw;
}

/* ── síntomas ───────────────────────────────────────────── */
.sintomas{
  list-style:none;margin-top:clamp(34px,5vh,58px);
  display:grid;gap:2px;
}
.sintomas li{
  position:relative;padding:16px 20px 16px 46px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--dim);
  font-size:clamp(.95rem,1.9vw,1.06rem);
}
.sintomas li::before{
  content:"";position:absolute;left:22px;top:50%;
  width:7px;height:1px;background:var(--c1);
}
@media (min-width:900px){ .sintomas{grid-template-columns:1fr 1fr;gap:12px} }

/* ── pasos del enfoque ──────────────────────────────────── */
.pasos{
  display:grid;gap:14px;margin-top:clamp(34px,5vh,58px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.paso{
  padding:clamp(24px,3vw,32px);
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  transition:border-color .45s ease;
}
.paso:hover{border-color:var(--c1)}
.paso h3{font-size:1.06rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.paso p{margin-top:12px;color:var(--dim);font-size:.95rem}

/* ── etiquetas ──────────────────────────────────────────── */
.tags{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:10px;margin-top:clamp(30px,4.5vh,52px);
}
.tags li{
  padding:11px 20px;border:1px solid var(--line);border-radius:40px;
  font-family:var(--mono);font-size:clamp(.66rem,1.5vw,.8rem);
  color:var(--dim);
}

/* ── páginas relacionadas ───────────────────────────────── */
.rels{
  display:grid;gap:14px;margin-top:clamp(34px,5vh,58px);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.rel-card{
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(22px,2.8vw,30px);
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  transition:border-color .45s ease,background .45s ease,transform .45s ease;
}
.rel-card:hover{border-color:var(--c1);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.rel-t{font-size:1.04rem;font-weight:800;letter-spacing:-.02em}
.rel-d{color:var(--dim);font-size:.92rem;line-height:1.5}

/* ── pie ancho ──────────────────────────────────────────── */
.pie-ancho{
  display:grid;gap:clamp(26px,4vw,60px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding:clamp(40px,6vh,72px) var(--pad);
  max-width:1180px;margin:0 auto;
}
.pie-col{display:flex;flex-direction:column;gap:9px}
.pie-t{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c1);margin-bottom:5px;
}
.pie-col a,.pie-x{
  font-size:.88rem;color:var(--muted);
  transition:color .3s ease;overflow-wrap:anywhere;
}
.pie-col a:hover{color:var(--ink)}
.pie-col a[aria-current]{color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  .paso,.rel-card,.miga a,.pie-col a{transition:none}
}

/* Aparición al entrar en pantalla. La clase la pone el JS, así que
   sin JavaScript el contenido nace visible y el crawler lo ve igual. */
.rev-off{opacity:0;transform:translateY(22px)}
.rev{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){ .rev,.rev-off{opacity:1;transform:none;transition:none} }