/* =============================================================================
   Lexiius landing — Secciones A/B/C (Seguridad · Stack · Docs).
   Diseñado para AÑADIRSE al final de styles.css existente. Reusa los mismos
   tokens (--accent, --text, --bg-alt, etc.). Insertar entre Features y Pricing.
   ============================================================================= */

/* ---------- A. Comparación original vs IA ---------- */
.sec-compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; max-width:980px; margin:0 auto; }
.cmp-panel{ border-radius:12px; padding:22px 24px; font-family:var(--mono); font-size:.875rem; line-height:1.7; }
.cmp-panel .cmp-label{ font-family:var(--font); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; display:inline-flex; align-items:center; gap:6px; }
.cmp-panel .cmp-label svg{ width:13px; height:13px; }
.cmp-panel--orig{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; }
.cmp-panel--orig .cmp-label{ color:#dc2626; }
.cmp-panel--orig b{ color:#b91c1c; font-weight:600; }
.cmp-panel--anon{ background:#f0fdf4; border:1px solid #bbf7d0; color:#14532d; }
.cmp-panel--anon .cmp-label{ color:#16a34a; }
.cmp-panel--anon .v{ color:var(--accent); font-weight:600; }
.cmp-arrow{ color:var(--accent); flex:none; }
.cmp-arrow svg{ width:40px; height:40px; }
.sec-compare-note{ max-width:640px; margin:24px auto 0; text-align:center; font-size:.875rem; color:var(--text-2); line-height:1.6; }

/* ---------- A. Grid de 6 garantías ---------- */
.sec-gap{ margin-top:64px; }
.guarantees{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.guarantee{ background:var(--bg); border:1px solid var(--border); border-radius:var(--r-card); padding:24px; transition:box-shadow .2s ease, transform .2s ease; }
.guarantee:hover{ box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.guarantee .g-ico{ width:44px; height:44px; border-radius:10px; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.guarantee .g-ico svg{ width:22px; height:22px; }
.guarantee h3{ font-size:1rem; margin-bottom:8px; }
.guarantee p{ color:var(--text-2); font-size:.875rem; line-height:1.55; }
.guarantee p .v{ font-family:var(--mono); font-size:.8125rem; color:var(--accent); }

/* ---------- A. Strip de certificación (oscuro) ---------- */
.cert-strip{ background:#0f172a; margin-top:64px; border-radius:14px; padding:26px 24px; }
.cert-cols{ display:grid; grid-template-columns:repeat(3,1fr); }
.cert-col{ display:flex; align-items:center; justify-content:center; gap:14px; padding:6px 24px; text-align:left; }
.cert-col + .cert-col{ border-left:1px solid rgba(255,255,255,.12); }
.cert-col svg{ width:30px; height:30px; color:#fff; flex:none; }
.cert-col .cert-main{ font-family:var(--mono); font-weight:500; font-size:1rem; color:#fff; }
.cert-col .cert-sub{ font-size:.78rem; color:#94a3b8; margin-top:2px; }

/* ---------- B. Carrusel de tecnologías ---------- */
.tech-mask{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.tech-track{ display:flex; gap:20px; width:max-content; animation:tech-scroll 28s linear infinite; }
.tech-mask:hover .tech-track{ animation-play-state:paused; }
@keyframes tech-scroll{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 10px)); } }
.tech-item{ flex:none; width:210px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-card); padding:22px 26px; display:flex; flex-direction:column; gap:12px; transition:box-shadow .2s ease, border-color .2s ease; }
.tech-item:hover{ box-shadow:var(--shadow-hover); border-color:var(--accent-border); }
.tech-item .t-logo{ height:32px; display:flex; align-items:center; }
.tech-item .t-logo svg{ height:32px; width:auto; }
.tech-item .t-name{ font-weight:600; font-size:.875rem; color:var(--text); }
.tech-item .t-tag{ font-size:.75rem; color:var(--text-3); margin-top:-6px; }
.tech-note{ text-align:center; margin-top:28px; font-size:.875rem; color:var(--text-3); }

/* ---------- C. Tabs de código ---------- */
.docs-tabs{ max-width:720px; margin:0 auto; }
.tabs-head{ display:flex; gap:4px; background:var(--bg-2,#f1f5f9); border:1px solid var(--border); border-radius:10px; padding:4px; width:max-content; margin:0 auto 20px; }
.tabs-head button{ font-family:var(--font); font-size:.875rem; font-weight:600; color:var(--text-2); cursor:pointer; border:0; background:transparent; padding:9px 18px; border-radius:7px; transition:background .15s, color .15s; }
.tabs-head button.is-on{ background:var(--bg); color:var(--accent); box-shadow:var(--shadow-card); }
.tab-panel{ display:none; animation:tab-fade .2s ease; }
.tab-panel.is-on{ display:block; }
@keyframes tab-fade{ from{ opacity:0; } to{ opacity:1; } }
.tab-hint{ font-size:.8125rem; color:var(--text-2); margin-bottom:12px; text-align:center; }
.code-block{ background:#0f172a; border-radius:12px; padding:20px 22px; font-family:var(--mono); font-size:.8125rem; line-height:1.7; color:#e2e8f0; overflow-x:auto; box-shadow:var(--shadow-pop); }
.code-block .ln{ white-space:pre; }
.code-block .k{ color:#7dd3fc; }      /* keys / claves */
.code-block .s{ color:#86efac; }      /* strings / valores */
.code-block .m{ color:#c4b5fd; }      /* método HTTP */
.code-block .muted{ color:#64748b; }
.code-actions{ display:flex; justify-content:center; margin-top:14px; }
.copy-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:.8125rem; font-weight:600; cursor:pointer; border:1px solid var(--border-2,#cbd5e1); background:var(--bg); color:var(--text); border-radius:var(--r-btn); padding:9px 16px; transition:background .15s, border-color .15s; }
.copy-btn:hover{ background:var(--bg-alt); border-color:var(--accent-border); }
.copy-btn svg{ width:15px; height:15px; }
.copy-btn.is-copied{ background:#f0fdf4; border-color:#bbf7d0; color:#16a34a; }
.tab-note{ text-align:center; font-size:.8125rem; color:var(--text-3); margin-top:14px; }

/* C. tres columnas API */
.api-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.api-col{ text-align:center; padding:0 16px; }
.api-col .a-ico{ width:48px; height:48px; border-radius:12px; background:var(--accent-light); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; }
.api-col .a-ico svg{ width:24px; height:24px; }
.api-col h3{ font-size:1rem; margin-bottom:8px; }
.api-col p{ color:var(--text-2); font-size:.875rem; line-height:1.55; }
.docs-link{ text-align:center; margin-top:40px; }
.docs-link a{ display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:600; font-size:.9375rem; text-decoration:none; }
.docs-link a svg{ width:16px; height:16px; }

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .sec-compare{ grid-template-columns:1fr; }
  .cmp-arrow{ transform:rotate(90deg); margin:0 auto; }
  .guarantees{ grid-template-columns:repeat(2,1fr); }
  .api-cols{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px){
  .guarantees{ grid-template-columns:1fr; }
  .cert-cols{ grid-template-columns:1fr; gap:18px; }
  .cert-col + .cert-col{ border-left:0; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; }
  .tabs-head{ width:100%; }
  .tabs-head button{ flex:1; padding:9px 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .tech-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
  .tech-mask{ -webkit-mask-image:none; mask-image:none; overflow:visible; }
  .tab-panel.is-on{ animation:none; }
}