*{box-sizing:border-box}

:root{
    --accent: #29A8F0;
    --accent-rgb: 41 168 240;
    --bg: #ffffff;
    --border: rgba(51,51,51,.14);
    --brand: #1A3E6F;
    --brand-rgb: 26 62 111;

    --chip-bg: rgba(26,62,111,.06);
    --chip-border: rgba(26,62,111,.16);
    --chip-text: var(--brand);

    --footer-bg: var(--neutral);
    --footer-border: rgba(255,255,255,.14);
    --footer-muted: rgba(255,255,255,.72);
    --footer-text: rgba(255,255,255,.92);

    --header-offset: 86px;

    --max: 1100px;
    --muted: #4b5563;
    --neutral: #333333;

    --panel: #ffffff;
    --panel2: #f6f8fb;

    --radius: 16px;
    --shadow: 0 10px 24px rgba(26,62,111,.10);
    --soft-hover: rgba(26,62,111,.08);

    --text: #111827;
}

a{color:inherit}

body{
    background:
            radial-gradient(900px 500px at 10% -10%, rgba(41,168,240,.16), transparent 60%) no-repeat,
            radial-gradient(800px 480px at 95% 0%, rgba(26,62,111,.12), transparent 55%) no-repeat,
            linear-gradient(180deg, #ffffff 0%, #f7f9fc 55%, #ffffff 100%) no-repeat;
    color:var(--text);
    font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    margin:0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

footer{
    background:var(--footer-bg);
    border-top:1px solid var(--footer-border);
    margin-top:auto;
}

h1{
    font-size:34px;
    letter-spacing:-.4px;
    line-height:1.15;
    margin:0 0 12px;
}
@media (max-width: 700px) {
    h1 {
        font-size:28px;
    }
}

html{
    height: 100%;
    scroll-behavior:smooth;
}

main{
    flex: 1 0 auto;
}

main[id],
.hero[id],
section[id],
h2[id]{
    scroll-margin-top:var(--header-offset);
}

section{padding:20px 0}

ul.clean{
    color:var(--text);
    margin:10px 0 0;
    padding-left:18px;
}

ul.clean li{margin:6px 0}

.brand{
    align-items:center;
    display:flex;
    gap:10px;
    min-width:220px;
    text-decoration:none;
}
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
    border-radius: 12px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline: 2px solid rgba(var(--accent-rgb) / .55);
    outline-offset: 2px;
    border-radius: 12px;
}

.brand-text{
    align-items:center;
    color:var(--muted);
    display:flex;
    font-size:12px;
    line-height:1.2;
}

.btn{
    align-items:center;
    background:rgba(255,255,255,.6);
    border:1px solid var(--border);
    border-radius:14px;
    cursor:pointer;
    display:inline-flex;
    font-size:14px;
    font-weight:600;
    gap:8px;
    justify-content:center;
    padding:10px 14px;
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}

.btn:hover{
    background:rgba(26,62,111,.06);
    border-color:rgba(26,62,111,.18);
}

.btn-primary{
    background:linear-gradient(135deg, var(--brand), var(--accent));
    border-color:rgba(26,62,111,.25);
    color:#fff;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible{
    background:linear-gradient(135deg, var(--brand), var(--accent));
    border-color:rgba(41,168,240,.45);
    filter:brightness(1.05) saturate(1.02);
}

.btn.btn-primary:active{
    background:linear-gradient(135deg, var(--brand), var(--accent));
    filter:brightness(1.02);
}
.btn.is-disabled{
    opacity:.6;
}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,1), rgba(246,248,251,1));
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.card-inner{padding:22px}

.contact-intro{
    color:var(--muted);
    font-size:14px;
    margin:10px 0 14px;
}

.contact-mail-inline{
    color:var(--brand);
    font-weight:700;
    text-decoration:none;
    border-bottom:1px dashed rgba(26,62,111,.35);
}

.contact-mail-inline:hover{
    color:var(--accent);
    border-bottom-color:rgba(41,168,240,.55);
}

.company-grid{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(4, 1fr);
}

.company-item{
    background:rgba(26,62,111,.03);
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
}

.company-item b{
    color:var(--brand);
    display:block;
    font-size:12px;
}

.company-item span{
    color:var(--text);
    display:block;
    font-size:14px;
}

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

.company-title{
    color:var(--brand);
    font-size:16px;
    font-weight:700;
    margin:12px 0 6px;
}

