/* Gustolix Solutions — shared styles */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@500;600;700&display=swap');

:root {
  --bg:#ffffff;
  --bg-2:#f5f5f7;
  --paper:#fafafa;
  --ink:#0a0a0a;
  --ink-2:#1f1f23;
  --mute:#6b6b73;
  --rule:#e6e6ea;
  --blue:#1255d4;
  --blue-deep:#0a3aa0;
  --yellow:#fbcd0e;
  --red:#d6004c;
  --red-deep:#a8003b;
  --accent:var(--blue);
  --accent-2:var(--yellow);
  --accent-3:var(--red);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Sora',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.menu-open{
  overflow:hidden;
}

h1,h2,h3,h4,.display{
  font-family:'Sora',sans-serif;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
  color:var(--ink);
}

.mono{font-family:'JetBrains Mono',monospace;}

.script{
  font-family:'Caveat',cursive;
  font-weight:600;
  color:var(--red);
  letter-spacing:0;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}

/* NAV */
.nav{
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Caveat',cursive;
  font-weight:600;
  font-size:28px;
  color:var(--red);
}

.brand img{
  height:44px;
  width:auto;
}

.nav-links{
  display:flex;
  gap:4px;
  list-style:none;
  align-items:center;
}

.nav-links a{
  font-size:14px;
  font-weight:500;
  color:var(--ink-2);
  padding:8px 16px;
  border-radius:8px;
  transition:color .2s,background .2s;
  position:relative;
}

.nav-links a:hover{
  color:var(--blue);
  background:var(--bg-2);
}

.nav-links a.active{
  color:var(--blue);
  padding:8px 22px;
}

.nav-links a.active::before{
  content:'<';
  position:absolute;
  left:4px;
  color:var(--yellow);
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
}

.nav-links a.active::after{
  content:'>';
  position:absolute;
  right:4px;
  color:var(--yellow);
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
}

.nav-cta{
  background:var(--ink) !important;
  color:white !important;
  padding:10px 22px !important;
  border-radius:100px;
  font-weight:600 !important;
  margin-left:12px;
  transition:background .2s,transform .2s;
}

.nav-cta:hover{
  background:var(--blue) !important;
  transform:translateY(-1px);
}

.nav-cta::before,
.nav-cta::after{
  display:none !important;
}

/* HAMBURGER */
.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  border:none;
  background:transparent;
  cursor:pointer;
  position:relative;
  z-index:10002;
  padding:0;
}

.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--ink);
  margin:5px auto;
  border-radius:999px;
  transition:all .28s ease;
}

.menu-toggle.active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* HERO */
.hero{
  padding:80px 0 100px;
  position:relative;
  overflow:hidden;
}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--blue);
  font-weight:500;
  margin-bottom:24px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.eyebrow::before{
  content:'<';
  color:var(--yellow);
  font-weight:700;
  font-size:14px;
}

.eyebrow::after{
  content:'/>';
  color:var(--yellow);
  font-weight:700;
  font-size:14px;
}

h1.hero-title{
  font-size:clamp(44px,7vw,88px);
  font-weight:700;
  max-width:1000px;
  margin-bottom:28px;
  letter-spacing:-.035em;
  line-height:1.02;
}

h1.hero-title em{
  font-family:'Caveat',cursive;
  font-style:normal;
  font-weight:600;
  color:var(--red);
  letter-spacing:0;
  font-size:1.05em;
}

h1.hero-title .highlight{
  background:var(--yellow);
  padding:0 12px;
  display:inline-block;
  transform:rotate(-1deg);
}

.hero-sub{
  font-size:clamp(17px,1.4vw,21px);
  color:var(--mute);
  max-width:640px;
  margin-bottom:40px;
  line-height:1.55;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  border-radius:100px;
  font-family:'Sora',sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  border:2px solid transparent;
  transition:all .25s ease;
  background:none;
}

.btn-primary{
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}

.btn-primary:hover{
  background:var(--blue);
  border-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(18,85,212,.3);
}

.btn-ghost{
  border-color:var(--ink);
  color:var(--ink);
}

.btn-ghost:hover{
  background:var(--ink);
  color:white;
}

.btn-yellow{
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow);
}

.btn-yellow:hover{
  background:var(--ink);
  color:var(--yellow);
  border-color:var(--ink);
}

.btn-arrow{
  transition:transform .25s;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
}

.btn:hover .btn-arrow{
  transform:translateX(4px);
}

.btn-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* SECTIONS */
section{
  padding:100px 0;
  position:relative;
}

.section-label{
  display:flex;
  align-items:baseline;
  gap:32px;
  margin-bottom:56px;
  flex-wrap:wrap;
}

.section-label .num{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  color:var(--mute);
  font-weight:500;
  white-space:nowrap;
}

