/* =========================================
   BLUEPRINT DARK — CECYTE Lógica 2026
   Paleta: Azul cielo · Ámbar · Verde · sin gradientes genéricos
   ========================================= */
:root {
    --bg:           #06090f;
    --surface:      #0d1520;
    --surface-alt:  #0f1e2f;
    --border:       rgba(255,255,255,0.07);
    --border-blue:  rgba(56,189,248,0.2);
    --border-amber: rgba(251,191,36,0.25);
    --border-green: rgba(52,211,153,0.2);
    --blue:         #38bdf8;
    --blue-dim:     rgba(56,189,248,0.1);
    --amber:        #fbbf24;
    --amber-dim:    rgba(251,191,36,0.1);
    --green:        #34d399;
    --green-dim:    rgba(52,211,153,0.1);
    --purple:       #a78bfa;
    --text:         #e2e8f0;
    --text-soft:    #94a3b8;
    --text-muted:   #4e6074;
    --radius:       16px;
    --radius-sm:    8px;
    --shadow:       0 8px 32px rgba(0,0,0,0.5);
}

*  { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Plus Jakarta Sans',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.75;
    overflow-x:hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border-blue); border-radius:3px; }

/* =========================================
   NAVBAR
   ========================================= */
.navbar {
    background:rgba(6,9,15,0.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 5%;
    height:68px;
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
    border-bottom:1px solid var(--border);
    transition:all .3s;
}
.logo { font-weight:800; font-size:1.15rem; display:flex; align-items:center; gap:8px; }
.logo i, .logo-accent { color:var(--blue); }
.nav-links { list-style:none; display:flex; gap:.25rem; }
.nav-links a {
    color:var(--text-soft);
    text-decoration:none;
    font-weight:600;
    font-size:.9rem;
    padding:8px 14px;
    border-radius:8px;
    transition:all .2s;
    display:flex;
    align-items:center;
    gap:6px;
}
.nav-links a:hover { color:var(--text); background:var(--border); }
.nav-links a i { font-size:.8rem; opacity:.7; }
.menu-toggle {
    display:none;
    background:none;
    border:1px solid var(--border);
    color:var(--text-soft);
    font-size:1.2rem;
    cursor:pointer;
    padding:8px 10px;
    border-radius:8px;
    transition:all .2s;
}
.menu-toggle:hover { color:var(--blue); border-color:var(--border-blue); }

/* =========================================
   HERO — Cuadrícula técnica (no degradado IA)
   ========================================= */
.hero {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    padding:100px 20px 60px;
    background-color:var(--bg);
    background-image:
        linear-gradient(rgba(56,189,248,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,189,248,.04) 1px, transparent 1px);
    background-size:64px 64px;
    overflow:hidden;
}
/* Halos de ambiente sutiles (no el típico radial morado/cyan) */
.hero::before {
    content:'';
    position:absolute;
    width:600px; height:600px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(56,189,248,.06) 0%, transparent 65%);
    top:-150px; left:-150px;
    pointer-events:none;
}
.hero::after {
    content:'';
    position:absolute;
    width:500px; height:500px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(251,191,36,.05) 0%, transparent 65%);
    bottom:-100px; right:-100px;
    pointer-events:none;
}
.hero-overlay { display:none; }
.hero-content { position:relative; z-index:2; max-width:840px; }
.hero-particles { position:absolute; inset:0; z-index:1; pointer-events:none; }

.badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--blue-dim);
    border:1px solid var(--border-blue);
    color:var(--blue);
    padding:6px 18px;
    border-radius:50px;
    font-size:.8rem;
    font-weight:700;
    margin-bottom:28px;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.hero h1 {
    font-size:clamp(2.8rem,6vw,4.5rem);
    font-weight:800;
    line-height:1.1;
    margin-bottom:20px;
    letter-spacing:-.02em;
    color:#f0f6fc;
}

