/* Clarity — light editorial premium (Stripe / GitBook) */
body.clarity {
  --cl-text: #0B0E14;
  --cl-dim: #5B6472;
  --cl-faint: #8A93A3;
  --cl-line: #E7EAF0;
  --cl-line-soft: #F0F2F7;
  --cl-bg: #FFFFFF;
  --cl-bg-2: #FAFBFD;
  --cl-blue: #2563EB;
  --cl-cyan: #29ABE2;
  background: var(--cl-bg);
  color: var(--cl-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body.clarity ::selection { background: #DBE6FC; }
.cl-mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

.cl-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius: var(--radius-pill); font-size:15px; font-weight:500; font-family:var(--font-sans); text-decoration:none; cursor:pointer; transition:all .2s var(--ease-out); white-space:nowrap; border:1px solid transparent; }
.cl-btn-primary { background: var(--cl-text); color:#fff; }
.cl-btn-primary:hover { background:#22262F; transform:translateY(-1px); text-decoration:none; }
.cl-btn-ghost { background:#fff; color:var(--cl-text); border:1px solid var(--cl-line); }
.cl-btn-ghost:hover { background: var(--cl-bg-2); border-color:#D5DAE3; text-decoration:none; }

.cl-mesh { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cl-mesh::before { content:''; position:absolute; top:-30%; left:8%; width:44vw; height:44vw; background:radial-gradient(circle, rgba(41,171,226,0.18), transparent 62%); }
.cl-mesh::after { content:''; position:absolute; top:-24%; right:6%; width:42vw; height:42vw; background:radial-gradient(circle, rgba(37,99,235,0.16), transparent 62%); }
.cl-dotgrid { position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(var(--cl-line) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent 72%); opacity:.7; }

.cl-card { background:#fff; border:1px solid var(--cl-line); border-radius: var(--radius-lg); transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s var(--ease-out); }
.cl-card:hover { box-shadow: 0 18px 50px rgba(18,21,28,0.09); transform: translateY(-3px); border-color:#DCE1EA; }

.cl-grad-ribbon { background: var(--sd-gradient-brand); }

/* ---- Hero: órbita de tecnologías (media órbita, corte plano en la línea base) ---- */
.sd-hero-orbit-wrap { position: relative; }
.sd-orbit-half { position: relative; width: min(560px, 92vw); aspect-ratio: 2 / 1; margin: 0 auto; overflow: hidden; z-index: 1; }
.sd-orbit-half .sd-orbit { position: absolute; top: 0; left: 0; width: 100%; margin: 0; }
.sd-hero-glow { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(760px, 98vw); height: 300px; background: radial-gradient(ellipse at 50% 100%, rgba(41,171,226,.20), rgba(37,99,235,.10) 46%, transparent 72%); pointer-events: none; z-index: 0; }
.sd-orbit { position: relative; width: min(560px, 92vw); aspect-ratio: 1; margin: 0 auto; }
.sd-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid var(--cl-line); }
.sd-ring-1 { width: 54%; height: 54%; }
.sd-ring-2 { width: 80%; height: 80%; }
.sd-ring-3 { width: 100%; height: 100%; border-style: dashed; border-color: var(--cl-line-soft); }
.sd-node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cl-cyan); transform: translate(-50%,-50%); opacity: .5; }

.sd-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 24%; height: 24%; display: grid; place-items: center; }
.sd-hub-core { width: 100%; height: 100%; border-radius: 50%; background: var(--sd-gradient-brand); display: grid; place-items: center; box-shadow: 0 16px 40px rgba(37,99,235,.35); position: relative; z-index: 2; }
.sd-hub-pulse { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(41,171,226,.35), transparent 70%); z-index: 1; }
.sd-hub-pulse-2 { background: radial-gradient(circle, rgba(37,99,235,.28), transparent 70%); }

.sd-layer { position: absolute; inset: 0; }
.sd-chip { position: absolute; transform: translate(-50%,-50%); }
.sd-chip-inner { width: 54px; height: 54px; border-radius: 15px; background: #fff; border: 1px solid var(--cl-line); box-shadow: 0 8px 22px rgba(18,21,28,.08); display: grid; place-items: center; }

/* animación (solo si el usuario no prefiere reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .sd-orbit.in .sd-layer-a { animation: sd-osc 9s ease-in-out infinite; }
  .sd-orbit.in .sd-layer-b { animation: sd-osc-rev 13s ease-in-out infinite; }
  .sd-orbit.in .sd-chip-rev-a { animation: sd-osc-rev 9s ease-in-out infinite; }
  .sd-orbit.in .sd-chip-rev-b { animation: sd-osc 13s ease-in-out infinite; }
  .sd-orbit.in .sd-hub-pulse { animation: sd-pulse 3.4s ease-in-out infinite; }
  .sd-orbit.in .sd-hub-pulse-2 { animation: sd-pulse 3.4s ease-in-out infinite .9s; }
}
.sd-layer, .sd-chip-inner { transform-box: view-box; }
@keyframes sd-osc { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes sd-osc-rev { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
@keyframes sd-pulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.5); opacity: 0; } }

.sd-node { opacity: .5; }

@media (max-width: 480px){ .sd-chip-inner { width: 46px; height: 46px; border-radius: 13px; } }

/* Servicios v2 — cap grid 5 col → responsive */
@media (max-width: 1100px){ .cap-grid { grid-template-columns: repeat(3,1fr) !important; } .cap-grid > * { grid-column: auto !important; } }
@media (max-width: 720px){ .cap-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 460px){ .cap-grid { grid-template-columns: 1fr !important; } }

/* Casos v5 — valor grid full-width → responsive */
@media (max-width: 820px){ .value-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 460px){ .value-grid { grid-template-columns: 1fr !important; } }

@media (max-width: 900px){ .cl-hide-sm { display:none !important; } .cl-burger { display:inline-flex !important; } .cl-2 { grid-template-columns:1fr !important; } .cl-4 { grid-template-columns:repeat(2,1fr) !important; } .cl-foot { grid-template-columns:1fr 1fr !important; } }
@media (max-width: 560px){ .cl-3 { grid-template-columns:1fr !important; } .cl-4 { grid-template-columns:1fr !important; } .cl-foot { grid-template-columns:1fr !important; } }