<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADN Millennial Academy</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Nunito:wght@400;500;600;700;800&display=swap');
:root {
--turquesa: #3EC0CB;
--azul: #0A2538;
--teal: #3CAD9F;
--cyan: #0D99CB;
--turq-light: #89C3CB;
--gris: #CED6DE;
--mint: #2FCCBB;
--white: #FFFFFF;
--bg: #061320;
--bg2: #0A2538;
--card: #0E2032;
--card-hover: #12283D;
--border: rgba(137,195,203,0.12);
--glow: rgba(62,192,203,0.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: var(--bg); color: var(--white); overflow-x: hidden; line-height: 1.5; }
h1, h2, h3, .display { font-family: 'Montserrat', sans-serif; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
/* NAV */
nav { position: sticky; top: 0; z-index: 100; background: rgba(6,19,32,0.82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.logo { display: flex; align-items: center; gap: 11px; font-family: 'Montserrat'; font-weight: 800; font-size: 18px; letter-spacing: -0.3px; }
.logo-mark { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.logo-mark svg { width: 100%; height: 100%; display:block; }
.logo small { color: var(--turq-light); font-weight: 600; font-size: 10px; display: block; margin-top: -2px; letter-spacing: 3px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--gris); transition: color .2s; }
.nav-links a:hover { color: var(--turquesa); }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.btn { font-family: 'Montserrat'; font-weight: 600; font-size: 14px; padding: 10px 22px; border-radius: 100px; cursor: pointer; border: none; transition: transform .2s, box-shadow .2s; display: inline-flex; align-items: center; gap: 8px; }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--turquesa); color: var(--turquesa); }
.btn-primary { background: linear-gradient(135deg, var(--turquesa), var(--mint)); color: var(--azul); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--glow); }
.menu-toggle { display: none; background: none; border: none; color: var(--white); font-size: 24px; cursor: pointer; }
/* HERO */
.hero { position: relative; padding: 76px 0 56px; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -200px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, var(--glow), transparent 65%); opacity: .5; pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -150px; left: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(13,153,203,0.25), transparent 65%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(62,192,203,0.1); border: 1px solid var(--border); color: var(--turquesa); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; padding: 7px 16px; border-radius: 100px; margin-bottom: 24px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(47,204,187,.6)} 70%{box-shadow:0 0 0 8px rgba(47,204,187,0)} 100%{box-shadow:0 0 0 0 rgba(47,204,187,0)} }
.hero h1 { font-size: 52px; font-weight: 800; line-height: 1.06; letter-spacing: -1.5px; margin-bottom: 22px; }
.hero h1 .accent { background: linear-gradient(120deg, var(--turquesa), var(--mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p.lead { font-size: 18px; color: var(--gris); max-width: 500px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.hero-stats { display: flex; gap: 36px; }
.stat .num { font-family: 'Montserrat'; font-size: 28px; font-weight: 800; color: var(--white); line-height: 1; }
.stat .num span { color: var(--turquesa); }
.stat .label { font-size: 12px; color: var(--turq-light); margin-top: 6px; }
.hero-visual { position: relative; display: flex; justify-content: center; }
.phone { width: 280px; background: var(--card); border-radius: 36px; border: 1px solid var(--border); padding: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(62,192,203,0.1); position: relative; z-index: 2; }
.phone-screen { background: var(--bg2); border-radius: 26px; overflow: hidden; }
.ig-top { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.ig-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--turquesa), var(--cyan)); display:flex; align-items:center; justify-content:center; font-family:'Montserrat'; font-weight:800; color: var(--azul); font-size:15px; }
.ig-top .h { font-size: 13px; font-weight: 700; }
.ig-top .s { font-size: 11px; color: var(--turq-light); }
.ig-media { aspect-ratio: 4/5; background: linear-gradient(160deg, #0D99CB, #0A2538); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.ig-media .play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,0.3); }
.ig-media .tag { position: absolute; bottom: 14px; left: 14px; right: 14px; font-family:'Montserrat'; font-weight: 700; font-size: 15px; }
.ig-arrow { position:absolute; bottom: 50px; left: 14px; background: var(--turquesa); color: var(--azul); font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 100px; }
.ig-cta { padding: 14px; }
.ig-cta .swipe { background: linear-gradient(135deg, var(--turquesa), var(--mint)); color: var(--azul); text-align: center; font-family:'Montserrat'; font-weight: 700; font-size: 13px; padding: 12px; border-radius: 12px; }
.float-card { position: absolute; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0,0,0,0.4); z-index: 3; animation: float 4s ease-in-out infinite; }
.float-card.a { top: 30px; left: -34px; }
.float-card.b { bottom: 56px; right: -40px; animation-delay: 1.5s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float-card .fc-top { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; }
.float-card .dot { width:8px; height:8px; border-radius:50%; }
.float-card .big { font-family:'Montserrat'; font-weight:800; font-size:18px; margin-top:4px; }
.float-card .sm { font-size:11px; color: var(--turq-light); }
/* TRUST */
.trust { padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.trust-label { font-size: 12px; color: var(--turq-light); letter-spacing: 1px; text-transform: uppercase; }
.trust-items { display:flex; gap: 28px; flex-wrap: wrap; }
.trust-item { font-family:'Montserrat'; font-weight:600; font-size:14px; color: var(--gris); opacity:.9; display:flex; align-items:center; gap:7px; }
/* SECTION */
section { padding: 76px 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 36px; gap: 24px; }
.sec-eyebrow { font-size: 12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color: var(--turquesa); margin-bottom:12px; }
.sec-head h2 { font-size: 36px; font-weight:800; letter-spacing:-1px; line-height:1.1; max-width: 620px; }
.sec-head p { color: var(--gris); font-size: 15px; max-width: 360px; }
.link-more { color: var(--turquesa); font-weight:600; font-size:14px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
/* MODALIDADES (3 líneas de ingreso) */
.modal-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.modal-card { background: var(--card); border:1px solid var(--border); border-radius:20px; padding:28px; position:relative; overflow:hidden; transition: transform .25s, border-color .25s; }
.modal-card:hover { transform:translateY(-6px); border-color: rgba(62,192,203,0.4); }
.modal-card::after { content:''; position:absolute; top:0; left:0; width:100%; height:3px; }
.modal-card.m1::after { background: linear-gradient(90deg, var(--turquesa), var(--mint)); }
.modal-card.m2::after { background: linear-gradient(90deg, var(--cyan), var(--turquesa)); }
.modal-card.m3::after { background: linear-gradient(90deg, var(--teal), var(--mint)); }
.modal-ico { width:48px; height:48px; border-radius:13px; background:rgba(62,192,203,0.12); display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:18px; }
.modal-card h3 { font-size:19px; font-weight:700; margin-bottom:8px; }
.modal-card .for { font-size:12px; color:var(--turquesa); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.modal-card p { font-size:14px; color:var(--gris); line-height:1.55; margin-bottom:18px; }
.modal-list { list-style:none; margin-bottom:20px; }
.modal-list li { font-size:13px; color:#bcc8d2; padding:5px 0; display:flex; gap:8px; }
.modal-list li::before { content:'✓'; color:var(--mint); font-weight:800; }
.modal-link { font-size:14px; font-weight:600; color:var(--turquesa); display:inline-flex; gap:6px; }
/* ÁREAS */
.areas { display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; }
.area { background: var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; cursor:pointer; transition: transform .25s, border-color .25s, background .25s; position:relative; overflow:hidden; }
.area:hover { transform: translateY(-5px); border-color: rgba(62,192,203,0.4); background: var(--card-hover); }
.area .a-ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:14px; }
.ai1{background:rgba(62,192,203,0.15)} .ai2{background:rgba(47,204,187,0.15)} .ai3{background:rgba(13,153,203,0.15)} .ai4{background:rgba(60,173,159,0.15)} .ai5{background:rgba(137,195,203,0.15)}
.area h3 { font-size:15px; font-weight:700; margin-bottom:4px; }
.area .count { font-size:12px; color: var(--turquesa); font-weight:600; }
/* CURSOS */
.carousel { display:flex; gap:18px; overflow-x:auto; padding: 8px 0 20px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.carousel::-webkit-scrollbar { height:6px; }
.carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius:10px; }
.course { flex: 0 0 300px; background: var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; scroll-snap-align:start; cursor:pointer; transition: transform .25s, border-color .25s; }
.course:hover { transform: translateY(-6px); border-color: rgba(62,192,203,0.4); }
.course-thumb { aspect-ratio:16/10; position:relative; display:flex; align-items:flex-end; padding:16px; }
.ct1{background:linear-gradient(150deg,#0D99CB,#0A2538)} .ct2{background:linear-gradient(150deg,#3CAD9F,#0A2538)} .ct3{background:linear-gradient(150deg,#2FCCBB,#0A2538)} .ct4{background:linear-gradient(150deg,#3EC0CB,#0A2538)} .ct5{background:linear-gradient(150deg,#89C3CB,#0A2538)} .ct6{background:linear-gradient(150deg,#0A3A52,#0A2538)}
.course-thumb .badge-new { position:absolute; top:14px; left:14px; background:var(--mint); color:var(--azul); font-size:10px; font-weight:800; padding:4px 10px; border-radius:100px; letter-spacing:.5px; }
.course-thumb .level { position:absolute; top:14px; right:14px; background:rgba(6,19,32,0.6); backdrop-filter:blur(6px); font-size:10px; font-weight:600; padding:4px 10px; border-radius:100px; }
.course-thumb .ico { font-size:32px; }
.course-body { padding:18px; }
.course-school { font-size:11px; color:var(--turquesa); font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.course-body h3 { font-size:16px; font-weight:700; margin:8px 0 10px; line-height:1.25; }
.course-meta { display:flex; gap:14px; font-size:12px; color:var(--gris); margin-bottom:14px; flex-wrap:wrap; }
.course-meta span { display:flex; align-items:center; gap:5px; }
.course-foot { display:flex; align-items:center; justify-content:space-between; }
.price { font-family:'Montserrat'; font-weight:800; font-size:20px; }
.price small { font-size:12px; color:var(--turq-light); font-weight:400; display:block; margin-bottom:-2px; }
.btn-mini { background:rgba(62,192,203,0.12); color:var(--turquesa); border:1px solid var(--border); padding:8px 16px; border-radius:100px; font-size:13px; font-weight:600; font-family:'Montserrat'; }
/* IN COMPANY BAND */
.incompany { background: linear-gradient(120deg, var(--bg2), #0E2840); border:1px solid var(--border); border-radius:26px; padding:48px; position:relative; overflow:hidden; display:grid; grid-template-columns: 1.2fr 1fr; gap:44px; align-items:center; }
.incompany::before { content:''; position:absolute; top:-100px; left:-60px; width:400px; height:400px; background:radial-gradient(circle,var(--glow),transparent 65%); opacity:.35; }
.ic-content { position:relative; z-index:2; }
.ic-tag { display:inline-block; background:rgba(13,153,203,0.18); color:var(--cyan); font-size:12px; font-weight:700; padding:6px 14px; border-radius:100px; margin-bottom:18px; letter-spacing:.5px; }
.incompany h2 { font-size:32px; font-weight:800; letter-spacing:-1px; margin-bottom:14px; line-height:1.1; }
.incompany p { color:var(--gris); font-size:15px; margin-bottom:24px; max-width:460px; }
.ic-feats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; }
.ic-feat { display:flex; align-items:flex-start; gap:10px; font-size:13px; }
.ic-feat .fi { width:34px; height:34px; border-radius:10px; background:rgba(62,192,203,0.12); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ic-feat .ft { font-weight:600; }
.ic-feat .fs { font-size:11px; color:var(--turq-light); }
.ic-clients { position:relative; z-index:2; background:rgba(6,19,32,0.5); border:1px solid var(--border); border-radius:18px; padding:24px; }
.ic-clients .lbl { font-size:11px; color:var(--turq-light); letter-spacing:1px; text-transform:uppercase; margin-bottom:16px; }
.client-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; font-weight:600; color:var(--gris); }
.client-row:last-child { border-bottom:none; }
.client-row .cdot { width:8px; height:8px; border-radius:50%; background:var(--mint); flex-shrink:0; }
/* DIPLOMADO */
.diploma { background: linear-gradient(120deg, #0E2840, var(--bg2)); border:1px solid var(--border); border-radius:26px; padding:48px; position:relative; overflow:hidden; display:grid; grid-template-columns: 1.3fr 1fr; gap:40px; align-items:center; }
.diploma::before { content:''; position:absolute; top:-100px; right:-50px; width:400px; height:400px; background:radial-gradient(circle,var(--glow),transparent 65%); opacity:.4; }
.diploma .dp-content { position:relative; z-index:2; }
.diploma .tag { display:inline-block; background:rgba(47,204,187,0.15); color:var(--mint); font-size:12px; font-weight:700; padding:6px 14px; border-radius:100px; margin-bottom:18px; letter-spacing:.5px; }
.diploma h2 { font-size:32px; font-weight:800; letter-spacing:-1px; margin-bottom:14px; line-height:1.1; }
.diploma p { color:var(--gris); font-size:15px; margin-bottom:24px; max-width:440px; }
.dp-features { display:flex; gap:24px; margin-bottom:28px; flex-wrap:wrap; }
.dp-feat { font-size:13px; color:var(--white); display:flex; align-items:center; gap:8px; }
.dp-feat .ck { color:var(--mint); font-weight:800; }
.dp-path { position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; }
.path-step { display:flex; align-items:center; gap:14px; background:rgba(6,19,32,0.5); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.path-num { width:30px; height:30px; border-radius:9px; background:var(--turquesa); color:var(--azul); font-family:'Montserrat'; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.path-step .pt { font-size:13px; font-weight:600; }
.path-step .ps { font-size:11px; color:var(--turq-light); }
/* PROFESORES */
.teachers-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.teacher { background: var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition: transform .25s, border-color .25s; cursor:pointer; }
.teacher:hover { transform: translateY(-6px); border-color: rgba(62,192,203,0.4); }
.teacher-photo { aspect-ratio:1/1; position:relative; display:flex; align-items:flex-end; justify-content:center; }
.tp1{background:linear-gradient(160deg,#3EC0CB,#0A2538)} .tp2{background:linear-gradient(160deg,#0D99CB,#0A2538)} .tp3{background:linear-gradient(160deg,#2FCCBB,#0A2538)} .tp4{background:linear-gradient(160deg,#3CAD9F,#0A2538)}
.teacher-photo .avatar-lg { width:92px; height:92px; border-radius:50%; background:rgba(255,255,255,0.12); backdrop-filter:blur(6px); border:2px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-family:'Montserrat'; font-weight:800; font-size:32px; margin-bottom:24px; }
.teacher-photo .school-tag { position:absolute; top:14px; left:14px; background:rgba(6,19,32,0.55); backdrop-filter:blur(6px); font-size:10px; font-weight:700; padding:5px 11px; border-radius:100px; letter-spacing:.5px; }
.teacher-body { padding:18px 20px 22px; }
.teacher-body h3 { font-size:17px; font-weight:700; margin-bottom:3px; }
.teacher-body .role { font-size:12px; color:var(--turquesa); font-weight:600; margin-bottom:12px; }
.teacher-body .bio { font-size:13px; color:var(--gris); line-height:1.5; margin-bottom:14px; }
.teacher-foot { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.teacher-foot .courses { color:var(--turq-light); font-weight:600; }
.teacher-foot .socials { display:flex; gap:8px; }
.teacher-foot .socials a { width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size:13px; transition:background .2s; }
.teacher-foot .socials a:hover { background:rgba(62,192,203,0.15); }
/* IG PROOF */
.ig-section { background: linear-gradient(180deg, transparent, rgba(13,153,203,0.04)); }
.ig-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.ig-post { aspect-ratio:4/5; border-radius:18px; overflow:hidden; position:relative; cursor:pointer; border:1px solid var(--border); transition: transform .25s; }
.ig-post:hover { transform:scale(1.02); }
.ig-post:hover .ig-overlay { opacity:1; }
.igp1{background:linear-gradient(160deg,#3EC0CB,#0A2538)} .igp2{background:linear-gradient(160deg,#0D99CB,#0A2538)} .igp3{background:linear-gradient(160deg,#2FCCBB,#0A2538)} .igp4{background:linear-gradient(160deg,#3CAD9F,#0A2538)}
.ig-post .reel-icon { position:absolute; top:14px; right:14px; font-size:18px; }
.ig-overlay { position:absolute; inset:0; background:linear-gradient(transparent, rgba(6,19,32,0.85)); display:flex; flex-direction:column; justify-content:flex-end; padding:18px; opacity:.9; transition:opacity .25s; }
.ig-overlay .quote { font-size:13px; font-weight:500; line-height:1.4; }
.ig-overlay .who { font-size:11px; color:var(--turq-light); margin-top:8px; font-weight:600; }
.ig-overlay .views { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--gris); margin-top:6px; }
/* DASHBOARD */
.dash-section { display:grid; grid-template-columns: 1fr 1.2fr; gap:48px; align-items:center; }
.dash-mock { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:20px; box-shadow:0 30px 70px rgba(0,0,0,0.4); }
.dash-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.dash-head .greet { font-family:'Montserrat'; font-weight:700; font-size:16px; }
.dash-head .greet span { color:var(--turquesa); }
.dash-head .ring { width:48px; height:48px; border-radius:50%; background:conic-gradient(var(--turquesa) 0% 68%, var(--border) 68% 100%); display:flex; align-items:center; justify-content:center; }
.dash-head .ring i { width:38px; height:38px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; font-family:'Montserrat'; font-weight:800; font-size:12px; font-style:normal; }
.dash-row { display:flex; align-items:center; gap:14px; background:rgba(6,19,32,0.5); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:10px; }
.dash-thumb { width:52px; height:52px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:22px; }
.dt1{background:linear-gradient(135deg,#0D99CB,#0A2538)} .dt2{background:linear-gradient(135deg,#2FCCBB,#0A2538)} .dt3{background:linear-gradient(135deg,#3CAD9F,#0A2538)}
.dash-info { flex:1; }
.dash-info .dn { font-size:14px; font-weight:600; }
.dash-info .dp { font-size:11px; color:var(--turq-light); margin-top:2px; }
.progress-bar { height:6px; background:var(--border); border-radius:10px; margin-top:8px; overflow:hidden; }
.progress-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--turquesa),var(--mint)); border-radius:10px; }
.dash-cta { font-size:12px; color:var(--turquesa); font-weight:600; white-space:nowrap; }
.dash-features { display:flex; flex-direction:column; gap:20px; }
.df-item { display:flex; gap:16px; }
.df-icon { width:44px; height:44px; border-radius:12px; background:rgba(62,192,203,0.12); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.df-item h3 { font-size:17px; font-weight:700; margin-bottom:4px; }
.df-item p { font-size:14px; color:var(--gris); }
/* UBICACIÓN */
.location-section { background: linear-gradient(180deg, rgba(13,153,203,0.04), transparent); }
.location-grid { display:grid; grid-template-columns: 1fr 1.15fr; gap:40px; align-items:stretch; }
.location-info { display:flex; flex-direction:column; }
.loc-main { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px; margin-bottom:16px; position:relative; overflow:hidden; }
.loc-main::before { content:''; position:absolute; top:-60px; right:-40px; width:240px; height:240px; background:radial-gradient(circle,var(--glow),transparent 65%); opacity:.35; }
.loc-badge { position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; background:rgba(47,204,187,0.15); color:var(--mint); font-size:11px; font-weight:700; padding:5px 13px; border-radius:100px; letter-spacing:.5px; margin-bottom:16px; }
.loc-main h3 { position:relative; z-index:2; font-size:23px; font-weight:800; margin-bottom:6px; letter-spacing:-.5px; }
.loc-main .addr { position:relative; z-index:2; font-size:14px; color:var(--gris); line-height:1.6; margin-bottom:20px; }
.loc-detail { position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; }
.loc-row { display:flex; align-items:center; gap:12px; font-size:14px; }
.loc-row .lico { width:38px; height:38px; border-radius:11px; background:rgba(62,192,203,0.12); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.loc-row .lt { font-weight:600; }
.loc-row .ls { font-size:12px; color:var(--turq-light); }
.other-sedes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sede-mini { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; transition:border-color .2s; cursor:pointer; }
.sede-mini:hover { border-color:rgba(62,192,203,0.4); }
.sede-mini .sm-name { font-size:14px; font-weight:700; display:flex; align-items:center; gap:7px; }
.sede-mini .sm-name .pin { color:var(--turquesa); }
.sede-mini .sm-status { font-size:11px; color:var(--mint); margin-top:5px; font-weight:600; }
.map-wrap { border-radius:20px; overflow:hidden; border:1px solid var(--border); position:relative; min-height:440px; }
.map-wrap iframe { width:100%; height:100%; min-height:440px; border:0; filter: grayscale(0.3) invert(0.92) hue-rotate(170deg) saturate(0.7) brightness(0.95); }
.map-pin-overlay { position:absolute; top:20px; left:20px; z-index:5; background:rgba(6,19,32,0.88); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:12px; pointer-events:none; }
.map-pin-overlay .mp-ico { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--turquesa),var(--mint)); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--azul); }
.map-pin-overlay .mp-t { font-size:14px; font-weight:700; }
.map-pin-overlay .mp-s { font-size:11px; color:var(--turq-light); }
/* FINAL */
.final { text-align:center; background:linear-gradient(135deg, var(--bg2), #0E2840); border:1px solid var(--border); border-radius:30px; padding:64px 40px; position:relative; overflow:hidden; }
.final::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; background:radial-gradient(circle,var(--glow),transparent 60%); opacity:.3; }
.final-content { position:relative; z-index:2; }
.final h2 { font-size:40px; font-weight:800; letter-spacing:-1.5px; margin-bottom:16px; line-height:1.05; }
.final h2 .accent { background:linear-gradient(120deg,var(--turquesa),var(--mint)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.final p { color:var(--gris); font-size:17px; max-width:480px; margin:0 auto 32px; }
.final-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* FOOTER */
footer { padding:60px 0 40px; border-top:1px solid var(--border); margin-top:40px; }
.foot-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.foot-brand p { color:var(--gris); font-size:14px; margin-top:16px; max-width:280px; }
.foot-social { display:flex; gap:12px; margin-top:20px; }
.foot-social a { width:40px; height:40px; border-radius:11px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:18px; transition: background .2s; }
.foot-social a:hover { background:var(--card-hover); }
.foot-col h4 { font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--turq-light); margin-bottom:16px; }
.foot-col a { display:block; font-size:14px; color:var(--gris); margin-bottom:10px; transition:color .2s; }
.foot-col a:hover { color:var(--turquesa); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--border); font-size:13px; color:var(--turq-light); flex-wrap:wrap; gap:12px; }
/* RESPONSIVE */
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; gap:48px; }
.hero h1 { font-size:42px; }
.modal-grid { grid-template-columns: 1fr; }
.areas { grid-template-columns: repeat(3,1fr); }
.incompany, .diploma { grid-template-columns:1fr; }
.ig-grid { grid-template-columns: repeat(2,1fr); }
.teachers-grid { grid-template-columns: repeat(2,1fr); }
.dash-section { grid-template-columns:1fr; }
.location-grid { grid-template-columns:1fr; }
.map-wrap { min-height:340px; }
.foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
.nav-links, .nav-cta .btn-ghost { display:none; }
.menu-toggle { display:block; }
.hero h1 { font-size:32px; }
.sec-head { flex-direction:column; align-items:flex-start; }
.sec-head h2 { font-size:27px; }
.areas { grid-template-columns:1fr 1fr; }
.ig-grid, .teachers-grid, .foot-grid, .ic-feats, .other-sedes { grid-template-columns:1fr; }
.incompany, .diploma, .final { padding:32px 24px; }
.final h2 { font-size:29px; }
.hero-stats { gap:18px; }
.wrap { padding:0 20px; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<div class="nav-inner">
<a href="#" class="logo">
<div class="logo-mark">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="none">
<defs>
<linearGradient id="helix" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#2FCCBB"/>
<stop offset="55%" stop-color="#3EC0CB"/>
<stop offset="100%" stop-color="#0D99CB"/>
</linearGradient>
</defs>
<path d="M6 54 L17 14 L28 54" stroke="#3CAD9F" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38 54 L38 16 L58 54 L58 16" stroke="#3CAD9F" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30 12 C44 22, 44 42, 31 54" stroke="url(#helix)" stroke-width="3.4" stroke-linecap="round"/>
<path d="M31 12 C20 24, 36 40, 31 54" stroke="url(#helix)" stroke-width="2.2" stroke-linecap="round" opacity="0.9"/>
<circle cx="30" cy="11" r="3" fill="#2FCCBB"/>
<line x1="29" y1="22" x2="38" y2="22" stroke="#CED6DE" stroke-width="1.4" stroke-linecap="round"/>
<line x1="27" y1="29" x2="40" y2="29" stroke="#CED6DE" stroke-width="1.4" stroke-linecap="round"/>
<line x1="27" y1="36" x2="40" y2="36" stroke="#CED6DE" stroke-width="1.4" stroke-linecap="round"/>
<line x1="29" y1="43" x2="38" y2="43" stroke="#CED6DE" stroke-width="1.4" stroke-linecap="round"/>
</svg>
</div>
<div>ADN<small>MILLENNIAL</small></div>
</a>
<div class="nav-links">
<a href="#areas">Áreas</a>
<a href="#cursos">Cursos</a>
<a href="#empresas">Empresas</a>
<a href="#profesores">Profesores</a>
<a href="#ubicacion">Sedes</a>
</div>
<div class="nav-cta">
<button class="btn btn-ghost">Iniciar sesión</button>
<button class="btn btn-primary">Ver cursos</button>
<button class="menu-toggle">☰</button>
</div>
</div>
</nav>
<!-- HERO -->
<header class="hero">
<div class="wrap">
<div class="hero-grid">
<div class="hero-text">
<div class="hero-eyebrow"><span class="pulse"></span> Formación profesional · Certificación avalada internacionalmente</div>
<h1>Capacitación que <span class="accent">se aplica el lunes</span>, no que se olvida el viernes.</h1>
<p class="lead">Cursos, talleres y diplomados en IA, marketing, Excel, finanzas, ventas y sector petrolero. Para personas que quieren crecer y empresas que quieren equipos más capaces.</p>
<div class="hero-actions">
<button class="btn btn-primary btn-lg">Explorar cursos →</button>
<button class="btn btn-ghost btn-lg">Soy una empresa</button>
</div>
<div class="hero-stats">
<div class="stat"><div class="num"><span>60+</span></div><div class="label">Cursos y talleres</div></div>
<div class="stat"><div class="num"><span>3</span></div><div class="label">Modalidades</div></div>
<div class="stat"><div class="num"><span>+50</span></div><div class="label">Empresas atendidas</div></div>
</div>
</div>
<div class="hero-visual">
<div class="float-card a">
<div class="fc-top"><span class="dot" style="background:var(--mint)"></span> Certificado emitido</div>
<div class="big">Marketing + IA</div>
<div class="sm">Aval internacional</div>
</div>
<div class="phone">
<div class="phone-screen">
<div class="ig-top">
<div class="ig-avatar">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="none" style="width:22px;height:22px">
<path d="M30 12 C44 22, 44 42, 31 54" stroke="#0A2538" stroke-width="4" stroke-linecap="round"/>
<path d="M31 12 C20 24, 36 40, 31 54" stroke="#0A2538" stroke-width="2.6" stroke-linecap="round" opacity="0.8"/>
<circle cx="30" cy="11" r="3.4" fill="#0A2538"/>
<line x1="28" y1="24" x2="39" y2="24" stroke="#0A2538" stroke-width="1.8" stroke-linecap="round"/>
<line x1="26" y1="33" x2="40" y2="33" stroke="#0A2538" stroke-width="1.8" stroke-linecap="round"/>
<line x1="28" y1="42" x2="38" y2="42" stroke="#0A2538" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</div>
<div><div class="h">adnmillennial</div><div class="s">Lechería · El Tigre · Caracas</div></div>
</div>
<div class="ig-media">
<div class="play">▶</div>
<div class="ig-arrow">Desliza para inscribirte</div>
<div class="tag">Diplomado Community Manager + IA 🚀</div>
</div>
<div class="ig-cta"><div class="swipe">Reservar mi cupo →</div></div>
</div>
</div>
<div class="float-card b">
<div class="fc-top"><span class="dot" style="background:var(--turquesa)"></span> Próximo inicio</div>
<div class="big">Excel Petrolero</div>
<div class="sm">Cupos limitados</div>
</div>
</div>
</div>
</div>
</header>
<!-- TRUST -->
<div class="trust">
<div class="wrap trust-inner">
<span class="trust-label">Por qué confían en nosotros</span>
<div class="trust-items">
<span class="trust-item">🎓 Certificado digital avalado internacionalmente</span>
<span class="trust-item">🏛️ Respaldo de universidades</span>
<span class="trust-item">💳 Financiamiento con Cashea</span>
<span class="trust-item">💵 Pago en $, Bs y € BCV</span>
</div>
</div>
</div>
<!-- MODALIDADES (3 líneas de ingreso) -->
<section id="modalidades">
<div class="wrap">
<div class="sec-head">
<div>
<div class="sec-eyebrow">Cómo puedes formarte</div>
<h2>Tres maneras de aprender con ADN.</h2>
</div>
<p>Elige la que se ajusta a ti: presencial abierto al público, a la medida de tu empresa, o totalmente personalizado.</p>
</div>
<div class="modal-grid">
<div class="modal-card m1">
<div class="modal-ico">🎟️</div>
<div class="for">Para personas</div>
<h3>Cursos abiertos</h3>
<p>Inscríbete a un curso o taller con fecha fija, presencial u online en vivo. Aprende con un grupo y certifícate.</p>
<ul class="modal-list">
<li>Diplomados de 1 mes</li>
<li>Talleres intensivos de 1–2 días</li>
<li>Cupos por convocatoria</li>
</ul>
<a href="#cursos" class="modal-link">Ver próximos cursos →</a>
</div>
<div class="modal-card m2">
<div class="modal-ico">🏢</div>
<div class="for">Para empresas</div>
<h3>Formación In Company</h3>
<p>Llevamos la academia a tu equipo. Diagnóstico previo, casos reales de tu operación y cotización a la medida.</p>
<ul class="modal-list">
<li>+10 áreas de formación</li>
<li>Metodología Hands-On</li>
<li>Consultoría y seguimiento</li>
</ul>
<a href="#empresas" class="modal-link">Solicitar propuesta →</a>
</div>
<div class="modal-card m3">
<div class="modal-ico">🎯</div>
<div class="for">A tu ritmo</div>
<h3>Cursos personalizados</h3>
<p>De 8 a 12 horas en máximo 3 sesiones, adaptadas a tus objetivos. Presencial, online o híbrido.</p>
<ul class="modal-list">
<li>Individual o grupo pequeño</li>
<li>Horario flexible</li>
<li>Cualquier área del catálogo</li>
</ul>
<a href="#" class="modal-link">Diseñar mi plan →</a>
</div>
</div>
</div>
</section>
<!-- ÁREAS -->
<section id="areas">
<div class="wrap">
<div class="sec-head">
<div>
<div class="sec-eyebrow">Áreas de formación</div>
<h2>Encuentra tu área y especialízate.</h2>
</div>
<p>Desde habilidades digitales hasta especialización para el sector energético y empresarial.</p>
</div>
<div class="areas">
<div class="area"><div class="a-ico ai1">🤖</div><h3>Inteligencia Artificial</h3><div class="count">5 cursos</div></div>
<div class="area"><div class="a-ico ai2">📊</div><h3>Marketing & Publicidad</h3><div class="count">6 cursos</div></div>
<div class="area"><div class="a-ico ai3">📈</div><h3>Excel & Productividad</h3><div class="count">6 cursos</div></div>
<div class="area"><div class="a-ico ai4">💬</div><h3>Ventas & Comercialización</h3><div class="count">5 cursos</div></div>
<div class="area"><div class="a-ico ai5">🧮</div><h3>Finanzas & Tributario</h3><div class="count">8 cursos</div></div>
<div class="area"><div class="a-ico ai1">🛢️</div><h3>Sector Petrolero</h3><div class="count">7 cursos</div></div>
<div class="area"><div class="a-ico ai2">🎨</div><h3>Diseño & Contenido</h3><div class="count">4 cursos</div></div>
<div class="area"><div class="a-ico ai3">🌐</div><h3>Idiomas</h3><div class="count">Inglés profesional</div></div>
<div class="area"><div class="a-ico ai4">⚙️</div><h3>Procesos & Calidad</h3><div class="count">ISO 9001</div></div>
<div class="area"><div class="a-ico ai5">⚖️</div><h3>Derecho & Negocios</h3><div class="count">Cultura USA</div></div>
</div>
</div>
</section>
<!-- CURSOS DESTACADOS -->
<section id="cursos">
<div class="wrap">
<div class="sec-head">
<div>
<div class="sec-eyebrow">Los más solicitados</div>
<h2>Empieza por aquí</h2>
</div>
<a href="#" class="link-more">Ver catálogo completo →</a>
</div>
</div>
<div class="wrap">
<div class="carousel">
<div class="course">
<div class="course-thumb ct1"><span class="badge-new">ESTRELLA</span><span class="level">1 mes</span><span class="ico">🤖</span></div>
<div class="course-body">
<div class="course-school">Inteligencia Artificial</div>
<h3>Marketing Digital + IA</h3>
<div class="course-meta"><span>🎬 8h académicas</span><span>🎓 Certificado</span></div>
<div class="course-foot"><div class="price"><small>Online en vivo</small>$140</div><button class="btn-mini">Ver curso</button></div>
</div>
</div>
<div class="course">
<div class="course-thumb ct2"><span class="badge-new">DIPLOMADO</span><span class="level">4 días</span><span class="ico">📱</span></div>
<div class="course-body">
<div class="course-school">Marketing & Publicidad</div>
<h3>Diplomado Community Manager + IA</h3>
<div class="course-meta"><span>🎬 16h académicas</span><span>🎓 Diploma</span></div>
<div class="course-foot"><div class="price"><small>por participante</small>$260</div><button class="btn-mini">Ver curso</button></div>
</div>
</div>
<div class="course">
<div class="course-thumb ct3"><span class="level">2 días</span><span class="ico">🛢️</span></div>
<div class="course-body">
<div class="course-school">Excel · Sector Petrolero</div>
<h3>Excel para la Industria Petrolera</h3>
<div class="course-meta"><span>🎬 8h académicas</span><span>📊 Básico–Intermedio</span></div>
<div class="course-foot"><div class="price"><small>por participante</small>$140</div><button class="btn-mini">Ver curso</button></div>
</div>
</div>
<div class="course">
<div class="course-thumb ct4"><span class="badge-new">70% PRÁCTICO</span><span class="level">3 días</span><span class="ico">🎤</span></div>
<div class="course-body">
<div class="course-school">Ventas & Comercialización</div>
<h3>Oratoria Profesional</h3>
<div class="course-meta"><span>🎬 8h académicas</span><span>🎓 Certificado</span></div>
<div class="course-foot"><div class="price"><small>por participante</small>$140</div><button class="btn-mini">Ver curso</button></div>
</div>
</div>
<div class="course">
<div class="course-thumb ct5"><span class="level">1–2 días</span><span class="ico">₿</span></div>
<div class="course-body">
<div class="course-school">Finanzas & Cripto</div>
<h3>Taller Intensivo de Binance</h3>
<div class="course-meta"><span>🎬 6–7h académicas</span><span>🎓 Certificado</span></div>
<div class="course-foot"><div class="price"><small>desde</small>$80</div><button class="btn-mini">Ver curso</button></div>
</div>
</div>
<div class="course">
<div class="course-thumb ct6"><span class="level">Online</span><span class="ico">📈</span></div>
<div class="course-body">
<div class="course-school">Excel & Productividad</div>
<h3>Excel Nivel Básico</h3>
<div class="course-meta"><span>🎬 8h académicas</span><span>📊 Desde cero</span></div>
<div class="course-foot"><div class="price"><small>online</small>$100</div><button class="btn-mini">Ver curso</button></div>
</div>
</div>
</div>
</div>
</section>
<!-- IN COMPANY (EMPRESAS) -->
<section id="empresas">
<div class="wrap">
<div class="incompany">
<div class="ic-content">
<span class="ic-tag">🏢 FORMACIÓN IN COMPANY</span>
<h2>Capacita a tu equipo con casos reales de tu empresa.</h2>
<p>Diseñamos programas a la medida de tus procesos. Hacemos un diagnóstico previo, personalizamos los materiales y entrenamos con la metodología "Hands-On": aprender haciendo, sobre situaciones reales de tu operación.</p>
<div class="ic-feats">
<div class="ic-feat"><div class="fi">🔍</div><div><div class="ft">Diagnóstico previo</div><div class="fs">Detectamos brechas reales</div></div></div>
<div class="ic-feat"><div class="fi">🛠️</div><div><div class="ft">Casos de tu empresa</div><div class="fs">Material 100% personalizado</div></div></div>
<div class="ic-feat"><div class="fi">📍</div><div><div class="ft">Donde lo necesites</div><div class="fs">Presencial, online o híbrido</div></div></div>
<div class="ic-feat"><div class="fi">🤝</div><div><div class="ft">Consultoría continua</div><div class="fs">Seguimiento y mentoría</div></div></div>
</div>
<button class="btn btn-primary btn-lg">Solicitar propuesta corporativa →</button>
</div>
<div class="ic-clients">
<div class="lbl">Empresas que ya confiaron en nosotros</div>
<div class="client-row"><span class="cdot"></span> SEDICOMVET, C.A.</div>
<div class="client-row"><span class="cdot"></span> Seguros Pirámide</div>
<div class="client-row"><span class="cdot"></span> Artificial Lift Production de Venezuela</div>
<div class="client-row"><span class="cdot"></span> Servintsa Comercial · Anaco</div>
<div class="client-row"><span class="cdot"></span> LA Export Company, C.A.</div>
<div class="client-row" style="color:var(--turquesa)"><span class="cdot"></span> + más de 50 organizaciones</div>
</div>
</div>
</div>
</section>
<!-- DIPLOMADO -->
<section id="diplomado">
<div class="wrap">
<div class="diploma">
<div class="dp-content">
<span class="tag">⭐ DIPLOMADO ESTRELLA</span>
<h2>Diplomado Community Manager + IA para Redes Sociales</h2>
<p>El programa más solicitado para quienes quieren vivir de las redes. Aprende a gestionar marcas, crear contenido con IA y monetizar tu perfil de community manager.</p>
<div class="dp-features">
<div class="dp-feat"><span class="ck">✓</span> 16 horas académicas</div>
<div class="dp-feat"><span class="ck">✓</span> 4 días de formación</div>
<div class="dp-feat"><span class="ck">✓</span> Diploma avalado</div>
<div class="dp-feat"><span class="ck">✓</span> Material por 3 meses</div>
</div>
<button class="btn btn-primary btn-lg">Inscribirme al diplomado →</button>
</div>
<div class="dp-path">
<div class="path-step"><div class="path-num">1</div><div><div class="pt">Fundamentos del Community Manager</div><div class="ps">Perfil, rol y branding</div></div></div>
<div class="path-step"><div class="path-num">2</div><div><div class="pt">Contenido y copywriting con IA</div><div class="ps">Tendencias y herramientas</div></div></div>
<div class="path-step"><div class="path-num">3</div><div><div class="pt">Plan de contenido + ADS</div><div class="ps">Publicidad desde Instagram</div></div></div>
<div class="path-step"><div class="path-num">4</div><div><div class="pt">Monetización y trabajo remoto</div><div class="ps">Vive de las redes</div></div></div>
</div>
</div>
</div>
</section>
<!-- PROFESORES -->
<section id="profesores">
<div class="wrap">
<div class="sec-head">
<div>
<div class="sec-eyebrow">Aprende de los mejores</div>
<h2>Profesores que viven de lo que enseñan.</h2>
</div>
<p>Profesionales activos en la industria, no teóricos. Cada clase la dicta alguien que lo hace todos los días.</p>
</div>
<div class="teachers-grid">
<div class="teacher">
<div class="teacher-photo tp1"><span class="school-tag">IA & MARKETING</span><div class="avatar-lg">DM</div></div>
<div class="teacher-body"><h3>Daniel Méndez</h3><div class="role">Especialista en Marketing & IA</div><p class="bio">Escala marcas con IA y publicidad digital. Lidera los programas de marketing de la academia.</p><div class="teacher-foot"><span class="courses">5 cursos</span><span class="socials"><a href="#">📷</a><a href="#">in</a></span></div></div>
</div>
<div class="teacher">
<div class="teacher-photo tp2"><span class="school-tag">EXCEL · PETROLERA</span><div class="avatar-lg">JR</div></div>
<div class="teacher-body"><h3>José Rivas</h3><div class="role">Ingeniero & Analista de Datos</div><p class="bio">Especialista en Excel para operaciones e industria petrolera. Más de 10 años en el sector energético.</p><div class="teacher-foot"><span class="courses">6 cursos</span><span class="socials"><a href="#">📷</a><a href="#">in</a></span></div></div>
</div>
<div class="teacher">
<div class="teacher-photo tp3"><span class="school-tag">FINANZAS · SENIAT</span><div class="avatar-lg">VC</div></div>
<div class="teacher-body"><h3>Valentina Castro</h3><div class="role">Contadora & Asesora Tributaria</div><p class="bio">Experta en IVA, ISLR y fiscalización. Acompaña a empresas a cumplir sin multas ni sanciones.</p><div class="teacher-foot"><span class="courses">7 cursos</span><span class="socials"><a href="#">📷</a><a href="#">in</a></span></div></div>
</div>
<div class="teacher">
<div class="teacher-photo tp4"><span class="school-tag">ORATORIA · VENTAS</span><div class="avatar-lg">LP</div></div>
<div class="teacher-body"><h3>Laura Pérez</h3><div class="role">Coach de Comunicación</div><p class="bio">Entrena oradores y equipos comerciales con su método Speaker-Action, 70% práctica.</p><div class="teacher-foot"><span class="courses">4 cursos</span><span class="socials"><a href="#">📷</a><a href="#">in</a></span></div></div>
</div>
</div>
</div>
</section>
<!-- IG PROOF -->
<section class="ig-section">
<div class="wrap">
<div class="sec-head">
<div>
<div class="sec-eyebrow">📸 Directo de @adnmillennial</div>
<h2>Resultados reales, no promesas.</h2>
</div>
<a href="#" class="link-more">Síguenos en Instagram →</a>
</div>
<div class="ig-grid">
<div class="ig-post igp1"><span class="reel-icon">🎬</span><div class="ig-overlay"><div class="quote">"Apliqué IA en mi negocio la semana siguiente del curso."</div><div class="who">@maria.emprende · Marketing + IA</div><div class="views">▶ 124K reproducciones</div></div></div>
<div class="ig-post igp2"><span class="reel-icon">🎬</span><div class="ig-overlay"><div class="quote">"Por fin entendí el Excel para mis reportes operativos."</div><div class="who">Ing. Carlos M. · Excel Petrolero</div><div class="views">▶ 89K reproducciones</div></div></div>
<div class="ig-post igp3"><span class="reel-icon">🎬</span><div class="ig-overlay"><div class="quote">"Capacitamos a todo el equipo con casos de nuestra empresa."</div><div class="who">Gerencia · Formación In Company</div><div class="views">▶ 210K reproducciones</div></div></div>
<div class="ig-post igp4"><span class="reel-icon">🎬</span><div class="ig-overlay"><div class="quote">"Perdí el miedo a hablar en público en 3 días."</div><div class="who">@andrea.habla · Oratoria</div><div class="views">▶ 67K reproducciones</div></div></div>
</div>
</div>
</section>
<!-- DASHBOARD -->
<section>
<div class="wrap">
<div class="dash-section">
<div class="dash-mock">
<div class="dash-head">
<div class="greet">Hola, <span>Andrea</span> 👋<br><span style="font-family:'Nunito';font-weight:400;font-size:12px;color:var(--gris)">Sigamos aprendiendo hoy</span></div>
<div class="ring"><i>68%</i></div>
</div>
<div class="dash-row"><div class="dash-thumb dt1">🤖</div><div class="dash-info"><div class="dn">Marketing Digital + IA</div><div class="dp">Módulo 3 de 4 · Contenido con IA</div><div class="progress-bar"><i style="width:72%"></i></div></div><div class="dash-cta">Continuar →</div></div>
<div class="dash-row"><div class="dash-thumb dt2">📈</div><div class="dash-info"><div class="dn">Excel Nivel Intermedio</div><div class="dp">Módulo 1 de 2 · Tablas dinámicas</div><div class="progress-bar"><i style="width:45%"></i></div></div><div class="dash-cta">Continuar →</div></div>
<div class="dash-row"><div class="dash-thumb dt3">🎤</div><div class="dash-info"><div class="dn">Oratoria Profesional</div><div class="dp">¡Completado! Certificado listo</div><div class="progress-bar"><i style="width:100%"></i></div></div><div class="dash-cta">📜 Ver</div></div>
</div>
<div>
<div class="sec-eyebrow">Tu plataforma de alumno</div>
<h2 style="font-size:34px;font-weight:800;letter-spacing:-1px;margin-bottom:28px;line-height:1.1">Una experiencia de aprendizaje moderna, hecha en Venezuela.</h2>
<div class="dash-features">
<div class="df-item"><div class="df-icon">📈</div><div><h3>Progreso visual en tiempo real</h3><p>Retoma cada curso justo donde lo dejaste. Tu avance siempre a la vista.</p></div></div>
<div class="df-item"><div class="df-icon">📜</div><div><h3>Certificados automáticos</h3><p>Termina, aprueba y descarga tu certificado avalado al instante.</p></div></div>
<div class="df-item"><div class="df-icon">📚</div><div><h3>Material por 3 meses</h3><p>Acceso a todas las diapositivas y recursos del curso, más seguimiento post curso.</p></div></div>
</div>
</div>
</div>
</div>
</section>
<!-- UBICACIÓN -->
<section id="ubicacion" class="location-section">
<div class="wrap">
<div class="sec-head">
<div>
<div class="sec-eyebrow">📍 Te esperamos</div>
<h2>Visítanos en nuestra sede principal.</h2>
</div>
<p>Clases presenciales, talleres y formación corporativa. Conoce el espacio donde todo sucede.</p>
</div>
<div class="location-grid">
<div class="location-info">
<div class="loc-main">
<div class="loc-badge"><span class="pulse"></span> SEDE PRINCIPAL</div>
<h3>ADN Millennial · Lechería</h3>
<p class="addr">Av. Principal de Lechería,<br>Estado Anzoátegui, Venezuela</p>
<div class="loc-detail">
<div class="loc-row"><div class="lico">🕐</div><div><div class="lt">Lun – Sáb · 8:00 AM – 6:00 PM</div><div class="ls">Atención presencial y telefónica</div></div></div>
<div class="loc-row"><div class="lico">📞</div><div><div class="lt">+58 424-000-0000</div><div class="ls">WhatsApp e inscripciones</div></div></div>
<div class="loc-row"><div class="lico">📷</div><div><div class="lt">@adnmillennial</div><div class="ls">Instagram · TikTok · Facebook</div></div></div>
</div>
</div>
<div class="other-sedes">
<div class="sede-mini"><div class="sm-name"><span class="pin">📍</span> El Tigre</div><div class="sm-status">● Sede activa</div></div>
<div class="sede-mini"><div class="sm-name"><span class="pin">📍</span> Caracas</div><div class="sm-status">● Próximamente</div></div>
</div>
</div>
<div class="map-wrap">
<div class="map-pin-overlay"><div class="mp-ico">📍</div><div><div class="mp-t">ADN Millennial Academy</div><div class="mp-s">Lechería, Anzoátegui</div></div></div>
<iframe src="https://www.google.com/maps?q=10.1779694,-64.6828405&z=17&output=embed" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="Ubicación ADN Millennial Academy"></iframe>
</div>
</div>
</div>
</section>
<!-- FINAL -->
<section>
<div class="wrap">
<div class="final">
<div class="final-content">
<h2>Tu próximo nivel<br><span class="accent">empieza hoy.</span></h2>
<p>Explora el catálogo, inscríbete a tu primer curso o solicita una propuesta para tu empresa. Te respondemos rápido.</p>
<div class="final-actions">
<button class="btn btn-primary btn-lg">Ver cursos →</button>
<button class="btn btn-ghost btn-lg">Hablar con un asesor</button>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="wrap">
<div class="foot-grid">
<div class="foot-brand">
<a href="#" class="logo">
<div class="logo-mark">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="none">
<defs>
<linearGradient id="helixF" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#2FCCBB"/>
<stop offset="55%" stop-color="#3EC0CB"/>
<stop offset="100%" stop-color="#0D99CB"/>
</linearGradient>
</defs>
<path d="M6 54 L17 14 L28 54" stroke="#3CAD9F" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38 54 L38 16 L58 54 L58 16" stroke="#3CAD9F" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30 12 C44 22, 44 42, 31 54" stroke="url(#helixF)" stroke-width="3.4" stroke-linecap="round"/>
<path d="M31 12 C20 24, 36 40, 31 54" stroke="url(#helixF)" stroke-width="2.2" stroke-linecap="round" opacity="0.9"/>
<circle cx="30" cy="11" r="3" fill="#2FCCBB"/>
<line x1="29" y1="22" x2="38" y2="22" stroke="#CED6DE" stroke-width="1.4" stroke-linecap="round"/>
<line x1="27" y1="29" x2="40" y2="29" stroke="#CED6DE" stroke-width="1.4" stroke-linecap="round"/>
<line x1="27" y1="36" x2="40" y2="36" stroke="#CED6DE" stroke-width="1.4" stroke-linecap="round"/>
<line x1="29" y1="43" x2="38" y2="43" stroke="#CED6DE" stroke-width="1.4" stroke-linecap="round"/>
</svg>
</div>
<div>ADN<small>MILLENNIAL</small></div>
</a>
<p>Formación profesional y corporativa en Venezuela. Certificación avalada internacionalmente, respaldada por universidades.</p>
<div class="foot-social">
<a href="https://instagram.com/adnmillennial" title="Instagram" aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/></svg></a>
<a href="https://tiktok.com/@adnmillennial" title="TikTok" aria-label="TikTok"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3c.3 2.1 1.5 3.7 3.5 4.1v2.6c-1.3.1-2.5-.3-3.6-.9v5.9c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6c.3 0 .6 0 .9.1v2.8c-.3-.1-.6-.2-.9-.2-1.8 0-3.3 1.5-3.3 3.3s1.5 3.3 3.3 3.3 3.3-1.5 3.3-3.3V3h2.8z"/></svg></a>
<a href="https://facebook.com/adnmillennial" title="Facebook" aria-label="Facebook"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M14 9h3V6h-3c-2.2 0-4 1.8-4 4v2H8v3h2v6h3v-6h3l1-3h-4v-2c0-.6.4-1 1-1z"/></svg></a>
</div>
</div>
<div class="foot-col">
<h4>Áreas</h4>
<a href="#">Inteligencia Artificial</a><a href="#">Marketing & Publicidad</a><a href="#">Excel & Productividad</a><a href="#">Finanzas & Tributario</a><a href="#">Sector Petrolero</a>
</div>
<div class="foot-col">
<h4>Academia</h4>
<a href="#">Cursos abiertos</a><a href="#">Diplomados</a><a href="#">In Company</a><a href="#">Cursos personalizados</a><a href="#">Profesores</a>
</div>
<div class="foot-col">
<h4>Sedes</h4>
<a href="#">Lechería</a><a href="#">El Tigre</a><a href="#">Caracas</a><a href="#">Contacto</a><a href="#">Soporte</a>
</div>
</div>
<div class="foot-bottom">
<span>© 2026 ADN Millennial Academy. Hecho en Venezuela 🇻🇪</span>
<span>Términos · Privacidad · @adnmillennial</span>
</div>
</div>
</footer>
<script>
document.querySelector('.menu-toggle').addEventListener('click', function() {
const links = document.querySelector('.nav-links');
const open = links.style.display === 'flex';
links.style.display = open ? 'none' : 'flex';
if (!open) {
Object.assign(links.style, { position:'absolute', flexDirection:'column', top:'72px', left:'0', right:'0', background:'var(--bg2)', padding:'20px 28px', gap:'18px', borderBottom:'1px solid var(--border)' });
}
});