/* =========================================================
   NEOTROPIC — PRODUCT PAGES (Kuwaiba)
   Mantiene paleta/ fuentes del sitio
   ========================================================= */

/* ---------- Helpers / fallbacks ---------- */
:root{
  --container: var(--container, 1200px);
  --text: var(--text, #0f2640);
  --muted: var(--muted, #5b6c7b);
  --border: var(--border, #e9edf2);
  --bg-card: var(--bg-card, #fff);
  --shadow: var(--shadow, 0 6px 18px rgba(0,0,0,0.04));
  --radius: var(--radius, 14px);
}

/* ---------- Generic sections ---------- */
.section{ padding: 36px 0; }
.section-intro {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}
.section-title{ margin: 0 0 8px; font-size: 28px; color: var(--text); }
.section-sub{ margin: 0; color: var(--muted); }

/* ---------- CTA group (igual al home) ---------- */
.cta-group{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#cta-faq .section-intro {
  text-align: center;
  margin: 12px auto 20px;
  max-width: 800px;
  font-size: 1.1em;
  color: #222;
}

/* =========================================================
   HERO de producto
   ========================================================= */
.product-hero{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: center;
  padding: 34px 20px 28px;
  background: #e7f3ff; /* igual al hero del home */
}
.product-hero__content{ max-width: 720px; margin: 0 auto; }
.product-hero__title{
  margin: 0 0 8px; font-size: 38px; line-height: 1.15; color: var(--text);
}
.product-hero__subtitle{
  margin: 6px 0 12px; color: var(--muted); max-width: 65ch; font-size: 17px;
}
.product-hero__chips{
  display: flex; gap:10px; flex-wrap: wrap; margin-top: 10px;
}
.product-hero__chips span{
  display:inline-block; padding:6px 10px; border:1px solid var(--border);
  background:#ffffff70; border-radius:999px; font-size:14px; color:var(--text);
}
.product-hero__media{ max-width: 560px; justify-self: end; }
.product-hero__media img{ width:100%; height:auto; display:block; }

/* =========================================================
   QUÉ RESUELVE
   ========================================================= */
.why-grid{
  max-width: var(--container);
  margin: 16px auto 0;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items:center;
}
.why-item{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  box-shadow: var(--shadow);
}
.why-item h3{ margin: 4px 0 6px; font-size: 18px; color: var(--text); }
.why-item p{ margin: 0; color: var(--muted); }

/* =========================================================
   CAPACIDADES CLAVE (cards)
   ========================================================= */
.cards-grid{
  max-width: var(--container);
  margin: 12px auto 0; padding: 0 20px;
  display: grid; gap: 22px;
}
.cards-grid--3x2{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.cards-grid--2x2{ grid-template-columns: repeat(2, minmax(0,1fr)); }

.card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  box-shadow: var(--shadow);
}
.card h3{ margin: 6px 0 8px; font-size: 18px; color: var(--text); }
.card p{ margin: 0; color: var(--muted); }
.card-icon{ width: 32px; height: 32px; object-fit: contain; margin-bottom: 6px; }

/* =========================================================
   VISTAS & EXPLORACIÓN (media grid)
   ========================================================= */
.media-grid{
  max-width: var(--container);
  margin: 12px auto 0; padding: 0 20px;
  display: grid; gap: 22px;
}
.media-grid--2x2{ grid-template-columns: repeat(2, minmax(0,1fr)); }

.media{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}
.media img{ width: 100%; height: auto; display: block; border-radius: 8px; }
.media figcaption{ margin-top: 8px; color: var(--muted); }

/* =========================================================
   ARQUITECTURA & APIs
   ========================================================= */
.arch-grid{
  max-width: var(--container);
  margin: 12px auto 0; padding: 0 20px;
  display: grid; gap: 24px; grid-template-columns: 1fr 1fr;
  align-items: center;
}
.arch-graphic img{ width: 100%; height: auto; display: block; border-radius: 10px; }
.arch-points ul{ margin: 0; padding-left: 18px; color: var(--muted); }
.arch-points li{ margin: 6px 0; }

/* =========================================================
   NEGOCIO / BADGES
   ========================================================= */
.badges{
  max-width: var(--container); margin: 10px auto 0; padding: 0 20px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.badge{
  display:inline-block; padding:8px 12px; border:1px solid var(--border);
  border-radius: 999px; background:#f8fbff; color: var(--text); font-weight: 500;
}

/* =========================================================
   IMPLEMENTACIÓN (steps)
   ========================================================= */
.steps{
  max-width: var(--container); margin: 10px auto 0; padding: 0 20px;
  display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0,1fr));
  counter-reset: step;
}
.steps li{
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
}
.steps li::before{
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px; border-radius: 999px;
  background: #eef4ff; color: var(--text);
  display:flex; align-items:center; justify-content:center; font-weight: 700;
}
.steps h3{ margin: 2px 0 6px; font-size: 16px; color: var(--text); }
.steps p{ margin: 0; color: var(--muted); }

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final .section-intro{ text-align: center; }
.cta-final .cta-group{ justify-content: center; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  max-width: var(--container); margin: 8px auto 0; padding: 0 20px;
  display: grid; gap: 10px;
}
.faq details{
  background:#fbfdff; border:1px solid var(--border); border-radius: 10px;
  padding: 10px 14px;
}
.faq summary{ cursor: pointer; color: var(--text); font-weight: 600; }
.faq p{ color: var(--muted); margin: 8px 0 0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .product-hero{ grid-template-columns: 1fr; }
  .product-hero__media{ justify-self: center; }
  .arch-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .why-grid{ grid-template-columns: 1fr; }
  .cards-grid--3x2{ grid-template-columns: 1fr; }
  .cards-grid--2x2{ grid-template-columns: 1fr; }
  .media-grid--2x2{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .product-hero__title{ font-size: 32px; }
}