/* Subrayado dinámico en lugar del degradado genérico */
.gradient-text {
    position:relative;
    color:var(--blue);
    display:inline-block;
}
.gradient-text::after {
    content:'';
    position:absolute;
    left:0; bottom:-4px;
    width:100%; height:3px;
    background:linear-gradient(90deg, var(--blue), var(--amber));
    border-radius:2px;
    animation:underlineGrow 1.2s ease forwards .5s;
    transform-origin:left;
    transform:scaleX(0);
}
@keyframes underlineGrow { to { transform:scaleX(1); } }

.typewriter-container { height:40px; margin-bottom:24px; }
.typewriter-text {
    font-family:'Fira Code',monospace;
    font-size:1.1rem;
    color:var(--green);
    background:var(--green-dim);
    padding:5px 16px;
    border-radius:6px;
    border:1px solid var(--border-green);
}
.typewriter-text::after { content:'█'; font-size:.9em; animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0} }

.hero-sub { color:var(--text-soft); font-size:1.05rem; margin-bottom:36px; }
.hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.btn-principal {
    background:var(--blue);
    color:#06090f;
    padding:13px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    font-size:.95rem;
    transition:all .2s;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.btn-principal:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(56,189,248,.35); background:#7dd3fc; }

.btn-secondary {
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-soft);
    padding:13px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    font-size:.95rem;
    transition:all .2s;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.btn-secondary:hover { border-color:var(--border-blue); color:var(--text); }

.scroll-pulse {
    position:absolute; bottom:36px;
    width:20px; height:20px;
    background:var(--blue);
    border-radius:50%;
    animation:ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%,100%{transform:scale(3);opacity:0} }

/* =========================================
   LAYOUT PRINCIPAL
   ========================================= */
main { max-width:1140px; margin:0 auto; padding:0 5%; }
.section-topic { padding:100px 0; border-bottom:1px solid var(--border); }

.section-header { text-align:center; margin-bottom:64px; }
.topic-tag {
    display:inline-block;
    background:var(--blue-dim);
    color:var(--blue);
    padding:5px 16px;
    border-radius:50px;
    font-weight:700;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:16px;
    border:1px solid var(--border-blue);
}
.tag-orange { background:var(--amber-dim); color:var(--amber); border-color:var(--border-amber); }
.tag-green  { background:var(--green-dim);  color:var(--green);  border-color:var(--border-green); }

.section-header h2 {
    font-size:clamp(1.8rem,3vw,2.5rem);
    font-weight:800;
    margin-bottom:16px;
    letter-spacing:-.02em;
}
.section-header h2 i { margin-right:10px; opacity:.8; }
.section-desc { color:var(--text-soft); max-width:700px; margin:0 auto; font-size:1.05rem; }

/* =========================================
   BLOQUES DE CONTENIDO
   ========================================= */
.content-block {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    background:var(--surface);
    padding:40px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    margin-bottom:32px;
    align-items:center;
}
.content-block-alt { direction:rtl; }
.content-block-alt > * { direction:ltr; }
.content-text { min-width:0; }
.content-media { min-width:0; }
.content-media img { width:100%; border-radius:10px; border:1px solid var(--border); display:block; }
.content-media figcaption { font-size:.78rem; color:var(--text-muted); text-align:center; margin-top:10px; font-style:italic; }

.flowchart-svg-wrap {
    background:#050b14;
    border-radius:10px;
    border:1px solid var(--border-blue);
    padding:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}
.flowchart-svg-wrap svg { max-width:100%; height:auto; }

.block-tag {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--border);
    padding:4px 14px;
    border-radius:6px;
    font-size:.82rem;
    color:var(--blue);
    font-weight:700;
    margin-bottom:16px;
    border:1px solid var(--border-blue);
}
.block-tag-amber { color:var(--amber); border-color:var(--border-amber); }
.block-tag-green  { color:var(--green);  border-color:var(--border-green); }

.content-text h3 { font-size:1.4rem; font-weight:800; margin-bottom:14px; letter-spacing:-.01em; }
.content-text p { color:var(--text-soft); margin-bottom:14px; }
.content-text p strong { color:var(--text); }