.container{
    margin:0 auto;
    max-width:var(--max);
    padding:0 18px;
}

.cta-row{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.footer-inner{
    color:var(--footer-text);
    display:grid;
    font-size:13px;
    gap:18px;
    grid-template-columns:1fr 1fr;
    padding:18px 0;
}

.footer-inner .small {
    color:var(--footer-muted);
}

.footer-links{
    align-items:flex-start;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}

.footer-links a{
    background:rgba(255,255,255,.06);
    border:1px solid var(--footer-border);
    border-radius:999px;
    color:var(--footer-text);
    padding:6px 10px;
    text-decoration:none;
}

.footer-links a:hover{
    background:rgba(255,255,255,.10);
    color:#fff;
}

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

.header{
    backdrop-filter:saturate(160%) blur(10px);
    background:rgba(255,255,255,.82);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:50;
}

.header-inner{
    align-items:center;
    display:flex;
    gap:14px;
    justify-content:space-between;
    padding:12px 0;
}

.hero{padding:42px 0 40px}

.hero-grid{
    align-items:stretch;
    display:grid;
    gap:18px;
    grid-template-columns:1.35fr .65fr;
}
.hero-grid--full{
    grid-template-columns: 1fr;
}

.kv{
    display:grid;
    font-size:14px;
    gap:8px;
    margin:0;
}

.kv div{
    background:rgba(26,62,111,.03);
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
}

.kv b{
    color:var(--brand);
    display:block;
    font-size:12px;
}

.kv a{color:var(--brand)}
.kv a:hover{color:var(--accent)}

.kv .small{color:var(--muted)}

.lead{
    color:var(--muted);
    font-size:16px;
    margin:0 0 16px;
}

.logo-img{
    display:block;
    flex:none;
    height:52px;
    object-fit:contain;
    width:112px;
}

.nav{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}

.nav a{
    border:1px solid transparent;
    border-radius:12px;
    color:var(--muted);
    font-size:14px;
    padding:8px 10px;
    text-decoration:none;
    transition:all .15s ease;
    white-space:nowrap;
}

.nav a:hover{
    background:rgba(255,255,255,.03);
    border-color:var(--border);
    color:var(--text);
}

.note{
    border-left:3px solid rgba(125,211,252,.35);
    color:var(--muted);
    font-size:14px;
    margin-top:12px;
    padding-left:12px;
}

/* Oferta */
.offer-2col{
    display:grid;
    gap:14px;
    grid-template-columns:1fr 1fr;
    margin-top:12px;
}

.offer-col{
    background:rgba(26,62,111,.03);
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 14px;
}

.offer-col ul.clean{margin-top:8px}
.offer-col ul.clean li{margin:7px 0}

.offer-note{
    border-left-color:rgba(125,211,252,.45);
    margin-top:14px;
}

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

.offer-techLead{
    color:var(--muted);
    font-size:14px;
    margin:14px 0 12px;
}

.pay-title{
    color:var(--brand);
    font-size:16px;
    font-weight:700;
    margin:12px 0 4px;
}

.pay-list{
    color: var(--text);
    margin:0;
    padding-left:22px;
}

.pay-list li{
    margin:4px 0;
    color:var(--muted);
}

.pill{
    background:var(--chip-bg);
    border:1px solid var(--chip-border);
    border-radius:999px;
    color:var(--chip-text);
    font-size:12px;
    padding:6px 10px;
}

.pill-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0 18px;
}

.section-lead{
    color:var(--muted);
    margin:0 0 14px;
}

.section-subtitle{
    color:var(--text);
    font-size:16px;
    letter-spacing:-.1px;
    margin:18px 0 8px;
}

.section-title{
    font-size:22px;
    letter-spacing:-.2px;
    margin:0 0 10px;
}

/* Side card */
.side-list{
    display:grid;
    gap:10px;
    list-style:none;
    margin:12px 0 0;
    padding:0;
}

.side-list li{
    background:rgba(26,62,111,.03);
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
}

.side-list b{
    color:var(--brand);
    display:block;
    font-size:12px;
}

.side-list span{
    color:var(--muted);
    display:block;
    font-size:12px;
}

.side-title{
    color:var(--brand);
    font-size:14px;
    margin:0 0 8px;
}

.small{
    color:var(--muted);
    font-size:12px;
}

.tech{
    background:rgba(26,62,111,.03);
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
}

