* {
    box-sizing: border-box
}

body {
    margin: 0;
    font: 16px/1.65 Inter, system-ui, sans-serif;
    color: #132544;
    background: #fff
}

body.dark {
    color: #eaf3ff;
    background: #061329
}

.wrap {
    width: min(1160px, calc(100% - 36px));
    margin: auto
}

header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fffffff2;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #dce5f1
}

.dark header {
    background: #061329ee
}

.nav {
    height: 74px;
    display: flex;
    align-items: center;
    gap: 15px
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 950;
    letter-spacing: .13em
}

.brand img {
    width: 44px;
    height: 44px;
    object-fit: contain
}

.links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px
}

.links a {
    padding: 9px 10px;
    border-radius: 10px;
    color: #62728a;
    text-decoration: none;
    font-weight: 800;
    font-size: .9rem
}

.links a:hover {
    background: #0878ff12;
    color: #0878ff
}

.island {
    border: 1px solid #0878ff33
}

.tools {
    display: flex;
    gap: 7px
}

.lang {
    display: flex;
    border: 1px solid #dce5f1;
    border-radius: 10px;
    padding: 3px
}

.lang button,
.theme {
    border: 0;
    background: transparent;
    padding: 7px 8px;
    border-radius: 7px;
    font-weight: 900
}

.lang button.on {
    background: #071b3e;
    color: white
}

.hero {
    color: white;
    background: radial-gradient(circle at 80% 25%, #00dff848, transparent 26%), linear-gradient(140deg, #03122c, #082e61);
    padding: 85px 0
}

.heroGrid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 50px
}

.hero h1 {
    font-size: clamp(3.2rem, 7vw, 6.2rem);
    line-height: .95;
    letter-spacing: -.06em;
    margin: 15px 0
}

