/* RESET */
*,*::before,*::after{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body,h1,h2,h3,p{
    margin:0
}
body{
    min-width:320px;
    overflow-x:hidden
}
/* VARIABLES */
:root{
    --bg:#020817;
    --surface:#0d172b;
    --surface-alt:#101d35;
    --text:#eaf2ff;
    --muted:#a8b5ca;
    --blue:#2563eb;
    --blue-light:#55a5ff;
    --line:rgba(148,163,184,.2);
    --header:rgba(2,8,23,.76);
    --shadow:0 18px 55px rgba(0,0,0,.22);
    --radius:18px;
    --max:1180px;
    color-scheme:dark
}
:root[data-theme="light"]{
    --bg:#f6f9fd;
    --surface:#fff;
    --surface-alt:#eef5ff;
    --text:#0c1a31;
    --muted:#52627a;
    --blue:#1d55ce;
    --blue-light:#2563eb;
    --line:rgba(30,58,100,.15);
    --header:rgba(246,249,253,.78);
    --shadow:0 18px 50px rgba(34,65,113,.11);
    color-scheme:light
}
/* BASE */
body{
    font-family:Inter,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:16px;
    line-height:1.65
}
a{
    color:inherit;
    text-decoration:none
}
p{
    color:var(--muted);
	text-align: justify;
}
h1,h2,h3{
    line-height:1.15;
    letter-spacing:-.035em
}
h1{
    font-size:clamp(1.65rem,2.7vw,2.5rem);
    max-width:780px;
			text-align: justify;
}
h2{
    font-size:clamp(1.65rem,2.7vw,2.5rem);
    max-width:700px;
	text-align: justify;
}
h3{
    font-size:1.2rem;
			text-align: justify;
}
.container{
    width:min(calc(100% - 40px),var(--max));
    margin:auto
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link{
    position:absolute;
    left:12px;
    top:-60px;
    z-index:10;
    background:var(--blue);
    color:#fff;
    padding:9px 13px;
    border-radius:8px
}
.skip-link:focus{
    top:12px
}
/* HEADER / NAVIGATION */
.site-header{
    position:sticky;
    z-index:10;
    top:0;
    background:var(--header);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px)
}
.nav-wrap{
    height:78px;
    display:flex;
    align-items:center;
    gap:22px
}
.brand{
    height:58px;
    display:block;
    flex:none
}
.brand img{
    display:block;
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover
}
.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex:1
}
.main-nav a{
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.055em;
    text-transform:uppercase;
    color:var(--muted);
    padding:7px 0;
    border-bottom:2px solid transparent
}
.main-nav a:hover,.main-nav a[aria-current]{
    color:var(--text);
    border-color:var(--blue-light)
}
.nav-actions{
    display:flex;
    align-items:center;
    gap:10px
}
.theme-toggle{
    display:grid;
    place-items:center;
    width:35px;
    height:35px;
    color:var(--text);
    font-size:1.25rem;
    border:1px solid var(--line);
    background:transparent;
    border-radius:50%;
    cursor:pointer
}
.menu-toggle{
    display:none;
    background:transparent;
    border:0;
    color:var(--text);
    padding:7px;
    cursor:pointer
}
.menu-toggle span:not(.sr-only){
    display:block;
    width:24px;
    height:2px;
    margin:5px;
    background:currentColor
}
/* BUTTONS */
.button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:46px;
    padding:11px 18px;
    border:1px solid var(--blue);
    border-radius:9px;
    background:var(--blue);
    color:#fff;
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.055em;
    transition:.25s transform,.25s background,.25s border-color
}
.button:hover{
    transform:translateY(-2px);
    background:#1d4ed8
}
.button-small{
    min-height:37px;
    padding:8px 12px;
    font-size:.68rem;
    white-space:nowrap
}
.button-outline{
    background:transparent;
    color:var(--text);
    border-color:var(--line)
}
.button-outline:hover{
    background:var(--surface);
    border-color:var(--blue-light)
}
.text-link{
    display:inline-block;
    margin-top:21px;
    color:var(--blue-light);
    font-weight:700
}
.text-link span{
    padding-left:4px
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px
}
/* HERO */
.hero{
    position:relative;
    overflow:hidden;
    padding:clamp(70px,11vw,132px) 0 88px;
    background:radial-gradient(circle at 83% 35%,rgba(37,99,235,.22),transparent 26%),radial-gradient(circle at 7% 100%,rgba(15,118,110,.11),transparent 24%)
}
.hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:50px
}
.eyebrow{
    margin-bottom:14px;
    color:var(--blue-light);
    font-size:.73rem;
    font-weight:800;
    letter-spacing:.125em;
    text-transform:uppercase
}
.lead{
    max-width:690px;
    margin-top:23px;
    font-size:clamp(1rem,1.6vw,1.15rem)
}
.experience-note{
    margin-top:19px;
    color:var(--text);
    font-weight:600
}
.hero-visual{
    position:relative;
    min-height:390px;
    isolation:isolate
}
.visual-orbit{
    position:absolute;
    inset:50% auto auto 50%;
    border:1px solid rgba(85,165,255,.26);
    border-radius:50%;
    transform:translate(-50%,-50%)
}
.orbit-one{
    width:350px;
    height:350px
}
.orbit-two{
    width:258px;
    height:258px;
    border-style:dashed
}
.visual-panel{
    position:absolute;
    background:linear-gradient(140deg,rgba(29,78,216,.25),var(--surface));
    border:1px solid rgba(125,181,255,.3);
    box-shadow:var(--shadow);
    backdrop-filter:blur(10px);
    border-radius:16px
}
.panel-main{
    top:76px;
    left:45px;
    width:min(85%,390px);
    padding:28px
}
.panel-label{
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.12em;
    color:var(--blue-light)
}
.panel-line{
    height:8px;
    width:58%;
    margin-top:23px;
    border-radius:9px;
    background:rgba(169,205,255,.28)
}
.panel-line.wide{
    width:84%;
    background:linear-gradient(90deg,var(--blue-light),rgba(85,165,255,.26))
}
.panel-metrics{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-top:37px;
    border-top:1px solid var(--line);
    padding-top:15px
}
.panel-metrics b{
    font-size:.68rem;
    color:var(--muted)
}
.panel-float{
    right:0;
    top:28px;
    padding:12px 16px;
    font-size:.78rem;
    font-weight:700
}
.status-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#36d399;
    margin-right:7px
}
.panel-security{
    bottom:27px;
    left:8px;
    padding:14px 17px;
    font-size:.78rem;
    font-weight:700
}
/* SECTIONS / CARDS */
.section{
    padding:clamp(65px,9vw,106px) 0
}
.section-muted{
    background:var(--surface-alt);
    border-block:1px solid var(--line)
}
.intro-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px
}
.intro-layout p{
    font-size:1.08rem
}
.card-grid{
    display:grid;
    gap:18px;
    margin-top:38px
}
.card-grid.three{
    grid-template-columns:repeat(3,1fr)
}
.card-grid.two{
    grid-template-columns:repeat(2,1fr)
}
.card{
    min-width:0;
    padding:27px;
    background:color-mix(in srgb,var(--surface) 86%,transparent);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:transform .25s,border-color .25s
}
.card:hover{
    transform:translateY(-4px);
    border-color:rgba(85,165,255,.45)
}
.card h3{
    margin:12px 0
}
.card-number{
    font-size:.75rem;
    font-weight:800;
    color:var(--blue-light);
    letter-spacing:.1em
}
.icon-box{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    background:rgba(37,99,235,.15);
    border:1px solid rgba(85,165,255,.25);
    color:var(--blue-light);
    border-radius:10px;
    font-size:1.25rem
}
.page-hero{
    padding:82px 0 57px;
    background:radial-gradient(circle at 78% 0,rgba(37,99,235,.17),transparent 37%);
    border-bottom:1px solid var(--line)
}
.page-hero h1,
.page-hero .lead{
    max-width:none
}
/* Los textos se adaptan al ancho de su contenedor en cada resolución. */
main h1,
main h2,
main .lead,
main .closing-statement{
    max-width:none
}
.closing-statement{
    max-width:810px;
    margin-top:40px;
    font-size:1.18rem;
    color:var(--text);
    font-weight:600
}
/* TIMELINE / PROCESS */
.timeline{
    position:relative;
    display:grid;
    gap:20px;
    margin-top:38px
}
.timeline::before{
    content:"";
    position:absolute;
    left:20px;
    top:30px;
    bottom:30px;
    border-left:1px solid var(--line)
}
.timeline-item{
    position:relative;
    display:grid;
    grid-template-columns:58px 1fr;
    gap:20px
}
.timeline-year{
    z-index:1;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    background:var(--blue);
    border-radius:50%;
    font-size:.65rem;
    font-weight:800
}
.timeline-content{
    padding:2px 0 24px
}
.timeline-content h3{
    margin-bottom:8px
}
.process-list{
    display:grid;
    gap:0;
    margin-top:38px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden
}
.process-item{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:24px;
    padding:25px;
    border-bottom:1px solid var(--line);
    background:var(--surface)
}
.process-item:last-child{
    border-bottom:0
}
.process-number{
    color:var(--blue-light);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.09em
}
.process-item h3{
    margin-bottom:7px
}
/* CONTACT */
.contact-layout{
    display:grid;
    grid-template-columns:.78fr 1.22fr;
    gap:50px
}
.contact-aside{
    padding:29px;
    background:var(--surface-alt);
    border:1px solid var(--line);
    border-radius:var(--radius);
    height:max-content
}
.contact-aside h2{
    font-size:1.6rem;
    margin-bottom:15px
}
.contact-aside a{
    display:inline-block;
    margin-top:18px;
    color:var(--blue-light);
    font-weight:700
}
.form-card{
    padding:31px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow)
}
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
.form-field{
    display:grid;
    gap:7px
}
.form-field.full{
    grid-column:1/-1
}
label{
    font-size:.82rem;
    font-weight:700
}
input,select,textarea{
    width:100%;
    padding:11px 12px;
    font:inherit;
    font-size:.93rem;
    color:var(--text);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:8px
}
textarea{
    min-height:140px;
    resize:vertical
}
input:focus,select:focus,textarea:focus{
    outline:2px solid var(--blue-light);
    outline-offset:1px;
    border-color:transparent
}
.form-help{
    font-size:.79rem;
    margin:19px 0
}
.alert{
    margin-bottom:20px;
    padding:13px 15px;
    border-radius:9px;
    font-size:.92rem
}
.alert-success{
    color:#d8ffe8;
    background:rgba(22,163,74,.22);
    border:1px solid rgba(74,222,128,.35)
}
:root[data-theme="light"] .alert-success{
    color:#14532d
}
.alert-error{
    color:#ffe2e2;
    background:rgba(220,38,38,.18);
    border:1px solid rgba(248,113,113,.35)
}
:root[data-theme="light"] .alert-error{
    color:#7f1d1d
}
.honeypot{
    position:absolute!important;
    left:-9999px!important;
    opacity:0!important;
    pointer-events:none!important
}
/* FOOTER */
.site-footer{
    padding:57px 0 0;
    border-top:1px solid var(--line);
    background:var(--surface)
}
.footer-grid{
    display:grid;
    grid-template-columns:1.6fr .75fr .75fr;
    gap:40px;
    padding-bottom:46px
}
.footer-brand{
    color:var(--text);
    font-weight:800;
    font-size:1.35rem
}
.footer-grid a{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:.9rem
}
.footer-grid a:hover{
    color:var(--blue-light)
}
.footer-heading{
    color:var(--text);
    font-weight:700;
    margin-bottom:12px
}
.footer-bottom{
    padding:19px 0;
    border-top:1px solid var(--line);
    font-size:.78rem
}
/* ACCESSIBILITY / RESPONSIVE */
:focus-visible{
    outline:3px solid var(--blue-light);
    outline-offset:3px
}
@media(max-width:1024px){
    .main-nav{
        gap:12px
    }
    .main-nav a{
        font-size:.68rem
    }
    .hero-grid{
        gap:25px
    }
    .card-grid.three{
        grid-template-columns:1fr 1fr
    }
    .card-grid.three .card:last-child{
        grid-column:1/-1
    }
}
@media(max-width:830px){
    .nav-wrap{
        position:relative;
        gap:10px
    }
    .menu-toggle{
        display:block;
        order:2;
        margin-left:auto
    }
    .nav-actions{
        order:3
    }
    .main-nav{
        display:none;
        position:absolute;
        top:77px;
        left:0;
        right:0;
        padding:16px 20px 20px;
        background:var(--surface);
        border-bottom:1px solid var(--line);
        box-shadow:var(--shadow);
        align-items:stretch;
        gap:3px
    }
    .main-nav.is-open{
        display:flex;
        flex-direction:column
    }
    .main-nav a{
        padding:10px 0
    }
    .hero-grid,.intro-layout,.contact-layout{
        grid-template-columns:1fr
    }
    .hero-visual{
        max-width:520px;
        width:100%;
        margin:auto
    }
    .intro-layout{
        gap:25px
    }
    .contact-layout{
        gap:25px
    }
}
@media(max-width:600px){
    .container{
        width:min(calc(100% - 30px),var(--max))
    }
    .nav-wrap{
        height:68px
    }
    .brand,.brand img{
        width:48px;
        height:48px
    }
    .button-small{
        font-size:.61rem;
        padding:8px 9px
    }
    .theme-toggle{
        width:32px;
        height:32px
    }
    .main-nav{
        top:67px
    }
    .hero{
        padding-top:60px
    }
    .hero-visual{
        min-height:310px
    }
    .orbit-one{
        width:280px;
        height:280px
    }
    .orbit-two{
        width:210px;
        height:210px
    }
    .panel-main{
        top:58px;
        left:10px;
        padding:22px
    }
    .panel-float{
        right:0
    }
    .panel-security{
        bottom:9px
    }
    .card-grid.three,.card-grid.two,.footer-grid,.form-grid{
        grid-template-columns:1fr
    }
    .card-grid.three .card:last-child{
        grid-column:auto
    }
    .process-item{
        grid-template-columns:1fr;
        gap:8px;
        padding:21px
    }
    .footer-grid{
        gap:28px
    }
    .section{
        padding:62px 0
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*::before,*::after{
        transition:none!important;
        animation:none!important
    }
}