/* ===========
   Aprende+ · Andes Dusk Theme
   =========== */

:root{
  --bg: #0f172a;
  --bg-2:#111827;
  --panel:#0B1220;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --brand-1:#14b8a6; /* teal */
  --brand-2:#0ea5e9; /* sky */
  --brand-3:#fb7185; /* rose */
  --ring: rgba(20,184,166,.45);
  --card:#0c1322;
  --stroke:#22304A;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, #0B1220 0%, #0E1526 60%, #0B1220 100%);
  color:var(--text);
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  letter-spacing:.15px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--brand-1); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px, 92%); margin:0 auto}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:12px; background:#fff; color:#111; padding:10px 12px; border-radius:10px}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(11,18,32,.6); backdrop-filter: blur(8px); border-bottom:1px solid #132035}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:10px; align-items:center; color:#fff; font-weight:800}
.cap{width:28px; height:28px; color:var(--brand-1)}
.brand-text{font-size:20px; letter-spacing:.2px}
.main-nav{display:flex; gap:22px}
.main-nav a{color:#cbd5e1; font-size:14px}
.main-nav a[aria-current="page"]{color:#fff; font-weight:600}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero--gradient:before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(1200px 500px at 10% -10%, rgba(20,184,166,.25), transparent),
              radial-gradient(900px 400px at 80% -20%, rgba(14,165,233,.22), transparent),
              radial-gradient(600px 300px at 50% 10%, rgba(251,113,133,.18), transparent);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:32px; align-items:center; padding:64px 0}
.hero-copy h1{font-size: clamp(34px, 4vw, 56px); line-height:1.05; margin:0}
.text-gradient{background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:#cbd5e1}
.cta-row{display:flex; gap:12px; margin-top:16px}

.hero-window{position:relative; border-radius:24px; overflow:hidden; border:1px solid #1F2E4A; background:#0b1220}
.hero-window img{width:100%; height:auto}
.hero-scrim{position:absolute; inset:0; box-shadow: inset 0 -140px 120px -80px rgba(11,18,32,.9)}
.hero-wave path{fill:#0c1425; opacity:.8}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:14px; border:1px solid transparent; font-weight:600; transition:.2s ease}
.btn-primary{background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); color:#0b1220}
.btn-primary:hover{filter:brightness(1.07)}
.btn-outline{border-color:#2a3c5f; color:#e2e8f0; background:transparent}
.btn-outline:hover{background:#111b2f}

/* Sections */
.section{padding:64px 0}
.muted{color:var(--muted)}
.tiny{font-size:12px; color:#9fb0c9}
.small{font-size:14px}
.stack{display:grid; gap:12px}
.bullets{margin:10px 0 0 0; padding-left:18px}
.bullets li{margin:6px 0}

/* Cards */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns: min(320px, 86%); gap:16px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:#1f2e4a; border-radius:8px}
.rail > .card{scroll-snap-align:start}
.card{
  background: linear-gradient(180deg, #0d1527, #0b1220);
  border:1px solid var(--stroke);
  border-top:3px solid var(--brand-1);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  position:relative;
}
.card h3{margin:0 0 6px 0; font-size:18px}
.card .tagline{font-style:italic; color:#bdd2ff}
.card .special{margin:8px 0 0 0; color:#bfcde6}
.card .link{display:inline-block; margin-top:10px; font-weight:600}
.link-card{display:grid; gap:6px}
.accent-1{border-top-color:#14b8a6}
.accent-2{border-top-color:#fb7185}
.accent-3{border-top-color:#0ea5e9}
.accent-4{border-top-color:#f59e0b}
.accent-5{border-top-color:#10b981}

/* Grid for Cursos page */
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 900px){ .grid-3{grid-template-columns: 1fr 1fr} }
@media (max-width: 640px){ .grid-3{grid-template-columns: 1fr} }

/* Course hero */
.course-hero{padding:48px 0 18px}
.course-hero .hero-grid{grid-template-columns: 1fr 1fr}
.course-hero .hero-copy h1{margin:0 0 6px 0}
.price-note{margin-top:14px}

/* Calendly */
.calendly-embed{
  width:100%; height:560px; border:1px solid #1f2e4a; border-radius:16px; background:#0b1220;
}

/* Footer */
.site-footer{border-top:1px solid #132035; padding:24px 0; background:#0b1220}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.pay-logos{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pay{display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 10px; border-radius:8px; font-size:12px; color:#fff}
.pay.stripe{background:#635BFF}
.pay.paypal{background:#003087}
.pay.visa{background:#1A1F71}
.pay.mc{background:#0F172A; position:relative; padding-left:36px}
.pay.mc:before, .pay.mc:after{content:""; position:absolute; top:7px; width:14px; height:14px; border-radius:50%}
.pay.mc:before{left:10px; background:#EB001B}
.pay.mc:after{left:18px; background:#F79E1B; opacity:.9}

/* ADA floating panel */
.ada-fab{
  position:fixed; right:18px; bottom:18px; z-index:50;
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color:#0b1220; border:none; padding:12px 14px; border-radius:50%; box-shadow:var(--shadow); cursor:pointer
}
.ada-panel{
  position:fixed; right:18px; bottom:84px; width:320px; max-width:90vw; background:#0b1220; border:1px solid #1f2e4a; border-radius:16px; box-shadow:var(--shadow); z-index:49;
}
.ada-head{padding:12px 14px; background:linear-gradient(90deg, var(--brand-1), var(--brand-2)); color:#0b1220; font-weight:700; border-radius:16px 16px 0 0}
.ada-body{padding:12px 14px; display:grid; gap:8px}
.switch{display:flex; align-items:center; gap:8px}
.ada-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}

/* Dialog (Términos) */
.terms-modal{border:none; padding:0; background:transparent}
.terms-modal::backdrop{background:rgba(0,0,0,.35)}
.terms-card{background:#0b1220; border:1px solid #1f2e4a; border-radius:16px; padding:18px; box-shadow:var(--shadow); width:min(680px, 92vw)}
.terms-card h3{margin:0 0 6px 0}
.terms-card menu{display:flex; justify-content:flex-end; gap:8px; padding:0; margin-top:12px}

/* Forms */
input, textarea, select{
  background:#0a1323; border:1px solid #1f2e4a; color:#e5e7eb; border-radius:12px; padding:10px 12px; width:100%
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--ring); border-color:transparent}
label{display:grid; gap:6px}
.honeypot{display:none}

/* Helpers */
.header-inner, .footer-inner, .hero-grid, .section .container{contain:layout paint}