.tech b{
    color:var(--brand);
    display:block;
    font-size:18px;
    margin:0;
}

.tech span{
    color:var(--muted);
    display:block;
    font-size:13px;
}
.tech-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:4px;
}

.tech-ico{
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--brand);
    flex:none;
}

.tech-ico svg{
    width:22px;
    height:22px;
    display:block;
}

.tech--frontend .tech-ico{ color: var(--accent); }
.tech--ai .tech-ico{ color: var(--brand); opacity:.95; }

/* Responsive */
@media (max-width: 1020px){
    .offer-techGrid{grid-template-columns:1fr}
}

@media (max-width: 900px){
    .brand{min-width:auto}
    .grid-2{grid-template-columns:1fr}
    .hero-grid{grid-template-columns:1fr}
    .offer-2col{grid-template-columns:1fr}
}
.nav-toggle{
    display:none;
    background:rgba(255,255,255,.6);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 10px;
    cursor:pointer;
}

.nav-toggle:hover{
    background:rgba(26,62,111,.06);
    border-color:rgba(26,62,111,.18);
}

.nav-toggle-bar {
    display:block;
    width:30px;
    height:2px;
    background:var(--brand);
    margin:4px 0 4px auto;
    border-radius:2px;
    flex: 0 0 auto;
}

@media (max-width: 700px){
    .nav-toggle{
        display:inline-flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
    }

    .header-inner{
        flex-wrap: wrap;
        align-items: center;
    }

    .brand{
        min-width: 0;
        flex: 1 1 auto;
    }

    .nav{
        display:none;
        width:100%;
        justify-content:flex-start;
        margin-top:10px;
        padding:10px;
        border:1px solid var(--border);
        border-radius:14px;
        background:rgba(255,255,255,.92);
    }

    body.nav-open .nav{ display:flex; }
    body.nav-open .nav a{ width:100%; }
}

@media (max-width: 400px) {
    .brand-text{
        display: none;
    }
}

.flash-highlight .card {
    animation: targetFlash 4.5s ease-out 1;
}
@keyframes targetFlash {
    0% {
        box-shadow: var(--shadow);
        transform: translateY(0);
    }
    12% {
        box-shadow:
                0 0 0 6px rgba(var(--accent-rgb) / 0.18),
                var(--shadow);
        transform: translateY(-2px);
    }
    100% {
        box-shadow: var(--shadow);
        transform: translateY(0);
    }
}
.pay-packages{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    margin-top:12px;
}
.pay-package{
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--panel);
    padding:16px;
}
.pay-package-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}
.pay-package-price{
    font-weight:800;
    color:var(--brand);
    white-space:nowrap;
}
.pay-package-desc{
    margin:0 0 10px 0;
    color:var(--muted);
}
.pay-package-term{
    margin:0 0 12px 0;
    font-size:14px;
    color:var(--muted);
}
.pay-package-cta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

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

.pay-payer-grid{
    display:grid;
    gap:12px;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
}

.pay-payer-grid .payer-row{
    grid-column: 1 / -1;
    display:grid;
    gap:12px;
    grid-template-columns: 1fr 1fr;
    align-items:start;
}

.pay-payer-grid .payer-name{
    display:grid;
    gap:12px;
    grid-template-columns: 1fr 1fr;
}

.pay-payer-grid .payer-loc{
    display:grid;
    gap:12px;
    grid-template-columns: 130px 1fr;
}

.pay-payer-grid .payer-country .pay-input{
    width:130px;
}

@media (max-width: 900px){
    .pay-payer-grid{
        grid-template-columns: 1fr;
    }
    .pay-payer-grid .payer-row{
        grid-template-columns: 1fr;
    }
    .pay-payer-grid .payer-name{
        grid-template-columns: 1fr 1fr;
    }
    .pay-payer-grid .payer-loc{
        grid-template-columns: 1fr;
    }
    .pay-payer-grid .payer-country .pay-input{
        width:100%;
    }
}

.pay-payer-grid .col-span-2{
    grid-column: 1 / -1;
}

.paybox{
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--panel2);
}

.paybox-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 10px;
}

.paybox-title{
    margin:0;
    font-size: 18px;
}

.paybox-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(41,168,240,.25);
    background: rgba(41,168,240,.08);
    color: var(--brand);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.paybox p{
    margin: 10px 0 0 0;
    color: var(--muted);
}

.paybox p strong{ color: var(--neutral); }