.styled-list { list-style:none; margin:16px 0; display:flex; flex-direction:column; gap:12px; }
.styled-list li { display:flex; gap:12px; color:var(--text-soft); align-items:flex-start; }
.styled-list i { color:var(--blue); margin-top:4px; flex-shrink:0; font-size:.85rem; }
.styled-list strong { color:var(--text); }

/* =========================================
   TOPIC CARDS
   ========================================= */
.topic-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
    margin-bottom:32px;
}
.topic-card {
    background:var(--surface);
    padding:28px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    transition:all .25s;
    position:relative;
    overflow:hidden;
}
.topic-card::before {
    content:'';
    position:absolute;
    top:0; left:0;
    width:3px; height:100%;
    background:var(--blue);
    opacity:0;
    transition:opacity .25s;
}
.topic-card:hover { transform:translateY(-4px); border-color:var(--border-blue); }
.topic-card:hover::before { opacity:1; }
.card-full { grid-column:1/-1; }
.card-icon {
    width:48px; height:48px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; color:white; margin-bottom:18px;
}
.bg-blue   { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.bg-orange { background:linear-gradient(135deg,#f97316,#c2410c); }
.bg-purple { background:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.bg-green  { background:linear-gradient(135deg,#10b981,#047857); }
.bg-amber  { background:linear-gradient(135deg,#f59e0b,#b45309); }
.bg-red    { background:linear-gradient(135deg,#ef4444,#991b1b); }
.topic-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.topic-card p  { color:var(--text-soft); font-size:.95rem; line-height:1.65; }

/* =========================================
   CÓDIGO
   ========================================= */
.code-block {
    background:#030812;
    padding:20px 24px;
    border-radius:10px;
    border:1px solid #1e2d45;
    overflow-x:auto;
    color:#cdd9e5;
    font-family:'Fira Code',monospace;
    line-height:1.7;
    font-size:.88rem;
    tab-size:4;
}
.code-example { border-radius:10px; overflow:hidden; border:1px solid #1e2d45; }
.code-example .code-block { margin:0; border:none; border-radius:0; }
.code-label {
    padding:9px 16px;
    font-size:.78rem;
    font-weight:700;
    font-family:'Fira Code',monospace;
    display:flex; align-items:center; gap:8px; color:white;
}
.code-label.lbl-orange { background:#c2410c; }
.code-label.lbl-blue   { background:#1e40af; }
.code-label.lbl-green  { background:#065f46; }
.code-label.lbl-amber  { background:#92400e; }
.kw  { color:#ff7b72; font-weight:600; }
.str { color:#a5d6ff; }
.cm  { color:#6e7681; font-style:italic; }
.fn  { color:#d2a8ff; }
.num { color:#79c0ff; }
.op  { color:#fbbf24; }

/* =========================================
   VIDEOS
   ========================================= */
.video-wrapper {
    background:var(--surface);
    padding:28px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    margin-top:32px;
}
.video-wrapper h3 { display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:1.1rem; font-weight:700; }
.video-wrapper h3 .fa-youtube { color:#ff0000; font-size:1.4rem; }
.video-container {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    border-radius:10px;
    overflow:hidden;
    border:1px solid var(--border);
}
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

.video-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:24px;
    margin-top:32px;
}
.video-item {
    background:var(--surface);
    border-radius:var(--radius);
    border:1px solid var(--border);
    overflow:hidden;
    transition:border-color .2s;
}
.video-item:hover { border-color:var(--border-blue); }
.video-item .video-container { border-radius:0; border:none; border-bottom:1px solid var(--border); }
.video-item-info { padding:16px 18px; }
.video-item-info h4 { font-size:.95rem; font-weight:700; margin-bottom:4px; }
.video-item-info p  { font-size:.82rem; color:var(--text-muted); }

/* =========================================
   SECCIÓN ARDUINO
   ========================================= */
.arduino-section {
    margin-top:56px;
    padding-top:56px;
    border-top:2px dashed rgba(251,191,36,.2);
}
.arduino-banner {
    display:flex; align-items:center; gap:20px;
    background:var(--amber-dim);
    border:1px solid var(--border-amber);
    border-radius:var(--radius);
    padding:24px 28px;
    margin-bottom:40px;
}
.arduino-banner-icon {
    width:60px; height:60px;
    border-radius:14px;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; color:white; flex-shrink:0;
}
.arduino-banner-text h3 { font-size:1.4rem; font-weight:800; margin-bottom:4px; }
.arduino-banner-text p  { color:var(--text-soft); font-size:.95rem; }

/* Visor 3D */
.model3d-wrapper {
    background:var(--surface);
    border-radius:var(--radius);
    border:1px solid var(--border-amber);
    overflow:hidden;
    margin-bottom:32px;
}
.model3d-header {
    padding:14px 20px;
    background:var(--amber-dim);
    border-bottom:1px solid var(--border-amber);
    display:flex; align-items:center; gap:10px;
    font-weight:700; color:var(--amber); font-size:.88rem;
}
.model3d-container { position:relative; padding-bottom:56.25%; height:0; }
.model3d-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

/* Tabla de componentes */
.components-table { width:100%; border-collapse:collapse; font-size:.9rem; margin:20px 0; }
.components-table th {
    background:var(--surface-alt,#0f1e2f);
    padding:11px 16px;
    text-align:left;
    font-weight:700;
    color:var(--amber);
    border:1px solid var(--border);
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.components-table td { padding:10px 16px; border:1px solid var(--border); color:var(--text-soft); }
.components-table tr:nth-child(even) td { background:rgba(255,255,255,.02); }
.components-table tr:hover td { background:var(--amber-dim); color:var(--text); }
.qty-badge {
    background:var(--amber-dim);
    color:var(--amber);
    padding:2px 10px;
    border-radius:20px;
    font-weight:700;
    font-size:.8rem;
    border:1px solid var(--border-amber);
    display:inline-block;
}

/* Pasos de proyecto */
.steps-list { list-style:none; counter-reset:steps; margin:16px 0; }
.steps-list li {
    counter-increment:steps;
    display:flex; gap:16px; align-items:flex-start;
    padding:16px 0;
    border-bottom:1px solid var(--border);
    color:var(--text-soft);
}
.steps-list li:last-child { border-bottom:none; }
.steps-list li::before {
    content:counter(steps);
    background:var(--amber-dim);
    color:var(--amber);
    border:1px solid var(--border-amber);
    min-width:32px; height:32px;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.9rem; flex-shrink:0;
    font-family:'Fira Code',monospace;
}
.steps-list li strong { color:var(--text); display:block; margin-bottom:4px; }

/* Info boxes */
.info-box {
    display:flex; gap:14px;
    padding:14px 18px;
    border-radius:10px;
    margin:20px 0;
    align-items:flex-start;
    font-size:.9rem;
    line-height:1.6;
}
.info-box.tip     { background:var(--green-dim); border:1px solid var(--border-green); color:var(--text-soft); }
.info-box.note    { background:var(--blue-dim);  border:1px solid var(--border-blue);  color:var(--text-soft); }
.info-box.warning { background:var(--amber-dim); border:1px solid var(--border-amber); color:var(--text-soft); }
.info-box i { margin-top:2px; flex-shrink:0; font-size:1rem; }
.info-box.tip i     { color:var(--green); }
.info-box.note i    { color:var(--blue); }
.info-box.warning i { color:var(--amber); }

/* =========================================
   SECCIÓN ALUMNOS
   ========================================= */
.team-section { padding:100px 5%; max-width:1140px; margin:0 auto; }
.section-title { text-align:center; margin-bottom:50px; }
.section-title h2 { font-size:clamp(1.8rem,3vw,2.2rem); font-weight:800; margin-bottom:10px; }
.section-title p  { color:var(--text-soft); }

.team-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:32px;
    max-width:820px;
    margin:0 auto;
}
.student-card {
    background:var(--surface);
    padding:40px 28px;
    border-radius:var(--radius);
    text-align:center;
    border:1px solid var(--border);
    transition:all .3s;
}
.student-card:hover { border-color:var(--border-blue); transform:translateY(-4px); }
.student-avatar {
    width:110px; height:110px;
    margin:0 auto 22px;
    border-radius:50%;
    padding:3px;
    background:linear-gradient(135deg,var(--blue),var(--amber));
}
.student-avatar img {
    width:100%; height:100%;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--surface);
    display:block;
}

/* === STUDENT CARDS (continuación) === */
.student-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.student-card p  { color:var(--text-soft); font-size:.9rem; }
.student-tags { margin:12px 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.student-tags span {
    background:var(--blue-dim);
    color:var(--blue);
    padding:4px 12px;
    border-radius:20px;
    font-size:.78rem;
    font-weight:700;
    border:1px solid var(--border-blue);
}

/* =========================================
   FOOTER
   ========================================= */
footer { background:#030609; border-top:1px solid var(--border); padding:60px 5% 24px; }
.footer-container {
    display:flex; flex-wrap:wrap; justify-content:space-between;
    max-width:1140px; margin:0 auto; gap:40px;
}
.footer-col { flex:1 1 260px; }
.footer-logo { font-size:1.15rem; font-weight:800; color:white; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.footer-logo i { color:var(--blue); }
.footer-col p  { color:var(--text-muted); font-size:.88rem; line-height:1.7; }
.footer-col h4 { color:var(--text); margin-bottom:16px; font-weight:700; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul a {
    color:var(--text-muted); text-decoration:none; font-size:.88rem;
    transition:color .2s; display:inline-flex; align-items:center; gap:8px;
}
.footer-col ul a:hover { color:var(--blue); }
.footer-bottom {
    text-align:center; margin-top:48px; padding-top:24px;
    border-top:1px solid var(--border); color:var(--text-muted);
    font-size:.82rem; max-width:1140px; margin-left:auto; margin-right:auto;
}

/* =========================================
   ANIMACIONES
   ========================================= */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.active { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.15s; }
.delay-2 { transition-delay:.3s; }
.animate-fade-in { animation:fadeIn .8s both; }
.animate-slide-up { animation:slideUp .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* =========================================
   RESPONSIVE — 3 breakpoints completos
   ========================================= */

/* Tablet */
@media (max-width:900px) {
    .content-block { grid-template-columns:1fr; }
    .content-block-alt { direction:ltr; }
    .video-grid { grid-template-columns:1fr; }
}

/* Mobile */
@media (max-width:768px) {
    .nav-links {
        display:none; flex-direction:column;
        position:absolute; top:68px; left:0;
        width:100%; background:rgba(6,9,15,.98);
        padding:16px; border-bottom:1px solid var(--border); gap:.25rem;
    }
    .nav-links.open { display:flex; }
    .nav-links a { padding:12px 16px; border-radius:8px; font-size:1rem; }
    .menu-toggle { display:flex; }

    .hero { padding:100px 24px 60px; }
    .hero h1 { font-size:2.2rem; }
    .hero-btns { flex-direction:column; align-items:center; }
    .btn-principal, .btn-secondary { width:100%; max-width:300px; justify-content:center; }

    main { padding:0 4%; }
    .section-topic { padding:70px 0; }
    .content-block { padding:24px; gap:24px; }
    .topic-grid { grid-template-columns:1fr; }
    .card-full { grid-column:unset; }

    .arduino-banner { flex-direction:column; text-align:center; }
    .model3d-container { padding-bottom:70%; }

    .team-section { padding:70px 4%; }
    .team-grid { grid-template-columns:1fr; max-width:400px; }

    .footer-container { flex-direction:column; gap:32px; }
    .footer-col { text-align:left; }

    .components-table { font-size:.8rem; }
    .components-table th,
    .components-table td { padding:8px 10px; }

    .steps-list li { gap:12px; }
    .video-wrapper { padding:20px; }
}

/* Móvil pequeño */
@media (max-width:480px) {
    .hero h1 { font-size:1.85rem; }
    .section-header h2 { font-size:1.5rem; }
    .code-block { font-size:.78rem; padding:16px; }
    .badge { font-size:.72rem; }
    .content-block { padding:18px; }
    .topic-card { padding:20px; }
    .section-topic { padding:56px 0; }
    .flowchart-svg-wrap svg { max-width:240px; }
}