.section-label .title{
  font-family:'Sora',sans-serif;
  font-size:clamp(34px,4.5vw,56px);
  font-weight:700;
  letter-spacing:-.03em;
  flex:1;
  min-width:280px;
  line-height:1.05;
}

.section-label .title em{
  font-family:'Caveat',cursive;
  font-style:normal;
  color:var(--red);
  font-weight:600;
}

.section-label .lead{
  max-width:360px;
  color:var(--mute);
  font-size:16px;
}

/* FOOTER */
footer{
  background:var(--ink);
  color:rgba(255,255,255,.7);
  padding:80px 0 32px;
  margin-top:60px;
}

.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:60px;
  margin-bottom:60px;
}

.foot-grid h5{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--yellow);
  margin-bottom:18px;
  font-weight:500;
  text-transform:uppercase;
}

.foot-grid h5::before{
  content:'< ';
  color:rgba(251,205,14,.5);
}

.foot-grid h5::after{
  content:' />';
  color:rgba(251,205,14,.5);
}

.foot-grid ul{
  list-style:none;
}

.foot-grid li{
  margin-bottom:12px;
}

.foot-grid a{
  color:rgba(255,255,255,.65);
  font-size:15px;
  transition:color .2s;
}

.foot-grid a:hover{
  color:var(--yellow);
}

.foot-tag{
  font-family:'Caveat',cursive;
  font-size:32px;
  line-height:1.2;
  margin-bottom:24px;
  max-width:320px;
  color:white;
}

.foot-tag em{
  color:var(--yellow);
  font-style:normal;
}

.foot-brand img{
  height:56px;
  margin-bottom:20px;
  filter:brightness(1.1);
}

.foot-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:rgba(255,255,255,.4);
  flex-wrap:wrap;
  gap:16px;
  font-family:'JetBrains Mono',monospace;
}

.socials{
  display:flex;
  gap:10px;
}

.socials a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  transition:all .2s;
}

.socials a:hover{
  background:var(--yellow);
}

.socials a:hover svg{
  fill:var(--ink);
}

.socials svg{
  width:16px;
  height:16px;
  fill:rgba(255,255,255,.7);
  transition:fill .2s;
}

/* WHATSAPP */
.wa-float{
  position:fixed;
  bottom:28px;
  right:28px;
  width:60px;
  height:60px;
  background:#25d366;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  z-index:100;
  transition:transform .2s;
}

.wa-float:hover{
  transform:scale(1.08);
}

.wa-float svg{
  width:28px;
  height:28px;
  fill:white;
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease,transform .8s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* DECORATIVE */
.deco-bracket{
  position:absolute;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:200px;
  line-height:1;
  color:var(--yellow);
  opacity:.15;
  pointer-events:none;
  user-select:none;
}

/* MOBILE */
@media (max-width:860px){

  .container{
    padding:0 22px;
  }

  .nav{
    z-index:10000;
  }

  .nav-inner{
    min-height:70px;
    padding:12px 0;
  }

  .brand img{
    height:38px;
  }

  .menu-toggle{
    display:block;
  }

  .nav-links{
    position:fixed;
    top:74px;
    left:14px;
    right:14px;

    background:#fff;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:10px;
    padding:22px;

    border-radius:24px;

    box-shadow:0 24px 70px rgba(0,0,0,.18);

    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;

    transition:all .3s ease;

    z-index:9999;
  }

  .nav-links.show{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .nav-links li{
    width:100%;
    list-style:none;
  }

  .nav-links a{
    width:100%;
    display:flex;
    align-items:center;

    padding:14px 18px;

    font-size:18px;
    font-weight:600;

    border-radius:14px;

    transition:.2s ease;
  }

  .nav-links a:hover,
  .nav-links a.active{
    background:var(--yellow);
    color:var(--ink);
  }

  .nav-links a.active::before,
  .nav-links a.active::after{
    display:none;
  }

  .nav-cta{
    width:100%;
    justify-content:center;
    margin-top:8px;
    margin-left:0;
    background:var(--ink) !important;
    color:#fff !important;
  }

  .foot-grid{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  .section-label{
    flex-direction:column;
    gap:16px;
  }

  .section-label .lead{
    max-width:none;
  }

  section{
    padding:70px 0;
  }

  .hero{
    padding:55px 0 80px;
  }

  h1.hero-title{
    font-size:clamp(44px,13vw,72px);
    line-height:.96;
  }

  .hero-sub{
    font-size:17px;
  }

  .btn-row{
    flex-direction:column;
    align-items:stretch;
  }

  .btn-row .btn{
    width:100%;
  }

  .deco-bracket{
    font-size:120px;
  }
}

@media (max-width:520px){

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

  .brand img{
    height:36px;
  }

  .wa-float{
    width:54px;
    height:54px;
    right:18px;
    bottom:18px;
  }
}