<div class="contenedor">
  <%- include('../partials/breadcrumbs', { items: migas }) %>
  <header class="hero" style="padding-top:24px">
    <h1>Prótesis de <%= art %></h1>
    <div class="respuesta-corta"><p class="hero__sub" style="margin:0"><%= intro %></p></div>
  </header>

  <% if (patologias.length) { %>
  <section class="seccion">
    <div class="encabezado-seccion"><h2>Empieza por el síntoma o la patología</h2></div>
    <div class="grid-cards u-mt-16">
      <% patologias.forEach(function(p){ %>
      <article class="card"><h3 style="font-size:17px"><a href="/patologias/<%= p.slug %>"><%= p.nombre %></a></h3>
        <p class="card__meta"><%- (p.resumen_corto||'').replace(/<[^>]+>/g,'').slice(0,120) %>…</p></article>
      <% }) %>
    </div>
  </section>
  <% } %>

  <% if (procedimientos.length) { %>
  <section class="seccion seccion--alterna"><div class="contenedor">
    <div class="encabezado-seccion"><h2>Tratamientos y procedimientos</h2></div>
    <div class="grid-cards u-mt-16">
      <% procedimientos.forEach(function(p){ %>
      <article class="card"><h3 style="font-size:17px"><a href="/procedimientos/<%= p.slug %>"><%= p.nombre %></a></h3>
        <p class="card__meta"><%- (p.resumen_corto||'').replace(/<[^>]+>/g,'').slice(0,120) %>…</p></article>
      <% }) %>
    </div>
  </div></section>
  <% } %>

  <% if (tipos.length) { %>
  <section class="seccion">
    <div class="encabezado-seccion"><h2>Tipos de prótesis de <%= art %></h2></div>
    <div class="grid-cards u-mt-16">
      <% tipos.forEach(function(t){ %>
      <article class="card"><h3 style="font-size:16px"><a href="/tipos-de-protesis/<%= t.slug %>"><%= t.nombre %></a></h3>
        <p class="card__meta"><%- (t.resumen_corto||'').replace(/<[^>]+>/g,'').slice(0,110) %>…</p></article>
      <% }) %>
    </div>
  </section>
  <% } %>

  <% if (productos.length) { %>
  <section class="seccion seccion--alterna"><div class="contenedor">
    <div class="encabezado-seccion"><h2>Modelos y sistemas</h2><a href="/protesis/comparar">Comparar prótesis →</a></div>
    <div class="grid-cards u-mt-16">
      <% productos.forEach(function(p){ %>
      <article class="card"><h3 style="font-size:16px"><a href="/protesis/<%= p.slug %>"><%= p.nombre %></a></h3>
        <% if (p.sistema) { %><p class="card__meta"><%= p.sistema %></p><% } %></article>
      <% }) %>
    </div>
  </div></section>
  <% } else { %>
  <section class="seccion"><div class="factbox">
    <h2>Modelos en incorporación</h2>
    <p>Estamos incorporando los modelos de <%= art %> con verificación editorial. Déjanos tu correo y te avisamos.</p>
    <a class="btn btn--primario" href="/#newsletter">Avisadme</a>
  </div></section>
  <% } %>

  <section class="seccion u-centrado">
    <a class="btn btn--fantasma" href="/test/<%= art %>">¿No sabes por dónde empezar? Orientación rápida</a>
  </section>

  <% if (guias.length) { %>
  <section class="seccion"><div class="encabezado-seccion"><h2>Guías útiles</h2><a href="/guias">Todas las guías →</a></div>
    <div class="grid-cards u-mt-16">
      <% guias.forEach(function(g){ %>
      <article class="card"><h3 style="font-size:16px"><a href="/guias/<%= g.slug %>"><%= g.nombre %></a></h3>
        <p class="card__meta"><%- (g.resumen_corto||'').replace(/<[^>]+>/g,'').slice(0,110) %>…</p></article>
      <% }) %>
    </div>
  </section>
  <% } %>
</div>
