:root{
    --bg:#EEF0F2;
    --panel:#FFFFFF;
    --ink:#1B1D23;
    --ink-soft:#565B66;
    --ink-faint:#8A8F99;
    --accent:#5B5FEF;
    --accent-2:#FF5D8F;
    --rule:#DBDFE4;
    --code-bg:#14161C;
    --code-border:#262A35;
    --tk-sel:#FF7FA8;
    --tk-prop:#7FB4FF;
    --tk-val:#7FD8C0;
    --tk-str:#FFD479;
    --tk-cm:#6B7280;
    --tk-punc:#B7BCC8;
    --maxw:44rem;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

h2,h3 {
    scroll-margin-top: 80px;
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:0.001ms !important;
        transition-duration:0.001ms !important;
    }
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', system-ui, sans-serif;
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

h1,
h2{
    font-family:'Space Grotesk', system-ui, sans-serif;
    color:var(--ink);
    margin:0;
}

a{
    color:var(--accent);
}

/* ---------- Topbar ---------- */

.topbar{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0.9rem 1.5rem;
    background:rgba(238,240,242,0.86);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rule);
}

.mark{
    font-family:'JetBrains Mono', monospace;
    font-weight:600;
    font-size:0.95rem;
    letter-spacing:0.01em;
    color:var(--ink);
}

.mark span{
    color:var(--accent);
}

.toc{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:1.1rem;
    margin:0;
    padding:0;
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
}

.toc a{
    color:var(--ink-soft);
    text-decoration:none;
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:color 0.15s ease, border-color 0.15s ease;
}

.toc a:hover,
.toc a:focus-visible{
    color:var(--accent);
    border-color:var(--accent);
}

@media (max-width:720px){
    .toc{
        display:none;
    }
}

/* ---------- Hero ---------- */

.hero{
    position:relative;
    overflow:hidden;
    padding:5.5rem 1.5rem 4.5rem;
    text-align:left;
}

.hero-bg{
    position:absolute;
    inset:-10% -5%;
    z-index:0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
    font-family:'JetBrains Mono', monospace;
    font-size:0.95rem;
    color:var(--ink);
    opacity:0.05;
    transform:rotate(-4deg);
    pointer-events:none;
    user-select:none;
    line-height:1.9;
    white-space:pre;
}

.hero-inner{
    position:relative;
    z-index:1;
    max-width:var(--maxw);
    margin:0 auto;
    animation:rise 0.7s ease both;
}