.offer-constraint{
    margin-top: 14px;
    display:flex;
    gap:10px;
    padding:12px 14px;
    background: var(--panel2);
    border-radius: 12px;
}
.offer-constraint-ico{
    font-size:18px;
    line-height:1;
}
.offer-constraint p{
    margin:0;
    font-size:14px;
}

.pay-form{ margin-top: 16px; }

.pay-grid{
    display:grid;
    gap:14px;
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
}
@media (max-width: 900px){
    .pay-grid{ grid-template-columns: 1fr; }
}

.pay-field{
    background: rgba(26,62,111,.03);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.pay-field--full{
    grid-column: 1 / -1;
}

.pay-label{
    display:block;
    font-weight: 700;
    font-size: 13px;
    color: var(--brand);
    margin-bottom: 8px;
}

.pay-input{
    width:100%;
    border: 1px solid rgba(26,62,111,.18);
    background: rgba(255,255,255,.85);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--text);
    transition: border-color .15s ease, background .15s ease;
}
.pay-input:focus{
    border-color: rgba(41,168,240,.55);
    background: #fff;
}

.pay-inputRow{
    position: relative;
    display:flex;
    align-items:center;
}
.pay-suffix{
    position:absolute;
    right:12px;
    font-weight:700;
    color: var(--muted);
    pointer-events:none;
}
#amount.pay-input{ padding-right: 42px; }

.pay-help{
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}

.pay-error{
    margin-top: 8px;
    color: #b91c1c;
    font-size: 12px;
    min-height: 16px;
}

.pay-presets{
    margin-top: 10px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.pay-preset{
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
}

.pay-check{
    display:flex;
    gap:10px;
    align-items:flex-start;
    cursor:pointer;
    color: var(--muted);
    font-size: 13px;
}
.pay-check a{
    color: var(--brand);
    text-decoration:none;
    border-bottom: 1px dashed rgba(26,62,111,.35);
}
.pay-check a:hover{
    color: var(--accent);
    border-bottom-color: rgba(41,168,240,.55);
}

.pay-summary{
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel2);
}
.pay-summary-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
}
.pay-summary-row b{
    font-size: 18px;
    color: var(--brand);
}
.pay-subgrid{
    display:grid;
    gap:12px;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
}
@media (max-width: 900px){
    .pay-subgrid{ grid-template-columns: 1fr; }
}

.pay-subLabel{
    display:block;
    font-size:12px;
    font-weight:700;
    color: var(--muted);
    margin-bottom: 6px;
}

.pay-labelRow{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
}
.pay-labelHint{
    font-size:12px;
    color: var(--muted);
}

.pay-accept{
    margin-top: 12px;
}

.pay-warning{
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(245, 158, 11, .28);
    background: rgba(245, 158, 11, .10);
    border-radius: 14px;
    color: var(--neutral);
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.pay-warning-ico{
    flex: none;
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}

.pay-warning b,
.pay-warning strong{
    color: var(--neutral);
}

.pay-input[aria-invalid="true"]{
    border-color: rgba(239, 68, 68, .45);
    background: rgba(239, 68, 68, .04);
}

.contact-split{
    margin-top:12px;
}

.contact-item{
    padding:2px 0;
}

.contact-head{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;

    font-size:18px;
    line-height:1.25;
}

.contact-ico{
    color:rgba(var(--brand-rgb), .92);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
}

.contact-ico svg{
    width:20px;
    height:20px;
}

.contact-label{
    color:var(--muted);
}

.contact-value{
    font-weight:700;
    color:var(--brand);
    text-decoration:none;
}

.contact-value:hover{
    color:var(--accent);
    text-decoration:underline;
}

.contact-note{
    color:var(--muted);
    font-size:15px;
    white-space:nowrap;
}

.contact-desc{
    margin:6px 0 0 32px;
    color:var(--muted);
    font-size: 14.5px;
    line-height:1.55;
    text-align: left;
}

.contact-divider{
    height:1px;
    margin:12px 0;
    background:linear-gradient(90deg, rgba(51,51,51,.10), rgba(51,51,51,.03), rgba(51,51,51,.10));
}

.contact-divider.is-soft{
    height:0;
    margin:12px 0;
    background:none;
}

@media (max-width: 640px){
    .contact-head{
        font-size:16.5px;
    }
    .contact-desc{
        margin-left:0;
        font-size:14px;
    }
    .contact-note{
        font-size:14.5px;
    }
}