/* ═══════════════════════════════════════════════════════════════════
   producto.css — estilos propios de las páginas de cada desarrollo
   ───────────────────────────────────────────────────────────────────
   Estas páginas cargan PRIMERO /blog/blog.css, que trae el armazón
   compartido de todo el sitio: el nav, el footer, las migas de pan,
   la tipografía de lectura (.art-body) y la paleta institucional.
   (El nombre "blog.css" quedó de cuando solo lo usaba el blog. Hoy es
   el CSS común de todas las páginas interiores.)

   Aquí abajo va solo lo que el blog no tiene: la portada del producto,
   la rejilla de características, los pasos, las preguntas frecuentes
   y el cierre. Si tocas la paleta, tócala en blog.css: acá se heredan.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Portada del producto ── */
.prod-hero{padding:7.5rem 5% 0}
.prod-hero-inner{max-width:var(--maxw);margin:0 auto}
.prod-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--g3);
  border:1px solid var(--g4);color:var(--g-deep);font-size:.75rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;padding:5px 15px;border-radius:99px;
  margin-bottom:1.1rem;
}
.prod-hero h1{
  font-family:'DM Serif Display',serif;
  font-size:clamp(2rem,4.4vw,3rem);line-height:1.15;
  margin-bottom:1rem;text-wrap:balance;max-width:18ch;
}
.prod-deck{font-size:1.13rem;color:var(--gray);line-height:1.7;max-width:62ch}
.prod-btns{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
.prod-btn{
  background:var(--g);color:#fff;padding:.8rem 1.9rem;border-radius:99px;
  font-weight:700;font-size:.93rem;text-decoration:none;transition:.2s;
  display:inline-flex;align-items:center;gap:8px;
}
.prod-btn:hover{background:var(--g2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(107,191,0,.3)}
.prod-btn.sec{background:none;border:2px solid var(--g4);color:var(--dark);padding:.7rem 1.8rem}
.prod-btn.sec:hover{border-color:var(--g);color:var(--g-deep);box-shadow:none}

figure.prod-shot{
  max-width:var(--maxw);margin:2.6rem auto 0;padding:0 5%;
}
figure.prod-shot img{
  width:100%;border-radius:var(--radius-lg);border:1px solid var(--g4);
  box-shadow:var(--shadow-lg);aspect-ratio:3/2;object-fit:cover;
}
@media(min-width:900px){figure.prod-shot img{aspect-ratio:21/9}}
figure.prod-shot figcaption{
  font-size:.8rem;color:var(--gray2);margin-top:.7rem;text-align:center;
}

/* ── Rejilla de características ── */
.art-body ul.prod-feats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;margin:.6rem 0 .4rem;max-width:none;padding-left:0;
}
.art-body ul.prod-feats li{
  list-style:none;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem 1.2rem;
}
.art-body ul.prod-feats li::marker{content:none}
.art-body ul.prod-feats b{
  display:block;font-size:.97rem;font-weight:800;color:var(--dark);
  margin-bottom:.35rem;line-height:1.3;
}
.art-body ul.prod-feats span{font-size:.9rem;color:var(--gray);line-height:1.6;display:block}

/* ── Pasos numerados ── */
.art-body ol.prod-pasos{counter-reset:paso;padding-left:0;gap:.9rem;max-width:63ch}
.art-body ol.prod-pasos li{
  list-style:none;position:relative;padding-left:3rem;min-height:2.1rem;
}
.art-body ol.prod-pasos li::marker{content:none}
.art-body ol.prod-pasos li::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:0;top:-2px;
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--g);color:#fff;font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}

/* ── Enlaces al resto del ecosistema ── */
.art-body ul.prod-eco{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.8rem;padding-left:0;margin-top:.5rem;max-width:none;
}
.art-body ul.prod-eco li{list-style:none}
.art-body ul.prod-eco li::marker{content:none}
.art-body ul.prod-eco a{
  display:block;background:var(--light);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem 1.1rem;text-decoration:none;
  transition:.2s;height:100%;
}
.art-body ul.prod-eco a:hover{border-color:var(--g);background:var(--g3);transform:translateY(-2px)}
.art-body ul.prod-eco b{display:block;font-size:.94rem;font-weight:800;color:var(--dark);margin-bottom:.25rem}
.art-body ul.prod-eco span{font-size:.85rem;color:var(--gray);line-height:1.55;display:block}

/* ── Preguntas frecuentes ── */
.faq{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:0 1.2rem;transition:border-color .2s;
}
.faq details[open]{border-color:var(--g4)}
.faq summary{
  cursor:pointer;font-weight:700;font-size:1rem;color:var(--dark);
  padding:1.05rem 0;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';color:var(--g);font-size:1.5rem;font-weight:400;
  line-height:1;flex-shrink:0;transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{
  font-size:.99rem;line-height:1.72;color:#2c2c2c;
  padding-bottom:1.15rem;margin:0;max-width:65ch;
}

/* ── Cierre ── */
.prod-cierre{
  background:var(--dark);border-radius:var(--radius-lg);
  padding:2.6rem 2rem;text-align:center;margin-top:2.2rem;
}
.prod-cierre h2{
  font-family:'DM Serif Display',serif;color:#fff;
  font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;margin:0 0 .7rem;
}
.prod-cierre p{color:#9b9b9b;font-size:1rem;line-height:1.7;margin:0 auto 1.6rem;max-width:52ch}
.prod-cierre .prod-btn{background:var(--g)}

@media(max-width:640px){
  .prod-hero{padding-top:6.5rem}
  .prod-hero h1{max-width:100%}
  .prod-cierre{padding:2rem 1.3rem}
}