/* AdonaiSync: identidad propia (azul noche y dorado del logo) sobre la base visual de Bethel Solutions. */
:root{--gold:#e2b75c;--gold-2:#f3d48c;--gold-soft:rgba(226,183,92,.14);
  --grad:linear-gradient(135deg,#e2b75c,#f6dc9c);--line-strong:rgba(226,183,92,.55)}
html{scroll-padding-top:84px}
body{background:radial-gradient(900px 500px at 85% -5%,rgba(226,183,92,.10),transparent 60%),linear-gradient(180deg,var(--navy-950),var(--navy-900) 45%,var(--navy-950))}
:focus-visible{outline-color:var(--gold)}
.as-logo{display:block;width:42px;height:42px;flex:none;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(226,183,92,.55),0 6px 18px -6px rgba(226,183,92,.45)}
.as-logo img{display:block;width:100%;height:100%}
.brand{font-weight:700;font-size:1.08rem}
nav a:hover,nav a[aria-current="page"]{color:#fff;background:rgba(226,183,92,.16)}
.btn-primary:hover{box-shadow:0 10px 30px -8px rgba(226,183,92,.55)}
.btn-ghost:hover{background:rgba(226,183,92,.1)}
.prose a,.as-legal a,.fmail,.as-by{color:var(--gold-2)}
.as-by{text-decoration:underline;text-underline-offset:3px}
.page{background:radial-gradient(700px 360px at 85% 0%,rgba(226,183,92,.14),transparent 65%),linear-gradient(180deg,var(--navy-800),var(--navy-950) 420px)}

/* Portada */
.as-hero{position:relative;overflow:hidden;padding:88px 0 96px;background:radial-gradient(700px 420px at 80% 10%,rgba(226,183,92,.16),transparent 65%),radial-gradient(800px 500px at 10% 0%,rgba(10,132,224,.22),transparent 60%)}
.as-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:center}
.as-kicker{margin:0 0 10px;color:var(--gold);font-size:.82rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.as-hero h1{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 18px;font-weight:700}
.as-lead{color:#c7d4ee;font-weight:300;font-size:1.08rem;margin:0 0 30px;max-width:34em}
.as-actions{display:flex;flex-wrap:wrap;gap:12px}
.as-platforms{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.as-platforms li{font-size:.8rem;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.as-platforms .as-soon{color:var(--gold);border-color:rgba(226,183,92,.45);background:var(--gold-soft)}

/* Capturas con marco de dispositivo */
.as-device{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center}
.as-device img{display:block;width:100%;height:auto;background:#0b1830}
.as-ipad img{border-radius:22px;border:10px solid #0b1424;box-shadow:0 0 0 1px rgba(60,200,244,.25),0 40px 80px -30px rgba(0,0,0,.8)}
.as-phone img{border-radius:34px;border:8px solid #0b1424;box-shadow:0 0 0 1px rgba(60,200,244,.25),0 30px 60px -24px rgba(0,0,0,.8);max-width:300px}
.as-device figcaption{color:var(--muted);font-size:.88rem;text-align:center;font-weight:300;max-width:28em}

/* Cómo funciona */
.as-how-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
.as-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.as-steps li{display:flex;gap:18px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--navy-800),var(--navy-900))}
.as-n{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--navy-950);font-weight:700}
.as-steps h3{margin:2px 0 6px;font-size:1.12rem}
.as-steps p{margin:0;color:var(--muted);font-weight:300}

/* Funciones */
.as-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.as-features li{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:rgba(3,13,36,.45)}
.as-features h3{margin:0 0 8px;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.as-features h3::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--gold);transform:rotate(45deg);flex:none}
.as-features p{margin:0;color:var(--muted);font-weight:300;font-size:.95rem}

/* Galería */
.as-gallery{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}

/* Preguntas */
.as-faq .wrap,.as-faq{max-width:860px}
.as-faq details{border:1px solid var(--line);border-radius:14px;background:rgba(3,13,36,.45);margin:0 0 12px}
.as-faq summary{cursor:pointer;padding:16px 20px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
.as-faq summary::-webkit-details-marker{display:none}
.as-faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1}
.as-faq details[open] summary::after{content:"−"}
.as-faq details p{margin:0;padding:0 20px 18px;color:var(--muted);font-weight:300}

/* Llamado final */
.as-cta{text-align:center;background:radial-gradient(600px 300px at 50% 0%,rgba(226,183,92,.14),transparent 70%)}
.as-cta p{color:var(--muted);font-weight:300;margin:0 0 26px}
.as-cta .as-actions{justify-content:center}
.as-legal{margin:28px 0 0 !important;font-size:.88rem}
.as-legal a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}

/* Páginas de soporte y legales */
.as-page{padding-top:56px}
.prose h3{font-size:1.08rem;margin:26px 0 8px;font-weight:600}
.prose ol{margin:0 0 14px;padding-left:22px;display:grid;gap:6px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--navy-900);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:#fff}
.prose .lead{margin:0;color:#dfe8fb}
.prose .table-scroll{overflow-x:auto;margin:0 0 14px}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:#c7d4ee;font-weight:300}
.prose th{color:#fff;font-weight:500}
.prose .as-mail{color:var(--navy-950);text-decoration:none;margin-top:6px}

@media (max-width:860px){
  .as-hero{padding:56px 0 64px}
  .as-hero-grid,.as-how-grid{grid-template-columns:1fr;gap:40px}
  .as-gallery{grid-template-columns:1fr 1fr}
  .as-gallery .as-ipad{grid-column:1/-1}
}
@media (max-width:480px){
  .as-actions .btn{width:100%;justify-content:center}
  .as-gallery{grid-template-columns:1fr}
  .as-steps li{padding:18px}
}