:root {
    --black:#111214;
    --dark:#202225;
    --text:#191a1c;
    --muted:#66696d;
    --line:#e5e6e8;
    --gray:#f4f5f6;
    --white:#fff;
    --yellow:#f4c400;
    --max:1180px;
    --navbar-logo-sh-width:72px;
    --footer-logo-sh-width:72px;
    --footer-logo-guanajuato-width:120px;
    --logo-height:auto;
    --logo-text-size:8px;
    --logo-text-small-size:7px;
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.55
}
body.lock {
    overflow:hidden
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit;
    cursor:pointer
}
.container {
    width:min(calc(100% - 48px),var(--max));
    margin:auto
}
.header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line)
}
.nav {
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.logo {
    display:flex;
    gap:12px;
    align-items:center;
}
.logo-img {
    width: 60px;
    height:60px;
    display:block;
    object-fit:contain;
}
.logo-img--footer {
    width:var(--footer-logo-sh-width);
}
.logo-img--guanajuato {
    width: 40px;;
}
.logo-text {
    display:flex;
    flex-direction:column;
    line-height:1.1;
}
.logo-text b {
    font-size:27px;
    letter-spacing:-3px;
}
.logo-text span {
    font-size:var(--logo-text-size);
    font-weight:800;
    line-height:1.15;
    letter-spacing:.06em;
}
.logo-text small {
    font-size:var(--logo-text-small-size);
    color:#777;
    letter-spacing:.15em;
}
.nav nav {
    display:flex;
    align-items:center;
    gap:3px
}
.nav nav a,.nav nav button {
    background:none;
    border:0;
    padding:10px 12px;
    font-size:12px
}
.nav .navcta {
    background:var(--yellow);
    font-weight:800;
    border-radius:8px;
    margin-left:8px
}
.hamb {
    display:none;
    background:none;
    border:0;
    font-size:25px
}
.hero {
    background:linear-gradient(135deg,#fff,#f6f7f8 65%,#eceeef)
}
.hero-grid {
    min-height:620px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:45px;
    align-items:center;
    padding:65px 0
}
.eyebrow {
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
    color:#4c4f53;
    display:flex;
    align-items:center;
    gap:10px
}
.eyebrow i {
    width:25px;
    height:3px;
    background:var(--yellow);
    display:inline-block
}
.hero h1 {
    font-size:clamp(43px,5.1vw,67px);
    line-height:1.03;
    letter-spacing:-.05em;
    margin:20px 0
}
.hero h1 em {
    font-style:normal;
    color:#c99f00
}
.hero p {
    color:var(--muted);
    max-width:640px;
    font-size:16px
}
.points {
    display:flex;
    gap:25px;
    margin:28px 0
}
.points span {
    font-size:11px;
    font-weight:800
}
.points b {
    color:#b38a00;
    margin-right:6px
}
.points small {
    display:block;
    color:#777;
    font-weight:400;
    margin-top:2px
}
.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.btn {
    border:0;
    border-radius:8px;
    padding:13px 18px;
    font-size:12px;
    font-weight:800;
    display:inline-flex;
    gap:10px;
    align-items:center
}
.yellow {
    background:var(--yellow);
    color:#111
}
.light {
    background:#fff;
    border:1px solid #d2d4d7
}
.hero-art {
    height:440px;
    border-radius:30px;
    background:linear-gradient(145deg,#34363a,#0d0e0f);
    position:relative;
    overflow:hidden;
    box-shadow:0 20px 60px #00000012
}
.gridfx {
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(90deg,transparent 0 55px,#ffffff12 56px 57px),repeating-linear-gradient(0deg,transparent 0 44px,#ffffff0d 45px 46px);
    opacity:.7
}
.hero-art:after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 70% 45%,#f4c40024,transparent 34%)
}
.hero-art:before {
    content:"";
    position:absolute;
    width:46%;
    aspect-ratio:1;
    left:48%;
    top:14%;
    border:1px solid #f4c40024;
    border-radius:50%;
    box-shadow:0 0 0 22px #f4c40008,0 0 0 46px #f4c40005;
    animation:hero-pulse 5s ease-in-out infinite;
    z-index:1
}
.hero-card {
    position:absolute;
    right:9%;
    bottom:12%;
    width:260px;
    padding:25px;
    background:#101112dd;
    border:1px solid #ffffff22;
    border-radius:16px;
    color:#fff;
    z-index:2
}
.hero-card strong {
    font-size:18px;
    line-height:1.25
}
.hero-card small {
    display:block;
    color:#aaa;
    font-size:8px;
    letter-spacing:.15em;
    margin-top:14px
}
.node {
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--yellow);
    box-shadow:0 0 20px var(--yellow);
    z-index:2
}
.node.a {
    left:18%;
    top:27%
}
.particle {
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#fff;
    opacity:.7;
    box-shadow:0 0 12px #fff;
    z-index:2;
    animation:particle-drift 7s ease-in-out infinite alternate
}
.particle.p1 { left:12%; top:18%; animation-delay:-1s }
.particle.p2 { left:29%; top:12%; animation-delay:-4s }
.particle.p3 { left:78%; top:18%; animation-delay:-2s }
.particle.p4 { right:10%; top:49%; animation-delay:-6s }
.particle.p5 { left:22%; bottom:16%; animation-delay:-3s }
.particle.p6 { left:43%; bottom:10%; animation-delay:-5s }
.particle.p7 { right:25%; bottom:16%; animation-delay:-1.5s }
.particle.p8 { left:8%; top:63%; animation-delay:-3.5s }
@keyframes particle-drift {
    0% { transform:translate3d(0,0,0); opacity:.25 }
    50% { opacity:.9 }
    100% { transform:translate3d(18px,-22px,0); opacity:.35 }
}
@keyframes hero-pulse {
    0%,100% { transform:scale(.92); opacity:.55 }
    50% { transform:scale(1.06); opacity:1 }
}
.node.b {
    right:23%;
    top:32%
}
.node.c {
    left:42%;
    bottom:19%
}
.brands {
    border-block:1px solid var(--line)
}
.brandsrow {
    min-height:85px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    color:#9a9da1;
    filter:grayscale(1);
    font-size:15px;
    font-weight:800
}
.brandsrow strong {
    font-size:9px;
    color:#333;
    filter:none
}
.brandsrow small {
    display:block;
    font-size:7px;
    letter-spacing:.1em
}
.section {
    padding:100px 0
}
.gray {
    background:#fafafa
}
.challenge-grid,.diff {
    display:grid;
    grid-template-columns:.8fr 1.5fr;
    gap:60px;
    margin-top:22px
}
.section h2 {
    font-size:40px;
    line-height:1.1;
    letter-spacing:-.04em;
    margin:18px 0
}
.section p {
    color:var(--muted)
}
.challenge-list {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.challenge-list article {
    padding:10px 18px;
    border-left:1px solid #ddd
}
.challenge-list b {
    font-size:10px;
    color:#b38a00
}
.challenge-list h3 {
    font-size:14px;
    margin:17px 0 7px
}
.challenge-list p {
    font-size:11px;
    margin:0
}
.section-intro {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:end;
    margin-bottom:38px
}
.section-intro>p {
    max-width:380px;
    margin:0
}
.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px;
    min-height:320px;
    position:relative;
    transition:.25s;
    cursor:pointer
}
.card:hover {
    transform:translateY(-5px);
    box-shadow:0 18px 50px #11121412
}
.card .icon {
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--black);
    color:var(--yellow);
    font-weight:900
}
.card>small {
    position:absolute;
    right:25px;
    top:30px;
    color:#bbb
}
.card h3 {
    font-size:20px;
    line-height:1.15;
    margin:45px 0 10px
}
.card p {
    font-size:12px
}
.card button {
    border:0;
    background:none;
    color:#ad8600;
    font-size:11px;
    font-weight:800;
    padding:0
}
.diffitems {
    display:grid;
    grid-template-columns:repeat(5,1fr)
}
.diffitems span {
    border-left:1px solid #ddd;
    padding:0 17px;
    font-size:11px;
    color:#666;
    min-height:130px
}
.diffitems b {
    display:block;
    font-size:24px;
    color:#111;
    margin-bottom:20px
}
.gnwrap {
    padding-bottom:100px
}
.gn {
    min-height:410px;
    background:linear-gradient(110deg,#111214,#25272a);
    border-radius:26px;
    color:#fff;
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden
}
.gn>div:first-child {
    padding:60px
}
.dark {
    color:#ccc
}
.gn h2 {
    font-size:46px;
    line-height:1.05;
    letter-spacing:-.04em;
    margin:18px 0
}
.gn p {
    color:#b8babd;
    max-width:500px
}
.gnvisual {
    position:relative;
    min-height:410px;
    background:radial-gradient(circle at center,#f4c40020 0,#f4c40008 22%,transparent 55%);
    overflow:hidden
}
.gnvisual:before,.gnvisual:after {
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid #ffffff20;
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(-18deg)
}
.gnvisual:before {
    width:76%;
    height:50%
}
.gnvisual:after {
    width:53%;
    height:76%;
    border-color:#f4c40045;
    transform:translate(-50%,-50%) rotate(48deg)
}
.gnorbit {
    position:absolute;
    left:50%;
    top:50%;
    border:1px dashed #ffffff25;
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(25deg)
}
.gnorbit--outer {
    width:92%;
    height:63%
}
.gnorbit--inner {
    width:65%;
    height:91%;
    transform:translate(-50%,-50%) rotate(-35deg)
}
.gncore {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:126px;
    height:126px;
    border-radius:50%;
    background:#fff;
    color:#111;
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    font-size:28px;
    font-weight:900;
    box-shadow:0 0 0 10px #ffffff0d,0 0 45px #f4c40035;
    z-index:2
}
.gncore small {
    color:#777;
    font-size:7px;
    line-height:1.15;
    letter-spacing:.12em;
    text-align:center
}
.gnnode {
    position:absolute;
    background:#2b2d30;
    border:1px solid #3c3e41;
    border-radius:999px;
    padding:7px 10px;
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    z-index:3;
    box-shadow:0 8px 20px #0003
}
.gnnode:before {
    content:"";
    width:5px;
    height:5px;
    display:inline-block;
    margin:0 6px 1px 0;
    border-radius:50%;
    background:var(--yellow);
    box-shadow:0 0 10px var(--yellow)
}
.gnnode--cartera {
    left:10%;
    top:26%
}
.gnnode--pld {
    right:10%;
    top:19%
}
.gnnode--buro {
    left:12%;
    bottom:21%
}
.gnnode--reportes {
    right:8%;
    bottom:28%
}
.cta {
    padding-top:0
}
.ctabox {
    background:#f4f5f6;
    border:1px solid var(--line);
    border-radius:25px;
    padding:45px 50px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:35px
}
.ctabox h2 {
    font-size:32px;
    line-height:1.1;
    margin:14px 0
}
.ctabox p {
    margin:0;
    max-width:620px
}
.footgrid {
    padding:60px 0;
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.1fr;
    gap:40px
}
.footgrid h4 {
    font-size:12px
}
.footgrid p,.footgrid a,.footgrid button,.footgrid span {
    display:block;
    color:#707276;
    font-size:10px;
    margin:10px 0
}
.footgrid button {
    border:0;
    background:none;
    padding:0;
    text-align:left
}
.bottom {
    background:#111214;
    color:#888;
    font-size:9px;
}
.bottom .container {
    min-height:44px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.footer-guanajuato-logo img {
    width:var(--footer-logo-guanajuato-width);
    height:var(--logo-height);
    object-fit:contain;
    display:block;
}
.footer-social {
    margin-top:18px;
}
.social-links {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.social-link {
    display:inline-flex;
    width:32px;
    height:32px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#111214;
    color:#fff;
    text-decoration:none;
    transition:transform .18s ease, background .18s ease;
}
.social-link:hover {
    transform:scale(1.05);
    background:var(--yellow);
}
.social-link svg {
    width:18px;
    height:18px;
    fill:currentColor;
}
.wa {
    position:fixed;
    right:20px;
    bottom:20px;
    width:52px;
    height:52px;
    background:var(--yellow);
    border-radius:50%;
    display:grid;
    place-items:center;
    z-index:40;
    font-weight:900;
    box-shadow:0 10px 25px #0002
}
.wa svg {
    width:28px;
    height:28px;
    display:block;
    fill:#111214
}
.modal {
    display:none;
    position:fixed;
    inset:0;
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:20px
}
.modal.open {
    display:flex
}
.backdrop {
    position:absolute;
    inset:0;
    background:#08090aaa;
    backdrop-filter:blur(5px)
}
.dialog {
    position:relative;
    background:#fff;
    width:min(760px,100%);
    max-height:90vh;
    overflow:auto;
    border-radius:22px;
    padding:45px;
    z-index:1;
    box-shadow:0 30px 100px #0005
}
.close {
    position:absolute;
    right:15px;
    top:15px;
    border:0;
    background:#f0f1f2;
    border-radius:50%;
    width:35px;
    height:35px;
    font-size:23px
}
.mk {
    color:#b18a00;
    font-weight:800;
    letter-spacing:.14em;
    font-size:9px
}
.dialog h2 {
    font-size:34px;
    line-height:1.1;
    margin:10px 0 20px
}
.stats,.brandmodal,.features,.form2,.contact {
    display:grid;
    gap:10px
}
.stats {
    grid-template-columns:repeat(3,1fr);
    margin:25px 0
}
.stats b,.brandmodal b,.features span {
    background:#f4f5f6;
    border-radius:9px;
    padding:15px
}
.stats small {
    display:block;
    font-size:9px;
    color:#777
}
.brandmodal {
    grid-template-columns:repeat(3,1fr);
    margin:20px 0
}
.brandmodal b {
    text-align:center;
    font-size:11px
}
.features {
    grid-template-columns:1fr 1fr;
    margin:22px 0
}
.features span {
    font-size:11px
}
.contact {
    grid-template-columns:1fr 1fr
}
.form2 {
    grid-template-columns:1fr 1fr
}
.dialog label {
    display:block;
    font-size:10px;
    font-weight:800;
    margin:10px 0
}
.dialog input,.dialog select,.dialog textarea {
    display:block;
    width:100%;
    padding:11px;
    margin-top:6px;
    border:1px solid #d5d7da;
    border-radius:7px;
    font:inherit
}
.dialog form .btn {
    margin-top:10px
}
.ok {
    color:#27804a;
    font-size:11px;
    margin-top:10px
}
.err {
    color:#b22a2a;
    font-size:11px;
    margin-top:10px
}
.reveal {
    opacity:0;
    transform:translateY(15px);
    transition:.65s
}
.reveal.show {
    opacity:1;
    transform:none
}
@media(max-width:950px) {
    .nav nav a,.nav nav button {
        padding:9px 7px;
        font-size:11px
    }
    .hero-grid {
        grid-template-columns:1fr
    }
    .hero-art {
        height:340px
    }
    .challenge-grid,.diff {
        grid-template-columns:1fr
    }
    .challenge-list {
        grid-template-columns:repeat(2,1fr);
        gap:20px
    }
    .diffitems {
        grid-template-columns:repeat(3,1fr);
        gap:20px
    }
    .section-intro {
        grid-template-columns:1fr
    }
    .cards {
        grid-template-columns:1fr
    }
    .gn {
        grid-template-columns:1fr
    }
    .gnvisual {
        min-height:300px
    }
    .footgrid {
        grid-template-columns:1fr 1fr
    }
}
@media(max-width:720px) {
    .container {
        width:calc(100% - 32px)
    }
    .hamb {
        display:block
    }
    .nav nav {
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        background:#fff;
        padding:10px 16px 18px;
        border-bottom:1px solid var(--line);
        flex-direction:column;
        align-items:stretch
    }
    .nav nav.open {
        display:flex
    }
    .nav nav a,.nav nav button {
        text-align:left;
        width:100%;
        padding:13px
    }
    .nav .navcta {
        margin:5px 0 0
    }
    .brandsrow {
        overflow:auto;
        justify-content:flex-start;
        padding:20px 0
    }
    .hero-grid {
        padding:50px 0
    }
    .hero h1 {
        font-size:43px
    }
    .points {
        gap:12px;
        justify-content:space-between
    }
    .points b {
        display:none
    }
    .points span {
        font-size:10px
    }
    .hero-actions .btn {
        width:100%
    }
    .section {
        padding:75px 0
    }
    .challenge-list {
        grid-template-columns:1fr
    }
    .challenge-list article {
        border-left:0;
        border-top:1px solid #ddd;
        padding:18px 0
    }
    .diffitems {
        grid-template-columns:1fr 1fr
    }
    .ctabox {
        padding:32px 25px;
        flex-direction:column;
        align-items:flex-start
    }
    .footgrid {
        grid-template-columns:1fr
    }
    .bottom .container {
        padding:12px 0;
        display:block
    }
    .bottom span {
        display:block;
        margin-top:5px
    }
    .dialog {
        padding:38px 22px
    }
    .form2,.features,.contact,.brandmodal,.stats {
        grid-template-columns:1fr
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .reveal {
        opacity:1;
        transform:none;
        transition:none
    }
    .hero-art:before,.particle {
        animation:none
    }
}