/* device-3d — mismo lenguaje que las tarjetas de «Todo lo que recibes». */
.d3d{display:flex;flex-direction:column;align-items:center;gap:18px}
.d3d-escena{position:relative;width:100%;max-width:760px;aspect-ratio:16/11}
.d3d-poster,.d3d-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.d3d-poster{object-fit:contain;opacity:1;transition:opacity .5s ease}
.d3d-vivo .d3d-poster{opacity:0}
.d3d-lienzo{opacity:0;transition:opacity .6s ease}
.d3d-vivo .d3d-lienzo{opacity:1}
.d3d-pie{text-align:center;max-width:520px}
.d3d-titulo{margin:0;font-size:19px;font-weight:600;color:#111418;line-height:1.35}
.d3d-texto{margin:2px 0 0;font-size:16px;color:#5b6570;line-height:1.5}
.d3d-in .d3d-titulo,.d3d-in .d3d-texto{animation:d3dEntra .5s cubic-bezier(.2,.7,.2,1) both}
.d3d-in .d3d-texto{animation-delay:.06s}
@keyframes d3dEntra{from{opacity:0;transform:translateY(8px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.d3d-barra{display:flex;gap:4px;padding:5px;border-radius:999px;background:#f1f3f5;flex-wrap:wrap;justify-content:center}
.d3d-cap{appearance:none;border:0;background:transparent;cursor:pointer;border-radius:999px;
  padding:7px 15px;font:inherit;font-size:14px;color:#5b6570;transition:background .2s,color .2s}
.d3d-cap:hover{color:#111418}
.d3d-cap[aria-selected="true"]{background:#fff;color:#111418;box-shadow:0 1px 3px rgba(16,24,40,.12)}
.d3d-cap:focus-visible{outline:2px solid #1f7a5a;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.d3d-in .d3d-titulo,.d3d-in .d3d-texto{animation:none}
  .d3d-poster{opacity:1!important}.d3d-lienzo{display:none}}
@media (max-width:640px){.d3d-escena{aspect-ratio:4/5}.d3d-titulo{font-size:17px}.d3d-texto{font-size:15px}}
/* La fuente del vídeo vive en el documento (si no, no decodifica) pero no se ve. */
.d3d-fuente{position:absolute;left:0;top:0;width:2px;height:2px;opacity:.01;pointer-events:none;z-index:-1}

/* ═══════════════════════════════════════════════
 * SECCIÓN PORTADA · «Tu negocio, en la mano» (29-oct-2026)
 * Mismos tokens y mismo ritmo que .ash-tools, que es la sección vecina: tipografía de titular
 * (--fd, 800, clamp), el <em> con el degradado de marca, y el subtítulo en --fb. Si esto no
 * casara con sus vecinas se notaría más que la animación.
 * ═══════════════════════════════════════════════ */
.aiden-page-inicio .ash-d3d{position:relative;padding:80px 0;overflow:hidden}
.aiden-page-inicio .ash-d3d-head{max-width:720px;margin:0 auto 34px;text-align:center}
.aiden-page-inicio .ash-d3d-h{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(2rem,4.5vw,3rem);line-height:1.05;letter-spacing:-.04em;
  color:var(--n950);margin:0 0 16px;
}
.aiden-page-inicio .ash-d3d-h em{
  font-style:normal;
  background:linear-gradient(135deg,#3D72B0 0%,#574A87 50%,#0E7A67 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.aiden-page-inicio .ash-d3d-sub{
  font-family:var(--fb);font-size:1.05rem;color:var(--n600);line-height:1.55;
  margin:0 auto;max-width:580px;
}
.aiden-page-inicio .ash-d3d-pieza{max-width:860px;margin:0 auto}
.aiden-page-inicio .ash-d3d .d3d-titulo{font-family:var(--fd);font-weight:700;color:var(--n950)}
.aiden-page-inicio .ash-d3d .d3d-texto{font-family:var(--fb);color:var(--n600)}
.aiden-page-inicio .ash-d3d .d3d-cap{font-family:var(--fb)}
@media (max-width:640px){.aiden-page-inicio .ash-d3d{padding:56px 0}}