.hero h1 span {
    background: linear-gradient(90deg, #23e6ef, #6ea9ff, #b359ff);
    -webkit-background-clip: text;
    color: transparent
}

.hero p {
    color: #cfe1f5;
    font-size: 1.12rem
}

.hero img {
    width: 100%;
    filter: drop-shadow(0 30px 55px #0007)
}

.eyebrow {
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #20e9ed;
    font-weight: 900
}

.btn {
    display: inline-block;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 900;
    margin: 8px 8px 0 0
}

.primary {
    color: white;
    background: linear-gradient(90deg, #0878ff, #9346ff)
}

.secondary {
    color: white;
    border: 1px solid #ffffff55
}

.section {
    padding: 80px 0
}

.soft {
    background: #f3f7fc
}

.dark .soft {
    background: #0a1d3b
}

.section h2 {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -.04em
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.card {
    padding: 25px;
    border: 1px solid #dce5f1;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 30px #17395d0d
}

.dark .card {
    background: #0a1d3b;
    border-color: #28446d
}

.card p,
.muted {
    color: #68768d
}

.project {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: center
}

.projectVisual {
    min-height: 350px;
    border-radius: 26px;
    background: linear-gradient(135deg, #071b3e, #3137aa);
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
    padding: 30px
}

.projectVisual img {
    max-width: 320px
}

.cvHero {
    background: linear-gradient(140deg, #03122c, #0b3a74);
    color: white;
    padding: 65px 0
}

.cvGrid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
    align-items: center
}

.photo {
    width: 100%;
    border-radius: 28px;
    border: 7px solid #1adfea;
    box-shadow: 0 25px 60px #0007
}

.cvLayout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 45px
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.skills span {
    background: #0878ff13;
    color: #0878ff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 800
}

.job {
    padding: 0 0 28px 24px;
    border-left: 2px solid #dce5f1
}

.job h3 {
    margin: .2rem 0
}

.period {
    color: #0878ff;
    font-weight: 900
}

.footer {
    padding: 40px 0;
    background: #041027;
    color: #bed0e8
}

.menu {
    display: none
}

@media(max-width:930px) {
    .links {
        display: none;
        position: absolute;
        top: 70px;
        left: 18px;
        right: 18px;
        flex-direction: column;
        background: white;
        padding: 12px;
        border-radius: 14px
    }

    .links.open {
        display: flex
    }

    .menu {
        display: block;
        margin-left: auto
    }

    .heroGrid,
    .cvGrid,
    .cvLayout,
    .project {
        grid-template-columns: 1fr
    }

    .grid {
        grid-template-columns: 1fr 1fr
    }

    .hero img {
        max-width: 480px
    }

    .tools {
        margin-left: 0
    }
}

@media(max-width:620px) {
    .grid {
        grid-template-columns: 1fr
    }

    .brand span {
        display: none
    }

    .hero {
        padding: 55px 0
    }

    .hero h1 {
        font-size: 3.3rem
    }

    .section {
        padding: 55px 0
    }
}

.heroGrid>img {
    display: none
}

.heroOrbit {
    position: relative;
    width: min(470px, 92vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: auto;
    border: 1px solid rgba(77, 171, 255, .25);
    border-radius: 50%
}

.heroOrbit img {
    width: 78%;
    filter: drop-shadow(0 28px 50px rgba(0, 0, 0, .35))
}

.orbitBall {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    animation: orbitSpin 8s linear infinite
}

.orbitBall:after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #20e9ed, #0878ff);
    box-shadow: 0 0 20px #20e9ed, 0 0 7px #fff
}

@keyframes orbitSpin {
    to {
        transform: rotate(360deg)
    }
}

.projectVisual img {
    width: 190px;
    max-height: 190px
}

@media(prefers-reduced-motion:reduce) {
    .orbitBall {
        animation: none
    }
}

@media(max-width:620px) {
    .heroOrbit {
        width: min(320px, 86vw)
    }
}


/* ADERUN Premium refinement */
:root {
    --bg: #050f22;
    --bg2: #071831;
    --panel: #0b2040;
    --panel2: #0d274e;
    --line: rgba(126, 181, 255, .16);
    --text: #f5f8ff;
    --muted: #9fb0c9;
    --cyan: #21e5ef;
    --blue: #1888ff;
    --violet: #9b4dff
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: -.01em
}

body.dark {
    background: var(--bg);
    color: var(--text)
}

header,
.dark header {
    height: 82px;
    background: rgba(5, 15, 34, .86);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .16);
    backdrop-filter: blur(20px)
}

.nav {
    height: 82px
}

.brand {
    color: #fff;
    text-decoration: none
}

.brand img {
    width: 46px;
    height: 46px
}

.brand span {
    font-size: 1.08rem;
    color: #f5f8ff;
    text-decoration: none;
    letter-spacing: .16em
}

.links {
    gap: 10px
}

.links a {
    font-size: .88rem;
    color: #aebbd0;
    padding: 10px 11px;
    font-weight: 750;
    transition: .2s ease
}

.links a:hover {
    color: #fff;
    background: rgba(24, 136, 255, .11)
}

.tools {
    align-items: center
}

.lang {
    border-color: rgba(180, 205, 240, .25);
    background: rgba(255, 255, 255, .025)
}

.lang button {
    color: #8495af;
    cursor: pointer
}

.lang button.on {
    background: linear-gradient(135deg, #167dff, #704dff);
    color: #fff;
    box-shadow: 0 7px 18px rgba(49, 104, 255, .28)
}

.theme {
    color: #dbe7fa;
    border: 1px solid rgba(180, 205, 240, .22);
    cursor: pointer
}

.hero {
    min-height: 670px;
    display: flex;
    align-items: center;
    padding: 96px 0 90px;
    background: radial-gradient(circle at 77% 22%, rgba(32, 229, 239, .17), transparent 21%), radial-gradient(circle at 90% 70%, rgba(155, 77, 255, .11), transparent 25%), linear-gradient(135deg, #041126 0%, #082855 70%, #0c3765 100%)
}

.heroGrid {
    gap: 78px
}

.hero h1 {
    max-width: 720px;
    font-size: clamp(3.8rem, 6.4vw, 6.8rem);
    line-height: .92;
    letter-spacing: -.065em;
    margin: 20px 0 26px
}

.hero p {
    max-width: 620px;
    color: #c2d0e5;
    font-size: 1.12rem;
    line-height: 1.75
}

.eyebrow {
    color: var(--cyan);
    font-size: .76rem;
    letter-spacing: .19em
}

.heroOrbit {
    width: min(470px, 40vw);
    background: radial-gradient(circle, rgba(17, 67, 122, .28), rgba(7, 25, 54, .08) 56%, transparent 57%);
    box-shadow: inset 0 0 100px rgba(28, 133, 255, .06)
}

.heroOrbit img {
    width: 74%
}

.orbitBall:after {
    width: 13px;
    height: 13px;
    box-shadow: 0 0 24px #20e9ed, 0 0 8px #fff
}

.btn {
    padding: 13px 20px;
    border-radius: 13px;
    transition: transform .2s ease, box-shadow .2s ease
}

.btn:hover {
    transform: translateY(-2px)
}

.primary {
    background: linear-gradient(100deg, #0b83ff, #8b45ff);
    box-shadow: 0 12px 28px rgba(62, 84, 255, .28)
}

.primary:hover {
    box-shadow: 0 16px 35px rgba(62, 84, 255, .38)
}

.secondary {
    border-color: rgba(200, 220, 255, .28);
    background: rgba(255, 255, 255, .025)
}

.section {
    padding: 105px 0
}

.section.soft,
.dark .soft {
    background: linear-gradient(180deg, #06142b, #071a35)
}

.section h2 {
    max-width: 920px;
    font-size: clamp(2.5rem, 4.1vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -.052em;
    color: #eff5ff
}

.grid {
    gap: 22px;
    margin-top: 42px
}

.card {
    min-height: 210px;
    padding: 30px;
    background: linear-gradient(145deg, rgba(13, 39, 78, .92), rgba(8, 29, 60, .92));
    border: 1px solid var(--line);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .16);
    transition: .25s ease
}

.card:hover {
    transform: translateY(-5px);
    border-color: rgba(55, 185, 255, .35);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .24)
}

.card h3 {
    font-size: 1.22rem
}

.card p,
.muted {
    color: var(--muted);
    line-height: 1.72
}

.project {
    gap: 55px
}

.projectVisual {
    min-height: 410px;
    background: radial-gradient(circle at 35% 28%, rgba(32, 229, 239, .22), transparent 25%), linear-gradient(140deg, #092452, #161d72);
    border: 1px solid rgba(87, 180, 255, .22);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25)
}

.projectVisual img {
    width: 230px
}

.projectVisual h2 {
    font-size: 2.4rem
}

.cvHero {
    padding: 92px 0;
    background: radial-gradient(circle at 70% 15%, rgba(34, 162, 255, .14), transparent 28%), linear-gradient(135deg, #041126, #0a3266)
}

.cvGrid {
    grid-template-columns: 350px minmax(0, 1fr);
    gap: 70px
}

.photo {
    border: 2px solid rgba(32, 229, 239, .75);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .38)
}

.cvHero h1 {
    font-size: clamp(3.1rem, 5vw, 5.5rem) !important;
    max-width: 760px;
    letter-spacing: -.055em;
    margin: 24px 0 25px
}

.cvHero h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 700
}

.cvHero p {
    max-width: 800px;
    color: #c3d2e8;
    font-size: 1.05rem;
    line-height: 1.8
}

.cvLayout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 70px
}

.cvLayout>aside {
    padding-right: 20px
}

.cvLayout h2 {
    font-size: clamp(2rem, 3vw, 3.35rem);
    margin-top: 0
}

.skills {
    gap: 9px
}

.skills span {
    padding: 8px 12px;
    background: rgba(15, 109, 255, .12);
    border: 1px solid rgba(34, 139, 255, .18);
    color: #52a6ff
}

.job {
    padding: 0 0 38px 30px;
    border-left-color: rgba(163, 193, 231, .28)
}

.job h3 {
    font-size: 1.25rem;
    color: #edf4ff
}

.period {
    display: block;
    margin-bottom: 8px;
    color: #35a0ff
}

.footer {
    border-top: 1px solid var(--line);
    background: #030c1c;
    color: #8fa2bf
}

@media(max-width:1050px) {
    .heroGrid {
        gap: 38px
    }

    .links {
        gap: 2px
    }

    .links a {
        padding: 9px 8px
    }

    .cvGrid {
        grid-template-columns: 310px 1fr;
        gap: 45px
    }
}

@media(max-width:930px) {

    header,
    .nav {
        height: 72px
    }

    .menu {
        display: block;
        color: #fff;
        border: 1px solid var(--line);
        background: transparent;
        border-radius: 10px;
        padding: 8px 10px
    }

    .links {
        top: 72px;
        background: #071831;
        border: 1px solid var(--line);
        box-shadow: 0 24px 50px rgba(0, 0, 0, .4)
    }

    .links a {
        width: 100%;
        color: #b7c5d9
    }

    .hero {
        min-height: auto;
        padding: 78px 0
    }

    .heroGrid,
    .cvGrid,
    .cvLayout,
    .project {
        grid-template-columns: 1fr
    }

    .heroOrbit {
        width: min(410px, 82vw);
        margin-top: 30px
    }

    .cvGrid {
        justify-items: start
    }

    .photo {
        width: min(360px, 100%)
    }

    .cvLayout>aside {
        padding-right: 0
    }

    .section {
        padding: 78px 0
    }
}

@media(max-width:620px) {
    .brand span {
        display: inline;
        font-size: .92rem
    }

    .hero h1 {
        font-size: clamp(3rem, 15vw, 4.25rem)
    }

    .section h2 {
        font-size: 2.45rem
    }

    .grid {
        grid-template-columns: 1fr
    }

    .cvHero h1 {
        font-size: 3rem !important
    }

    .tools {
        gap: 4px
    }

    .lang button {
        padding: 6px
    }

    .theme {
        display: none
    }
}

.contactHero {
    padding: 105px 0 70px;
    background: radial-gradient(circle at 80% 20%, rgba(32, 229, 239, .12), transparent 25%), linear-gradient(135deg, #041126, #082a57)
}

.contactHero h1 {
    font-size: clamp(3.2rem, 6vw, 5.8rem);
    max-width: 850px;
    line-height: .96;
    letter-spacing: -.06em;
    margin: 22px 0
}

.contactHero p {
    max-width: 700px;
    color: #bdcce2;
    font-size: 1.12rem
}

.contactLayout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 55px
}

.contactInfo,
.contactForm {
    position: relative;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(13, 39, 78, .95), rgba(7, 27, 57, .96));
    box-shadow: 0 26px 65px rgba(0, 0, 0, .22)
}

.contactInfo {
    overflow: hidden
}

.contactInfo a {
    color: #55b4ff;
    text-decoration: none;
    font-weight: 800
}

.contactGlow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #1ce5ef22;
    filter: blur(45px);
    right: -100px;
    top: -100px
}

.contactForm {
    display: grid;
    gap: 20px
}

.formGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.contactForm label {
    display: grid;
    gap: 8px;
    color: #dbe6f7;
    font-weight: 750
}

.contactForm input,
.contactForm textarea {
    width: 100%;
    border: 1px solid rgba(157, 192, 235, .23);
    background: rgba(1, 12, 31, .55);
    color: #f5f8ff;
    border-radius: 12px;
    padding: 13px 14px;
    outline: none
}

.contactForm textarea {
    min-height: 180px;
    resize: vertical
}

.contactForm input:focus,
.contactForm textarea:focus {
    border-color: #2ba9ff;
    box-shadow: 0 0 0 4px rgba(43, 169, 255, .1)
}

.formActions {
    display: flex;
    align-items: center;
    gap: 18px
}

.formActions small {
    color: #8294af
}

.formStatus {
    min-height: 24px;
    font-weight: 800
}

.formStatus.success {
    color: #49e5b1
}

.formStatus.error {
    color: #ff7b8b
}

.hp {
    position: absolute !important;
    left: -9999px !important
}

.certList {
    padding-left: 18px;
    color: #9fb0c9
}

.certList li {
    margin: 10px 0
}

.education p {
    color: #9fb0c9
}

.education b {
    color: #edf4ff
}

@media(max-width:900px) {
    .contactLayout {
        grid-template-columns: 1fr
    }

    .formGrid {
        grid-template-columns: 1fr
    }

    .formActions {
        align-items: flex-start;
        flex-direction: column
    }
}
/* MODO CLARO */
body:not(.dark) {
  background: #f7f9fc;
  color: #132544;
}

body:not(.dark) header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #dce5f1;
}

body:not(.dark) .brand span {
  color: #071b3e;
}

body:not(.dark) .links a {
  color: #62728a;
}

body:not(.dark) .links a:hover {
  color: #0878ff;
  background: rgba(8, 120, 255, 0.07);
}

body:not(.dark) .section {
  background: #ffffff;
}

body:not(.dark) .section.soft {
  background: #f3f7fc;
}

body:not(.dark) .section h2,
body:not(.dark) .card h3,
body:not(.dark) .job h3,
body:not(.dark) .education b {
  color: #102748;
}

body:not(.dark) .card,
body:not(.dark) .contactInfo,
body:not(.dark) .contactForm {
  background: #ffffff;
  border-color: #dce5f1;
  box-shadow: 0 20px 45px rgba(23, 57, 93, 0.08);
}

body:not(.dark) .muted,
body:not(.dark) .card p,
body:not(.dark) .education p,
body:not(.dark) .certList {
  color: #687b96;
}

body:not(.dark) .skills span {
  background: rgba(8, 120, 255, 0.08);
  border-color: rgba(8, 120, 255, 0.15);
  color: #0878ff;
}

body:not(.dark) .job {
  border-left-color: #d5e0ed;
}

body:not(.dark) .contactForm label {
  color: #243c5d;
}

body:not(.dark) .contactForm input,
body:not(.dark) .contactForm textarea {
  background: #f8fafc;
  color: #132544;
  border-color: #d4dfec;
}

body:not(.dark) .footer {
  background: #edf3f9;
  color: #62748d;
  border-top-color: #dce5f1;
}