/* ==========================================================================
   NexIntelia — css/motor.css
   Estilos compartidos por TODAS las páginas de detalle de motor
   (/pages/motores/{slug}.html). Complementa a css/style.css: aquí solo
   viven los componentes que NO existen en la landing principal (hero de
   producto de dos columnas, tarjeta de resultado, fichas de persona,
   lista de pasos, grid de descargos de responsabilidad, cross-sell de
   motores relacionados y banda de CTA oscura). Usa las mismas variables
   de diseño (--navy, --teal, --verde, --surface, --text, etc.) definidas
   en style.css, así que respeta automáticamente el tema institucional
   claro y las paletas oscuras locales del hero/backing/footer.
   ========================================================================== */

/* ============ HERO DE PRODUCTO (dos columnas) ============ */
.motor-hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center; }

.motor-hero__pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.motor-hero__pill{
  font-size:.76rem; font-weight:600; color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  padding:.4em .85em; border-radius:999px; white-space:nowrap;
}

.motor-hero__visual{
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border:1px solid var(--border); border-radius: var(--radius-xl);
  padding: 2rem; min-height: 320px; display:flex; flex-direction:column; gap:1rem; justify-content:center;
}
.result-banner{
  background: linear-gradient(135deg, var(--verde), var(--teal)); color:#04120c;
  border-radius: var(--radius-md); padding: 1rem 1.4rem; font-weight:700; font-size:.95rem;
}
.result-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.85rem; padding:.5rem 0; border-bottom:1px solid var(--border); }
.result-row:last-of-type{ border-bottom:none; }
.result-note{ font-size:.72rem; color: var(--text-faint); margin-top:.25rem; }

/* fila de cifras clave debajo del hero (tiempo de respuesta, precio desde,
   datos necesarios, privacidad) — reutiliza .stat-card de style.css */
.motor-hero__stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:.85rem; max-width:1280px; margin: clamp(2.5rem,5vw,3.5rem) auto 0; }

/* ============ PERSONAS ============ */
.persona-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; }
.persona-grid--3{ grid-template-columns: repeat(3,1fr); }
.persona-grid--4{ grid-template-columns: repeat(4,1fr); }
.persona-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:1.4rem; }
.persona-card h3{ font-size:1rem; color: var(--teal); margin-bottom:.5rem; }
.persona-card p{ font-size:.88rem; }

/* ============ PASOS / DATOS NECESARIOS ============ */
.steps-list{ display:flex; flex-direction:column; gap:1rem; }
.step-row{ display:flex; gap:1.2rem; padding:1.1rem 1.4rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.step-row__num{ font-family:var(--font-display); font-weight:400; color:var(--teal); font-size:1.3rem; flex-shrink:0; }
.step-row p{ font-size:.88rem; margin-top:.3rem; }

/* ============ DESCARGOS DE RESPONSABILIDAD ============ */
.disclaimer-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; }
.disclaimer-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.4rem; border-left: 3px solid var(--ambar);
}
.disclaimer-card--tool{ border-left-color: var(--verde); }
.disclaimer-card h3{ font-size:.95rem; margin-bottom:.5rem; color: var(--navy); }
.disclaimer-card p{ font-size:.85rem; }

/* ============ TAMBIÉN TE PODRÍA INTERESAR ============ */
.related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
.related-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.3rem; transition: border-color .3s, transform .3s var(--ease);
}
.related-card:hover{ border-color: var(--border-strong); transform: translateY(-3px); }
.related-card h3{ font-size:.98rem; margin-bottom:.4rem; }
.related-card p{ font-size:.85rem; margin-bottom:.7rem; }
.related-card a{ font-size:.85rem; font-weight:700; color: var(--teal); }

/* ============ CTA BAND (oscura, coincide con .backing) ============ */
.cta-band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  background: linear-gradient(135deg, var(--navy), #08283F); border-radius: var(--radius-xl);
  padding: 2rem 2.4rem; border:1px solid rgba(255,255,255,.12);
  --surface: rgba(255,255,255,.08); --text: #ffffff; --text-dim: rgba(255,255,255,.78); --text-faint: rgba(255,255,255,.55);
  color:#fff;
}
.cta-band__compare{ font-size:.8rem; color: rgba(255,255,255,.55); margin-top:.4rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .motor-hero__stats{ grid-template-columns: repeat(2,1fr); }
  .related-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px){
  .motor-hero{ grid-template-columns:1fr; }
  .persona-grid, .persona-grid--3, .persona-grid--4{ grid-template-columns:1fr; }
  .disclaimer-grid{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .motor-hero__stats{ grid-template-columns: 1fr 1fr; }
  .related-grid{ grid-template-columns:1fr; }
  .cta-band{ padding: 1.6rem 1.4rem; }
}