@keyframes rise{
    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.eyebrow{
    display:inline-block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.8rem;
    color:var(--accent-2);
    background:rgba(255,93,143,0.09);
    border:1px solid rgba(255,93,143,0.25);
    padding:0.25rem 0.6rem;
    border-radius:6px;
    margin-bottom:1.4rem;
}

.hero h1{
    font-size:clamp(2.4rem, 5.5vw, 3.6rem);
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1.08;
}

.hero h1 em{
    font-style:normal;
    color:var(--accent);
}

.hero .subtitle{
    margin-top:1.3rem;
    max-width:38rem;
    font-size:1.1rem;
    color:var(--ink-soft);
}

.hero .subtitle strong{
    color:var(--ink);
    font-weight:600;
}

/* ---------- Índice ---------- */
.index{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 1.5rem 3rem;
}

.index-head{
    margin-bottom:1.4rem;
}

.index-head h2{
    font-size:1.4rem;
    font-weight:600;
    letter-spacing:-0.01em;
    margin-top:0.5rem;
}

.index-list{
    list-style:none;
    margin:0;
    padding:0;
    border-top:1px solid var(--rule);
}

.index-list li{
    border-bottom:1px solid var(--rule);
}

.index-list a{
    display:flex;
    align-items:baseline;
    gap:1.1rem;
    padding:0.95rem 0.4rem;
    text-decoration:none;
    color:var(--ink);
    border-radius:8px;
    transition:background 0.15s ease, padding-left 0.15s ease;
}

.index-list a:hover,.index-list a:focus-visible{
    background:rgba(91,95,239,0.06);
    padding-left:0.8rem;
}

.index-num{
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    color:var(--ink-faint);
    flex:0 0 auto;
    width:1.6rem;
}

.multinivel {
    font-size: 0.70rem;
}

.third__indice {
    font-size: .70rem;
}

.index-text{
    display:flex;
    flex-direction:column;
    gap:0.15rem;
    flex:1 1 auto;
    min-width:0;
}

.index-title{
    font-family:'Space Grotesk', system-ui, sans-serif;
    font-weight:600;
    font-size:1rem;
    color:var(--ink);
}

.index-desc{
    font-size:0.85rem;
    color:var(--ink-soft);
}

.index-tag{
    flex:0 0 auto;
    font-family:'JetBrains Mono', monospace;
    font-size:0.76rem;
    color:var(--accent);
    background:rgba(91,95,239,0.08);
    border:1px solid rgba(91,95,239,0.22);
    padding:0.2rem 0.55rem;
    border-radius:6px;
    white-space:nowrap;
}

@media (max-width: 560px){
    .index-list a{ flex-wrap:wrap; }
    .index-tag{ margin-left:2.7rem; }
}


/* ---------- Main / Topics ---------- */

main{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0.5rem 1.5rem 6rem;
}

.topic{
    position:relative;
    padding:3.4rem 0 3.4rem 1.6rem;
    border-left:1px solid var(--rule);
}

.topic:first-child{
    padding-top:2.4rem;
}

.topic::before{
    content:"";
    position:absolute;
    left:-4px;
    top:3.8rem;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
}

.topic:first-child::before{
    top:2.8rem;
}

.topic .selector-tag{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    color:var(--accent);
    margin-bottom:0.6rem;
}

.topic h2{
    font-size:1.55rem;
    font-weight:600;
    letter-spacing:-0.01em;
    margin-bottom:1rem;
}

.topic p{
    color:var(--ink-soft);
    margin:0 0 0.9rem;
    max-width:36rem;
}

.topic p:last-of-type{
    margin-bottom:0;
}

.topic p code{
    font-family:'JetBrains Mono', monospace;
    font-size:0.88em;
    background:rgba(91,95,239,0.09);
    color:var(--accent);
    padding:0.1em 0.4em;
    border-radius:4px;
}

.closing-brace{
    margin-top:1.6rem;
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    color:var(--ink-faint);
}


.input__max_min {
    margin: 50px 0;
}


/* ---------- Topic img ---------- */   
.section__img_Visual_Studio {
    width: clamp(300px, 80%, 750px);
    margin-top: 30px;
    border-radius: 30px;
    margin-left: 20px;
}

.section__img {
    height: 300px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img {
    width: clamp(150px, 70%, 400px);
    border-radius: 30px;
    margin-right: 50px;
}


.topic_simbolo p {
    display: flex;
    align-items: center;
}

.encabezados_h {
    margin-top: 100px;
    align-items: end;
}

.img_title {
    width: clamp(150px, 70%, 300px);
    border-radius: 30px;
}

.topic__lis {
    margin-top: 40px;
}

.topic_parrafo {
    margin-top: 60px;
}


/* ---------- Code blocks ---------- */

.code-block{
    margin-top:1.4rem;
    background:var(--code-bg);
    border:1px solid var(--code-border);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 12px 28px -18px rgba(20,22,28,0.55);
}

.code-block .code-chrome{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.65rem 0.9rem;
    border-bottom:1px solid var(--code-border);
}

.code-chrome .dots{
    display:flex;
    gap:6px;
}

.code-chrome .dots span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#3A3F4C;
}

.code-chrome .filename{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    color:var(--ink-faint);
    letter-spacing:0.02em;
}

.code-block pre{
    margin:0;
    padding:1.2rem 1.4rem 1.4rem;
    overflow-x:auto;
}

.code-block code{
    font-family:'JetBrains Mono', monospace;
    font-size:0.86rem;
    line-height:1.7;
    color:var(--tk-punc);
    white-space:pre;
}

.tk-sel{
    color:var(--tk-sel);
}

.tk-prop{
    color:var(--tk-prop);
}

.tk-val{
    color:var(--tk-val);
}

.tk-str{
    color:var(--tk-str);
}

.tk-cm{
    color:var(--tk-cm);
    font-style:italic;
}


/* ---------- Footer ---------- */

footer{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 1.5rem 4rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    font-family:'JetBrains Mono', monospace;
    font-size:0.8rem;
    color:var(--ink-faint);
    border-top:1px solid var(--rule);
    padding-top:1.6rem;
}

footer .brace{
    color:var(--accent);
    font-size:1rem;
}

/* focus visibility */

a:focus-visible,
.toc a:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:3px;
}